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:'4px',
                fontSize:'14px',
                'border-bottom':'solid 1px black'
              }"
      :cell-style="{ background: '#1e1e1e', color: 'rgb(220,220,220)',padding:'3px',fontSize:'12px'}"
      @row-dblclick="itemDblclick"
      @cell-click="itemChecked"
      >
      <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"/>
      </el-table-column>
    </el-table>
    </div>
  </gy-card>
  <WindturbineDetailPages
    v-model="dialogVisible"
    :windturbine="currentWindturbine"
  ></WindturbineDetailPages>
</template>

<script>
import MessageBridge from "../../assets/script/MessageBridge";
import WindturbineDetailPages from '../area/windturbine/WindturbineDetailPages.vue'
import BackgroundData from '../../assets/script/BackgroundData'

export default {
  name: "AlarmArea",
  components:{
    WindturbineDetailPages,
  },
  created: function () {
    this.initData();
  },
  props: {},
  data() {
    return {
      values: ['-','-','-','-','-','-'],
      dialogVisible:false,
      currentWindturbine: {},
    };
  },
  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);
    },
    /* 行双击 */
    itemDblclick(row){
      if(row.category1!='FJ')return;
      this.dialogVisible = true;
      this.currentWindturbine=row;
    },
    /* 报警确认 */
    itemChecked(row, column){
      if(column.label!="确认")return;
      var bd = BackgroundData.getInstance();
      if(!bd.LoginUser){
        this.$notify({
          title: "请登录",
          message: "确认报警需要先登录！",
          type: "warning",
          position: "bottom-right",
          offset: 60,
        });
        return;
      }
      console.log(row);
    }
  },
};
</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>