首页联调、资源监控开发、文字和列表bug修复

src/api/disRevenue/earnManage.js

@@ -1,6 +1,6 @@
 import request from '@/utils/request'
 
-/**      ------------------服务器宽带收益-------------------        */
+/**      ------------------服务器带宽收益-------------------        */
 // 查询列表
 export function listBandWidth(data) {
     return request({
@@ -74,7 +74,7 @@ export function graPackage(data) {
     data: data
   })
 }
-// 95宽带值Mbps/月---图
+// 95带宽值Mbps/月---图
 export function graMonthly(data) {
   return request({
     url: '/system/bandwidth/graphicalAnalysisMonthly',
@@ -82,7 +82,7 @@ export function graMonthly(data) {
     data: data
   })
 }
-// 有效-95宽带值Mbps/月---图
+// 有效-95带宽值Mbps/月---图
 export function graEffectiveMonthly(data) {
   return request({
     url: '/system/bandwidth/graphicalAnalysisEffectiveMonthly',
@@ -90,7 +90,7 @@ export function graEffectiveMonthly(data) {
     data: data
   })
 }
-// 有效-95宽带值Mbps/日---图
+// 有效-95带宽值Mbps/日---图
 export function graEffectiveDaily(data) {
   return request({
     url: '/system/bandwidth/graphicalAnalysisEffectiveDaily',
@@ -106,7 +106,7 @@ export function graEffectiveAvgMonthly(data) {
     data: data
   })
 }
-// 95宽带值/日----图
+// 95带宽值/日----图
 export function graDaily(data) {
   return request({
     url: '/system/bandwidth/graphicalAnalysisDaily',

src/api/homeIndex.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 统计当前在线服务器的流量相关的业务数
+export function countBusiness() {
+  return request({
+    url: '/system/screen/countBusinessByTraffic',
+    method: 'get'
+  })
+}
+// 当前在线服务器发送带宽总流量
+export function sumTrafficByServer() {
+  return request({
+    url: '/system/screen/sumTrafficByServer',
+    method: 'get'
+  })
+}
+// 当前在线交换机接收带宽总流量
+export function sumTrafficBySwitch() {
+  return request({
+    url: '/system/screen/sumTrafficBySwitch',
+    method: 'get'
+  })
+}
+// 交换机在线数量
+export function countSwitchNum() {
+  return request({
+    url: '/system/screen/countSwitchNum',
+    method: 'get'
+  })
+}
+// 服务器在线率
+export function serverOnlineRate() {
+  return request({
+    url: '/system/screen/getServerOnlineRate',
+    method: 'get'
+  })
+}
+// 当日业务的在线设备数量统计TOP5
+export function countDeviceNumTop5() {
+  return request({
+    url: '/system/screen/countDeviceNumTop5',
+    method: 'get'
+  })
+}

src/assets/styles/index.scss

@@ -142,6 +142,10 @@ aside {
   height: calc(100vh - 132px);
   padding: 8px 20px 20px;
 }
+.app-viewContent {
+  height: calc(100vh - 85px);
+  overflow: scroll;
+}
 
 .components-container {
   margin: 30px 50px;
@@ -282,3 +286,16 @@ aside {
   left: 10px;
   right: 0px;
 }
+// form表单只读时
+.el-input.is-disabled .el-input__inner {
+  background-color: transparent;
+  border-color: transparent;
+  color: #C0C4CC;
+  cursor: not-allowed;
+}
+.el-input.is-disabled .el-input__icon {
+  display: none;
+}
+.el-select .el-input.is-disabled .el-input__inner:hover {
+  border-color: transparent;
+}

src/components/RightToolbar/index.vue

@@ -153,6 +153,7 @@ export default {
       } else {
         this.columns[key].visible = event
       }
+      this.$emit("columnsChange", this.columns);
     },
     // 切换全选/反选
     toggleCheckAll() {
@@ -162,6 +163,7 @@ export default {
       } else {
         Object.values(this.columns).forEach((col) => (col.visible = newValue))
       }
+      this.$emit("columnsChange", this.columns);
     }
   },
 }

src/components/echartsList/bar.vue

@@ -76,7 +76,7 @@
               }
             },
             grid: {
-              top: dataXY && dataXY.gridTop || '20%',
+              top: dataXY && dataXY.gridTop || '80px',
               left: '3%',
               right: '4%',
               bottom: '3%',
@@ -125,6 +125,7 @@
                 label: {
                   show: dataXY && dataXY.seriesLabel || false,
                   position: 'insideLeft',
+                  offset: [-4, 0]
                 }
               }
             ]

src/components/echartsList/dateTimeSelect.vue

@@ -1,27 +1,27 @@
 <template>
-    <div class="ultabs">
+    <div class="ultabs" :style="{'margin-top': dateShowType && (dateShowType === 'day' ||  dateShowType === 'month') ? '35px' : '10px'}">
-        <el-date-picker
+      <ul style="display: inline-block;padding-left: 1px;vertical-align: middle;margin:0;float: right;">
-                v-model="dateRange"
+        <template v-if="dateShowType === 'day'">
-                :type="dateShowType === 'day' ? 'daterange' : 'monthrange'"
+          <li :class="{ 'activesbgs' : isActive == 'DAY' }" @click="toggle('DAY',7)">前7天</li>
-                :start-placeholder="dateShowType === 'day' ? '开始时间' : '开始日期'"
+          <li :class="{ 'activesbgs' : isActive == 'WEEK' }" @click="toggle('WEEK',15)">前15天</li>
-                :end-placeholder="dateShowType === 'day' ? '结束时间' : '结束日期'"
+          <li :class="{ 'activesbgs' : isActive == 'MONTH' }" @click="toggle('MONTH')">前一个月</li>
-                range-separator="至"
+        </template>
-                :format="dateShowType === 'day' ? 'yyyy-MM-dd' : 'yyyy-MM'"
+        <template v-if="dateShowType === 'month'">
-                :value-format="dateShowType === 'day' ? 'yyyy-MM-dd' : 'yyyy-MM'"
+          <li :class="{ 'activesbgs' : isActive == 'THREEMONTH' }" @click="toggle('THREEMONTH', 3)">前三个月</li>
-                style="display: inline-block!important;width: 45%!important;vertical-align: middle;"
+          <li :class="{ 'activesbgs' : isActive == 'HALFYEAR' }" @click="toggle('HALFYEAR', 6)">前半年</li>
-                @change="dateChange"/>
+          <li :class="{ 'activesbgs' : isActive == 'YEAR' }" @click="toggle('YEAR', 12)">前一年</li>
-        <ul style="display: inline-block;padding-left: 10px;vertical-align: middle;">
+        </template>
-          <template v-if="dateShowType === 'day'">
+      </ul>
-            <li :class="{ 'activesbgs' : isActive == 'DAY' }" @click="toggle('DAY',7)">前7天</li>
+      <el-date-picker
-            <li :class="{ 'activesbgs' : isActive == 'WEEK' }" @click="toggle('WEEK',15)">前15天</li>
+              v-model="dateRange"
-            <li :class="{ 'activesbgs' : isActive == 'MONTH' }" @click="toggle('MONTH')">前一个月</li>
+              :type="dateShowType === 'month' ? 'monthrange' : 'daterange'"
-          </template>
+              :start-placeholder="dateShowType === 'month' ? '开始日期' : '开始时间'"
-          <template v-else>
+              :end-placeholder="dateShowType === 'month' ? '结束日期' : '结束时间'"
-            <li :class="{ 'activesbgs' : isActive == 'THREEMONTH' }" @click="toggle('THREEMONTH', 3)">前三个月</li>
+              range-separator="至"
-            <li :class="{ 'activesbgs' : isActive == 'HALFYEAR' }" @click="toggle('HALFYEAR', 6)">前半年</li>
+              :format="dateShowType === 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'"
-            <li :class="{ 'activesbgs' : isActive == 'YEAR' }" @click="toggle('YEAR', 12)">前一年</li>
+              :value-format="dateShowType === 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'"
-          </template>
+              style="display: inline-block!important;width: 45%!important;vertical-align: middle;float: right;margin-right: 10px;"
-        </ul>
+              @change="dateChange"/>
     </div>
 </template>
 
@@ -154,12 +154,17 @@
     }
 </script>
 <style scoped>
+  ::v-deep .el-range-editor .el-range-input {
+    vertical-align: super!important;
+  }
+  ::v-deep .el-date-editor .el-range-separator {
+    vertical-align: super!important;
+  }
     .ultabs {
       width: 500px;
       float: right;
       position: relative;
       z-index: 9;
-      margin-top: -10px;
     }
 
     .ultabs ul li {

src/components/echartsList/line.vue

@@ -57,14 +57,33 @@
       },
       methods: {
         getList(title, dataXY) {
-          const lineDataListIntance = echarts.init(document.getElementById('lineChart' + this.num))
+          const lineDataListIntance = echarts.init(document.getElementById('lineChart' + this.num));
+          let titleList = {text: title, x: '50%', y: '3%', textAlign: 'center'};
+          if (dataXY && dataXY.titleVal) {
+            titleList = Object.assign({},titleList, dataXY.titleVal);
+          }
+          let series = [];
+          if (dataXY && dataXY.dataList) {
+            dataXY.dataList.forEach(item => {
+              series.push({
+                name: item.name,
+                type: 'line',
+                stack: 'Total',
+                data: item.data
+              });
+            });
+          } else {
+            series = [{
+              data: dataXY.data,
+              type: 'line',
+              // areaStyle: {  // 阴影
+              //   color: 'rgba(140, 158, 217, 1)'
+              // }
+            }];
+          }
           let option = {
-            title: [{
+            title: [titleList],
-              text: title,
+            legend: dataXY && dataXY.legend ? dataXY.legend : {},
-              x: '50%',
-              y: '3%',
-              textAlign: 'center',
-            }],
             tooltip: {
               trigger: 'axis',
               axisPointer: {
@@ -75,7 +94,7 @@
               }
             },
             grid: {
-              top: '20%',
+              top: dataXY && dataXY.gridTop || '80px',
               left: '2%',
               right: '4%',
               bottom: '3%',
@@ -99,15 +118,7 @@
                 show: true,
               },
             },
-            series: [
+            series: series
-              {
-                data: dataXY.data,
-                type: 'line',
-                // areaStyle: {  // 阴影
-                //   color: 'rgba(140, 158, 217, 1)'
-                // }
-              }
-            ]
           };
           lineDataListIntance.setOption(option);
           // window.addEventListener("resize", () => {

src/components/form/index.vue

@@ -14,7 +14,7 @@
                   v-model="ruleForm[key]"
                   :clearable="formVal.clearable !== false"
                   :disabled="toBoolean(formVal.disabled)"
-                  :placeholder="formVal.placeholder || `请输入${formVal.label}`"
+                  :placeholder="toBoolean(formVal.disabled) ? null : formVal.placeholder || `请输入${formVal.label}`"
                   :class="toBoolean(formVal.disabled) ? 'cursorAuto' : ''"
                   @[formVal.eventName]="(val) => handleChange(key,val,formVal)"></el-input>
               </template>
@@ -26,14 +26,14 @@
                   :rows="formVal.rows"
                   :clearable="formVal.clearable !== false"
                   :class="toBoolean(formVal.disabled) ? 'cursorAuto' : ''"
-                  :placeholder="formVal.placeholder || `请输入${formVal.label}`"></el-input>
+                  :placeholder="toBoolean(formVal.disabled) ? null : formVal.placeholder || `请输入${formVal.label}`"></el-input>
               </template>
 
               <template v-else-if="formVal.type === 'select'">
                 <el-select
                   v-model="ruleForm[key]"
-                  :placeholder="formVal.placeholder || `请选择${formVal.label}`"
                   :disabled="toBoolean(formVal.disabled)"
+                  :placeholder="toBoolean(formVal.disabled) ? null : formVal.placeholder || `请输入${formVal.label}`"
                   :clearable="formVal.clearable !== false"
                   @[formVal.eventName]="(val) => handleChange(key,val,formVal)">
                   <el-option
@@ -69,9 +69,9 @@
               <template v-else-if="formVal.type === 'date'">
                 <el-date-picker
                   v-model="ruleForm[key]"
-                  :placeholder="formVal.placeholder || `请选择${formVal.label}`"
                   :type="formVal.type || 'date'"
                   :disabled="toBoolean(formVal.disabled)"
+                  :placeholder="toBoolean(formVal.disabled) ? null : formVal.placeholder || `请输入${formVal.label}`"
                   :format="formVal.format || 'yyyy-MM-dd'"
                   @[formVal.eventName]="(val) => handleChange(key,val,formVal)"
                 ></el-date-picker>
@@ -119,8 +119,8 @@
                 <el-transfer
                   v-model="ruleForm[key]"
                   :data="formVal.options"
-                  :placeholder="formVal.placeholder || `请选择${formVal.label}`"
                   :disabled="toBoolean(formVal.disabled)"
+                  :placeholder="toBoolean(formVal.disabled) ? formVal.placeholder || `请输入${formVal.label}` : null"
                   @[formVal.eventName]="(val) => handleChange(key,val,formVal)"
                 ></el-transfer>
               </template>

src/components/table/index.vue

@@ -7,11 +7,11 @@
                 <el-button :type="item.type" plain size="mini" :icon="item.icon" @click="handleClick(item,{})" :hasPermi="[item.hasPermi]">{{item.content}}</el-button>
               </el-col>
             </template>
-            <right-toolbar v-if="!(config && config.colTopHiddenIcon)" :showSearch.sync="showSearch" @queryTable="renderList" :columns="columns"></right-toolbar>
+            <right-toolbar v-if="!(config && config.colTopHiddenIcon)" :showSearch.sync="showSearch" @queryTable="renderList" @columnsChange="columnsChange" :columns="columns"></right-toolbar>
         </el-row>
         <!-- 表格数据 -->
-        <el-table height="80%" v-loading="loading" :data="tableList" ref="selChangeList" highlight-selection-row @selection-change="handleSelectionChange">
+        <el-table height="80%" v-loading="loading" :data="tableList" ref="selChangeList" :key="tableKey" highlight-selection-row @selection-change="handleSelectionChange">
-            <el-table-column v-if="!(config && config.colHiddenCheck)" fixed type="selection" width="55" align="center" />
+            <el-table-column v-if="!(config && config.colHiddenCheck)" fixed="left" type="selection" width="55" align="center" />
             <template v-for="(column, key, index) of columns">
                 <el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :width="column.width" :min-width="column.minWidth || '100px'" align="left" :show-overflow-tooltip="true">
                     <!--  插槽 自定义列表表头数据格式  -->
@@ -94,6 +94,7 @@
       },
       data() {
         return {
+          tableKey: 0,
           loading: false,
           showSearch: true,
           dialogOpen: false,
@@ -193,6 +194,10 @@
         renderList() {
           this.$emit("fnRenderList");
         },
+        // columns改变时触发，重新计算样式并渲染列表(解决：新增列，多选框和操作按钮错位)
+        columnsChange() {
+          this.tableKey++;
+        },
       }
     }
 </script>

src/router/index.js

@@ -168,7 +168,7 @@ export const dynamicRoutes = [
       }
     ]
   },
