From 16eb67ab6b103663d30cad9ba74360f982e131cb Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期二, 03 九月 2024 10:34:59 +0800 Subject: [PATCH] 自定义列显隐控制 --- src/views/system/check/result/index.vue | 71 ++++++++++++++++++++++------------- 1 files changed, 45 insertions(+), 26 deletions(-) diff --git a/src/views/system/check/result/index.vue b/src/views/system/check/result/index.vue index 090956a..e261e84 100644 --- a/src/views/system/check/result/index.vue +++ b/src/views/system/check/result/index.vue @@ -3,8 +3,10 @@ <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-item index="0">鐪佸巺鏈堝害</el-menu-item> + <el-menu-item index="2">鐪佸巺瀛e害</el-menu-item> + <el-menu-item index="1">甯傚眬鏈堝害</el-menu-item> + <el-menu-item index="3">甯傚眬瀛e害</el-menu-item> </el-menu> </div> @@ -31,9 +33,9 @@ </div> <div class="score-warp"> <div class="score-item"> - <div style="font-size: 15px; margin-bottom: 15px">{{ formatCreateDate(city[0].createTime) }}</div> + <div style="font-size: 15px; margin-bottom: 15px">{{ formatCreateDate(city[0]) }}</div> </div> - <div v-for="(score, scoreIndex) in city" :key="scoreIndex"> + <div v-for="(score, scoreIndex) in filterRepeat(city)" :key="scoreIndex"> <div class="score-item"> <div v-if="score.examineCategory == 2">杞﹁締锛�</div> <div v-else-if="score.examineCategory == 3">浜鸿劯锛�</div> @@ -43,10 +45,10 @@ </div> </div> <div class="bottom-publish"> - <el-button size="medium" :type="isAnyUnpublished(city) ? 'success' : 'danger'" @click="publish(city)"> + <el-button v-hasPermi="['check:score:publish']" 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> + <el-button size="medium" @click="jumpDetail(index)" type="primary">璇︽儏</el-button> </div> </div> </div> @@ -76,12 +78,6 @@ activeIndex: '0', date: '', company: '', - dataList: { - name: ['瀵岄『鍘�', '鑽e幙', '楂樻柊鍖�', '鑷祦浜曞尯', '璐′簳鍖�', '澶у畨鍖�', '娌挎哗鍖�'], - 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, @@ -90,13 +86,13 @@ } }, created() { + }, + mounted() { this.queryParams.examineTag = this.activeIndex this.getList(); this.areaSelect(); - }, - mounted() { chart = echarts.init(this.$refs.barChart); - this.initEchart(); + this.setChartOption(this.checkScoreList); }, methods: { jumpDetail(index) { @@ -138,6 +134,7 @@ type: 'bar', name: '瑙嗛鑰冩牳', data: this.dataList.data1, + barWidth: '40', itemStyle: { color: 'rgba(255, 165, 0, 1)' } @@ -146,6 +143,7 @@ type: 'bar', name: '浜鸿劯鑰冩牳', data: this.dataList.data2, + barWidth: '40', itemStyle: { color: 'rgba(85, 192, 191, 1)' } @@ -154,6 +152,7 @@ type: 'bar', name: '杞﹁締鑰冩牳', data: this.dataList.data3, + barWidth: '40', itemStyle: { color: 'rgba(62, 144, 247, 1)' } @@ -196,50 +195,59 @@ axisLabel: { }, data: nameArray + }, yAxis: { - min: 90, + min: 0 }, series: [ { type: 'bar', name: '瑙嗛鑰冩牳', data: data1, + barWidth: '40', itemStyle: { - color: 'rgba(255, 165, 0, 1)' + color: 'rgba(255, 165, 0, 1)', } }, { type: 'bar', name: '浜鸿劯鑰冩牳', data: data2, + barWidth: '40', itemStyle: { - color: 'rgba(85, 192, 191, 1)' + color: 'rgba(85, 192, 191, 1)', } }, { type: 'bar', name: '杞﹁締鑰冩牳', data: data3, + barWidth: '40', itemStyle: { - color: 'rgba(62, 144, 247, 1)' + color: 'rgba(62, 144, 247, 1)', } }, ] } chart.setOption(option, true); }, - filterData(data, tag) { - if (!data) return; - if(!Array.isArray(data)) return; + filterData(mapData, tag) { + if (!mapData) return; + if(!Array.isArray(mapData)) return; const tempArray = []; - data.forEach((item) => { + mapData.forEach((item) => { if(item.data.length) { + let flag = false; item.data.forEach((examine) => { if(examine.examineCategory === tag) { + flag = true tempArray.push(examine.score); } }) + if(!flag){ + tempArray.push(0); + } } }) return tempArray; @@ -259,8 +267,8 @@ // 妫�鏌� city 鐨� score 鏁扮粍涓槸鍚︽湁浠讳綍涓�涓殑 publish 灞炴�т负 'UNPUBLISHED' return city.some(score => score.publish === 'UNPUBLISHED'); }, - formatCreateDate(dateString) { - const date = new Date(dateString); + formatCreateDate(item) { + const date = new Date(item.createTime); const year = date.getFullYear(); const month = date.getMonth() + 1; // getMonth() 杩斿洖鐨勬湀浠芥槸浠� 0 寮�濮嬬殑锛屾墍浠ヨ鍔� 1 const day = date.getDate(); @@ -270,6 +278,17 @@ const formattedDay = day.toString().padStart(2, '0'); return `${year}骞�${formattedMonth}鏈�${formattedDay}鍙穈; + }, + filterRepeat(city) { + let list = []; + let examineCategorys = []; + city.forEach(item => { + if (examineCategorys.indexOf(item.examineCategory) === -1) { + examineCategorys.push(item.examineCategory); + list.push(item); + } + }); + return list; }, /** 瀵艰埅鍒囨崲 */ handleSelect(key) { @@ -294,8 +313,8 @@ listScore(this.queryParams).then(response => { this.checkScoreList = response.data; console.log(this.checkScoreList); - this.loading = false; this.setChartOption(this.checkScoreList); + this.loading = false; }); }, publish(city) { -- Gitblit v1.8.0