图形分析接口联调、拓扑和收益修改字段和接口调试

src/api/disRevenue/earnManage.js

@@ -66,6 +66,63 @@ export function calculateAvg(data) {
   })
 }
 
+// 包端----图
+export function graPackage(data) {
+  return request({
+    url: '/system/bandwidth/graphicalAnalysisPackage',
+    method: 'post',
+    data: data
+  })
+}
+// 95宽带值Mbps/月---图
+export function graMonthly(data) {
+  return request({
+    url: '/system/bandwidth/graphicalAnalysisMonthly',
+    method: 'post',
+    data: data
+  })
+}
+// 有效-95宽带值Mbps/月---图
+export function graEffectiveMonthly(data) {
+  return request({
+    url: '/system/bandwidth/graphicalAnalysisEffectiveMonthly',
+    method: 'post',
+    data: data
+  })
+}
+// 有效-95宽带值Mbps/日---图
+export function graEffectiveDaily(data) {
+  return request({
+    url: '/system/bandwidth/graphicalAnalysisEffectiveDaily',
+    method: 'post',
+    data: data
+  })
+}
+// 有效月均日95值----图
+export function graEffectiveAvgMonthly(data) {
+  return request({
+    url: '/system/bandwidth/graphicalAnalysisEffectiveAvgMonthly',
+    method: 'post',
+    data: data
+  })
+}
+// 95宽带值/日----图
+export function graDaily(data) {
+  return request({
+    url: '/system/bandwidth/graphicalAnalysisDaily',
+    method: 'post',
+    data: data
+  })
+}
+// 月均日95值----图
+export function graAvgMonthly(data) {
+  return request({
+    url: '/system/bandwidth/graphicalAnalysisAvgMonthly',
+    method: 'post',
+    data: data
+  })
+}
+
 /**      ------------------业务管理-------------------        */
 
 // 查询列表

src/api/disRevenue/resource.js

@@ -51,6 +51,15 @@ export function updateregisterType(data) {
     data: data
   })
 }
+// 修改注册状态
+export function resNameBtType(data) {
+  return request({
+    url: '/system/registration/selectAllResourceNameByType',
+    method: 'post',
+    data: data
+  })
+}
+
 
 /**   ----------------拓扑管理 ------------    */
 // 查询列表
@@ -93,6 +102,14 @@ export function delTopology(Ids) {
     method: 'delete'
   })
 }
+// 服务器网口
+export function postInterFaceName(data) {
+  return request({
+    url: '/system/interfaceName/getAllNames',
+    method: 'post',
+    data: data
+  })
+}
 
 /**   ----------------资源分组------------    */
 // 查询列表

src/assets/styles/index.scss

@@ -89,6 +89,9 @@ div:focus {
 .p20 {
   padding: 20px;
 }
+.mtb10 {
+  margin: 10px 0;
+}
 .fontSize15 {
   font-size: 15px;
 }

src/components/echartsList/bar.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <dateTimeSelect v-if="!(barData && barData.hiddenTime)" @dataChange="dataChangeValue"></dateTimeSelect>
+        <dateTimeSelect v-if="!(barData && barData.hiddenTime)" :dateShowType="dateShowType" @dataChange="dataChangeValue"></dateTimeSelect>
         <div :id="`barChart` + num" style="width:100%;height: 100%;" />
     </div>
 </template>
@@ -20,6 +20,10 @@
           type: String,
           default: null
         },
