large_screen/src/components/monitor/detailedTable.vue

<template>
  <!-- 采煤工作面设备 的 故障记录 -->
  <div class="table-wrapper main">
    <el-table :data="tableData" max-height="200" @row-click="rowCilck" @cell-mouse-enter="cellMouseEnter">
      <el-table-column prop="serialNumber" label="测点编号" width="130">
      </el-table-column>
      <el-table-column prop="place" label="安装位置" width="230">
      </el-table-column>
      <el-table-column prop="real_time" label="实时值" width="160">
      </el-table-column>
      <el-table-column prop="dataQuality" label="数据质量" width="135">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      area: [
        "原煤仓二层分站",
        "碟子沟通风机房",
        "地面主平硐井口",
        "12302回风巷",
      ],
      tableData: [
        {
          serialNumber: 2,
          place: "原煤仓二层分站",
          real_time: 18.3,
          dataQuality: "良好",
        },
        {
          serialNumber: 1,
          place: "原煤仓二层分站",
          real_time: 17.2,
          dataQuality: "良好",
        },
        {
          serialNumber: 0,
          place: "碟子沟通风机房",
          real_time: 18.3,
          dataQuality: "良好",
        },
      ],
    };
  },
  mounted() {
    let interval = setInterval(() => {
      let temp = {};
      temp["serialNumber"] = this.tableData.length;
      temp["place"] = this.area[this.getRandomNum(0, 3)];
      temp["real_time"] = this.getRandomNumWithDecimals(0, 20);
      temp["dataQuality"] = Math.random() > 0.5 ? "良好" : "故障";
      this.tableData.unshift(temp);
    }, 3000);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(interval);
    });
  },
  methods: {
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return "tableStyle";
    },
    tableRowStyle({ row, rowIndex }) {
      return "background-color:#ecf5ff";
    },
    rowCilck(row){
      this.$bus.$emit("changeMpId", row.serialNumber);
    },
    cellMouseEnter(row, column, cell, event){
      console.log(row);
    }
  },
};
</script>
<style lang="scss" scoped>
.main {
  padding: 6px;
  // border:3px solid #96c2f1;
  height: 200px;
  // margin-top: -20px;
  padding-left: 40px;
  background: url(../../assets/img/tunneling/dataBg.png) no-repeat;
  background-size: 100%;
}
.table-wrapper {
  height: 80%;
  // margin-top: 10px;
  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: rgba(9, 12, 14, 0.2);
    color: #fff;
  }
} /* 删除表格下横线 */
.table-wrapper ::v-deep .el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
  border: none;
}
.table-wrapper ::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  border: none;
}
.table-wrapper ::v-deep .el-table tr {
  background-color: transparent !important;
  border: none;
}
.table-wrapper ::v-deep .el-table tr:hover {
  cursor:pointer;
}
.table-wrapper ::v-deep .el-table th {
  background-color: transparent !important;
  border: none;
  color: #4adefe;
  font-size: 16px;
}
.table-wrapper ::v-deep .el-table td,
.el-table th.is-leaf {
  background-color: transparent !important;
  color: #f3db5c;
  font-size: 15px;
  border: none;
}
.title {
  margin-left: -10px;
  font-size: 16px;
  color: #4adefe;
}
.table-wrapper ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
</style>