<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"
|
size="medium"
|
>
|
<template #default>
|
<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>
|
</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';
|
|
let layer = undefined;
|
|
export default {
|
setup() {
|
const { loading, fetchData } = useFetchData();
|
return { loading, fetchData };
|
},
|
props: {
|
modelValue: Boolean
|
},
|
emits: ['update:modelValue'],
|
data() {
|
return {
|
dialogVisible: false,
|
onConfirm: undefined,
|
showSceneTypes: []
|
};
|
},
|
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;
|
});
|
}
|
}
|
},
|
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.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) {
|
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;
|
} */
|
</style>
|
