服务器管理

1、服务器管理详情添加虚拟网卡的弹窗信息展示
2、服务器管理列表中选择业务IP功能添加虚拟网卡的信息展示
3、收益带宽值类型去掉包端带宽值标签

src/api/disRevenue/resource.js

@@ -119,6 +119,14 @@ export function postInterFaceName(data) {
     data: data
   })
 }
+// 服务器网卡信息查询
+export function virNetInterfaceChild(data) {
+  return request({
+    url: '/rocketmq/networkInterfaceChild/list',
+    method: 'post',
+    data: data
+  })
+}
 
 /**   ----------------资源分组------------    */
 // 查询列表

src/components/form/index.vue

@@ -273,7 +273,7 @@
 
                 <!-- 自定义插槽，用于特殊类型的表单控件 -->
                 <template v-else-if="formVal.slotName">
-                  <slot :name="formVal.slotName" :field="formVal"></slot>
+                  <slot :name="formVal.slotName" :field="Object.assign({}, {key: key}, formVal)" :formModel="ruleForm" :model="ruleForm[key]"></slot>
                 </template>
               </el-form-item>
             </el-col>

src/views/resource/serverRegister/handle.vue

@@ -1,13 +1,40 @@
 <template>
   <div class="app-container">
-    <Form :formList="formList" :ruleFormData="ruleForm" :config="this.paramsData && this.paramsData.readonly ? {labelWidth: '140px', buttonGroup: []} : {labelWidth: '140px'}" @fnClick="callback"></Form>
+    <Form :formList="formList" :ruleFormData="ruleForm" :config="this.paramsData && this.paramsData.readonly ? {labelWidth: '140px', buttonGroup: []} : {labelWidth: '140px'}" @fnClick="callback">
+      <template #tempVirtualNetCard="{ field, model, formModel }">
+        <span style="color: rgb(96, 98, 102);font-weight: 700;padding: 0 15px;overflow-wrap: break-word;line-height: 25px;margin-top: 5px;">
+          {{model}}
+        </span>
+        <button v-if="formModel && formModel[field.estimate]" @click="virtualNetCard(field, model)">虚拟网卡信息</button>
+      </template>
+    </Form>
     <el-button v-if="this.paramsData && this.paramsData.readonly" style="float: right;margin-top: 12px;margin-left: 10px;" @click="callback({fnCode: 'cancel'})">返回</el-button>
+    <!--  虚拟网卡信息  -->
+    <el-dialog :title="title" :visible.sync="virtualOpen" width="800px" append-to-body>
+      <el-collapse v-model="activeList">
+        <template v-for="(val,key, index) of virtualList">
+          <el-collapse-item :title="`【${val && val.title || ''}】${val && val.serverIp || ''}`" :name="val && val.title || index">
+            <div class="mt10 w100">
+              <div class="w100 plr-20" style="font-size: 14px">
+                <div v-for="(item,key,index) of virtualFormList"  class="w50 disInlineBlock p10">
+                  <div class="disInlineBlock" style="width: 120px;color: #C0C4CC;">{{item}}</div>
+                  <div style="width: calc(100% - 120px);vertical-align: top;" class="disInlineBlock">{{val && val.formModel[key] || '-'}}</div>
+                </div>
+              </div>
+            </div>
+          </el-collapse-item>
+        </template>
+      </el-collapse>
+      <div style="text-align: right;margin-top: 12px;margin-left: 10px;">
+        <el-button @click="virtualOpen = false">返回</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
   import Form from '@/components/form/index.vue';
