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

2025-09-03 10:43:09 +08:00
parent 8451b074f6
commit 7467bf2f5a
14 changed files with 530 additions and 119 deletions
--- a/src/api/disRevenue/earnManage.js
+++ b/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
+  })
+}
+
 /**      ------------------业务管理-------------------        */

 // 查询列表
--- a/src/api/disRevenue/resource.js
+++ b/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
+  })
+}

 /**   ----------------资源分组------------    */
 // 查询列表
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -89,6 +89,9 @@ div:focus {
 .p20 {
  padding: 20px;
 }
+.mtb10 {
+  margin: 10px 0;
+}
 .fontSize15 {
  font-size: 15px;
 }
--- a/src/components/echartsList/bar.vue
+++ b/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 = {};
-          if (dataXY && dataXY.titleVal) {
-            titleSet = {
+          let option = {
+            title: [{
              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);
        }
      }
--- a/src/components/echartsList/dateTimeSelect.vue
+++ b/src/components/echartsList/dateTimeSelect.vue
@@ -2,18 +2,25 @@
    <div class="ultabs">
        <el-date-picker
                v-model="dateRange"
-                type="daterange"
-                start-placeholder="开始时间"
-                end-placeholder="结束时间"
+                :type="dateShowType === 'day' ? 'daterange' : 'monthrange'"
+                :start-placeholder="dateShowType === 'day' ? '开始时间' : '开始日期'"
+                :end-placeholder="dateShowType === 'day' ? '结束时间' : '结束日期'"
                range-separator="至"
-                format="yyyy-MM-dd"
-                value-format="yyyy-MM-dd"
+                :format="dateShowType === 'day' ? 'yyyy-MM-dd' : 'yyyy-MM'"
+                :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') {
-            this.getLastDays(num - 1);
-          } else {
+          if (val && val === 'MONTH') {
            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>
--- a/src/components/echartsList/line.vue
+++ b/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));
-          this.getList(this.title, {data: this.lineData.data, lineXData: days});
+          let lineDataList = days && days.length > 0 ? days: this.lineData.lineXData;
+          this.getList(this.title, {data: this.lineData.data, lineXData: lineDataList});
        }
      }
    }
--- a/src/components/form/index.vue
+++ b/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">
--- a/src/views/disRevenue/earnManage/revenueMethod/index.vue
+++ b/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},
--- a/src/views/disRevenue/earnManage/server/dialogView.vue
+++ b/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"
-              :label="item.nodeName"
-              :value="item.id">
+              :key="item.value"
+              :label="item.label"
+              :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">
-        <EchartsLine v-show="switchData[0].type" :chartData="chartDataEvent"
-                     :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"
-                     :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"
-                    :barData="lineDataParams" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[2].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsBar>
+<!--      <template v-for="(item,index) of selectChoose">-->
+<!--        <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>-->
+<!--        <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>-->
+<!--        <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>-->
+<!--      </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,20 +94,119 @@
      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;
