From 16eb4bd55a4fd61ddd7a171b1a07378c45d1665b Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 05 六月 2025 13:59:28 +0800
Subject: [PATCH] 动态溯源(待完成)

---
 src/views/sourcetrace/UnderwayAdvice.vue |   83 +++++++++++++++++++++++++++++++++++++----
 1 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/src/views/sourcetrace/UnderwayAdvice.vue b/src/views/sourcetrace/UnderwayAdvice.vue
index 8c2b68d..183ba28 100644
--- a/src/views/sourcetrace/UnderwayAdvice.vue
+++ b/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>

--
Gitblit v1.9.3