-  // 服务器宽带收益管理
+  // 服务器带宽收益管理
   {
     path: '/disRevenue/earnManage/server/list',
     component: Layout,
@@ -211,7 +211,7 @@ export const dynamicRoutes = [
       }
     ]
   },
-  // 交换机宽带收益
+  // 交换机带宽收益
   {
     path: '/disRevenue/earnManage/switch/list',
     component: Layout,

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

@@ -26,7 +26,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="8" v-if="queryParams.bandwidthType === '1'">
-            <el-form-item label="95宽带值Mbps/日" title="95宽带值Mbps/日" prop="bandwidth95Daily" :rules="[{ required: true, message: `95宽带值Mbps/日为必填项`, trigger: 'change' }]">
+            <el-form-item label="95带宽值Mbps/日" title="95带宽值Mbps/日" prop="bandwidth95Daily" :rules="[{ required: true, message: `95带宽值Mbps/日为必填项`, trigger: 'change' }]">
                 <el-date-picker
                     v-model="queryParams.bandwidth95Daily"
                     type="daterange"
@@ -38,7 +38,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="8" v-if="queryParams.bandwidthType === '2'">
-            <el-form-item label="95宽带值Mbps/月" title="95宽带值Mbps/月" prop="bandwidth95Monthly" :rules="[{ required: true, message: `95宽带值Mbps/月为必填项`, trigger: 'change' }]">
+            <el-form-item label="95带宽值Mbps/月" title="95带宽值Mbps/月" prop="bandwidth95Monthly" :rules="[{ required: true, message: `95带宽值Mbps/月为必填项`, trigger: 'change' }]">
                 <el-date-picker
                   v-model="queryParams.bandwidth95Monthly"
                   type="monthrange"
@@ -159,13 +159,13 @@
             uplinkSwitch: {label: `上联交换机`, minWidth: '150'},
             businessId: {label: `业务代码`, minWidth: '150'},
             businessName: {label: `业务名称`, minWidth: '150'},
-            bandwidth95Daily: {label: `95宽带值Mbps/日`, minWidth: '200', slotName: 'tempDay', slotHeaderName: '使用服务器的发送流量，发送流量值除以1000000'},
+            bandwidth95Daily: {label: `95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay', slotHeaderName: '使用服务器的发送流量，发送流量值除以1000000',visible: true},
-            bandwidth95Monthly: {label: `95宽带值Mbps/月`, minWidth: '200', slotName: 'tempMonth',
+            effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay', visible: true},
+            packageBandwidthDaily: {label: `包端带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay',visible: true},
+            bandwidth95Monthly: {label: `95带宽值Mbps/月`, minWidth: '200', slotName: 'tempMonth',
               slotHeaderName: '使用服务器的发送流量，发送流量值除以1000000；若服务器在一个自然月内有收益方式的变更，以最后一次变更的时间为开始到月末，进行该值的统计；若服务器收益方式为包端，则月底不用进行该值的计算。'},
-            packageBandwidthDaily: {label: `包端带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay'},
             // customerName: {label: `设备业务客户`,visible: true},
             avgMonthlyBandwidth95: {label: `月均日95值Mbps`, minWidth: '200',slotName: 'tempDay'},
-            effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay', visible: true},
             effectiveBandwidth95Monthly: {label: `有效95带宽值Mbps/月`, minWidth: '200', slotName: 'tempMonth', visible: true},
             effectiveAvgMonthlyBandwidth95: {label: `有效月均日95值Mbps`, minWidth: '200', slotName: 'tempDay', visible: true},
             createDatetime: {label: `创建时间`, minWidth: '150'},

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

@@ -49,7 +49,7 @@
           this. columns = [
             {label: `时间`, prop: 'createTime', visible: !type},
             {label: `业务代码`, prop: 'businessId',visible: true},
-            {label: `95宽带值Mbps/日`, prop: 'bandwidth95Daily', slotName: true, visible: type},
+            {label: `95带宽值Mbps/日`, prop: 'bandwidth95Daily', slotName: true, visible: type},
             {label: `有效95带宽值Mbps/日`, prop: 'effectiveAvgMonthlyBandwidth95', slotName: true, visible: type},
             {label: `包端带宽值Mbps/日`, prop: 'packageBandwidthDaily', slotName: true, visible: type},
             {label: `流量端口`, prop: 'name', width: '550', visible: !type},

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

@@ -69,7 +69,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="6" v-if="queryParams.bandwidthType === '1'">
-            <el-form-item label="95宽带值Mbps/日" title="95宽带值Mbps/日" prop="bandwidth95Daily" :rules="[{ required: true, message: `95宽带值Mbps/日为必填项`, trigger: 'change' }]">
+            <el-form-item label="95带宽值Mbps/日" title="95带宽值Mbps/日" prop="bandwidth95Daily" :rules="[{ required: true, message: `95带宽值Mbps/日为必填项`, trigger: 'change' }]">
               <el-date-picker
                 v-model="queryParams.bandwidth95Daily"
                 type="daterange"
@@ -81,7 +81,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="6" v-if="queryParams.bandwidthType === '2'">
-            <el-form-item label="95宽带值Mbps/月" title="95宽带值Mbps/月" prop="bandwidth95Monthly"  :rules="[{ required: true, message: `95宽带值Mbps/月为必填项`, trigger: 'change' }]">
+            <el-form-item label="95带宽值Mbps/月" title="95带宽值Mbps/月" prop="bandwidth95Monthly"  :rules="[{ required: true, message: `95带宽值Mbps/月为必填项`, trigger: 'change' }]">
               <el-date-picker
                 v-model="queryParams.bandwidth95Monthly"
                 type="monthrange"
@@ -202,8 +202,8 @@
               slotHeaderName: '不同的类型统计方式不一样，当类型是服务器时，使用的是接口的接收流量，95带宽值Mbs/日和95带宽值Mbs/月统计的是交换机接口的接收流量；当类型是机房出口的时候，95带宽值Mbs/日和95带宽值Mbs/月统计的是交换机接口的发送流量', visible: true },
             businessId: {label: `业务代码`,minWidth: '150'},
             businessName: {label: `业务名称`,minWidth: '100'},
-            bandwidth95Daily: { label: `95宽带值Mbps/日`, minWidth: '200', slotName: 'tempDay', visible: true },
+            bandwidth95Daily: { label: `95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay', visible: true },
-            bandwidth95Monthly: { label: `95宽带值Mbps/月`, minWidth: '200', slotName: 'tempMonth', visible: true },
+            bandwidth95Monthly: { label: `95带宽值Mbps/月`, minWidth: '200', slotName: 'tempMonth', visible: true },
             nodeName: { label: `服务器节点名称`, minWidth: '200'},
             avgMonthlyBandwidth95: {label: `月均日95值Mbps`, minWidth: '200', slotName: 'tempDay'},
             effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay'},

src/views/disRevenue/earnManage/switch/switchRelevantData.vue

@@ -51,7 +51,7 @@
             {label: `时间`, prop: 'createTime', visible: !type},
             {label: `业务代码`, prop: 'businessCode',visible: !type},
             {label: `业务代码`, prop: 'businessId',visible: type},
-            {label: `95宽带值Mbps/日`, prop: 'bandwidth95Daily', slotName: true, visible: type},
+            {label: `95带宽值Mbps/日`, prop: 'bandwidth95Daily', slotName: true, visible: type},
             {label: `有效95带宽值Mbps/日`, prop: 'effectiveAvgMonthlyBandwidth95', slotName: true, visible: type},
             {label: `包端带宽值Mbps/日`, prop: 'packageBandwidthDaily', slotName: true, visible: type},
             {label: `流量端口`, prop: 'name', visible: !type},

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

@@ -1,55 +1,80 @@
 <template>
-  <div class="app-container">
+  <div class="app-container app-viewContent">
     <Form :formList="formList" :ruleFormData="ruleForm" :config="{buttonGroup: []}" @fnClick="callback"></Form>
-    <el-tabs v-model="activeName">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="监控项" name="first">
-        <Form :formList="formListTow" :ruleFormData="ruleFormTow" :config="{buttonGroup: []}" @fnClick="callback"></Form>
+        <ResMonitorDigitalSuper></ResMonitorDigitalSuper>
+      </el-tab-pane>
+      <el-tab-pane label="自动发现项" name="second">
+        <el-collapse v-model="activeNames">
+          <el-collapse-item v-for="(val,index) of linuxSystem" :title="val.title" :name="index">
+            <div class="mt10 w100">
+              <Form :formList="val.formList" :ruleFormData="val.formModel" :config="val.config" @fnClick="callback"></Form>
+              <div v-for="item of val.echartList" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
+                <EchartsLine class="w100 h100" :lineData="item.dataVal" :title="item.title"></EchartsLine>
+              </div>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-tab-pane>
+      <el-tab-pane label="告警信息" name="third">
+        <TableList style="height: 500px" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="columns" :queryParams="queryParams" :tableList="tableList" @fnRenderList="getList"></TableList>
       </el-tab-pane>
-      <el-tab-pane label="自动发现项" name="second">自动发现项</el-tab-pane>
-      <el-tab-pane label="告警信息" name="third">告警信息</el-tab-pane>
     </el-tabs>
   </div>
 </template>
 
 <script setup>
   import Form from '@/components/form/index.vue';
-  import {listAllBusinessList, calculateAvg, getBandWidth, updateBandWidth} from "@/api/disRevenue/earnManage"
+  import TableList from "@/components/table/index.vue"
-  import {listAllResourList} from "@/api/disRevenue/resource"
+  import {listAllBusinessList, calculateAvg} from "@/api/disRevenue/earnManage"
+  import {listAllResourList, listTopology} from "@/api/disRevenue/resource"
+  import EchartsLine from "@/components/echartsList/line.vue";
+  import ResMonitorDigitalSuper from "./digitalSuper";
   export default {
     name: 'ResMonitorDetails',
-    components: {Form},
+    components: {Form, TableList, EchartsLine, ResMonitorDigitalSuper},
     dicts: ['rm_topology_type', 'rm_register_online_state', 'rm_register_resource_type'],
     data() {
       return {
         ruleForm: {},
         formList: [],
         ruleFormTow: {},
-        formListTow: [{
+        formListTow: [],
-          controls: {
-            id: {label: 'ID',hidden: true},
-            hardwareSn: {label: '系统描述', span: 12, type: 'input',disabled: true},
-            resourceType: {label: '系统位置', span: 12, type: 'input',disabled: true},
-            resourceName: {label: '系统Object ID', span: 12, type: 'input', disabled: true},
-            ipAddress: {label: '系统MAC地址', span: 12, type: 'input',disabled: true},
-            onlineStatus: {label: '系统运行时间', span: 12, type: 'date',disabled: true},
-            switchName: {label: '设备名称', span: 12, type: 'select',disabled: true},
-            resourceGroup: {label: '系统联系信息', span: 12, type: 'select',disabled: true},
-            cpu: {label: '设备软件版本', span: 12, type: 'input',disabled: true},
-            neicun: {label: '系统名称', span: 12, type: 'input',disabled: true},
-          }
-        }],
         paramsData: {},
-        activeName: 'first'
+        activeName: 'first',
+        activeNames: [0, 1],
+        linuxSystem: [],
+        columns: {
+          id: { label: `ID`, width: '50', visible: false },
+          switchSn: { label: `源IP`, minWidth: '200', visible: true},
+          switchName: { label: `发生时间`, minWidth: '250', visible: true },
+          interfaceName: { label: `状态`, minWidth: '100', visible: true },
+          connectedDeviceType: { label: `内容`, minWidth: '250', visible: true },
+        },
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          total: 0,
+        },
+        tableList: []
       }
     },
     created() {
       // this.paramsData = this.$route && this.$route.query;
-      this.fnFormList();
+      this.fnFormList('1');
       // this.switchList();
     },
     methods: {
+      handleClick(tab, event) {
+        if (tab && tab.index === '1') {
+          this.secondList();
+        } else if (tab && tab.index === '2') {
+          this.getList();
+        }
+      },
       // formList集合
-      fnFormList() {
+      fnFormList(num) {
         this.formList = [{
           config: {title: '基本信息'},
           controls: {
@@ -66,6 +91,38 @@
             gaojing: {label: '未处理告警数', span: 12, type: 'input',disabled: true},
           }
         }];
+        let formFirst = [
+          {name: '系统描述', value: 'aaa'},
+          {name: '系统位置', value: 'aaa'},
+          {name: '系统Object ID', value: 'aaa'},
+          {name: '系统MAC地址', value: 'aaa'},
+          {name: '系统运行时间', value: 'aaa'},
+          {name: '设备名称', value: 'aaa'},
+          {name: '系统联系信息', value: 'aaa'},
+          {name: '设备软件版本', value: 'aaa'},
+          {name: '系统名称', value: 'aaa'},
+        ];
+        let formSecond = [
+          {name: '总内存', value: 'aaa'},
+          {name: '操作系统', value: 'aaa'},
+          {name: '操作系统架构', value: 'aaa'},
+          {name: '最大进程数', value: 'aaa'},
+          {name: '硬盘总可用空间', value: 'aaa'},
+          {name: '系统启动时间', value: 'aaa'},
+          {name: '系统描述', value: 'aaa'},
+          {name: '系统正常运行时间', value: 'aaa'},
+          {name: '系统本地时间', value: 'aaa'},
+          {name: 'CPU数量', value: 'aaa'},
+        ];
+        this.formListTow = num && num === '1' ? formFirst : formSecond;
+      },
+      getList() {
+        this.loading = true;
+        listTopology(this.addDateRange(this.queryParams)).then(response => {
+          this.tableList = response.rows;
+          this.queryParams.total = response.total;
+          this.loading = false;
+        })
       },
       // 获取交换机下拉
       switchList() {
@@ -80,6 +137,89 @@
           });
         });
       },
+      // 第二节点 自动发现项
+      secondList(){
+        this.linuxSystem = [{
+          title: '网络端口GE1/0/1',
+          formList: [{
+            controls: {
+              id: {label: 'ID',hidden: true},
+              hardwareSn: {label: '端口名称', span: 12, type: 'input',disabled: true},
+              resourceType: {label: '端口类型', span: 12, type: 'input',disabled: true},
+              resourceName: {label: '端口状态', span: 12, type: 'input', disabled: true},
+              ipAddress: {label: '端口适配速率(Mbps)', span: 12, type: 'input',disabled: true}
+            }
+          }],
+          formModel: {},
+          config: {labelWidth: '160px', buttonGroup: []},
+          echartList: [{
+            title: '设备CPU使用率(%)',
+            dataVal: {
+              titleVal: {textAlign: 'left', left: '1%'},
+              gridTop: '30%',
+              legend: {top: '5%', left: 'center'},
+              lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
+              dataList: [{
+                name: '设备CPU使用率',
+                data: [120, 132, 101, 134, 90, 230, 210],
+              }]
+            }
+          },{
+            title: '设备内存使用率(%)',
+            dataVal: {
+              titleVal: {textAlign: 'left', left: '1%'},
+              gridTop: '30%',
+              legend: {top: '5%', left: 'center'},
+              lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
+              dataList: [{
+                name: '设备内存使用率',
+                data: [120, 132, 101, 134, 90, 230, 210],
+              },{
+                name: 'CPU运行用户进程所花费的时间',
+                data: [220, 182, 191, 234, 290, 330, 310]
+              }]
+            }
+          }]
+        },{
+          title: '光模块sabc',
+          formList: [{
+            controls: {
+              id: {label: 'ID',hidden: true},
+              hardwareSn: {label: '光模块端口名称', span: 12, type: 'input',disabled: true}
+            }
+          }],
+          formModel: {},
+          config: {buttonGroup: []},
+          echartList: [{
+            title: '设备CPU使用率(%)',
+            dataVal: {
+              titleVal: {textAlign: 'left', left: '1%'},
+              gridTop: '30%',
+              legend: {top: '5%', left: 'center'},
+              lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
+              dataList: [{
+                name: '设备CPU使用率',
+                data: [120, 132, 101, 134, 90, 230, 210],
+              }]
+            }
+          },{
+            title: '设备内存使用率(%)',
+            dataVal: {
+              titleVal: {textAlign: 'left', left: '1%'},
+              gridTop: '30%',
+              legend: {top: '5%', left: 'center'},
+              lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
+              dataList: [{
+                name: '设备内存使用率',
+                data: [120, 132, 101, 134, 90, 230, 210],
+              },{
+                name: 'CPU运行用户进程所花费的时间',
+                data: [220, 182, 191, 234, 290, 330, 310]
+              }]
+            }
+          }]
+        }];
+      },
       // 监听事件
       callback(result, dataVal, formVal) {
         if (result && result.fnCode) {
@@ -123,5 +263,11 @@
     }
   }
 </script>
-<style>
+<style scoped>
+  ::v-deep .el-collapse-item__header {
+    background-color: #d4e3fc!important;
+    /*color: #fff!important;*/
+    padding-left: 20px;
+    font-size: 1rem;
+  }
 </style>

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

@@ -0,0 +1,88 @@
+<template>
+    <div>
+      <div class="w100 plr-20" style="font-size: 14px">
+        <div v-for="item of formListTow" class="w50 disInlineBlock p10">
+          <span class="w50 disInlineBlock">{{item.name}}</span><span class="w50">{{item.value}}</span>
+        </div>
+      </div>
+      <div v-for="item of resultData" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
+        <EchartsLine class="w100 h100" :lineData="item.dataVal" :title="item.title"></EchartsLine>
+      </div>
+    </div>
+</template>
+
+<script setup>
+  import EchartsLine from "@/components/echartsList/line.vue";
+  export default {
+    name: 'ResMonitorDigitalSuper',
+    components: {EchartsLine},
+    data() {
+      return {
+        formListTow: [],
+        paramsData: {},
+        resultData: [{
+          title: '设备CPU使用率(%)',
+          dataVal: {
+            titleVal: {textAlign: 'left', left: '1%'},
+            gridTop: '30%',
+            legend: {top: '5%', left: 'center'},
+            lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
+            dataList: [{
+              name: '设备CPU使用率',
+              data: [120, 132, 101, 134, 90, 230, 210],
+            }]
+          }
+        },{
+          title: '设备内存使用率(%)',
+          dataVal: {
+            titleVal: {textAlign: 'left', left: '1%'},
+            gridTop: '30%',
+            legend: {top: '5%', left: 'center'},
+            lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
+            dataList: [{
+              name: '设备内存使用率',
+              data: [120, 132, 101, 134, 90, 230, 210],
+            },{
+              name: 'CPU运行用户进程所花费的时间',
+              data: [220, 182, 191, 234, 290, 330, 310]
+            }]
+          }
+        }],
+      }
+    },
+    created() {
+      // this.paramsData = this.$route && this.$route.query;
+      this.fnFormList('1');
+      // this.switchList();
+    },
+    methods: {
+      // formList集合
+      fnFormList(num) {
+        let formFirst = [
+          {name: '系统描述', value: 'aaa'},
+          {name: '系统位置', value: 'aaa'},
+          {name: '系统Object ID', value: 'aaa'},
+          {name: '系统MAC地址', value: 'aaa'},
+          {name: '系统运行时间', value: 'aaa'},
+          {name: '设备名称', value: 'aaa'},
+          {name: '系统联系信息', value: 'aaa'},
+          {name: '设备软件版本', value: 'aaa'},
+          {name: '系统名称', value: 'aaa'},
+        ];
+        let formSecond = [
+          {name: '总内存', value: 'aaa'},
+          {name: '操作系统', value: 'aaa'},
+          {name: '操作系统架构', value: 'aaa'},
+          {name: '最大进程数', value: 'aaa'},
+          {name: '硬盘总可用空间', value: 'aaa'},
+          {name: '系统启动时间', value: 'aaa'},
+          {name: '系统描述', value: 'aaa'},
+          {name: '系统正常运行时间', value: 'aaa'},
+          {name: '系统本地时间', value: 'aaa'},
+          {name: 'CPU数量', value: 'aaa'},
+        ];
+        this.formListTow = num && num === '1' ? formFirst : formSecond;
+      },
+    }
+  }
+</script>

src/views/index.vue

@@ -5,9 +5,10 @@
       <div v-for="(item,index) of headerList" class="h100 disInlineBlock" :style="`margin-right:${index + 1 === headerList.length ? 'none' : '1.3%'}`"
            style="width: 24%;padding: 10px 15px;border: 1px solid #d8dce6;border-radius: 10px;vertical-align: bottom;">
         <div style="font-size: 14px;">{{item.title}}</div>
-        <div style="margin: 15px 0 10px 15px;">
+        <div style="margin: 15px 0 10px;">
           <div class="disInlineBlock w50"><span style="font-size: 1.5rem;">{{item.num}}</span><span>{{item.unit}}</span></div>
-          <img src="@/assets/images/line.png" class="fr" width="100" alt="">
+          <img v-if="item && item.type === 'switch'" src="@/assets/images/switch.png" class="fr" width="100" height="35px" alt="">
+          <img v-else src="@/assets/images/line.png" class="fr" width="100"  alt="">
         </div>
         <div style="font-size: 10px;">{{item.lastVal}} <span>{{item.lastNum}}</span></div>
       </div>
@@ -18,7 +19,7 @@
         <EchartsPie :dataList="dataList[0]" class="w100 h100"></EchartsPie>
       </div>
       <div class="disInlineBlock h100" style="width: 49.4%;border: 1px solid #d8dce6;border-radius: 10px;margin: 0 1.3%;">
-        <EchartsBar :barData="lineDataParams" :title="`当日业务的在线设备数量统计TOP10`" class="w100 h100"></EchartsBar>
+        <EchartsBar :barData="lineDataParams" :title="`当日业务的在线设备数量统计TOP`+ lineDataParams.data.length" class="w100 h100"></EchartsBar>
       </div>
       <div class="disInlineBlock h100" style="width: 24%;border: 1px solid #d8dce6;border-radius: 10px;">
         <EchartsPie :dataList="dataList[1]" class="w100 h100"></EchartsPie>
@@ -28,7 +29,7 @@
     <div class="w100" style="height: 44%;margin: 1% 0 0;">
       <div class="disInlineBlock h100 p10" style="width: 49.5%;border: 1px solid #d8dce6;border-radius: 10px;margin-right: 1%;vertical-align: middle;">
         <div style="font-size: 14px;height: 10%">
-          <span>服务器宽带收益</span>
+          <span>服务器带宽收益</span>
           <span @click="routerLine(1)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
         </div>
         <div style="height: 90%;overflow: scroll;" class="newSty">
@@ -55,6 +56,7 @@
   import TableList from "@/components/table/index.vue";
   import {listBandWidth} from "@/api/disRevenue/earnManage"
   import {listTopology} from "@/api/disRevenue/resource"
+  import {countBusiness, sumTrafficByServer, sumTrafficBySwitch, countSwitchNum, serverOnlineRate, countDeviceNumTop5} from "@/api/homeIndex";
 export default {
   name: "Index",
   components: {EchartsPie, EchartsLine, EchartsBar, TableList},
@@ -63,10 +65,10 @@ export default {
       // 版本号
       version: "3.6.6",
       headerList: [
-        {title: '当前在线服务器的流量相关的业务数', num: '76800', unit: '个'},
+        {title: '当前在线服务器的流量相关的业务数', num: '0', unit: '个'},
-        {title: '当前在线服务器发送带宽总流量', num: '1126', unit: 'Mbps'},
+        {title: '当前在线服务器发送带宽总流量', type: 'switch', num: '0', unit: 'Mbps'},
-        {title: '当前在线交换机接收带宽总流量', num: '1140', unit: 'Mbps'},
+        {title: '当前在线交换机接收带宽总流量', type: 'switch', num: '0', unit: 'Mbps'},
-        {title: '交换机在线数量', num: '1111', unit: '个', lastVal: '交换机注册总数', lastNum: '11112222'},
+        {title: '交换机在线数量', num: '0', unit: '个', lastVal: '交换机注册总数', lastNum: '0'},
       ],
       lineDataParams: {
         titleVal: {x: '1%', y: '3%',fontSize: 14, textAlign: 'left'},
@@ -77,18 +79,18 @@ export default {
         hidAxisLabel: true,
         hidSplitLine: true,
         name: ' ',
-        linexData: ['业务名称1', '业务名称2', '业务名称3', '业务名称4', '业务名称5', '业务名称6', '业务名称7', '业务名称8', '业务名称9', '业务名称10'],
+        lineXData: [],
-        data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10]
+        data: []
       },
       dataList: [{
         titleVal: {title: '服务器在线率', show: true, x: '1%', y: '3%', textAlign: 'left'},
-        centerVal: '82%',
+        centerVal: '0%',
         lastVal: '在线率',
         color: ['#0d52d9', '#bbc4d2'],
         radius: ['60%', '70%'],
         data: [
-          { value: 82, name: '在线' },
+          { value: 0, name: '在线' },
-          { value: 28, name: '总数' }
+          { value: 0, name: '总数' }
         ]
       },{
         titleVal: {title: '资源告警处理情况', show: true, x: '1%', y: '3%', textAlign: 'left'},
@@ -136,8 +138,62 @@ export default {
   created() {
     this.serverTableList();
     this.resMonitorTableList();
+    this.getCountBusiness();
+    this.getSumTrafficByServer();
+    this.getSumTrafficBySwitch();
+    this.getCountSwitchNum();
+    this.getServerOnlineRate();
+    this.getCountDeviceNumTop5();
   },
   methods: {
+    getCountBusiness(){
+      countBusiness().then(res => {
+        this.headerList[0].num = res && res.data;
+      });
+    },
+    getSumTrafficByServer(){
+      sumTrafficByServer().then(res => {
+        this.headerList[1].num = res && res.data;
+      });
+    },
+    getSumTrafficBySwitch(){
+      sumTrafficBySwitch().then(res => {
+        this.headerList[2].num = res && res.data;
+      });
+    },
+    getCountSwitchNum(){
+      countSwitchNum().then(res => {
+        this.headerList[3].num = res && res.onlineCount;
+        this.headerList[3].lastNum = res && res.total;
+      });
+    },
+    getServerOnlineRate(){
+      serverOnlineRate().then(res => {
+        if (res) {
+          let newParams = {
+            centerVal: res.onlineRate + '%',
+            data: [
+              {value: res && res.onlineCount, name: '在线'},
+              {value: res && res.offlineCount, name: '总数'}
+            ]
+          };
+          this.dataList[0] = Object.assign({}, this.dataList[0], newParams);
+        }
+      });
+    },
+    getCountDeviceNumTop5(){
+      countDeviceNumTop5().then(res => {
+        console.log('4444===',res);
+        let lineXData = [];
+        let dataList = [];
+        res && res.data.forEach(item => {
+          lineXData.push(item.businessName);
+          dataList.push(item.total);
+        });
+        this.lineDataParams['lineXData'] = lineXData;
+        this.lineDataParams['data'] = dataList;
+      });
+    },
     serverTableList() {
       listBandWidth(this.serQueryParams).then(response => {
         this.serTableList = response.rows;