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>
<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="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="durationChart" ref="durationChart"></div>
</div>
</template>
<script>
......@@ -30,18 +56,32 @@ export default {
},
data() {
return {
roleType: "L1",
projectId: "",
echartsData: {
chart0: {},
chart1: {},
chart2: {},
chart3: {},
}
chart3: {}
},
cardData: [],
rankType: 1,
rankOptions: [
{
value: 1,
label: '按获证比例排名',
},
{
value: 2,
label: '按参与人数排名',
},
]
};
},
created() {
vm = this;
vm.projectId = vm.getUrlSearch(window.location.href, "id");
vm.initCard();
setTimeout(function() {
vm.setDistributeChart();
vm.setRecordChart();
......@@ -51,6 +91,49 @@ export default {
},
mounted: function() {},
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() {
this.$nextTick(function() {
window.onresize = function() {
......@@ -70,7 +153,10 @@ export default {
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
formatter: "{b} : {c} ({d}%)"
},
label: {
formatter: "{d}%"
},
legend: {
orient: "horizontal",
......@@ -79,14 +165,14 @@ export default {
},
series: [
{
name: "访问来源",
name: "",
type: "pie",
radius: "60%",
center: ["50%", "50%"],
data: [
{ value: 2200, name: "未获证人数占比" },
{ value: 1900, name: "获优秀人数占比" },
{ value: 1500, name: "获及格人数占比" },
{ value: 1500, name: "获及格人数占比" }
],
itemStyle: {
emphasis: {
......@@ -105,6 +191,10 @@ export default {
setRecordChart() {
let myChart = echarts.init(this.$refs.recordChart);
let option = {
title: {
text: "证书级别按学历发布情况",
x: "left"
},
tooltip: {
trigger: "axis",
axisPointer: {
......@@ -193,26 +283,42 @@ export default {
vm.echartsData.chart1 = myChart;
vm.updateResize();
},
setDurationChart() {
let myChart = echarts.init(this.$refs.durationChart);
setCertificateChart() {
let myChart = echarts.init(this.$refs.certificateChart);
let option = {
title: {
text: "培训情况排名",
x: "left"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
type: "cross",
crossStyle: {
color: "#999"
}
},
formatter: function(params) {
let relVal = "";
for (let j = 0, l = params.length; j < l; j++) {
relVal += params[j].seriesName + "： " + params[j].value;
if (j === 2) {
relVal += "%";
} else {
relVal += "<br/>";
}
}
return relVal;
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
dataZoom: {
show: true,
start: 0,
end: 30
},
legend: {
data: ["参与人数", "完成人数", "完成比例"]
},
xAxis: [
{
axisLabel: {
......@@ -253,22 +359,33 @@ export default {
"宁夏回族自治区",
"新疆维吾尔自治区"
],
axisTick: {
alignWithLabel: true
axisPointer: {
type: "shadow"
}
}
],
yAxis: [
{
type: "value",
name: "完成时长 (天)"
name: "人数（个）",
axisLabel: {
formatter: "{value} "
}
},
{
type: "value",
name: "比例",
min: 0,
max: 100,
axisLabel: {
formatter: "{value} %"
}
}
],
series: [
{
name: "时长",
name: "参与人数",
type: "bar",
barWidth: "60%",
data: [
10,
52,
......@@ -309,6 +426,52 @@ export default {
position: "top",
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 {
vm.echartsData.chart2 = myChart;
vm.updateResize();
},
setCertificateChart() {
let myChart = echarts.init(this.$refs.certificateChart);
setDurationChart() {
let myChart = echarts.init(this.$refs.durationChart);
let option = {
title: {
text: "在线培训完成时长情况",
x: "left"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999"
}
},
formatter: function(params) {
let relVal = "";
for (let j = 0, l = params.length; j < l; j++) {
relVal += params[j].seriesName + "： " + params[j].value;
if (j === 2) {
relVal += "%";
} else {
relVal += "<br/>";
}
}
return relVal;
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
dataZoom: {
show: true,
start: 0,
end: 30
},
legend: {
data: ["参与人数", "完成人数", "完成比例"]
},
xAxis: [
{
axisLabel: {
......@@ -388,33 +543,22 @@ export default {
"宁夏回族自治区",
"新疆维吾尔自治区"
],
axisPointer: {
type: "shadow"
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: "value",
name: "人数",
axisLabel: {
formatter: "{value} "
}
},
{
type: "value",
name: "比例",
min: 0,
max: 100,
axisLabel: {
formatter: "{value} %"
}
name: "完成时长 (天)"
}
],
series: [
{
name: "参与人数",
name: "时长",
type: "bar",
barWidth: "60%",
data: [
10,
52,
......@@ -455,27 +599,6 @@ export default {
position: "top",
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 {
background: #fff;
overflow: hidden;
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 {
position: relative;
margin: 20px auto 0 auto;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或