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

<template>
  <div class="securityAlarmManage">
    <div class="page-query-core">
      <Query :show="['floor', 'time']" :query-data.sync="queryData" :reset="reset" :search="search"></Query>
      <Card title="核心指标">
        <CoreData :data-list="coreData"></CoreData>
      </Card>
    </div>


    <div style="margin-top: 12px">
      <a-row :gutter="[12,12]">
        <a-col :span="16">
          <div class="securityAlarmManage-distributeMap">
            <Card title="告警分布">
              <SecurityAlarmManageDistributeMap></SecurityAlarmManageDistributeMap>
            </Card>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="securityAlarmManage-trend">
            <Card title="告警趋势">
              <div style="padding: 0 15px 8px">
                <SecurityAlarmManageTrend ref="SecurityAlarmManageTrend" :query-data="queryData" :height="415"></SecurityAlarmManageTrend>
              </div>
            </Card>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="securityAlarmManage-distribute">
            <Card title="楼层告警分布">
              <SecurityAlarmManageDistribute ref="SecurityAlarmManageDistribute" :query-data="queryData" :height="300"></SecurityAlarmManageDistribute>
            </Card>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="securityAlarmManage-onlineTrend">
            <Card title="设备在线趋势">
              <div style="padding: 0 15px">
                <SecurityAlarmManageOnlineTrend ref="SecurityAlarmManageOnlineTrend" :query-data="queryData" :height="300"></SecurityAlarmManageOnlineTrend>
              </div>
            </Card>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="securityAlarmManage-category">
            <Card title="告警分类">
              <SecurityAlarmManageCategory ref="SecurityAlarmManageCategory" :query-data="queryData" :height="300"></SecurityAlarmManageCategory>
            </Card>
          </div>
        </a-col>
      </a-row>
    </div>

  </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";
import apiSecurityAlarmMgr from "@/api/security/apiSecurityAlarmMgr";

export default {
  data() {
    return {
      queryData: {
        floor: '0',
        timeRange: this.$util.dateUtil.getNearlyMonthRange()
      },
      coreData: [
        {
          title: '告警事件',
          num: 0,
          historyDesc: '同比',
          historyNum: 0
        }, {
          title: '紧急告警事件',
          num: 0,
          historyDesc: '同比',
          historyNum: 0
        }, {
          title: '已处理事件',
          num: 0,
          historyDesc: '同比',
          hideTrend: true,
          historyNum: 0
        }, {
          title: '告警最多类型',
          num: '',
          historyDesc: '同比',
          historyNum: 0
        }, {
          type: 1,
          title: '值得关注',
        }
      ]
    }
  },
  components: {
    Card,
    Query,
    CoreData,
    SecurityAlarmManageDistributeMap,
    SecurityAlarmManageTrend,
    SecurityAlarmManageDistribute,
    SecurityAlarmManageOnlineTrend,
    SecurityAlarmManageCategory,
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.$store.loadingStore().loadingWithApi(this.getCoreData(), 2000)
    },
    reset() {

    },
    search() {
      this.$util.asyncPromise(
          this.getCoreData(),
          this.$refs.SecurityAlarmManageCategory.getData(),
          this.$refs.SecurityAlarmManageDistribute.getData(),
          this.$refs.SecurityAlarmManageOnlineTrend.getData(),
          this.$refs.SecurityAlarmManageTrend.getData()
      )
    },
    getCoreData() {
      return apiSecurityAlarmMgr.getCoreData(this.queryData).then(res=>{
        this.coreData[0].num = res.list[0].value
        this.coreData[0].historyNum = res.list[0].compare
        this.coreData[1].num = res.list[1].value
        this.coreData[1].historyNum = res.list[1].compare
        this.coreData[2].num = res.list[2].value
        this.coreData[2].historyNum = res.list[2].compare
        this.coreData[3].num = res.list[3].value
        this.coreData[3].historyNum = res.list[3].compare
        this.coreData[4].content = res.worthAttention
      })
    }
  }
}
</script>

<style lang="less" scoped>
.securityAlarmManage {
  padding-bottom: 20px;

  .securityAlarmManage-distributeMap {
    height: 450px;
    overflow: hidden;
  }

  .securityAlarmManage-trend {
    height: 450px;
    overflow: hidden;
  }

  .securityAlarmManage-distribute {

  }
}
</style>