<template>
|
<CardDialog
|
v-model="dialogVisible"
|
title="走航智能分析"
|
draggable
|
:modal="false"
|
width="400px"
|
>
|
<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 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(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) {
|
const { type, content } = websocketMsgParser.parseMsg(data);
|
// 污染分析结果 AnalysisResult
|
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;
|
|
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>
|
