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="'#5f95e7'" ></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="'#bd3124'" ></IconCamera></span>
          <span style="display: inline-block;margin-right: 12px">告警</span>
        </div>
      </div>

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

      <div class="securityAlarmMap-info">
        <span class="securityAlarmMap-info-item">
          当前在线摄像头
          <span class="securityAlarmMap-info-item-num" style="color: #2f8cc8">16</span>
          台
        </span>
        <span class="securityAlarmMap-info-item">
          当前离线摄像头
          <span class="securityAlarmMap-info-item-num" style="color: #4D4D4D">16</span>
          台
        </span>
        <span class="securityAlarmMap-info-item">
          当前告警摄像头
          <span class="securityAlarmMap-info-item-num" style="color: #F1934E">16</span>
          台
        </span>
      </div>

      <div class="securityAlarmMap-map">
        <ImageMap :src="areaSrc" ></ImageMap>
      </div>
    </Card>
  </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";

export default {
  data() {
    return {
      floor: '1',
      areaSrc: 'security/area_1F.png'
    }
  },
  components: {
    Card,
    IconCamera,
    ImageMap,
  },
  mounted() {
  },
  methods: {}
}
</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;
    height: 60px;
  }

  .securityAlarmMap-info {
    width: 100%;
    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 10px;
        font-weight: bold;
      }
    }
  }

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