<template>
|
<CardDialog
|
:model-value="modelValue"
|
@update:model-value="handleDialogShow"
|
title="污染线索"
|
draggable
|
:modal="false"
|
width="400px"
|
>
|
<template #default>
|
<template v-if="item">
|
<el-row>
|
<el-text type="info" size="small">{{ item._timestr }}</el-text>
|
</el-row>
|
<el-space>
|
<el-icon color="#F56C6C" :size="40"><WarnTriangleFilled /></el-icon>
|
<el-text type="info">
|
{{ item.advice }}
|
</el-text>
|
</el-space>
|
<el-row justify="space-between">
|
<el-text type="info" size="small">
|
推荐路线总长{{ item.direction.distance }}米
|
</el-text>
|
<el-link type="info" size="small" @click="showPolyline">
|
{{ lineShow ? '收起路线' : '定位路线' }}
|
</el-link>
|
</el-row>
|
<SceneTable
|
:show-marks="lineShow"
|
:scene-list="formatSceneList(item.sortedSceneList)"
|
>
|
<el-table-column prop="_count" width="42" label="溯源次数" />
|
</SceneTable>
|
</template>
|
</template>
|
<template #footer> </template>
|
</CardDialog>
|
</template>
|
<script setup>
|
import { ref, onMounted, onUnmounted, reactive, watch } from 'vue';
|
|
import { sceneTypes, sceneIcon } from '@/constant/scene-types';
|
import mapLine from '@/utils/map/line';
|
import mapUtil from '@/utils/map/util';
|
import marks from '@/utils/map/marks';
|
|
const props = defineProps({
|
modelValue: Boolean,
|
item: Object
|
});
|
|
const lineShow = ref(true);
|
// 上一条导航路线
|
let lastPolyline = undefined;
|
// 上一个导航目的地
|
// let lastDestination = undefined;
|
// let layer = undefined;
|
|
const emits = defineEmits(['update:modelValue']);
|
|
watch(
|
() => [props.item, props.modelValue],
|
(nV, oV) => {
|
if (nV[0] != oV[0]) {
|
const polyline = mapLine.drawDirection(
|
nV[0].direction.paths.map((v) => [v.first, v.second])
|
);
|
// polylineList.unshift(polyline);
|
if (lastPolyline) {
|
mapUtil.removeViews(lastPolyline);
|
}
|
lastPolyline = polyline;
|
lineShow.value = true;
|
} else if (nV[1]) {
|
showPolyline(true);
|
}
|
}
|
);
|
|
function showPolyline(show) {
|
if (typeof show === 'boolean') {
|
lineShow.value = show;
|
} else {
|
lineShow.value = !lineShow.value;
|
}
|
|
if (lineShow.value && lastPolyline) {
|
mapUtil.addViews(lastPolyline);
|
} else {
|
mapUtil.removeViews(lastPolyline);
|
}
|
}
|
|
// function removeLayer() {
|
// if (layer != undefined) {
|
// mapUtil.removeViews(layer);
|
// layer = undefined;
|
// }
|
// }
|
|
// function drawMarks(sceneList) {
|
// removeLayer();
|
// if (sceneList.length != 0) {
|
// const icons = [];
|
// sceneList.forEach((s) => {
|
// icons.push(sceneIcon(s.typeId));
|
// });
|
// layer = marks.createLabelMarks(icons, sceneList, false);
|
// }
|
// }
|
|
function formatSceneList(sceneList) {
|
return sceneList.map((v) => {
|
return {
|
...v.first,
|
_count: v.second
|
};
|
});
|
}
|
|
function handleDialogShow(value) {
|
showPolyline(value);
|
emits('update:modelValue', value);
|
}
|
</script>
|
<style scoped>
|
/* :deep(.el-text.el-text--primary) {
|
--el-text-color: white;
|
}
|
|
:deep(.el-link) {
|
--el-link-text-color: #23dad1;
|
} */
|
</style>
|
