From 98a2b24c89e81a5aacdcbd6b739fef422adf17dd Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期五, 29 三月 2024 09:57:55 +0800
Subject: [PATCH] 代码更新

---
 src/views/maintenance/systemMonitoring.vue |  201 +++++++++++++++++++++++---------------------------
 1 files changed, 93 insertions(+), 108 deletions(-)

diff --git a/src/views/maintenance/systemMonitoring.vue b/src/views/maintenance/systemMonitoring.vue
index 649ea4a..abdc145 100644
--- a/src/views/maintenance/systemMonitoring.vue
+++ b/src/views/maintenance/systemMonitoring.vue
@@ -1,72 +1,40 @@
 <template>
   <div class="systemMonitoring_box">
-    <My-bread
-      :list="[
-        `${$t('operatManage.operatManage')}`,
-        `${$t('operatManage.systemMonitoring')}`,
-      ]"
-    ></My-bread>
+    <My-bread :list="[
+      `${$t('operatManage.operatManage')}`,
+      `${$t('operatManage.systemMonitoring')}`,
+    ]"></My-bread>
     <el-divider />
     <div class="content_Box">
       <div class="cloumn_Box1">
         <div class="flex_Box1 subpage_Div">
           <el-tabs v-model="activeName" @tab-click="handleClick">
-            <el-tab-pane
-              :label="$t('operatManage.systemMonitoringObj.abnormalResources')"
-              name="first"
-            >
+            <el-tab-pane :label="$t('operatManage.systemMonitoringObj.abnormalResources')" name="first">
               <div class="table_b">
                 <el-table :data="resInfo" style="width: 100%; height: 100%">
-                  <el-table-column
-                    prop="id"
-                    :label="$t('operatManage.systemMonitoringObj.resourceID')"
-                  >
+                  <el-table-column prop="id" :label="$t('operatManage.systemMonitoringObj.resourceID')">
                   </el-table-column>
-                  <el-table-column
-                    prop="name"
-                    :label="$t('operatManage.systemMonitoringObj.resourceName')"
-                  >
+                  <el-table-column prop="name" :label="$t('operatManage.systemMonitoringObj.resourceName')">
                   </el-table-column>
-                  <el-table-column
-                    prop="bak"
-                    :label="
-                      $t('operatManage.systemMonitoringObj.resourceState')
-                    "
-                  >
+                  <el-table-column prop="bak" :label="$t('operatManage.systemMonitoringObj.resourceState')
+      ">
                   </el-table-column>
-                  <el-table-column
-                    prop="createTime"
-                    :label="$t('operatManage.systemMonitoringObj.abnormaltime')"
-                    show-overflow-tooltip
-                  >
+                  <el-table-column prop="createTime" :label="$t('operatManage.systemMonitoringObj.abnormaltime')"
+                    show-overflow-tooltip>
                   </el-table-column>
                 </el-table>
               </div>
             </el-tab-pane>
-            <el-tab-pane
-              :label="
-                $t('operatManage.systemMonitoringObj.serviceResourceStatus')
-              "
-              name="second"
-            >
+            <el-tab-pane :label="$t('operatManage.systemMonitoringObj.serviceResourceStatus')
+      " name="second">
               <div id="resUseChart" style="width: 101vh; height: 30vh"></div>
             </el-tab-pane>
-            <el-tab-pane
-              :label="$t('operatManage.systemMonitoringObj.userloginStatus')"
-              name="third"
-            >
+            <el-tab-pane :label="$t('operatManage.systemMonitoringObj.userloginStatus')" name="third">
               <div id="userLoginChart" style="width: 101vh; height: 30vh"></div>
             </el-tab-pane>
-            <el-tab-pane
-              :label="
-                $t('operatManage.systemMonitoringObj.resourceOperationStatus')
-              "
-              name="fourth"
-            >
-              <div
-                id="operateCountChart"
-                style="width: 101vh; height: 30vh"
-              ></div>
+            <el-tab-pane :label="$t('operatManage.systemMonitoringObj.resourceOperationStatus')
+      " name="fourth">
+              <div id="operateCountChart" style="width: 101vh; height: 30vh"></div>
             </el-tab-pane>
           </el-tabs>
         </div>
@@ -78,27 +46,13 @@
           </div>
           <div class="table_b">
             <el-table :data="tableData" style="width: 100%">
