From bab83405c39ae9ab8b6569ca29b1e9a6a3b04327 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期二, 08 八月 2023 09:50:10 +0800
Subject: [PATCH] 油烟监测 vue代码
---
src/test/TestNoData.vue | 1626 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
src/components/layout/AppAside.vue | 27
src/router/index.ts | 5
3 files changed, 1,607 insertions(+), 51 deletions(-)
diff --git a/src/components/layout/AppAside.vue b/src/components/layout/AppAside.vue
index a23db30..b3f3a00 100644
--- a/src/components/layout/AppAside.vue
+++ b/src/components/layout/AppAside.vue
@@ -8,20 +8,7 @@
menuHeight: '600px',
isCollapseAside: isCollapse,
selected: selectedName,
- // optionClick: [
- // '鍘嗗彶鏁版嵁',
- // '寮傚父鍒嗘瀽',
- // '瀹炴椂鐩戞帶',
- // '娌圭儫鏁版嵁',
- // '缁熻鍒嗘瀽',
- // '缁熻鏁版嵁',
- // '娌圭儫娴撳害鏃ユ暟鎹�',
- // '鐩戞祴璁惧鍦ㄧ嚎鐜�',
- // '鍑�鍖栧櫒寮�鍚巼',
- // '娌圭儫鏃舵瓒呮爣鐜�',
- // '娌圭儫娴撳害鍧囧��',
- // '鑾峰彇鏁版嵁'
- // ],
+
optionClick: [
'瀹炴椂鐩戞帶',
'寮傚父鍒嗘瀽',
@@ -54,7 +41,8 @@
<el-aside>
<!-- text-color="#fff" -->
<el-menu
- background-color="#545c64"
+ background-color="#0DA5AA"
+ active-text-color="#F77234"
class="el-menu-vertical-demo"
default-active="2"
@open="handleOpen"
@@ -229,15 +217,16 @@
<style lang="scss" scoped>
.el-aside {
- background-color: #545c64;
+ // background-color: #545c64;
+ background-color: #0DA5AA;
height: 100vh;
- // background-color: rgb(41,45,62);
+
width: auto;
}
.el-menu {
// background-color: rgb(41,45,62);
- background-color: #545c64;
+ background-color: #0DA5AA;
width: 220px;
border-right: none;
@@ -272,7 +261,7 @@
// background-color: rgb(41,45,62);
// }
* {
- color: white;
+ color: black;
}
.slot-lable {
color: bisque;
diff --git a/src/router/index.ts b/src/router/index.ts
index 9eb7b67..f387d8e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -136,11 +136,6 @@
redirect:'/login'
},
- {
- path: '/sfc',
- component: () => import('@/sfc/MainTest.vue')
- },
-
]
})
diff --git a/src/test/TestNoData.vue b/src/test/TestNoData.vue
index b641644..959c747 100644
--- a/src/test/TestNoData.vue
+++ b/src/test/TestNoData.vue
@@ -1,34 +1,1606 @@
-<script >
-import {store} from '../utils/status.js'
-import {useCount} from '../utils/status1.js'
- export default {
- data() {
- return{
- store,
-
- localCount:0
- }
- },
- mounted(){
- this.localCount = useCount()
- },
- methods: {
-
- }
-}
-</script>
-
<template>
- <div>
- <el-button @click="store.increment()">澧炲姞</el-button>
- <div>count:{{ store.count }}</div>
+ <div class="exception-root-container">
+ <!-- 鑿滃崟璇绘爣棰� -->
+ <div ref="h1" class="header-container">
+ <span class="describe-info">搴楅摵鍚嶉�夋嫨锛�</span>
+ <!-- 搴楅摵鍚� 绾ц仈 -->
+ <ShopNameAndID
+ @submit-id="(n) => (deviceId[1] = n)"
+ :devId="鍏ㄩ儴"
+ ></ShopNameAndID>
- <!-- <div>{{ globalCount.value }}</div> -->
- <div>{{ localCount.localCount }}</div>
+ <!-- 寮傚父绫诲瀷閫夋嫨 -->
+ <ExceptionType @submitExceptionType="(val) => (exceptionValue = val)">
+ </ExceptionType>
+ <!-- <div style="display: flex"> -->
+ <!-- <span class="describe-time-text">璧锋鏃堕棿锛�</span> -->
+ <!-- 鏃ユ湡鏃堕棿閫夋嫨鍣� -->
+ <TimeSelect @submit-time="giveTime"></TimeSelect>
+ <!-- </div> -->
+ </div>
+ <div ref="h2" style="display: flex; margin-top: 2px; justify-content: right">
+ <!-- <span class="collapse-header-text">
+ 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
+ > -->
+ <!-- 鍋氭垚琛ㄥ崟 -->
+ <el-button
+ type="primary"
+ plain
+ @click="showTable"
+ style="margin-left: 20px"
+ >鏌ヨ</el-button
+ >
+ <el-button
+ type="warning"
+ 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"
+ >
+ <i-ep-Download />
+ <!-- 瀵煎嚭涓篍xcel -->
+ </el-icon>
+ </el-tooltip>
+ </div>
+ <div style="display: flex; justify-content: right">
+ <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"
+ >
+ <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">
+ <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
+ >
+ </div>
+
+ <hr />
+ <div class="box-card-butcontainer">
+ <el-card class="sub-box-card">
+ <ExceptionText
+ v-for="(item,index) in exception0"
+ :key="item"
+ :devId="item.devId"
+ exception-value="0"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ @submit-exception-data="getAbnormalDataByClick"
+ >
+ {{ item.diName }}
+ <span v-if="index<exception0.length-1" class="text-blank"> , </span>
+ </ExceptionText>
+ </el-card>
+ </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">
+ <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
+ >
+ </div>
+
+ <hr />
+
+ <div>
+
+ <el-card class="sub-box-card">
+ <ExceptionText
+ v-for="(item,index) in exception1"
+ :key="item"
+ :devId="item.devId"
+ exception-value="1"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ @submit-exception-data="getAbnormalDataByClick"
+ >
+ {{ item.diName }}
+ <span v-if="index < exception1.length-1" class="text-blank"> , </span>
+ </ExceptionText>
+ </el-card>
+ </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">
+ <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
+ >
+ </div>
+ <hr />
+ <div>
+ <el-card class="sub-box-card">
+ <ExceptionText
+ v-for="(item,index) in exception2"
+ :key="item"
+ :devId="item.devId"
+ exception-value="2"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ @submit-exception-data="getAbnormalDataByClick"
+ >
+ {{ item.diName }}
+ <span v-if="index<exception2.length-1" class="text-blank"> , </span>
+ </ExceptionText>
+ </el-card>
+ </div>
+ </el-col>
+ </el-row>
+ </el-card>
+ </el-collapse-item>
+ </el-collapse>
+ <!-- <hr/>
+ <br> -->
+ <h4 class="table-text"> 寮傚父鏁版嵁</h4>
+ <el-card class="table-page" v-show="!isNoData">
+
+ <el-table
+ v-loading="loading"
+ :data="displayData"
+ style="width: 100%"
+ :row-class-name="tableRowClassName"
+ stripe
+ border
+ :height=tableHeight
+ >
+ <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>
+
+ <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-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>
+
+ <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>
+
+ <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 }}
+ <di style="margin-left: 40px">寮傚父绫诲瀷锛�</di>
+ <span v-if="rowExceptionType == '0'">娌圭儫鏁版嵁瓒呮爣</span>
+ <span v-else-if="rowExceptionType == '1'">渚涚數寮傚父</span>
+ <span v-else-if="rowExceptionType == '2'">鎺夌嚎</span>
+ <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>
+ </template>
+
+ <!-- 瓒呮爣鏁版嵁鏃� -->
+ <!-- 鎶樼嚎鍥� -->
+ <div
+ ref="chart"
+ style="
+ width: 100%;
+ height: 300px;
+ /* min-width: 100px; */
+ margin-bottom: 20px;
+ margin-left: 10px;
+ min-width: 350px;
+ "
+ ></div>
+
+ <!-- v-show="!isAbnormal" -->
+ <!-- 琛ㄦ牸 -->
+
+ <!-- -->
+ <div style="margin-top: 40px; margin-bottom: 5px; border: 1px">
+ <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-tag type="success" class="mx-1" effect="dark" round
+ ><span class="table-line-lable">寮傚父璁板綍锛� </span>
+ <span class="table-line-num">{{ exceptionTotal }}鏉�</span>
+ <span v-show="rowExceptionType === '1' || rowExceptionType === '2'">
+ (閫昏緫璁＄畻)</span
+ >
+ </el-tag>
+ <!-- <el-tag type="success" class="mx-1" effect="dark" round v-show="rowExceptionType === '1'"
+ ><span class="table-line-lable">琛ㄦ牸琛屾暟锛� </span>
+ <span class="table-line-num">{{ exceptionTotal }}</span></el-tag> -->
+ </el-dialog>
+ </div>
</div>
</template>
-<style lang="scss" scoped>
+<script>
-</style>
\ No newline at end of file
+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';
+
+const ShopNameAndID = defineAsyncComponent(() =>
+ import('../sfc/../sfc/ShopNameAndID.vue')
+);
+export default {
+
+ name: 'TablePage',
+ components: {
+ ExceptionType,
+ TimeSelect,
+ ShopNameAndID,
+ ExceptionText
+ },
+ data() {
+ return {
+
+ // table鍏冪礌
+ tableRef:null,
+ // 寮傚父琛ㄦ牸鏁版嵁
+ tableHeight:300,
+ // 绌烘暟鎹姸鎬�
+ isNoData: false,
+ // 寮瑰嚭妗嗕腑琛ㄦ牸鏉℃暟
+ exceptionTotal: 0,
+ // 鏃犳暟鎹椂鐨勬椂闂存暟缁勶紝鍏冪礌鐩稿樊10鍒嗛挓
+ // abnormalTimeTenMinute: [],
+ // 搴楅摵鎬绘暟
+ shopsTotal: 0,
+
+ // 鈥欎笂涓�鏉♀�樻寜閽槸鍚﹀彲浠ヨ鐐瑰嚮鐘舵��
+ isPreCantouch: false,
+ // 鈥欎笅涓�鏉♀�樻寜閽槸鍚﹀彲浠ヨ鐐瑰嚮鐘舵��
+ isNextCantouch: false,
+
+ // 瀵硅瘽妗嗘槸鍚﹀睍绀�
+ centerDialogVisible: false,
+
+ // 鎶藉眽澶撮儴淇℃伅
+ // 鎶樼嚎鍥惧搴旂殑褰撳墠琛ㄦ牸琛屾暟鎹�
+ // 搴楅摵鍚�
+ rowShopName: '',
+ // 寮傚父绫诲瀷
+ rowExceptionType: '',
+ // 寮傚父寮�濮嬫椂闂�
+ rowBeginTime: '',
+ // 寮傚父缁撴潫鏃堕棿
+ rowEndTime: '',
+ // 寮傚父鐨勮澶囩紪鍙�
+ rowMvStatCode: '',
+
+ // 琛ㄦ牸鐨勪竴琛屾暟鎹�
+ rowTable: [],
+ //鎷兼帴鐨勬墍鏈夋暟鎹�
+ allExceptionTimeData: [],
+ // 鏃犳暟鎹椂澧炲姞鐨勫墠30鍒嗛挓鏁版嵁
+ beforeData: [],
+ // 鏃犳暟鎹椂澧炲姞鐨勫悗40鍒嗛挓鏁版嵁
+ afterData: [],
+
+ // 鎶樼嚎鍥惧疄渚�
+ chart: null,
+ // -1琛ㄧず鏈�夋嫨琛ㄦ牸鐨勮
+ selectedRowIndex: -1,
+
+ // 榛樿閫夋嫨鐨勬姌鍙犻潰鏉跨紪鍙�
+ activeNames: ['1'],
+ // 寮傚父鏃剁殑琛ㄦ牸
+ abnormalTb: [],
+ // 寮傚父鐨勮捣姝㈡椂闂�
+ abnormalBt: '',
+ abnormalEt: '',
+ // 鏄惁灞曠ず鏃堕棿杞� 鍚�
+ isAbnormal: false,
+ // 淇濆瓨鐫�寮傚父绫诲瀷0瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿
+ exception0: [],
+ // 淇濆瓨鐫�寮傚父绫诲瀷1瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿
+ exception1: [],
+ // 淇濆瓨鐫�寮傚父绫诲瀷2瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿
+ exception2: [],
+ // 鍔犺浇鍔ㄧ敾
+ loading: false,
+ // 鎶藉眽鍔犺浇鍔ㄧ敾
+ loadingDrawer: true,
+ // 鍒嗛〉灞曠ず鏁版嵁
+ // 姣忛〉灞曠ず鐨勬暟鎹�
+ displayData: [],
+ // 瀛樻斁鍚庣杩斿洖鐨刯son鏁版嵁
+ jsonData: [],
+ // 鍒嗛〉鐨勮捣濮嬬储寮�
+ startIndex: 0,
+ // 褰撳墠椤�
+ currentPage: 1,
+ // 姣忛〉鏉℃暟
+ pageSize: 10,
+ total: 0,
+ // 閫夋嫨搴楅摵鍚�
+ deviceId: [],
+ deviceInfo: [],
+ // 鏃堕棿閫夋嫨鍣ㄥ紑濮嬫椂闂�
+ beginTime: '',
+ // 鏃堕棿閫夋嫨鍣ㄧ粨鏉熸椂闂�
+ endTime: '',
+ // 寮傚父琛ㄦ暟鎹�
+ abnormalData: [],
+ // 璇ユ椂娈电殑璇︾粏瓒呮爣鏁版嵁
+ exceedingData: [],
+ drawerVisible: false,
+ // 琛ㄦ牸鐨勪竴琛屾暟鎹�
+ drawerData: {},
+ // 鎶藉眽鏂瑰悜锛屼粠鍙冲悜宸︽墦寮�
+ drawerDirection: 'rtl',
+ optionsTime: [
+ // 鏃堕棿棰楃矑搴�
+ {
+ value: '10',
+ label: '10鍒嗛挓鏁版嵁',
+ disabled: true
+ }
+ ],
+ // 搴楅摵鍚� 绾ц仈閫夋嫨鍣�
+ optionsShop: [],
+ // 寮傚父绫诲瀷閫夋嫨鍣�
+ exceptionValue: [],
+ exceptionOptions: [
+ {
+ value: '0',
+ label: '娌圭儫娴撳害瓒呮爣'
+ },
+ {
+ value: '1',
+ label: '鐤戜技渚涚數寮傚父'
+ },
+ {
+ value: '2',
+ label: '鎺夌嚎'
+ }
+ ]
+ };
+ },
+ // 鐩戝惉 鍒ゆ柇鎸夐挳鏄惁鍙偣鍑�
+ watch: {
+ selectedRowIndex(newVaue) {
+ // 澶勪簬琛ㄦ牸鐨勭涓�鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
+ if (newVaue === 0) {
+ this.isPreCantouch = true;
+ //鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
+ if (this.isNextCantouch == true) {
+ this.isNextCantouch = false;
+ }
+ }
+ // 澶勪簬琛ㄦ牸鏈�鍚庝竴鎻愬摝鍟婃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣
+ else if (newVaue === this.displayData.length - 1) {
+ this.isNextCantouch = true;
+ //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
+ if (this.isPreCantouch == true) {
+ this.isPreCantouch = false;
+ }
+ }
+ // 澶勪簬琛ㄦ牸鐨勪腑闂磋 灏嗘寜閽缃负鍙偣鍑荤姸鎬�
+ else {
+ this.isPreCantouch = false;
+ this.isNextCantouch = false;
+ }
+ },
+
+ // 褰撻�夋嫨鐨勬椂闂村彂鐢熷彉鍖栨椂锛屽紓甯稿垎鏋愰儴鍒嗙殑寮傚父搴楅摵鏁伴噺鍚屾鍙樺寲
+ beginTime() {
+ this.getShopNames();
+ },
+ endTime() {
+ this.getShopNames();
+ }
+ },
+
+ mounted() {
+
+ // 浠庢帴鍙ｈ幏鍙栧簵閾哄悕绉� 缁欑骇鑱斾笅鎷夋
+ this.getDeviceInfo();
+
+ // 灞曠ず鏈�杩�7澶╂暟鎹�
+ this.getRecentSevenDays();
+
+ // 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� 娓叉煋寮傚父鍒嗘瀽閮ㄥ垎瀵瑰簲鐨勫簵閾哄悕
+ this.getShopNames();
+ window.addEventListener('resize', this.updateChart);
+ // this.tableHeight = this.calcTableHeight()
+
+ },
+ methods: {
+ // calcTableHeight() {
+ // const h1 = this.$refs.h1.offsetHeight;
+ // const h2 = this.$refs.h2.offsetHeight;
+ // const h3 = this.$refs.h3.$el.offsetHeight;
+ // const h4 = this.$refs.h4.$el.offsetHeight;
+ // // return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`;
+ // return `calc(100vh - ${h1}px - ${h2}px- ${h3}px - ${h4}px - 60px - var(--el-main-padding) * 2)`;
+ // },
+
+ warn() {
+ alert('鐐瑰嚮浜�');
+ },
+ // 鍒氭墦寮�鍗＄墖鏃剁涓�涓浘褰笉浼氳嚜鍔ㄤ几缂� 褰撶偣鍑讳笂/涓嬩竴鏉℃椂浼氳嚜鍔ㄤ几缂�
+ // 鍥惧舰鍝嶅簲寮忓彉鍖�
+ updateChart() {
+ this.$nextTick(() => {
+ if (this.chart) {
+ this.chart.resize();
+ }
+ });
+ },
+ // 浠庢椂闂撮�夋嫨鍣ㄧ粍浠舵嬁鍒板紑濮嬪拰缁撴潫鏃堕棿
+ giveTime(val) {
+ //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
+ this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
+ 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
+ descTenTime(begin, end) {
+ // 淇濈暀缁撴灉
+ let time = [];
+ let temp = dayjs(begin).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss');
+ while (temp != end) {
+ time.push(temp);
+ temp = dayjs(temp).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss');
+ }
+ // 鍔犱笂寮傚父鐨勭粨鏉熸椂闂�
+ time.push(temp);
+
+ return time;
+ },
+
+ // 淇濆瓨褰撳墠閫夋嫨鐨勮鎵�鏈変俊鎭�
+ setinfo(index) {
+ this.rowShopName = this.displayData[index].diName;
+ this.rowExceptionType = this.displayData[index].exceptionType;
+ 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);
+ },
+ // 渚涚數寮傚父鍜屾帀绾挎椂鐨勮〃鏍兼暟鎹�
+ setExceptionData() {
+ // 娓呯┖锛岃鍘嗗彶鏁版嵁鏉℃暟闅愯棌锛屼娇鏃犳暟鎹殑鏍囩鏉℃暟鏄剧ず鍑烘潵
+ // this.exceedingData=[]
+ // 娓呯┖涓婃鐨勬暟鎹紝闃叉褰卞搷鏈鐨勫睍绀烘暟
+ // this.abnormalTimeTenMinute = [];
+ // 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊10鍒嗛挓
+ const abnormalTimeTenMinute = this.descTenTime(
+ this.rowBeginTime,
+ this.rowEndTime
+ );
+ for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
+ this.exceedingData.push({
+ mvStatCode: this.rowMvStatCode,
+ diName: this.rowShopName,
+ mvDataTime: abnormalTimeTenMinute[i],
+ mvFumeConcentration2: ''
+ });
+ }
+ // 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟
+ this.exceptionTotal = abnormalTimeTenMinute.length;
+ },
+ // 鐐瑰嚮琛ㄦ牸鐨勮鏃�
+ selectTableRow(row) {
+ // 鑾峰彇褰撳墠琛岀殑绱㈠紩
+ 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;
+ }
+
+ axiosInstanceInstance
+ .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
+
+ //寰楀埌涓婁竴琛屾暟鎹储寮�
+ 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;
+ }
+ 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;
+ });
+ }
+ //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
+ else {
+ console.log(null);
+ // 璀﹀憡
+ // ElMessage.info('宸叉槸璇ラ〉鏈�鍚庝竴鏉℃暟鎹�');
+
+ // 鈥欎笅涓�鏉♀�樼殑鎸夐挳涓嶅彲鐐瑰嚮
+ // this.isNextCantouch = true
+ }
+ },
+
+ // 鈥樻煡鐪嬭鎯呪�� 寮瑰嚭妗嗛儴鍒�
+ showDrawer(row) {
+ // 璁＄畻褰撳墠琛岀殑绱㈠紩
+ 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) {
+ params['devId'] = this.drawerData.devId;
+ }
+ if (this.drawerData.beginTime) {
+ params['beginTime'] = this.drawerData.beginTime;
+ }
+ if (this.drawerData.endTime) {
+ params['endTime'] = this.drawerData.endTime;
+ }
+ axiosInstanceInstance
+ .get('/fume/exceed', { params: params })
+ .then((response) => {
+ // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
+ this.exceedingData = response.data.data;
+ this.loadingDrawer = !this.loadingDrawer;
+ // this.total = this.exceedingData.length;
+ // this.handleCurrentChange(1); // 榛樿鏄剧ず绗竴椤�
+ console.log('杩斿洖鐨勫紓甯告暟鎹负锛�');
+ console.log(this.exceedingData);
+ this.drawChart();
+ this.exceptionTotal = this.exceedingData.length;
+ });
+ },
+
+ // 鐢ㄦ埛鏍规嵁杈撳叆鐨勬潯浠舵煡璇�
+ showTable() {
+ if (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;
+ }
+ if (this.endTime) {
+ params['endTime'] = this.endTime;
+ }
+ this.loading = true;
+ axiosInstanceInstance
+ .get('/fume/abnormalthree', { params: params })
+ .then((response) => {
+ this.abnormalData = response.data.data;
+ this.total = this.abnormalData.length;
+ this.loading = false;
+ if (response.data.data.length == 0) {
+ alert('璇ユ椂娈垫棤鏁版嵁');
+ this.isNoData = true;
+ return;
+ }
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false;
+ this.handleCurrentChange(1);
+ console.log('杩斿洖鐨勬暟鎹�', this.abnormalData);
+ console.log('闀垮害', response.data.data.total);
+ });
+ },
+ handleSizeChange(val) {
+ this.pageSize = val;
+ // 鏀瑰彉姣忛〉鏄剧ず鏁扮洰鏃惰烦鍒扮涓�椤�
+ 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);
+ },
+
+ //鐩稿樊澶氬皯涓崄鍒嗛挓 璁＄畻涓苟涓嶅寘鎷紑濮嬫椂闂达紝浣嗗寘鎷粨鏉熸椂闂淬��
+ diffTenMinutesNum(beginNormal, endNormal) {
+ // 灏嗗紑濮嬫椂闂村拰缁撴潫鏃堕棿杞崲涓篸ayjs瀵硅薄
+ const start = dayjs(beginNormal);
+ const end = dayjs(endNormal);
+
+ // 璁＄畻缁撴潫鏃堕棿鍑忓幓寮�濮嬫椂闂翠腑闂寸浉宸灏戜釜鍗佸垎閽�
+ 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);
+ // $('#ModalGrade').on('shown.bs.modal', function(){
+ // this.chart.resize()
+ // })
+ this.chart.setOption({
+ title: {
+ // text: '娌圭儫瓒呮爣鏁版嵁',
+ // left: 'center'
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ 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'
+ }
+ }
+ }
+ ]
+ });
+ },
+
+ // 灞曠ず鎶樼嚎鍥�
+ drawChart() {
+ // 褰撳嚭鐜颁緵鐢靛紓甯稿拰鎺夌嚎鏃讹紝鏃舵鏃犳暟鎹� 鍒欐嫾鎺ュ墠鍚庢鏁版嵁
+ if (
+ this.exceedingData.length === 0 ||
+ this.rowExceptionType === '1' ||
+ this.rowExceptionType === '2'
+ ) {
+ // 閲嶆瀯琛ㄦ牸 鎵嬪姩濉厖
+ this.setExceptionData();
+
+ // 灞曠ず
+ this.isAbnormal = true;
+ // 鎷兼帴鏃ユ湡
+ //寮傚父鐨勫紑濮嬫椂闂�
+ this.abnormalBt = this.displayData[this.selectedRowIndex].beginTime;
+ //寮傚父鐨勭粨鏉熸椂闂�
+ this.abnormalEt = this.displayData[this.selectedRowIndex].endTime;
+ console.log(
+ '渚涚數寮�濮�',
+ this.displayData[this.selectedRowIndex].beginTime
+ );
+ 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)
+ .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
+ };
+ // 璇锋眰鍓嶅崐娈�
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsBefore })
+ .then((result) => {
+ this.beforeData = result.data.data;
+ });
+
+ // 璇锋眰鍚庡崐娈�
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsAfter })
+ .then((result) => {
+ this.afterData = result.data.data;
+ });
+
+ //鐢╪ull濉厖涓紓甯告棤鏁版嵁鐨勬椂闂�
+ //鐩稿樊鍑犱釜10鍒嗛挓
+ const TenMinuteNum = this.diffTenMinutesNum(
+ this.abnormalBt,
+ this.abnormalEt
+ );
+ //淇濆瓨绌哄��
+ let tempArr = [];
+ for (let i = 0; i < TenMinuteNum; i++) {
+ tempArr.push(null);
+ }
+ console.log('濉厖鏁扮粍涓猴細', tempArr);
+
+ //鍚堝苟鏁扮粍
+ 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]);
+
+ // 寰�鍓�30鍒嗛挓
+ const before30MinBegin = dayjs(beginTime)
+ .subtract(30, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ const before10MinBegin = dayjs(beginTime)
+ .subtract(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+
+ // 寰�鍚�40鍒嗛挓
+ const after30MinEnd = dayjs(endTime)
+ .add(30, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ const after10MinEnd = dayjs(endTime)
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss');
+ console.log('鍓嶅悗鏃堕棿涓�', before30MinBegin, after30MinEnd);
+ let paramsBefore = {
+ devId: this.displayData[this.selectedRowIndex].devId,
+ beginTime: before30MinBegin,
+ endTime: before10MinBegin
+ };
+ let paramsAfter = {
+ devId: this.displayData[this.selectedRowIndex].devId,
+ beginTime: after10MinEnd,
+ endTime: after30MinEnd
+ };
+ // 璇锋眰鍓嶅崐娈�
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsBefore })
+ .then((result) => {
+ this.beforeData = result.data.data;
+ });
+ // 璇锋眰鍚庡崐娈�
+ axiosInstanceInstance
+ .get('/fume/history', { params: paramsAfter })
+ .then((result) => {
+ this.afterData = result.data.data;
+ });
+
+ setTimeout(() => {
+ console.log('璇锋眰鍚庣殑鏁版嵁涓�', this.beforeData, this.afterData);
+ this.allExceptionTimeData = [
+ ...this.beforeData,
+ ...this.exceedingData,
+ ...this.afterData
+ ];
+ // x杞存棩鏈熸椂闂�
+ let dateList1 = [];
+ // y杞� 瓒呮爣娌圭儫娴撳害
+ let fumeExceeding1 = [];
+ console.log('鎵�鏈夋暟鎹暱搴�', this.allExceptionTimeData.length);
+ console.log('鎵�鏈夋暟鎹�', this.allExceptionTimeData);
+ for (let i = 0; i < this.allExceptionTimeData.length; i++) {
+ if (this.allExceptionTimeData[i] == null) {
+ //x杞存棩鏈�
+ //鏃犳暟鎹椂锛� 涓哄墠闈㈡椂闂寸偣澧炲姞10鍒嗛挓
+ dateList1.push(
+ dayjs(dateList1[dateList1.length - 1])
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss')
+ );
+ // 瓒呮爣娌圭儫娴撳害
+ fumeExceeding1.push(null);
+ } else {
+ //x杞存棩鏈�
+ dateList1.push(this.allExceptionTimeData[i].mvDataTime);
+ // 瓒呮爣娌圭儫娴撳害
+ fumeExceeding1.push(
+ this.allExceptionTimeData[i].mvFumeConcentration2
+ );
+ }
+ }
+
+ // 鎻愬彇鏃堕棿鍖洪棿鍐呯殑鏁版嵁绱㈠紩
+ var startIndex = dateList1.findIndex((item) => item === dateList[0]);
+ var endIndex = dateList1.findIndex(
+ (item) => item === dateList[dateList.length - 1]
+ );
+
+ this.chart = echarts.init(this.$refs.chart);
+ this.chart.setOption({
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ tooltip: {},
+ // legend: {
+ // data: ['娌圭儫瓒呮爣鏁版嵁']
+ // },
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ dataZoom: {
+ // 鍖哄煙缂╂斁
+ yAxisIndex: 'none'
+ },
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ // type: 'time',
+ // 鍦ㄧ被鐩酱锛坱ype: 'category'锛変腑鏈夋晥銆�
+ data: dateList1,
+ name: '鏃堕棿'
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ show: true,
+ interval: 'auto'
+ // formatter:'{value} %'
+ },
+ name: 'mg/m鲁'
+ },
+ visualMap: {
+ show: false,
+ dimension: 0,
+ pieces: [
+ {
+ lte: startIndex,
+ color: 'green'
+ },
+ {
+ gt: startIndex,
+ lte: endIndex,
+ color: 'red'
+ },
+ {
+ gt: endIndex,
+ lte: dateList1.length - 1,
+ color: 'green'
+ }
+ ]
+ },
+ series: [
+ {
+ name: '娌圭儫瓒呮爣鏁版嵁',
+ type: 'line',
+ data: fumeExceeding1,
+
+ // markArea: {
+ // itemStyle: {
+ // color: 'rgba(255, 173, 177, 0.4)'
+ // },
+ // data: [
+ // [
+ // {
+ // name: '娴撳害瓒呮爣',
+ // xAxis: dateList[0]
+ // },
+ // {
+ // xAxis: dateList[dateList.length - 1]
+ // }
+ // ]
+ // ]
+ // },
+ markLine: {
+ symbol: 'none',
+ itemStyle: {
+ // 鍩虹嚎鍏叡鏍峰紡
+ normal: {
+ lineStyle: {
+ // show:false,
+ // 'solid'瀹炵嚎锛�'dashed'铏氱嚎锛�'dotted'鐐圭嚎
+ type: 'dashed'
+ },
+ label: {
+ show: true,
+ position: 'end',
+ formatter: '{b}'
+ }
+ }
+ },
+ data: [
+ {
+ name: '棰勮',
+ type: 'average',
+ yAxis: 1,
+ lineStyle: {
+ // color: '#ff0000'
+ color: 'red'
+ }
+ }
+ ]
+ }
+ }
+ ]
+ });
+ }, 500);
+ }
+ },
+ getDeviceInfo() {
+ // 绾ц仈涓嬫媺妗嗘暟鎹� 浠庢帴鍙ｄ腑鍔ㄦ�佽幏鍙�
+ axiosInstanceInstance.get('/fume/device').then((result) => {
+ this.deviceInfo = result.data.data;
+ // 鑾峰彇鍒版�荤殑搴楅摵鏁伴噺
+ this.shopsTotal = result.data.data.length;
+ this.deviceInfo.forEach((item) => {
+ this.optionsShop[this.optionsShop.length] = {
+ value: item.diName,
+ label: item.diName,
+ children: [
+ {
+ value: item.diCode,
+ label: item.diCode
+ }
+ ]
+ };
+ });
+ console.log(this.optionsShop);
+ });
+ },
+ exportDom() {
+ // 瀵煎嚭涓篍xcel鏂囦欢
+ const fields = [
+ 'devId',
+ 'exceptionType',
+ 'region',
+ 'beginTime',
+ 'endTime'
+ ];
+ const itemsFormatted = this.abnormalData.map((item) => {
+ const newItem = {};
+ fields.forEach((field) => {
+ newItem[field] = item[field];
+ });
+ return newItem;
+ });
+ // 鍒涘缓xlsx瀵硅薄
+ const xls = XLSX.utils.json_to_sheet(itemsFormatted);
+ // 缂栬緫琛ㄥご琛� 淇敼琛ㄥご
+ xls['A1'].v = '璁惧缂栧彿';
+ xls['B1'].v = '寮傚父绫诲瀷';
+ xls['C1'].v = '鍦板尯';
+ xls['D1'].v = '寮�濮嬫椂闂�';
+ xls['E1'].v = '缁撴潫鏃堕棿';
+ // 鍒涘缓workbook锛屽苟鎶妔heet娣诲姞杩涘幓
+ const wb = XLSX.utils.book_new();
+ XLSX.utils.book_append_sheet(wb, xls, 'Sheet1');
+ // 灏唚orkbook杞负浜岃繘鍒秞lsx鏂囦欢骞朵笅杞�
+ XLSX.writeFile(wb, '鍒嗘瀽鏁版嵁.xlsx');
+ },
+
+ // 鏌ヨ鍏ㄩ儴寮傚父琛ㄦ暟鎹�
+ getAllData() {
+ this.isNoData = false;
+ this.loading = true;
+ axiosInstanceInstance.get('/fume/abnormal').then((result) => {
+ this.abnormalData = result.data.data;
+ this.loading = false;
+ this.total = this.abnormalData.length;
+ if (result.data.data.length == 0) {
+ alert('璇ユ椂娈垫棤鏁版嵁');
+ this.isNoData = true;
+ return;
+ }
+ this.isNoData = false;
+ // 榛樿鏄剧ず绗竴椤�
+ this.handleCurrentChange(1);
+ });
+
+ // 寰楀埌寮傚父琛ㄧ殑鏈�鏃╁拰鏈�鏅氭椂闂�
+ setTimeout(() => {
+ axiosInstanceInstance.get('/fume/time').then((result) => {
+ this.beginTime = result.data.data[0].beginTime;
+ this.endTime = result.data.data[0].endTime;
+ // console.log('be,end',this.beginTime,this.endTime);
+ });
+ }, 500);
+ },
+
+ getAbnormalDataByClick(val) {
+ this.abnormalData = val;
+ this.total = this.abnormalData.length;
+ // 榛樿鏄剧ず绗竴椤�
+ this.handleCurrentChange(1);
+ },
+
+ // 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙�
+ // 姣斿娌圭儫瓒呮爣瀵瑰簲鐨勬墍鏈夊簵閾哄悕绉板拰璁惧缂栧彿锛堝凡鍘婚櫎閲嶅鐨勫簵閾哄悕锛�
+ getShopNames() {
+ axiosInstanceInstance
+ .get('/fume/shopname', {
+ params: {
+ exceptionType: '0',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception0 = result.data.data;
+ console.log('寮傚父0', this.exception0);
+ console.log('寮傚父0鏁伴噺', this.exception0.length);
+ });
+ axiosInstanceInstance
+ .get('/fume/shopname', {
+ params: {
+ exceptionType: '1',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception1 = result.data.data;
+ });
+ axiosInstanceInstance
+ .get('/fume/shopname', {
+ params: {
+ exceptionType: '2',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception2 = 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;
+ axiosInstanceInstance
+ .get('/fume/abnormalone', { params: params })
+ .then((response) => {
+ if (response.data.data.length == 0) {
+ alert('璇ユ椂娈垫棤鏁版嵁');
+ return;
+ }
+ // 淇濆瓨杩斿洖鐨�
+ this.abnormalData = response.data.data;
+ // 鍒嗛〉
+ this.total = this.abnormalData.length;
+ // 榛樿鏄剧ず绗竴椤�
+ this.handleCurrentChange(1);
+ this.loading = false;
+ });
+ }
+ },
+
+};
+</script>
+
+<style scoped>
+
+.exception-root-container {
+ margin: 20px;
+ padding: 10px;
+ border: 1px;
+ height: 615px;
+ /* min-height: 80vh;
+ min-width: 100vh; */
+}
+.header-container {
+ display: flex;
+ /* flex-wrap: wrap;
+ align-items: center; */
+}
+.ellipsis {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.iconExcel {
+ font-size: 25px;
+ margin-left: 20px;
+ bottom: -6px;
+}
+
+/* 鍙紶鏍囩澶村彉涓哄彲鐐瑰嚮鐘舵�� */
+.clickable {
+ cursor: pointer;
+}
+.card-header {
+ margin: 0;
+}
+
+body {
+ margin: 0;
+}
+.exception-divider-rowline {
+ margin: 10px 0px;
+}
+/* 寮傚父鍒嗘瀽鏁版嵁涓庢寜閽� */
+.exception-container {
+ display: flex;
+ /* direction: column; */
+ /* flex-grow: 2,1; */
+}
+.example-showcase .el-loading-mask {
+ z-index: 9;
+}
+
+.scrollbar-demo-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 20px;
+ margin: 10px;
+ text-align: center;
+ border-radius: 4px;
+ background: var(--el-color-primary-light-9);
+ color: var(--el-color-primary);
+}
+.collapse-header {
+ font-size: 18px;
+}
+.collapse-header-text {
+ /* margin-right: 150px; */
+ margin-top: 5px;
+ font-size: 14px;
+ color: gray;
+}
+
+.box-card-label {
+ font-size: 14px;
+ white-space: nowrap;
+ overflow-x: auto;
+}
+:deep().el-card {
+ border-radius: 9px;
+
+}
+/* 鈥樻煡鐪嬭鎯呪�� 鐨勫脊鍑烘楂樺害璋冩暣 */
+:deep().el-dialog {
+ height: 98%;
+ /* 涓嶅嚭鐜版粴鍔ㄦ潯 */
+ overflow-y: hidden;
+ border-radius: 9px;
+}
+:deep().table-page .el-card__body {
+ padding: 0px;
+}
+.table-text {
+ font-size: 18px;
+ margin-bottom: 10px;
+}
+.text-blank {
+ margin-left: 10px;
+}
+/* 搴楅摵鍚嶉�夋嫨鏂囨湰 */
+.describe-info {
+ margin-top: 5px;
+ font-weight: bold;
+ white-space: nowrap;
+}
+/* 鏃堕棿閫夋嫨鏂囨湰 */
+.describe-time-text {
+ margin-left: 30px;
+ margin-top: 5px;
+ font-weight: bold;
+}
+
+
+/* 寮傚父琛ㄦ牸涓嬫爣绛句腑鐨勬暟缁� */
+.table-line-num {
+ font-weight: bold;
+ color: black;
+}
+.button_info.el-button_inner {
+ text-align: left;
+}
+:deep().el-collapse .el-collapse-item__content{
+ padding-bottom: 0px;
+}
+.box-card {
+ height: 190px;
+}
+:deep().box-card .el-card__body {
+ padding: 5px;
+}
+.sub-box-card {
+ height: 100px;
+ overflow-y: auto;
+ border: 0px;
+}
+:deep().sub-box-card .el-card__body {
+ padding: 0px;
+}
+.mx-1 {
+ margin-bottom: 0px;
+}
+.dialog-button-position {
+ display: flex;
+ justify-content: right;
+ margin-bottom: 10px;
+}
+.el-table .warning-row {
+ --el-table-tr-bg-color: var(--el-color-warning-light-9);
+}
+.el-table .success-row {
+ --el-table-tr-bg-color: var(--el-color-success-light-9);
+}
+</style>
--
Gitblit v1.9.3