增加心跳检测，修改实时报警表格展示字段，修复预警分析、原始报警分析、报警配置功能bug

src/components/alarmPopupa/index.vue

@@ -61,7 +61,6 @@
 </template>
 <script>
 import { confirmAlart, getAlartConfig, alarm_history } from "@api/api.js";
-import { h } from "vue";
 import { ElNotification } from "element-plus";
 import dayJs from "dayjs";
 export default {
@@ -101,6 +100,41 @@ export default {
           deviceType: "windturbine",
         },
       ],
+
+      // websocket相关
+      socketObj: "", // websocket实例对象
+      //心跳检测
+      heartCheck: {
+        vueThis: this, // vue实例
+        timeout: 30000, // 超时时间
+        timeoutObj: null, // 计时器对象——向后端发送心跳检测
+        serverTimeoutObj: null, // 计时器对象——等待后端心跳检测的回复
+        // 心跳检测重置
+        reset: function () {
+          clearTimeout(this.timeoutObj);
+          clearTimeout(this.serverTimeoutObj);
+          return this;
+        },
+        // 心跳检测启动
+        start: function () {
+          this.timeoutObj && clearTimeout(this.timeoutObj);
+          this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
+          this.timeoutObj = setTimeout(() => {
+            // 这里向后端发送一个心跳检测，后端收到后，会返回一个心跳回复
+            this.vueThis.socketObj.send("HeartBeat");
+            console.log("发送心跳检测");
+            this.serverTimeoutObj = setTimeout(() => {
+              // 如果超过一定时间还没重置计时器，说明websocket与后端断开了
+              console.log("未收到心跳检测回复");
+              // 关闭WebSocket
+              this.vueThis.socketObj.close();
+            }, this.timeout);
+          }, this.timeout);
+        },
+      },
+      socketReconnectTimer: null, // 计时器对象——重连
+      socketReconnectLock: false, // WebSocket重连的锁
+      socketLeaveFlag: false, // 离开标记（解决 退出登录再登录 时出现的 多次相同推送 问题，出现的本质是多次建立了WebSocket连接）
     };
   },
 
@@ -120,9 +154,10 @@ export default {
                 this.pushALarmItem(ele);
               });
             });