-              <el-table-column
-                align="center"
-                type="index"
-                :label="$t('operatManage.ELM.index')"
-                width="100px"
-              />
-              <el-table-column
-                prop="uid"
-                :label="$t('operatManage.systemMonitoringObj.userID')"
-              >
+              <el-table-column align="center" type="index" :label="$t('operatManage.ELM.index')" width="100px" />
+              <el-table-column prop="uid" :label="$t('operatManage.systemMonitoringObj.userID')">
               </el-table-column>
-              <el-table-column
-                prop="uname"
-                :label="$t('operatManage.systemMonitoringObj.username')"
-              >
+              <el-table-column prop="uname" :label="$t('operatManage.systemMonitoringObj.username')">
               </el-table-column>
-              <el-table-column
-                prop="loginTime"
-                :label="$t('operatManage.systemMonitoringObj.onlineTime')"
-                fixed="right"
-              >
+              <el-table-column prop="loginTime" :label="$t('operatManage.systemMonitoringObj.onlineTime')"
+                fixed="right">
               </el-table-column>
             </el-table>
           </div>
@@ -118,17 +72,15 @@
                 <div class="height_title">
                   <label>
                     {{
-                      $t("operatManage.systemMonitoringObj.haveBeenUsed")
-                    }}</label
-                  >
+      $t("operatManage.systemMonitoringObj.haveBeenUsed")
+    }}</label>
                   <p>{{ memInfo.use }}</p>
                 </div>
                 <div class="height_title">
                   <label>
                     {{
-                      $t("operatManage.systemMonitoringObj.usageRate")
-                    }}</label
-                  >
+      $t("operatManage.systemMonitoringObj.usageRate")
+    }}</label>
                   <p>{{ memInfo.usage }}</p>
                 </div>
               </div>
@@ -136,17 +88,15 @@
                 <div class="height_title">
                   <label>
                     {{
-                      $t("operatManage.systemMonitoringObj.totalMemory")
-                    }}</label
-                  >
+      $t("operatManage.systemMonitoringObj.totalMemory")
+    }}</label>
                   <p>{{ memInfo.totalMem }}</p>
                 </div>
                 <div class="height_title">
                   <label>
                     {{
-                      $t("operatManage.systemMonitoringObj.remainingMemory")
-                    }}</label
-                  >
+      $t("operatManage.systemMonitoringObj.remainingMemory")
+    }}</label>
                   <p>{{ memInfo.remainMem }}</p>
                 </div>
               </div>
@@ -163,10 +113,7 @@
               {{ $t("operatManage.systemMonitoringObj.cpuMonitoring") }}
             </div>
           </div>
-          <div
-            id="Sys_cpu_chart"
-            style="width: 100%; height: 86%; margin-top: 8%"
-          ></div>
+          <div id="Sys_cpu_chart" style="width: 100%; height: 86%; margin-top: 8%"></div>
         </div>
         <div class="flex_Box subpage_Div">
           <div style="width: 100%; height: 34px">
@@ -181,8 +128,8 @@
                 <div class="ycTltle">{{ resInfoCount }}</div>
                 <div class="heteroTitle">
                   {{
-                    $t("operatManage.systemMonitoringObj.numberOfExceptions")
-                  }}
+      $t("operatManage.systemMonitoringObj.numberOfExceptions")
+    }}
                 </div>
               </div>
             </div>
@@ -633,12 +580,15 @@
           },
         ],
       };
+      var dome = document.getElementById("shuiwen")
+      if (dome) {
+        let myChart1 = this.$echarts.init(dome);
+        myChart1.setOption(options);
+        window.addEventListener("resize", function () {
+          myChart1.resize();
+        });
+      }
 
-      let myChart1 = this.$echarts.init(document.getElementById("shuiwen"));
-      myChart1.setOption(options);
-      window.addEventListener("resize", function () {
-        myChart1.resize();
-      });
     },
     lineChart3() {
       var data = [
@@ -803,6 +753,24 @@
       );
       myChart4.setOption(option);
     },
