zhgdyun/src/views/projectAdmin/fourEngin/carbon/leftCenter.vue

<template>
  <Card title="预警列表">
    <div class="containerBox">
      <div class="dataBoardContent">
        <vue-scroll>
          <table class="greenTable">
            <thead>
              <tr>
                <th>报警类型</th>
                <th>报警名称</th>
                <th>设备名称</th>
                <th>报警值</th>
                <th>阈值</th>
                <th>超标时间</th>
                <th>超标量</th>
              </tr>
            </thead>
            <tbody v-if="list.length > 0">
              <tr v-for="(item, index) in list" :key="index">
                <td>{{ item.type }}</td>
                <td>{{ item.alarmTypeName }}</td>
                <td>{{ item.deviceName }}</td>
                <td>{{ item.avgData }}</td>
                <td>{{ item.alarmValue }}</td>
                <td>{{ item.tempAlarmTime }}</td>
                <td>{{ item.exceed }}</td>
              </tr>
            </tbody>
            <div v-else class="noDataDiv">
              <img src="@/assets/images/noData.png" alt="" />
              <p>暂无数据</p>
            </div>
          </table>

          <!-- <div class="placeholderBox placeholderBox2" v-if="alarmList.length == 0">
            <img src="@/assets/images/noData3.png" alt srcset />
            <p>
              暂无数据
              {{$t('message.dataBoard.nodata')}} -->
          <!-- </p>  -->
          <!-- </div>  -->
        </vue-scroll>
      </div>
    </div>
  </Card>
</template>

<script>
import { environmentDevList, environmentAlarmList, environmentAlarmTypeList } from '@/assets/js/api/environmentManage'

import Card from '../components/Card.vue'
export default {
  components: { Card },
  data() {
    return {
      alarmList: [],
      sprayDevList: [],
      value: true,
      // list: [{
      //   type:'222222',
      //   alarmTypeName:'2222222',
      //   deviceName:'deviceName',
      //   avgData:'avgData',
      //   alarmValue:'alarmValue',
      //   tempAlarmTime:'tempAlarmTime',
      //   exceed:'exceed'
      // }],
      list: [],
      time: [],
      alarmTypeIdArr: [],
      deviceIdArr: [],
      pagInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0 //总条数
      }
    }
  },
  mounted() {
    this.selectNowDate()
    this.getEnvironmentAlarmTypeList()
    this.getDevice()
    this.getList()
  },
  methods: {
    // 获取当前时间 返回YYYY-MM-DD HH:mm:ss
    selectNowDate() {
      var date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate(),
        hours = date.getHours(), //获取当前小时数(0-23)
        minutes = date.getMinutes(), //获取当前分钟数(0-59)
        seconds = date.getSeconds()
      month >= 1 && month <= 9 ? (month = '0' + month) : ''
      day >= 0 && day <= 9 ? (day = '0' + day) : ''
      hours >= 0 && hours <= 9 ? (hours = '0' + hours) : ''
      minutes >= 0 && minutes <= 9 ? (minutes = '0' + minutes) : ''
      seconds >= 0 && seconds <= 9 ? (seconds = '0' + seconds) : ''
      // var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;
      var timer = year + '-' + month + '-' + day
      this.time = [timer, timer]
      console.log(timer)
      // return timer;
    },
    refresh() {
      this.queryInfo = {}
      this.time = []
      this.pagInfo.pageNo = 1 //页数
      this.pagInfo.pageSize = 10 //条数
      this.getList()
    },
    query() {
      this.queryInfo.startTime = this.time[0]
      this.queryInfo.endTime = this.time[1]
      this.pagInfo.pageNo = 1
      console.log('query', this.queryInfo)
      this.getList()
    },
    getDevice() {
      environmentDevList({ projectSn: this.$store.state.projectSn }).then(result => {
        if (result.success) {
          this.deviceIdArr = result.result
          console.log('get设备列表', this.deviceIdArr)
        }
      })
    },
    getList() {
      let timeObj = {
        startTime: this.time ? this.time[0] : '',
        endTime: this.time ? this.time[1] : ''
      }
      environmentAlarmList(Object.assign(this.pagInfo, { projectSn: this.$store.state.projectSn }, timeObj)).then(result => {
        if (result.success) {
          this.List = result.result.records
          this.pagInfo.total = result.result.total
          console.log('报警列表', result)
        }
      })
    },
    getEnvironmentAlarmTypeList() {
      environmentAlarmTypeList().then(result => {
        if (result.success) this.alarmTypeIdArr = result.result
      })
    },
    SizeChange(val) {
      this.pagInfo.pageSize = val
      this.getList()
    },
    CurrentChange(val) {
      this.pagInfo.pageNo = val
      this.getList()
    }
    //---------
    // sprayOperate(deviceId, operateType) {
    //   sprayOperateDataApi({ projectSn: this.$store.state.projectSn, operateType: operateType, deviceId: deviceId }).then(res => {
    //     this.sprayDevList = res.result
    //   })
    // },
    // getSprayDevList() {
    //   sprayDevListApi({ projectSn: this.$store.state.projectSn }).then(res => {
    //     this.sprayDevList = res.result
    //   })
    // },
  }
}
</script>

<style lang="less" scoped>
.containerBox {
  width: 100%;
  height: 100%;
  .titleTxt {
    font-size: 18px;
    color: #6ee4f0;
    margin-top: 5px;
    margin-left: 5px;
  }
  .greenTable {
    width: 100%;
    height: 100%;
    position: relative;
    th {
      color: #72bdc9;
      border-bottom: 1px solid rgba(31, 68, 86, 0.3);
      line-height: 35px;
      //opacity: 0.8;
    }
    td {
      color: #fff;
      line-height: 35px;
    }
    margin-right: 15px;
    margin-left: -6px;
    .noDataDiv {
      position: absolute;
      width: 100%;
      height: 100%;
      margin-top: 100px;

      img {
        text-align: center;
        margin-left: 180px;
      }
      p {
        text-align: center;
      }
    }
  }
  .alarmType {
    position: relative;
    left: 40%;
    width: 35px;
    height: 15px;
    background-color: #08b58a;
    border-radius: 8px;
  }
  .alarmType::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
  }
  .unAlarm {
    position: relative;
    left: 40%;
    width: 35px;
    height: 15px;
    background-color: #6d7077;
    border-radius: 8px;
  }
  .unAlarm::before {
    content: '';
    position: absolute;
    top: 1px;
    right: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
  }
}
</style>