动态溯源

Riku

2025-06-02 1ee70becea36655a0fd537085b2e2ea5830ef880

 src/views/sourcetrace/SourceTrace.vue

@@ -12,8 +12,51 @@
          <el-scrollbar ref="scrollbarRef" :height="height" class="scrollbar">
            <div ref="scrollContentRef">
              <div v-for="(item, index) in streams" :key="index">
                <!-- <el-text type="primary">{{ item.guid }}</el-text> -->
                <el-space gap="4">
                <el-row gap="4">
                  <el-text type="primary">发生时间：</el-text>
                  <el-text type="primary">{{
                    item.pollutedData.startTime + ' 至 '
                  }}</el-text>
                  <el-text type="primary">{{
                    item.pollutedData.endTime
                  }}</el-text>
                </el-row>
                <div>污染区域：{{ item.pollutedArea.address }}</div>
                <div>污染距离：{{ item.pollutedArea.distanceType }}</div>
                <el-row>
                  <el-col :span="6">
                    <el-statistic title="因子" :value="item.pollutedData.factorName" />
                  </el-col>
                  <el-col :span="6">
                    <el-statistic title="变化幅度" :value="formatPercentage(item.pollutedData.avgPer)" />
                  </el-col>
                  <el-col :span="6">
                    <el-statistic title="发生次数" :value="item.pollutedData.times" />
                  </el-col>
                </el-row>
                <el-row justify="space-between">
                  <el-link
                    type="primary"
                    @click="item.showMore = !item.showMore"
                  >
                    {{
                      (item.showMore ? '收起溯源场景' : '查看溯源场景') +
                      '（' +
                      item.pollutedSource.sceneList.length +
                      '）'
                    }}
                  </el-link>
                  <el-link type="primary" @click="drawPolygon(item.pollutedArea)">
                    查看异常
                  </el-link>
                </el-row>
                <SceneTable
                  v-show="item.showMore"
                  :scene-list="item.pollutedSource.sceneList"
                ></SceneTable>
                <el-divider />

                <!-- <el-space gap="4">
                  <el-tag :type="item.status == 1 ? 'danger' : 'info'">{{
                    item._statusStr
                  }}</el-tag>
@@ -62,7 +105,7 @@
                  v-show="item.showMore"
                  :scene-list="item.relatedSceneList"
                ></SceneTable>
                <el-divider />
                <el-divider /> -->
              </div>
            </div>
          </el-scrollbar>
@@ -85,7 +128,12 @@
import mapUtil from '@/utils/map/util';
import { sceneTypes, sceneIcon } from '@/constant/scene-types';
import marks from '@/utils/map/marks';
import { map, onMapMounted } from '@/utils/map/index_old';
import { FactorDatas } from '@/model/FactorDatas';

const START_STR = '##';
const SPLIT_STR = '&&';
const END_STR = '%%';

const props = defineProps({
  factorType: String
@@ -119,11 +167,80 @@
  websocket.send(inputVal.value);
};

const dealMsg = (data) => {
  const [type, content] = data
    .substring(START_STR.length, data.length - END_STR.length)
    .split(SPLIT_STR);

  // 污染线索 PollutedClue
  if (type == '1') {
    const obj = JSON.parse(content);
    console.log('污染线索: ', obj);
    if (streams.length == 0) {
      streams.push(obj);
    } else {
      streams.unshift(obj);
      show.value = true;
    }

    // scrollToBottom();
    scrollToTop();

    drawPolygon(obj.pollutedArea);
  }
  // 污染分析结果 AnalysisResult
  else if (type == '2') {
    const obj = JSON.parse(content);
    console.log('污染分析结果: ', obj);
  }
};

onMounted(() => {
  websocket.registerReceiveEvent(dealMsg);
});
onUnmounted(() => {
  websocket.removeReceiveEvent(dealMsg);
  sector.clearSectorPt();
  mapUtil.clearMap();
  // if (layer != undefined) {
  //   mapUtil.removeViews(layer);
  //   layer = undefined;
  // }
});

// 绘制污染区域
let pollutedAreaPolygon;
function drawPolygon(pollutedArea) {
  if (pollutedAreaPolygon) {
    map.remove(pollutedAreaPolygon);
  }
  const bounds = pollutedArea.polygon.map((v) => [v.first, v.second]);
  // eslint-disable-next-line no-undef
  pollutedAreaPolygon = new AMap.Polygon({
    map: map, //显示该覆盖物的地图对象
    strokeWeight: 2, //轮廓线宽度
    path: bounds, //多边形轮廓线的节点坐标数组
    fillOpacity: 0, //多边形填充透明度
    fillColor: '#CCF3FF', //多边形填充颜色
    // strokeColor: '#ffffff' //线条颜色
    strokeColor: '#0552f7', //线条颜色
    zIndex: 9
  });
  map.setFitView();
}

function formatPercentage(value) {
  return Math.round(value * 100) + '%'
}

/******************************************************************************************************************** */

/**
 * 添加一条工作流信息
 * @param {*} data
 */
const putWorkStream = (data) => {
  data.substring();
  const obj = JSON.parse(data);
  console.log('sourcetrace: ', obj);

@@ -210,19 +327,6 @@
    layer = marks.createLabelMarks(icons, sceneList, true);
  }
}

onMounted(() => {
  websocket.registerReceiveEvent(putWorkStream);
});
onUnmounted(() => {
  websocket.removeReceiveEvent(putWorkStream);
  sector.clearSectorPt();
  mapUtil.clearMap();
  // if (layer != undefined) {
  //   mapUtil.removeViews(layer);
  //   layer = undefined;
  // }
});
</script>
<style scoped>
:deep(.el-statistic) {