deviceManager/src/views/components/index/index4.vue

<template>
  <el-table
    :data="resData"
    class="transparentTableRow scroll"
    height="280"
    :cell-class-name="tableRowClassName"
    :cell-style="cellStyle"
    style="margin-top:10px"
  >
    <el-table-column
      show-overflow-tooltip
      min-width="20"
      v-for="item in headerData"
      :key="item.prop"
      :prop="item.prop"
      align="left"
      :label="item.name"
    ></el-table-column>
  </el-table>

</template>
<script>
export default {
  props: {
    resData: { type: Array, default: () => [] },
    headerData: { type: Array, default: () => [] },
  },
  data() {
    return {
      resData:[]
    };
  },
  mounted() {
    this.initWebSocket()
  },
  methods: {
    initWebSocket() {
      let arrData = [];
      let wsUri = "wss://iot.usky.cn:55120";
      try {
          // if (typeof MozWebSocket == 'function')
              // WebSocket = MozWebSocket;
              let websocket = new WebSocket(wsUri);
              websocket.onopen = function(evt) {
                var json = {};
                json.agentid = 'admin';
                websocket.send(JSON.stringify(json));
              };
          websocket.onclose = function(evt) {
              this.initWebSocket();
          };
          websocket.onmessage = function(evt) {
              var warningInfo = eval('(' + evt.data + ')');
          };
          websocket.onerror = function(evt) {
              (function() {})()
          };
      } catch (exception) {
          (function() {})()
      }
    },
    tableRowClassName({row, column, rowIndex, columnIndex}) {
      if (column.property === 'deathToll' && row.deathToll > 0) {
        return "death";
      }
    },
    cellStyle (row, column, rowIndex, columnIndex) {
    //列的label的名称
      if (row.column.label === "告警" || row.column.label === "离线") {
        return 'color:#2280D9' //修改的样式
      }
    },

  },
};
</script>
<style>
</style>