fix: 修复 npm 下钻路由参数获取及table 列表样式调整

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;

src/assets/css/components/views/charts2/npmAppCategoryScore.scss

@@ -63,13 +63,8 @@
       }
     }
   }
-  .npm-app-right {
-    width: calc(100% - 500px);
-    height: 100%;
-    border: 1px solid #E2E5EC;
-    border-radius: 4px;
-    padding: 1px;
   .app-table.el-table {
+    border: 1px solid #E2E5EC;
     .el-table__header-wrapper {
       tr th {
         padding: 5px 0;
@@ -180,5 +175,4 @@
   .el-table thead {
     color: $grey;
   }
-  }
 }

src/views/charts2/charts/npm/NpmAppCategoryScore.vue

@@ -14,7 +14,6 @@
         </div>
       </div>
     </div>
-    <div class="npm-app-right">
     <el-table
         :id="`tabTable_${index}`"
         :ref="`dataTable_${index}`"
@@ -127,7 +126,6 @@
       </template>
     </el-table>
   </div>
-  </div>
 </template>
 
 <script>

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 = [