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

<template>
  <div class="securityAlarmInfo">
    <a-row style="height: 100%">
      <a-col :span="4" style="height: 800px">
        <security-device-select :tree-data="treeData"/>
      </a-col>
      <a-col :span="20" style="height: 100%;padding: 15px">
        <div class="securityAlarmInfo-query">
          <Query :show="['time']" :query-data.sync="formData" :search="search">
            <template #extraItem>
              <a-form-model-item label="告警类型">
                <a-select defaultValue="all" style="width: 150px">
                  <a-select-option value="all">全部</a-select-option>
                  <a-select-option value="fumes">烟雾告警</a-select-option>
                  <a-select-option value="fire">火焰告警</a-select-option>
                  <a-select-option value="trespass">非法闯入</a-select-option>
                  <a-select-option value="violation">违规行为</a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="处理情况">
                <a-select defaultValue="all" style="width: 120px">
                  <a-select-option value="all">全部</a-select-option>
                  <a-select-option value="finish">已处理</a-select-option>
                  <a-select-option value="todo">待处理</a-select-option>
                </a-select>
              </a-form-model-item>
            </template>
          </Query>
        </div>
        <div class="securityAlarmInfo-list">
          <a-table :rowKey="(record, index) => index"
                   :columns="columns"
                   :data-source="tableData"
          >

            <template #level="text">
              <span v-if="text==0" style="color: #ffbf6b">一般告警</span>
              <span v-if="text==1" style="color: #d26e64">重要告警</span>
              <span v-if="text==2" style="color: #b83023">紧急告警</span>
            </template>

            <template #type="text">
              <span v-if="text==0" style="color: #ffbf6b">火焰告警</span>
              <span v-if="text==1" style="color: #d26e64">水浸告警</span>
              <span v-if="text==2" style="color: #b83023">摄像头离线</span>
            </template>

            <template #operation="text">
              <a-button type="link">确认处理</a-button>
              <a-button type="link" @click="viewDetail">查看详情</a-button>
            </template>
          </a-table>
        </div>
      </a-col>
    </a-row>

    <!--告警详情-->
    <a-modal class="securityPersonMoreDetail" v-if="showDetail"
             :visible="true"
             :width="800"
             :footer="null"
             @cancel="handleCancel"
    >
      <div>告警详情</div>
      <a-divider/>

      <div style="width: 100%;height: 100%">
        <div style="height: 250px;width: 100%">
          <img width="100%" height="100%" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
        </div>
        <div style="margin-top: 20px">
          <a-descriptions :column="3" size="small">
            <a-descriptions-item label="监控点">
              {{ currItem.area }}
            </a-descriptions-item>
            <a-descriptions-item label="告警区域">
              {{ currItem.source }}
            </a-descriptions-item>
            <a-descriptions-item label="告警类型">
              <span v-if="currItem.type==0" style="color: #ffbf6b">火焰告警</span>
              <span v-if="currItem.type==1" style="color: #d26e64">水浸告警</span>
              <span v-if="currItem.type==2" style="color: #b83023">摄像头离线</span>
            </a-descriptions-item>
            <a-descriptions-item label="告警时间">
              {{ currItem.time }}
            </a-descriptions-item>
            <a-descriptions-item label="告警级别">
              <span v-if="currItem.level==1">一般告警</span>
              <span v-if="currItem.level==2">重要告警</span>
              <span v-if="currItem.level==3">紧急告警</span>
            </a-descriptions-item>
            <a-descriptions-item label="准确率">
              98%
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </a-modal>

  </div>
</template>

<script>
import SecurityDeviceSelect from "@/components/security/common/securityDeviceSelect.vue";
import TimeRange from "@/components/common/timeRange.vue";
import Query from "@/components/common/query.vue";
import apiSecurityCamera from "@/api/security/apiSecurityCamera";
import moment from "@/utils/moment_set";

export default {
  data() {
    return {
      showDetail: false,
      formData: {},
      treeData: [],
      currItem: {},
      tableData: [
        {
          time: '2023-04-20 08:43:00',
          area: '一层大厅',
          level: 1,
          source: '一层大厅东南角1号球机',
          type: 2,
        },
        {
          time: '2023-04-21 01:05:06',
          area: '一层大厅',
          level: 1,
          source: '一层大厅东南角1号球机',
          type: 2,
        },
        {
          time: '2023-04-21 01:05:06',
          area: '一层大厅',
          level: 1,
          source: '一层大厅东南角1号球机',
          type: 2,
        },
      ],
      columns: [
        {
          title: '告警时间',
          dataIndex: 'time',
          key: 'time'
        },
        {
          title: '告警区域',
          dataIndex: 'area',
          key: 'area'
        },
        {
          title: '告警级别',
          dataIndex: 'level',
          key: 'level',
          scopedSlots: {customRender: 'level'},
        },
        {
          title: '告警来源',
          dataIndex: 'source',
          key: 'source'
        },
        {
          title: '告警类型',
          dataIndex: 'type',
          key: 'type',
          scopedSlots: {customRender: 'type'},
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          minWidth: 220,
          align: 'center',
          scopedSlots: {customRender: 'operation'},
        }
      ]
    }
  },
  components: {
    Query,
    SecurityDeviceSelect,
    TimeRange,
  },
  mounted() {
    this.getCameraList()
  },
  methods: {
    getCameraList() {
      let app = this;
      apiSecurityCamera.getCameraList().then(res => {
        res.forEach(item => {
          item.title = item.deviceName;
          item.key = item.deviceId;
          item.slots = {icon: 'camera',};
        })
        res.sort((a, b) => {
          if (a.title > b.title) {
            return 1
          } else {
            return -1
          }
        })
        this.treeData = res;
        app.genData();
      })
    },
    viewDetail() {
      this.showDetail = true;
    },
    handleCancel() {
      this.showDetail = false
    },
    search() {

    },
    randomDate() {
      let startDate = this.$moment().startOf('month').toDate();;
      let endDate = new Date();
      let date = new Date(+startDate + Math.random() * (endDate - startDate));
      let hour = 0 + Math.random() * (23 - 0) | 0;
      let minute = 0 + Math.random() * (59 - 0) | 0;
      let second = 0 + Math.random() * (59 - 0) | 0;
      date.setHours(hour);
      date.setMinutes(minute);
      date.setSeconds(second);
      return date;
    },
    randomCamera() {
      let index = Math.floor(Math.random() * this.treeData.length);
      return this.treeData[index].title;
    },
    genData() {
      this.tableData = [];
      for (let i = 0; i < 35; i++) {
        let deviceName = this.randomCamera();
        let time = this.$moment(this.randomDate()).format("YYYY/MM/DD HH:mm:ss")
        let obj = {
          time: time,
          area: 'B2',
          level: 1,
          source: deviceName,
          type: 2,
        }
        this.tableData.push(obj);
      }
      this.tableData.sort((a,b)=>{
        if (a.time>b.time) {
          return -1;
        }
        return 1;
      })
    }
  }
}
</script>

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

  .securityAlarmInfo-list {
    margin: 15px 0px;
  }
}
</style>