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

<template>
  <div class="map_assembly_container">

    <!-- 地图 -->
    <div id="map" />

    <div id="mapAssembly_container" class="body_container">
      <div class="body_flex_box">
        <!-- 左侧面板 -->
        <div class="left">
          <base-table :infomations="infomations" use-type="dutyInfo" />
          <base-table :infomations="infomations" use-type="reservePlanInfo" is-reserve-plan />
          <base-table :infomations="infomations" use-type="addressBook" />
        </div>
        <!-- 右侧面板 -->
        <div class="right">
          <!-- <chat /> -->
          <sysChat :chat-data="chatData" @orderMessage="handlerOrderMessage" />
        </div>
      </div>
      <div class="top_search">
        <span
          v-for="(item, index) in rangeList"
          :class="{ active: activeIndex === index }"
          :key="index"
          class="range_item"
          @click="setActive(item, index)"
        >{{ item }} 米</span>
      </div>
      <div class="bottom-center">
        <div class="secon_modal">
          <span v-for="(sos, ind) in currSubControlPoint" :key="ind" @click="subToggleCheck(sos, ind)">
            <img :src="!sos.check ? sos.imgUrl : sos.check_img" alt="">
            <p>{{ sos.label }}</p>
          </span>
        </div>
        <div class="control_pointer">
          <span v-for="(item, index) in controlPoint" :key="index" style="cursor: pointer;" @click="toggleCheck(item, index)">
            <img :src="!item.check ? item.imgUrl : item.check_img" alt="">
            <p>{{ item.label }}</p>
          </span>
        </div>
      </div>
    </div>

    <dialog-index :visible.sync="infoDialog.visible" :value="{ id:infoDialog.id }" title="企业信息" />
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
import baseTable from './baseTable.vue'
import sysChat from './sysChat.vue'
import DialogIndex from './dialog.vue'

let mapInstance

