2025.11.27

riku

2025-11-27 63d9a9c62fd34f4b48a157e0bc57dd82ee09a197

 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>