首页和资源监控

src/assets/styles/index.scss

@@ -80,6 +80,9 @@ div:focus {
 .plr-50 {
   padding: 0 50px;
 }
+.p10 {
+  padding: 10px;
+}
 .p15 {
   padding: 15px;
 }
@@ -220,6 +223,9 @@ aside {
 .w30 {
   width: 30%;
 }
+.w40 {
+  width: 40%;
+}
 .w45 {
   width: 45%;
 }

src/components/echartsList/bar.vue

@@ -36,7 +36,7 @@
         this.num = Math.floor(Math.random() * 9000);
       },
       mounted() {
-        console.log('barData=',this.barData);
+        // console.log('barData=',this.barData);
         if (this.barData && this.barData.hiddenTime) {
           this.getList(this.title,this.barData)
         }
@@ -44,13 +44,20 @@
       methods: {
         getList(title, dataXY) {
           const barDataListIntance = echarts.init(document.getElementById('barChart' + this.num));
-          let option = {
+          let titleSet = {};
-            title: [{
+          if (dataXY && dataXY.titleVal) {
+            titleSet = {
               text: title,
-              x: '50%',
+              x: dataXY && dataXY.titleVal && dataXY.titleVal.x || '50%',
-              y: '3%',
+              y: dataXY && dataXY.titleVal && dataXY.titleVal.y || '3%',
-              textAlign: 'center',
+              textAlign: dataXY && dataXY.titleVal && dataXY.titleVal.textAlign || 'center',
-            }],
+              textStyle: {
+                fontSize: 14
+              },
+            };
+          }
+          let option = {
+            title: [titleSet],
             tooltip: {
               trigger: 'axis',
               axisPointer: {
@@ -58,7 +65,7 @@
               }
             },
             grid: {
-              top: '20%',
+              top: dataXY && dataXY.gridTop || '20%',
               left: '3%',
               right: '4%',
               bottom: '3%',
@@ -66,17 +73,36 @@
             },
             xAxis: [
               {
-                type: 'category',
+                type: dataXY && dataXY.yAxis ? 'value' :'category',
-                data: dataXY.lineXData,
+                data: dataXY && dataXY.yAxis ? [] : dataXY.lineData,
-                axisTick: {
+                // 去掉x轴线
+                axisLine: { show: false },
+                // 去掉x轴刻度线
+                axisTick: { show: false },
+                // 去掉X轴网格线（竖向网格）
+                splitLine: { show: false },
+                // x轴标签样式（保留标签便于阅读）
+                axisLabel: {
                   show: false
-                },
+                }
               }
             ],
             yAxis: [
               {
-                type: 'value',
+                type: dataXY && dataXY.yAxis ? 'category' :'value',
-                name: '单位Mbps'
+                name: dataXY.name || '单位Mbps',
+                inverse: true,
+                // 去掉y轴线
+                axisLine: { show: false },
+                // 去掉y轴刻度线
+                axisTick: { show: false },
+                // 去掉y轴网格线（横向网格）
+                splitLine: { show: false },
+                // Y轴标签样式（保留标签便于阅读）
+                axisLabel: {
+                  show: true
+                },
+                data: dataXY && dataXY.yAxis ? dataXY.lineData : [],
               }
             ],
             series: [
@@ -84,7 +110,11 @@
                 // name: 'Direct',
                 type: 'bar',
                 barWidth: '60%',
-                data: dataXY.data
+                data: dataXY.data,
+                label: {
+                  show: dataXY && dataXY.seriesLabel || false,
+                  position: 'insideLeft',
+                }
               }
             ]
           };
@@ -96,7 +126,10 @@
 
         dataChangeValue(val, days) {
           // console.log(props.chartData(val));
-          this.getList(this.title, {data: this.barData.data, lineXData: days});
+          // this.getList(this.title, {data: this.barData.data, lineData: days, yAxis: this.barData && this.barData.yAxis});
+          let newbarData = {...this.barData};
+          newbarData['lineData'] = days;
+          this.getList(this.title, newbarData);
         }
       }
     }

src/components/echartsList/pie.vue

@@ -35,70 +35,161 @@
     methods: {
       getList(dataList) {
         const pieDataListIntance = echarts.init(document.getElementById('pieChart' + this.num));
+        let titleSet = {};
+        if (dataList && dataList.titleVal) {
+          titleSet = {
+            show: dataList && dataList.titleVal && dataList.titleVal.show || false,
+            text: dataList && dataList.titleVal && dataList.titleVal.title || '',
+            x: dataList && dataList.titleVal && dataList.titleVal.x || '50%',
+            y: dataList && dataList.titleVal && dataList.titleVal.y || '3%',
+            textAlign: dataList && dataList.titleVal && dataList.titleVal.textAlign || 'center',
+            textStyle: {
+              fontSize: 14
+            },
+          };
+        }
         let option = {
+          title: titleSet,
           color: dataList.color,
-          // title: [
-          //   {
-          //     text: `${dataList.centerVal}${dataList.unit}`,
-          //     left: "16%",
-          //     top: "43%",
-          //     textStyle: {
-          //       fontSize: 18,
-          //       fontWeight: "bold",
-          //       color: "#333",
-          //     },
-          //   }
-          // ],
           legend: {
-            // orient: 'vertical', // 垂直排列
             top: 'bottom',      // 垂直居中
-            // right: 1,          // 距离右侧40px
             itemWidth: 12,      // 图例标记宽度
             itemHeight: 12,     // 图例标记高度
             itemGap: 20,        // 图例项间距
             textStyle: {
-              fontSize: 14,
+              fontSize: 12,
               color: '#333'
             },
-            formatter: function(name) {
+            // formatter: function(name) {
-              // 查找对应数据项
+            //   // 查找对应数据项
-              const item = dataList.data.find(item => item.name === name);
+            //   const item = dataList.data.find(item => item.name === name);
-              // 返回带数量的图例文本
+            //   // 返回带数量的图例文本
-              return `${name} ${item.value}${dataList.unit}`;
+            //   return `${name} ${item.value}${dataList.unit}`;
-            }
+            // }
           },
           series: [{
             name: 'Access From',
             type: 'pie',
             radius: dataList && dataList.radius || ['40%', '70%'],
-            // center: dataList && dataList.center || ['20%', '50%'],
             label: {
-              show: false,
+              normal: {
-              position: 'center'
+                show: true,
+                position: 'center',
+                color: '#333',
+                fontSize: 16,
+                formatter: function () {
+                  // let total = 0;
+                  // for (let i = 0; i < m2R2Data.length; i++) {
+                  //   const val = parseFloat(m2R2Data[i].value);
+                  //   if (!isNaN(val)) total += val;
+                  // }
+                  return `{value|${dataList.centerVal}}\n{unit|${dataList.lastVal}}`;
+                },
+                rich: {
+                  value: {
+                    fontSize: 24,
+                    fontFamily: 'HarmonyOS Sans SC',
+                    fontweight: 'bold',
+                    color: '#333',
+                  },
+                  unit: {
+                    fontFamily: 'HarmonyOS Sans SC',
+                    fontSize: 10,
+                    color: '#333',
+                  },
                 },
-            emphasis: {
-              label: {
-                show: false,
-              }
               },
-            labelLine: {
-              show: false
             },
             data: dataList.data
           }],
-          graphic: [{
+          // graphic: [{
-            type: 'text',
+          //   type: 'text',
-            left: 'center',
+          //   left: 'center',
-            top: 'middle',
+          //   top: 'middle',
-            style: {
+          //   style: {
-              text: `${dataList.centerVal}${dataList.unit}`,
+          //     text: `${dataList.centerVal}\n${dataList.lastVal}`,
-              textBaseline: 'middle',
+          //     textBaseline: 'middle',
-              textAlign: 'center',
+          //     textAlign: 'center',
-              fontSize: 20,
+          //     fontSize: 20,
-              fill: '#333'
+          //     fill: '#333'
-            }
+          //   }
-          }],
+          // }],
         };
+        // let option = {
+        //   title: {
+        //     text: '{a|' + Math.round((dataList.value * 100) / dataList.total) + '%}\n{b|' + dataList.lastVal + '}', // 显示标题
+        //     show: true, // 是否显示
+        //     x: 'center', // x轴位置
+        //     y: 'center', // y轴位置
+        //     textStyle: { // 样式配置
+        //       rich: {
+        //         a: {
+        //           fontSize: 24, // 字体大小
+        //           color: '#333333', // 字体颜色
+        //           padding: [0, 0, 5, 0], // 边距
+        //         },
+        //         b: {
+        //           fontSize: 14, // 字体大小
+        //           color: '#808080', // 字体颜色
+        //         },
+        //       },
+        //     },
+        //   },
+        //   angleAxis: {
+        //     max: dataList.total,
+        //     clockwise: false, // 逆时针
+        //     // 隐藏刻度线
+        //     show: false,
+        //     // 开始的角度
+        //     startAngle: 180
+        //   },
+        //   radiusAxis: {
+        //     type: 'category',
+        //     show: true,
+        //     axisLabel: {
+        //       show: false, // 是否显示标签
+        //     },
+        //     axisLine: {
+        //       show: false, // 是否显示轴线
+        //     },
+        //     axisTick: {
+        //       show: false, // 是否显示刻度
+        //     },
+        //   },
+        //   polar: [
+        //     {
+        //       radius: ['54%', '66%'] //图形大小
+        //     }
+        //   ],
+        //   series: [
+        //     {
+        //       type: 'bar',
+        //       z: 10,
+        //       data: [dataList.value], // 数据
+        //       coordinateSystem: 'polar', // 坐标
+        //       roundCap: true, // 是否在环形柱条两侧使用圆弧效果
+        //       barWidth: 20, // 大的占比环
+        //       itemStyle: { // 图形样式
+        //         normal: {
+        //           color: "#2A91D9",
+        //         }
+        //       }
+        //     },
+        //     {
+        //       type: 'pie',
+        //       name: '内层细圆环',
+        //       radius: ['55%', '65%'], // 饼图的半径
+        //       hoverAnimation: false, // 悬浮突出
+        //       itemStyle: { // 图形样式
+        //         color: "#DFE0EF", // 颜色
+        //       },
+        //       label: {
+        //         show: false // 是否显示
+        //       },
+        //       data: [dataList.total]
+        //     }
+        //   ]
+        // };
         pieDataListIntance.setOption(option);
         // window.addEventListener("resize", () => {
         //   pieDataListIntance.resize()

src/components/table/index.vue

@@ -11,7 +11,7 @@
         </el-row>
         <!-- 表格数据 -->
         <el-table v-loading="loading" :data="tableList" ref="selChangeList" @selection-change="handleSelectionChange">
-            <el-table-column v-if="!config.colHiddenCheck" type="selection" width="55" align="center" />
+            <el-table-column v-if="!config && config.colHiddenCheck" type="selection" width="55" align="center" />
             <template v-for="(column, key, index) of columns">
                 <el-table-column :label="column.label" :key="key" :prop="key" :width="column.width" min-width="100px" v-if="column && column.visible" align="center" :show-overflow-tooltip="true">
                     <!--  插槽 自定义列表表头数据格式  -->
@@ -72,7 +72,9 @@
           },
           config: {
               type: Object,
-              default: () => {}
+              default: () => ({
+                colHiddenCheck: false
+              })
           }
       },
       data() {

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

@@ -43,28 +43,24 @@
             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'},
-            resourceType: {label: '资源类型', span: 12, type: 'radio',
+            resourceType: {label: '资源类型', span: 12, type: 'radio', options: this.dict.type.rm_register_resource_type},
-              options: this.dict.type.rm_register_resource_type},
             ipAddress: {label: 'IP地址', span: 12, type: 'input'},
-            protocol: {label: '协议', span: 12, type: 'radio',
+            protocol: {label: '协议', span: 12, type: 'radio', options: this.dict.type.rm_register_protocol,},
-              options: this.dict.type.rm_register_protocol,},
+            resourcePort: {label: '端口', span: 12, type: 'input', rules: [{required: true, message: '请输入硬件SN', trigger: 'blur'}]},
-            resourcePort: {label: '端口', span: 8, type: 'select', eventName: 'change',
+            // otherPortName: {label: ' ', span: 4, type: 'input',
-              options: this.dict.type.rm_register_port, rules: [{required: true, message: '请输入硬件SN', trigger: 'blur'}]},
+            //   hidden: objVal && objVal.resourcePort === '2' ? false : true},
-            otherPortName: {label: ' ', span: 4, type: 'input',
+            snmp: {label: 'SNMP探测', span: 12, type: 'radio', eventName: 'change', options: this.dict.type.rm_register_version},
-              hidden: objVal && objVal.resourcePort === '2' ? false : true},
+            resourceVersion: {label: 'SNMP版本', span: 12, type: 'radio',
-            resourceVersion: {label: '版本', span: 12, type: 'radio',
+              options: this.dict.type.rm_register_version,hidden: objVal && objVal.snmp === '1' ? false : true},
-              options: this.dict.type.rm_register_version,hidden: objVal && objVal.resourcePort === '1' ? false : true},
+            // securityLevel: {label: '安全级别', span: 12, type: 'radio',
-            securityLevel: {label: '安全级别', span: 12, type: 'radio',
+            //   options: this.dict.type.rm_register_security_level,hidden: objVal && objVal.resourcePort === '1' ? false : true},
-              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.resourcePort === '1' ? false : true},
+              options: this.dict.type.rm_register_permission,hidden: objVal && objVal.snmp === '1' ? false : true},
-            resourceUserName: {label: '用户名', span: 12, type: 'input',
+            resourceUserName: {label: '团体名称', span: 12, type: 'input', hidden: objVal && objVal.snmp === '1' ? false : true},
-              hidden: objVal && objVal.resourcePort === '1' ? false : true},
+            // encryption: {label: '加密方式', span: 12, type: 'radio',
-            encryption: {label: '加密方式', span: 12, type: 'radio',
+            //   options: this.dict.type.rm_register_encryption,hidden: objVal && objVal.resourcePort === '1' ? false : true},
-              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},
-            resourcePwd: {label: '密码', span: 12, type: 'input',
+            description: {label: '描述', span: 24, type: 'textarea'},
-              hidden: objVal && objVal.resourcePort === '1' ? false : true},
-            description: {label: '描述', span: 12, type: 'textarea'},
             // customerName: {label: '设备业务客户', span: 12, type: 'input'},
             // serviceNumber: {label: '业务号', span: 12, type: 'input'},
           }
@@ -84,24 +80,24 @@
       callback(result, dataVal, formVal) {
         if (result && result.fnCode) {
           switch (result.fnCode) {
-            case 'resourcePort':
+            case 'snmp':
               if (dataVal === '1') {
-                this.formList[0].controls.otherPortName['hidden'] = true;
+                // 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.securityLevel['hidden'] = false;
                 this.formList[0].controls.rwPermission['hidden'] = false;
-                this.formList[0].controls.resourceVersion['hidden'] = false;
+                // this.formList[0].controls.resourceVersion['hidden'] = false;
-                this.formList[0].controls.encryption['hidden'] = false;
+                // this.formList[0].controls.encryption['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.otherPortName['hidden'] = false;
                 this.formList[0].controls.resourceVersion['hidden'] = true;
-                this.formList[0].controls.securityLevel['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.resourceVersion['hidden'] = true;
-                this.formList[0].controls.resourceUserName['hidden'] = true;
+                // this.formList[0].controls.resourceUserName['hidden'] = true;
-                this.formList[0].controls.encryption['hidden'] = true;
+                // this.formList[0].controls.encryption['hidden'] = true;
                 this.formList[0].controls.resourcePwd['hidden'] = true;
               }
               break;

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

@@ -1,8 +1,23 @@
 <template>
   <div class="app-container pageTopForm">
-    <div style="height: 200px;">
+<!--    <div style="height: 200px;">-->
-      <EchartsPie v-for="item of dataList" :dataList="item" style="width: 33%;" class="h100 disInlineBlock"></EchartsPie>
+<!--      <EchartsPie v-for="item of dataList" :dataList="item" style="width: 33%;" class="h100 disInlineBlock"></EchartsPie>-->
+<!--    </div>-->
+    <el-row :gutter="20">
+      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
+        <!--部门数据-->
+        <pane size="16">
+          <el-col>
+            <div class="head-container">
+              <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
             </div>
+            <div class="head-container">
+              <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
+            </div>
+          </el-col>
+        </pane>
+        <!--用户数据-->
+        <pane size="84">
           <el-form :model="queryParams" ref="queryRef" v-show="showSearch" label-width="auto">
             <el-col :span="7">
               <el-form-item label="搜索" prop="switchName">
@@ -54,6 +69,9 @@
               <dict-tag :options="dict.type.rm_topology_type" :value="row.connectedDeviceType"/>
             </template>
           </TableList>
+        </pane>
+      </splitpanes>
+    </el-row>
   </div>
 </template>
 
@@ -61,13 +79,25 @@
   import TableList from "@/components/table/index.vue"
   import EchartsPie from "@/components/echartsList/pie.vue"
   import {listTopology, delTopology} from "@/api/disRevenue/resource"
+  import {deptTreeSelect } from "@/api/system/user"
+  import { Splitpanes, Pane } from "splitpanes"
+  import "splitpanes/dist/splitpanes.css"
   export default {
     name: 'ResMonitor',
-    components: {TableList,EchartsPie},
+    components: {TableList,EchartsPie, Splitpanes, Pane},
     dicts: ['rm_topology_type'],
     data() {
       return {
         loading: true,
+        // 部门名称
+        deptName: undefined,
+        // 所有部门树选项
+        deptOptions: undefined,
+        defaultProps: {
+          children: "children",
+          label: "label"
+        },
+
         showSearch: true,
         roleList: [],
         queryParams: {
@@ -129,10 +159,33 @@
         }]
       }
     },
+    watch: {
+      // 根据名称筛选部门树
+      deptName(val) {
+        this.$refs.tree.filter(val)
+      }
+    },
     created() {
       this.getList();
+      this.getDeptTree();
     },
     methods: {
+      /** 查询部门下拉树结构 */
+      getDeptTree() {
+        deptTreeSelect().then(response => {
+          this.deptOptions = response.data;
+        })
+      },
+      // 筛选节点
+      filterNode(value, data) {
+        if (!value) return true
+        return data.label.indexOf(value) !== -1
+      },
+      // 节点单击事件
+      handleNodeClick(data) {
+        this.queryParams.deptId = data.id;
+        this.handleQuery();
+      },
       /** 查询列表 */
       getList() {
         this.loading = true;

src/views/index.vue

@@ -1,19 +1,49 @@
 <template>
-  <div class="app-container home w100" style="height: calc(100vh - 85px);">
+  <div class="app-container home w100" style="height: calc(100vh - 85px);color: #000;">
     <!--    header -->
-    <div class="w100" style="height: 40%;">
+    <div class="w100" style="height: 17%;min-height: 110px;">
-      <div class="h100 disInlineBlock" style="width: 25%;border: 1px solid #d8dce6;border-radius: 10px">
+      <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 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="">
+        </div>
+        <div style="font-size: 10px;">{{item.lastVal}} <span>{{item.lastNum}}</span></div>
+      </div>
+    </div>
+    <!--  middle  -->
+    <div class="w100" style="height: 35%;margin: 1% 0;">
+      <div class="disInlineBlock h100" style="width: 24%;border: 1px solid #d8dce6;border-radius: 10px;">
         <EchartsPie :dataList="dataList[0]" class="w100 h100"></EchartsPie>
       </div>
-      <div class="h100 disInlineBlock" style="width: 48%;border: 1px solid #d8dce6;margin: 0 1%;border-radius: 10px">
+      <div class="disInlineBlock h100" style="width: 49.4%;border: 1px solid #d8dce6;border-radius: 10px;margin: 0 1.3%;">
-        <EchartsLine :lineData="lineDataParams" :title="``" class="w100 h100"></EchartsLine>
+        <EchartsBar :barData="lineDataParams" :title="`当日业务的在线设备数量统计TOP10`" class="w100 h100"></EchartsBar>
       </div>
-      <div class="h100 disInlineBlock" style="width: 25%;border: 1px solid #d8dce6;border-radius: 10px">
+      <div class="disInlineBlock h100" style="width: 24%;border: 1px solid #d8dce6;border-radius: 10px;">
         <EchartsPie :dataList="dataList[1]" class="w100 h100"></EchartsPie>
       </div>
     </div>
-    <div class="w100" style="height: 58%;margin: 1% 0;border: 1px solid #d8dce6;border-radius: 10px">
+    <!--  footer  -->
-      <EchartsBar :barData="lineDataParams" :title="``" class="w100 h100"></EchartsBar>
+    <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 @click="routerLine(1)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
+        </div>
+        <div style="height: 90%;overflow: scroll;" class="newSty">
+          <TableList :columns="serverColumns" :queryParams="serQueryParams" :tableList="serTableList"></TableList>
+        </div>
+      </div>
+      <div class="disInlineBlock h100 p10" style="width: 49.5%;border: 1px solid #d8dce6;border-radius: 10px;vertical-align: middle;">
+        <div style="font-size: 14px;height: 10%">
+          <span>资源监控</span>
+          <span @click="routerLine(2)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
+        </div>
+        <div style="height: 90%;overflow: scroll;" class="newSty">
+          <TableList :columns="resMonitorColumns" :queryParams="resQueryParams" :tableList="resTableList"></TableList>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -22,117 +52,121 @@
   import EchartsPie from "@/components/echartsList/pie.vue"
   import EchartsLine from "@/components/echartsList/line.vue"
   import EchartsBar from "@/components/echartsList/bar.vue"
+  import TableList from "@/components/table/index.vue";
+  import {listBandWidth} from "@/api/disRevenue/earnManage"
+  import {listTopology} from "@/api/disRevenue/resource"
 export default {
   name: "Index",
-  components: {EchartsPie, EchartsLine, EchartsBar},
+  components: {EchartsPie, EchartsLine, EchartsBar, TableList},
   data() {
     return {
       // 版本号
       version: "3.6.6",
+      headerList: [
+        {title: '当前在线服务器的流量相关的业务数', num: '76800', unit: '个'},
+        {title: '当前在线服务器发送带宽总流量', num: '1126', unit: 'Mbps'},
+        {title: '当前在线交换机接收带宽总流量', num: '1140', unit: 'Mbps'},
+        {title: '交换机在线数量', num: '1111', unit: '个', lastVal: '交换机注册总数', lastNum: '11112222'},
+      ],
+      lineDataParams: {
+        titleVal: {x: '1%', y: '3%', textAlign: 'left'},
+        gridTop: '15%',
+        seriesLabel: true,
+        hiddenTime: true,
+        yAxis: true,
+        name: ' ',
+        lineData: ['业务名称1', '业务名称2', '业务名称3', '业务名称4', '业务名称5', '业务名称6', '业务名称7', '业务名称8', '业务名称9', '业务名称10'],
+        data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10]
+      },
       dataList: [{
-        centerVal: '56',
+        titleVal: {title: '服务器在线率', show: true, x: '1%', y: '3%', textAlign: 'left'},
-        unit: '台',
+        centerVal: '82%',
-        center: ['30%', '50%'],
+        lastVal: '在线率',
-        color: ['#31bb42', '#f96602'],
+        color: ['#0d52d9', '#bbc4d2'],
+        radius: ['60%', '70%'],
         data: [
-          { value: 36, name: '在线服务器' },
+          { value: 82, name: '在线' },
-          { value: 20, name: '离线服务器' }
+          { value: 28, name: '总数' }
         ]
       },{
-        centerVal: '10',
+        titleVal: {title: '资源告警处理情况', show: true, x: '1%', y: '3%', textAlign: 'left'},
-        unit: '台',
+        centerVal: '82%',
-        center: ['30%', '50%'],
+        lastVal: '告警处理率',
-        color: ['#1c7dbc', '#f80a4f'],
+        radius: ['60%', '70%'],
+        color: ['#0d52d9', '#bbc4d2'],
         data: [
-          { value: 8, name: '在线交换机' },
+          { value: 82, name: '已处理告警数' },
-          { value: 2, name: '离线交换机' }
+          { value: 28, name: '总告警数' }
-        ]
-      },{
-        centerVal: '82',
-        unit: '%',
-        center: ['30%', '50%'],
-        color: ['#1a7aff', '#f96602'],
-        data: [
-          { value: 82, name: '服务器整体带宽利用率' },
-          { value: 18, name: '离线交换机' }
         ]
       }],
-      lineDataParams: {
+      // 列显隐信息
-        hiddenTime: true,
+      serverColumns: {
-        lineXData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        id: {label: `ID`},
-        data: [820, 932, 901, 934, 1290, 1330, 1320]
+        nodeName: {label: `节点名称`, visible: true},
+        businessName: {label: `业务名称`, visible: true},
+        effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`, width: '160px', visible: true},
+        avgMonthlyBandwidth95: {label: `月均日95值Mbps`, width: '130px', visible: true}
+      },
+      serTableList:[],
+      serQueryParams: {
+        pageNum: 1,
+        pageSize: 5,
+        total: 0
+      },
+      // 列显隐信息
+      resMonitorColumns: {
+        id: { label: `ID`, visible: false },
+        switchName: { label: `资源名称`, visible: true },
+        interfaceName: { label: `ip地址`, visible: true },
+        serverSn: { label: `CPU使用率%`,visible: true},
+        serverPort: { label: `内存使用率%`, visible: true }
+      },
+      resTableList: [],
+      resQueryParams: {
+        pageNum: 1,
+        pageSize: 6,
+        total: 0
       }
     }
   },
+  created() {
+    this.serverTableList();
+    this.resMonitorTableList();
+  },
   methods: {
-    goTarget(href) {
+    serverTableList() {
-      window.open(href, "_blank")
+      listBandWidth(this.serQueryParams).then(response => {
+        this.serTableList = response.rows;
+        this.serQueryParams.total = response.total;
+      })
+    },
+    resMonitorTableList() {
+      listTopology(this.resQueryParams).then(response => {
+        this.resTableList = response.rows;
+        this.resQueryParams.total = response.total;
+      })
+    },
+    // 跳转页面
+    routerLine(num) {
+      if (num === 1) {
+        this.$router.push({path:'/earnManage/server'});
+      }
+      if (num === 2) {
+        this.$router.push({path:'/resource/resMonitor'});
+      }
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-.home {
+  ::-webkit-scrollbar {
-  blockquote {
+    width: 0px!important;
-    padding: 10px 20px;
+    height: 0px!important;
-    margin: 0 0 20px;
-    font-size: 17.5px;
-    border-left: 5px solid #eee;
-  }
-  hr {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: 0;
-    border-top: 1px solid #eee;
-  }
-  .col-item {
-    margin-bottom: 20px;
-  }
-
-  ul {
-    padding: 0;
-    margin: 0;
-  }
-
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  color: #676a6c;
-  overflow-x: hidden;
-
-  ul {
-    list-style-type: none;
-  }
-
-  h4 {
-    margin-top: 0px;
-  }
-
-  h2 {
-    margin-top: 10px;
-    font-size: 26px;
-    font-weight: 100;
-  }
-
-  p {
-    margin-top: 10px;
-
-    b {
-      font-weight: 700;
-    }
-  }
-
-  .update-log {
-    ol {
-      display: block;
-      list-style-type: decimal;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0;
-      margin-inline-end: 0;
-      padding-inline-start: 40px;
-    }
-  }
   }
+  /*::v-deep .newSty .el-table {*/
+  /*  height: 190px;*/
+  /*  overflow-y: scroll;*/
+  /*}*/
 </style>