hyyfClient/src/views/Alarm/AlarmWarn.vue

<template>
  <div class="alarmWarn">
    <div class="title" :style="{ color: color }">报警情况占比</div>
    <div class="box-flex">
      <div class="flex-left">
        <alarm-pie></alarm-pie>
      </div>
      <div class="flex-left">
        <alarm-bar></alarm-bar>
      </div>
    </div>
    <div class="reply" :style="{color: color}">筛选查询</div>
    <x-form :formItems="selectItems" :day="day" @setDay="setDay" @onClickType="onClickType"></x-form>
    <new-table :height="600" :title="title" :listData="list" :tableItems="tableItems" :shows="tableShows">
      <template #right>
        <el-button size="mini" type="primary" v-if="hasPerm('video:add')" style="margin-right: 10px" @click="digAll">批量处理</el-button>
      </template>
      <template #type="scope">
        <span v-if="scope.row.type === 1">环境报警</span>
        <span v-else>设备异常</span>
      </template>
      <template #class="scope">
        <span v-if="scope.row.class === 1">一级</span>
        <span v-else>二级</span>
      </template>
      <template #handler="scope">
        <span v-if="scope.row.dig">已处理</span>
        <el-button v-else type="primary" size="mini">处理</el-button>
      </template>
    </new-table>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import AlarmPie from "@/views/Alarm/chart/AlarmPie";
import AlarmBar from "@/views/Alarm/chart/AlarmBar";
import XForm from "@/components/XForm";
import NewTable from "@/components/newTable/NewTable";
export default {
  name: "AlarmWarn",
  components: {
    AlarmPie,
    AlarmBar,
    XForm,
    NewTable
  },
  computed: {
    ...mapState(['color'])
  },
  data() {
    return {
      selectItems: [
        {
          id: 1,
          type: 'select',
          label: '报警类型：',
          placeholder: '请选择报警类型',
          field: 'areaId',
          options: [],
          col: 5
        },
        {
          id: 3,
          type: 'text',
          text: '今日',
          value: 1,
          col: 1
        },
        {
          id: 4,
          type: 'text',
          text: '本周',
          value: 2,
          col: 1
        },
        {
          id: 5,
          type: 'text',
          text: '本月',
          value: 3,
          col: 1
        },
        {
          id: 6,
          type: 'datepicker',
          placeholder: [],
          field: 'value1',
          col: 6
        },
        {
          id: 7,
          type: 'button',
          text: '导出数据',
          col: 2,
          click: 'derive'
        }
      ],
      day: 2,
      title: '报警列表',
      list: [
        {
          id: 1,
          time: '2021-10-11 14:55:55',
          type: 1,
          class: 1,
          content: '育肥1栋3单元温度过高',
          dig: false,
        },
        {
          id: 2,
          time: '2021-10-11 14:55:55',
          type: 2,
          class: 2,
          content: '育肥1栋2单元温度传感器异常',
          dig: true,
        }
      ],
      tableItems: [
        {
          prop: 'time',
          label: '报警时间',
          minWidth: '100',
          slotName: 'time'
        },
        {
          prop: 'type',
          label: '报警类型',
          minWidth: '100',
          slotName: 'type'
        },
        {
          prop: 'class',
          label: '危险等级',
          minWidth: '100',
          slotName: 'class'
        },
        {
          prop: 'content',
          label: '报警内容',
          minWidth: '100',
          slotName: 'content'
        },
        {
          label: '处理结果',
          minWidth: '100',
          slotName: 'handler'
        }
      ],
      tableShows: {
        showIndex: false,
        showSelect: true,
        defaultProp: 'dig'
      },
    }
  },
  methods: {
    setDay(data) {
      this.day = data;
    },
    onClickType() {},
    // 批量处理
    digAll() {}
  },
}
</script>

<style scoped>
  .alarmWarn {
    width: 100%;
    height: 100%;
    padding: 20px 20px 0 20px;
  }
  .title {
    width: 100%;
    height: 40px;
    border: 1px solid #ddd;
    background-color: #f3f3f3;
    padding-left: 20px;
    line-height: 40px;
  }
  .box-flex {
    width: 100%;
    height: 400px;
    background-color: #fff;
    display: flex;
  }
  .flex-left {
    width: 50%;
    height: 100%;
  }
  .reply {
    width: 100%;
    border: 1px solid #ddd;
    border-bottom: 0;
    height: 50px;
    background-color: #F3F3F3;
    line-height: 50px;
    font-size: 18px;
    box-sizing: border-box;
    padding-left: 20px;
  }
</style>