监控ui

heyujie

2021-10-11 ae2d855c89ca722ac7309fdf1aa6ceed370e3b95

监控ui

 src/pages/settings/views/NetSettings.vue

@@ -204,18 +204,18 @@
                <div class="p-title">前缀</div>

                <div style="display: flex; width: 100%">

                  <el-input

                    v-model="wifiForm.password"

                    v-model="ipv6Form.prefix"

                    placeholder

                    size="small"

                  ></el-input>



                  <div class="ad">

                    <i class="el-icon-remove-outline"></i>

                    <i class="el-icon-remove-outline" @click="minusPrefix"></i>

                  </div>

                  <div class="ad">

                    <i class="el-icon-circle-plus-outline"></i>

                    <i class="el-icon-circle-plus-outline" @click="+(ipv6Form.prefix)++"></i>

                  </div>

                  <div class="ad"><i class="el-icon-refresh-left"></i></div>

                  <div class="ad"><i class="el-icon-refresh-left" @click="ipv6Form.prefix=''"></i></div>

                </div>

              </el-form-item>



@@ -426,6 +426,10 @@
    this.fetchWireList();

  },

  methods: {

    minusPrefix(){

      debugger

      this.ipv6Form.prefix

    },

    switchNetCard(item) {

      if (item.active) {

        upNetCard({ ifname: item.name }).then(


 src/pages/settings/views/clusterManagement.vue

@@ -622,7 +622,7 @@
}

.cluster-guanli {

  margin: 0 auto;

  /* width: 760px; */

width: 760px; 
  padding: 0 10px;

  .btns {

    margin-top: 30px !important;


 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"
@@ -25,7 +29,11 @@
          >
            <div class="title">应用单元</div>
            <div class="subtitle">正在进行{{ 1 }}个应用单元</div>
            <span class="iconfont icon" :style="activeTab == 1 ? {} :{color:'#fff'} ">&#xe744;</span>
            <span
              class="iconfont icon"
              :style="activeTab == 1 ? {} : { color: '#fff' }"
              >&#xe744;</span
            >
          </div>
        </div>
        <div class="form-title" v-if="activeTab == 0">
@@ -37,16 +45,16 @@
          <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="名称" width="180">
              <template slot-scope="scope">
                <span class="iconfont icon">&#xe74d;</span>
                <span>{{ scope.row.desc }} </span>
              </template>
            </el-table-column>
            <el-table-column label="CPU" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.cpu.toFixed(2) }} %</span>
@@ -102,7 +110,7 @@
        </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 +127,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 +139,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 +153,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 +167,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 +185,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,7 +284,10 @@
          <span class="iconfont icon">&#xe944;</span>
          服务</span
        >
        <el-table :data="vasystemServicesData">
        <el-table :data="vasystemServicesData"
        
            class="tableBox"
        >
          <el-table-column label="名称" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
@@ -357,6 +376,7 @@
          left: "1%",
          right: "4%",
          bottom: "3%",

          containLabel: true,
          borderWidth: 2,
          borderColor: "#000",
@@ -470,8 +490,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;
          }
@@ -708,7 +727,6 @@
    color: #fff;
  }
  .el-table th.el-table__cell > .cell {
   
    text-align: center;
  }
  .tableBox {
@@ -732,6 +750,7 @@
      padding: 0 !important;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  }
  .el-tabs--top {
@@ -812,17 +831,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 +913,7 @@
  }

  .column-right {
    //overflow: hidden;
    overflow-y: hidden;
    overflow-y: auto;
    overflow-x: auto;
  }

@@ -906,8 +924,8 @@
  }

  .resize-bar {
       width: 285px;
height: 600px;
    width: 285px;
    // height: 600px;
  }

  /* 拖拽线 */
@@ -922,7 +940,7 @@
  }

  .ax_default {
   width: 270px;
    width: 270px;
    height: 70px;
    padding: 10px;
    font-size: 14px;
@@ -932,15 +950,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 +972,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 +1007,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 {