界面修改

Surpriseplus

2023-01-17 93a38ac31615b1aa053a4440c59814ea72353945

 src/views/maintenance/systemMonitoring.vue

@@ -6,96 +6,6 @@
      ]"></My-bread>
    <el-divider />
    <div class="content_Box">
      <div class="cloumn_Box">
        <div class="flex_Box">
          <div style="width: 100%; height: 20px">
            <div class="image1"></div>
            <div class="imageTitle">
              {{ $t('operatManage.systemMonitoringObj.memoryMonitoring') }}
            </div>
          </div>
          <div class="top_Box1">
            <div class="top_box_left">
              <div class="left_title">
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.haveBeenUsed')
                    }}</label>
                  <p>{{ memInfo.use }}</p>
                </div>
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.usageRate')
                    }}</label>
                  <p>{{ memInfo.usage }}</p>
                </div>
              </div>
              <div class="left_title">
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.totalMemory')
                    }}</label>
                  <p>{{ memInfo.totalMem }}</p>
                </div>
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.remainingMemory')
                    }}</label>
                  <p>{{ memInfo.remainMem }}</p>
                </div>
              </div>
            </div>
            <div
              id="fathershuiWen"
              class="top_box_right"
            >
              <div id="shuiwen"></div>
            </div>
          </div>
        </div>
        <div class="flex_Box">
          <div>
            <div class="image2"></div>
            <div
              style="line-height: 32px"
              class="imageTitle"
            >
              {{ $t('operatManage.systemMonitoringObj.cpuMonitoring') }}
            </div>
          </div>
          <div
            id="Sys_cpu_chart"
            style="width: 100%; height: 86%; margin-top: 8%"
          ></div>
        </div>
        <div class="flex_Box">
          <div style="width: 100%; height: 34px">
            <div class="image3"></div>
            <div
              style="line-height: 32px"
              class="imageTitle"
            >
              {{ $t('operatManage.systemMonitoringObj.heteroconstant') }}
            </div>
          </div>
          <div class="ycContent">
            <div class="ycsBox">
              <div style="width:100%;height:100%">
                <div class="ycTltle">{{ resInfoCount }}</div>
                <div class="heteroTitle">
                  {{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>
      <div class="cloumn_Box1">
        <div class="flex_Box1">
          <el-tabs
@@ -207,6 +117,97 @@
          </el-table>
        </div>
      </div>
      <div class="cloumn_Box">
        <div class="flex_Box">
          <div style="width: 100%; height: 20px">
            <div class="image1"></div>
            <div class="imageTitle">
              {{ $t('operatManage.systemMonitoringObj.memoryMonitoring') }}
            </div>
          </div>
          <div class="top_Box1">
            <div class="top_box_left">
              <div class="left_title">
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.haveBeenUsed')
                    }}</label>
                  <p>{{ memInfo.use }}</p>
                </div>
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.usageRate')
                    }}</label>
                  <p>{{ memInfo.usage }}</p>
                </div>
              </div>
              <div class="left_title">
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.totalMemory')
                    }}</label>
                  <p>{{ memInfo.totalMem }}</p>
                </div>
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.remainingMemory')
                    }}</label>
                  <p>{{ memInfo.remainMem }}</p>
                </div>
              </div>
            </div>
            <div
              id="fathershuiWen"
              class="top_box_right"
            >
              <div id="shuiwen"></div>
            </div>
          </div>
        </div>
        <div class="flex_Box">
          <div>
            <div class="image2"></div>
            <div
              style="line-height: 32px"
              class="imageTitle"
            >
              {{ $t('operatManage.systemMonitoringObj.cpuMonitoring') }}
            </div>
          </div>
          <div
            id="Sys_cpu_chart"
            style="width: 100%; height: 86%; margin-top: 8%"
          ></div>
        </div>
        <div class="flex_Box">
          <div style="width: 100%; height: 34px">
            <div class="image3"></div>
            <div
              style="line-height: 32px"
              class="imageTitle"
            >
              {{ $t('operatManage.systemMonitoringObj.heteroconstant') }}
            </div>
          </div>
          <div class="ycContent">
            <div class="ycsBox">
              <div style="width:100%;height:100%">
                <div class="ycTltle">{{ resInfoCount }}</div>
                <div class="heteroTitle">
                  {{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>

    </div>
    <!-- <div class="inform_box">
      <div class="content_box">
@@ -470,6 +471,13 @@
            seriesIndex: 0,
          },
        ],
        toolbox: {
          show: true,
          feature: {

            saveAsImage: { show: true }
          }
        },
        title: [],
        tooltip: {
          trigger: 'axis',
@@ -655,6 +663,13 @@
        tooltip: {
          trigger: 'item',
        },
        toolbox: {
          show: true,
          feature: {

            saveAsImage: { show: true }
          }
        },
        legend: {
          top: '5%',
          left: 'center',
@@ -764,6 +779,13 @@
            type: 'shadow',
          },
        },
        toolbox: {
          show: true,
          feature: {

            saveAsImage: { show: true }
          }
        },
        grid: {
          left: '3%',
          right: '4%',