From 20cdb83586daabfb15fc056c4c97eb8e7ccaf928 Mon Sep 17 00:00:00 2001
From: feiyu02 <risaku@163.com>
Date: 星期五, 20 三月 2026 17:07:16 +0800
Subject: [PATCH] 2026.3.20
---
src/views/monitor/DataException.vue | 1241 +++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 744 insertions(+), 497 deletions(-)
diff --git a/src/views/monitor/DataException.vue b/src/views/monitor/DataException.vue
index 159f6c5..847fcd7 100644
--- a/src/views/monitor/DataException.vue
+++ b/src/views/monitor/DataException.vue
@@ -1,399 +1,378 @@
<template>
- <el-row ref="h1">
- <el-col>
- <!-- 鑿滃崟璇绘爣棰� -->
- <div ref="h1" class="header-container">
- <span class="describe-info">搴楅摵鍚嶉�夋嫨锛�</span>
- <!-- 搴楅摵鍚� 绾ц仈 -->
- <ShopNameAndID @submit-id="(n) => (deviceId[1] = n)"></ShopNameAndID>
-
- <!-- 寮傚父绫诲瀷閫夋嫨 -->
- <ExceptionType @submitExceptionType="(val) => (exceptionValue = val)"> </ExceptionType>
-
- <TimeSelect @submit-time="giveTime"></TimeSelect>
- </div>
- <div ref="h2" style="display: flex; margin-top: 2px; justify-content: right">
- <el-button
- type="primary"
- plain
- style="margin-left: 20px"
- :loading="button.queryButton"
- @click="showTable"
- >鏌ヨ</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; margin-right: 40px">
- <span class="collapse-header-text">
- 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫鐩戞祴寮傚父淇℃伅姹囨��</span
- >
- </div>
- <br />
-
- <el-collapse ref="h3" v-model="activeNames">
+ <div class="data-exception-container">
+ <!-- 鎼滅储鍖哄煙 -->
+ <div ref="h1" class="search-container">
+ <el-collapse v-model="activeSearchNames" @change="handleSearchCollapseChange">
<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>
+ <div class="search-header">
+ <h3>棰勮鑼冨洿</h3>
+ <span v-if="!isSearchExpanded" class="search-summary">
+ {{ getSearchSummary() }}
+ </span>
+ </div>
</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
- >
+ <el-row>
+ <div class="search-form">
+ <div class="form-row">
+ <div class="form-item">
+ <span class="form-label">搴楅摵璁惧锛�</span>
+ <ShopNameAndID @submit-id="(n) => (deviceId[1] = n)"></ShopNameAndID>
</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="font-size: 17px">
- ({{ ((exception0.length / shopsTotal) * 100).toFixed(1) }}%)</span
- >
- {{ shopsTotal }}
- <span class="right-text">
- 寮傚父鏁板崰姣旓細{{ ((exception0Num / exceptionAllNum) * 100).toFixed(1) }}%
- </span>
- </el-scrollbar>
+ <div class="form-item">
+ <ExceptionType @submitExceptionType="(val) => (exceptionValue = val)">
+ </ExceptionType>
</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>
+ <div class="form-row">
+ <div class="form-item full-width">
+ <TimeSelect @submit-time="giveTime" :useNewStyle="false"></TimeSelect>
</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="font-size: 17px">
- ({{ ((exception1.length / shopsTotal) * 100).toFixed(1) }}%)</span
- >
- <span class="right-text">
- 寮傚父鏁板崰姣旓細{{ ((exception1Num / exceptionAllNum) * 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="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>
+ </div>
+ </div>
+ <div class="form-actions">
+ <el-button type="primary" :loading="button.queryButton" @click="showTable"
+ >鏌ヨ</el-button
+ >
+ <el-tooltip
+ class="box-item"
+ effect="dark"
+ content="鐐瑰嚮鍙鍑篍xcel鏂囦欢"
+ placement="top-start"
+ >
+ <el-icon class="iconExcel clickable" title="瀵煎嚭Excel鏂囦欢" @click="exportDom">
+ <i-ep-Download />
+ </el-icon>
+ </el-tooltip>
+ </div>
+ </el-row>
+ <div class="summary-info">
+ <span>{{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫鐩戞祴寮傚父淇℃伅姹囨��</span>
+ </div>
</el-collapse-item>
</el-collapse>
+ </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>
+ <!-- 寮傚父鍒嗘瀽 -->
+ <div class="analysis-container">
+ <el-space>
+ <h4 class="collapse-header">鐩戞祴棰勮</h4>
+ <el-icon class="header-icon">
+ <i-ep-info-filled />
+ </el-icon>
+ </el-space>
+ <el-card class="analysis-card">
+ <el-row :gutter="24">
+ <el-col :span="8">
+ <div class="analysis-item">
+ <div class="item-header">
+ <img src="@/assets/exceed.jpg" class="item-icon" />
+ <span class="item-title">娌圭儫娴撳害瓒呮爣</span>
+ </div>
+ <div class="item-content">
+ <div class="item-stats">
+ <span class="stats-label">寮傚父搴楅摵鍗犳瘮锛�</span>
+ <span class="stats-value">{{ exception0.length }} /{{ shopsTotal }}</span>
+ <span class="stats-percent"
+ >({{ ((exception0.length / shopsTotal) * 100).toFixed(1) }}%)</span
+ >
+ </div>
+ <div class="item-percent">
+ 寮傚父鏁板崰姣旓細{{ ((exception0Num / exceptionAllNum) * 100).toFixed(1) }}%
+ </div>
+ </div>
+ <hr class="item-divider" />
+ <div class="item-shops">
+ <el-scrollbar :height="scrollbarHeight">
+ <el-space wrap>
+ <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-space>
+ </el-scrollbar>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="8">
+ <div class="analysis-item">
+ <div class="item-header">
+ <img src="@/assets/exception.jpg" class="item-icon" />
+ <span class="item-title">渚涚數寮傚父</span>
+ </div>
+ <div class="item-content">
+ <div class="item-stats">
+ <span class="stats-label">寮傚父搴楅摵鍗犳瘮锛�</span>
+ <span class="stats-value">{{ exception1.length }} /{{ shopsTotal }}</span>
+ <span class="stats-percent"
+ >({{ ((exception1.length / shopsTotal) * 100).toFixed(1) }}%)</span
+ >
+ </div>
+ <div class="item-percent">
+ 寮傚父鏁板崰姣旓細{{ ((exception1Num / exceptionAllNum) * 100).toFixed(1) }}%
+ </div>
+ </div>
+ <hr class="item-divider" />
+ <div class="item-shops">
+ <el-scrollbar :height="scrollbarHeight">
+ <el-space wrap>
+ <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-space>
+ </el-scrollbar>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="8">
+ <div class="analysis-item">
+ <div class="item-header">
+ <img src="@/assets/offline.jpg" class="item-icon" />
+ <span class="item-title">璁惧鎴栫綉缁滃紓甯�</span>
+ </div>
+ <div class="item-content">
+ <div class="item-stats">
+ <span class="stats-label">寮傚父搴楅摵鍗犳瘮锛�</span>
+ <span class="stats-value">{{ exception2.length }} /{{ shopsTotal }}</span>
+ <span class="stats-percent"
+ >({{ ((exception2.length / shopsTotal) * 100).toFixed(1) }}%)</span
+ >
+ </div>
+ <div class="item-percent">寮傚父鏁板崰姣旓細{{ connectException }}%</div>
+ </div>
+ <hr class="item-divider" />
+ <div class="item-shops">
+ <el-scrollbar :height="scrollbarHeight">
+ <el-space wrap>
+ <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-space>
+ </el-scrollbar>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ </el-card>
+ </div>
- <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>
+ <!-- 寮傚父鏁版嵁琛ㄦ牸 -->
+ <div class="table-container">
+ <el-collapse v-model="activeNames">
+ <el-collapse-item name="1">
+ <template #title>
+ <div class="collapse-title">
+ <h4 class="table-title">棰勮璁板綍</h4>
+ </div>
+ </template>
+ <el-card v-show="!isNoData">
+ <el-table
+ ref="tableH"
+ v-loading="loading"
+ :data="displayData"
+ style="width: 100%"
+ border
+ :cell-class-name="tableCellClassName"
+ :show-overflow-tooltip="true"
+ >
+ <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-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" width="90">
+ <!-- <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" width="120">
+ <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" width="80">
+ <!-- <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" width="120">
+ <template #default="{ row }">
+ <el-button type="primary" size="small" @click="showDrawer(row)">鏌ョ湅</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="pagination-container">
+ <el-pagination
+ ref="h4"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :total="total"
+ :page-size="pageSize"
+ layout="total, prev, pager, next, jumper"
+ />
+ </div>
+ </el-card>
+ <el-empty v-show="isNoData" :image-size="200" />
+ </el-collapse-item>
+ </el-collapse>
+ </div>
- <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>
+ <el-dialog v-model="centerDialogVisible" draggable align-center class="detail-dialog">
+ <template #header>
+ <div class="dialog-header">
+ <div class="dialog-title">
+ <span>搴楅摵鍚嶏細{{ rowShopName }}</span>
+ <span class="dialog-info"
+ >寮傚父绫诲瀷锛�
+ <span v-if="rowExceptionType == '0'">娌圭儫鏁版嵁瓒呮爣</span>
+ <span v-else-if="rowExceptionType == '1'">渚涚數寮傚父</span>
+ <span v-else-if="rowExceptionType == '2'">鎺夌嚎</span>
+ </span>
+ <div class="dialog-time">寮傚父鏃堕棿娈碉細{{ rowBeginTime }} ~ {{ rowEndTime }}</div>
+ </div>
+ <div class="dialog-actions">
+ <el-button
+ type="primary"
+ :loading="button.preButton"
+ :disabled="isPreCantouch || banTouch"
+ @click="getPreviousRowData"
+ >涓婃潯寮傚父</el-button
+ >
+ <el-button
+ type="primary"
+ :loading="button.afterButton"
+ :disabled="isNextCantouch || banTouch"
+ @click="getNextRowData"
+ >涓嬫潯寮傚父</el-button
+ >
+ </div>
</div>
+ </template>
+
+ <ExceptionTypeLineChart
+ :option="option"
+ :is-open-dialog="centerDialogVisible"
+ v-loading="chartLoading"
+ ></ExceptionTypeLineChart>
+
+ <div class="dialog-table-container">
+ <el-table :data="exceedingData" height="360" border style="margin-top: 20px">
+ <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>
- <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 class="dialog-footer">
+ <el-tag type="success" effect="dark" round
+ ><span 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>
</div>
- </template>
-
- <!-- 瓒呮爣鏁版嵁鏃� -->
- <!-- 鎶樼嚎鍥� -->
-
- <!-- 鎺夌嚎 -->
- <!-- <div
- ref="ref"
- v-show="isOfflineShow"
- style="
- width: 100%;
- height: 300px;
- /* min-width: 100px; */
- margin-bottom: 20px;
- margin-left: 10px;
- min-width: 350px;
- "
- ></div> -->
-
- <ExceptionTypeLineChart
- :option="option"
- :is-open-dialog="centerDialogVisible"
- v-loading="chartLoading"
- ></ExceptionTypeLineChart>
-
- <!-- -->
- <div style="margin-top: 40px; margin-bottom: 5px; border: 1px">
- <el-table :data="exceedingData" height="360" border style="margin-top: 25px">
- <el-table-column
- 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>
+ </el-dialog>
+ </div>
</div>
</template>
<script>
import { defineAsyncComponent } from 'vue'
+import { ElMessage } from 'element-plus'
import ExceptionType from '@/sfc/ExceptionType.vue'
import TimeSelect from '@/sfc/TimeSelect.vue'
import ExceptionText from '@/sfc/ExceptionText.vue'
@@ -486,7 +465,11 @@
selectedRowIndex: -1,
// 榛樿閫夋嫨鐨勬姌鍙犻潰鏉跨紪鍙�
- activeNames: ['1'],
+ activeNames: [],
+ // 鎼滅储鍖哄煙鎶樺彔鐘舵��
+ activeSearchNames: [],
+ // 鎼滅储鍖哄煙鏄惁灞曞紑
+ isSearchExpanded: false,
// 寮傚父鏃剁殑琛ㄦ牸
abnormalTb: [],
// 寮傚父鐨勮捣姝㈡椂闂�
@@ -500,6 +483,8 @@
exception1: [],
// 淇濆瓨鐫�寮傚父绫诲瀷2瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿
exception2: [],
+ // 寮傚父搴楅摵婊氬姩鍖哄煙楂樺害
+ scrollbarHeight: 250,
// 鍔犺浇鍔ㄧ敾
loading: false,
// 鎶藉眽鍔犺浇鍔ㄧ敾
@@ -572,7 +557,6 @@
this.isNextCantouch = false
}
},
-
// 褰撻�夋嫨鐨勬椂闂村彂鐢熷彉鍖栨椂锛屽紓甯稿垎鏋愰儴鍒嗙殑寮傚父搴楅摵鏁伴噺鍚屾鍙樺寲
beginTime() {
this.getShopNames()
@@ -611,6 +595,37 @@
window.addEventListener('resize', this.updateChart)
},
methods: {
+ // 澶勭悊鎼滅储鍖哄煙鎶樺彔鍙樺寲
+ handleSearchCollapseChange(val) {
+ this.isSearchExpanded = val.length > 0
+ },
+ // 鑾峰彇鎼滅储鏉′欢鎽樿
+ getSearchSummary() {
+ let summary =
+ '鏃堕棿: ' +
+ (this.beginTime ? this.beginTime.substring(0, 10) : '鍏ㄩ儴') +
+ ' 鑷� ' +
+ (this.endTime ? this.endTime.substring(0, 10) : '鍏ㄩ儴')
+ summary +=
+ ' | 搴楅摵: ' +
+ (this.deviceId[1]
+ ? this.deviceInfo.find((item) => item.diCode === this.deviceId[1])?.diName || '宸查�夋嫨'
+ : '鍏ㄩ儴')
+ if (this.exceptionValue && this.exceptionValue.length > 0) {
+ const exceptionTypes = {
+ 0: '娌圭儫娴撳害瓒呮爣',
+ 1: '渚涚數寮傚父',
+ 2: '璁惧鎴栫綉缁滃紓甯�',
+ }
+ const selectedTypes = this.exceptionValue
+ .map((val) => exceptionTypes[val] || val)
+ .join(', ')
+ summary += ' | 寮傚父绫诲瀷: ' + selectedTypes
+ } else {
+ summary += ' | 寮傚父绫诲瀷: 鍏ㄩ儴'
+ }
+ return summary
+ },
// 鍔熻兘锛氬璇濇琛ㄦ牸搴忓彿閫掑
// 鏃堕棿锛�2023-8-17
indexMethod(index) {
@@ -632,7 +647,7 @@
//鍔熻兘锛� 鍔ㄦ�佽绠楄〃鏍奸珮搴�
calcTableHeight() {
- const h1 = this.$refs.h1.$el.offsetHeight
+ const h1 = this.$refs.h1.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))`
},
@@ -924,6 +939,9 @@
// 绉婚櫎绌烘暟鎹姸鎬�
this.isNoData = false
this.handleCurrentChange(1)
+ // 鐐瑰嚮鏌ヨ鍚庢姌鍙犳悳绱㈠尯鍩�
+ this.activeSearchNames = []
+ this.isSearchExpanded = false
})
},
handleSizeChange(val) {
@@ -1429,6 +1447,15 @@
this.total = this.abnormalData.length
// 榛樿鏄剧ず绗竴椤�
this.handleCurrentChange(1)
+ this.activeNames = ['1']
+ // 婊氬姩鍒板紓甯告暟鎹〃鏍间綅缃�
+ this.$nextTick(() => {
+ if (this.$refs.tableH) {
+ setTimeout(() => {
+ this.$refs.tableH.$el.scrollIntoView({ behavior: 'smooth' })
+ }, 200)
+ }
+ })
},
// 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙�
@@ -1530,12 +1557,253 @@
</script>
<style scoped>
-.header-container {
- display: flex;
- margin-left: 20px;
- /* flex-wrap: wrap;
- align-items: center; */
+/* 鍏ㄥ眬瀹瑰櫒 */
+.data-exception-container {
+ padding: 20px;
+ background-color: #f5f7fa;
+ min-height: 100vh;
}
+
+/* 鎼滅储鍖哄煙 */
+.search-container {
+ background-color: white;
+ border-radius: 8px;
+ padding: 20px;
+ margin-bottom: 20px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.search-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+}
+
+.search-header h3 {
+ margin: 0;
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+}
+
+.search-summary {
+ font-size: 14px;
+ color: #666;
+ flex: 1;
+ margin-left: 20px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.search-form {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ flex: 1;
+}
+
+.form-row {
+ display: flex;
+ align-items: flex-start;
+ gap: 16px;
+ flex-wrap: wrap;
+}
+
+.form-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ flex: 1;
+ min-width: 200px;
+}
+
+.form-item.full-width {
+ flex: 100%;
+}
+
+.form-label {
+ font-weight: bolder;
+ white-space: nowrap;
+}
+
+.form-actions {
+ margin-left: auto;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.summary-info {
+ text-align: right;
+ font-size: 14px;
+ color: #999;
+ margin-top: 8px;
+}
+
+/* 寮傚父鍒嗘瀽 */
+.analysis-container {
+ background-color: white;
+ border-radius: 8px;
+ padding: 20px;
+ margin-bottom: 20px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.collapse-title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.collapse-header {
+ margin: 0;
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+}
+
+.header-icon {
+ color: #1890ff;
+}
+
+.analysis-card {
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+.analysis-item {
+ display: flex;
+ flex-direction: column;
+}
+
+.item-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 12px;
+}
+
+.item-icon {
+ width: 24px;
+ height: 24px;
+}
+
+.item-title {
+ font-size: 14px;
+ font-weight: 600;
+ color: #333;
+}
+
+.item-content {
+ flex: 1;
+ margin-bottom: 12px;
+}
+
+.item-stats {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 4px;
+}
+
+.stats-label {
+ font-size: 13px;
+ color: #666;
+}
+
+.stats-value {
+ font-size: 18px;
+ font-weight: 600;
+ color: #333;
+}
+
+.stats-percent {
+ font-size: 13px;
+ color: #999;
+}
+
+.item-percent {
+ font-size: 13px;
+ color: #666;
+ margin-top: 4px;
+}
+
+.item-divider {
+ margin: 10px 0;
+ border: 0.5px solid #f0f0f0;
+}
+
+.item-shops {
+ flex: 1;
+}
+
+/* 琛ㄦ牸鍖哄煙 */
+.table-container {
+ background-color: white;
+ border-radius: 8px;
+ padding: 20px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.table-title {
+ margin: 0 0 16px 0;
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+}
+
+.pagination-container {
+ margin-top: 16px;
+ display: flex;
+ justify-content: flex-end;
+}
+
+/* 瀵硅瘽妗� */
+.detail-dialog {
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+.dialog-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ width: 100%;
+}
+
+.dialog-title {
+ font-size: 16px;
+ color: #333;
+}
+
+.dialog-info {
+ margin-left: 24px;
+ color: #666;
+}
+
+.dialog-time {
+ margin-top: 8px;
+ font-size: 14px;
+ color: #666;
+}
+
+.dialog-actions {
+ display: flex;
+ gap: 8px;
+}
+
+.dialog-table-container {
+ margin-top: 20px;
+}
+
+.dialog-footer {
+ margin-top: 20px;
+ text-align: right;
+}
+
+/* 閫氱敤鏍峰紡 */
.ellipsis {
white-space: nowrap;
overflow: hidden;
@@ -1543,148 +1811,127 @@
}
.iconExcel {
- font-size: 25px;
- margin-left: 20px;
- bottom: -6px;
+ font-size: 20px;
+ cursor: pointer;
+ color: #1890ff;
}
-/* 鍙紶鏍囩澶村彉涓哄彲鐐瑰嚮鐘舵�� */
.clickable {
cursor: pointer;
}
-.card-header {
- margin: 0;
-}
-body {
- margin: 0;
-}
-.exception-divider-rowline {
- margin: 10px 0px;
-}
-/* 寮傚父鍒嗘瀽鏁版嵁涓庢寜閽� */
-.exception-container {
- display: flex;
-}
-.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 {
- margin-left: 5px;
- font-size: 18px;
-}
-.collapse-header-text {
- margin-top: 5px;
- font-size: 14px;
- color: gray;
-}
-
-.box-card-label {
- 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;
- 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 {
- 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-table__row .exceeding-row {
+ background-color: #fff1f0;
+ color: #cf1322;
}
+
+:deep().el-table__row .abnormal-power-supply {
+ background-color: #fffbe6;
+ color: #d48806;
+}
+
+:deep().el-table__row .disconnect {
+ background-color: #e6f7ff;
+ color: #1890ff;
+}
+
+/* 琛ㄦ牸鏍峰紡 */
+:deep().el-table {
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+:deep().el-table th {
+ background-color: #fafafa;
+ font-weight: 600;
+}
+
+/* 鎸夐挳鏍峰紡 */
+:deep().el-button--primary {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+
+:deep().el-button--primary:hover {
+ background-color: #40a9ff;
+ border-color: #40a9ff;
+}
+
+/* 鍗＄墖鏍峰紡 */
+:deep().el-card {
+ border-radius: 8px;
+ border: 1px solid #f0f0f0;
+}
+
+/* 鍝嶅簲寮忚皟鏁� */
+@media (max-width: 1200px) {
+ .search-form {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .form-actions {
+ margin-left: 0;
+ margin-top: 12px;
+ }
+}
+
+/* 鍘熸湁鏍峰紡鍏煎 */
+.header-container {
+ display: flex;
+ margin-left: 0;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 16px;
+}
+
+.describe-info {
+ margin-top: 0;
+ font-weight: 500;
+ white-space: nowrap;
+ color: #666;
+}
+
+.table-page {
+ margin-left: 0;
+}
+
+.table-text {
+ font-size: 16px;
+ margin: 0 0 16px 0;
+ font-weight: 600;
+ color: #333;
+}
+
.el-collapse {
- margin-left: 20px;
+ margin-left: 0;
}
-:deep().el-collapse .el-collapse-item__content {
- padding-bottom: 0px;
-}
+
.box-card {
- height: 190px;
+ height: auto;
+ min-height: 190px;
}
.sub-box-card {
- height: 100px;
+ height: auto;
+ min-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