diff --git a/src/mock/linkMonitor.js b/src/mock/linkMonitor.js
index 93d53c24..02131d11 100644
--- a/src/mock/linkMonitor.js
+++ b/src/mock/linkMonitor.js
@@ -146,4 +146,34 @@ if (openMock) {
       }
     }
   })
+
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/analysis1.*'), 'get', function (requestObj) {
+    const linkData = []
+    for (let i = 0; i < 10; i++) {
+      linkData.push({ linkId: 'Hundredgige' + (i + 1), egressBytes: Math.floor(Math.pow(1.3, i) * 1000000000), ingressBytes: Math.floor(Math.pow(1.5, i) * 1000000000) })
+    }
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: linkData
+      }
+    }
+  })
+
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/nextHopAnalysis1.*'), 'get', function (requestObj) {
+    const linkData = [
+      { linkDirection: '西安', egressBytes: 1024000000000, ingressBytes: 1224000000000 },
+      { linkDirection: '太原', egressBytes: 102400000000, ingressBytes: 142400000000 },
+      { linkDirection: '西宁', egressBytes: 1024000000, ingressBytes: 1024000000 }
+    ]
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: linkData
+      }
+    }
+  })
 }
diff --git a/src/utils/api.js b/src/utils/api.js
index b9a2b6d2..67c6ef57 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -206,8 +206,13 @@ export const api = {
     quadrupleEgressAnalysis: '/interface/link/overview/quadrupleEgressAnalysis', // 出口
     bigramAnalysis: '/interface/link/overview/bigramAnalysis',
     bigramNextHopAnalysis: '/interface/link/overview/bigramNextHopAnalysis',
+    analysis: '/interface/link/overview/analysis',
+    nextHopAnalysis: '/interface/link/overview/nextHopAnalysis',
+    // todo 以下几个接口因接口返回数据为空，故造模拟接口平替
     bigramAnalysis1: 'interface/linkMonitor/bigramAnalysis1',
-    bigramNextHopAnalysis1: '/interface/linkMonitor/bigramNextHopAnalysis1'
+    bigramNextHopAnalysis1: '/interface/linkMonitor/bigramNextHopAnalysis1',
+    analysis1: '/interface/linkMonitor/analysis1',
+    nextHopAnalysis1: '/interface/linkMonitor/nextHopAnalysis1'
   },
   dnsInsight: {
     recentEvents: '/interface/dnsInsight/recentEvents',
diff --git a/src/views/charts2/charts/linkMonitor/LinkBlock.vue b/src/views/charts2/charts/linkMonitor/LinkBlock.vue
index 5cd15e1e..85c9020c 100644
--- a/src/views/charts2/charts/linkMonitor/LinkBlock.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkBlock.vue
@@ -1,55 +1,55 @@
 <template>
   <div class="link-blocks">
-<!--<el-tabs v-model="tab">
-      <el-tab-pane :label="$t('linkMonitor.links')" :name="0"></el-tab-pane>
-      <el-tab-pane :label="$t('linkMonitor.nextHopInternet')" :name="1"></el-tab-pane>
-    </el-tabs>
-    <div class="block-list">
-      <el-popover
-          placement="bottom"
-          trigger="hover"
-          popper-class="link-block__popper"
-          v-for="(item, index) in linkData"
-          :width="220"
-          :key="index"
-      >
-        <template #reference>
-          <div class="link-block" :style="`background-color: ${item.color}`"></div>
-        </template>
-        <template #default>
-          <div class="popper-content">
-            <div class="popper-content__link-id">Link ID: {{item.linkId}}</div>
-            <div class="popper-content__link-info">
-              <div class="info__label">{{$t('linkMonitor.linkBlock.total')}}</div>
-              <div class="info__value">{{unitConvert(item.totalBitsRate, unitTypes.bps).join('')}}</div>
-            </div>
-            <div class="popper-content__link-info">
-              <div class="info__label">{{$t('linkMonitor.linkBlock.bandwidthUsage')}}</div>
-              <div class="info__value">50%</div>
-            </div>
-          </div>
-        </template>
-      </el-popover>
-    </div>
-    <div class="block-heat-legend">
-      <div class="legend__box">
-        <div class="legend__value">
-          <span>0</span>
-          <span>90%</span>
+    <!--<el-tabs v-model="tab">
+          <el-tab-pane :label="$t('linkMonitor.links')" :name="0"></el-tab-pane>
+          <el-tab-pane :label="$t('linkMonitor.nextHopInternet')" :name="1"></el-tab-pane>
+        </el-tabs>
+        <div class="block-list">
+          <el-popover
+              placement="bottom"
+              trigger="hover"
+              popper-class="link-block__popper"
+              v-for="(item, index) in linkData"
+              :width="220"
+              :key="index"
+          >
+            <template #reference>
+              <div class="link-block" :style="`background-color: ${item.color}`"></div>
+            </template>
+            <template #default>
+              <div class="popper-content">
+                <div class="popper-content__link-id">Link ID: {{item.linkId}}</div>
+                <div class="popper-content__link-info">
+                  <div class="info__label">{{$t('linkMonitor.linkBlock.total')}}</div>
+                  <div class="info__value">{{unitConvert(item.totalBitsRate, unitTypes.bps).join('')}}</div>
+                </div>
+                <div class="popper-content__link-info">
+                  <div class="info__label">{{$t('linkMonitor.linkBlock.bandwidthUsage')}}</div>
+                  <div class="info__value">50%</div>
+                </div>
+              </div>
+            </template>
+          </el-popover>
         </div>
-        <div class="legend__color-piece"></div>
-        <div class="legend__desc">{{$t('linkMonitor.linkBlock.bandwidthUsage')}}</div>
-      </div>
-    </div> -->
+        <div class="block-heat-legend">
+          <div class="legend__box">
+            <div class="legend__value">
+              <span>0</span>
+              <span>90%</span>
+            </div>
+            <div class="legend__color-piece"></div>
+            <div class="legend__desc">{{$t('linkMonitor.linkBlock.bandwidthUsage')}}</div>
+          </div>
+        </div> -->
     <div class="block-list">
-      <div class="block-list__title">{{$t('linkMonitor.links')}}</div>
+      <div class="block-list__title">{{ $t('linkMonitor.links') }}</div>
       <div class="block-list__list">
         <el-popover
             placement="bottom"
             trigger="hover"
             popper-class="link-block__popper"
             v-for="(item, index) in linkData"
-            :width="220"
+            :width="285"
             :key="index"
         >
           <template #reference>
@@ -61,29 +61,46 @@
           </template>
           <template #default>
             <div class="popper-content">
-              <div class="popper-content__link-id">Link ID: {{item.linkId}}</div>
+              <div class="popper-content__link-id">Link ID: {{ item.linkId }}</div>
               <div class="popper-content__link-info">
-                <div class="info__label">{{$t('linkMonitor.linkBlock.total')}}</div>
-                <div class="info__value">{{unitConvert(item.totalBitsRate, unitTypes.bps).join('')}}</div>
+                <div class="info__label">{{ $t('linkMonitor.linkBlock.total') }}</div>
+                <div class="info__value" style="margin-left: 8px">
+                  {{ unitConvert(item.totalBitsRate, unitTypes.bps).join('') }}
+                </div>
               </div>
               <div class="popper-content__link-info">
-                <div class="info__label">{{$t('linkMonitor.linkBlock.bandwidthUsage')}}</div>
-                <div class="info__value">50%</div>
+                <div class="info__label">{{ $t('linkMonitor.linkBlock.bandwidthUsage') }}</div>
+                <div class="info__value" style="display: flex">
+                  <div>
+                    <svg class="icon item-popover-up" aria-hidden="true">
+                      <use xlink:href="#cn-icon-egress"></use>
+                    </svg>
+                    {{ unitConvert(item.egressUsage, unitTypes.percent).join('') }}
+                  </div>
+                  <div>
+                    <svg class="icon item-popover-down" aria-hidden="true">
+                      <use xlink:href="#cn-icon-ingress"></use>
+                    </svg>
+                    {{ unitConvert(item.ingressUsage, unitTypes.percent).join('') }}
+                  </div>
+                </div>
               </div>
             </div>
           </template>
         </el-popover>
       </div>
     </div>
+
     <div class="block-list">
-      <div class="block-list__title">{{$t('linkMonitor.nextHopInternet')}}</div>
+      <!--todo  此处应将linkid改成nextHop显示-->
+      <div class="block-list__title">{{ $t('linkMonitor.nextHopInternet') }}</div>
       <div class="block-list__list">
         <el-popover
             placement="bottom"
             trigger="hover"
             popper-class="link-block__popper"
-            v-for="(item, index) in linkData"
-            :width="220"
+            v-for="(item, index) in nextHopData"
+            :width="285"
             :key="index"
         >
           <template #reference>
@@ -95,14 +112,29 @@
           </template>
           <template #default>
             <div class="popper-content">
-              <div class="popper-content__link-id">Link ID: {{item.linkId}}</div>
+              <div class="popper-content__link-id">Link ID: {{ item.linkDirection }}</div>
               <div class="popper-content__link-info">
-                <div class="info__label">{{$t('linkMonitor.linkBlock.total')}}</div>
-                <div class="info__value">{{unitConvert(item.totalBitsRate, unitTypes.bps).join('')}}</div>
+                <div class="info__label">{{ $t('linkMonitor.linkBlock.total') }}</div>
+                <div class="info__value" style="margin-left: 8px">
+                  {{ unitConvert(item.totalBitsRate, unitTypes.bps).join('') }}
+                </div>
               </div>
               <div class="popper-content__link-info">
-                <div class="info__label">{{$t('linkMonitor.linkBlock.bandwidthUsage')}}</div>
-                <div class="info__value">50%</div>
+                <div class="info__label">{{ $t('linkMonitor.linkBlock.bandwidthUsage') }}</div>
+                <div class="info__value" style="display: flex">
+                  <div>
+                    <svg class="icon item-popover-up" aria-hidden="true">
+                      <use xlink:href="#cn-icon-egress"></use>
+                    </svg>
+                    {{ unitConvert(item.egressUsage, unitTypes.percent).join('') }}
+                  </div>
+                  <div>
+                    <svg class="icon item-popover-down" aria-hidden="true">
+                      <use xlink:href="#cn-icon-ingress"></use>
+                    </svg>
+                    {{ unitConvert(item.ingressUsage, unitTypes.percent).join('') }}
+                  </div>
+                </div>
               </div>
             </div>
           </template>
@@ -121,7 +153,8 @@ import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { colorGradientCalculation } from '@/utils/tools'
 import unitConvert from '@/utils/unit-convert'
-import { unitTypes } from '@/utils/constants'
+import { storageKey, unitTypes } from '@/utils/constants'
+import { getSecond } from '@/utils/date-util'
 
 export default {
   name: 'LinkBlock',
@@ -133,7 +166,9 @@ export default {
     return {
       unitTypes,
       linkData: [],
-      gradientColor: ['#FF005C', '#40537E'] // [start, end]
+      nextHopData: [],
+      gradientColor: ['#FF005C', '#40537E'], // [start, end]
+      gradientColor1: ['#793973', '#654277', '#40537E'] // [start, end]
     }
   },
   setup () {
@@ -143,6 +178,14 @@ export default {
       tab
     }
   },
+  watch: {
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.init()
+      }
+    }
+  },
   mounted () {
     this.init()
   },
