zhangzengfei
2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09
src/pages/systemMonitor/index/App.vue
@@ -16,7 +16,11 @@
            <div class="subtitle">
              正在进行{{ algoProcessData.length }}个算法单元
            </div>
            <span class="iconfont icon" :style="activeTab == 0 ? {} :{color:'#fff'} ">&#xe741;</span>
            <span
              class="iconfont icon"
              :style="activeTab == 0 ? {} : { color: '#fff' }"
              >&#xe741;</span
            >
          </div>
          <div
            class="tab-item"
@@ -24,8 +28,14 @@
            @click="activeTab = 1"
          >
            <div class="title">应用单元</div>
            <div class="subtitle">正在进行{{ 1 }}个应用单元</div>
            <span class="iconfont icon" :style="activeTab == 1 ? {} :{color:'#fff'} ">&#xe744;</span>
            <div class="subtitle">
              正在进行{{ appProcessData.length }}个应用单元
            </div>
            <span
              class="iconfont icon"
              :style="activeTab == 1 ? {} : { color: '#fff' }"
              >&#xe744;</span
            >
          </div>
        </div>
        <div class="form-title" v-if="activeTab == 0">
@@ -37,17 +47,17 @@
          <el-table
            :data="algoProcessData"
            style="width: 100%"
            :header-cell-style="'background: #F2F2F7;color: #333333;height: 40px;font-size: 16px;'"
            stripe
            class="tableBox"
          >
            <el-table-column
              prop="desc"
              label="名称"
              width="180"
            ></el-table-column>
            <el-table-column label="CPU" width="180">
            <el-table-column label="名称" width="231">
              <template slot-scope="scope">
                <span class="iconfont icon">&#xe74d;</span>
                <span>{{ scope.row.desc }} </span>
              </template>
            </el-table-column>
            <el-table-column label="CPU">
              <template slot-scope="scope">
                <span>{{ scope.row.cpu.toFixed(2) }} %</span>
              </template>
@@ -57,13 +67,16 @@
                <span>{{ scope.row.mem.toFixed(2) }} %</span>
              </template>
            </el-table-column>
            <el-table-column prop="disk" label="硬盘"></el-table-column>
            <!-- <el-table-column
              prop="disk"
              label="硬盘"
              width="150"
            ></el-table-column> -->
            <el-table-column label="算力">
              <template slot-scope="scope">
                <span>{{ scope.row.gpu }} M</span>
              </template>
            </el-table-column>
            <el-table-column prop="net" label="网络"></el-table-column>
          </el-table>
        </div>
@@ -76,33 +89,29 @@
          <el-table
            :data="appProcessData"
            style="width: 100%"
            :header-cell-style="{
              background: '#F2F2F7',
              color: '#333333',
              height: '40px',
            }"
            :header-cell-style="'background: #F2F2F7;color: #333333;height: 40px;font-size: 16px;'"
            stripe
            class="tableBox"
          >
            <el-table-column
              prop="desc"
              label="名称"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="cpu"
              label="CPU"
              width="180"
            ></el-table-column>
            <el-table-column prop="mem" label="内存"></el-table-column>
            <el-table-column prop="disk" label="硬盘"></el-table-column>
            <el-table-column prop="desc" label="名称"></el-table-column>
            <el-table-column prop="cpu" label="CPU">
              <template slot-scope="scope">
                <span>{{ scope.row.cpu.toFixed(2) }} %</span>
              </template>
            </el-table-column>
            <el-table-column prop="mem" label="内存">
              <template slot-scope="scope">
                <span>{{ scope.row.mem.toFixed(2) }} %</span>
              </template>
            </el-table-column>
            <!--   <el-table-column prop="disk" label="硬盘"></el-table-column>
            <el-table-column prop="gpu" label="算力"></el-table-column>
            <el-table-column prop="net" label="网络"></el-table-column>
            <el-table-column prop="net" label="网络"></el-table-column> -->
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane  name="top">
      <el-tab-pane name="top">
        <span slot="label">
          <span class="iconfont icon">&#xe743;</span>
          性能</span
@@ -119,7 +128,7 @@
              <div class="ax_default_pic color-cpu"></div>
              <div>
                <div class="ax_default_text">CPU</div>
              <div class="ax_default_subtext">{{ cpuUsedPercent }}%</div>
                <div class="ax_default_subtext">{{ cpuUsedPercent }}%</div>
              </div>
            </div>
@@ -131,8 +140,10 @@
              @click="setActiveChartItem('mem')"
            >
              <div class="ax_default_pic color-mem"></div>
              <div><div class="ax_default_text">内存</div>
              <div class="ax_default_subtext">{{ memUsedPercent }}%</div></div>
              <div>
                <div class="ax_default_text">内存</div>
                <div class="ax_default_subtext">{{ memUsedPercent }}%</div>
              </div>
            </div>
            <div
@@ -143,8 +154,10 @@
              @click="setActiveChartItem('gpu')"
            >
              <div class="ax_default_pic color-gpu"></div>
             <div> <div class="ax_default_text">算力</div>
              <div class="ax_default_subtext">{{ gpuUsedPercent }}%</div></div>
              <div>
                <div class="ax_default_text">算力</div>
                <div class="ax_default_subtext">{{ gpuUsedPercent }}%</div>
              </div>
            </div>
            <div
