1.效果图
2.前端代码
<template> <div class="echartLayout"> <div class="filter-item" style="margin-left: 2%"> <el-select clearable class="filter-item" placeholder="被访问应用分组" filterable v-model="temp.toGroupId" @change="selectEditByGroupId(temp.toGroupId)" size="mini"> <el-option v-for="pile in toPiles" :key="pile.groupId" :label="pile.groupName" :value="pile.groupId" > el-option> el-select> <el-select clearable class="filter-item" placeholder="被访问的应用" filterable v-model="temp.targetAppKey" @change="selectAppInfo()" size="mini"> <el-option v-for="appInfo in appVisitedList" :key="appInfo.appId" :label="appInfo.appName" :value="appInfo.appKey" > el-option> el-select> <el-select clearable filterable class="filter-item" placeholder="被访问应用服务名称" v-model="temp.targetServiceName" size="mini" > <el-option v-for="server in serverList" :key="server.serviceName" :label="server.serviceName" :value="server.serviceName" @click.native="handleFilter" > el-option> el-select> <el-radio class="filter-item" v-model="temp.nodeNumber" size="mini" label="1" border >显示1级el-radio> <el-radio class="filter-item" v-model="temp.nodeNumber" size="mini" label="2" border >显示2级el-radio> <el-button class="filter-item" type="primary" icon="el-icon-search" @click.native="handleFilter" size="mini"> 搜索 el-button> div> <div id="container" style="width:100%; height:100%; overflow:hidden;">div> div>template><script> import echarts from 'echarts' import { getAppCallDiagram,getSelectValByParams } from '@/api/iot/app-call-diagram'; import {getAppInfos, getAppInfoByGroupId} from '@/api/iot/app-info'; import {getGroups} from "@/api/iot/app-group"; // 节点图标 let appSymbol = "path://M960 42.666667H64c-12.8 0-21.333333 8.533333-21.333333 21.333333v896c0 12.8 8.533333 21.333333 21.333333 21.333333h896c12.8 0 21.333333-8.533333 21.333333-21.333333V64c0-12.8-8.533333-21.333333-21.333333-21.333333z m-21.333333 896H85.333333V682.666667h853.333334v256z m0-298.666667H85.333333V384h853.333334v256z m0-298.666667H85.333333V85.333333h853.333334v256zM298.666667 768h-42.666667v85.333333h42.666667v-85.333333z m-85.333334 0H170.666667v85.333333h42.666666v-85.333333z m661.333334 21.333333h-170.666667v42.666667h170.666667v-42.666667zM298.666667 469.333333h-42.666667v85.333334h42.666667v-85.333334z m-85.333334 0H170.666667v85.333334h42.666666v-85.333334z m661.333334 21.333334h-170.666667v42.666666h170.666667v-42.666666zM298.666667 170.666667h-42.666667v85.333333h42.666667V170.666667z m-85.333334 0H170.666667v85.333333h42.666666V170.666667z m661.333334 21.333333h-170.666667v42.666667h170.666667V192z" let masterSymbol = "path://M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z" let slaveSymbol = "path://M600.255321 133.164178c120.213708 0 219.218733 68.021482 232.313549 155.527628h21.531936c-6.225171-97.884819-117.4874-175.858037-253.843452-175.858037S352.637041 190.806986 346.411869 288.691806h21.529903c13.094816-87.506146 112.099841-155.527628 232.313549-155.527628z,M600.255321 436.760206c-120.213708 0-219.218733-68.021482-232.313549-155.527627H346.409836c6.225171 97.884819 117.4874 175.858037 253.843452 175.858036s247.620314-77.973217 253.843452-175.858036h-21.531936c-13.09075 87.504113-112.095775 155.527628-232.309483 155.527627z,M346.125211 741.541498c0 101.900075 113.7771 184.508626 254.13011 184.508625 140.350978 0 254.130111-82.60855 254.130111-184.508625v-444.199103c0-2.901149-0.103685-5.784001-0.286659-8.650589h-21.531936c0.971794 6.4854 1.486153 13.076519 1.486153 19.757091v421.988131c0 96.803242-104.675176 175.282686-233.799702 175.282686s-233.799702-78.479444-233.799701-175.282686V308.448897c0-6.680572 0.516392-13.269658 1.486152-19.757091h-21.529903a135.835594 135.835594 0 0 0-0.286658 8.650589v444.199103z" // let slaveSymbol = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAgCAYAAABO6BuSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFMzhFMDM4REEwQUYxMUVBQkY1NEIzNTg4MTM4RjIxOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFMzhFMDM4RUEwQUYxMUVBQkY1NEIzNTg4MTM4RjIxOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkUzOEUwMzhCQTBBRjExRUFCRjU0QjM1ODgxMzhGMjE4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkUzOEUwMzhDQTBBRjExRUFCRjU0QjM1ODgxMzhGMjE4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ZMccrwAACbZJREFUeNrkWUtvJFcV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" let proxySymbol = "path://M936.33 732.203c-9.872-10.814-23.349-17.123-37.953-17.778-14.849-0.451-28.613 4.383-39.427 14.255-0.215 0.195-0.282 0.476-0.492 0.673l-144.256-83.448c0.625-2.939 1.994-5.635 2.133-8.697 0.676-14.624-4.383-28.634-14.255-39.448-20.379-22.284-55.096-23.841-77.401-3.523-22.305 20.4-23.882 55.096-3.502 77.421 7.932 8.707 18.534 13.533 29.878 15.799l17.069 160.864c-5.049 2.466-10.138 4.9-14.422 8.82-23.964 21.875-25.643 59.192-3.769 83.156 11.593 12.699 27.507 19.13 43.483 19.13 14.173 0 28.408-5.08 39.673-15.361 11.613-10.61 18.393-25.111 19.109-40.8 0.264-5.807-1.162-11.301-2.527-16.782l114.101-74.264c8.695 6.485 18.549 11.122 29.627 11.618 0.86 0.041 1.7 0.082 2.56 0.082 13.682 0 26.688-5.039 36.867-14.337 22.307-20.359 23.863-55.096 3.504-77.38z m-92.616 24.03c-2.588 10.576-2.855 21.552 0.968 31.893l-109.7 71.397c-9.88-10.018-22.696-16.007-36.719-17.202l-16.624-156.665a54.739 54.739 0 0 0 16.898-10.515c0.637-0.579 0.891-1.421 1.498-2.025l143.679 83.117z m-206.233-122.63c0.287-6.431 3.072-12.412 7.824-16.754a24.194 24.194 0 0 1 16.304-6.308c6.575 0 13.108 2.663 17.86 7.865 4.342 4.752 6.575 10.937 6.288 17.41-0.287 6.431-3.072 12.371-7.824 16.713h-0.021c-4.793 4.342-11.081 6.964-17.409 6.308-6.431-0.287-12.371-3.072-16.713-7.824-4.364-4.752-6.596-10.937-6.309-17.41z m74.963 287.851c-11.47 10.528-29.432 9.708-39.898-1.802-10.487-11.511-9.688-29.412 1.802-39.898 5.243-4.793 11.961-7.414 19.028-7.414 0.43 0 0.86 0.041 1.29 0.041 7.537 0.328 14.501 3.605 19.581 9.176 5.1 5.571 7.701 12.781 7.353 20.318-0.328 7.536-3.585 14.5-9.156 19.579z m199.738-134.483c-4.772 4.342-10.61 6.185-17.389 6.308-6.452-0.328-12.391-3.113-16.754-7.865-8.971-9.831-8.275-25.152 1.557-34.123a24.057 24.057 0 0 1 16.263-6.308c6.554 0 13.108 2.663 17.86 7.865 4.363 4.752 6.595 10.937 6.308 17.369-0.287 6.472-3.072 12.412-7.845 16.754z,M151.81 219.064v18.751c65.713 49.346 192.006 82.731 337.007 82.731s271.291-33.385 337.005-82.731v-18.751c-57.667 50.36-186.873 85.432-337.005 85.432-150.134 0-279.341-35.072-337.007-85.432zM488.817 63.779c-221.567 0-401.197 71.858-401.197 160.48V721.72h2.025c20.146 81.105 191.141 144.432 399.172 144.432 24.529 0 32.095-2.058 55.411-3.746l0.023-31.962c-23.252 1.598-30.838 3.61-55.434 3.61-203.85 0-369.102-57.477-369.102-128.382V608.14c61.194 57.349 203.387 97.532 369.102 97.532 20.51 0 40.664-0.614 60.344-1.802l1.249-32.051a1057.38 1057.38 0 0 1-61.594 1.779c-203.85 0-369.102-57.477-369.102-128.382v-97.555c61.194 57.349 203.387 97.555 369.102 97.555s307.908-40.206 369.079-97.555v175.217l32.095-0.545V224.259c0.001-88.622-179.609-160.48-401.173-160.48z m369.079 320.957c0 70.908-165.229 128.382-369.079 128.382s-369.102-57.474-369.102-128.382v-97.555c61.194 57.352 203.387 97.555 369.102 97.555s307.908-40.203 369.079-97.555v97.555z m-369.079-32.095c-203.85 0-369.102-57.477-369.102-128.382 0-70.908 165.252-128.385 369.102-128.385s369.079 57.477 369.079 128.385c0 70.905-165.229 128.382-369.079 128.382z" // -- 断开异常图标 let errorEffectSymbol = "path://M671.830688 511.699001l319.059377-319.059377c43.945914-43.945914 43.945914-115.583774 0-159.529688-43.945914-43.945914-115.583774-43.945914-159.529688 0l-319.059377 319.059377-319.059377-319.059377c-43.945914-43.945914-115.583774-43.945914-159.529688 0-43.945914 43.945914-43.945914 115.583774 0 159.529688l319.059377 319.059377-319.059377 319.059377c-43.945914 43.945914-43.945914 115.583774 0 159.529688 43.945914 43.945914 115.583774 43.945914 159.529688 0l319.059377-319.059377 319.059377 319.059377c43.945914 43.945914 115.583774 43.945914 159.529688 0 43.945914-43.945914 43.945914-115.583774 0-159.529688L671.830688 511.699001z" export default { name: "container", data() { return { // --------下拉框-选中-的数据-开始--------- toGroupIdBySelect: undefined, targetAppKeyBySelect: undefined, targetServiceNameBySelect: undefined, nodeNumberBySelect: undefined, // xxxx2: 2是代表二级节点的选中变量 toGroupIdBySelect2: undefined, targetAppKeyBySelect2: undefined, targetServiceNameBySelect2: undefined, nodeNumberBySelect2: undefined, // 一级节点缓存的数据 oneNodeDataListByCache: undefined, // 二级级节点缓存的数据 twoNodeDataListByCache: undefined, // 空数组 nullList: [], // --------下拉框-选中-的数据-结束--------- // --------下拉框数据-开始--------- toPiles:[], serverList:[], appList:[], targetAppList:[], appVisitedList:[], temp: { nodeNumber: '1', groupId: undefined, sourceAppKey: undefined, groupById: undefined, toGroupId: undefined, targetAppKey: undefined, targetServiceName: undefined, sourceAppName: undefined, targetServiceNames: undefined, status: undefined }, getAppListParams:{ page: 1, limit: 99, status: 1 }, getAppGroupParams:{ page: 1, limit: 99, status: 1 }, // -------下拉框数据-结束------ // 根数据 responseData: null, // 一级节点数据 nodeList: [], // 二级节点数据 childNodeList: [], // 一级节点数据(再次赋值) nodeListForTwo: [], // 二级节点数据(再次赋值) childNodeListForTwo: [], myChart: null, chartData: [], nodeDataList: [], nodeDataListForTwoReq: [], }; }, // 初始化下拉框 created() { this.getGroups(); this.getAppInfos(); }, methods: { getUrlInfos() { // 判断是否已经缓存过了 if (this.toGroupIdBySelect2 === this.temp.toGroupId && this.targetAppKeyBySelect2 === this.temp.targetAppKey && this.targetServiceNameBySelect2 === this.temp.targetServiceName && this.nodeNumberBySelect2 === this.temp.nodeNumber ) { // 检查二级节点是否缓存过 if (!this.twoNodeDataListByCache) { this.verifyInitData(); } else { document.getElementById("container").removeAttribute('_echarts_instance_'); this.initEchartForTwo(); } } else if ( this.toGroupIdBySelect === this.temp.toGroupId && this.targetAppKeyBySelect === this.temp.targetAppKey && this.targetServiceNameBySelect === this.temp.targetServiceName && this.nodeNumberBySelect === this.temp.nodeNumber) { // 检查一级节点是否缓存过 if (!this.oneNodeDataListByCache) { this.verifyInitData(); } else { document.getElementById("container").removeAttribute('_echarts_instance_'); this.initEchartForOne(); } } else { document.getElementById("container").removeAttribute('_echarts_instance_'); this.verifyInitData(); } }, verifyInitData() { // 将搜索的数据缓存起来 // 一级节点选中的数据 // 如果是第一次 就赋值 if (this.temp.nodeNumber === '1') { this.nodeNumberBySelect = this.temp.nodeNumber; if (!this.toGroupIdBySelect) { this.toGroupIdBySelect = this.temp.toGroupId; } else if (this.toGroupIdBySelect != this.temp.toGroupId) { this.toGroupIdBySelect = this.temp.toGroupId; this.targetAppKeyBySelect = this.temp.targetAppKey; this.targetServiceNameBySelect = this.temp.targetServiceName; this.initDataForTwoReq(); return; } // 如果是第一次 就赋值 if (!this.targetAppKeyBySelect) { this.targetAppKeyBySelect = this.temp.targetAppKey; } else if ((this.toGroupIdBySelect === this.temp.toGroupId) && (this.targetAppKeyBySelect != this.temp.targetAppKey)) { this.toGroupIdBySelect = this.temp.toGroupId; this.targetAppKeyBySelect = this.temp.targetAppKey; this.targetServiceNameBySelect = this.temp.targetServiceName; this.initDataForTwoReq(); return; } // 如果是第一次 就赋值 if (!this.targetServiceNameBySelect) { this.targetServiceNameBySelect = this.temp.targetServiceName; this.initDataForFirst(); } else if ((this.toGroupIdBySelect === this.temp.toGroupId) && (this.targetAppKeyBySelect === this.temp.targetAppKey) && (this.targetServiceNameBySelect != this.temp.targetServiceName)) { this.toGroupIdBySelect = this.temp.toGroupId; this.targetAppKeyBySelect = this.temp.targetAppKey; this.targetServiceNameBySelect = this.temp.targetServiceName; this.initDataForTwoReq(); return; } } else { // 二级节点选中的数据 this.nodeNumberBySelect2 = this.temp.nodeNumber; if (!this.toGroupIdBySelect2) { this.toGroupIdBySelect2 = this.temp.toGroupId; } else if (this.toGroupIdBySelect2 != this.temp.toGroupId) { this.toGroupIdBySelect2 = this.temp.toGroupId; this.targetAppKeyBySelect2 = this.temp.targetAppKey; this.targetServiceNameBySelect2 = this.temp.targetServiceName; this.initDataForTwoReq(); return; } // 如果是第一次 就赋值 if (!this.targetAppKeyBySelect2) { this.targetAppKeyBySelect2 = this.temp.targetAppKey; } else if ((this.toGroupIdBySelect2 === this.temp.toGroupId) && (this.targetAppKeyBySelect != this.temp.targetAppKey)) { this.toGroupIdBySelect2 = this.temp.toGroupId; this.targetAppKeyBySelect2 = this.temp.targetAppKey; this.targetServiceNameBySelect2 = this.temp.targetServiceName; this.initDataForTwoReq(); return; } // 如果是第一次 就赋值 if (!this.targetServiceNameBySelect2) { this.targetServiceNameBySelect2 = this.temp.targetServiceName; this.initDataForFirst(); } else if ((this.toGroupIdBySelect2 === this.temp.toGroupId) && (this.targetAppKeyBySelect2 === this.temp.targetAppKey) && (this.targetServiceNameBySelect2 != this.temp.targetServiceName)) { this.toGroupIdBySelect2 = this.temp.toGroupId; this.targetAppKeyBySelect2 = this.temp.targetAppKey; this.targetServiceNameBySelect2 = this.temp.targetServiceName; this.initDataForTwoReq(); return; } } // this.initDataForFirst(); }, initDataForFirst() { getAppCallDiagram(this.temp).then(response => { this.responseData = []; this.nodeList = []; this.childNodeList = []; this.responseData = response.content.content; // console.log("总数据 ========") // console.log(this.responseData) // 一级节点数据 this.nodeList = this.responseData.nodeList; // 二级节点长度 let nodeSize = this.nodeList.length if (this.temp.nodeNumber === '2') { for (let i = 0; i < nodeSize; i++) { let twoNodeLength = this.nodeList[i].nodeList.length if (0 < twoNodeLength) { let zuiNode = this.nodeList[i].nodeList let zuiLength = zuiNode.length; for (let j = 0; j < zuiLength; j++) { // 二级节点数据 this.childNodeList.push(zuiNode[j]); } } } } this.initEchart(); }) }, // 下拉框的值变动了 initDataForTwoReq() { getAppCallDiagram(this.temp).then(response => { // console.log("我是 第二次发起的请求"); this.responseData = []; this.nodeList = []; this.childNodeList = []; this.responseData = response.content.content; // console.log("第二次发起的请求总数据 ========") // console.log(this.responseData) // 一级节点数据 this.nodeList = this.responseData.nodeList; // 二级节点长度 let nodeSize = this.nodeList.length if (this.temp.nodeNumber === '2') { for (let i = 0; i < nodeSize; i++) { let twoNodeLength = this.nodeList[i].nodeList.length if (0 < twoNodeLength) { let zuiNode = this.nodeList[i].nodeList let zuiLength = zuiNode.length; for (let j = 0; j < zuiLength; j++) { // 二级节点数据 this.childNodeList.push(zuiNode[j]); } } } } this.initEchartForTwoReq(); }) }, initEchartForTwoReq() { // 第二次初始化时清空原有的数据 this.nodeDataListForTwoReq = []; let dom = document.getElementById("container"); this.myChart = echarts.init(dom); this.nodeDataListForTwoReq = []; this.chartData = this.dataEChartForTwoReq(); let option = { title: { // text: "URL拓扑图", top: "top", left: "center" }, itemStyle: { // 图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 normal: { color: "#67C23A", }, //图例阴影的模糊大小 shadowBlur: 3, // 阴影的颜色 shadowColor:'rgb(128, 128, 56)' }, // 图标下的字体样式 textStyle: { color: '#444', fontSize: 16, fontWeight: 600, }, // 图例 legend: [{ formatter: function(name) { return echarts.format.truncateText(name, 200, '12px', '…'); }, // 图例的tooltip 配置，默认不显示,可以在文件较多的时候开启tooltip对文字进行剪切 tooltip: { show: true }, // 图例的选择模式，默认为开启，也可以设置成 single 或者 multiple selectedMode: 'false', bottom: 20, }], // 数据更新动画的时长，默认300 animationDuration: 500, animationEasingUpdate: 'quinticInOut', xAxis: { show: false, type: 'value' }, yAxis: { show: false, type: 'value' }, // 装载数据 series: [{ type: 'graph', coordinateSystem: 'cartesian2d', legendHoverLink: false, hoverAnimation: true, nodeScaleRatio: false, //箭头 edgeSymbol: ['circle', 'none'], edgeSymbolSize: [2, 15], edgeLabel: { show: false, normal: { show: true, position: 'middle', textStyle: { fontSize: 12 }, formatter: "{c}" } }, focusNodeAdjacency: true, roam: false, // 圆形上面的文字 label: { normal: { position: "bottom", show: true, textStyle: { fontSize: 12, }, } }, itemStyle: { normal: { color: "#409eff", }, shadowBlur: 0 }, lineStyle: { normal: { width: 0, shadowColor: 'none', color: '#ff0000' } }, data: this.nodeDataListForTwoReq, links: this.nodeDataListForTwoReq.map(item => { return { source: item.name, value: item.linkValue, target: item.linkTargetName } }) }].concat(this.getCoordDataListForTwoReq()) }; document.getElementById("container").removeAttribute('_echarts_instance_'); this.myChart.setOption(option,true); }, initEchart() { // 第二次初始化时清空原有的数据 this.nodeDataList = []; let dom = document.getElementById("container"); this.myChart = echarts.init(dom); this.nodeDataList = []; this.chartData = this.dataEChart(); let option = { title: { // text: "URL拓扑图", top: "top", left: "center" }, itemStyle: { // 图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 normal: { color: "#67C23A", }, //图例阴影的模糊大小 shadowBlur: 3, // 阴影的颜色 shadowColor:'rgb(128, 128, 56)' }, // 图标下的字体样式 textStyle: { color: '#444', fontSize: 16, fontWeight: 600, }, // 图例 legend: [{ formatter: function(name) { return echarts.format.truncateText(name, 200, '12px', '…'); }, // 图例的tooltip 配置，默认不显示,可以在文件较多的时候开启tooltip对文字进行剪切 tooltip: { show: true }, // 图例的选择模式，默认为开启，也可以设置成 single 或者 multiple selectedMode: 'false', bottom: 20, }], // 数据更新动画的时长，默认300 animationDuration: 500, animationEasingUpdate: 'quinticInOut', xAxis: { show: false, type: 'value' }, yAxis: { show: false, type: 'value' }, // 装载数据 series: [{ type: 'graph', coordinateSystem: 'cartesian2d', legendHoverLink: false, hoverAnimation: true, nodeScaleRatio: false, //箭头 edgeSymbol: ['circle', 'none'], edgeSymbolSize: [2, 15], edgeLabel: { show: false, normal: { show: true, position: 'middle', textStyle: { fontSize: 12 }, formatter: "{c}" } }, focusNodeAdjacency: true, roam: false, // 圆形上面的文字 label: { normal: { position: "bottom", show: true, textStyle: { fontSize: 12, }, } }, itemStyle: { normal: { color: "#409eff", }, shadowBlur: 0 }, lineStyle: { normal: { width: 0, shadowColor: 'none', color: '#ff0000' } }, data: this.nodeDataList, links: this.nodeDataList.map(item => { return { source: item.name, value: item.linkValue, target: item.linkTargetName } }) }].concat(this.getCoordDataList()) }; document.getElementById("container").removeAttribute('_echarts_instance_'); this.myChart.setOption(option,true); }, // 数据填充第二次请求 dataEChartForTwoReq() { this.nodeDataListForTwoReq = undefined; this.nodeDataListForTwoReq = new Array(); // 根节点 let rootData = { name: this.responseData.name, linkTargetName: this.responseData.name, linkValue: ' ', // coordConfig: {level: 2}, symbolSize: 60, symbol: appSymbol, draggable: false, value: [400, 100] }; this.nodeDataListForTwoReq.push(rootData); // XY轴和图标大小动态分部 let nodeListSize = this.nodeList.length; let yAxisAverageNodeList = Math.floor((190/nodeListSize)); // X轴坐标 let xAxisForNode = 220; // 图标大小 let symbolSizeForNode = 50; for (let i = 0; i < nodeListSize; i++) { // Y轴坐标 let yAxisForNode = yAxisAverageNodeList + (yAxisAverageNodeList * i); if (nodeListSize < 6) { symbolSizeForNode = 50; } else if (5 < nodeListSize < 11) { symbolSizeForNode = 40; // 图标交错布局 if (i % 2 == 1) { xAxisForNode = xAxisForNode + 30 } } else if(10 < nodeListSize < 21) { symbolSizeForNode = 30; if (i % 2 == 1) { yAxisForNode = yAxisForNode + yAxisAverageNodeList; } else { xAxisForNode = xAxisForNode + 30 } } else { symbolSizeForNode = 10; if (i % 2 == 1) { yAxisForNode = 0 + yAxisAverageNodeList; } else { xAxisForNode = xAxisForNode + 30 } } let xyAxis = [xAxisForNode, yAxisForNode]; let nodeListModel = { // 子节点名称 name: this.nodeList[i].name, // 父节点 linkTargetName: this.nodeList[i].linkTargetName, linkValue: ' ', coordConfig: { level: '1', }, // 图标 symbol: masterSymbol, // symbol: slaveSymbol, symbolSize: symbolSizeForNode, draggable: false, value: xyAxis }; xAxisForNode = 220; this.nodeDataListForTwoReq.push(nodeListModel); }; // 二级节点的数据处理 // XY轴和图标大小动态分部 if (this.childNodeList) { let childNodeListSize = this.childNodeList.length; let yAxisAverageChildNodeList = Math.floor((190/childNodeListSize)); // X轴坐标 let xAxisForChildNode = 10; // 图标大小 let symbolSizeForChildNode = 50; for (let i = 0; i < childNodeListSize; i++) { // Y轴坐标 let yAxisForChildNode = yAxisAverageChildNodeList + (yAxisAverageChildNodeList * i); if (childNodeListSize < 6) { symbolSizeForChildNode = 50; } else if (5 < childNodeListSize < 11) { symbolSizeForChildNode = 40; // 图标交错布局 if (i % 2 == 1) { xAxisForChildNode = xAxisForChildNode + 30 } } else if(10 < childNodeListSize < 21) { symbolSizeForChildNode = 30; if (i % 2 == 1) { yAxisForChildNode = yAxisForChildNode + yAxisAverageChildNodeList; } else { xAxisForChildNode = xAxisForChildNode + 30 } } else { symbolSizeForChildNode = 10; if (i % 2 == 1) { yAxisForChildNode = 0 + yAxisAverageChildNodeList; } else { xAxisForChildNode = xAxisForChildNode + 30 } } let xyAxis = [xAxisForChildNode, yAxisForChildNode]; let childNodeListModel = { id: this.childNodeList[i].name + this.childNodeList[i].linkTargetName, // 子节点名称 name: this.childNodeList[i].name, // 父节点 linkTargetName: this.childNodeList[i].linkTargetName, linkValue: ' ', coordConfig: { level: '1', }, symbol: slaveSymbol, symbolSize: symbolSizeForChildNode, draggable: false, value: xyAxis }; xAxisForChildNode = 10; this.nodeDataListForTwoReq.push(childNodeListModel); }; } if (this.temp.nodeNumber === '1') { this.oneNodeDataListByCache = this.nullList; this.oneNodeDataListByCache = this.nodeDataListForTwoReq; } else if (this.temp.nodeNumber === '2'){ this.twoNodeDataListByCache = this.nullList; this.twoNodeDataListByCache = this.nodeDataListForTwoReq; } }, // 数据填充 dataEChart() { this.nodeDataList = undefined; this.nodeDataList = new Array(); // console.log(this.nodeDataList); // 根节点 let rootData = { name: this.responseData.name, linkTargetName: this.responseData.name, linkValue: ' ', // coordConfig: {level: 2}, symbolSize: 60, symbol: appSymbol, draggable: false, value: [400, 100] }; this.nodeDataList.push(rootData); // XY轴和图标大小动态分部 let nodeListSize = this.nodeList.length; let yAxisAverageNodeList = Math.floor((190/nodeListSize)); // X轴坐标 let xAxisForNode = 220; // 图标大小 let symbolSizeForNode = 50; for (let i = 0; i < nodeListSize; i++) { // Y轴坐标 let yAxisForNode = yAxisAverageNodeList + (yAxisAverageNodeList * i); if (nodeListSize < 6) { symbolSizeForNode = 50; } else if (5 < nodeListSize < 11) { symbolSizeForNode = 40; // 图标交错布局 if (i % 2 == 1) { xAxisForNode = xAxisForNode + 30 } } else if(10 < nodeListSize < 21) { symbolSizeForNode = 30; if (i % 2 == 1) { yAxisForNode = yAxisForNode + yAxisAverageNodeList; } else { xAxisForNode = xAxisForNode + 30 } } else { symbolSizeForNode = 10; if (i % 2 == 1) { yAxisForNode = 0 + yAxisAverageNodeList; } else { xAxisForNode = xAxisForNode + 30 } } let xyAxis = [xAxisForNode, yAxisForNode]; let nodeListModel = { // 子节点名称 name: this.nodeList[i].name, // 父节点 linkTargetName: this.nodeList[i].linkTargetName, linkValue: ' ', coordConfig: { level: '1', }, // 图标 symbol: masterSymbol, // symbol: slaveSymbol, symbolSize: symbolSizeForNode, draggable: false, value: xyAxis }; xAxisForNode = 220; this.nodeDataList.push(nodeListModel); }; // 二级节点的数据处理 // XY轴和图标大小动态分部 if (this.childNodeList) { let childNodeListSize = this.childNodeList.length; let yAxisAverageChildNodeList = Math.floor((190/childNodeListSize)); // X轴坐标 let xAxisForChildNode = 10; // 图标大小 let symbolSizeForChildNode = 50; for (let i = 0; i < childNodeListSize; i++) { // Y轴坐标 let yAxisForChildNode = yAxisAverageChildNodeList + (yAxisAverageChildNodeList * i); if (childNodeListSize < 6) { symbolSizeForChildNode = 50; } else if (5 < childNodeListSize < 11) { symbolSizeForChildNode = 40; // 图标交错布局 if (i % 2 == 1) { xAxisForChildNode = xAxisForChildNode + 30 } } else if(10 < childNodeListSize < 21) { symbolSizeForChildNode = 30; if (i % 2 == 1) { yAxisForChildNode = yAxisForChildNode + yAxisAverageChildNodeList; } else { xAxisForChildNode = xAxisForChildNode + 30 } } else { symbolSizeForChildNode = 10; if (i % 2 == 1) { yAxisForChildNode = 0 + yAxisAverageChildNodeList; } else { xAxisForChildNode = xAxisForChildNode + 30 } } let xyAxis = [xAxisForChildNode, yAxisForChildNode]; let childNodeListModel = { id: this.childNodeList[i].name + this.childNodeList[i].linkTargetName, // 子节点名称 name: this.childNodeList[i].name, // 父节点 linkTargetName: this.childNodeList[i].linkTargetName, linkValue: ' ', coordConfig: { level: '1', }, symbol: slaveSymbol, symbolSize: symbolSizeForChildNode, draggable: false, value: xyAxis }; xAxisForChildNode = 10; this.nodeDataList.push(childNodeListModel); }; } if (this.temp.nodeNumber === '1') { this.oneNodeDataListByCache = this.nullList; this.oneNodeDataListByCache = this.nodeDataList; } else if (this.temp.nodeNumber === '2'){ this.twoNodeDataListByCache = this.nullList; this.twoNodeDataListByCache = this.nodeDataList; } }, getCoordDataListForTwoReq() { let coorDataDict = {} let defaultConfig = { type: 'lines', //块1,2...n到节点A,B...N coordinateSystem: 'cartesian2d', // animationDelay: 10000, z: 1, effect: { show: true, smooth: true, trailLength: 0, symbol: "arrow", color: '#67c23a', symbolSize: 10, period: 3, delay: 1500, loop: true, }, lineStyle: { normal: { curveness: 0, color: '#67c23a', width: 1, } }, data: [] } this.nodeDataListForTwoReq.map(item => { if (item.coordConfig !== undefined) { if (!(item.coordConfig.level in coorDataDict)) { let coorConfig = JSON.parse(JSON.stringify(defaultConfig)) if (item.coordConfig.lineStyle !== undefined) { coorConfig.lineStyle = item.coordConfig.lineStyle } if (item.coordConfig.effect !== undefined) { coorConfig.effect = item.coordConfig.effect } coorDataDict[item.coordConfig.level] = coorConfig } let filterData = this.nodeDataListForTwoReq.filter(i => i.name === item.linkTargetName); let filterData0 = []; if (filterData.length > 0) { filterData0 = filterData[0].value; } let coordData = [ item.value, filterData0, ] coorDataDict[item.coordConfig.level].data.push({ coords: coordData }) if (item.coordConfig.bilateral) { coorDataDict[item.coordConfig.level].data.push({ coords: coordDat.reverse() }) } } }) return Object.values(coorDataDict) }, getCoordDataList() { let coorDataDict = {} let defaultConfig = { type: 'lines', //块1,2...n到节点A,B...N coordinateSystem: 'cartesian2d', // animationDelay: 10000, z: 1, effect: { show: true, smooth: true, trailLength: 0, symbol: "arrow", color: '#67c23a', symbolSize: 10, period: 3, delay: 1500, loop: true, }, lineStyle: { normal: { curveness: 0, color: '#67c23a', width: 1, } }, data: [] } this.nodeDataList.map(item => { if (item.coordConfig !== undefined) { if (!(item.coordConfig.level in coorDataDict)) { let coorConfig = JSON.parse(JSON.stringify(defaultConfig)) if (item.coordConfig.lineStyle !== undefined) { coorConfig.lineStyle = item.coordConfig.lineStyle } if (item.coordConfig.effect !== undefined) { coorConfig.effect = item.coordConfig.effect } coorDataDict[item.coordConfig.level] = coorConfig } let filterData = this.nodeDataList.filter(i => i.name === item.linkTargetName); let filterData0 = []; if (filterData.length > 0) { filterData0 = filterData[0].value; } let coordData = [ item.value, filterData0, ] coorDataDict[item.coordConfig.level].data.push({ coords: coordData }) if (item.coordConfig.bilateral) { coorDataDict[item.coordConfig.level].data.push({ coords: coordDat.reverse() }) } } }) return Object.values(coorDataDict) }, // -----One 开始 initEchartForOne() { // 第二次初始化时清空原有的数据 this.nodeDataList = []; let dom = document.getElementById("container"); this.myChart = echarts.init(dom); let option = { title: { // text: "URL拓扑图", top: "top", left: "center" }, itemStyle: { // 图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 normal: { color: "#67C23A", }, //图例阴影的模糊大小 shadowBlur: 3, // 阴影的颜色 shadowColor:'rgb(128, 128, 56)' }, // 图标下的字体样式 textStyle: { color: '#444', fontSize: 16, fontWeight: 600, }, // 图例 legend: [{ formatter: function(name) { return echarts.format.truncateText(name, 200, '12px', '…'); }, // 图例的tooltip 配置，默认不显示,可以在文件较多的时候开启tooltip对文字进行剪切 tooltip: { show: true }, // 图例的选择模式，默认为开启，也可以设置成 single 或者 multiple selectedMode: 'false', bottom: 20, }], // 数据更新动画的时长，默认300 animationDuration: 500, animationEasingUpdate: 'quinticInOut', xAxis: { show: false, type: 'value' }, yAxis: { show: false, type: 'value' }, // 装载数据 series: [{ type: 'graph', coordinateSystem: 'cartesian2d', legendHoverLink: false, hoverAnimation: true, nodeScaleRatio: false, //箭头 edgeSymbol: ['circle', 'none'], edgeSymbolSize: [2, 15], edgeLabel: { show: false, normal: { show: true, position: 'middle', textStyle: { fontSize: 12 }, formatter: "{c}" } }, focusNodeAdjacency: true, roam: false, // 圆形上面的文字 label: { normal: { position: "bottom", show: true, textStyle: { fontSize: 12, }, } }, itemStyle: { normal: { color: "#409eff", }, shadowBlur: 0 }, lineStyle: { normal: { width: 0, shadowColor: 'none', color: '#ff0000' } }, data: this.oneNodeDataListByCache, links: this.oneNodeDataListByCache.map(item => { return { source: item.name, value: item.linkValue, target: item.linkTargetName } }) }].concat(this.getCoordDataListForOne()) }; document.getElementById("container").removeAttribute('_echarts_instance_'); this.myChart.setOption(option,true); }, getCoordDataListForOne() { let coorDataDict = {} let defaultConfig = { type: 'lines', //块1,2...n到节点A,B...N coordinateSystem: 'cartesian2d', // animationDelay: 10000, z: 1, effect: { show: true, smooth: true, trailLength: 0, symbol: "arrow", color: '#67c23a', symbolSize: 10, period: 3, delay: 1500, loop: true, }, lineStyle: { normal: { curveness: 0, color: '#67c23a', width: 1, } }, data: [] } this.oneNodeDataListByCache.map(item => { if (item.coordConfig !== undefined) { if (!(item.coordConfig.level in coorDataDict)) { let coorConfig = JSON.parse(JSON.stringify(defaultConfig)) if (item.coordConfig.lineStyle !== undefined) { coorConfig.lineStyle = item.coordConfig.lineStyle } if (item.coordConfig.effect !== undefined) { coorConfig.effect = item.coordConfig.effect } coorDataDict[item.coordConfig.level] = coorConfig } let coordData = [ item.value, this.oneNodeDataListByCache.filter(i => i.name === item.linkTargetName)[0].value, ] coorDataDict[item.coordConfig.level].data.push({ coords: coordData }) if (item.coordConfig.bilateral) { coorDataDict[item.coordConfig.level].data.push({ coords: coordData.reverse() }) } } }) return Object.values(coorDataDict) }, // -----One 结束 // -----Two 开始 initEchartForTwo() { // 第二次初始化时清空原有的数据 this.nodeDataList = []; let dom = document.getElementById("container"); this.myChart = echarts.init(dom); let option = { title: { // text: "URL拓扑图", top: "top", left: "center" }, itemStyle: { // 图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 normal: { color: "#67C23A", }, //图例阴影的模糊大小 shadowBlur: 3, // 阴影的颜色 shadowColor:'rgb(128, 128, 56)' }, // 图标下的字体样式 textStyle: { color: '#444', fontSize: 16, fontWeight: 600, }, // 图例 legend: [{ formatter: function(name) { return echarts.format.truncateText(name, 200, '12px', '…'); }, // 图例的tooltip 配置，默认不显示,可以在文件较多的时候开启tooltip对文字进行剪切 tooltip: { show: true }, // 图例的选择模式，默认为开启，也可以设置成 single 或者 multiple selectedMode: 'false', bottom: 20, }], // 数据更新动画的时长，默认300 animationDuration: 500, animationEasingUpdate: 'quinticInOut', xAxis: { show: false, type: 'value' }, yAxis: { show: false, type: 'value' }, // 装载数据 series: [{ type: 'graph', coordinateSystem: 'cartesian2d', legendHoverLink: false, hoverAnimation: true, nodeScaleRatio: false, //箭头 edgeSymbol: ['circle', 'none'], edgeSymbolSize: [2, 15], edgeLabel: { show: false, normal: { show: true, position: 'middle', textStyle: { fontSize: 12 }, formatter: "{c}" } }, focusNodeAdjacency: true, roam: false, // 圆形上面的文字 label: { normal: { position: "bottom", show: true, textStyle: { fontSize: 12, }, } }, itemStyle: { normal: { color: "#409eff", }, shadowBlur: 0 }, lineStyle: { normal: { width: 0, shadowColor: 'none', color: '#ff0000' } }, data: this.twoNodeDataListByCache, links: this.twoNodeDataListByCache.map(item => { return { source: item.name, value: item.linkValue, target: item.linkTargetName } }) }].concat(this.getCoordDataListForTwo()) }; document.getElementById("container").removeAttribute('_echarts_instance_'); this.myChart.setOption(option,true); }, getCoordDataListForTwo() { let coorDataDict = {} let defaultConfig = { type: 'lines', //块1,2...n到节点A,B...N coordinateSystem: 'cartesian2d', // animationDelay: 10000, z: 1, effect: { show: true, smooth: true, trailLength: 0, symbol: "arrow", color: '#67c23a', symbolSize: 10, period: 3, delay: 1500, loop: true, }, lineStyle: { normal: { curveness: 0, color: '#67c23a', width: 1, } }, data: [] } this.twoNodeDataListByCache.map(item => { if (item.coordConfig !== undefined) { if (!(item.coordConfig.level in coorDataDict)) { let coorConfig = JSON.parse(JSON.stringify(defaultConfig)) if (item.coordConfig.lineStyle !== undefined) { coorConfig.lineStyle = item.coordConfig.lineStyle } if (item.coordConfig.effect !== undefined) { coorConfig.effect = item.coordConfig.effect } coorDataDict[item.coordConfig.level] = coorConfig } let coordData = [ item.value, this.twoNodeDataListByCache.filter(i => i.name === item.linkTargetName)[0].value, ] coorDataDict[item.coordConfig.level].data.push({ coords: coordData }) if (item.coordConfig.bilateral) { coorDataDict[item.coordConfig.level].data.push({ coords: coordData.reverse() }) } } }) return Object.values(coorDataDict) }, // -----Two 结束 // 搜索的方法 handleFilter() { this.getUrlInfos(); }, //---------下拉框方法-开始-------------- getGroups(){ getGroups(this.getAppGroupParams).then(response=>{ this.toPiles=response.content.list; }); }, getAppInfos(){ getAppInfos(this.getAppListParams).then(response=>{ this.appList=response.content.list; }); }, selectAppInfo(){ this.temp.targetServiceName=undefined; this.getAppServiceByAppId(); }, getAppServiceByAppId(){ this.temp.groupId = this.temp.toGroupId getSelectValByParams(this.temp).then( response=>{ this.serverList=response.content.list; }); }, getAppInfoByGroupId(val){ if(val != null && val != '' && val != undefined){ getAppInfoByGroupId(val).then(response=>{ this.appList=response.content.list; }); } }, selectEditByGroupId(groupId){ this.temp.targetAppKey=undefined; this.temp.targetServiceName=undefined; this.getAppInfoVisitedGroupId(groupId); }, selectByGroupId(val){ this.getAppInfoVisitedGroupId(val); }, getAppInfoVisitedGroupId(val){ if(val != null && val != '' && val != undefined){ getAppInfoByGroupId(val).then(response=>{ this.targetAppList=response.content.list; this.appVisitedList=response.content.list; }); } }, //----------下拉框方法-结束------------ } }script><style> .filter-item { display: inline-block; vertical-align: middle; margin-bottom: 10px; margin-right: 10px; } .echartLayout { margin: auto; position: absolute; top: 10%; left: 0; bottom: 0; right: 0; }style>注: 其他引用不在赘述
3.后台代码
/** * 获取应用调用关系 * @author daleidedd * @date 2020/09/27 */@Overridepublic BaseResponse getAppServiceBindParam(AppServiceBindRequest appServiceBindRequest) { // 校验参数 this.verifyParams(appServiceBindRequest); Integer nodeNumber = appServiceBindRequest.getNodeNumber(); if (1 == nodeNumber) { return this.getOneNode(appServiceBindRequest); } else if (2 == nodeNumber) { return this.getTwoNode(appServiceBindRequest); } else { log.error("节点数异常"); throw new BizException(AppConfigEnum.NO_EXIST_NODE_NUMBER_EXCEPTION, "节点层数异常"); }}/** * 获取二层节点 * @author daleidedd * @date 2020/09/28 */private BaseResponse getTwoNode(AppServiceBindRequest appServiceBindRequest) { BaseResponse oneNodeResponse = this.getOneNode(appServiceBindRequest); if (!oneNodeResponse.OK()) { log.error("获取一层节点数据异常"); throw new BizException(AppConfigEnum.NO_EXIST_GET_ONE_NODE_EXCEPTION, "获取一层节点数据异常"); } AppCallDiagramResp oneNodeData = (AppCallDiagramResp)oneNodeResponse.getContent(); if (null == oneNodeData) { log.info("没有对应数据"); throw new BizException(AppConfigEnum.DATA_IS_NULL, "没有对应数据"); } List oneNodeList = oneNodeData.getNodeList(); if (CollectionUtils.isEmpty(oneNodeList)) { log.info("没有对应数据"); throw new BizException(AppConfigEnum.DATA_IS_NULL, "没有对应数据"); } try { // 1: 获取 appName 对应的 appKey oneNodeList.stream().forEach(appInfoDB -> { AppInfoPo appInfo = new AppInfoPo(); appInfo.setStatus(1); appInfo.setAppName(appInfoDB.getName()); List appInfoPoListDB = appInfoService.query(appInfo); Set appKeySetDB = appInfoPoListDB.stream().map(AppInfoPo::getAppKey).collect(Collectors.toSet()); // 2: appKey => targetAppKey 去 app_service_bing 找 source_app_key appKeySetDB.stream().forEach(appKey -> { AppServiceBindPo bindPo = new AppServiceBindPo(); bindPo.setStatus(1); bindPo.setTargetAppKey(appKey); List bindPoListDBByAppKey = appServiceBindService.query(bindPo); // 2.1: 通过 sourceAppKey 获取到 appName 然后再填充到子节点 List twoNodeList = Lists.newArrayList(); Set sourceAppKeySet = Sets.newHashSet(); bindPoListDBByAppKey.forEach(bindPoEntity -> { sourceAppKeySet.add(bindPoEntity.getSourceAppKey()); }); // 2.2: 得到了appName sourceAppKeySet.stream().forEach(sourceAppKey -> { AppInfoPo appInfoForTwo = new AppInfoPo(); appInfoForTwo.setStatus(1); appInfoForTwo.setAppKey(sourceAppKey); AppInfoPo appInfoDto = appInfoService.selectAppInfo(appInfoForTwo); if (null != appInfoDto) { // 填充二级节点数据 AppCallDiagramResp callDiagramResp = AppCallDiagramResp.builder() .name(appInfoDto.getAppName()) .linkTargetName(appInfoDB.getName()) .nodeList(null) .build(); twoNodeList.add(callDiagramResp); } }); appInfoDB.setNodeList(twoNodeList); }); }); oneNodeData.setNodeList(oneNodeList); return BaseResponse.success(oneNodeData); } catch (Exception e) { log.error("查询失败", e); throw new BizException(AppConfigEnum.UNKNOWN_ERROR); }}/** * 获取一层节点 * @author daleidedd * @date 2020/09/28 */private BaseResponse getOneNode(AppServiceBindRequest appServiceBindRequest) { String targetServiceName = appServiceBindRequest.getTargetServiceName(); // 通过 AppServiceBindPo 查询出对应的所有 sourceAppKey AppServiceBindPo appServiceBindPo = new AppServiceBindPo(); appServiceBindPo.setStatus(1); appServiceBindPo.setTargetServiceName(targetServiceName); appServiceBindPo.setTargetAppKey(appServiceBindRequest.getTargetAppKey()); List appServiceBindPoList = appServiceBindService.query(appServiceBindPo); if (CollectionUtils.isEmpty(appServiceBindPoList)) { log.info("通过被访问的服务名称:{}查询的内容为空", targetServiceName); throw new BizException(AppConfigEnum.DATA_IS_NULL, "没有对应数据"); } try { // 获取发起请求的应用的appKey -> sourceAppKeyList List sourceAppKeyList = appServiceBindPoList.stream().map(AppServiceBindPo::getSourceAppKey).collect(Collectors.toList()); // 通过sourceAppKey获取到appName然后再填充到子节点 List nodeList = Lists.newArrayList(); sourceAppKeyList.stream().forEach(sourceAppKey -> { AppInfoPo appInfo = new AppInfoPo(); appInfo.setStatus(1); appInfo.setAppKey(sourceAppKey); AppInfoPo appInfoDto = appInfoService.selectAppInfo(appInfo); if (null != appInfoDto) { // 填充子节点数据 AppCallDiagramResp callDiagramResp = AppCallDiagramResp.builder() .name(appInfoDto.getAppName()) .linkTargetName(targetServiceName) .nodeList(null) .build(); nodeList.add(callDiagramResp); } }); if (CollectionUtils.isEmpty(nodeList)) { log.info("没有对应数据"); throw new BizException(AppConfigEnum.DATA_IS_NULL, "没有对应数据"); } // 返回最终的应用调用关系 AppCallDiagramResp appCallDiagramResp = AppCallDiagramResp.builder() .name(targetServiceName) // 父节点的linkTargetName就是本身名称 .linkTargetName(targetServiceName) .nodeList(nodeList) .build(); return BaseResponse.build(AppConfigEnum.SUCCESS, appCallDiagramResp); } catch (Exception e) { log.error("查询失败", e); throw new BizException(AppConfigEnum.UNKNOWN_ERROR); }}/** * 校验参数的方法 * @author daleidedd * @date 2020/09/28 */private void verifyParams(AppServiceBindRequest appServiceBindRequest) { if (null == appServiceBindRequest) { log.error("被访问的参数不能为空"); throw new BizException(AppConfigEnum.NO_EXIST_PARAMS, "被访问的参数不能为空"); } if (null == appServiceBindRequest.getNodeNumber()) { log.error("节点层数不能为空"); throw new BizException(AppConfigEnum.NO_EXIST_NODE_NUMBER, "节点层数不能为空"); } if (null == appServiceBindRequest.getGroupId()) { log.error("服务分组不能为空"); throw new BizException(AppConfigEnum.NO_EXIST_GROUP_ID, "服务分组不能为空"); } if(StringUtils.isEmpty(appServiceBindRequest.getTargetAppKey())) { log.error("被访问的应用不能为空"); throw new BizException(AppConfigEnum.NO_EXIST_TARGET_APP_KEY, "被访问的应用不能为空"); } if (StringUtils.isEmpty(appServiceBindRequest.getTargetServiceName())) { log.error("被访问的服务名称不能为空"); throw new BizException(AppConfigEnum.NO_EXIST_TARGET_SERVICE_NAME, "被访问的服务名称不能为空"); }}注:
1.上面内容是Impl,在实际代码中需要用Controller和Service包装一下
2.枚举类如下:
// 枚举的基类public interface BaseStatusEnum { String getStatus(); String getMessage(); String toJSONString(); default int code() { return Integer.valueOf(this.getStatus()); }}// 枚举的应用import com.alibaba.fastjson.JSONObject;import com.jd.ee.common.base.enums.BaseStatusEnum;import lombok.AllArgsConstructor;import lombok.Getter;/** * @author daleidedd * @date 2020/09/27 */@Getter@AllArgsConstructorpublic enum AppConfigEnum implements BaseStatusEnum { SUCCESS("0", "执行成功"), UNKNOWN_ERROR("1", "查询失败,请稍后再试"), NO_EXIST_TARGET_SERVICE_NAME("2", "被访问的服务名称不能为空"), NO_EXIST_GROUP_ID("3", "被访问的服务分组不能为空"), NO_EXIST_TARGET_APP_KEY("4", "被访问的应用不能为空"), NO_EXIST_PARAMS("5", "被访问的参数不能为空"), NO_EXIST_NODE_NUMBER("6", "节点层数不能为空"), NO_EXIST_NODE_NUMBER_EXCEPTION("7", "节点层数异常"), NO_EXIST_GET_ONE_NODE_EXCEPTION("8", "获取一层节点数据异常"), DATA_IS_NULL("9", "没有对应数据"), ; private String status; private String message; public static AppConfigEnum getStatusByCode(String status) { for (AppConfigEnum type : values()) { if (type.getStatus().equals(status)) { return type; } } return null; } @Override public String toJSONString() { JSONObject obj = new JSONObject(); obj.put("status", status); obj.put("message", message); return obj.toString(); }}代码如有改进的地方感谢指正.
6639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
