From 5679cbbb630092a197d991cb41997a2d953261e9 Mon Sep 17 00:00:00 2001
From: Riku <risaku@163.com>
Date: 星期三, 11 六月 2025 22:49:07 +0800
Subject: [PATCH] 动态溯源（待完成）
---
src/views/sourcetrace/UnderwayAdvice.vue | 150 +++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 141 insertions(+), 9 deletions(-)
diff --git a/src/views/sourcetrace/UnderwayAdvice.vue b/src/views/sourcetrace/UnderwayAdvice.vue
index 8c2b68d..b8eaf03 100644
--- a/src/views/sourcetrace/UnderwayAdvice.vue
+++ b/src/views/sourcetrace/UnderwayAdvice.vue
@@ -1,29 +1,104 @@
<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> -->
+ <TransitionGroup name="list">
+ <div v-for="(item, index) in analysisResultList" :key="index">
+ <template v-if="index == 0">
+ <el-row justify="space-between">
+ <el-text size="small">{{ item._timestr }}</el-text>
+ <el-tag type="danger" effect="dark">鏈�鏂扮嚎绱�</el-tag>
+ </el-row>
+ <el-space>
+ <el-icon color="#F56C6C" :size="40"
+ ><WarnTriangleFilled
+ /></el-icon>
+ <el-text>
+ {{ item.advice }}
+ </el-text>
+ </el-space>
+ <el-row justify="space-between">
+ <el-link type="primary" :underline="true" @click="showPolyline">
+ {{ lineShow ? '鏀惰捣璺嚎' : '瀹氫綅璺嚎' }}
+ </el-link>
+ <el-text size="small">
+ 鎺ㄨ崘璺嚎鎬婚暱{{ item.direction.distance }}绫�
+ </el-text>
+ </el-row>
+ <el-divider>鍘嗗彶绾跨储</el-divider>
+ </template>
+ <template v-else>
+ <el-row>
+ <el-text size="small">{{ item._timestr }}</el-text>
+ </el-row>
+ <el-space>
+ <!-- <el-icon color="#F56C6C" :size="40"><WarnTriangleFilled /></el-icon> -->
+ <el-text>
+ {{ item.advice }}
+ </el-text>
+ </el-space>
+ <!-- <el-row justify="space-between">
+ <el-link type="primary" :underline="true" @click="showPolyline">
+ {{ lineShow ? '鏀惰捣璺嚎' : '瀹氫綅璺嚎' }}
+ </el-link>
+ <el-text size="small">
+ 鎺ㄨ崘璺嚎鎬婚暱{{ item.direction.distance }}绫�
+ </el-text>
+ </el-row> -->
+ <el-divider></el-divider>
+ </template>
+ </div>
+ </TransitionGroup>
+ </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 +107,70 @@
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;
+ /* color: #ffd82a; */
+}
+</style>
+<style>
+.list-move, /* 瀵圭Щ鍔ㄤ腑鐨勫厓绱犲簲鐢ㄧ殑杩囨浮 */
+.list-enter-active,
+.list-leave-active {
+ transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+ opacity: 0;
+ transform: translateX(30px);
+}
+
+/* 纭繚灏嗙寮�鐨勫厓绱犱粠甯冨眬娴佷腑鍒犻櫎
+ 浠ヤ究鑳藉姝ｇ‘鍦拌绠楃Щ鍔ㄧ殑鍔ㄧ敾銆� */
+.list-leave-active {
+ position: absolute;
+}
+</style>
--
Gitblit v1.9.3