From 08ffcf9d7ffafaa82d8de7f9b5fcfdb49e9c3688 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 05 十一月 2025 17:33:54 +0800
Subject: [PATCH] 动态溯源 1. 修复CO因子文本没有正常显示的问题；
---
src/views/sourcetrace/component/PollutedExceptionItem.vue | 128 ++++++++++++++++++++++++++----------------
1 files changed, 78 insertions(+), 50 deletions(-)
diff --git a/src/views/sourcetrace/component/PollutedExceptionItem.vue b/src/views/sourcetrace/component/PollutedExceptionItem.vue
index 9351fb8..a2e9fdd 100644
--- a/src/views/sourcetrace/component/PollutedExceptionItem.vue
+++ b/src/views/sourcetrace/component/PollutedExceptionItem.vue
@@ -11,10 +11,12 @@
<template #content>
<el-scrollbar class="clue-card">
<el-row justify="space-between" align="bottom">
- <el-text type="warning" size="large"> 鍏稿瀷鍒囩墖 </el-text>
+ <el-text type="warning" style="font-weight: 600" size="large">
+ 婧簮鍒囩墖
+ </el-text>
<el-link
- type="primary"
+ type="info"
:underline="true"
@click="showMarksAndPolygon(item)"
>
@@ -23,7 +25,7 @@
</el-link>
</el-row>
<div>
- <el-text type="primary">
+ <el-text type="info">
<el-icon><Timer /></el-icon>
{{
'鍒囩墖鏃舵锛�' +
@@ -34,56 +36,64 @@
</el-text>
</div>
<div>
- <el-text type="primary">
+ <el-text type="info">
<el-icon><MapLocation /></el-icon>
- {{ '椋庨櫓鍖哄煙锛�' + item.pollutedArea.address }}
+ {{ '椋庨櫓鍖哄煙锛�' + riskRegion }}
</el-text>
</div>
<!-- <div>
- <el-text type="primary">
+ <el-text type="info">
婧簮璺濈锛歿{ formatDistanceType(item.pollutedArea.distanceType) }}
</el-text>
</div> -->
<div>
- <el-text type="primary">
+ <el-text type="info">
<el-icon><Bell /></el-icon>
寮傚父绫诲瀷锛歿{ item.pollutedData.exception }}
</el-text>
</div>
- <el-row style="border-top: 1px solid white">
- <el-col :span="6">
- <el-statistic
- title="绐佸彉鍥犲瓙"
- :value="item.pollutedData.factorName"
- />
- </el-col>
- <el-col :span="6">
- <el-statistic
- v-if="item.pollutedData.exceptionType == 4"
- title="鍙樺寲骞呭害"
- :value="formatPercentage(item.pollutedData.avgPer)"
- />
- <el-statistic
- v-else-if="item.pollutedData.exceptionType == 9"
- title="鍙樺寲閫熺巼"
- :value="formatChangeRate(item.pollutedData.avgRate)"
- suffix=""
- />
- </el-col>
- <el-col :span="6">
- <el-statistic title="鍙戠敓娆℃暟" :value="item.pollutedData.times" />
- </el-col>
- <el-col :span="6">
- <el-statistic
- title="骞冲潎椋庨��"
- :value="item.pollutedData.windSpeed"
- suffix="m/s"
- />
- </el-col>
- </el-row>
+ <div v-for="s in item.pollutedData.statisticMap" :key="s.factorId">
+ <el-row style="border-top: 1px solid white">
+ <el-col :span="6">
+ <el-statistic title="绐佸彉鍥犲瓙" :value="s.factorName" />
+ </el-col>
+ <el-col :span="6">
+ <el-statistic
+ v-if="item.pollutedData.exceptionType == 4"
+ title="鍙樺寲骞呭害"
+ :value="formatPercentage(s.avgPer)"
+ />
+ <el-statistic
+ v-else-if="item.pollutedData.exceptionType == 9"
+ title="鍙樺寲閫熺巼"
+ :value="formatChangeRate(s.avgRate)"
+ suffix=""
+ />
+ </el-col>
+ <el-col :span="6">
+ <el-statistic title="鍙戠敓娆℃暟" :value="item.pollutedData.times" />
+ </el-col>
+ <el-col :span="6">
+ <el-statistic
+ title="骞冲潎椋庨��"
+ :value="item.pollutedData.windSpeed"
+ :precision="1"
+ suffix="m/s"
+ />
+ </el-col>
+ </el-row>
+ <RealTimeLineChart
+ v-for="(item1, index1) in s._chartOptions"
+ :key="index1"
+ :model-value="item1"
+ chart-height="80px"
+ :y-min-interval="20"
+ :exception-index-arr="exceptionIndexArr"
+ ></RealTimeLineChart>
+ </div>
<el-row justify="space-between">
<!-- <el-link
- type="primary"
+ type="info"
underline
@click="showMarksAndPolygon(item)"
>
@@ -96,17 +106,10 @@
</el-link> -->
</el-row>
<!-- <div style="width: 320px; height: 80px"> -->
- <RealTimeLineChart
- v-for="(item1, index1) in item._chartOptions"
- :key="index1"
- :model-value="item1"
- chart-height="80px"
- :y-min-interval="20"
- ></RealTimeLineChart>
<!-- </div> -->
<div class="border-dashed">
<el-icon color="#ffbc58" size="20"><WarningFilled /></el-icon>
- <el-text type="primary" tag="b">
+ <el-text type="info" tag="b">
{{ item.pollutedSource.conclusion }}
</el-text>
</div>
@@ -121,11 +124,36 @@
</CardDialog> -->
</template>
<script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
const props = defineProps({
modelValue: Boolean,
item: Object
+});
+
+const exceptionIndexArr = computed(() => {
+ const indexArr = [];
+ props.item.pollutedData.dataVoList.forEach((e) => {
+ const i = props.item.pollutedData.historyDataList.findIndex(
+ (v) => v.time == e.time
+ );
+ indexArr.push([i - 1 < 0 ? 0 : i - 1, i]);
+ });
+ return indexArr;
+});
+
+const riskRegion = computed(() => {
+ const _riskRegion = [];
+ if (props.item.pollutedArea.address) {
+ _riskRegion.push(props.item.pollutedArea.address);
+ }
+ if (props.item.pollutedArea.streetNumber) {
+ _riskRegion.push(props.item.pollutedArea.streetNumber);
+ }
+ if (props.item.pollutedArea.roadinter) {
+ _riskRegion.push(props.item.pollutedArea.roadinter);
+ }
+ return _riskRegion.join('锛�');
});
const emits = defineEmits(['showMarksAndPolygon', 'update:modelValue']);
@@ -159,7 +187,7 @@
}
</script>
<style scoped>
-:deep(.el-statistic) {
+/* :deep(.el-statistic) {
--el-statistic-title-color: rgb(215, 215, 215);
--el-statistic-content-color: white;
}
@@ -170,7 +198,7 @@
:deep(.el-link) {
--el-link-text-color: #23dad1;
-}
+} */
.scrollbar {
min-width: 300px;
--
Gitblit v1.9.3