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/views/ExceedingFume.vue | 2154 ++++++++++++++++++++++++++++++++++------------------------
1 files changed, 1,258 insertions(+), 896 deletions(-)
diff --git a/src/views/ExceedingFume.vue b/src/views/ExceedingFume.vue
index cd7a76a..279424f 100644
--- a/src/views/ExceedingFume.vue
+++ b/src/views/ExceedingFume.vue
@@ -1,432 +1,520 @@
-<!-- app -->
-<!-- -->
<template>
- <!-- solid #000000 -->
- <div class="exception-root-container">
- <!-- <div style="margin-bottom: 20px; display: flex; white-space: nowrap">
- 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�
- </div> -->
- <!-- 鑿滃崟璇绘爣棰� -->
+ <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>
- <div style="display: flex">
- <span class="describe-info">搴楅摵鍚嶉�夋嫨锛�</span>
+ <!-- 寮傚父绫诲瀷閫夋嫨 -->
+ <ExceptionType @submitExceptionType="(val) => (exceptionValue = val)">
+ </ExceptionType>
- <!-- 搴楅摵鍚� 绾ц仈 -->
- <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>
- <!-- 鏃ユ湡鏃堕棿閫夋嫨鍣� -->
- <!-- <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>
-
- <!-- 鍋氭垚琛ㄥ崟 -->
- <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-button
- type="primary"
- plain
- @click="getAllData"
- style="margin-left: 20px"
- >鏌ヨ鍏ㄩ儴</el-button
- >
-
- <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
+ style="margin-left: 20px"
+ :loading="button.queryButton"
+ @click="showTable"
+ >鏌ヨ</el-button
>
- <i-ep-Download />
- <!-- 瀵煎嚭涓篍xcel -->
- </el-icon>
- </el-tooltip>
- </div>
- <br />
- <el-collapse 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"
>
- <span class="collapse-header"> 寮傚父鐨勫簵閾烘暟閲忓垎鏋�</span>
- <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"
- >
- <span class="collapse-header-text">
- 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
+ <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>
- </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
- >
- </el-statistic>
- <hr />
- <div class="box-card-butcontainer">
- <el-scrollbar height="130px">
+ <h4 class="collapse-header">寮傚父鍒嗘瀽</h4>
+ <el-icon class="header-icon">
+ <i-ep-info-filled />
+ </el-icon>
+ </el-tooltip>
- <!-- <button
- v-for="item in this.exception0"
- :key="item"
- class="scrollbar-demo-item"
- >
- {{ 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>
- </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
- >
- <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
- >
- </el-statistic>
- <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>
- </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
- >
- <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
- >
- </el-statistic>
- <hr />
- <div>
- <el-scrollbar height="130px">
- <!-- <span
- v-for="item in this.exception2"
- :key="item"
- class="scrollbar-demo-item"
+ <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
>
- {{ item.diName }}
- <br />
- </span> -->
+ </div>
- <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 class="box-card-label">
+ <el-scrollbar>
+ <span class="box-card-label">寮傚父搴楅摵鍗犳瘮锛�</span>
+ <span style="font-size: 20px"
+ >{{ exception0.length }} /{{ shopsTotal }}
+ </span
>
- </div>
- </el-scrollbar>
- </div>
- </el-col>
- </el-row>
- </el-card>
- </el-collapse-item>
- </el-collapse>
+ <span style="font-size: 17px">
+ ({{
+ ((exception0.length/shopsTotal)*100).toFixed(1)
+ }}%)</span
+ >
+ {{ shopsTotal}}
+ <span class="right-text">
+ 寮傚父鏁板崰姣旓細{{ ((exception0Num/exceptionAllNum) * 100).toFixed(1) }}%
+ </span>
+ </el-scrollbar>
+ </div>
- <br />
- <hr />
- <div class="table-page">
- <el-table
- v-loading="loading"
- :data="displayData"
- style="width: 100%"
- height="400"
- >
- <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" width="340">
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.diName">
- <div class="cell ellipsis">{{ row.diName }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
+ <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-table-column prop="devId" label="璁惧缂栧彿" width="230">
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.devId">
- <div class="cell ellipsis">{{ row.devId }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
+ <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="font-size: 17px">
+ ({{
+ ((exception1.length/shopsTotal)*100).toFixed(1)
+ }}%)</span
+ >
+ <span class="right-text">
+ 寮傚父鏁板崰姣旓細{{ ((exception1Num/exceptionAllNum) * 100).toFixed(1) }}%
+ </span>
+ </el-scrollbar>
+ </div>
- <el-table-column prop="exception" label="寮傚父鍒嗙被" width="150">
- <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="寮傚父绫诲瀷" width="150">
- <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="鍦板尯" width="150">
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.region">
- <div class="cell ellipsis">{{ row.region }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
+ <hr />
- <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="鎿嶄綔" width="200">
- <template #default="{ row }">
- <el-button type="warning" @click="showDrawer(row)"
- >鏌ョ湅璇︽儏</el-button
- >
- </template>
- </el-table-column>
- </el-table>
+ <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-pagination
- background
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :total="total"
- :page-size="pageSize"
- layout="total,prev, pager, next, jumper"
- />
- </div>
+ <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="font-size: 17px">
+ ({{
+ (((exception2.length)/shopsTotal)*100).toFixed(1)
+ }}%)</span
+ >
+ <span class="right-text">
+ 寮傚父鏁板崰姣旓細{{ connectException }}%
+ </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>
- <!-- 瀵硅瘽妗� -->
- <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">
- 搴楅摵鍚嶏細{{ 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>
+ <h4 class="table-text">寮傚父鏁版嵁</h4>
+
+ </el-col>
+ </el-row>
+ <el-card class="table-page" v-show="!isNoData">
+ <el-table
+ ref="tableH"
+ size="small"
+ v-loading="loading"
+ :data="displayData"
+ style="width: 100%"
+ border
+ :height="tableHeight"
+ :cell-class-name="tableCellClassName"
+
+ >
+ <el-table-column prop="diName" label="搴楅摵鍚嶇О" align="center">
+ <template #default="{ row }">
+ <el-tooltip effect="dark" :content="row.diName">
+ <div class="cell ellipsis">{{ row.diName }}</div>
+ </el-tooltip>
</template>
+ </el-table-column>
- <el-button
- type="danger"
- :disabled="isPreCantouch"
- @click="getPreviousRowData"
- >涓婁竴鏉�</el-button
- >
- <el-button
- type="danger"
- :disabled="isNextCantouch"
- @click="getNextRowData"
- >涓嬩竴鏉�</el-button
- >
- <!-- 瓒呮爣鏁版嵁鏃� -->
- <!-- 鎶樼嚎鍥� -->
- <div
- ref="chart"
+ <el-table-column prop="devId" label="璁惧缂栧彿" align="center">
+ <template #default="{ row }">
+ <el-tooltip effect="dark" :content="row.devId">
+ <div class="cell ellipsis">{{ row.devId }}</div>
+ </el-tooltip>
+ </template>
+ </el-table-column>
+
+ <el-table-column prop="diSupplier" label="渚涘簲鍟�" align="center">
+ <template #default="{ row }">
+ <el-tooltip effect="dark" :content="row.diSupplier">
+ <div class="cell ellipsis">{{ row.diSupplier }}</div>
+ </el-tooltip>
+ </template>
+ </el-table-column>
+
+
+ <el-table-column prop="exception" label="寮傚父鍒嗙被" align="center">
+ <template #default="{ row }">
+ <el-tooltip effect="dark" :content="row.exception">
+ <div class="cell ellipsis">{{ row.exception }}</div>
+ </el-tooltip>
+ </template>
+ </el-table-column>
+ <el-table-column label="寮傚父绫诲瀷" align="center">
+ <template #default="{ row }">
+ <span v-if="row.exceptionType == '0'">娌圭儫鏁版嵁瓒呮爣</span>
+ <span v-else-if="row.exceptionType == '1'">鐤戜技渚涚數寮傚父</span>
+ <span v-else-if="row.exceptionType == '2'">鎺夌嚎</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="region" label="鍦板尯" align="center">
+ <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="寮�濮嬫椂闂�" align="center">
+ <template #default="{ row }">
+ <el-tooltip effect="dark" :content="row.beginTime">
+ <div class="cell ellipsis">{{ row.beginTime }}</div>
+ </el-tooltip>
+ </template>
+ </el-table-column>
+ <el-table-column prop="endTime" label="缁撴潫鏃堕棿" align="center">
+ <template #default="{ row }">
+ <el-tooltip effect="dark" :content="row.endTime">
+ <div class="cell ellipsis">{{ row.endTime }}</div>
+ </el-tooltip>
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" align="center">
+ <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="ref"
+ v-show="isOfflineShow"
style="
- width: 800px;
+ width: 100%;
height: 300px;
+ /* min-width: 100px; */
margin-bottom: 20px;
margin-left: 10px;
+ min-width: 350px;
"
- ></div>
+ ></div> -->
- <!-- v-show="!isAbnormal" -->
- <!-- 琛ㄦ牸 -->
- <div style="margin-top: 40px;margin-bottom: 5px; border: 1px solid #000000">
- <el-table
- :data="exceedingData"
- height="360"
- border
- style="width: 100%; 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
- prop="mvFumeConcentration2"
- label="娌圭儫娴撳害(mg/m鲁)"
- width="150"
- />
- </el-table>
- </div>
+ <ExceptionTypeLineChart
+ :option="option"
+ :is-open-dialog="centerDialogVisible"
+ v-loading="chartLoading"
+ ></ExceptionTypeLineChart>
- <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
+ <!-- -->
+ <div style="margin-top: 40px; margin-bottom: 5px; border: 1px">
+ <el-table
+ :data="exceedingData"
+ height="360"
+ border
+ style="margin-top: 25px"
>
- </el-dialog>
- </div>
+ <el-table-column
+ type="index"
+ label="搴忓彿"
+ width="60px"
+ align="center"
+ fixed
+ :index="indexMethod"
+
+ ></el-table-column>
+ <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" show-overflow-tooltip/>
+ <el-table-column prop="mvStatCode" label="璁惧缂栧彿" align="center" show-overflow-tooltip/>
+ <el-table-column prop="diSupplier" label="渚涘簲鍟�" align="center" show-overflow-tooltip/>
+ <el-table-column prop="mvDataTime" label="閲囬泦鏃堕棿" align="center" show-overflow-tooltip/>
+
+ <el-table-column
+ prop="mvFumeConcentration2"
+ label="娌圭儫娴撳害(mg/m鲁)"
+ align="center"
+ show-overflow-tooltip
+ />
+ </el-table>
+ </div>
+
+ <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 ExceptionButton from '../sfc/ExceptionButton.vue';
import ExceptionType from '../sfc/ExceptionType.vue';
import TimeSelect from '../sfc/TimeSelect.vue';
+import ExceptionText from '../sfc/ExceptionText.vue';
-// import axios from 'axios';
-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')
);
+
+// 寮傚父鍥惧舰寮傛缁勪欢
+const ExceptionTypeLineChart = defineAsyncComponent(() =>
+ import('../sfc/ExceptionTypeLineChart.vue')
+);
export default {
name: 'TablePage',
components: {
- ExceptionButton,
ExceptionType,
TimeSelect,
- ShopNameAndID
+ ShopNameAndID,
+ ExceptionText,
+ ExceptionTypeLineChart
},
data() {
return {
+ exception0Num:0,
+ exception1Num:0,
+ exception2Num:0,
+ // 鎶樼嚎鍥惧姞杞戒腑
+ chartLoading:false,
+ button:{
+ // 鏌ヨ鎸夐挳
+ queryButton:false,
+ // 涓婁竴鏉℃寜閽�
+ preButton:false,
+ // 涓嬩竴鏉℃寜閽�
+ afterButton:false,
+ //
+ banTouch:0
+ },
+ // 寮傚父鎶樼嚎鍥剧殑閰嶇疆
+ option: {},
+ // 鎶樼嚎鍥惧睍绀�
+ isChartShow: false,
+ // table鍏冪礌
+ tableRef: null,
+ // 寮傚父琛ㄦ牸鏁版嵁
+ tableHeight: 300,
+ // 绌烘暟鎹姸鎬�
+ isNoData: false,
// 寮瑰嚭妗嗕腑琛ㄦ牸鏉℃暟
- exceptionTotal:0,
+ exceptionTotal: 0,
// 鏃犳暟鎹椂鐨勬椂闂存暟缁勶紝鍏冪礌鐩稿樊10鍒嗛挓
// abnormalTimeTenMinute: [],
// 搴楅摵鎬绘暟
@@ -452,7 +540,8 @@
rowEndTime: '',
// 寮傚父鐨勮澶囩紪鍙�
rowMvStatCode: '',
-
+ // 渚涘簲鍟�
+ rowDiSupplier:'',
// 琛ㄦ牸鐨勪竴琛屾暟鎹�
rowTable: [],
//鎷兼帴鐨勬墍鏈夋暟鎹�
@@ -462,8 +551,6 @@
// 鏃犳暟鎹椂澧炲姞鐨勫悗40鍒嗛挓鏁版嵁
afterData: [],
- // 鎶樼嚎鍥惧疄渚�
- chart: null,
// -1琛ㄧず鏈�夋嫨琛ㄦ牸鐨勮
selectedRowIndex: -1,
@@ -487,7 +574,8 @@
// 鎶藉眽鍔犺浇鍔ㄧ敾
loadingDrawer: true,
// 鍒嗛〉灞曠ず鏁版嵁
- // 姣忛〉灞曠ず鐨勬暟鎹�
+
+ // 寮傚父琛ㄧ殑鏁版嵁
displayData: [],
// 瀛樻斁鍚庣杩斿洖鐨刯son鏁版嵁
jsonData: [],
@@ -507,7 +595,7 @@
endTime: '',
// 寮傚父琛ㄦ暟鎹�
abnormalData: [],
- // 璇ユ椂娈电殑璇︾粏瓒呮爣鏁版嵁
+ // 寮瑰嚭鐨勫璇濇涓殑寮傚父琛ㄦ牸鏁版嵁
exceedingData: [],
drawerVisible: false,
// 琛ㄦ牸鐨勪竴琛屾暟鎹�
@@ -525,38 +613,24 @@
// 搴楅摵鍚� 绾ц仈閫夋嫨鍣�
optionsShop: [],
// 寮傚父绫诲瀷閫夋嫨鍣�
- exceptionValue: [],
- exceptionOptions: [
- {
- value: '0',
- label: '娌圭儫娴撳害瓒呮爣'
- },
- {
- value: '1',
- label: '鐤戜技渚涚數寮傚父'
- },
- {
- value: '2',
- label: '鎺夌嚎'
- }
- ]
+ exceptionValue: []
};
},
// 鐩戝惉 鍒ゆ柇鎸夐挳鏄惁鍙偣鍑�
watch: {
selectedRowIndex(newVaue) {
- // 澶勪簬琛ㄦ牸鐨勭涓�鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
- if (newVaue === 0) {
+ // 澶勪簬琛ㄦ牸鐨勬渶鍚庝竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
+ if (newVaue === this.displayData.length - 1) {
this.isPreCantouch = true;
- //鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
+ //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
if (this.isNextCantouch == true) {
this.isNextCantouch = false;
}
}
- // 澶勪簬琛ㄦ牸鏈�鍚庝竴鎻愬摝鍟婃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣
- else if (newVaue === this.displayData.length - 1) {
+ // 澶勪簬琛ㄦ牸绗竴鏉℃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣
+ else if (newVaue === 0) {
this.isNextCantouch = true;
- //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
+ //鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
if (this.isPreCantouch == true) {
this.isPreCantouch = false;
}
@@ -574,9 +648,158 @@
},
endTime() {
this.getShopNames();
+ },
+ centerDialogVisible() {
+ window.addEventListener('resize', this.updateChart);
}
},
+ computed:{
+ exceptionAllNum(){
+ let sum = this.exception0Num+this.exception1Num+this.exception2Num
+ return sum == 0?1:sum
+ },
+ connectException(){
+ let sum = this.exception0Num+this.exception1Num+this.exception2Num
+ if(sum == 0){
+ return 0
+ }
+ else{
+ return (100 - ((exception0Num/sum) * 100) - ((exception1Num/sum) * 100)).toFixed(1)
+ }
+ }
+ },
+ mounted() {
+ // 浠庢帴鍙ｈ幏鍙栧簵閾哄悕绉� 缁欑骇鑱斾笅鎷夋
+ this.getDeviceInfo();
+ // 灞曠ず鏈�杩�7澶╂暟鎹�
+ this.getRecentSevenDays();
+ // 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� 娓叉煋寮傚父鍒嗘瀽閮ㄥ垎瀵瑰簲鐨勫簵閾哄悕
+ this.getShopNames();
+ this.calcTableHeight();
+ window.addEventListener('resize', this.updateChart);
+ },
methods: {
+ // 鍔熻兘锛氬璇濇琛ㄦ牸搴忓彿閫掑
+ // 鏃堕棿锛�2023-8-17
+ indexMethod(index) {
+ return index + 1 ;
+ },
+
+ // 鍔熻兘锛氭敼鍙樿〃鏍兼煇涓崟鍏冩牸鐨勯鑹�
+ tableCellClassName({ row, column, rowIndex, columnIndex }) {
+ if(columnIndex == 4){
+ 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))`;
+ },
+
+ //鍔熻兘锛� 鏃堕棿鏄惁瓒呰繃10鍒嗛挓
+ isTimeDifferenceGreaterThan10Minutes(dateString1, dateString2) {
+ const date1 = new Date(dateString1);
+ const date2 = new Date(dateString2);
+
+ // 璁＄畻涓や釜鏃ユ湡鐨勬椂闂村樊锛堟绉掞級
+ 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();
+
+ // 鍒ゆ柇涓や釜鏃ユ湡鏄惁鐩稿樊涓�涓湀
+ 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.chart1) {
+ // this.chart1.resize();
+ // }
+ // if (this.chart2) {
+ // this.chart2.resize();
+ // }
+ // });
+ // },
+
// 浠庢椂闂撮�夋嫨鍣ㄧ粍浠舵嬁鍒板紑濮嬪拰缁撴潫鏃堕棿
giveTime(val) {
//灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
@@ -584,11 +807,15 @@
this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
},
- // 寮傚父鐨勫紑濮嬪拰缁撴潫鏃堕棿銆傝繑鍥炴椂闂存暟缁勶紝浠庡紑濮嬫椂闂寸殑鍚�10鍒嗛挓鍒扮粨鏉熸椂闂翠负姝€��
- // 姣斿12:00:00 -13:00:00 鎵�浠ヨ繑鍥炵殑鏁扮粍鍏冪礌鏄� 12:10:00 ,12:20:00,12:30:00....13:00:00
+ // 鍙傛暟锛氬紓甯哥殑寮�濮嬪拰缁撴潫鏃堕棿銆傝繑鍥炴椂闂存暟缁勶紝浠庡紑濮嬫椂闂寸殑鍚�10鍒嗛挓鍒扮粨鏉熸椂闂翠负姝€��
+ // 姣斿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;
+ }
+ // 淇濈暀缁撴灉 00 10 20 30
let temp = dayjs(begin).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss');
while (temp != end) {
time.push(temp);
@@ -596,7 +823,6 @@
}
// 鍔犱笂寮傚父鐨勭粨鏉熸椂闂�
time.push(temp);
-
return time;
},
@@ -607,32 +833,31 @@
this.rowBeginTime = this.displayData[index].beginTime;
this.rowEndTime = this.displayData[index].endTime;
this.rowMvStatCode = this.displayData[index].devId;
- console.log('琛屽悕瀛楋細', this.rowShopName);
- console.log('琛屽悕瀛楋細', this.rowExceptionType);
- console.log('琛屽悕瀛楋細', this.rowBeginTime);
- console.log('琛屽悕瀛楋細', this.rowEndTime);
+ this.rowDiSupplier = this.displayData[index].diSupplier
},
- // 渚涚數寮傚父鍜屾帀绾挎椂鐨勮〃鏍兼暟鎹�
+
+ //鍔熻兘锛� 渚涚數寮傚父鍜屾帀绾挎椂鐨勮〃鏍兼暟鎹�
setExceptionData() {
- // 娓呯┖锛岃鍘嗗彶鏁版嵁鏉℃暟闅愯棌锛屼娇鏃犳暟鎹殑鏍囩鏉℃暟鏄剧ず鍑烘潵
- // this.exceedingData=[]
- // 娓呯┖涓婃鐨勬暟鎹紝闃叉褰卞搷鏈鐨勫睍绀烘暟
- // this.abnormalTimeTenMinute = [];
// 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊10鍒嗛挓
const abnormalTimeTenMinute = this.descTenTime(
this.rowBeginTime,
this.rowEndTime
);
+ // 鍘婚櫎渚涚數寮傚父鍜屾帀绾垮尯闂寸殑绗竴涓湁鍏冪礌鐨勫��
+ this.exceedingData = [];
+
for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
this.exceedingData.push({
mvStatCode: this.rowMvStatCode,
diName: this.rowShopName,
+ diSupplier:this.rowDiSupplier,
mvDataTime: abnormalTimeTenMinute[i],
- mvFumeConcentration2: '绌烘暟鎹�'
+ mvFumeConcentration2: ''
});
}
+
// 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟
- this.exceptionTotal = abnormalTimeTenMinute.length
+ this.exceptionTotal = abnormalTimeTenMinute.length;
},
// 鐐瑰嚮琛ㄦ牸鐨勮鏃�
selectTableRow(row) {
@@ -640,69 +865,17 @@
this.selectedRowIndex = this.displayData.indexOf(row);
// 杩涘叆鎶藉眽椤甸潰鏇存柊澶撮儴鏁版嵁
this.setinfo(this.selectedRowIndex);
- console.log('閫夋嫨涓锛�', this.selectedRowIndex);
- },
-
- // 鑾峰彇鑾峰彇琛ㄦ牸涓婁竴琛屾暟鎹�
- getPreviousRowData() {
- // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
- if (this.selectedRowIndex !== 0) {
- // 鈥欎笅涓�鏉♀�樼殑鎸夐挳鎭㈠鐐瑰嚮
- // this.isNextCantouch = false
-
- //寰楀埌涓婁竴琛屾暟鎹储寮�
- this.selectedRowIndex = this.selectedRowIndex - 1;
- console.log('涓�', this.selectedRowIndex);
-
- console.log(this.displayData[this.selectedRowIndex]);
- //璇锋眰鏁版嵁 鏀瑰彉exceedingData
- this.setinfo(this.selectedRowIndex);
- let params = {};
- if (this.drawerData.devId) {
- params['devId'] = this.displayData[this.selectedRowIndex].devId;
- }
- if (this.drawerData.beginTime) {
- params['beginTime'] =
- this.displayData[this.selectedRowIndex].beginTime;
- }
- if (this.drawerData.endTime) {
- params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
- }
-
- axiosInstance
- .get('/fume/exceed', { params: params })
- .then((response) => {
- // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
- this.exceedingData = response.data.data;
- this.chart = null;
- this.drawChart();
- this.exceptionTotal = this.exceedingData.length
- });
- }
- //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
- else if (this.selectedRowIndex === 0) {
- console.log(null);
- // 璀﹀憡
- // ElMessage.warn('宸叉槸绗竴鏉℃暟鎹�');
- // ElMessage.info('宸叉槸璇ラ〉绗竴鏉℃暟鎹�');
-
- // 鈥欎笂涓�鏉♀�樼殑鎸夐挳涓嶅彲鐐瑰嚮
- // this.isPreCantouch = true
- }
},
// 鑾峰彇鑾峰彇琛ㄦ牸涓嬩竴琛屾暟鎹�
getNextRowData() {
// 涓嶆槸琛ㄦ牸鐨勭涓�琛�
- if (this.selectedRowIndex < this.displayData.length - 1) {
- // 鈥欎笂涓�鏉♀�樼殑鎸夐挳鎭㈠鐐瑰嚮
- // this.isPreCantouch = false
+ if (this.selectedRowIndex !== 0) {
+ // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙ｉ攣
+ this.banTouch = 1
//寰楀埌涓婁竴琛屾暟鎹储寮�
- this.selectedRowIndex = this.selectedRowIndex + 1;
- console.log('涓�', this.selectedRowIndex);
-
- console.log(this.displayData[this.selectedRowIndex]);
+ this.selectedRowIndex = this.selectedRowIndex - 1;
//璇锋眰鏁版嵁 鏀瑰彉exceedingData
this.setinfo(this.selectedRowIndex);
let params = {};
@@ -716,26 +889,53 @@
if (this.drawerData.endTime) {
params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
}
- axiosInstance
+ this.button.afterButton = true
+ axiosInstanceInstance
.get('/fume/exceed', { params: params })
.then((response) => {
// 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
this.exceedingData = response.data.data;
- console.log('杩斿洖鐨勫紓甯告暟鎹负锛�');
- console.log(this.exceedingData);
- this.chart = null;
- this.drawChart();
- this.exceptionTotal = this.exceedingData.length
+ this.drawChartTest();
+ this.exceptionTotal = this.exceedingData.length;
+ this.button.afterButton = false
});
}
- //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
- else {
- console.log(null);
- // 璀﹀憡
- // ElMessage.info('宸叉槸璇ラ〉鏈�鍚庝竴鏉℃暟鎹�');
+
+ },
- // 鈥欎笅涓�鏉♀�樼殑鎸夐挳涓嶅彲鐐瑰嚮
- // this.isNextCantouch = true
+ // 鑾峰彇鑾峰彇琛ㄦ牸涓嬩竴琛屾暟鎹�
+ getPreviousRowData() {
+ // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
+ if (this.selectedRowIndex < this.displayData.length - 1) {
+ // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙ｉ攣
+ this.banTouch = 1
+
+ //寰楀埌涓婁竴琛屾暟鎹储寮�
+ this.selectedRowIndex = this.selectedRowIndex + 1;
+
+ //璇锋眰鏁版嵁 鏀瑰彉exceedingData
+ this.setinfo(this.selectedRowIndex);
+ let params = {};
+ if (this.drawerData.devId) {
+ params['devId'] = this.displayData[this.selectedRowIndex].devId;
+ }
+ if (this.drawerData.beginTime) {
+ params['beginTime'] =
+ this.displayData[this.selectedRowIndex].beginTime;
+ }
+ 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;
+ this.drawChartTest();
+ this.exceptionTotal = this.exceedingData.length;
+ this.button.preButton = false
+ });
}
},
@@ -745,15 +945,12 @@
this.selectTableRow(row);
this.rowTable = row;
- console.log('璧嬪�煎悗row', this.rowTable);
- console.log('璧嬪�煎悗row', this.rowTable);
- // 灞曞紑鎶藉眽
+
// 琛ㄦ牸鐨勮鏁版嵁浠ュ璞″舰寮忕粰drawerData
this.drawerData = row;
this.centerDialogVisible = true;
- // this.drawerVisible = true;
- console.log(this.drawerData);
+
// 鏍规嵁琛屾暟鎹姹傝缁嗚秴鏍囨暟鎹覆鏌撴姌绾垮浘
let params = {};
if (this.drawerData.devId) {
@@ -765,36 +962,32 @@
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.drawChartTest();
+ this.exceptionTotal = this.exceedingData.length;
+ });
},
// 鐢ㄦ埛鏍规嵁杈撳叆鐨勬潯浠舵煡璇�
showTable() {
- if (this.beginTime > this.endTime) {
- alert('璇疯緭鍏ユ纭殑鏃堕棿鑼冨洿');
+ if (this.isExceedOneMonth(this.beginTime, this.endTime)) {
+ alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀');
return;
}
let params = {};
- // params['page'] = this.startIndex
- // params['pageSize'] = 10
+
if (this.deviceId[1]) {
params['devId'] = this.deviceId[1];
}
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;
}
@@ -802,15 +995,24 @@
params['endTime'] = this.endTime;
}
this.loading = true;
- axiosInstance
+ this.button.queryButton = true
+
+ axiosInstanceInstance
.get('/fume/abnormalthree', { params: params })
.then((response) => {
this.abnormalData = response.data.data;
this.total = this.abnormalData.length;
- this.handleCurrentChange(1);
- console.log('杩斿洖鐨勬暟鎹�', this.abnormalData);
- console.log('闀垮害', response.data.data.total);
this.loading = false;
+ this.button.queryButton = false
+ if (response.data.data.length == 0) {
+ ElMessage('璇ユ椂娈垫棤鏁版嵁');
+ this.isNoData = true;
+ return;
+ }
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false;
+ this.handleCurrentChange(1);
+
});
},
handleSizeChange(val) {
@@ -819,19 +1021,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);
},
//鐩稿樊澶氬皯涓崄鍒嗛挓 璁＄畻涓苟涓嶅寘鎷紑濮嬫椂闂达紝浣嗗寘鎷粨鏉熸椂闂淬��
@@ -843,341 +1036,480 @@
// 璁＄畻缁撴潫鏃堕棿鍑忓幓寮�濮嬫椂闂翠腑闂寸浉宸灏戜釜鍗佸垎閽�
const diffInMinutes = end.diff(start, 'minute');
const diffInTenMinutes = Math.floor(diffInMinutes / 10);
- console.log('鍑犱釜10鍒嗛挓', diffInTenMinutes);
return diffInTenMinutes;
},
- // 渚涚數寮傚父鍜屾帀绾跨殑鎶樼嚎鍥�
- linechart(xAxisData1, abnormalBeginTime, abnormalEndTime, fumeExceeding) {
- this.chart = echarts.init(this.$refs.chart, null, {
- width: 800,
- height: 300
- });
- 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: {}
- }
- },
- xAxis: {
- // type: 'time',
- // 鍦ㄧ被鐩酱锛坱ype: 'category'锛変腑鏈夋晥銆�
- data: xAxisData1,
- name: '鏃堕棿'
- // axisLabel: {
- // interval:3,
- // rotate:40
- // }
- },
- yAxis: {
- type: 'value',
- axisLabel: {
- show: true,
- interval: 'auto'
- // formatter:'{value} %'
- },
- name: 'mg/m鲁'
- },
- series: [
- {
- name: '娌圭儫瓒呮爣鏁版嵁',
- type: 'line',
- data: fumeExceeding,
- markLine: {
- silent: true,
-
- data: [
- // 鏍囨敞鏃犳暟鎹椂闂存鐨勬晥鏋滐紝灏嗚繖涓椂闂存鐨勬暟杞撮儴鍒嗗彉涓虹孩鑹�
- {
- name: '鏃犳暟鎹�',
- xAxis: abnormalBeginTime
- },
- {
- xAxis: abnormalEndTime
- }
- ],
- lineStyle: {
- color: 'red'
- }
- }
- }
- ]
- });
+ // 鍙傛暟锛氬紓甯哥殑寮�濮嬫椂闂达紝寮傚父鐨勭粨鏉熸椂闂淬��
+ // 鍔熻兘锛氳繑鍥炲紑濮嬫椂闂寸殑鍓�30鍒嗛挓鐨勬椂闂寸偣锛岀粨鏉熸椂闂村悗40鍒嗛挓鐨勬椂闂寸偣
+ before30AndAfter40(begin, end) {
+ let time = [];
+ const before30MinBegin = dayjs(begin)
+ .subtract(30, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ // 鍚庝竴娈电殑寮�濮嬫椂闂�
+ const after10MinBegin = dayjs(end)
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ // 寰�鍚�40鍒嗛挓
+ const after40MinEnd = dayjs(end)
+ .add(40, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ time.push(before30MinBegin);
+ time.push(after10MinBegin);
+ time.push(after40MinEnd);
+ return time;
},
- // 灞曠ず鎶樼嚎鍥�
- drawChart() {
- // 褰撳嚭鐜颁緵鐢靛紓甯稿拰鎺夌嚎鏃讹紝鏃舵鏃犳暟鎹� 鍒欐嫾鎺ュ墠鍚庢鏁版嵁
- if (
- this.exceedingData.length === 0 ||
- this.rowExceptionType === '1' ||
- this.rowExceptionType === '2'
- ) {
- // 閲嶆瀯琛ㄦ牸 鎵嬪姩濉厖
- this.setExceptionData();
+ // 鍙傛暟锛氳澶囩紪鍙凤紝 寮�濮嬫椂闂达紝 缁撴潫鏃堕棿
+ // 鍔熻兘锛氳繑鍥炴煇璁惧鍦ㄨ鏃舵鍘嗗彶鏁版嵁鐨刧et璇锋眰鍙傛暟銆�
+ requestGetParms(devnum, begin, end) {
+ return {
+ devId: devnum,
+ beginTime: begin,
+ endTime: end
+ };
+ },
+ // 鍙傛暟锛氬璞℃暟缁�(璇ュ璞′腑鐨勫睘鎬т笉鑳芥槸寮曠敤绫诲瀷锛屽惁鍒欐嫹璐濈殑鍊艰繕鏄細鐩镐簰褰卞搷)
+ // 鍔熻兘锛氭嫹璐濊瀵硅薄鏁扮粍銆�
+ shallowCopyList(itemIsObjOfList) {
+ let tempList = [];
+ itemIsObjOfList.forEach((item) => {
+ tempList.push({ ...item });
+ });
+ return tempList;
+ },
- // 灞曠ず
- this.isAbnormal = true;
- // 鎷兼帴鏃ユ湡
- //寮傚父鐨勫紑濮嬫椂闂�
- this.abnormalBt = this.displayData[this.selectedRowIndex].beginTime;
- //寮傚父鐨勭粨鏉熸椂闂�
- this.abnormalEt = this.displayData[this.selectedRowIndex].endTime;
- console.log(
- '渚涚數寮�濮�',
- this.displayData[this.selectedRowIndex].beginTime
+ // 鍙傛暟锛氭坊鍔犻灏炬椂闂存暟鎹殑寮傚父鏁版嵁鏁扮粍(鍏冪礌涓哄璞�)
+ // 鍔熻兘锛氬涓棿寮傚父鍖洪棿鏃堕棿鍜屽�艰繘琛岃ˉ鍏咃紝杩斿洖澶勭悊鍚庣殑缁撴灉
+ // 璇︾粏鎻忚堪锛氶亶鍘嗘暟缁勶紝褰撳彂鐜版暟缁勫厓绱犱负绌烘椂锛岃缃鍏冪礌鐨勬椂闂翠负涓婁竴涓厓绱犳椂闂寸殑鍚�10鍒嗛挓锛屽苟鎶婃祿搴﹀�艰缃负null(涓婁釜鍏冪礌鐨勬椂闂翠竴瀹氫笉涓虹┖锛屾棤闇�鍐嶅幓鍒ゆ柇涓婁釜鍏冪礌涓虹┖鐨勬儏鍐�)銆�
+ addTenMinutes(exceptionDataArr) {
+ // x杞� 鏃ユ湡鏃堕棿
+ let dateList = [];
+ // y杞� 瓒呮爣娌圭儫娴撳害
+ let fumeExceeding = [];
+ let obj = {};
+ for (let i = 0; i < exceptionDataArr.length; i++) {
+ if (exceptionDataArr[i] == null) {
+ //x杞存棩鏈熴�傚厓绱犱负null鏃讹紝 璁剧疆璇ュ厓绱犵殑鏃堕棿涓哄墠涓�鍏冪礌鐨勬椂闂村悗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(exceptionDataArr[i].mvDataTime);
+ // 瓒呮爣娌圭儫娴撳害
+ fumeExceeding.push(exceptionDataArr[i].mvFumeConcentration2);
+ }
+ }
+ obj['dateList'] = dateList;
+ obj['fumeExceeding'] = fumeExceeding;
+ return obj;
+ },
+
+ // 鍙傛暟锛氬姞涓婂墠鍚庡尯闂寸殑寮傚父鏁版嵁锛屾椂闂村瓧绗︿覆
+ // 鍔熻兘锛氬垽鏂璬ata涓槸鍚︽湁璇ユ棩鏈熸椂闂达紝瀛樺湪杩斿洖璇ユ椂闂村搴旂殑娴撳害鍊硷紝鍚﹀垯杩斿洖-1
+ findTimeInExceptionData(data, time) {
+ for (let i = 0; i < data.length; i++) {
+ if (data[i] == null) {
+ continue;
+ }
+ if (data[i]['mvDataTime'] == time) {
+ return data[i]['mvFumeConcentration2'];
+ }
+ }
+ return -1;
+ },
+ // 鍙傛暟:鍓嶅尯闂寸殑寮�濮嬫椂闂达紝 鍚庡尯闂寸殑缁撴潫鏃堕棿, 鍔犱笂鍓嶅悗鍖洪棿鐨勬�绘椂闂存鐨勫紓甯告暟鎹殑瀵硅薄鏁扮粍
+ // 鍔熻兘锛氭牴鎹紑濮嬪拰缁撴潫鏃堕棿,杩斿洖浠�10鍒嗛挓涓洪棿闅旂殑鏃堕棿鍜屽搴旂殑鍊�
+ keepContinuousByEachTenMinutes(
+ intervalStarTime,
+ intervalEndTime,
+ headAndTailExceptionData
+ ) {
+ let xAxis = [];
+ let yAxis = [];
+ let obj = {};
+ let current = intervalStarTime;
+ let tail = dayjs(intervalEndTime)
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ while (current != tail) {
+ let value = this.findTimeInExceptionData(
+ headAndTailExceptionData,
+ current
);
- console.log(
- '渚涚數缁撴潫',
- this.displayData[this.selectedRowIndex].endTime
- );
- // 寰�鍓�30鍒嗛挓
- const before30MinBegin = dayjs(this.abnormalBt)
- .subtract(30, 'minute')
- .format('YYYY-MM-DD HH:mm:ss');
- // 鍚庝竴娈电殑寮�濮嬫椂闂�
- const after10MinBegin = dayjs(this.abnormalEt)
+ if (value != -1) {
+ xAxis.push(current);
+ yAxis.push(value);
+ } else {
+ xAxis.push(current);
+ yAxis.push(null);
+ }
+ current = dayjs(current)
.add(10, 'minute')
.format('YYYY-MM-DD HH:mm:ss');
- // 寰�鍚�40鍒嗛挓
- const after40MinEnd = dayjs(this.abnormalEt)
- .add(40, 'minute')
- .format('YYYY-MM-DD HH:mm:ss');
-
- let paramsBefore = {
- devId: this.displayData[this.selectedRowIndex].devId,
- beginTime: before30MinBegin,
- endTime: this.displayData[this.selectedRowIndex].beginTime
- };
- let paramsAfter = {
- devId: this.displayData[this.selectedRowIndex].devId,
- beginTime: after10MinBegin,
- endTime: after40MinEnd
- };
- // 璇锋眰鍓嶅崐娈�
- axiosInstance
- .get('http://localhost:8080/fume/history', { params: paramsBefore })
- .then((result) => {
- this.beforeData = result.data.data;
- });
-
- // 璇锋眰鍚庡崐娈�
- axiosInstance
- .get('http://localhost:8080/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.abnormalTimeTenMinute = []
- this.isAbnormal = false;
- // x杞存棩鏈熸椂闂�
- let dateList = [];
- // y杞� 瓒呮爣娌圭儫娴撳害
- let fumeExceeding = [];
- this.exceedingData.forEach((item) => {
- //x杞存棩鏈�
- dateList.push(item.mvDataTime);
- // 瓒呮爣娌圭儫娴撳害
- fumeExceeding.push(item.mvFumeConcentration2);
- });
- // 瀛樻斁璇ユ椂闂存姣忛殧鍗佸垎閽熶竴娆＄殑鏃堕棿鐐�
- 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);
+ obj['xAxis'] = xAxis;
+ obj['yAxis'] = yAxis;
+ return obj;
+ },
+
+ // 鍙傛暟锛氳秴鏍囨暟鎹墠闈㈠尯闂寸殑鏁版嵁
+ // 鍔熻兘锛氳繑鍥為櫎鍘绘渶鍚庝竴涓厓绱犵殑鏁扮粍
+ removeLastItemOfBeforeData(beforeDataOfExceeding) {
+ let tempList = [];
+ if (beforeDataOfExceeding.length == 1) {
+ return tempList;
+ } else {
+ for (let i = 0; i < beforeDataOfExceeding.length - 1; i++) {
+ tempList.push({ ...beforeDataOfExceeding[i] });
}
- // 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
- },
+ return tempList;
+ }
+ },
+
+ // 璁剧疆option
+ // 鍙傛暟锛歺杞存椂闂达紝 y杞存补鐑熸祿搴︼紝 寮傚父绫诲埆(0浠ｈ〃瓒呮爣锛�1浠ｈ〃渚涚數寮傚父鍜屾帀绾�), 寮傚父寮�濮嬫椂闂达紝寮傚父缁撴潫鏃堕棿锛屽紓甯稿紑濮嬫椂闂村湪鏁翠釜鍖洪棿鐨勭储寮曚笅鏍囷紝寮傚父缁撴潫鏃堕棿鍦ㄦ暣涓尯闂寸殑绱㈠紩涓嬫爣
+ setOption(
+ xData,
+ yData,
+ exceptionCategory,
+ exceptionBeginTime,
+ exceptionEndTime,
+ beginIndex,
+ endIndex
+ ) {
+ this.option = {};
+ // 瓒呮爣
+ if (exceptionCategory == 0) {
+ this.option = {
tooltip: {},
- // legend: {
- // data: ['娌圭儫瓒呮爣鏁版嵁']
- // },
toolbox: {
// 宸ュ叿鏍�
feature: {
- dataZoom: {
- // 鍖哄煙缂╂斁
- yAxisIndex: 'none'
- },
+ // dataZoom: {
+ // yAxisIndex: 'none'
+ // },
// 淇濆瓨涓哄浘鐗�
saveAsImage: {}
}
},
xAxis: {
- // type: 'time',
- // 鍦ㄧ被鐩酱锛坱ype: 'category'锛変腑鏈夋晥銆�
- data: xAxisData1,
- name: '鏃堕棿'
+ type: 'category',
+ data: xData,
+ name: '鏃堕棿',
+ axisLabel: {
+ formatter: function (value) {
+ return value.slice(11, -3);
+ }
+ }
},
yAxis: {
type: 'value',
- axisLabel: {
- show: true,
- interval: 'auto'
- // formatter:'{value} %'
- },
name: 'mg/m鲁'
},
series: [
{
- name: '娌圭儫瓒呮爣鏁版嵁',
+ name: '娌圭儫娴撳害',
type: 'line',
- data: fumeExceeding,
+ data: yData.map((item) => {
+ if (item >= 1) {
+ return {
+ value: item,
+ itemStyle: {
+ color: 'red'
+ }
+ };
+ }
+ return item;
+ }),
+ // 鍙樻崲鎸囧畾鏃堕棿鍖洪棿鐨勮儗鏅鑹�
+ markArea: {
+ itemStyle: {
+ color: 'rgba(255, 173, 177, 0.4)'
+ },
+ data: [
+ [
+ {
+ name: '瓒呮爣鏃堕棿娈�',
+ xAxis: exceptionBeginTime
+ },
+ {
+ xAxis: exceptionEndTime
+ }
+ ]
+ ]
+ },
markLine: {
+ symbol: 'none',
itemStyle: {
// 鍩虹嚎鍏叡鏍峰紡
normal: {
lineStyle: {
- // 'solid'瀹炵嚎锛�'dashed'铏氱嚎锛�'dotted'鐐圭嚎
type: 'dashed'
},
label: {
show: true,
position: 'end',
- formatter: '{b}{c}'
+ formatter: '{b}'
}
}
},
data: [
{
- name: '棰勮',
+ name: '瓒呮爣',
type: 'average',
yAxis: 1,
lineStyle: {
- color: '#ff0000'
+ // color: '#ff0000'
+ color: 'red'
}
}
]
}
}
- ]
- });
+ ],
+ // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊
+ visualMap: {
+ show: false,
+ dimension: 0,
+ pieces: [
+ {
+ lte: beginIndex,
+ color: 'green'
+ },
+ {
+ gt: beginIndex,
+ lte: endIndex,
+ color: 'red'
+ },
+ {
+ gt: endIndex,
+ lte: xData.length - 1,
+ color: 'green'
+ }
+ ]
+ }
+ };
}
+ // 渚涚數寮傚父鍜屾帀绾�
+ else if (exceptionCategory == 1) {
+ this.option = {
+ tooltip: {},
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ // dataZoom: {
+ // // 鍖哄煙缂╂斁
+ // yAxisIndex: 'none'
+ // },
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: xData,
+ name: '鏃堕棿',
+ axisLabel: {
+ formatter: function (value) {
+ return value.slice(11, -3);
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+ name: 'mg/m鲁'
+ },
+ series: [
+ {
+ name: '娌圭儫鏁版嵁',
+ type: 'line',
+ data: yData,
+ markLine: {
+ silent: true,
+ data: [
+ // 鏍囨敞鏃犳暟鎹椂闂存鐨勬晥鏋滐紝灏嗚繖涓椂闂存鐨勬暟杞撮儴鍒嗗彉涓虹孩鑹�
+ {
+ name: '鏃犳暟鎹�',
+ xAxis: exceptionBeginTime
+ },
+ {
+ xAxis: exceptionEndTime
+ }
+ ],
+ lineStyle: {
+ color: 'red'
+ }
+ }
+ }
+ ]
+ };
+ }
+ this.banTouch = 0
},
+
+ // 鍔熻兘锛氱偣鍑� 鈥樻煡鐪嬭鎯呪�欙紝 鈥樹笅涓�鏉♀�欐寜閽椂浼� 鍏堥�昏緫璁＄畻銆傛渶鍚庡睍绀哄浘褰�
+ drawChartTest() {
+ this.beforeData = [];
+ this.afterData = [];
+ this.allExceptionTimeData = [];
+ //寮傚父鐨勫紑濮嬫椂闂� 缁撴潫鏃堕棿
+ let exceptionBeginTime = this.rowBeginTime;
+ let exceptionEndTime = this.rowEndTime;
+
+ // beforeAndAfterTime[0]:鍓�30鍒嗛挓鐨勬椂闂寸偣
+ // beforeAndAfterTime[1]:鍚�10鍒嗛挓鐨勬椂闂寸偣
+ // beforeAndAfterTime[2]:鍚�40鍒嗛挓鐨勬椂闂寸偣
+ let beforeAndAfterTime = this.before30AndAfter40(
+ exceptionBeginTime,
+ exceptionEndTime
+ );
+
+ // 鏋勯�犲紓甯告椂闂村墠鐨勫尯闂存暟鎹姹傚弬鏁�
+ let paramsBefore = this.requestGetParms(
+ this.displayData[this.selectedRowIndex].devId,
+ beforeAndAfterTime[0],
+ this.displayData[this.selectedRowIndex].beginTime
+ );
+
+ // 鏋勯�犲紓甯告椂闂村悗鐨勫尯闂存暟鎹姹傚弬鏁�
+ let paramsAfter = this.requestGetParms(
+ this.displayData[this.selectedRowIndex].devId,
+ beforeAndAfterTime[1],
+ beforeAndAfterTime[2]
+ );
+
+ // 鎶樼嚎鍥惧姞杞戒腑鏁堟灉
+ this.chartLoading = true
+ // 璇锋眰鍓嶅崐娈�
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsBefore })
+ .then((result1) => {
+ this.beforeData = result1.data.data;
+ // 璇锋眰鍚庡崐娈�
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsAfter })
+ .then((result2) => {
+ this.afterData = result2.data.data;
+ //淇濆瓨寮傚父鍖洪棿鐨勫��
+ let tempArr = [];
+ // 淇濆瓨寮傚父鍖洪棿鍓嶅悗鐨勫��
+ let before = [];
+ let after = [];
+
+ // 鍒ゆ柇鏄惁鏄緵鐢靛紓甯告垨鎺夌嚎
+ if (
+ this.rowExceptionType === '1' ||
+ this.rowExceptionType === '2'
+ ) {
+ // 閲嶆瀯琛ㄦ牸 缂哄け寮傚父鏁版嵁鑷姩濉厖
+ this.setExceptionData();
+
+ //鐩稿樊鍑犱釜10鍒嗛挓
+ const TenMinuteNum = this.diffTenMinutesNum(
+ exceptionBeginTime,
+ exceptionEndTime
+ );
+ //鐢╪ull濉厖涓紓甯告棤鏁版嵁鐨勬椂闂�
+ for (let i = 0; i < TenMinuteNum; i++) {
+ tempArr.push(null);
+ }
+ before = this.shallowCopyList(this.beforeData);
+
+ after = this.shallowCopyList(this.afterData);
+ // after = this.afterData
+ }
+ // 瓒呮爣
+ else {
+ let beforeTemp = this.removeLastItemOfBeforeData(
+ this.beforeData
+ );
+ // 鍓嶅悗鍖洪棿鍙樉绀鸿窛绂昏秴鏍囧尯闂存椂闂存渶杩戠殑娴撳害灏忎簬1鐨勬椂闂寸偣
+ for (let i = beforeTemp.length - 1; i >= 0; i--) {
+ if (beforeTemp[i].mvFumeConcentration2 >= 1) {
+ break;
+ }
+ if (beforeTemp[i].mvFumeConcentration2 < 1) {
+ before.unshift(this.beforeData[i]);
+ }
+ }
+
+ for (let i = 0; i < this.afterData.length; i++) {
+ if (this.afterData[i].mvFumeConcentration2 >= 1) {
+ break;
+ }
+ if (this.afterData[i].mvFumeConcentration2 < 1) {
+ after.unshift(this.afterData[i]);
+ }
+ }
+ tempArr = this.shallowCopyList(this.exceedingData);
+ }
+
+ // 灏嗗墠鍚庡尯闂存暟鎹� 涓� 寮傚父鍖洪棿鏁版嵁 鍚堝苟
+ this.allExceptionTimeData = [...before, ...tempArr, ...after];
+ // x杞存棩鏈熸椂闂�
+ let dateList = [];
+ // y杞� 瓒呮爣娌圭儫娴撳害
+ let fumeExceeding = [];
+ let timeAndValue = {};
+
+ // 浠庢坊鍔犱簡棣栦綅鍖洪棿鐨勫紑濮嬪拰缁撴潫鏃堕棿杩涜閬嶅巻 淇濊瘉鏃堕棿浠�10鍒嗛挓涓洪棿闅�
+ timeAndValue = this.keepContinuousByEachTenMinutes(
+ beforeAndAfterTime[0],
+ beforeAndAfterTime[2],
+ this.allExceptionTimeData
+ );
+
+ dateList = timeAndValue['xAxis'];
+ fumeExceeding = timeAndValue['yAxis'];
+
+ // 鎻愬彇寮傚父璧峰鏃堕棿鐐瑰湪鏁翠釜鍖洪棿鍐呯殑鏁版嵁绱㈠紩
+ let startIndex = dateList.findIndex(
+ (item) => item === exceptionBeginTime
+ );
+ let endIndex = dateList.findIndex(
+ (item) => item === exceptionEndTime
+ );
+
+ // 渚涚數寮傚父鍜屾帀绾挎儏鍐� 瓒呮爣鎯呭喌
+ if (
+ this.rowExceptionType === '1' ||
+ this.rowExceptionType === '2'
+ ) {
+ this.setOption(
+ dateList,
+ fumeExceeding,
+ 1,
+ exceptionBeginTime,
+ exceptionEndTime,
+ startIndex,
+ endIndex
+ );
+ } else {
+ // 瓒呮爣鎯呭喌
+ this.setOption(
+ dateList,
+ fumeExceeding,
+ 0,
+ exceptionBeginTime,
+ exceptionEndTime,
+ startIndex,
+ endIndex
+ );
+ }
+ this.chartLoading = false
+ });
+ });
+ },
+
getDeviceInfo() {
// 绾ц仈涓嬫媺妗嗘暟鎹� 浠庢帴鍙ｄ腑鍔ㄦ�佽幏鍙�
- axiosInstance.get('/fume/device').then((result) => {
+ axiosInstanceInstance.get('/fume/device').then((result) => {
this.deviceInfo = result.data.data;
// 鑾峰彇鍒版�荤殑搴楅摵鏁伴噺
this.shopsTotal = result.data.data.length;
@@ -1193,7 +1525,6 @@
]
};
});
- console.log(this.optionsShop);
});
},
exportDom() {
@@ -1226,26 +1557,6 @@
// 灏唚orkbook杞负浜岃繘鍒秞lsx鏂囦欢骞朵笅杞�
XLSX.writeFile(wb, '鍒嗘瀽鏁版嵁.xlsx');
},
- // 鏌ヨ鍏ㄩ儴寮傚父琛ㄦ暟鎹�
- getAllData() {
- this.loading = true;
- axiosInstance.get('/fume/abnormal').then((result) => {
- this.abnormalData = result.data.data;
- this.total = this.abnormalData.length;
- // 榛樿鏄剧ず绗竴椤�
- this.handleCurrentChange(1);
- this.loading = false;
- });
-
- // 寰楀埌寮傚父琛ㄧ殑鏈�鏃╁拰鏈�鏅氭椂闂�
- setTimeout(() => {
- axiosInstance.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;
@@ -1257,7 +1568,7 @@
// 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙�
// 姣斿娌圭儫瓒呮爣瀵瑰簲鐨勬墍鏈夊簵閾哄悕绉板拰璁惧缂栧彿锛堝凡鍘婚櫎閲嶅鐨勫簵閾哄悕锛�
getShopNames() {
- axiosInstance
+ axiosInstanceInstance
.get('/fume/shopname', {
params: {
exceptionType: '0',
@@ -1267,10 +1578,8 @@
})
.then((result) => {
this.exception0 = result.data.data;
- console.log('寮傚父0', this.exception0);
- console.log('寮傚父0鏁伴噺', this.exception0.length);
});
- axiosInstance
+ axiosInstanceInstance
.get('/fume/shopname', {
params: {
exceptionType: '1',
@@ -1281,7 +1590,7 @@
.then((result) => {
this.exception1 = result.data.data;
});
- axiosInstance
+ axiosInstanceInstance
.get('/fume/shopname', {
params: {
exceptionType: '2',
@@ -1292,26 +1601,57 @@
.then((result) => {
this.exception2 = result.data.data;
});
+
+ /* 寮傚父鏁伴噺 */
+ axiosInstanceInstance
+ .get('/fume/exceptionnum', {
+ params: {
+ exceptionType: '0',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception0Num = result.data.data;
+ });
+ axiosInstanceInstance
+ .get('/fume/exceptionnum', {
+ params: {
+ exceptionType: '1',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception1Num = result.data.data;
+ });
+ axiosInstanceInstance
+ .get('/fume/exceptionnum', {
+ params: {
+ exceptionType: '2',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception2Num = result.data.data;
+ });
},
+
// 椤甸潰鍔犺浇鏃堕粯璁ゅ睍绀�7澶╁紓甯歌〃鏁版嵁
getRecentSevenDays() {
// 缁欑骇鑱旈�夋嫨鍣ㄨ缃粯璁ょ殑閫夋嫨椤�
this.devId = ['浠樺皬濮愬湪鎴愰兘', 'qinshi_31010320210010'];
- // 缁欐椂闂撮�夋嫨鍣ㄨ缃粯璁ゆ椂闂�
- // this.beginTime = dayjs()
- // .subtract(3, 'week')
- // .format('YYYY-MM-DD HH:mm:ss');
- // this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
-
- // this.currentDateTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
- // this.oneWeekAgoDateTime = dayjs().subtract(1,'week').format('YYYY-MM-DD HH:mm:ss')
- console.log(this.currentDateTime, this.oneWeekAgoDateTime);
let params = {};
params['beginTime'] = this.beginTime;
params['endTime'] = this.endTime;
- axiosInstance
- .get('/fume/abnormalone', { params: params })
+ axiosInstanceInstance
+ .get('/fume/abnormalthree', { params: params })
.then((response) => {
+ if (response.data.data.length == 0) {
+ ElMessage('璇ユ椂娈垫棤鏁版嵁');
+ return;
+ }
// 淇濆瓨杩斿洖鐨�
this.abnormalData = response.data.data;
// 鍒嗛〉
@@ -1321,32 +1661,17 @@
this.loading = false;
});
}
- },
- 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;
- border: 1px;
- height: 815px;
+
+.header-container {
+ display: flex;
+ margin-left: 20px;
+ /* flex-wrap: wrap;
+ align-items: center; */
}
.ellipsis {
white-space: nowrap;
@@ -1368,18 +1693,6 @@
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;
}
@@ -1389,8 +1702,6 @@
/* 寮傚父鍒嗘瀽鏁版嵁涓庢寜閽� */
.exception-container {
display: flex;
- /* direction: column; */
- /* flex-grow: 2,1; */
}
.example-showcase .el-loading-mask {
z-index: 9;
@@ -1408,32 +1719,53 @@
color: var(--el-color-primary);
}
.collapse-header {
+ margin-left: 5px;
font-size: 18px;
- color: burlywood;
}
.collapse-header-text {
- margin-left: 60px;
- font-size: 16px;
- color: blue;
+ margin-top: 5px;
+ font-size: 14px;
+ color: gray;
}
-/* .el-dialog {
- height: 70%;
-} */
.box-card-label {
- font-size: 17px;
+ font-size: 14px;
+ white-space: nowrap;
}
+
+.right-text {
+ /* float :right; */
+ /* text-align: right; */
+ margin-left:80px;
+}
+:deep().el-card {
+ border-radius: 9px;
+}
+
/* 鈥樻煡鐪嬭鎯呪�� 鐨勫脊鍑烘楂樺害璋冩暣 */
:deep().el-dialog {
height: 98%;
/* 涓嶅嚭鐜版粴鍔ㄦ潯 */
- overflow-y: hidden
+ overflow-y: hidden;
+ border-radius: 9px;
+}
+.table-page {
+ margin-left: 20px;
}
+.table-text {
+ font-size: 18px;
+ margin: 5px 0px 10px 20px;
+}
+.text-blank {
+ margin-right: 10px;
+ color: #000000;
+}
/* 搴楅摵鍚嶉�夋嫨鏂囨湰 */
.describe-info {
margin-top: 5px;
font-weight: bold;
+ white-space: nowrap;
}
/* 鏃堕棿閫夋嫨鏂囨湰 */
.describe-time-text {
@@ -1442,15 +1774,6 @@
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 +1782,50 @@
.button_info.el-button_inner {
text-align: left;
}
-.box-card {
- height: 205px;
+.el-collapse {
+ margin-left: 20px;
}
+:deep().el-collapse .el-collapse-item__content {
+ padding-bottom: 0px;
+}
+.box-card {
+ height: 190px;
+}
+
+.sub-box-card {
+ height: 100px;
+ border: 0px;
+}
+
.mx-1 {
margin-bottom: 0px;
}
+.dialog-button-position {
+ display: flex;
+ justify-content: right;
+ margin-bottom: 10px;
+}
+
+:deep().el-table__row .exceeding-row{
+ background-color: #F53F3F;
+}
+:deep().el-table__row .abnormal-power-supply{
+ background-color: #FDF4BF;
+}
+:deep().el-table__row .disconnect{
+ background-color: #F7BA1E;
+}
+
+
+.el-table {
+ color: #000000;
+}
+
+
+/* 琛ㄦ牸涓殑鎸夐挳瀹藉害閾烘弧 */
+.table-button {
+ width: 100%;
+}
</style>
+
--
Gitblit v1.9.3