From c7e4dd9bd50cf6e6426598753c796ec1a27f333f Mon Sep 17 00:00:00 2001 From: zmc <zmc_li@foxmail.com> Date: 星期五, 22 十二月 2023 13:18:10 +0800 Subject: [PATCH] 修改了异常的名称 --- src/views/ExceedingFume.vue | 206 +++++++++++++++++++++++++++++++++++++------------- 1 files changed, 151 insertions(+), 55 deletions(-) diff --git a/src/views/ExceedingFume.vue b/src/views/ExceedingFume.vue index ffbb091..ff0364e 100644 --- a/src/views/ExceedingFume.vue +++ b/src/views/ExceedingFume.vue @@ -20,8 +20,9 @@ <el-button type="primary" plain - @click="showTable" style="margin-left: 20px" + :loading="button.queryButton" + @click="showTable" >鏌ヨ</el-button > @@ -44,7 +45,7 @@ </div> <div style="display: flex; justify-content: right; margin-right: 40px"> <span class="collapse-header-text"> - 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span + 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫鐩戞祴寮傚父淇℃伅姹囨��</span > </div> <br /> @@ -93,15 +94,20 @@ <div class="box-card-label"> <el-scrollbar> - <span class="box-card-label">搴楅摵鏁伴噺锛�</span> + <span class="box-card-label">寮傚父搴楅摵鍗犳瘮锛�</span> <span style="font-size: 20px" - >{{ exception0.length }} /{{ shopsTotal }}</span + >{{ exception0.length }} /{{ shopsTotal }} + </span > - <span style="margin-left: 150px; font-size: 14px"> - 鍗犳瘮锛歿{ - ((exception0.length / shopsTotal) * 100).toFixed(1) - }}%</span + <span style="font-size: 17px"> + ({{ + ((exception0.length/shopsTotal)*100).toFixed(1) + }}%)</span > + {{ shopsTotal}} + <span class="right-text"> + 寮傚父鏁板崰姣旓細{{ ((exception0Num/exceptionAllNum) * 100).toFixed(1) }}% + </span> </el-scrollbar> </div> @@ -148,15 +154,18 @@ </div> <div class="box-card-label"> <el-scrollbar> - <span class="box-card-label">搴楅摵鏁伴噺锛�</span> + <span class="box-card-label">寮傚父搴楅摵鍗犳瘮锛�</span> <span style="font-size: 20px" >{{ exception1.length }} /{{ shopsTotal }}</span > - <span style="margin-left: 150px; font-size: 14px"> - 鍗犳瘮锛歿{ - ((exception1.length / shopsTotal) * 100).toFixed(1) - }}%</span + <span style="font-size: 17px"> + ({{ + ((exception1.length/shopsTotal)*100).toFixed(1) + }}%)</span > + <span class="right-text"> + 寮傚父鏁板崰姣旓細{{ ((exception1Num/exceptionAllNum) * 100).toFixed(1) }}% + </span> </el-scrollbar> </div> @@ -199,20 +208,23 @@ margin-top: 5px; margin-left: 4px; " - >鎺夌嚎</span + >璁惧鎴栫綉缁滃紓甯�</span > </div> <div class="box-card-label"> <el-scrollbar> - <span class="box-card-label">搴楅摵鏁伴噺锛�</span> + <span class="box-card-label">寮傚父搴楅摵鍗犳瘮锛�</span> <span style="font-size: 20px" >{{ exception2.length }} /{{ shopsTotal }}</span > - <span style="margin-left: 150px; font-size: 14px"> - 鍗犳瘮锛歿{ - ((exception2.length / shopsTotal) * 100).toFixed(1) - }}%</span + <span style="font-size: 17px"> + ({{ + (((exception2.length)/shopsTotal)*100).toFixed(1) + }}%)</span > + <span class="right-text"> + 寮傚父鏁板崰姣旓細{{ connectException }}% + </span> </el-scrollbar> </div> <hr /> @@ -251,6 +263,7 @@ <el-card class="table-page" v-show="!isNoData"> <el-table ref="tableH" + size="small" v-loading="loading" :data="displayData" style="width: 100%" @@ -259,7 +272,7 @@ :cell-class-name="tableCellClassName" > - <el-table-column prop="diName" label="搴楅摵鍚嶇О"> + <el-table-column prop="diName" label="搴楅摵鍚嶇О" align="center"> <template #default="{ row }"> <el-tooltip effect="dark" :content="row.diName"> <div class="cell ellipsis">{{ row.diName }}</div> @@ -267,7 +280,7 @@ </template> </el-table-column> - <el-table-column prop="devId" label="璁惧缂栧彿"> + <el-table-column prop="devId" label="璁惧缂栧彿" align="center"> <template #default="{ row }"> <el-tooltip effect="dark" :content="row.devId"> <div class="cell ellipsis">{{ row.devId }}</div> @@ -275,21 +288,30 @@ </template> </el-table-column> - <el-table-column prop="exception" label="寮傚父鍒嗙被"> + <el-table-column prop="diSupplier" label="渚涘簲鍟�" align="center"> + <template #default="{ row }"> + <el-tooltip effect="dark" :content="row.diSupplier"> + <div class="cell ellipsis">{{ row.diSupplier }}</div> + </el-tooltip> + </template> + </el-table-column> + + + <el-table-column prop="exception" label="寮傚父鍒嗙被" align="center"> <template #default="{ row }"> <el-tooltip effect="dark" :content="row.exception"> <div class="cell ellipsis">{{ row.exception }}</div> </el-tooltip> </template> </el-table-column> - <el-table-column label="寮傚父绫诲瀷"> + <el-table-column label="寮傚父绫诲瀷" align="center"> <template #default="{ row }"> <span v-if="row.exceptionType == '0'">娌圭儫鏁版嵁瓒呮爣</span> <span v-else-if="row.exceptionType == '1'">鐤戜技渚涚數寮傚父</span> <span v-else-if="row.exceptionType == '2'">鎺夌嚎</span> </template> </el-table-column> - <el-table-column prop="region" label="鍦板尯"> + <el-table-column prop="region" label="鍦板尯" align="center"> <template #default="{ row }"> <el-tooltip effect="dark" :content="row.region"> <div class="cell ellipsis">{{ row.region }}</div> @@ -297,21 +319,21 @@ </template> </el-table-column> - <el-table-column prop="beginTime" label="寮�濮嬫椂闂�"> + <el-table-column prop="beginTime" label="寮�濮嬫椂闂�" align="center"> <template #default="{ row }"> <el-tooltip effect="dark" :content="row.beginTime"> <div class="cell ellipsis">{{ row.beginTime }}</div> </el-tooltip> </template> </el-table-column> - <el-table-column prop="endTime" label="缁撴潫鏃堕棿"> + <el-table-column prop="endTime" label="缁撴潫鏃堕棿" align="center"> <template #default="{ row }"> <el-tooltip effect="dark" :content="row.endTime"> <div class="cell ellipsis">{{ row.endTime }}</div> </el-tooltip> </template> </el-table-column> - <el-table-column label="鎿嶄綔"> + <el-table-column label="鎿嶄綔" align="center"> <template #default="{ row }"> <el-button type="primary" @@ -349,6 +371,7 @@ {{ rowEndTime }} </div> </div> + <div class="dialog-button-position"> <el-button type="danger" @@ -387,6 +410,7 @@ <ExceptionTypeLineChart :option="option" :is-open-dialog="centerDialogVisible" + v-loading="chartLoading" ></ExceptionTypeLineChart> <!-- --> @@ -397,13 +421,25 @@ border style="margin-top: 25px" > - <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" /> - <el-table-column prop="mvStatCode" label="璁惧缂栧彿" /> - - <el-table-column prop="mvDataTime" label="閲囬泦鏃堕棿" /> + <el-table-column + type="index" + label="搴忓彿" + width="60px" + align="center" + fixed + :index="indexMethod" + + ></el-table-column> + <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" show-overflow-tooltip/> + <el-table-column prop="mvStatCode" label="璁惧缂栧彿" align="center" show-overflow-tooltip/> + <el-table-column prop="diSupplier" label="渚涘簲鍟�" align="center" show-overflow-tooltip/> + <el-table-column prop="mvDataTime" label="閲囬泦鏃堕棿" align="center" show-overflow-tooltip/> + <el-table-column prop="mvFumeConcentration2" label="娌圭儫娴撳害(mg/m鲁)" + align="center" + show-overflow-tooltip /> </el-table> </div> @@ -428,6 +464,7 @@ import ExceptionType from '../sfc/ExceptionType.vue'; import TimeSelect from '../sfc/TimeSelect.vue'; import ExceptionText from '../sfc/ExceptionText.vue'; + import * as XLSX from 'xlsx/xlsx.mjs'; import dayjs from 'dayjs'; import axiosInstanceInstance from '../utils/request.js'; @@ -451,6 +488,11 @@ }, data() { return { + exception0Num:0, + exception1Num:0, + exception2Num:0, + // 鎶樼嚎鍥惧姞杞戒腑 + chartLoading:false, button:{ // 鏌ヨ鎸夐挳 queryButton:false, @@ -498,7 +540,8 @@ rowEndTime: '', // 寮傚父鐨勮澶囩紪鍙� rowMvStatCode: '', - + // 渚涘簲鍟� + rowDiSupplier:'', // 琛ㄦ牸鐨勪竴琛屾暟鎹� rowTable: [], //鎷兼帴鐨勬墍鏈夋暟鎹� @@ -610,7 +653,21 @@ window.addEventListener('resize', this.updateChart); } }, - + computed:{ + exceptionAllNum(){ + let sum = this.exception0Num+this.exception1Num+this.exception2Num + return sum == 0?1:sum + }, + connectException(){ + let sum = this.exception0Num+this.exception1Num+this.exception2Num + if(sum == 0){ + return 0 + } + else{ + return (100 - ((exception0Num/sum) * 100) - ((exception1Num/sum) * 100)).toFixed(1) + } + } + }, mounted() { // 浠庢帴鍙h幏鍙栧簵閾哄悕绉� 缁欑骇鑱斾笅鎷夋 this.getDeviceInfo(); @@ -622,9 +679,15 @@ window.addEventListener('resize', this.updateChart); }, methods: { + // 鍔熻兘锛氬璇濇琛ㄦ牸搴忓彿閫掑 + // 鏃堕棿锛�2023-8-17 + indexMethod(index) { + return index + 1 ; + }, + // 鍔熻兘锛氭敼鍙樿〃鏍兼煇涓崟鍏冩牸鐨勯鑹� tableCellClassName({ row, column, rowIndex, columnIndex }) { - if(columnIndex == 3){ + if(columnIndex == 4){ if (row.exceptionType == '0') { return 'exceeding-row'; } else if (row.exceptionType == '1') { @@ -770,6 +833,7 @@ this.rowBeginTime = this.displayData[index].beginTime; this.rowEndTime = this.displayData[index].endTime; this.rowMvStatCode = this.displayData[index].devId; + this.rowDiSupplier = this.displayData[index].diSupplier }, //鍔熻兘锛� 渚涚數寮傚父鍜屾帀绾挎椂鐨勮〃鏍兼暟鎹� @@ -786,6 +850,7 @@ this.exceedingData.push({ mvStatCode: this.rowMvStatCode, diName: this.rowShopName, + diSupplier:this.rowDiSupplier, mvDataTime: abnormalTimeTenMinute[i], mvFumeConcentration2: '' }); @@ -806,7 +871,7 @@ getNextRowData() { // 涓嶆槸琛ㄦ牸鐨勭涓�琛� if (this.selectedRowIndex !== 0) { - // 璁剧疆涓婁笅鏉℃寜閽笉鍙偣鍑� + // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙i攣 this.banTouch = 1 //寰楀埌涓婁竴琛屾暟鎹储寮� @@ -833,22 +898,16 @@ this.drawChartTest(); this.exceptionTotal = this.exceedingData.length; this.button.afterButton = false - - this.banTouch = 0 - }); } - // //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁 - // else { - // console.log(null); - // } + }, // 鑾峰彇鑾峰彇琛ㄦ牸涓嬩竴琛屾暟鎹� getPreviousRowData() { // 涓嶆槸琛ㄦ牸鐨勭涓�琛� if (this.selectedRowIndex < this.displayData.length - 1) { - // 璁剧疆涓婁笅鏉℃寜閽笉鍙偣鍑� + // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙i攣 this.banTouch = 1 //寰楀埌涓婁竴琛屾暟鎹储寮� @@ -876,15 +935,8 @@ this.drawChartTest(); this.exceptionTotal = this.exceedingData.length; this.button.preButton = false - - - this.banTouch = 0 }); } - //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁 - // else { - // console.log(null); - // } }, // 鈥樻煡鐪嬭鎯呪�� 寮瑰嚭妗嗛儴鍒� @@ -910,6 +962,7 @@ if (this.drawerData.endTime) { params['endTime'] = this.drawerData.endTime; } + axiosInstanceInstance .get('/fume/exceed', { params: params }) .then((response) => { @@ -943,6 +996,7 @@ } this.loading = true; this.button.queryButton = true + axiosInstanceInstance .get('/fume/abnormalthree', { params: params }) .then((response) => { @@ -1296,6 +1350,7 @@ ] }; } + this.banTouch = 0 }, // 鍔熻兘锛氱偣鍑� 鈥樻煡鐪嬭鎯呪�欙紝 鈥樹笅涓�鏉♀�欐寜閽椂浼� 鍏堥�昏緫璁$畻銆傛渶鍚庡睍绀哄浘褰� @@ -1329,6 +1384,8 @@ beforeAndAfterTime[2] ); + // 鎶樼嚎鍥惧姞杞戒腑鏁堟灉 + this.chartLoading = true // 璇锋眰鍓嶅崐娈� axiosInstanceInstance .get('/fume/history', { params: paramsBefore }) @@ -1445,6 +1502,7 @@ endIndex ); } + this.chartLoading = false }); }); }, @@ -1543,6 +1601,41 @@ .then((result) => { this.exception2 = result.data.data; }); + + /* 寮傚父鏁伴噺 */ + axiosInstanceInstance + .get('/fume/exceptionnum', { + params: { + exceptionType: '0', + beginTime: this.beginTime, + endTime: this.endTime + } + }) + .then((result) => { + this.exception0Num = result.data.data; + }); + axiosInstanceInstance + .get('/fume/exceptionnum', { + params: { + exceptionType: '1', + beginTime: this.beginTime, + endTime: this.endTime + } + }) + .then((result) => { + this.exception1Num = result.data.data; + }); + axiosInstanceInstance + .get('/fume/exceptionnum', { + params: { + exceptionType: '2', + beginTime: this.beginTime, + endTime: this.endTime + } + }) + .then((result) => { + this.exception2Num = result.data.data; + }); }, // 椤甸潰鍔犺浇鏃堕粯璁ゅ睍绀�7澶╁紓甯歌〃鏁版嵁 @@ -1553,7 +1646,7 @@ params['beginTime'] = this.beginTime; params['endTime'] = this.endTime; axiosInstanceInstance - .get('/fume/abnormalone', { params: params }) + .get('/fume/abnormalthree', { params: params }) .then((response) => { if (response.data.data.length == 0) { ElMessage('璇ユ椂娈垫棤鏁版嵁'); @@ -1639,9 +1732,16 @@ font-size: 14px; white-space: nowrap; } + +.right-text { + /* float :right; */ + /* text-align: right; */ + margin-left:80px; +} :deep().el-card { border-radius: 9px; } + /* 鈥樻煡鐪嬭鎯呪�� 鐨勫脊鍑烘楂樺害璋冩暣 */ :deep().el-dialog { height: 98%; @@ -1719,10 +1819,6 @@ .el-table { color: #000000; -} -/* 琛ㄦ牸鐨勫唴杈硅窛 */ -:deep().el-table .el-table__cell { - padding: 2px; } -- Gitblit v1.9.3