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/SourceTrace.vue | 261 ++++++++++++++++++++++++++++++++++++----------------
1 files changed, 180 insertions(+), 81 deletions(-)
diff --git a/src/views/sourcetrace/SourceTrace.vue b/src/views/sourcetrace/SourceTrace.vue
index 19012f9..5c738de 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 justify="end">
+ <el-row
+ :style="
+ direction == 'left'
+ ? 'flex-direction: row;'
+ : 'flex-direction: row-reverse'
+ "
+ >
+ <el-col span="2" class="flex-col">
+ <el-row :justify="direction == 'left' ? 'end' : 'start'">
<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">
@@ -27,21 +41,25 @@
<SourceTraceFilter
v-model:data-slice="selectedMsgTypes"
v-model:factor-type="selectedFactorTypes"
- :factor-options="factorOptions"
v-model:scene-type="selectedSceneTypes"
+ :factor-options="factorOptions"
:scene-options="sceneOptions"
></SourceTraceFilter>
<!-- <el-divider direction="vertical"></el-divider> -->
<!-- 鏁版嵁鍒囩墖缁熻 -->
<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>
- <el-scrollbar ref="scrollbarRef" class="scrollbar">
+ <el-scrollbar
+ ref="scrollbarRef"
+ class="scrollbar"
+ v-loading="loading"
+ >
<TransitionGroup name="list">
<div
v-for="item in filterStreams"
@@ -57,7 +75,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 +88,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 +119,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 +129,7 @@
const props = defineProps({
direction: {
type: String,
- default: 'left'
+ default: 'right'
},
factorType: String,
// 妯″紡锛宺ealtime锛氬疄鏃舵ā寮忥紱history锛氬巻鍙叉暟鎹ā寮�
@@ -125,17 +144,21 @@
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([]);
const selectedSceneTypes = ref([]);
const sceneOptions = ref([]);
+
+const loading = ref(false);
function handleDisplayChange() {
show.value = !show.value;
@@ -171,9 +194,16 @@
case '1':
case '3':
// 鍒ゆ柇鐩戞祴鍥犲瓙绫诲瀷鏄惁閫変腑
- b2 = selectedFactorTypes.value.indexOf(v.pollutedData.factorId) != -1;
+ for (const key in v.pollutedData.statisticMap) {
+ const value = v.pollutedData.statisticMap[key];
+ b2 = b2 || selectedFactorTypes.value.indexOf(value.factorId) != -1;
+ }
+
// 鍒ゆ柇鍦烘櫙绫诲瀷鏄惁閫変腑
- if (v.pollutedSource.sceneList.length == 0) {
+ if (
+ v.pollutedSource == undefined ||
+ v.pollutedSource.sceneList.length == 0
+ ) {
b3 = selectedSceneTypes.value.indexOf(NO_SCENE) != -1;
} else {
b3 =
@@ -202,15 +232,44 @@
type3: 0
};
streams.value.forEach((v) => {
+ let b2, b3;
+ // 鍒ゆ柇鐩戞祴鍥犲瓙绫诲瀷鏄惁閫変腑
+ for (const key in v.pollutedData.statisticMap) {
+ const value = v.pollutedData.statisticMap[key];
+ b2 = b2 || selectedFactorTypes.value.indexOf(value.factorId) != -1;
+ }
+
+ // 鍒ゆ柇鍦烘櫙绫诲瀷鏄惁閫変腑
+ if (
+ v.pollutedSource == undefined ||
+ v.pollutedSource.sceneList.length == 0
+ ) {
+ b3 = selectedSceneTypes.value.indexOf(NO_SCENE) != -1;
+ } else {
+ b3 =
+ v.pollutedSource.sceneList.findIndex(
+ (v) => selectedSceneTypes.value.indexOf(v.typeId) != -1
+ ) != -1;
+ }
switch (v._type) {
case '1':
- count.type1++;
+ if (b2 && b3) {
+ count.type1++;
+ }
break;
case '2':
- count.type2++;
+ b3 =
+ v.sortedSceneList.findIndex(
+ (v) => selectedSceneTypes.value.indexOf(v.first.typeId) != -1
+ ) != -1;
+ if (b3) {
+ count.type2++;
+ }
break;
case '3':
- count.type3++;
+ if (b2 && b3) {
+ count.type3++;
+ }
break;
}
});
@@ -265,37 +324,43 @@
case '1':
case '3':
// 绛涢�夌洃娴嬪洜瀛愮被鍨�
- if (
- factorOptions.value.findIndex(
- (v) => v.value == objData.pollutedData.factorId
- ) == -1
- ) {
- factorOptions.value.push({
- label: objData.pollutedData.factorName,
- value: objData.pollutedData.factorId
- });
- selectedFactorTypes.value.push(objData.pollutedData.factorId);
- }
- // 绛涢�夊満鏅被鍨�
- if (objData.pollutedSource.sceneList.length == 0) {
- // 鑻ユ病鏈夋壘鍒伴闄╂簮鏃讹紝灏嗚鍒嗙被璁惧畾涓簄ull
- if (sceneOptions.value.findIndex((v) => v.value == NO_SCENE) == -1) {
- sceneOptions.value.push({
- label: '鏃�',
- value: NO_SCENE
+ for (const key in objData.pollutedData.statisticMap) {
+ const value = objData.pollutedData.statisticMap[key];
+ if (
+ factorOptions.value.findIndex((v) => v.value == value.factorId) == -1
+ ) {
+ factorOptions.value.push({
+ label: value.factorName,
+ value: value.factorId
});
- selectedSceneTypes.value.push(NO_SCENE);
+ selectedFactorTypes.value.push(value.factorId);
}
- } else {
- objData.pollutedSource.sceneList.forEach((s) => {
- if (sceneOptions.value.findIndex((v) => v.value == s.typeId) == -1) {
+ }
+
+ // 绛涢�夊満鏅被鍨�
+ if (objData.pollutedSource != undefined) {
+ if (objData.pollutedSource.sceneList.length == 0) {
+ // 鑻ユ病鏈夋壘鍒伴闄╂簮鏃讹紝灏嗚鍒嗙被璁惧畾涓簄ull
+ if (sceneOptions.value.findIndex((v) => v.value == NO_SCENE) == -1) {
sceneOptions.value.push({
- label: s.type,
- value: s.typeId
+ label: '鏈煡',
+ value: NO_SCENE
});
- selectedSceneTypes.value.push(s.typeId);
+ selectedSceneTypes.value.push(NO_SCENE);
}
- });
+ } else {
+ objData.pollutedSource.sceneList.forEach((s) => {
+ if (
+ sceneOptions.value.findIndex((v) => v.value == s.typeId) == -1
+ ) {
+ sceneOptions.value.push({
+ label: s.type,
+ value: s.typeId
+ });
+ selectedSceneTypes.value.push(s.typeId);
+ }
+ });
+ }
}
// case '2':
// break;
@@ -322,23 +387,31 @@
}
function fetchPollutionTraceHistory() {
- dataAnalysisApi.fetchPollutionTraceHistory(props.missionCode).then((res) => {
- const objList = JSON.parse(res.data);
- objList.forEach((obj) => {
- obj._type = obj.msgType + '';
- if (obj._type == '1') {
- obj.showMore = false;
- show.value = true;
- parseChartData(obj);
- } else if (obj._type == '2') {
- obj._timestr = timeFormatter(obj.time);
- } else if (obj._type == '3') {
- parseChartData(obj);
- }
- optionsFilte(obj);
- });
- streams.value = objList;
- });
+ loading.value = true;
+ dataAnalysisApi
+ .fetchPollutionTraceHistory(props.missionCode)
+ .then((res) => {
+ factorOptions.value = [];
+ selectedFactorTypes.value = [];
+ sceneOptions.value = [];
+ selectedSceneTypes.value = [];
+ const objList = JSON.parse(res.data);
+ objList.forEach((obj) => {
+ obj._type = obj.msgType + '';
+ if (obj._type == '1') {
+ obj.showMore = false;
+ show.value = true;
+ parseChartData(obj);
+ } else if (obj._type == '2') {
+ obj._timestr = timeFormatter(obj.time);
+ } else if (obj._type == '3') {
+ parseChartData(obj);
+ }
+ optionsFilte(obj);
+ });
+ streams.value = objList;
+ })
+ .finally(() => (loading.value = false));
}
onMounted(() => {
@@ -374,21 +447,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 +497,7 @@
} else {
if (polygonMap.has(item.guid)) {
map.remove(polygonMap.get(item.guid));
- selectedException.value._selected = false;
+ item._selected = false;
}
}
}
@@ -452,13 +537,27 @@
);
const factorDatas = new FactorDatas();
factorDatas.setData(obj.pollutedData.historyDataList, 0, () => {
- obj._chartOptions = factorDataParser.parseData(factorDatas, [
- {
- label: obj.pollutedData.factorName,
- name: obj.pollutedData.factorName,
- value: obj.pollutedData.factorId + ''
- }
- ]);
+ for (const key in obj.pollutedData.statisticMap) {
+ const value = obj.pollutedData.statisticMap[key];
+ value._chartOptions = factorDataParser.parseData(
+ factorDatas,
+ [
+ {
+ label: value.factorName,
+ name: value.factorName,
+ value: value.factorId + ''
+ }
+ ],
+ false
+ );
+ }
+ // obj._chartOptions = factorDataParser.parseData(factorDatas, [
+ // {
+ // label: obj.pollutedData.factorName,
+ // name: obj.pollutedData.factorName,
+ // value: obj.pollutedData.factorId + ''
+ // }
+ // ]);
// console.log('鎶樼嚎鍥撅細', obj._chartOptions);
});
}
@@ -473,7 +572,7 @@
--el-statistic-content-color: white;
}
-:deep(.el-text.el-text--primary) {
+:deep(.el-text.el-text--info) {
--el-text-color: white;
}
--
Gitblit v1.9.3