diff --git a/src/assets/css/components/components/layout/layout.scss b/src/assets/css/components/components/layout/layout.scss
index c4242e5a..ea4faafd 100644
--- a/src/assets/css/components/components/layout/layout.scss
+++ b/src/assets/css/components/components/layout/layout.scss
@@ -109,6 +109,9 @@
             border:1px solid #C5C5C5 !important;
             box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
             border-radius: 2px !important;
+            .el-row {
+              width: 100% !important;
+            }
             .selected {
               color: #0091ff;
               font-weight: bold;
diff --git a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
index c93a5751..79132709 100644
--- a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
+++ b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
@@ -63,122 +63,116 @@
       }
     }
   }
-  .npm-app-right {
-    width: calc(100% - 500px);
-    height: 100%;
+  .app-table.el-table {
     border: 1px solid #E2E5EC;
-    border-radius: 4px;
-    padding: 1px;
-    .app-table.el-table {
-      .el-table__header-wrapper {
-        tr th {
-          padding: 5px 0;
-          .data-column__span {
-            font-size: 12px;
-            color: #353636;
-            font-weight: 600;
-          }
-        }
-      }
-      .el-table__header-wrapper .el-table__header {
-        tr th:nth-last-child(-n+3) {
-          text-align: center;
-        }
-      }
-      .el-table__body-wrapper.is-scrolling-none {
-        height: 306px !important;
-        tr td {
-          padding: 13px 0;
-        }
-        tr td:nth-last-child(-n+3) {
-          text-align: center;
-          .data-total {
-            justify-content: center;
-          }
+    .el-table__header-wrapper {
+      tr th {
+        padding: 5px 0;
+        .data-column__span {
+          font-size: 12px;
+          color: #353636;
+          font-weight: 600;
         }
       }
     }
-    .data-total {
-      display: flex !important;
-      .data-total-category-icon {
-        i {
-          font-size: 16px;
-          margin-right: 12px;
-          color:  #717171;
-        }
-      }
-      .data-total-category-value {
-        font-size: 12px;
-        color: #353636;
-        font-weight: 400;
-        cursor: pointer;
-      }
-      .data-score {
-        border-radius: 10px;
-        font-size: 12px;
-        color: #FFFFFF;
-        font-weight: 500;
-        height: 20px;
-        width: 34px;
-        line-height: 20px;
+    .el-table__header-wrapper .el-table__header {
+      tr th:nth-last-child(-n+3) {
         text-align: center;
       }
-      .data-score.data-score-red {
-        background: #E26154;
+    }
+    .el-table__body-wrapper.is-scrolling-none {
+      height: 306px !important;
+      tr td {
+        padding: 13px 0;
       }
-      .data-score.data-score-yellow {
-        background: #E5A219;
-      }
-      .data-score.data-score-green {
-        background: #749F4D;
+      tr td:nth-last-child(-n+3) {
+        text-align: center;
+        .data-total {
+          justify-content: center;
+        }
       }
     }
-    .data-total-value {
-      display: flex;
-      justify-content: right;
-      width: 50%;
+  }
+  .data-total {
+    display: flex !important;
+    .data-total-category-icon {
+      i {
+        font-size: 16px;
+        margin-right: 12px;
+        color:  #717171;
+      }
+    }
+    .data-total-category-value {
       font-size: 12px;
       color: #353636;
       font-weight: 400;
+      cursor: pointer;
     }
-    .data-trend{
-      display: flex;
-      width: 50%;
-    }
-    .data-total-trend {
-      display: flex;
-      justify-content: left;
-      margin-left: 6px;
-      font-size: 12px;
-      justify-content: center;
-      margin-top: 2px;
+    .data-score {
       border-radius: 10px;
-      font-weight: 500;
       font-size: 12px;
+      color: #FFFFFF;
+      font-weight: 500;
       height: 20px;
-      padding: 0 5px;
+      width: 34px;
+      line-height: 20px;
+      text-align: center;
     }
-    .data-total-trend-black {
-      background-color: rgba(113,113,113,0.12);
-      color: #717171;
-      width: 36px;
+    .data-score.data-score-red {
+      background: #E26154;
     }
-    .data-total-trend-green {
-      background-color: rgba(126,159,84,0.12);
-      color: #7E9F54;
+    .data-score.data-score-yellow {
+      background: #E5A219;
     }
-    .data-total-trend-red {
-      background-color: rgba(226,97,84,0.12);
-      color: #E26154;
-      .cn-icon-rise1{
-        color: #E44D3E;
-      }
-    }
-    .el-table--group::after,.el-table--border::after, .el-table::before {
-      height: 0px;
-    }
-    .el-table thead {
-      color: $grey;
+    .data-score.data-score-green {
+      background: #749F4D;
     }
   }
+  .data-total-value {
+    display: flex;
+    justify-content: right;
+    width: 50%;
+    font-size: 12px;
+    color: #353636;
+    font-weight: 400;
+  }
+  .data-trend{
+    display: flex;
+    width: 50%;
+  }
+  .data-total-trend {
+    display: flex;
+    justify-content: left;
+    margin-left: 6px;
+    font-size: 12px;
+    justify-content: center;
+    margin-top: 2px;
+    border-radius: 10px;
+    font-weight: 500;
+    font-size: 12px;
+    height: 20px;
+    padding: 0 5px;
+  }
+  .data-total-trend-black {
+    background-color: rgba(113,113,113,0.12);
+    color: #717171;
+    width: 36px;
+  }
+  .data-total-trend-green {
+    background-color: rgba(126,159,84,0.12);
+    color: #7E9F54;
+  }
+  .data-total-trend-red {
+    background-color: rgba(226,97,84,0.12);
+    color: #E26154;
+    .cn-icon-rise1{
+      color: #E44D3E;
+    }
+  }
+  .el-table--group::after,.el-table--border::after, .el-table::before {
+    height: 0px;
+  }
+  .el-table thead {
+    color: $grey;
+  }
 }
diff --git a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
index 7970a114..2e3c2b25 100644
--- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
@@ -14,119 +14,117 @@
         </div>
       </div>
     </div>
-    <div class="npm-app-right">
-      <el-table
-          :id="`tabTable_${index}`"
-          :ref="`dataTable_${index}`"
-          :data="tableData"
-          class="app-table"
-          height="100%"
-          empty-text=" "
-      >
-        <template v-for="(item, index) in customTableTitles" :key="index">
-          <el-table-column class="data-column">
-            <template #header>
-              <span class="data-column__span">{{$t(item.label)}}</span>
-            </template>
-            <template  #default="scope" :column="item">
-              <div class="data-total">
-                <template v-if="item.prop === 'category'">
-                  <span class="data-total-category-icon"><i :class="scope.row.icon"></i></span>
-                  <span class="data-total-category-value" @click="drillDownData(scope.row.i18n)">{{$t(scope.row.i18n)}}</span>
-                </template>
-                <template v-else-if="item.prop === 'total'">
-                  <div class="data-total-value">{{unitConvert(scope.row.totalPacketsRate, unitTypes.bps).join('')}}</div>
-                  <div class="data-trend">
-                    <div v-if="scope.row.bytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
-                      <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
-                      <span v-if="scope.row.bytesRateChainRatio <= 5">
+    <el-table
+        :id="`tabTable_${index}`"
+        :ref="`dataTable_${index}`"
+        :data="tableData"
+        class="app-table"
+        height="100%"
+        empty-text=" "
+    >
+      <template v-for="(item, index) in customTableTitles" :key="index">
+        <el-table-column class="data-column">
+          <template #header>
+            <span class="data-column__span">{{$t(item.label)}}</span>
+          </template>
+          <template  #default="scope" :column="item">
+            <div class="data-total">
+              <template v-if="item.prop === 'category'">
+                <span class="data-total-category-icon"><i :class="scope.row.icon"></i></span>
+                <span class="data-total-category-value" @click="drillDownData(scope.row.i18n)">{{$t(scope.row.i18n)}}</span>
+              </template>
+              <template v-else-if="item.prop === 'total'">
+                <div class="data-total-value">{{unitConvert(scope.row.totalPacketsRate, unitTypes.bps).join('')}}</div>
+                <div class="data-trend">
+                  <div v-if="scope.row.bytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
+                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
+                    <span v-if="scope.row.bytesRateChainRatio <= 5">
                         {{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('')}}
                       </span>
-                      <span v-else>>500.00%</span>
-                    </div>
-                    <div v-else-if="scope.row.bytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
-                      <i class="cn-icon-decline cn-icon"></i>&nbsp;
-                      <span v-if="scope.row.bytesRateChainRatio >= -5">
+                    <span v-else>>500.00%</span>
+                  </div>
+                  <div v-else-if="scope.row.bytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
+                    <i class="cn-icon-decline cn-icon"></i>&nbsp;
+                    <span v-if="scope.row.bytesRateChainRatio >= -5">
                         {{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
                       </span>
-                      <span v-else>>500.00%</span>
-                    </div>
-                    <div v-else-if="scope.row.bytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
-                      <i class="cn-icon-constant cn-icon"></i>
-                    </div>
-                    <div v-else></div>
+                    <span v-else>>500.00%</span>
                   </div>
-                </template>
-                <template v-else-if="item.prop === 'outbound'">
-                  <div class="data-total-value">{{unitConvert(scope.row.outboundPacketsRate, unitTypes.bps).join('')}}</div>
-                  <div class="data-trend">
-                    <div v-if="scope.row.outboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
-                      <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
-                      <span v-if="scope.row.outboundBytesRateChainRatio <= 5">
+                  <div v-else-if="scope.row.bytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
+                    <i class="cn-icon-constant cn-icon"></i>
+                  </div>
+                  <div v-else></div>
+                </div>
+              </template>
+              <template v-else-if="item.prop === 'outbound'">
+                <div class="data-total-value">{{unitConvert(scope.row.outboundPacketsRate, unitTypes.bps).join('')}}</div>
+                <div class="data-trend">
+                  <div v-if="scope.row.outboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
+                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
+                    <span v-if="scope.row.outboundBytesRateChainRatio <= 5">
                         {{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('')}}
                       </span>
-                      <span v-else>>500.00%</span>
-                    </div>
-                    <div v-else-if="scope.row.outboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
-                      <i class="cn-icon-decline cn-icon"></i>&nbsp;
-                      <span v-if="scope.row.outboundBytesRateChainRatio >= -5">
+                    <span v-else>>500.00%</span>
+                  </div>
+                  <div v-else-if="scope.row.outboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
+                    <i class="cn-icon-decline cn-icon"></i>&nbsp;
+                    <span v-if="scope.row.outboundBytesRateChainRatio >= -5">
                         {{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
                       </span>
-                      <span v-else>>500.00%</span>
-                    </div>
-                    <div v-else-if="scope.row.outboundBytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
-                      <i class="cn-icon-constant cn-icon"></i>
-                    </div>
-                    <div v-else></div>
+                    <span v-else>>500.00%</span>
                   </div>
-                </template>
-                <template v-else-if="item.prop === 'inbound'">
-                  <div class="data-total-value">{{unitConvert(scope.row.inboundPacketsRate, unitTypes.bps).join('')}}</div>
-                  <div class="data-trend">
-                    <div v-if="scope.row.inboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
-                      <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
-                      <span v-if="scope.row.inboundBytesRateChainRatio <= 5">
+                  <div v-else-if="scope.row.outboundBytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
+                    <i class="cn-icon-constant cn-icon"></i>
+                  </div>
+                  <div v-else></div>
+                </div>
+              </template>
+              <template v-else-if="item.prop === 'inbound'">
+                <div class="data-total-value">{{unitConvert(scope.row.inboundPacketsRate, unitTypes.bps).join('')}}</div>
+                <div class="data-trend">
+                  <div v-if="scope.row.inboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
+                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
+                    <span v-if="scope.row.inboundBytesRateChainRatio <= 5">
                         {{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('')}}
                       </span>
-                      <span v-else>>500.00%</span>
-                    </div>
-                    <div v-else-if="scope.row.inboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
-                      <i class="cn-icon-decline cn-icon"></i>&nbsp;
-                      <span v-if="scope.row.inboundBytesRateChainRatio >= -5">
+                    <span v-else>>500.00%</span>
+                  </div>
+                  <div v-else-if="scope.row.inboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
+                    <i class="cn-icon-decline cn-icon"></i>&nbsp;
+                    <span v-if="scope.row.inboundBytesRateChainRatio >= -5">
                         {{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
                       </span>
-                      <span v-else>>500.00%</span>
-                    </div>
-                    <div v-else-if="scope.row.inboundBytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
-                      <i class="cn-icon-constant cn-icon"></i>
-                    </div>
-                    <div v-else></div>
+                    <span v-else>>500.00%</span>
                   </div>
-                </template>
-                <template v-else-if="item.prop === 'score'">
-                  <div v-if="scope.row.score <= 2" :class="{'data-score-red': scope.row.score <= 2}" class="data-score">
-                    {{scope.row.score}}
+                  <div v-else-if="scope.row.inboundBytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
+                    <i class="cn-icon-constant cn-icon"></i>
                   </div>
-                  <div v-else-if="scope.row.score <= 4" :class="{'data-score-yellow': scope.row.score <= 4}" class="data-score">
-                    {{scope.row.score}}
-                  </div>
-                  <div v-else-if="scope.row.score <= 6" :class="{'data-score-green': scope.row.score <= 6}" class="data-score">
-                    {{scope.row.score}}
-                  </div>
-                </template>
-                <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
-                <span v-else>-</span>
-              </div>
-            </template>
-          </el-table-column>
-        </template>
-        <template v-slot:empty>
-          <div class="table-no-data" v-show="isNoData">
-            <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
-          </div>
-        </template>
-      </el-table>
-    </div>
+                  <div v-else></div>
+                </div>
+              </template>
+              <template v-else-if="item.prop === 'score'">
+                <div v-if="scope.row.score <= 2" :class="{'data-score-red': scope.row.score <= 2}" class="data-score">
+                  {{scope.row.score}}
+                </div>
+                <div v-else-if="scope.row.score <= 4" :class="{'data-score-yellow': scope.row.score <= 4}" class="data-score">
+                  {{scope.row.score}}
+                </div>
+                <div v-else-if="scope.row.score <= 6" :class="{'data-score-green': scope.row.score <= 6}" class="data-score">
+                  {{scope.row.score}}
+                </div>
+              </template>
+              <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+              <span v-else>-</span>
+            </div>
+          </template>
+        </el-table-column>
+      </template>
+      <template v-slot:empty>
+        <div class="table-no-data" v-show="isNoData">
+          <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+        </div>
+      </template>
+    </el-table>
   </div>
 </template>
 
diff --git a/src/views/charts2/charts/npm/NpmRecentEvents.vue b/src/views/charts2/charts/npm/NpmRecentEvents.vue
index f063f8d3..fa2cae62 100644
--- a/src/views/charts2/charts/npm/NpmRecentEvents.vue
+++ b/src/views/charts2/charts/npm/NpmRecentEvents.vue
@@ -49,10 +49,21 @@ import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getSecond, dateFormatByAppearance } from '@/utils/date-util'
 import chartMixin from '@/views/charts2/chart-mixin'
+import { useRoute } from 'vue-router'
+import { ref } from 'vue'
 
 export default {
   name: 'NpmRecentEvents',
   mixins: [chartMixin],
+  setup () {
+    const { query } = useRoute()
+    const queryCondition = ref(query.queryCondition || '')
+    const dimensionType = ref(query.dimensionType || '')
+    return {
+      queryCondition,
+      dimensionType
+    }
+  },
   data () {
     return {
       tableData: [],
@@ -74,19 +85,19 @@ export default {
   methods: {
     recentEventsListData () {
       // const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
-      const conditionStr = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
-      const condition = conditionStr.split(/["|'](.*?)["|']/)
+      // const conditionStr = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
+      const condition = this.queryCondition.split(/["|'](.*?)["|']/)
       // const type = this.$store.getters.getDimensionType
-      const type = this.$route.query.dimensionType ? this.$route.query.dimensionType : ''
+      // const type = this.$route.query.dimensionType ? this.$route.query.dimensionType : ''
       let url = ''
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
         limit: 8
       }
-      if (condition.length > 1 && type) {
+      if (condition.length > 1 && this.dimensionType) {
         params.param = condition[1]
-        params.type = type
+        params.type = this.dimensionType
         params.limit = 10
         url = api.npm.events.recentEventsD
         this.customTableTitles = [