+    isJSON(str) {
+      if (typeof str == 'string') {
+        try {
+          var obj = JSON.parse(str);
+          if (typeof obj == 'object' && obj) {
+            return true;
+          } else {
+            return false;
+          }
+
+        } catch (e) {
+
+          return false;
+        }
+      }
+
+    }
+
   },
   created() {
     if (Window.ws != null) {
@@ -814,19 +782,22 @@
     }
 
     Window.ws = new WebSocket(socketUrl);
-    Window.ws.option = () => {};
+    Window.ws.option = () => { };
     var that = this;
     Window.ws.onmessage = (msg) => {
       // console.log('鏉ヨ嚜鏈嶅姟鍣ㄧ鐨勬暟鎹細' + msg.data); //鐩戝惉鎺ュ彈鏉ヨ嚜鏈嶅姟绔殑淇℃伅
-      var data = JSON.parse(msg.data);
-      console.log(data);
-      if (data.userInfo != undefined) {
-        that.SetTableData1(data);
-      } else if (data.resInfo != undefined) {
-        that.SetTableData2(data);
-      } else if (data.operateCount != undefined) {
-        that.SetTableData3(data);
+      var obj = this.isJSON(msg.data);
+      if (obj) {
+        var data = JSON.parse(msg.data);
+        if (data.userInfo != undefined) {
+          that.SetTableData1(data);
+        } else if (data.resInfo != undefined) {
+          that.SetTableData2(data);
+        } else if (data.operateCount != undefined) {
+          that.SetTableData3(data);
+        }
       }
+
     };
   },
 
@@ -853,10 +824,12 @@
   .table_b .el-table /deep/ .el-table__expanded-cell {
     background-color: transparent !important;
   }
+
   .table_b .el-table /deep/ th,
   .table_b .el-table /deep/ tr {
     background-color: transparent !important;
   }
+
   .content_Box {
     width: 100%;
     height: 90%;
@@ -864,12 +837,14 @@
     display: flex;
     flex-direction: column;
     justify-content: space-around;
+
     .cloumn_Box {
       width: 100%;
       height: 38%;
 
       display: flex;
       justify-content: space-between;
+
       .flex_Box {
         width: 30.5%;
         height: 88%;
@@ -881,37 +856,37 @@
           width: 46px;
           height: 20px;
           float: left;
-          background: url("../../assets/img/systemMonitoring/鍥惧眰 38.png")
-            no-repeat;
+          background: url("../../assets/img/systemMonitoring/鍥惧眰 38.png") no-repeat;
           background-size: 100% 100%;
         }
+
         .image2 {
           width: 34px;
           height: 34px;
           float: left;
-          background: url("../../assets/img/systemMonitoring/鍥惧眰 37.png")
-            no-repeat;
+          background: url("../../assets/img/systemMonitoring/鍥惧眰 37.png") no-repeat;
           background-size: 100% 100%;
         }
+
         .image3 {
           width: 32px;
           height: 32px;
           float: left;
-          background: url("../../assets/img/systemMonitoring/鍥惧眰 40.png")
-            no-repeat;
+          background: url("../../assets/img/systemMonitoring/鍥惧眰 40.png") no-repeat;
           background-size: 100% 100%;
         }
       }
+
       .ycsBox {
         width: 495px;
         height: 182px;
-        background: url("../../assets/img/systemMonitoring/鍥惧眰 39.png")
-          no-repeat;
+        background: url("../../assets/img/systemMonitoring/鍥惧眰 39.png") no-repeat;
         background-size: 100% 100%;
         border: 1px;
         display: flex;
         align-items: center;
       }
+
       .ycContent {
         width: 100%;
         padding: 1%;
@@ -921,11 +896,13 @@
         justify-content: center;
       }
     }
+
     .imageTitle {
       float: left;
 
       margin-left: 10px;
     }
+
     .ycTltle {
       width: 100%;
       margin-top: 8%;
@@ -935,6 +912,7 @@
       color: #009cff;
       text-align: center;
     }
+
     .heteroTitle {
       width: 100%;
       text-align: center;
@@ -948,6 +926,7 @@
 
       // text-align: center;
     }
+
     .top_Box1 {
       width: 96%;
       height: 91%;
@@ -955,17 +934,20 @@
       margin-left: 4%;
       display: flex;
       justify-content: space-between;
+
       .top_box_left {
         width: 59%;
         height: 100%;
         display: flex;
         justify-content: space-between;
+
         .left_title {
           width: 48%;
           height: 100%;
           display: flex;
           flex-direction: column;
           justify-content: space-around;
+
           .height_title {
             width: 100%;
             height: 48%;
@@ -977,6 +959,7 @@
           }
         }
       }
+
       .top_box_right {
         width: 39%;
         height: 100%;
@@ -989,6 +972,7 @@
 
       display: flex;
       justify-content: space-between;
+
       .flex_Box1 {
         width: 64%;
         height: 92%;
@@ -996,6 +980,7 @@
 
         border-radius: 5px;
       }
+
       .flex_Box {
         width: 30.5%;
         height: 92%;

--
Gitblit v1.9.3