able列表优化列间距、服务器管理详情添加出省流量统计标签页

2026-02-10 18:13:24 +08:00
parent 8bfa06b99a
commit e2bbb67faa
5 changed files with 103 additions and 78 deletions
@@ -93,6 +93,10 @@
        <el-tab-pane label="PPPoE配置" name="PPPoE配置">
          <PPPoEConfig v-if="activeName === 'PPPoE配置'" :key="activeName" :modelVal="mapDataList['PPPoE配置']" @poeDataChange="fnPoeDataChange"></PPPoEConfig>
        </el-tab-pane>
+        <!--    出省流量     -->
+        <el-tab-pane label="出省流量统计" name="出省流量统计">
+          <flowForm v-if="activeName === '出省流量统计'" :key="activeName" :activeName="activeName" :clientId="paramsData.clientId"></flowForm>
+        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
@@ -113,9 +117,10 @@
  import serRegisTable from './table';
  import serRegisTabsChart from './tabsChart';
  import PPPoEConfig from "./PPPoEConfig";
+  import flowForm from "./flowForm";
  export default {
    name: "server_register_details",
-    components: {PPPoEConfig, Form, serRegisFormOther, serRegisTabsChart, serRegisTable},
+    components: {PPPoEConfig, Form, serRegisFormOther, serRegisTabsChart, serRegisTable, flowForm},
    dicts: ['rm_register_status','rm_register_online_state'],
    data() {
      return {
@@ -1,12 +1,28 @@
 <template>
-  <div class="app-container">
-    <el-button type="primary" style="position: absolute;right: 100px;z-index: 9999;top: 45px;" @click="formSubmit()">{{readonly ? '编辑' : '保存'}}</el-button>
-    <el-button v-if="!readonly" style="position: absolute;right: 20px;z-index: 9999;top: 45px;" @click="formSubmit('-1')">取消</el-button>
+  <div v-if="activeName">
+    <TableList ref="tabRef" :columns="columns" :config="config" :queryParams="queryParams" :tableList="roleList" @fnRenderList="fnRmOutTrafficFlow" @fnClick="callback"></TableList>
+    <el-dialog title="详情" :visible.sync="dialogOpen" width="800px" append-to-body style="padding-bottom: 20px;">
+      <template v-if="timelineList && timelineList.length > 0">
+        <div v-for="item of timelineList" class="ml20" style="overflow: auto;max-height: calc(100vh - 180px);">
+          <pre>{{item.description}}</pre>
+        </div>
+      </template>
+      <div v-else class="ml20 mt20" style="height: 100px;color: #a3a3a3;">
+        暂无数据
+      </div>
+      <div style="text-align: right;margin-right: 20px;">
+        <el-button @click="dialogOpen = false">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+  <div v-else class="app-container">
+    <el-button type="primary" style="position: absolute;right: 100px;z-index: 2000;top: 45px;" @click="formSubmit()">{{readonly ? '编辑' : '保存'}}</el-button>
+    <el-button v-if="!readonly" style="position: absolute;right: 20px;z-index: 2000;top: 45px;" @click="formSubmit('-1')">取消</el-button>
    <Form ref="formRef" :key="formKey" :formList="formList" :ruleFormData="ruleForm" :config="{labelWidth: '140px', buttonGroup: []}" @fnClick="callback">
      <template #tempTimeList="{field, model, formModel }">
        <el-tag
-          :key="tagIndex"
          v-for="(tag,tagIndex) in formModel[field.key]"
+          :key="tagIndex"
          :closable="readonly ? false : ruleForm.frequency === '1'"
          :disable-transitions="false"
          @close="handleClose(field.key, tagIndex)">
@@ -27,24 +43,6 @@
        </template>
      </template>
    </Form>
-    <div>
-      <div class="mb20" style="border: 1px solid #eee;padding: 10px;">
-        <span>出省流量统计</span>
-        <div style="max-height: calc(100vh - 445px);overflow: auto;">
-          <template v-if="timelineList && timelineList.length > 0">
-            <div v-for="item of timelineList" class="ml20">
-              <pre>{{item.description}}</pre>
-            </div>
-          </template>
-          <div v-else class="ml20 mt20" style="height: 100px;color: #a3a3a3;">
-            暂无数据
-          </div>
-        </div>
-<!--        <div>-->
-<!--          <TableList ref="tabRef" :columns="columns" :config="config" :queryParams="queryParams" :tableList="roleList" @fnRenderList="getList" @fnClick="callback"></TableList>-->
-<!--        </div>-->
-      </div>
-    </div>
    <div style="text-align: right;" class="mr20">
      <el-button @click="callback({fnCode: 'cancel'})">返回</el-button>
    </div>
@@ -59,6 +57,27 @@
    name: "flowForm",
    dicts: ['pppoe_enabled', 'frequency'],
    components: {Form, TableList},
+    props: {
+      activeName: {
+        type: String,
+        default: ''
+      },
+      clientId: {
+        type: String,
+        default: ''
+      }
+    },
+    watch: {
+      clientId: {
+        handler(val) {
+          if (val) {
+            this.fnRmOutTrafficFlow(val);
+          }
+        },
+        deep: true,
+        immediate: true
+      },
+    },
    data() {
      return {
        formList: [],
@@ -79,25 +98,15 @@
        columns: {
          id: {label: `ID`, width: '50'},
          clientId: {label: `clientID`, minWidth: '280'},
-          name: {label: `磁盘名称`, minWidth: '60', visible: true},
-          serial: {label: `序列号`, minWidth: '120', visible: true},
-          total: {label: `总大小(GB)`, minWidth: '100',visible: true},
-          type: {label: `类型`, minWidth: '60',visible: true},
-          usedSpace: {label: `已用空间(GB)`, minWidth: '100',visible: true},
-          readSpeed: {label: `读速率(KB/s)`, minWidth: '90',visible: true},
-          writeSpeed: {label: `写速率(KB/s)`, minWidth: '90',visible: true},
-          readIops: {label: `读IOPS`, minWidth: '60',visible: true},
-          writeIops: {label: `写IOPS`, minWidth: '60',visible: true},
-          status: {label: `状态`, minWidth: '50', slotName: 'tempDiskStatus', visible: true},
-          omountFlag: {label: `执行卸载`, minWidth: '60', slotName: 'tempOmountFlag', visible: true},
+          createTime: {label: `时间`, width: '160', visible: true},
+          totalRate: {label: `总占比`, width: '80', visible: true},
+          interceptDesc: {label: `内容`, minWidth: '120', visible: true},
        },
        config: {
          colHiddenCheck: true, colTopHiddenIcon: true,
          tableButton: {
            line: [
-              {content: '测试磁盘IOOS', fnCode: 'testIoos', type: 'primary', showName: 'status', showVal: '1'},
-              {content: '卸载', fnCode: 'uninstall', type: 'danger', showName: 'status', showVal: '0'},
-              {content: '删除记录', fnCode: 'delete', type: 'danger', showName: 'status', showVal: '0'},
+              {content: '详情', fnCode: 'details', type: 'primary'},
            ]
          }
        },
@@ -106,14 +115,16 @@
          pageSize: 10,
          total: 0
        },
+        dialogOpen: false,
      }
    },
    created() {
      this.paramsData = this.$route && this.$route.query;
-      this.ruleForm['clientId'] = this.paramsData.clientId;
-      this.fnFormList(this.readonly);
-      this.fnRmOutTrafficFlow();
-      this.fnRmTcpdumpConfig();
+      if (!this.activeName) {
+        this.ruleForm['clientId'] = this.paramsData.clientId;
+        this.fnFormList(this.readonly);
+        this.fnRmTcpdumpConfig();
+      }
    },
    methods: {
      // 删除指定tag
@@ -123,9 +134,6 @@
      // 点击添加tag
      showInput() {
        this.inputVisible = true;
-        // this.$nextTick(_ => {
-        //   this.$refs.saveTagInput.$refs.input.focus();
-        // });
      },
      // 添加指定tag值
      handleInputConfirm(tagKey) {
@@ -154,22 +162,27 @@
          }
        });
      },
