From 5208ae16a508a42be2e4b50ef299389fb556a67e Mon Sep 17 00:00:00 2001 From: fuliqi <fuliqi@qq.com> Date: 星期日, 28 四月 2024 09:14:18 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- 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..c08c57f 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)) 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