dvcp_v2_webapp/packages/bigscreen/dv/AppSpecialPeopleDV.vue

<template>
  <section class="AppSpecialPeopleDV">
    <div class="map">
      <!-- <div id="map" ref="rootmap" @click="hidePopup"/> -->
      <ai-map v-bind="mapOptions" :map.sync="map" :lib.sync="mapLib" @click.native.stop="hidePopup"/>
    </div>
    <div class="AppSpecialPeopleDV-mask"></div>
    <div class="summary" v-if="errorList.length">
      <div class="summary-top">
        <div class="title">
          <img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/title-bg.png" alt="">
          <h3>人员信息</h3>
        </div>
        <div class="item" v-for="(item, index) in errorList" :key="index">
          <img :src="'https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/warning-status'+item.item+'.png'" alt="">
          <div class="item-right">
            <div class="item-title">
              <span
                  class="item-user">{{ item.name }}-<span>{{
                  dict.getLabel("warningTypeText", item.item)
                }}</span>{{ item.itemValue }}</span>
              <span class="item-time">{{ item.createTime }}</span>
            </div>
            <p>{{ item.gpsDesc }}</p>
          </div>
        </div>
      </div>
      <div class="summary-bottom">
        <div class="title">
          <img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/title-bg.png" alt="">
          <h3>特殊人群</h3>
        </div>
        <div class="item" v-for="(item, index) in specialList" :key="index">
          <div class="item-title">
            <span class="item-text">{{ item.title }}</span>
            <span class="item-num">{{ item.num }}</span>
          </div>
          <div class="item-bg">
            <div class="item-active" :style="'width:' +item.percentage+'%'"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="user-info" v-if="showUserInfo">
      <div class="content">
        <div class="title">
          <img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/title-bg.png" alt="">
          <h3>人员信息</h3>
        </div>
        <div class="user-bg">{{ formatName(checkUserInfo.name) }}</div>
        <div class="user-name">{{ checkUserInfo.name }}</div>
        <p class="text">{{ checkUserInfo.gpsDesc }}</p>
        <p class="text">最后更新时间：{{ checkUserInfo.lastUpdateTime }}</p>
        <p class="text mar-b20">
          <span class="green-text">
            <img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/sb-icon.png"
                 alt=""><span>{{ checkUserInfo.onlineStatus == 1 ? '设备在线' : '设备离线' }}</span>
          </span>
          <span class="white-text">
            <img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/dl-icon.png"
                 alt="">剩余{{ checkUserInfo.electricQuantity }}%
          </span>
        </p>
        <div class="pad-20">
          <div class="tab">
            <div class="item">
              <div class="flex">
                <div class="item-left">
                  <div class="img-bg">
                    <img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/tw-icon.png" alt="">
                  </div>
                  体温
                </div>
                <div class="item-right" :style="checkHealthyInfo.abnormalStatustw == 1 ? 'color:#FF483C;' : ''">
                  {{ checkHealthyInfo.tw }}
                </div>
              </div>
            </div>
            <div class="item">
              <div class="flex">
                <div class="item-left">
                  <div class="img-bg">
                    <img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/xl-icon.png" alt="">
                  </div>
                  心率
                </div>
                <div class="item-right" :style="checkHealthyInfo.abnormalStatusxl == 1 ? 'color:#FF483C;' : ''">
                  {{ checkHealthyInfo.xl }}
                </div>
              </div>
            </div>
            <div class="item">
              <div class="flex">
                <div class="item-left">
                  <div class="img-bg">
                    <img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/xy-icon.png" alt="">
                  </div>
                  血压
                </div>
                <div class="item-right" :style="checkHealthyInfo.abnormalStatusxy == 1 ? 'color:#FF483C;' : ''">
                  {{ checkHealthyInfo.xy }}
                </div>
              </div>
            </div>
            <div class="item">
              <div class="flex">
                <div class="item-left">
                  <div class="img-bg">
                    <img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/xyang-icon.png" alt="">
                  </div>
                  血氧
                </div>
                <div class="item-right" :style="checkHealthyInfo.abnormalStatusxyang == 1 ? 'color:#FF483C;' : ''">
                  {{ checkHealthyInfo.xyang }}
                </div>
              </div>
            </div>
          </div>
          <div class="mini-title">
            <img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/title-bg2.png" alt="">
            <span class="btn" :class="'status'+checkUserInfo.abnormalStatus"
                  v-if="checkUserInfo.onlineStatus == 1">{{
                dict.getLabel("intelligentGuardianshipAbnormalStatus", checkUserInfo.abnormalStatus)
              }}</span>
            <span class="btn status3" v-else>离线</span>
          </div>
          <div class="p-item">
            <span class="label">姓名</span>
            <span class="value">{{ checkUserInfo.name }}</span>
          </div>
          <div class="p-item">
            <span class="label">性别</span>
            <span class="value">{{ dict.getLabel("sex", checkUserInfo.sex) }}</span>
          </div>
          <div class="p-item">
            <span class="label">年龄</span>
            <span class="value">{{ idCard(checkUserInfo.idNumber) }}</span>
          </div>
          <div class="p-item">
            <span class="label">所属地区</span>
            <span class="value">{{ checkUserInfo.areaName }}</span>
          </div>
          <div class="p-item">
            <span class="label">联系电话</span>
            <span class="value">{{ checkUserInfo.phone }}</span>
          </div>
          <div class="mini-title">
            <img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/jhr-title.png" alt="">
          </div>
          <div class="p-item" v-for="(item, index) in checkUserInfo.guardians" :key="index" v-if="index < 2">
            <span class="label">{{ item.guardianName }}</span>
            <span class="value">{{ item.guardianPhone }}</span>
          </div>
        </div>
      </div>
      <!--      <div class="btn">-->
      <!--        <span class="status0">正常</span>-->
      <!--        <span class="status3">离线</span>-->
      <!--        <span class="status1">异常</span>-->
      <!--        <span class="status2">求助</span>-->
      <!--      </div>-->
    </div>
    <div class="number-content">
      <div class="item">
        <p class="item-title">设备在线</p>
        <div class="num-bg">
          <span class="num">{{ totalInfo.onlineCount }}</span>
        </div>
      </div>
      <div class="item">
        <p class="item-title">监护人数</p>
        <div class="num-bg">
          <span class="num">{{ totalInfo.guardianshipCount }}</span>
        </div>
      </div>
      <div class="item">
        <p class="item-title">异常人数</p>
        <div class="num-bg">
          <span class="num">{{ totalInfo.abnormalCount }}</span>
        </div>
      </div>
      <div class="item">
        <p class="item-title">SOS求助</p>
        <div class="num-bg">
          <span class="num">{{ totalInfo.sosCount }}</span>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "AppSpecialPeopleDV",
  label: "双珠路大屏-特殊人群",
  provide() {
    return {
      root: this
    }
  },
  props: {
    instance: Function,
    dict: Object
  },
  data() {
    return {
      isFormDv: true,
      isShowModel: false,
      mapLib: null,
      map: null,
      checkUserInfo: {},
      checkHealthyInfo: {},
      showUserInfo: false,
      errorList: [],
      specialList: [
        {
          title: '精神病患者',
          num: 87,
          percentage: 20
        },
        {
          title: '重点服务人员',
          num: 324,
          percentage: 40
        },
        {
          title: '吸毒人员',
          num: 95,
          percentage: 30
        },
        {
          title: '留守儿童',
          num: 182,
          percentage: 35
        },
        {
          title: '上访重点户',
          num: 190,
          percentage: 37
        },
        {
          title: '空巢老人',
          num: 167,
          percentage: 36
        },
        {
          title: '特困人员',
          num: 149,
          percentage: 30
        }
      ],

      community: '',
      isShowLayer: false,
      isShowSearch: false,
      isShowArea: false,
      styleFunction: null,
      areaData: {},
      isImageMap: false,
      isShowInfo: false,
      areaId: '',
      areaName: '',
      list: [],
      areaList: [],
      info: {},
      resident: null,
      satellite: null,
      zoom: 17,
      chooseBuildId: '',
      buildList: [],
      searchList: [],
      house: null,
      pitch: 0,
      center: [],
      totalInfo: {},
      statisticsInfo: {},


    }
  },
  computed: {
    ...mapState(['user']),

    mapOptions() {
      return {
        areaId: this.user.info.areaId,
        mapStyle: "amap://styles/e51987628aee5206d4c9ca8c6e98b4f7",
        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MouseTool', 'AMap.MarkerClusterer', 'AMap.DistrictSearch'],
        ops: {
          pitch: this.pitch,
          buildingAnimation: true,
          zoom: this.zoom
        }
      }
    }
  },
  mounted() {
    this.getTotalInfo()
    this.dict.load('intelligentGuardianshipAbnormalStatus', 'sex', 'warningTypeText')

    this.areaId = this.user.info.areaId
    this.areaName = this.user.info.areaName
    this.getCorpLocation()
  },
  methods: {
    getCorpLocation() {
      this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
        if (res?.data) {
          this.initMap(res.data);
        }
      })
    },

    getTotalInfo() {
      this.instance.post("/app/appintelligentguardianshipalarm/list?size=4").then(res => {
        if (res?.data.records) {
          res.data.records.map((item) => {
            item.createTime = item.createTime.substring(5, 16)
          })
          this.errorList = res.data.records
        }
      })

      this.instance.post("/app/appintelligentguardianshipdevice/statistics").then(res => {
        if (res?.data) {
          this.totalInfo = res.data
        }
      })
    },

    changeZoom(isAdd) {
      const zoom = isAdd ? this.map.getZoom() + 1 : this.map.getZoom() - 1
      this.map.setZoom(zoom, false, 600)
    },

    getUserInfo(id) {
      this.instance.post(`/app/appintelligentguardianshipdevice/queryDetailById`, null, {
        params: {
          id: id,
        }
      }).then(res => {
        if (res.code === 0) {
          this.checkUserInfo = res.data
        }
      })
      this.instance.post(`/app/appintelligentguardianshipdevice/queryMonitorList?type=1`, null, {
        params: {
          deviceId: id,
        }
      }).then(res => {
        if (res.code === 0) {
          res.data.records.map((item) => {
            if (item.item == 0) {
              this.checkHealthyInfo.tw = item.itemValue
              this.checkHealthyInfo.abnormalStatustw = item.abnormalStatus
            }
            if (item.item == 1) {
              this.checkHealthyInfo.xl = item.itemValue
              this.checkHealthyInfo.abnormalStatusxl = item.abnormalStatus
            }
            if (item.item == 2) {
              this.checkHealthyInfo.xy = item.itemValue
              this.checkHealthyInfo.abnormalStatusxy = item.abnormalStatus
            }
            if (item.item == 3) {
              this.checkHealthyInfo.xyang = item.itemValue
              this.checkHealthyInfo.abnormalStatusxyang = item.abnormalStatus
            }
          })
          this.showUserInfo = true
        }
      })
    },

    toCenter() {
      this.map.setZoomAndCenter(this.zoom, this.center, false, 600)
    },

    renderClusterMarker(context) {
      let el = `<div class="polymeric">
        <div class="polymeric-container">
          <p>${context.count}</p>
        </div>
      </div>`

      let offset = new this.mapLib.Pixel(-9, -9)
      context.marker.setContent(el)
      context.marker.setOffset(offset)
      context.marker.lnglat = context.clusterData[0].lnglat

      context.marker.on('click', e => {
        this.map.setZoomAndCenter(this.map.getZoom() < 22 ? this.map.getZoom() + 3 : this.map.getZoom(), e.target.lnglat, false, 400)
      })
    },

    renderMarker(context) {
      const buildId = context.data[0].id
      var el = ''
      if (context.data[0].onlineStatus == 1) { //在线
        el = `<div class="mark online-status${context.data[0].abnormalStatus}" id="buildId-${buildId}">${this.formatName(context.data[0].name)}</div>`
      } else {  //离线
        el = `<div class="mark online-status3" id="buildId-${buildId}">${this.formatName(context.data[0].name)}</div>`
      }

      context.marker.setContent(el);
      context.marker.setAnchor("center")
      context.marker.id = `${buildId}`
      context.marker.lnglat = context.data[0].lnglat

      context.marker.on('click', e => {
        this.chooseBuildId = e.target.id
        this.getUserInfo(e.target.id)
        context.marker.setContent(el);
        // document.querySelectorAll('.mark').forEach(el => {
        //   el.style['background-color'] = 'rgba(0, 39, 100, 0.5)'
        // })
        // document.querySelector(`#buildId-${e.target.id}`).style['background-color'] = '#2266FF'
        // this.map.setZoomAndCenter(this.map.getZoom() < 22 ? this.map.getZoom() + 2 + 0.00001 : this.map.getZoom(), e.target.lnglat, false, 300)
      })
    },

    addMakert(points) {
      new this.mapLib.MarkerClusterer(this.map, points, {
        gridSize: 60,
        maxZoom: 15,
        clusterByZoomChange: false,
        renderClusterMarker: this.renderClusterMarker,
        renderMarker: this.renderMarker
      })
    },

    getUserList() {
      this.instance.post('/app/appintelligentguardianshipdevice/list', null, {
        params: {
          current: 1,
          size: 1000000
        }
      }).then(res => {
        if (res.code === 0) {
          this.buildList = res.data.records
          const points = res.data.records.map(item => {
            return {
              lnglat: [item.lng, item.lat],
              id: item.id,
              areaName: item.areaName,
              name: item.name,
              abnormalStatus: item.abnormalStatus,
              onlineStatus: item.onlineStatus
            }
          })

          this.addMakert(points)

          if (points.length) {
            this.getUserInfo(points[0].id)
          }
        }
      })
    },

    hidePopup() {
      this.showUserInfo = false
    },

    switchLayer(flag) {
      if (flag) {
        this.map.addLayer(this.satellite)
      } else {
        this.map.removeLayer(this.satellite)
      }

      this.isImageMap = flag
    },

    initMap() {
      if (this.map && this.mapLib) {
        this.mapLib.plugin([
          'AMap.ControlBar'
        ], () => {
          // this.map.addControl(new this.mapLib.ControlBar({
          //   position: {
          //     right: '20px',
          //     bottom: '20px'
          //   },
          //   showControlButton: false
          // }))
        })
        this.getUserList()
      }
    },
    formatName(str) {
      if (!str) return ''

      return str.substr(str.length - 2)
    },
    idCard(UUserCard) {
      //获取年龄
      var myDate = new Date();
      var month = myDate.getMonth() + 1;
      var day = myDate.getDate();
      var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
      if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {
        age++;
      }
      return age
    }
  }
}
</script>

