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