-        if (list.length >=2) {
-          this.form.noticeType = [list[0].id, list[1].id];
-        } else {
-          this.form.noticeType = [list[0].id];
-        }
-        this.form.noticeType.forEach(item => {
-          list.some(val => {
-            if (item === val.id) {
-              this.selectChoose.push(val);
-              return true;
-            }
+        let nameArr = [];
+        let nameListArr = [];
+        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 = [nameListArr[0].label];
+          }
+          this.form.noticeType.forEach(item => {
+            nameListArr.some(val => {
+              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) {
--- a/src/views/disRevenue/earnManage/serverRevenue/index.vue
+++ b/src/views/disRevenue/earnManage/serverRevenue/index.vue
@@ -8,10 +8,10 @@
                          placeholder="请选择节点名称"
                          clearable>
                      <el-option
-                              v-for="dict in dict.type.sys_normal_disable"
-                              :key="dict.value"
-                              :label="dict.label"
-                              :value="dict.value"/>
+                              v-for="item in nodeNameList"
+                              :key="item.value"
+                              :label="item.label"
+                              :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"
-                                :label="item.profitName"
-                                :value="item.profitId"/>
+                                :key="item.id"
+                                :label="item.interfaceName"
+                                :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: [
-            {value: '1', label: '流量'},
-            {value: '2', label: '包端'}
-          ],
+          profitTypeList: [],
          // 列显隐信息
          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("操作成功！");
          });
        },
        /** 取消按钮 */
--- a/src/views/disRevenue/resource/register/handle.vue
+++ b/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'},
-            protocol: {label: '协议', span: 12, type: 'radio', options: this.dict.type.rm_register_protocol,},
-            resourcePort: {label: '端口', span: 12, type: 'input', rules: [{required: true, message: '请输入硬件SN', trigger: 'blur'}]},
+            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, required: true},
+            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},
-            resourceVersion: {label: 'SNMP版本', span: 12, type: 'radio',
-              options: this.dict.type.rm_register_version,hidden: objVal && objVal.snmp === '1' ? false : true},
-            // securityLevel: {label: '安全级别', span: 12, type: 'radio',
-            //   options: this.dict.type.rm_register_security_level,hidden: objVal && objVal.resourcePort === '1' ? false : true},
+            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',required: true,
+              options: this.dict.type.rm_register_version,hidden: objVal && objVal.snmpDetect === '1' ? false : true},
            rwPermission: {label: '读写权限', span: 12, type: 'radio',
-              options: this.dict.type.rm_register_permission,hidden: objVal && objVal.snmp === '1' ? false : true},
-            resourceUserName: {label: '团体名称', span: 12, type: 'input', hidden: objVal && objVal.snmp === '1' ? false : true},
-            // encryption: {label: '加密方式', span: 12, type: 'radio',
-            //   options: this.dict.type.rm_register_encryption,hidden: objVal && objVal.resourcePort === '1' ? false : true},
-            resourcePwd: {label: 'SNMP采集地址', span: 12, type: 'input', hidden: objVal && objVal.snmp === '1' ? false : true},
-            description: {label: '描述', span: 24, type: 'textarea'},
+              options: this.dict.type.rm_register_permission,hidden: objVal && objVal.snmpDetect === '1' ? false : true},
+            securityLevel: {label: '安全级别', span: 12, type: 'radio',
+              options: this.dict.type.rm_register_security_level,hidden: objVal && objVal.id ? false : true},
+            encryption: {label: '加密方式', span: 12, type: 'radio',
+              options: this.dict.type.rm_register_encryption,hidden: objVal && objVal.id ? false : true},
+            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.encryption['hidden'] = false;
-                this.formList[0].controls.resourcePwd['hidden'] = false;
-                this.formList[0].controls.resourceUserName['hidden'] = false;
+                this.formList[0].controls.snmpCollectAddr['hidden'] = false;
+                this.formList[0].controls.teamName['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.resourceUserName['hidden'] = true;
-                // this.formList[0].controls.encryption['hidden'] = true;
-                this.formList[0].controls.resourcePwd['hidden'] = true;
+                this.formList[0].controls.snmpCollectAddr['hidden'] = true;
+                this.formList[0].controls.teamName['hidden'] = true;
              }
              break;
            case 'submit':
--- a/src/views/disRevenue/resource/resMonitor/index.vue
+++ b/src/views/disRevenue/resource/resMonitor/index.vue
@@ -1,8 +1,21 @@
 <template>
  <div class="app-container pageTopForm">
-<!--    <div style="height: 200px;">-->
-<!--      <EchartsPie v-for="item of dataList" :dataList="item" style="width: 33%;" class="h100 disInlineBlock"></EchartsPie>-->
-<!--    </div>-->
+    <div class="w100 mb10" style="height: 125px;font-size: 14px">
+      <div v-for="(item,index) of headerList" class="disInlineBlock h100 verticalAlign" :style="`margin-right:${index + 1 === headerList.length ? 'none' : '1%'}`"
+           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>
--- a/src/views/disRevenue/resource/topology/details.vue
+++ b/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 => {
-          this.formList[0].controls.switchName['options'] = val && val.rows.map(item => {
+        resNameBtType({resourceType: 2}).then(val => {
+          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("操作失败")
              });
--- a/src/views/index.vue
+++ b/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]