Skip to content

P
pica.cloud.web-education-admin
提交 7d23196d 编写于 作者: zhentian.jia's avatar zhentian.jia
浏览文件
操作

UI更新

上级 65c60602
显示空白字符变更
内嵌 并排
正在显示 包含 246 行增加 和 78 行删除
src/views/learning/item-data-all.vue
浏览文件 @ 7d23196d
<template> <template>
<div class="data-all-wrap"> <div class="data-all-wrap">
<div class="box-list">
<div v-for="(item , index) in cardData" :key="index" class="box">
<el-card class="box-card">
<div slot="header" class="header">
<p class="value">{{ item.value }}</p>
<p class="title">{{ item.title }}</p>
<el-tooltip class="item" effect="dark" placement="bottom-end">
<div slot="content">
<p v-for="text in item.content">{{ text }}</p>
</div>
<i class="el-icon-question notice"></i>
</el-tooltip>
</div>
<div class="box-content">
<span>{{ item.hasKey }}</span>
<span>{{ item.hasNum }}</span>
<span class="should-key">{{ item.shouldKey }}</span>
<span>{{ item.shouldNum }}</span>
</div>
</el-card>
<!-- <div v-if="index+1 !== cardData.length" class="line"></div> -->
</div>
</div>
<div class="chart" id="distributeChart" ref="distributeChart"></div> <div class="chart" id="distributeChart" ref="distributeChart"></div>
<div class="chart" id="recordChart" ref="recordChart"></div> <div class="chart" id="recordChart" ref="recordChart"></div>
<div class="chart" id="durationChart" ref="durationChart"></div> <el-select class="chart-select" v-model="rankType" placeholder="请选择">
<el-option v-for="item in rankOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<div class="chart" id="certificateChart" ref="certificateChart"></div> <div class="chart" id="certificateChart" ref="certificateChart"></div>
<div class="chart" id="durationChart" ref="durationChart"></div>
</div> </div>
</template> </template>
<script> <script>
...@@ -30,18 +56,32 @@ export default { ...@@ -30,18 +56,32 @@ export default {
}, },
data() { data() {
return { return {
roleType: "L1",
projectId: "", projectId: "",
echartsData: { echartsData: {
chart0: {}, chart0: {},
chart1: {}, chart1: {},
chart2: {}, chart2: {},
chart3: {}, chart3: {}
} },
cardData: [],
rankType: 1,
rankOptions: [
{
value: 1,
label: '按获证比例排名',
},
{
value: 2,
label: '按参与人数排名',
},
]
}; };
}, },
created() { created() {
vm = this; vm = this;
vm.projectId = vm.getUrlSearch(window.location.href, "id"); vm.projectId = vm.getUrlSearch(window.location.href, "id");
vm.initCard();
setTimeout(function() { setTimeout(function() {
vm.setDistributeChart(); vm.setDistributeChart();
vm.setRecordChart(); vm.setRecordChart();
...@@ -51,6 +91,49 @@ export default { ...@@ -51,6 +91,49 @@ export default {
}, },
mounted: function() {}, mounted: function() {},
methods: { methods: {
initCard() {
vm.cardData = [
{
value: "45%",
title: "机构参与率",
hasKey: "已参与机构数",
hasNum: "318535",
shouldKey: "应参与机构数",
shouldNum: "78534",
content: [
"机构参与率：已参与机构数/应参与机构数*100% ",
"应参与机构数：筛选范围下，所有圈选机构数量，包含白名单反退出来的机构",
"已参与机构数：筛选范围下，在应参与机构中，机构学员有参与项目行为的机构数量"
]
},
{
value: "78%",
title: "人员参与率",
hasKey: "已参与人数",
hasNum: "878534",
shouldKey: "应参与人数",
shouldNum: "674343",
content: [
"人员参与率：已参与人数/应参与人数*100%",
"应参与人数：筛选范围下，所圈选人员数量",
"已参与人数：筛选范围下，在应参与人员中，有参与项目行为的人员数量"
]
},
{
value: "71%",
title: "获证率",
hasKey: "已获证人数",
hasNum: "567",
shouldKey: "应参与人数",
shouldNum: "78534",
content: [
"获证率：已完成人数/应参与人数*100%",
"应参与人数：筛选范围下，所圈选人员数量",
"已获证人数：筛选范围下，在应参与人员中，已获证的人员数量"
]
}
];
},
updateResize() { updateResize() {
this.$nextTick(function() { this.$nextTick(function() {
window.onresize = function() { window.onresize = function() {
...@@ -70,7 +153,10 @@ export default { ...@@ -70,7 +153,10 @@ export default {
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)" formatter: "{b} : {c} ({d}%)"
},
label: {
formatter: "{d}%"
}, },
legend: { legend: {
orient: "horizontal", orient: "horizontal",
...@@ -79,14 +165,14 @@ export default { ...@@ -79,14 +165,14 @@ export default {
}, },
series: [ series: [
{ {
name: "访问来源", name: "",
type: "pie", type: "pie",
radius: "60%", radius: "60%",
center: ["50%", "50%"], center: ["50%", "50%"],
data: [ data: [
{ value: 2200, name: "未获证人数占比" }, { value: 2200, name: "未获证人数占比" },
{ value: 1900, name: "获优秀人数占比" }, { value: 1900, name: "获优秀人数占比" },
{ value: 1500, name: "获及格人数占比" }, { value: 1500, name: "获及格人数占比" }
], ],
itemStyle: { itemStyle: {
emphasis: { emphasis: {
...@@ -105,6 +191,10 @@ export default { ...@@ -105,6 +191,10 @@ export default {
setRecordChart() { setRecordChart() {
let myChart = echarts.init(this.$refs.recordChart); let myChart = echarts.init(this.$refs.recordChart);
let option = { let option = {
title: {
text: "证书级别按学历发布情况",
x: "left"
},
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
...@@ -193,26 +283,42 @@ export default { ...@@ -193,26 +283,42 @@ export default {
vm.echartsData.chart1 = myChart; vm.echartsData.chart1 = myChart;
vm.updateResize(); vm.updateResize();
}, },
setDurationChart() { setCertificateChart() {
let myChart = echarts.init(this.$refs.durationChart); let myChart = echarts.init(this.$refs.certificateChart);
let option = { let option = {
title: {
text: "培训情况排名",
x: "left"
},
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
type: "shadow" // 默认为直线，可选为：'line' | 'shadow' type: "cross",
crossStyle: {
color: "#999"
} }
}, },
grid: { formatter: function(params) {
left: "3%", let relVal = "";
right: "4%", for (let j = 0, l = params.length; j < l; j++) {
bottom: "3%", relVal += params[j].seriesName + "： " + params[j].value;
containLabel: true if (j === 2) {
relVal += "%";
} else {
relVal += "<br/>";
}
}
return relVal;
}
}, },
dataZoom: { dataZoom: {
show: true, show: true,
start: 0, start: 0,
end: 30 end: 30
}, },
legend: {
data: ["参与人数", "完成人数", "完成比例"]
},
xAxis: [ xAxis: [
{ {
axisLabel: { axisLabel: {
...@@ -253,22 +359,33 @@ export default { ...@@ -253,22 +359,33 @@ export default {
"宁夏回族自治区", "宁夏回族自治区",
"新疆维吾尔自治区" "新疆维吾尔自治区"
], ],
axisTick: { axisPointer: {
alignWithLabel: true type: "shadow"
} }
} }
], ],
yAxis: [ yAxis: [
{ {
type: "value", type: "value",
name: "完成时长 (天)" name: "人数（个）",
axisLabel: {
formatter: "{value} "
}
},
{
type: "value",
name: "比例",
min: 0,
max: 100,
axisLabel: {
formatter: "{value} %"
}
} }
], ],
series: [ series: [
{ {
name: "时长", name: "参与人数",
type: "bar", type: "bar",
barWidth: "60%",
data: [ data: [
10, 10,
52, 52,
...@@ -309,6 +426,52 @@ export default { ...@@ -309,6 +426,52 @@ export default {
position: "top", position: "top",
formatter: "{c}" //这是关键，在需要的地方加上就行了 formatter: "{c}" //这是关键，在需要的地方加上就行了
} }
},
{
name: "完成人数",
type: "bar",
data: [9, 8, 100, 200, 200, 55, 10],
label: {
show: true,
position: "top",
formatter: "{c}" //这是关键，在需要的地方加上就行了
}
},
{
name: "完成比例",
type: "line",
yAxisIndex: 1,
data: [
2,
22,
32,
41,
61,
10,
20,
23,
55,
67,
91,
6,
2,
22,
32,
41,
61,
10,
20,
23,
55,
67,
91,
6
],
label: {
show: true,
position: "top",
formatter: "{c}%" //这是关键，在需要的地方加上就行了
}
} }
] ]
}; };
...@@ -316,38 +479,30 @@ export default { ...@@ -316,38 +479,30 @@ export default {
vm.echartsData.chart2 = myChart; vm.echartsData.chart2 = myChart;
vm.updateResize(); vm.updateResize();
}, },
setCertificateChart() { setDurationChart() {
let myChart = echarts.init(this.$refs.certificateChart); let myChart = echarts.init(this.$refs.durationChart);
let option = { let option = {
title: {
text: "在线培训完成时长情况",
x: "left"
},
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
type: "cross", type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
crossStyle: {
color: "#999"
} }
}, },
formatter: function(params) { grid: {
let relVal = ""; left: "3%",
for (let j = 0, l = params.length; j < l; j++) { right: "4%",
relVal += params[j].seriesName + "： " + params[j].value; bottom: "3%",
if (j === 2) { containLabel: true
relVal += "%";
} else {
relVal += "<br/>";
}
}
return relVal;
}
}, },
dataZoom: { dataZoom: {
show: true, show: true,
start: 0, start: 0,
end: 30 end: 30
}, },
legend: {
data: ["参与人数", "完成人数", "完成比例"]
},
xAxis: [ xAxis: [
{ {
axisLabel: { axisLabel: {
...@@ -388,33 +543,22 @@ export default { ...@@ -388,33 +543,22 @@ export default {
"宁夏回族自治区", "宁夏回族自治区",
"新疆维吾尔自治区" "新疆维吾尔自治区"
], ],
axisPointer: { axisTick: {
type: "shadow" alignWithLabel: true
} }
} }
], ],
yAxis: [ yAxis: [
{ {
type: "value", type: "value",
name: "人数", name: "完成时长 (天)"
axisLabel: {
formatter: "{value} "
}
},
{
type: "value",
name: "比例",
min: 0,
max: 100,
axisLabel: {
formatter: "{value} %"
}
} }
], ],
series: [ series: [
{ {
name: "参与人数", name: "时长",
type: "bar", type: "bar",
barWidth: "60%",
data: [ data: [
10, 10,
52, 52,
...@@ -455,27 +599,6 @@ export default { ...@@ -455,27 +599,6 @@ export default {
position: "top", position: "top",
formatter: "{c}" //这是关键，在需要的地方加上就行了 formatter: "{c}" //这是关键，在需要的地方加上就行了
} }
},
{
name: "完成人数",
type: "bar",
data: [9, 8, 100, 200, 200, 55, 10],
label: {
show: true,
position: "top",
formatter: "{c}" //这是关键，在需要的地方加上就行了
}
},
{
name: "完成比例",
type: "line",
yAxisIndex: 1,
data: [2, 22, 32, 41, 61, 10, 20, 23, 55, 67, 91, 6],
label: {
show: true,
position: "top",
formatter: "{c}%" //这是关键，在需要的地方加上就行了
}
} }
] ]
}; };
...@@ -491,6 +614,51 @@ export default { ...@@ -491,6 +614,51 @@ export default {
background: #fff; background: #fff;
overflow: hidden; overflow: hidden;
padding: 10px; padding: 10px;
.el-tooltip__popper {
}
.box-list {
position: relative;
// width: 100%;
height: 150px;
.box-card {
position: relative;
background-color: #d8d8d8;
width: 31%;
margin-right: 2%;
height: 150px;
float: left;
.el-card__header {
border-bottom-width: 0;
}
.header {
position: relative;
text-align: left;
.value {
font-size: 20px;
font-weight: 700;
}
.title {
font-size: 12px;
}
.notice {
position: absolute;
top: -5px;
right: -5px;
}
}
.box-content {
text-align: left;
height: 15px;
font-size: 12px;
.should-key {
margin-left: 10px;
}
}
}
}
.chart-select {
position: relative;
}
.chart { .chart {
position: relative; position: relative;
margin: 20px auto 0 auto; margin: 20px auto 0 auto;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或