界面修改

Surpriseplus

2023-01-17 93a38ac31615b1aa053a4440c59814ea72353945

 src/views/maintenance/systemMonitoring.vue

@@ -6,6 +6,117 @@
      ]"></My-bread>
    <el-divider />
    <div class="content_Box">
      <div class="cloumn_Box1">
        <div class="flex_Box1">
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane
              :label="$t('operatManage.systemMonitoringObj.abnormalResources')"
              name="first"
            >
              <el-table
                :data="resInfo"
                style="width: 100%; height: 310px"
              >
                <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>
                <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>
              </el-table>
            </el-tab-pane>
            <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"
            >
              <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>
          </el-tabs>
        </div>
        <div class="flex_Box">
          <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
              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>
            <el-table-column
              prop="loginTime"
              :label="$t('operatManage.systemMonitoringObj.onlineTime')"
              fixed="right"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="cloumn_Box">
        <div class="flex_Box">
          <div style="width: 100%; height: 20px">
@@ -96,117 +207,7 @@

        </div>
      </div>
      <div class="cloumn_Box1">
        <div class="flex_Box1">
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane
              :label="$t('operatManage.systemMonitoringObj.abnormalResources')"
              name="first"
            >
              <el-table
                :data="resInfo"
                style="width: 100%; height: 310px"
              >
                <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>
                <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>
              </el-table>
            </el-tab-pane>
            <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"
            >
              <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>
          </el-tabs>
        </div>
        <div class="flex_Box">
          <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
              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>
            <el-table-column
              prop="loginTime"
              :label="$t('operatManage.systemMonitoringObj.onlineTime')"
              fixed="right"
            >
            </el-table-column>
          </el-table>
        </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%',
@@ -832,7 +854,7 @@
    var height = (mysright * 1.5) + "px"
    $("#shuiwen").width(width);
    $("#shuiwen").height(height);