<template>
|
<!-- <CardDialog
|
:model-value="modelValue"
|
@update:model-value="handleDialogShow"
|
title="污染线索"
|
draggable
|
:modal="false"
|
width="400px"
|
>
|
<template #default> -->
|
<BaseCard v-if="item" v-show="modelValue">
|
<template #content>
|
<el-scrollbar class="clue-card">
|
<el-row justify="space-between" align="bottom">
|
<el-text type="danger" style="font-weight: 600" size="large">
|
污染线索
|
</el-text>
|
|
<el-link
|
type="info"
|
:underline="true"
|
@click="handleDialogShow(!modelValue)"
|
>
|
{{ modelValue ? '收起' : '打开' }}
|
<el-icon size="large"><CircleClose /></el-icon>
|
</el-link>
|
</el-row>
|
<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>
|
</el-scrollbar>
|
</template>
|
</BaseCard>
|
<!-- </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] != oV[1]) {
|
// showPolyline(nV[1]);
|
handleDialogShow(nV[1]);
|
}
|
}
|
);
|
|
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;
|
} */
|
|
.clue-card {
|
padding: 0 4px;
|
/* margin-right: 2px; */
|
width: 340px;
|
height: 360px;
|
/* border-right: 1px solid white; */
|
border-radius: 2px;
|
}
|
</style>
|
