project-neic/src/components/area/AlarmArea.vue

/* 告警区 */
<template>
  <gy-card
    title="告警区"
    area-style="alarm"
    circle-style="green"
    content-style="25"
  >
  <div style="padding-left:5px;padding-right:5px;">
    <el-table
      :data="values"
      height="219px"
      :header-cell-style="{
                background: 'Black',
                color: 'rgb(220,220,220)',
                padding:'5px',
                fontSize:'14px',
                'border-bottom':'solid 1px black'
              }"
      :cell-style="{ background: '#1e1e1e', color: 'rgb(220,220,220)',padding:'3px',fontSize:'12px'}"
      >
      <el-table-column
        prop="lastUpdateTime"
        align="center"
        label="时间"
        width="150">
      </el-table-column>
      <el-table-column
        prop="alertText"
        align="center"
        label="描述"
        width="380">
      </el-table-column>
      <el-table-column
        prop="address"
        align="center"
        label="确认">
        <input type="checkbox" disabled="disabled" />
      </el-table-column>
    </el-table>
    </div>
<!--     <div>
      <table class="table-main">
        <tr>
          <td width="150px">时间</td>
          <td idth="400px">描述</td>
          <td width="50px">确认</td>
        </tr>
        <tr v-for="v in values" :key="v">
          <td width="150px">{{ v.lastUpdateTime }}</td>
          <td width="400px">{{ v.alertText }}</td>
          <td width="50px"><input type="checkbox" disabled="disabled" /></td>
        </tr>
      </table>
    </div> -->
  </gy-card>
</template>

<script>
import MessageBridge from "../../assets/script/MessageBridge";
export default {
  name: "AlarmArea",
  created: function () {
    this.initData();
  },
  props: {},
  data() {
    return {
      values: new Array()
    };
  },
  methods: {
    initData() {
      var mb = MessageBridge.getInstance();
      var vs = [{ key: "/topic/fault-popup", action: this.faultMessage }];
      mb.register(vs);
    },
    faultMessage(msg) {
      var val = JSON.parse(msg);
      this.values = new Array();
      for (var v in val) {
        var vl = val[v];
        if (vl.stationId != "QS_FDC" && vl.category1 == "FJ") {
          vl.alertText = vl.windturbineName + "-" + vl.alertText;
        }
        this.values.push(vl);
      }
      console.log(val);
    },
  },
};
</script>
<style scoped>
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 8px;
  height:0px;
  background-color: black;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background-color: #292929;
  border-radius: 6px;
}
:deep(.el-table td,.el-table th){
border-bottom:2px solid black;
}
tr {
  line-height: 1.5;
  background: #1e1e1e;
  margin-bottom: 2px;
  border-radius: 5px;
}
/* .ToolBar {
  position: absolute;
  right: 12px;
  width: 586px;
  text-align: center;
  z-index: 2;
  font-size: 14px;
  height: 28px;
  margin: 5px;
  background: #1e1e1e;
} */
.table-main {
  font-size: 14px;
  width: 600px;
  text-align: center;
  background: #000000;
  margin: 5px;
  border-collapse:separate;
  border-spacing:0px 5px;
}
</style>