Merge branch 'dev' of http://git.cestong.com.cn/cecf/observe-front into dev

src/api/mapping.js

@@ -1,6 +1,7 @@
 import request from '@/utils/request'
 import Request from '@/utils/requestOther'
 const instance = new Request()
+const instance2 = new Request('/core')
 // ---------------以下是接口相关------------------
 // 获取业务映射 /api/v1/url-mapping get  start_time:1696726800 end_time:1696730400 app_id:1
 export function listUrlMapping(query) {
@@ -252,3 +253,8 @@ export function getBasicInfo(data) {
   const url = `/api/v1/url-mapping/info`
   return instance.get(url, data)
 }
+// 获取甜甜圈接口
+export function getSweetList(data) {
+  const url = `/v1/biz/service-graph`
+  return instance2.get(url, data)
+}

src/assets/G6-icons/client.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718695181230" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="52666" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M866.432 64H157.504C70.656 64 0 137.408 0 227.648v391.104c0 90.176 70.656 163.648 157.504 163.648h288.96v103.744H250.688c-16.192 0-29.312 16.512-29.312 36.928s13.12 36.928 29.312 36.928h522.56c16.192 0 29.312-16.512 29.312-36.928s-13.12-36.928-29.312-36.928H577.536v-103.744h288.896c86.912 0 157.568-73.408 157.568-163.648V227.648C1024 137.408 953.344 64 866.432 64M157.504 145.856h708.928c43.392 0 78.784 36.672 78.784 81.792V566.4H78.72V227.648c0-45.12 35.392-81.792 78.784-81.792m708.928 554.624H157.504c-43.392 0-78.72-36.608-78.72-81.728v-9.408H945.28v9.344c0 45.184-35.456 81.792-78.848 81.792" fill="#2c2c2c" p-id="52667"></path></svg>

src/assets/G6-icons/dot-net.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718690439521" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5314" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M135.127893 322.816v373.248H178.775893V426.24a383.104 383.104 0 0 0-2.090666-51.2h1.664a124.074667 124.074667 0 0 0 11.861333 23.338667l191.872 297.685333h53.632V322.816H392.109227v262.485333a394.965333 394.965333 0 0 0 2.645333 54.869334H393.815893a385.408 385.408 0 0 0-15.146666-24.96L191.831893 322.816z m397.44 0v373.248h198.4l0.213334-40.96h-153.984v-129.365333h134.741333V486.4h-134.741333V362.325333h144.597333v-39.509333z m232.021334 0v39.509333h107.264v333.738667h43.605333V362.368H1024.00256v-39.509333zM27.863893 642.858667a27.434667 27.434667 0 0 0-19.456 8.789333 28.672 28.672 0 0 0-8.405333 20.48 28.245333 28.245333 0 0 0 8.405333 20.48 27.648 27.648 0 0 0 20.48 8.576 28.245333 28.245333 0 0 0 20.48-8.576 28.032 28.032 0 0 0 8.576-20.48 28.458667 28.458667 0 0 0-8.576-20.48 28.032 28.032 0 0 0-20.48-8.789333 27.434667 27.434667 0 0 0-1.024 0z" p-id="5315"></path></svg>

src/assets/G6-icons/erlang.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718690466582" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6316" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M64 224v576h138.24C136.32 715.2 96 602.88 96 480c0-98.56 36.8-188.16 97.6-256H64z m448 0c-11.2 0-21.76 1.28-32 4.16-55.36 14.08-96 64.32-96 123.84h256c0-70.72-57.28-128-128-128z m309.12 0C868.16 296.64 896 384.96 896 480H384c0 112.32 32 209.92 96 256.96 9.92 7.68 20.48 13.76 32 18.56 19.2 8 40.64 12.48 64 12.48 95.04 0 178.24-58.24 222.08-144.96l64.64 32.32 49.92 24.96c-22.4 44.8-51.84 85.12-87.36 119.68H960V224h-138.88z" p-id="6317"></path></svg>

src/assets/G6-icons/hive.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718691316601" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34217" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M896 241.066667L682.666667 117.76l-170.666667 98.56-170.666667-98.56L128 241.066667v246.4l170.666667 98.346666v197.12l213.333333 123.306667 213.333333-123.306667v-197.12l170.666667-98.346666z m-682.666667 49.28l128-74.026667 128 74.026667v147.84L341.333333 512l-128-73.813333z m426.666667 443.306666l-128 74.026667-128-74.026667v-147.84L512 512l128 73.813333z m170.666667-295.466666L682.666667 512l-128-73.813333v-147.84l128-74.026667 128 74.026667z" p-id="34218"></path></svg>

src/assets/G6-icons/java.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718690526420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9327" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M684.8 625.6c19.2-12.8 46.4-25.6 46.4-25.6s-76.8 14.4-153.6 20.8c-94.4 8-195.2 9.6-246.4 3.2-120-16 65.6-60.8 65.6-60.8s-72-4.8-161.6 38.4c-105.6 51.2 259.2 73.6 449.6 24z m-171.2-64c-38.4-84.8-166.4-160 0-291.2C720 105.6 614.4 0 614.4 0c43.2 169.6-150.4 220.8-220.8 324.8-48 72 22.4 148.8 120 236.8z m228.8-352S392 297.6 560 489.6c49.6 56-12.8 107.2-12.8 107.2s124.8-64 67.2-145.6c-54.4-75.2-94.4-112 128-241.6z m-12.8 540.8c-1.6 1.6-3.2 3.2-3.2 4.8 256-67.2 161.6-238.4 40-195.2-6.4 3.2-12.8 6.4-16 12.8 6.4-3.2 14.4-4.8 22.4-6.4 60.8-12.8 150.4 83.2-43.2 184z m94.4 124.8s28.8 24-32 41.6c-115.2 35.2-481.6 44.8-582.4 1.6-36.8-16 32-38.4 52.8-43.2 22.4-4.8 35.2-3.2 35.2-3.2-40-28.8-262.4 56-112 80 408 67.2 745.6-28.8 638.4-76.8z m-446.4-83.2c-156.8 43.2 96 134.4 296 49.6-19.2-8-38.4-17.6-56-27.2-89.6 17.6-131.2 17.6-211.2 9.6-68.8-9.6-28.8-32-28.8-32z m360 193.6c-156.8 28.8-352 25.6-467.2 6.4 0 0 24 19.2 144 27.2 184 11.2 467.2-6.4 473.6-94.4 1.6 1.6-11.2 35.2-150.4 60.8z m-88-280c-118.4 22.4-187.2 22.4-273.6 12.8-67.2-6.4-22.4-40-22.4-40-172.8 57.6 96 123.2 339.2 51.2-16-3.2-30.4-12.8-43.2-24z" p-id="9328"></path></svg>

src/assets/G6-icons/kafka.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718691481529" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="42852" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M725.333333 597.333333c-38.4 0-72.533333 17.066667-96 44.8l-104.533333-59.733333c6.4-19.2 10.666667-38.4 10.666667-57.6 0-23.466667-4.266667-44.8-12.8-66.133333l115.2-66.133334c23.466667 21.333333 53.333333 36.266667 89.6 36.266667 70.4 0 128-57.6 128-128s-57.6-128-128-128-128 57.6-128 128c0 12.8 2.133333 25.6 6.4 38.4L490.666667 405.333333a170.24 170.24 0 0 0-104.533334-57.6v-115.2c36.266667-12.8 64-49.066667 64-89.6C448 85.333333 405.333333 42.666667 352 42.666667S256 85.333333 256 138.666667c0 42.666667 27.733333 76.8 64 89.6v115.2c-85.333333 14.933333-149.333333 89.6-149.333333 179.2s64 164.266667 149.333333 179.2v93.866666c-36.266667 12.8-64 49.066667-64 89.6 0 53.333333 42.666667 96 96 96s96-42.666667 96-96c0-42.666667-27.733333-76.8-64-89.6v-93.866666c44.8-8.533333 81.066667-32 108.8-64l106.666667 61.866666c-2.133333 8.533333-2.133333 17.066667-2.133334 25.6 0 70.4 57.6 128 128 128s128-57.6 128-128-57.6-128-128-128z" fill="#333333" p-id="42853"></path></svg>

src/assets/G6-icons/php.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718690571531" class="icon" viewBox="0 0 1280 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12255" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="200"><path d="M640 209c342.8 0 606.4 144.4 606.4 303S982.6 815 640 815c-342.8 0-606.4-144.4-606.4-303S297.4 209 640 209m0-33.6C286.6 175.4 0 326 0 512s286.6 336.6 640 336.6S1280 698 1280 512 993.4 175.4 640 175.4zM436.4 485c-15.8 81-71.6 72.6-140.2 72.6l27.4-141.2c76 0 127.6-8.2 112.8 68.6zM194.8 700.6h73.4l17.4-89.6c82.2 0 133.2 6 180.4-38.2 52.2-48 65.8-133.4 28.6-176.2-19.4-22.4-50.6-33.4-93-33.4h-141.4L194.8 700.6z m371.4-427.2h73l-17.4 89.6c63 0 121.4-4.6 149.6 21.4 29.6 27.2 15.4 62-16.6 226.2h-74c30.8-158.8 36.6-172 25.4-184-10.8-11.6-35.4-9.2-94.8-9.2l-37.6 193.2h-73l65.4-337.2zM1010 485c-16 82.2-73.4 72.6-140.2 72.6l27.4-141.2c76.4 0 127.6-8.2 112.8 68.6zM768.4 700.6H842l17.4-89.6c86.4 0 134.2 5 180.4-38.2 52.2-48 65.8-133.4 28.6-176.2-19.4-22.4-50.6-33.4-93-33.4H834l-65.6 337.4z" p-id="12256"></path></svg>

src/assets/G6-icons/progress.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718691441364" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39712" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M842.792 467.225H491.827l-7.825 14.885h341.852c32.927 0 59.632 22.226 59.632 49.634v11.63c0 27.4-26.712 49.633-59.632 49.633H425.705l-7.825 14.878h424.912a62.958 62.958 0 0 0 62.958-62.95v-14.752a62.958 62.958 0 0 0-62.958-62.958z m-533.13 125.782l-7.826 14.878H402.98l7.82-14.878z m159.44-110.897l7.826-14.885H375.784l-7.826 14.885zM198.814 607.885h88.123l7.818-14.878h-78.989c-4.809 0-9.457-0.527-13.936-1.42l-8.423 16.024c1.786 0.148 3.586 0.274 5.407 0.274z m-42.687-64.512v-11.63c0-27.407 26.698-49.633 59.64-49.633h28.715l7.826-14.885h-53.494a62.958 62.958 0 0 0-62.958 62.958v14.751c0 28.168 18.514 52.003 44.03 60.047l9.098-17.304c-19.47-8.17-32.857-24.918-32.857-44.304zM353.06 482.11l7.825-14.885h-93.677l-7.826 14.885z" fill="#515151" p-id="39713"></path><path d="M603.519 482.11H484.002L425.705 593h119.518z m-388.68 0c-32.942 0-59.64 22.226-59.64 49.627v11.63c0 19.638 13.74 36.562 33.624 44.613l55.659-105.87h-29.644z m44.542 0L201.74 591.762c4.219 0.781 8.592 1.238 13.1 1.238h79.923l58.304-110.89H259.38z m108.577 0L309.662 593h101.144l58.296-110.89z" fill="#515151" p-id="39714"></path></svg>

src/assets/G6-icons/rabbitmq.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718692474861" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="45718" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M870.59375 432.51171902h-249.25781277c-19.93359375-2.39062473-35.12109375-19.93359375-35.12109375-40.60546875v-261.5625A40.18359375 40.18359375 0 0 0 546.03124973 90.125h-87.22265625c-22.32421848 0-40.25390598 18.10546848-40.25390598 40.25390598v264.3046875c-1.08984402 19.93359375-17.54296902 36.00000027-37.30078098 37.82812554H315.96875027A40.74609402 40.74609402 0 0 1 280.67187473 394.64843777V130.37890598C280.67187473 108.0546875 262.56640625 90.125 240.45312527 90.125H153.1953125C130.90624973 90.125 112.97656223 108.23046848 112.97656223 130.37890598v763.24218804C112.97656223 915.9453125 131.08203152 933.875 153.1953125 933.875h717.57421848c22.32421848 0 40.21875027-18.10546848 40.21875027-40.25390598V472.765625A40.35937473 40.35937473 0 0 0 870.59375 432.51171902z m-114.82031223 288.63281223c0 22.32421848-18.10546848 40.25390598-40.21875027 40.25390598h-87.22265625a40.21875027 40.21875027 0 0 1-40.21875027-40.25390598v-82.30078152c0-22.32421848 18.10546848-40.25390598 40.21875027-40.25390598h87.22265625c22.32421848 0 40.21875027 18.10546848 40.21875027 40.25390598v82.30078152z" p-id="45719"></path></svg>

src/assets/G6-icons/serviceBus.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718692494000" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="46745" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1018.6848 598.4a81.792 81.792 0 0 0-144.704-16.064l-61.312-20.224a226.624 226.624 0 0 0-93.568-205.76l41.344-78.656a111.04 111.04 0 0 0 129.6-135.168 111.04 111.04 0 1 0-167.424 119.936l-38.528 73.152a228.224 228.224 0 0 0-97.408-21.824A226.688 226.688 0 0 0 412.8608 394.816L242.9408 266.24a133.12 133.12 0 1 0-27.904 29.696l174.656 132.16a226.368 226.368 0 0 0-15.168 193.536l-155.648 93.184a81.792 81.792 0 1 0 28.8 30.08l144.704-86.656a226.752 226.752 0 0 0 297.088 85.056l80.512 85.76a81.536 81.536 0 0 0 12.672 121.984 81.792 81.792 0 1 0 22.016-144.256l-80.192-85.44a227.2 227.2 0 0 0 80.832-118.912l55.488 18.304a81.792 81.792 0 1 0 157.888-22.336z" fill="#070001" p-id="46746"></path></svg>

src/assets/G6-icons/swift.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718690939474" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23482" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M959.99 312.18c0-9.02-0.16-18-0.4-27.04a392.62 392.62 0 0 0-5.16-58.84 199.24 199.24 0 0 0-18.44-56A188.16 188.16 0 0 0 853.67 88a198.34 198.34 0 0 0-56-18.44 390 390 0 0 0-58.86-5.18c-9.02-0.24-18-0.34-27.04-0.4H312.27c-9.02 0-18 0.16-27.04 0.4-4.9 0.14-9.82 0.3-14.74 0.54a343.36 343.36 0 0 0-44.12 4.64 206.12 206.12 0 0 0-42.42 12.2q-6.92 2.9-13.62 6.24a189.32 189.32 0 0 0-36.78 24.64c-3.76 3.22-7.38 6.56-10.86 10A187.72 187.72 0 0 0 87.99 170.34a198.9 198.9 0 0 0-18.44 56 392.62 392.62 0 0 0-5.08 58.8c-0.26 9.02-0.36 18-0.42 27.04v399.66c0 9.02 0.16 18 0.42 27.02a392.16 392.16 0 0 0 5.16 58.84 198.6 198.6 0 0 0 18.44 56A188.62 188.62 0 0 0 170.33 936a198.94 198.94 0 0 0 56 18.42 390 390 0 0 0 58.86 5.18c9 0.24 18 0.34 27.04 0.4h399.58c9.02 0 18-0.16 27.04-0.4a393.18 393.18 0 0 0 58.88-5.18 199.14 199.14 0 0 0 56-18.42A188.44 188.44 0 0 0 935.99 853.68a198.6 198.6 0 0 0 18.44-56 389.58 389.58 0 0 0 5.18-58.84c0.24-9 0.34-18 0.4-27.02V344.28c-0.02-10.7-0.02-21.4-0.02-32.1z m-139.76 482c-40-77.86-114.46-58.54-152.62-38.94-3.44 2-6.96 4-10.5 6l-0.84 0.5c-79 42-185.06 45.08-291.7-0.76A469.28 469.28 0 0 1 153.99 580.24a461.26 461.26 0 0 0 78.34 46.74c112.72 52.8 226 48.98 306 0-114-87.7-209.2-202-282.18-294.44a394.18 394.18 0 0 1-37.56-51.8c87.4 80 225.4 180.44 274.96 208.24-105.14-110.98-197.78-247.88-193.44-243.48 165.58 166.84 318.36 261.18 318.36 261.18 5.76 3.16 10 5.7 13.46 8a254.88 254.88 0 0 0 8.32-24.94c26.44-96.66-3.32-207.16-70.62-298.4C723.21 283.5 813.99 458.68 776.79 606.84c-0.88 3.46-1.9 6.8-2.88 10.18 77.04 94.8 56.08 196.34 46.26 177.18z" p-id="23483"></path></svg>

src/assets/G6-icons/webjs.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718690958010" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24501" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M132.778667 535.893333h214.442666c7.850667 133.717333 59.221333 260.864 145.92 360.106667l-1.024-1.109333a383.36 383.36 0 0 1-364.074666-359.381334c1.578667 0.298667 3.157333 0.426667 4.736 0.426667z m760.533333-0.426666a383.36 383.36 0 0 1-364.288 359.424c86.101333-99.114667 137.130667-225.792 144.896-358.954667h214.442667l3.84-0.298667 1.109333-0.170666z m-266.666667 0.426666a551.381333 551.381333 0 0 1-116.053333 306.005334 551.381333 551.381333 0 0 1-116.053333-306.005334h232.106666z m-97.621333-406.784a383.36 383.36 0 0 1 364.330667 360.106667 23.466667 23.466667 0 0 0-4.992-0.426667h-214.442667c-7.594667-133.973333-59.008-261.376-145.92-360.789333l1.024 1.109333z m-36.864 0c-86.314667 99.242667-137.344 226.176-144.938667 359.68H132.736a29.013333 29.013333 0 0 0-4.736 0.341334 383.317333 383.317333 0 0 1 361.216-359.893334l2.986667-0.128z m18.432 52.992a551.381333 551.381333 0 0 1 116.053333 306.645334H394.496a551.381333 551.381333 0 0 1 116.138667-306.645334z" p-id="24502"></path></svg>

src/layout/components/Navbar.vue

@@ -314,7 +314,6 @@ export default {
       this.drawerfire = false
     },
     handChange(val) {
-      console.log('vval----', val)
       this.$store.commit('alias/setCurrentAlias', val.alias)
       if (val) {
         this.queryNums.app_ids = val.id

src/main.js

@@ -47,12 +47,10 @@ import VueParticles from 'vue-particles'
 Vue.use(VueParticles)
 
 import '@/utils/dialog'
-
 Vue.prototype.$http = axios;
 import * as Echarts5 from 'echarts5'
 Vue.prototype.$echarts5 = Echarts5;
 
-
 import 'vis/dist/vis.css'
 
 import elTableInfiniteScroll from 'el-table-infinite-scroll';

src/utils/requestOther.js

@@ -10,18 +10,7 @@ import {
 import qs from 'qs'
 // import { Loading } from 'element-ui';
 class Request {
-  constructor(baseURL = '/re'
-  // options = {
-  //   target: '.basic-layout',
-  //   body: false,
-  //   fullscreen: true,
-  //   lock: false,
-  //   text: '',
-  //   spinner: '',
-  //   background: '',
-  //   customClass: ''
-  // }
-  ) {
+  constructor(baseURL = '/re') {
     this.request = axios.create({
       baseURL,
       headers: {

src/views/business-analysis/analysis/components/Topo.vue

@@ -33,7 +33,7 @@ insertCss(`
     box-shadow: rgb(174, 174, 174) 0px 0px 10px;
     width: fit-content;
     color: #fff;
-    border-radius = 4px;
+    border-radius:4px;
   }
 `);
 

src/views/business-analysis/analysis/components/biz.vue

@@ -127,7 +127,6 @@
         
         <div v-if='flag==true' style='position:relative;'>
           <div v-if='num == 1' class='tree_box'>
-            <Topo :graphData='graphData' topoId='container' v-on:changeState="clickRowHandleNode" ref='topo'/>
           </div>
           <div v-if="num ==2">
             <el-table   
@@ -426,7 +425,6 @@
         
         <div v-if='flag==true' style='position:relative;'>
           <div v-if='num == 1' class='tree_box'>
-            <Topo :graphData='graphData' topoId='container1' v-on:changeState="clickRowHandleNode"/>
           </div>
           <div v-if="num ==2">
             <el-table   
@@ -660,76 +658,7 @@
             </ul>
           </el-collapse-item>
           <el-collapse-item title="Resource" name="tow">
-            <!-- <ul class='ul_box' v-if='detailData.resource_attributes !=null'>
-              <li>
-                <div class="ul_label">container.id</div>
-                <div class="ul_value" style='color:#008080'>"{{detailData.resource_attributes['container.id']}}""</div>
-              </li>
-              <li>
-                <div class="ul_label">host.arch</div>
-                <div class="ul_value" style='color:#008080'>"{{detailData.resource_attributes['host.arch']}}"</div>
-              </li>
-              <li>
-                <div class="ul_label">host.name</div>
-                <div class="ul_value" style='color:#008080'>"{{detailData.resource_attributes['host.name']}}"</div>
-              </li>
-              <li>
-                <div class="ul_label">os.description</div>
-                <div class="ul_value" style='color:#008080'>"{{detailData.resource_attributes['os.description']}}"</div>
-              </li>
-              <li>
-                <div class="ul_label">os.type</div>
-                <div class="ul_value" style='color:#008080'>"{{detailData.resource_attributes['os.type']}}"</div>
-              </li>
-              <li>
-                <div class="ul_label">pod.ip</div>
-                <div class="ul_value" style='color:#008080'>"{{detailData.resource_attributes['pod.ip']}}"</div>
-              </li>
-              <li>
-                <div class="ul_label">process.command_line</div>
-                <div class="ul_value" style='color:#008080'>"{{detailData.resource_attributes['process.command_line']}}"</div>
-              </li>
-              <li>
-                <div class="ul_label">process.executable.path</div>
-                <div class="ul_value" style='color:#008080'>"{{detailData.resource_attributes['process.executable.path']}}"</div>
-              </li>
-              <li>
-                <div class="ul_label">process.pid</div>
-                <div class="ul_value" style='color:#0000ff'>{{detailData.resource_attributes['process.pid']}}</div>
-              </li>
-              <li>
-                <div class="ul_label">process.runtime.description</div>
-                <div class="ul_value" style='color:#008080'>"{{detailData.resource_attributes['process.runtime.description']}}"</div>
-              </li>
-              <li>
-                <div class="ul_label">process.runtime.name</div>
-                <div class="ul_value" style='color:#008080'>"{{detailData.resource_attributes['process.runtime.name']}}"</div>
-              </li>
-              <li>
-                <div class="ul_label">process.runtime.version</div>
-                <div class="ul_value" style='color:#008080'>"{{detailData.resource_attributes['process.runtime.version']}}"</div>
-              </li>
-              <li>
-                <div class="ul_label">service.name</div>
-                <div class="ul_value" style='color:#008080'>"{{detailData.resource_attributes['service.name']}}"</div>
-              </li>
-              <li>
-                <div class="ul_label">telemetry.auto.version</div>
-                <div class="ul_value" style='color:#008080'>"{{detailData.resource_attributes['telemetry.auto.version']}}"</div>
-              </li>
-              <li>
-                <div class="ul_label">telemetry.sdk.language</div>
-                <div class="ul_value" style='color:#008080'>"{{detailData.resource_attributes['telemetry.sdk.language']}}"</div>
-              </li>
-              <li>
-                <div class="ul_label">telemetry.sdk.name</div>
-                <div class="ul_value" style='color:#008080'>"{{detailData.resource_attributes['telemetry.sdk.name']}}"</div>
-              </li>
-              <li>
-                <div class="ul_label">telemetry.sdk.version</div>
-                <div class="ul_value" style='color:#008080'>"{{detailData.resource_attributes['telemetry.sdk.version']}}"</div>
-              </li>
-            </ul> -->
+           
             <ul class='ul_box' v-if='detailData.resource_attributes !=null'>
               <li v-for='(value,key) in detailData.resource_attributes' :key='key'> 
                 <div class="ul_label">{{key}}</div>
@@ -772,11 +701,7 @@
 <script>
 import { traceList, traceGraph } from '@/api/trace'
 import { listBiz,listBizStats,listBizGraph} from '@/api/mapping'
-// import Topo from './TopoNew1'
 export default {
-  components:{
-    // Topo,
-  },
   data(){
     return {
       Visible:false,

src/views/business-analysis/analysisDetail/components/Topo.vue

@@ -19,7 +19,7 @@ insertCss(`
     box-shadow: rgb(174, 174, 174) 0px 0px 10px;
     width: fit-content;
     color: #fff;
-    border-radius = 4px;
+    border-radius: 4px;
   }
 `)
 const colors = {
@@ -82,6 +82,21 @@ export default {
       this.isFull = screenfull.isFullscreen // 更新全屏状态
     },
     initGraph(data, id) {
+      function replaceIds(obj) {
+        if (typeof obj === 'object' && obj!== null) {
+          if (obj.hasOwnProperty('id') && obj.hasOwnProperty('unique_id') ) {
+            let temp = ''
+            temp = obj.id
+            obj.id = obj.unique_id
+            obj.unique_id = temp
+          }
+          if (obj.hasOwnProperty('children')) {
+            obj.children && obj.children.forEach(child => replaceIds(child));
+          }
+        }
+        return obj
+      }
+      data = replaceIds(data)
       let graph = null
       const container = document.getElementById(id)
       const width = container.scrollWidth
@@ -490,6 +505,7 @@ export default {
       if (typeof onInit === 'function') {
         onInit(graph)
       }
+      console.log('graph.node------99999-------', data)
       graph.data(data)
       graph.render()
       // 让画布内容适应视口
@@ -497,7 +513,6 @@ export default {
 
       // 添加点击事件
       graph.on('node:click', (evt) => {
-        debugger
         const itemData = evt.item._cfg.model
         this.$emit('changeState', itemData)
       })
@@ -522,11 +537,24 @@ export default {
       })
       let currentLevel = 1
       const briefZoomThreshold = Math.max(graph.getZoom(), 0.5)
+      changeNodeColor()
       graph.on('viewportchange', e => {
         if (e.action !== 'zoom') return
+        changeNodeColor()
+      })
+
+      if (typeof window !== 'undefined') {
+        window.onresize = () => {
+          if (!graph || graph.get('destroyed')) return
+          if (!container || !container.scrollWidth || !container.scrollHeight) return
+          graph.changeSize(container.scrollWidth, container.scrollHeight)
+        }
+      }
+
+      function changeNodeColor() {
         const currentZoom = graph.getZoom()
         let toLevel = currentLevel
-        if (currentZoom < briefZoomThreshold) {
+        if (currentZoom < briefZoomThreshold) { // 变色
           toLevel = 0
         } else {
           toLevel = 1
@@ -539,14 +567,6 @@ export default {
             })
           })
         }
-      })
-
-      if (typeof window !== 'undefined') {
-        window.onresize = () => {
-          if (!graph || graph.get('destroyed')) return
-          if (!container || !container.scrollWidth || !container.scrollHeight) return
-          graph.changeSize(container.scrollWidth, container.scrollHeight)
-        }
       }
     }
   }

src/views/business-analysis/analysisDetail/index.vue

@@ -122,7 +122,7 @@
                   </div>
                   <div class="node-details-info-field">
                     <div class="node-details-info-field-label truncate w50" style="width:50%">成功率:</div>
-                    <div class="node-details-info-field-value truncate w50" style="width:50%">{{ ((detailData.rate)*100).toFixed(2)+'%' }}</div>
+                    <div class="node-details-info-field-value truncate w50" style="width:50%">{{ ((detailData.rate || 0)*100).toFixed(2)+'%' }}</div>
                   </div>
                 </div>
               </div>
@@ -135,19 +135,19 @@
                 </div>
                 <div class="node-details-info-field">
                   <div class="node-details-info-field-label truncate w50" style="width:50%">错误率:</div>
-                  <div class="node-details-info-field-value truncate w50" style="width:50%">{{ nodeStats.error_rate }}</div>
+                  <div class="node-details-info-field-value truncate w50" style="width:50%">{{ (nodeStats.error_rate || 0 ).toFixed(4) + '%'  }}</div>
                 </div>
                 <div class="node-details-info-field">
                   <div class="node-details-info-field-label truncate w50" style="width:50%">P50:</div>
-                  <div class="node-details-info-field-value truncate w50" style="width:50%">{{ (nodeStats.p50).toFixed(2) +'ms' }}</div>
+                  <div class="node-details-info-field-value truncate w50" style="width:50%">{{ (nodeStats.p50 || 0 ).toFixed(2) +'ms' }}</div>
                 </div>
                 <div class="node-details-info-field">
                   <div class="node-details-info-field-label truncate w50" style="width:50%">P90:</div>
-                  <div class="node-details-info-field-value truncate w50" style="width:50%">{{ (nodeStats.p90).toFixed(2) +'ms' }}</div>
+                  <div class="node-details-info-field-value truncate w50" style="width:50%">{{ (nodeStats.p90 || 0).toFixed(2) +'ms' }}</div>
                 </div>
                 <div class="node-details-info-field">
                   <div class="node-details-info-field-label truncate w50" style="width:50%">P99:</div>
-                  <div class="node-details-info-field-value truncate w50" style="width:50%">{{ nodeStats.p99.toFixed(2) +'ms' }}</div>
+                  <div class="node-details-info-field-value truncate w50" style="width:50%">{{ (nodeStats.p99 || 0).toFixed(2) +'ms' }}</div>
                 </div>
                 <div>
                   <div class="node-details-info-field" style="cursor: pointer;" @click="gotoPath(&quot;/service/InterfaceDetail/index&quot;,nodeStats)">
@@ -354,7 +354,9 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      this.drawEchartsScale(this.detailObj)
+      if (document.getElementById('scaleMain')){
+        this.drawEchartsScale(this.detailObj)
+      }
     })
   },
   beforeDestroy() {
@@ -399,10 +401,10 @@ export default {
     clickRowHandleNode(item) {
       this.detailData = {}
       this.detailData = item
-      this.queryStats.id = Number(item.id)
-      this.queryName.id = Number(item.id)
+      this.queryStats.id = Number(item.unique_id)
+      this.queryName.id = Number(item.unique_id)
       this.queryName.name = item.name
-      this.querySpans.id = Number(item.id)
+      this.querySpans.id = Number(item.unique_id)
 
       if (item.span_type == 'http server') {
         this.getNodeStats()

src/views/business-analysis/runningTopology/callChain/index.vue

@@ -30,10 +30,10 @@
           @sort-change="sortChangeTable"
           @row-click="handleClickRightTable"
         >
-          <el-table-column header-align="center" label="TraceID" prop="trace_id" align="center" width="240" />
-          <el-table-column header-align="center" label="SpanName" prop="span_name" align="center" width="140" :show-overflow-tooltip="true" />
-          <el-table-column header-align="center" label="DateTime" sortable="custom" prop="datetime" align="center" width="140" :show-overflow-tooltip="true" />
-          <el-table-column header-align="center" label="Duration(ms)" sortable="custom" prop="duration" width="140" align="center">
+          <el-table-column header-align="center" label="TraceID" prop="trace_id" align="center" />
+          <el-table-column header-align="center" label="SpanName" prop="span_name" align="center"  :show-overflow-tooltip="true" />
+          <el-table-column header-align="center" label="DateTime" sortable="custom" prop="datetime" align="center"  :show-overflow-tooltip="true" />
+          <el-table-column header-align="center" label="Duration(ms)" sortable="custom" prop="duration" align="center">
             <template slot-scope="scope">
               <el-tag v-if="scope.row.duration>=2000" type="danger">{{ scope.row.duration }}</el-tag>
               <el-tag v-if="scope.row.duration<2000" type="info">{{ scope.row.duration }}</el-tag>

src/views/business-analysis/topology/index.vue

@@ -113,7 +113,7 @@
                     <div class="interface-box">
                       <h6 class="h6">慢接口TOP5</h6>
                       <el-table
-                        v-loading="loading"
+                        v-loading="loading3"
                         :data="slowTopList"
                         @row-click="handleRowClickInterFace"
                       >
@@ -283,7 +283,7 @@ export default {
       serviceBarObj: {},
       timer: null,
       slowTopQuery: {
-        app_id: 0,
+        app_id: 1,
         limit: 5,
         start_time: '',
         end_time: ''
@@ -305,7 +305,8 @@ export default {
       slowBinsTopQuery: {
         start_time: '',
         end_time: ''
-      }
+      },
+      loading3: false
     }
   },
   watch: {
@@ -314,7 +315,6 @@ export default {
         var live = false
         if (newValue) {
           this.topoUrl = ''
-          this.changeQuery('/business-analysis/topology/index', newValue.startTime, newValue.endTime, live)
           this.topoUrl = '/ui/index.html'
           this.serviceBarQuery.start_time = newValue.startTime
           this.serviceBarQuery.end_time = newValue.endTime
@@ -324,15 +324,14 @@ export default {
           this.dbslowtopQuery.end_time = newValue.endTime
           this.slowBinsTopQuery.start_time = newValue.startTime
           this.slowBinsTopQuery.end_time = newValue.endTime
-
           this.queryScore.interval = newValue.interval
-          this.getAppsScore()
-          this.getdbslowtop()
-          this.getServiceBar()
-          this.getslowTopUrlMapping()
-          this.getSlowInterfaceFn()
+          this.getAppsScore() // 应用黄金指标(RED)
+          this.getdbslowtop() // 慢查询TOP5
+          this.getServiceBar() // 服务性能
+          
+          this.getslowTopUrlMapping() // 慢接口TOP5
+          this.getSlowInterfaceFn()// 慢业务TOP5
         }
-
         if (newValue.timeOut) {
           if (newValue.timeOut == 1) {
             live = false
@@ -344,12 +343,12 @@ export default {
           }
 
           this.topoUrl = ''
-          this.changeQuery('/business-analysis/topology/index', newValue.startTime, newValue.endTime, live)
+          // this.changeQuery('/business-analysis/topology/index', newValue.startTime, newValue.endTime, live)
           this.topoUrl = '/ui/index.html'
         } else {
           live = false
           this.topoUrl = ''
-          this.changeQuery('/business-analysis/topology/index', newValue.startTime, newValue.endTime, live)
+          // this.changeQuery('/business-analysis/topology/index', newValue.startTime, newValue.endTime, live)
           this.topoUrl = '/ui/index.html'
         }
       },
@@ -399,12 +398,13 @@ export default {
         this.sendObj.app_alias = newValue
         this.serviceBarQuery.app_alias = newValue
         this.dbslowtopQuery.app_alias = newValue
-        this.getAppsScore()
-        this.getdbslowtop()
-        this.getServiceBar()
-        this.getslowTopUrlMapping()
-        this.getSlowInterfaceFn()
-        // this.changeQuery('/business-analysis/topology/index', this.appItem.start_time, this.appItem.end_time, this.appItem.live)
+        this.appItem = storage.get('appsItem')
+        this.slowTopQuery.app_id = this.appItem.id
+        this.getAppsScore() // 应用黄金指标(RED)
+        this.getdbslowtop() // 慢查询TOP5
+        this.getServiceBar() // 服务性能
+        this.getslowTopUrlMapping() // 慢接口TOP5
+        this.getSlowInterfaceFn() // 慢业务TOP5
       },
       deep: true
     }
@@ -423,20 +423,20 @@ export default {
       this.serviceBarQuery.app_alias = this.appItem.alias
       this.serviceBarQuery.start_time = start_time
       this.serviceBarQuery.end_time = end_time
-      this.getServiceBar()
+      this.getServiceBar() // 服务性能
       this.slowTopQuery.app_id = this.appItem.id
       this.slowTopQuery.start_time = start_time
       this.slowTopQuery.end_time = end_time
-      this.getslowTopUrlMapping()
+     
+      this.getslowTopUrlMapping() // 慢接口TOP5
       this.dbslowtopQuery.app_alias = this.appItem.alias
       this.dbslowtopQuery.start_time = start_time
       this.dbslowtopQuery.end_time = end_time
 
-      // this.getList()
-      this.getAppsScore()
-      this.getdbslowtop()
-      this.changeQuery('/business-analysis/topology/index', this.appItem.start_time, this.appItem.end_time, this.appItem.live)
-      this.getSlowInterfaceFn()
+      this.getAppsScore() // 应用黄金指标(RED)
+      this.getdbslowtop() // 慢查询TOP5
+      // this.changeQuery('/business-analysis/topology/index', this.appItem.start_time, this.appItem.end_time, this.appItem.live)
+      this.getSlowInterfaceFn() // 慢业务TOP5
     }
     if (this.$route.query.id != undefined) {
       this.appId = this.$route.query.id
@@ -446,7 +446,7 @@ export default {
     clearInterval(this.timer)
   },
   methods: {
-    getAppsScore() {
+    getAppsScore() { // 应用黄金指标(RED)
       this.queryScore.req_applist.push({ app_alias: this.appItem.alias })
       appsScore(this.queryScore).then(res => {
         if (res.code == 200) {
@@ -518,13 +518,11 @@ export default {
     },
     Refresh(timeOut) {
       this.timer = setInterval(() => {
-        // this.getList();
-        this.getServiceBar()
-        this.getAppsScore()
-        this.getslowTopUrlMapping()
-        this.getdbslowtop()
-        this.getSlowInterfaceFn()
-        // this.getDigitsService();
+        this.getServiceBar() // 服务性能
+        this.getAppsScore() // 应用黄金指标(RED)
+        this.getslowTopUrlMapping() // 慢接口TOP5
+        this.getdbslowtop() // 慢查询TOP5
+        this.getSlowInterfaceFn() // 慢业务TOP5
       }, timeOut)
     },
     toggleBox() {
@@ -564,7 +562,7 @@ export default {
         console.log(err)
       })
     },
-    getServiceBar() {
+    getServiceBar() { // 服务性能
       serviceBar(this.serviceBarQuery, this.serviceBarQuery.app_alias).then(res => {
         if (res.code == 200) {
           this.serviceBarObj = res.data
@@ -692,16 +690,17 @@ export default {
         that.compareChart.setOption(option)
       })
     },
-    getslowTopUrlMapping() {
-      this.loading = true
+    getslowTopUrlMapping() { // 慢接口TOP5
+      this.loading3 = true
+      console.log('慢接口TOP5f---方法')
       slowTopUrlMapping(this.slowTopQuery).then(res => {
         if (res.code == 200) {
           this.slowTopList = res.data
-          this.loading = false
+          this.loading3 = false
         }
       })
     },
-    getdbslowtop() {
+    getdbslowtop() {// 慢查询TOP5
       this.loading = true
       dbslowtop(this.dbslowtopQuery).then(res => {
         if (res.code == 200) {
@@ -710,7 +709,7 @@ export default {
         }
       })
     },
-    async getSlowInterfaceFn() {
+    async getSlowInterfaceFn() { // 慢业务TOP5
       this.loading2 = true
       const res = await getSlowInterfaceData(this.dbslowtopQuery)
       this.loading2 = false

src/views/latency/components/Topo.vue

@@ -14,7 +14,7 @@ insertCss(`
     box-shadow: rgb(174, 174, 174) 0px 0px 10px;
     width: fit-content;
     color: #fff;
-    border-radius = 4px;
+    border-radius:4px;
   }
 `);
 

src/views/latency/components/Topo1.vue

@@ -22,7 +22,7 @@ insertCss(`
     box-shadow: rgb(174, 174, 174) 0px 0px 10px;
     width: fit-content;
     color: #fff;
-    border-radius = 4px;
+    border-radius:4px;
   }
 `);
 

src/views/latency/components/Topo2.vue

@@ -14,7 +14,7 @@ insertCss(`
     box-shadow: rgb(174, 174, 174) 0px 0px 10px;
     width: fit-content;
     color: #fff;
-    border-radius = 4px;
+    border-radius:4px;
   }
 `);
 

src/views/latency/components/TopoNew.vue

@@ -25,7 +25,7 @@ insertCss(`
     box-shadow: rgb(174, 174, 174) 0px 0px 10px;
     width: fit-content;
     color: #fff;
-    border-radius = 4px;
+    border-radius:4px;
   }
 `);
 export default {

src/views/latency/components/TopoTree.vue

@@ -31,7 +31,7 @@ insertCss(`
     box-shadow: rgb(174, 174, 174) 0px 0px 10px;
     width: fit-content;
     color: #fff;
-    border-radius = 4px;
+    border-radius:4px;
   }
 `)
 
@@ -198,11 +198,6 @@ export default {
       const _this = this
       let graph = null
       const container = document.getElementById(id)
-
-      // const descriptionDiv = document.createElement('div');
-      // descriptionDiv.innerHTML = 'Wait for the layout to complete...';
-      // container.appendChild(descriptionDiv);
-
       const width = container.scrollWidth
       const height = container.scrollHeight || 700
       // 默认配置
@@ -580,6 +575,8 @@ export default {
       }
       graph.data(data)
       graph.render()
+      // 让画布内容适应视口
+      graph.fitView()
       // 添加点击事件
       graph.on('node:click', (evt) => {
         const item = evt.item
@@ -654,8 +651,20 @@ export default {
       })
       let currentLevel = 1
       const briefZoomThreshold = Math.max(graph.getZoom(), 0.5)
+      changeNodeColor()
       graph.on('viewportchange', e => {
         if (e.action !== 'zoom') return
+        changeNodeColor()
+      })
+      if (typeof window !== 'undefined') {
+        window.onresize = () => {
+          if (!graph || graph.get('destroyed')) return
+          if (!container || !container.scrollWidth || !container.scrollHeight) return
+          graph.changeSize(container.scrollWidth, container.scrollHeight)
+        }
+      }
+
+      function changeNodeColor() {
         const currentZoom = graph.getZoom()
         let toLevel = currentLevel
         if (currentZoom < briefZoomThreshold) {
@@ -671,13 +680,6 @@ export default {
             })
           })
         }
-      })
-      if (typeof window !== 'undefined') {
-        window.onresize = () => {
-          if (!graph || graph.get('destroyed')) return
-          if (!container || !container.scrollWidth || !container.scrollHeight) return
-          graph.changeSize(container.scrollWidth, container.scrollHeight)
-        }
       }
     },
     initGraphNetwork(data, id) {
@@ -1163,6 +1165,8 @@ export default {
       }
       graph.data(data)
       graph.render()
+      // 让画布内容适应视口
+      graph.fitView()
       // 添加点击事件
       graph.on('node:click', (evt) => {
         const itemData = evt.item._cfg.model
@@ -1191,8 +1195,19 @@ export default {
       })
       let currentLevel = 1
       const briefZoomThreshold = Math.max(graph.getZoom(), 0.5)
+      changeNodeColor()
       graph.on('viewportchange', e => {
         if (e.action !== 'zoom') return
+        changeNodeColor()
+      })
+      if (typeof window !== 'undefined') {
+        window.onresize = () => {
+          if (!graph || graph.get('destroyed')) return
+          if (!container || !container.scrollWidth || !container.scrollHeight) return
+          graph.changeSize(container.scrollWidth, container.scrollHeight)
+        }
+      }
+      function changeNodeColor () {
         const currentZoom = graph.getZoom()
         let toLevel = currentLevel
         if (currentZoom < briefZoomThreshold) {
@@ -1208,13 +1223,6 @@ export default {
             })
           })
         }
-      })
-      if (typeof window !== 'undefined') {
-        window.onresize = () => {
-          if (!graph || graph.get('destroyed')) return
-          if (!container || !container.scrollWidth || !container.scrollHeight) return
-          graph.changeSize(container.scrollWidth, container.scrollHeight)
-        }
       }
     },
     clearGraph() {

src/views/ot-plugins/index.vue

@@ -315,53 +315,7 @@ export default {
           }
         }
       })
-    },
-    /** 提交按钮 */
-    // changeState: function (obj) {
-    //   var stateName = obj.pluginsState == "1" ? "安装" : "卸载";
-    //   this.$confirm(
-    //     "确定" + stateName + "？",
-    //     obj.pluginsState == 1 ? "提示" : "警告",
-    //     {
-    //       confirmButtonText: "确定",
-    //       cancelButtonText: "取消",
-    //       type: obj.pluginsState == "1" ? "" : "warning",
-    //       customClass: "message-delete",
-    //       closeOnClickModal: "false",
-    //     }
-    //   )
-    //     .then(function () {
-    //       return statePlug(obj, obj.ID);
-    //     })
-    //     .then((response) => {
-    //       if (response.code == 200) {
-    //         this.getList();
-    //         // if (obj.pluginsState == "1") {
-    //         //   this.isShowProgress = true;
-    //         //   this.startAnimate(1, 100, 20);
-    //         // } else {
-    //         //   this.msgSuccess(stateName + "成功");
-    //         // }
-    //         this.isShowProgress = true;
-    //         this.startAnimate(1, 100, 24);
-    //         setTimeout(() => {
-    //           this.msgSuccess(stateName + "成功");
-    //         }, 2500);
-    //         setTimeout(() => {
-    //           window.location.reload();
-    //         }, 3000);
-    //       }
-    //     })
-    //     .catch(function () {});
-    //   // statePlug(obj, obj.ID).then((res) => {
-    //   //   if (response.code === 200) {
-    //   //     this.msgSuccess("修改成功");
-    //   //     this.getList();
-    //   //   } else {
-    //   //     this.msgError(response.msg);
-    //   //   }
-    //   // });
-    // },
+    }
   },
 };
 </script>

src/views/service/InterfaceDetail/components/NodeG6Charts.vue

@@ -1,149 +1,148 @@
 <template>
-  <div class="node-chart-content">
-    <div :id="id" />
+  <div class="node-chart-content" style="position: relative;">
+    <div :id="chartContentId" />
   </div>
 </template>
 <script>
 import G6 from '@antv/g6'
 export default {
   props: {
-    id: {
+    chartContentId: {
       type: String,
       default: ''
+    },
+    graphData: {
+      type: Object,
+      default: () => {
+        return {}
+      }
     }
   },
-  data() {
-    return {}
+  watch: {
+    'graphData': {
+      handler(newValue, oldValue) {
+        if (newValue) {
+          this.init(newValue)
+        }
+      },
+      deep: true
+    }
   },
   mounted() {
-    this.init()
+    this.$nextTick(() => {
+      this.init(this.graphData)
+    })
   },
   methods: {
-    init() {
+    init(data) {
       /**
      * by Shiwu
      */
-
-      const data = {
-        nodes: [
-          {
-            id: 'person A',
-            label: 'person A',
-            // the attributes for drawing donut
-            donutAttrs: {
-              'income': 10,
-              'outcome': 20,
-              'unknown': 25
-            }
-          },
-          {
-            id: 'person B',
-            label: 'person B',
-            donutAttrs: {
-              'income': 20,
-              'outcome': 10,
-              'unknown': 5
-            }
-          },
-          {
-            id: 'person C',
-            label: 'person C',
-            donutAttrs: {
-              'income': 200,
-              'outcome': 20,
-              'unknown': 25
-            }
-          },
-          {
-            id: 'person D',
-            label: 'person D',
-            donutAttrs: {
-              'income': 50,
-              'outcome': 10,
-              'unknown': 15
-            }
-          },
-          {
-            id: 'person E',
-            label: 'person E',
-            donutAttrs: {
-              'income': 80,
-              'outcome': 40,
-              'unknown': 45
-            }
-          },
-          {
-            id: 'person F',
-            label: 'person F',
-            donutAttrs: {
-              'income': 90,
-              'outcome': 110,
-              'unknown': 15
-            }
-          }
-        ],
-        edges: [
-          { source: 'person C', target: 'person F', size: 10 },
-          { source: 'person B', target: 'person A', size: 5 },
-          { source: 'person D', target: 'person E', size: 20 },
-          { source: 'person D', target: 'person C', size: 5 },
-          { source: 'person B', target: 'person C', size: 10 },
-          { source: 'person A', target: 'person C', size: 5 }
-        ]
-      }
-
       data.edges.forEach(edge => {
-        edge.label = `Transfer $${edge.size}`
+        edge.label = `${edge.relation}`
       })
 
       const colors = {
-        'income': '#61DDAA',
-        'outcome': '#F08BB4',
-        'unknown': '#65789B'
+        'err': '#F44C4C',
+        'ok': '#53F44C'
       }
-
+      const imgObj = {
+        cpp: require('../../../../assets/G6-icons/cpp.svg'),
+        dotnet: require('../../../../assets/G6-icons/dot-net.svg'),
+        erlang: require('../../../../assets/G6-icons/erlang.svg'),
+        go: require('../../../../assets/G6-icons/go.svg'),
+        java: require('../../../../assets/G6-icons/java.svg'),
+        nodejs: require('../../../../assets/G6-icons/nodejs.svg'),
+        php: require('../../../../assets/G6-icons/php.svg'),
+        python: require('../../../../assets/G6-icons/python.svg'),
+        ruby: require('../../../../assets/G6-icons/ruby.svg'),
+        rust: require('../../../../assets/G6-icons/rust.svg'),
+        swift: require('../../../../assets/G6-icons/swift.svg'),
+        webjs: require('../../../../assets/G6-icons/webjs.svg'),
+        mysql: require('../../../../assets/G6-icons/mysql.svg'),
+        oracle: require('../../../../assets/G6-icons/oracle.svg'),
+        postgresql: require('../../../../assets/G6-icons/postgresql.svg'),
+        hive: require('../../../../assets/G6-icons/hive.svg'),
+        progress: require('../../../../assets/G6-icons/progress.svg'),
+        hsqldb: require('../../../../assets/G6-icons/hsqldb.svg'),
+        kafka: require('../../../../assets/G6-icons/kafka.svg'),
+        rabbitmq: require('../../../../assets/G6-icons/rabbitmq.svg'),
+        rocketmq: require('../../../../assets/G6-icons/rocketmq.svg'),
+        activemq: require('../../../../assets/G6-icons/activemq.svg'),
+        servicebus: require('../../../../assets/G6-icons/serviceBus.svg'),
+        client: require('../../../../assets/G6-icons/client.svg'),
+        aws_sqs: require('../../../../assets/G6-icons/aws.svg'),
+        default: require(`../../../../assets/G6-icons/default.svg`)
+      } 
       data.nodes.forEach(node => {
         node.donutColorMap = colors
         node.size = 0
+        node.label = node.name
+        node.iconType = node.type
+        node.donutAttrs = node.attrs// donutAttrs
         Object.keys(node.donutAttrs).forEach(key => {
-          node.size += node.donutAttrs[key]
+          node.size += Number(node.donutAttrs[key])
         })
-        node.size = Math.sqrt(node.size) * 5
+        node.size = Math.sqrt(node.size) * 60
+        delete node.type
       })
 
       const legendData = {
         nodes: [{
-          id: 'income',
-          label: 'Income',
+          id: 'err',
+          label: 'Err',
           order: 0,
           style: {
-            fill: '#61DDAA'
-          }
-        }, {
-          id: 'outcome',
-          label: 'Outcome',
-          order: 2,
-          style: {
-            fill: '#F08BB4'
+            fill: '#F44C4C'
           }
         }, {
-          id: 'unknown',
-          label: 'Unknown',
+          id: 'ok',
+          label: '0k',
           order: 2,
           style: {
-            fill: '#65789B'
+            fill: '#53F44C'
           }
         }]
       }
+      const tooltip = new G6.Tooltip({
+        // offsetX and offsetY include the padding of the parent container
+        offsetX: 20,
+        offsetY: 30,
+        itemTypes: ['node'],
+        getContent: (e) => {
+          const outDiv = document.createElement('div')
+          // outDiv.style.padding = '0px 0px 20px 0px';
+          const nodeName = e.item.getModel().name
+          const item = e.item.getModel()
+          outDiv.innerHTML = `
+            <div style="margin-bottom:8px box-shadow: rgb(174, 174, 174) 0px 0px 10px;
+              width: fit-content;
+              color: #fff;
+              border-radius = 4px;">
+              <span style='display:inline-block;width:120px;text-align:right;'>Ok：</span>
+              <span style='display:inline-block;'>${item}</span>
+            </div>
+            <div style="margin-bottom:8px">
+              <span style='display:inline-block;width:120px;text-align:right;'>Err：</span>
+              <span style='display:inline-block;'>${item}</span>
+            </div>
+           `
+          return outDiv
+        },
+        shouldBegin: (e) => {
+          if (e.target.get('name') === 'name-shape' || e.target.get('name') === 'mask-label-shape') return true
+          return false
+        }
+      })
       const legend = new G6.Legend({
         data: legendData,
         align: 'center',
         layout: 'horizontal', // vertical
-        position: 'bottom-left',
+        position: 'top-left',
         vertiSep: 12,
         horiSep: 24,
         offsetY: -24,
-        padding: [4, 16, 8, 16],
+        padding: [4, 8, 4, 8],
         containerStyle: {
           fill: '#ccc',
           lineWidth: 1
@@ -154,78 +153,101 @@ export default {
         }
 
       })
-      const container = document.getElementById(this.id)
-      const width = container.scrollWidth
-      console.log('width-----', width)
-      const height = container.scrollHeight || 500
-      const graph = new G6.Graph({
-        container: this.id,
-        width,
-        height,
-        // translate the graph to align the canvas's center, support by v3.5.1
-        fitCenter: true,
-        plugins: [legend],
-        modes: {
-          default: ['drag-canvas', 'drag-node']
-        },
-        layout: {
-          type: 'radial',
-          focusNode: 'li',
-          linkDistance: 200,
-          unitRadius: 200
-        },
-        defaultEdge: {
-          style: {
-            endArrow: true
+      this.$nextTick(() => {
+        const container = document.getElementById('serviceDrawerContainer')
+        const width = container.scrollWidth
+        const height = container.scrollHeight || 500
+        const graph = new G6.Graph({
+          container: 'serviceDrawerContainer',
+          width,
+          height,
+          fitView: data.nodes.length > 2 ? true:false,
+          maxZoom: 8, // 默认值是10
+          minZoom: 0.02, // 默认值是0.02
+          // translate the graph to align the canvas's center, support by v3.5.1
+          fitCenter: true,
+          plugins: [legend],
+          modes: {
+            default: ['drag-canvas', 'drag-node', 'zoom-canvas',
+              {
+                type: 'tooltip', // 提示框
+                // offset:0,
+                formatText(model) {
+                // 提示框文本内容
+                  return `<div  style="background-color: rgba(0,0,0, 0.65);  box-shadow: rgb(174, 174, 174) 0px 0px 10px;
+              width: fit-content;
+              color: #fff;
+              padding: 10px;
+              border-radius:4px;">
+                <div style="margin-bottom:8px">
+                  <span >Ok：</span>
+                  <span>${model.attrs.ok == '0.00000' ? 0 : model.attrs.ok == '1.00000' ? 1 : model.attrs.ok}</span>
+                </div>
+                <div>
+                  <span >Err：</span>
+                  <span>${model.attrs.err == '0.00000'? 0: (model.attrs.err == '1.00000' ? 1 : model.attrs.err)}</span>
+                </div>
+                </div>`
+                }
+              }
+            ] // 启用拖拽画布和缩放画布的交互模式
+          },
+          layout: {
+            type: 'radial',
+            focusNode: 'li',
+            linkDistance: 200,
+            unitRadius: 200,
+            preventOverlap: true, // 防止节点重叠
+            nodeSpacing: 500,
+            // 防碰撞必须设置nodeSize或size,否则不生效，由于节点的size设置了40，虽然节点不碰撞了，但是节点之间的距离很近，label几乎都挤在一起，所以又重新设置了大一点的nodeSize,这样效果会好很多
+            nodeSize: 60,
+            strictRadial:false,
+            linkDistance: data.nodes.length>6? 400 : 200 // 指定边距离为150
           },
-          labelCfg: {
-            autoRotate: true,
+          defaultEdge: {
             style: {
-              stroke: '#fff',
-              lineWidth: 5
+              endArrow: true
+            },
+            labelCfg: { // 标签文本配置项
+              autoRotate: true,
+              style: {
+                stroke: '#fff',
+                lineWidth: 5
+              }
             }
-          }
-        },
-        defaultNode: {
-          type: 'donut',
-          style: {
-            lineWidth: 0
           },
-          labelCfg: {
-            position: 'bottom'
-          },
-          icon: {
-            /* whether show the icon, false by default */
-            show: true
-            /* icon's img address, string type */
-            // img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-            /* icon's size, 20 * 20 by default: */
-            //   width: 40,
-            //   height: 40
+          defaultNode: {
+            type: 'donut',
+            style: {
+              lineWidth: 0,
+              cursor: 'pointer'
+            },
+            labelCfg: {
+              position: 'bottom',
+              autoRotate: true,
+            }
           }
-        }
-      })
-
-      graph.data(data)
-      graph.render()
-
-      graph.on('node:mouseenter', (evt) => {
-        const { item } = evt
-        graph.setItemState(item, 'active', true)
-      })
-
-      graph.on('node:mouseleave', (evt) => {
-        const { item } = evt
-        graph.setItemState(item, 'active', false)
-      })
+        })
+        // 节点配置中使用
+        graph.node((node) => {
+          return {
+            icon: {
+              show: true,
+              // 使用函数动态指定图标路径 imgObj[node.iconType] || imgObj.default
+              img: imgObj[node.iconType] || imgObj.default
+            }
+          };
+        });
+        graph.data(data)
+        graph.render()
+        graph.on('node:mouseenter', (evt) => {
+          const { item } = evt
+          graph.setItemState(item, 'active', true)
+        })
 
-      graph.on('node:click', (evt) => {
-        const { item } = evt
-        graph.setItemState(item, 'selected', true)
-      })
-      graph.on('canvas:click', (evt) => {
-        graph.getNodes().forEach((node) => {
-          graph.clearItemStates(node)
+        graph.on('node:mouseleave', (evt) => {
+          const { item } = evt
+          graph.setItemState(item, 'active', false)
         })
       })
     }

src/views/service/InterfaceDetail/components/ServiceDrawer.vue

@@ -93,38 +93,47 @@
             small
             :page.sync="queryParams.pageIndex"
             :limit.sync="queryParams.pageSize"
-            @pagination="getList"
+            @pagination="getList('created')"
           />
         </div>
         <div class="ob-serDrawer-right">
           <div class="ob-chart-box">
-            <el-switch
-              v-model="switchValue"
-              active-color="#165DFF"
-              inactive-color="#C9CDD4"
-            />
+            <div class="ob-switch-box">
+              <el-switch
+                v-model="switchValue"
+                active-color="#165DFF"
+                inactive-color="#C9CDD4"
+                @change="handelSwitch"
+              />
+            </div>
             <div v-if="switchValue">
-              <div v-if="JSON.stringify(graphData)!=&quot;{}&quot;">
+              <div v-if="graphData && Object.keys(graphData).length > 0 ">
                 <Topo v-if="graphLoading" ref="topo" :graph-data="graphData" topo-id="serviceDrawerContainer" @changeState="clickRowHandleNode" />
               </div>
             </div>
-            <!-- <NodeG6Charts v-else :id="'serviceDrawerContainer'" /> -->
+            <div v-if="!switchValue" style="position:relative;height: 100%;">
+              <div v-if="isLoading" v-loading="isLoading" class="loading-overlay"></div>
+              <div v-else>
+                <NodeG6Charts v-if="sweetGraphData && Object.keys(sweetGraphData).length > 0" :chart-content-id="'serviceDrawerContainer'" :graph-data="sweetGraphData" />
+              </div>
+            </div>
           </div>
           <div class="flex-right">
             <div style="text-align: right; padding-right:10px;">
               <el-checkbox v-model="checked" style="margin-bottom:10px" @change="handelCheckChange(checked)">Duration > 2500ms</el-checkbox>
               <el-checkbox v-model="onlyException" style="margin-bottom:10px" @change="handelChange()">仅异常</el-checkbox>
             </div>
+            <!-- 右侧table -->
             <el-table
               v-loading="tableLoading"
               :data="rowData"
               @sort-change="sortChangeTable"
               @row-click="handleClickRightTable"
             >
-              <el-table-column header-align="center" label="TraceID" prop="trace_id" align="center" width="240" />
+              <el-table-column header-align="center" label="TraceID" prop="trace_id" align="center" />
               <el-table-column header-align="center" label="SpanName" prop="span_name" align="center" :show-overflow-tooltip="true" />
               <el-table-column header-align="center" label="DateTime" sortable="custom" prop="datetime" align="center" :show-overflow-tooltip="true" />
-              <el-table-column header-align="center" label="Duration(ms)" sortable="custom" prop="duration" width="140" align="center">
+              <el-table-column header-align="center" label="Duration(ms)" sortable="custom" prop="duration"  align="center">
                 <template slot-scope="scope">
                   <el-tag v-if="scope.row.duration>=2000" type="danger">{{ scope.row.duration }}</el-tag>
                   <el-tag v-if="scope.row.duration<2000" type="info">{{ scope.row.duration }}</el-tag>
@@ -144,24 +153,26 @@
       </div>
       <LinkDetailsDrawer v-if="isShowLinkDrawer" :is-opendrawer="isShowLinkDrawer" :tract-i-d="tractID" :span-i-d="spanID" @handleClose="closeLinkDrawer" />
       <!-- 添加或修改应用配置对话框 -->
-      <el-dialog v-if="open" :append-to-body="true" :title="title" :visible.sync="open" width="600px" :center="true" :close-on-click-modal="false">
-        <el-form ref="form" :model="form" label-width="95px">
-          <el-form-item label="中文别名" prop="name">
-            <el-input v-model="form.name" placeholder="请输入中文别名" />
-          </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </el-dialog>
+      <div v-if="open">
+        <el-dialog :append-to-body="true" :title="'修改业务别名'" :visible.sync="open" width="600px" :center="true" :close-on-click-modal="false">
+          <el-form ref="form" :model="form" label-width="95px">
+            <el-form-item label="中文别名" prop="name">
+              <el-input v-model="form.name" placeholder="请输入中文别名" />
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="submitForm">确 定</el-button>
+            <el-button @click="cancel">取 消</el-button>
+          </div>
+        </el-dialog>
+      </div>
       <!-- 点击节点后出现的 右侧抽屉 -->
       <NodeDetailDrawer v-if="nodeDrawerShow" :node-drawer-show="nodeDrawerShow" :detail-data="detailData" :span-id="spanId" :query-name="queryName" :span-type="spanType" @drawerClose="drawerClose" />
     </el-drawer>
   </div>
 </template>
 <script>
-import { listBiz, addUrlMapping, updateBiz, getBizDetail, listBizGraph } from '@/api/mapping'
+import { listBiz, addUrlMapping, updateBiz, getBizDetail, listBizGraph, getSweetList } from '@/api/mapping'
 import Topo from '../../../business-analysis/analysisDetail/components/Topo.vue'
 import storage from '@/utils/storage'
 import LinkDetailsDrawer from './LinkDetailsDrawer.vue'
@@ -204,7 +215,7 @@ export default {
       childQueryParams: {
         start_time: 0,
         end_time: 0,
-        biz_id: 1,
+        biz_id: 0,
         pageIndex: 1,
         pageSize: 10,
         sort_type: 'DESC',
@@ -215,6 +226,7 @@ export default {
       checked: false,
       onlyException: false,
       graphData: {},
+      sweetGraphData: {},
       graphLoading: false,
       isShowLinkDrawer: false,
       tractID: '',
@@ -230,7 +242,13 @@ export default {
       detailData: {},
       nodeSpansList: [],
       spanId: 0,
-      switchValue: true
+      switchValue: false,
+      sweetquanParams: {
+        biz_id: 0,
+        start_time: '',
+        end_time: ''
+      },
+      isLoading: false
     }
   },
   watch: {
@@ -245,12 +263,17 @@ export default {
           this.childQueryParams.end_time = newValue.endTime
           this.queryStats.start_time = newValue.startTime
           this.queryStats.end_time = newValue.endTime
+          this.sweetquanParams.start_time = newValue.startTime
+          this.sweetquanParams.end_time = newValue.endTime
 
-          this.getList()
           this.serveceMapList = []
-          this.getListBizGraph(this.childQueryParams.biz_id) // 获取右侧关系拓扑图数据
-          this.getList()
+          this.getList() // 左侧table数据
           this.handelgetBizDetail() // 获取右侧 table 数据
+          if (this.switchValue) {
+            this.getListBizGraph(this.childQueryParams.biz_id) // 获取右侧关系拓扑图数据
+          } else {
+            this.getSweetListFn()
+          }
         }
       },
       deep: true
@@ -280,11 +303,15 @@ export default {
 
       this.queryStats.start_time = start_time
       this.queryStats.end_time = end_time
+
+      this.sweetquanParams.start_time = start_time
+      this.sweetquanParams.end_time = end_time
       this.getList('created')
     }
   },
   beforeDestroy() {
     this.graphData = {}
+    this.sweetGraphData = {}
   },
   methods: {
     handleClose() {
@@ -294,8 +321,6 @@ export default {
       this.reset()
       this.form.name = row.name
       this.form.id = row.id
-      this.title = '修改业务别名'
-      this.isEdit = true
       this.open = true
     },
     // 表单重置
@@ -315,13 +340,18 @@ export default {
     handleRowClick(row, column, event) {
       storage.set('detailObj', row)
       this.childQueryParams.biz_id = row.id
+      this.sweetquanParams.biz_id = row.id
       const start_time = this.$store.state.time.globalTimes.startTime
       const end_time = this.$store.state.time.globalTimes.endTime
       this.childQueryParams.start_time = start_time
       this.childQueryParams.end_time = end_time
       this.childQueryParams.end_time = end_time
       this.handelgetBizDetail()
-      this.getListBizGraph(row.id)
+      if (this.switchValue) {
+        this.getListBizGraph(row.id) // 获取右侧关系拓扑图数据
+      } else {
+        this.getSweetListFn()
+      }
     },
     // 获取左侧table 数据
     getList(type) {
@@ -338,7 +368,12 @@ export default {
             if (type === 'created') {
               this.$refs.tableRef.setCurrentRow(this.serveceMapList[0])
               this.childQueryParams.biz_id = res.data.list[0].id
-              this.getListBizGraph(res.data.list[0].id)
+              this.sweetquanParams.biz_id = res.data.list[0].id
+              if (this.switchValue) {
+                this.getListBizGraph(res.data.list[0].id) // 获取右侧关系拓扑图数据
+              } else {
+                this.getSweetListFn()
+              }
               this.handelgetBizDetail()
             }
           }
@@ -451,10 +486,10 @@ export default {
       if (item) {
         this.detailData = {}
         this.detailData = item
-        this.queryStats.id = Number(item.id)
-        this.queryName.id = Number(item.id)
+        this.queryStats.id = Number(item.unique_id)
+        this.queryName.id = Number(item.unique_id)
         this.queryName.name = item.name
-        this.spanId = Number(item.id)
+        this.spanId = Number(item.unique_id)
         this.spanType = item.span_type
       }
     },
@@ -462,6 +497,7 @@ export default {
     handleCurrentChange(currentRow, oldCurrentRow) {
       if (currentRow) {
         this.childQueryParams.biz_id = currentRow.id // 获取右侧table 的参数
+        this.sweetquanParams.biz_id = currentRow.id
       }
     },
     handleClickRightTable(row) {
@@ -476,6 +512,24 @@ export default {
     drawerClose() {
       this.nodeDrawerShow = false
       this.getListBizGraph(this.childQueryParams.biz_id)
+    },
+    handelSwitch() {
+      if (this.switchValue) {
+        this.getListBizGraph(this.childQueryParams.biz_id) // 获取右侧关系拓扑图数据
+      } else {
+        this.getSweetListFn()
+      }
+    },
+    async getSweetListFn() {
+      this.isLoading = true
+      this.sweetGraphData = {}
+      const res = await getSweetList(this.sweetquanParams)
+      if (res && res.code === 200) {
+        this.sweetGraphData = res.data
+      } else {
+        this.sweetGraphData = {}
+      }
+      this.isLoading = false
     }
   }
 }
@@ -523,12 +577,23 @@ export default {
 }
 .ob-chart-box{
   width:100%;
-  min-height: 600px;
+  min-height: 400px;
   max-height: 1000px;
   #serviceDrawerContainer{
     width: 100%;
     height:100%;
 
   }
+  .ob-switch-box{
+    text-align: right;
+    width: 100%;
+  }
+  ::v-deep.g6-legend-container{
+    position: sticky !important;
+  }
+}
+.loading-overlay  ::v-deep.el-loading-spinner{
+  top:180px !important;
 }
+
 </style>

src/views/service/InterfaceDetail/index.vue

@@ -211,7 +211,7 @@ export default {
       if (this.baseInfoObj.service_name_cn === this.baseInfoObj.service_name) {
         return this.baseInfoObj.service_name
       } else {
-        return this.baseInfoObj.service_name_cn + '(' + this.baseInfoObj.service_name + ')'
+        return this.baseInfoObj.service_name_cn? (this.baseInfoObj.service_name_cn + '(' + this.baseInfoObj.service_name + ')') : this.baseInfoObj.service_name
       }
     }
   },

src/views/service/service/components/TopoNew1.vue

@@ -33,7 +33,7 @@ insertCss(`
     box-shadow: rgb(174, 174, 174) 0px 0px 10px;
     width: fit-content;
     color: #fff;
-    border-radius = 4px;
+    border-radius:4px;
   }
 `);
 

vue.config.js

@@ -40,7 +40,7 @@ module.exports = {
     },
     proxy: {
       '/re': {
-        target: 'http://observe-server.cestong.com.cn',// 目标服务器地址
+        target: 'http://observe-server.cestong.com.cn', // 目标服务器地址
         changeOrigin: true, // 是否改变源地址
         pathRewrite: {
           '^/re': ''// 重写路径
@@ -52,6 +52,13 @@ module.exports = {
         pathRewrite: {
           '^/app': ''// 重写路径
         }
+      },
+      '/core': {
+        target: 'http://observe-front.cestong.com.cn/core',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/core': ''// 重写路径
+        }
       }
     }
   },