<template>
|
<!-- <el-button
|
type="primary"
|
icon="Memo"
|
class="el-button-custom p-events-auto"
|
@click="dialogVisible = !dialogVisible"
|
>
|
溯源清单
|
</el-button> -->
|
<CardDialog
|
v-model="dialogVisible"
|
title="溯源清单"
|
draggable
|
:modal="false"
|
width="400px"
|
>
|
<template #default>
|
<div v-show="!nextPage">
|
<div>
|
<el-text size="small" type="warning">
|
共计{{ sceneStore.sceneList.length }}个点位，其中{{
|
sceneTypeSummary
|
}}
|
</el-text>
|
</div>
|
<!-- <div v-for="(t, i) in closestScene" :key="i"> -->
|
<el-text
|
v-for="(t, i) in closestScene"
|
:key="i"
|
size="small"
|
type="warning"
|
>
|
{{ t }}
|
</el-text>
|
<!-- </div> -->
|
<!-- <el-row> 共计{{ sceneStore.sceneList.length }}个点位，其中 </el-row> -->
|
<el-row class="scene-table">
|
<!-- <el-col :span="20"> -->
|
<el-table
|
:data="sceneStore.sceneList"
|
table-layout="fixed"
|
size="small"
|
height="30vh"
|
:show-overflow-tooltip="true"
|
border
|
row-class-name="t-row"
|
cell-class-name="t-cell"
|
header-row-class-name="t-header-row"
|
header-cell-class-name="t-header-cell"
|
@row-click="handleRowClick"
|
@filter-change="handleFilterChange"
|
>
|
<el-table-column type="index" label="#" width="25" />
|
<el-table-column
|
prop="type"
|
label="类型"
|
width="56"
|
column-key="type"
|
:filters="sceneTypeFilter"
|
:filter-method="filterHandler"
|
/>
|
<el-table-column prop="name" label="名称" />
|
<!-- <el-table-column prop="location" label="地址" /> -->
|
<el-table-column
|
prop="districtName"
|
label="区县"
|
align="center"
|
width="54"
|
/>
|
<!-- <el-table-column label="管理" width="70" align="center">
|
<template #default="{ row }">
|
<el-button
|
type="primary"
|
size="small"
|
class="el-button-custom"
|
@click="deleteDevice(row)"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column> -->
|
</el-table>
|
<!-- </el-col> -->
|
</el-row>
|
</div>
|
<div v-show="nextPage">
|
<DescriptionsList v-if="selectedScene" title="场景详情">
|
<template #extra>
|
<el-button
|
@click="nextPage = false"
|
icon="back"
|
type="primary"
|
size="small"
|
class="el-button-custom p-events-auto"
|
>返回</el-button
|
>
|
</template>
|
<DescriptionsListItem label="名称" :content="selectedScene.name" />
|
<DescriptionsListItem label="类型" :content="selectedScene.type" />
|
<DescriptionsListItem
|
label="区县"
|
:content="selectedScene.districtName"
|
/>
|
<DescriptionsListItem
|
label="地址"
|
:content="selectedScene.location"
|
/>
|
<DescriptionsListItem
|
label="经纬度"
|
:content="selectedScene.longitude + ', ' + selectedScene.latitude"
|
/>
|
<DescriptionsListItem
|
label="靠近站点"
|
:content="selectedScene.closestDevice.name"
|
/>
|
<DescriptionsListItem
|
label="相距站点"
|
:content="selectedScene.closestDevice.dis + '米'"
|
/>
|
</DescriptionsList>
|
</div>
|
</template>
|
<template #footer>
|
<!-- <el-row justify="start" align="middle" class="p-b-2 one-row"> -->
|
<!-- <el-text size="small" type="warning">搜索范围</el-text>
|
<el-input
|
class="input-radius m-h-2"
|
size="small"
|
v-model="sceneStore.radius"
|
:min="1"
|
/>
|
<el-text size="small" type="warning">
|
公里以内，结果{{ sceneStore.sceneList.length }}条</el-text
|
> -->
|
|
<!-- </el-row> -->
|
</template>
|
</CardDialog>
|
</template>
|
<script>
|
import { sceneTypes, sceneIcon } from '@/constant/scene-types';
|
import marks from '@/utils/map/marks';
|
import { useFetchData } from '@/composables/fetchData';
|
import { mapStores } from 'pinia';
|
import { useSceneStore } from '@/stores/scene';
|
import { useToolboxStore } from '@/stores/toolbox';
|
import MapUtil from '@/utils/map/util';
|
import calculate from '@/utils/map/calculate';
|
|
let layer = undefined;
|
const devices = [
|
{
|
name: '程桥站',
|
typeId: 20,
|
type: 'type',
|
longitude: 121.362928,
|
latitude: 31.192925
|
},
|
{
|
name: '华阳站',
|
typeId: 20,
|
type: '市控点',
|
longitude: 121.424603,
|
latitude: 31.223644
|
},
|
{
|
name: '仙霞站',
|
typeId: 19,
|
type: '国控点',
|
longitude: 121.394775,
|
latitude: 31.203982
|
}
|
];
|
|
export default {
|
setup() {
|
const { loading, fetchData } = useFetchData();
|
return { loading, fetchData };
|
},
|
props: {
|
modelValue: Boolean
|
},
|
emits: ['update:modelValue'],
|
data() {
|
return {
|
dialogVisible: false,
|
onConfirm: undefined,
|
showSceneTypes: [],
|
nextPage: false,
|
selectedScene: undefined
|
};
|
},
|
computed: {
|
...mapStores(useSceneStore),
|
...mapStores(useToolboxStore),
|
sceneTypeFilter() {
|
return sceneTypes()
|
.filter((v) => {
|
return !v.disabled;
|
})
|
.map((v) => {
|
return { text: v.label, value: v.label };
|
});
|
},
|
showSceneList() {
|
if (this.showSceneTypes.length == 0) {
|
return this.sceneStore.sceneList;
|
} else {
|
return this.sceneStore.sceneList.filter((v) => {
|
return this.showSceneTypes.indexOf(v.type) != -1;
|
});
|
}
|
},
|
// 搜索结果场景类型统计
|
sceneTypeSummary() {
|
const typeMap = new Map();
|
this.sceneStore.sceneList.forEach((s) => {
|
if (!typeMap.has(s.type)) {
|
typeMap.set(s.type, []);
|
}
|
typeMap.get(s.type).push(s);
|
});
|
|
let summary = '';
|
typeMap.forEach((v, k) => {
|
summary += `${k}${v.length}个、`;
|
});
|
summary = summary.slice(0, summary.length - 1);
|
|
return summary;
|
},
|
// 计算距离给定点位最近的场景
|
closestScene() {
|
let txt = [];
|
devices.forEach((d) => {
|
let minDistance, scene;
|
this.sceneStore.sceneList.forEach((s) => {
|
const dis = calculate.getDistance(
|
s.longitude,
|
s.latitude,
|
d.longitude,
|
d.latitude
|
);
|
if (!minDistance || dis < minDistance) {
|
minDistance = dis;
|
scene = s;
|
}
|
if (!s.closestDevice || dis < s.closestDevice.dis) {
|
s.closestDevice = {
|
name: d.name,
|
dis: Math.round(dis)
|
};
|
}
|
});
|
if (minDistance) {
|
minDistance = Math.round(minDistance);
|
}
|
if (scene) {
|
txt.push(`距${d.name}最近的为${scene.name}，距离${minDistance}米；`);
|
}
|
});
|
|
return txt;
|
}
|
},
|
watch: {
|
dialogVisible(nv) {
|
if (layer) {
|
if (!nv) {
|
MapUtil.removeViews(layer);
|
} else {
|
MapUtil.addViews(layer);
|
}
|
}
|
},
|
// 'sceneStore.sceneList': {
|
// handler(nV, oV) {
|
// if (nV != oV) {
|
// this.dialogVisible = true;
|
// this.drawMarks(nV);
|
// }
|
// },
|
// deep: true
|
// },
|
showSceneList(nV, oV) {
|
if (nV != oV) {
|
this.nextPage = false;
|
this.dialogVisible = true;
|
this.drawMarks(nV);
|
}
|
},
|
'toolboxStore.sceneSearchStatus': {
|
handler(nV) {
|
if (!nV) {
|
this.dialogVisible = false;
|
}
|
},
|
deep: true
|
}
|
},
|
methods: {
|
drawMarks(sceneList) {
|
if (layer != undefined) {
|
MapUtil.removeViews(layer);
|
layer = undefined;
|
}
|
if (sceneList.length != 0) {
|
const icons = [];
|
sceneList.forEach((s) => {
|
icons.push(sceneIcon(s.typeId));
|
});
|
layer = marks.createLabelMarks(icons, sceneList, false);
|
}
|
},
|
handleRowClick(row, col, event) {
|
this.nextPage = true;
|
this.selectedScene = row;
|
MapUtil.setCenter([row.longitude, row.latitude], true);
|
},
|
filterHandler(value, row, column) {
|
const property = column['property'];
|
return row[property] === value;
|
},
|
handleFilterChange(newFilters) {
|
// console.log(newFilters);
|
this.showSceneTypes = newFilters['type'];
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.scene-table {
|
/* background-color: antiquewhite; */
|
}
|
|
.input-radius {
|
width: 36px;
|
height: 16px;
|
}
|
|
/* .ff-content-medium .ff-border-top {
|
padding: 0px 0px var(--bevel-length-2) 0px;
|
} */
|
|
::v-deep .el-table {
|
--el-table-bg-color: transparent;
|
--el-table-row-hover-bg-color: var(--select_color);
|
--el-table-current-row-bg-color: var(--select_color);
|
/* --el-table-current-row-bg-color: #7dff5d96; */
|
--el-table-text-color: var(--font-color);
|
}
|
|
::v-deep .t-row {
|
cursor: pointer;
|
background-color: transparent !important;
|
}
|
|
.t-cell {
|
}
|
|
.t-header-row {
|
}
|
|
::v-deep .t-header-cell {
|
background-color: var(--bg-color-2) !important;
|
color: white !important;
|
}
|
</style>
|