-  import {addMachine, getHandle, updateTopology, getRegistList, bindBusByClient, getAlarmLogServerMsg} from "@/api/disRevenue/resource";
+  import {addMachine, getHandle, updateTopology, getRegistList, bindBusByClient, getAlarmLogServerMsg, virNetInterfaceChild} from "@/api/disRevenue/resource";
   import {listAllBusinessList} from "@/api/disRevenue/earnManage";
   export default {
     name: 'serverRegister_Edit',
@@ -16,6 +43,11 @@
     data() {
       return {
         loading: false,
+        virtualOpen: false,
+        title: '',
+        activeList: [],
+        virtualFormList: {interfaceName:'接口名称', interfaceType:'接口类型', macAddress:'MAC地址', publicIp:'公网地址', isp:'运营商', province:'省', city:'市', ipv4Address:'IPv4地址', gateway:'IPv4网关', ipv6Address:'IPv6全球单播地址'},
+        virtualList: {},
         ruleForm: {},
         formList: [],
         paramsData: {},
@@ -61,7 +93,7 @@
               ip1Province: {label: 'IP1-省', span: 12, type: 'input'},
               ip1City: {label: 'IP1-市', span: 12, type: 'input'},
               ip1PublicIp: {label: 'IP1-业务公网', span: 12, type: 'input'},
-              ip1InterfaceName: {label: 'IP1-接口名称', span: 12, type: 'input'},
+              ip1InterfaceName: {label: 'IP1-接口名称', span: 12, slotName: 'tempVirtualNetCard', estimate: 'ip1IsVirth'},
               ip1MacAddress: {label: 'IP1-mac地址', span: 12, type: 'input'},
               ip1InterfaceType: {label: 'IP1-接口类型', span: 12, type: 'input'},
               ip1Ipv4Address: {label: 'IP1-IPv4地址', span: 12, type: 'input'},
@@ -71,7 +103,7 @@
               ip2Province: {label: 'IP2-省', span: 12, type: 'input'},
               ip2City: {label: 'IP2-市', span: 12, type: 'input'},
               ip2PublicIp: {label: 'IP2-业务公网', span: 12, type: 'input'},
-              ip2InterfaceName: {label: 'IP2-接口名称', span: 12, type: 'input'},
+              ip2InterfaceName: {label: 'IP2-接口名称', span: 12, slotName: 'tempVirtualNetCard', estimate: 'ip2IsVirth'},
               ip2MacAddress: {label: 'IP2-mac地址', span: 12, type: 'input'},
               ip2InterfaceType: {label: 'IP2-接口类型', span: 12, type: 'input'},
               ip2Ipv4Address: {label: 'IP2-IPv4地址', span: 12, type: 'input'},
@@ -81,7 +113,7 @@
               ip3Province: {label: 'IP3-省', span: 12, type: 'input'},
               ip3City: {label: 'IP3-市', span: 12, type: 'input'},
               ip3PublicIp: {label: 'IP3-业务公网', span: 12, type: 'input'},
-              ip3InterfaceName: {label: 'IP3-接口名称', span: 12, type: 'input'},
+              ip3InterfaceName: {label: 'IP3-接口名称', span: 12, slotName: 'tempVirtualNetCard', estimate: 'ip3IsVirth'},
               ip3MacAddress: {label: 'IP3-mac地址', span: 12, type: 'input'},
               ip3InterfaceType: {label: 'IP3-接口类型', span: 12, type: 'input'},
               ip3Ipv4Address: {label: 'IP3-IPv4地址', span: 12, type: 'input'},
@@ -91,7 +123,7 @@
               mgmtProvince: {label: '管理网-省', span: 12, type: 'input'},
               mgmtCity: {label: '管理网-市', span: 12, type: 'input'},
               mgmtPublicIp: {label: '管理网-公网IP', span: 12, type: 'input'},
-              mgmtInterfaceName: {label: '管理网-接口名称', span: 12, type: 'input'},
+              mgmtInterfaceName: {label: '管理网-接口名称', span: 12, slotName: 'tempVirtualNetCard', estimate: 'mgmIsVirth'},
               mgmtMacAddress: {label: '管理网-mac地址', span: 12, type: 'input'},
               mgmtInterfaceType: {label: '管理网-接口类型', span: 12, type: 'input'},
               mgmtIpv4Address: {label: '管理网-IPv4地址', span: 12, type: 'input'},
@@ -160,6 +192,16 @@
           this.$modal.msgError("操作失败")
         });
       },
