From fe7fd6e4b1450c01faba724bb22b1d050e896c92 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 23 七月 2025 17:29:50 +0800
Subject: [PATCH] 2025.7.23 监管地图（待完成）
---
src/components/map/SceneMap.vue | 61 ++++++++++++++++++++++++++++--
1 files changed, 56 insertions(+), 5 deletions(-)
diff --git a/src/components/map/SceneMap.vue b/src/components/map/SceneMap.vue
index fe296bd..e301ec3 100644
--- a/src/components/map/SceneMap.vue
+++ b/src/components/map/SceneMap.vue
@@ -9,11 +9,22 @@
></FYOptionScene>
<slot name="left-top"></slot>
</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"
+ />
+ <!-- <el-text>{{ s.name }}</el-text> -->
+ </div>
+ </el-scrollbar>
</template>
<script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, computed } 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({
// 鍦烘櫙鐐逛綅淇℃伅
@@ -24,6 +35,17 @@
let markViewList = [];
const scenetype = ref();
+
+const selectedSceneList = computed(() => {
+ return props.data.filter((v) => {
+ v._checked = true;
+ return (
+ scenetype.value == undefined ||
+ scenetype.value.value == null ||
+ v.typeid + '' == scenetype.value.value
+ );
+ });
+});
watch(
() => props.data,
@@ -43,6 +65,12 @@
filterMarkViews();
}
});
+
+function handleChange(value) {
+ console.log(value);
+
+ filterMarkViews();
+}
function createSceneMarks() {
onMapMounted(() => {
@@ -64,15 +92,15 @@
content: ''
// direction: 'bottom'
});
- _extData._show = false
- ev.target.setExtData(_extData)
+ _extData._show = false;
+ ev.target.setExtData(_extData);
} else {
ev.target.setLabel({
content: _extData.name
// direction: 'bottom'
});
- _extData._show = true
- ev.target.setExtData(_extData)
+ _extData._show = true;
+ ev.target.setExtData(_extData);
}
});
allMarkViews.push(mark);
@@ -95,9 +123,22 @@
);
});
}
+ markViewList = markViewList.filter((v) => {
+ const _index = selectedSceneList.value.findIndex((s) => {
+ console.log(s.guid, v.getExtData().guid);
+
+ s.guid == v.getExtData().guid;
+ });
+ return _index != -1;
+ });
map.add(markViewList);
setTimeout(() => {
map.setFitView(markViewList);
+ // const list = markViewList.map((v) => {
+ // const _extData = v.getExtData();
+ // return [_extData.longitude, _extData.latitude];
+ // });
+ // mapUtil.setBound(list);
}, 1000);
});
}
@@ -116,4 +157,14 @@
left: 0;
top: 0;
}
+.right-wrap {
+ position: absolute;
+ right: 0px;
+ bottom: 0;
+ height: 50%;
+ background-color: white;
+ border-radius: 4px;
+ padding: 2px 8px;
+ max-width: 300px;
+}
</style>
--
Gitblit v1.9.3