-      // 出省流量统计
-      fnRmOutTrafficFlow() {
-        rmOutTrafficFlow({clientId: this.paramsData.clientId}).then(res => {
-          if (res && res.data) {
-            this.timelineList = res.data;
+      // 出省流量统计 列表
+      fnRmOutTrafficFlow(clientId) {
+        rmOutTrafficFlow(Object.assign({}, {clientId: clientId}, this.queryParams)).then(res => {
+          if (res && res.rows) {
+            // this.timelineList = res.data;
+            this.roleList = res.rows.map(item => {
+              let interceptData = item.description;
+              if (item.description.split('%').length > 3) {
+                interceptData = [
+                  item.description.split('%')[0] ? item.description.split('%')[0] + '%' : item.description.split('%')[0],
+                  item.description.split('%')[1] ? item.description.split('%')[1] + '%' : item.description.split('%')[1],
+                  item.description.split('%')[2] ? item.description.split('%')[2] + '%' : item.description.split('%')[2]
+                ].join('\n');
+              }
+              return Object.assign({}, item, {interceptDesc: interceptData});
+            });
+            // this.roleList = res.rows;
+            this.queryParams.total = res.total;
          }
        });
      },
-      /** 查询列表 */
-      getList() {
-        this.loading = true;
-        // listGroup(this.queryParams).then(response => {
-        //   this.roleList = response.rows;
-        //   this.queryParams.total = response.total;
-        // })
-      },
      // formList集合
      fnFormList(readonly) {
        this.formList = [{
@@ -246,7 +259,9 @@
                this.formList[0].controls.detectTimes['required'] = false;
              }
              break;
-            case 'submit':
+            case 'details':
+              this.dialogOpen = true;
+              this.timelineList = [dataVal];
              break;
            case 'cancel':
              this.$router.push({
@@ -281,4 +296,7 @@
  ::v-deep .el-timeline .el-timeline-item:last-child .el-timeline-item__tail {
    display: block!important;
  }
+  ::v-deep .el-dialog__body {
+    padding: 0 20px 30px!important;
+  }
 </style>
@@ -487,8 +487,9 @@

        /** 搜索按钮操作 */
        handleQuery() {
-          this.queryParams.pageNum = 1
-          this.getHightLight();
+          this.queryParams.pageNum = 1;
+          this.handleClick();
+          // this.getHightLight();
        },

        /** 重置按钮操作 */
@@ -496,7 +497,8 @@
          this.$refs['queryRef'].resetFields();
          this.queryParams = {pageNum: 1, pageSize: 10,total: 0, resetVal: true};
          // this.resetForm("queryRef");
-          this.handleQuery();
+          this.handleClick();
+          // this.handleQuery();
        },

        /** 多选框选中数据 */
@@ -961,4 +963,12 @@
  ::v-deep .customSty .el-input__inner {
    padding: 0 2px 0!important;
  }
+  ::v-deep .el-table th.el-table__cell > .cell {
+    padding-left: 2px!important;
+    padding-right: 2px!important;
+  }
+  ::v-deep .el-table .cell {
+    padding-left: 0px!important;
+    padding-right: 0px!important;
+  }
 </style>
@@ -171,18 +171,18 @@
          this.columns = {
            id: {label: `ID`, width: '50'},
            clientId: {label: `clientID`, minWidth: '280'},
-            name: {label: `磁盘名称`, minWidth: '60', visible: true},
+            name: {label: `磁盘名称`, minWidth: '80', visible: true},
            serial: {label: `序列号`, minWidth: '120', visible: true},
            total: {label: `总大小(GB)`, minWidth: '100',visible: true},
            type: {label: `类型`, minWidth: '60',visible: true},
            usedSpace: {label: `已用空间(GB)`, minWidth: '100',visible: true},
-            readSpeed: {label: `读速率(MB/s)`, minWidth: '90',visible: true},
-            writeSpeed: {label: `写速率(MB/s)`, minWidth: '90',visible: true},
+            readSpeed: {label: `读速率(MB/s)`, minWidth: '100',visible: true},
+            writeSpeed: {label: `写速率(MB/s)`, minWidth: '100',visible: true},
            healthInfo: {label: `硬盘健康度`, minWidth: '90',visible: true},
-            readIops: {label: `读IOPS`, minWidth: '60',visible: true},
-            writeIops: {label: `写IOPS`, minWidth: '60',visible: true},
+            readIops: {label: `读IOPS`, minWidth: '70',visible: true},
+            writeIops: {label: `写IOPS`, minWidth: '70',visible: true},
            status: {label: `状态`, minWidth: '50', slotName: 'tempDiskStatus', visible: true},
-            omountFlag: {label: `执行卸载`, minWidth: '60', slotName: 'tempOmountFlag', visible: true},
+            omountFlag: {label: `执行卸载`, minWidth: '80', slotName: 'tempOmountFlag', visible: true},
          };
          this.config = {
            colHiddenCheck: true, colTopHiddenIcon: true,