+      virtualNetCard(res,model) {
+        this.virtualOpen = true;
+        this.title = model + '的虚拟网卡信息';
+        virNetInterfaceChild({clientId: this.ruleForm.clientId, parentInterface: model}).then(resVal => {
+          resVal && resVal.data.forEach(item => {
+            this.activeList.push(item.interfaceName);
+            this.virtualList[item.interfaceName] = {title: item.interfaceName,formModel: item};
+          });
+        });
+      },
       // 监听事件
       callback(result, dataVal, formVal) {
         if (result && result.fnCode) {
@@ -223,4 +265,10 @@
   ::v-deep .el-radio {
     margin-right: 15px!important;
   }
+  ::v-deep .el-collapse-item__header {
+    background-color: #d4e3fc!important;
+    /*color: #fff!important;*/
+    padding-left: 20px;
+    font-size: 1rem;
+  }
 </style>

src/views/resource/serverRegister/index.vue

@@ -189,7 +189,7 @@
 
 <script setup name="Register">
     import Form from '@/components/form/index.vue';
-    import {listHandle, networkList, getScriptResultBySn, getLogicalNode, addRemark, updateRemark, repBandwidthSubmit, bindBusPublic} from '@/api/disRevenue/resource';
+    import {listHandle, networkList, getScriptResultBySn, getLogicalNode, addRemark, updateRemark, repBandwidthSubmit, bindBusPublic, virNetInterfaceChild} from '@/api/disRevenue/resource';
     import {listAllBusinessList} from "@/api/disRevenue/earnManage"
     import TableList from '@/components/table/index.vue';
     import MonitorStrategy from '../serverMonitorStrat/monitorStrategy';
@@ -321,7 +321,7 @@
               id: {label: 'ID',hidden: true},
               clientId: {label: 'ClientID',hidden: true},
               publicIp: {label: '业务公网IP', span: 18, eventName:'change', type: 'select',multiple: true, multipleLimit: 3, options: [], required: true},
-              descriptionOne: {label: '', span: 18, type: 'textarea',rows: 15, style: 'line-height: 22px', hidden: true, disabled: true},
+              descriptionOne: {label: '', span: 18, type: 'textarea',rows: 15, style: 'line-height: 22px;', hidden: true, disabled: true},
               mgmtIp: {label: '管理网-公网IP', eventName:'change', span: 18, type: 'select',options: [], required: true},
               descriptionTwo: {label: '', span: 18, type: 'textarea', rows: 15, style: 'line-height: 22px', hidden: true, disabled: true}
             }
@@ -342,6 +342,7 @@
           }],
           tagRuleForm: {},
           mtrChartOpen: false,
+          virNetInterList: {},
         }
       },
       created() {
@@ -456,6 +457,38 @@
           window.open(routeLocation.href, '_blank');
           // _blank：新标签页；_self：当前窗口（默认）
         },
