From 723be8e0896fbf7e9456a5defb44911a3d0cbc27 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 12 三月 2026 17:34:55 +0800
Subject: [PATCH] 2026.3.12
---
src/views/monitor/DataException.vue | 1058 ++++++++++++++++++++++++++++++++++------------------------
1 files changed, 614 insertions(+), 444 deletions(-)
diff --git a/src/views/monitor/DataException.vue b/src/views/monitor/DataException.vue
index 159f6c5..b678d8a 100644
--- a/src/views/monitor/DataException.vue
+++ b/src/views/monitor/DataException.vue
@@ -1,92 +1,84 @@
<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 class="data-exception-container">
+ <!-- 鎼滅储鍖哄煙 -->
+ <div ref="h1" class="search-container">
+ <!-- <div class="search-header">
+ <h3>鏌ヨ琛ㄦ牸</h3>
+ </div> -->
+ <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="form-item">
+ <ExceptionType @submitExceptionType="(val) => (exceptionValue = val)">
+ </ExceptionType>
+ </div>
+ </div>
+ <div class="form-row">
+ <div class="form-item full-width">
+ <TimeSelect @submit-time="giveTime" :useNewStyle="true"></TimeSelect>
+ </div>
+ </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>
- <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
- >
+ </div>
- <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="analysis-container">
+ <el-collapse v-model="activeNames">
<el-collapse-item name="1">
<template #title>
- <el-tooltip class="box-item" effect="dark" content="鐐瑰嚮鍙姌鍙�" placement="right-start">
+ <div class="collapse-title">
<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>
</template>
- <el-card class="box-card">
- <el-row :gutter="25">
+ <el-card class="analysis-card">
+ <el-row :gutter="24">
<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="font-size: 17px">
- ({{ ((exception0.length / shopsTotal) * 100).toFixed(1) }}%)</span
- >
- {{ shopsTotal }}
- <span class="right-text">
+ <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) }}%
- </span>
- </el-scrollbar>
- </div>
-
- <hr />
- <div class="box-card-butcontainer">
- <el-card class="sub-box-card">
- <el-scrollbar max-height="70px">
+ </div>
+ </div>
+ <hr class="item-divider" />
+ <div class="item-shops">
+ <el-scrollbar max-height="80px">
<ExceptionText
v-for="(item, index) in exception0"
:key="item"
@@ -100,39 +92,30 @@
<span v-if="index < exception0.length - 1" class="text-blank">,</span>
</ExceptionText>
</el-scrollbar>
- </el-card>
+ </div>
</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">
+ <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) }}%
- </span>
- </el-scrollbar>
- </div>
-
- <hr />
-
- <div>
- <el-card class="sub-box-card">
- <el-scrollbar max-height="70px">
+ </div>
+ </div>
+ <hr class="item-divider" />
+ <div class="item-shops">
+ <el-scrollbar max-height="80px">
<ExceptionText
v-for="(item, index) in exception1"
:key="item"
@@ -146,35 +129,28 @@
<span v-if="index < exception1.length - 1" class="text-blank">,</span>
</ExceptionText>
</el-scrollbar>
- </el-card>
+ </div>
</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">
+ <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 max-height="80px">
<ExceptionText
v-for="(item, index) in exception2"
:key="item"
@@ -188,212 +164,198 @@
<span v-if="index < exception2.length - 1" class="text-blank">,</span>
</ExceptionText>
</el-scrollbar>
- </el-card>
+ </div>
</div>
</el-col>
</el-row>
</el-card>
</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>
-
- <el-table-column prop="devId" label="璁惧缂栧彿" align="center">
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.devId">
- <div class="cell ellipsis">{{ row.devId }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
-
- <el-table-column prop="diSupplier" label="渚涘簲鍟�" align="center">
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.diSupplier">
- <div class="cell ellipsis">{{ row.diSupplier }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
-
- <el-table-column prop="exception" label="寮傚父鍒嗙被" align="center">
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.exception">
- <div class="cell ellipsis">{{ row.exception }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
- <el-table-column label="寮傚父绫诲瀷" align="center">
- <template #default="{ row }">
- <span v-if="row.exceptionType == '0'">娌圭儫鏁版嵁瓒呮爣</span>
- <span v-else-if="row.exceptionType == '1'">鐤戜技渚涚數寮傚父</span>
- <span v-else-if="row.exceptionType == '2'">鎺夌嚎</span>
- </template>
- </el-table-column>
- <el-table-column prop="region" label="鍦板尯" align="center">
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.region">
- <div class="cell ellipsis">{{ row.region }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
-
- <el-table-column prop="beginTime" label="寮�濮嬫椂闂�" align="center">
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.beginTime">
- <div class="cell ellipsis">{{ row.beginTime }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
- <el-table-column prop="endTime" label="缁撴潫鏃堕棿" align="center">
- <template #default="{ row }">
- <el-tooltip effect="dark" :content="row.endTime">
- <div class="cell ellipsis">{{ row.endTime }}</div>
- </el-tooltip>
- </template>
- </el-table-column>
- <el-table-column label="鎿嶄綔" align="center">
- <template #default="{ row }">
- <el-button type="primary" class="table-button" @click="showDrawer(row)"
- >鏌ョ湅璇︽儏</el-button
- >
- </template>
- </el-table-column>
- </el-table>
-
- <el-pagination
- ref="h4"
- background
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :total="total"
- :page-size="pageSize"
- layout="total,prev, pager, next, jumper"
- />
- </el-card>
- <el-empty v-show="isNoData" :image-size="200" />
- <!-- 瀵硅瘽妗� -->
- <div>
- <el-dialog v-model="centerDialogVisible" draggable align-center>
- <template #header>
- <div style="font-size: 17px">
- 搴楅摵鍚嶏細{{ rowShopName }}
- <span style="margin-left: 40px">寮傚父绫诲瀷锛�</span>
- <span v-if="rowExceptionType == '0'">娌圭儫鏁版嵁瓒呮爣</span>
- <span v-else-if="rowExceptionType == '1'">渚涚數寮傚父</span>
- <span v-else-if="rowExceptionType == '2'">鎺夌嚎</span>
- <div style="margin-top: 10px">
- 寮傚父鏃堕棿娈碉細{{ rowBeginTime }} ~
- {{ rowEndTime }}
- </div>
- </div>
-
- <div class="dialog-button-position">
- <el-button
- type="danger"
- :loading="button.preButton"
- :disabled="isPreCantouch || banTouch"
- @click="getPreviousRowData"
- >涓婃潯寮傚父</el-button
- >
- <el-button
- type="danger"
- :loading="button.afterButton"
- :disabled="isNextCantouch || banTouch"
- @click="getNextRowData"
- >涓嬫潯寮傚父</el-button
- >
- </div>
- </template>
-
- <!-- 瓒呮爣鏁版嵁鏃� -->
- <!-- 鎶樼嚎鍥� -->
-
- <!-- 鎺夌嚎 -->
- <!-- <div
- ref="ref"
- v-show="isOfflineShow"
- style="
- width: 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
- />
+ <!-- 寮傚父鏁版嵁琛ㄦ牸 -->
+ <div class="table-container">
+ <h4 class="table-title">寮傚父鏁版嵁</h4>
+ <el-card v-show="!isNoData">
+ <el-table
+ ref="tableH"
+ v-loading="loading"
+ :data="displayData"
+ style="width: 100%"
+ border
+ :height="tableHeight"
+ :cell-class-name="tableCellClassName"
+ >
+ <el-table-column prop="diName" label="搴楅摵鍚嶇О" 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">
+ <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" width="120">
+ <template #default="{ row }">
+ <el-button type="primary" size="small" @click="showDrawer(row)">鏌ョ湅</el-button>
+ </template>
+ </el-table-column>
</el-table>
- </div>
+ <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" />
+ </div>
- <el-tag type="success" class="mx-1" effect="dark" round
- ><span class="table-line-lable" v-show="rowExceptionType == '0'">寮傚父璁板綍锛� </span>
- <span v-show="rowExceptionType == '1' || rowExceptionType == '2'">缂哄け鏁版嵁锛�</span>
- <span class="table-line-num">{{ exceptionTotal }}鏉�</span>
- <span v-show="rowExceptionType === '1' || rowExceptionType === '2'"> (閫昏緫璁＄畻)</span>
- </el-tag>
- </el-dialog>
+ <!-- 瀵硅瘽妗� -->
+ <div>
+ <el-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-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>
+ </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'
@@ -632,7 +594,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))`
},
@@ -1530,12 +1492,241 @@
</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 {
+ margin-bottom: 20px;
+}
+
+.search-header h3 {
+ margin: 0;
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+}
+
+.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 {
+ height: 180px;
+ 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 +1734,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