qa-prevention-gwj-vue/src/views/emergen_cyrescue/emergency_map/components/mapAssembly.vue

<template>
  <div class="mapAssembly-container">
    <div id="map" />
    <!-- 展示左侧的盒子元素 -->
    <div class="left-display-box">
      <!-- 应急机构 -->
      <div class="emergency-department">
        <el-descriptions :column="2" :colon="true" title="应急机构" class="department-list" content-style="huc">
          <template>
            <el-descriptions-item label="专家组名称">看板</el-descriptions-item>
            <el-descriptions-item label="联系电话">18100000000</el-descriptions-item>
          </template>
        </el-descriptions>
      </div>
      <!-- 联系人方式 -->
      <div class="contact-information">
        联系人方式
      </div>
    </div>
    <!-- 展示中间的盒子元素 -->
    <div class="center-display-box">
      <div v-for="(item, index) in pointsList" :key="index" class="point" @click="handlePoint(item, index)">
        <div class="rescue-box">
          <img :src="item.check ? item.check_img : item.img" class="rescue-img" alt="">
          <p class="rescue-text"> {{ item.label }} </p>
        </div>
      </div>
    </div>
    <!-- 展示右侧的盒子元素 -->
    <div class="right-display-box">
      展示右侧的盒子元素
    </div>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'

let mapInstance

export default {
  data() {
    return {
      pointsList: [
        {
          img: require('@/assets/map/emergency_rescue/ico1.png'),
          check_img: require('@/assets/map/emergency_rescue/ico1_on.png'),
          label: '物资',
          check: true
        },
        {
          img: require('@/assets/map/emergency_rescue/ico2.png'),
          check_img: require('@/assets/map/emergency_rescue/ico2_on.png'),
          label: '消防',
          check: false
        },
        {
          img: require('@/assets/map/emergency_rescue/ico3.png'),
          check_img: require('@/assets/map/emergency_rescue/ico3_on.png'),
          label: '更多',
          check: false
        }
      ],
      // 列表查询参数
      listQuery: {
        page: 1,
        limit: 10
      },
      KEYWORDS: ''
    }
  },
  mounted() {
    this.mapInit() // 调用地图初始化方法
    this.initPoints() // 调用初始化点位绘制方法
    this.getYjExpertGroupInfo()
  },
  // 实例销毁之前调用
  beforeDestroy() {
    mapInstance = null
  },
  methods: {
    /** 地图初始化 */
    mapInit() {
      mapInstance = new window.BMapGL.Map('map') // 创建地图实例
      mapInstance.centerAndZoom(new window.BMapGL.Point('119.645516', '39.934547'), 15) // 创建点坐标
      mapInstance.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放能力
    },
    // 扎点
    // addPoint(anchor) {
    //   if (!anchor.iconImg) throw new Error('请传入图标')
    //   if (!anchor.imageSize) throw new Error('请传入图片大小')
    //   if (!anchor.lng) throw new Error('请传入经度')
    //   if (!anchor.lat) throw new Error('请传入纬度')
    //   const imageSize = new window.BMapGL.Size(23, 30)
    //   const icon = new window.BMapGL.Icon(anchor.iconImg, imageSize, { imageSize })
    //   const point = new window.BMapGL.Point(anchor.lng, anchor.lat)
    //   const marker = new window.BMapGL.Marker(point, { icon }) // 创建标注
    //   mapInstance.addOverlay(marker) //  将标注添加到地图中
    // },
    // 给地图扎点标记事件事故
    addPointCallback(anchor) {
      // if (!anchor.iconImg) throw new Error('请传入图标')
      // if (!anchor.imageSize) throw new Error('请传入图片大小')
      if (!anchor.LONGITUDE) throw new Error('请传入经度')
      if (!anchor.LATITUDE) throw new Error('请传入纬度')
      const { LONGITUDE, LATITUDE } = anchor
      var point = new window.BMapGL.Point(LONGITUDE, LATITUDE)
      var marker = new window.BMapGL.Marker(point) // 创建标注
      mapInstance.addOverlay(marker) // 将标注添加到地图中
      // 处理标注事件点击行为
      marker.addEventListener('click', function() {
        // 获取指定点位所对应的范围等详细信息
        requestFN('major/comprehensive/scope', {
          accidentId: anchor.id
        })
          .then((data) => {
            const { LONGITUDE, LATITUDE } = anchor
            var point = new window.BMapGL.Point(LONGITUDE, LATITUDE)
            var marker = new window.BMapGL.Marker(point) // 创建标注
            mapInstance.addOverlay(marker)
          }).catch((e) => { })
      })
    },
    // 初始化定位点
    getInfo(id) {
      requestFN('/dictionaries/listTree').then((data) => {
        this.treeData = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
        console.error('获取树形数据失败', e)
      })
    },
    async initPoints() {
      const result = await this.getAccidentList()
      result.data.forEach((item) => {
        this.addPointCallback(item)
      })
    },
    /** 获取事故列表的所有点位信息 */
    getAccidentList() {
      return new Promise((resolve, reject) => {
        requestFN('/major/comprehensive/accidentList')
          .then((data) => {
            resolve(data)
          }).catch((e) => { })
      })
    },
    /** 初始化获取应急救援专家组 */
    getYjExpertGroupInfo() {
      requestFN(
        '/yjExpertGroup/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          name: this.KEYWORDS
        }
      ).then((data) => {
        console.log('data HHHHHHHh红红火火恍恍惚惚 :>> ', data)
      })
        .catch((e) => {
          this.listISLOADing = false
        })
    },
    /** 处理点坐标 */
    handlePoint(item, index) {
      console.log('当前点击的点坐标信息 :>> ', item)
      console.log('当前点击的点坐标索引值 :>>', index)
      this.pointsList[index].check = !this.pointsList[index].check
    }
  }
}
</script>

<style scoped lang="scss">
.mapAssembly-container {
  position: relative;

  #map {
    width: calc(100vw - 44px);
    height: calc(100vh - 84px);
  }

  .el-descriptions {
    background-color: transparent !important;
  }

  .el-descriptions__body {
    background-color: red !important;
    color: #fff !important;
  }

  .left-display-box {
    z-index: 99;
    position: absolute;
    left: 20px;
    top: 20px;
    width: 26vw;
    height: 83vh;
    background: rgba(20, 31, 168, .7);
    border: 1px solid #0060d7;
    border-top: none;
    padding: 8px;
    color: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;

    // 应急部门样式
    .emergency-department {
      border-radius: 8px;
      width: 100%;
      height: 50%;

      .department-list {
        color: rgb(255, 255, 255);
      }
    }

    // 联系人方式样式
    .contact-information {
      border-radius: 8px;
      border: 1px solid greenyellow;
      width: 100%;
      height: 50%;
    }
  }

  // 展示中间的盒子元素
  .center-display-box {
    z-index: 99;
    color: #fff;
    position: absolute;
    top: 72vh;
    left: 50%;
    transform: translateX(-20vw);
    width: 40vw;
    height: 13vh;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;

    .rescue-box {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 4vw;
      height: 4vw;
      .rescue-img {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
      .rescue-text {
        margin: 0;
        padding: 0;
        color: rgb(255, 255, 255);
      }
    }
  }

  // 展示右侧的盒子元素
  .right-display-box {
    z-index: 99;
    color: #fff;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 25vw;
    height: 83vh;
    background: rgba(20, 31, 168, .7);
    border: 1px solid #0060d7;
    border-radius: 8px;
  }
}
</style>