large_screen/src/components/monitor/rightTable.vue

<template>
  <div>
    <div class="left_004">
      <div class="left_003" style="font-weight: 800;font-size: 20px;">区域隐患</div>
      <div class="left_003">
      </div>
    </div>
    <table width="90%" border="1" class="t1">
      <thead>
      <th width="20%">隐患名称</th>
      <th width="20%">发生时间</th>
      <th width="20%">级别</th>
      <th width="20%">处理结果</th>
      <th width="20%">完成时间</th>
      </thead>
      <tr v-for="(item,index) in tableData" :key="index">
        <td>{{ item.description }}</td>
        <td>{{item.addTime}}</td>
        <td>{{item.level}}</td>
        <td>{{item.handleState?'已处理':'未处理'}}</td>
        <td>{{item.handleTime}}</td>
      </tr>

    </table>

  </div>
</template>

<script>
export default {
  name: "rightTable",
  data() {
    return {
      viewData: {
        areaId: '',//	string	区域ID
        description: '',//	string	隐患描述
        level: '',//	string	隐患级别
        addTime: '',//	string	添加时间
        addUserName: '',//	string	添加人
        handleState: '',//	boolean	处理状态
        handleTime: '',//string	处理时间
        handleUserName: '',//	string	处理人
        handleMethod: '',//string	处理方式
      },
      tableData: [],
      statusValue: 'a',
    }
  },
  mounted() {
   // this.getTableData();
  },
  methods: {
    //初始化数据
    getTableData() {
      let _data = {
        areaId: sessionStorage.getItem("areaId"),
        handleState: true
      };
      this.$get("index/areas/"+sessionStorage.getItem('areaId')+"/risks", _data).then(res => {
        if (res.code === 200) {
          this.tableData = res.data || [];
        } else {
          console.error(res.msg);
        }
      });
    },
    parentHandleclick(areaId){
      let _data = {
        areaId: areaId,
        handleState: true
      };
      this.$get("index/areas/"+areaId+"/risks", _data).then(res => {
        if (res.code === 200) {
          this.tableData = res.data || [];
        } else {
          console.error(res.msg);
        }
      });
    },
    changeProduct(event) {
      this.statusValue = event.target.value; //获取测点ID，即option对应的ID值
      let _data = {
        areaId: sessionStorage.getItem("areaId"),
        handleState: event.target.value
      };
      this.$get("index/areas/"+sessionStorage.getItem('areaId')+"/risks", _data).then(res => {
        if (res.code === 200) {
          this.tableData = res.data || [];
        } else {
          console.error(res.msg);
        }
      });
    }
  }
}
</script>

<style scoped>
.left_003 {
  text-align: left;
  font-size: 16px;
  padding: 10px;
}

.left_004 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: white 1px solid;
  margin-bottom: 15px;
}

table {
  table-layout: fixed;
  empty-cells: show;
  border-collapse: collapse;
  margin: 0 auto;
}

table.hovertable tr {
  background-color: #d4e3e5;
}

td {
  border: 0px;
  height: 30px;
  text-align: center;
  font-size: 14px;
}

table.t1 {
  border: 1px solid #312D4A;
  color: white;
}

table.t1 th {
  border: 0px;
  height: 30px;
  padding: 0 2px 0;
  background-color: #312D4A;
  font-size: 16px;
  font-weight: 500;
}

table.t1 td, table.t1 th {
  border: 0px;
  padding: 0 1em 0;
  text-align: center;
}

table.t1 tr.a1 {
  background-color: #f5fafe;
}

table.t1 tr:nth-child(odd) {
  background-color: #312D4A;
}

table.t1 tr:nth-child(even) {
  background-color: #100C2A;
}
</style>