+        async fnVirtualContent(rowData, content) {
+          let virtuaContent = '';
+          let newVirtuaContent = '';
+          rowData && rowData.forEach(item => {
+            let interfaceName = this.ipContentList[item].interfaceName;
+            // if (this.virNetInterList[interfaceName] && this.virNetInterList[interfaceName].typeVal) {
+            //   virtuaContent += this.virNetInterList[interfaceName].content;
+            //  return;
+            // }
+            virNetInterfaceChild({clientId: this.pubilcNetRuleForm.clientId, parentInterface: interfaceName}).then(res => {
+              res && res.data.forEach((val, index) => {
+                virtuaContent += '<div style="padding-left: 20px;">'
+                  + '运营商：' + val.isp + '<br>' + '省：' + val.province + '<br>'
+                  + '市：' + val.city + '<br>' + '公网IP：' + val.publicIp + '<br>'
+                  + '接口名称：' + val.interfaceName + '<br>' + 'mac地址：' + val.macAddress + '<br>'
+                  + '接口类型：' + val.interfaceType + '<br>' + 'IPv4地址：' + val.ipv4Address + '<br>'
+                  + '网关：' + val.gateway + '<br>' + 'IPv6全球单播地址：' + val.ipv6Address + '</div>';
+                if (index + 1 !== res.data.length) {
+                  virtuaContent+= '<br>';
+                }
+              });
+              this.virNetInterList[interfaceName] = {typeVal: true, content: virtuaContent};
+              if (res && res.data && res.data.length > 0) {
+                newVirtuaContent = '<div style="width: 50%; height: '+ rowData.length * 210 +'px;overflow: auto; display: inline-block; vertical-align: top;"><div style="color: #1890FF;">' + interfaceName + '的虚拟网卡信息:</div>'
+                newVirtuaContent += virtuaContent + '</div>';
+              }
+              this.$set(this.pubilcNetRuleForm, 'descriptionOne', content + newVirtuaContent);
+            }).catch(() => {
+              this.$set(this.pubilcNetRuleForm, 'descriptionOne', content);
+            });
+          });
+        },
         callback(result, rowData, selectChange, selectList) {
           this.dialogRowData = {};
           if (result && result.fnCode) {
@@ -559,7 +592,8 @@
                 break;
               case 'pubilcNet':
                 this.pubilcNetOpen = true;
-                this.pubilcNetRuleForm = {publicIp: [],mgmtIp: '', descriptionOne: '', descriptionTwo: ''};
+                this.virNetInterList = {};
+                this.pubilcNetRuleForm = {publicIp: [], mgmtIp: '', descriptionOne: '', descriptionTwo: ''};
                 this.$nextTick(() => {
                   this.pubilcNetFormList[0].controls.descriptionOne['hidden'] = true;
                   this.pubilcNetFormList[0].controls.descriptionTwo['hidden'] = true;
@@ -583,7 +617,7 @@
                 });
                 break;
               case 'publicIp':
-                let content = '';
+                let content = '<div style="width: 50%;display: inline-block;">';
                 this.pubilcNetRuleForm = Object.assign({}, this.pubilcNetRuleForm, this.$refs.publicNetFormRef.$refs.ruleForm.model);
                 if (rowData && rowData.length > 0) {
                   this.pubilcNetFormList[0].controls.descriptionOne['hidden'] = false;
@@ -597,10 +631,11 @@
                       + '接口类型：' + this.ipContentList[item].interfaceType + '<br>' + 'IPv4地址：' + this.ipContentList[item].ipv4Address + '<br>'
                       + '网关：' + this.ipContentList[item].gateway + '<br>';
                   });
+                  content+= '</div>';
                 } else {
                   this.pubilcNetFormList[0].controls.descriptionOne['hidden'] = true;
                 }
-                this.$set(this.pubilcNetRuleForm, 'descriptionOne', content);
+                this.fnVirtualContent(rowData, content);
                 break;
               case 'mgmtIp':
                 let contentTow = '';

src/views/resource/serverRegister/monitorChart.vue

@@ -638,20 +638,30 @@
         return trafficEcharts(Object.assign(unitData || {}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
           if (res && res.data) {
             netEcharts.title = titleName + content.echartFors[0].title;
+            netEcharts.dataVal.gridTop = '50%';
+            netEcharts.dataVal.legend = {top: '32%', left: '10%',type: 'scroll',orient: 'horizontal'};
             netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
             netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
-            netEcharts.dataVal.dataList[0] = {
-              name: content.echartFors[0].oneName,
-              data: res.data && res.data.yData['netOutSpeedData'] || []
-            };
             if (content.echartFors[0].unitSel) {
               netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
               netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
             }
-            netEcharts.dataVal.dataList[1] = {
-              name: content.echartFors[0].twoName,
-              data: res.data && res.data.yData['netInSpeedData'] || []
-            };
+            if (res.data && res.data.showRealation) {
+              Object.keys(res.data.showRealation).forEach((key,index) => {
+                netEcharts.dataVal.dataList[index] = {
+                  name: res.data.showRealation[key],
+                  data: res.data && res.data.yData[key] || []
+                };
+              });
+            }
+            // netEcharts.dataVal.dataList[0] = {
+            //   name: content.echartFors[0].oneName,
+            //   data: res.data && res.data.yData['netOutSpeedData'] || []
+            // };
+            // netEcharts.dataVal.dataList[1] = {
+            //   name: content.echartFors[0].twoName,
+            //   data: res.data && res.data.yData['netInSpeedData'] || []
+            // };
             mountCollect['echartList'][0] = netEcharts;
             this.$set(this.secondChartList, titleName, mountCollect);
           }