From 1e18f0bcee0358e13c0e2cb750d17cd7ef5bf4d6 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期一, 07 八月 2023 17:55:21 +0800
Subject: [PATCH] 油烟检测系统
---
src/views/ExceedingFume.vue | 903 ++++++++++++++++++++++++++++++++-----------------------
1 files changed, 520 insertions(+), 383 deletions(-)
diff --git a/src/views/ExceedingFume.vue b/src/views/ExceedingFume.vue
index cd7a76a..959c747 100644
--- a/src/views/ExceedingFume.vue
+++ b/src/views/ExceedingFume.vue
@@ -1,54 +1,28 @@
-<!-- app -->
-<!-- -->
<template>
- <!-- solid #000000 -->
<div class="exception-root-container">
- <!-- <div style="margin-bottom: 20px; display: flex; white-space: nowrap">
- 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�
- </div> -->
<!-- 鑿滃崟璇绘爣棰� -->
-
- <div style="display: flex">
+ <div ref="h1" class="header-container">
<span class="describe-info">搴楅摵鍚嶉�夋嫨锛�</span>
-
<!-- 搴楅摵鍚� 绾ц仈 -->
<ShopNameAndID
@submit-id="(n) => (deviceId[1] = n)"
:devId="鍏ㄩ儴"
></ShopNameAndID>
- <!-- {{ deviceId }} -->
- <!-- 鍐欏嚭缁勪欢 -->
- <!-- 杩涙潵灏卞姞杞� -->
- <!-- <span style="margin-right: 15px">
- <el-cascader
- v-model="deviceId"
- :options="optionsShop"
- :props="{ expandTrigger: 'hover' }"
- placeholder="鍏ㄩ儴"
- />
- </span> -->
- <!-- @visible-change="getDeviceInfo" -->
+
<!-- 寮傚父绫诲瀷閫夋嫨 -->
<ExceptionType @submitExceptionType="(val) => (exceptionValue = val)">
</ExceptionType>
- <span class="describe-time-text">璧锋鏃堕棿锛�</span>
+ <!-- <div style="display: flex"> -->
+ <!-- <span class="describe-time-text">璧锋鏃堕棿锛�</span> -->
<!-- 鏃ユ湡鏃堕棿閫夋嫨鍣� -->
- <!-- <el-date-picker
- v-model="beginTime"
- type="datetime"
- placeholder="寮�濮嬫椂闂�"
- value-format="YYYY-MM-DD HH:mm:ss"
- />
- <span>~ </span>
- <el-date-picker
- v-model="endTime"
- type="datetime"
- placeholder="缁撴潫鏃堕棿"
- value-format="YYYY-MM-DD HH:mm:ss"
- /> -->
<TimeSelect @submit-time="giveTime"></TimeSelect>
-
+ <!-- </div> -->
+ </div>
+ <div ref="h2" style="display: flex; margin-top: 2px; justify-content: right">
+ <!-- <span class="collapse-header-text">
+ 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
+ > -->
<!-- 鍋氭垚琛ㄥ崟 -->
<el-button
type="primary"
@@ -58,7 +32,7 @@
>鏌ヨ</el-button
>
<el-button
- type="primary"
+ type="warning"
plain
@click="getAllData"
style="margin-left: 20px"
@@ -82,9 +56,14 @@
</el-icon>
</el-tooltip>
</div>
+ <div style="display: flex; justify-content: right">
+ <span class="collapse-header-text">
+ 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
+ >
+ </div>
<br />
- <el-collapse v-model="activeNames">
+ <el-collapse ref="h3" v-model="activeNames">
<el-collapse-item name="1">
<template #title>
<el-tooltip
@@ -93,7 +72,7 @@
content="鐐瑰嚮鍙姌鍙�"
placement="right-start"
>
- <span class="collapse-header"> 寮傚父鐨勫簵閾烘暟閲忓垎鏋�</span>
+ <h4 class="collapse-header"> 寮傚父鍒嗘瀽</h4>
<el-icon class="header-icon">
<i-ep-info-filled />
</el-icon>
@@ -105,151 +84,139 @@
content="鐐瑰嚮鍙姌鍙�"
placement="right-start"
>
- <span class="collapse-header-text">
- 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
- >
+
</el-tooltip>
</template>
<el-card class="box-card">
<el-row :gutter="25">
<el-col :span="8">
- <el-statistic :value="exception0.length">
- <template #title
- ><span style="color: red; font-size: 15px">娌圭儫娴撳害瓒呮爣</span>
- </template>
- <template #prefix>
- <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
- </template>
- <template #suffix
- >/{{ shopsTotal }}
- <span style="margin-left: 150px">
- 鍗犳瘮锛歿{
- ((exception0.length / shopsTotal) * 100).toFixed(1)
- }}%</span
- ></template
+ <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
>
- </el-statistic>
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception0.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
+ >
+ </div>
+
<hr />
<div class="box-card-butcontainer">
- <el-scrollbar height="130px">
-
- <!-- <button
- v-for="item in this.exception0"
+ <el-card class="sub-box-card">
+ <ExceptionText
+ v-for="(item,index) in exception0"
:key="item"
- class="scrollbar-demo-item"
+ :devId="item.devId"
+ exception-value="0"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ @submit-exception-data="getAbnormalDataByClick"
>
{{ item.diName }}
-
- <br />
- </button> -->
- <div v-for="item in exception0" :key="item">
- <ExceptionButton
- :devId="item.devId"
- exception-value="0"
- :begin-time="beginTime"
- :end-time="endTime"
- @submit-exception-data="getAbnormalDataByClick"
- >{{ item.diName }}</ExceptionButton
- >
- </div>
- </el-scrollbar>
+ <span v-if="index<exception0.length-1" class="text-blank"> , </span>
+ </ExceptionText>
+ </el-card>
</div>
</el-col>
<el-col :span="8">
- <el-statistic :value="exception1.length">
- <template #title
- ><span style="color: rgb(181, 14, 247); font-size: 15px"
- >渚涚數寮傚父</span
- ></template
+ <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
>
- <template #prefix>
- <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
- </template>
- <template #suffix
- >/{{ shopsTotal }}
- <span style="margin-left: 150px">
- 鍗犳瘮锛歿{
- ((exception1.length / shopsTotal) * 100).toFixed(1)
- }}%</span
- ></template
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception1.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
>
- </el-statistic>
+ </div>
+
<hr />
<div>
- <el-scrollbar height="130px">
- <div v-for="item in exception1" :key="item">
- <ExceptionButton
- :devId="item.devId"
- exceptionValue="1"
- :begin-time="beginTime"
- :end-time="endTime"
- @submit-exception-data="getAbnormalDataByClick"
- >{{ item.diName }}</ExceptionButton
- >
- </div>
- </el-scrollbar>
+
+ <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>
</div>
</el-col>
<el-col :span="8">
- <el-statistic :value="exception2.length">
- <template #title
- ><span style="color: rgb(185, 96, 11); font-size: 15px"
- >鎺夌嚎</span
- ></template
+ <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
>
- <template #prefix>
- <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
- </template>
- <template #suffix
- >/{{ shopsTotal }}
- <span style="margin-left: 150px">
- 鍗犳瘮锛歿{
- ((exception2.length / shopsTotal) * 100).toFixed(1)
- }}%</span
- ></template
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception2.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
>
- </el-statistic>
+ </div>
<hr />
<div>
- <el-scrollbar height="130px">
- <!-- <span
- v-for="item in this.exception2"
- :key="item"
- class="scrollbar-demo-item"
- >
- {{ item.diName }}
- <br />
- </span> -->
-
- <div v-for="item in exception2" :key="item">
- <ExceptionButton
- :devId="item.devId"
- exceptionValue="2"
- :begin-time="beginTime"
- :end-time="endTime"
- @submit-exception-data="getAbnormalDataByClick"
- >{{ item.diName }}</ExceptionButton
- >
- </div>
- </el-scrollbar>
+ <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>
</div>
</el-col>
</el-row>
</el-card>
</el-collapse-item>
</el-collapse>
-
- <br />
- <hr />
- <div class="table-page">
+ <!-- <hr/>
+ <br> -->
+ <h4 class="table-text"> 寮傚父鏁版嵁</h4>
+ <el-card class="table-page" v-show="!isNoData">
+
<el-table
v-loading="loading"
:data="displayData"
style="width: 100%"
- height="400"
+ :row-class-name="tableRowClassName"
+ stripe
+ border
+ :height=tableHeight
>
<el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" width="340">
<template #default="{ row }">
@@ -313,6 +280,7 @@
</el-table>
<el-pagination
+ ref="h4"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -320,15 +288,15 @@
:page-size="pageSize"
layout="total,prev, pager, next, jumper"
/>
- </div>
-
+ </el-card>
+ <el-empty v-show="isNoData" :image-size="200" />
<!-- 瀵硅瘽妗� -->
- <div style="width: 600px;">
- <el-dialog v-model="centerDialogVisible" title="Warning" align-center>
- <template #header="{ titleId, titleClass }">
- <div :id="titleId" :class="titleClass" style="font-size: 17px">
+ <div>
+ <el-dialog v-model="centerDialogVisible" draggable align-center>
+ <template #header>
+ <div style="font-size: 17px">
搴楅摵鍚嶏細{{ rowShopName }}
- <span style="margin-left: 40px">寮傚父绫诲瀷锛�</span>
+ <di style="margin-left: 40px">寮傚父绫诲瀷锛�</di>
<span v-if="rowExceptionType == '0'">娌圭儫鏁版嵁瓒呮爣</span>
<span v-else-if="rowExceptionType == '1'">渚涚數寮傚父</span>
<span v-else-if="rowExceptionType == '2'">鎺夌嚎</span>
@@ -337,96 +305,106 @@
{{ rowEndTime }}
</div>
</div>
+ <div class="dialog-button-position">
+ <el-button
+ type="danger"
+ :disabled="isPreCantouch"
+ @click="getPreviousRowData"
+ >涓婃潯寮傚父</el-button
+ >
+ <el-button
+ type="danger"
+ :disabled="isNextCantouch"
+ @click="getNextRowData"
+ >涓嬫潯寮傚父</el-button
+ >
+ </div>
</template>
- <el-button
- type="danger"
- :disabled="isPreCantouch"
- @click="getPreviousRowData"
- >涓婁竴鏉�</el-button
- >
- <el-button
- type="danger"
- :disabled="isNextCantouch"
- @click="getNextRowData"
- >涓嬩竴鏉�</el-button
- >
<!-- 瓒呮爣鏁版嵁鏃� -->
<!-- 鎶樼嚎鍥� -->
<div
ref="chart"
style="
- width: 800px;
+ width: 100%;
height: 300px;
+ /* min-width: 100px; */
margin-bottom: 20px;
margin-left: 10px;
+ min-width: 350px;
"
></div>
<!-- v-show="!isAbnormal" -->
<!-- 琛ㄦ牸 -->
- <div style="margin-top: 40px;margin-bottom: 5px; border: 1px solid #000000">
+
+ <!-- -->
+ <div style="margin-top: 40px; margin-bottom: 5px; border: 1px">
<el-table
:data="exceedingData"
height="360"
border
- style="width: 100%; margin-top: 25px"
+ style="margin-top: 25px"
>
- <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" />
- <el-table-column
-
- prop="mvStatCode"
- label="璁惧缂栧彿"
- width="240"
- />
-
- <el-table-column prop="mvDataTime" label="鎶ヨ鏃堕棿" width="220" />
+ <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" />
+ <el-table-column prop="mvStatCode" label="璁惧缂栧彿" />
+
+ <el-table-column prop="mvDataTime" label="閲囬泦鏃堕棿" />
<el-table-column
prop="mvFumeConcentration2"
label="娌圭儫娴撳害(mg/m鲁)"
- width="150"
/>
</el-table>
</div>
- <el-tag
- type="success"
- class="mx-1"
- effect="dark"
- round
- ><span class="table-line-lable">琛ㄦ牸琛屾暟锛� </span> <span class="table-line-num" >{{exceptionTotal }}</span></el-tag
- >
+ <el-tag type="success" class="mx-1" effect="dark" round
+ ><span class="table-line-lable">寮傚父璁板綍锛� </span>
+ <span class="table-line-num">{{ exceptionTotal }}鏉�</span>
+ <span v-show="rowExceptionType === '1' || rowExceptionType === '2'">
+ (閫昏緫璁＄畻)</span
+ >
+ </el-tag>
+ <!-- <el-tag type="success" class="mx-1" effect="dark" round v-show="rowExceptionType === '1'"
+ ><span class="table-line-lable">琛ㄦ牸琛屾暟锛� </span>
+ <span class="table-line-num">{{ exceptionTotal }}</span></el-tag> -->
</el-dialog>
</div>
</div>
</template>
<script>
-import ExceptionButton from '../sfc/ExceptionButton.vue';
+
import ExceptionType from '../sfc/ExceptionType.vue';
import TimeSelect from '../sfc/TimeSelect.vue';
-
-// import axios from 'axios';
+import ExceptionText from '../sfc/ExceptionText.vue';
import * as echarts from 'echarts';
import * as XLSX from 'xlsx/xlsx.mjs';
import dayjs from 'dayjs';
-import axiosInstance from '../utils/request.js';
+import axiosInstanceInstance from '../utils/request.js';
const ShopNameAndID = defineAsyncComponent(() =>
import('../sfc/../sfc/ShopNameAndID.vue')
);
export default {
+
name: 'TablePage',
components: {
- ExceptionButton,
ExceptionType,
TimeSelect,
- ShopNameAndID
+ ShopNameAndID,
+ ExceptionText
},
data() {
return {
+
+ // table鍏冪礌
+ tableRef:null,
+ // 寮傚父琛ㄦ牸鏁版嵁
+ tableHeight:300,
+ // 绌烘暟鎹姸鎬�
+ isNoData: false,
// 寮瑰嚭妗嗕腑琛ㄦ牸鏉℃暟
- exceptionTotal:0,
+ exceptionTotal: 0,
// 鏃犳暟鎹椂鐨勬椂闂存暟缁勶紝鍏冪礌鐩稿樊10鍒嗛挓
// abnormalTimeTenMinute: [],
// 搴楅摵鎬绘暟
@@ -576,7 +554,43 @@
this.getShopNames();
}
},
+
+ mounted() {
+
+ // 浠庢帴鍙ｈ幏鍙栧簵閾哄悕绉� 缁欑骇鑱斾笅鎷夋
+ this.getDeviceInfo();
+
+ // 灞曠ず鏈�杩�7澶╂暟鎹�
+ this.getRecentSevenDays();
+
+ // 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� 娓叉煋寮傚父鍒嗘瀽閮ㄥ垎瀵瑰簲鐨勫簵閾哄悕
+ 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)`;
+ // },
+
+ warn() {
+ alert('鐐瑰嚮浜�');
+ },
+ // 鍒氭墦寮�鍗＄墖鏃剁涓�涓浘褰笉浼氳嚜鍔ㄤ几缂� 褰撶偣鍑讳笂/涓嬩竴鏉℃椂浼氳嚜鍔ㄤ几缂�
+ // 鍥惧舰鍝嶅簲寮忓彉鍖�
+ updateChart() {
+ this.$nextTick(() => {
+ if (this.chart) {
+ this.chart.resize();
+ }
+ });
+ },
// 浠庢椂闂撮�夋嫨鍣ㄧ粍浠舵嬁鍒板紑濮嬪拰缁撴潫鏃堕棿
giveTime(val) {
//灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
@@ -628,11 +642,11 @@
mvStatCode: this.rowMvStatCode,
diName: this.rowShopName,
mvDataTime: abnormalTimeTenMinute[i],
- mvFumeConcentration2: '绌烘暟鎹�'
+ mvFumeConcentration2: ''
});
}
// 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟
- this.exceptionTotal = abnormalTimeTenMinute.length
+ this.exceptionTotal = abnormalTimeTenMinute.length;
},
// 鐐瑰嚮琛ㄦ牸鐨勮鏃�
selectTableRow(row) {
@@ -669,14 +683,14 @@
params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
}
- axiosInstance
+ axiosInstanceInstance
.get('/fume/exceed', { params: params })
.then((response) => {
// 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
this.exceedingData = response.data.data;
this.chart = null;
this.drawChart();
- this.exceptionTotal = this.exceedingData.length
+ this.exceptionTotal = this.exceedingData.length;
});
}
//琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
@@ -716,7 +730,7 @@
if (this.drawerData.endTime) {
params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
}
- axiosInstance
+ axiosInstanceInstance
.get('/fume/exceed', { params: params })
.then((response) => {
// 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
@@ -725,7 +739,7 @@
console.log(this.exceedingData);
this.chart = null;
this.drawChart();
- this.exceptionTotal = this.exceedingData.length
+ this.exceptionTotal = this.exceedingData.length;
});
}
//琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
@@ -765,17 +779,19 @@
if (this.drawerData.endTime) {
params['endTime'] = this.drawerData.endTime;
}
- axiosInstance.get('/fume/exceed', { params: params }).then((response) => {
- // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
- this.exceedingData = response.data.data;
- this.loadingDrawer = !this.loadingDrawer;
- // this.total = this.exceedingData.length;
- // this.handleCurrentChange(1); // 榛樿鏄剧ず绗竴椤�
- console.log('杩斿洖鐨勫紓甯告暟鎹负锛�');
- console.log(this.exceedingData);
- this.drawChart();
- this.exceptionTotal = this.exceedingData.length
- });
+ axiosInstanceInstance
+ .get('/fume/exceed', { params: params })
+ .then((response) => {
+ // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
+ this.exceedingData = response.data.data;
+ this.loadingDrawer = !this.loadingDrawer;
+ // this.total = this.exceedingData.length;
+ // this.handleCurrentChange(1); // 榛樿鏄剧ず绗竴椤�
+ console.log('杩斿洖鐨勫紓甯告暟鎹负锛�');
+ console.log(this.exceedingData);
+ this.drawChart();
+ this.exceptionTotal = this.exceedingData.length;
+ });
},
// 鐢ㄦ埛鏍规嵁杈撳叆鐨勬潯浠舵煡璇�
@@ -802,15 +818,22 @@
params['endTime'] = this.endTime;
}
this.loading = true;
- axiosInstance
+ axiosInstanceInstance
.get('/fume/abnormalthree', { params: params })
.then((response) => {
this.abnormalData = response.data.data;
this.total = this.abnormalData.length;
+ this.loading = false;
+ if (response.data.data.length == 0) {
+ alert('璇ユ椂娈垫棤鏁版嵁');
+ this.isNoData = true;
+ return;
+ }
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false;
this.handleCurrentChange(1);
console.log('杩斿洖鐨勬暟鎹�', this.abnormalData);
console.log('闀垮害', response.data.data.total);
- this.loading = false;
});
},
handleSizeChange(val) {
@@ -849,10 +872,10 @@
// 渚涚數寮傚父鍜屾帀绾跨殑鎶樼嚎鍥�
linechart(xAxisData1, abnormalBeginTime, abnormalEndTime, fumeExceeding) {
- this.chart = echarts.init(this.$refs.chart, null, {
- width: 800,
- height: 300
- });
+ this.chart = echarts.init(this.$refs.chart);
+ // $('#ModalGrade').on('shown.bs.modal', function(){
+ // this.chart.resize()
+ // })
this.chart.setOption({
title: {
// text: '娌圭儫瓒呮爣鏁版嵁',
@@ -875,7 +898,7 @@
// 鍖哄煙缂╂斁
yAxisIndex: 'none'
},
-
+
// 淇濆瓨涓哄浘鐗�
saveAsImage: {}
}
@@ -976,15 +999,15 @@
endTime: after40MinEnd
};
// 璇锋眰鍓嶅崐娈�
- axiosInstance
- .get('http://localhost:8080/fume/history', { params: paramsBefore })
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsBefore })
.then((result) => {
this.beforeData = result.data.data;
});
// 璇锋眰鍚庡崐娈�
- axiosInstance
- .get('http://localhost:8080/fume/history', { params: paramsAfter })
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsAfter })
.then((result) => {
this.afterData = result.data.data;
});
@@ -1051,7 +1074,7 @@
// ----------------------------------------
}
// 娌圭儫娴撳害瓒呮爣鏃剁殑鎶樼嚎鍥�
- else {
+ else {
// // 娓呯┖锛岃鏃犳暟鎹潯鏁伴殣钘忥紝浣垮巻鍙叉暟鎹殑鏍囩鏉℃暟鏄剧ず鍑烘潵
// this.abnormalTimeTenMinute = []
this.isAbnormal = false;
@@ -1065,119 +1088,209 @@
// 瓒呮爣娌圭儫娴撳害
fumeExceeding.push(item.mvFumeConcentration2);
});
- // 瀛樻斁璇ユ椂闂存姣忛殧鍗佸垎閽熶竴娆＄殑鏃堕棿鐐�
- const xAxisData = [];
- const xAxisData1 = [];
+ // // 瀛樻斁璇ユ椂闂存姣忛殧鍗佸垎閽熶竴娆＄殑鏃堕棿鐐�
+ // const xAxisData = [];
+ // const xAxisData1 = [];
let beginTime = new Date(dateList[0]);
const endTime = new Date(dateList[dateList.length - 1]);
- // console.log(beginTime,endTime);
- while (beginTime <= endTime) {
- xAxisData.push(beginTime);
- // 澧炲姞10鍒嗛挓
- beginTime = new Date(beginTime.getTime() + 10 * 60 * 1000);
- }
- // console.log(xAxisData);
- // 灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮忕殑瀛楃涓�
- xAxisData.forEach((item, index) => {
- // 鑾峰彇鍒嗛挓鏁�
- let M = item.getMinutes();
- // 濡傛灉鍒嗛挓灏忎簬10,鍒欏湪鍓嶉潰鍔�0琛ュ厖涓轰袱浣嶆暟瀛�
- M = M > 9 ? M : '0' + M;
- xAxisData1[index] =
- item.getFullYear() +
- '-' +
- (item.getMonth() + 1) +
- '-' +
- item.getDate() +
- ' ' +
- item.getHours() +
- ':' +
- M +
- ':0' +
- item.getSeconds();
- });
- console.log(xAxisData1);
- this.chart = echarts.init(this.$refs.chart);
- this.chart.setOption({
- title: {
- // text: '娌圭儫瓒呮爣鏁版嵁',
- // left: 'center'
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- tooltip: {},
- // legend: {
- // data: ['娌圭儫瓒呮爣鏁版嵁']
- // },
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- dataZoom: {
- // 鍖哄煙缂╂斁
- yAxisIndex: 'none'
- },
- // 淇濆瓨涓哄浘鐗�
- saveAsImage: {}
+
+ // 寰�鍓�30鍒嗛挓
+ const before30MinBegin = dayjs(beginTime)
+ .subtract(30, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ const before10MinBegin = dayjs(beginTime)
+ .subtract(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+
+ // 寰�鍚�40鍒嗛挓
+ const after30MinEnd = dayjs(endTime)
+ .add(30, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ 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,
+ endTime: before10MinBegin
+ };
+ let paramsAfter = {
+ devId: this.displayData[this.selectedRowIndex].devId,
+ beginTime: after10MinEnd,
+ endTime: after30MinEnd
+ };
+ // 璇锋眰鍓嶅崐娈�
+ 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;
+ });
+
+ 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
+ );
}
- },
- xAxis: {
- // type: 'time',
- // 鍦ㄧ被鐩酱锛坱ype: 'category'锛変腑鏈夋晥銆�
- data: xAxisData1,
- name: '鏃堕棿'
- },
- yAxis: {
- type: 'value',
- axisLabel: {
- show: true,
- interval: 'auto'
- // formatter:'{value} %'
+ }
+
+ // 鎻愬彇鏃堕棿鍖洪棿鍐呯殑鏁版嵁绱㈠紩
+ 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
},
- name: 'mg/m鲁'
- },
- series: [
- {
- name: '娌圭儫瓒呮爣鏁版嵁',
- type: 'line',
- data: fumeExceeding,
- markLine: {
- itemStyle: {
- // 鍩虹嚎鍏叡鏍峰紡
- normal: {
- lineStyle: {
- // 'solid'瀹炵嚎锛�'dashed'铏氱嚎锛�'dotted'鐐圭嚎
- type: 'dashed'
- },
- label: {
- show: true,
- position: 'end',
- formatter: '{b}{c}'
- }
- }
+ tooltip: {},
+ // legend: {
+ // data: ['娌圭儫瓒呮爣鏁版嵁']
+ // },
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ dataZoom: {
+ // 鍖哄煙缂╂斁
+ yAxisIndex: 'none'
},
- data: [
- {
- name: '棰勮',
- type: 'average',
- yAxis: 1,
- lineStyle: {
- color: '#ff0000'
- }
- }
- ]
+ // 淇濆瓨涓哄浘鐗�
+ 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'
+ }
+ ]
+ },
+ series: [
+ {
+ name: '娌圭儫瓒呮爣鏁版嵁',
+ type: 'line',
+ data: fumeExceeding1,
+
+ // 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'
+ },
+ label: {
+ show: true,
+ position: 'end',
+ formatter: '{b}'
+ }
+ }
+ },
+ data: [
+ {
+ name: '棰勮',
+ type: 'average',
+ yAxis: 1,
+ lineStyle: {
+ // color: '#ff0000'
+ color: 'red'
+ }
+ }
+ ]
+ }
+ }
+ ]
+ });
+ }, 500);
}
},
getDeviceInfo() {
// 绾ц仈涓嬫媺妗嗘暟鎹� 浠庢帴鍙ｄ腑鍔ㄦ�佽幏鍙�
- axiosInstance.get('/fume/device').then((result) => {
+ axiosInstanceInstance.get('/fume/device').then((result) => {
this.deviceInfo = result.data.data;
// 鑾峰彇鍒版�荤殑搴楅摵鏁伴噺
this.shopsTotal = result.data.data.length;
@@ -1226,20 +1339,28 @@
// 灏唚orkbook杞负浜岃繘鍒秞lsx鏂囦欢骞朵笅杞�
XLSX.writeFile(wb, '鍒嗘瀽鏁版嵁.xlsx');
},
+
// 鏌ヨ鍏ㄩ儴寮傚父琛ㄦ暟鎹�
getAllData() {
+ this.isNoData = false;
this.loading = true;
- axiosInstance.get('/fume/abnormal').then((result) => {
+ 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);
- this.loading = false;
});
// 寰楀埌寮傚父琛ㄧ殑鏈�鏃╁拰鏈�鏅氭椂闂�
setTimeout(() => {
- axiosInstance.get('/fume/time').then((result) => {
+ 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);
@@ -1257,7 +1378,7 @@
// 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙�
// 姣斿娌圭儫瓒呮爣瀵瑰簲鐨勬墍鏈夊簵閾哄悕绉板拰璁惧缂栧彿锛堝凡鍘婚櫎閲嶅鐨勫簵閾哄悕锛�
getShopNames() {
- axiosInstance
+ axiosInstanceInstance
.get('/fume/shopname', {
params: {
exceptionType: '0',
@@ -1270,7 +1391,7 @@
console.log('寮傚父0', this.exception0);
console.log('寮傚父0鏁伴噺', this.exception0.length);
});
- axiosInstance
+ axiosInstanceInstance
.get('/fume/shopname', {
params: {
exceptionType: '1',
@@ -1281,7 +1402,7 @@
.then((result) => {
this.exception1 = result.data.data;
});
- axiosInstance
+ axiosInstanceInstance
.get('/fume/shopname', {
params: {
exceptionType: '2',
@@ -1293,6 +1414,7 @@
this.exception2 = result.data.data;
});
},
+
// 椤甸潰鍔犺浇鏃堕粯璁ゅ睍绀�7澶╁紓甯歌〃鏁版嵁
getRecentSevenDays() {
// 缁欑骇鑱旈�夋嫨鍣ㄨ缃粯璁ょ殑閫夋嫨椤�
@@ -1309,9 +1431,13 @@
let params = {};
params['beginTime'] = this.beginTime;
params['endTime'] = this.endTime;
- axiosInstance
+ axiosInstanceInstance
.get('/fume/abnormalone', { params: params })
.then((response) => {
+ if (response.data.data.length == 0) {
+ alert('璇ユ椂娈垫棤鏁版嵁');
+ return;
+ }
// 淇濆瓨杩斿洖鐨�
this.abnormalData = response.data.data;
// 鍒嗛〉
@@ -1322,31 +1448,24 @@
});
}
},
- mounted() {
- // 浠庢帴鍙ｈ幏鍙栧簵閾哄悕绉� 缁欑骇鑱斾笅鎷夋
- this.getDeviceInfo();
-
- // 灞曠ず鏈�杩�7澶╂暟鎹�
- this.getRecentSevenDays();
-
- // 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� 娓叉煋寮傚父鍒嗘瀽閮ㄥ垎瀵瑰簲鐨勫簵閾哄悕
- this.getShopNames();
- }
+
};
</script>
<style scoped>
-/* .exception-container {
- margin: 20px;
- padding: 10px;
- border: 1px;
- height: 815px;
-} */
+
.exception-root-container {
- margin: 20px;
- padding: 10px;
+ margin: 20px;
+ padding: 10px;
border: 1px;
- height: 815px;
+ height: 615px;
+ /* min-height: 80vh;
+ min-width: 100vh; */
+}
+.header-container {
+ display: flex;
+ /* flex-wrap: wrap;
+ align-items: center; */
}
.ellipsis {
white-space: nowrap;
@@ -1367,18 +1486,6 @@
.card-header {
margin: 0;
}
-
-/* .el-pagination {
- position: fixed;
- bottom: 0;
- left: 50;
- right: 50;
- height: 60px;
- line-height: 60px;
- background-color: #f2f2f2;
- text-align: right;
- padding-right: 20px;
-} */
body {
margin: 0;
@@ -1409,31 +1516,45 @@
}
.collapse-header {
font-size: 18px;
- color: burlywood;
}
.collapse-header-text {
- margin-left: 60px;
- font-size: 16px;
- color: blue;
+ /* margin-right: 150px; */
+ margin-top: 5px;
+ font-size: 14px;
+ color: gray;
}
-/* .el-dialog {
- height: 70%;
-} */
.box-card-label {
- font-size: 17px;
+ font-size: 14px;
+ white-space: nowrap;
+ overflow-x: auto;
+}
+:deep().el-card {
+ border-radius: 9px;
+
}
/* 鈥樻煡鐪嬭鎯呪�� 鐨勫脊鍑烘楂樺害璋冩暣 */
:deep().el-dialog {
height: 98%;
/* 涓嶅嚭鐜版粴鍔ㄦ潯 */
- overflow-y: hidden
+ overflow-y: hidden;
+ border-radius: 9px;
}
-
+:deep().table-page .el-card__body {
+ padding: 0px;
+}
+.table-text {
+ font-size: 18px;
+ margin-bottom: 10px;
+}
+.text-blank {
+ margin-left: 10px;
+}
/* 搴楅摵鍚嶉�夋嫨鏂囨湰 */
.describe-info {
margin-top: 5px;
font-weight: bold;
+ white-space: nowrap;
}
/* 鏃堕棿閫夋嫨鏂囨湰 */
.describe-time-text {
@@ -1442,15 +1563,7 @@
font-weight: bold;
}
-/* 寮傚父鍒嗘瀽鎸夐挳瀹瑰櫒 */
-/* .box-card-butcontainer {
- display: flex;
- direction: column;
- width: 68.5%;
-} */
-.table-line-lable{
- /* color: black; */
-}
+
/* 寮傚父琛ㄦ牸涓嬫爣绛句腑鐨勬暟缁� */
.table-line-num {
font-weight: bold;
@@ -1459,11 +1572,35 @@
.button_info.el-button_inner {
text-align: left;
}
+:deep().el-collapse .el-collapse-item__content{
+ padding-bottom: 0px;
+}
.box-card {
- height: 205px;
+ height: 190px;
+}
+:deep().box-card .el-card__body {
+ padding: 5px;
+}
+.sub-box-card {
+ height: 100px;
+ overflow-y: auto;
+ border: 0px;
+}
+:deep().sub-box-card .el-card__body {
+ padding: 0px;
}
.mx-1 {
margin-bottom: 0px;
}
-
+.dialog-button-position {
+ display: flex;
+ justify-content: right;
+ margin-bottom: 10px;
+}
+.el-table .warning-row {
+ --el-table-tr-bg-color: var(--el-color-warning-light-9);
+}
+.el-table .success-row {
+ --el-table-tr-bg-color: var(--el-color-success-light-9);
+}
</style>
--
Gitblit v1.9.3