| | |
| | | <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) { |
| | |
| | | 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> |