export default {
  components: { baseTable, sysChat, DialogIndex },
  data() {
    return {
      infomations: {
        dutyInfoData: [
          {
            job: '值班领导',
            name: '张三',
            phone: '12939029382'
          },
          {
            job: '值班员',
            name: '李四',
            phone: '14939029382'
          },
          {
            job: '值班司机',
            name: '玩股份',
            phone: '10939029382'
          },
          {
            job: '值班领导',
            name: '张三',
            phone: '12939029382'
          },
          {
            job: '值班员',
            name: '李四',
            phone: '14939029382'
          },
          {
            job: '值班司机',
            name: '玩股份',
            phone: '10939029382'
          },
          {
            job: '值班领导',
            name: '张三',
            phone: '12939029382'
          },
          {
            job: '值班员',
            name: '李四',
            phone: '14939029382'
          },
          {
            job: '值班司机',
            name: '玩股份',
            phone: '10939029382'
          }
        ],
        reservePlan: {
          应急预案名称: '项目突发事件处理应急预案',
          预案编号: '24590823424',
          适用领域: '医疗行业',
          预案类别: '自然灾害应急预案',
          预案级别: '三级预案',
          编制单位: '秦皇岛卓云科技',
          编制人: '藏下午',
          发布日期: '1722576942074',
          发布文号: '234235423'
        },
        addressBook: [
          {
            job: '总经理',
            name: '张三',
            phone: '12939029382'
          },
          {
            job: '总经理',
            name: '李四',
            phone: '14939029382'
          },
          {
            job: '总经理',
            name: '玩股份',
            phone: '10939029382'
          },
          {
            job: '总经理',
            name: '张三',
            phone: '12939029382'
          },
          {
            job: '总经理',
            name: '李四',
            phone: '14939029382'
          },
          {
            job: '总经理',
            name: '玩股份',
            phone: '10939029382'
          }
        ]
      },
      infoDialog: {
        visible: false,
        id: ''
      },
      activeIndex: 0,
      rangeList: [20, 50, 100, 500, 1000, 5000],
      mapIco: [
        { id: 'e1899a925eb7478653007a9e7d17d588', ico: require('../../../../assets/map/emergency_rescue/point/img1.png') },
        { id: 'ea3555185c6498b2d3d07023de723806', ico: require('../../../../assets/map/emergency_rescue/point/img2.png') },
        { id: '52ddb251b528987c58c4d84fe0d83952', ico: require('../../../../assets/map/emergency_rescue/point/img3.png') },
        { id: '7f3d41464cdf450422ffe385c3aa870e', ico: require('../../../../assets/map/emergency_rescue/point/img4.png') },
        { id: '2ef8327624adad89b2dbf6b2e03ac6ef', ico: require('../../../../assets/map/emergency_rescue/point/img5.png') },
        { id: 'e1899a925eb7478653007a9e7d17d588', ico: require('../../../../assets/map/emergency_rescue/point/img6.png') },
        { id: '122abe9858feaecae1c80d2d851fcd57', ico: require('../../../../assets/map/emergency_rescue/point/img7.png') },
        { id: '637b70684bddcfbee0421db1443a972a', ico: require('../../../../assets/map/emergency_rescue/point/img8.png') },
        { id: '950700c9cd80c5e1b22a6c6cdf63a61d', ico: require('../../../../assets/map/emergency_rescue/point/img9.png') },
        { id: '1edb69abc25785c02e2e475162d65b17', ico: require('../../../../assets/map/emergency_rescue/point/img10.png') },
        { id: 'd25f2cae07902e373b72e74757e7a6ea', ico: require('../../../../assets/map/emergency_rescue/point/img11.png') },
        { id: 'be31acea122c423a9dbb431cc66a1351', ico: require('../../../../assets/map/emergency_rescue/point/img12.png') },
        { id: '759d323be34eae4bd83289b36af9ea47', ico: require('../../../../assets/map/emergency_rescue/point/img13.png') }
      ],
      controlPoint: [
        {
          id: '0',
          label: '应急资源',
          imgUrl: require('../../../../assets/map/emergency_rescue/ico1.png'),
          check_img: require('../../../../assets/map/emergency_rescue/ico1_on.png'),
          check: true
        },
        {
          id: '1',
          label: '消防信息',
          imgUrl: require('../../../../assets/map/emergency_rescue/ico2.png'),
          check_img: require('../../../../assets/map/emergency_rescue/ico2_on.png'),
          check: false
        },
        {
          id: '2',
          label: '人员定位',
          imgUrl: require('../../../../assets/map/emergency_rescue/ico3.png'),
          check_img: require('../../../../assets/map/emergency_rescue/ico3_on.png'),
          check: false
        },
        {
          id: '3',
          label: '视频监控',
          imgUrl: require('../../../../assets/map/emergency_rescue/ico4.png'),
          check_img: require('../../../../assets/map/emergency_rescue/ico4_on.png'),
          check: false
        },
        {
          id: '4',
          label: '气象监测',
          imgUrl: require('../../../../assets/map/emergency_rescue/ico5.png'),
          check_img: require('../../../../assets/map/emergency_rescue/ico5_on.png'),
          check: false
        }
      ],
      ctlActiveIndex: 0,
      subControlPoint: {
        '0': [
          {
            id: '9b3b9451cf9a86b1e8a44c9a9b0de826',
            label: '资料装备库',
            imgUrl: require('../../../../assets/map/emergency_rescue/i1.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i1_on.png'),
            check: true
          },
          {
            id: 'f61af43a0af59c86187913f9fe084588',
            label: '应急避难场所',
            imgUrl: require('../../../../assets/map/emergency_rescue/i2.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i2_on.png'),
            check: false
          },
          {
            id: '7a38cf58e55995c0a5ce2c8e1f5bcc79',
            label: '排水井',
            imgUrl: require('../../../../assets/map/emergency_rescue/i3.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i3_on.png'),
            check: false
          },
          {
            id: 'a0fd60946978e28dac5b8a2965e00a2b',
            label: '封闭卡口',
            imgUrl: require('../../../../assets/map/emergency_rescue/i4.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i4_on.png'),
            check: false
          }
        ],
        '1': [
          {
            id: '1768cf2b0fb0844dedbb6db1dca3cc79',
            label: '消防控制室',
            imgUrl: require('../../../../assets/map/emergency_rescue/i5.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i5_on.png'),
            check: false
          },
          {
            id: '18849e29cce63a9408117ca26186203b',
            label: '消防泵房',
            imgUrl: require('../../../../assets/map/emergency_rescue/i6.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i6_on.png'),
            check: false
          },
          {
            id: 'da52ba25c3f15ad932b18fbd4d028062',
            label: '消防水源',
            imgUrl: require('../../../../assets/map/emergency_rescue/i7.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i7_on.png'),
            check: false
          },
          {
            id: 'e241e3ef479ac7fb217c7b496816dc7e',
            label: '消防点位',
            imgUrl: require('../../../../assets/map/emergency_rescue/i8.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i8_on.png'),
            check: false
          }
        ],
        '2': [
          {
            id: '93f7e01c8e4d906053916d314e1d3a2a',
            label: '人员定位',
            imgUrl: require('../../../../assets/map/emergency_rescue/i9.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i9_on.png'),
            check: false
          },
          {
            id: '30fcda69c3eae93adbab78dea360b6b0',
            label: '人员轨迹',
            imgUrl: require('../../../../assets/map/emergency_rescue/i10.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i10_on.png'),
            check: false
          }
        ],
        '3': [
          {
            id: '6ac1fc24fde38671ee70d7aebeed5276',
            label: '摄像头',
            imgUrl: require('../../../../assets/map/emergency_rescue/i11.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i11_on.png'),
            check: false
          }
        ],
        '4': [
          {
            id: '3f858ab418dbf791353ba6ff87c59e85',
            label: '气象站',
            imgUrl: require('../../../../assets/map/emergency_rescue/i12.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i12_on.png'),
            check: false
          },
          {
            id: '997392774d64efd8507c7c518c23fc44',
            label: '风速站',
            imgUrl: require('../../../../assets/map/emergency_rescue/i13.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i13_on.png'),
            check: false
          }
        ]
      },
      // 当前点击后选择的二级坐标点位分类集合
      currSubControlPoint: [],
      subControlPointIndex: 0,
      chatData: [
        [
          {
            title: '刘大拿0',
            content: '7月29日晚，清华毕业生马翔宇发出消息称：“感谢大家转发，目前我仍然是安全的。”并披露了部分录音',
            isRead: true,
            answers: [
              {
                personnal: '王晋升',
                content: '上班第一天,没有红包怎么开启工作模式?',
                isReady: false
              },
              {
                personnal: '六大少',
                content: '新年快乐,龙年大吉',
                isReady: true
              },
              {
                personnal: '王紧生',
                content: '和张云雷送辅助喝',
                isReady: false
              }
            ]
          }
        ],
        [
          {
            title: '李彬',
            content: '7月29日晚，清华毕业生马翔宇发出消息称：“感谢大家转发，目前我仍然是安全的。”并披露了部分录音',
            isRead: true,
            answers: [
              {
                personnal: '张晓武',
                content: '上班第一天,没有红包怎么开启工作模式?',
                isReady: false
              },
              {
                personnal: '里核心',
                content: '新年快乐,龙年大吉',
                isReady: true
              },
              {
                personnal: '干呼气',
                content: '和张云雷送辅助喝',
                isReady: true
              }
            ]
          }
        ]
      ]
    }
  },
  mounted() {
    /** 调用地图初始化方法 */
    this.mapInit()
    /** 调用初始化点位绘制方法 */
    this.initPoints()
    /** 初始化选中首个二级坐标点位分类 */
    this.currSubControlPoint = this.subControlPoint['0']
  },
  methods: {
    /** 地图初始化 */
    mapInit() {
      mapInstance = new window.BMapGL.Map('map') // 创建地图实例
      mapInstance.centerAndZoom(new window.BMapGL.Point('119.645516', '39.934547'), 15) // 创建点坐标
      mapInstance.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放能力
    },
    setActive(item, index) {
      console.log('item :>> ', item)
      // 设置被选中项的索引
      this.activeIndex = index
    },
    /** 扎点方法 */
    addPoint(anchor) {
      if (!anchor.iconUrl) throw new Error('请传入图标')
      // if (!anchor.imageSize) throw new Error('请传入图片大小')
      if (!anchor.longitude) throw new Error('请传入经度')
      if (!anchor.latitude) throw new Error('请传入纬度')
      const imageSize = new window.BMapGL.Size(23, 30)
      const icon = new window.BMapGL.Icon(config.fileUrl + anchor.iconUrl, imageSize, { imageSize })
      const point = new window.BMapGL.Point(anchor.longitude, anchor.latitude)
      const marker = new window.BMapGL.Marker(point, { icon }) // 创建标注
      // const anchorOpts = {
      //   width: 90,
      //   height: 70,
      //   title: '资源信息'
      // }
      // const infoWindow = new window.BMapGL.InfoWindow(`<p">资源名称: ${anchor.name || '无'}</p>`, anchorOpts)
      // marker.addEventListener('mouseover', () => {
      //   mapInstance.openInfoWindow(infoWindow, point)
      // })

      marker.addEventListener('click', async() => {
        this.infoDialog.visible = true
      })
      mapInstance.addOverlay(marker) // 将标注添加到地图中
    },
    /** 给地图扎点标记事件事故 */
    addPointCallback(anchor) {
      if (!anchor.iconUrl) throw new Error('请传入图标')
      if (!anchor.LONGITUDE) throw new Error('请传入经度')
      if (!anchor.LATITUDE) throw new Error('请传入纬度')
      const { LONGITUDE, LATITUDE } = anchor
      const imageSize = new window.BMapGL.Size(33, 40)
      const icon = new window.BMapGL.Icon(config.fileUrl + anchor.iconUrl, imageSize, { imageSize }) // 创建 icon 图标
      var point = new window.BMapGL.Point(LONGITUDE, LATITUDE)
      const marker = new window.BMapGL.Marker(point, { icon }) // 创建标注
      mapInstance.addOverlay(marker) // 将标注添加到地图中
      // 处理标注事件点击行为
      marker.addEventListener('click', async() => {
        let accidentParams = {}
        let nearbyResourcesList = []
        // 获取指定点位所对应的范围等详细信息
        this.currentSelectPointAccident = anchor
        const result = await this.getQueryScopeAsync(anchor)
        if (result.code === 200) {
          mapInstance.clearOverlays() // 清除地图上所有覆盖物
          const { accident, nearbyResources } = result.data
          accidentParams = accident
          nearbyResourcesList = nearbyResources
          const point = new window.BMapGL.Point(accidentParams.LONGITUDE, accidentParams.LATITUDE)
          const marker = new window.BMapGL.Marker(point, { icon })
          mapInstance.addOverlay(marker)
          this.infoWindowPointerController({ point, marker, info: result.data })

          if (nearbyResourcesList.length === 0) return
          nearbyResourcesList.forEach(item => {
            this.addPoint(item)
          })
        }
      })
    },
    infoWindowPointerController(config) {
      const { point, marker, info } = config
      var opts = {
        width: 300,
        height: 200,
        title: '事故点位信息'
      }
      const sContent = `
      <div>
        <ul>
          <li>机主姓名: ${info.accident.OWNER_NAME || '无'}</li>
          <li>访问模式: ${info.accident.ACCESS_MODE || '无'}</li>
          <li>呼入电话: ${info.accident.INCOMING_PHONE || '无'}</li>
          <li>事件类型: ${info.accident.EVENT_TYPE || '无'}</li>
          <li>接报时间: ${info.accident.REPORT_TIME || '无'}</li>
          <li>发生时间: ${info.accident.OCCURRENCE_TIME || '无'}</li>
          <li>救援情况: ${info.accident.RESCUE_SITUATION || '无'}</li>
        </ul>
      </div>
      `
      const infoWindow = new window.BMapGL.InfoWindow(sContent, opts)
      marker.addEventListener('mouseover', () => {
        mapInstance.openInfoWindow(infoWindow, point)
      })
    },
    /** 获取指定点位所在周围范围等详细信息 */
    getQueryScopeAsync(enterParams) {
      return new Promise((resolve, reject) => {
        requestFN('major/comprehensive/scope', {
          accidentId: enterParams.id,
          type: enterParams.type ? enterParams.type : ''
        }).then((data) => {
          resolve(data)
          return data
        }).catch((error) => {
          reject(error)
        })
      })
    },
    /** 初始化点位绘制方法 */
    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) => { })
      })
    },
    // 一级坐标点位点击事件
    toggleCheck(item, index) {
      // 遍历所有项，将点击项的 check 设置为 true，其他项的 check 设置为 false
      this.controlPoint.forEach((item, idx) => {
        if (idx === index) {
          item.check = true
        } else {
          item.check = false
        }
      })
      console.log('item :>> ', item)
      console.log('index :>> ', index)
      this.currSubControlPoint = this.subControlPoint[index]
    },
    // 二级坐标点位点击事件
    subToggleCheck(sos, ind) {
      this.currSubControlPoint.forEach((item, idx) => {
        if (idx === ind) {
          item.check = true
        } else {
          item.check = false
        }
      })
      console.log('sos :>> ', sos)
    },
    // 接收子组件传递出来的指令发送的事件
    handlerOrderMessage() {
      this.infoDialog.visible = true
    }
  }
}
</script>