@@ -155,10 +168,12 @@
              @click="setActiveChartItem('net')"
            >
              <div class="ax_default_pic color-net"></div>
             <div> <div class="ax_default_text">网络</div>
              <div class="ax_default_subtext">
                {{ netSend | byteConver }} / {{ netRecive | byteConver }}
              </div></div>
              <div>
                <div class="ax_default_text">网络</div>
                <div class="ax_default_subtext">
                  {{ netSend | byteConver }} / {{ netRecive | byteConver }}
                </div>
              </div>
            </div>
            <div
@@ -171,10 +186,12 @@
              @click="setActiveChartItem('disk|' + k)"
            >
              <div class="ax_default_pic color-disk"></div>
              <div><div class="ax_default_text">磁盘 {{ k }}</div>
              <div class="ax_default_subtext">
                {{ v.info.total | byteConver }}
              </div></div>
              <div>
                <div class="ax_default_text">磁盘 {{ k }}</div>
                <div class="ax_default_subtext">
                  {{ v.info.total | byteConver }}
                </div>
              </div>
            </div>
          </div>
@@ -268,10 +285,18 @@
          <span class="iconfont icon">&#xe944;</span>
          服务</span
        >
        <el-table :data="vasystemServicesData">
        <el-table
          :data="vasystemServicesData"
          :header-cell-style="'color: #333333;height: 40px;font-size: 16px;'"
          stripe
          class="tableBox"
        >
          <el-table-column label="名称" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
              <div class="name_container">
                <span class="iconfont icon">&#xe74d;</span>
                <span>{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="status">
@@ -357,6 +382,7 @@
          left: "1%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
          borderWidth: 2,
          borderColor: "#000",
@@ -378,6 +404,7 @@
            lineStyle: {
              width: 1,
              type: "solid",
              color: "rgb(242,242,242)",
            },
          },
        },
@@ -392,6 +419,11 @@
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "rgb(242,242,242)",
            },
          },
        },
        series: [
@@ -470,8 +502,7 @@
      showProcesses()
        .then((rsp) => {
          if (rsp && rsp.success) {
            if (rsp.data.algos)
              this.algoProcessData = [...rsp.data.algos, ...rsp.data.algos];
            if (rsp.data.algos) this.algoProcessData = rsp.data.algos;
            if (rsp.data.apps) this.appProcessData = rsp.data.apps;
          }
@@ -543,13 +574,11 @@
          rsp.data.disk.forEach((d) => {
            if (d.name in this.disks) {
              this.disks[d.name].readBytes = this.disks[d.name].readBytes.slice(
                1
              );
              this.disks[d.name].readBytes =
                this.disks[d.name].readBytes.slice(1);
              this.disks[d.name].readBytes.push(d.readBytes);
              this.disks[d.name].writeBytes = this.disks[
                d.name
              ].writeBytes.slice(1);
              this.disks[d.name].writeBytes =
                this.disks[d.name].writeBytes.slice(1);
              this.disks[d.name].writeBytes.push(d.writeBytes);
            } else {
              this.disks[d.name] = {};
@@ -699,6 +728,12 @@
  box-sizing: border-box;
  background-color: #fff;
  height: 100%;
  .name_container {
    text-align: left;
    margin-left: 38%;
  }
  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border-bottom: none;
@@ -708,7 +743,6 @@
    color: #fff;
  }
  .el-table th.el-table__cell > .cell {
    text-align: center;
  }
  .tableBox {
@@ -732,6 +766,7 @@
      padding: 0 !important;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  }
  .el-tabs--top {
@@ -812,17 +847,17 @@
        margin-bottom: 4px;
      }
      .subtitle {
           font-size: 12px;
    line-height: 17px;
    z-index: 99;
    position: absolute;
        font-size: 12px;
        line-height: 17px;
        z-index: 99;
        position: absolute;
      }
      .icon{
    color: #6da3f3;
    font-size: 60px;
    position: absolute;
    bottom: 4px;
    right: 4px;
      .icon {
        color: #6da3f3;
        font-size: 60px;
        position: absolute;
        bottom: 4px;
        right: 4px;
      }
    }
    .tab-item-active {
@@ -894,8 +929,8 @@
  }
  .column-right {
    //overflow: hidden;
    overflow-y: hidden;
    background-color: #fff;
    overflow-y: auto;
    overflow-x: auto;
  }
@@ -906,8 +941,8 @@
  }
  .resize-bar {
       width: 285px;
height: 600px;
    width: 285px;
    // height: 600px;
  }
  /* 拖拽线 */
@@ -922,7 +957,7 @@
  }
  .ax_default {
   width: 270px;
    width: 270px;
    height: 70px;
    padding: 10px;
    font-size: 14px;
@@ -932,15 +967,19 @@
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    color: #333333;
  }
  .ax_default:hover {
    color: #333333;
    background: #f8f8ff;
  }
  .selected {
    // background: inherit;
    // background-color: #cde8ff;
    // border: none;
    // border-radius: 8px;
      background: inherit;
    background-color: #4E94FF;
    background: inherit;
    background-color: #4e94ff;
    border: none;
    border-radius: 8px;
    color: #fff;
@@ -950,7 +989,7 @@
    // position: absolute;
    border-width: 0px;
    width: 66px;
       height: 50px;
    height: 50px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 153, 0, 1);
    background-color: #fff;
@@ -985,15 +1024,17 @@
  .ax_default_text {
    position: relative;
    text-align: left;
  font-size: 16px;
    text-align: right;
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
  }
  .ax_default_subtext {
    font-size: 13px;
    line-height: 35px;
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
  }
  .ax_default_label {