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

/* 告警区 */
<template>
  <gy-card
    title="告警区"
    area-style="alarm"
    circle-style="green"
    content-style="25"
  >
    <table class="ToolBar">
      
      <tr>
        
        <td width="150px">时间</td>
        <td idth="400px">描述</td>
        <td width="50px">确认</td>
        
      </tr>
      
    </table>

    <table class="Tables">
      <tr v-for="v in values" :key="v">
        <div>
        <td width="150px">{{ v.lastUpdateTime }}</td>
        <td width="400px">{{ v.alertText }}</td>
        <td width="50px"><input type="checkbox" disabled="disabled"/></td>
        </div>
      </tr>
    </table>
  </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) {
        this.values.push(val[v]);
      }
      console.log(val);
    },
  },
};
</script>
<style scoped>
div{
  background: #292929;
}
td{
  
  padding:auto;
}
.ToolBar{
position:absolute;
right:12px;
width:596px;
text-align:center;
z-index:2;
font-size:14px;
height: 28px;
margin-top:-2px;
background: #292929;
}
.Tables{
  font-size:14px;
  width:600px;
  padding-top: 28px;
text-align:center;
}
</style>