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

2022-09-21 10:35:47 +08:00
parent f1de238177
commit 7e431358d4
4 changed files with 205 additions and 199 deletions
--- 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;
--- 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;
+  }
 }
--- 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>

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