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>
              </tr>
            </thead>
            <tbody>
              <tr v-for="i in 8" :key="i">
                <td>一号设备</td>
                <td>离线</td>
                <td>pm2.5</td>
                <td>μg/m3</td>
                <td>2次</td>
              </tr>
            </tbody>
          </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 Card from "../components/Card.vue";
export default {
  components: { Card },
  data() {
    return {
      // alarmList: [
      //   {
      //     deviceName: "一号设备",
      //     tempAlarmTime: "塔吊喷淋",
      //     show: true
      //   },
      //   {
      //     deviceName: "一号设备",
      //     tempAlarmTime: "塔吊喷淋",
      //     show: false
      //   },
      //   {
      //     deviceName: "一号设备",
      //     tempAlarmTime: "塔吊喷淋",
      //     show: false
      //   },
      //   {
      //     deviceName: "一号设备",
      //     tempAlarmTime: "塔吊喷淋",
      //     show: true
      //   },
      //   {
      //     deviceName: "一号设备",
      //     tempAlarmTime: "塔吊喷淋",
      //     show: false
      //   },
      // ],

      value: true
    };
  }
};
</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>