From 172d73cbe737c04b3d2c3fe8908db2460c241543 Mon Sep 17 00:00:00 2001 From: zmc <zmc_li@foxmail.com> Date: 星期一, 14 八月 2023 17:11:48 +0800 Subject: [PATCH] 油烟监测系统 Vue代码 --- src/test/TestNoData.vue | 1075 ++++++++++++++++++++++++++++++++++++----------------------- 1 files changed, 648 insertions(+), 427 deletions(-) diff --git a/src/test/TestNoData.vue b/src/test/TestNoData.vue index 959c747..dc4111d 100644 --- a/src/test/TestNoData.vue +++ b/src/test/TestNoData.vue @@ -19,7 +19,10 @@ <TimeSelect @submit-time="giveTime"></TimeSelect> <!-- </div> --> </div> - <div ref="h2" style="display: flex; margin-top: 2px; justify-content: right"> + <div + ref="h2" + style="display: flex; margin-top: 2px; justify-content: right" + > <!-- <span class="collapse-header-text"> 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span > --> @@ -31,13 +34,14 @@ style="margin-left: 20px" >鏌ヨ</el-button > - <el-button + + <!-- <el-button type="warning" plain @click="getAllData" style="margin-left: 20px" >鏌ヨ鍏ㄩ儴</el-button - > + > --> <el-tooltip class="box-item" @@ -58,8 +62,8 @@ </div> <div style="display: flex; justify-content: right"> <span class="collapse-header-text"> - 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span - > + 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span + > </div> <br /> @@ -72,7 +76,7 @@ content="鐐瑰嚮鍙姌鍙�" placement="right-start" > - <h4 class="collapse-header"> 寮傚父鍒嗘瀽</h4> + <h4 class="collapse-header">寮傚父鍒嗘瀽</h4> <el-icon class="header-icon"> <i-ep-info-filled /> </el-icon> @@ -84,119 +88,172 @@ content="鐐瑰嚮鍙姌鍙�" placement="right-start" > - </el-tooltip> </template> <el-card class="box-card"> <el-row :gutter="25"> <el-col :span="8"> - <div style="display: flex;"> - <img src="@/assets/exceed.jpg" style="width: 25px;height: 25px;margin-top: 5px;" /> - <span style="font-size: 16px;font-weight: bold;margin-top: 4px;margin-left: 4px;">娌圭儫娴撳害瓒呮爣</span> + <div style="display: flex"> + <img + src="@/assets/exceed.jpg" + style="width: 25px; height: 25px; margin-top: 5px" + /> + <span + style=" + font-size: 16px; + font-weight: bold; + margin-top: 4px; + margin-left: 4px; + " + >娌圭儫娴撳害瓒呮爣</span + > </div> - + <div class="box-card-label"> - <span class="box-card-label">搴楅摵鏁伴噺锛�</span> - <span style="font-size: 20px" - >{{ exception0.length }} /{{ shopsTotal }}</span - > - <span style="margin-left: 150px; font-size: 14px"> - 鍗犳瘮锛歿{ - ((exception0.length / shopsTotal) * 100).toFixed(1) - }}%</span - > + <el-scrollbar> + <span class="box-card-label">搴楅摵鏁伴噺锛�</span> + <span style="font-size: 20px" + >{{ exception0.length }} /{{ shopsTotal }}</span + > + <span style="margin-left: 150px; font-size: 14px"> + 鍗犳瘮锛歿{ + ((exception0.length / shopsTotal) * 100).toFixed(1) + }}%</span + > + </el-scrollbar> </div> <hr /> <div class="box-card-butcontainer"> - <el-card class="sub-box-card"> - <ExceptionText - v-for="(item,index) in exception0" - :key="item" - :devId="item.devId" - exception-value="0" - :begin-time="beginTime" - :end-time="endTime" - @submit-exception-data="getAbnormalDataByClick" - > - {{ item.diName }} - <span v-if="index<exception0.length-1" class="text-blank"> , </span> - </ExceptionText> + <el-card class="sub-box-card"> + <el-scrollbar max-height="70px"> + <ExceptionText + v-for="(item, index) in exception0" + :key="item" + :devId="item.devId" + exception-value="0" + :begin-time="beginTime" + :end-time="endTime" + @submit-exception-data="getAbnormalDataByClick" + > + {{ item.diName }} + <span + v-if="index < exception0.length - 1" + class="text-blank" + >,</span + > + </ExceptionText> + </el-scrollbar> </el-card> </div> </el-col> <el-col :span="8"> - <div style="display: flex;"> - <img src="@/assets/exception.jpg" style="width: 25px;height: 25px;margin-top: 5px;" /> - <span style=" font-size: 16px;font-weight: bold;margin-top: 5px;margin-left: 4px;" - >渚涚數寮傚父</span - > - </div> + <div style="display: flex"> + <img + src="@/assets/exception.jpg" + style="width: 25px; height: 25px; margin-top: 5px" + /> + <span + style=" + font-size: 16px; + font-weight: bold; + margin-top: 5px; + margin-left: 4px; + " + >渚涚數寮傚父</span + > + </div> <div class="box-card-label"> - <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 - > + <el-scrollbar> + <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 + > + </el-scrollbar> </div> <hr /> <div> - - <el-card class="sub-box-card"> - <ExceptionText - v-for="(item,index) in exception1" - :key="item" - :devId="item.devId" - exception-value="1" - :begin-time="beginTime" - :end-time="endTime" - @submit-exception-data="getAbnormalDataByClick" - > - {{ item.diName }} - <span v-if="index < exception1.length-1" class="text-blank"> , </span> - </ExceptionText> - </el-card> + <el-card class="sub-box-card"> + <el-scrollbar max-height="70px"> + <ExceptionText + v-for="(item, index) in exception1" + :key="item" + :devId="item.devId" + exception-value="1" + :begin-time="beginTime" + :end-time="endTime" + @submit-exception-data="getAbnormalDataByClick" + > + {{ item.diName }} + <span + v-if="index < exception1.length - 1" + class="text-blank" + >,</span + > + </ExceptionText> + </el-scrollbar> + </el-card> </div> </el-col> <el-col :span="8"> - <div style="display: flex;"> - <img src="@/assets/offline.jpg" style="width: 25px;height: 25px;margin-top: 5px;" /> - <span style=" font-size: 16px;font-weight: bold;margin-top: 5px;margin-left: 4px;">鎺夌嚎</span> + <div style="display: flex"> + <img + src="@/assets/offline.jpg" + style="width: 25px; height: 25px; margin-top: 5px" + /> + <span + style=" + font-size: 16px; + font-weight: bold; + margin-top: 5px; + margin-left: 4px; + " + >鎺夌嚎</span + > </div> <div class="box-card-label"> - <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 - > + <el-scrollbar> + <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 + > + </el-scrollbar> </div> <hr /> <div> - <el-card class="sub-box-card"> - <ExceptionText - v-for="(item,index) in exception2" - :key="item" - :devId="item.devId" - exception-value="2" - :begin-time="beginTime" - :end-time="endTime" - @submit-exception-data="getAbnormalDataByClick" - > - {{ item.diName }} - <span v-if="index<exception2.length-1" class="text-blank"> , </span> - </ExceptionText> + <el-card class="sub-box-card"> + <el-scrollbar max-height="70px"> + <ExceptionText + v-for="(item, index) in exception2" + :key="item" + :devId="item.devId" + exception-value="2" + :begin-time="beginTime" + :end-time="endTime" + @submit-exception-data="getAbnormalDataByClick" + > + {{ item.diName }} + <span + v-if="index < exception2.length - 1" + class="text-blank" + >,</span + > + </ExceptionText> + </el-scrollbar> </el-card> </div> </el-col> @@ -204,19 +261,19 @@ </el-card> </el-collapse-item> </el-collapse> - <!-- <hr/> + <!-- <hr/> <br> --> - <h4 class="table-text"> 寮傚父鏁版嵁</h4> + <h4 class="table-text">寮傚父鏁版嵁</h4> <el-card class="table-page" v-show="!isNoData"> - <el-table + ref="tableH" v-loading="loading" :data="displayData" style="width: 100%" :row-class-name="tableRowClassName" stripe - border - :height=tableHeight + border + :height="tableHeight" > <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" width="340"> <template #default="{ row }"> @@ -323,8 +380,11 @@ <!-- 瓒呮爣鏁版嵁鏃� --> <!-- 鎶樼嚎鍥� --> + + <!-- 鎺夌嚎 --> <div - ref="chart" + ref="chart1" + v-show="isOfflineShow" style=" width: 100%; height: 300px; @@ -335,8 +395,20 @@ " ></div> - <!-- v-show="!isAbnormal" --> - <!-- 琛ㄦ牸 --> + <!-- 瓒呮爣 --> + <div + ref="chart2" + v-show="isExceedShow" + style=" + width: 100%; + height: 300px; + /* min-width: 100px; */ + margin-bottom: 20px; + margin-left: 10px; + min-width: 350px; + " + ></div> + <!-- <ExceptionTypeLineChart :allData="allChartData"></ExceptionTypeLineChart> --> <!-- --> <div style="margin-top: 40px; margin-bottom: 5px; border: 1px"> @@ -373,7 +445,6 @@ </template> <script> - import ExceptionType from '../sfc/ExceptionType.vue'; import TimeSelect from '../sfc/TimeSelect.vue'; import ExceptionText from '../sfc/ExceptionText.vue'; @@ -385,22 +456,31 @@ const ShopNameAndID = defineAsyncComponent(() => import('../sfc/../sfc/ShopNameAndID.vue') ); + +// 寮傛缁勪欢 +// const ExceptionTypeLineChart = defineAsyncComponent(() => +// import('../sfc/ExceptionTypeLineChart.vue') +// ) export default { - name: 'TablePage', components: { ExceptionType, TimeSelect, ShopNameAndID, ExceptionText + // ExceptionTypeLineChart }, data() { return { - + //鎺夌嚎鎴栬秴鏍囩殑鍥惧舰灞曠ず + isOfflineShow: false, + isExceedShow: false, + // 鎶樼嚎鍥惧睍绀� + isChartShow: false, // table鍏冪礌 - tableRef:null, + tableRef: null, // 寮傚父琛ㄦ牸鏁版嵁 - tableHeight:300, + tableHeight: 300, // 绌烘暟鎹姸鎬� isNoData: false, // 寮瑰嚭妗嗕腑琛ㄦ牸鏉℃暟 @@ -441,7 +521,8 @@ afterData: [], // 鎶樼嚎鍥惧疄渚� - chart: null, + chart1: null, + chart2: null, // -1琛ㄧず鏈�夋嫨琛ㄦ牸鐨勮 selectedRowIndex: -1, @@ -531,7 +612,7 @@ this.isNextCantouch = false; } } - // 澶勪簬琛ㄦ牸鏈�鍚庝竴鎻愬摝鍟婃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣 + // 澶勪簬琛ㄦ牸鏈�鍚庝竴鏉℃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣 else if (newVaue === this.displayData.length - 1) { this.isNextCantouch = true; //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿� @@ -552,11 +633,13 @@ }, endTime() { this.getShopNames(); + }, + centerDialogVisible() { + window.addEventListener('resize', this.updateChart); } }, mounted() { - // 浠庢帴鍙h幏鍙栧簵閾哄悕绉� 缁欑骇鑱斾笅鎷夋 this.getDeviceInfo(); @@ -566,28 +649,99 @@ // 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� 娓叉煋寮傚父鍒嗘瀽閮ㄥ垎瀵瑰簲鐨勫簵閾哄悕 this.getShopNames(); window.addEventListener('resize', this.updateChart); - // this.tableHeight = this.calcTableHeight() - }, methods: { - // calcTableHeight() { - // const h1 = this.$refs.h1.offsetHeight; - // const h2 = this.$refs.h2.offsetHeight; - // const h3 = this.$refs.h3.$el.offsetHeight; - // const h4 = this.$refs.h4.$el.offsetHeight; - // // return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`; - // return `calc(100vh - ${h1}px - ${h2}px- ${h3}px - ${h4}px - 60px - var(--el-main-padding) * 2)`; - // }, + // 鏃堕棿鏄惁瓒呰繃10鍒嗛挓 + isTimeDifferenceGreaterThan10Minutes(dateString1, dateString2) { + const date1 = new Date(dateString1); + const date2 = new Date(dateString2); - warn() { - alert('鐐瑰嚮浜�'); + // 璁$畻涓や釜鏃ユ湡鐨勬椂闂村樊锛堟绉掞級 + const timeDifferenceMs = Math.abs(date1 - date2); + + // 杞崲涓哄垎閽� + const timeDifferenceMinutes = Math.floor(timeDifferenceMs / (1000 * 60)); + + // 鍒ゆ柇鏃堕棿宸槸鍚﹀ぇ浜�10鍒嗛挓 + return timeDifferenceMinutes > 10; }, + + // 浠�10鍒嗛挓涓洪棿闅旇繑鍥炴椂闂村瓧绗︿覆鏁扮粍 + generateTimePoints(timePoints,yAxisData) { + let updatedTimePoints = []; + let yAxisDataAdressed = [] + for (let i = 0; i < timePoints.length; i++) { + updatedTimePoints.push(timePoints[i]); + yAxisDataAdressed.push(yAxisData[i]) + if (i < timePoints.length - 1) { + let current = timePoints[i]; + let next = timePoints[i + 1]; + while (this.isTimeDifferenceGreaterThan10Minutes(current, next)) { + current = dayjs(current) + .add(10, 'minute') + .format('YYYY-MM-DD HH:mm:ss'); + updatedTimePoints.push(current); + yAxisDataAdressed.push(null) + } + } + } + let obj = {} + obj['time'] = updatedTimePoints + obj['data'] = yAxisDataAdressed + return obj; + }, + + isExceedOneMonth(dateStr1, dateStr2) { + // 瓒呰繃涓�涓湀锛岃繑鍥濼rue锛屽惁鍒欒繑鍥濬alse + // 灏嗘棩鏈熷瓧绗︿覆杞负鏃ユ湡瀵硅薄 + const date1 = new Date(dateStr1); + const date2 = new Date(dateStr2); + + // 鑾峰彇涓や釜鏃ユ湡鐨勫勾銆佹湀銆佹棩 + const year1 = date1.getFullYear(); + const month1 = date1.getMonth(); + const day1 = date1.getDate(); + + const year2 = date2.getFullYear(); + const month2 = date2.getMonth(); + const day2 = date2.getDate(); + console.log(month1, month2); + + // 鍒ゆ柇涓や釜鏃ユ湡鏄惁鐩稿樊涓�涓湀 + if (year1 === year2) { + // 骞翠唤鐩哥瓑锛屾瘮杈冩湀浠藉樊鍊� + if (Math.abs(month1 - month2) === 1) { + // 鏈堜唤宸�间负1锛岃繕闇�瑕佸垽鏂叿浣撴棩鏈� + if ( + (month1 < month2 && day1 < day2) || + (month1 > month2 && day1 > day2) + ) { + return true; + } + } + } else if (Math.abs(year1 - year2) === 1) { + // 骞翠唤宸�间负1锛屾瘮杈冩湀浠藉拰鏃ユ湡 + if ( + (year1 < year2 && month1 === 11 && month2 === 0 && day1 < day2) || + (year1 > year2 && month1 === 0 && month2 === 11 && day1 > day2) + ) { + return true; + } + } + + // 榛樿杩斿洖false锛岃〃绀轰袱涓棩鏈熷瓧绗︿覆涓嶇浉宸竴涓湀 + return false; + }, + // 鍒氭墦寮�鍗$墖鏃剁涓�涓浘褰笉浼氳嚜鍔ㄤ几缂� 褰撶偣鍑讳笂/涓嬩竴鏉℃椂浼氳嚜鍔ㄤ几缂� // 鍥惧舰鍝嶅簲寮忓彉鍖� updateChart() { this.$nextTick(() => { - if (this.chart) { - this.chart.resize(); + if (this.chart1) { + this.chart1.resize(); + } + if (this.chart2) { + this.chart2.resize(); } }); }, @@ -637,6 +791,7 @@ this.rowBeginTime, this.rowEndTime ); + for (let i = 0; i < abnormalTimeTenMinute.length; i++) { this.exceedingData.push({ mvStatCode: this.rowMvStatCode, @@ -645,6 +800,22 @@ mvFumeConcentration2: '' }); } + + // 鍏ㄩ儴鏁版嵁鍔犲叆 + // for (let i = 0; i < data.length; i++) { + // if (data[i] == null) { + // this.exceedingData.push({ + // mvStatCode: this.rowMvStatCode, + // diName: this.rowShopName, + // mvDataTime: abnormalTimeTenMinute[i], + // mvFumeConcentration2: '' + // }); + // } + // else { + // this.exceedingData.push(data[i]); + // } + // } + // 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟 this.exceptionTotal = abnormalTimeTenMinute.length; }, @@ -688,7 +859,7 @@ .then((response) => { // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹� this.exceedingData = response.data.data; - this.chart = null; + // this.chart = null; this.drawChart(); this.exceptionTotal = this.exceedingData.length; }); @@ -696,12 +867,6 @@ //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁 else if (this.selectedRowIndex === 0) { console.log(null); - // 璀﹀憡 - // ElMessage.warn('宸叉槸绗竴鏉℃暟鎹�'); - // ElMessage.info('宸叉槸璇ラ〉绗竴鏉℃暟鎹�'); - - // 鈥欎笂涓�鏉♀�樼殑鎸夐挳涓嶅彲鐐瑰嚮 - // this.isPreCantouch = true } }, @@ -737,7 +902,6 @@ this.exceedingData = response.data.data; console.log('杩斿洖鐨勫紓甯告暟鎹负锛�'); console.log(this.exceedingData); - this.chart = null; this.drawChart(); this.exceptionTotal = this.exceedingData.length; }); @@ -747,7 +911,6 @@ console.log(null); // 璀﹀憡 // ElMessage.info('宸叉槸璇ラ〉鏈�鍚庝竴鏉℃暟鎹�'); - // 鈥欎笅涓�鏉♀�樼殑鎸夐挳涓嶅彲鐐瑰嚮 // this.isNextCantouch = true } @@ -796,8 +959,8 @@ // 鐢ㄦ埛鏍规嵁杈撳叆鐨勬潯浠舵煡璇� showTable() { - if (this.beginTime > this.endTime) { - alert('璇疯緭鍏ユ纭殑鏃堕棿鑼冨洿'); + if (this.isExceedOneMonth(this.beginTime, this.endTime)) { + alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀'); return; } let params = {}; @@ -825,7 +988,7 @@ this.total = this.abnormalData.length; this.loading = false; if (response.data.data.length == 0) { - alert('璇ユ椂娈垫棤鏁版嵁'); + ElMessage('璇ユ椂娈垫棤鏁版嵁'); this.isNoData = true; return; } @@ -842,19 +1005,10 @@ this.handleCurrentChange(1); }, handleCurrentChange(val) { - // this.startIndex = (val - 1) * this.pageSize; - // const endIndex = this.startIndex + this.pageSize; - const startIndex = (val - 1) * this.pageSize; const endIndex = startIndex + this.pageSize; - // console.log('璧峰绱㈠紩涓�:',this.startIndex) - // console.log('椤甸潰澶у皬涓�:',this.pageSize) - this.displayData = this.abnormalData.slice(startIndex, endIndex); - // setTimeout(() => { - // this.displayData = this.abnormalData - // }, 1000); - // console.log(this.displayData); + this.displayData = this.abnormalData.slice(startIndex, endIndex); }, //鐩稿樊澶氬皯涓崄鍒嗛挓 璁$畻涓苟涓嶅寘鎷紑濮嬫椂闂达紝浣嗗寘鎷粨鏉熸椂闂淬�� @@ -872,25 +1026,15 @@ // 渚涚數寮傚父鍜屾帀绾跨殑鎶樼嚎鍥� linechart(xAxisData1, abnormalBeginTime, abnormalEndTime, fumeExceeding) { - this.chart = echarts.init(this.$refs.chart); - // $('#ModalGrade').on('shown.bs.modal', function(){ - // this.chart.resize() - // }) - this.chart.setOption({ - title: { - // text: '娌圭儫瓒呮爣鏁版嵁', - // left: 'center' - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, + // 瓒呮爣鍥惧舰chart2瀹炰緥涓虹┖ + if (this.chart2 != null) { + this.chart2 == null; + } + if (this.chart1 == null) { + this.chart1 = echarts.init(this.$refs.chart1); + } + this.chart1.setOption({ tooltip: {}, - // legend: { - // data: ['娌圭儫瓒呮爣鏁版嵁'] - // }, toolbox: { // 宸ュ叿鏍� feature: { @@ -904,14 +1048,8 @@ } }, xAxis: { - // type: 'time', - // 鍦ㄧ被鐩酱锛坱ype: 'category'锛変腑鏈夋晥銆� data: xAxisData1, name: '鏃堕棿' - // axisLabel: { - // interval:3, - // rotate:40 - // } }, yAxis: { type: 'value', @@ -924,7 +1062,7 @@ }, series: [ { - name: '娌圭儫瓒呮爣鏁版嵁', + name: '娌圭儫鏁版嵁', type: 'line', data: fumeExceeding, markLine: { @@ -951,15 +1089,16 @@ // 灞曠ず鎶樼嚎鍥� drawChart() { - // 褰撳嚭鐜颁緵鐢靛紓甯稿拰鎺夌嚎鏃讹紝鏃舵鏃犳暟鎹� 鍒欐嫾鎺ュ墠鍚庢鏁版嵁 if ( this.exceedingData.length === 0 || this.rowExceptionType === '1' || this.rowExceptionType === '2' ) { - // 閲嶆瀯琛ㄦ牸 鎵嬪姩濉厖 - this.setExceptionData(); + this.isOfflineShow = true; + this.isExceedShow = false; + // // 閲嶆瀯琛ㄦ牸 鎵嬪姩濉厖 + // this.setExceptionData(); // 灞曠ず this.isAbnormal = true; // 鎷兼帴鏃ユ湡 @@ -998,83 +1137,121 @@ beginTime: after10MinBegin, endTime: after40MinEnd }; + // 璇锋眰鍓嶅崐娈� axiosInstanceInstance .get('/fume/history', { params: paramsBefore }) .then((result) => { this.beforeData = result.data.data; + // 璇锋眰鍚庡崐娈� + axiosInstanceInstance + .get('/fume/history', { params: paramsAfter }) + .then((result) => { + this.afterData = result.data.data; + //鐢╪ull濉厖涓紓甯告棤鏁版嵁鐨勬椂闂� + //鐩稿樊鍑犱釜10鍒嗛挓 + const TenMinuteNum = this.diffTenMinutesNum( + this.abnormalBt, + this.abnormalEt + ); + //淇濆瓨绌哄�� + let tempArr = []; + for (let i = 0; i < TenMinuteNum; i++) { + tempArr.push(null); + } + console.log('濉厖鏁扮粍涓猴細', tempArr); + + console.log('鍓嶅悗鏁版嵁涓猴細', this.beforeData, this.afterData); + this.allExceptionTimeData = [ + ...this.beforeData, + ...tempArr, + ...this.afterData + ]; + console.log('鍚堝苟鍚庢暟缁勪负', this.allExceptionTimeData); + + // 閲嶆瀯琛ㄦ牸 鎵嬪姩濉厖 + this.setExceptionData(this.allExceptionTimeData); + + //灞曠ず鍥惧舰 + // x杞存棩鏈熸椂闂� + let dateList = []; + // y杞� 瓒呮爣娌圭儫娴撳害 + let fumeExceeding = []; + // 杩炵画鐨勬椂闂� + let dateListTemp = [] + let fumeExceedingTemp = [] + + for (let i = 0; i < this.allExceptionTimeData.length; i++) { + if (this.allExceptionTimeData[i] == null) { + //x杞存棩鏈� + //鏃犳暟鎹椂锛� 涓哄墠闈㈡椂闂寸偣澧炲姞10鍒嗛挓 + dateList.push( + dayjs(dateList[dateList.length - 1]) + .add(10, 'minute') + .format('YYYY-MM-DD HH:mm:ss') + ); + // 瓒呮爣娌圭儫娴撳害 + fumeExceeding.push(null); + } else { + //x杞存棩鏈� + dateList.push(this.allExceptionTimeData[i].mvDataTime); + // 瓒呮爣娌圭儫娴撳害 + fumeExceeding.push( + this.allExceptionTimeData[i].mvFumeConcentration2 + ); + } + } + // 鏃堕棿杩炵画 + // for(let i =0;i<dateList.length-1;i++){ + // if(this.isTimeDifferenceGreaterThan10Minutes(dateList[i],dateList[i+1])){ + // dateListTemp.push(dayjs(dateList[i]).add(10,'minute').format('YYYY-MM-DD HH:mm:ss')) + // fumeExceedingTemp.push(null) + // }else{ + // dateListTemp.push(dateList[i]) + // fumeExceedingTemp.push(fumeExceeding[i]) + // } + // } + // 鏃堕棿杩炵画 + let objData= this.generateTimePoints(dateList,fumeExceeding); + dateListTemp = objData['time'] + fumeExceedingTemp = objData['data'] + + //灞曠ず鎶樼嚎鍥� + // this.chart = null; + // console.log('x杞寸殑鏃ユ湡涓猴細',dateList); + // console.log('寮�濮嬪拰缁撴潫鏃ユ湡涓猴細',this.abnormalBt,this.abnormalEt); + let dateList1 = []; + dateListTemp.forEach((item) => { + dateList1.push(dayjs(item).format('HH:mm')); + }); + this.abnormalBt = dayjs(this.abnormalBt).format('HH:mm'); + this.abnormalEt = dayjs(this.abnormalEt).format('HH:mm'); + + // console.log('鍙樺寲鐨勬暟鎹細',dateList1); + // console.log('鍙樺寲鐨勬暟鎹細',this.abnormalBt); + // console.log('鍙樺寲鐨勬暟鎹細',this.abnormalEt); + + if (this.char1) { + this.char1.dispose(); + } + + this.linechart( + dateList1, + this.abnormalBt, + this.abnormalEt, + fumeExceedingTemp + ); + }); }); - // 璇锋眰鍚庡崐娈� - axiosInstanceInstance - .get('/fume/history', { params: paramsAfter }) - .then((result) => { - this.afterData = result.data.data; - }); - - //鐢╪ull濉厖涓紓甯告棤鏁版嵁鐨勬椂闂� - //鐩稿樊鍑犱釜10鍒嗛挓 - const TenMinuteNum = this.diffTenMinutesNum( - this.abnormalBt, - this.abnormalEt - ); - //淇濆瓨绌哄�� - let tempArr = []; - for (let i = 0; i < TenMinuteNum; i++) { - tempArr.push(null); - } - console.log('濉厖鏁扮粍涓猴細', tempArr); - - //鍚堝苟鏁扮粍 - setTimeout(() => { - this.allExceptionTimeData = [ - ...this.beforeData, - ...tempArr, - ...this.afterData - ]; - console.log('鍚堝苟鍚庢暟缁勪负', this.allExceptionTimeData); - //灞曠ず鍥惧舰 - // x杞存棩鏈熸椂闂� - let dateList = []; - // y杞� 瓒呮爣娌圭儫娴撳害 - let fumeExceeding = []; - for (let i = 0; i < this.allExceptionTimeData.length; i++) { - if (this.allExceptionTimeData[i] == null) { - //x杞存棩鏈� - //鏃犳暟鎹椂锛� 涓哄墠闈㈡椂闂寸偣澧炲姞10鍒嗛挓 - dateList.push( - dayjs(dateList[dateList.length - 1]) - .add(10, 'minute') - .format('YYYY-MM-DD HH:mm:ss') - ); - // 瓒呮爣娌圭儫娴撳害 - fumeExceeding.push(null); - } else { - //x杞存棩鏈� - dateList.push(this.allExceptionTimeData[i].mvDataTime); - // 瓒呮爣娌圭儫娴撳害 - fumeExceeding.push( - this.allExceptionTimeData[i].mvFumeConcentration2 - ); - } - } - console.log('x:', dateList); - console.log('fume:', fumeExceeding); - - //灞曠ず鎶樼嚎鍥� - this.chart = null; - this.linechart( - dateList, - this.abnormalBt, - this.abnormalEt, - fumeExceeding - ); - }, 500); - - // ---------------------------------------- } + + // ---------------------------------------- // 娌圭儫娴撳害瓒呮爣鏃剁殑鎶樼嚎鍥� else { + // 鍥惧舰灞曠ず + this.isExceedShow = true; + this.isOfflineShow = false; // // 娓呯┖锛岃鏃犳暟鎹潯鏁伴殣钘忥紝浣垮巻鍙叉暟鎹殑鏍囩鏉℃暟鏄剧ず鍑烘潵 // this.abnormalTimeTenMinute = [] this.isAbnormal = false; @@ -1094,6 +1271,8 @@ let beginTime = new Date(dateList[0]); const endTime = new Date(dateList[dateList.length - 1]); + let beginT = dayjs(beginTime).format('HH:mm'); + let endT = dayjs(endTime).format('HH:mm'); // 寰�鍓�30鍒嗛挓 const before30MinBegin = dayjs(beginTime) .subtract(30, 'minute') @@ -1109,7 +1288,7 @@ const after10MinEnd = dayjs(endTime) .add(10, 'minute') .format('YYYY-MM-DD HH:mm:ss'); - console.log('鍓嶅悗鏃堕棿涓�', before30MinBegin, after30MinEnd); + let paramsBefore = { devId: this.displayData[this.selectedRowIndex].devId, beginTime: before30MinBegin, @@ -1125,167 +1304,213 @@ .get('/fume/history', { params: paramsBefore }) .then((result) => { this.beforeData = result.data.data; - }); - // 璇锋眰鍚庡崐娈� - axiosInstanceInstance - .get('/fume/history', { params: paramsAfter }) - .then((result) => { - this.afterData = result.data.data; - }); + // 璇锋眰鍚庡崐娈� + axiosInstanceInstance + .get('/fume/history', { params: paramsAfter }) + .then((result) => { + this.afterData = result.data.data; + let before = []; + let after = []; + console.log('璇锋眰鍚庣殑鏁版嵁涓�', this.beforeData, this.afterData); - setTimeout(() => { - console.log('璇锋眰鍚庣殑鏁版嵁涓�', this.beforeData, this.afterData); - this.allExceptionTimeData = [ - ...this.beforeData, - ...this.exceedingData, - ...this.afterData - ]; - // x杞存棩鏈熸椂闂� - let dateList1 = []; - // y杞� 瓒呮爣娌圭儫娴撳害 - let fumeExceeding1 = []; - console.log('鎵�鏈夋暟鎹暱搴�', this.allExceptionTimeData.length); - console.log('鎵�鏈夋暟鎹�', this.allExceptionTimeData); - for (let i = 0; i < this.allExceptionTimeData.length; i++) { - if (this.allExceptionTimeData[i] == null) { - //x杞存棩鏈� - //鏃犳暟鎹椂锛� 涓哄墠闈㈡椂闂寸偣澧炲姞10鍒嗛挓 - dateList1.push( - dayjs(dateList1[dateList1.length - 1]) - .add(10, 'minute') - .format('YYYY-MM-DD HH:mm:ss') - ); - // 瓒呮爣娌圭儫娴撳害 - fumeExceeding1.push(null); - } else { - //x杞存棩鏈� - dateList1.push(this.allExceptionTimeData[i].mvDataTime); - // 瓒呮爣娌圭儫娴撳害 - fumeExceeding1.push( - this.allExceptionTimeData[i].mvFumeConcentration2 - ); - } - } - - // 鎻愬彇鏃堕棿鍖洪棿鍐呯殑鏁版嵁绱㈠紩 - var startIndex = dateList1.findIndex((item) => item === dateList[0]); - var endIndex = dateList1.findIndex( - (item) => item === dateList[dateList.length - 1] - ); - - this.chart = echarts.init(this.$refs.chart); - this.chart.setOption({ - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - tooltip: {}, - // legend: { - // data: ['娌圭儫瓒呮爣鏁版嵁'] - // }, - toolbox: { - // 宸ュ叿鏍� - feature: { - dataZoom: { - // 鍖哄煙缂╂斁 - yAxisIndex: 'none' - }, - // 淇濆瓨涓哄浘鐗� - saveAsImage: {} - } - }, - xAxis: { - // type: 'time', - // 鍦ㄧ被鐩酱锛坱ype: 'category'锛変腑鏈夋晥銆� - data: dateList1, - name: '鏃堕棿' - }, - yAxis: { - type: 'value', - axisLabel: { - show: true, - interval: 'auto' - // formatter:'{value} %' - }, - name: 'mg/m鲁' - }, - visualMap: { - show: false, - dimension: 0, - pieces: [ - { - lte: startIndex, - color: 'green' - }, - { - gt: startIndex, - lte: endIndex, - color: 'red' - }, - { - gt: endIndex, - lte: dateList1.length - 1, - color: 'green' + // 鍓嶅悗鍖洪棿鍙樉绀鸿窛绂昏秴鏍囧尯闂存椂闂存渶杩戠殑娴撳害灏忎簬1鐨勬椂闂寸偣 + for (let i = this.beforeData.length - 1; i >= 0; i--) { + if (this.beforeData[i].mvFumeConcentration2 >= 1) { + break; + } + if (this.beforeData[i].mvFumeConcentration2 < 1) { + before.unshift(this.beforeData[i]); + } } - ] - }, - series: [ - { - name: '娌圭儫瓒呮爣鏁版嵁', - type: 'line', - data: fumeExceeding1, + console.log('before:', before); + for (let i = this.afterData.length - 1; i >= 0; i--) { + if (this.afterData[i].mvFumeConcentration2 >= 1) { + break; + } + if (this.afterData[i].mvFumeConcentration2 < 1) { + after.unshift(this.afterData[i]); + } + } + console.log('after:', after); + this.allExceptionTimeData = [ + ...before, + ...this.exceedingData, + ...after + ]; - // markArea: { - // itemStyle: { - // color: 'rgba(255, 173, 177, 0.4)' - // }, - // data: [ - // [ - // { - // name: '娴撳害瓒呮爣', - // xAxis: dateList[0] - // }, - // { - // xAxis: dateList[dateList.length - 1] - // } - // ] - // ] - // }, - markLine: { - symbol: 'none', - itemStyle: { - // 鍩虹嚎鍏叡鏍峰紡 - normal: { - lineStyle: { - // show:false, - // 'solid'瀹炵嚎锛�'dashed'铏氱嚎锛�'dotted'鐐圭嚎 - type: 'dashed' + // x杞存棩鏈熸椂闂� + let dateList1 = []; + + // y杞� 瓒呮爣娌圭儫娴撳害 + let fumeExceeding1 = []; + for (let i = 0; i < this.allExceptionTimeData.length; i++) { + if (this.allExceptionTimeData[i] == null) { + //x杞存棩鏈� + //鏃犳暟鎹椂锛� 涓哄墠闈㈡椂闂寸偣澧炲姞10鍒嗛挓 + dateList1.push( + dayjs(dateList1[dateList1.length - 1]) + .add(10, 'minute') + .format('YYYY-MM-DD HH:mm:ss') + ); + // 瓒呮爣娌圭儫娴撳害 + fumeExceeding1.push(null); + } else { + //x杞存棩鏈� + dateList1.push(this.allExceptionTimeData[i].mvDataTime); + // 瓒呮爣娌圭儫娴撳害 + fumeExceeding1.push( + this.allExceptionTimeData[i].mvFumeConcentration2 + ); + } + } + let dateListLine = []; + let fumeExceedingTemp = []; + + console.log('澶勭悊鍓嶆暟鎹负锛�', dateList1); + + + // 棰楃矑搴�10鍒嗛挓鏃堕棿杩炵画 + let objData= this.generateTimePoints(dateList1,fumeExceeding1); + dateListLine = objData['time'] + fumeExceedingTemp = objData['data'] + + console.log('澶勭悊鍚庢椂闂翠负锛�', dateListLine); + console.log('澶勭悊鍚庢暟鎹负锛�', fumeExceedingTemp); + + // 鎻愬彇鏃堕棿鍖洪棿鍐呯殑鏁版嵁绱㈠紩 + let startIndex = dateListLine.findIndex( + (item) => item === dateList[0] + ); + let endIndex = dateListLine.findIndex( + (item) => item === dateList[dateList.length - 1] + ); + + let dateListTemp = []; + dateListLine.forEach((item) => { + dateListTemp.push(dayjs(item).format('HH:mm')); + }); + + // 渚涚數寮傚父鎴栨帀绾垮浘褰hart1瀹炰緥涓虹┖ + if (this.chart1 != null) { + this.chart1 == null; + } + if (this.chart2 == null || this.chart2 == undefined) { + this.chart2 = echarts.init(this.$refs.chart2); + } + console.log(dateListTemp); + console.log(fumeExceedingTemp) + let temp = fumeExceedingTemp.map((item) => { + if (item >= 1) { + return { + value: item, + itemStyle: { + color: 'red' + } + }; + } + return item; + }) + console.log(temp); + this.chart2.setOption({ + tooltip: {}, + toolbox: { + // 宸ュ叿鏍� + feature: { + dataZoom: { + // 鍖哄煙缂╂斁 + yAxisIndex: 'none' }, - label: { - show: true, - position: 'end', - formatter: '{b}' - } + // 淇濆瓨涓哄浘鐗� + saveAsImage: {} } }, - data: [ - { - name: '棰勮', - type: 'average', - yAxis: 1, - lineStyle: { - // color: '#ff0000' + xAxis: { + data: dateListTemp, + name: '鏃堕棿' + }, + yAxis: { + type: 'value', + axisLabel: { + show: true, + interval: 'auto' + // formatter:'{value} %' + }, + name: 'mg/m鲁' + }, + visualMap: { + show: false, + dimension: 0, + pieces: [ + { + lte: startIndex, + color: 'green' + }, + { + gt: startIndex, + lte: endIndex, color: 'red' + }, + { + gt: endIndex, + lte: dateList1.length - 1, + color: 'green' + } + ] + }, + series: [ + { + name: '娌圭儫娴撳害', + type: 'line', + data: temp, + + markArea: { + itemStyle: { + color: 'rgba(255, 173, 177, 0.4)' + }, + data: [ + [ + { + name: '瓒呮爣鏃堕棿娈�', + xAxis: beginT + }, + { + xAxis: endT + } + ] + ] + }, + markLine: { + symbol: 'none', + itemStyle: { + // 鍩虹嚎鍏叡鏍峰紡 + normal: { + lineStyle: { + type: 'dashed' + }, + label: { + show: true, + position: 'end', + formatter: '{b}' + } + } + }, + data: [ + { + name: '瓒呮爣', + type: 'average', + yAxis: 1, + lineStyle: { + // color: '#ff0000' + color: 'red' + } + } + ] } } ] - } - } - ] + }); + }); }); - }, 500); } }, getDeviceInfo() { @@ -1341,32 +1566,32 @@ }, // 鏌ヨ鍏ㄩ儴寮傚父琛ㄦ暟鎹� - getAllData() { - this.isNoData = false; - this.loading = true; - axiosInstanceInstance.get('/fume/abnormal').then((result) => { - this.abnormalData = result.data.data; - this.loading = false; - this.total = this.abnormalData.length; - if (result.data.data.length == 0) { - alert('璇ユ椂娈垫棤鏁版嵁'); - this.isNoData = true; - return; - } - this.isNoData = false; - // 榛樿鏄剧ず绗竴椤� - this.handleCurrentChange(1); - }); + // getAllData() { + // this.isNoData = false; + // this.loading = true; + // axiosInstanceInstance.get('/fume/abnormal').then((result) => { + // this.abnormalData = result.data.data; + // this.loading = false; + // this.total = this.abnormalData.length; + // if (result.data.data.length == 0) { + // ElMessage('璇ユ椂娈垫棤鏁版嵁') + // this.isNoData = true; + // return; + // } + // this.isNoData = false; + // // 榛樿鏄剧ず绗竴椤� + // this.handleCurrentChange(1); + // }); - // 寰楀埌寮傚父琛ㄧ殑鏈�鏃╁拰鏈�鏅氭椂闂� - setTimeout(() => { - axiosInstanceInstance.get('/fume/time').then((result) => { - this.beginTime = result.data.data[0].beginTime; - this.endTime = result.data.data[0].endTime; - // console.log('be,end',this.beginTime,this.endTime); - }); - }, 500); - }, + // // 寰楀埌寮傚父琛ㄧ殑鏈�鏃╁拰鏈�鏅氭椂闂� + // setTimeout(() => { + // axiosInstanceInstance.get('/fume/time').then((result) => { + // this.beginTime = result.data.data[0].beginTime; + // this.endTime = result.data.data[0].endTime; + // // console.log('be,end',this.beginTime,this.endTime); + // }); + // }, 500); + // }, getAbnormalDataByClick(val) { this.abnormalData = val; @@ -1414,7 +1639,7 @@ this.exception2 = result.data.data; }); }, - + // 椤甸潰鍔犺浇鏃堕粯璁ゅ睍绀�7澶╁紓甯歌〃鏁版嵁 getRecentSevenDays() { // 缁欑骇鑱旈�夋嫨鍣ㄨ缃粯璁ょ殑閫夋嫨椤� @@ -1435,7 +1660,7 @@ .get('/fume/abnormalone', { params: params }) .then((response) => { if (response.data.data.length == 0) { - alert('璇ユ椂娈垫棤鏁版嵁'); + ElMessage('璇ユ椂娈垫棤鏁版嵁'); return; } // 淇濆瓨杩斿洖鐨� @@ -1447,17 +1672,15 @@ this.loading = false; }); } - }, - + } }; </script> <style scoped> - .exception-root-container { margin: 20px; padding: 10px; - border: 1px; + border: 1px; height: 615px; /* min-height: 80vh; min-width: 100vh; */ @@ -1515,6 +1738,7 @@ color: var(--el-color-primary); } .collapse-header { + margin-left: 5px; font-size: 18px; } .collapse-header-text { @@ -1527,11 +1751,10 @@ .box-card-label { font-size: 14px; white-space: nowrap; - overflow-x: auto; + /* overflow-x: auto; */ } :deep().el-card { border-radius: 9px; - } /* 鈥樻煡鐪嬭鎯呪�� 鐨勫脊鍑烘楂樺害璋冩暣 */ :deep().el-dialog { @@ -1541,14 +1764,14 @@ border-radius: 9px; } :deep().table-page .el-card__body { - padding: 0px; + /* padding: 0px; */ } .table-text { font-size: 18px; - margin-bottom: 10px; + margin: 5px 0px 10px 4px; } .text-blank { - margin-left: 10px; + margin-right: 10px; } /* 搴楅摵鍚嶉�夋嫨鏂囨湰 */ .describe-info { @@ -1563,7 +1786,6 @@ font-weight: bold; } - /* 寮傚父琛ㄦ牸涓嬫爣绛句腑鐨勬暟缁� */ .table-line-num { font-weight: bold; @@ -1572,22 +1794,21 @@ .button_info.el-button_inner { text-align: left; } -:deep().el-collapse .el-collapse-item__content{ +:deep().el-collapse .el-collapse-item__content { padding-bottom: 0px; } .box-card { height: 190px; } :deep().box-card .el-card__body { - padding: 5px; + /* padding: 5px; */ } .sub-box-card { height: 100px; - overflow-y: auto; border: 0px; } :deep().sub-box-card .el-card__body { - padding: 0px; + /* padding: 0px; */ } .mx-1 { margin-bottom: 0px; -- Gitblit v1.9.3