-            this.webSocketInit(
-              `ws://10.81.3.154:6014/websocket/${this.$store.state.user.userId}_${this.$store.state.user.authToken}`
-            );
+            // this.webSocketInit(
+            //   `ws://10.81.3.154:6014/websocket/${this.$store.state.user.userId}_${this.$store.state.user.authToken}`
+            // );
+            this.createWebSocket();
           })
           .catch(() => {
             requestResult.forEach((ele, index) => {
@@ -156,7 +191,8 @@ export default {
   },
 
   unmounted() {
-    this.ws?.close();
+    this.socketLeaveFlag = true;
+    this.socketObj.close();
   },
 
   methods: {
@@ -354,34 +390,130 @@ export default {
       return alarm_history(params, 12000);
     },
 
-    webSocketInit(serveIP) {
-      if ("WebSocket" in window) {
-        this.ws = new WebSocket(serveIP);
-        this.ws.onmessage = (res) => {
-          let alarmItem = JSON.parse(res.data);
-          if (alarmItem) {
-            this.pushALarmItem(alarmItem);
-          }
-        };
-
-        this.ws.onclose = () => {
-          this.ws = null;
-        };
-
-        this.ws.onopen = () => {
-          this.timeConnect = 0;
-          console.log("WebSocket 服务已建立");
-        };
-
-        this.ws.onerror = () => {
-          this.reconnect(serveIP);
-        };
+    // websocket启动
+    createWebSocket() {
+      let webSocketLink = `ws://10.81.3.154:6014/websocket/${this.$store.state.user.userId}_${this.$store.state.user.authToken}`; // webSocket地址
+      //   let webSocketLink = `ws://192.168.1.108:6014/websocket/${this.$store.state.user.userId}_${this.$store.state.user.authToken}`; // webSocket地址
+      try {
+        if ("WebSocket" in window) {
+          this.socketObj = new WebSocket(webSocketLink);
+        }
+        // websocket事件绑定
+        this.socketEventBind();
+      } catch (e) {
+        console.log("catch" + e);
+        // websocket重连
+        this.socketReconnect();
+      }
+    },
+    // websocket事件绑定
+    socketEventBind() {
+      // 连接成功建立的回调
+      this.socketObj.onopen = this.onopenCallback;
+      // 连接发生错误的回调
+      this.socketObj.onerror = this.onerrorCallback;
+      // 连接关闭的回调
+      this.socketObj.onclose = this.oncloseCallback;
+      // 向后端发送数据的回调
+      this.socketObj.onsend = this.onsendCallback;
+      // 接收到消息的回调
+      this.socketObj.onmessage = this.getMessageCallback;
+
+      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
+      window.onbeforeunload = () => {
+        this.socketObj.close();
+      };
+    },
+    // websocket重连
+    socketReconnect() {
+      if (this.socketReconnectLock) {
+        return;
+      }
+      this.socketReconnectLock = true;
+      this.socketReconnectTimer && clearTimeout(this.socketReconnectTimer);
+      this.socketReconnectTimer = setTimeout(() => {
+        console.log("WebSocket:重连中...");
+        this.socketReconnectLock = false;
+        // websocket启动
+        this.createWebSocket();
+      }, 4000);
+    },
+    // 连接成功建立的回调
+    onopenCallback: function (event) {
+      console.log("WebSocket:已连接");
+      // 心跳检测重置
+      this.heartCheck.reset().start();
+    },
+    // 连接发生错误的回调
+    onerrorCallback: function (event) {
+      console.log("WebSocket:发生错误");
+      // websocket重连
+      this.socketReconnect();
+    },
+    // 连接关闭的回调
+    oncloseCallback: function (event) {
+      console.log("WebSocket:已关闭");
+      // 心跳检测重置
+      this.heartCheck.reset();
+      if (!this.socketLeaveFlag) {
+        // 没有离开——重连
+        // websocket重连
+        this.socketReconnect();
       } else {
-        this.BASE.showMsg({
-          msg: "当前浏览器不支持 WebSocket ，请更换浏览器后重试",
-        });
+        this.socketObj.close();
+      }
+    },
+    // 向后端发送数据的回调
+    onsendCallback: function () {
+      console.log("WebSocket:发送信息给后端");
+    },
+    // 接收到消息的回调
+    getMessageCallback: function (msg) {
+      //   console.log(msg);
+      if (Object.keys(msg) && msg.data == "ok") {
+        // 心跳回复——心跳检测重置
+        // 收到心跳检测回复就说明连接正常
+        console.log("收到心跳检测回复");
+        // 心跳检测重置
+        this.heartCheck.reset().start();
+      } else {
+        // 普通推送——正常处理
+        console.log("收到推送消息");
+        // 相关处理
+        let alarmItem = JSON.parse(msg.data);
+        if (alarmItem) {
+          this.pushALarmItem(alarmItem);
+        }
       }
     },
+    // webSocketInit(serveIP) {
+    //   if ("WebSocket" in window) {
+    //     this.ws = new WebSocket(serveIP);
+    //     this.ws.onmessage = (res) => {
+    //       let alarmItem = JSON.parse(res.data);
+    //       if (alarmItem) {
+    //         this.pushALarmItem(alarmItem);
+    //       }
+    //     };
+
+    //     this.ws.onclose = () => {
+    //       this.ws = null;
+    //     };
+
+    //     this.ws.onopen = () => {
+    //       this.timeConnect = 0;
+    //       console.log("WebSocket 服务已建立");
+    //     };
+
+    //     this.ws.onerror = () => {
+    //       this.reconnect(serveIP);
+    //     };
+    //   } else {
+    //     this.BASE.showMsg({
+    //       msg: "当前浏览器不支持 WebSocket ，请更换浏览器后重试",
+    //     });
+    //   }
+    // },
 
     pushALarmItem(alarmItem) {
       const configItem = this.getConfigItem(alarmItem.rank);

src/pages/alarmConfig/bj_windturbine/windturbine.vue

@@ -64,7 +64,7 @@
           class="mr10"
           style="width: 150px"
           :placeholder="
-            query.alarmType == 'windturbine' ? '全部场站' : '全部升压站'
+            query.alarmType == 'booststation' ? '全部升压站' : '全部场站'
           "
           popper-class="select"
           @change="changeStation"
@@ -77,7 +77,7 @@
           ></el-option>
         </el-select>
         <el-select
-          v-if="query.alarmType == 'windturbine'"
+          v-if="query.alarmType != 'booststation'"
           v-model="query.modelId"
           clearable
           class="mr10"
@@ -104,9 +104,16 @@
         >
       </div>
     </el-row>
-    <el-table :data="state.tableData" :highlight-current-row="true" border>
+    <el-table
+      :data="state.tableData"
+      :highlight-current-row="true"
+      border
+      height="calc(100% - 52px - 42px)"
+      width="100%"
+    >
       <el-table-column
-        v-for="item in query.alarmType == 'windturbine'
+        v-for="item in query.alarmType == 'windturbine' ||
+        query.alarmType == 'inverter'
           ? state.tableHeader
           : state.tableHeader1"
         :key="item.code"
@@ -133,68 +140,6 @@
           </span>
         </template>
       </el-table-column>
-      <!-- <el-table-column label="序列号" align="center" prop="id" />
-      <el-table-column label="统一编码" align="center" prop="uniformCode">
-        <template #default="scope">{{
-          // ednaValueConvert(scope.row.ednaValue)
-          scope.row.uniformCode
-        }}</template>
-      </el-table-column>
-      <el-table-column
-        label="名称"
-        align="left"
-        prop="chineseText"
-        width="180"
-      />
-      <el-table-column label="停机类型" align="center" prop="characteristic" />
-      <el-table-column label="设备型号" align="center" prop="modelId" />
-      <el-table-column label="报警类型" align="center" prop="warningTypeId" />
-      <el-table-column label="故障编码" align="center" prop="faultCode" />
-      <el-table-column label="报警级别" align="center" prop="levelId">
-        <template #default="scope">{{
-          levelIdConvert(scope.row.levelId)
-        }}</template>
-      </el-table-column>
-      <el-table-column
-        label="报警分类"
-        align="center"
-        prop="warningClassIfyId"
-        min-width="50"
-      >
-        <template #default="scope">{{
-          warningClassIfyIdConvert(scope.row.warningClassIfyId)
-        }}</template>
-      </el-table-column>
-      <el-table-column
-        label="是否可以复位"
-        align="center"
-        prop="isreset"
-        min-width="50"
-      >
-        <template #default="scope">{{
-          isresetConvert(scope.row.isreset)
-        }}</template>
-      </el-table-column>
-      <el-table-column
-        label="是否启用"
-        align="center"
-        prop="display"
-        min-width="50"
-      >
-        <template #default="scope">{{
-          scope.row.enabled == 1 ? "是" : "否"
-        }}</template>
-      </el-table-column>
-      <el-table-column
-        label="关联部件"
-        align="center"
-        prop="relatedParts"
-        min-width="50"
-      >
-        <template #default="scope">
-          <span>{{ relatePartConvert(scope.row.relatedParts) }}</span>
-        </template>
-      </el-table-column> -->
       <el-table-column label="操作" align="center" width="100">
         <template #default="scope">
           <el-button
