联调监控看板分组流量图

1、联调监控看板分组流量图
2、联调分组的增删改查功能
3、优化多选/单选下拉增删改查功能
4、添加图表图例太多时滚动条展示

src/views/resource/monitorBoard/dialogMonitor.vue

@@ -3,11 +3,13 @@
     <Form style="margin-bottom: 30px;" ref="formRef" :formList="formList" :config="{labelWidth: '140px'}" :ruleFormData="ruleFormData" @fnClick="callback">
       <template #tempGroup="{field, model, formModel}">
         <EditableMultiSelect
-          v-model="formModel[field.key]"
-          :initial-options="options1"
+          v-model="groupModel"
+          :multiple="false"
+          :initial-options="groupList"
           @option-added="handleOptionAdded"
           @option-updated="handleOptionUpdated"
           @option-deleted="handleOptionDeleted"
+          @value-change="handelValueChange"
         ></EditableMultiSelect>
       </template>
     </Form>
@@ -18,7 +20,7 @@
   import Form from '@/components/form/index.vue';
   import EditableMultiSelect from "@/components/customModule/selectModule.vue";
   import {switchNameTree, listAllBusinessList} from "@/api/disRevenue/earnManage";
-  import {addMonitorConfig, updateMonitorConfig} from "@/api/disRevenue/resource";
+  import {addMonitorConfig, updateMonitorConfig, getMonitorGroup, addMonitorGroup, updateMonitorGroup, delMonitorGroup} from "@/api/disRevenue/resource";
   export default {
     name: "dialogMonitor",
     components: {Form, EditableMultiSelect},
@@ -43,8 +45,10 @@
           } else if (val && val.resourceType === '3') {
             this.businessList();
           }
-          this.ruleFormData = val;
+          this.ruleFormData = JSON.parse(JSON.stringify(val));
+          this.groupModel = this.ruleFormData && this.ruleFormData['groupId'] || '';
           this.fnFormList();
+          this.groupListData();
         }
       },
       deep: true,
