动态溯源（待完成）

riku

2025-06-05 16eb4bd55a4fd61ddd7a171b1a07378c45d1665b

 src/views/sourcetrace/UnderwayAdvice.vue

@@ -1,29 +1,57 @@
<template>
  <CardDialog
    v-model="dialogVisible"
    title="走航路线推荐"
    title="走航智能分析"
    draggable
    :modal="false"
    width="400px"
  >
    <template #default> </template>
    <template #default>
      <template v-if="latestResult">
        <el-row>
          <el-text size="small">{{ latestResult._timestr }}</el-text>
        </el-row>
        <el-space>
          <el-icon color="#F56C6C" :size="40"><WarnTriangleFilled /></el-icon>
          <el-text>
            {{ latestResult.advice }}
          </el-text>
        </el-space>
        <el-row justify="end">
          <el-link type="primary" :underline="true" @click="showPolyline">
            {{ lineShow ? '收起路线' : '定位路线' }}
          </el-link>
          <el-text size="small">
            推荐路线总长{{ latestResult.direction.distance }}米
          </el-text>
        </el-row>
      </template>
    </template>
    <template #footer> </template>
  </CardDialog>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import moment from 'moment';
import { ref, onMounted, onUnmounted, reactive } from 'vue';
import websocket from '@/api/websocket';
import websocketMsgParser from '@/views/sourcetrace/websocketMsgParser.js';
import mapLine from '@/utils/map/line';
import mapUtil from '@/utils/map/util';

const dialogVisible = ref(true);
const dialogVisible = ref(false);
const lineShow = ref(true);
const latestResult = ref();
let latestPolyline = undefined;
const analysisResultList = reactive([]);
const polylineList = [];

onMounted(() => {
  websocket.registerReceiveEvent(dealMsg);
});
onUnmounted(() => {
  websocket.removeReceiveEvent(dealMsg);
  showPolyline(false);
});

function dealMsg(data) {
@@ -32,13 +60,50 @@
  if (type == '2') {
    const obj = JSON.parse(content);
    console.log('污染分析结果: ', obj);
    obj._timestr = timeFormatter(obj.time);
    analysisResultList.unshift(obj);
    latestResult.value = obj;

    obj.sortedSceneList;
    obj.time;
    obj.advice;
    obj.direction;
    // obj.sortedSceneList;
    // obj.time;
    // obj.advice;
    // obj.direction;

    mapLine.drawDirection(obj.direction.paths.map((v) => [v.first, v.second]));
    const polyline = mapLine.drawDirection(
      obj.direction.paths.map((v) => [v.first, v.second])
    );
    polylineList.unshift(polyline);
    if (latestPolyline) {
      mapUtil.removeViews(latestPolyline);
  }
    latestPolyline = polyline;
    dialogVisible.value = true;
  }
}

function showPolyline(show) {
  if (typeof show === 'boolean') {
    lineShow.value = show;
  } else {
    lineShow.value = !lineShow.value;
  }
  if (lineShow.value) {
    mapUtil.addViews(latestPolyline);
  } else {
    mapUtil.removeViews(latestPolyline);
  }
}

function timeFormatter(time) {
  return moment(time).format('YYYY-MM-DD HH:mm:ss');
}
</script>
<style scoped>
:deep(.el-text) {
  --el-text-color: white;
}

:deep(.el-link) {
  --el-link-text-color: #23dad1;
}
</style>