{"_id":"yhsz_cpts","_rev":"91-6c757dc713e9b5af3935a3d42b5c6dbc","name":"yhsz_cpts","dist-tags":{"beta":"1.3.7-beta.1","latest":"1.8.4"},"versions":{"1.0.0":{"name":"yhsz_cpts","version":"1.0.0","keywords":["vue","vue3","admin","vue-admin","vue3-admin","vite","vite-admin","element-plus","element-plus-admin","ts","typescript"],"license":"MIT","_id":"yhsz_cpts@1.0.0","maintainers":[{"name":"liukx_kellen","email":"liukx_kellen@163.com"}],"dist":{"shasum":"58e50a92e073ce27a1e47024af1d70c8c639d7d6","tarball":"https://registry.npmjs.org/yhsz_cpts/-/yhsz_cpts-1.0.0.tgz","fileCount":105,"integrity":"sha512-iG2fxubQArTvxq4u9VtE3OdV06rTc3v02+OFxy9FgYenoR0yDLkcmYcUprkJbQG63vMJAZYJF3EJfqJ4A4PI9w==","signatures":[{"sig":"MEUCIQDRgatQqh0E2I3eLuNdEfpeF+AIDEidcI3nAVpWN/6/WQIgL5Sj1wkJFUeGlqYjnfh89dhOq1vXJiW2Pg4nzauoAzU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4872632},"main":"dist/yhsz_cpts.js","type":"module","types":"dist/index.d.ts","module":"dist/yhsz_cpts.umd.cjs","gitHead":"d76f609e021cc86548c33570a289424796ed58f4","private":false,"scripts":{"dev":"vite","lint":"pnpm lint:eslint && pnpm lint:prettier","test":"vitest","prepare":"husky","build:prod":"vite build","build:stage":"vue-tsc --noEmit && vite build --mode staging","lint:eslint":"eslint --cache --max-warnings 0 \"{src,tests,types}/**/*.{vue,js,jsx,ts,tsx}\" --fix","preview:prod":"pnpm build:prod && vite preview","lint:prettier":"prettier --write \"{src,tests,types}/**/*.{vue,js,jsx,ts,tsx,json,css,less,scss,html,md}\"","preview:stage":"pnpm build:stage && vite preview"},"_npmUser":{"name":"liukx_kellen","email":"liukx_kellen@163.com"},"_npmVersion":"8.12.2","description":"topoMGT lkx_kellen","directories":{},"lint-staged":{"package.json":["prettier --write"],"*.{vue,js,jsx,ts,tsx}":["eslint --fix","prettier --write"],"*.{css,less,scss,html,md}":["prettier --write"]},"_nodeVersion":"22.10.0","dependencies":{"vue":"3.4.31","mitt":"3.0.1","axios":"1.7.2","dayjs":"1.11.11","pinia":"2.1.7","@antv/g6":"5.0.29","@antv/x6":"^2.18.1","xe-utils":"3.5.28","js-cookie":"3.0.5","lodash-es":"4.17.21","nprogress":"0.2.0","vxe-table":"4.6.18","insert-css":"^2.0.0","screenfull":"6.0.2","vue-router":"4.4.0","@antv/g-svg":"^2.0.34","element-plus":"2.7.7","vuedraggable":"^4.1.0","normalize.css":"8.0.1","ant-design-vue":"3.2.20","path-to-regexp":"7.1.0","path-browserify":"1.0.1","vue-json-pretty":"^2.4.0","json-editor-vue3":"^1.1.1","@antv/x6-vue-shape":"^2.1.2","@ant-design/icons-vue":"7.0.1","@antv/x6-plugin-history":"^2.2.4","@antv/x6-plugin-stencil":"^2.1.5","@element-plus/icons-vue":"2.3.1","@antv/x6-plugin-keyboard":"^2.2.3","@antv/x6-plugin-snapline":"^2.1.7","vxe-table-plugin-element":"4.0.4","@antv/x6-plugin-clipboard":"^2.1.6","@antv/x6-plugin-selection":"^2.2.2","@antv/x6-plugin-transform":"^2.1.8"},"_hasShrinkwrap":false,"devDependencies":{"sass":"1.77.8","vite":"5.3.3","husky":"9.0.11","jsdom":"24.1.0","eslint":"8.57.0","unocss":"0.61.3","vitest":"2.0.3","vue-tsc":"2.0.26","prettier":"3.3.3","typescript":"5.5.3","@types/node":"20.14.10","lint-staged":"15.2.7","@vue/test-utils":"2.4.6","vite-plugin-dts":"^4.5.0","vite-svg-loader":"5.1.0","@types/js-cookie":"3.0.6","@types/lodash-es":"4.17.12","@types/nprogress":"0.2.3","eslint-plugin-vue":"9.27.0","vue-eslint-parser":"9.4.3","@vitejs/plugin-vue":"5.0.5","vite-plugin-svg-icons":"2.0.1","@types/path-browserify":"1.0.2","@vitejs/plugin-vue-jsx":"4.0.0","eslint-plugin-prettier":"5.1.3","@typescript-eslint/parser":"7.16.0","@vue/eslint-config-prettier":"9.0.0","@vue/eslint-config-typescript":"13.0.0","@typescript-eslint/eslint-plugin":"7.16.0"},"_npmOperationalInternal":{"tmp":"tmp/yhsz_cpts_1.0.0_1740077573111_0.4711985054110648","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"yhsz_cpts","version":"1.0.1","author":{"name":"liukx_kellen"},"_id":"yhsz_cpts@1.0.1","maintainers":[{"name":"liukx_kellen","email":"liukx_kellen@163.com"}],"dist":{"shasum":"021113a9cb8ba6c83c3263d88fdd1ca6ec9ff9a9","tarball":"https://registry.npmjs.org/yhsz_cpts/-/yhsz_cpts-1.0.1.tgz","fileCount":7,"integrity":"sha512-Y5XN5NBCCzIPjzFNXLcDhjvQ2LLivNMnHli9GbCbZtF3YiEKfGg7Dr8DlZ9zX+NxFd7onyir3py48bQtJGV5Nw==","signatures":[{"sig":"MEUCIQDlaTq+a35SFW//HSkUktBTmuQvMZzPHFY9wt7MxEgghgIgd1y2YliU9u/ME5nFb4X/anh5rAoDJsfkjDyZjJStv2g=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4514575},"main":"dist/yhsz_cpts.js","type":"module","types":"dist/index.d.ts","module":"dist/yhsz_cpts.umd.cjs","gitHead":"97e452c386b890cf04f02e80e22057253af50410","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"liukx_kellen","email":"liukx_kellen@163.com"},"_npmVersion":"10.9.0","description":"","directories":{},"_nodeVersion":"22.10.0","dependencies":{"vue":"^3.5.13","sass":"^1.85.0","dayjs":"1.11.11","@antv/g6":"^5.0.43","lodash-es":"4.17.21","insert-css":"^2.0.0","@antv/g-svg":"^2.0.34","normalize.css":"^8.0.1","ant-design-vue":"3.2.20","@ant-design/icons-vue":"^7.0.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.1.0","unocss":"0.61.3","vue-tsc":"^2.2.0","typescript":"~5.7.2","@types/node":"20.14.10","@vue/tsconfig":"^0.7.0","vite-plugin-dts":"^4.5.0","vite-svg-loader":"5.1.0","@types/lodash-es":"4.17.12","@vitejs/plugin-vue":"^5.2.1","vite-plugin-libcss":"^1.1.1","vite-plugin-svg-icons":"2.0.1","@vitejs/plugin-vue-jsx":"4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/yhsz_cpts_1.0.1_1740240019016_0.9074904169564231","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"yhsz_cpts","version":"1.0.2","author":{"name":"liukx_kellen"},"_id":"yhsz_cpts@1.0.2","maintainers":[{"name":"liukx_kellen","email":"liukx_kellen@163.com"}],"dist":{"shasum":"d272426c39ab162c575ac5483af0981f36901930","tarball":"https://registry.npmjs.org/yhsz_cpts/-/yhsz_cpts-1.0.2.tgz","fileCount":7,"integrity":"sha512-6QMqhvZA69oC5Fv4wyQSdsak1xKxOXji1LKx5OC1x1D47gDV0pwaSAy6+FWLTs17c+tZC3sf42tlk5vZrBjNoA==","signatures":[{"sig":"MEUCIDPRX9Rb8Az0+wK+NBQyZM/bVcrBg9zJtuv2MzWTByRlAiEAudhGkxMyaMR2fhftljsTDkMq9bbr/qDR1d8a9s8oMUI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4521280},"main":"dist/yhsz_cpts.js","type":"module","types":"dist/index.d.ts","module":"dist/yhsz_cpts.umd.cjs","gitHead":"97e452c386b890cf04f02e80e22057253af50410","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"liukx_kellen","email":"liukx_kellen@163.com"},"_npmVersion":"10.9.0","description":"","directories":{},"_nodeVersion":"22.10.0","dependencies":{"vue":"^3.5.13","sass":"^1.85.0","dayjs":"1.11.11","@antv/g6":"^5.0.43","lodash-es":"4.17.21","insert-css":"^2.0.0","@antv/g-svg":"^2.0.34","normalize.css":"^8.0.1","ant-design-vue":"3.2.20","@ant-design/icons-vue":"^7.0.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.1.0","unocss":"0.61.3","vue-tsc":"^2.2.0","typescript":"~5.7.2","@types/node":"20.14.10","@vue/tsconfig":"^0.7.0","vite-plugin-dts":"^4.5.0","vite-svg-loader":"5.1.0","@types/lodash-es":"4.17.12","@vitejs/plugin-vue":"^5.2.1","vite-plugin-libcss":"^1.1.1","vite-plugin-svg-icons":"2.0.1","@vitejs/plugin-vue-jsx":"4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/yhsz_cpts_1.0.2_1740241200320_0.21587787542359327","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"yhsz_cpts","version":"1.0.3","author":{"name":"liukx_kellen"},"_id":"yhsz_cpts@1.0.3","maintainers":[{"name":"liukx_kellen","email":"liukx_kellen@163.com"}],"dist":{"shasum":"bbfd9986371b30a0c36b6bb9285e9b83eb76ce86","tarball":"https://registry.npmjs.org/yhsz_cpts/-/yhsz_cpts-1.0.3.tgz","fileCount":7,"integrity":"sha512-gwzCwxIYEQE7cgVOCavjLkx1fCLAzNgKY5WE3BzR7NpRjeE+WlKjDanlN1rJTTlQoRtGPiIRESIwmiEz2L3NKw==","signatures":[{"sig":"MEUCIQDnZ8bYo/B9FH5XWRL4j6n8RdD7qB1J3kylMO1VeTHrhgIgOb8DAwFo2vuoJDJJvlc7HDK5LuhOei0KCPa6+8OFRps=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4540268},"main":"dist/yhsz_cpts.js","type":"module","types":"dist/index.d.ts","module":"dist/yhsz_cpts.umd.cjs","gitHead":"91f1dea552c9b687274efef82306c846bf931f42","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"liukx_kellen","email":"liukx_kellen@163.com"},"_npmVersion":"10.9.0","description":"- html\r ``` html\r {\r\n console.log('networkSingleSwitchChange', val);\r\n }\r\n \"\r\n @appSingleSwitchChange=\"\r\n (val) => {\r\n console.log('appSingleSwitchChange', val);\r\n }\r\n \"\r\n @appStartNodeSwitchChange=\"\r\n (val) => {\r\n console.log('appStartNodeSwitchChange', val);\r\n }\r\n \"\r\n @appNodeClick=\"handleAppNodeClick\"\r\n @networkNodeClick=\"handleNetworkNodeClick\"\r\n @networkEdgeClick=\"handleNetworkEdgeClick\"\r\n @appContextClick=\"handleAppContextClick\"\r\n ref=\"topoRef\"\r\n >\r\n\r\n```\r\n\r\n\r\n- ts script\r\n```js\r\n// 由于拖拉拽生成的网络拓扑,所以数据中包含位置信息节点图标等信息较复杂,不用太关注具体的数据内容,拖拉拽保存的拓扑数据,从接口中取出直接再赋给组件即可渲染出对应拓扑;\r\nconst testData = ref(\r\n [{\"position\":{\"x\":207,\"y\":120},\"size\":{\"width\":60,\"height\":80},\"view\":\"html-view\",\"shape\":\"customNode\",\"id\":\"0744cc09-efd2-4347-bf0a-381e37c68f1e\",\"data\":{\"label\":\"交换机\",\"img\":\"data:image/svg+xml,%3csvg%20width='34'%20height='34'%20viewBox='0%200%2034%2034'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='&%23230;&%23177;&%23135;&%23232;&%23129;&%23154;&%23228;&%23186;&%23164;&%23230;&%23141;&%23162;&%23230;&%23156;&%23186;'%3e%3cpath%20id='&%23230;&%23177;&%23135;&%23232;&%23129;&%23154;&%23228;&%23186;&%23164;&%23230;&%23141;&%23162;&%23230;&%23156;&%23186;_2'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M17%2031.875C25.2152%2031.875%2031.875%2025.2152%2031.875%2017C31.875%208.78477%2025.2152%202.125%2017%202.125C8.78476%202.125%202.125%208.78477%202.125%2017C2.125%2025.2152%208.78476%2031.875%2017%2031.875ZM17%2034C26.3888%2034%2034%2026.3888%2034%2017C34%207.61116%2026.3888%200%2017%200C7.61117%200%200%207.61116%200%2017C0%2026.3888%207.61117%2034%2017%2034ZM9.91667%2014.875H15.9375C16.1331%2014.875%2016.2917%2015.0336%2016.2917%2015.2292V17.3542C16.2917%2017.5498%2016.1331%2017.7083%2015.9375%2017.7083H9.91667V18.867C9.91667%2019.0792%209.6559%2019.2004%209.47318%2019.073L5.77754%2016.4977C5.6297%2016.3947%205.6297%2016.1887%205.77754%2016.0856L9.47318%2013.5103C9.6559%2013.383%209.91667%2013.5041%209.91667%2013.7163V14.875ZM15.9375%2021.25H9.91667V20.0913C9.91667%2019.8791%209.6559%2019.758%209.47318%2019.8853L5.77754%2022.4606C5.6297%2022.5637%205.6297%2022.7697%205.77754%2022.8727L9.47318%2025.448C9.6559%2025.5754%209.91667%2025.4542%209.91667%2025.242V24.0833H15.9375C16.1331%2024.0833%2016.2917%2023.9248%2016.2917%2023.7292V21.6042C16.2917%2021.4086%2016.1331%2021.25%2015.9375%2021.25ZM24.0833%209.91667H18.0625C17.8669%209.91667%2017.7083%2010.0752%2017.7083%2010.2708V12.3958C17.7083%2012.5914%2017.8669%2012.75%2018.0625%2012.75H24.0833V13.9087C24.0833%2014.1209%2024.3441%2014.242%2024.5268%2014.1147L28.2225%2011.5394C28.3703%2011.4363%2028.3703%2011.2303%2028.2225%2011.1273L24.5268%208.55198C24.3441%208.42464%2024.0833%208.54578%2024.0833%208.75801V9.91667ZM18.0625%2016.2917H24.0833V15.133C24.0833%2014.9208%2024.3441%2014.7996%2024.5268%2014.927L28.2225%2017.5023C28.3703%2017.6053%2028.3703%2017.8113%2028.2225%2017.9144L24.5268%2020.4897C24.3441%2020.617%2024.0833%2020.4959%2024.0833%2020.2837V19.125H18.0625C17.8669%2019.125%2017.7083%2018.9664%2017.7083%2018.7708V16.6458C17.7083%2016.4502%2017.8669%2016.2917%2018.0625%2016.2917Z'%20fill='%230099FF'/%3e%3c/g%3e%3c/svg%3e\",\"type\":\"exchanger\"},\"ports\":{\"groups\":{\"top\":{\"position\":[30,2],\"attrs\":{\"circle\":{\"r\":4,\"magnet\":true,\"stroke\":\"#5F95FF\",\"strokeWidth\":1,\"fill\":\"#fff\",\"style\":{\"visibility\":\"hidden\"}}}},\"right\":{\"position\":[60,40],\"attrs\":{\"circle\":{\"r\":4,\"magnet\":true,\"stroke\":\"#5F95FF\",\"strokeWidth\":1,\"fill\":\"#fff\",\"style\":{\"visibility\":\"hidden\"}}}},\"bottom\":{\"position\":[30,80],\"attrs\":{\"circle\":{\"r\":4,\"magnet\":true,\"stroke\":\"#5F95FF\",\"strokeWidth\":1,\"fill\":\"#fff\",\"style\":{\"visibility\":\"hidden\"}}}},\"left\":{\"position\":[0,40],\"attrs\":{\"circle\":{\"r\":4,\"magnet\":true,\"stroke\":\"#5F95FF\",\"strokeWidth\":1,\"fill\":\"#fff\",\"style\":{\"visibility\":\"hidden\"}}}}},\"items\":[{\"group\":\"top\",\"id\":\"6109329e-414d-44c6-98fd-4f90f47024e6\",\"attrs\":{\"circle\":{\"style\":{\"visibility\":\"hidden\"}}}},{\"group\":\"right\",\"id\":\"a8dea5bd-fb83-43d6-bd93-4e3cec26d5a4\",\"attrs\":{\"circle\":{\"style\":{\"visibility\":\"hidden\"}}}},{\"group\":\"bottom\",\"id\":\"1665bbcf-ea4a-40e1-93ad-0d0145866931\",\"attrs\":{\"circle\":{\"style\":{\"visibility\":\"hidden\"}}}},{\"group\":\"left\",\"id\":\"ca13963e-faf2-4de8-b19b-56d2e02c1f04\",\"attrs\":{\"circle\":{\"style\":{\"visibility\":\"hidden\"}}}}]},\"zIndex\":1},{\"position\":{\"x\":539,\"y\":271},\"size\":{\"width\":60,\"height\":80},\"view\":\"html-view\",\"shape\":\"customNode\",\"id\":\"3fcaa3b0-4a4b-4372-a3eb-aceef4964c0f\",\"data\":{\"label\":\"路由器\",\"img\":\"data:image/svg+xml,%3csvg%20width='34'%20height='34'%20viewBox='0%200%2034%2034'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='&%23232;&%23183;&%23175;&%23231;&%23148;&%23177;&%23229;&%23153;&%23168;'%3e%3cpath%20id='&%23232;&%23183;&%23175;&%23231;&%23148;&%23177;&%23229;&%23153;&%23168;_2'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M17%2031.875C25.2152%2031.875%2031.875%2025.2152%2031.875%2017C31.875%208.78477%2025.2152%202.125%2017%202.125C8.78478%202.125%202.125%208.78477%202.125%2017C2.125%2025.2152%208.78478%2031.875%2017%2031.875ZM17%2034C26.3888%2034%2034%2026.3888%2034%2017C34%207.61116%2026.3888%200%2017%200C7.61117%200%200%207.61116%200%2017C0%2026.3888%207.61117%2034%2017%2034ZM11.0909%2020.9043L13.8457%2018.1495C13.984%2018.0112%2014.2083%2018.0112%2014.3466%2018.1495L15.8492%2019.6521C15.9875%2019.7904%2015.9875%2020.0147%2015.8492%2020.153L13.0944%2022.9078L13.9137%2023.7271C14.0637%2023.8772%2013.965%2024.1472%2013.7458%2024.1864L9.31153%2024.9786C9.13414%2025.0103%208.98849%2024.8646%209.02014%2024.6872L9.81234%2020.253C9.85151%2020.0337%2010.1215%2019.935%2010.2716%2020.085L11.0909%2020.9043ZM22.9104%2013.0938L20.1556%2015.8486C20.0173%2015.9869%2019.793%2015.9869%2019.6547%2015.8486L18.1521%2014.346C18.0138%2014.2077%2018.0138%2013.9834%2018.1521%2013.8451L20.9069%2011.0903L20.0876%2010.271C19.9375%2010.1209%2020.0363%209.85087%2020.2555%209.81171L24.6898%209.01951C24.8671%208.98783%2025.0128%209.13351%2024.9811%209.31088L24.189%2013.7451C24.1498%2013.9644%2023.8797%2014.0631%2023.7297%2013.913L22.9104%2013.0938ZM22.9076%2020.9078L25.6624%2023.6625C25.8007%2023.8008%2025.8007%2024.0251%2025.6624%2024.1634L24.1598%2025.666C24.0215%2025.8043%2023.7972%2025.8043%2023.6589%2025.666L20.9041%2022.9112L20.0855%2023.7305C19.9354%2023.8806%2019.6654%2023.7819%2019.6262%2023.5626L18.834%2019.1284C18.8023%2018.951%2018.948%2018.8053%2019.1254%2018.837L23.5596%2019.6292C23.7789%2019.6684%2023.8776%2019.9384%2023.7276%2020.0885L22.9076%2020.9078ZM11.0903%2013.0938L8.3355%2010.339C8.19719%2010.2007%208.19719%209.97647%208.3355%209.83815L9.83811%208.33555C9.97641%208.19724%2010.2007%208.19724%2010.339%208.33555L13.0937%2011.0903L13.9131%2010.271C14.0631%2010.121%2014.3332%2010.2197%2014.3723%2010.4389L15.1645%2014.8732C15.1962%2015.0505%2015.0505%2015.1962%2014.8731%2015.1645L10.4389%2014.3724C10.2196%2014.3332%2010.1209%2014.0632%2010.271%2013.9131L11.0903%2013.0938Z'%20fill='%230099FF'/%3e%3c/g%3e%3c/svg%3e\",\"type\":\"router\"},\"ports\":{\"groups\":{\"top\":{\"position\":[30,2],\"attrs\":{\"circle\":{\"r\":4,\"magnet\":true,\"stroke\":\"#5F95FF\",\"strokeWidth\":1,\"fill\":\"#fff\",\"style\":{\"visibility\":\"hidden\"}}}},\"right\":{\"position\":[60,40],\"attrs\":{\"circle\":{\"r\":4,\"magnet\":true,\"stroke\":\"#5F95FF\",\"strokeWidth\":1,\"fill\":\"#fff\",\"style\":{\"visibility\":\"hidden\"}}}},\"bottom\":{\"position\":[30,80],\"attrs\":{\"circle\":{\"r\":4,\"magnet\":true,\"stroke\":\"#5F95FF\",\"strokeWidth\":1,\"fill\":\"#fff\",\"style\":{\"visibility\":\"hidden\"}}}},\"left\":{\"position\":[0,40],\"attrs\":{\"circle\":{\"r\":4,\"magnet\":true,\"stroke\":\"#5F95FF\",\"strokeWidth\":1,\"fill\":\"#fff\",\"style\":{\"visibility\":\"hidden\"}}}}},\"items\":[{\"group\":\"top\",\"id\":\"f3ead02f-8e1d-4b30-845d-1868f849a700\",\"attrs\":{\"circle\":{\"style\":{\"visibility\":\"hidden\"}}}},{\"group\":\"right\",\"id\":\"c7affd20-5d4c-45cd-8b2f-2c530ccbf97a\",\"attrs\":{\"circle\":{\"style\":{\"visibility\":\"hidden\"}}}},{\"group\":\"bottom\",\"id\":\"95f28829-f6b4-49e3-9524-fc473645409b\",\"attrs\":{\"circle\":{\"style\":{\"visibility\":\"hidden\"}}}},{\"group\":\"left\",\"id\":\"fd23e228-7bc8-4f7d-a26a-a3b05bac1e23\",\"attrs\":{\"circle\":{\"style\":{\"visibility\":\"hidden\"}}}}]},\"zIndex\":2},{\"shape\":\"edge\",\"connector\":{\"name\":\"jumpover\",\"args\":{\"type\":\"gap\"}},\"router\":{\"name\":\"manhattan\",\"args\":{\"padding\":50}},\"id\":\"bcda4b5d-6603-45ee-9568-5e881869a132\",\"source\":{\"cell\":\"0744cc09-efd2-4347-bf0a-381e37c68f1e\",\"port\":\"1665bbcf-ea4a-40e1-93ad-0d0145866931\"},\"target\":{\"cell\":\"3fcaa3b0-4a4b-4372-a3eb-aceef4964c0f\",\"port\":\"95f28829-f6b4-49e3-9524-fc473645409b\"},\"zIndex\":3}]\r\n)\r\nconst testData2 = ref({\r\n nodes: [\r\n { id: \"0\", label: \"开始\", status: \"normal\", tooltip: [] },\r\n {\r\n nodeCode: \"app-3\",\r\n nodeName: \"用户认证应用\",\r\n chainType: 1,\r\n nodeType: null,\r\n nodeConfig: null,\r\n nodeStyle: null,\r\n id: \"app-3\",\r\n label: \"用户认证应用\",\r\n status: \"emergency\",\r\n tooltip: [\r\n { label: \"平均时延(ms)\", value: 259 },\r\n { label: \"错误数\", value: 3 },\r\n { label: \"请求数\", value: 93 },\r\n ],\r\n },\r\n {\r\n nodeCode: \"app-2\",\r\n nodeName: \"支付网关应用\",\r\n chainType: 1,\r\n nodeType: null,\r\n nodeConfig: null,\r\n nodeStyle: null,\r\n id: \"app-2\",\r\n label: \"支付网关应用\",\r\n status: \"emergency\",\r\n //新增了一个告警图标,在节点的右下侧一个三角形的warning,使用方法同status,展现形式见下图\r\n warningStatus:'important',\r\n tooltip: [\r\n { label: \"平均时延(ms)\", value: 502 },\r\n { label: \"错误数\", value: 6 },\r\n { label: \"请求数\", value: 148 },\r\n ],\r\n },\r\n {\r\n nodeCode: \"app-4\",\r\n nodeName: \"订单处理应用\",\r\n chainType: 1,\r\n nodeType: null,\r\n nodeConfig: null,\r\n nodeStyle: null,\r\n id: \"app-4\",\r\n label: \"订单处理应用\",\r\n status: \"emergency\",\r\n tooltip: [\r\n { label: \"平均时延(ms)\", value: 280 },\r\n { label: \"错误数\", value: 3 },\r\n { label: \"请求数\", value: 104 },\r\n ],\r\n },\r\n {\r\n nodeCode: \"app-5\",\r\n nodeName: \"内容管理应用\",\r\n chainType: 1,\r\n nodeType: null,\r\n nodeConfig: null,\r\n nodeStyle: null,\r\n id: \"app-5\",\r\n label: \"内容管理应用\",\r\n status: \"emergency\",\r\n tooltip: [\r\n { label: \"平均时延(ms)\", value: 282 },\r\n { label: \"错误数\", value: 5 },\r\n { label: \"请求数\", value: 83 },\r\n ],\r\n },\r\n ],\r\n edges: [\r\n {\r\n sourceCode: \"app-4\",\r\n targetCode: \"app-3\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-4-app-3\",\r\n source: \"app-4\",\r\n target: \"app-3\",\r\n desc: \"请求数:31/平均响应时间:244\",\r\n },\r\n {\r\n sourceCode: \"app-2\",\r\n targetCode: \"app-3\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-2-app-3\",\r\n source: \"app-2\",\r\n target: \"app-3\",\r\n desc: \"请求数:43/平均响应时间:278\",\r\n },\r\n {\r\n sourceCode: \"0\",\r\n targetCode: \"app-2\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"0-app-2\",\r\n source: \"0\",\r\n target: \"app-2\",\r\n desc: \"请求数:148/平均响应时间:502\",\r\n },\r\n {\r\n sourceCode: \"app-5\",\r\n targetCode: \"app-4\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-5-app-4\",\r\n source: \"app-5\",\r\n target: \"app-4\",\r\n desc: \"请求数:30/平均响应时间:254\",\r\n },\r\n {\r\n sourceCode: \"app-5\",\r\n targetCode: \"app-3\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-5-app-3\",\r\n source: \"app-5\",\r\n target: \"app-3\",\r\n desc: \"请求数:19/平均响应时间:239\",\r\n },\r\n {\r\n sourceCode: \"app-3\",\r\n targetCode: \"app-4\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-3-app-4\",\r\n source: \"app-3\",\r\n target: \"app-4\",\r\n desc: \"请求数:36/平均响应时间:310\",\r\n },\r\n {\r\n sourceCode: \"app-2\",\r\n targetCode: \"app-5\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-2-app-5\",\r\n source: \"app-2\",\r\n target: \"app-5\",\r\n desc: \"请求数:30/平均响应时间:274\",\r\n },\r\n {\r\n sourceCode: \"app-4\",\r\n targetCode: \"app-5\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-4-app-5\",\r\n source: \"app-4\",\r\n target: \"app-5\",\r\n desc: \"请求数:27/平均响应时间:299\",\r\n },\r\n {\r\n sourceCode: \"app-2\",\r\n targetCode: \"app-4\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-2-app-4\",\r\n source: \"app-2\",\r\n target: \"app-4\",\r\n desc: \"请求数:38/平均响应时间:273\",\r\n },\r\n {\r\n sourceCode: \"app-3\",\r\n targetCode: \"app-5\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-3-app-5\",\r\n source: \"app-3\",\r\n target: \"app-5\",\r\n desc: \"请求数:26/平均响应时间:275\",\r\n },\r\n ],\r\n})\r\n\r\nconst statusMap = {\r\n normal: { label: \"正常\", color: \"#02E53D\" },\r\n important: { label: \"重要\", color: \"#ED3939\" },\r\n emergency: { label: \"紧急\", color: \"#FF9D00\" },\r\n minor: { label: \"次要\", color: \"#FFE100\" },\r\n};\r\n\r\nconst handleNetworkNodeClick = (node:any)=>{\r\n // 网络拓扑基于antv X6，所以与应用拓扑antv g6的数据格式不同\r\n // 节点的数据配置参数在node.store.data\r\n console.log(`output->node`,node)\r\n}\r\n\r\nconst handleNetworkEdgeClick = (edge:any)=>{\r\n console.log(`output->edge`,edge)\r\n}\r\n\r\nconst handleAppContextClick = (value:any)=>{\r\n console.log(`output->value`, value);\r\n}\r\n\r\nconst handleAppNodeClick = (node:any)=>{\r\n console.log(`output->node`,node)\r\n}\r\n\r\n```\r\n\r\n\r\n\r\n### 右侧应用拓扑新增了节点上的告警图标，在节点的右下侧一个三角形的warning，使用方法同status。展现形式见下图\r\n![alt text](https://s3.bmp.ovh/imgs/2025/03/31/aa6fa42055a8462b.png)\r\n\r\n\r\n
\r\n 点此查看示例代码\r\n\r\n- ts script\r\n```js\r\n // 对应的节点数据：\r\n {\r\n nodeCode: \"app-2\",\r\n nodeName: \"支付网关应用\",\r\n chainType: 1,\r\n nodeType: null,\r\n nodeConfig: null,\r\n nodeStyle: null,\r\n id: \"app-2\",\r\n label: \"支付网关应用\",\r\n status: \"emergency\",\r\n //新增了一个告警图标,在节点的右下侧一个三角形的warning,使用方法同status,展现形式见下图\r\n warningStatus:'important',\r\n tooltip: [\r\n { label: \"平均时延(ms)\", value: 502 },\r\n { label: \"错误数\", value: 6 },\r\n { label: \"请求数\", value: 148 },\r\n ],\r\n },\r\n```\r\n\r\n
\r\n\r\n### 网络拓扑的节点鼠标覆盖展示tooltip、异常节点label左侧的红色圆点、线上的描述信息与边的状态展示。展现形式见下图 \r\n\r\n![alt text](https://s3.bmp.ovh/imgs/2025/04/06/268402f73166b482.png)\r\n\r\n\r\n
\r\n 点此查看示例代码\r\n\r\n- html\r\n```html\r\n \r\n\r\n```\r\n\r\n\r\n- ts script\r\n```js\r\n const statusMap = ref({\r\n normal: { label: \"正常\", color: \"#02E53D\" },\r\n important: { label: \"重要\", color: \"#ED3939\" },\r\n emergency: { label: \"紧急\", color: \"#FF9D00\" },\r\n minor: { label: \"次要\", color: \"#FFE100\" },\r\n});\r\n\r\n// 与接口(http://172.17.201.11:18340/doc.html#/link_analysis-1.0.0-HTTP/%E9%93%BE%E8%B7%AF%E6%8B%93%E6%89%91%E5%88%86%E6%9E%90%E6%8E%A5%E5%8F%A3/getNetworkTopologyMetricsUsingGET)中返回的字段相同，只在edgeMetrics中新增了两个自定义字段；\r\n// 需要注意的是，要先获取grahphData之后再获取nodeMetrics和edgeMetrics\r\nconst nodeMetrics = ref([\r\n {\r\n nodeCode: \"5c50b7b5-8e7f-435c-a1d3-406cb357a578\",\r\n avgDelay: \"10\", //\t平均时延(ms)\r\n avgPacketLossRate: \"30\", //平均丢包率(%)\r\n avgResponseTime: \"40\", //\t平均响应时间(ms)\r\n avgRetransmissionRate: \"20\", //平均重传率(%)\r\n hasAlarm: 1,\r\n },\r\n]);\r\n\r\nconst edgeMetrics = ref([\r\n {\r\n sourceCode: \"361f2c00-9c51-42f0-a0cd-c3531a8c3bbe\",\r\n targetCode: \"b1263827-88ec-4094-b284-bb5eb17c770f\",\r\n packetCount: \"0\",\r\n avgResponseTime: \"0\",\r\n alarmStatus: 1,\r\n // 只在接口返回数据的基础上加了以下两个字段：\r\n desc: \"20ms\", //边上的文字描述\r\n status: \"important\", //状态，以边上的圆点形式展示，与statusMap，同之前用法\r\n },\r\n]);\r\n```\r\n\r\n
\r\n\r\n### ⚠️250515新需求：应用拓扑新增筛选功能\r\n- 效果\r\n![alt text](https://s3.bmp.ovh/imgs/2025/05/20/5594bd38625d7752.png)\r\n\r\n\r\n
\r\n 点此查看示例代码\r\n\r\n- html\r\n```html\r\n \r\n\r\n```\r\n\r\n\r\n- ts script\r\n```js\r\nconst linkOptions = ref([\r\n {\r\n label: \"test1\",\r\n value: \"1\",\r\n status: \"important\",//与statusMap映射，同之前用法\r\n },\r\n { label: \"test2\", value: \"2\" },\r\n { label: \"test3\", value: \"3\" },\r\n { label: \"test4\", value: \"4\" },\r\n { label: \"test5\", value: \"5\" },\r\n { label: \"test6\", value: \"6\" },\r\n { label: \"test7\", value: \"7\" },\r\n { label: \"test8\", value: \"8\" },\r\n { label: \"test9\", value: \"9\" },\r\n { label: \"test10\", value: \"10\" },\r\n { label: \"test11\", value: \"11\" },\r\n]);\r\n\r\nconst appLinkSelectChange = (selectIds: string[]) => {\r\n console.log(\"selectIds\", selectIds);\r\n // 在此根据筛选结果对数据进行过滤or other operations，然后对拓扑重新赋值即可\r\n};\r\n```\r\n\r\n
\r\n\r\n--------------------\r\n\r\n### ⚠️250611新需求：\r\n\r\n- 1，网络拓扑-网络节点图标标红功能，线标红，线描述标红\r\n- 2，网络拓扑-主机告警列表contextMenu\r\n- 3，应用拓扑-节点标红功能、主机告警、应用告警功能\r\n- 4，应用拓扑-主机告警列表、应用告警列表contextMenu\r\n\r\n- 效果\r\n![alt text](https://s3.bmp.ovh/imgs/2025/06/13/1b33cf1253c12a32.png)\r\n\r\n### 网络拓扑 代码示例\r\n
\r\n 点此查看示例代码\r\n\r\n- html\r\n```html\r\n \r\n\r\n```\r\n\r\n\r\n- ts script\r\n```js\r\n const statusMap = ref({\r\n normal: { label: \"正常\", color: \"#02E53D\" },\r\n important: { label: \"重要\", color: \"#ED3939\" },\r\n emergency: { label: \"紧急\", color: \"#FF9D00\" },\r\n minor: { label: \"次要\", color: \"#FFE100\" },\r\n});\r\n\r\n// 与接口(http://172.17.201.11:18340/doc.html#/link_analysis-1.0.0-HTTP/%E9%93%BE%E8%B7%AF%E6%8B%93%E6%89%91%E5%88%86%E6%9E%90%E6%8E%A5%E5%8F%A3/getNetworkTopologyMetricsUsingGET)中返回的字段相同，只在edgeMetrics中新增了两个自定义字段；\r\n// 需要注意的是，要先获取grahphData之后再获取nodeMetrics和edgeMetrics\r\nconst nodeMetrics = ref([\r\n {\r\n nodeCode: \"5c50b7b5-8e7f-435c-a1d3-406cb357a578\",\r\n avgDelay: \"10\", //\t平均时延(ms)\r\n avgPacketLossRate: \"30\", //平均丢包率(%)\r\n avgResponseTime: \"40\", //\t平均响应时间(ms)\r\n avgRetransmissionRate: \"20\", //平均重传率(%)\r\n hasAlarm: 1, //节点标红\r\n tooltip: [//节点鼠标覆盖展示tooltip\r\n { label: \"主机ip: \", value: \"241.00\" },\r\n { label: \"内存使用率(%): \", value: 6 },\r\n { label: \"CPU使用率(%): \", value: 332 },\r\n { label: \"磁盘使用率(%): \", value: \"1.81\" },\r\n\r\n ],\r\n },\r\n]);\r\n\r\nconst edgeMetrics = ref([\r\n {\r\n sourceCode: \"361f2c00-9c51-42f0-a0cd-c3531a8c3bbe\",\r\n targetCode: \"b1263827-88ec-4094-b284-bb5eb17c770f\",\r\n packetCount: \"0\",\r\n avgResponseTime: \"0\",\r\n alarmStatus: 1,\r\n // 只在接口返回数据的基础上加了以下两个字段：\r\n desc: \"20ms\", //边上的文字描述\r\n warning: 1, //1是0否 1时线、描述标红\r\n },\r\n]);\r\n```\r\n\r\n
\r\n\r\n\r\n### 应用拓扑 代码示例\r\n
\r\n 点此查看示例代码\r\n\r\n- 右键事件同之前用法\r\n\r\n- ts script\r\n```js\r\n\r\n // 对应的节点数据：\r\n {\r\n nodeCode: \"app-5\",\r\n nodeName: \"内容管理应用\",\r\n chainType: 1,\r\n nodeType: null,\r\n nodeConfig: null,\r\n nodeStyle: null,\r\n id: \"app-5\",\r\n label: \"内容管理应用\",\r\n nodeWarning: true, //节点标红 1/true\r\n hostWarning: true,//主机告警 1/true\r\n appWarning: true,//应用告警 1/true\r\n\r\n tooltip: [\r\n { label: \"平均响应时间(ms): \", value: \"241.00\" },\r\n { label: \"请求错误数: \", value: 6 },\r\n { label: \"请求数: \", value: 332 },\r\n { label: \"请求错误率(%): \", value: \"1.81\" },\r\n { label: \"耗时(ms): \", value: \"241.00\" },\r\n { label: \"内存使用率(%): \", value: \"0.00\" },\r\n { label: \"CPU使用率(%): \", value: \"0.00\" },\r\n { label: \"磁盘使用率(%): \", value: \"0.00\" },\r\n ],\r\n },\r\n\r\n```\r\n\r\n
\r\n\r\n
\r\n
\r\n\r\n\r\n\r\n\r\n\r\n## LinkOverview API\r\n\r\n
\r\n\r\n## Attributes\r\n\r\n| 名称 | 说明 | 类型 | 默认值 | 是否必须 |\r\n| --------------- | ------------------------------- | --------------- | ----------------------------------------------- | -------- |\r\n| `graphTitle` | 标题 | `string` | `链路图总览` | 否 |\r\n| `timeRange` | 上方时间文本 | `string` | `` | 否 |\r\n| `networkProps.graphData` | 网络拓扑图所需数据 | `Array` | `[]` | 是 |\r\n| `networkProps.statusMap` | 节点状态、边状态的枚举 | `object` | `{}` | 否 |\r\n| `networkProps.nodeMetrics` | 网络拓扑图节点指标 | `Array` | `[]` | 否 |\r\n| `networkProps.edgeMetrics` | 网络拓扑图边指标 | `Array` | `[]` | 否 |\r\n| `networkProps.hidden` | 是否隐藏网络拓扑图 | `boolean` | `false` | 否 |\r\n| `appProps.graphData` | 应用拓扑图所需数据 | `object` | `{}` | 是 |\r\n| `appProps.statusMap` | legend枚举，为了和warningStatus字段做映射 | `object` | `{}` | 否 |\r\n| `appProps.warningStatus` | 左上方的 warning 图标；与定义的statusMap的key对应才能展示对应颜色 | `string` | `` | 否 |\r\n| `appProps.hidden` | 是否隐藏应用拓扑图 | `boolean` | `false` | 否 |\r\n| `appProps.linkOptions` | 应用拓扑下拉搜索选项 | `Array` | `false` | 否 |\r\n| `appProps.warningText` | 左上方的 warning 文本 | `string` | `false` | 否 |\r\n| `appProps.defaultSelectedLinks` | 链路筛选默认值 | `string[]` | `false` \r\n| `appProps.loading` | 右侧拓扑loading | `false` | `false`\r\n| `networkProps.loading` | 左侧拓扑loading | `false` | `false`\r\n\r\n
\r\n
\r\n\r\n## Events\r\n\r\n| 名称 | 说明 | 类型 |\r\n| ----------------------- | ----------------------- | ---------- |\r\n| `networkSingleSwitchChange、appSingleSwitchChange` | 切换孤立点 switch 触发 | `function` |\r\n| `appStartNodeSwitchChange` | 切换开始节点 switch 触发 | `function` |\r\n| `appNodeClick、networkNodeClick` | 点击节点触发 | `function` |\r\n| `appContextClick` | 应用拓扑右键节点触发 | `function` |\r\n| `netContextClick` | 网络拓扑右键节点触发 | `function` |\r\n| `networkEdgeClick` | 点击边触发 | `function` |\r\n| `appLinkSelectChange` | 应用拓扑搜索链路=》切换checkbox触发 | `function` |\r\n\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n\r\n\r\n\r\n\r\n--------------------------------------------------------------------\r\n# 四，GlobalLinkReview 全局链路组件\r\n\r\n### ⚠️250619新需求：\r\n\r\n- 1，修复了网络拓扑线上指标重叠的问题\r\n- 2，新增组件 `GlobalLinkReview`\r\n- 2，新增线与线描述信息颜色控制`color`属性\r\n\r\n\r\n- 效果\r\n![alt text](https://s3.bmp.ovh/imgs/2025/06/28/e687fc427b8c6804.png)\r\n\r\n- 主要属性\r\n - `nodeWarning` 设置之后节点是红色\r\n - `subLabel` 节点下方的子名称\r\n - `color`属性控制线与线描述信息颜色\r\n
\r\n 点此查看示例代码\r\n\r\n- html\r\n```html\r\n \r\n```\r\n\r\n\r\n- ts script\r\n```js\r\nconst testData = {\r\n nodes: [\r\n {\r\n id: \"0\",\r\n label: \"开始\",\r\n subLabel: \"122/1234ms/12%\",//子标题\r\n tooltip: [],\r\n },\r\n {\r\n nodeCode: \"app-2\",\r\n nodeName: \"支付网关应用\",\r\n chainType: 1,\r\n nodeType: null,\r\n nodeConfig: null,\r\n nodeStyle: null,\r\n id: \"app-2\",\r\n label: \"支付网关应用\",\r\n subLabel: \"122/1234ms/12%\",\r\n tooltip: [\r\n { label: \"平均响应时间(ms): \", value: \"507.00\" },\r\n { label: \"请求错误数: \", value: 76 },\r\n { label: \"请求数: \", value: 1607 },\r\n { label: \"请求错误率(%): \", value: \"4.73\" },\r\n { label: \"耗时(ms): \", value: \"507.00\" },\r\n { label: \"内存使用率(%): \", value: \"0.00\" },\r\n { label: \"CPU使用率(%): \", value: \"0.00\" },\r\n { label: \"磁盘使用率(%): \", value: \"0.00\" },\r\n ],\r\n },\r\n {\r\n nodeCode: \"app-5\",\r\n nodeName: \"内容管理应用\",\r\n chainType: 1,\r\n nodeType: null,\r\n nodeConfig: null,\r\n nodeStyle: null,\r\n id: \"app-5\",\r\n label: \"内容管理应用\",\r\n subLabel: \"122/1234ms/12%\",\r\n nodeWarning: true,//红色告警节点\r\n tooltip: [\r\n { label: \"平均响应时间(ms): \", value: \"241.00\" },\r\n { label: \"请求错误数: \", value: 6 },\r\n { label: \"请求数: \", value: 332 },\r\n { label: \"请求错误率(%): \", value: \"1.81\" },\r\n { label: \"耗时(ms): \", value: \"241.00\" },\r\n { label: \"内存使用率(%): \", value: \"0.00\" },\r\n { label: \"CPU使用率(%): \", value: \"0.00\" },\r\n { label: \"磁盘使用率(%): \", value: \"0.00\" },\r\n ],\r\n },\r\n {\r\n nodeCode: \"app-3\",\r\n nodeName: \"用户认证应用\",\r\n chainType: 1,\r\n nodeType: null,\r\n nodeConfig: null,\r\n nodeStyle: null,\r\n id: \"app-3\",\r\n label: \"用户认证应用\",\r\n subLabel: \"122/1234ms/12%\",\r\n tooltip: [\r\n { label: \"平均响应时间(ms): \", value: \"247.00\" },\r\n { label: \"请求错误数: \", value: 20 },\r\n { label: \"请求数: \", value: 341 },\r\n { label: \"请求错误率(%): \", value: \"5.87\" },\r\n { label: \"耗时(ms): \", value: \"247.00\" },\r\n { label: \"内存使用率(%): \", value: \"0.00\" },\r\n { label: \"CPU使用率(%): \", value: \"0.00\" },\r\n { label: \"磁盘使用率(%): \", value: \"0.00\" },\r\n ],\r\n },\r\n {\r\n nodeCode: \"app-4\",\r\n nodeName: \"订单处理应用\",\r\n chainType: 1,\r\n nodeType: null,\r\n nodeConfig: null,\r\n nodeStyle: null,\r\n id: \"app-4\",\r\n label: \"订单处理应用\",\r\n subLabel: \"122/1234ms/12%\",\r\n tooltip: [\r\n { label: \"平均响应时间(ms): \", value: \"243.00\" },\r\n { label: \"请求错误数: \", value: 16 },\r\n { label: \"请求数: \", value: 352 },\r\n { label: \"请求错误率(%): \", value: \"4.55\" },\r\n { label: \"耗时(ms): \", value: \"243.00\" },\r\n { label: \"内存使用率(%): \", value: \"0.00\" },\r\n { label: \"CPU使用率(%): \", value: \"0.00\" },\r\n { label: \"磁盘使用率(%): \", value: \"0.00\" },\r\n ],\r\n },\r\n ],\r\n edges: [\r\n {\r\n sourceCode: \"0\",\r\n targetCode: \"app-2\",\r\n color:\"red\",//线颜色控制\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"0-app-2\",\r\n source: \"0\",\r\n target: \"app-2\",\r\n desc: \"1607/507.00ms\",\r\n },\r\n {\r\n sourceCode: \"app-2\",\r\n targetCode: \"app-5\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-2-app-5\",\r\n source: \"app-2\",\r\n target: \"app-5\",\r\n desc: \"137/257.00ms\",\r\n },\r\n {\r\n sourceCode: \"0\",\r\n targetCode: \"app-3\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"0-app-3\",\r\n source: \"0\",\r\n target: \"app-3\",\r\n desc: \"136/261.00ms\",\r\n },\r\n {\r\n sourceCode: \"app-3\",\r\n targetCode: \"app-5\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-3-app-5\",\r\n source: \"app-3\",\r\n target: \"app-5\",\r\n desc: \"27/216.00ms\",\r\n },\r\n {\r\n sourceCode: \"app-2\",\r\n targetCode: \"app-4\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-2-app-4\",\r\n source: \"app-2\",\r\n target: \"app-4\",\r\n desc: \"148/248.00ms\",\r\n },\r\n {\r\n sourceCode: \"app-4\",\r\n targetCode: \"app-3\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-4-app-3\",\r\n source: \"app-4\",\r\n target: \"app-3\",\r\n desc: \"35/231.00ms\",\r\n },\r\n {\r\n sourceCode: \"app-2\",\r\n targetCode: \"app-3\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-2-app-3\",\r\n source: \"app-2\",\r\n target: \"app-3\",\r\n desc: \"138/236.00ms\",\r\n },\r\n {\r\n sourceCode: \"app-5\",\r\n targetCode: \"app-4\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-5-app-4\",\r\n source: \"app-5\",\r\n target: \"app-4\",\r\n desc: \"21/294.00ms\",\r\n },\r\n {\r\n sourceCode: \"0\",\r\n targetCode: \"app-5\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"0-app-5\",\r\n source: \"0\",\r\n target: \"app-5\",\r\n desc: \"126/230.00ms\",\r\n },\r\n {\r\n sourceCode: \"0\",\r\n targetCode: \"app-4\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"0-app-4\",\r\n source: \"0\",\r\n target: \"app-4\",\r\n desc: \"145/247.00ms\",\r\n },\r\n {\r\n sourceCode: \"app-5\",\r\n targetCode: \"app-3\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-5-app-3\",\r\n source: \"app-5\",\r\n target: \"app-3\",\r\n desc: \"32/250.00ms\",\r\n },\r\n {\r\n sourceCode: \"app-4\",\r\n targetCode: \"app-5\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-4-app-5\",\r\n source: \"app-4\",\r\n target: \"app-5\",\r\n desc: \"42/241.00ms\",\r\n },\r\n {\r\n sourceCode: \"app-3\",\r\n targetCode: \"app-4\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-3-app-4\",\r\n source: \"app-3\",\r\n target: \"app-4\",\r\n desc: \"38/178.00ms\",\r\n },\r\n ],\r\n}\r\n\r\n```\r\n\r\n
\r\n\r\n-------------------\r\n\r\n\r\n\r\n\r\n### ⚠️250704新需求：\r\n\r\n##### 节点\r\n 1. 新增`disabled`属性，设置了此属性之后节点会变成浅灰色，并且鼠标覆盖不会有tooltip等交互\r\n\r\n##### 线\r\n 1. 新增`activated`属性，设置了此属性之后线会变成与UI一致的蓝色加粗线条，相当于设置了线条加粗+color蓝色；之前的`color`属性仍然可用\r\n 2. 新增`lineWidth`属性，可以设置edge宽度，加上上述的`activated`属性就已经加粗了，如果效果不满意想继续加粗可以设置`lineWidth`属性\r\n\r\n\r\n\r\n- 效果\r\n![alt text](https://s3.bmp.ovh/imgs/2025/07/05/49e936247d3e761e.png)\r\n\r\n
\r\n 点此查看示例代码\r\n \r\n- html\r\n```html\r\n \r\n```\r\n\r\n- ts script\r\n```js\r\nconst testData = {\r\n nodes: [\r\n {\r\n id: \"0\",\r\n label: \"开始\",\r\n subLabel: \"122/1234ms/12%\",\r\n tooltip: [],\r\n },\r\n {\r\n nodeCode: \"app-2\",\r\n nodeName: \"支付网关应用\",\r\n chainType: 1,\r\n nodeWarning: true,\r\n nodeType: null,\r\n nodeConfig: null,\r\n nodeStyle: null,\r\n id: \"app-2\",\r\n label: \"支付网关应用\",\r\n subLabel: \"122/1234ms/12%\",\r\n tooltip: [\r\n { label: \"平均响应时间(ms): \", value: \"507.00\" },\r\n { label: \"请求错误数: \", value: 76 },\r\n { label: \"请求数: \", value: 1607 },\r\n { label: \"请求错误率(%): \", value: \"4.73\" },\r\n { label: \"耗时(ms): \", value: \"507.00\" },\r\n { label: \"内存使用率(%): \", value: \"0.00\" },\r\n { label: \"CPU使用率(%): \", value: \"0.00\" },\r\n { label: \"磁盘使用率(%): \", value: \"0.00\" },\r\n ],\r\n },\r\n {\r\n nodeCode: \"app-5\",\r\n nodeName: \"内容管理应用\",\r\n chainType: 1,\r\n nodeType: null,\r\n nodeConfig: null,\r\n nodeStyle: null,\r\n id: \"app-5\",\r\n label: \"内容管理应用\",\r\n subLabel: \"122/1234ms/12%\",\r\n tooltip: [\r\n { label: \"平均响应时间(ms): \", value: \"241.00\" },\r\n { label: \"请求错误数: \", value: 6 },\r\n { label: \"请求数: \", value: 332 },\r\n { label: \"请求错误率(%): \", value: \"1.81\" },\r\n { label: \"耗时(ms): \", value: \"241.00\" },\r\n { label: \"内存使用率(%): \", value: \"0.00\" },\r\n { label: \"CPU使用率(%): \", value: \"0.00\" },\r\n { label: \"磁盘使用率(%): \", value: \"0.00\" },\r\n ],\r\n },\r\n {\r\n nodeCode: \"app-3\",\r\n nodeName: \"用户认证应用\",\r\n chainType: 1,\r\n nodeType: null,\r\n nodeConfig: null,\r\n nodeStyle: null,\r\n id: \"app-3\",\r\n label: \"用户认证应用\",\r\n subLabel: \"122/1234ms/12%\",\r\n status: \"emergency\",\r\n tooltip: [\r\n { label: \"平均响应时间(ms): \", value: \"247.00\" },\r\n { label: \"请求错误数: \", value: 20 },\r\n { label: \"请求数: \", value: 341 },\r\n { label: \"请求错误率(%): \", value: \"5.87\" },\r\n { label: \"耗时(ms): \", value: \"247.00\" },\r\n { label: \"内存使用率(%): \", value: \"0.00\" },\r\n { label: \"CPU使用率(%): \", value: \"0.00\" },\r\n { label: \"磁盘使用率(%): \", value: \"0.00\" },\r\n ],\r\n },\r\n {\r\n nodeCode: \"app-4\",\r\n nodeName: \"订单处理应用\",\r\n chainType: 1,\r\n nodeType: null,\r\n nodeConfig: null,\r\n nodeStyle: null,\r\n id: \"app-4\",\r\n label: \"订单处理应用\",\r\n disabled: true,\r\n subLabel: \"122/1234ms/12%\",\r\n tooltip: [\r\n { label: \"平均响应时间(ms): \", value: \"243.00\" },\r\n { label: \"请求错误数: \", value: 16 },\r\n { label: \"请求数: \", value: 352 },\r\n { label: \"请求错误率(%): \", value: \"4.55\" },\r\n { label: \"耗时(ms): \", value: \"243.00\" },\r\n { label: \"内存使用率(%): \", value: \"0.00\" },\r\n { label: \"CPU使用率(%): \", value: \"0.00\" },\r\n { label: \"磁盘使用率(%): \", value: \"0.00\" },\r\n ],\r\n },\r\n ],\r\n edges: [\r\n {\r\n activated: true,\r\n sourceCode: \"0\",\r\n targetCode: \"app-2\",\r\n edgeType: \"ONE_WAY\",\r\n color: \"red\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"0-app-2\",\r\n source: \"0\",\r\n target: \"app-2\",\r\n desc: \"1607/507.00ms\",\r\n },\r\n {\r\n activated: true,\r\n lineWidth: 2,\r\n sourceCode: \"app-2\",\r\n targetCode: \"app-5\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-2-app-5\",\r\n source: \"app-2\",\r\n target: \"app-5\",\r\n desc: \"137/257.00ms\",\r\n },\r\n {\r\n sourceCode: \"0\",\r\n targetCode: \"app-3\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"0-app-3\",\r\n source: \"0\",\r\n target: \"app-3\",\r\n desc: \"136/261.00ms\",\r\n },\r\n {\r\n activated: true,\r\n sourceCode: \"app-3\",\r\n targetCode: \"app-5\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-3-app-5\",\r\n source: \"app-3\",\r\n target: \"app-5\",\r\n desc: \"27/216.00ms\",\r\n },\r\n {\r\n sourceCode: \"app-2\",\r\n targetCode: \"app-4\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-2-app-4\",\r\n source: \"app-2\",\r\n target: \"app-4\",\r\n desc: \"148/248.00ms\",\r\n },\r\n {\r\n sourceCode: \"app-4\",\r\n targetCode: \"app-3\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-4-app-3\",\r\n source: \"app-4\",\r\n target: \"app-3\",\r\n desc: \"35/231.00ms\",\r\n },\r\n {\r\n sourceCode: \"app-2\",\r\n targetCode: \"app-3\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-2-app-3\",\r\n source: \"app-2\",\r\n target: \"app-3\",\r\n desc: \"138/236.00ms\",\r\n },\r\n {\r\n sourceCode: \"app-5\",\r\n targetCode: \"app-4\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-5-app-4\",\r\n source: \"app-5\",\r\n target: \"app-4\",\r\n desc: \"21/294.00ms\",\r\n },\r\n {\r\n sourceCode: \"0\",\r\n targetCode: \"app-5\",\r\n edgeType: \"ONE_WAY\",\r\n activated: true,\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"0-app-5\",\r\n source: \"0\",\r\n target: \"app-5\",\r\n desc: \"126/230.00ms\",\r\n },\r\n {\r\n sourceCode: \"0\",\r\n targetCode: \"app-4\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"0-app-4\",\r\n source: \"0\",\r\n target: \"app-4\",\r\n desc: \"145/247.00ms\",\r\n },\r\n {\r\n sourceCode: \"app-5\",\r\n targetCode: \"app-3\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-5-app-3\",\r\n source: \"app-5\",\r\n target: \"app-3\",\r\n desc: \"32/250.00ms\",\r\n },\r\n {\r\n sourceCode: \"app-4\",\r\n targetCode: \"app-5\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-4-app-5\",\r\n source: \"app-4\",\r\n target: \"app-5\",\r\n desc: \"42/241.00ms\",\r\n },\r\n {\r\n sourceCode: \"app-3\",\r\n targetCode: \"app-4\",\r\n edgeType: \"ONE_WAY\",\r\n chainType: 1,\r\n edgeConfig: null,\r\n edgeStyle: null,\r\n id: \"app-3-app-4\",\r\n source: \"app-3\",\r\n target: \"app-4\",\r\n desc: \"38/178.00ms\",\r\n },\r\n ],\r\n}\r\n\r\n```\r\n
\r\n\r\n\r\n\r\n# 五，TopoPreview 组件\r\n\r\n\r\n### ⚠️251015新需求：\r\n\r\n- 替换业务监控、业务总体分析模块的拓扑图\r\n- 效果\r\n![alt text](https://s3.bmp.ovh/imgs/2025/10/26/c7791565132efae3.png)\r\n\r\n
\r\n 点此查看示例代码\r\n\r\n- html\r\n```html\r\n \r\n```\r\n\r\n- ts script\r\n```js\r\nconst nodeMetrics = ref([\r\n {\r\n nodeCode: \"fc488edc-97d0-4f26-9ee6-695337907d2f\",\r\n avgDelay: \"10\", //\t平均时延(ms)\r\n avgPacketLossRate: \"30\", //平均丢包率(%)\r\n avgResponseTime: \"40\", //\t平均响应时间(ms)\r\n avgRetransmissionRate: \"20\", //平均重传率(%)\r\n connectFailureRate: \"50\",\r\n hasAlarm: 1,\r\n nodeIp: \"192.168.1.1\",\r\n tooltip: [\r\n { label: \"平均响应时间(ms): \", value: \"247.00\" },\r\n { label: \"请求错误数: \", value: 20 },\r\n { label: \"请求数: \", value: 341 },\r\n { label: \"请求错误率(%): \", value: \"5.87\" },\r\n { label: \"耗时(ms): \", value: \"247.00\" },\r\n { label: \"内存使用率(%): \", value: \"0.00\" },\r\n { label: \"CPU使用率(%): \", value: \"0.00\" },\r\n { label: \"磁盘使用率(%): \", value: \"0.00\" },\r\n ],\r\n },\r\n]);\r\n\r\nconst edgeMetrics = ref([\r\n {\r\n sourceCode: \"fc488edc-97d0-4f26-9ee6-695337907d2f\",\r\n targetCode: \"0e5d0518-f7bc-43e9-a9ef-0cfc291bedfb\",\r\n packetCount: \"0\",\r\n avgResponseTime: \"0\",\r\n alarmStatus: 1,\r\n desc: \"59/14.78ms\", //边上的文字描述\r\n warning: 1,\r\n },\r\n {\r\n sourceCode: \"app-2\",\r\n targetCode: \"app-5\",\r\n packetCount: \"0\",\r\n avgResponseTime: \"0\",\r\n alarmStatus: 1,\r\n desc: \"59/14.78ms\", //边上的文字描述\r\n warning: 1,\r\n },\r\n {\r\n sourceCode: \"19cb25b1-85ec-4fb8-92f1-c4349a6a1edf\",\r\n targetCode: \"6ed954a9-d18d-4346-8fcd-4f4835cbaf82\",\r\n packetCount: \"0\",\r\n avgResponseTime: \"0\",\r\n alarmStatus: 1,\r\n desc: \"66/88.78ms\", //边上的文字描述\r\n warning: 1,\r\n },\r\n]);\r\n\r\nconst graphData = {\r\n client: {\r\n nodes: [\r\n {\r\n nodeCode: \"client-0\",\r\n nodeName: \"客户端\",\r\n chainType: 1,\r\n nodeType: null,\r\n nodeConfig: null,\r\n nodeStyle: null,\r\n id: \"client-0\",\r\n label: \"客户端\",\r\n status: \"emergency\",\r\n tooltip: [\r\n { label: \"平均时延(ms)\", value: 510 },\r\n { label: \"错误数\", value: 10 },\r\n { label: \"请求数\", value: 130 },\r\n ],\r\n },\r\n ],\r\n edges: [\r\n // {\r\n // sourceCode: \"client-0\",\r\n // targetCode: \"fc488edc-97d0-4f26-9ee6-695337907d2f\",\r\n // id: \"client-0-fc488edc-97d0-4f26-9ee6-695337907d2f\",\r\n // source: \"client-0\",\r\n // target: \"fc488edc-97d0-4f26-9ee6-695337907d2f\",\r\n // },\r\n ],\r\n },\r\n network: [\r\n {\r\n position: { x: 69, y: 77 },\r\n size: { width: 60, height: 80 },\r\n view: \"html-view\",\r\n shape: \"customNode\",\r\n id: \"fc488edc-97d0-4f26-9ee6-695337907d2f\",\r\n data: { label: \"交换机\", type: \"exchanger\" },\r\n ports: {\r\n groups: {\r\n top: {\r\n position: [30, 2],\r\n attrs: {\r\n circle: {\r\n r: 4,\r\n magnet: true,\r\n stroke: \"#5F95FF\",\r\n strokeWidth: 1,\r\n fill: \"#fff\",\r\n style: { visibility: \"hidden\" },\r\n },\r\n },\r\n },\r\n right: {\r\n position: [60, 40],\r\n attrs: {\r\n circle: {\r\n r: 4,\r\n magnet: true,\r\n stroke: \"#5F95FF\",\r\n strokeWidth: 1,\r\n fill: \"#fff\",\r\n style: { visibility: \"hidden\" },\r\n },\r\n },\r\n },\r\n bottom: {\r\n position: [30, 80],\r\n attrs: {\r\n circle: {\r\n r: 4,\r\n magnet: true,\r\n stroke: \"#5F95FF\",\r\n strokeWidth: 1,\r\n fill: \"#fff\",\r\n style: { visibility: \"hidden\" },\r\n },\r\n },\r\n },\r\n left: {\r\n position: [0, 40],\r\n attrs: {\r\n circle: {\r\n r: 4,\r\n magnet: true,\r\n stroke: \"#5F95FF\",\r\n strokeWidth: 1,\r\n fill: \"#fff\",\r\n style: { visibility: \"hidden\" },\r\n },\r\n },\r\n },\r\n },\r\n items: [\r\n {\r\n group: \"top\",\r\n id: \"9bab0b66-9913-4868-883a-3bcd6eeb8f96\",\r\n attrs: { circle: { style: { visibility: \"hidden\" } } },\r\n },\r\n {\r\n group: \"right\",\r\n id: \"dd8cc04a-0471-423f-91d4-a08692246982\",\r\n attrs: { circle: { style: { visibility: \"hidden\" } } },\r\n },\r\n {\r\n group: \"bottom\",\r\n id: \"bc246f9c-53b6-4949-9b2a-5d964a174f77\",\r\n attrs: { circle: { style: { visibility: \"hidden\" } } },\r\n },\r\n {\r\n group: \"left\",\r\n id: \"e46ef986-ffbf-41f8-b434-8745b17e1ede\",\r\n attrs: { circle: { style: { visibility: \"hidden\" } } },\r\n },\r\n ],\r\n },\r\n zIndex: 1,\r\n },\r\n {\r\n shape: \"edge\",\r\n zIndex: 1,\r\n connector: { name: \"smooth\", args: { raw: false } },\r\n id: \"9110cc0d-1af9-40cb-9a50-6c651c3ae831\",\r\n source: {\r\n cell: \"fc488edc-97d0-4f26-9ee6-695337907d2f\",\r\n port: \"dd8cc04a-0471-423f-91d4-a08692246982\",\r\n },\r\n target: {\r\n cell: \"0e5d0518-f7bc-43e9-a9ef-0cfc291bedfb\",\r\n port: \"9da1902e-1b25-4525-a2dd-88da4e211deb\",\r\n },\r\n vertices: [],\r\n },\r\n {\r\n shape: \"edge\",\r\n zIndex: 1,\r\n connector: { name: \"smooth\", args: { raw: false } },\r\n id: \"b0617dad-7669-4631-8f77-84abbbd4d26b\",\r\n source: {\r\n cell: \"fc488edc-97d0-4f26-9ee6-695337907d2f\",\r\n port: \"dd8cc04a-0471-423f-91d4-a08692246982\",\r\n },\r\n target: {\r\n cell: \"113d9869-04f3-4588-aabb-27320c7a2abf\",\r\n port: \"403ad49e-5f1d-438b-a752-ec170febc0f7\",\r\n },\r\n vertices: [],\r\n },\r\n {\r\n shape: \"edge\",\r\n zIndex: 1,\r\n connector: { name: \"smooth\", args: { raw: false } },\r\n id: \"26f3c496-b990-475f-8cda-bdd3565c07bf\",\r\n source: {\r\n cell: \"113d9869-04f3-4588-aabb-27320c7a2abf\",\r\n port: \"7818e36b-98d3-49ea-9a69-965b54847d0d\",\r\n },\r\n target: {\r\n cell: \"fd801254-5388-4951-a12c-6f9badf30b4a\",\r\n port: \"fbfaad3f-0eb1-4f3c-b2d1-4fc0a516705c\",\r\n },\r\n vertices: [],\r\n },\r\n {\r\n shape: \"edge\",\r\n zIndex: 1,\r\n connector: { name: \"smooth\", args: { raw: false } },\r\n id: \"2b57d6d9-796b-4fc5-8ca9-a1a9fe35c75a\",\r\n source: {\r\n cell: \"0e5d0518-f7bc-43e9-a9ef-0cfc291bedfb\",\r\n port: \"fd92228d-ca99-4de6-93d1-32400f14bdf9\",\r\n },\r\n target: {\r\n cell: \"f5c83e15-0e35-4309-94c4-e5849d31a0f5\",\r\n port: \"d120dcc9-329c-44ba-886d-c5d224833561\",\r\n },\r\n vertices: [],\r\n },\r\n {\r\n shape: \"edge\",\r\n zIndex: 1,\r\n connector: { name: \"smooth\", args: { raw: false } },\r\n id: \"433e97a4-8921-4ff3-b0a8-716d30694d18\",\r\n source: {\r\n cell: \"fd801254-5388-4951-a12c-6f9badf30b4a\",\r\n port: \"68931aee-0eb4-43f9-8c35-fbb0910b3efc\",\r\n },\r\n target: {\r\n cell: \"d7de6a14-064e-4ffb-95b2-5ea31f1d1347\",\r\n port: \"06f819f8-a28c-4157-b145-0862db8ddafa\",\r\n },\r\n vertices: [],\r\n },\r\n {\r\n shape: \"edge\",\r\n zIndex: 1,\r\n connector: { name: \"smooth\", args: { raw: false } },\r\n id: \"7b3bab78-4353-4826-9308-15c1b9ae5149\",\r\n source: {\r\n cell: \"fd801254-5388-4951-a12c-6f9badf30b4a\",\r\n port: \"4be336b5-9150-4085-b7b4-15f3ba99dd38\",\r\n },\r\n target: {\r\n cell: \"f305a38d-7bc8-4c95-bbd8-0d5af8dda517\",\r\n port: \"7412021a-54e5-44c0-a16e-3d0a67a8482d\",\r\n },\r\n vertices: [],\r\n },\r\n {\r\n shape: \"edge\",\r\n zIndex: 1,\r\n connector: { name: \"smooth\", args: { raw: false } },\r\n id: \"a4f89b13-ba4e-4fb5-918a-d62fe1332f4f\",\r\n source: {\r\n cell: \"f305a38d-7bc8-4c95-bbd8-0d5af8dda517\",\r\n port: \"3abdad95-dfe6-4a9a-90f8-7d272eebaf9b\",\r\n },\r\n target: {\r\n cell: \"a1ceada1-c2cc-4420-994e-5f65f669751c\",\r\n port: \"f27afc81-0049-407a-bcec-97c785782308\",\r\n },\r\n vertices: [],\r\n },\r\n {\r\n shape: \"edge\",\r\n zIndex: 1,\r\n connector: { name: \"smooth\", args: { raw: false } },\r\n id: \"eac63ef8-e6d3-49b7-8b3f-22a89462092a\",\r\n source: {\r\n cell: \"d7de6a14-064e-4ffb-95b2-5ea31f1d1347\",\r\n port: \"c1c804a1-be8a-4424-bc67-381dcca9abbb\",\r\n },\r\n target: {\r\n cell: \"a1ceada1-c2cc-4420-994e-5f65f669751c\",\r\n port: \"97a7c587-8d38-4514-978f-4ba87ec33999\",\r\n },\r\n vertices: [],\r\n },\r\n {\r\n shape: \"edge\",\r\n zIndex: 1,\r\n connector: { name: \"smooth\", args: { raw: false } },\r\n id: \"ce1e3741-a659-42c1-909f-b052629ad732\",\r\n source: {\r\n cell: \"f5c83e15-0e35-4309-94c4-e5849d31a0f5\",\r\n port: \"56de6d8e-c53c-4504-a7a1-4d8fe0c136a8\",\r\n },\r\n target: {\r\n cell: \"893f1d6a-090b-49f4-9fbd-41ff26ee2a8d\",\r\n port: \"dbef3881-b344-4e84-a425-85e9927f25c1\",\r\n },\r\n vertices: [],\r\n },\r\n {\r\n shape: \"edge\",\r\n zIndex: 1,\r\n connector: { name: \"smooth\", args: { raw: false } },\r\n id: \"b2ab824c-706d-4619-898f-520479d629cc\",\r\n source: {\r\n cell: \"f5c83e15-0e35-4309-94c4-e5849d31a0f5\",\r\n port: \"56de6d8e-c53c-4504-a7a1-4d8fe0c136a8\",\r\n },\r\n target: {\r\n cell: \"d2fba48f-b4c4-4ede-b223-193145a01eb6\",\r\n port: \"886f4074-67e8-49e9-9f6e-9a262b282361\",\r\n },\r\n vertices: [],\r\n },\r\n {\r\n shape: \"edge\",\r\n zIndex: 1,\r\n connector: { name: \"smooth\", args: { raw: false } },\r\n id: \"24a5b0e3-0f36-49d6-beda-ce2a7a50a2ec\",\r\n source: {\r\n cell: \"a1ceada1-c2cc-4420-994e-5f65f669751c\",\r\n port: \"bba7a87b-7693-4711-bae6-1bb28ff08a56\",\r\n },\r\n target: {\r\n cell: \"1ab0a099-52d1-4f61-83a8-3088acba1910\",\r\n port: \"6e405a01-0087-43ef-aae5-5ca6b428beb3\",\r\n },\r\n vertices: [],\r\n },\r\n {\r\n shape: \"edge\",\r\n zIndex: 1,\r\n connector: { name: \"smooth\", args: { raw: false } },\r\n id: \"11c144bb-ca88-45b3-a896-d91b1a104dca\",\r\n source: {\r\n cell: \"893f1d6a-090b-49f4-9fbd-41ff26ee2a8d\",\r\n port: \"62d1e64f-40d8-41e2-a342-523f07210826\",\r\n },\r\n target: {\r\n cell: \"1ab0a099-52d1-4f61-83a8-3088acba1910\",\r\n port: \"6e405a01-0087-43ef-aae5-5ca6b428beb3\",\r\n },\r\n },\r\n {\r\n position: { x: 212, y: 32 },\r\n size: { width: 60, height: 80 },\r\n view: \"html-view\",\r\n shape: \"customNode\",\r\n id: \"113d9869-04f3-4588-aabb-27320c7a2abf\",\r\n data: { label: \"路由器\", type: \"router\" },\r\n ports: {\r\n groups: {\r\n top: {\r\n position: [30, 2],\r\n attrs: {\r\n circle: {\r\n r: 4,\r\n magnet: true,\r\n stroke: \"#5F95FF\",\r\n strokeWidth: 1,\r\n fill: \"#fff\",\r\n style: { visibility: \"hidden\" },\r\n },\r\n },\r\n },\r\n right: {\r\n position: [60, 40],\r\n attrs: {\r\n circle: {\r\n r: 4,\r\n magnet: true,\r\n stroke: \"#5F95FF\",\r\n strokeWidth: 1,\r\n fill: \"#fff\",\r\n style: { visibility: \"hidden\" },\r\n },\r\n },\r\n },\r\n bottom: {\r\n position: [30, 80],\r\n attrs: {\r\n circle: {\r\n r: 4,\r\n magnet: true,\r\n stroke: \"#5F95FF\",\r\n strokeWidth: 1,\r\n fill: \"#fff\",\r\n style: { visibility: \"hidden\" },\r\n },\r\n },\r\n },\r\n left: {\r\n position: [0, 40],\r\n attrs: {\r\n circle: {\r\n r: 4,\r\n magnet: true,\r\n stroke: \"#5F95FF\",\r\n strokeWidth: 1,\r\n fill: \"#fff\",\r\n style: { visibility: \"hidden\" },\r\n },\r\n },\r\n },\r\n },\r\n items: [\r\n {\r\n group: \"top\",\r\n id: \"7993fd26-855e-4827-bf43-db082ba305e1\",\r\n attrs: { circle: { style: { visibility: \"hidden\" } } },\r\n },\r\n {\r\n group: \"right\",\r\n id: \"7818e36b-98d3-49ea-9a69-965b54847d0d\",\r\n attrs: { circle: { style: { visibility: \"hidden\" } } },\r\n },\r\n {\r\n group: \"bottom\",\r\n id: \"0620321f-19e3-46de-8aff-4ac1d7a0f4d0\",\r\n attrs: { circle: { style: { visibility: \"hidden\" } } },\r\n },\r\n {\r\n group: \"left\",\r\n id: \"403ad49e-5f1d-438b-a752-ec170febc0f7\",\r\n attrs: { circle: { style: { visibility: \"hidden\" } } },\r\n },\r\n ],\r\n },\r\n zIndex: 2,\r\n },\r\n {\r\n position: { x: 212, y: 139 },\r\n size: { width: 60, height: 80 },\r\n view: \"html-view\",\r\n shape: \"customNode\",\r\n id: \"0e5d0518-f7bc-43e9-a9ef-0cfc291bedfb\",\r\n data: { label: \"路由器\", type: \"router\" },\r\n ports: {\r\n groups: {\r\n top: {\r\n position: [30, 2],\r\n attrs: {\r\n circle: {\r\n r: 4,\r\n magnet: true,\r\n stroke: \"#5F95FF\",\r\n strokeWidth: 1,\r\n fill: \"#fff\",\r\n style: { visibility: \"hidden\" },\r\n },\r\n },\r\n },\r\n right: {\r\n position: [60, 40],\r\n attrs: {\r\n circle: {\r\n r: 4,\r\n magnet: true,\r\n stroke: \"#5F95FF\",\r\n strokeWidth: 1,\r\n fill: \"#fff\",\r\n style: { visibility: \"hidden\" },\r\n },\r\n },\r\n },\r\n bottom: {\r\n position: [30, 80],\r\n attrs: {\r\n circle: {\r\n r: 4,\r\n magnet: true,\r\n stroke: \"#5F95FF\",\r\n strokeWidth: 1,\r\n fill: \"#fff\",\r\n style: { visibility: \"hidden\" },\r\n },\r\n },\r\n },\r\n left: {\r\n position: [0, 40],\r\n attrs: {\r\n circle: {\r\n r: 4,\r\n magnet: true,\r\n stroke: \"#5F95FF\",\r\n strokeWidth: 1,\r\n fill: \"#fff\",\r\n style: { visibility: \"hidden\" },\r\n },\r\n },\r\n },\r\n },\r\n items: [\r\n {\r\n group: \"top\",\r\n id: \"907c6461-2503-4bb9-83a5-151253585c63\",\r\n attrs: { circle: { style: { visibility: \"hidden\" } } },\r\n },\r\n {\r\n group: \"right\",\r\n id: \"c65c3e2f-8a3e-4449-ab51-4e10ee134880\",\r\n attrs: { circle: { style: { visibility: \"hidden\" } } },\r\n },\r\n {\r\n group: \"bottom\",\r\n id: \"fd92228d-ca99-4de6-93d1-32400f14bdf9\",\r\n attrs: { circle: { style: { visibility: \"hidden\" } } },\r\n },\r\n {\r\n group: \"left\",\r\n id: \"9da1902e-1b25-4525-a2dd-88da4e211deb\",\r\n attrs: { circle: { style: { visibility: \"hidden\" } } },\r\n },\r\n ],\r\n },\r\n zIndex: 3,\r\n },\r\n {\r\n position: { x: 449, y: 32 },\r\n size: { width: 60, height: 80 },\r\n view: \"html-view\",\r\n shape: \"customNode\",\r\n id: \"fd801254-5388-4951-a12c-6f9badf30b4a\",\r\n data: { label: \"路由器\", type: \"router\" },\r\n ports: {\r\n groups: {\r\n top: {\r\n position: [30, 2],\r\n attrs: {\r\n circle: {\r\n r: 4,\r\n magnet: true,\r\n stroke: \"#5F95FF\",\r\n strokeWidth: 1,\r\n fill: \"#fff\",\r\n style: { visibility: \"hidden\" },\r\n },\r\n },\r\n },\r\n right: {\r\n position: [60, 40],\r\n attrs: {\r\n circle: {\r\n r: 4,\r\n magnet: true,\r\n stroke: \"#5F95FF\",\r\n strokeWidth: 1,\r\n fill: \"#fff\",\r\n style: { visibility: \"hidden\" },\r\n },\r\n },\r\n },\r\n bottom: {\r\n position: [30, 80],\r\n attrs: {\r\n circle: {\r\n r: 4,\r\n magnet: true,\r\n stroke: \"#5F95FF\",\r\n strokeWidth: 1,\r\n fill: \"#fff\",\r\n style: { visibility: \"hidden\" },\r\n },\r\n },\r\n },\r\n left: {\r\n position: [0, 40],\r\n attrs: {\r\n circle: {\r\n r: 4,\r\n magnet: true,\r\n stroke: \"#5F95FF\",\r\n strokeWidth: 1,\r\n fill: \"#fff\",\r\n style: { visibility: \"hidden\" },\r\n },\r\n },\r\n },\r\n },\r\n items: [\r\n {\r\n group: \"top\",\r\n id: \"8bee0659-d0cd-45bd-9fc6-9064a586e665\",\r\n attrs: { circle: { style: { visibility: \"hidden\" } } },\r\n },\r\n {\r\n group: \"right\",\r\n id: \"68931aee-0eb4-43f9-8c35-fbb0910b3efc\",\r\n attrs: { circle: { style: { visibility: \"hidden\" } } },\r\n },\r\n {\r\n group: \"bottom\",\r\n id: \"4be336b5-9150-4085-b7b4-15f3ba99dd38\",\r\n attrs: { circle: { style: { visibility: \"hidden\" } } },\r\n },\r\n {\r\n group: \"left\",\r\n id: \"fbfaad3f-0eb1-4f3c-b2d1-4fc0a516705c\",\r\n attrs: { circle: { style: { visibility: \"hidden\" } } },\r\n },\r\n ],\r\n },\r\n zIndex: 4,\r\n },\r\n {\r\n position: { x: 225, y: 423 },\r\n size: { width: 60, height: 80 },\r\n view: \"html-view\",\r\n shape: \"customNode\",\r\n id: \"f5c83e15-0e35-4309-94c4-e5849d31a0f5\",\r\n data: { label: \"负载均衡\", type: \"load_balancer\" },\r\n ports: {\r\n groups: {\r\n top: {\r\n position: [30, 2],\r\n attrs: {\r\n circle: {\r\n r: 4,\r","readmeFilename":"README.md"}