<style lang="scss" scoped>
.AppSpecialPeopleDV {
  position: relative;
  height: 100%;

  .AppSpecialPeopleDV-mask {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 100%);
  }

  .summary {
    display: flex;
    position: absolute;
    justify-content: space-between;
    flex-direction: column;
    left: 40px;
    top: 0;
    z-index: 1;
    height: 100%;
    padding: 40px 0;
    width: 440px;

    .summary-top {
      width: 100%;
      height: 392px;
      background: rgba(7, 11, 35, 0.5);
      border: 1px solid #14345F;
      margin-bottom: 20px;
      // overflow-y: scroll;
      .item {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        margin-bottom: 20px;

        img {
          width: 60px;
          height: 60px;
        }

        .item-right {
          width: 328px;

          .item-title {
            display: flex;
            justify-content: space-between;
            margin: 4px 0 2px 0;

            .item-user {
              height: 24px;
              font-size: 18px;;
              font-weight: bold;
              color: #FFFFFF;
              line-height: 24px;
            }

            .item-time {
              height: 19px;
              font-size: 14px;
              color: #82C5FF;
              line-height: 19px;
            }

            .color-FF483C {
              color: #FF483C;
            }
          }

          p {
            width: 100%;
            height: 19px;
            font-size: 14px;
            color: #82C5FF;
            line-height: 19px;
            word-break: break-all;
          }
        }
      }
    }

    .summary-bottom {
      width: 100%;
      height: calc(100% - 412px);
      background: rgba(7, 11, 35, 0.5);
      border: 1px solid #14345F;
      // overflow-y: scroll;
      .item {
        margin-bottom: 12px;
        padding: 0 10px;

        .item-title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 6px;

          .item-text {
            height: 20px;
            font-size: 15px;
            font-family: MicrosoftYaHeiSemibold;
            color: #82C5FF;
            line-height: 20px;
          }

          .item-num {
            height: 20px;
            font-size: 20px;
            font-family: D-DIN-Bold, D-DIN;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 22px;
          }
        }

        .item-bg {
          width: 100%;
          height: 8px;
          background-color: #343D59;
          position: relative;

          .item-active {
            position: absolute;
            height: 8px;
            background: linear-gradient(270deg, #0BBCFF 0%, #1E5DFF 100%);
          }
        }
      }
    }
  }

  .title {
    position: relative;
    margin-bottom: 10px;

    img {
      width: 178px;
      height: 62px;
    }

    h3 {
      height: 48px;
      line-height: 48px;
      padding-left: 30px;
      font-size: 20px;
      color: #fff;;
      font-weight: bold;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .user-info {
    display: flex;
    position: absolute;
    justify-content: space-between;
    flex-direction: column;
    right: 40px;
    top: 0;
    z-index: 1;
    height: 100%;
    padding: 40px 0;
    width: 400px;

    .content {
      width: 400px;
      height: 800px;
      margin-bottom: 30px;
      background: rgba(7, 11, 35, 0.5);
      border: 1px solid #14345F;

      .user-bg {
        margin: 20px 0 10px 174px;
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background: rgba(18, 89, 155, 0.5);
        box-shadow: 0 0 12px 8px #2042FF;
        border: 1px solid #559DFF;
        font-size: 16px;
        font-family: MicrosoftYaHeiSemibold;
        color: #FFFFFF;
        border-radius: 50%;
      }

      .user-name {
        width: 100%;
        text-align: center;
        height: 21px;
        font-size: 16px;;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 21px;
        margin-bottom: 10px;
      }

      .text {
        font-size: 13px;

        color: #82C5FF;
        line-height: 17px;
        margin-bottom: 10px;
        text-align: center;

        span {
          font-size: 12px;

          img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
            vertical-align: middle;
          }
        }

        .green-text {
          color: #74FF66;
          margin-right: 20px;
        }

        .white-text {
          color: #fff;
        }
      }

      .mar-b20 {
        margin-bottom: 20px;
      }

      .pad-20 {
        padding: 0 20px;

        .tab {
          margin-bottom: 6px;
          overflow: hidden;

          .item {
            width: 174px;
            height: 50px;
            background: linear-gradient(270deg, rgba(119, 169, 255, 0.1) 0%, rgba(66, 112, 255, 0.25) 100%);
            border-radius: 4px;
            padding: 14px 10px 0;
            box-sizing: border-box;
            float: left;
            margin-bottom: 10px;

            .flex {
              display: flex;
              justify-content: space-between;
            }

            .item-left {
              height: 22px;
              font-size: 14px;

              color: #82C5FF;
              line-height: 22px;

              .img-bg {
                display: inline-block;
                width: 24px;
                height: 24px;
                border-radius: 50%;
                background: rgba(27, 124, 214, 0.2);
                box-shadow: 0 0 8px 2px #2081FF;
                margin-right: 8px;
                vertical-align: middle;

                img {
                  width: 16px;
                  height: 16px;
                  margin: 4px 0 0 4px;
                }
              }
            }

            .item-right {
              height: 22px;
              font-size: 16px;
              font-family: Arial-BoldMT, Arial;
              font-weight: normal;
              color: #FFFFFF;
              line-height: 22px;
            }
          }

          .item:nth-of-type(2n-1) {
            margin-right: 10px;
          }
        }

        .mini-title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 18px;

          img {
            width: 169px;
            height: 30px;
            margin-left: -6px;
          }

          .btn {
            display: inline-block;
            width: 52px;
            height: 24px;
            line-height: 24px;
            border-radius: 12px;
            font-size: 14px;
            text-align: center;
            margin-left: 20px;
          }
        }

        .p-item {
          width: 100%;
          display: flex;
          justify-content: space-between;
          line-height: 22px;
          padding: 9px 12px;
          box-sizing: border-box;
          font-size: 14px;

          .label {
            color: #82C5FF;
          }

          .value {
            color: #fff;
          }
        }

        .p-item:nth-of-type(2n-1) {
          background: linear-gradient(270deg, rgba(119, 169, 255, 0.1) 0%, rgba(66, 112, 255, 0.25) 100%);
        }
      }
    }

    .btn {
      text-align: right;

      span {
        display: inline-block;
        width: 52px;
        height: 24px;
        line-height: 24px;
        border-radius: 12px;
        font-size: 14px;

        text-align: center;
        margin-left: 20px;
      }
    }

    .status0 {
      border: 1px solid #74FF66;
      color: #74FF66;
    }

    .status3 {
      border: 1px solid #FFCF54;
      color: #FFCF54;
    }

    .status1 {
      border: 1px solid #FF483C;
      color: #FF483C;
    }

    .status2 {
      border: 1px solid #FF6DF1;
      color: #FF6DF1;
    }
  }

  .number-content {
    position: absolute;
    width: 100%;
    left: 50%;
    margin-left: -404px;
    top: 10px;
    z-index: 1;

    .item {
      display: inline-block;
      width: 172px;
      height: 160px;
      margin-right: 40px;
      text-align: center;

      .item-title {
        font-size: 24px;
        font-weight: bold;
        line-height: 32px;
        background-image: -webkit-linear-gradient(bottom, #35BEFF, #EBF9FF, #FFFFFF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-top: 30px;
      }

      .num-bg {
        width: 160px;
        height: 160px;
        margin-left: 16px;
        background-image: url(https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/number-bg.png);
        background-size: 100% 100%;
        position: relative;
        margin-top: -76px;

        .num {
          position: absolute;
          left: 0;
          bottom: 30px;
          width: 100%;
          text-align: center;
          height: 50px;
          font-size: 40px;
          font-family: D-DIN-Bold, D-DIN;
          font-weight: bold;
          line-height: 54px;
          background-image: -webkit-linear-gradient(bottom, #35BEFF, #EBF9FF, #FFFFFF);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }

    .item:nth-last-of-type(1) {
      margin-right: 0;
    }
  }


  :deep( .ai-list__content--right-wrapper ){
    height: 100%;
    margin: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }


  .map {
    :deep( .amap-logo), :deep( .amap-copyright ){
      display: none !important;
    }

    :deep( .amap-icon ){
      width: 40px !important;
      height: 40px !important;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .map-menu {
    position: absolute;
    bottom: 52px;
    left: 30px;
    z-index: 11;

    .map-layers__wrapper {
      display: none;
      position: absolute;
      bottom: 28px;
      left: 0;
      padding-bottom: 4px;
    }

    .map-layers {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 180px;
      height: 66px;
      margin-bottom: 4px;
      padding: 5px;
      background: #FFFFFF;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
      border-radius: 2px;

      .map-layers__item {
        position: relative;
        width: 80px;
        height: 56px;
        margin-right: 10px;
        cursor: pointer;
        user-select: none;
        border: 1px solid transparent;

        &.map-layers__item-active {
          border: 1px solid #366FFF;
        }

        .map-layers__item--tag {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 32px;
          height: 18px;
          line-height: 18px;
          text-align: center;
          color: #fff;
          font-size: 12px;
          border: 1px solid transparent;
          background: transparent;

          &.map-layers__item--tag-active {
            background: #366FFF;
          }
        }

        img {
          width: 100%;
          height: 100%;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .map-menu__item {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      margin-bottom: 10px;
      background: #FFFFFF;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      cursor: pointer;
      user-select: none;

      &:hover {
        .map-layers__wrapper {
          display: block;
        }
      }

      &:last-child {
        margin-bottom: 0;
      }

      i {
        font-size: 16px;
        color: #89b;
      }
    }
  }


  .map {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    :deep( .ol-zoom ){
      display: none !important;
      top: inherit !important;
      bottom: 0.5em !important;
    }

    div {
      box-sizing: border-box;
    }

    #map {
      width: 100%;
      height: 100%;
    }
  }

  :deep( .polymeric ){
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;

    &.polymeric-active {
      .polymeric-container {
        background: #F46159;
      }

      &::after {
        background-color: #F46159;
      }
    }

    &::after {
      position: absolute;
      z-index: -1;
      width: 62px;
      height: 62px;
      border-radius: 50%;
      -webkit-animation: warn 1s ease-out 0s infinite;
      animation: warn 1s ease-out 0s infinite;
      background: rgba(54, 165, 255, 1);
      transform: translate(-50%, -50%);
      content: " ";
    }

    .polymeric-container {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: rgba(54, 165, 255, 1);

      p {
        text-align: center;
        width: 58px;
        color: #fff;
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      p:first-child {
        font-size: 14px;
      }

      h2 {
        color: #fff;
        font-weight: normal;
        font-size: 12px;
      }
    }
  }

  :deep( .mark ){
    width: 56px;
    height: 56px;
    text-align: center;
    line-height: 56px;
    border-radius: 50%;
    font-size: 16px;
    font-family: MicrosoftYaHeiSemibold;
    color: #fff;
  }

  :deep( .online-status0 ){
    background: rgba(8, 73, 35, 0.8);
    box-shadow: 0 4px 4px 0 #000000, 0 0 8px 4px #15BE55;
    border: 1px solid #22FF81;
  }

  :deep( .online-status1 ){
    background: rgba(79, 14, 7, 0.8);
    box-shadow: 0 4px 4px 0 #000000, 0 0 8px 4px #C60E0E;
    border: 1px solid #FF6969;
  }

  :deep( .online-status2 ){
    background: rgba(96, 8, 102, 0.8);
    box-shadow: 0 4px 4px 0 #000000, 0 0 8px 4px #C312CA;
    border: 1px solid #FF69DD;
  }

  :deep( .online-status3 ){
    background: rgba(108, 94, 14, 0.8);
    box-shadow: 0 4px 4px 0 #000000, 0 0 8px 4px #D1A818;
    border: 1px solid #FFDF54;
  }

  @-webkit-keyframes warn {
    0% {
      transform: scale(.5);
      opacity: 1
    }

    30% {
      opacity: .5
    }

    to {
      transform: scale(1.7);
      opacity: 0
    }
  }

  @keyframes warn {
    0% {
      transform: scale(.5);
      opacity: 1
    }

    30% {
      opacity: .5
    }

    to {
      transform: scale(1.7);
      opacity: 0
    }
  }

}
</style>