From 5679cbbb630092a197d991cb41997a2d953261e9 Mon Sep 17 00:00:00 2001
From: Riku <risaku@163.com>
Date: 星期三, 11 六月 2025 22:49:07 +0800
Subject: [PATCH] 动态溯源（待完成）
---
src/components/map/MapScene.vue | 2
src/views/sourcetrace/SourceTrace.vue | 50 ++++++-----
src/api/index.js | 8 +-
src/views/sourcetrace/component/PollutedClueItem.vue | 38 +++++++++
src/components.d.ts | 2
src/utils/map/line.js | 5
src/views/realtimemode/RealtimeMode.vue | 8 +
src/views/sourcetrace/UnderwayAdvice.vue | 71 +++++++++++++++++
8 files changed, 149 insertions(+), 35 deletions(-)
diff --git a/src/api/index.js b/src/api/index.js
index efcd5a1..1792861 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -13,10 +13,10 @@
}
if (debug) {
- ip1 = 'http://192.168.0.103:8084/';
- // ip1 = 'http://localhost:8084/';
- ws = `192.168.0.103:9031`;
- // ws = `localhost:9031`;
+ // ip1 = 'http://192.168.0.103:8084/';
+ ip1 = 'http://localhost:8084/';
+ // ws = `192.168.0.103:9031`;
+ ws = `localhost:9031`;
}
const $http = axios.create({
diff --git a/src/components.d.ts b/src/components.d.ts
index 12774c6..4fb05dd 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -39,7 +39,6 @@
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput']
- ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElLink: typeof import('element-plus/es')['ElLink']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
@@ -57,6 +56,7 @@
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
+ ElTag: typeof import('element-plus/es')['ElTag']
ElText: typeof import('element-plus/es')['ElText']
FactorCheckbox: typeof import('./components/monitor/FactorCheckbox.vue')['default']
FactorLegend: typeof import('./components/monitor/FactorLegend.vue')['default']
diff --git a/src/components/map/MapScene.vue b/src/components/map/MapScene.vue
index 4482623..9e0fb06 100644
--- a/src/components/map/MapScene.vue
+++ b/src/components/map/MapScene.vue
@@ -105,7 +105,7 @@
sceneIcon(t),
res,
false,
- false
+ true
);
lableMarkMap.set(key, { show: true, layer });
});
diff --git a/src/utils/map/line.js b/src/utils/map/line.js
index 195e797..a4395dd 100644
--- a/src/utils/map/line.js
+++ b/src/utils/map/line.js
@@ -9,7 +9,8 @@
// eslint-disable-next-line no-undef
return new AMap.Polyline({
path: path,
- strokeStyle: 'solid',
+ // strokeStyle: 'solid',
+ strokeStyle: 'dashed',
isOutline: true,
borderWeight: 1,
outlineColor: 'white',
@@ -21,7 +22,7 @@
}
function drawDirection(path) {
- const polyline = newPolyline(path, '#02ffea');
+ const polyline = newPolyline(path, '#ffd82a');
map.add(polyline);
return polyline;
}
diff --git a/src/views/realtimemode/RealtimeMode.vue b/src/views/realtimemode/RealtimeMode.vue
index 5691c14..c72f699 100644
--- a/src/views/realtimemode/RealtimeMode.vue
+++ b/src/views/realtimemode/RealtimeMode.vue
@@ -137,7 +137,13 @@
deviceCode: this.deviceCode,
// startTime: '2025-01-16 11:34:00',
// endTime: '2025-01-16 11:35:00',
- startTime: '2024-11-27 11:50:41',
+ // startTime: '2025-01-20 12:40:00',
+ // startTime: '2024-12-27 08:30:00',
+ // startTime: '2024-12-13 16:35:00',
+ // startTime: '2024-11-27 11:50:41', // Pm, 涓窛绂诲伐鍦�
+ // startTime: '2024-08-30 15:28:00', // voc 杩戣窛绂绘苯淇�
+ startTime: '2024-07-23 15:22:00',
+ // startTime: '2024-07-23 14:39:00',
endTime: '2025-01-16 11:51:41',
page,
perPage: 10
diff --git a/src/views/sourcetrace/SourceTrace.vue b/src/views/sourcetrace/SourceTrace.vue
index 5286e19..0a122c8 100644
--- a/src/views/sourcetrace/SourceTrace.vue
+++ b/src/views/sourcetrace/SourceTrace.vue
@@ -15,9 +15,14 @@
ref="scrollContentRef"
style="display: flex; width: fit-content"
>
- <template v-for="(item, index) in streams" :key="index">
- <PollutedClueItem :item="item"></PollutedClueItem>
- </template>
+ <TransitionGroup name="list">
+ <div v-for="(item, index) in streams" :key="index">
+ <PollutedClueItem
+ :item="item"
+ @showMarksAndPolygon="showMarksAndPolygon"
+ ></PollutedClueItem>
+ </div>
+ </TransitionGroup>
</div>
</el-scrollbar>
</template>
@@ -187,26 +192,6 @@
});
}
-function formatPercentage(value) {
- return Math.round(value * 100) + '%';
-}
-
-function formatDistanceType(value) {
- switch (value) {
- case 'TYPE1':
- return '50绫�';
- case 'TYPE2':
- return '50绫� - 500绫�';
- case 'TYPE3':
- return '50绫� - 1鍏噷';
- case 'TYPE4':
- return '50绫� - 2鍏噷';
-
- default:
- break;
- }
-}
-
/******************************************************************************************************************** */
/**
@@ -339,3 +324,22 @@
margin-bottom: 4px;
}
</style>
+<style>
+.list-move, /* 瀵圭Щ鍔ㄤ腑鐨勫厓绱犲簲鐢ㄧ殑杩囨浮 */
+.list-enter-active,
+.list-leave-active {
+ transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+ opacity: 0;
+ transform: translateX(30px);
+}
+
+/* 纭繚灏嗙寮�鐨勫厓绱犱粠甯冨眬娴佷腑鍒犻櫎
+ 浠ヤ究鑳藉姝ｇ‘鍦拌绠楃Щ鍔ㄧ殑鍔ㄧ敾銆� */
+.list-leave-active {
+ position: absolute;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/sourcetrace/UnderwayAdvice.vue b/src/views/sourcetrace/UnderwayAdvice.vue
index 183ba28..b8eaf03 100644
--- a/src/views/sourcetrace/UnderwayAdvice.vue
+++ b/src/views/sourcetrace/UnderwayAdvice.vue
@@ -7,7 +7,7 @@
width="400px"
>
<template #default>
- <template v-if="latestResult">
+ <!-- <template v-if="latestResult">
<el-row>
<el-text size="small">{{ latestResult._timestr }}</el-text>
</el-row>
@@ -25,7 +25,54 @@
鎺ㄨ崘璺嚎鎬婚暱{{ latestResult.direction.distance }}绫�
</el-text>
</el-row>
- </template>
+ </template> -->
+ <TransitionGroup name="list">
+ <div v-for="(item, index) in analysisResultList" :key="index">
+ <template v-if="index == 0">
+ <el-row justify="space-between">
+ <el-text size="small">{{ item._timestr }}</el-text>
+ <el-tag type="danger" effect="dark">鏈�鏂扮嚎绱�</el-tag>
+ </el-row>
+ <el-space>
+ <el-icon color="#F56C6C" :size="40"
+ ><WarnTriangleFilled
+ /></el-icon>
+ <el-text>
+ {{ item.advice }}
+ </el-text>
+ </el-space>
+ <el-row justify="space-between">
+ <el-link type="primary" :underline="true" @click="showPolyline">
+ {{ lineShow ? '鏀惰捣璺嚎' : '瀹氫綅璺嚎' }}
+ </el-link>
+ <el-text size="small">
+ 鎺ㄨ崘璺嚎鎬婚暱{{ item.direction.distance }}绫�
+ </el-text>
+ </el-row>
+ <el-divider>鍘嗗彶绾跨储</el-divider>
+ </template>
+ <template v-else>
+ <el-row>
+ <el-text size="small">{{ item._timestr }}</el-text>
+ </el-row>
+ <el-space>
+ <!-- <el-icon color="#F56C6C" :size="40"><WarnTriangleFilled /></el-icon> -->
+ <el-text>
+ {{ item.advice }}
+ </el-text>
+ </el-space>
+ <!-- <el-row justify="space-between">
+ <el-link type="primary" :underline="true" @click="showPolyline">
+ {{ lineShow ? '鏀惰捣璺嚎' : '瀹氫綅璺嚎' }}
+ </el-link>
+ <el-text size="small">
+ 鎺ㄨ崘璺嚎鎬婚暱{{ item.direction.distance }}绫�
+ </el-text>
+ </el-row> -->
+ <el-divider></el-divider>
+ </template>
+ </div>
+ </TransitionGroup>
</template>
<template #footer> </template>
</CardDialog>
@@ -105,5 +152,25 @@
:deep(.el-link) {
--el-link-text-color: #23dad1;
+ /* color: #ffd82a; */
+}
+</style>
+<style>
+.list-move, /* 瀵圭Щ鍔ㄤ腑鐨勫厓绱犲簲鐢ㄧ殑杩囨浮 */
+.list-enter-active,
+.list-leave-active {
+ transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+ opacity: 0;
+ transform: translateX(30px);
+}
+
+/* 纭繚灏嗙寮�鐨勫厓绱犱粠甯冨眬娴佷腑鍒犻櫎
+ 浠ヤ究鑳藉姝ｇ‘鍦拌绠楃Щ鍔ㄧ殑鍔ㄧ敾銆� */
+.list-leave-active {
+ position: absolute;
}
</style>
diff --git a/src/views/sourcetrace/component/PollutedClueItem.vue b/src/views/sourcetrace/component/PollutedClueItem.vue
index 392d271..0bf7086 100644
--- a/src/views/sourcetrace/component/PollutedClueItem.vue
+++ b/src/views/sourcetrace/component/PollutedClueItem.vue
@@ -5,7 +5,7 @@
<el-row justify="space-between">
<!-- <el-tag v-if="index == 0" type="danger">鏈�鏂�</el-tag> -->
<el-text type="primary">{{
- '绾跨储鏃堕棿锛�' +
+ '鍒囩墖鏃堕棿锛�' +
item.pollutedData.startTime +
' - ' +
item.pollutedData.endTime
@@ -39,7 +39,13 @@
</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="formatPercentage(item.pollutedData.avgPer)"
/>
</el-col>
@@ -146,6 +152,36 @@
const props = defineProps({
item: Object
});
+
+const emits = defineEmits(['showMarksAndPolygon']);
+
+function showMarksAndPolygon(item) {
+ emits('showMarksAndPolygon', item);
+}
+
+function formatPercentage(value) {
+ return Math.round(value * 100) + '%';
+}
+
+function formatDistanceType(value) {
+ switch (value) {
+ case 'TYPE1':
+ return '50绫�';
+ case 'TYPE2':
+ return '50绫� - 500绫�';
+ case 'TYPE3':
+ return '50绫� - 1鍏噷';
+ case 'TYPE4':
+ return '50绫� - 2鍏噷';
+
+ default:
+ break;
+ }
+}
+
+function formatChangeRate() {
+
+}
</script>
<style scoped>
:deep(.el-statistic) {
--
Gitblit v1.9.3