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

<template>
  <Card title="预警列表">
    <div class="containerBox">
      <div class="dataBoardContent">
        <vue-scroll>
          <table class="greenTable" v-if="sprayDevList.length > 0">
            <thead>
              <tr>
                <th>设备名称</th>
                <th>设备状态</th>
                <th>报警类型</th>
                <th>超标值</th>
                <th>喷淋次数</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in sprayDevList" :key="index">
                <td>{{ item.deviceName }}</td>
                <td>离线</td>
                <td>pm2.5</td>
                <td>0.1μg/m³</td>
                <td>1次</td>
              </tr>
            </tbody>
          </table>
          <div v-else style="margin-top:60px; height: 70%;text-align: center">
            <img src="@/assets/images/noData.png" alt="" />
            <p>暂无数据</p>
          </div>
          <!-- <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,
  selectNewEnvironmentAlarmListApi,
  getRealTimeDustNoiseDataApi,
  getAirQualityStatisticsApi,
  sprayDevListApi,
  selectDustNoiseDataApi,
  getWeatherDataApi,
  getCurrentDayAirQualityApi,
  sprayOperateDataApi
} from '@/assets/js/api/environmentManage'

import Card from '../components/Card.vue'
export default {
  components: { Card },
  data() {
    return {
      alarmList: [],
      sprayDevList: [],
      // alarmList: [
      //   {
      //     deviceName: "一号设备",
      //     tempAlarmTime: "塔吊喷淋",
      //     show: true
      //   },
      //   {
      //     deviceName: "一号设备",
      //     tempAlarmTime: "塔吊喷淋",
      //     show: false
      //   },
      //   {
      //     deviceName: "一号设备",
      //     tempAlarmTime: "塔吊喷淋",
      //     show: false
      //   },
      //   {
      //     deviceName: "一号设备",
      //     tempAlarmTime: "塔吊喷淋",
      //     show: true
      //   },
      //   {
      //     deviceName: "一号设备",
      //     tempAlarmTime: "塔吊喷淋",
      //     show: false
      //   },
      // ],

      value: true
    }
  },
  created() {
    this.getAlarmList()
    this.getSprayDevList()
    this.sprayOperate()
    console.log('合并列表数据', dataListNew)
  },
  methods: {
    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
      })
    },
    //获取报警列表
    getAlarmList() {
      let data = {
        projectSn: this.projectSn
      }
      selectNewEnvironmentAlarmListApi(data).then(res => {
        if (res.code == 200) {
          this.alarmList = res.result
          console.log('报警列表----', this.alarmList)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.containerBox {
  width: 100%;
  height: 100%;
  .titleTxt {
    font-size: 18px;
    color: #6ee4f0;
    margin-top: 5px;
    margin-left: 5px;
  }
  .greenTable {
    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;
    }
  }
  .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>