diff --git a/src/components/table/index.vue b/src/components/table/index.vue index 728395f..9ff757d 100644 --- a/src/components/table/index.vue +++ b/src/components/table/index.vue @@ -169,9 +169,9 @@ config: { type: Object, default: () => ({ - colHiddenCheck: false, - colTopHiddenIcon: false, - currentSel: false, + colHiddenCheck: false, // 是否隐藏多选框，默认不隐藏 + colTopHiddenIcon: false, // 是否隐藏列表右上方三个按钮，默认不隐藏 + currentSel: false, // 是否高亮当前行，默认不高亮 }) } }, @@ -559,14 +559,6 @@ padding-left: 2px!important; padding-right: 2px!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; - } ::v-deep .el-button + .el-button { margin-left: 5px!important; } diff --git a/src/views/resource/serverRegister/details.vue b/src/views/resource/serverRegister/details.vue index 84d1935..1660fcb 100644 --- a/src/views/resource/serverRegister/details.vue +++ b/src/views/resource/serverRegister/details.vue @@ -93,6 +93,10 @@ + + + + @@ -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 { diff --git a/src/views/resource/serverRegister/flowForm.vue b/src/views/resource/serverRegister/flowForm.vue index 4c6d4e0..d85a20a 100644 --- a/src/views/resource/serverRegister/flowForm.vue +++ b/src/views/resource/serverRegister/flowForm.vue @@ -1,12 +1,28 @@ -
-
- 出省流量统计 -
- -
- 暂无数据 -
-
- - - -
-
返回
@@ -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; + } diff --git a/src/views/resource/serverRegister/index.vue b/src/views/resource/serverRegister/index.vue index 9c83fa5..d1c8068 100644 --- a/src/views/resource/serverRegister/index.vue +++ b/src/views/resource/serverRegister/index.vue @@ -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; + } diff --git a/src/views/resource/serverRegister/table.vue b/src/views/resource/serverRegister/table.vue index 0521fc0..53b3923 100644 --- a/src/views/resource/serverRegister/table.vue +++ b/src/views/resource/serverRegister/table.vue @@ -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,