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 :info="info" use-type="dutyInfo" @goInfo="goInfo"/>
          <base-table :info="info" use-type="reservePlanInfo" is-reserve-plan @goInfo="goInfo"/>
          <base-table :info="info" use-type="addressBook" @goInfo="goInfo"/>
        </div>
        <!-- 右侧面板 -->
        <div id="right_height" class="right">
          <sysChat :chat-data="chatData" @orderMessage="handlerOrderMessage" @reFlush="initInfo()" @endRescue="endRescue()"/>
        </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="{ ...infoDialog.info }" :title="infoDialog.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 {
      info: {
        dutyInfoData: [],
        reservePlan: {},
        addressBook: []
      },
      chatData: [],
      infoDialog: {
        visible: false,
        id: '',
        info: {},
        title: ''
      },
      activeIndex: 0,
      range: 20,
      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',
            code: '0',
            label: '资料装备库',
            imgUrl: require('../../../../assets/map/emergency_rescue/i1.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i1_on.png'),
            check: true
          },
          {
            id: 'f61af43a0af59c86187913f9fe084588',
            code: '1',
            label: '应急避难场所',
            imgUrl: require('../../../../assets/map/emergency_rescue/i2.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i2_on.png'),
            check: false
          },
          {
            id: '7a38cf58e55995c0a5ce2c8e1f5bcc79',
            code: '2',
            label: '排水井',
            imgUrl: require('../../../../assets/map/emergency_rescue/i3.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i3_on.png'),
            check: false
          },
          {
            id: 'a0fd60946978e28dac5b8a2965e00a2b',
            code: '3',
            label: '封闭卡口',
            imgUrl: require('../../../../assets/map/emergency_rescue/i4.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i4_on.png'),
            check: false
          }
        ],
        '1': [
          {
            id: '1768cf2b0fb0844dedbb6db1dca3cc79',
            code: '4',
            label: '消防控制室',
            imgUrl: require('../../../../assets/map/emergency_rescue/i5.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i5_on.png'),
            check: false
          },
          {
            id: '18849e29cce63a9408117ca26186203b',
            code: '5',
            label: '消防泵房',
            imgUrl: require('../../../../assets/map/emergency_rescue/i6.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i6_on.png'),
            check: false
          },
          {
            id: 'da52ba25c3f15ad932b18fbd4d028062',
            code: '6',
            label: '消防水源',
            imgUrl: require('../../../../assets/map/emergency_rescue/i7.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i7_on.png'),
            check: false
          },
          {
            id: 'e241e3ef479ac7fb217c7b496816dc7e',
            code: '7',
            label: '消防点位',
            imgUrl: require('../../../../assets/map/emergency_rescue/i8.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i8_on.png'),
            check: false
          }
        ],
        '2': [
          {
            id: '93f7e01c8e4d906053916d314e1d3a2a',
            code: '8',
            label: '人员定位',
            imgUrl: require('../../../../assets/map/emergency_rescue/i9.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i9_on.png'),
            check: false
          },
          {
            id: '30fcda69c3eae93adbab78dea360b6b0',
            code: '9',
            label: '人员轨迹',
            imgUrl: require('../../../../assets/map/emergency_rescue/i10.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i10_on.png'),
            check: false
          }
        ],
        '3': [
          {
            id: '6ac1fc24fde38671ee70d7aebeed5276',
            code: '10',
            label: '摄像头',
            imgUrl: require('../../../../assets/map/emergency_rescue/i11.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i11_on.png'),
            check: false
          }
        ],
        '4': [
          {
            id: '3f858ab418dbf791353ba6ff87c59e85',
            code: '12',
            label: '气象站',
            imgUrl: require('../../../../assets/map/emergency_rescue/i12.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i12_on.png'),
            check: false
          },
          {
            id: '997392774d64efd8507c7c518c23fc44',
            code: '11',
            label: '风速站',
            imgUrl: require('../../../../assets/map/emergency_rescue/i13.png'),
            check_img: require('../../../../assets/map/emergency_rescue/i13_on.png'),
            check: false
          }
        ]
      },
      // 当前点击后选择的二级坐标点位分类集合
      currSubControlPoint: [],
      subControlPointIndex: 0,
      webSocket: null,
      heartbeat: null,
      REPORT_ID: null,
      FIRERESERVEPLAN_ID: null,
      CODE: null,
      CORPIFNO_ID: JSON.parse(sessionStorage.getItem('user')).CORPIFNO_ID,
      firstPoint: {
        x: null,
        y: null
      },
      mapLevel: 20,
      goBackFlag: true
    }
  },
  mounted() {
    /** 调用地图初始化方法 */
    this.firstInitPoint()
    /** 调用初始化点位绘制方法 */
    /** 初始化选中首个二级坐标点位分类 */
    this.currSubControlPoint = this.subControlPoint['0']
  },
  created() {
    this.REPORT_ID = this.$route.query.REPORT_ID
    this.FIRERESERVEPLAN_ID = this.$route.query.FIRERESERVEPLAN_ID
    this.initInfo()
    this.initWebsocket()
    this.initPoint({ code: 0, REPORT_ID: this.REPORT_ID, range: this.range })
  },
  beforeDestroy() {
    if (this.webSocket) {
      this.webSocket.close()
    }
    if (this.heartbeat) {
      clearInterval(this.heartbeat)
    }
  },
  methods: {
    /** 地图初始化 */
    mapInit(e) {
      this.firstPoint.x = e.x
      this.firstPoint.y = e.y
      mapInstance = new window.BMapGL.Map('map') // 创建地图实例
      mapInstance.centerAndZoom(new window.BMapGL.Point(e.y, e.x), this.mapLevel) // 创建点坐标
      mapInstance.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放能力
      var point = new window.BMapGL.Point(this.firstPoint.y, this.firstPoint.x) // 设置中心点坐标（例如北京天安门）
      mapInstance.centerAndZoom(point, this.mapLevel) // 设置中心点和缩放级别
      mapInstance.enableScrollWheelZoom(true)
      var circle = new window.BMapGL.Circle(point, this.range, {
        strokeColor: 'blue',
        strokeWeight: 2,
        strokeOpacity: 0.5,
        fillColor: 'blue',
        fillOpacity: 0.2
      })
      mapInstance.addOverlay(circle)
    },
    setActive(item, index) {
      // 设置被选中项的索引
      this.activeIndex = index
      this.range = item
      mapInstance.clearOverlays()
      var point = new window.BMapGL.Point(this.firstPoint.y, this.firstPoint.x) // 设置中心点坐标（例如北京天安门）
      mapInstance.centerAndZoom(point, this.mapLevel) // 设置中心点和缩放级别
      mapInstance.enableScrollWheelZoom(true)
      var circle = new window.BMapGL.Circle(point, item, { // 2000米半径
        strokeColor: 'blue',
        strokeWeight: 2,
        strokeOpacity: 0.5,
        fillColor: 'blue',
        fillOpacity: 0.2
      })
      mapInstance.addOverlay(circle)
      this.initPoint({ code: this.CODE, reportId: this.REPORT_ID, range: this.range })
    },
    /** 扎点方法 */
    addPoint(anchor) {
      if (!anchor.icon) throw new Error('请传入图标')
      if (!anchor.y) throw new Error('请传入经度')
      if (!anchor.x) throw new Error('请传入纬度')
      const imageSize = new window.BMapGL.Size(23, 30)
      const icon = new window.BMapGL.Icon(config.fileUrl + anchor.icon, imageSize, { imageSize })
      const point = new window.BMapGL.Point(anchor.y, anchor.x)
      const marker = new window.BMapGL.Marker(point, { icon }) // 创建标注
      marker.addEventListener('click', async() => {
        this.infoDialog.visible = true
        this.infoDialog.info = anchor
        this.infoDialog.title = anchor.typeName
      })
      mapInstance.addOverlay(marker) // 将标注添加到地图中
    },
    /** 给地图扎点标记事件事故 */
    addPointCallback(anchor) {
      if (!anchor.icon) throw new Error('请传入图标')
      if (!anchor.y) throw new Error('请传入经度')
      if (!anchor.x) throw new Error('请传入纬度')
      const imageSize = new window.BMapGL.Size(33, 40)
      const icon = new window.BMapGL.Icon(config.fileUrl + anchor.icon, imageSize, { imageSize }) // 创建 icon 图标
      var point = new window.BMapGL.Point(anchor.y, anchor.x)
      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
        }
      })
      this.currSubControlPoint = this.subControlPoint[index]
    },
    // 二级坐标点位点击事件
    subToggleCheck(sos, ind) {
      mapInstance.clearOverlays()
      var point = new window.BMapGL.Point(this.firstPoint.y, this.firstPoint.x) // 设置中心点坐标（例如北京天安门）
      mapInstance.centerAndZoom(point, 10) // 设置中心点和缩放级别
      mapInstance.enableScrollWheelZoom(true)
      var circle = new window.BMapGL.Circle(point, this.range, { // 2000米半径
        strokeColor: 'blue',
        strokeWeight: 2,
        strokeOpacity: 0.5,
        fillColor: 'blue',
        fillOpacity: 0.2
      })
      mapInstance.addOverlay(circle)
      this.initPoint(sos)
      this.currSubControlPoint.forEach((item, idx) => {
        if (idx === ind) {
          item.check = true
        } else {
          item.check = false
        }
      })
    },
    // 接收子组件传递出来的指令发送的事件
    handlerOrderMessage() {
      this.infoDialog.visible = true
      this.infoDialog.info = { type: 'sendMessage', FIRERESERVEPLAN_ID: this.FIRERESERVEPLAN_ID, REPORT_ID: this.REPORT_ID }
      this.infoDialog.title = '指令信息'
    },
    initInfo() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      requestFN(
        '/bi/emergency/getYjBiInformation',
        {
          FIRERESERVEPLAN_ID: this.FIRERESERVEPLAN_ID,
          REPORT_ID: this.REPORT_ID
        }
      ).then((data) => {
        if (data.result === 'success') {
          // 值班列表
          this.info.dutyInfoData = data.dutyList
          // 预案信息
          this.info.reservePlan = data.planInfo
          this.info.addressBook = data.addressBookList
          this.chatData = data.instructList
        }
        loading.close()
      }).catch((e) => {
        console.log(e)
        loading.close()
      })
    },
    goInfo(e) {
      if (e === '值班信息') {
        this.goBackFlag = false
        this.$router.push('/emergen_cyrescue/duty_management/shift_registration')
      }
      if (e === '预案信息') {
        if (this.FIRERESERVEPLAN_ID) {
          this.goBackFlag = false
          this.$router.push('/plan/company_plan?FIRERESERVEPLAN_ID=' + this.FIRERESERVEPLAN_ID)
        } else {
          this.$message.error('救援没启动预案')
        }
      }
      if (e === '通讯录') {
        this.goBackFlag = false
        this.$router.push('/emergencyuser/communication')
      }
    },
    initWebsocket() {
      const wsUrl = config.YjSysUrl + '/yjMessage/' + this.REPORT_ID
      this.webSocket = new WebSocket(encodeURI(wsUrl))
      this.webSocket.onopen = () => {
        console.info('指挥调度的webSocket链接成功')
        this.webSocket.send('链接成功')
      }
      this.webSocket.onerror = () => {
        console.log('指挥调度的webSocket链接失败')
        this.$router.back()
      }
      this.webSocket.onclose = () => {
        console.log('指挥调度的webSocket链接关闭')
        if (this.goBackFlag) {
          this.$router.push('/emergen_cyrescue/incident_management')
        } else {
          this.goBackFlag = true
        }
      }
      var _this = this
      this.webSocket.onmessage = function(message) {
        _this.initInfo()
      }
      // 新建心跳，持续监听链接是否存活
      this.heartbeat = setInterval(() => {
        try {
          if (this.webSocket) {
            this.webSocket.send('企业端' + this.REPORT_ID)
          }
        } catch (e) {
          console.log('链接已断开')
        }
      }, 3000)
    },
    initPoint(row) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.CODE = row.code
      requestFN(
        '/bi/emergency/getPoint',
        {
          code: row.code,
          reportId: this.REPORT_ID,
          range: this.range
        }
      ).then((data) => {
        if (data.result === 'success') {
          for (let i = 0; i < data.list.length; i++) {
            this.addPoint(data.list[i])
          }
        }
        loading.close()
      }).catch((e) => {
        console.log(e)
        loading.close()
      })
    },
    firstInitPoint() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      requestFN(
        '/bi/emergency/firstPoint', { code: 0, reportId: this.REPORT_ID, range: this.range }
      ).then((data) => {
        if (data.result === 'success') {
          this.mapInit(data.firstPoint)
        }
        loading.close()
      }).catch((e) => {
        console.log(e)
        loading.close()
      })
    },
    endRescue() {
      requestFN('/bi/emergency/endRescue', { ID: this.REPORT_ID })
        .then((data) => {
          this.$message({
            message: '确认已收到指令',
            type: 'success'
          })
          this.$router.push('/emergen_cyrescue/incident_management')
        }).catch((error) => {
          console.log(error)
        })
    }
  }
}
</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: #00133b;
        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>