Skip to content

P
pica-learning-report
提交 6fc62990 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

首页组件开发

上级 2a9c5c58
隐藏空白字符变更
内嵌 并排
正在显示 包含 1188 行增加 和 108 行删除
components/bussiness/charts/chart-column.vue 0 → 100644
浏览文件 @ 6fc62990
<!-- 饼图 -->
<template>
<section class="chart-pie">
<div id="chartColumnId" :style="{width: '100%', height: '320px'}"></div>
</section>
</template>
<script>
import { format } from "path";
let vm = null;
export default {
props: {
pieData: {
type: Array,
default: () => [
{ value: 335, name: "优秀证书" },
{ value: 310, name: "及格证书" },
{ value: 234, name: "未获证" }
]
}
},
data() {
return {};
},
mounted() {
vm = this;
this.drawPie();
},
methods: {
// 画
drawPie() {
// 基于准备好的dom，初始化echarts实例
let chartColumn = this.$echarts.init(
document.getElementById("chartColumnId")
);
// 绘制图表
let options = {
color: [
"#6ab58f",
"#80c5d8",
"#c8abda",
"#dcdb5e",
"#e89b84",
"#abb7bb",
"#76d2d2"
],
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
top: 20,
data: ["获优秀人数", "获及格人数", "未获证人数"],
textStyle: {
fontSize: 12,
// fontWeight: "bolder",
color: "#676869"
}
},
grid: {
left: "3%",
right: "6%",
bottom: "6%",
containLabel: true
},
lineStyle: {
color: "#676869"
},
xAxis: {
axisTick: false,
type: "value",
axisLabel: {
formatter: "{value}",
textStyle: {
color: "#676869"
}
},
axisLine: {
lineStyle: {
color: "#efefef",
width: 1
}
}
},
yAxis: {
axisTick: false,
type: "category",
data: ["其他", "中专以下", "大专", "本科", "硕士", "博士"],
textStyle: {
fontSize: 12,
color: "#676869"
},
axisLabel: {
formatter: "{value}",
textStyle: {
color: "#676869"
}
},
axisLine: {
lineStyle: {
color: "#efefef",
width: 1
}
}
},
series: [
{
name: "获优秀人数",
type: "bar",
stack: "总量",
barWidth: 16, //柱图宽度
label: {
normal: {
show: false,
position: "insideRight"
}
},
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: "获及格人数",
type: "bar",
stack: "总量",
barWidth: 16, //柱图宽度
label: {
normal: {
show: false,
position: "insideRight"
}
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: "未获证人数",
type: "bar",
stack: "总量",
barWidth: 16, //柱图宽度
label: {
normal: {
show: false,
position: "insideRight"
}
},
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};
chartColumn.setOption(options);
},
fmtLengend(name) {
console.log(name);
let item = this.pieData.find(item => {
return item.name === name;
});
return (item && item.value) || "";
}
}
};
</script>
<style lang="scss" scoped>
.chart-pie {
position: relative;
top: -6px;
// height: 280px;
margin: 15px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.04);
border-radius: 6px;
border: 1px solid rgba(231, 232, 233, 1);
}
</style>
components/bussiness/charts/chart-pie copy.vue 0 → 100644
浏览文件 @ 6fc62990
<!-- 饼图 -->
<template>
<section class="chart-pie">
<!-- <ve-pie
ref="runTimes_creditChart"
:data="readAbilityIntervalData.pieData"
:tooltip-visible="true"
:settings="readAbilityIntervalData.settings"
:colors="options.colors"
></ve-pie>-->
<div id="myChart" :style="{width: '100%', height: '300px'}"></div>
</section>
</template>
<script>
import VePie from "v-charts/lib/pie";
export default {
props: {
title: {
type: String,
default: "证书分布情况"
},
needRightBtn: {
type: Boolean,
default: false
}
},
data() {
return {
chartHeight: "1000px",
readAbilityIntervalData: {
pieData: {
columns: ["distributionName", "ratio"],
rows: [
// 数据
{
distributionName: "落后",
ratio: "17" // 8% X 只能传入number 8% 不识别
},
{
distributionName: "不足",
ratio: "13"
},
{
distributionName: "良好",
ratio: "30"
}
]
},
msg: "",
settings: {
// radius : [ '30%', '50%' ],//内外圆的大小
center: [0, 0], //距离左右，上下距离的百分比
// grid: {
// x: 25,
// y: 45,
// x2: 5,
// y2: 20,
// borderWidth: 1
// },
grid: {
left: "5%", // 与容器左侧的距离
right: "5%" // 与容器右侧的距离
//top: '5%', // 与容器顶部的距离
//bottom: '5%', // 与容器底部的距离
},
dataType: "percent",
label: {
show: true,
position: "inner",
formatter: "描述文字\r\n\r\n{c}%" // 展示如果需要％
}
}
},
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
options: {
colors: [
"#6ab58f",
"#80c5d8",
"#c8abda",
"#dcdb5e",
"#e89b84",
"#abb7bb",
"#76d2d2"
]
}
};
},
components: {
VePie
},
mounted() {
this.drawLine();
// window.addEventListener("resize", this.resizeTheChart);
},
methods: {
resizeTheChart() {
if (this.$refs.runTimes_creditChart) {
this.$refs.runTimes_creditChart.resize();
}
},
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
title: { text: "在Vue中使用echarts" },
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
});
}
}
};
</script>
<style lang="scss" scoped>
.chart-pie {
position: relative;
top: -6px;
// height: 280px;
margin: 15px;
padding-top: 15px;
// height: 431px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.04);
border-radius: 6px;
border: 1px solid rgba(231, 232, 233, 1);
}
</style>
components/bussiness/charts/chart-pie.vue 0 → 100644
浏览文件 @ 6fc62990
<!-- 饼图 -->
<template>
<section class="chart-pie">
<div id="chartPieId" :style="{width: '100%', height: '220px'}"></div>
</section>
</template>
<script>
import { format } from "path";
let vm = null;
export default {
props: {
pieData: {
type: Array,
default: () => [
{ value: 335, name: "优秀证书" },
{ value: 310, name: "及格证书" },
{ value: 234, name: "未获证" }
]
}
},
data() {
return {
chartHeight: "1000px",
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
options: {
colors: [
"#6ab58f",
"#80c5d8",
"#c8abda",
"#dcdb5e",
"#e89b84",
"#abb7bb",
"#76d2d2"
]
}
};
},
mounted() {
vm = this;
this.drawPie();
},
methods: {
// 画饼图
drawPie() {
// 基于准备好的dom，初始化echarts实例
let chartPie = this.$echarts.init(document.getElementById("chartPieId"));
// 绘制图表
let options = {
color: [
"#6ab58f",
"#80c5d8",
"#c8abda",
"#dcdb5e",
"#e89b84",
"#abb7bb",
"#76d2d2"
],
title: {
text: "总人数: 1,339,220人",
// subtext: "纯属虚构",
top: 45,
left: 220,
textStyle: {
fontSize: 12,
fontWeight: "bolder",
color: "#000000"
}
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
type: "scroll",
orient: "vertical",
// orient:'horizontal',
left: 220,
top: 85,
bottom: 20,
data: ["优秀证书", "及格证书", "未获证"],
textStyle: {
fontSize: 12,
// fontWeight: "bolder",
color: "#8C8C8C"
},
// icon: "image://./assets/images/left-array-black.png", //格式为'image://+icon文件地址'，其中image::后的//不能省略 position: "inner",
formatter: function(name) {
return name + " " + vm.fmtLengend(name);
}
},
series: [
{
name: "证书分布情况",
type: "pie",
label: {
position: "inner",
formatter: function(config) {
return `${config.percent}%`;
// console.log(config);
}
},
radius: "65%",
// radius: ["30%", "60%"], //内外圆的大小
center: ["30%", "50%"],
data: vm.pieData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
};
chartPie.setOption(options);
},
fmtLengend(name) {
console.log(name);
let item = this.pieData.find(item => {
return item.name === name;
});
return (item && item.value) || "";
}
}
};
</script>
<style lang="scss" scoped>
.chart-pie {
position: relative;
top: -6px;
// height: 280px;
margin: 15px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.04);
border-radius: 6px;
border: 1px solid rgba(231, 232, 233, 1);
}
</style>
components/bussiness/ranking-item copy.vue 0 → 100644
浏览文件 @ 6fc62990
<!-- 培训情况排名组件 -->
<template>
<ul class="rank-item">
<li v-for="(item, index) in rankList" :key="index">
<section class="order">
1
</section>
<section class="content">
<p class="desc-1">福建省</p>
<p class="desc-2">完成人数 8860 | 参与人数 101</p>
</section>
<section class="ratio">
<p class="desc-1">83%</p>
<p class="desc-2">完成比例</p>
</section>
</li>
</ul>
</template>
<script>
export default {
props: {
rankList: {
type: Array,
default: () => [{
province: '福建省',
order: 1,
},{
province: '福建省',
order: 1,
},{
province: '福建省',
order: 1,
},{
province: '福建省',
order: 1,
},]
}
}
}
</script>
<style scoped lang="scss">
.rank-item {
margin: 20px 15px;
li {
height: 58px;
display: flex;
flex-direction: row;
margin: 20px 0;
border-bottom: 1px solid #F0F1F2;
.order {
width: 25px;
height: 38px;
line-height: 38px;
margin-right: 15px;
text-align: center;
font-size: 20px;
}
.content {
flex: 1;
}
.ratio {
width: 60px;
justify-content: right;
text-align: right;
}
}
.desc-1 {
height: 16px;
line-height: 16px;
padding-bottom: 10px;
font-size: 16px;
font-weight: 700;
color: #373839;
}
.desc-2 {
height: 12px;
line-height: 12px;
// padding-bottom: 10px;
font-size: 12px;
font-weight: 400;
color: #979899;
} }
</style>
\ No newline at end of file
components/bussiness/ranking-item-days.vue 0 → 100644
浏览文件 @ 6fc62990
<!-- 完成天数排名组件 -->
<template>
<ul class="rank-item">
<li v-for="(item, index) in rankList" :key="index">
<section class="order">
1
</section>
<section class="content">
<p class="desc-3">福建省</p>
<!-- <p class="desc-2">完成人数 8860 | 参与人数 101</p> -->
</section>
<section class="ratio">
<p class="desc-1">6.8天</p>
<p class="desc-2">完成天数</p>
</section>
</li>
</ul>
</template>
<script>
export default {
props: {
rankList: {
type: Array,
default: () => [{
province: '福建省',
order: 1,
},{
province: '福建省',
order: 1,
},{
province: '福建省',
order: 1,
},{
province: '福建省',
order: 1,
},]
}
}
}
</script>
<style scoped lang="scss">
.rank-item {
margin: 20px 15px;
li {
height: 78px;
display: flex;
flex-direction: row;
// margin-top: 20px;
border-bottom: 1px solid #F0F1F2;
.order {
width: 25px;
height: 78px;
line-height: 78px;
margin-right: 15px;
text-align: center;
font-size: 20px;
}
.content {
flex: 1;
}
.ratio {
box-sizing: border-box;
width: 60px;
padding-top: 20px;
height: 78px;
line-height: 78px;
justify-content: right;
text-align: right;
}
}
.desc-1 {
height: 16px;
line-height: 16px;
padding-bottom: 10px;
font-size: 16px;
font-weight: 700;
color: #373839;
}
.desc-2 {
height: 12px;
line-height: 12px;
// padding-bottom: 10px;
font-size: 12px;
font-weight: 400;
color: #979899;
}
.desc-3 {
height: 78px;
line-height: 78px;
font-size: 16px;
font-weight: 700;
color: #373839;
}
}
</style>
\ No newline at end of file
components/bussiness/ranking-item.vue
浏览文件 @ 6fc62990
<!-- 培训情况排名组件 -->
<template>
<ul class="rank-item">
<li v-for="(item, index) in rankList" :key="index">
<section class="order">
1
</section>
<section class="content">
<p class="desc-1">福建省</p>
<p class="desc-2">完成人数 8860 | 参与人数 101</p>
</section>
<section class="ratio">
<p class="desc-1">83%</p>
<p class="desc-2">完成比例</p>
</section>
</li>
</ul>
</template>
<script>
export default {
props: {
rankList: {
type: Array,
default: () => [{
province: '福建省',
order: 1,
},{
province: '福建省',
order: 1,
},{
province: '福建省',
order: 1,
},{
province: '福建省',
order: 1,
},]
}
}
}
</script>
<style scoped lang="scss">
.rank-item {
margin: 0 15px;
li {
height: 78px;
display: flex;
flex-direction: row;
// margin: 20px 0;
border-bottom: 1px solid #F0F1F2;
.order {
width: 25px;
height: 78px;
line-height: 78px;
margin-right: 15px;
text-align: center;
font-size: 20px;
}
.content {
flex: 1;
padding-top: 20px;
// height: 78px;
// line-height: 78px;
}
.ratio {
padding-top: 20px;
width: 60px;
justify-content: right;
text-align: right;
}
}
.desc-1 {
height: 16px;
line-height: 16px;
padding-bottom: 10px;
font-size: 16px;
font-weight: 700;
color: #373839;
}
.desc-2 {
height: 12px;
line-height: 12px;
// padding-bottom: 10px;
font-size: 12px;
font-weight: 400;
color: #979899;
} }
</style>
\ No newline at end of file
components/common/common-bottom-info.vue 0 → 100644
浏览文件 @ 6fc62990
<!-- Tabs组件 -->
<template>
<section class="common-bottom-info">
<span>{{infoMsg}}</span>
</section>
</template>
<script>
export default {
props: {
infoMsg: {
type: String,
default: '更多报告信息请前往【云鹊医官网电脑端-工作站-学情报告】查看'
}
},
}
</script>
<style lang="scss" scoped>
.common-bottom-info {
width: 100%;
height: 35px;
line-height: 35px;
text-align: center;
color: #979899;
font-size: 12px;
background: #F8F9FA;
}
</style>
\ No newline at end of file
components/common/common-header.vue
浏览文件 @ 6fc62990
......@@ -16,7 +16,7 @@ export default {
props: {
title: {
type: String,
default: "标题内容标题内容标题内容标题"
default: "2019基础高血压管理"
},
needRightBtn: {
type: Boolean,
......@@ -47,7 +47,7 @@ export default {
.left {
box-sizing: border-box;
text-align: left;
padding-top: 10px;
// padding-top: 10px;
padding-left: 15px;
// height: 44px;
// line-height: 44px;
......
components/common/common-show-all copy.vue 0 → 100644
浏览文件 @ 6fc62990
<template>
<section class="common-show-all">
<!-- <div style="height: 50px;line-height:50px;text-align:center;position:relative;"> -->
<!-- <span>查看全部</span>
<img src="../../assets/images/left-array-black.png" />-->
<!-- </div> -->
</section>
</template>
<script>
export default {
data() {
return {};
},
props: {
needMarginTop: {
type: Boolean,
default: false
},
btnText: {
type: String,
default: "查看全部"
},
itemIndex: {
type: String,
default: "0"
}
},
methods: {
showAllItem() {
this.$emit("showAllItem");
}
}
};
</script>
<style lang="scss" scoped>
.hear {
background: url(../../assets/images/left-array-black.png) no-repeat center
center no-repeat;
background-size: 8px 14px;
margin-right: 20px;
}
.comment {
background: url(../../assets/images/left-array-black.png) left center
no-repeat;
background-size: 8px 14px;
}
.hear,
.comment {
height: 30px;
line-height: 30px;
padding-left: 20px;
}
// @import '@/assets/style/mixin';
// @import '@/assets/style/global';
.common-show-all {
// position: relative;
height: 50;
line-height: 50px;
text-align: center;
span {
display: inline-block;
height: 14px;
line-height: 14px;
font-size: 14px;
}
img {
display: inline-block;
width: 10px;
height: 14px;
vertical-align: middle;
// position: absolute;
}
}
</style>
components/common/common-show-all.vue
浏览文件 @ 6fc62990
<!-- Tabs组件 -->
<template>
<section class="common-show-all" >
<span :class="{'margin-top15': needMarginTop}" @click="showAllItem">{{btnText}}</span>
</section>
<div class="common-header">
<span>
查看全部
<img src="../../assets/images/left-array-black.png" @click="back" />
</span>
</div>
</template>
<script>
export default {
data() {
return {
}
},
props: {
needMarginTop: {
type: Boolean,
default: false
},
btnText: {
title: {
type: String,
default: '查看全部'
default: "2019基础高血压管理"
},
itemIndex: {
type: String,
default: '0'
needRightBtn: {
type: Boolean,
default: true
}
},
methods: {
showAllItem() {
this.$emit('showAllItem')
}
back() {}
}
}
};
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
// @import '@/assets/style/global';
.common-show-all {
.common-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: px2rem(6px);
width: 100%;
height: 14px;
line-height: 14px;
margin: 20px 0;
text-align: center;
span {
flex: 1;
display: inline-block;
width: px2rem(345px);
height: px2rem(40px);
line-height: px2rem(40px);
margin-bottom: px2rem(15px);
text-align: center;
border-radius: px2rem(22px);
color: #676869;
background: #F8F9FA;
}
.margin-top15 {
margin-top: px2rem(15px);
font-size: 14px;
font-weight: 400;
color: #979899;
img {
width: 14px;
height: 14px;
vertical-align: middle;
padding-bottom: 4px;
}
}
}
</style>
components/common/commo-split-line.vue → components/common/common-split-line.vue
浏览文件 @ 6fc62990
<template>
<div :style="{'height': height, 'background-color': bgColor}"></div>
<div
class="common-split-line"
:style="{'height': height, 'background-color': bgColor}"
></div>
</template>
<script>
export default {
props: {
height: {
type: String,
default: '1px'
default: '6px'
},
bgColor: {
type: String,
......@@ -17,7 +20,9 @@ export default {
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
// @import '@/assets/style/mixin';
// @import '@/assets/style/global';
.common-split-line {
margin: 20px 0;
}
</style>
components/common/common-swiper-item.vue
浏览文件 @ 6fc62990
......@@ -5,7 +5,7 @@
<div class="title">
<span>获证率</span>
<span>
<img src="../../assets/images/left-array-black.png"/>
<img src="../../assets/images/left-array-black.png" />
</span>
</div>
<div class="ratio">
......@@ -28,7 +28,7 @@
<span class="desc-num">已获人数 5678</span>
<span class="desc-num">应参与人数 5678</span>
</div>
<div class="item">
<div class="item">
<div class="wrapper">
<span>
<div class="desc">人员参与率</div>
......@@ -39,8 +39,6 @@
<span class="desc-num">已获人数 5678</span>
<span class="desc-num">应参与人数 5678</span>
</div>
<!-- <div class="item"></div>
<div class="item"></div>-->
</article>
</section>
</template>
......@@ -58,6 +56,7 @@ export default {
<style lang="scss" scoped>
.common-swiper-item {
margin-top: 20px;
display: block;
.middle {
display: block;
......@@ -68,35 +67,53 @@ export default {
// width: 345px;
height: 128px;
padding: 20px 15px;
background: #b4d4ce;
// background: #b4d4ce;
background: linear-gradient(
180deg,
rgba(6, 190, 182, 1) 0%,
rgba(72, 177, 191, 1) 100%
);
box-shadow: 0px 5px 10px 0px rgba(68, 146, 132, 0.1);
border-radius: 6px;
border: 1px solid rgba(180, 212, 206, 1);
.ratio {
margin-bottom: 10px;
height: 24px;
line-height: 24px;
width: 100px;
margin: 6px 0 24px;
// height: 80px;
span {
color: #449284;
font-size: 29px;
display: inline-block;
height: 24px;
line-height: 24px;
color: #fff;
font-size: 24px;
}
}
.title,
.statics {
display: flex;
justify-content: space-between;
height: 14px;
line-height: 14px;
span {
color: #449284;
color: #fff;
font-size: 14px;
}
img {
width: 30px;
height: 30px;
}
}
}
.mini {
display: block;
display: flex;
justify-content: space-between;
margin: 9px 15px;
.item {
display: inline-block;
width: 138px;
height: 105px;
width: 135px;
height: 95px;
padding: 15px;
background: #000;
border-radius: 6px;
......@@ -106,17 +123,21 @@ export default {
.wrapper {
display: flex;
justify-content: space-between;
padding-bottom: 10px;
margin-bottom: 18px;
.desc {
color: #676869;
height: 12px;
line-height: 12px;
font-size: 12px;
font-weight: 700;
padding-bottom: 2px;
color: #676869;
}
.ratio {
color: #449284;
height: 21px;
line-height: 21px;
font-size: 21px;
font-weight: 700;
color: #449284;
padding-top: 10px;
}
img {
width: 30px;
......@@ -125,10 +146,11 @@ export default {
}
.desc-num {
display: block;
height: 22px;
line-height: 22px;
color: #979899;
height: 12px;
line-height: 12px;
font-size: 12px;
margin-top: 8px;
color: #979899;
}
}
}
......
components/common/common-tabs.vue
浏览文件 @ 6fc62990
......@@ -67,7 +67,7 @@ export default {
display: block;
width: 100%;
height: 1px;
bottom: -5px;
bottom: -3px;
left: 0;
// padding-top: 6px;
border-bottom: 1px solid #F0F1F2;
......@@ -78,12 +78,12 @@ export default {
.common-tabs {
white-space: nowrap;
overflow-x: auto;
height: 30px;
// height: 30px;
padding-bottom: 6px;
span {
display: inline-block;
height: 30px;
line-height: 30px;
height: 31px;
line-height: 31px;
font-size: 13px;
font-weight: 700;
margin: 0 6px;
......
components/common/common-title.vue
浏览文件 @ 6fc62990
......@@ -23,14 +23,16 @@ export default {
<style lang="scss" scoped>
.common-title {
margin: 30px 15px 15px;
// margin: 15px;
margin: 30px 15px 20px;
span {
display: inline-block;
&.left {
// width: 216px;
display: block;
height: 18px;
font-size: 18px;
line-height: 18px;
font-size: 18px;
font-weight: 700;
color: rgba(55, 56, 57, 1);
}
......
nuxt.config.js
浏览文件 @ 6fc62990
......@@ -7,7 +7,7 @@ module.exports = {
title: '云鹊医-赋能基层医生',
meta: [
{ charset: 'utf-8' },
// { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui' },
{ name: 'screen-orientation', content: 'portrait' },
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
{ name: 'format-detection', content: 'telephone=no' },
......
package.json
浏览文件 @ 6fc62990
......@@ -6,7 +6,7 @@
"private": true,
"scripts": {
"test": "jest",
"dev": "cross-env NODE_ENV=development NUXT_ENV_APP=dev PORT=4001 nodemon server/index.js --watch server",
"dev": "cross-env NODE_ENV=development NUXT_ENV_APP=dev HOST=10.177.11.247 PORT=4001 nodemon server/index.js --watch server",
"build": "NUXT_ENV_APP=${ENV} nuxt build",
"start": "cross-env NUXT_ENV_APP=${ENV} HOST=0.0.0.0 PORT=3010 NODE_ENV=production node server/index.js",
"generate": "nuxt generate"
......
pages/index copy.vue 0 → 100644
浏览文件 @ 6fc62990
<template>
<div class="container">
<CommonHeader></CommonHeader>
<!-- <CommonTitle></CommonTitle> -->
<!-- <CommonLoading></CommonLoading> -->
<!-- <CommonTaps></CommonTaps>
<CommonSwiperItem></CommonSwiperItem>
<CommonTitle></CommonTitle> -->
<!-- <div style="height: 340px; border: 1px solid red; margin: 15px; padding-top: 15px;position: relative; top: -10px;">
<ve-pie
ref="runTimes_creditChart"
:data="readAbilityIntervalData.pieData"
:tooltip-visible="false"
:settings="readAbilityIntervalData.settings"
:colors="options.colors"
></ve-pie>
</div> -->
<!-- <no-ssr>
<ChartPie></ChartPie>
</no-ssr> -->
<!-- <CommonTitle title="证书级别按学历分布情况"></CommonTitle> -->
<!-- <div style="padding: 0 15px;">
<ve-line :data="chartData1"></ve-line>
</div> -->
<!-- <CommonSplitLine></CommonSplitLine>
<CommonTitle title="培训情况排名"></CommonTitle>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成天数排名"></CommonTitle> -->
<CommonTitle title="培训情况排名"></CommonTitle>
<RankingList></RankingList>
<ShowAll></ShowAll>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成天数排名"></CommonTitle>
<RankingItemDays></RankingItemDays>
<ShowAll></ShowAll>
<!-- <CommonSplitLine></CommonSplitLine> -->
<CommonBottomInfo></CommonBottomInfo>
</div>
</template>
<script>
import VePie from "v-charts/lib/pie";
import VeLine from "v-charts/lib/line";
import CommonHeader from "../components/common/common-header";
import CommonTitle from "../components/common/common-title";
import CommonLoading from "../components/common/common-loading";
import CommonTaps from "../components/common/common-tabs";
import CommonSwiperItem from "../components/common/common-swiper-item";
import CommonSplitLine from "../components/common/common-split-line";
import RankingList from "../components/bussiness/ranking-item";
import ChartPie from "../components/bussiness/charts/chart-pie";
import ShowAll from "../components/common/common-show-all";
import CommonBottomInfo from "../components/common/common-bottom-info";
import RankingItemDays from "../components/bussiness/ranking-item-days";
export default {
components: {
CommonHeader,
CommonTitle,
VePie,
VeLine,
CommonLoading,
CommonTaps,
CommonSwiperItem,
CommonSplitLine,
RankingList,
ChartPie,
ShowAll,
CommonBottomInfo,
RankingItemDays
},
data() {
// this.chartSetting = {
// width: "1000px",
// height: "800px"
// };
return {
chartData1: {
columns: ["date", "PV"],
rows: [
{ date: "01-01", PV: 1231 },
{ date: "01-02", PV: 1223 },
{ date: "01-03", PV: 2123 },
{ date: "01-04", PV: 4123 },
]
},
echartsSettings: {
height: '500px'
},
chartWidth: "1000px",
chartHeight: "1000px",
readAbilityIntervalData: {
pieData: {
columns: ["distributionName", "ratio"],
rows: [
// 数据
{
distributionName: "落后",
ratio: "17" // 8% X 只能传入number 8% 不识别
},
{
distributionName: "不足",
ratio: "13"
},
{
distributionName: "良好",
ratio: "30"
}
]
},
msg: "",
settings: {
dataType: "percent",
label: {
show: true,
position: "outside",
formatter: "{c}%" // 展示如果需要％
}
}
},
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
options: {
colors: [
"#6ab58f",
"#80c5d8",
"#c8abda",
"#dcdb5e",
"#e89b84",
"#abb7bb",
"#76d2d2"
]
}
};
},
async asyncData() {
return {};
},
created() {
// this.$store.dispatch('searchHospital', { name: '测试' });
},
mounted() {
// window.addEventListener("resize", this.resizeTheChart);
},
methods: {
resizeTheChart() {
if (this.$refs.runTimes_creditChart) {
this.$refs.runTimes_creditChart.resize();
}
}
}
};
</script>
<style lang="less">
.container {
margin: 0 auto;
min-height: 100vh;
h1 {
font-size: 36px;
text-align: center;
}
.m1 {
width: 100%;
> div {
width: 100%;
}
img {
width: 100%;
}
}
}
</style>
pages/index.vue
浏览文件 @ 6fc62990
<template>
<div class="container">
<CommonHeader></CommonHeader>
<CommonTaps></CommonTaps>
<CommonSwiperItem></CommonSwiperItem>
<CommonTitle title="证书分布情况"></CommonTitle>
<ChartPie></ChartPie>
<!-- <CommonSplitLine></CommonSplitLine> -->
<CommonTitle title="证书级别按学历分布情况"></CommonTitle>
<ChartColumn></ChartColumn>
<!-- <CommonTitle></CommonTitle> -->
<!-- <CommonLoading></CommonLoading> -->
<!-- <CommonTaps></CommonTaps> -->
<!-- <CommonTaps></CommonTaps>
<CommonSwiperItem></CommonSwiperItem>
<CommonTitle></CommonTitle>
<ve-pie :data="chartData" :settings="chartSetting" :echarts="echartsSettings" :height="chartHeight"></ve-pie>
<CommonTitle></CommonTitle> -->
<!-- <CommonTitle title="证书级别按学历分布情况"></CommonTitle> -->
<!-- <div style="padding: 0 15px;">
<ve-line :data="chartData1"></ve-line>
</div> -->
<!-- <CommonSplitLine></CommonSplitLine>
<CommonTitle title="培训情况排名"></CommonTitle>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成天数排名"></CommonTitle> -->
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="培训情况排名"></CommonTitle>
<RankingList></RankingList>
<ShowAll></ShowAll>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成天数排名"></CommonTitle>
<RankingItemDays></RankingItemDays>
<ShowAll></ShowAll>
<!-- <CommonSplitLine></CommonSplitLine> -->
<CommonBottomInfo></CommonBottomInfo>
</div>
</template>
<script>
import VePie from 'v-charts/lib/pie'
import CommonHeader from '../components/common/common-header'
import CommonTitle from '../components/common/common-title'
import CommonLoading from '../components/common/common-loading'
import CommonTaps from '../components/common/common-tabs'
import CommonSwiperItem from '../components/common/common-swiper-item'
// import VePie from "v-charts/lib/pie";
// import VeLine from "v-charts/lib/line";
import CommonHeader from "../components/common/common-header";
import CommonTitle from "../components/common/common-title";
import CommonLoading from "../components/common/common-loading";
import CommonTaps from "../components/common/common-tabs";
import CommonSwiperItem from "../components/common/common-swiper-item";
import CommonSplitLine from "../components/common/common-split-line";
import RankingList from "../components/bussiness/ranking-item";
import ShowAll from "../components/common/common-show-all";
import CommonBottomInfo from "../components/common/common-bottom-info";
import RankingItemDays from "../components/bussiness/ranking-item-days";
import ChartPie from "../components/bussiness/charts/chart-pie";
import ChartColumn from "../components/bussiness/charts/chart-column";
export default {
components: {
CommonHeader,
CommonTitle,
VePie,
CommonTitle,
// VePie,
// VeLine,
CommonLoading,
CommonTaps,
CommonSwiperItem,
CommonSplitLine,
RankingList,
ChartPie,
ShowAll,
CommonBottomInfo,
RankingItemDays,
ChartColumn
},
data() {
// this.chartSetting = {
// width: "1000px",
// height: "800px"
// };
return {
chartData: {
columns: ['date', 'PV'],
chartData1: {
columns: ["date", "PV"],
rows: [
{ 'date': '01-01', 'PV': 1231 },
{ 'date': '01-02', 'PV': 1223 },
{ 'date': '01-03', 'PV': 2123 },
{ 'date': '01-04', 'PV': 4123 },
{ 'date': '01-05', 'PV': 3123 },
{ 'date': '01-06', 'PV': 7123 }
{ date: "01-01", PV: 1231 },
{ date: "01-02", PV: 1223 },
{ date: "01-03", PV: 2123 },
{ date: "01-04", PV: 4123 },
]
},
chartSetting: {
width: '1000',
height: '800'
},
echartsSettings: {
echartsSettings: {
height: '500px'
},
chartWidth: '1000px',
chartHeight: '1000px'
}
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
options: {
colors: [
"#6ab58f",
"#80c5d8",
"#c8abda",
"#dcdb5e",
"#e89b84",
"#abb7bb",
"#76d2d2"
]
}
};
},
async asyncData() {
return {
}
return {};
},
created() {
// this.$store.dispatch('searchHospital', { name: '测试' });
},
mounted() {}
}
mounted() {
// window.addEventListener("resize", this.resizeTheChart);
},
methods: {
resizeTheChart() {
if (this.$refs.runTimes_creditChart) {
this.$refs.runTimes_creditChart.resize();
}
}
}
};
</script>
<style lang="less">
......
plugins/vue-inject.js
浏览文件 @ 6fc62990
import Vue from 'vue'
import rocNative from '@/utils/jsbridge'
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.prototype.$rocNative = new rocNative();
\ No newline at end of file
server/index.js
浏览文件 @ 6fc62990
......@@ -13,7 +13,7 @@ async function start() {
const nuxt = new Nuxt(config)
const {
host = process.env.HOST || '127.0.0.1',
host = process.env.HOST || '10.177.11.247' || '127.0.0.1',
port = process.env.PORT || 3000
} = nuxt.options.server
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或