From 2cffd9c7db5c3191cf172641c800e5a328d6f3af Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 10 七月 2025 17:30:57 +0800
Subject: [PATCH] 2025.7.10 修改动态溯源模块
---
src/views/sourcetrace/SourceTrace.vue | 77 ++++--
src/views/sourcetrace/component/PollutedClueItem_Old.vue | 135 ++++++++++++
src/views/historymode/HistoryMode.vue | 2
src/views/sourcetrace/component/PollutedWarnItem.vue | 133 ++++++++++++
src/views/sourcetrace/component/PollutedExceptionItem.vue | 22 +
src/views/sourcetrace/component/PollutedClueItem.vue | 53 +++-
src/components.d.ts | 173 +++++++-------
src/views/sourcetrace/component/ClueRecordItem.vue | 28 +-
src/views/realtimemode/RealtimeMode.vue | 2
src/styles/index.scss | 3
src/views/sourcetrace/component/SourceTraceFilter.vue | 6
11 files changed, 483 insertions(+), 151 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index 0bdadcd..8ecc1ef 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -7,93 +7,94 @@
declare module 'vue' {
export interface GlobalComponents {
- BaseCard: (typeof import('./components/BaseCard.vue'))['default'];
- BaseMap: (typeof import('./components/map/BaseMap.vue'))['default'];
- CardButton: (typeof import('./components/CardButton.vue'))['default'];
- CardDialog: (typeof import('./components/CardDialog.vue'))['default'];
- 'CardDialog copy': (typeof import('./components/CardDialog copy.vue'))['default'];
- CheckButton: (typeof import('./components/common/CheckButton.vue'))['default'];
- ConfigManage: (typeof import('./components/map/ConfigManage.vue'))['default'];
- copy: (typeof import('./components/monitor/WeatherData_Old.vue'))['default'];
- CoreHeader: (typeof import('./components/core/CoreHeader.vue'))['default'];
- CoreMenu: (typeof import('./components/core/CoreMenu.vue'))['default'];
- DataSummary: (typeof import('./components/monitor/DataSummary.vue'))['default'];
- DataTable: (typeof import('./components/monitor/DataTable.vue'))['default'];
- DescriptionsList: (typeof import('./components/list/DescriptionsList.vue'))['default'];
- DescriptionsListItem: (typeof import('./components/list/DescriptionsListItem.vue'))['default'];
- DeviceCreate: (typeof import('./components/device/DeviceCreate.vue'))['default'];
- DeviceManage: (typeof import('./components/device/DeviceManage.vue'))['default'];
- ElButton: (typeof import('element-plus/es'))['ElButton'];
- ElCascader: (typeof import('element-plus/es'))['ElCascader'];
- ElCheckbox: (typeof import('element-plus/es'))['ElCheckbox'];
- ElCheckboxGroup: (typeof import('element-plus/es'))['ElCheckboxGroup'];
- ElCol: (typeof import('element-plus/es'))['ElCol'];
- ElConfigProvider: (typeof import('element-plus/es'))['ElConfigProvider'];
- ElDatePicker: (typeof import('element-plus/es'))['ElDatePicker'];
- ElDialog: (typeof import('element-plus/es'))['ElDialog'];
- ElDivider: (typeof import('element-plus/es'))['ElDivider'];
- ElDropdown: (typeof import('element-plus/es'))['ElDropdown'];
- ElDropdownItem: (typeof import('element-plus/es'))['ElDropdownItem'];
- ElDropdownMenu: (typeof import('element-plus/es'))['ElDropdownMenu'];
- ElForm: (typeof import('element-plus/es'))['ElForm'];
- ElFormItem: (typeof import('element-plus/es'))['ElFormItem'];
- ElIcon: (typeof import('element-plus/es'))['ElIcon'];
- ElInput: (typeof import('element-plus/es'))['ElInput'];
- ElLink: (typeof import('element-plus/es'))['ElLink'];
- ElOption: (typeof import('element-plus/es'))['ElOption'];
- ElPagination: (typeof import('element-plus/es'))['ElPagination'];
- ElPopover: (typeof import('element-plus/es'))['ElPopover'];
- ElRadio: (typeof import('element-plus/es'))['ElRadio'];
- ElRadioGroup: (typeof import('element-plus/es'))['ElRadioGroup'];
- ElRow: (typeof import('element-plus/es'))['ElRow'];
- ElScrollbar: (typeof import('element-plus/es'))['ElScrollbar'];
- ElSelect: (typeof import('element-plus/es'))['ElSelect'];
- ElSlider: (typeof import('element-plus/es'))['ElSlider'];
- ElSpace: (typeof import('element-plus/es'))['ElSpace'];
- ElStatistic: (typeof import('element-plus/es'))['ElStatistic'];
- ElSwitch: (typeof import('element-plus/es'))['ElSwitch'];
- ElTable: (typeof import('element-plus/es'))['ElTable'];
- 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'];
- FactorRadio: (typeof import('./components/monitor/FactorRadio.vue'))['default'];
- FactorTrend: (typeof import('./components/monitor/FactorTrend.vue'))['default'];
- GaugeChart: (typeof import('./components/chart/GaugeChart.vue'))['default'];
- GridSearch: (typeof import('./components/grid/GridSearch.vue'))['default'];
- HistoricalTrajectory: (typeof import('./components/animation/HistoricalTrajectory.vue'))['default'];
- MapLocate: (typeof import('./components/map/MapLocate.vue'))['default'];
- MapScene: (typeof import('./components/map/MapScene.vue'))['default'];
- MapToolbox: (typeof import('./components/map/MapToolbox.vue'))['default'];
- MessageBox: (typeof import('./components/MessageBox.vue'))['default'];
- MissionEdit: (typeof import('./components/mission/MissionEdit.vue'))['default'];
- MissionImport: (typeof import('./components/mission/MissionImport.vue'))['default'];
- MissionManage: (typeof import('./components/mission/MissionManage.vue'))['default'];
- OptionDevice: (typeof import('./components/search/OptionDevice.vue'))['default'];
- OptionLocation: (typeof import('./components/search/OptionLocation.vue'))['default'];
- OptionLocation2: (typeof import('./components/search/OptionLocation2.vue'))['default'];
- OptionMission: (typeof import('./components/search/OptionMission.vue'))['default'];
- OptionPollutionDegree: (typeof import('./components/search/OptionPollutionDegree.vue'))['default'];
- OptionTime: (typeof import('./components/search/OptionTime.vue'))['default'];
- OptionType: (typeof import('./components/search/OptionType.vue'))['default'];
- ProgressLineChart: (typeof import('./components/chart/ProgressLineChart.vue'))['default'];
- RealTimeLineChart: (typeof import('./components/chart/RealTimeLineChart.vue'))['default'];
- RouterLink: (typeof import('vue-router'))['RouterLink'];
- RouterView: (typeof import('vue-router'))['RouterView'];
- SceneSearch: (typeof import('./components/scene/SceneSearch.vue'))['default'];
- SceneTable: (typeof import('./components/scene/SceneTable.vue'))['default'];
- SearchBar: (typeof import('./components/search/SearchBar.vue'))['default'];
- SliderBar: (typeof import('./components/SliderBar.vue'))['default'];
- TrajectoryState: (typeof import('./components/animation/TrajectoryState.vue'))['default'];
- VehicleData: (typeof import('./components/monitor/VehicleData.vue'))['default'];
- WeatherData: (typeof import('./components/monitor/WeatherData.vue'))['default'];
- WeatherData_Old: (typeof import('./components/monitor/WeatherData_Old.vue'))['default'];
- WeatherDataCopy: (typeof import('./components/monitor/WeatherData-copy.vue'))['default'];
+ BaseCard: typeof import('./components/BaseCard.vue')['default']
+ BaseMap: typeof import('./components/map/BaseMap.vue')['default']
+ CardButton: typeof import('./components/CardButton.vue')['default']
+ CardDialog: typeof import('./components/CardDialog.vue')['default']
+ 'CardDialog copy': typeof import('./components/CardDialog copy.vue')['default']
+ CheckButton: typeof import('./components/common/CheckButton.vue')['default']
+ ConfigManage: typeof import('./components/map/ConfigManage.vue')['default']
+ copy: typeof import('./components/CardDialog copy.vue')['default']
+ CoreHeader: typeof import('./components/core/CoreHeader.vue')['default']
+ CoreMenu: typeof import('./components/core/CoreMenu.vue')['default']
+ DataSummary: typeof import('./components/monitor/DataSummary.vue')['default']
+ DataTable: typeof import('./components/monitor/DataTable.vue')['default']
+ DescriptionsList: typeof import('./components/list/DescriptionsList.vue')['default']
+ DescriptionsListItem: typeof import('./components/list/DescriptionsListItem.vue')['default']
+ DeviceCreate: typeof import('./components/device/DeviceCreate.vue')['default']
+ DeviceManage: typeof import('./components/device/DeviceManage.vue')['default']
+ ElButton: typeof import('element-plus/es')['ElButton']
+ ElCascader: typeof import('element-plus/es')['ElCascader']
+ ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+ ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+ ElCol: typeof import('element-plus/es')['ElCol']
+ ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+ ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+ ElDialog: typeof import('element-plus/es')['ElDialog']
+ ElDivider: typeof import('element-plus/es')['ElDivider']
+ ElDropdown: typeof import('element-plus/es')['ElDropdown']
+ ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+ ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+ ElForm: typeof import('element-plus/es')['ElForm']
+ 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']
+ ElPopover: typeof import('element-plus/es')['ElPopover']
+ ElRadio: typeof import('element-plus/es')['ElRadio']
+ ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+ ElRow: typeof import('element-plus/es')['ElRow']
+ ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+ ElSelect: typeof import('element-plus/es')['ElSelect']
+ ElSlider: typeof import('element-plus/es')['ElSlider']
+ ElSpace: typeof import('element-plus/es')['ElSpace']
+ ElStatistic: typeof import('element-plus/es')['ElStatistic']
+ ElSwitch: typeof import('element-plus/es')['ElSwitch']
+ ElTable: typeof import('element-plus/es')['ElTable']
+ 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']
+ FactorIconText: typeof import('./components/monitor/FactorIconText.vue')['default']
+ FactorLegend: typeof import('./components/monitor/FactorLegend.vue')['default']
+ FactorRadio: typeof import('./components/monitor/FactorRadio.vue')['default']
+ FactorTrend: typeof import('./components/monitor/FactorTrend.vue')['default']
+ GaugeChart: typeof import('./components/chart/GaugeChart.vue')['default']
+ GridSearch: typeof import('./components/grid/GridSearch.vue')['default']
+ HistoricalTrajectory: typeof import('./components/animation/HistoricalTrajectory.vue')['default']
+ MapLocate: typeof import('./components/map/MapLocate.vue')['default']
+ MapScene: typeof import('./components/map/MapScene.vue')['default']
+ MapToolbox: typeof import('./components/map/MapToolbox.vue')['default']
+ MessageBox: typeof import('./components/MessageBox.vue')['default']
+ MissionEdit: typeof import('./components/mission/MissionEdit.vue')['default']
+ MissionImport: typeof import('./components/mission/MissionImport.vue')['default']
+ MissionManage: typeof import('./components/mission/MissionManage.vue')['default']
+ OptionDevice: typeof import('./components/search/OptionDevice.vue')['default']
+ OptionLocation: typeof import('./components/search/OptionLocation.vue')['default']
+ OptionLocation2: typeof import('./components/search/OptionLocation2.vue')['default']
+ OptionMission: typeof import('./components/search/OptionMission.vue')['default']
+ OptionPollutionDegree: typeof import('./components/search/OptionPollutionDegree.vue')['default']
+ OptionTime: typeof import('./components/search/OptionTime.vue')['default']
+ OptionType: typeof import('./components/search/OptionType.vue')['default']
+ ProgressLineChart: typeof import('./components/chart/ProgressLineChart.vue')['default']
+ RealTimeLineChart: typeof import('./components/chart/RealTimeLineChart.vue')['default']
+ RouterLink: typeof import('vue-router')['RouterLink']
+ RouterView: typeof import('vue-router')['RouterView']
+ SceneSearch: typeof import('./components/scene/SceneSearch.vue')['default']
+ SceneTable: typeof import('./components/scene/SceneTable.vue')['default']
+ SearchBar: typeof import('./components/search/SearchBar.vue')['default']
+ SliderBar: typeof import('./components/SliderBar.vue')['default']
+ TrajectoryState: typeof import('./components/animation/TrajectoryState.vue')['default']
+ VehicleData: typeof import('./components/monitor/VehicleData.vue')['default']
+ WeatherData: typeof import('./components/monitor/WeatherData.vue')['default']
+ WeatherData_Old: typeof import('./components/monitor/WeatherData_Old.vue')['default']
}
export interface ComponentCustomProperties {
- vLoading: (typeof import('element-plus/es'))['ElLoadingDirective'];
+ vLoading: typeof import('element-plus/es')['ElLoadingDirective']
}
}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7f53a8b..4834bc4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,5 +2,6 @@
@use './elementUI.scss';
body {
- font-family: fantasy;
+ // font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ font-family: 'Times New Roman', Times, serif;
}
diff --git a/src/views/historymode/HistoryMode.vue b/src/views/historymode/HistoryMode.vue
index 5e72264..2865dec 100644
--- a/src/views/historymode/HistoryMode.vue
+++ b/src/views/historymode/HistoryMode.vue
@@ -55,7 +55,7 @@
<SourceTrace
class="source-trace"
v-model:factorType="factorType"
- direction="right"
+ direction="left"
mode="history"
:mission-code="missionCode"
></SourceTrace>
diff --git a/src/views/realtimemode/RealtimeMode.vue b/src/views/realtimemode/RealtimeMode.vue
index 9eb4352..1a571b1 100644
--- a/src/views/realtimemode/RealtimeMode.vue
+++ b/src/views/realtimemode/RealtimeMode.vue
@@ -144,7 +144,7 @@
// 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-08-30 15:27:00', // voc 杩戣窛绂绘苯淇�
startTime: '2024-07-23 15:21:30',
// startTime: '2024-07-23 14:39:00',
endTime: '2025-01-16 11:51:41',
diff --git a/src/views/sourcetrace/SourceTrace.vue b/src/views/sourcetrace/SourceTrace.vue
index 19012f9..87768df 100644
--- a/src/views/sourcetrace/SourceTrace.vue
+++ b/src/views/sourcetrace/SourceTrace.vue
@@ -1,18 +1,32 @@
<template>
- <el-row>
- <el-col v-if="direction == 'right'" span="2" class="flex-col">
+ <el-row
+ :style="
+ direction == 'left'
+ ? 'flex-direction: row;'
+ : 'flex-direction: row-reverse'
+ "
+ >
+ <el-col span="2" class="flex-col">
<el-row justify="end">
<CardButton
- direction="left"
+ :direction="direction"
name="鍔ㄦ�佹函婧�"
@click="handleDisplayChange"
></CardButton>
</el-row>
<el-row class="flex-col">
+ <PollutedWarnItem
+ :item="selectedWarning"
+ @showMarksAndPolygon="showMarksAndPolygon"
+ ></PollutedWarnItem>
<PollutedExceptionItem
:item="selectedException"
@showMarksAndPolygon="showMarksAndPolygon"
></PollutedExceptionItem>
+ <PollutedClueItem
+ v-model="clueDialog"
+ :item="selectedClue"
+ ></PollutedClueItem>
</el-row>
</el-col>
<el-col v-show="show" span="10">
@@ -35,9 +49,9 @@
<!-- 鏁版嵁鍒囩墖缁熻 -->
<div style="border-left: 1px solid white" class="p-l-8">
<el-space direction="vertical">
- <el-text type="primary">婧簮锛歿{ countMsg1.type1 }}鏉�</el-text>
- <el-text type="primary">绾跨储锛歿{ countMsg1.type2 }}鏉�</el-text>
- <el-text type="primary">鎻愰啋锛歿{ countMsg1.type3 }}鏉�</el-text>
+ <el-text type="info">婧簮锛歿{ countMsg1.type1 }}鏉�</el-text>
+ <el-text type="info">绾跨储锛歿{ countMsg1.type2 }}鏉�</el-text>
+ <el-text type="info">鎻愰啋锛歿{ countMsg1.type3 }}鏉�</el-text>
</el-space>
</div>
</el-row>
@@ -57,7 +71,7 @@
</template>
</BaseCard>
</el-col>
- <el-col v-if="direction == 'left'" span="2" class="flex-col">
+ <!-- <el-col v-if="direction == 'left'" span="2" class="flex-col">
<el-row justify="start">
<CardButton
direction="right"
@@ -70,12 +84,12 @@
:item="selectedException"
@showMarksAndPolygon="showMarksAndPolygon"
></PollutedExceptionItem>
+ <PollutedClueItem
+ v-model="clueDialog"
+ :item="selectedClue"
+ ></PollutedClueItem>
</el-row>
- </el-col>
- <PollutedClueItem
- v-model="clueDialog"
- :item="selectedClue"
- ></PollutedClueItem>
+ </el-col> -->
</el-row>
</template>
<script setup>
@@ -101,6 +115,7 @@
import ClueRecordItem from './component/ClueRecordItem.vue';
import PollutedClueItem from '@/views/sourcetrace/component/PollutedClueItem.vue';
import SourceTraceFilter from '@/views/sourcetrace/component/SourceTraceFilter.vue';
+import PollutedWarnItem from './component/PollutedWarnItem.vue';
const NO_SCENE = 'no_scene';
@@ -110,7 +125,7 @@
const props = defineProps({
direction: {
type: String,
- default: 'left'
+ default: 'right'
},
factorType: String,
// 妯″紡锛宺ealtime锛氬疄鏃舵ā寮忥紱history锛氬巻鍙叉暟鎹ā寮�
@@ -125,12 +140,14 @@
const emits = defineEmits(['update:factorType']);
const show = ref(false);
-const clueDialog = ref(false);
const scrollContentRef = ref();
const scrollbarRef = ref();
+const selectedWarning = ref();
const selectedException = ref();
const selectedClue = ref();
+const clueDialog = ref(false);
+
const selectedMsgTypes = ref(['1', '2', '3']);
const selectedFactorTypes = ref([]);
const factorOptions = ref([]);
@@ -281,7 +298,7 @@
// 鑻ユ病鏈夋壘鍒伴闄╂簮鏃讹紝灏嗚鍒嗙被璁惧畾涓簄ull
if (sceneOptions.value.findIndex((v) => v.value == NO_SCENE) == -1) {
sceneOptions.value.push({
- label: '鏃�',
+ label: '鏈煡',
value: NO_SCENE
});
selectedSceneTypes.value.push(NO_SCENE);
@@ -374,21 +391,33 @@
);
function handleOpen(item) {
+ // 鍘婚櫎涓婁竴涓�滄函婧愨�濆拰鈥滄彁閱掆�濇秷鎭殑閫変腑鏍囧織
+ if (selectedWarning.value && selectedWarning.value._selected) {
+ selectedWarning.value._selected = false;
+ showMarksAndPolygon(selectedWarning.value);
+ }
+ if (selectedException.value && selectedException.value._selected) {
+ selectedException.value._selected = false;
+ showMarksAndPolygon(selectedException.value);
+ }
+ if (selectedClue.value && selectedClue.value._selected) {
+ selectedClue.value._selected = false;
+ clueDialog.value = false;
+ }
switch (item._type) {
case '1':
- case '3':
- if (selectedException.value) {
- selectedException.value._selected = false;
- }
+ // 鏄剧ず褰撳墠閫変腑鐨勭浉鍏冲湴鍥炬爣璁�
showMarksAndPolygon(item);
+ // 鏇存柊閫変腑鐨勫璞�
selectedException.value = item;
break;
case '2':
- if (selectedClue.value) {
- selectedClue.value._selected = false;
- }
selectedClue.value = item;
clueDialog.value = true;
+ break;
+ case '3':
+ showMarksAndPolygon(item);
+ selectedWarning.value = item;
break;
}
item._selected = true;
@@ -412,7 +441,7 @@
} else {
if (polygonMap.has(item.guid)) {
map.remove(polygonMap.get(item.guid));
- selectedException.value._selected = false;
+ item._selected = false;
}
}
}
@@ -473,7 +502,7 @@
--el-statistic-content-color: white;
}
-:deep(.el-text.el-text--primary) {
+:deep(.el-text.el-text--info) {
--el-text-color: white;
}
diff --git a/src/views/sourcetrace/component/ClueRecordItem.vue b/src/views/sourcetrace/component/ClueRecordItem.vue
index 5237bb5..dedec77 100644
--- a/src/views/sourcetrace/component/ClueRecordItem.vue
+++ b/src/views/sourcetrace/component/ClueRecordItem.vue
@@ -9,7 +9,7 @@
<el-col :span="21">
<el-row justify="space-between">
<el-space>
- <el-text type="primary" size="default">
+ <el-text type="info" size="default">
<el-icon><Timer /></el-icon>
{{
item.pollutedData._startTime +
@@ -18,7 +18,7 @@
}}
</el-text>
</el-space>
- <el-link type="primary" @click="emits('open', item)"> 璇︽儏 </el-link>
+ <el-link type="info" @click="emits('open', item)"> 璇︽儏 </el-link>
</el-row>
<div>
<el-tag
@@ -32,13 +32,13 @@
>
<div v-html="formatFactorName(item.pollutedData.factorName)"></div>
</el-tag>
- <el-text type="primary">
+ <el-text type="info">
{{ item.pollutedData.exception + '锛�' }}
</el-text>
- <el-text type="primary">{{
+ <el-text type="info">{{
formatDistanceType(item.pollutedArea.distanceType)
}}</el-text>
- <el-text :type="noWarn ? 'primary' : 'warning'">
+ <el-text :type="noWarn ? 'info' : 'warning'">
{{
item.pollutedSource.sceneList.length == 0
? '鏈壘鍒伴闄╂簮'
@@ -65,11 +65,11 @@
<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-space>
<el-icon color="#F56C6C" :size="40"><WarnTriangleFilled /></el-icon>
- <el-text type="primary">{{ item.advice }}</el-text>
+ <el-text type="info">{{ item.advice }}</el-text>
</el-space>
</div>
<el-row v-else-if="item._type == '3'">
@@ -79,7 +79,7 @@
<el-col :span="21">
<el-row justify="space-between">
<el-space>
- <el-text type="primary" size="default">
+ <el-text type="info" size="default">
<el-icon><Timer /></el-icon>
{{
item.pollutedData._startTime +
@@ -88,7 +88,7 @@
}}
</el-text>
</el-space>
- <!-- <el-link type="primary" @click="emits('open', item)"> 璇︽儏 </el-link> -->
+ <el-link type="info" @click="emits('open', item)"> 璇︽儏 </el-link>
</el-row>
<div>
<el-tag
@@ -102,7 +102,7 @@
>
<div v-html="formatFactorName(item.pollutedData.factorName)"></div>
</el-tag>
- <el-text type="primary">{{ item.pollutedData.exception }}</el-text>
+ <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">
@@ -122,18 +122,18 @@
<!-- <el-row justify="space-between">
<el-space>
- <el-tag type="primary" effect="dark" size="small">鎻愰啋</el-tag>
- <el-text type="primary">{{
+ <el-tag type="info" effect="dark" size="small">鎻愰啋</el-tag>
+ <el-text type="info">{{
item.pollutedData.startTime + ' - ' + item.pollutedData.endTime
}}</el-text>
</el-space>
- <el-link type="primary" @click="emits('open', item)"> 璇︽儏 </el-link>
+ <el-link type="info" @click="emits('open', item)"> 璇︽儏 </el-link>
</el-row>
<el-col :span="24">
<el-tag effect="plain" type="info" size="small" hit round class="m-r-4">
<div v-html="formatFactorName(item.pollutedData.factorName)"></div>
</el-tag>
- <el-text type="primary">{{ item.pollutedData.exception }}</el-text>
+ <el-text type="info">{{ item.pollutedData.exception }}</el-text>
</el-col> -->
</el-row>
</div>
diff --git a/src/views/sourcetrace/component/PollutedClueItem.vue b/src/views/sourcetrace/component/PollutedClueItem.vue
index 784771b..5208f16 100644
--- a/src/views/sourcetrace/component/PollutedClueItem.vue
+++ b/src/views/sourcetrace/component/PollutedClueItem.vue
@@ -1,5 +1,5 @@
<template>
- <CardDialog
+ <!-- <CardDialog
:model-value="modelValue"
@update:model-value="handleDialogShow"
title="姹℃煋绾跨储"
@@ -7,22 +7,38 @@
:modal="false"
width="400px"
>
- <template #default>
- <template v-if="item">
+ <template #default> -->
+ <BaseCard v-if="item" v-show="modelValue">
+ <template #content>
+ <el-scrollbar class="clue-card">
+ <el-row justify="space-between" align="bottom">
+ <el-text type="danger" style="font-weight: 600" size="large">
+ 姹℃煋绾跨储
+ </el-text>
+
+ <el-link
+ type="info"
+ :underline="true"
+ @click="handleDialogShow(!modelValue)"
+ >
+ {{ modelValue ? '鏀惰捣' : '鎵撳紑' }}
+ <el-icon size="large"><CircleClose /></el-icon>
+ </el-link>
+ </el-row>
<el-row>
- <el-text type="primary" size="small">{{ item._timestr }}</el-text>
+ <el-text type="info" size="small">{{ item._timestr }}</el-text>
</el-row>
<el-space>
<el-icon color="#F56C6C" :size="40"><WarnTriangleFilled /></el-icon>
- <el-text type="primary">
+ <el-text type="info">
{{ item.advice }}
</el-text>
</el-space>
<el-row justify="space-between">
- <el-text type="primary" size="small">
+ <el-text type="info" size="small">
鎺ㄨ崘璺嚎鎬婚暱{{ item.direction.distance }}绫�
</el-text>
- <el-link type="primary" size="small" @click="showPolyline">
+ <el-link type="info" size="small" @click="showPolyline">
{{ lineShow ? '鏀惰捣璺嚎' : '瀹氫綅璺嚎' }}
</el-link>
</el-row>
@@ -32,10 +48,12 @@
>
<el-table-column prop="_count" width="42" label="婧簮娆℃暟" />
</SceneTable>
- </template>
+ </el-scrollbar>
</template>
+ </BaseCard>
+ <!-- </template>
<template #footer> </template>
- </CardDialog>
+ </CardDialog> -->
</template>
<script setup>
import { ref, onMounted, onUnmounted, reactive, watch } from 'vue';
@@ -62,6 +80,7 @@
watch(
() => [props.item, props.modelValue],
(nV, oV) => {
+ // 绾跨储淇℃伅鍙樻洿鍚庯紝閲嶆柊缁樺埗璺嚎鍥�
if (nV[0] != oV[0]) {
const polyline = mapLine.drawDirection(
nV[0].direction.paths.map((v) => [v.first, v.second])
@@ -72,8 +91,11 @@
}
lastPolyline = polyline;
lineShow.value = true;
- } else if (nV[1]) {
- showPolyline(true);
+ }
+ // 鏄剧ず闅愯棌鍙樺寲鏃讹紝瀵瑰簲鏄剧ず鎴栭殣钘忚矾绾�
+ else if (nV[1] != oV[1]) {
+ // showPolyline(nV[1]);
+ handleDialogShow(nV[1]);
}
}
);
@@ -132,4 +154,13 @@
:deep(.el-link) {
--el-link-text-color: #23dad1;
} */
+
+.clue-card {
+ padding: 0 4px;
+ /* margin-right: 2px; */
+ width: 340px;
+ height: 360px;
+ /* border-right: 1px solid white; */
+ border-radius: 2px;
+}
</style>
diff --git a/src/views/sourcetrace/component/PollutedClueItem_Old.vue b/src/views/sourcetrace/component/PollutedClueItem_Old.vue
new file mode 100644
index 0000000..4cf99ef
--- /dev/null
+++ b/src/views/sourcetrace/component/PollutedClueItem_Old.vue
@@ -0,0 +1,135 @@
+<template>
+ <CardDialog
+ :model-value="modelValue"
+ @update:model-value="handleDialogShow"
+ title="姹℃煋绾跨储"
+ draggable
+ :modal="false"
+ width="400px"
+ >
+ <template #default>
+ <template v-if="item">
+ <el-row>
+ <el-text type="info" size="small">{{ item._timestr }}</el-text>
+ </el-row>
+ <el-space>
+ <el-icon color="#F56C6C" :size="40"><WarnTriangleFilled /></el-icon>
+ <el-text type="info">
+ {{ item.advice }}
+ </el-text>
+ </el-space>
+ <el-row justify="space-between">
+ <el-text type="info" size="small">
+ 鎺ㄨ崘璺嚎鎬婚暱{{ item.direction.distance }}绫�
+ </el-text>
+ <el-link type="info" size="small" @click="showPolyline">
+ {{ lineShow ? '鏀惰捣璺嚎' : '瀹氫綅璺嚎' }}
+ </el-link>
+ </el-row>
+ <SceneTable
+ :show-marks="lineShow"
+ :scene-list="formatSceneList(item.sortedSceneList)"
+ >
+ <el-table-column prop="_count" width="42" label="婧簮娆℃暟" />
+ </SceneTable>
+ </template>
+ </template>
+ <template #footer> </template>
+ </CardDialog>
+</template>
+<script setup>
+import { ref, onMounted, onUnmounted, reactive, watch } from 'vue';
+
+import { sceneTypes, sceneIcon } from '@/constant/scene-types';
+import mapLine from '@/utils/map/line';
+import mapUtil from '@/utils/map/util';
+import marks from '@/utils/map/marks';
+
+const props = defineProps({
+ modelValue: Boolean,
+ item: Object
+});
+
+const lineShow = ref(true);
+// 涓婁竴鏉″鑸矾绾�
+let lastPolyline = undefined;
+// 涓婁竴涓鑸洰鐨勫湴
+// let lastDestination = undefined;
+// let layer = undefined;
+
+const emits = defineEmits(['update:modelValue']);
+
+watch(
+ () => [props.item, props.modelValue],
+ (nV, oV) => {
+ if (nV[0] != oV[0]) {
+ const polyline = mapLine.drawDirection(
+ nV[0].direction.paths.map((v) => [v.first, v.second])
+ );
+ // polylineList.unshift(polyline);
+ if (lastPolyline) {
+ mapUtil.removeViews(lastPolyline);
+ }
+ lastPolyline = polyline;
+ lineShow.value = true;
+ } else if (nV[1]) {
+ showPolyline(true);
+ }
+ }
+);
+
+function showPolyline(show) {
+ if (typeof show === 'boolean') {
+ lineShow.value = show;
+ } else {
+ lineShow.value = !lineShow.value;
+ }
+
+ if (lineShow.value && lastPolyline) {
+ mapUtil.addViews(lastPolyline);
+ } else {
+ mapUtil.removeViews(lastPolyline);
+ }
+}
+
+// function removeLayer() {
+// if (layer != undefined) {
+// mapUtil.removeViews(layer);
+// layer = undefined;
+// }
+// }
+
+// function drawMarks(sceneList) {
+// removeLayer();
+// if (sceneList.length != 0) {
+// const icons = [];
+// sceneList.forEach((s) => {
+// icons.push(sceneIcon(s.typeId));
+// });
+// layer = marks.createLabelMarks(icons, sceneList, false);
+// }
+// }
+
+function formatSceneList(sceneList) {
+ return sceneList.map((v) => {
+ return {
+ ...v.first,
+ _count: v.second
+ };
+ });
+}
+
+function handleDialogShow(value) {
+ showPolyline(value);
+ emits('update:modelValue', value);
+}
+</script>
+<style scoped>
+/* :deep(.el-text.el-text--primary) {
+ --el-text-color: white;
+}
+
+:deep(.el-link) {
+ --el-link-text-color: #23dad1;
+} */
+</style>
diff --git a/src/views/sourcetrace/component/PollutedExceptionItem.vue b/src/views/sourcetrace/component/PollutedExceptionItem.vue
index 9351fb8..a6c80f9 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,18 +36,18 @@
</el-text>
</div>
<div>
- <el-text type="primary">
+ <el-text type="info">
<el-icon><MapLocation /></el-icon>
{{ '椋庨櫓鍖哄煙锛�' + item.pollutedArea.address }}
</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>
@@ -83,7 +85,7 @@
</el-row>
<el-row justify="space-between">
<!-- <el-link
- type="primary"
+ type="info"
underline
@click="showMarksAndPolygon(item)"
>
@@ -106,7 +108,7 @@
<!-- </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>
@@ -159,7 +161,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 +172,7 @@
:deep(.el-link) {
--el-link-text-color: #23dad1;
-}
+} */
.scrollbar {
min-width: 300px;
diff --git a/src/views/sourcetrace/component/PollutedWarnItem.vue b/src/views/sourcetrace/component/PollutedWarnItem.vue
new file mode 100644
index 0000000..d047320
--- /dev/null
+++ b/src/views/sourcetrace/component/PollutedWarnItem.vue
@@ -0,0 +1,133 @@
+<template>
+ <BaseCard v-if="item" v-show="item.showMore">
+ <template #content>
+ <el-scrollbar class="clue-card">
+ <el-row justify="space-between" align="bottom">
+ <el-text type="primary" style="font-weight: 600" size="large">
+ 鎻愰啋鍒囩墖
+ </el-text>
+
+ <el-link
+ type="info"
+ :underline="true"
+ @click="showMarksAndPolygon(item)"
+ >
+ {{ item.showMore ? '鏀惰捣' : '瀹氫綅' }}
+ <el-icon size="large"><CircleClose /></el-icon>
+ </el-link>
+ </el-row>
+ <div>
+ <el-text type="info">
+ <el-icon><Timer /></el-icon>
+ {{
+ '鍒囩墖鏃舵锛�' +
+ item.pollutedData._startTime +
+ ' - ' +
+ item.pollutedData._endTime
+ }}
+ </el-text>
+ </div>
+ <div>
+ <el-text type="info">
+ <el-icon><MapLocation /></el-icon>
+ {{ '鎵�鍦ㄥ尯鍩燂細' + item.pollutedArea.address }}
+ </el-text>
+ </div>
+ <!-- <div>
+ <el-text type="info">
+ 婧簮璺濈锛歿{ formatDistanceType(item.pollutedArea.distanceType) }}
+ </el-text>
+ </div> -->
+ <div>
+ <el-text type="info">
+ <el-icon><Bell /></el-icon>
+ 鎻愰啋绫诲瀷锛歿{ item.pollutedData.exception }}
+ </el-text>
+ </div>
+ <el-row style="border-top: 1px solid white"> </el-row>
+ <RealTimeLineChart
+ v-for="(item1, index1) in item._chartOptions"
+ :key="index1"
+ :model-value="item1"
+ ></RealTimeLineChart>
+ </el-scrollbar>
+ </template>
+ </BaseCard>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+ modelValue: Boolean,
+ item: Object
+});
+
+const emits = defineEmits(['showMarksAndPolygon', 'update:modelValue']);
+
+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(value) {
+ return Math.round(value * 100) / 100 + '';
+}
+</script>
+<style scoped>
+/* :deep(.el-statistic) {
+ --el-statistic-title-color: rgb(215, 215, 215);
+ --el-statistic-content-color: white;
+}
+
+:deep(.el-text .el-text--primary) {
+ --el-text-color: green;
+}
+
+:deep(.el-link) {
+ --el-link-text-color: #23dad1;
+} */
+
+.scrollbar {
+ min-width: 300px;
+ max-width: 60vw;
+ /* height: 35vh; */
+ /* color: #02ffea; */
+}
+
+.clue-card {
+ padding: 0 4px;
+ /* margin-right: 2px; */
+ width: 340px;
+ height: 240px;
+ /* border-right: 1px solid white; */
+ border-radius: 2px;
+}
+
+.border-dashed {
+ /* border: 1px dashed white; */
+ display: flex;
+ /* align-items: center; */
+ border: 1px dashed #ffbc58;
+ padding: 0px 1px;
+ margin-bottom: 4px;
+}
+</style>
diff --git a/src/views/sourcetrace/component/SourceTraceFilter.vue b/src/views/sourcetrace/component/SourceTraceFilter.vue
index 6368300..e2d4512 100644
--- a/src/views/sourcetrace/component/SourceTraceFilter.vue
+++ b/src/views/sourcetrace/component/SourceTraceFilter.vue
@@ -2,7 +2,7 @@
<div>
<div>
<el-space>
- <el-text type="primary">鏁版嵁鍒囩墖</el-text>
+ <el-text type="info">鏁版嵁鍒囩墖</el-text>
<el-checkbox-group
:model-value="dataSlice"
@update:model-value="(e) => emits('update:data-slice', e)"
@@ -19,7 +19,7 @@
</div>
<div>
<el-space>
- <el-text type="primary">鐩戞祴鍥犲瓙</el-text>
+ <el-text type="info">鐩戞祴鍥犲瓙</el-text>
<el-checkbox-group
:model-value="factorType"
@update:model-value="(e) => emits('update:factor-type', e)"
@@ -40,7 +40,7 @@
</div>
<div>
<el-space>
- <el-text type="primary">鍦烘櫙绫诲瀷</el-text>
+ <el-text type="info">鍦烘櫙绫诲瀷</el-text>
<el-checkbox-group
:model-value="sceneType"
@update:model-value="(e) => emits('update:scene-type', e)"
--
Gitblit v1.9.3