From 172d73cbe737c04b3d2c3fe8908db2460c241543 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期一, 14 八月 2023 17:11:48 +0800
Subject: [PATCH] 油烟监测系统 Vue代码
---
src/test/TestNoData.vue | 1898 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 1,788 insertions(+), 110 deletions(-)
diff --git a/src/test/TestNoData.vue b/src/test/TestNoData.vue
index f2d4534..dc4111d 100644
--- a/src/test/TestNoData.vue
+++ b/src/test/TestNoData.vue
@@ -1,149 +1,1827 @@
-
<template>
- <div>
- <div style="margin: 5px;">
- <span style="color: #b1b3b8;" >瀹炴椂鏁版嵁</span>
- </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>
- <hr style="margin-top: 10px;"/>
- <div v-loading="loading">
- <el-row :gutter="20">
- <el-col :span="8" v-for="device in devices" :key="device.id">
- <div class="dashboard">
- <div class="dashboard-title">璁惧缂栧彿涓猴細{{ device.mnCode }}</div>
- <div ref="charts" class="echarts"></div>
- <div>
- <div class="data">褰撳墠鏁板�硷細{{ device.value }}</div>
- <div class="data">浜х敓鏃堕棿锛歿{ device.time }}</div>
- <div class="status" :class="{'exceed': device.value > 1}"> {{ device.value >= 1 ? '瓒呮爣' : '' }}</div>
- <div class="status1" :class="{'exceed1': device.value < 1}"> {{ device.value < 1 ? '鏈秴鏍�' : '' }}</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">
+ <el-scrollbar>
+ <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <span style="font-size: 20px"
+ >{{ exception0.length }} /{{ shopsTotal }}</span
+ >
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception0.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
+ >
+ </el-scrollbar>
+ </div>
+
+ <hr />
+ <div class="box-card-butcontainer">
+ <el-card class="sub-box-card">
+ <el-scrollbar max-height="70px">
+ <ExceptionText
+ v-for="(item, index) in exception0"
+ :key="item"
+ :devId="item.devId"
+ exception-value="0"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ @submit-exception-data="getAbnormalDataByClick"
+ >
+ {{ item.diName }}
+ <span
+ v-if="index < exception0.length - 1"
+ class="text-blank"
+ >,</span
+ >
+ </ExceptionText>
+ </el-scrollbar>
+ </el-card>
+ </div>
+ </el-col>
+
+ <el-col :span="8">
+ <div style="display: flex">
+ <img
+ src="@/assets/exception.jpg"
+ style="width: 25px; height: 25px; margin-top: 5px"
+ />
+ <span
+ style="
+ font-size: 16px;
+ font-weight: bold;
+ margin-top: 5px;
+ margin-left: 4px;
+ "
+ >渚涚數寮傚父</span
+ >
+ </div>
+ <div class="box-card-label">
+ <el-scrollbar>
+ <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <span style="font-size: 20px"
+ >{{ exception1.length }} /{{ shopsTotal }}</span
+ >
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception1.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
+ >
+ </el-scrollbar>
+ </div>
+
+ <hr />
+
+ <div>
+ <el-card class="sub-box-card">
+ <el-scrollbar max-height="70px">
+ <ExceptionText
+ v-for="(item, index) in exception1"
+ :key="item"
+ :devId="item.devId"
+ exception-value="1"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ @submit-exception-data="getAbnormalDataByClick"
+ >
+ {{ item.diName }}
+ <span
+ v-if="index < exception1.length - 1"
+ class="text-blank"
+ >,</span
+ >
+ </ExceptionText>
+ </el-scrollbar>
+ </el-card>
+ </div>
+ </el-col>
+
+ <el-col :span="8">
+ <div style="display: flex">
+ <img
+ src="@/assets/offline.jpg"
+ style="width: 25px; height: 25px; margin-top: 5px"
+ />
+ <span
+ style="
+ font-size: 16px;
+ font-weight: bold;
+ margin-top: 5px;
+ margin-left: 4px;
+ "
+ >鎺夌嚎</span
+ >
+ </div>
+ <div class="box-card-label">
+ <el-scrollbar>
+ <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+ <span style="font-size: 20px"
+ >{{ exception2.length }} /{{ shopsTotal }}</span
+ >
+ <span style="margin-left: 150px; font-size: 14px">
+ 鍗犳瘮锛歿{
+ ((exception2.length / shopsTotal) * 100).toFixed(1)
+ }}%</span
+ >
+ </el-scrollbar>
+ </div>
+ <hr />
+ <div>
+ <el-card class="sub-box-card">
+ <el-scrollbar max-height="70px">
+ <ExceptionText
+ v-for="(item, index) in exception2"
+ :key="item"
+ :devId="item.devId"
+ exception-value="2"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ @submit-exception-data="getAbnormalDataByClick"
+ >
+ {{ item.diName }}
+ <span
+ v-if="index < exception2.length - 1"
+ class="text-blank"
+ >,</span
+ >
+ </ExceptionText>
+ </el-scrollbar>
+ </el-card>
+ </div>
+ </el-col>
+ </el-row>
+ </el-card>
+ </el-collapse-item>
+ </el-collapse>
+ <!-- <hr/>
+ <br> -->
+ <h4 class="table-text">寮傚父鏁版嵁</h4>
+ <el-card class="table-page" v-show="!isNoData">
+ <el-table
+ ref="tableH"
+ v-loading="loading"
+ :data="displayData"
+ style="width: 100%"
+ :row-class-name="tableRowClassName"
+ stripe
+ border
+ :height="tableHeight"
+ >
+ <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="chart1"
+ v-show="isOfflineShow"
+ style="
+ width: 100%;
+ height: 300px;
+ /* min-width: 100px; */
+ margin-bottom: 20px;
+ margin-left: 10px;
+ min-width: 350px;
+ "
+ ></div>
+
+ <!-- 瓒呮爣 -->
+ <div
+ ref="chart2"
+ v-show="isExceedShow"
+ style="
+ width: 100%;
+ height: 300px;
+ /* min-width: 100px; */
+ margin-bottom: 20px;
+ margin-left: 10px;
+ min-width: 350px;
+ "
+ ></div>
+ <!-- <ExceptionTypeLineChart :allData="allChartData"></ExceptionTypeLineChart> -->
+
+ <!-- -->
+ <div style="margin-top: 40px; margin-bottom: 5px; border: 1px">
+ <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>
- </div>
-
-
- </el-col>
- </el-row>
- 鍔犺浇
- </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>
<script>
+import ExceptionType from '../sfc/ExceptionType.vue';
+import TimeSelect from '../sfc/TimeSelect.vue';
+import ExceptionText from '../sfc/ExceptionText.vue';
+import * as echarts from 'echarts';
+import * as XLSX from 'xlsx/xlsx.mjs';
+import dayjs from 'dayjs';
+import axiosInstanceInstance from '../utils/request.js';
-import * as echarts from 'echarts'
-import axios from 'axios'
+const ShopNameAndID = defineAsyncComponent(() =>
+ import('../sfc/../sfc/ShopNameAndID.vue')
+);
+// 寮傛缁勪欢
+// const ExceptionTypeLineChart = defineAsyncComponent(() =>
+// import('../sfc/ExceptionTypeLineChart.vue')
+// )
export default {
+ name: 'TablePage',
+ components: {
+ ExceptionType,
+ TimeSelect,
+ ShopNameAndID,
+ ExceptionText
+ // ExceptionTypeLineChart
+ },
data() {
return {
- devices: [],
- loading:false, //鍔犺浇涓�
- }
+ //鎺夌嚎鎴栬秴鏍囩殑鍥惧舰灞曠ず
+ isOfflineShow: false,
+ isExceedShow: false,
+ // 鎶樼嚎鍥惧睍绀�
+ isChartShow: false,
+ // 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: [],
+
+ // 鎶樼嚎鍥惧疄渚�
+ chart1: null,
+ chart2: 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: '鎺夌嚎'
+ }
+ ]
+ };
},
- methods: {
- fetchData() {
- const params = {
- params: {
- page: 1,
- per_page: 10
+ // 鐩戝惉 鍒ゆ柇鎸夐挳鏄惁鍙偣鍑�
+ watch: {
+ selectedRowIndex(newVaue) {
+ // 澶勪簬琛ㄦ牸鐨勭涓�鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
+ if (newVaue === 0) {
+ this.isPreCantouch = true;
+ //鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
+ if (this.isNextCantouch == true) {
+ this.isNextCantouch = false;
}
}
- axios.get('https://fyami.com.cn/device/min/value/real_time', params)
- .then(response => {
- this.devices = response.data.data
- })
- .catch(error => {
- console.error(error)
- })
+ // 澶勪簬琛ㄦ牸鏈�鍚庝竴鏉℃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣
+ 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;
+ }
},
- updateCharts() {
- for (let i = 0; i < this.devices.length; i++) {
- const device = this.devices[i]
- const chart = echarts.init(this.$refs.charts[i])
-
- const option = {
- title: {
- // text: '瀹炴椂鏁版嵁'
+
+ // 褰撻�夋嫨鐨勬椂闂村彂鐢熷彉鍖栨椂锛屽紓甯稿垎鏋愰儴鍒嗙殑寮傚父搴楅摵鏁伴噺鍚屾鍙樺寲
+ beginTime() {
+ this.getShopNames();
+ },
+ endTime() {
+ this.getShopNames();
+ },
+ centerDialogVisible() {
+ window.addEventListener('resize', this.updateChart);
+ }
+ },
+
+ mounted() {
+ // 浠庢帴鍙ｈ幏鍙栧簵閾哄悕绉� 缁欑骇鑱斾笅鎷夋
+ this.getDeviceInfo();
+
+ // 灞曠ず鏈�杩�7澶╂暟鎹�
+ this.getRecentSevenDays();
+
+ // 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� 娓叉煋寮傚父鍒嗘瀽閮ㄥ垎瀵瑰簲鐨勫簵閾哄悕
+ this.getShopNames();
+ window.addEventListener('resize', this.updateChart);
+ },
+ methods: {
+ // 鏃堕棿鏄惁瓒呰繃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();
+ console.log(month1, month2);
+
+ // 鍒ゆ柇涓や釜鏃ユ湡鏄惁鐩稿樊涓�涓湀
+ if (year1 === year2) {
+ // 骞翠唤鐩哥瓑锛屾瘮杈冩湀浠藉樊鍊�
+ if (Math.abs(month1 - month2) === 1) {
+ // 鏈堜唤宸�间负1锛岃繕闇�瑕佸垽鏂叿浣撴棩鏈�
+ if (
+ (month1 < month2 && day1 < day2) ||
+ (month1 > month2 && day1 > day2)
+ ) {
+ return true;
+ }
+ }
+ } else if (Math.abs(year1 - year2) === 1) {
+ // 骞翠唤宸�间负1锛屾瘮杈冩湀浠藉拰鏃ユ湡
+ if (
+ (year1 < year2 && month1 === 11 && month2 === 0 && day1 < day2) ||
+ (year1 > year2 && month1 === 0 && month2 === 11 && day1 > day2)
+ ) {
+ return true;
+ }
+ }
+
+ // 榛樿杩斿洖false锛岃〃绀轰袱涓棩鏈熷瓧绗︿覆涓嶇浉宸竴涓湀
+ return false;
+ },
+
+ // 鍒氭墦寮�鍗＄墖鏃剁涓�涓浘褰笉浼氳嚜鍔ㄤ几缂� 褰撶偣鍑讳笂/涓嬩竴鏉℃椂浼氳嚜鍔ㄤ几缂�
+ // 鍥惧舰鍝嶅簲寮忓彉鍖�
+ updateChart() {
+ this.$nextTick(() => {
+ if (this.chart1) {
+ this.chart1.resize();
+ }
+ if (this.chart2) {
+ this.chart2.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: ''
+ });
+ }
+
+ // 鍏ㄩ儴鏁版嵁鍔犲叆
+ // for (let i = 0; i < data.length; i++) {
+ // if (data[i] == null) {
+ // this.exceedingData.push({
+ // mvStatCode: this.rowMvStatCode,
+ // diName: this.rowShopName,
+ // mvDataTime: abnormalTimeTenMinute[i],
+ // mvFumeConcentration2: ''
+ // });
+ // }
+ // else {
+ // this.exceedingData.push(data[i]);
+ // }
+ // }
+
+ // 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟
+ this.exceptionTotal = abnormalTimeTenMinute.length;
+ },
+ // 鐐瑰嚮琛ㄦ牸鐨勮鏃�
+ 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);
+ }
+ },
+
+ // 鑾峰彇鑾峰彇琛ㄦ牸涓嬩竴琛屾暟鎹�
+ 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.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.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;
+ }
+ 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) {
+ ElMessage('璇ユ椂娈垫棤鏁版嵁');
+ 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) {
+ const startIndex = (val - 1) * this.pageSize;
+ const endIndex = startIndex + this.pageSize;
+
+ this.displayData = this.abnormalData.slice(startIndex, endIndex);
+ },
+
+ //鐩稿樊澶氬皯涓崄鍒嗛挓 璁＄畻涓苟涓嶅寘鎷紑濮嬫椂闂达紝浣嗗寘鎷粨鏉熸椂闂淬��
+ 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) {
+ // 瓒呮爣鍥惧舰chart2瀹炰緥涓虹┖
+ if (this.chart2 != null) {
+ this.chart2 == null;
+ }
+ if (this.chart1 == null) {
+ this.chart1 = echarts.init(this.$refs.chart1);
+ }
+ this.chart1.setOption({
+ tooltip: {},
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ dataZoom: {
+ // 鍖哄煙缂╂斁
+ yAxisIndex: 'none'
+ },
+
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
},
- tooltip: {
- formatter: '{a} <br/>{b} : {c}'
+ xAxis: {
+ data: xAxisData1,
+ name: '鏃堕棿'
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ show: true,
+ interval: 'auto'
+ // formatter:'{value} %'
+ },
+ name: 'mg/m鲁'
},
series: [
{
- name: '瀹炴椂鏁版嵁',
- type: 'gauge',
- detail: { formatter: '{value}' },
- data: [{
- value: device.value,
- name: '娌圭儫娴撳害' ,
- itemStyle: {
- color:device.value >= 1?'red' :'green'
+ name: '娌圭儫鏁版嵁',
+ type: 'line',
+ data: fumeExceeding,
+ markLine: {
+ silent: true,
+
+ data: [
+ // 鏍囨敞鏃犳暟鎹椂闂存鐨勬晥鏋滐紝灏嗚繖涓椂闂存鐨勬暟杞撮儴鍒嗗彉涓虹孩鑹�
+ {
+ name: '鏃犳暟鎹�',
+ xAxis: abnormalBeginTime
+ },
+ {
+ xAxis: abnormalEndTime
+ }
+ ],
+ lineStyle: {
+ color: 'red'
}
- }],
- max:2
+ }
}
]
+ });
+ },
+
+ // 灞曠ず鎶樼嚎鍥�
+ drawChart() {
+ if (
+ this.exceedingData.length === 0 ||
+ this.rowExceptionType === '1' ||
+ this.rowExceptionType === '2'
+ ) {
+ this.isOfflineShow = true;
+ this.isExceedShow = false;
+
+ // // 閲嶆瀯琛ㄦ牸 鎵嬪姩濉厖
+ // 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);
+
+ console.log('鍓嶅悗鏁版嵁涓猴細', this.beforeData, this.afterData);
+ this.allExceptionTimeData = [
+ ...this.beforeData,
+ ...tempArr,
+ ...this.afterData
+ ];
+ console.log('鍚堝苟鍚庢暟缁勪负', this.allExceptionTimeData);
+
+ // 閲嶆瀯琛ㄦ牸 鎵嬪姩濉厖
+ this.setExceptionData(this.allExceptionTimeData);
+
+ //灞曠ず鍥惧舰
+ // x杞存棩鏈熸椂闂�
+ let dateList = [];
+ // y杞� 瓒呮爣娌圭儫娴撳害
+ let fumeExceeding = [];
+ // 杩炵画鐨勬椂闂�
+ let dateListTemp = []
+ let fumeExceedingTemp = []
+
+ for (let i = 0; i < this.allExceptionTimeData.length; i++) {
+ if (this.allExceptionTimeData[i] == null) {
+ //x杞存棩鏈�
+ //鏃犳暟鎹椂锛� 涓哄墠闈㈡椂闂寸偣澧炲姞10鍒嗛挓
+ dateList.push(
+ dayjs(dateList[dateList.length - 1])
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss')
+ );
+ // 瓒呮爣娌圭儫娴撳害
+ fumeExceeding.push(null);
+ } else {
+ //x杞存棩鏈�
+ dateList.push(this.allExceptionTimeData[i].mvDataTime);
+ // 瓒呮爣娌圭儫娴撳害
+ fumeExceeding.push(
+ this.allExceptionTimeData[i].mvFumeConcentration2
+ );
+ }
+ }
+ // 鏃堕棿杩炵画
+ // for(let i =0;i<dateList.length-1;i++){
+ // if(this.isTimeDifferenceGreaterThan10Minutes(dateList[i],dateList[i+1])){
+ // dateListTemp.push(dayjs(dateList[i]).add(10,'minute').format('YYYY-MM-DD HH:mm:ss'))
+ // fumeExceedingTemp.push(null)
+ // }else{
+ // dateListTemp.push(dateList[i])
+ // fumeExceedingTemp.push(fumeExceeding[i])
+ // }
+ // }
+ // 鏃堕棿杩炵画
+ let objData= this.generateTimePoints(dateList,fumeExceeding);
+ dateListTemp = objData['time']
+ fumeExceedingTemp = objData['data']
+
+ //灞曠ず鎶樼嚎鍥�
+ // this.chart = null;
+ // console.log('x杞寸殑鏃ユ湡涓猴細',dateList);
+ // console.log('寮�濮嬪拰缁撴潫鏃ユ湡涓猴細',this.abnormalBt,this.abnormalEt);
+ let dateList1 = [];
+ dateListTemp.forEach((item) => {
+ dateList1.push(dayjs(item).format('HH:mm'));
+ });
+ this.abnormalBt = dayjs(this.abnormalBt).format('HH:mm');
+ this.abnormalEt = dayjs(this.abnormalEt).format('HH:mm');
+
+ // console.log('鍙樺寲鐨勬暟鎹細',dateList1);
+ // console.log('鍙樺寲鐨勬暟鎹細',this.abnormalBt);
+ // console.log('鍙樺寲鐨勬暟鎹細',this.abnormalEt);
+
+ if (this.char1) {
+ this.char1.dispose();
+ }
+
+ this.linechart(
+ dateList1,
+ this.abnormalBt,
+ this.abnormalEt,
+ fumeExceedingTemp
+ );
+ });
+ });
+
}
+
+ // ----------------------------------------
+ // 娌圭儫娴撳害瓒呮爣鏃剁殑鎶樼嚎鍥�
+ else {
+ // 鍥惧舰灞曠ず
+ this.isExceedShow = true;
+ this.isOfflineShow = false;
+ // // 娓呯┖锛岃鏃犳暟鎹潯鏁伴殣钘忥紝浣垮巻鍙叉暟鎹殑鏍囩鏉℃暟鏄剧ず鍑烘潵
+ // 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]);
+
+ let beginT = dayjs(beginTime).format('HH:mm');
+ let endT = dayjs(endTime).format('HH:mm');
+ // 寰�鍓�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');
+
+ 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;
+ let before = [];
+ let after = [];
+ console.log('璇锋眰鍚庣殑鏁版嵁涓�', this.beforeData, this.afterData);
+
+ // 鍓嶅悗鍖洪棿鍙樉绀鸿窛绂昏秴鏍囧尯闂存椂闂存渶杩戠殑娴撳害灏忎簬1鐨勬椂闂寸偣
+ for (let i = this.beforeData.length - 1; i >= 0; i--) {
+ if (this.beforeData[i].mvFumeConcentration2 >= 1) {
+ break;
+ }
+ if (this.beforeData[i].mvFumeConcentration2 < 1) {
+ before.unshift(this.beforeData[i]);
+ }
+ }
+ console.log('before:', before);
+ for (let i = this.afterData.length - 1; i >= 0; i--) {
+ if (this.afterData[i].mvFumeConcentration2 >= 1) {
+ break;
+ }
+ if (this.afterData[i].mvFumeConcentration2 < 1) {
+ after.unshift(this.afterData[i]);
+ }
+ }
+ console.log('after:', after);
+ this.allExceptionTimeData = [
+ ...before,
+ ...this.exceedingData,
+ ...after
+ ];
+
+ // x杞存棩鏈熸椂闂�
+ let dateList1 = [];
+
+ // y杞� 瓒呮爣娌圭儫娴撳害
+ let fumeExceeding1 = [];
+ for (let i = 0; i < this.allExceptionTimeData.length; i++) {
+ if (this.allExceptionTimeData[i] == null) {
+ //x杞存棩鏈�
+ //鏃犳暟鎹椂锛� 涓哄墠闈㈡椂闂寸偣澧炲姞10鍒嗛挓
+ dateList1.push(
+ dayjs(dateList1[dateList1.length - 1])
+ .add(10, 'minute')
+ .format('YYYY-MM-DD HH:mm:ss')
+ );
+ // 瓒呮爣娌圭儫娴撳害
+ fumeExceeding1.push(null);
+ } else {
+ //x杞存棩鏈�
+ dateList1.push(this.allExceptionTimeData[i].mvDataTime);
+ // 瓒呮爣娌圭儫娴撳害
+ fumeExceeding1.push(
+ this.allExceptionTimeData[i].mvFumeConcentration2
+ );
+ }
+ }
+ let dateListLine = [];
+ let fumeExceedingTemp = [];
+
+ console.log('澶勭悊鍓嶆暟鎹负锛�', dateList1);
+
+
+ // 棰楃矑搴�10鍒嗛挓鏃堕棿杩炵画
+ let objData= this.generateTimePoints(dateList1,fumeExceeding1);
+ dateListLine = objData['time']
+ fumeExceedingTemp = objData['data']
- chart.setOption(option)
+ console.log('澶勭悊鍚庢椂闂翠负锛�', dateListLine);
+ console.log('澶勭悊鍚庢暟鎹负锛�', fumeExceedingTemp);
+
+ // 鎻愬彇鏃堕棿鍖洪棿鍐呯殑鏁版嵁绱㈠紩
+ let startIndex = dateListLine.findIndex(
+ (item) => item === dateList[0]
+ );
+ let endIndex = dateListLine.findIndex(
+ (item) => item === dateList[dateList.length - 1]
+ );
+
+ let dateListTemp = [];
+ dateListLine.forEach((item) => {
+ dateListTemp.push(dayjs(item).format('HH:mm'));
+ });
+
+ // 渚涚數寮傚父鎴栨帀绾垮浘褰hart1瀹炰緥涓虹┖
+ if (this.chart1 != null) {
+ this.chart1 == null;
+ }
+ if (this.chart2 == null || this.chart2 == undefined) {
+ this.chart2 = echarts.init(this.$refs.chart2);
+ }
+ console.log(dateListTemp);
+ console.log(fumeExceedingTemp)
+ let temp = fumeExceedingTemp.map((item) => {
+ if (item >= 1) {
+ return {
+ value: item,
+ itemStyle: {
+ color: 'red'
+ }
+ };
+ }
+ return item;
+ })
+ console.log(temp);
+ this.chart2.setOption({
+ tooltip: {},
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ dataZoom: {
+ // 鍖哄煙缂╂斁
+ yAxisIndex: 'none'
+ },
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ data: dateListTemp,
+ name: '鏃堕棿'
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ show: true,
+ interval: 'auto'
+ // formatter:'{value} %'
+ },
+ name: 'mg/m鲁'
+ },
+ visualMap: {
+ show: false,
+ dimension: 0,
+ pieces: [
+ {
+ lte: startIndex,
+ color: 'green'
+ },
+ {
+ gt: startIndex,
+ lte: endIndex,
+ color: 'red'
+ },
+ {
+ gt: endIndex,
+ lte: dateList1.length - 1,
+ color: 'green'
+ }
+ ]
+ },
+ series: [
+ {
+ name: '娌圭儫娴撳害',
+ type: 'line',
+ data: temp,
+
+ markArea: {
+ itemStyle: {
+ color: 'rgba(255, 173, 177, 0.4)'
+ },
+ data: [
+ [
+ {
+ name: '瓒呮爣鏃堕棿娈�',
+ xAxis: beginT
+ },
+ {
+ xAxis: endT
+ }
+ ]
+ ]
+ },
+ markLine: {
+ symbol: 'none',
+ itemStyle: {
+ // 鍩虹嚎鍏叡鏍峰紡
+ normal: {
+ lineStyle: {
+ type: 'dashed'
+ },
+ label: {
+ show: true,
+ position: 'end',
+ formatter: '{b}'
+ }
+ }
+ },
+ data: [
+ {
+ name: '瓒呮爣',
+ type: 'average',
+ yAxis: 1,
+ lineStyle: {
+ // color: '#ff0000'
+ color: 'red'
+ }
+ }
+ ]
+ }
+ }
+ ]
+ });
+ });
+ });
}
- console.log('璋冪敤浜嗭紒');
+ },
+ 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) {
+ // ElMessage('璇ユ椂娈垫棤鏁版嵁')
+ // this.isNoData = true;
+ // return;
+ // }
+ // this.isNoData = false;
+ // // 榛樿鏄剧ず绗竴椤�
+ // this.handleCurrentChange(1);
+ // });
+
+ // // 寰楀埌寮傚父琛ㄧ殑鏈�鏃╁拰鏈�鏅氭椂闂�
+ // setTimeout(() => {
+ // axiosInstanceInstance.get('/fume/time').then((result) => {
+ // this.beginTime = result.data.data[0].beginTime;
+ // this.endTime = result.data.data[0].endTime;
+ // // console.log('be,end',this.beginTime,this.endTime);
+ // });
+ // }, 500);
+ // },
+
+ 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) {
+ ElMessage('璇ユ椂娈垫棤鏁版嵁');
+ return;
+ }
+ // 淇濆瓨杩斿洖鐨�
+ this.abnormalData = response.data.data;
+ // 鍒嗛〉
+ this.total = this.abnormalData.length;
+ // 榛樿鏄剧ず绗竴椤�
+ this.handleCurrentChange(1);
+ this.loading = false;
+ });
}
- },
- mounted() {
- this.fetchData()
- this.loading = true
- setInterval(() => {
- this.updateCharts()
- }, 30000) //姣忓垎閽燂紙30绉掞級璋冪敤涓�娆�
- this.loading = false
- },
- created() {
- // 鐩戝惉绐楀彛澶у皬鍙樺寲锛屽姩鎬佽皟鏁翠华琛ㄧ洏甯冨眬
- window.addEventListener('resize', this.updateCharts)
- },
- beforeUnmount() {
- // 绉婚櫎绐楀彛澶у皬鍙樺寲鐨勭洃鍚�
- window.removeEventListener('resize', this.updateCharts)
}
-}
+};
</script>
<style scoped>
-.dashboard {
- margin-bottom: 20px;
+.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;
}
-.dashboard-title {
- font-size: 20px;
+.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;
- padding: 10px 0;
- background-color: #f5f7fa;
+ border-radius: 4px;
+ background: var(--el-color-primary-light-9);
+ color: var(--el-color-primary);
+}
+.collapse-header {
+ margin-left: 5px;
+ font-size: 18px;
+}
+.collapse-header-text {
+ /* margin-right: 150px; */
+ margin-top: 5px;
+ font-size: 14px;
+ color: gray;
}
-.echarts {
- height: 300px;
+.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: 5px 0px 10px 4px;
+}
+.text-blank {
+ margin-right: 10px;
+}
+/* 搴楅摵鍚嶉�夋嫨鏂囨湰 */
+.describe-info {
+ margin-top: 5px;
+ font-weight: bold;
+ white-space: nowrap;
+}
+/* 鏃堕棿閫夋嫨鏂囨湰 */
+.describe-time-text {
+ margin-left: 30px;
+ margin-top: 5px;
+ font-weight: bold;
}
-/* 瓒呮爣 鏂囧瓧鏁堟灉*/
-.status {
- font-size: 18px;
- color: #FF4D4F;
- font-weight: bold;
- }
-
- .exceed {
- color: #FF4D4F;
- }
-
-/* 鏈秴鏍� */
- .status1 {
- font-size: 18px;
- color: #1de01d;
- font-weight: bold;
- }
-
- .exceed1 {
- color: #1de01d;
- }
+/* 寮傚父琛ㄦ牸涓嬫爣绛句腑鐨勬暟缁� */
+.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;
+ 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