Merge branch 'cherry-pick-2c703306' into 'dev-24.04'

fix: 修复双向链路配置下，链路下钻后id不对的问题

See merge request cyber-narrator/cn-ui!81

src/components/layout/Header.vue

@@ -466,6 +466,15 @@ export default {
   },
   setup () {
     const { query } = useRoute()
+    const newQuery = query
+    // 重刷界面后url里参数带空格的部分会被转为+，此处将+再转为空格。后续观察是否存在原本参数带+被误转的
+    Object.keys(newQuery).forEach(item => {
+      if (newQuery[item] && newQuery[item].indexOf('+') > -1) {
+        newQuery[item] = newQuery[item].replaceAll('+', ' ')
+      }
+    })
+    const newUrl = urlParamsHandler(window.location.href, query, newQuery)
+    overwriteUrl(newUrl)
     // 获取url携带的range、startTime、endTime
     const rangeParam = query.range
     const startTimeParam = query.startTime

src/views/charts2/charts/linkMonitor/LinkBlock.vue

@@ -64,6 +64,7 @@
       <div class="block-list__list" v-show="!nextHopNoData" v-else>
         <el-popover
             placement="bottom"
+            effect="dark"
             trigger="hover"
             popper-class="link-block__popper"
             v-for="(item, index) in nextHopData"
@@ -236,12 +237,26 @@ export default {
                 }
               })
               this.linkNoData = data.length === 0
-              data.forEach(item => {
-                item.totalBitsRate = item.outBitsRate + item.inBitsRate
-                linkConfig.filter(info => info.interfaceName === item.interfaceName).forEach(info => {
-                  item.linkId = info.linkId
+              if (!isTwoWay) {
+                data.forEach(item => {
+                  item.totalBitsRate = item.outBitsRate + item.inBitsRate
+                  linkConfig.filter(info => info.interfaceName === item.interfaceName).forEach(info => {
+                    item.linkId = info.linkId
+                  })
                 })
-              })
+              } else {
+                data.forEach(item => {
+                  item.totalBitsRate = item.outBitsRate + item.inBitsRate
+                  item.isTwoWay = true
+                  linkConfig.filter(info => info.interfaceName === item.interfaceName).forEach(info => {
+                    if (info.direction === 0) {
+                      item.outLinkId = info.linkId
+                    } else if (info.direction === 1) {
+                      item.inLinkId = info.linkId
+                    }
+                  })
+                })
+              }
 
               const sorted = data.sort((a, b) => b.totalBitsRate - a.totalBitsRate)
               const linkColors = colorGradientCalculation(this.gradientColor[0], this.gradientColor[1], sorted.map(s => s.totalBitsRate))
@@ -383,7 +398,9 @@ export default {
       return width
     },
     drillLinkId (item) {
-      const queryCondition = `out_link_id = ${item.linkId} or in_link_id = ${item.linkId}`
+      const queryCondition = item.isTwoWay
+        ? `out_link_id = ${item.outLinkId} or in_link_id = ${item.inLinkId}`
+        : `out_link_id = ${item.linkId} or in_link_id = ${item.linkId}`
       beforeRouterPush()
       this.$router.push({
         query: {

src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue

@@ -161,6 +161,7 @@ export default {
         if (condition.length > 1) {
           params.outParam = condition.find(c => c.indexOf('out_link_id') > -1 || c.indexOf('out_link_direction') > -1)
           params.inParam = condition.find(c => c.indexOf('in_link_id') > -1 || c.indexOf('in_link_direction') > -1)
+          params.q = this.queryCondition
         }
       }
       this.loading = true

src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue

@@ -25,15 +25,15 @@
       </div>
       <div class="link-traffic-list-center">
         <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.tcpConnectionEstablishLatency')}}</div>
-        <div class="link-traffic-list-center-value" test-id="line-tcp">{{valueToRangeValue(Math.floor(linkTrafficListData.establishLatencyMs), unitTypes.time).join('')}}</div>
+        <div class="link-traffic-list-center-value" test-id="line-tcp">{{valueToRangeValue(linkTrafficListData.establishLatencyMs === null ? null : Math.floor(linkTrafficListData.establishLatencyMs), unitTypes.time).join('')}}</div>
       </div>
       <div class="link-traffic-list-center">
         <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.httpResponse')}}</div>
-        <div class="link-traffic-list-center-value" test-id="line-http">{{valueToRangeValue(Math.floor(linkTrafficListData.httpResponseLatency), unitTypes.time).join('')}}</div>
+        <div class="link-traffic-list-center-value" test-id="line-http">{{valueToRangeValue(linkTrafficListData.httpResponseLatency === null ? null : Math.floor(linkTrafficListData.httpResponseLatency), unitTypes.time).join('')}}</div>
       </div>
       <div class="link-traffic-list-center">
         <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.sslResponseLatency')}}</div>
-        <div class="link-traffic-list-center-value" test-id="line-ssl">{{valueToRangeValue(Math.floor(linkTrafficListData.sslConLatency), unitTypes.time).join('')}}</div>
+        <div class="link-traffic-list-center-value" test-id="line-ssl">{{valueToRangeValue(linkTrafficListData.sslConLatency === null ? null : Math.floor(linkTrafficListData.sslConLatency), unitTypes.time).join('')}}</div>
       </div>
       <div class="link-traffic-list-center">
         <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.packetLoss')}}</div>
@@ -126,9 +126,9 @@ export default {
       if (this.queryCondition) {
         const condition = this.queryCondition.split(' or ')
         if (condition.length > 1) {
-          // params.outParam = true
           params.outParam = condition.find(c => c.indexOf('out_link_id') > -1 || c.indexOf('out_link_direction') > -1)
           params.inParam = condition.find(c => c.indexOf('in_link_id') > -1 || c.indexOf('in_link_direction') > -1)
+          params.q = this.queryCondition
           let bandwidthAll = 0
           let inLinkId = null
           let outLinkId = null