<template>
|
<div style="padding: 0px 10px">
|
<div>
|
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
|
style="margin-bottom: 10px">
|
<el-menu-item index="0">省厅考核</el-menu-item>
|
<el-menu-item index="1">区域考核</el-menu-item>
|
</el-menu>
|
</div>
|
|
<div class="data-chart-container">
|
<el-card class="data-card" :body-style="{ height: '100%' }">
|
<div class="card-content">
|
<div class="title-container">
|
<h1>考核成绩</h1>
|
<div class="select-container">
|
<el-date-picker v-model="date" format="yyyy-MM" value-format="yyyy-MM" type="month" placeholder="选择日期"
|
@change="dateChange">
|
</el-date-picker>
|
</div>
|
</div>
|
<div class="chart-container">
|
<div id="chartContent" ref="chartContent"></div>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
|
<div style="margin-top: 35px;margin-bottom: 35px">
|
<el-table :data="tableData" style="width: 100%" v-loading="tableLoading">
|
<el-table-column label="考核时间" prop="createTime" align="center">
|
</el-table-column>
|
<el-table-column label="考核对象" prop="deptId" align="center">
|
<template slot-scope="scope">
|
{{ translateDeptId(scope.row.deptId) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="标签" prop="examineTag" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.examineTag == 0 ? '省厅考核' : '市局考核' }}
|
</template>
|
</el-table-column>
|
<el-table-column label="考核类型" prop="examineCategory" align="center">
|
<template slot-scope="scope">
|
<dict-tag :options="dict.type.platform_examine_category" :value="scope.row.examineCategory" />
|
</template>
|
</el-table-column>
|
|
|
<el-table-column label="分数" prop="score" align="center">
|
</el-table-column>
|
<el-table-column label="状态" prop="publish" align="center">
|
</el-table-column>
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
<template slot-scope="scope">
|
<el-button size="small" type="text" v-show="scope.row.publish != 1">确认发布</el-button>
|
<el-button size="small" type="text" v-show="scope.row.publish == 1">取消发布</el-button>
|
<el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row.id)">详细</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
@pagination="getList" />
|
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import { listScore, getScore, delScore, addScore, updateScore, publishScore, detailScore } from "@/api/platform/check-score";
|
import { areaSelect } from '@/api/system/dept';
|
import * as echarts from 'echarts';
|
let lineChart = null;
|
let observer = null;
|
export default {
|
name: 'index',
|
dicts: ['platform_examine_use', 'platform_examine_category'],
|
data() {
|
return {
|
activeIndex: '0',
|
areaList: [],
|
date: '',
|
dateRange: '',
|
// 总条数
|
total: 0,
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
deptId: null,
|
examineTag: 0
|
},
|
tableData: [],
|
loading: false,
|
tableLoading: false,
|
searchForm: {
|
time: null,
|
}
|
}
|
},
|
created() {
|
//考核成绩详情跳转参数接收
|
console.log(this.$route.query.index)
|
if (this.$route.query.index) {
|
this.queryParams.deptId = this.$route.query.index
|
}
|
const date = new Date();
|
const year = date.getFullYear();
|
const month = (date.getMonth() + 1) >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
|
this.date = year + '-' + month;
|
this.queryParams.date = this.date;
|
this.areaSelect();
|
this.getList(this.$route.query.index);
|
},
|
computed: {
|
|
},
|
methods: {
|
// 区域下拉数据
|
areaSelect() {
|
areaSelect().then(res => {
|
this.areaList = res.data;
|
})
|
},
|
translateDeptId(deptId) {
|
const department = this.areaList.find(dept => dept.id == deptId);
|
return department ? department.value : '未知';
|
},
|
/** 导航切换 */
|
handleSelect(key) {
|
this.activeIndex = key;
|
this.queryParams.examineTag = key;
|
this.getChart(this.queryParams.deptId);
|
this.getList(this.queryParams.deptId);
|
},
|
/** 查询考核模板列表 */
|
getChart(deptId) {
|
this.loading = true;
|
lineChart.showLoading();
|
listScore(this.queryParams).then(response => {
|
this.initChart(response.data[deptId]);
|
this.loading = false;
|
});
|
},
|
/** 查询考核模板列表 */
|
getList() {
|
this.tableLoading = true;
|
detailScore(this.queryParams).then(response => {
|
console.log(response);
|
if (response.rows) {
|
this.tableData = response.rows;
|
this.total = response.total;
|
} else {
|
this.tableData = [];
|
this.total = 0;
|
}
|
this.tableLoading = false;
|
});
|
},
|
handleSizeChange(val) {
|
console.log(`每页 ${val} 条`);
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
},
|
handleDetail(id) {
|
this.$router.push({
|
path: '/examine/detail/detail',
|
query: {
|
id: id,
|
}
|
})
|
},
|
handleDelete(index, row) {
|
console.log(index, row);
|
},
|
initChart(data) {
|
const dataList = this.groupByData(data);
|
const option = {
|
legend: {
|
right: 'right',
|
top: 'top',
|
icon: 'rect',
|
orient: "vertical",
|
},
|
grid: {
|
left: 0,
|
right: 0,
|
bottom: 0,
|
top: '20%',
|
containLabel: true
|
},
|
tooltip: {},
|
xAxis: {
|
type: 'category',
|
data: dataList.map((item) => item[0]),
|
},
|
yAxis: {
|
min: 'dataMin'
|
},
|
series: [
|
{
|
name: '车辆考核',
|
data: this.filterData(dataList, 0),
|
type: 'line',
|
itemStyle: {
|
color: 'rgba(62, 144, 247, 1)'
|
}
|
},
|
{
|
name: '人脸考核',
|
data: this.filterData(dataList, 1),
|
type: 'line',
|
itemStyle: {
|
color: 'rgba(85, 192, 191, 1)'
|
}
|
},
|
{
|
name: '视频考核',
|
data: this.filterData(dataList, 2),
|
type: 'line',
|
itemStyle: {
|
color: 'rgba(255, 165, 0, 1)'
|
}
|
}
|
]
|
};
|
lineChart.setOption(option, true);
|
lineChart.hideLoading();
|
},
|
|
groupByData(data) {
|
if (!data) return this.getAllDay().map((item) => [item, []]);
|
const tempGroup = {};
|
data.forEach((item) => {
|
let { createTime } = item;
|
let tempTime = createTime.split('-');
|
createTime = tempTime[1] + '-' + tempTime[2];
|
if (!tempGroup[createTime]) {
|
tempGroup[createTime] = [];
|
}
|
tempGroup[createTime].push(item);
|
})
|
const tempArray = Object.entries(tempGroup).sort(([keyA], [keyB]) => new Date([keyA]) - new Date([keyB]));
|
return tempArray;
|
},
|
filterData(data, tag) {
|
const scoreList = data.map((item) => {
|
let temp = item[1].find((exam) => exam.examineCategory === tag);
|
if (temp) {
|
return temp.score;
|
} else {
|
return;
|
}
|
});
|
return scoreList;
|
},
|
|
getAllDay() {
|
const currentDate = this.date.split('-');
|
const currentYear = currentDate[0];
|
const currentMonth = currentDate[1];
|
const daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
|
const datesOfMonth = [];
|
for (var day = 1; day <= daysInMonth; day++) {
|
const formattedDate = currentMonth + '-' + (day.toString().padStart(2, '0'));
|
datesOfMonth.push(formattedDate);
|
}
|
return datesOfMonth;
|
},
|
|
// 监听变化
|
observe() {
|
if (!observer) {
|
observer = new ResizeObserver(entries => {
|
this.handleResize();
|
})
|
}
|
observer.observe(this.$refs.chartContent);
|
},
|
// 窗口变换
|
handleResize() {
|
if (lineChart) {
|
lineChart.resize();
|
}
|
},
|
|
dateChange() {
|
this.queryParams.date = this.date;
|
this.getChart(this.queryParams.deptId);
|
this.getList(this.queryParams.deptId);
|
}
|
|
},
|
mounted() {
|
lineChart = echarts.init(this.$refs.chartContent);
|
this.getChart(this.$route.query.index);
|
this.observe();
|
},
|
beforeDestroy() {
|
if (lineChart) {
|
lineChart.dispose();
|
observer.unobserve(this.$refs.chartContent);
|
}
|
},
|
handleSelect(key, keyPath) {
|
console.log(key, keyPath);
|
},
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.data-chart-container {
|
height: 400px;
|
margin-bottom: 20px;
|
|
.data-card {
|
height: 100%;
|
|
.card-content {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
}
|
}
|
|
.title-container {
|
position: absolute;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
z-index: 2;
|
|
|
.more-button {
|
cursor: pointer;
|
font-size: 16px;
|
padding: 0 10px;
|
}
|
}
|
|
.chart-container {
|
width: 100%;
|
height: 100%;
|
|
#chartContent {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.select-container {
|
margin: 0 20px;
|
width: 180px;
|
}
|
</style>
|
