Skip to content

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

数据总览更新

上级 2c96828d
隐藏空白字符变更
内嵌 并排
正在显示 包含 184 行增加 和 51 行删除
src/views/learning/item-data-all.vue
浏览文件 @ 6c93a2c0
<template> <template>
<div class="data-all-wrap"> <div class="data-all-wrap">
<div class="box-list"> <div v-if="dataType == 0" class="data-chart">
<div v-for="(item , index) in cardData" :key="index" class="box"> <div class="box-list">
<el-card class="box-card"> <div v-for="(item , index) in cardData" :key="index" class="box">
<el-tooltip class="item-tool" placement="bottom-end" effect="light"> <el-card class="box-card">
<div slot="content"> <el-tooltip class="item-tool" placement="bottom-end" effect="light">
<p v-for="text in item.content">{{ text }}</p> <div slot="content">
<p v-for="text in item.content">{{ text }}</p>
</div>
<i class="el-icon-question notice"></i>
</el-tooltip>
<div class="left-content">
<p class="title">{{ item.title }}</p>
<p class="value">{{ item.value }}</p>
</div> </div>
<i class="el-icon-question notice"></i> <div class="vertical"></div>
</el-tooltip> <div class="right-content">
<div class="left-content"> <p class="has">{{ item.hasKey }}:{{ item.hasNum }}</p>
<p class="title">{{ item.title }}</p> <p class="should">{{ item.shouldKey }}:{{ item.shouldNum }}</p>
<p class="value">{{ item.value }}</p> </div>
</div> </el-card>
<div class="vertical"></div> <!-- <div v-if="index+1 !== cardData.length" class="line"></div> -->
<div class="right-content"> </div>
<p class="has">{{ item.hasKey }}:{{ item.hasNum }}</p> </div>
<p class="should">{{ item.shouldKey }}:{{ item.shouldNum }}</p> <div class="chart-title">证历分布情况</div>
<div class="chart-distributeChart">
<div class="distributeChart" id="distributeChart" ref="distributeChart"></div>
<div class="data-text">
<div class="content-text">
<p v-for="item in distributeList" :key="item.value">{{item.label}}：{{item.value}}人</p>
</div> </div>
</el-card> </div>
<!-- <div v-if="index+1 !== cardData.length" class="line"></div> -->
</div> </div>
</div> <div class="chart-title">证书级别按学历发布情况</div>
<div class="chart-title">证历分布情况</div> <div class="chart-recordChart">
<div class="chart-distributeChart"> <div class="recordChart" id="recordChart" ref="recordChart"></div>
<div class="distributeChart" id="distributeChart" ref="distributeChart"></div> <div class="data-text">
<div class="data-text"> <div class="content-text">
<div class="content-text"> <p v-for="item in recordList" :key="item.value">{{item.label}}：{{item.value}}人</p>
<p v-for="item in distributeList" :key="item.value">{{item.label}}：{{item.value}}人</p> </div>
</div> </div>
</div> </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-title">培训情况排名</div>
<div class="chart" id="certificateChart" ref="certificateChart"></div>
<div class="chart-title">在线培训完成时长情况</div>
<div class="chart" id="durationChart" ref="durationChart"></div>
</div> </div>
<div class="chart-title">证书级别按学历发布情况</div> <div v-if="dataType == 1" class="data-table">
<div class="chart-recordChart"> <div class="box-list">
<div class="recordChart" id="recordChart" ref="recordChart"></div> <div v-for="(item , index) in cardData" :key="index" class="box">
<div class="data-text"> <el-card class="box-card">
<div class="content-text"> <el-tooltip class="item-tool" placement="bottom-end" effect="light">
<p v-for="item in recordList" :key="item.value">{{item.label}}：{{item.value}}人</p> <div slot="content">
<p v-for="text in item.content">{{ text }}</p>
</div>
<i class="el-icon-question notice"></i>
</el-tooltip>
<div class="left-content">
<p class="title">{{ item.title }}</p>
<p class="value">{{ item.value }}</p>
</div>
<div class="vertical"></div>
<div class="right-content">
<p class="has">{{ item.hasKey }}:{{ item.hasNum }}</p>
<p class="should">{{ item.shouldKey }}:{{ item.shouldNum }}</p>
</div>
</el-card>
<!-- <div v-if="index+1 !== cardData.length" class="line"></div> -->
</div> </div>
</div> </div>
<div class="person">
<div class="person-title">项目人员情况</div>
<!-- <el-radio-group class="person-radio" v-model="tableType" @change="change">
<el-radio-button label="0">已获证</el-radio-button>
<el-radio-button label="1">未获证</el-radio-button>
<el-radio-button label="2">未参与</el-radio-button>
</el-radio-group> -->
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="rank" label="排名" align="center"></el-table-column>
<el-table-column prop="name" label="姓名" align="center"></el-table-column>
<el-table-column prop="sex" label="性别" align="center"></el-table-column>
<el-table-column prop="department" label="科室" align="center"></el-table-column>
<el-table-column prop="join" label="是否参与项目" align="center"></el-table-column>
<el-table-column prop="complete" label="是否完成项目" align="center"></el-table-column>
<el-table-column prop="grade" label="证书级别" align="center"></el-table-column>
<el-table-column prop="certificateDate" label="获证日期" align="center"></el-table-column>
<el-table-column prop="record" label="成绩" align="center"></el-table-column>
<el-table-column prop="learnTime" label="学习时长" align="center"></el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="formTable.pageNo"
:page-sizes="[10, 20, 30, 100]"
:page-size="formTable.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
</div>
</div> </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-title">培训情况排名</div>
<div class="chart" id="certificateChart" ref="certificateChart"></div>
<div class="chart-title">在线培训完成时长情况</div>
<div class="chart" id="durationChart" ref="durationChart"></div>
</div> </div>
</template> </template>
<script> <script>
...@@ -80,6 +138,8 @@ export default { ...@@ -80,6 +138,8 @@ export default {
return { return {
roleType: "L1", roleType: "L1",
projectId: "", projectId: "",
dataType: 1,
tableType: "0",
echartsData: { echartsData: {
chart0: {}, chart0: {},
chart1: {}, chart1: {},
...@@ -99,24 +159,34 @@ export default { ...@@ -99,24 +159,34 @@ export default {
value: 2, value: 2,
label: "按参与人数排名" label: "按参与人数排名"
} }
] ],
tableData: [],
totalRows: 0,
formTable: {
pageNo: 1,
pageSize: 10,
},
}; };
}, },
created() { created() {
vm = this; vm = this;
vm.projectId = vm.getUrlSearch(window.location.href, "id"); vm.projectId = vm.getUrlSearch(window.location.href, "id");
vm.initCard(); vm.initCard();
setTimeout(function() { if(vm.dataType == 0) {
vm.setDistributeChart(); setTimeout(function() {
vm.setRecordChart(); vm.setDistributeChart();
vm.setDurationChart(); vm.setRecordChart();
vm.setCertificateChart(); vm.setDurationChart();
}, 20); vm.setCertificateChart();
}, 20);
} else {
vm.setTable();
}
}, },
mounted: function() {}, mounted: function() {},
methods: { methods: {
initCard() { initCard() {
vm.cardData = [ let cardData = [
{ {
value: "45%", value: "45%",
title: "机构参与率", title: "机构参与率",
...@@ -157,6 +227,11 @@ export default { ...@@ -157,6 +227,11 @@ export default {
] ]
} }
]; ];
if(vm.dataType == 0) {
vm.cardData = cardData;
} else if(vm.dataType == 1) {
vm.cardData = cardData.slice(0,2);
}
}, },
updateResize() { updateResize() {
this.$nextTick(function() { this.$nextTick(function() {
...@@ -698,6 +773,32 @@ export default { ...@@ -698,6 +773,32 @@ export default {
myChart.setOption(option); myChart.setOption(option);
vm.echartsData.chart3 = myChart; vm.echartsData.chart3 = myChart;
vm.updateResize(); vm.updateResize();
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
vm.formTable.pageSize = val;
vm.formTable.pageNo = 1;
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
vm.formTable.pageNo = val;
},
setTable() {
vm.tableData = [
{
id: 1,
rank: 1,
name: '伊娟',
sex: '女',
department: '内科',
join: 1,
complete: 1,
grade: '1级',
certificateDate: '2019-10-11',
record: 100,
learnTime: '4小时23分34秒',
}
];
} }
} }
}; };
...@@ -791,6 +892,10 @@ export default { ...@@ -791,6 +892,10 @@ export default {
} }
} }
} }
.box-card {
width: 48%;
margin-right: 1%;
}
} }
.chart-select { .chart-select {
position: relative; position: relative;
...@@ -876,5 +981,33 @@ export default { ...@@ -876,5 +981,33 @@ export default {
} }
} }
} }
.person {
position: relative;
margin-top: 20px;
width: 100%;
.person-title {
font-size:18px;
font-weight:700;
}
.person-radio {
margin-top: 10px;
.el-radio-button {
.el-radio-button__inner {
border:0 solid #666666 !important;
box-shadow: 0;
}
}
.is-active {
border-radius: 10px 10px 0px 0px;
border-bottom: 2px solid #666666 !important;
.el-radio-button__inner{
border-radius:10px 10px 0px 0px;
background:#DFDFDF !important;
border:0 solid #666666 !important;
box-shadow: 0;
}
}
}
}
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或