v1.2版

2025-11-11 14:06:13 +08:00
parent ee295230ac
commit 54ab4046f6
387 changed files with 46032 additions and 0 deletions
@@ -0,0 +1,152 @@
+<template>
+  <div style="width:100%;height: calc(100vh - 115px);margin: 30px auto 0;" class="textAlignCenter">
+    <div class="w100">
+      <el-input v-model="resName" placeholder="请输入你需要搜索的交换机名称或服务器节点名称入内容" style="width: 80%;" @keyup.enter.native="handleQuery"></el-input>
+      <el-button type="primary" class="ml10" icon="Search" @click="handleQuery(1)">搜索</el-button>
+      <el-button icon="Refresh" @click="handleQuery(2)">重置</el-button>
+    </div>
+    <div id="gplotChart" class="w100 h100"></div>
+  </div>
+</template>
+<script>
+  import * as echarts from 'echarts'
+  import {resNameBtType, listAllTopology} from "@/api/disRevenue/resource"
+  export default {
+    name: 'gplot',
+    data() {
+      return {
+        level1Img: require('@/assets/images/level1.png'),
+        level2Img: require('@/assets/images/level2.png'),
+        level3Img: require('@/assets/images/level3.png'),
+        level2ImgTrue: require('@/assets/images/level2True.png'),
+        level3ImgTrue: require('@/assets/images/level3True.png'),
+        switchNameList: {},
+        resName: '',
+      }
+    },
+    created() {
+      this.switchList();
+    },
+    mounted() {
+      // this.$nextTick(() => {
+      //   this.getList();
+      // })
+    },
+    methods: {
+      // 获取详情
+      getList(res,lightVal) {
+        const gplotChartLine = echarts.init(document.getElementById('gplotChart'));
+        let seriesNodes = [
+            {
+              id: 'cloud',
+              name: '云',
+              // symbolSize: 80,
+              symbol: `image://${this.level1Img}`,
+              symbolSize: [40, 40], // 图片宽高
+              x: 250,
+              y: 300
+            },
+        ];
+        let links = [];
+        if (res.params) {
+          Object.keys(res.params).forEach((item,index) => {
+            links.push({source: 'cloud', target: item, lineStyle: { width: 2 }});
+            seriesNodes.push({
+              id: item,
+              name: item,
+              // symbol: 'rect',
+              // symbolSize: 60,
+              symbol: `image://${lightVal && lightVal[item] ? this.level2ImgTrue : this.level2Img}`,
+              symbolSize: [40, 40], // 图片宽高
+              x: 400,
+              y: 200 * (index + 1)
+            });
+            res.params[item].forEach((val,indexVal) => {
+              if (val && val.serverName) {
+                links.push({source: item, target: val.serverName, lineStyle: { width: 2 }});
+                seriesNodes.push({
+                  id: val.serverName,
+                  name: val.serverName,
+                  // symbol: 'rect',
+                  // symbolSize: 60,
+                  symbol: `image://${lightVal && lightVal[val.serverName] ? this.level3ImgTrue : this.level3Img}`,
+                  symbolSize: [40, 40], // 图片宽高
+                  x: 900,
+                  y: 60 * (indexVal + 1)
+                });
+              }
+            });
+          });
+        }
+        let option = {
+          title: {
+            text: '',
+            left: 'center',
+          },
+          tooltip: {},
+          series: [
+            {
+              type: 'graph', // 关系图类型
+              layout: 'none', // 关闭力导向布局，使用固定位置
+              roam: true, // 不允许鼠标缩放和平移
+              label: {
+                show: false, // 显示节点标签
+              },
+              // 节点数据 - 增加了固定的x和y坐标
+              nodes: seriesNodes,
+              links: links
+            },
+          ],
+        };
+        gplotChartLine.setOption(option);
+      },
+      // 获取交换机下拉
+      switchList(val) {
+        let params = {};
+        if (val && val.resourceName) {
+          params = val;
+        }
+        listAllTopology(params).then(res => {
+          let params = {};
+          res && res.data.forEach(item => {
+            if (params.hasOwnProperty(item.switchName)) {
+              params[item.switchName].push(item);
+            } else {
+              params[item.switchName] = [item];
+            }
+          });
+          if (val && val.resourceName) {
+            let newParam = {};
+            Object.keys(params).forEach(item => {
+              newParam[item] = true;
+              params[item].forEach(val => {
+                newParam[val.serverName] = true;
+              });
+            });
+            console.log('newParam==',newParam);
+            this.getList(this.switchNameList,newParam);
+          } else {
+            this.switchNameList = {params: params};
+            this.getList({params: params});
+          }
+        });
+      },
+      handleQuery(num){
+        if (num === 2) {
+          this.resName = '';
+          this.switchList();
+        } else {
+          let params = {};
+          if (this.resName) {
+            params = {resourceName: this.resName};
+          }
+          this.switchList(params);
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>