From 63d9a9c62fd34f4b48a157e0bc57dd82ee09a197 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 27 十一月 2025 17:36:12 +0800
Subject: [PATCH] 2025.11.27
---
src/components/map/SceneMap.vue | 206 +++++++++++++++++++++++++++++++++++++++------------
1 files changed, 156 insertions(+), 50 deletions(-)
diff --git a/src/components/map/SceneMap.vue b/src/components/map/SceneMap.vue
index 3abe4c6..42dede6 100644
--- a/src/components/map/SceneMap.vue
+++ b/src/components/map/SceneMap.vue
@@ -1,14 +1,72 @@
<template>
<BaseMap></BaseMap>
- <el-row class="left-top-wrap">
- <FYOptionScene
- label=""
- :allOption="true"
- :type="2"
- v-model:value="scenetype"
- ></FYOptionScene>
- <slot name="left-top"></slot>
- </el-row>
+ <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>
@@ -17,19 +75,9 @@
</el-col>
</el-row> -->
- <el-scrollbar class="right-wrap">
- <div v-for="s in selectedSceneList" :key="s.guid">
- <el-checkbox
- v-model="s._checked"
- :label="s.name"
- @change="handleChange(s)"
- />
- <!-- <el-text>{{ s.name }}</el-text> -->
- </div>
- </el-scrollbar>
</template>
<script setup>
-import { ref, watch, computed } from 'vue';
+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';
@@ -39,6 +87,17 @@
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 = [];
@@ -46,7 +105,7 @@
const selectedSceneList = computed(() => {
return props.data.filter((v) => {
- v._checked = true;
+ v._visible = true;
return (
scenetype.value == undefined ||
scenetype.value.value == null ||
@@ -74,16 +133,25 @@
}
});
-function handleChange(scene) {
+function handleVisibleChange(scene) {
const mv = markViewList.find((v) => {
return scene.guid == v.getExtData().guid;
});
- if (scene._checked) {
+ scene._visible = !scene._visible;
+ if (scene._visible) {
map.add(mv);
} else {
map.remove(mv);
}
- // filterMarkViews();
+}
+
+function locateTo(scene) {
+ const mv = markViewList.find((v) => {
+ return scene.guid == v.getExtData().guid;
+ });
+ if (mv) {
+ mapUtil.setFitView(mv);
+ }
}
function createSceneMarks() {
@@ -94,28 +162,40 @@
const mark = marks.createMarker({
position: [d.longitude, d.latitude],
img: sceneIcon(d.typeid),
- // label: d.name,
+ label: '',
extData: d
});
+ var timeout;
// 娣诲姞鐐瑰嚮浜嬩欢
- mark.on('click', (ev) => {
+ mark.on('mouseover', (ev) => {
+ if (timeout) {
+ clearTimeout(timeout);
+ }
const _mark = ev.target;
const _extData = _mark.getExtData();
- if (_extData._show) {
+ ev.target.setLabel({
+ content: _extData.name
+ });
+ timeout = setTimeout(() => {
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);
- }
+ }, 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);
});
@@ -142,7 +222,7 @@
}
markViewList = markViewList.filter((v) => {
const _index = selectedSceneList.value.findIndex((s) => {
- return s.guid == v.getExtData().guid && s._checked;
+ return s.guid == v.getExtData().guid && s._visible;
});
return _index != -1;
});
@@ -169,20 +249,46 @@
}
</script>
<style scoped>
-.left-top-wrap {
+.wrap {
+ position: absolute;
+ left: 0px;
+ top: 0;
+ width: 100%;
+ height: 100%;
+}
+.left-wrap {
position: absolute;
left: 0;
- top: 0;
+ bottom: 1px;
}
-.right-wrap {
- position: absolute;
- right: 0px;
- bottom: 0;
- height: 50%;
+
+.card-left {
background-color: white;
- border-radius: 4px;
- padding: 2px 8px;
- max-width: 300px;
- box-shadow: var(--el-box-shadow);
+ /* 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>
--
Gitblit v1.9.3