@@ -52,38 +56,62 @@
     },
     data() {
       return {
-        options1: [
-          { label: 'JavaScript', value: 'js' },
-          { label: 'TypeScript', value: 'ts' },
-          { label: 'Vue.js', value: 'vue' },
-          { label: 'React', value: 'react' },
-          { label: 'Node.js', value: 'node' },
-          { label: 'Python', value: 'python' },
-          { label: 'Java', value: 'java' },
-          { label: 'Go', value: 'go' }
+        groupList: [
+          { label: '', value: '' },
         ],
         ruleFormData: {},
         formList: [],
         busNameList: {},
         switchNameList: {},
+        groupModel: '',
       }
     },
     created() {
     },
     methods: {
+      // 查询分组
+      groupListData(type, targetVal) {
+        getMonitorGroup().then(res => {
+          if (res && res.data && res.data.length > 0) {
+            this.groupList = res && res.data.map(item => {
+              return Object.assign({}, item, {value: item.id, label: item.name})
+            });
+            if (type === 'del') {
+              // 从选中值中移除
+              const selectedIndex = this.groupModel.toString().indexOf(targetVal.toString());
+              if (selectedIndex !== -1) {
+                this.groupModel = ' ';
+              }
+            }
+          } else {
+            this.groupList = [{label: '', value: ''}];
+          }
+        });
+      },
+      // 新增
       handleOptionAdded(option) {
-        console.log('添加了新选项:', option);
-        this.$message.info(`添加了: ${option.label}`);
+        addMonitorGroup({name: option.label}).then(res => {
+          this.$message.success(`添加成功！`);
+          this.groupListData();
+        });
       },
-
+      // 编辑
       handleOptionUpdated(data) {
-        console.log('选项已更新:', data);
-        this.$message.info(`更新了: ${data.oldValue} -> ${data.newValue}`);
+        updateMonitorGroup({id: data.oldValue, name: data.newValue}).then(res => {
+          this.$message.success(`更新成功！`);
+          this.groupListData();
+        });
       },
-
+      // 删除
       handleOptionDeleted(value) {
-        console.log('删除了选项:', value);
-        this.$message.info(`删除了: ${value}`);
+        delMonitorGroup(value).then(res => {
+          this.$message.info(`删除成功！`);
+          this.groupListData('del', value);
+        });
+      },
+      // 值变化时
+      handelValueChange(value) {
+        this.$set(this.ruleFormData, 'groupId', value);
       },
       // formList集合
       fnFormList() {
@@ -91,7 +119,7 @@
           config: {colSpan: 'disBlock'},
           controls: {
             id: {label: 'ID',hidden: true},
-            groupList: {label: '分组', span: 18, slotName: 'tempGroup'},
+            groupId: {label: '分组', span: 18, slotName: 'tempGroup', required: true},
             configName: {label: '配置名称', span: 18, type: 'input', required: true},
             monitorStartTime: {label: '监控数据开始时间', span: 18, type: 'datetime', disabled: this.ruleFormData && this.ruleFormData.id ? true : false, required: true},
             resourceType: {label: '资源类型', span: 18, type: 'select', eventName: 'change', required: true, options: this.dict.type.resource_type, disabled: this.ruleFormData && this.ruleFormData.id ? true : false},

src/views/resource/monitorBoard/monitorBoard.vue

@@ -77,7 +77,7 @@
       </el-dialog>
     </template>
     <template v-else>
-      <monitorBoardView :timeModelOne="timeModel" :datetimeModelOne="datetimeModel" :activeType="activeType" @activeTypeChange="fnActiveTypeChange"></monitorBoardView>
+      <monitorBoardView :timeModelOne="timeModel" :datetimeModelOne="datetimeModel" :activeTypeOne="activeType" :groupDataOne="groupData" @activeTypeChange="fnActiveTypeChange"></monitorBoardView>
     </template>
   </div>
 </template>
@@ -86,7 +86,7 @@
   import dialogMonitor from './dialogMonitor';
   import monitorBoardView from './monitorBoardView';
   import EchartsLine from "@/components/echartsList/line.vue";
-  import {monitorViewChart, delMonitorConfig} from "@/api/disRevenue/resource";
+  import {monitorViewChart, delMonitorConfig, getMonitorGroup} from "@/api/disRevenue/resource";
   import { checkPermi } from "@/utils/permission";
   export default {
     name: "monitor-board",
@@ -110,7 +110,7 @@
           formModel: {},
           currTimeList: {},
           datetimeModel: [],
-          timeModel: '30000',
+          timeModel: '0',
           timeInterModel: null,
           open: false,
           title: '',
@@ -136,7 +136,7 @@
           lineDataParams: {},
           btnList: [{title: '详情', value: 'view', hasPermi: 'resource:monitorBoard:view'}, {title: '修改', value: 'edit'}, {title: '删除', value: 'del'}],
           groupData: '',
-          groupList: [{value:'g1', label: '分组1'},{value:'g2', label: '分组2'}],
+          groupList: [],
           timesMap: {},
           pickerOptions: {
             shortcuts: [{
@@ -219,7 +219,7 @@
       // this.datetimeModel = this.datetimeModelDefault && this.datetimeModelDefault.length > 0 ? this.datetimeModelDefault : [startData, endData];
       this.currTimeList = {startTime: startData, endTime: endData};
       this.datetimeModel = [startData, endData];
-      this.fnChartView(this.currTimeList);
+      this.groupListData();
     },
     beforeDestroy() {
       clearInterval(this.timeInterModel);
@@ -251,10 +251,28 @@
         this.datetimeModel = [startData,endData];
         this.timesMap = {};
       },
+      // 查询分组
+      groupListData(groupId) {
+        getMonitorGroup().then(res => {
+          if (res && res.data) {
+            this.groupList = res && res.data.map((item,index) => {
+              if (index === 0) {
+                this.groupData = groupId || item.id;
+              }
+              return Object.assign({}, item, {value: item.id, label: item.name})
+            });
+          }
+          this.fnChartView(this.currTimeList, null, null, groupId || this.groupData);
+        });
+      },
       // 查询流量图
-      fnChartView(times, unitVal,keyName) {
+      fnChartView(times, unitVal,keyName, groupId) {
         this.$modal.loading();
-        monitorViewChart(Object.assign({}, times, unitVal)).then(res => {
+        let groupObj = {};
+        if (groupId) {
+          groupObj = {groupId: groupId};
+        }
+        monitorViewChart(Object.assign({}, times, unitVal, groupObj)).then(res => {
           let dataList = {};
           res && res.data.forEach(item => {
             let chart = JSON.parse(JSON.stringify(this.echartData));
@@ -286,10 +304,6 @@
           } else {
             if (dataList && Object.keys(dataList).length > 0) {
               this.lineDataParams = {...dataList};
-            } else {
-              this.lineDataParams['one'] = {
-                echartList: this.echartData
-              };
             }
           }
           this.$modal.closeLoading();
@@ -309,8 +323,7 @@
       // 分组
       fnGroupChange() {
         this.updateTimes();
-        // this.groupData
-        this.fnChartView(this.currTimeList);
+        this.fnChartView(this.currTimeList, null, null, this.groupData);
       },
       // 定时刷新下拉
       fnTimeInter(val) {
@@ -319,7 +332,7 @@
         if (val !== '0') {
           this.timeInterModel = setInterval(() => {
             this.updateTimes();
-            this.fnChartView(this.currTimeList);
+            this.fnChartView(this.currTimeList, null, null, this.groupData);
           }, Number(val));
         }
       },
@@ -329,7 +342,7 @@
         // 使用$nextTick确保DOM更新完成后再初始化子组件
         this.$nextTick(() => {
           // 强制更新formModel，确保子组件能接收到
-          this.formModel = {};
+          this.formModel = {groupId: this.groupData};
         });
       },
       // 弹窗关闭
@@ -337,7 +350,8 @@
         this.updateTimes();
         // 新增或编辑操作时
         if (res && res.type === 'submit') {
-          this.fnChartView(this.currTimeList);
+          this.groupListData(this.groupData);
+          // this.fnChartView(this.currTimeList, null, null, this.groupData);
         }
         this.open = false;
       },
@@ -353,7 +367,9 @@
         this.timeModel = val && val.timeModel;
         this.activeType = val && val.activeType;
         this.datetimeModel = val && val.datetimeModel;
-        this.fnChartView(this.currTimeList);
+        this.groupData = val && val.groupData;
+        this.groupListData(this.groupData);
+        // this.fnChartView(this.currTimeList);
       },
       // 右侧点击下拉按钮
       handleCommand(val, chartKey, chartVal) {
@@ -361,7 +377,7 @@
         if (val && val.value === 'del') {
           this.updateTimes();
           delMonitorConfig(chartVal.rmMonitorConfig.id).then(res => {
-            this.fnChartView(this.currTimeList);
+            this.fnChartView(this.currTimeList, null, null, this.groupData);
           });
         } else if (val && val.value === 'edit') {
           this.title = '修改配置';
@@ -374,7 +390,7 @@
         } else if (val && val.value === 'view') {
           this.$router.push({
             path: '/resource/monitorBoard/view',
-            query: {id: chartVal.rmMonitorConfig.id}
+            query: {id: chartVal.rmMonitorConfig.id, groupId: this.groupData}
           });
         }
       },

src/views/resource/monitorBoard/monitorBoardView.vue

@@ -76,7 +76,7 @@
   import dialogMonitor from './dialogMonitor';
   import EchartsLine from "@/components/echartsList/line.vue";
   import TableList from '@/components/table/index.vue';
-  import {monitorViewChart, monitorConfigList, delMonitorConfig, getBandWidthList, getSwitchInfoList} from "@/api/disRevenue/resource";
+  import {monitorViewChart, monitorConfigList, delMonitorConfig, getBandWidthList, getSwitchInfoList, getMonitorGroup} from "@/api/disRevenue/resource";
   export default {
     name: "monitorBoardView",
     components: {dialogMonitor, EchartsLine, TableList},
@@ -92,6 +92,10 @@
       activeTypeOne: {
         type: String,
         default: '2'
+      },
+      groupDataOne: {
+        type: [String, Number],
+        default: ''
       }
     },
     data() {
@@ -224,16 +228,33 @@
       this.currTimeList = this.datetimeModelOne && this.datetimeModelOne.length > 0 ? {startTime: this.datetimeModelOne[0], endTime: this.datetimeModelOne[1]} : {startTime: startData, endTime: endData};
       this.datetimeModel = this.datetimeModelOne && this.datetimeModelOne.length > 0 ? this.datetimeModelOne : [startData, endData];
       this.timeModel = this.timeModelOne;
-      this.fnConfigName();
-      if (this.configModel) {
-        this.fnChartView();
-      }
+      this.groupData = this.paramsData && this.paramsData.groupId ? Number(this.paramsData.groupId) : Number(this.groupDataOne);
+      // this.fnConfigName(this.groupDataOne);
+      // if (this.configModel) {
+      //   this.fnChartView();
+      // }
+      this.groupListData();
     },
     beforeDestroy() {
       clearInterval(this.timeInterModel);
       this.timeInterModel = null;
     },
     methods: {
+      // 查询分组
+      groupListData() {
+        getMonitorGroup().then(res => {
+          if (res && res.data) {
+            let newVal = '';
+            this.groupList = res && res.data.map((item,index) => {
+              if (index === 0) {
+                newVal = item.id;
+              }
+              return Object.assign({}, item, {value: item.id, label: item.name})
+            });
+            this.fnConfigName(this.groupData || newVal);
+          }
+        });
+      },
       // 查询流量图
       fnChartView(unitData) {
         this.lineDataParams = {};
@@ -323,9 +344,10 @@
         };
       },
       // 下拉
-      fnConfigName() {
-        monitorConfigList({}).then(res => {
-          if (res && res.data && res.data.length > 0) {
+      fnConfigName(groupId) {
+        monitorConfigList({groupId: groupId}).then(res => {
+          if (res && res.data) {
+            this.configModel = '';
             this.configNameList = res && res.data;
             let index = 0;
             res && res.data.forEach(item => {
@@ -333,7 +355,7 @@
                 index = 1;
               }
             });
-            if (index === 0) {
+            if (index === 0 && this.configNameList.length > 0) {
               this.configModel = this.configNameList[0].id;
               this.fnChartView();
             }
@@ -358,7 +380,7 @@
           // 使用$nextTick确保DOM更新完成后再初始化子组件
           this.$nextTick(() => {
             // 强制更新formModel，确保子组件能接收到
-            this.formModel = {};
+            this.formModel = {groupId: this.groupData};
           });
         } else if (val === 'edit') {
           this.title = '修改配置';
@@ -373,7 +395,7 @@
             '<p style="height: 0px;margin-bottom: 50px;">删除 ' + this.reserveForm.configName + ' 配置后，相应的服务器/交换机集合的总流量的相关数据都将删除</p>';
           this.$modal.confirm(content).then(() => {
             delMonitorConfig(this.reserveForm.id).then(res => {
-              this.fnConfigName();
+              this.fnConfigName(this.groupData);
             });
           }).catch(() => {});
         }
@@ -388,17 +410,18 @@
         this.fnChartView();
       },
       // 分组
-      fnGroupChange() {
+      fnGroupChange(val) {
         // this.groupData
-        this.fnChartView({});
+        this.fnConfigName(val);
       },
       addMonitor() {
         this.open = true;
       },
       fnDialogResult(res){
         this.open = false;
-        this.fnConfigName();
-        this.fnChartView();
+        this.groupListData();
+        // this.fnConfigName(this.groupData);
+        // this.fnChartView();
       },
       // 详细视图
       viewMonitorChart(val) {
@@ -409,7 +432,7 @@
               path: '/resource/monitorBoard',
             });
           } else {
-            this.$emit("activeTypeChange", {activeType: val, timeModel: this.timeModel, datetimeModel: this.datetimeModel});
+            this.$emit("activeTypeChange", {activeType: val, timeModel: this.timeModel, datetimeModel: this.datetimeModel, groupData: this.groupData});
           }
         }
       },

src/views/resource/serverRegister/flowForm.vue

@@ -28,16 +28,16 @@
       </template>
     </Form>
     <div>
-      <div class="mt20 mb20" style="border: 1px solid #eee;padding: 10px;">
+      <div class="mb20" style="border: 1px solid #eee;padding: 10px;">
         <span>出省流量统计</span>
-        <div style="height: calc(100vh - 462px);overflow: auto;">
+        <div style="height: calc(100vh - 445px);overflow: auto;">
           <div v-for="item of timelineList" class="ml20">
             <pre>{{item.description}}</pre>
           </div>
         </div>
       </div>
     </div>
-    <div style="text-align: right;" class="mt20 mb20 mr20">
+    <div style="text-align: right;" class="mr20">
       <el-button @click="callback({fnCode: 'cancel'})">返回</el-button>
     </div>
   </div>
@@ -119,7 +119,6 @@
       // 出省流量统计
       fnRmOutTrafficFlow() {
         rmOutTrafficFlow({clientId: this.paramsData.clientId}).then(res => {
-          console.log('res===',res);
           if (res && res.data) {
             this.timelineList = res.data;
           }

src/views/resource/serverRegister/index.vue

@@ -232,7 +232,7 @@
             clientId: { label: `clientID`, minWidth: '270', slotName: 'tempCopy',visible: true, disabled: true},
             ip1Isp: { label: `运营商1`, minWidth: '55',visible: true, disabled: true},
             ip1Province: { label: `省1`, minWidth: '50',visible: true,  disabled: true},
-            ip1PublicIp:{ label: `业务公网1`,minWidth: '100',visible: true, disabled: true},
+            ip1PublicIp:{ label: `IP1`,minWidth: '100',visible: true, disabled: true},
             businessName: { label: `业务名称`, minWidth: '90', visible: true, disabled: true},
             bandwidthResult: { label: `昨日95值`, minWidth: '75', visible: true, disabled: true, sortable: 'custom'},
             bandwidthRate: { label: `日95利用率`, minWidth: '75', visible: true, disabled: true},
@@ -249,7 +249,7 @@
             ip2Isp: { label: `运营商2`, minWidth: '55'},
             ip2Province: { label: `省2`,minWidth: '50'},
             ip2City: { label: `市2`, minWidth: '50'},
-            ip2PublicIp:{ label: `业务公网2`,minWidth: '100'},
+            ip2PublicIp:{ label: `IP2`,minWidth: '100'},
             ip2InterfaceName: { label: `接口名称2`, minWidth: '70'},
             ip2MacAddress: { label: `mac地址2`, minWidth: '120'},
             ip2InterfaceType: { label: `接口类型2`, minWidth: '70'},
@@ -259,7 +259,7 @@
             ip3Isp: { label: `运营商3`, minWidth: '55'},
             ip3Province: { label: `省3`, minWidth: '50'},
             ip3City: { label: `市3`, minWidth: '50'},
-            ip3PublicIp:{ label: `业务公网3`,minWidth: '100'},
+            ip3PublicIp:{ label: `IP3`,minWidth: '100'},
             ip3InterfaceName: { label: `接口名称3`, minWidth: '70'},
             ip3MacAddress: { label: `mac地址3`, minWidth: '120'},
             ip3InterfaceType: { label: `接口类型3`, minWidth: '70'},
@@ -269,7 +269,7 @@
             mgmtIsp: { label: `管理网-运营商`, minWidth: '95'},
             mgmtProvince: { label: `管理网-省`,minWidth: '65'},
             mgmtCity: { label: `管理网-市`, minWidth: '65'},
-            mgmtPublicIp:{ label: `管理网-业务公网`,minWidth: '120'},
+            mgmtPublicIp:{ label: `管理网-IP`,minWidth: '120'},
             mgmtInterfaceName: { label: `管理网-接口名称`, minWidth: '110'},
             mgmtMacAddress: { label: `管理网-mac地址`, minWidth: '120'},
             mgmtInterfaceType: { label: `管理网-接口类型`, minWidth: '110'},