From 01d6b05750a30f2e17d85d917e9bac80b7c34e92 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 26 四月 2024 09:31:34 +0800
Subject: [PATCH] Merge branch 'dev-threejs'
---
src/views/system/result/index.vue | 559 ++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 362 insertions(+), 197 deletions(-)
diff --git a/src/views/system/result/index.vue b/src/views/system/result/index.vue
index 0d78705..c08c57f 100644
--- a/src/views/system/result/index.vue
+++ b/src/views/system/result/index.vue
@@ -1,222 +1,332 @@
<template>
<div id="warp">
- <el-row>
- <el-col :span="6">
- <div class="city-warp">
- <div class="city">
- <div class="title">
- 鑷祦浜�
- </div>
- <div class="score-warp">
- <div class="score-item">
- <div>瑙嗛锛�</div>
- <div class="score">99.5</div>
- </div>
- <div class="score-item">
- <div>浜鸿劯锛�</div>
- <div class="score">87</div>
- </div>
- <div class="score-item">
- <div>鐩戞帶锛�</div>
- <div class="score">94</div>
- </div>
- </div>
- <div class="bottom-publish">
- <el-button size="medium" type="success">鍙戝竷</el-button>
- <el-button size="medium" @click="jumpDetail" type="info">璇︽儏</el-button>
- </div>
- </div>
- </div>
- </el-col>
- <el-col :span="6">
- <div class="city-warp">
- <div class="city">
- <div class="title">
- 瀵岄『
- </div>
- <div class="score-warp">
- <div class="score-item">
- <div>瑙嗛锛�</div>
- <div class="score">99.5</div>
- </div>
- <div class="score-item">
- <div>浜鸿劯锛�</div>
- <div class="score">87</div>
- </div>
- <div class="score-item">
- <div>鐩戞帶锛�</div>
- <div class="score">94</div>
- </div>
- </div>
- <div class="bottom-publish">
- <el-button size="medium" type="success">鍙戝竷</el-button>
- <el-button size="medium" @click="jumpDetail" type="info">璇︽儏</el-button>
- </div>
- </div>
- </div>
- </el-col>
- <el-col :span="6">
- <div class="city-warp">
- <div class="city">
- <div class="title">
- 鑽ｅ幙
- </div>
- <div class="score-warp">
- <div class="score-item">
- <div>瑙嗛锛�</div>
- <div class="score">99.5</div>
- </div>
- <div class="score-item">
- <div>浜鸿劯锛�</div>
- <div class="score">87</div>
- </div>
- <div class="score-item">
- <div>鐩戞帶锛�</div>
- <div class="score">94</div>
- </div>
- </div>
- <div class="bottom-publish">
- <el-button size="medium" type="success">鍙戝竷</el-button>
- <el-button size="medium" @click="jumpDetail" type="info">璇︽儏</el-button>
- </div>
- </div>
- </div>
- </el-col>
- <el-col :span="6">
- <div class="city-warp">
- <div class="city">
- <div class="title">
- 娌挎哗鍖�
- </div>
- <div class="score-warp">
- <div class="score-item">
- <div>瑙嗛锛�</div>
- <div class="score">99.5</div>
- </div>
- <div class="score-item">
- <div>浜鸿劯锛�</div>
- <div class="score">87</div>
- </div>
- <div class="score-item">
- <div>鐩戞帶锛�</div>
- <div class="score">94</div>
- </div>
- </div>
- <div class="bottom-publish">
- <el-button size="medium" type="success">鍙戝竷</el-button>
- <el-button size="medium" @click="jumpDetail" type="info">璇︽儏</el-button>
- </div>
- </div>
- </div>
- </el-col>
+ <div>
+ <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>
+ </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" type="date" placeholder="閫夋嫨鏃ユ湡">
+ </el-date-picker>
+ </div>
+ </div>
+ <div class="echart-container">
+ <div id="barChart" ref="barChart"></div>
+ </div>
+ </div>
+ </el-card>
+ </div>
- </el-row>
-
- <el-row style="margin-top: 30px">
- <el-col :span="6">
- <div class="city-warp">
- <div class="city">
- <div class="title">
- 楂樻柊鍖�
- </div>
- <div class="score-warp">
- <div class="score-item">
- <div>瑙嗛锛�</div>
- <div class="score">99.5</div>
+ <div>
+ <el-row :gutter="100">
+ <el-col :span="6" v-for="(city, index) in checkScoreList" :key="index">
+ <div class="city-warp">
+ <div class="city">
+ <div class="title">
+ {{ translateDeptId(parseInt(index)) }}
</div>
- <div class="score-item">
- <div>浜鸿劯锛�</div>
- <div class="score">87</div>
+ <div class="score-warp">
+ <div class="score-item">
+ <div style="font-size: 15px; margin-bottom: 15px">{{ formatCreateDate(city[0].createTime) }}</div>
+ </div>
+ <div v-for="(score, scoreIndex) in city" :key="scoreIndex">
+ <div class="score-item">
+ <div v-if="score.examineCategory == 0">杞﹁締锛�</div>
+ <div v-else-if="score.examineCategory == 1">浜鸿劯锛�</div>
+ <div v-else-if="score.examineCategory == 2">瑙嗛锛�</div>
+ <div class="score">{{ score.score }}</div>
+ </div>
+ </div>
</div>
- <div class="score-item">
- <div>鐩戞帶锛�</div>
- <div class="score">94</div>
+ <div class="bottom-publish">
+ <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>
</div>
- </div>
- <div class="bottom-publish">
- <el-button size="medium" type="success">鍙戝竷</el-button>
- <el-button size="medium" @click="jumpDetail" type="info">璇︽儏</el-button>
</div>
</div>
- </div>
- </el-col>
- <el-col :span="6">
- <div class="city-warp">
- <div class="city">
- <div class="title">
- 澶у畨鍖�
- </div>
- <div class="score-warp">
- <div class="score-item">
- <div>瑙嗛锛�</div>
- <div class="score">99.5</div>
- </div>
- <div class="score-item">
- <div>浜鸿劯锛�</div>
- <div class="score">87</div>
- </div>
- <div class="score-item">
- <div>鐩戞帶锛�</div>
- <div class="score">94</div>
- </div>
- </div>
- <div class="bottom-publish">
- <el-button size="medium" type="success">鍙戝竷</el-button>
- <el-button size="medium" @click="jumpDetail" type="info">璇︽儏</el-button>
- </div>
- </div>
- </div>
- </el-col>
- <el-col :span="6">
- <div class="city-warp">
- <div class="city">
- <div class="title">
- 璐′簳鍖�
- </div>
- <div class="score-warp">
- <div class="score-item">
- <div>瑙嗛锛�</div>
- <div class="score">99.5</div>
- </div>
- <div class="score-item">
- <div>浜鸿劯锛�</div>
- <div class="score">87</div>
- </div>
- <div class="score-item">
- <div>鐩戞帶锛�</div>
- <div class="score">94</div>
- </div>
- </div>
- <div class="bottom-publish">
- <el-button size="medium" type="success">鍙戝竷</el-button>
- <el-button size="medium" @click="jumpDetail" type="info">璇︽儏</el-button>
- </div>
- </div>
- </div>
- </el-col>
- </el-row>
+ </el-col>
+ </el-row>
+ </div>
</div>
</template>
<script>
+import { areaSelect } from '@/api/system/dept';
+import { listScore, getScore, delScore, addScore, updateScore, publishScore } from "@/api/platform/check-score";
+import * as echarts from 'echarts';
+let observer = null;
+let chart = null;
export default {
name: 'index',
data() {
return {
-
+ province: {
+ id: [],
+ publish: null,
+ },
+ checkScoreList: [],
+ areaList: [],
+ activeIndex: '1',
+ activeIndex2: '2',
+ date: '',
+ company: '',
+ dataList: {
+ name: ['瀵岄『鍘�', '鑽ｅ幙', '楂樻柊鍖�', '鑷祦浜曞尯', '璐′簳鍖�', '澶у畨鍖�', '娌挎哗鍖�'],
+ data1: [95, 96, 97, 95, 94.5, 93.6, 94.5],
+ data2: [93.7, 93.5, 94.3, 96.5, 95.3, 94.2, 93.3],
+ data3: [98.3, 94.3, 93.3, 95.5, 96.8, 96.1, 95.8],
+ },
+ // 鏌ヨ鍙傛暟
+ queryParams: {
+ examineTag: null,
+ createTime: null
+ },
}
},
+ created() {
+ this.getList();
+ this.areaSelect();
+ },
+ mounted() {
+ chart = echarts.init(this.$refs.barChart);
+ this.initEchart();
+ },
methods: {
- jumpDetail() {
- this.$router.push("/examine/detail")
- }
- }
+ jumpDetail(index) {
+ this.$router.push({
+ path: '/examine/detail',
+ query: {
+ index: index
+ }
+ })
+ },
+ initEchart() {
+ 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: this.dataList.name
+ },
+ yAxis: {
+ min: 90,
+ },
+ series: [
+ {
+ type: 'bar',
+ name: '瑙嗛鑰冩牳',
+ data: this.dataList.data1,
+ itemStyle: {
+ color: 'rgba(255, 165, 0, 1)'
+ }
+ },
+ {
+ type: 'bar',
+ name: '浜鸿劯鑰冩牳',
+ data: this.dataList.data2,
+ itemStyle: {
+ color: 'rgba(85, 192, 191, 1)'
+ }
+ },
+ {
+ type: 'bar',
+ name: '杞﹁締鑰冩牳',
+ data: this.dataList.data3,
+ itemStyle: {
+ color: 'rgba(62, 144, 247, 1)'
+ }
+ },
+ ]
+ }
+ 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 => {
+ this.areaList = res.data;
+ })
+ },
+ translateDeptId(deptId) {
+ const department = this.areaList.find(dept => dept.id === deptId);
+ return department ? department.value : '鏈煡';
+ },
+
+ isAnyUnpublished(city) {
+ // 妫�鏌� city 鐨� score 鏁扮粍涓槸鍚︽湁浠讳綍涓�涓殑 publish 灞炴�т负 'UNPUBLISHED'
+ return city.some(score => score.publish === 'UNPUBLISHED');
+ },
+ formatCreateDate(dateString) {
+ const date = new Date(dateString);
+ const year = date.getFullYear();
+ const month = date.getMonth() + 1; // getMonth() 杩斿洖鐨勬湀浠芥槸浠� 0 寮�濮嬬殑锛屾墍浠ヨ鍔� 1
+ const day = date.getDate();
+
+ // 浣跨敤 padStart 鏂规硶纭繚鏈堜唤鍜屾棩鏈熷缁堟槸涓や綅鏁�
+ const formattedMonth = month.toString().padStart(2, '0');
+ const formattedDay = day.toString().padStart(2, '0');
+
+ return `${year}骞�${formattedMonth}鏈�${formattedDay}鍙穈;
+ },
+ /** 瀵艰埅鍒囨崲 */
+ handleSelect(key) {
+ this.activeIndex = key; // 鏇存柊褰撳墠婵�娲荤殑鑿滃崟椤�
+ this.getList();
+ },
+ /** 鏌ヨ鑰冩牳鎴愮哗鍒楄〃 */
+ getList() {
+ this.loading = true;
+ if (this.activeIndex === '1') {
+ this.queryParams.examineTag = '0'; // 鐪佸巺鑰冩牳
+ } else if (this.activeIndex === '2') {
+ this.queryParams.examineTag = '1'; // 鍖哄煙鑰冩牳
+ }
+ // 鑾峰彇褰撳墠鏃ユ湡
+ const today = new Date();
+
+ // 璁＄畻鏄ㄥぉ鐨勬棩鏈�
+ const yesterday = new Date(today);
+ yesterday.setDate(today.getDate() - 1);
+
+ // 灏嗘槰澶╃殑鏃ユ湡鏍煎紡鍖栦负瀛楃涓诧紝杩欓噷鍋囪鍚庣鏈熸湜鐨勬槸ISO 8601鏍煎紡
+ this.queryParams.createTime = yesterday.toISOString().split('T')[0];
+
+ console.log(this.queryParams);
+ listScore(this.queryParams).then(response => {
+ this.checkScoreList = response.data;
+ console.log(this.checkScoreList);
+ this.loading = false;
+ this.setChartOption(this.checkScoreList);
+ });
+ },
+ 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);
+ this.$modal.confirm('鏄惁纭' + text + '鑰冩牳鍚嶄负"' + cityName + '"鐨勬暟鎹」锛�')
+ .then(() => {
+ return publishScore(this.province);
+ })
+ .then(() => {
+ this.getList();
+ this.$modal.msgSuccess(text + "鎴愬姛");
+ })
+ .catch(() => {
+ // 閿欒澶勭悊閫昏緫
+ });
+ },
+ },
}
</script>
-<style scoped>
+<style lang="scss" scoped>
.score-warp {
display: flex;
flex-direction: column;
@@ -224,24 +334,32 @@
align-items: center;
color: #797777
}
+
.score-item {
display: flex;
flex-direction: row;
+
}
+
.score {
width: 60px;
text-align: right;
+ padding: 3px 0;
}
+
#warp {
- padding: 20px;
+ padding: 0 10px;
}
+
.city-warp {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 210px;
+ margin-bottom: 25px;
}
+
.city {
width: 240px;
height: 100%;
@@ -251,13 +369,60 @@
text-align: center;
padding: 10px 0px;
}
+
.bottom-publish {
width: 100%;
position: absolute;
bottom: 10px;
}
+
.title {
font-size: larger;
- margin-bottom: 25px;
+ margin-bottom: 5px;
+}
+
+.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;
+ }
+}
+
+.echart-container {
+ width: 100%;
+ height: 100%;
+
+ #barChart {
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.select-container {
+ margin: 0 20px;
+ width: 180px;
}
</style>
--
Gitblit v1.8.0