@@ -150,18 +193,73 @@ export default {
     unitConvert,
     init () {
       this.toggleLoading(true)
-      get(api.linkMonitor.links).then(res => {
-        if (res.code === 200) {
-          this.isNoData = res.data.result.length === 0
+      // 链路基本信息
+      let linkInfo = localStorage.getItem(storageKey.linkInfo)
+      linkInfo = JSON.parse(linkInfo)
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime)
+      }
+
+      const dataRequest = get(api.linkMonitor.analysis1, params)
+      const nextHopRequest = get(api.linkMonitor.nextHopAnalysis1, params)
+
+      Promise.all([dataRequest, nextHopRequest]).then(res => {
+        if (res[0].code === 200 && res[1].code === 200) {
+          const data = res[0].data.result
+          const nextHopData = res[1].data.result
+          this.isNoData = data.length === 0
           if (this.isNoData) {
             return
           }
-          const sorted = res.data.result.sort((a, b) => b.totalBitsRate - a.totalBitsRate)
+
+          data.forEach((item) => {
+            item.totalBitsRate = item.egressBytes + item.ingressBytes
+          })
+
+          nextHopData.forEach((item) => {
+            item.totalBitsRate = item.egressBytes + item.ingressBytes
+          })
+
+          const sorted = data.sort((a, b) => b.totalBitsRate - a.totalBitsRate)
           const colors = colorGradientCalculation(this.gradientColor[0], this.gradientColor[1], sorted.map(s => s.totalBitsRate))
           sorted.forEach((s, i) => {
             s.color = colors[i]
+
+            const ingressLink = linkInfo.find(l => l.linkId === s.linkId && l.direction === 'ingress')
+            const egressLink = linkInfo.find(l => l.linkId === s.linkId && l.direction === 'egress')
+            if (ingressLink && egressLink) {
+              // 上行使用情况计算
+              const egressUsage = this.computeUsage(s.egressBytes, egressLink.bandwidth)
+              // 下行使用情况计算
+              const ingressUsage = this.computeUsage(s.ingressBytes, ingressLink.bandwidth)
+              s.egressUsage = egressUsage
+              s.ingressUsage = ingressUsage
+            }
           })
           this.linkData = sorted
+
+          const nextHopSorted = nextHopData.sort((a, b) => b.totalBitsRate - a.totalBitsRate)
+
+          nextHopSorted.forEach((s, i) => {
+            s.color = this.gradientColor1[i]
+
+            let sum = 0
+            linkInfo.forEach((item) => {
+              if (s.linkDirection === item.nextHop) {
+                sum += item.bandwidth
+              }
+            })
+
+            // 上行使用情况计算
+            const egressUsage = this.computeUsage(s.egressBytes, sum)
+            // 下行使用情况计算
+            const ingressUsage = this.computeUsage(s.ingressBytes, sum)
+            s.egressUsage = egressUsage
+            s.ingressUsage = ingressUsage
+          })
+
+          this.nextHopData = nextHopSorted
         } else {
           this.isNoData = true
         }
@@ -171,6 +269,16 @@ export default {
       }).finally(() => {
         this.toggleLoading(false)
       })
+    },
+    /**
+     * 计算上下行使用占比
+     */
+    computeUsage (e, bandwidth) {
+      let usage = e / bandwidth
+      if (usage >= 1) {
+        usage = 1
+      }
+      return usage
     }
   }
 }
diff --git a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
index 98a4d983..f41fabf3 100644
--- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
@@ -62,7 +62,6 @@ export default {
           const linkData = res[0].data.result
           // 链路下一跳信息
           const nextLinkData = res[1].data.result
-          console.log('接口的下一跳数据', nextLinkData)
 
           // 链路流量数据
           const gridData = []
@@ -77,7 +76,7 @@ export default {
               // 上行使用情况计算
               const egressUsage = this.computeUsage(d.egressBytes, egressLink.bandwidth)
               // 下行使用情况计算
-              const ingressUsage = this.computeUsage(d.ingressBytes, egressLink.bandwidth)
+              const ingressUsage = this.computeUsage(d.ingressBytes, ingressLink.bandwidth)
               // 宽带使用超过90%，赋红点
               d.usageMore90 = false
               if (egressUsage >= 0.9 || ingressUsage >= 0.9) {
@@ -116,7 +115,7 @@ export default {
               }
             }
           })
-          console.log('左侧出入链路数据', gridData)
+
           this.gridData = gridData
 
           nextLinkData.forEach(d => {
@@ -182,7 +181,6 @@ export default {
               }
             }
           })
-          console.log('右侧下一跳数据', gridData2)
           this.gridData2 = gridData2
         }
       })
diff --git a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
index 92b5bae6..09aad277 100644
--- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
@@ -55,14 +55,12 @@
                           <svg class="icon item-popover-up" aria-hidden="true">
                             <use xlink:href="#cn-icon-egress"></use>
                           </svg>
-<!--                          {{ row.egress[index2].egressUsage }}%-->
                           {{ unitConvert(row.egress[index2].egressUsage, unitTypes.percent).join('') }}
                         </div>
                         <div>
                           <svg class="icon item-popover-down" aria-hidden="true">
                             <use xlink:href="#cn-icon-ingress"></use>
                           </svg>
-<!--                          {{ row.egress[index2].ingressUsage }}%-->
                           {{ unitConvert(row.egress[index2].ingressUsage, unitTypes.percent).join('') }}
                         </div>
                       </div>