代码更新

surprise

2024-03-29 98a2b24c89e81a5aacdcbd6b739fef422adf17dd

 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%;