2025.7.10 修改动态溯源模块

riku

2025-07-10 2cffd9c7db5c3191cf172641c800e5a328d6f3af

 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>
      </el-row>
    </el-col>
    <PollutedClueItem
      v-model="clueDialog"
      :item="selectedClue"
    ></PollutedClueItem>
      </el-row>
    </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,
  // 模式，realtime：实时模式；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 @@
        // 若没有找到风险源时，将该分类设定为null
        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;
}