<template>
  <div class="page-container">
    <div style="width: 90%; overflow: hidden">
      <el-row :gutter="20" class="alarming-tab">
        <el-col :span="3">
          <div class="grid-content">
            <div>
              <div class="num colorRed">2000</div>
              <div class="text">告警总数</div>
            </div>
          </div>
        </el-col>

        <el-col :span="3">
          <div class="grid-content">
            <div>
              <div class="num colorBlue">1000</div>
              <div class="text">失电告警</div>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content">
            <div>
              <div class="num colorGreen">200</div>
              <div class="text">电压越线告警</div>
            </div>
          </div>
        </el-col>

        <el-col :span="3">
          <div class="grid-content">
            <div>
              <div class="num colorOrange">300</div>
              <div class="text">消防告警</div>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content">
            <div>
              <div class="num colorYellow">500</div>
              <div class="text">入侵告警</div>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content">
            <div>
              <div class="num colorRed">35</div>
              <div class="text">未处理</div>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content">
            <div>
              <div class="num colorLightBlue">90%</div>
              <div class="text">处理率</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="border-container">
      <div class="latestData">告警查询</div>
      <div class="page-inner">
        <!-- 搜索 start -->
        <div class="filterBox">
          <div class="filter-item">
            站点：
            <el-select
              v-model="value"
              placeholder="请选择"
              style="width: 120px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="filter-item">
            设备：
            <el-select
              v-model="value2"
              placeholder="请选择"
              style="width: 120px"
            >
              <el-option
                v-for="item in options2"
                :key="item.value2"
                :label="item.label"
                :value="item.value2"
              >
              </el-option>
            </el-select>
          </div>

          <div class="filter-item">
            时间:
            <el-date-picker
              style="width: 150px"
              v-model="formDaliog.startTime"
              type="date"
              placeholder="选择时间"
              align="right"
              format="yyyy-MM-dd "
              value-format="yyyy-MM-dd "
              :picker-options="pickerOptions1"
            >
            </el-date-picker>
            ~
            <el-date-picker
              style="width: 150px"
              v-model="formDaliog.end"
              type="date"
              placeholder="选择时间"
              align="right"
              format="yyyy-MM-dd "
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions2"
            >
            </el-date-picker>
          </div>
          <div class="filter-item">
            类型：
            <el-select
              v-model="value3"
              placeholder="请选择"
              style="width: 120px"
            >
              <el-option
                v-for="item in options3"
                :key="item.value3"
                :label="item.label"
                :value="item.value3"
              >
              </el-option>
            </el-select>
          </div>
          <div class="filter-item">
            <el-radio v-model="radio" label="1">未确认</el-radio>
            <el-radio v-model="radio" label="2">已确认</el-radio>
           
          </div>
           <span class="export"><img src="@/assets/export.png" alt="" /> 导出</span>

          
        </div>
        <!-- 搜索 end -->

        <!-- table start -->
        <el-table
          border
          :data="tableData"
          :cell-style="cellStyle"
          :header-cell-style="{ color: '#fff', borderColor: '#01727A' }"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="time" label="发生时间" width="200">
          </el-table-column>
          <el-table-column prop="alarming" label="告警" width="220">
          </el-table-column>
          <el-table-column prop="site" label="站点" width="150">
          </el-table-column>
          <el-table-column prop="device" label="设备" width="130">
          </el-table-column>
          <el-table-column prop="alarmingType" label="告警类型">
          </el-table-column>
          <el-table-column prop="alarmingLevel" label="告警级别">
          </el-table-column>
          <el-table-column prop="detail" label="详情"> </el-table-column>
          <el-table-column prop="operate" label="操作"> </el-table-column>
        </el-table>
        <!-- table end -->
        <br />
        <br />
        <div>分页</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      tableData: [
        {
          time: "2020-01-20 15:34:26",
          alarming: "【伍继智能设备01】设备离线",
          site: "伍继智能测试183",
          device: "伍继智能设备01 ",
          alarmingType: "设备离线",
          alarmingLevel: "二级告警",
          detail: "查看",
          operate: "确认",
        },
        {
          time: "2020-01-20 15:34:26",
          alarming: "【伍继智能设备01】设备离线",
          site: "伍继智能测试183",
          device: "伍继智能设备01 ",
          alarmingType: "设备离线",
          alarmingLevel: "二级告警",
          detail: "查看",
          operate: "确认",
        },
        {
          time: "2020-01-20 15:34:26",
          alarming: "【伍继智能设备01】设备离线",
          site: "伍继智能测试183",
          device: "伍继智能设备01 ",
          alarmingType: "设备离线",
          alarmingLevel: "二级告警",
          detail: "查看",
          operate: "确认",
        },
      ],

      options: [
        {
          value: "选项1",
          label: "站点一",
        },
        {
          value: "选项2",
          label: "站点二",
        },
      ],
      options2: [
        {
          value2: "11",
          label: "设备一",
        },
        {
          value2: "22",
          label: "设备二",
        },
      ],
      options3: [
        {
          value3: "11",
          label: "类型一",
        },
        {
          value3: "22",
          label: "类型二",
        },
      ],

      value: "",
      value2: "",
      value3: "",
      radio: "1",

      //日期时间选择器
      formDaliog: {
        startTime: "",
        endTime: "",
      },
      pickerOptions1: {
        disabledDate: (time) => {
          if (this.formDaliog.endTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() > new Date(this.formDaliog.endTime).getTime()
            );
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
      },
      pickerOptions2: {
        disabledDate: (time) => {
          if (this.formDaliog.startTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() < new Date(this.formDaliog.startTime).getTime()
            );
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
      },
    };
  },
  methods: {
    //设置单元格背景
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return " border-color:#01727A!important;color:#fff;";
    },

    changeAllChecked: function () {
      if (this.checked) {
        this.checkedNames = this.checkedArr;
      } else {
        this.checkedNames = [];
      }
    },
  },
  watch: {
    checkedNames: function () {
      if (this.checkedNames.length == this.checkedArr.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
  },
};
</script>

<style lang="scss" >
</style>
