<template>
|
<el-table
|
:data="sceneList"
|
table-layout="fixed"
|
size="small"
|
: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 label="临近站点" width="65">
|
<template #default="{ row }">
|
<div>{{ row.closestStation.name }}</div>
|
<div>{{ parseInt(row.length) + '米' }}</div>
|
</template>
|
</el-table-column>
|
<!-- <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>
|
</template>
|
<script setup>
|
import { ref, computed, watch } from 'vue';
|
import { sceneTypes, sceneIcon } from '@/constant/scene-types';
|
import MapUtil from '@/utils/map/util';
|
import marks from '@/utils/map/marks';
|
|
const props = defineProps({
|
sceneList: Array,
|
showMarks: {
|
type: Boolean,
|
default: true
|
}
|
});
|
|
let layer = undefined;
|
|
let showSceneTypes = ref([]);
|
|
const sceneTypeFilter = computed(() => {
|
return sceneTypes()
|
.filter((v) => {
|
return !v.disabled;
|
})
|
.map((v) => {
|
return { text: v.label, value: v.label };
|
});
|
});
|
|
const showSceneList = computed(() => {
|
if (showSceneTypes.value.length == 0) {
|
return props.sceneList;
|
} else {
|
return props.sceneList.filter((v) => {
|
return showSceneTypes.value.indexOf(v.type) != -1;
|
});
|
}
|
});
|
|
watch(showSceneList, (nV, oV) => {
|
if (nV && props.showMarks) {
|
drawMarks(nV);
|
} else {
|
if (layer != undefined) {
|
MapUtil.removeViews(layer);
|
layer = undefined;
|
}
|
}
|
});
|
|
watch(
|
() => props.showMarks,
|
(nV, oV) => {
|
if (showSceneList.value && nV) {
|
drawMarks(showSceneList.value);
|
} else {
|
if (layer != undefined) {
|
MapUtil.removeViews(layer);
|
layer = undefined;
|
}
|
}
|
}
|
);
|
|
function 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);
|
}
|
}
|
|
function handleRowClick(row, col, event) {
|
MapUtil.setCenter([row.longitude, row.latitude], true);
|
}
|
|
function filterHandler(value, row, column) {
|
const property = column['property'];
|
return row[property] === value;
|
}
|
|
function handleFilterChange(newFilters) {
|
// console.log(newFilters);
|
showSceneTypes.value = newFilters['type'];
|
}
|
</script>
|
