From c23ac06446a9a1edc41cc13723e5d0b8eabdfd63 Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期三, 16 七月 2025 17:30:50 +0800 Subject: [PATCH] 2025.7.16 动态溯源新增合并异常 --- src/views/sourcetrace/component/ClueRecordItem.vue | 191 +++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 159 insertions(+), 32 deletions(-) diff --git a/src/views/sourcetrace/component/ClueRecordItem.vue b/src/views/sourcetrace/component/ClueRecordItem.vue index 28f2918..25a1b59 100644 --- a/src/views/sourcetrace/component/ClueRecordItem.vue +++ b/src/views/sourcetrace/component/ClueRecordItem.vue @@ -1,46 +1,135 @@ <template> <div :class="'wrapper' + (item._selected ? ' wrapper-select' : '')"> - <div v-if="item._type == '1'"> - <el-row justify="space-between"> - <el-space> - <el-tag v-if="noWarn" type="info" effect="dark" size="small" - >寮傚父</el-tag - > - <el-tag v-else type="warning" effect="dark" size="small">寮傚父</el-tag> - <el-text type="primary">{{ - item.pollutedData.startTime + ' - ' + item.pollutedData.endTime - }}</el-text> - </el-space> - <el-link type="primary" @click="emits('open', item)"> 璇︽儏 </el-link> - </el-row> - <el-col :span="24"> - <el-text type="primary">{{ - item.pollutedData.factorName + - formatException(item.pollutedData.exceptionType) + - '锛�' + - formatDistanceType(item.pollutedArea.distanceType) - }}</el-text> - <el-text :type="noWarn ? 'primary' : 'warning'"> - {{ - item.pollutedSource.sceneList.length == 0 - ? '鏈壘鍒板彲鐤戞薄鏌撴簮' - : '鎵惧埌' + item.pollutedSource.sceneList.length + '涓彲鐤戞薄鏌撴簮' - }} - </el-text> + <el-row v-if="item._type == '1'"> + <el-col :span="3"> + <el-tag :type="noWarn ? 'info' : 'warning'" effect="dark" size="small" + >婧簮</el-tag + > </el-col> - <!-- <el-col :span="2"> </el-col> --> - </div> + <el-col :span="21"> + <el-row justify="space-between"> + <el-space> + <el-text type="info" size="default"> + <el-icon><Timer /></el-icon> + {{ + item.pollutedData._startTime + + ' - ' + + item.pollutedData._endTime + }} + </el-text> + </el-space> + <el-link type="info" @click="emits('open', item)"> 璇︽儏 </el-link> + </el-row> + <div> + <el-tag + effect="plain" + type="info" + style="color: black" + size="small" + hit + round + class="m-r-4" + > + <div + v-html="formatFactorName(item.pollutedData.statisticMap)" + ></div> + </el-tag> + <el-text type="info"> + {{ item.pollutedData.exception + '锛�' }} + </el-text> + <el-text type="info">{{ + formatDistanceType(item.pollutedArea.distanceType) + }}</el-text> + <el-text :type="noWarn ? 'info' : 'warning'"> + {{ + item.pollutedSource.sceneList.length == 0 + ? '鏈壘鍒伴闄╂簮' + : '鎵惧埌' + item.pollutedSource.sceneList.length + '涓闄╂簮' + }} + </el-text> + </div> + <div v-if="item.pollutedSource.sceneList.length > 0"> + <div v-for="s in item.pollutedSource.sceneList" :key="s.guid"> + <img style="width: 24px" :src="sceneIcon(s.typeId)" :alt="s.type" /> + <el-text + type="warning" + tag="ins" + truncated + class="text-link" + @click="handleSetCenter(item, s)" + > + {{ s.name }} + </el-text> + </div> + </div> + </el-col> + </el-row> <div v-else-if="item._type == '2'"> <el-row justify="space-between"> <el-tag type="danger" effect="dark" size="small">绾跨储</el-tag> - <el-link type="primary" @click="emits('open')"> 璇︽儏 </el-link> + <el-link type="info" @click="emits('open')"> 璇︽儏 </el-link> </el-row> - <el-text type="danger">{{ item.advice }}</el-text> + <el-space> + <el-icon color="#F56C6C" :size="40"><WarnTriangleFilled /></el-icon> + <el-text type="info">{{ item.advice }}</el-text> + </el-space> </div> + <el-row v-else-if="item._type == '3'"> + <el-col :span="3"> + <el-tag type="primary" effect="dark" size="small">鎻愰啋</el-tag> + </el-col> + <el-col :span="21"> + <el-row justify="space-between"> + <el-space> + <el-text type="info" size="default"> + <el-icon><Timer /></el-icon> + {{ + item.pollutedData._startTime + + ' - ' + + item.pollutedData._endTime + }} + </el-text> + </el-space> + <el-link type="info" @click="emits('open', item)"> 璇︽儏 </el-link> + </el-row> + <div> + <el-tag + effect="plain" + type="info" + size="small" + style="color: black" + hit + round + class="m-r-4" + > + <div + v-html="formatFactorName(item.pollutedData.statisticMap)" + ></div> + </el-tag> + <el-text type="info">{{ item.pollutedData.exception }}</el-text> + </div> + <div v-if="item.pollutedSource.sceneList.length > 0"> + <div v-for="s in item.pollutedSource.sceneList" :key="s.guid"> + <img style="width: 24px" :src="sceneIcon(s.typeId)" :alt="s.type" /> + <el-text + type="warning" + tag="ins" + truncated + class="text-link" + @click="handleSetCenter(item, s)" + > + {{ s.name }} + </el-text> + </div> + </div> + </el-col> + </el-row> </div> </template> <script setup> import { computed } from 'vue'; +import { sceneTypes, sceneIcon } from '@/constant/scene-types'; +import MapUtil from '@/utils/map/util'; const props = defineProps({ item: Object @@ -66,7 +155,7 @@ function formatDistanceType(value) { switch (value) { case 'TYPE1': - return '50绫充互鍐�'; + return '100绫充互鍐�'; case 'TYPE2': return '50绫� - 500绫充互鍐�'; case 'TYPE3': @@ -77,6 +166,40 @@ default: break; } +} + +function formatFactorName(statisticMap) { + const mapName = (n) => { + switch (n) { + case 'PM25': + return 'PM<sub>2.5</sub>'; + case 'PM10': + return 'PM<sub>10</sub>'; + case 'NO2': + return 'NO<sub>2</sub>'; + case 'H2S': + return 'H<sub>2</sub>S'; + case 'SO2': + return 'SO<sub>2</sub>'; + case 'O3': + return 'O<sub>3</sub>'; + case 'VOC': + return 'VOC<sub>s</sub>'; + default: + return ''; + } + }; + let name = []; + for (const key in statisticMap) { + const value = statisticMap[key]; + name.push(mapName(value.factorName)); + } + return name.join('銆�'); +} + +function handleSetCenter(item, scene) { + MapUtil.setCenter([scene.longitude, scene.latitude], true); + emits('open', item); } </script> <style scoped> @@ -93,4 +216,8 @@ .no-warning { color: var(--el-text-color-disabled) !important; } +.text-link { + width: 90%; + cursor: pointer; +} </style> -- Gitblit v1.9.3