alarmlog.vue

<template>
  <div class="manage-container deviceStatus-wrapper">
    <el-row class="manage-head-wrapper">
      <el-col :span="24">
        <div class="manage-select-box">
          <div class="radio-box">
            <el-radio
              v-model="radioVal"
              label="realTime"
              @change="radioChange"
            >{{$t('button.realtimeRefresh')}}</el-radio>
            <el-radio
              v-model="radioVal"
              label="history"
              @change="radioChange"
            >{{$t('button.historicalRecord')}}</el-radio>
          </div>
          <!-- <el-checkbox-group v-model="checkVal" @change="checkChange" class="alarm-checkbox">
						<el-checkbox label="realTime">{{$t('button.realtimeRefresh')}}</el-checkbox>
						<el-checkbox label="history">{{$t('button.historicalRecord')}}</el-checkbox>
          </el-checkbox-group>-->
        </div>
        <div class="manage-select-box">
          <el-date-picker
            v-model="date"
            type="date"
            :placeholder="$t('pholder.date')"
            :picker-options="pickerOptions"
            v-show="showDatePicker"
            value-format="yyyy-MM-dd"
            @change="getAlarmLog"
          ></el-date-picker>
        </div>
      </el-col>
    </el-row>
    <el-row class="manage-content">
      <el-col :span="24">
        <el-table
          :data="alarmData"
          class="data-compare-table"
          :max-height="tableHeight"
          :empty-text="dataMsg"
          style="width: 100%"
          header-row-class-name="manage-tab-head"
        >
          <el-table-column align="center" :label="$t('table.order')" width="100" type="index"></el-table-column>
          <el-table-column :label="$t('table.alarmIM')" align="center">
            <template slot-scope="scope">
              <p
                :id="scope.row.id"
                class="text-box blink"
              >{{scope.row.counttime}}， {{getGateName(scope.row.gateId)}}， {{$t('format.threshold')}}{{scope.row.threshold}}人， {{$t('format.TRAFFIC')}}{{scope.row.num}}人； 超阈值报警。</p>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.operate')" width="100" align="center">
            <template slot-scope="scope">
              <el-button
                @click="ignore(scope.row)"
                type="text"
                size="small"
                class="tab-btn"
              >{{ $t('button.ignore') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="manage-pagination-box"
          background
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          @size-change="sizeChange"
          @current-change="cerrentChange"
          layout="sizes, prev, pager, next, slot"
          :total="total"
        >
          <span
            class="slot-ele-total"
          >{{$t('table.pageHead')}} {{ total }} {{$t('table.pageTail')}}</span>
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      total: 0,
      pageSize: 20,
      currentPage: 1,
      checkVal: [],
      radioVal: "realTime",
      showDatePicker: false,
      date: "",
      alarmData: [],
      oldAlarmData: [],
      interval: null,
      gatesObj: {},
      dataMsg: ""
    };
  },
  computed: {
    tableHeight() {
      const windowInnerHeight = window.innerHeight;
      return (
        windowInnerHeight -
        (windowInnerHeight <= 720
          ? windowInnerHeight * 0.26
          : windowInnerHeight * 0.24)
      );
    }
  },
  mounted() {
    this.date = dateUnit.dateFormat(new Date(), "yyyy-MM-dd");
    this.getGate();
    if (window.localStorage.getItem("oldAlarm")) {
      this.oldAlarmData = JSON.parse(window.localStorage.getItem("oldAlarm"));
    }
    this.dataMsg = this.$t("echartsTitle.loading");
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  methods: {
    getGate() {
      this.gatesObj = {};
      this.$api.management.gate({}).then(res => {
        let result = res.data.data;
        result.forEach(item => {
          this.gatesObj[item.id] = item.name;
        });
        this.radioChange();
      });
    },
    getGateName(gateId) {
      if (gateId) {
        return this.gatesObj[gateId];
      }
    },
    getAlarmLog() {
      this.dataMsg = this.$t("echartsTitle.loading");
      this.alarmData = [];
      this.$api.management
        .alarmLog({
          countdate: this.radioVal === "history" ? this.date : null,
          page: this.currentPage,
          pageSize: this.pageSize
        })
        .then(res => {
          let result = res.data.data;
          if (this.radioVal == "history") {
            this.alarmData = result.list;
            this.total = result.total;
          } else {
            result.list.forEach(item => {
              if (this.oldAlarmData.indexOf(item.id) === -1) {
                this.alarmData.push(item);
                this.oldAlarmData.push(item.id);
                window.localStorage.setItem(
                  "oldAlarm",
                  JSON.stringify(this.oldAlarmData)
                );
              }
            });
            this.total = this.alarmData.length;
            this.alarmData.length === 0 &&
              (this.dataMsg = this.$t("echartsTitle.noData"));
          }
        })
        .catch(error => {});
    },
    radioChange() {
      if (this.radioVal == "history") {
        clearInterval(this.interval);
        this.showDatePicker = true;
        this.getAlarmLog();
      } else {
        this.getAlarmLog();
        this.showDatePicker = false;
        this.interval = setInterval(() => {
          this.getAlarmLog();
        }, 60000);
      }
    },
    checkChange() {
      this.showDatePicker = this.checkVal[0] == "history" ? true : false;
    },
    ignore(row) {
      // this.alarmData.shift(row)
      // this.oldAlarmData.push(row.id)
      // this.alarmData.forEach((item,index) => {
      // 	if(item.id == row.id) {
      // 		this.alarmData.splice(index,1)
      // 	}
      // })
      $("#" + row.id).removeClass("blink");
    },
    sizeChange(val) {
      this.pageSize = val;
      this.getAlarmLog();
    },
    cerrentChange(val) {
      if (this.currentPage != val) {
        this.currentPage = val;
        this.getAlarmLog();
      }
    },
    // 搜索
    searchFun() {
      this.currentPage = 1;
      // this.getDeviceList();
    }
  }
};
</script>

<style scoped>
@import url(../../Management/public/css/common.css);
.manage-head-wrapper {
  padding: 15px 12px 10px;
}
.manage-header-box {
  float: left;
}
.alarm-checkbox {
  padding-top: 5px;
}
.radio-box {
  padding-top: 5px;
}
.text-box {
  text-align: left;
}
@media (max-width: 1680px) {
  .alarm-checkbox {
    padding-top: 1px;
  }
  .radio-box {
    padding-top: 1px;
  }
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* 添加兼容性前缀 */
@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* 定义blink类*/
.blink {
  text-align: left;
  color: red;
  animation: blink 1s linear infinite;
  /* 其它浏览器兼容性前缀 */
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  -ms-animation: blink 1s linear infinite;
  -o-animation: blink 1s linear infinite;
}
/deep/.alarm-checkbox .el-checkbox__inner {
  width: 16px;
  height: 16px;
}
/deep/.alarm-checkbox .el-checkbox__label {
  font-size: 15px;
}
/deep/.radio-box .el-radio__inner {
  width: 16px;
  height: 16px;
}
/deep/.radio-box .el-radio__label {
  font-size: 15px;
}
</style>