+        dateShowType: {
+          type: String,
+          default: null
+        },
         chartData: {
           type: Function,
           default: () => {
@@ -44,20 +48,16 @@
       methods: {
         getList(title, dataXY) {
           const barDataListIntance = echarts.init(document.getElementById('barChart' + this.num));
-          let titleSet = {};
+          let option = {
-          if (dataXY && dataXY.titleVal) {
+            title: [{
-            titleSet = {
               text: title,
               x: dataXY && dataXY.titleVal && dataXY.titleVal.x || '50%',
               y: dataXY && dataXY.titleVal && dataXY.titleVal.y || '3%',
               textAlign: dataXY && dataXY.titleVal && dataXY.titleVal.textAlign || 'center',
               textStyle: {
-                fontSize: 14
+                fontSize: dataXY && dataXY.titleVal && dataXY.titleVal.fontSize || 16
               },
-            };
+            }],
-          }
-          let option = {
-            title: [titleSet],
             tooltip: {
               trigger: 'axis',
               axisPointer: {
@@ -83,7 +83,7 @@
                 splitLine: { show: false },
                 // x轴标签样式（保留标签便于阅读）
                 axisLabel: {
-                  show: false
+                  show: dataXY && dataXY.hidAxisLabel ? false : true
                 }
               }
             ],
@@ -97,7 +97,7 @@
                 // 去掉y轴刻度线
                 axisTick: { show: false },
                 // 去掉y轴网格线（横向网格）
-                splitLine: { show: false },
+                splitLine: { show: dataXY && dataXY.hidSplitLine ? false : true },
                 // Y轴标签样式（保留标签便于阅读）
                 axisLabel: {
                   show: true
@@ -128,7 +128,7 @@
           // console.log(props.chartData(val));
           // this.getList(this.title, {data: this.barData.data, lineData: days, yAxis: this.barData && this.barData.yAxis});
           let newbarData = {...this.barData};
-          newbarData['lineData'] = days;
+          newbarData['lineData'] = days && days.length > 0 ? days: this.barData.lineXData;
           this.getList(this.title, newbarData);
         }
       }

src/components/echartsList/dateTimeSelect.vue

@@ -2,18 +2,25 @@
     <div class="ultabs">
         <el-date-picker
                 v-model="dateRange"
-                type="daterange"
+                :type="dateShowType === 'day' ? 'daterange' : 'monthrange'"
-                start-placeholder="开始时间"
+                :start-placeholder="dateShowType === 'day' ? '开始时间' : '开始日期'"
-                end-placeholder="结束时间"
+                :end-placeholder="dateShowType === 'day' ? '结束时间' : '结束日期'"
                 range-separator="至"
-                format="yyyy-MM-dd"
+                :format="dateShowType === 'day' ? 'yyyy-MM-dd' : 'yyyy-MM'"
-                value-format="yyyy-MM-dd"
+                :value-format="dateShowType === 'day' ? 'yyyy-MM-dd' : 'yyyy-MM'"
                 style="display: inline-block!important;width: 45%!important;vertical-align: middle;"
                 @change="dateChange"/>
         <ul style="display: inline-block;padding-left: 10px;vertical-align: middle;">
+          <template v-if="dateShowType === 'day'">
             <li :class="{ 'activesbgs' : isActive == 'DAY' }" @click="toggle('DAY',7)">前7天</li>
             <li :class="{ 'activesbgs' : isActive == 'WEEK' }" @click="toggle('WEEK',15)">前15天</li>
             <li :class="{ 'activesbgs' : isActive == 'MONTH' }" @click="toggle('MONTH')">前一个月</li>
+          </template>
+          <template v-else>
+            <li :class="{ 'activesbgs' : isActive == 'THREEMONTH' }" @click="toggle('THREEMONTH')">前三个月</li>
+            <li :class="{ 'activesbgs' : isActive == 'HALFYEAR' }" @click="toggle('HALFYEAR')">前半年</li>
+            <li :class="{ 'activesbgs' : isActive == 'YEAR' }" @click="toggle('YEAR')">前一年</li>
+          </template>
         </ul>
     </div>
 </template>
@@ -22,27 +29,38 @@
     import {onMounted} from "vue";
     export default {
       name: 'dateTimeSelect',
-      props: {},
+      props: {
+        dateShowType: {
+          type: String,
+          default: null
+        }
+      },
       data() {
         return {
           dateRange: [],
-          isActive: 'DAY'
+          isActive: ''
         }
       },
       // DOM 挂载完成后
       mounted() {
         // 可以访问 DOM 元素
         setTimeout(() => {
-          this.getLastDays(6);
+          // this.getLastDays(6);
+          // this.getDaysOfPreviousMonth();
+          this.$emit("dataChange", this.isActive, []);
         }, 500);
       },
       methods: {
         toggle(val, num) {
           this.isActive = val;
-          if (val && val !== 'MONTH') {
+          if (val && val === 'MONTH') {
-            this.getLastDays(num - 1);
-          } else {
             this.getDaysOfPreviousMonth();
+          } else if (val && val === 'THREEMONTH') {
+            this.getLastThreeMonths();
+          } else if (val && val === 'HALFYEAR') {
+            this.getLastSixMonths();
+          } else {
+            this.getLastDays(num - 1);
           }
         },
         dateChange() {
@@ -66,6 +84,7 @@
           }
           this.$emit("dataChange", this.isActive, dayList);
         },
+        // 获取前一个月的所有日期
         getDaysOfPreviousMonth(star, end) {
           const currentDate = new Date();
           const currentYear = currentDate.getFullYear();
@@ -91,7 +110,55 @@
             currentDay.setDate(currentDay.getDate() + 1);
           }
           this.$emit("dataChange", this.isActive, oneMonthDays);
+        },
+        // 获取前三个月的月
+        getLastThreeMonths() {
+          const threeMonths = [];
+          const today = new Date(); // 当前日期
+          const currentYear = today.getFullYear();
+          const currentMonth = today.getMonth(); // 月份从0开始（0=1月，11=12月）
+          // 循环获取前3个月（i=0: 前1个月，i=1: 前2个月，i=2: 前3个月）
+          for (let i = 1; i <= 3; i++) {
+            // 计算目标月份（当前月 - i）
+            let targetMonth = currentMonth - i;
+            let targetYear = currentYear;
+            // 处理月份溢出（如1月-1=12月，年份减1）
+            if (targetMonth < 0) {
+              targetMonth += 12;
+              targetYear -= 1;
             }
+            // 格式化月份为两位数（如5月→'05'）
+            const monthStr = String(targetMonth + 1).padStart(2, '0'); // 加1是因为月份从0开始
+            threeMonths.push(`${targetYear}-${monthStr}`);
+          }
+          console.log('threeMonths===',threeMonths);
+          this.$emit("dataChange", this.isActive, threeMonths);
+        },
+        // 前半年
+        getLastSixMonths() {
+          const result = [];
+          const today = new Date(); // 当前日期
+          const currentYear = today.getFullYear();
+          const currentMonth = today.getMonth(); // 月份从0开始（0=1月，11=12月）
+
+          // 循环获取前6个月（i=1: 前1个月，i=6: 前6个月）
+          for (let i = 1; i <= 6; i++) {
+            let targetMonth = currentMonth - i;
+            let targetYear = currentYear;
+
+            // 处理月份跨年份（如1月-1=12月，年份减1）
+            if (targetMonth < 0) {
+              targetMonth += 12;
+              targetYear -= 1;
+            }
+
+            // 格式化月份为两位数（如5月→'05'）
+            const monthStr = String(targetMonth + 1).padStart(2, '0'); // 加1转为实际月份（1-12）
+            result.push(`${targetYear}-${monthStr}`);
+          }
+
+          return result;
+        },
       }
     }
 </script>

src/components/echartsList/line.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <DateTimeSelect v-if="!(lineData && lineData.hiddenTime)" @dataChange="dataChangeValue"></DateTimeSelect>
+        <DateTimeSelect v-if="!(lineData && lineData.hiddenTime)" :dateShowType="dateShowType" @dataChange="dataChangeValue"></DateTimeSelect>
         <div :id="`lineChart` + num" style="width:100%;height: 100%;" />
     </div>
 </template>
@@ -20,6 +20,10 @@
           type: String,
           default: null
         },
+        dateShowType: {
+          type: String,
+          default: null
+        },
         chartData: {
           type: Function,
           default: () => {
@@ -81,7 +85,7 @@
               type: 'value',
               name: '单位Mbps',
               splitLine: {
-                show: false,
+                show: true,
               },
             },
             series: [
@@ -100,8 +104,8 @@
           // })
         },
         dataChangeValue(val, days) {
-          // console.log(props.chartData(val));
+          let lineDataList = days && days.length > 0 ? days: this.lineData.lineXData;
-          this.getList(this.title, {data: this.lineData.data, lineXData: days});
+          this.getList(this.title, {data: this.lineData.data, lineXData: lineDataList});
         }
       }
     }

src/components/form/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
+      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="config && config.labelWidth || '130px'" class="demo-ruleForm">
         <el-row v-for="(formItem,index) of formList">
           <h4 class="form-header h4">{{formItem.config.title}}</h4>
           <el-col v-for="(formVal,key,index) of formItem['controls']" :span="formVal.span" v-if="!formVal.hidden" :style="formVal.style">

src/views/disRevenue/earnManage/revenueMethod/index.vue

@@ -56,7 +56,7 @@
           // 列显隐信息
           columns: {
             id: {label: `ID`, visible: false},
-            lastModifyTime: {label: `修改时间`, visible: true},
+            createTime: {label: `修改时间`, visible: true},
             nodeName: {label: `节点名称`, visible: true},
             hardwareSn: {label: `硬件SN`},
             changeContent: {label: `修改内容`, visible: true},

src/views/disRevenue/earnManage/server/dialogView.vue

@@ -3,26 +3,36 @@
     <div style="height: 90px;">
       <el-form ref="noticeRef" :model="form" label-width="80px">
         <el-form-item label="节点名称" prop="noticeType">
-          <el-select v-model="form.noticeType" multiple filterable allow-create default-first-option placeholder="请选择节点名称">
+          <el-select v-model="form.noticeType" multiple filterable allow-create default-first-option placeholder="请选择节点名称" @change="handleChange">
             <el-option
               v-for="item in selectChangeList"
-              :key="item.id"
+              :key="item.value"
-              :label="item.nodeName"
+              :label="item.label"
-              :value="item.id">
+              :value="item.value">
             </el-option>
           </el-select>
         </el-form-item>
       </el-form>
-      <el-switch v-for="item of switchData" v-model="item.type" :activeText="item.label" class="mr20" />
+      <el-switch v-for="item of switchData" v-model="item.checkType" :activeText="item.label" class="mr20" />
     </div>
     <div style="height: calc(100vh - 130px);overflow: scroll;">
-      <template v-for="(item,index) of selectChoose">
+<!--      <template v-for="(item,index) of selectChoose">-->
-        <EchartsLine v-show="switchData[0].type" :chartData="chartDataEvent"
+<!--        <EchartsLine v-show="switchData[0].checkType" :chartData="chartDataEvent"-->
-                     :lineData="lineDataParams" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[0].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsLine>
+<!--                     :lineData="lineDataParams" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[0].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsLine>-->
-        <EchartsLine v-show="switchData[1].type" :chartData="chartDataEvent"
+<!--        <EchartsLine v-show="switchData[1].checkType" :chartData="chartDataEvent"-->
-                     :lineData="lineDataParams" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[1].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsLine>
+<!--                     :lineData="lineDataParams" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[1].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsLine>-->
-        <EchartsBar v-show="switchData[2].type" :chartData="chartDataEvent"
+<!--        <EchartsBar v-show="switchData[2].checkType" :chartData="chartDataEvent"-->
-                    :barData="lineDataParams" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[2].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsBar>
+<!--                    :barData="lineDataParams" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[2].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsBar>-->
+<!--      </template>-->
+      <template v-for="(item,index) of echartListData">
+        <template v-if="item.dateShowType === 'day'">
+          <EchartsLine v-show="switchData[item.indexVal].checkType" :chartData="chartDataEvent" :dateShowType="item.dateShowType"
+                       :lineData="item.resultData" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[item.indexVal].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsLine>
+        </template>
+        <template v-if="item.dateShowType === 'month'">
+          <EchartsBar v-show="switchData[item.indexVal].checkType" :chartData="chartDataEvent" :dateShowType="item.dateShowType"
+                      :barData="item.resultData" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[item.indexVal].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsBar>
+        </template>
       </template>
     </div>
 <!--    <template #footer>-->
@@ -38,6 +48,7 @@
   import Form from '@/components/form/index.vue';
   import EchartsLine from "@/components/echartsList/line.vue";
   import EchartsBar from "@/components/echartsList/bar.vue";
+  import {graPackage, graMonthly, graEffectiveMonthly, graEffectiveDaily, graEffectiveAvgMonthly, graDaily, graAvgMonthly} from "@/api/disRevenue/earnManage"
   export default {
     name: 'DialogView',
     components: {Form, EchartsLine, EchartsBar},
@@ -50,6 +61,8 @@
         selectChangeList: [],
         switchData: [],
         selectChoose: [],
+        echartListData: [],
+        typeObj: {},
         lineDataParams: {
           lineXData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
           data: [120, 132, 101, 134, 90, 230, 210]
@@ -62,11 +75,12 @@
       if (this.storageKey) {
         this.paramsData = JSON.parse(localStorage.getItem(this.storageKey));
         if (this.paramsData && this.paramsData.dictList) {
-          this.switchData = this.paramsData.dictList.map(item => {
+          this.switchData = this.paramsData.dictList.map((item,index) => {
+            this.typeObj[item.value] = {type: item.value, indexVal: index};
             let obj = {
               label: item.label,
               value: item.value,
-              type: true
+              checkType: true
             };
             return obj;
           });
@@ -80,21 +94,120 @@
       localStorage.removeItem(this.storageKey);
     },
     methods: {
+      // 下拉数据改变时触发
+      handleChange(eventVal) {
+        let paramsVal = {
+          nodeNames: eventVal
+        };
+        this.graPackageList(paramsVal);
+        this.graMonthlyList(paramsVal);
+        this.graEffectiveMonthlyList(paramsVal);
+        this.graEffectiveDailyList(paramsVal);
+        this.graEffectiveAvgMonthlyList(paramsVal);
+        this.graDailyList(paramsVal);
+        this.graAvgMonthlyList(paramsVal);
+      },
+      // 初始化
       processData(list) {
-        this.selectChangeList = list;
+        let nameArr = [];
-        if (list.length >=2) {
+        let nameListArr = [];
-          this.form.noticeType = [list[0].id, list[1].id];
+        list.forEach(item => {
+          if (!nameArr.includes(item.nodeName)) {
+            item.label = item.nodeName;
+            item.value = item.nodeName;
+            nameArr.push(item.nodeName);
+            nameListArr.push(item);
+          }
+        });
+        if (nameArr && nameArr.length > 0) {
+          this.selectChangeList = nameListArr;
+          if (nameListArr.length >=2) {
+            this.form.noticeType = [nameListArr[0].label, nameListArr[1].label];
           } else {
-          this.form.noticeType = [list[0].id];
+            this.form.noticeType = [nameListArr[0].label];
           }
           this.form.noticeType.forEach(item => {
-          list.some(val => {
+            nameListArr.some(val => {
-            if (item === val.id) {
+              if (item === val.label) {
                 this.selectChoose.push(val);
                 return true;
               }
             });
           });
+          let paramsVal = {
+            nodeNames: nameArr
+          };
+          this.graPackageList(paramsVal);
+          this.graMonthlyList(paramsVal);
+          this.graEffectiveMonthlyList(paramsVal);
+          this.graEffectiveDailyList(paramsVal);
+          this.graEffectiveAvgMonthlyList(paramsVal);
+          this.graDailyList(paramsVal);
+          this.graAvgMonthlyList(paramsVal);
+        }
+      },
+      // 95带宽值Mbps/日---图表
+      graDailyList(nameVal){
+        graDaily(nameVal).then(res => {
+          if (res && res.data && res.data.resultData) {
+            let dataList = Object.assign({dateShowType: 'day'},res.data, this.typeObj[1]);
+            this.echartListData.push(dataList);
+          }
+        });
+      },
+      // 95带宽值Mbps/月---图表
+      graMonthlyList(nameVal){
+        graMonthly(Object.assign({dateShowType: 'month'}, {resourceType: 1, bandwidthType: 2}, nameVal)).then(res => {
+          if (res && res.data && res.data.resultData) {
+            let dataList = Object.assign({},res.data, this.typeObj[2]);
+            this.echartListData.push(dataList);
+          }
+        });
+      },
+      // 包端图表
+      graPackageList(nameVal){
+        graPackage(Object.assign({dateShowType: 'day'}, {resourceType: 1, bandwidthType: 3}, nameVal)).then(res => {
+          if (res && res.data && res.data.resultData) {
+            let dataList = Object.assign({},res.data, this.typeObj[3]);
+            this.echartListData.push(dataList);
+          }
+        });
+      },
+      // 月均日95值Mbps---图表
+      graAvgMonthlyList(nameVal){
+        graAvgMonthly(nameVal).then(res => {
+          if (res && res.data && res.data.resultData) {
+            let dataList = Object.assign({dateShowType: 'month'},res.data, this.typeObj[4]);
+            this.echartListData.push(dataList);
+          }
+        });
+      },
+      // 有效-95带宽值Mbps/日---图表
+      graEffectiveDailyList(nameVal){
+        graEffectiveDaily(nameVal).then(res => {
+          if (res && res.data && res.data.resultData) {
+            let dataList = Object.assign({dateShowType: 'day'},res.data, this.typeObj[5]);
+            this.echartListData.push(dataList);
+          }
+        });
+      },
+      // 有效-95带宽值Mbps/月----图表
+      graEffectiveMonthlyList(nameVal){
+        graEffectiveMonthly(nameVal).then(res => {
+          if (res && res.data && res.data.resultData) {
+            let dataList = Object.assign({dateShowType: 'month'},res.data, this.typeObj[6]);
+            this.echartListData.push(dataList);
+          }
+        });
+      },
+      // 有效-月均日95值Mbps----图表
+      graEffectiveAvgMonthlyList(nameVal){
+        graEffectiveAvgMonthly(nameVal).then(res => {
+          if (res && res.data && res.data.resultData) {
+            let dataList = Object.assign({dateShowType: 'day'},res.data, this.typeObj[7]);
+            this.echartListData.push(dataList);
+          }
+        });
       },
       chartDataEvent(val) {
         // console.log('val===',val);

src/views/disRevenue/earnManage/serverRevenue/index.vue

@@ -8,10 +8,10 @@
                           placeholder="请选择节点名称"
                           clearable>
                       <el-option
-                              v-for="dict in dict.type.sys_normal_disable"
+                              v-for="item in nodeNameList"
-                              :key="dict.value"
+                              :key="item.value"
-                              :label="dict.label"
+                              :label="item.label"
-                              :value="dict.value"/>
+                              :value="item.value"/>
                   </el-select>
               </el-form-item>
 <!--          </el-col>-->
@@ -33,7 +33,11 @@
 <!--          </el-col>-->
         </el-form>
         <!-- 表格数据 -->
-        <TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange"></TableList>
+        <TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
+          <template #tempRevenue="{ row, column }">
+            <dict-tag :options="dict.type.eps_revenue_method" :value="row.revenueMethod"/>
+          </template>
+        </TableList>
         <!-- 修改-->
         <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
             <el-form ref="noticeRef" :model="formList" label-width="90px">
@@ -62,9 +66,9 @@
                     <el-select v-model="formList.trafficPort" placeholder="请选择流量端口">
                         <el-option
                                 v-for="item in profitTypeList"
-                                :key="item.profitId"
+                                :key="item.id"
-                                :label="item.profitName"
+                                :label="item.interfaceName"
-                                :value="item.profitId"/>
+                                :value="item.id"/>
                     </el-select>
                 </el-form-item>
                 <el-form-item label="包端带宽值" prop="packageBandwidth" v-show="formList.revenueMethod === '2'">
@@ -84,6 +88,7 @@
 <script setup name="ServerRevenue">
     import TableList from "@/components/table/index.vue";
     import {listRevenueConfig, listAllBusinessList,updateRevenueConfig} from "@/api/disRevenue/earnManage"
+    import {postInterFaceName, listAllResourList} from "@/api/disRevenue/resource"
     export default {
       name: 'serverRevenue',
       dicts: ['sys_normal_disable', 'eps_revenue_method'],
@@ -95,16 +100,13 @@
           showSearch: true,
           open: false,
           title: '',
-          profitTypeList: [
+          profitTypeList: [],
-            {value: '1', label: '流量'},
-            {value: '2', label: '包端'}
-          ],
           // 列显隐信息
           columns: {
             id: { label: `id`, visible: false },
             nodeName: { label: `节点名称`, visible: true },
             hardwareSn: { label: `硬件SN`, visible: false},
-            revenueMethod: { label: `收益方式`, visible: true },
+            revenueMethod: { label: `收益方式`, slotName: 'tempRevenue', visible: true },
             trafficPort: { label: `流量网口`, visible: true },
             bandwidth95: { label: `95宽带值（Mbps）`, visible: true },
             lastModifyTime: { label: `修改时间`, visible: true }
@@ -125,7 +127,7 @@
           formList: {
             nodeName: '',
             businessName: '',
-            revenueMethod: '',
+            revenueMethod: '1',
             trafficPort: '',
             packageBandwidth: '',
 
@@ -136,12 +138,21 @@
             total: 0
           },
           busNameList: [],
+          nodeNameList: [],
         }
       },
       created() {
         this.getList();
+        this.fnNodeName();
       },
       methods: {
+        fnNodeName() {
+          listAllResourList({resourceType: 1}).then(val => {
+            this.nodeNameList = val && val.map(item => {
+              return Object.assign({label: item.resourceName, value: item.resourceName});
+            });
+          });
+        },
         /** 查询角色列表 */
         getList() {
           this.loading = true;
@@ -166,11 +177,20 @@
 
         /** 修改弹窗 */
         handleUpdate(row) {
+          this.resetForm("noticeRef");
           this.formList = {};
           this.open = true;
           this.title = "修改收益方式";
-          this.formList = row;
+          this.formList = {
+            id: row.id,
+            nodeName: row.nodeName,
+            businessName: row.businessCode,
+            revenueMethod: row.revenueMethod || '1',
+            serverIp: row.serverIp,
+            packageBandwidth: row.packageBandwidth
+          };
           this.busiName();
+          this.interFaceNameList();
         },
         // 业务名称查询
         busiName() {
@@ -180,11 +200,33 @@
             });
           });
         },
+        // 流量端口
+        interFaceNameList() {
+          postInterFaceName({resourceType: 1, serverIp: this.formList.serverIp}).then(res => {
+            this.profitTypeList = res && res;
+          });
+        },
         /** 提交按钮 */
         submitForm() {
-            console.log('form=',this.formList);
+          this.profitTypeList.find(item => {
+            if (item.id === this.formList['trafficPort'] || item.interfaceName === this.formList['trafficPort']) {
+              this.formList['trafficPort'] = item.interfaceName;
+            }
+          });
+          this.busNameList.find(item => {
+            if (item.value === this.formList['businessName'] || item.label === this.formList['businessName']) {
+              this.formList['businessName'] = item.label;
+              this.formList['businessCode'] = item.value;
+            }
+          });
+          if (this.formList.revenueMethod === '2') {
+            this.formList['trafficPort'] = null;
+          } else {
+            this.formList['packageBandwidth'] = null;
+          }
           updateRevenueConfig(this.formList).then(res => {
             this.open = false;
+            this.$modal.msgSuccess("操作成功！");
           });
         },
         /** 取消按钮 */

src/views/disRevenue/resource/register/handle.vue

@@ -10,7 +10,7 @@
   export default {
     name: 'RegisterHandle',
     components: {Form},
-    dicts: ['rm_register_resource_type', 'rm_register_protocol', 'rm_register_port', 'rm_register_version', 'rm_register_security_level', 'rm_register_permission', 'rm_register_encryption'],
+    dicts: ['rm_register_resource_type', 'rm_register_protocol', 'rm_register_snmp_detect','rm_register_version', 'rm_register_security_level', 'rm_register_permission', 'rm_register_encryption'],
     data() {
       return {
         ruleForm: {
@@ -21,7 +21,7 @@
           rwPermission: '1',
           encryption: '1',
         },
-        formList: {},
+        formList: [],
         paramsData: {}
       }
     },
@@ -42,25 +42,28 @@
             id: {label: 'ID',hidden: true},
             hardwareSn: {label: '硬件SN', span: 12, type: 'input',
               disabled: objVal && objVal.id ? true : false, rules: [{required: true, message: '请输入硬件SN', trigger: 'blur'}]},
-            resourceName: {label: '资源名称', span: 12, type: 'input'},
+            resourceName: {label: '资源名称', span: 12, type: 'input',required: true},
             resourceType: {label: '资源类型', span: 12, type: 'radio', options: this.dict.type.rm_register_resource_type},
-            ipAddress: {label: 'IP地址', span: 12, type: 'input'},
+            ipAddress: {label: 'IP地址', span: 12, type: 'input',required: true, disabled: objVal && objVal.registrationStatus === '1' ? true : false},
-            protocol: {label: '协议', span: 12, type: 'radio', options: this.dict.type.rm_register_protocol,},
+            protocol: {label: '协议', span: 12, type: 'radio', options: this.dict.type.rm_register_protocol, required: true},
-            resourcePort: {label: '端口', span: 12, type: 'input', rules: [{required: true, message: '请输入硬件SN', trigger: 'blur'}]},
+            resourcePort: {label: '端口', span: 12, type: 'input', rules: [{required: true, message: '请输入硬件SN', trigger: 'blur'}],disabled: objVal && objVal.registrationStatus === '1' ? true : false},
             // otherPortName: {label: ' ', span: 4, type: 'input',
             //   hidden: objVal && objVal.resourcePort === '2' ? false : true},
-            snmp: {label: 'SNMP探测', span: 12, type: 'radio', eventName: 'change', options: this.dict.type.rm_register_version},
+            snmpDetect: {label: 'SNMP探测', span: 12, type: 'radio', eventName: 'change',required: true, options: this.dict.type.rm_register_snmp_detect},
-            resourceVersion: {label: 'SNMP版本', span: 12, type: 'radio',
+            resourceVersion: {label: 'SNMP版本', span: 12, type: 'radio',required: true,
-              options: this.dict.type.rm_register_version,hidden: objVal && objVal.snmp === '1' ? false : true},
+              options: this.dict.type.rm_register_version,hidden: objVal && objVal.snmpDetect === '1' ? false : true},
-            // securityLevel: {label: '安全级别', span: 12, type: 'radio',
-            //   options: this.dict.type.rm_register_security_level,hidden: objVal && objVal.resourcePort === '1' ? false : true},
             rwPermission: {label: '读写权限', span: 12, type: 'radio',
-              options: this.dict.type.rm_register_permission,hidden: objVal && objVal.snmp === '1' ? false : true},
+              options: this.dict.type.rm_register_permission,hidden: objVal && objVal.snmpDetect === '1' ? false : true},
-            resourceUserName: {label: '团体名称', span: 12, type: 'input', hidden: objVal && objVal.snmp === '1' ? false : true},
+            securityLevel: {label: '安全级别', span: 12, type: 'radio',
-            // encryption: {label: '加密方式', span: 12, type: 'radio',
+              options: this.dict.type.rm_register_security_level,hidden: objVal && objVal.id ? false : true},
-            //   options: this.dict.type.rm_register_encryption,hidden: objVal && objVal.resourcePort === '1' ? false : true},
+            encryption: {label: '加密方式', span: 12, type: 'radio',
-            resourcePwd: {label: 'SNMP采集地址', span: 12, type: 'input', hidden: objVal && objVal.snmp === '1' ? false : true},
+              options: this.dict.type.rm_register_encryption,hidden: objVal && objVal.id ? false : true},
-            description: {label: '描述', span: 24, type: 'textarea'},
+            teamName: {label: '团体名称', span: 12, type: 'input', hidden: objVal && objVal.snmpDetect === '1' ? false : true,disabled: objVal && objVal.registrationStatus === '1' ? true : false},
+            snmpCollectAddr: {label: 'SNMP采集地址', span: 12, type: 'input',required: true, hidden: objVal && objVal.snmpDetect === '1' ? false : true, disabled: objVal && objVal.registrationStatus === '1' ? true : false},
+            resourceUserName: {label: '用户名', span: 12, type: 'input', hidden: objVal && objVal.id ? false : true, disabled: objVal && objVal.registrationStatus === '1' ? true : false},
+            resourcePwd: {label: '密码', span: 12, type: 'input', hidden: objVal && objVal.id ? false : true, disabled: objVal && objVal.registrationStatus === '1' ? true : false},
+            description: {label: '描述', span: 12, type: 'textarea'},
+            agentVersion: {label: 'AGENT版本', span: 12, type: 'input',disabled: objVal && objVal.id ? true : false},
             // customerName: {label: '设备业务客户', span: 12, type: 'input'},
             // serviceNumber: {label: '业务号', span: 12, type: 'input'},
           }
@@ -80,25 +83,17 @@
       callback(result, dataVal, formVal) {
         if (result && result.fnCode) {
           switch (result.fnCode) {
-            case 'snmp':
+            case 'snmpDetect':
               if (dataVal === '1') {
-                // this.formList[0].controls.otherPortName['hidden'] = true;
                 this.formList[0].controls.resourceVersion['hidden'] = false;
-                // this.formList[0].controls.securityLevel['hidden'] = false;
                 this.formList[0].controls.rwPermission['hidden'] = false;
-                // this.formList[0].controls.resourceVersion['hidden'] = false;
+                this.formList[0].controls.snmpCollectAddr['hidden'] = false;
-                // this.formList[0].controls.encryption['hidden'] = false;
+                this.formList[0].controls.teamName['hidden'] = false;
-                this.formList[0].controls.resourcePwd['hidden'] = false;
-                this.formList[0].controls.resourceUserName['hidden'] = false;
               } else {
-                // this.formList[0].controls.otherPortName['hidden'] = false;
                 this.formList[0].controls.resourceVersion['hidden'] = true;
-                // this.formList[0].controls.securityLevel['hidden'] = true;
                 this.formList[0].controls.rwPermission['hidden'] = true;
-                // this.formList[0].controls.resourceVersion['hidden'] = true;
+                this.formList[0].controls.snmpCollectAddr['hidden'] = true;
-                // this.formList[0].controls.resourceUserName['hidden'] = true;
+                this.formList[0].controls.teamName['hidden'] = true;
-                // this.formList[0].controls.encryption['hidden'] = true;
-                this.formList[0].controls.resourcePwd['hidden'] = true;
               }
               break;
             case 'submit':

src/views/disRevenue/resource/resMonitor/index.vue

@@ -1,8 +1,21 @@
 <template>
   <div class="app-container pageTopForm">
-<!--    <div style="height: 200px;">-->
+    <div class="w100 mb10" style="height: 125px;font-size: 14px">
-<!--      <EchartsPie v-for="item of dataList" :dataList="item" style="width: 33%;" class="h100 disInlineBlock"></EchartsPie>-->
+      <div v-for="(item,index) of headerList" class="disInlineBlock h100 verticalAlign" :style="`margin-right:${index + 1 === headerList.length ? 'none' : '1%'}`"
-<!--    </div>-->
+           style="width: 32.66%; border: 1px solid #d8dce6;border-radius: 10px;padding: 10px 20px;">
+        <div>{{item.title}}</div>
+        <div class="mtb10">{{item.percent}}%</div>
+        <el-progress :percentage="item.percent" :show-text="false"></el-progress>
+        <div class="mt10" style="font-size: 12px">
+          <span><span class="mr10">{{item.btmOne}}</span>{{item.numOne}}</span>
+          <template v-if="index + 1 === headerList.length">
+            <br/>
+            <span><span class="mr10">{{item.btmTow}}</span>{{item.numTow}}</span>
+          </template>
+          <span v-else class="ml20"><span class="mr10">{{item.btmTow}}</span>{{item.numTow}}</span>
+        </div>
+      </div>
+    </div>
     <el-row :gutter="20">
       <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
         <!--部门数据-->
@@ -18,7 +31,7 @@
         </pane>
         <!--用户数据-->
         <pane size="84">
-          <el-form :model="queryParams" ref="queryRef" v-show="showSearch" label-width="auto">
+          <el-form :model="queryParams" ref="queryRef" v-show="showSearch" label-width="80px">
             <el-col :span="7">
               <el-form-item label="搜索" prop="switchName">
                 <el-input
@@ -58,7 +71,7 @@
               </el-form-item>
             </el-col>
             <el-col :span="5">
-              <el-form-item>
+              <el-form-item class="lastBtnSty">
                 <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                 <el-button icon="Refresh" @click="resetQuery">重置</el-button>
               </el-form-item>
@@ -129,6 +142,11 @@
             ]
           }
         },
+        headerList: [
+          {title: '服务器在线率', percent: 50, btmOne: '服务器在线数', numOne: '1000', btmTow: '服务器总数', numTow: '2000'},
+          {title: '交换机在线率', percent: 50, btmOne: '交换机在线数', numOne: '1000', btmTow: '交换机总数', numTow: '2000'},
+          {title: '服务器整体发送带宽利用率', percent: 50, btmOne: '服务器发送带宽总量', numOne: '10020 Mbps', btmTow: '服务器总带宽', numTow: '2000000 Mbps'},
+        ],
         dataList: [{
           centerVal: '56',
           unit: '台',
@@ -254,3 +272,8 @@
     }
   }
 </script>
+<style scoped>
+  ::v-deep .lastBtnSty .el-form-item__content{
+    margin-left: unset!important;
+  }
+</style>

src/views/disRevenue/resource/topology/details.vue

@@ -1,63 +1,107 @@
 <template>
     <div class="app-container">
-        <Form :formList="formList" :ruleFormData="ruleForm" @fnClick="callback"></Form>
+        <Form :formList="formList" :ruleFormData="ruleForm" :config="{labelWidth: '140px'}" @fnClick="callback"></Form>
     </div>
 </template>
 
 <script setup>
   import Form from '@/components/form/index.vue';
-  import {listHandle, addTopology, getTopology, updateTopology} from "@/api/disRevenue/resource"
+  import {listHandle, resNameBtType, addTopology, getTopology, updateTopology, postInterFaceName} from "@/api/disRevenue/resource"
   export default {
     name: 'TopologyDetails',
     components: {Form},
     dicts: ['rm_topology_type'],
     data() {
       return {
+        loading: false,
         ruleForm: {},
         formList: {},
-        paramsData: {}
+        paramsData: {},
+        switchNameList: [],
+        serverNameList: [],
+        serverPortList: [],
+        interfaceNameList: [],
       }
     },
     created() {
       this.paramsData = this.$route && this.$route.query;
       if (this.paramsData && this.paramsData.id) {
         this.getFormDataList(this.paramsData.id);
+      } else {
+        this.switchList();
+        this.fnServerNameList();
       }
       this.fnFormList();
-      this.switchList();
+
     },
     methods: {
       // formList集合
       fnFormList(objVal) {
         this.formList = [{
-          config: {title: '基本信息'},
+          config: {title: '基本信息',labelWidth: '140px'},
           controls: {
             id: {label: 'ID',hidden: true},
-            switchName: {label: '交换机名称', span: 12, type: 'select',options:[], rules: [{required: true, message: '请输入硬件SN', trigger: 'blur'}]},
+            switchName: {label: '交换机名称', span: 12, type: 'select', eventName: 'change', options:[], rules: [{required: true, message: '请输入硬件SN', trigger: 'blur'}]},
             interfaceName: {label: '接口名称', span: 12, type: 'select', options:[]},
             connectedDeviceType: {label: '接口连接设备类型', span: 12, type: 'select', options:this.dict.type.rm_topology_type},
-            serverName: {label: '服务器名称', span: 12, options:[], type: 'select'},
+            serverName: {label: '服务器名称', span: 12, eventName: 'change', options:[], type: 'select'},
             serverPort: {label: '服务器网口', span: 12, options:[], type: 'select'},
           }
         }];
       },
       // 获取交换机下拉
       switchList() {
-        listHandle({resourceType: 2}).then(val => {
+        resNameBtType({resourceType: 2}).then(val => {
-          this.formList[0].controls.switchName['options'] = val && val.rows.map(item => {
+          this.switchNameList = val && val;
+          this.formList[0].controls.switchName['options'] = val && val.map(item => {
+            if (this.paramsData && this.paramsData.id) {
+              if (item.resourceName === this.ruleForm.switchName) {
+                console.log('ruleForm===',this.ruleForm);
+                this.fnInterFaceNameList({switchIp: item.ipAddress});
+              }
+            }
             return Object.assign({label: item.resourceName, value: item.resourceName});
           });
         });
-        listHandle({resourceType: 1}).then(val => {
+      },
-          this.formList[0].controls.serverName['options'] = val && val.rows.map(item => {
+      // 接口名称
+      fnInterFaceNameList(val) {
+        postInterFaceName(Object.assign({},{resourceType: 2}, val)).then(res => {
+          this.interfaceNameList = res;
+          this.formList[0].controls.interfaceName['options'] = res && res.map(item => {
+            return Object.assign({label: item.interfaceName, value: item.id});
+          });
+        });
+      },
+      // 获取服务器下拉
+      fnServerNameList(){
+        resNameBtType({resourceType: 1}).then(val => {
+          this.serverNameList = val && val;
+          this.formList[0].controls.serverName['options'] = val && val.map(item => {
+            if (this.paramsData && this.paramsData.id) {
+              if (item.resourceName === this.ruleForm.serverName) {
+                this.fnInterFaceNameList({serverIp: item.ipAddress});
+              }
+            }
             return Object.assign({label: item.resourceName, value: item.resourceName});
           });
         });
       },
+      // 服务器网口
+      fnServerPortList(val) {
+        postInterFaceName(Object.assign({},{resourceType: 1}, val)).then(res => {
+          this.serverPortList = res;
+          this.formList[0].controls.serverPort['options'] = res && res.map(item => {
+            return Object.assign({label: item.interfaceName, value: item.id});
+          });
+        });
+      },
       // 获取详情
       getFormDataList(id) {
         getTopology(id).then(val => {
           this.ruleForm = val && val.data;
+          this.switchList();
+          this.fnServerNameList();
         }).catch(() => {
           this.$modal.msgError("操作失败")
         });
@@ -66,14 +110,58 @@
       callback(result, dataVal, formVal) {
         if (result && result.fnCode) {
           switch (result.fnCode) {
+            case 'switchName':
+              let switchIp = '';
+              this.switchNameList.find(item => {
+                if (item.resourceName === dataVal) {
+                  switchIp = item.ipAddress;
+                }
+              });
+              this.fnInterFaceNameList({switchIp: switchIp});
+              break;
+              case 'serverName':
+                let serverIp = '';
+                this.serverNameList.find(item => {
+                  if (item.resourceName === dataVal) {
+                    serverIp = item.ipAddress;
+                  }
+                });
+                this.fnServerPortList({serverIp: serverIp});
+                break;
             case 'submit':
+              this.switchNameList.find(item => {
+                if (item.resourceName === dataVal['switchName'] || item.resourceName === dataVal['switchName']) {
+                  dataVal['switchName'] = item.resourceName;
+                  dataVal['switchIpAddress'] = item.ipAddress;
+                  dataVal['switchSn'] = item.hardwareSn;
+                }
+              });
+              this.serverNameList.find(item => {
+                if (item.resourceName === dataVal['serverName'] || item.resourceName === dataVal['serverName']) {
+                  dataVal['serverName'] = item.resourceName;
+                  dataVal['serverSn'] = item.hardwareSn;
+                }
+              });
+              this.serverPortList.find(item => {
+                if (item.id === dataVal['serverPort'] || item.interfaceName === dataVal['serverPort']) {
+                  dataVal['serverPort'] = item.interfaceName;
+                }
+              });
+              this.interfaceNameList.find(item => {
+                if (item.id === dataVal['interfaceName'] || item.interfaceName === dataVal['interfaceName']) {
+                  dataVal['interfaceName'] = item.interfaceName;
+                }
+              });
               let fnType = addTopology;
               if (dataVal && dataVal.id) {
                 fnType = updateTopology;
               }
+              if(this.loading) return;
+              this.loading = true;
               fnType(dataVal).then(response => {
                 this.$modal.msgSuccess(response.msg);
                 this.$router.push("/resource/topology")
+                this.loading = false;
               }).catch(() => {
                 this.$modal.msgError("操作失败")
               });

src/views/index.vue

@@ -69,11 +69,13 @@ export default {
         {title: '交换机在线数量', num: '1111', unit: '个', lastVal: '交换机注册总数', lastNum: '11112222'},
       ],
       lineDataParams: {
-        titleVal: {x: '1%', y: '3%', textAlign: 'left'},
+        titleVal: {x: '1%', y: '3%',fontSize: 14, textAlign: 'left'},
         gridTop: '15%',
         seriesLabel: true,
         hiddenTime: true,
         yAxis: true,
+        hidAxisLabel: true,
+        hidSplitLine: true,
         name: ' ',
         lineData: ['业务名称1', '业务名称2', '业务名称3', '业务名称4', '业务名称5', '业务名称6', '业务名称7', '业务名称8', '业务名称9', '业务名称10'],
         data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10]