<template>
|
<BaseMap></BaseMap>
|
<div class="wrap p-events-none">
|
<el-row class="p-events-none">
|
<FYOptionScene
|
class="p-events-auto"
|
label=""
|
:allOption="true"
|
:type="2"
|
v-model:value="scenetype"
|
></FYOptionScene>
|
<div class="p-events-auto">
|
<slot name="left-top"></slot>
|
</div>
|
</el-row>
|
<el-row
|
class="p-events-none left-wrap"
|
align="bottom"
|
:style="leftCardWrapStyle"
|
>
|
<div
|
ref="refLeftCard"
|
v-show="leftCardShow"
|
class="card-left p-events-auto"
|
>
|
<div><el-text size="large">场景列表</el-text></div>
|
<el-scrollbar height="400px" class="scrollbar">
|
<el-row
|
v-for="s in selectedSceneList"
|
:key="s.guid"
|
justify="space-between"
|
class="p-v-4 scene-item"
|
>
|
<el-text truncated style="width: 250px">
|
{{ s.index + '、' + s.name }}
|
</el-text>
|
<el-space>
|
<el-icon
|
:color="
|
s._checked ? 'rgb(121, 187, 255)' : 'rgb(200, 201, 204)'
|
"
|
@click="locateTo(s)"
|
>
|
<LocationInformation />
|
</el-icon>
|
<el-icon
|
class="cursor-p"
|
:color="
|
s._visible ? 'rgb(121, 187, 255)' : 'rgb(200, 201, 204)'
|
"
|
@click="handleVisibleChange(s)"
|
>
|
<View />
|
</el-icon>
|
</el-space>
|
</el-row>
|
</el-scrollbar>
|
</div>
|
<el-button
|
class="close-btn-right p-events-auto"
|
type="primary"
|
plain
|
size="small"
|
:icon="leftCardShow ? 'ArrowLeft' : 'ArrowRight'"
|
@click="leftCardShow = !leftCardShow"
|
></el-button>
|
</el-row>
|
</div>
|
|
<!-- <el-row class="right-wrap">
|
<el-col :span="4">
|
<el-button>close</el-button>
|
</el-col>
|
<el-col :span="20">
|
|
</el-col>
|
</el-row> -->
|
</template>
|
<script setup>
|
import { ref, watch, computed, onMounted } from 'vue';
|
import { map, onMapMounted } from '@/utils/map/index';
|
import marks from '@/utils/map/marks';
|
import mapUtil from '@/utils/map/util';
|
import { sceneIcon } from '@/assets/scene-icon';
|
const props = defineProps({
|
// 场景点位信息
|
data: Array
|
});
|
|
onMounted(() => {
|
// refLeftCard.value.offsetHeight;
|
// leftCardWrapStyle.value = {
|
// height: refLeftCard.value.offsetHeight + 'px'
|
// };
|
});
|
|
const refLeftCard = ref();
|
const leftCardShow = ref(true);
|
const leftCardWrapStyle = ref();
|
|
let allMarkViews = [];
|
let markViewList = [];
|
|
const scenetype = ref();
|
|
const selectedSceneList = computed(() => {
|
return props.data.filter((v) => {
|
v._visible = true;
|
return (
|
scenetype.value == undefined ||
|
scenetype.value.value == null ||
|
v.typeid + '' == scenetype.value.value
|
);
|
});
|
});
|
|
watch(
|
() => props.data,
|
(nV, oV) => {
|
if (nV != oV) {
|
clearSceneMarks();
|
createSceneMarks();
|
filterMarkViews(true);
|
}
|
},
|
{ immediate: true }
|
);
|
|
watch(scenetype, (nV, oV) => {
|
if (nV != oV) {
|
clearSceneMarks();
|
filterMarkViews(true);
|
}
|
});
|
|
function handleVisibleChange(scene) {
|
const mv = markViewList.find((v) => {
|
return scene.guid == v.getExtData().guid;
|
});
|
scene._visible = !scene._visible;
|
if (scene._visible) {
|
map.add(mv);
|
} else {
|
map.remove(mv);
|
}
|
}
|
|
function locateTo(scene) {
|
const mv = markViewList.find((v) => {
|
return scene.guid == v.getExtData().guid;
|
});
|
if (mv) {
|
mapUtil.setFitView(mv);
|
}
|
}
|
|
function createSceneMarks() {
|
onMapMounted(() => {
|
allMarkViews = [];
|
props.data.forEach((d) => {
|
// 创建场景地图标注
|
const mark = marks.createMarker({
|
position: [d.longitude, d.latitude],
|
img: sceneIcon(d.typeid),
|
label: '',
|
extData: d
|
});
|
var timeout;
|
// 添加点击事件
|
mark.on('mouseover', (ev) => {
|
if (timeout) {
|
clearTimeout(timeout);
|
}
|
const _mark = ev.target;
|
const _extData = _mark.getExtData();
|
ev.target.setLabel({
|
content: _extData.name
|
});
|
timeout = setTimeout(() => {
|
ev.target.setLabel({
|
content: ''
|
});
|
}, 2000);
|
// if (_extData._show) {
|
// ev.target.setLabel({
|
// content: ''
|
// // direction: 'bottom'
|
// });
|
// _extData._show = false;
|
// ev.target.setExtData(_extData);
|
// } else {
|
// ev.target.setLabel({
|
// content: _extData.name
|
// // direction: 'bottom'
|
// });
|
// _extData._show = true;
|
// ev.target.setExtData(_extData);
|
// }
|
});
|
allMarkViews.push(mark);
|
});
|
});
|
}
|
|
/**
|
* 筛选所选类型的场景
|
*/
|
function filterMarkViews(setFitView) {
|
onMapMounted(() => {
|
if (markViewList.length > 0) {
|
map.remove(markViewList);
|
}
|
if (scenetype.value == undefined) {
|
markViewList = allMarkViews;
|
} else {
|
markViewList = allMarkViews.filter((v) => {
|
return (
|
scenetype.value.value == null ||
|
v.getExtData().typeid + '' == scenetype.value.value
|
);
|
});
|
}
|
markViewList = markViewList.filter((v) => {
|
const _index = selectedSceneList.value.findIndex((s) => {
|
return s.guid == v.getExtData().guid && s._visible;
|
});
|
return _index != -1;
|
});
|
map.add(markViewList);
|
if (setFitView) {
|
setTimeout(() => {
|
map.setFitView(markViewList);
|
// const list = markViewList.map((v) => {
|
// const _extData = v.getExtData();
|
// return [_extData.longitude, _extData.latitude];
|
// });
|
// mapUtil.setBound(list);
|
}, 1000);
|
}
|
});
|
}
|
|
function clearSceneMarks() {
|
onMapMounted(() => {
|
if (markViewList.length > 0) {
|
map.remove(markViewList);
|
}
|
});
|
}
|
</script>
|
<style scoped>
|
.wrap {
|
position: absolute;
|
left: 0px;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
}
|
.left-wrap {
|
position: absolute;
|
left: 0;
|
bottom: 1px;
|
}
|
|
.card-left {
|
background-color: white;
|
/* border-radius: 4px; */
|
width: 316px;
|
/* box-shadow: var(--el-box-shadow); */
|
z-index: 0;
|
}
|
|
.scrollbar {
|
padding-right: 8px;
|
/* width: 300px; */
|
}
|
|
.close-btn-right {
|
margin-left: -3px;
|
height: 60px;
|
}
|
|
.p-events-auto {
|
pointer-events: auto;
|
}
|
|
.p-events-none {
|
pointer-events: none;
|
}
|
|
.scene-item {
|
/* background-color: aliceblue; */
|
}
|
</style>
|
