iot-front-ui/src/components/security/alarm/securityAlarmMap.vue

<template>
  <div class="securityAlarmMap">
    <Card title="地图模式">
      <div class="securityAlarmMap-query">
        <span>楼层：</span>
        <a-select v-model="floor" style="width: 150px">
          <a-select-option value="1">1F</a-select-option>
          <!--<a-select-option value="2">B2</a-select-option>-->
          <!--<a-select-option value="3">B3</a-select-option>-->
        </a-select>

        <div style="display: inline-block;float: right">
          <span class="anticon" style="vertical-align: bottom"><IconCamera :color="'#1890ff'" ></IconCamera></span>
          <span style="display: inline-block;margin-right: 12px">在线</span>
          <span class="anticon" style="vertical-align: bottom"><IconCamera :color="'#a2a4a2'" ></IconCamera></span>
          <span style="display: inline-block;margin-right: 12px">离线</span>
          <span class="anticon" style="vertical-align: bottom"><IconCamera :color="'#ff4d4f'" ></IconCamera></span>
          <span style="display: inline-block;margin-right: 12px">告警</span>
        </div>
      </div>

      <div class="securityAlarmMap-alert" v-if="alarmNum>0">
        <a-alert type="warning" show-icon>
          <template #message>
            有<span style="color: red;font-weight: bold;display: inline-block;padding: 0 3px">{{ alarmNum }}</span>条告警事件待处理
          </template>
        </a-alert>
      </div>

      <div class="securityAlarmMap-info">
        <span class="securityAlarmMap-info-item">
          当前在线摄像头：
          <span class="securityAlarmMap-info-item-num" style="color: #2f8cc8">{{ deviceNum.online }}</span>
          台
        </span>
        <span class="securityAlarmMap-info-item">
          当前离线摄像头：
          <span class="securityAlarmMap-info-item-num" style="color: #4D4D4D">{{ deviceNum.unline }}</span>
          台
        </span>
        <span class="securityAlarmMap-info-item">
          当前告警摄像头：
          <span class="securityAlarmMap-info-item-num" style="color: #F1934E">{{ deviceNum.alarm }}</span>
          台
        </span>
      </div>

      <div class="securityAlarmMap-map">
        <ImageMap :show-camera="handleCameraVisible" :markers="devicePositions" :src="areaSrc" ></ImageMap>
      </div>
    </Card>

    <a-modal
        title="实时预览"
        v-if="showcamera"
        :visible="true"
        width="800px"
        @cancel="()=>{this.showcamera=false}"
        :footer="null"
    >
      <div style="height: 450px">
        <hkwsCamera  />
      </div>
    </a-modal>

  </div>
</template>

<script>
import Card from "@/components/common/card.vue";
import IconCamera from "@/assets/svg/IconCamera.vue";
import ImageMap from "@/components/security/alarm/map/imageMap.vue";
import hkwsCamera from "@/components/security/camera/hkwsCamera.vue";

export default {
  data() {
    return {
      alarmNum: 0,
      floor: '1',
      areaSrc: 'security/area_1F.png',
      showcamera: false,
      deviceNum: {
        online: 7,
        unline: 2,
        alarm: 1,
      },
      devicePositions: [
        {
          status: 1,
          left: 348,
          top: 27,
          code: '123456'
        },{
          status: 1,
          left: 373,
          top: 27,
        },{
          status: 1,
          left: 230,
          top: 76,
        },{
          status: 0,
          left: 260,
          top: 76,
        },{
          status: 1,
          left: 300,
          top: 100,
        },{
          status: 0,
          left: 325,
          top: 100,
        },{
          status: 1,
          left: 300,
          top: 130,
        },{
          status: 2,
          left: 325,
          top: 130,
        },{
          status: 1,
          left: 430,
          top: 155,
        },{
          status: 1,
          left: 180,
          top: 350
        }
      ]
    }
  },
  components: {
    Card,
    IconCamera,
    ImageMap,
    hkwsCamera,
  },
  mounted() {
  },
  methods: {
    handleCameraVisible(code) {
      if (code && code!='') {
        this.showcamera = true;
      } else {
        this.$message.warning('暂未获取到视频流')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.securityAlarmMap {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  padding: 0px 15px 15px;

  .securityAlarmMap-query {
    margin-top: 12px;
    margin-left: 15px;
  }

  .securityAlarmMap-alert {
    margin-top: 12px;
    margin-left: 15px;
  }

  .securityAlarmMap-info {
    width: 100%;
    margin-top: 15px;
    margin-left: 15px;
    color: #B2B2B2;
    .securityAlarmMap-info-item {
      display: inline-block;
      font-size: 15px;
      margin-right: 50px;
      .securityAlarmMap-info-item-num {
        font-size: 18px;
        background-color: #f7fbff;
        padding: 0 30px;
        font-weight: bold;
      }
    }
  }

  .securityAlarmMap-map {
    //width: 100%;
    padding: 2% 5%;
    background-color: #ffffff;
  }
}
</style>