Skip to content

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

概况页面接入数据

上级 5183d072
隐藏空白字符变更
内嵌 并排
正在显示 包含 617 行增加 和 121 行删除
components/bussiness/charts/chart-pie-cert.vue 0 → 100644
浏览文件 @ 10ce5444
<!-- 证书分布情况饼图 -->
<template>
<section class="chart-pie">
<div :id="pieId" :style="{width: '360px', height: '220px'}"></div>
</section>
</template>
<script>
import { format } from "path";
import { echartColors } from '@/utils/index'
let vm = null;
export default {
name: "certPie",
props: {
id: {
type: String,
default: 'chartPieId'
},
pieData: {
type: Array,
default: () => [
{ value: 335, name: "优秀证书" },
{ value: 310, name: "及格证书" },
{ value: 234, name: "未获证" }
]
}
},
data() {
return {
pieId: 'certPieId',
chartHeight: "1000px",
handledData: {},
legendData: [],
seriesData: {}
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
};
},
watch: {
pieData: {
handler(newValue, oldValue) {
this.handlePieData(newValue);
this.drawPie();
},
deep: true
}
},
mounted() {
vm = this;
},
methods: {
handlePieData(pieData) {
this.legendData = pieData.map( item => {
return item.certName
})
this.seriesData = pieData.map( item => {
return { name: item.certName, value: item.doneCount}
})
},
// 画饼图
drawPie() {
// 基于准备好的dom，初始化echarts实例
let chartPie = vm.$echarts.init(document.getElementById(vm.pieId));
// 绘制图表
let options = {
color: echartColors,
// title: {
// text: "总人数: 1,339,220人",
// // subtext: "纯属虚构",
// top: '20%',
// left: '60%',
// textStyle: {
// fontSize: 12,
// fontWeight: "bolder",
// color: "#000000"
// }
// },
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
type: "scroll",
orient: "vertical",
// orient:'horizontal',
top: '30%',
left: '60%',
bottom: 20,
data: vm.legendData, // ["优秀证书", "及格证书", "未获证"],
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}%`;
}
},
radius: "65%",
center: ["30%", "50%"],
data: vm.seriesData, // vm.pieData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
};
chartPie.setOption(options, true);
},
fmtLengend(name) {
console.log(name);
let item = this.pieData.find(item => {
return item.certName === name;
});
return (item && item.doneCount) || "";
}
}
};
</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-edu.vue 0 → 100644
浏览文件 @ 10ce5444
<!-- 人员学历情况饼图 -->
<template>
<section class="chart-pie">
<div :id="pieId" :style="{width: '360px', height: '220px'}"></div>
</section>
</template>
<script>
import { format } from "path";
import { echartColors } from '@/utils/index'
let vm = null;
export default {
name: "eduPie",
props: {
pieData: {
type: Array,
default: () => [
{ value: 335, name: "优秀证书" },
{ value: 310, name: "及格证书" },
{ value: 234, name: "未获证" }
]
}
},
data() {
return {
pieId: 'eduPieId',
chartHeight: "1000px",
handledData: {},
legendData: [],
seriesData: {}
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
};
},
watch: {
pieData: {
handler(newValue, oldValue) {
this.handlePieData(newValue);
this.drawPie();
},
deep: true
}
},
mounted() {
vm = this;
},
methods: {
handlePieData(pieData) {
this.legendData = pieData.map( item => {
return item.certName
})
this.seriesData = pieData.map( item => {
return { name: item.certName, value: item.doneCount}
})
},
// 画饼图
drawPie() {
// 基于准备好的dom，初始化echarts实例
let chartPie = vm.$echarts.init(document.getElementById(vm.pieId));
// 绘制图表
let options = {
color: echartColors,
// title: {
// text: "总人数: 1,339,220人",
// // subtext: "纯属虚构",
// top: '20%',
// left: '60%',
// textStyle: {
// fontSize: 12,
// fontWeight: "bolder",
// color: "#000000"
// }
// },
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
type: "scroll",
orient: "vertical",
// orient:'horizontal',
top: '30%',
left: '60%',
bottom: 20,
data: vm.legendData, // ["优秀证书", "及格证书", "未获证"],
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}%`;
}
},
radius: "65%",
center: ["30%", "50%"],
data: vm.seriesData, // vm.pieData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
};
chartPie.setOption(options, true);
},
fmtLengend(name) {
console.log(name);
let item = this.pieData.find(item => {
return item.certName === name;
});
return (item && item.doneCount) || "";
}
}
};
</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-title.vue 0 → 100644
浏览文件 @ 10ce5444
<!-- 人员职称情况饼图 -->
<template>
<section class="chart-pie">
<div :id="pieId" :style="{width: '360px', height: '220px'}"></div>
</section>
</template>
<script>
import { format } from "path";
import { echartColors } from '@/utils/index'
let vm = null;
export default {
name: "titlePie",
props: {
pieData: {
type: Array,
default: () => [
{ value: 335, name: "优秀证书" },
{ value: 310, name: "及格证书" },
{ value: 234, name: "未获证" }
]
}
},
data() {
return {
pieId: 'titlePieId',
chartHeight: "1000px",
handledData: {},
legendData: [],
seriesData: {}
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
};
},
watch: {
pieData: {
handler(newValue, oldValue) {
this.handlePieData(newValue);
this.drawPie();
},
deep: true
}
},
mounted() {
vm = this;
},
methods: {
handlePieData(pieData) {
this.legendData = pieData.map( item => {
return item.certName
})
this.seriesData = pieData.map( item => {
return { name: item.certName, value: item.doneCount}
})
},
// 画饼图
drawPie() {
// 基于准备好的dom，初始化echarts实例
let chartPie = vm.$echarts.init(document.getElementById(vm.pieId));
// 绘制图表
let options = {
color: echartColors,
// title: {
// text: "总人数: 1,339,220人",
// // subtext: "纯属虚构",
// top: '20%',
// left: '60%',
// textStyle: {
// fontSize: 12,
// fontWeight: "bolder",
// color: "#000000"
// }
// },
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
type: "scroll",
orient: "vertical",
// orient:'horizontal',
top: '30%',
left: '60%',
bottom: 20,
data: vm.legendData, // ["优秀证书", "及格证书", "未获证"],
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}%`;
}
},
radius: "65%",
center: ["30%", "50%"],
data: vm.seriesData, // vm.pieData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
};
chartPie.setOption(options, true);
},
fmtLengend(name) {
console.log(name);
let item = this.pieData.find(item => {
return item.certName === name;
});
return (item && item.doneCount) || "";
}
}
};
</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.vue
浏览文件 @ 10ce5444
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
import { format } from "path"; import { format } from "path";
import { echartColors } from '@/utils/index' import { echartColors } from '@/utils/index'
let vm = null; let vm = null;
let chartPie = null;
let options = null;
export default { export default {
props: { props: {
id: { id: {
...@@ -26,32 +28,53 @@ export default { ...@@ -26,32 +28,53 @@ export default {
data() { data() {
return { return {
chartHeight: "1000px", chartHeight: "1000px",
handledData: {},
legendData: [],
seriesData: {}
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取 // 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
}; };
}, },
watch: {
pieData: {
handler(newValue, oldValue) {
this.handlePieData(newValue);
this.drawPie();
},
deep: true
}
},
mounted() { mounted() {
vm = this; vm = this;
this.drawPie();
}, },
methods: { methods: {
handlePieData(pieData) {
this.legendData = pieData.map( item => {
return item.certName
})
this.seriesData = pieData.map( item => {
return { name: item.certName, value: item.doneCount}
})
},
// 画饼图 // 画饼图
drawPie() { drawPie() {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
let chartPie = this.$echarts.init(document.getElementById(this.id)); if(!chartPie) {
chartPie = vm.$echarts.init(document.getElementById(vm.id));
}
// 绘制图表 // 绘制图表
let options = { options = {
color: echartColors, color: echartColors,
title: { // title: {
text: "总人数: 1,339,220人", // text: "总人数: 1,339,220人",
// subtext: "纯属虚构", // // subtext: "纯属虚构",
top: '20%', // top: '20%',
left: '60%', // left: '60%',
textStyle: { // textStyle: {
fontSize: 12, // fontSize: 12,
fontWeight: "bolder", // fontWeight: "bolder",
color: "#000000" // color: "#000000"
} // }
}, // },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)" formatter: "{a} <br/>{b} : {c} ({d}%)"
...@@ -64,7 +87,7 @@ export default { ...@@ -64,7 +87,7 @@ export default {
top: '30%', top: '30%',
left: '60%', left: '60%',
bottom: 20, bottom: 20,
data: ["优秀证书", "及格证书", "未获证"], data: vm.legendData, // ["优秀证书", "及格证书", "未获证"],
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
// fontWeight: "bolder", // fontWeight: "bolder",
...@@ -87,7 +110,7 @@ export default { ...@@ -87,7 +110,7 @@ export default {
}, },
radius: "65%", radius: "65%",
center: ["30%", "50%"], center: ["30%", "50%"],
data: vm.pieData, data: vm.seriesData, // vm.pieData,
itemStyle: { itemStyle: {
emphasis: { emphasis: {
shadowBlur: 10, shadowBlur: 10,
...@@ -98,14 +121,14 @@ export default { ...@@ -98,14 +121,14 @@ export default {
} }
] ]
}; };
chartPie.setOption(options); chartPie.setOption(options, true);
}, },
fmtLengend(name) { fmtLengend(name) {
console.log(name); console.log(name);
let item = this.pieData.find(item => { let item = this.pieData.find(item => {
return item.name === name; return item.certName === name;
}); });
return (item && item.value) || ""; return (item && item.doneCount) || "";
} }
} }
}; };
......
components/bussiness/ranking-item-days.vue
浏览文件 @ 10ce5444
...@@ -2,21 +2,27 @@ ...@@ -2,21 +2,27 @@
<template> <template>
<ul class="rank-item"> <ul class="rank-item">
<li v-for="(item, index) in rankList" :key="index"> <li v-for="(item, index) in rankList" :key="index">
<div class="order"> <div class="order">1</div>
1
</div>
<div class="content"> <div class="content">
<p class="desc-3">福建省</p> <p class="desc-3">{{item.subName}}</p>
<!-- <p class="desc-2">完成人数 8860 | 参与人数 101</p> --> <!-- <p class="desc-2">完成人数 8860 | 参与人数 101</p> -->
</div> </div>
<div class="ratio"> <div class="ratio">
<p class="desc-1">6.8天</p> <p class="desc-1">{{item.costTime}}</p>
<p class="desc-2">完成天数</p> <p class="desc-2">完成天数</p>
</div> </div>
</li> </li>
</ul> </ul>
</template> </template>
<script> <script>
// {
// "subId":10000,
// "subName":null,
// "certCount":0,
// "joinCount":0,
// "certRate":0,
// "costTime":2000
// }
export default { export default {
props: { props: {
rankList: { rankList: {
...@@ -39,58 +45,57 @@ export default { ...@@ -39,58 +45,57 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.rank-item { .rank-item {
margin: 20px 15px; margin: 20px 15px;
li { li {
height: 78px;
display: flex;
flex-direction: row;
// margin-top: 20px;
border-bottom: 1px solid #f0f1f2;
.order {
width: 25px;
height: 78px; height: 78px;
display: flex; line-height: 78px;
flex-direction: row; margin-right: 15px;
// margin-top: 20px; text-align: center;
border-bottom: 1px solid #F0F1F2; font-size: 20px;
.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 { .content {
height: 16px; flex: 1;
line-height: 16px;
padding-bottom: 10px;
font-size: 16px;
font-weight: 700;
color: #373839;
} }
.desc-2 { .ratio {
height: 12px; box-sizing: border-box;
line-height: 12px; width: 60px;
// padding-bottom: 10px; padding-top: 20px;
font-size: 12px;
font-weight: 400;
color: #979899;
}
.desc-3 {
height: 78px; height: 78px;
line-height: 78px; line-height: 78px;
font-size: 16px; justify-content: right;
font-weight: 700; text-align: right;
color: #373839;
} }
} }
.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> </style>
\ No newline at end of file
components/bussiness/ranking-item.vue
浏览文件 @ 10ce5444
<!-- 培训情况排名组件 --> <!-- 培训情况排名组件 -->
<template> <template>
<ul class="rank-item"> <ul class="rank-item">
<li v-for="(item, index) in rankList" :key="index"> <li v-for="(item, index) in studyRank" :key="index">
<section class="order"> <section class="order">
1 1
</section> </section>
<section class="content"> <section class="content">
<p class="desc-1">福建省</p> <p class="desc-1">{{item.subName}}</p>
<p class="desc-2">完成人数 8860 | 参与人数 101</p> <p class="desc-2">完成人数 {{item.certCount}} | 参与人数 {{item.certCount}}</p>
</section> </section>
<section class="ratio"> <section class="ratio">
<p class="desc-1">83%</p> <p class="desc-1">{{(item.certRate * 100).toFixed(0)}}%</p>
<p class="desc-2">完成比例</p> <p class="desc-2">完成比例</p>
</section> </section>
</li> </li>
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<script> <script>
export default { export default {
props: { props: {
rankList: { studyRank: {
type: Array, type: Array,
default: () => [{ default: () => [{
province: '福建省', province: '福建省',
...@@ -35,7 +35,15 @@ export default { ...@@ -35,7 +35,15 @@ export default {
order: 1, order: 1,
},] },]
} }
} },
watch: {
studyRank: {
handler(newValue, oldValue) {
return newValue
},
deep: true
}
},
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
......
components/common/common-area-select.vue
浏览文件 @ 10ce5444
...@@ -2,13 +2,14 @@ ...@@ -2,13 +2,14 @@
<template> <template>
<ul class="common-area-select"> <ul class="common-area-select">
<li class="center" @click="areaClick"> <li class="center" @click="areaClick">
{{areaName}}<img src="../../assets/images/left-array-black.png"/> {{areaName}}<img src="../../assets/images/arr-down.png"/>
</li> </li>
<li class="center" @click="orgClick"> <li class="center" @click="orgClick">
{{orgName}}<img src="../../assets/images/arr-down.png"/>
</li>
<!-- <li class="center" @click="orgClick">
{{orgName}}<img src="../../assets/images/left-array-black.png"/> {{orgName}}<img src="../../assets/images/left-array-black.png"/>
</li> <li class="center" @click="orgClick"> </li> -->
{{orgName}}<img src="../../assets/images/left-array-black.png"/>
</li>
</ul> </ul>
</template> </template>
<script> <script>
...@@ -20,7 +21,7 @@ export default { ...@@ -20,7 +21,7 @@ export default {
}, },
orgName: { orgName: {
type: String, type: String,
default: "全部区域" default: "全部机构"
} }
}, },
methods: { methods: {
......
components/common/common-swiper-item.vue
浏览文件 @ 10ce5444
...@@ -5,15 +5,15 @@ ...@@ -5,15 +5,15 @@
<div class="title"> <div class="title">
<span>获证率</span> <span>获证率</span>
<span> <span>
<img src="../../assets/images/left-array-black.png" /> <img src="../../assets/images/tips-1.png" />
</span> </span>
</div> </div>
<div class="ratio"> <div class="ratio">
<span>21.6%</span> <span>{{(percentData.certificateRate * 100).toFixed(0)}}%</span>
</div> </div>
<div class="statics"> <div class="statics">
<span>已获人数 5678</span> <span>已获证人数 {{percentData.finishCount}}</span>
<span>应参与人数 5678</span> <span>应参与人数 {{percentData.joinCount}}</span>
</div> </div>
</article> </article>
<article class="mini"> <article class="mini">
...@@ -21,23 +21,23 @@ ...@@ -21,23 +21,23 @@
<div class="wrapper"> <div class="wrapper">
<span> <span>
<div class="desc">人员参与率</div> <div class="desc">人员参与率</div>
<div class="ratio">21.6%</div> <div class="ratio">{{(percentData.doctorRate * 100).toFixed(0)}}%</div>
</span> </span>
<img src="../../assets/images/left-array-black.png" /> <img src="../../assets/images/tips-2.png" />
</div> </div>
<span class="desc-num">已获人数 5678</span> <span class="desc-num">已参与人数 {{percentData.doctorCount}}</span>
<span class="desc-num">应参与人数 5678</span> <span class="desc-num">应参与人数 {{percentData.joinCount}}</span>
</div> </div>
<div class="item"> <div class="item">
<div class="wrapper"> <div class="wrapper">
<span> <span>
<div class="desc">人员参与率</div> <div class="desc">机构参与率</div>
<div class="ratio">21.6%</div> <div class="ratio">{{(percentData.hospitalRate * 100).toFixed(0)}}%</div>
</span> </span>
<img src="../../assets/images/left-array-black.png" /> <img src="../../assets/images/tips-3.png" />
</div> </div>
<span class="desc-num">已获人数 5678</span> <span class="desc-num">已参与机构数 {{percentData.hospitalJoinCount}}</span>
<span class="desc-num">应参与人数 5678</span> <span class="desc-num">应参与机构数 {{percentData.hospitalCount}}</span>
</div> </div>
</article> </article>
</section> </section>
...@@ -45,9 +45,28 @@ ...@@ -45,9 +45,28 @@
<script> <script>
export default { export default {
props: { props: {
itemData: { percentData: {
type: Array, type: Object,
default: () => [{}] default: () => {
return {
doctorCount: 0,
joinCount: 0,
finishCount: 0,
hospitalCount: 0,
hospitalJoinCount: 0,
certificateRate: 0,
doctorRate: 0,
hospitalRate: 0
}
}
}
},
watch: {
percentData: {
handler(newValue, oldValue) {
return newValue
},
deep: true
} }
}, },
methods: {} methods: {}
...@@ -56,6 +75,7 @@ export default { ...@@ -56,6 +75,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.common-swiper-item { .common-swiper-item {
font-size: 20px;
margin-top: 20px; margin-top: 20px;
display: block; display: block;
.middle { .middle {
...@@ -80,7 +100,7 @@ export default { ...@@ -80,7 +100,7 @@ export default {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
width: 100px; width: 100px;
margin: 6px 0 24px; margin: 10px 0 24px;
// height: 80px; // height: 80px;
span { span {
display: inline-block; display: inline-block;
......
components/common/common-tabs.vue
浏览文件 @ 10ce5444
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
export default { export default {
data() { data() {
return { return {
cIndex: 4 cIndex: 0
}; };
}, },
props: { props: {
......
pages/index.vue
浏览文件 @ 10ce5444
...@@ -4,34 +4,35 @@ ...@@ -4,34 +4,35 @@
<CommonAreaSelect @areaClick="areaTabClick" @orgClick="orgTabClick"></CommonAreaSelect> <CommonAreaSelect @areaClick="areaTabClick" @orgClick="orgTabClick"></CommonAreaSelect>
<CommonTaps @tabClicked="tabClicked"></CommonTaps> <CommonTaps @tabClicked="tabClicked"></CommonTaps>
<!-- 总体概况 --> <!-- 总体概况 -->
<article v-if="cIndex === 0"> <article v-show="cIndex === 0">
<CommonSwiperItem></CommonSwiperItem> <CommonSwiperItem :percentData="allData.percentData"></CommonSwiperItem>
<CommonTitle title="证书分布情况"></CommonTitle> <CommonTitle title="证书分布情况"></CommonTitle>
<ChartPie></ChartPie> <ChartPie id="certPieId2" :pieData="allData.certData"></ChartPie>
<CommonTitle title="证书级别按学历分布情况"></CommonTitle> <CommonTitle title="证书级别按学历分布情况"></CommonTitle>
<ChartColumn></ChartColumn> <ChartColumn></ChartColumn>
<CommonSplitLine></CommonSplitLine> <CommonSplitLine></CommonSplitLine>
<CommonTitle title="培训情况排名"></CommonTitle> <CommonTitle title="培训情况排名"></CommonTitle>
<RankingList></RankingList> <RankingList :studyRank="allData.studyRank"></RankingList>
<ShowAll></ShowAll> <ShowAll></ShowAll>
<CommonSplitLine></CommonSplitLine> <CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成天数排名"></CommonTitle> <CommonTitle title="完成天数排名"></CommonTitle>
<RankingItemDays></RankingItemDays> <RankingItemDays :rankList="allData.costRank"></RankingItemDays>
<ShowAll></ShowAll> <ShowAll></ShowAll>
<CommonBottomInfo></CommonBottomInfo> <CommonBottomInfo></CommonBottomInfo>
</article> </article>
<!-- 人群分析 --> <!-- 人群分析 -->
<article v-if="cIndex === 1"> <article v-show="cIndex === 1">
<CommonTitle title="人员学历情况"></CommonTitle> <CommonTitle title="人员学历情况"></CommonTitle>
<ChartPie></ChartPie> <!-- <ChartPie></ChartPie> -->
<ChartPieEdu :pieData="allData.certData"></ChartPieEdu>
<CommonSplitLine></CommonSplitLine> <CommonSplitLine></CommonSplitLine>
<CommonTitle title="人员职称情况"></CommonTitle> <CommonTitle title="人员职称情况"></CommonTitle>
<ChartPie id="ssss"></ChartPie> <ChartPieTitle :pieData="allData.certData"></ChartPieTitle>
</article> </article>
<!-- 课程分析 --> <!-- 课程分析 -->
<article v-if="cIndex === 2" style="padding-top: 8px;"> <article v-show="cIndex === 2" style="padding-top: 8px;">
<CourseTimes maxDuration="27" avgDuration="16"></CourseTimes> <CourseTimes maxDuration="27" avgDuration="16"></CourseTimes>
<CommonSplitLine></CommonSplitLine> <CommonSplitLine></CommonSplitLine>
<CommonTitle title="课程列表"></CommonTitle> <CommonTitle title="课程列表"></CommonTitle>
...@@ -40,7 +41,7 @@ ...@@ -40,7 +41,7 @@
</article> </article>
<!-- 考试分析 --> <!-- 考试分析 -->
<article v-if="cIndex === 3"> <article v-show="cIndex === 3">
<CommonCard></CommonCard> <CommonCard></CommonCard>
<CommonSplitLine></CommonSplitLine> <CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成项目考试次数情况"></CommonTitle> <CommonTitle title="完成项目考试次数情况"></CommonTitle>
...@@ -53,7 +54,7 @@ ...@@ -53,7 +54,7 @@
</article> </article>
<!-- 学习效果分析 --> <!-- 学习效果分析 -->
<article v-if="cIndex === 4"> <article v-show="cIndex === 4">
<CommonCard :needBG="needBG" :cardList="cardList"></CommonCard> <CommonCard :needBG="needBG" :cardList="cardList"></CommonCard>
<CommonSplitLine></CommonSplitLine> <CommonSplitLine></CommonSplitLine>
<CommonTitle title="不同学历完成项目前后正确率对比"></CommonTitle> <CommonTitle title="不同学历完成项目前后正确率对比"></CommonTitle>
...@@ -81,6 +82,8 @@ import ShowAll from "@/components/common/common-show-all"; ...@@ -81,6 +82,8 @@ import ShowAll from "@/components/common/common-show-all";
import CommonBottomInfo from "@/components/common/common-bottom-info"; import CommonBottomInfo from "@/components/common/common-bottom-info";
import RankingItemDays from "@/components/bussiness/ranking-item-days"; import RankingItemDays from "@/components/bussiness/ranking-item-days";
import ChartPie from "@/components/bussiness/charts/chart-pie"; import ChartPie from "@/components/bussiness/charts/chart-pie";
import ChartPieEdu from "@/components/bussiness/charts/chart-pie-edu";
import ChartPieTitle from "@/components/bussiness/charts/chart-pie-title";
import ChartColumn from "@/components/bussiness/charts/chart-column"; import ChartColumn from "@/components/bussiness/charts/chart-column";
import ChartColumnVertical from "@/components/bussiness/charts/chart-column-vertical"; import ChartColumnVertical from "@/components/bussiness/charts/chart-column-vertical";
import PicaArea from "@/components/common/pica-area"; import PicaArea from "@/components/common/pica-area";
...@@ -101,6 +104,8 @@ export default { ...@@ -101,6 +104,8 @@ export default {
CommonSplitLine, CommonSplitLine,
RankingList, RankingList,
ChartPie, ChartPie,
ChartPieEdu,
ChartPieTitle,
ShowAll, ShowAll,
CommonBottomInfo, CommonBottomInfo,
RankingItemDays, RankingItemDays,
...@@ -142,7 +147,7 @@ export default { ...@@ -142,7 +147,7 @@ export default {
}, },
isShowArea: false, isShowArea: false,
isShowOrg: false, isShowOrg: false,
cIndex: 4, cIndex: 0,
colors: ["#39AF9A", "#FF9A4B", "#abb7bb", "#76d2d2"], colors: ["#39AF9A", "#FF9A4B", "#abb7bb", "#76d2d2"],
needBG: true, needBG: true,
cardList: [ cardList: [
...@@ -156,7 +161,8 @@ export default { ...@@ -156,7 +161,8 @@ export default {
unitName: "%", unitName: "%",
description: "培训后正确率" description: "培训后正确率"
} }
] ],
allData: {}
}; };
}, },
async asyncData() { async asyncData() {
...@@ -183,9 +189,8 @@ export default { ...@@ -183,9 +189,8 @@ export default {
methods: { methods: {
async getGeneralData(queryData) { async getGeneralData(queryData) {
await getGeneralData(queryData).then(res => { await getGeneralData(queryData).then(res => {
alert(res)
if (res.code === "000000") { if (res.code === "000000") {
this.allData = res.data;
} }
}); });
}, },
......
service/api.js
浏览文件 @ 10ce5444
...@@ -19,7 +19,8 @@ Axios.interceptors.request.use( ...@@ -19,7 +19,8 @@ Axios.interceptors.request.use(
const method = config.method.toLocaleLowerCase(); const method = config.method.toLocaleLowerCase();
if (method === 'post' || method === 'put' || method === 'delete') {} if (method === 'post' || method === 'put' || method === 'delete') {}
if (config.withCredentials) { if (config.withCredentials) {
config.headers.token = '3BDACDC8B709441AA6EBCE634BD113E0'; config.headers.token = 'C284B868425D494386EAEF6C9AE99937';
// config.headers.token = '3BDACDC8B709441AA6EBCE634BD113E0';
// config.headers.token = cookies.get('token') || 'C284B868425D494386EAEF6C9AE99937'; // config.headers.token = cookies.get('token') || 'C284B868425D494386EAEF6C9AE99937';
} }
return config; return config;
......
static/css/common.css
浏览文件 @ 10ce5444
...@@ -16,11 +16,13 @@ html * { ...@@ -16,11 +16,13 @@ html * {
html,body { html,body {
font-family: PingFangSC-Regular, -apple-system-font, Source Han Sans, Helvetica Neue, sans-serif; font-family: PingFangSC-Regular, -apple-system-font, Source Han Sans, Helvetica Neue, sans-serif;
font-size: 20px;
} }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 20px;
} }
/* /*
...@@ -54,6 +56,7 @@ address, caption, cite, code, dfn, em, th, var { ...@@ -54,6 +56,7 @@ address, caption, cite, code, dfn, em, th, var {
ol, ul { ol, ul {
list-style: none; list-style: none;
font-size: 20px;
} }
caption, th { caption, th {
......
utils/index.js
浏览文件 @ 10ce5444
...@@ -31,11 +31,11 @@ export const removeItem = name => { ...@@ -31,11 +31,11 @@ export const removeItem = name => {
}; };
export const echartColors = [ export const echartColors = [
"#FF9A4B", "#F6BD16",
"#FFB01B",
"#39AF9A", "#39AF9A",
"#5D7092", "#5D7092",
"#e89b84", "#1865FF",
"#abb7bb", "#6DC8EC",
"#76d2d2" "#E8684A",
"#FFB01B"
] ]
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或