From f3acb8ce787f3df0eda633031473be4e6a9ff448 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 12 十月 2023 16:56:28 +0800
Subject: [PATCH] 油烟 更新了实时监控页面
---
src/test/TestDrawer.vue | 1154 +++++++++++++++++++++++++++++++--------------------------
1 files changed, 621 insertions(+), 533 deletions(-)
diff --git a/src/test/TestDrawer.vue b/src/test/TestDrawer.vue
index c9ec6fb..abfbfd1 100644
--- a/src/test/TestDrawer.vue
+++ b/src/test/TestDrawer.vue
@@ -1,429 +1,438 @@
<template>
<el-row ref="h1">
- <el-col>
- <!-- 鑿滃崟璇绘爣棰� -->
- <div ref="h1" class="header-container">
- <span class="describe-info">搴楅摵鍚嶉�夋嫨锛�</span>
- <!-- 搴楅摵鍚� 绾ц仈 -->
- <ShopNameAndID
- @submit-id="(n) => (deviceId[1] = n)"
- ></ShopNameAndID>
+ <el-col>
+ <!-- 鑿滃崟璇绘爣棰� -->
+ <div ref="h1" class="header-container">
+ <span class="describe-info">搴楅摵鍚嶉�夋嫨锛�</span>
+ <!-- 搴楅摵鍚� 绾ц仈 -->
+ <ShopNameAndID @submit-id="(n) => (deviceId[1] = n)"></ShopNameAndID>
- <!-- 寮傚父绫诲瀷閫夋嫨 -->
- <ExceptionType @submitExceptionType="(val) => (exceptionValue = val)">
- </ExceptionType>
+ <!-- 寮傚父绫诲瀷閫夋嫨 -->
+ <ExceptionType @submitExceptionType="(val) => (exceptionValue = val)">
+ </ExceptionType>
- <TimeSelect @submit-time="giveTime"></TimeSelect>
- <!-- </div> -->
- </div>
- <div
- ref="h2"
- style="display: flex; margin-top: 2px; justify-content: right"
- >
-
- <el-button
- type="primary"
- plain
- @click="showTable"
- style="margin-left: 20px"
- >鏌ヨ</el-button
+ <TimeSelect @submit-time="giveTime"></TimeSelect>
+ </div>
+ <div
+ ref="h2"
+ style="display: flex; margin-top: 2px; justify-content: right"
>
-
- <el-tooltip
- class="box-item"
- effect="dark"
- content="鐐瑰嚮鍙鍑篍xcel鏂囦欢"
- placement="top-start"
- >
- <!-- 鍋氭垚鍑芥暟js鏂囦欢 -->
- <el-icon
- class="iconExcel clickable"
- title="瀵煎嚭Excel鏂囦欢"
- @click="exportDom"
+ <el-button
+ type="primary"
+ plain
+ @click="showTable"
+ style="margin-left: 20px"
+ :loading="button.queryButton"
+ >鏌ヨ</el-button
>
- <i-ep-Download />
- <!-- 瀵煎嚭涓篍xcel -->
- </el-icon>
- </el-tooltip>
- </div>
- <div style="display: flex; justify-content: right;margin-right:40px">
- <span class="collapse-header-text">
- 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
- >
- </div>
- <br />
- <el-collapse ref="h3" v-model="activeNames">
- <el-collapse-item name="1">
- <template #title>
- <el-tooltip
- class="box-item"
- effect="dark"
- content="鐐瑰嚮鍙姌鍙�"
- placement="right-start"
+ <el-tooltip
+ class="box-item"
+ effect="dark"
+ content="鐐瑰嚮鍙鍑篍xcel鏂囦欢"
+ placement="top-start"
+ >
+ <!-- 鍋氭垚鍑芥暟js鏂囦欢 -->
+ <el-icon
+ class="iconExcel clickable"
+ title="瀵煎嚭Excel鏂囦欢"
+ @click="exportDom"
>
- <h4 class="collapse-header">寮傚父鍒嗘瀽</h4>
- <el-icon class="header-icon">
- <i-ep-info-filled />
- </el-icon>
- </el-tooltip>
+ <i-ep-Download />
+ <!-- 瀵煎嚭涓篍xcel -->
+ </el-icon>
+ </el-tooltip>
+ </div>
+ <div style="display: flex; justify-content: right; margin-right: 40px">
+ <span class="collapse-header-text">
+ 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
+ >
+ </div>
+ <br />
- <el-tooltip
- class="box-item"
- effect="dark"
- content="鐐瑰嚮鍙姌鍙�"
- placement="right-start"
- >
+ <el-collapse ref="h3" v-model="activeNames">
+ <el-collapse-item name="1">
+ <template #title>
+ <el-tooltip
+ class="box-item"
+ effect="dark"
+ content="鐐瑰嚮鍙姌鍙�"
+ placement="right-start"
+ >
+ <h4 class="collapse-header">寮傚父鍒嗘瀽</h4>
+ <el-icon class="header-icon">
+ <i-ep-info-filled />
+ </el-icon>
+ </el-tooltip>
+
+ <el-tooltip
+ class="box-item"
+ effect="dark"
+ 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>
+
+ <div class="box-card-label">
+ <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">
+ <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 class="box-card-label">
+ <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">
+ <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>
+ <div class="box-card-label">
+ <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">
+ <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>
+ </el-row>
+ </el-card>
+ </el-collapse-item>
+ </el-collapse>
+
+ <h4 class="table-text">寮傚父鏁版嵁</h4>
+
+ </el-col>
+ </el-row>
+ <el-card class="table-page" v-show="!isNoData">
+ <el-table
+ ref="tableH"
+ v-loading="loading"
+ :data="displayData"
+ style="width: 100%"
+ border
+ :height="tableHeight"
+ :cell-class-name="tableCellClassName"
+
+ >
+ <el-table-column prop="diName" label="搴楅摵鍚嶇О">
+ <template #default="{ row }">
+ <el-tooltip effect="dark" :content="row.diName">
+ <div class="cell ellipsis">{{ row.diName }}</div>
</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>
+ </el-table-column>
- <div class="box-card-label">
- <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">
- <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 class="box-card-label">
- <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">
- <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>
- <div class="box-card-label">
- <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">
- <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>
- </el-row>
- </el-card>
- </el-collapse-item>
- </el-collapse>
- <!-- <hr/>
- <br> -->
- <h4 class="table-text">寮傚父鏁版嵁</h4>
- <!-- -->
- </el-col>
-</el-row>
- <el-card class="table-page" v-show="!isNoData">
- <el-table
- ref="tableH"
- v-loading="loading"
- :data="displayData"
- style="width: 100%"
- stripe
- border
- :height="tableHeight"
- >
- <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" >
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.diName">
- <div class="cell ellipsis">{{ row.diName }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
-
- <el-table-column prop="devId" label="璁惧缂栧彿" >
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.devId">
- <div class="cell ellipsis">{{ row.devId }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
-
- <el-table-column prop="exception" label="寮傚父鍒嗙被" >
- <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="寮傚父绫诲瀷" >
- <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="鍦板尯" >
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.region">
- <div class="cell ellipsis">{{ row.region }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
-
- <el-table-column prop="beginTime" label="寮�濮嬫椂闂�">
- <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="缁撴潫鏃堕棿">
- <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="鎿嶄綔" >
- <template #default="{ row }">
- <el-button type="warning" @click="showDrawer(row)"
- >鏌ョ湅璇︽儏</el-button
- >
- </template>
- </el-table-column>
- </el-table>
-
- <el-pagination
- ref="h4"
- background
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :total="total"
- :page-size="pageSize"
- layout="total,prev, pager, next, jumper"
- />
- </el-card>
- <el-empty v-show="isNoData" :image-size="200" />
- <!-- 瀵硅瘽妗� -->
- <div>
- <el-dialog v-model="centerDialogVisible" draggable align-center>
- <template #header>
- <div style="font-size: 17px">
- 搴楅摵鍚嶏細{{ rowShopName }}
- <span style="margin-left: 40px">寮傚父绫诲瀷锛�</span>
- <span v-if="rowExceptionType == '0'">娌圭儫鏁版嵁瓒呮爣</span>
- <span v-else-if="rowExceptionType == '1'">渚涚數寮傚父</span>
- <span v-else-if="rowExceptionType == '2'">鎺夌嚎</span>
- <div style="margin-top: 10px">
- 寮傚父鏃堕棿娈碉細{{ rowBeginTime }} ~
- {{ 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>
+ <el-table-column prop="devId" label="璁惧缂栧彿">
+ <template #default="{ row }">
+ <el-tooltip effect="dark" :content="row.devId">
+ <div class="cell ellipsis">{{ row.devId }}</div>
+ </el-tooltip>
</template>
+ </el-table-column>
- <!-- 瓒呮爣鏁版嵁鏃� -->
- <!-- 鎶樼嚎鍥� -->
+ <el-table-column prop="exception" label="寮傚父鍒嗙被">
+ <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="寮傚父绫诲瀷">
+ <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="鍦板尯">
+ <template #default="{ row }">
+ <el-tooltip effect="dark" :content="row.region">
+ <div class="cell ellipsis">{{ row.region }}</div>
+ </el-tooltip>
+ </template>
+ </el-table-column>
- <!-- 鎺夌嚎 -->
- <!-- <div
- ref="ref"
- v-show="isOfflineShow"
+ <el-table-column prop="beginTime" label="寮�濮嬫椂闂�">
+ <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="缁撴潫鏃堕棿">
+ <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="鎿嶄綔">
+ <template #default="{ row }">
+ <el-button
+ type="primary"
+ class="table-button"
+ @click="showDrawer(row)"
+ >鏌ョ湅璇︽儏</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <el-pagination
+ ref="h4"
+ background
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :total="total"
+ :page-size="pageSize"
+ layout="total,prev, pager, next, jumper"
+ />
+ </el-card>
+ <el-empty v-show="isNoData" :image-size="200" />
+ <!-- 瀵硅瘽妗� -->
+ <div>
+ <el-dialog v-model="centerDialogVisible" draggable align-center>
+ <template #header>
+ <div style="font-size: 17px">
+ 搴楅摵鍚嶏細{{ rowShopName }}
+ <span style="margin-left: 40px">寮傚父绫诲瀷锛�</span>
+ <span v-if="rowExceptionType == '0'">娌圭儫鏁版嵁瓒呮爣</span>
+ <span v-else-if="rowExceptionType == '1'">渚涚數寮傚父</span>
+ <span v-else-if="rowExceptionType == '2'">鎺夌嚎</span>
+ <div style="margin-top: 10px">
+ 寮傚父鏃堕棿娈碉細{{ rowBeginTime }} ~
+ {{ rowEndTime }}
+ </div>
+ </div>
+ <div class="dialog-button-position">
+ <el-button
+ type="danger"
+ :loading="button.preButton"
+ :disabled="isPreCantouch || banTouch"
+ @click="getPreviousRowData"
+ >涓婃潯寮傚父</el-button
+ >
+ <el-button
+ type="danger"
+ :loading="button.afterButton"
+ :disabled="isNextCantouch || banTouch"
+ @click="getNextRowData"
+ >涓嬫潯寮傚父</el-button
+ >
+ </div>
+ </template>
+
+ <!-- 瓒呮爣鏁版嵁鏃� -->
+ <!-- 鎶樼嚎鍥� -->
+
+ <!-- 鎺夌嚎 -->
+ <div
+ ref="lineChart"
+ class="line-chart"
style="
width: 100%;
height: 300px;
- /* min-width: 100px; */
margin-bottom: 20px;
- margin-left: 10px;
- min-width: 350px;
+ /* margin-left: 10px;
+ min-width: 350px; */
"
- ></div> -->
+ ></div>
- <ExceptionTypeLineChart :option="option" :is-open-dialog="centerDialogVisible" ></ExceptionTypeLineChart>
+ <!-- <ExceptionTypeLineChart
+ :option="option"
+ :is-open-dialog="centerDialogVisible"
+ v-loading="chartLoading"
+ ></ExceptionTypeLineChart> -->
- <!-- -->
- <div style="margin-top: 40px; margin-bottom: 5px; border: 1px">
- <el-table
- :data="exceedingData"
- height="360"
- border
- style="margin-top: 25px"
- >
- <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" />
- <el-table-column prop="mvStatCode" label="璁惧缂栧彿" />
+ <!-- -->
+ <div style="margin-top: 40px; margin-bottom: 5px; border: 1px">
+ <el-table
+ :data="exceedingData"
+ height="360"
+ 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
- prop="mvFumeConcentration2"
- label="娌圭儫娴撳害(mg/m鲁)"
- />
- </el-table>
- </div>
+ <el-table-column prop="mvDataTime" label="閲囬泦鏃堕棿" />
+ <el-table-column
+ prop="mvFumeConcentration2"
+ label="娌圭儫娴撳害(mg/m鲁)"
+ />
+ </el-table>
+ </div>
- <el-tag type="success" class="mx-1" effect="dark" round
- ><span class="table-line-lable" v-show="rowExceptionType == '0'">寮傚父璁板綍锛� </span>
- <span v-show="rowExceptionType == '1' || rowExceptionType == '2'">缂哄け鏁版嵁锛�</span>
- <span class="table-line-num">{{ exceptionTotal }}鏉�</span>
- <span v-show="rowExceptionType === '1' || rowExceptionType === '2'">
- (閫昏緫璁＄畻)</span
- >
- </el-tag>
- </el-dialog>
- </div>
+ <el-tag type="success" class="mx-1" effect="dark" round
+ ><span class="table-line-lable" v-show="rowExceptionType == '0'"
+ >寮傚父璁板綍锛�
+ </span>
+ <span v-show="rowExceptionType == '1' || rowExceptionType == '2'"
+ >缂哄け鏁版嵁锛�</span
+ >
+ <span class="table-line-num">{{ exceptionTotal }}鏉�</span>
+ <span v-show="rowExceptionType === '1' || rowExceptionType === '2'">
+ (閫昏緫璁＄畻)</span
+ >
+ </el-tag>
+ </el-dialog>
+ </div>
</template>
<script>
import ExceptionType from '../sfc/ExceptionType.vue';
import TimeSelect from '../sfc/TimeSelect.vue';
import ExceptionText from '../sfc/ExceptionText.vue';
-import * as echarts from 'echarts';
import * as XLSX from 'xlsx/xlsx.mjs';
import dayjs from 'dayjs';
import axiosInstanceInstance from '../utils/request.js';
+import * as echarts from 'echarts';
const ShopNameAndID = defineAsyncComponent(() =>
import('../sfc/../sfc/ShopNameAndID.vue')
@@ -440,10 +449,23 @@
TimeSelect,
ShopNameAndID,
ExceptionText,
- ExceptionTypeLineChart
+ // ExceptionTypeLineChart
},
data() {
return {
+ chart: null,
+ // 鎶樼嚎鍥惧姞杞戒腑
+ chartLoading:false,
+ button:{
+ // 鏌ヨ鎸夐挳
+ queryButton:false,
+ // 涓婁竴鏉℃寜閽�
+ preButton:false,
+ // 涓嬩竴鏉℃寜閽�
+ afterButton:false,
+ //
+ banTouch:0
+ },
// 寮傚父鎶樼嚎鍥剧殑閰嶇疆
option: {},
// 鎶樼嚎鍥惧睍绀�
@@ -553,7 +575,7 @@
// 搴楅摵鍚� 绾ц仈閫夋嫨鍣�
optionsShop: [],
// 寮傚父绫诲瀷閫夋嫨鍣�
- exceptionValue: [],
+ exceptionValue: []
};
},
// 鐩戝惉 鍒ゆ柇鎸夐挳鏄惁鍙偣鍑�
@@ -562,16 +584,16 @@
// 澶勪簬琛ㄦ牸鐨勬渶鍚庝竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
if (newVaue === this.displayData.length - 1) {
this.isPreCantouch = true;
- //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
- if (this.isNextCantouch == true) {
+ //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
+ if (this.isNextCantouch == true) {
this.isNextCantouch = false;
}
}
// 澶勪簬琛ㄦ牸绗竴鏉℃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣
else if (newVaue === 0) {
this.isNextCantouch = true;
- //鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
- if (this.isPreCantouch == true) {
+ //鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
+ if (this.isPreCantouch == true) {
this.isPreCantouch = false;
}
}
@@ -590,6 +612,8 @@
this.getShopNames();
},
centerDialogVisible() {
+ // this.initChart();
+ // this.chart.clear
window.addEventListener('resize', this.updateChart);
}
},
@@ -601,19 +625,88 @@
this.getRecentSevenDays();
// 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� 娓叉煋寮傚父鍒嗘瀽閮ㄥ垎瀵瑰簲鐨勫簵閾哄悕
this.getShopNames();
- this.calcTableHeight()
+ this.calcTableHeight();
+
window.addEventListener('resize', this.updateChart);
-
+ },
+ beforeUnmount() {
+ if (this.chart) {
+ this.chart.dispose;
+ }
},
methods: {
- // 鍔ㄦ�佽绠楄〃鏍奸珮搴�
- calcTableHeight(){
+ calDialogWidth(){
+
+ },
+ // 鍔熻兘锛氬垵濮嬪寲鎶樼嚎鍥�
+ initChart() {
+ // 鍒涘缓echarts瀹炰緥
+ this.chart = echarts.init(this.$refs.lineChart);
+ // 瀹氫箟鍥捐〃鐨勯厤缃」鍜屾暟鎹�
+ const option = {
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ tooltip: {},
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ // dataZoom: {
+ // // 鍖哄煙缂╂斁
+ // yAxisIndex: 'none'
+ // },
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'time',
+ data: [],
+ },
+ yAxis: {
+ type: 'value',
+ },
+ series: [
+ {
+ name: '娌圭儫娴撳害',
+ type: 'line',
+ data: []
+ }
+ ]
+ };
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃
+ this.chart.setOption(option, true);
+ },
+
+ // 鍔熻兘锛氳窡椤甸潰鍝嶅簲寮忓彉鍖�
+ resizeChart() {
+ this.chart.resize();
+ },
+ // 鍔熻兘锛氭敼鍙樿〃鏍兼煇涓崟鍏冩牸鐨勯鑹�
+ tableCellClassName({ row, column, rowIndex, columnIndex }) {
+ if(columnIndex == 3){
+ if (row.exceptionType == '0') {
+ return 'exceeding-row';
+ } else if (row.exceptionType == '1') {
+ return 'abnormal-power-supply';
+ } else if (row.exceptionType == '2') {
+ return 'disconnect';
+ }
+ }
+
+ },
+
+ //鍔熻兘锛� 鍔ㄦ�佽绠楄〃鏍奸珮搴�
+ calcTableHeight() {
const h1 = this.$refs.h1.$el.offsetHeight;
const h2 = this.$refs.h4.$el.offsetHeight;
- this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 45px - var(--el-main-padding) * 2 - var(--el-card-padding))`;
+ this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 45px - var(--el-main-padding) * 2 - var(--el-card-padding))`;
},
-
- // 鏃堕棿鏄惁瓒呰繃10鍒嗛挓
+
+ //鍔熻兘锛� 鏃堕棿鏄惁瓒呰繃10鍒嗛挓
isTimeDifferenceGreaterThan10Minutes(dateString1, dateString2) {
const date1 = new Date(dateString1);
const date2 = new Date(dateString2);
@@ -639,7 +732,6 @@
let current = timePoints[i];
let next = timePoints[i + 1];
while (this.isTimeDifferenceGreaterThan10Minutes(current, next)) {
- console.log('generateTimePoints');
current = dayjs(current)
.add(10, 'minute')
.format('YYYY-MM-DD HH:mm:ss');
@@ -668,7 +760,6 @@
const year2 = date2.getFullYear();
const month2 = date2.getMonth();
const day2 = date2.getDate();
- console.log(month1, month2);
// 鍒ゆ柇涓や釜鏃ユ湡鏄惁鐩稿樊涓�涓湀
if (year1 === year2) {
@@ -698,16 +789,14 @@
// 鍒氭墦寮�鍗＄墖鏃剁涓�涓浘褰笉浼氳嚜鍔ㄤ几缂� 褰撶偣鍑讳笂/涓嬩竴鏉℃椂浼氳嚜鍔ㄤ几缂�
// 鍥惧舰鍝嶅簲寮忓彉鍖�
- // updateChart() {
- // this.$nextTick(() => {
- // if (this.chart1) {
- // this.chart1.resize();
- // }
- // if (this.chart2) {
- // this.chart2.resize();
- // }
- // });
- // },
+ updateChart() {
+ this.$nextTick(() => {
+ if (this.chart) {
+ this.chart.resize();
+ }
+ });
+ },
+
// 浠庢椂闂撮�夋嫨鍣ㄧ粍浠舵嬁鍒板紑濮嬪拰缁撴潫鏃堕棿
giveTime(val) {
//灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
@@ -719,9 +808,9 @@
// 姣斿12:00:00-13:00:00 鎵�浠ヨ繑鍥炵殑鏁扮粍鍏冪礌鏄� 12:10:00 ,12:20:00,12:30:00....13:00:00
descTenTime(begin, end) {
let time = [];
- if(begin == end){
- time.push(begin)
- return time
+ if (begin == end) {
+ time.push(begin);
+ return time;
}
// 淇濈暀缁撴灉 00 10 20 30
let temp = dayjs(begin).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss');
@@ -743,15 +832,15 @@
this.rowMvStatCode = this.displayData[index].devId;
},
- //鍔熻兘锛� 渚涚數寮傚父鍜屾帀绾挎椂鐨勮〃鏍兼暟鎹�
+ //鍔熻兘锛� 渚涚數寮傚父鍜屾帀绾挎椂鐨勮〃鏍兼暟鎹�
setExceptionData() {
- // 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊10鍒嗛挓
- const abnormalTimeTenMinute = this.descTenTime(
+ // 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊10鍒嗛挓
+ const abnormalTimeTenMinute = this.descTenTime(
this.rowBeginTime,
this.rowEndTime
- )
+ );
// 鍘婚櫎渚涚數寮傚父鍜屾帀绾垮尯闂寸殑绗竴涓湁鍏冪礌鐨勫��
- this.exceedingData = []
+ this.exceedingData = [];
for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
this.exceedingData.push({
@@ -775,8 +864,11 @@
// 鑾峰彇鑾峰彇琛ㄦ牸涓嬩竴琛屾暟鎹�
getNextRowData() {
- // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
+ // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
if (this.selectedRowIndex !== 0) {
+ // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙ｉ攣
+ this.banTouch = 1
+
//寰楀埌涓婁竴琛屾暟鎹储寮�
this.selectedRowIndex = this.selectedRowIndex - 1;
//璇锋眰鏁版嵁 鏀瑰彉exceedingData
@@ -792,32 +884,29 @@
if (this.drawerData.endTime) {
params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
}
-
+ this.button.afterButton = true
axiosInstanceInstance
.get('/fume/exceed', { params: params })
.then((response) => {
// 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
this.exceedingData = response.data.data;
- // this.chart = null;
- // this.drawChart();
this.drawChartTest();
this.exceptionTotal = this.exceedingData.length;
+ this.button.afterButton = false
});
}
- //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
- else{
- console.log(null);
- }
+
},
// 鑾峰彇鑾峰彇琛ㄦ牸涓嬩竴琛屾暟鎹�
getPreviousRowData() {
- // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
+ // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
if (this.selectedRowIndex < this.displayData.length - 1) {
+ // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙ｉ攣
+ this.banTouch = 1
+
//寰楀埌涓婁竴琛屾暟鎹储寮�
-
this.selectedRowIndex = this.selectedRowIndex + 1;
- console.log('涓�', this.selectedRowIndex);
//璇锋眰鏁版嵁 鏀瑰彉exceedingData
this.setinfo(this.selectedRowIndex);
@@ -832,19 +921,16 @@
if (this.drawerData.endTime) {
params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
}
+ this.button.preButton = true
axiosInstanceInstance
.get('/fume/exceed', { params: params })
.then((response) => {
// 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
this.exceedingData = response.data.data;
- console.log(this.exceedingData);
this.drawChartTest();
this.exceptionTotal = this.exceedingData.length;
+ this.button.preButton = false
});
- }
- //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
- else {
- console.log(null);
}
},
@@ -860,6 +946,10 @@
this.centerDialogVisible = true;
+ // 鍒濆鍖栨姌绾垮浘
+ this.initChart();
+ // this.chart.clear
+
// 鏍规嵁琛屾暟鎹姹傝缁嗚秴鏍囨暟鎹覆鏌撴姌绾垮浘
let params = {};
if (this.drawerData.devId) {
@@ -871,6 +961,7 @@
if (this.drawerData.endTime) {
params['endTime'] = this.drawerData.endTime;
}
+
axiosInstanceInstance
.get('/fume/exceed', { params: params })
.then((response) => {
@@ -895,8 +986,7 @@
if (this.exceptionValue.length != 0) {
params['exceptionValue'] = this.exceptionValue.join();
}
- console.log('鍘�', this.exceptionValue);
- console.log('澶勭悊', this.exceptionValue.join());
+
if (this.beginTime) {
params['beginTime'] = this.beginTime;
}
@@ -904,12 +994,15 @@
params['endTime'] = this.endTime;
}
this.loading = true;
+ this.button.queryButton = true
+
axiosInstanceInstance
.get('/fume/abnormalthree', { params: params })
.then((response) => {
this.abnormalData = response.data.data;
this.total = this.abnormalData.length;
this.loading = false;
+ this.button.queryButton = false
if (response.data.data.length == 0) {
ElMessage('璇ユ椂娈垫棤鏁版嵁');
this.isNoData = true;
@@ -918,8 +1011,7 @@
// 绉婚櫎绌烘暟鎹姸鎬�
this.isNoData = false;
this.handleCurrentChange(1);
- console.log('杩斿洖鐨勬暟鎹�', this.abnormalData);
- console.log('闀垮害', response.data.data.total);
+
});
},
handleSizeChange(val) {
@@ -943,7 +1035,6 @@
// 璁＄畻缁撴潫鏃堕棿鍑忓幓寮�濮嬫椂闂翠腑闂寸浉宸灏戜釜鍗佸垎閽�
const diffInMinutes = end.diff(start, 'minute');
const diffInTenMinutes = Math.floor(diffInMinutes / 10);
- console.log('鍑犱釜10鍒嗛挓', diffInTenMinutes);
return diffInTenMinutes;
},
@@ -1022,8 +1113,8 @@
// 鍔熻兘锛氬垽鏂璬ata涓槸鍚︽湁璇ユ棩鏈熸椂闂达紝瀛樺湪杩斿洖璇ユ椂闂村搴旂殑娴撳害鍊硷紝鍚﹀垯杩斿洖-1
findTimeInExceptionData(data, time) {
for (let i = 0; i < data.length; i++) {
- if(data[i]==null){
- continue
+ if (data[i] == null) {
+ continue;
}
if (data[i]['mvDataTime'] == time) {
return data[i]['mvFumeConcentration2'];
@@ -1060,7 +1151,6 @@
current = dayjs(current)
.add(10, 'minute')
.format('YYYY-MM-DD HH:mm:ss');
-
}
obj['xAxis'] = xAxis;
obj['yAxis'] = yAxis;
@@ -1069,19 +1159,17 @@
// 鍙傛暟锛氳秴鏍囨暟鎹墠闈㈠尯闂寸殑鏁版嵁
// 鍔熻兘锛氳繑鍥為櫎鍘绘渶鍚庝竴涓厓绱犵殑鏁扮粍
- removeLastItemOfBeforeData(beforeDataOfExceeding){
+ removeLastItemOfBeforeData(beforeDataOfExceeding) {
let tempList = [];
- if(beforeDataOfExceeding.length ==1){
- return tempList
- }else{
- for(let i=0;i<beforeDataOfExceeding.length-1;i++){
- tempList.push({ ...beforeDataOfExceeding[i]})
- }
- return tempList;
+ if (beforeDataOfExceeding.length == 1) {
+ return tempList;
+ } else {
+ for (let i = 0; i < beforeDataOfExceeding.length - 1; i++) {
+ tempList.push({ ...beforeDataOfExceeding[i] });
+ }
+ return tempList;
}
},
-
-
// 璁剧疆option
// 鍙傛暟锛歺杞存椂闂达紝 y杞存补鐑熸祿搴︼紝 寮傚父绫诲埆(0浠ｈ〃瓒呮爣锛�1浠ｈ〃渚涚數寮傚父鍜屾帀绾�), 寮傚父寮�濮嬫椂闂达紝寮傚父缁撴潫鏃堕棿锛屽紓甯稿紑濮嬫椂闂村湪鏁翠釜鍖洪棿鐨勭储寮曚笅鏍囷紝寮傚父缁撴潫鏃堕棿鍦ㄦ暣涓尯闂寸殑绱㈠紩涓嬫爣
@@ -1094,21 +1182,21 @@
beginIndex,
endIndex
) {
- this.option = {}
+ this.option = {};
// 瓒呮爣
if (exceptionCategory == 0) {
- this.option = {
+ this.chart.setOption({
tooltip: {},
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- // dataZoom: {
- // yAxisIndex: 'none'
- // },
- // 淇濆瓨涓哄浘鐗�
- saveAsImage: {}
- }
- },
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ // dataZoom: {
+ // yAxisIndex: 'none'
+ // },
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
+ },
xAxis: {
type: 'category',
data: xData,
@@ -1121,7 +1209,7 @@
},
yAxis: {
type: 'value',
- name: 'mg/m鲁',
+ name: 'mg/m鲁'
},
series: [
{
@@ -1147,10 +1235,10 @@
[
{
name: '瓒呮爣鏃堕棿娈�',
- xAxis: exceptionBeginTime,
+ xAxis: exceptionBeginTime
},
{
- xAxis: exceptionEndTime,
+ xAxis: exceptionEndTime
}
]
]
@@ -1205,23 +1293,23 @@
}
]
}
- };
+ });
}
// 渚涚數寮傚父鍜屾帀绾�
else if (exceptionCategory == 1) {
- this.option = {
+ this.chart.setOption( {
tooltip: {},
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- // dataZoom: {
- // // 鍖哄煙缂╂斁
- // yAxisIndex: 'none'
- // },
- // 淇濆瓨涓哄浘鐗�
- saveAsImage: {}
- }
- },
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ // dataZoom: {
+ // // 鍖哄煙缂╂斁
+ // yAxisIndex: 'none'
+ // },
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
+ },
xAxis: {
type: 'category',
data: xData,
@@ -1259,19 +1347,19 @@
}
}
]
- };
+ });
}
+ this.banTouch = 0
},
-
// 鍔熻兘锛氱偣鍑� 鈥樻煡鐪嬭鎯呪�欙紝 鈥樹笅涓�鏉♀�欐寜閽椂浼� 鍏堥�昏緫璁＄畻銆傛渶鍚庡睍绀哄浘褰�
drawChartTest() {
- this.beforeData = []
- this.afterData= []
- this.allExceptionTimeData = []
+ this.beforeData = [];
+ this.afterData = [];
+ this.allExceptionTimeData = [];
//寮傚父鐨勫紑濮嬫椂闂� 缁撴潫鏃堕棿
- let exceptionBeginTime =this.rowBeginTime
- let exceptionEndTime = this.rowEndTime
+ let exceptionBeginTime = this.rowBeginTime;
+ let exceptionEndTime = this.rowEndTime;
// beforeAndAfterTime[0]:鍓�30鍒嗛挓鐨勬椂闂寸偣
// beforeAndAfterTime[1]:鍚�10鍒嗛挓鐨勬椂闂寸偣
@@ -1295,18 +1383,18 @@
beforeAndAfterTime[2]
);
+ // 鎶樼嚎鍥惧姞杞戒腑鏁堟灉
+ this.chartLoading = true
// 璇锋眰鍓嶅崐娈�
axiosInstanceInstance
.get('/fume/history', { params: paramsBefore })
.then((result1) => {
this.beforeData = result1.data.data;
- console.log('beforeData:',this.beforeData);
// 璇锋眰鍚庡崐娈�
axiosInstanceInstance
.get('/fume/history', { params: paramsAfter })
.then((result2) => {
this.afterData = result2.data.data;
- console.log('afterData:',this.afterData);
//淇濆瓨寮傚父鍖洪棿鐨勫��
let tempArr = [];
// 淇濆瓨寮傚父鍖洪棿鍓嶅悗鐨勫��
@@ -1334,11 +1422,12 @@
after = this.shallowCopyList(this.afterData);
// after = this.afterData
- console.log('after:',after);
- }
+ }
// 瓒呮爣
else {
- let beforeTemp = this.removeLastItemOfBeforeData(this.beforeData)
+ let beforeTemp = this.removeLastItemOfBeforeData(
+ this.beforeData
+ );
// 鍓嶅悗鍖洪棿鍙樉绀鸿窛绂昏秴鏍囧尯闂存椂闂存渶杩戠殑娴撳害灏忎簬1鐨勬椂闂寸偣
for (let i = beforeTemp.length - 1; i >= 0; i--) {
if (beforeTemp[i].mvFumeConcentration2 >= 1) {
@@ -1349,7 +1438,7 @@
}
}
- for (let i = 0; i<this.afterData.length; i++) {
+ for (let i = 0; i < this.afterData.length; i++) {
if (this.afterData[i].mvFumeConcentration2 >= 1) {
break;
}
@@ -1362,7 +1451,6 @@
// 灏嗗墠鍚庡尯闂存暟鎹� 涓� 寮傚父鍖洪棿鏁版嵁 鍚堝苟
this.allExceptionTimeData = [...before, ...tempArr, ...after];
- console.log('缁勫悎鏁版嵁锛�',this.allExceptionTimeData);
// x杞存棩鏈熸椂闂�
let dateList = [];
// y杞� 瓒呮爣娌圭儫娴撳害
@@ -1378,9 +1466,6 @@
dateList = timeAndValue['xAxis'];
fumeExceeding = timeAndValue['yAxis'];
-
- console.log('dateList:',dateList);
- console.log('fumeExceeding:',fumeExceeding);
// 鎻愬彇寮傚父璧峰鏃堕棿鐐瑰湪鏁翠釜鍖洪棿鍐呯殑鏁版嵁绱㈠紩
let startIndex = dateList.findIndex(
@@ -1389,7 +1474,7 @@
let endIndex = dateList.findIndex(
(item) => item === exceptionEndTime
);
-
+
// 渚涚數寮傚父鍜屾帀绾挎儏鍐� 瓒呮爣鎯呭喌
if (
this.rowExceptionType === '1' ||
@@ -1416,6 +1501,7 @@
endIndex
);
}
+ this.chartLoading = false
});
});
},
@@ -1438,7 +1524,6 @@
]
};
});
- console.log(this.optionsShop);
});
},
exportDom() {
@@ -1492,8 +1577,6 @@
})
.then((result) => {
this.exception0 = result.data.data;
- console.log('寮傚父0', this.exception0);
- console.log('寮傚父0鏁伴噺', this.exception0.length);
});
axiosInstanceInstance
.get('/fume/shopname', {
@@ -1523,7 +1606,6 @@
getRecentSevenDays() {
// 缁欑骇鑱旈�夋嫨鍣ㄨ缃粯璁ょ殑閫夋嫨椤�
this.devId = ['浠樺皬濮愬湪鎴愰兘', 'qinshi_31010320210010'];
- console.log(this.currentDateTime, this.oneWeekAgoDateTime);
let params = {};
params['beginTime'] = this.beginTime;
params['endTime'] = this.endTime;
@@ -1548,13 +1630,7 @@
</script>
<style scoped>
-/* .exception-root-container {
- margin: 20px;
- padding: 10px;
- border: 1px;
- height: 615px;
-} */
.header-container {
display: flex;
margin-left: 20px;
@@ -1590,8 +1666,6 @@
/* 寮傚父鍒嗘瀽鏁版嵁涓庢寜閽� */
.exception-container {
display: flex;
- /* direction: column; */
- /* flex-grow: 2,1; */
}
.example-showcase .el-loading-mask {
z-index: 9;
@@ -1613,7 +1687,6 @@
font-size: 18px;
}
.collapse-header-text {
- /* margin-right: 150px; */
margin-top: 5px;
font-size: 14px;
color: gray;
@@ -1622,7 +1695,6 @@
.box-card-label {
font-size: 14px;
white-space: nowrap;
- /* overflow-x: auto; */
}
:deep().el-card {
border-radius: 9px;
@@ -1637,15 +1709,14 @@
.table-page {
margin-left: 20px;
}
-:deep().table-page .el-card__body {
- /* padding: 0px; */
-}
+
.table-text {
font-size: 18px;
margin: 5px 0px 10px 20px;
}
.text-blank {
margin-right: 10px;
+ color: #000000;
}
/* 搴楅摵鍚嶉�夋嫨鏂囨湰 */
.describe-info {
@@ -1677,16 +1748,12 @@
.box-card {
height: 190px;
}
-:deep().box-card .el-card__body {
- /* padding: 5px; */
-}
+
.sub-box-card {
height: 100px;
border: 0px;
}
-:deep().sub-box-card .el-card__body {
- /* padding: 0px; */
-}
+
.mx-1 {
margin-bottom: 0px;
}
@@ -1695,10 +1762,31 @@
justify-content: right;
margin-bottom: 10px;
}
-.el-table .warning-row {
- --el-table-tr-bg-color: var(--el-color-warning-light-9);
+
+:deep().el-table__row .exceeding-row{
+ background-color: #F53F3F;
}
-.el-table .success-row {
- --el-table-tr-bg-color: var(--el-color-success-light-9);
+:deep().el-table__row .abnormal-power-supply{
+ background-color: #FDF4BF;
}
+:deep().el-table__row .disconnect{
+ background-color: #F7BA1E;
+}
+
+
+.el-table {
+ color: #000000;
+}
+/* 琛ㄦ牸鐨勫唴杈硅窛 */
+:deep().el-table .el-table__cell {
+ padding: 2px;
+}
+
+
+/* 琛ㄦ牸涓殑鎸夐挳瀹藉害閾烘弧 */
+.table-button {
+ width: 100%;
+}
+
</style>
+
--
Gitblit v1.9.3