From 9bfdf6ecef01397978c140aa4fbd8c4840d894fb Mon Sep 17 00:00:00 2001 From: zmc <zmc_li@foxmail.com> Date: 星期二, 15 八月 2023 13:04:35 +0800 Subject: [PATCH] 异常页面表格列的颜色 --- src/views/HistoryFume.vue | 219 ++++++++++-------------------------------------------- 1 files changed, 42 insertions(+), 177 deletions(-) diff --git a/src/views/HistoryFume.vue b/src/views/HistoryFume.vue index 4396b51..19cca83 100644 --- a/src/views/HistoryFume.vue +++ b/src/views/HistoryFume.vue @@ -2,7 +2,7 @@ <script > import * as XLSX from 'xlsx/xlsx.mjs'; import dayjs from 'dayjs'; -import axiosInstance from '../utils/request.js' +import axiosInstanceInstance from '../utils/request.js' import TimeSelect from '../sfc/TimeSelect.vue'; // import ShopNameAndID from '../sfc/TimeSelect.vue'; @@ -23,6 +23,8 @@ }, data() { return { + // 绌虹姸鎬� + isNoData:false, // 涓嬫媺妗嗕竴寮�濮嬪睍绀虹殑鍚嶅瓧 beginShowShopName:[], options: {}, @@ -87,158 +89,7 @@ ], // 閫夋嫨搴楅摵鍚� devId: [null,null], - optionsShop: [ - { - value: '浠樺皬濮愬湪鎴愰兘', - label: '浠樺皬濮愬湪鎴愰兘', - children: [ - { - value: 'qinshi_31010320210010', - label: 'qinshi_31010320210010' - } - ] - }, - { - value: '鍚夊埢鑱旂洘', - label: '鍚夊埢鑱旂洘 ', - children: [ - { - value: 'qinshi_31010320200006', - label: 'qinshi_31010320200006' - } - ] - }, - { - value: '瀹跺湪濉斿暒', - label: '瀹跺湪濉斿暒', - children: [ - { - value: 'hengzhiyuan_64480047347215', - label: 'hengzhiyuan_64480047347215' - } - ] - }, - { - value: '鐙兼潵浜�', - label: '鐙兼潵浜� ', - children: [ - { - value: 'zhuoquan_31011020175012', - label: 'zhuoquan_31011020175012' - } - ] - }, - { - value: '涔愬嚡鎾掓槦娓稿簵', - label: '涔愬嚡鎾掓槦娓稿簵', - children: [ - { - value: 'qinshi_31010320200007', - label: 'qinshi_31010320200007' - } - ] - }, - { - value: '棣ㄨ繙缇庨灏忛晣锛堝搱灏肩編椋熷箍鍦猴級', - label: '棣ㄨ繙缇庨灏忛晣锛堝搱灏肩編椋熷箍鍦猴級', - children: [ - { - value: 'hengzhiyuan_64480047078091', - label: 'hengzhiyuan_64480047078091' - } - ] - }, - { - value: '妫掔害缈�', - label: '妫掔害缈�', - children: [ - { - value: 'qinshi_31010320190005', - label: 'qinshi_31010320190005' - } - ] - }, - { - value: '寮勫爞鍜亾', - label: '寮勫爞鍜亾', - children: [ - { - value: 'zhuoquan_31011020175008', - label: 'zhuoquan_31011020175008' - } - ] - }, - { - value: '鏉ㄨ榻愰綈鍝堝皵鐑よ倝', - label: '鏉ㄨ榻愰綈鍝堝皵鐑よ倝', - children: [ - { - value: 'zhuoquan_31011020175002', - label: 'zhuoquan_31011020175002' - } - ] - }, - { - value: '涓婃捣绋斾紶椁愰ギ绠$悊鏈夐檺鍏徃锛堜汉鐢熶竴涓诧級', - label: '涓婃捣绋斾紶椁愰ギ绠$悊鏈夐檺鍏徃锛堜汉鐢熶竴涓诧級', - children: [ - { - value: 'GLHB00000000016004', - label: 'GLHB00000000016004' - } - ] - }, - { - value: '缂樺', - label: '缂樺', - children: [ - { - value: 'fucheng310104200914', - label: 'fucheng310104200914' - } - ] - }, - { - value: '娉夌洓椁愰ギ锛堜笂娴凤級鏈夐檺鍏徃锛堥鍏跺锛�', - label: '娉夌洓椁愰ギ锛堜笂娴凤級鏈夐檺鍏徃锛堥鍏跺锛�', - children: [ - { - value: 'GLHB00000000016155', - label: 'GLHB00000000016155' - } - ] - }, - { - value: '涓拌寕鐑や覆', - label: '涓拌寕鐑や覆', - children: [ - { - value: 'GLHB00000000016011', - label: 'GLHB00000000016011' - } - ] - }, - { - value: '涓婃捣娉扮厡椁愰ギ绠$悊鏈夐檺鍏徃锛堟嘲鐓岄浮锛�', - label: '涓婃捣娉扮厡椁愰ギ绠$悊鏈夐檺鍏徃锛堟嘲鐓岄浮锛�', - children: [ - { - value: 'GLHB00000000010279', - label: 'GLHB00000000010279' - } - ] - }, - { - value: '寰愭眹鍖鸿景鐔欓棣�(灏忛搧鍚涗覆鐑у眳閰掑眿)', - label: '寰愭眹鍖鸿景鐔欓棣�(灏忛搧鍚涗覆鐑у眳閰掑眿)', - children: [ - { - value: 'GLHB00000000010504', - label: 'GLHB00000000010504' - } - ] - } - ] + }; }, @@ -256,8 +107,7 @@ beforeRouteUpdate(to, from, next) { if (to.name === this.$route.name) { - this.backMinuteDataAWeekAgo(); - + this.backMinuteDataAWeekAgo(); } next(); }, @@ -401,10 +251,6 @@ }, // 杩斿洖鍓嶄竴鍛ㄥ垎閽熸暟鎹〃鏁版嵁 backMinuteDataAWeekAgo() { - - - // 鎵撳紑椤甸潰鍔犺浇鏈�杩戜竴鍛ㄧ殑鏁版嵁 - this.loading = true; // 缁欑骇鑱旈�夋嫨鍣ㄨ缃粯璁ょ殑閫夋嫨椤� this.beginShowShopName = ['浠樺皬濮愬湪鎴愰兘', 'qinshi_31010320210010']; this.devId = ['浠樺皬濮愬湪鎴愰兘', 'qinshi_31010320210010']; @@ -412,7 +258,9 @@ // 缁欐椂闂撮�夋嫨鍣ㄨ缃粯璁ゆ椂闂� // this.beginTime = dayjs().subtract(1, 'week').format('YYYY-MM-DD HH:mm:ss'); // this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss'); - + // 灏嗘椂闂村悓姝ョ粰瀵煎嚭鏃堕棿 + this.exportBeginTime =this.beginTime + this.exportEndTime = this.endTime console.log(this.currentDateTime, this.oneWeekAgoDateTime); @@ -420,12 +268,19 @@ params['devId'] = 'qinshi_31010320210010'; params['beginTime'] = this.beginTime; params['endTime'] = this.endTime; - - axiosInstance + this.loading = true; + axiosInstanceInstance .get('/fume/history', { params: params }) .then((response) => { // 淇濆瓨杩斿洖鐨� this.exceedingData = response.data.data; + this.loading = false; + if(response.data.data.length==0){ + ElMessage('璇ユ椂娈垫棤鏁版嵁') + this.isNoData = true + return + } + // 鍒嗛〉 this.total = this.exceedingData.length; // 榛樿鏄剧ず绗竴椤� @@ -443,6 +298,9 @@ alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀'); return; } + // 灏嗘椂闂村悓姝ョ粰瀵煎嚭鏃堕棿 + this.exportBeginTime =this.beginTime + this.exportEndTime = this.endTime let params = {}; if (this.devId[1]) { params['devId'] = this.devId[1]; @@ -453,11 +311,22 @@ if (this.endTime) { params['endTime'] = this.endTime; } - axiosInstance + this.loading=true + axiosInstanceInstance .get('/fume/history', { params: params }) .then((response) => { + // 淇濆瓨杩斿洖鐨� this.exceedingData = response.data.data; + this.loading=false + + if(response.data.data.length==0){ + ElMessage('璇ユ椂娈垫棤鏁版嵁') + this.isNoData = true + return + } + // 绉婚櫎绌烘暟鎹姸鎬� + this.isNoData = false // this.displayData = response.data.data //琛ㄦ牸娓叉煋 // 鍒嗛〉 this.total = this.exceedingData.length; @@ -497,7 +366,7 @@ params['exportEndTime'] = this.exportEndTime; } - axiosInstance.get('/fume/export', { params: params }).then((result) => { + axiosInstanceInstance.get('/fume/export', { params: params }).then((result) => { this.exportData = result.data.data; console.log(this.exportData); }); @@ -524,7 +393,7 @@ // 缂栬緫琛ㄥご琛� 淇敼琛ㄥご xls['A1'].v = '璁惧缂栧彿'; xls['B1'].v = '搴楅摵鍚嶇О'; - xls['C1'].v = '鎶ヨ鏃堕棿'; + xls['C1'].v = '閲囬泦鏃堕棿'; xls['D1'].v = '椋庢満鐢垫祦(A)'; xls['E1'].v = '鍑�鍖栧櫒鐢垫祦(A)'; xls['F1'].v = '娌圭儫娴撳害(mg/m鲁)'; @@ -691,12 +560,12 @@ </div> - <div v-show="!isSwitch" class="chart-container"> + <div v-show="!isSwitch && !isNoData" v-loading="loading" class="chart-container"> <lineChart :chartData="options"></lineChart> </div> <!-- 琛ㄦ牸鏁版嵁 --> - <div v-show="isSwitch" class="container"> + <div v-show="isSwitch && !isNoData" v-loading="loading" class="container"> <el-table :data="displayData" style="width: 100%; margin-top: 25px" height="500px" table-layout="auto"> <el-table-column fixed prop="mvStatCode" label="璁惧缂栧彿"> <template #default="{ row }"> @@ -713,7 +582,7 @@ </template> </el-table-column> - <el-table-column prop="mvDataTime" label="閲囨牱鏃堕棿"> + <el-table-column prop="mvDataTime" label="閲囬泦鏃堕棿"> <template #default="{ row }"> <el-tooltip effect="dark" :content="row.mvDataTime"> <div class="cell ellipsis">{{ row.mvDataTime }}</div> @@ -747,6 +616,7 @@ <!-- layout="total, sizes, prev, pager, next, jumper" --> </div> + <el-empty v-show="isNoData" :image-size="200" /> </div> </template> @@ -802,17 +672,12 @@ .container { display: flex; flex-direction: column; - height: 100vh; } -@media screen and (max-width: 768px) { - /* 鍦ㄥ皬灞忓箷涓婂簲鐢ㄧ殑鏍峰紡 */ +:deep().el-dialog { + border-radius: 9px; } -@media screen and (min-width: 769px) and (max-width: 1024px) { - /* 鍦ㄤ腑绛夊睆骞曚笂搴旂敤鐨勬牱寮� */ -} - -@media screen and (min-width: 1025px) { - /* 鍦ㄥぇ灞忓箷涓婂簲鐢ㄧ殑鏍峰紡 */ +.el-table { + color: #000000; } </style> -- Gitblit v1.9.3