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

<template>
  <div class="securityAlarmManage">
    <div class="securityAlarmManage-query">
      <Query></Query>
    </div>
    <div class="securityAlarmManage-core">
      <Card title="核心指标">
        <CoreData :data-list="coreData"></CoreData>
      </Card>
    </div>
    <a-row>
      <a-col :span="14">
        <div class="securityAlarmManage-distributeMap">
          <Card title="告警分布">
            <SecurityAlarmManageDistributeMap></SecurityAlarmManageDistributeMap>
          </Card>
        </div>
      </a-col>
      <a-col :span="10">
        <div class="securityAlarmManage-trend">
          <Card title="告警趋势">
            <SecurityAlarmManageTrend :height="450"></SecurityAlarmManageTrend>
          </Card>
        </div>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="8">
        <div class="securityAlarmManage-distribute">
          <Card title="楼层告警分布">
            <SecurityAlarmManageDistribute :height="300"></SecurityAlarmManageDistribute>
          </Card>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="securityAlarmManage-onlineTrend">
          <Card title="设备在线趋势">
            <SecurityAlarmManageOnlineTrend :height="300"></SecurityAlarmManageOnlineTrend>
          </Card>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="securityAlarmManage-category">
          <Card title="告警分类">
            <SecurityAlarmManageCategory :height="300"></SecurityAlarmManageCategory>
          </Card>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import Query from "@/components/common/query.vue";
import Card from "@/components/common/card.vue";
import CoreData from "@/components/common/coreData.vue";

import SecurityAlarmManageDistributeMap from "@/components/security/alarm/manage/securityAlarmManageDistributeMap.vue";
import SecurityAlarmManageTrend from "@/components/security/alarm/manage/securityAlarmManageTrend.vue";
import SecurityAlarmManageDistribute from "@/components/security/alarm/manage/securityAlarmManageDistribute.vue";
import SecurityAlarmManageOnlineTrend from "@/components/security/alarm/manage/securityAlarmManageOnlineTrend.vue";
import SecurityAlarmManageCategory from "@/components/security/alarm/manage/securityAlarmManageCategory.vue";

export default {
  data() {
    return {
      coreData: [
        {
          title: '告警事件',
          num: 1000,
          historyDesc: '同比',
          historyNum: 0.4
        },{
          title: '紧急告警事件',
          num: 500,
          historyDesc: '同比',
          historyNum: 0.4
        },{
          title: '已处理事件',
          num: 200,
          historyDesc: '同比',
          hideTrend: true,
          historyNum: 60
        },{
          title: '告警最多类型',
          num: '设备离线',
          historyDesc: '同比',
          historyNum: 0.4
        },{
          type: 1,
          title: '值得关注',
        }
      ]
    }
  },
  components: {
    Card,
    Query,
    CoreData,
    SecurityAlarmManageDistributeMap,
    SecurityAlarmManageTrend,
    SecurityAlarmManageDistribute,
    SecurityAlarmManageOnlineTrend,
    SecurityAlarmManageCategory,
  },
  mounted() {
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.securityAlarmManage {
  .securityAlarmManage-distributeMap {
    width: 100%;
    padding: 0 15px 15px;
  }
  .securityAlarmManage-trend {
    width: 95%;
  }
  .securityAlarmManage-distribute {
    padding-bottom: 5%;
  }
}
</style>