<style scoped lang="scss">
.map_assembly_container {
  height: 100%;

  position: relative;

  // 地图的宽高样式限制
  #map {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .body_container {
    position: absolute;
    left: 0;
    top: 0;
    padding: 18px;
    width: 100%;
    height: 100%;

    .body_flex_box {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left,
      .right {
        box-sizing: border-box;
        z-index: 99;
        width: 380px;
        height: 100%;
        background-color: #000d27bd;
        border-radius: 6px;
        border: 2px solid #034383;
      }

      .left {
        .scroll-box {
          height: 40px;
          overflow-x: hidden;
          overflow-y: auto;
        }
      }

      .right {
        position: relative;
        width: 410px;
      }
    }

    .top_search {
      z-index: 99;
      position: absolute;
      left: 405px;
      top: 18px;
      display: flex;
      align-items: center;
      justify-content: center;

      .range_item {
        overflow: hidden;
        cursor: pointer;
        border-right: 1px solid #183c70;
        display: inline-block;
        width: 67px;
        text-align: center;
        height: 34px;
        line-height: 34px;
        color: #fff;
        background-color: #223050;

        &:first-child {
          border-top-left-radius: 6px;
          border-bottom-left-radius: 6px;
        }

        &:last-child {
          border-top-right-radius: 6px;
          border-bottom-right-radius: 6px;
          border-right: none;
        }

        &.active {
          background-color: #06417d;
          color: #4aecff;
        }
      }
    }

    .bottom-center {
      z-index: 99;
      position: absolute;
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 1123px);
      min-width: 335px;
      height: 80px;
      background-image: url('../../../../assets/map/emergency_rescue/menubg.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-size: 100% 77px;

      .secon_modal {
        gap: 23px;
        padding: 0 18px;
        height: 60px;
        border-radius: 6px;
        border: 1px solid #364260;
        background-color: #214e8caf;
        position: absolute;
        left: 0px;
        top: -75px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;

        & span {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }

        & img {
          width: 30px;
          height: 30px;
          margin-bottom: 4px;
        }

        & p {
          color: #ffffff;
          margin: 0;
          padding: 0;
          font-size: 12px;
        }
      }

      .control_pointer {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        top: -23px;

        & img {
          width: 70px;
          height: 70px;
        }

        & p {
          color: #ffffff;
          margin: 0;
          padding: 0;
        }
      }
    }
  }
}
</style>