From 22200f9cc59230b103d7a9a695453304eda98044 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 24 四月 2024 17:53:28 +0800
Subject: [PATCH] feat:市局考核数据过滤
---
src/views/system/result/index.vue | 130 ++++++++++++++++++++++++++++++++++++------
1 files changed, 110 insertions(+), 20 deletions(-)
diff --git a/src/views/system/result/index.vue b/src/views/system/result/index.vue
index 7d4fdc5..3d6fe12 100644
--- a/src/views/system/result/index.vue
+++ b/src/views/system/result/index.vue
@@ -1,7 +1,8 @@
<template>
<div id="warp">
<div>
- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="margin-bottom: 10px">
+ <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
+ style="margin-bottom: 10px">
<el-menu-item index="1">鐪佸巺鑰冩牳</el-menu-item>
<el-menu-item index="2">甯傚眬鑰冩牳</el-menu-item>
</el-menu>
@@ -13,9 +14,9 @@
<div class="title-container">
<h1>鑰冩牳鎴愮哗</h1>
<div class="select-container">
- <el-date-picker v-model="date" type="date" placeholder="閫夋嫨鏃ユ湡">
- </el-date-picker>
- </div>
+ <el-date-picker v-model="date" type="date" placeholder="閫夋嫨鏃ユ湡">
+ </el-date-picker>
+ </div>
</div>
<div class="echart-container">
<div id="barChart" ref="barChart"></div>
@@ -30,12 +31,12 @@
<div class="city-warp">
<div class="city">
<div class="title">
- {{ translateDeptId(parseInt(index)) }}
+ {{ translateDeptId(parseInt(index)) }}
</div>
<div class="score-warp">
- <div class="score-item">
+ <div class="score-item">
<div style="font-size: 15px; margin-bottom: 15px">{{ formatCreateDate(city[0].createTime) }}</div>
- </div>
+ </div>
<div v-for="(score, scoreIndex) in city" :key="scoreIndex">
<div class="score-item">
<div v-if="score.examineCategory == 0">杞﹁締锛�</div>
@@ -46,11 +47,7 @@
</div>
</div>
<div class="bottom-publish">
- <el-button
- size="medium"
- :type="isAnyUnpublished(city) ? 'success' : 'danger'"
- @click="publish(city)"
- >
+ <el-button size="medium" :type="isAnyUnpublished(city) ? 'success' : 'danger'" @click="publish(city)">
{{ isAnyUnpublished(city) ? '鍙戝竷' : '鍙栨秷' }}
</el-button>
<el-button size="medium" @click="jumpDetail(index)" type="info">璇︽儏</el-button>
@@ -66,7 +63,7 @@
<script>
import { areaSelect } from '@/api/system/dept';
-import { listScore, getScore, delScore, addScore, updateScore,publishScore} from "@/api/platform/check-score";
+import { listScore, getScore, delScore, addScore, updateScore, publishScore } from "@/api/platform/check-score";
import * as echarts from 'echarts';
let observer = null;
let chart = null;
@@ -74,12 +71,12 @@
name: 'index',
data() {
return {
- province:{
+ province: {
id: [],
publish: null,
},
- checkScoreList:[],
- areaList:[],
+ checkScoreList: [],
+ areaList: [],
activeIndex: '1',
activeIndex2: '2',
date: '',
@@ -168,6 +165,88 @@
}
chart.setOption(option, true);
},
+
+ // 璁剧疆chart
+ setChartOption(data) {
+ if (!data) return;
+ const mapData = Object.keys(data).map(key => {
+ return {
+ name: this.translateDeptId(parseInt(key)),
+ data: data[key]
+ }
+ });
+ const nameArray = mapData.map(item => item.name);
+ const data1 = this.filterData(mapData, 0);
+ const data2 = this.filterData(mapData, 1);
+ const data3 = this.filterData(mapData, 2);
+ const option = {
+ grid: {
+ left: 0,
+ right: 0,
+ bottom: 0,
+ top: '20%',
+ containLabel: true
+ },
+ legend: {
+ right: 'right',
+ top: 'top',
+ icon: 'rect',
+ orient: "vertical",
+ },
+ tooltip: {},
+ xAxis: {
+ type: 'category',
+ axisLabel: {
+ },
+ data: nameArray
+ },
+ yAxis: {
+ min: 90,
+ },
+ series: [
+ {
+ type: 'bar',
+ name: '瑙嗛鑰冩牳',
+ data: data1,
+ itemStyle: {
+ color: 'rgba(255, 165, 0, 1)'
+ }
+ },
+ {
+ type: 'bar',
+ name: '浜鸿劯鑰冩牳',
+ data: data2,
+ itemStyle: {
+ color: 'rgba(85, 192, 191, 1)'
+ }
+ },
+ {
+ type: 'bar',
+ name: '杞﹁締鑰冩牳',
+ data: data3,
+ itemStyle: {
+ color: 'rgba(62, 144, 247, 1)'
+ }
+ },
+ ]
+ }
+ chart.setOption(option, true);
+ },
+ filterData(data, tag) {
+ if (!data) return;
+ if(Array.isArray(data) && !data.length) return;
+ const tempArray = [];
+ data.forEach((item) => {
+ if(item.data.length) {
+ item.data.forEach((examine) => {
+ if(examine.examineCategory === tag) {
+ tempArray.push(examine.score);
+ }
+ })
+ }
+ })
+ return tempArray;
+ },
// 鍖哄煙涓嬫媺鏁版嵁
areaSelect() {
areaSelect().then(res => {
@@ -196,7 +275,7 @@
return `${year}骞�${formattedMonth}鏈�${formattedDay}鍙穈;
},
/** 瀵艰埅鍒囨崲 */
- handleSelect(key){
+ handleSelect(key) {
this.activeIndex = key; // 鏇存柊褰撳墠婵�娲荤殑鑿滃崟椤�
this.getList();
},
@@ -223,10 +302,11 @@
this.checkScoreList = response.data;
console.log(this.checkScoreList);
this.loading = false;
+ this.setChartOption(this.checkScoreList);
});
},
- publish(city){
- let text = this.isAnyUnpublished(city) ? "鍙戝竷":"鍙栨秷鍙戝竷";
+ publish(city) {
+ let text = this.isAnyUnpublished(city) ? "鍙戝竷" : "鍙栨秷鍙戝竷";
const cityName = this.translateDeptId(parseInt(city[0].deptId));
this.province.publish = text === "鍙戝竷" ? "PUBLISHED" : "UNPUBLISHED";
this.province.id = city.map(city => city.id);
@@ -246,7 +326,7 @@
}
</script>
-<style lang = "scss" scoped>
+<style lang="scss" scoped>
.score-warp {
display: flex;
flex-direction: column;
@@ -254,19 +334,23 @@
align-items: center;
color: #797777
}
+
.score-item {
display: flex;
flex-direction: row;
}
+
.score {
width: 60px;
text-align: right;
padding: 3px 0;
}
+
#warp {
padding: 0 10px;
}
+
.city-warp {
display: flex;
flex-direction: column;
@@ -275,6 +359,7 @@
height: 210px;
margin-bottom: 25px;
}
+
.city {
width: 240px;
height: 100%;
@@ -284,15 +369,18 @@
text-align: center;
padding: 10px 0px;
}
+
.bottom-publish {
width: 100%;
position: absolute;
bottom: 10px;
}
+
.title {
font-size: larger;
margin-bottom: 5px;
}
+
.data-chart-container {
height: 400px;
margin-bottom: 20px;
@@ -307,6 +395,7 @@
}
}
}
+
.title-container {
position: absolute;
display: flex;
@@ -331,6 +420,7 @@
height: 100%;
}
}
+
.select-container {
margin: 0 20px;
width: 180px;
--
Gitblit v1.8.0