@@ -254,6 +199,7 @@ const store = useStore();
 onMounted(() => {
   getWpArray();
   getequipmentmodel_list();
+  getData();
 });
 const query = reactive({
   pageNum: 1,
@@ -271,10 +217,10 @@ const state = reactive({
   form: {},
   tableHeader: [
     { title: "编码", code: "id" },
-    { title: "场站", code: "stationName", width: "100" },
-    // { title: "设备", code: "deviceId", width: "100" },
+    { title: "场站", code: "stationName" },
+    // { title: "设备", code: "deviceId", },
     { title: "机型", code: "modelId" },
-    { title: "报警描述", code: "description", width: "150" },
+    { title: "报警描述", code: "description" },
     { title: "设备部件", code: "componentsName" },
     { title: "特性", code: "characteristic" },
     { title: "设备类型", code: "deviceType" },
@@ -286,12 +232,13 @@ const state = reactive({
   tableHeader1: [
     { title: "编码", code: "id" },
     { title: "升压站", code: "stationName" },
-    { title: "规则名称", code: "name" },
-    { title: "表达式", code: "expression" },
-    { title: "描述", code: "description" },
+    // { title: "规则名称", code: "name" },
+    // { title: "表达式", code: "expression" },
+
     { title: "类型", code: "alarmType" },
     // { title: "级别", code: "rank" },
     { title: "是否启用", code: "enable" },
+    { title: "描述", code: "description" },
   ],
 });
 // 机型
@@ -303,7 +250,10 @@ const getequipmentmodel_list = async () => {
 const stationList = ref([]);
 const categorychanged = async (value) => {
   query.alarmType = value;
+  query.wpId = "";
+  query.modelId = "";
   getWpArray();
+  getData();
 };
 const getWpArray = async () => {
   const { data } = await getWpList(query.alarmType);
@@ -460,7 +410,7 @@ const alarmTypeConvert = (type, val) => {
       return "风机";
     } else if (val === "booststation") {
       return "升压站";
-    } else if (val === "booststation") {
+    } else if (val === "inverter") {
       return "光伏";
     } else if (val === "custom") {
       return "自定义";
@@ -470,7 +420,7 @@ const alarmTypeConvert = (type, val) => {
       return "风机";
     } else if (val === "booststation") {
       return "升压站";
-    } else if (val === "booststation") {
+    } else if (val === "inverter") {
       return "光伏";
     }
   }
@@ -626,7 +576,18 @@ const relatePartConvert = (val) => {
   }
 };
 </script>
-<style scoped>
+<style scoped lang="scss">
+.el-card ::v-deep {
+  height: calc(100% - 1px);
+  width: 100%;
+  .el-card__body {
+    height: calc(100% - 40px);
+    width: calc(100% - 40px);
+    .pagination {
+      margin-bottom: 0px;
+    }
+  }
+}
 .mr10 {
   margin-right: 10px;
 }

src/pages/alarmConfig/bj_windturbine/windturbine_components.vue

@@ -20,6 +20,10 @@
           @change="
             (res) => {
               dialogOptions.stationId = '';
+              dialogOptions.characteristic =
+                dialogOptions.deviceType == 'booststation'
+                  ? '报警'
+                  : '正常停机';
               checkRules();
               getWpList();
             }
@@ -91,7 +95,9 @@
           placeholder="请选择"
         >
           <el-option
-            v-for="item in characteristicArray"
+            v-for="item in dialogOptions.deviceType == 'booststation'
+              ? characteristicArray1
+              : characteristicArray"
             :key="item"
             :label="item"
             :value="item"
@@ -194,9 +200,7 @@ export default {
     },
     form: {
       type: Object,
-      default: () => {
-        return {};
-      },
+      default: () => {},
     },
   },
 
@@ -210,7 +214,7 @@ export default {
         modelId: "",
         uniformCode: "",
         nemCode: "",
-        characteristic: "正常停机",
+        characteristic: "",
         description: "",
         rank: 1,
         tagId: "",
@@ -283,7 +287,28 @@ export default {
       ],
       wpArray: [],
       modelArray: [],
-      characteristicArray: ["正常停机", "正常启动", "快速停机", "紧急停机"],
+      characteristicArray: [
+        "安全链停机",
+        "启动禁止",
+        "报警",
+        "手动停机",
+        "安全停机",
+        "禁止启动",
+        "电网故障",
+        "电网停机故障",
+        "记录",
+        "紧急停机",
+        "变桨停机",
+        "正常停机",
+        "偏航停机",
+        "报警记录",
+        "日志",
+        "正常停机故障",
+        "电网故障停机",
+        "快速停机",
+        "总故障",
+      ],
+      characteristicArray1: ["动作", "事故", "报警"],
       levelArray: [
         { id: 1, label: "低级" },
         { id: 2, label: "低中级" },
@@ -425,7 +450,8 @@ export default {
         stationId: "",
         modelId: "",
         uniformCode: "",
-        characteristic: "正常停机",
+        characteristic:
+          this.dialogOptions.deviceType == "booststation" ? "报警" : "正常停机",
         nemCode: "",
         description: "",
         rank: 1,
@@ -448,9 +474,10 @@ export default {
     },
     form(value) {
       this.dialogOptions = value;
+      console.log(this.dialogOptions);
       this.checkRules();
       this.getWpList();
     },
   },
 };
-</script>
+</script>

src/pages/baseData/FanDataStatisticTable.vue

@@ -3,7 +3,7 @@
   <div class="AllPage">
     <!-- 页面头部 multiple多选属性 -->
     <el-card>
-      <el-space>
+      <el-space wrap>
         <div class="search-input">
           <span class="lable">报警类型：</span>
           <el-select
@@ -38,7 +38,7 @@
             </el-option>
           </el-select>
         </div>
-        <div class="search-input">
+        <div class="search-input" v-if="state.typeVal !== 'booststation'">
           <span class="lable">型号：</span>
           <el-select
             v-model="state.modelId"
@@ -60,6 +60,7 @@
             v-model="state.components"
             multiple
             collapse-tags
+            clearable
             placeholder="全部部件"
             @change="changeComponents"
           >
@@ -72,11 +73,12 @@
             </el-option>
           </el-select>
         </div>
-        <div class="search-input">
+        <div class="search-input" v-if="state.typeVal !== 'booststation'">
           <span class="lable">报警描述：</span>
           <el-select
             v-model="state.alarmIds"
             multiple
+            clearable
             collapse-tags
             placeholder="全部描述"
           >
@@ -122,10 +124,11 @@
         :header-row-class-name="tableRowClassName"
         @cell-click="handle"
         height="100%"
+        width="100%"
       >
         <el-table-column
           prop="wtname"
-          label="风机编号"
+          label="设备编号"
           align="center"
           width="80"
         />
@@ -274,7 +277,7 @@ const state = reactive({
   dialogVisible: false,
 });
 
-const changeType = async (value) => {
+const changeType = (value) => {
   state.typeVal = value;
   getWpArray();
 };
@@ -282,6 +285,14 @@ const changeType = async (value) => {
 const getWpArray = async () => {
   const { data } = await getWpList(state.typeVal);
   changZhanArray.value = data;
+  if (state.typeVal != "booststation") {
+    state.changZhan =
+      state.typeVal == "windturbine" ? "SXJ_KGDL_DJY_FDC_STA" : "";
+  } else {
+    state.changZhan = "";
+    state.modelId = "";
+    getTableList();
+  }
 };
 // 机型
 const getequipmentmodel_list = async () => {
@@ -316,19 +327,21 @@ const componentList = computed(() => {
 watch(
   () => [modelList, componentList],
   (val) => {
-    let arr = val.map((item) => item.value);
-    if (arr[0] && arr[0].length && arr[1] && arr[1].length) {
-      state.modelId = [arr[0][0]?.nemCode];
-      let componenDefaultSelect =
-        arr[1]?.find((ele) => {
-          return ele.nemCode === "ZZ";
-        })?.nemCode || "";
-      componenDefaultSelect
-        ? (state.components = [componenDefaultSelect])
-        : arr[1]?.[0]?.nemCode
-        ? (state.components = [arr[1]?.[0]?.nemCode])
-        : (state.components = []);
-      getAlarmId();
+    if (state.typeVal != "booststation") {
+      let arr = val.map((item) => item.value);
+      if (arr[0] && arr[0].length && arr[1] && arr[1].length) {
+        state.modelId = [arr[0][0]?.nemCode];
+        let componenDefaultSelect =
+          arr[1]?.find((ele) => {
+            return ele.nemCode === "ZZ";
+          })?.nemCode || "";
+        componenDefaultSelect
+          ? (state.components = [componenDefaultSelect])
+          : arr[1]?.[0]?.nemCode
+          ? (state.components = [arr[1]?.[0]?.nemCode])
+          : (state.components = []);
+        getAlarmId();
+      }
     }
   },
   {
@@ -346,7 +359,9 @@ function changeComponents(val) {
 }
 function changeChangzhan(val) {
   state.changZhan = val;
-  getAlarmId();
+  if (state.typeVal != "booststation") {
+    getAlarmId();
+  }
 }
 function getAlarmId() {
   GetAlarmId({
@@ -365,7 +380,7 @@ function getAlarmId() {
 }
 // 获取列表数据 调用接口
 function getTableList() {
-  if (state.components?.length || state.typeVal === "booststation") {
+  if (state.components?.length) {
     getAlarmCountList({
       stationid: state.changZhan || "",
       begin: state.starttime,

src/pages/faultDiagnosis/warning.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="AllPage">
     <el-card>
-      <el-space>
+      <el-space wrap>
         <div class="search-input">
           <span class="lable">报警类型：</span>
           <el-select
@@ -36,7 +36,7 @@
             </el-option>
           </el-select>
         </div>
-        <div class="search-input">
+        <div class="search-input" v-if="state.typeVal !== 'booststation'">
           <span class="lable">型号：</span>
           <el-select
             v-model="state.modelId"
@@ -70,7 +70,7 @@
             </el-option>
           </el-select>
         </div>
-        <div class="search-input">
+        <div class="search-input" v-if="state.typeVal !== 'booststation'">
           <span class="lable">报警描述：</span>
           <el-select
             v-model="state.alarmIds"
@@ -225,7 +225,7 @@ import {
   getWarningCountList,
   fetchModel,
   fetchRelatePartAndAlarmType,
-  GetAlarmId,
+  GetAlarmIdCustom,
   getWpList,
 } from "/@/api/api.js";
 import dayjs from "dayjs";
@@ -274,12 +274,30 @@ const state = reactive({
 
 const changeType = async (value) => {
   state.typeVal = value;
+  state.tHeard = [];
+  if (value == "windturbine") {
+    state.components = "FDJ";
+  } else {
+    state.components = "";
+  }
+  state.alarmIds = "";
+  state.alarmIdList = [];
+
+  state.tableData = [];
   getWpArray();
 };
 
 const getWpArray = async () => {
   const { data } = await getWpList(state.typeVal);
   changZhanArray.value = data;
+  if (state.typeVal != "booststation") {
+    state.changZhan =
+      state.typeVal == "windturbine" ? "SXJ_KGDL_DJY_FDC_STA" : "";
+  } else {
+    state.changZhan = "";
+    state.modelId = "";
+    // getTableList();
+  }
 };
 // 机型
 const getequipmentmodel_list = async () => {
@@ -314,19 +332,21 @@ const componentList = computed(() => {
 watch(
   () => [modelList, componentList],
   (val) => {
-    let arr = val.map((item) => item.value);
-    if (arr[0] && arr[0].length && arr[1] && arr[1].length) {
-      state.modelId = [arr[0][0]?.nemCode];
-      let componenDefaultSelect =
-        arr[1]?.find((ele) => {
-          return ele.nemCode === "ZZ";
-        })?.nemCode || "";
-      componenDefaultSelect
-        ? (state.components = [componenDefaultSelect])
-        : arr[1]?.[0]?.nemCode
-        ? (state.components = [arr[1]?.[0]?.nemCode])
-        : (state.components = []);
-      getAlarmId();
+    if (state.typeVal != "booststation") {
+      let arr = val.map((item) => item.value);
+      if (arr[0] && arr[0].length && arr[1] && arr[1].length) {
+        state.modelId = [arr[0][0]?.nemCode];
+        let componenDefaultSelect =
+          arr[1]?.find((ele) => {
+            return ele.nemCode === "FDJ";
+          })?.nemCode || "";
+        componenDefaultSelect
+          ? (state.components = [componenDefaultSelect])
+          : arr[1]?.[0]?.nemCode
+          ? (state.components = [arr[1]?.[0]?.nemCode])
+          : (state.components = []);
+        getAlarmId();
+      }
     }
   },
   {
@@ -344,21 +364,25 @@ function changeComponents(val) {
 }
 function changeChangzhan(val) {
   state.changZhan = val;
-  getAlarmId();
+  if (state.typeVal != "booststation") {
+    getAlarmId();
+  }
 }
 function getAlarmId() {
-  GetAlarmId({
+  GetAlarmIdCustom({
     components: state.components,
     modelId: state.modelId,
     wpId: state.changZhan,
   }).then(({ data }) => {
     state.alarmIdList = data;
-    state.alarmIds = [];
-    // state.alarmIds =
-    //   data.length <= 5
-    //     ? data.map((item) => item.alarmId)
-    //     : data.slice(0, 5).map((item) => item.alarmId);
-    getTableList();
+    // state.alarmIds = [];
+    state.alarmIds =
+      data.length <= 5
+        ? data.map((item) => item.alarmId)
+        : data.slice(0, 5).map((item) => item.alarmId);
+    if (state.alarmIds.length) {
+      getTableList();
+    }
   });
 }
 // 获取列表数据 调用接口

src/pages/safe/safecomponent.vue

@@ -21,17 +21,26 @@
         label="报警时间"
         width="120"
         show-overflow-tooltip
+        align="center"
       />
-      <el-table-column prop="wpName" label="场站" show-overflow-tooltip />
       <el-table-column
+        prop="wpName"
+        label="场站"
+        align="center"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        v-if="deviceType != 'booststation'"
+        align="center"
         prop="code"
-        label="风机"
+        label="设备"
         width="50"
         show-overflow-tooltip
       />
       <el-table-column
         prop="description"
         label="报警信息"
+        align="center"
         show-overflow-tooltip
       />
       <!-- <el-table-column label="级别" width="80" show-overflow-tooltip>
@@ -50,7 +59,12 @@
         </template>
       </el-table-column> -->
 
-      <el-table-column label="状态" width="75" show-overflow-tooltip>
+      <el-table-column
+        label="状态"
+        width="75"
+        align="center"
+        show-overflow-tooltip
+      >
         <template #default="scope">
           <span
             :style="`color:${
@@ -88,12 +102,14 @@
             prop="fullTsName"
             label="报警时间"
             width="150"
+            align="center"
             show-overflow-tooltip
           />
           <el-table-column
             prop="wpName"
             label="场站"
-            width="150"
+            width="180"
+            align="center"
             show-overflow-tooltip
           />
 
@@ -101,6 +117,7 @@
             prop="code"
             label="报警设备"
             width="100"
+            align="center"
             show-overflow-tooltip
           />
           <!-- <el-table-column
@@ -109,7 +126,7 @@
             width="100"
             show-overflow-tooltip
           /> -->
-          <el-table-column label="报警描述">
+          <el-table-column label="报警描述" align="center">
             <template #default="scope">
               <span
                 class="alertDescCursor"
@@ -121,6 +138,7 @@
           <el-table-column
             prop="faultCause"
             label="报警故障原因"
+            align="center"
             show-overflow-tooltip
           />
           <!-- <el-table-column
@@ -146,6 +164,7 @@
           <el-table-column
             label="报警是否解除"
             width="100"
+            align="center"
             show-overflow-tooltip
           >
             <template #default="scope">
@@ -159,7 +178,7 @@
               >
             </template>
           </el-table-column>
-          <el-table-column label="操作" width="100">
+          <el-table-column label="操作" width="100" align="center">
             <template #default="scope">
               <el-button type="text" size="small" @click="confirm(scope.row)"
                 >确认本条</el-button
@@ -397,8 +416,8 @@ export default {
   }
 }
 </style>
-<style lang="scss" >
+<style lang="scss">
 .alarmDialog {
   z-index: 1100 !important;
 }
-</style>
+</style>