fix: 1.Subscribe实体详情页top 应用样式调整；2.插件列表展示内容过滤；

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

@@ -42,15 +42,17 @@
         color: #353636;
         font-weight: 400;
         height:calc(100%/10);
-        //padding:5.6px 0 5.6px;
         .app-index {
           text-align: right;
           width:20px;
           margin-right:15px;
         }
         .app-name {
-          width:50px;
+          width:80px;
-          margin-right:30px;
+          margin-right:10px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
         .top-app-divider {
           height:10px;
@@ -58,7 +60,7 @@
           margin-left:10px;
           margin-right:8px;
         }
-        .app-trend {
+        .app-trend-right {
           display: flex;
           flex-direction: row;
           align-items: center;
@@ -70,6 +72,18 @@
             color: #717171;
           }
         }
+        .app-trend-left {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          white-space: nowrap;
+          width:60px;
+          i {
+            margin-right:3px;
+            font-size:12px;
+            color: #717171;
+          }
+        }
         .app-up {
           font-size: 12px;
           color: #717171;

src/components/table/system/PluginTable.vue

@@ -66,7 +66,7 @@
 import table from '@/mixins/table'
 import axios from 'axios'
 import { api } from '@/utils/api'
-import { storageKey, pluginBasicInfo,pluginSchedule } from '@/utils/constants'
+import { pluginBasicInfo, pluginSchedule } from '@/utils/constants'
 
 export default {
   name: 'pluginTable',
@@ -79,7 +79,6 @@ export default {
   mixins: [table],
   data () {
     return {
-      loginName: localStorage.getItem(storageKey.username),
       tableTitle: [ // 原始table列
         {
           label: this.$t('overall.name'),
@@ -148,7 +147,7 @@ export default {
       statusUrl = statusUrl.replace('{{id}}', plugin.id)
       axios.post(statusUrl).then(response => {
         if (response.status === 200) {
-          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.operateSuccess') })
         } else {
           this.$message.error(response.data.message)
         }

src/utils/constants.js

@@ -1886,13 +1886,6 @@ export const performanceMetricMapping = {
 }
 
 export const pluginBasicInfo = [
-  {
-    id: 108,
-    name: '',
-    type: '',
-    desc: '',
-    iconUrl: ''
-  },
   {
     id: 109,
     name: 'Psiphon3 VPN',

src/views/charts2/charts/entityDetail/EntityDetailSubscriberTopApp.vue

@@ -19,13 +19,13 @@
       <div class="top-app-left" v-show="!isNoData && !showError">
         <div class="app-data" v-for="(appData, index) in topAppData">
           <div class="app-index">{{++index}}</div>
-          <div class="app-name">{{appData.app}}</div>
+          <div class="app-name" :title="appData.app">{{appData.app}}</div>
-          <div class="app-trend">
+          <div class="app-trend-left">
             <i class="cn-icon cn-icon-egress"></i>
             <div class="app-up">{{appData.up ? unitConvert(appData.up, unitTypes.byte,null,null,1).join('') : '-'}}</div>
           </div>
           <el-divider direction="vertical" class="top-app-divider"/>
-          <div class="app-trend">
+          <div class="app-trend-right">
             <i class="cn-icon cn-icon-ingress"></i>
             <div class="app-down">{{appData.down ? unitConvert(appData.down, unitTypes.byte,null,null,1).join('') : '-'}}</div>
           </div>
@@ -136,6 +136,10 @@ export default {
 
             this.topAppData = appDatas.sort(reverseSortBy('appTotal'))
             this.getTotalData()
+          } else {
+            if (this.myChart) {
+              echarts.dispose(this.myChart)
+            }
           }
         } else {
           this.httpError(res)
@@ -184,21 +188,23 @@ export default {
     },
     initEchart (data) {
       if (data && data.length > 0) {
-        if (data.length < 10) { // 重新设置图标高度
+        // if (data.length < 10) { // 重新设置图标高度
         this.isSetHeight = true
         this.newHeight = 'height:' + unitConvert(data.length / 10, unitTypes.percent, null, null, 0).join('') + ';'
-        }
+        // }
         const chartDom = document.getElementById('subscriberTopAppChart')
         this.myChart = echarts.getInstanceByDom(chartDom)
         if (this.myChart) {
           echarts.dispose(this.myChart)
         }
+        this.$nextTick(() => {
           this.myChart = echarts.init(chartDom)
           const chartOption = this.$_.cloneDeep(entityDetailSubscriberTopApp)
           chartOption.series[0].data = data.map(d => {
             return [d.count, d.app]
           }).reverse()
           this.myChart.setOption(chartOption)
+        })
       }
     },
     resize () {
@@ -221,6 +227,9 @@ export default {
         topAppRange: dateRangeValue.value
       })
       overwriteUrl(newUrl)
+      if (this.myChart) {
+        echarts.dispose(this.myChart)
+      }
     }
   },
   mounted () {

src/views/system/Plugin.vue

@@ -6,7 +6,7 @@
             v-model:custom-table-title="tools.customTableTitle"
             :api="url"
             :from="fromRoute.plugin"
-            :layout="['columnCustomize','search']"
+            :layout="['columnCustomize']"
             @search="search"
     >
       <template #default>
@@ -32,13 +32,14 @@
   </div>
 </template>
 <script>
-  import cnDataList from '@/components/table/CnDataList'
+import cnDataList from '@/components/table/CnDataList'
-  import dataListMixin from '@/mixins/data-list'
+import dataListMixin from '@/mixins/data-list'
-  import pluginTable from '@/components/table/system/PluginTable'
+import pluginTable from '@/components/table/system/PluginTable'
-  import { api } from '@/utils/api'
+import { api } from '@/utils/api'
-  import axios from 'axios'
+import { pluginBasicInfo } from '@/utils/constants'
+import axios from 'axios'
 
-  export default {
+export default {
   name: 'Plugin',
   mixins: [dataListMixin],
   components: {
@@ -56,7 +57,7 @@
         schedule: '',
         status: 1
       },
-        tableId: 'userTable'
+      tableId: 'pluginTable'
     }
   },
   methods: {
@@ -69,8 +70,8 @@
       if (params) {
         this.searchLabel = { ...this.searchLabel, ...params }
       }
-        //this.searchLabel = { ...this.searchLabel, ...this.pageObj }
+      // this.searchLabel = { ...this.searchLabel, ...this.pageObj }
-        this.searchLabel = {...this.searchLabel,jobGroup:3}
+      this.searchLabel = { ...this.searchLabel, jobGroup: 3 }
       this.isNoData = false
       this.toggleLoading(true)
       delete this.searchLabel.total
@@ -78,13 +79,18 @@
       if (this.listUrl) {
         listUrl = this.listUrl
       }
-        //this.searchLabel.category = 'ai_tagging'
+      // this.searchLabel.category = 'ai_tagging'
       axios.get(listUrl, { params: this.searchLabel }).then(response => {
         if (response.status === 200) {
+          const filterDataList = []
           for (let i = 0; i < response.data.data.list.length; i++) {
             response.data.data.list[i].triggerStatus = response.data.data.list[i].triggerStatus + ''
+            const basicInfo = pluginBasicInfo.find(plugin => plugin.id === response.data.data.list[i].id)
+            if (basicInfo) {
+              filterDataList.push(response.data.data.list[i])
             }
-            this.tableData = response.data.data.list
+          }
+          this.tableData = filterDataList
         } else {
           console.error(response.data)
           this.isNoData = true
@@ -103,5 +109,5 @@
   unmounted () {
     this.isNoData = false
   }
-  }
+}
 </script>