管道基础大数据平台系统开发-【前端】-新系統界面
Surpriseplus
2022-11-16 e955e0e34f52d3a8f66354f2a75b762791f918b1
src/views/maintenance/systemMonitoring.vue
@@ -12,7 +12,9 @@
        <div class="flex_Box">
          <div style="width: 100%; height: 20px">
            <div class="image1"></div>
            <div class="imageTitle">内存监控</div>
            <div class="imageTitle">
              {{ $t('operatManage.systemMonitoringObj.memoryMonitoring') }}
            </div>
          </div>
          <div class="top_Box1">
            <div class="top_box_left">
@@ -26,7 +28,11 @@
                  <p>{{ memInfo.use }}</p>
                </div>
                <div class="height_title">
                  <label>使用率</label>
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.usageRate')
                    }}</label
                  >
                  <p>{{ memInfo.usage }}</p>
                </div>
              </div>
@@ -40,7 +46,11 @@
                  <p>{{ memInfo.totalMem }}</p>
                </div>
                <div class="height_title">
                  <label>剩余内存</label>
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.remainingMemory')
                    }}</label
                  >
                  <p>{{ memInfo.remainMem }}</p>
                </div>
              </div>
@@ -53,7 +63,9 @@
        <div class="flex_Box">
          <div>
            <div class="image2"></div>
            <div style="line-height: 32px" class="imageTitle">CPU监控</div>
            <div style="line-height: 32px" class="imageTitle">
              {{ $t('operatManage.systemMonitoringObj.cpuMonitoring') }}
            </div>
          </div>
          <div
            id="Sys_cpu_chart"
@@ -63,24 +75,14 @@
        <div class="flex_Box">
          <div style="width: 100%; height: 34px">
            <div class="image3"></div>
            <div style="line-height: 32px" class="imageTitle">异常数</div>
            <div style="line-height: 32px" class="imageTitle">
              {{ $t('operatManage.systemMonitoringObj.heteroconstant') }}
            </div>
          </div>
          <div class="ycsBox">
            <div class="ycTltle">{{ resInfoCount }}</div>
            <div
              style="
                width: 110px;
                height: 16px;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 300;
                color: #ffffff;
                line-height: 49px;
                margin-left: 51px;
                margin-top: 20px;
              "
            >
              系统异常个数
            <div class="heteroTitle">
              {{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
            </div>
          </div>
        </div>
@@ -114,16 +116,28 @@
                >
                </el-table-column> </el-table
            ></el-tab-pane>
            <el-tab-pane label="服务资源状态" name="second">
            <el-tab-pane
              :label="
                $t('operatManage.systemMonitoringObj.serviceResourceStatus')
              "
              name="second"
            >
              <div id="resUseChart" style="width: 995px; height: 310px"></div>
            </el-tab-pane>
            <el-tab-pane label="用户登录状态" name="third">
            <el-tab-pane
              :label="$t('operatManage.systemMonitoringObj.userloginStatus')"
              name="third"
            >
              <div
                id="userLoginChart"
                style="width: 995px; height: 310px"
              ></div>
            </el-tab-pane>
            <el-tab-pane label="资源操作状态" name="fourth"
            <el-tab-pane
              :label="
                $t('operatManage.systemMonitoringObj.resourceOperationStatus')
              "
              name="fourth"
              ><div
                id="operateCountChart"
                style="width: 995px; height: 310px"
@@ -133,7 +147,9 @@
        </div>
        <div class="flex_Box">
          <div>
            <div style="line-height: 32px" class="imageTitle">在线人员</div>
            <div style="line-height: 32px" class="imageTitle">
              {{ $t('operatManage.systemMonitoringObj.onlinePersonnel') }}
            </div>
          </div>
          <el-table :data="tableData" style="width: 100%" height="90%">
            <el-table-column
@@ -855,6 +871,19 @@
        margin-top: 61px;
        margin-left: 88px;
      }
      .heteroTitle {
        width: 100%;
        height: 16px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 300;
        color: #ffffff;
        line-height: 49px;
        margin-top: 20px;
        text-align: center;
      }
    }
    .imageTitle {
      float: left;