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.isSetHeight = true
-          this.newHeight = 'height:' + unitConvert(data.length / 10, unitTypes.percent, null, null, 0).join('') + ';'
+        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.myChart = echarts.init(chartDom)
+        this.$nextTick(() => {
-        const chartOption = this.$_.cloneDeep(entityDetailSubscriberTopApp)
+          this.myChart = echarts.init(chartDom)
-        chartOption.series[0].data = data.map(d => {
+          const chartOption = this.$_.cloneDeep(entityDetailSubscriberTopApp)
-          return [d.count, d.app]
+          chartOption.series[0].data = data.map(d => {
-        }).reverse()
+            return [d.count, d.app]
-        this.myChart.setOption(chartOption)
+          }).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,76 +32,82 @@
   </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',
+  name: 'Plugin',
-    mixins: [dataListMixin],
+  mixins: [dataListMixin],
-    components: {
+  components: {
-      cnDataList,
+    cnDataList,
-      pluginTable
+    pluginTable
-    },
+  },
-    data () {
+  data () {
-      return {
+    return {
-        url: api.pluginList,
+      url: api.pluginList,
-        blankObject: { // 空白对象
+      blankObject: { // 空白对象
-          id: '',
+        id: '',
-          name: '',
+        name: '',
-          remark: '',
+        remark: '',
-          type: '',
+        type: '',
-          schedule: '',
+        schedule: '',
-          status: 1
+        status: 1
-        },
+      },
-        tableId: 'userTable'
+      tableId: 'pluginTable'
+    }
+  },
+  methods: {
+    getTableData (params, isAll, isClearType) {
+      if (isAll) {
+        this.searchLabel = null
+      } else if (isClearType) {
+        this.searchLabel.type = ''// 换新接口需要修改的属性名称
       }
-    },
+      if (params) {
-    methods: {
+        this.searchLabel = { ...this.searchLabel, ...params }
-      getTableData (params, isAll, isClearType) {
+      }
-        if (isAll) {
+      // this.searchLabel = { ...this.searchLabel, ...this.pageObj }
-          this.searchLabel = null
+      this.searchLabel = { ...this.searchLabel, jobGroup: 3 }
-        } else if (isClearType) {
+      this.isNoData = false
-          this.searchLabel.type = ''// 换新接口需要修改的属性名称
+      this.toggleLoading(true)
-        }
+      delete this.searchLabel.total
-        if (params) {
+      let listUrl = this.url
-          this.searchLabel = { ...this.searchLabel, ...params }
+      if (this.listUrl) {
-        }
+        listUrl = this.listUrl
-        //this.searchLabel = { ...this.searchLabel, ...this.pageObj }
+      }
-        this.searchLabel = {...this.searchLabel,jobGroup:3}
+      // this.searchLabel.category = 'ai_tagging'
-        this.isNoData = false
+      axios.get(listUrl, { params: this.searchLabel }).then(response => {
-        this.toggleLoading(true)
+        if (response.status === 200) {
-        delete this.searchLabel.total
+          const filterDataList = []
-        let listUrl = this.url
+          for (let i = 0; i < response.data.data.list.length; i++) {
-        if (this.listUrl) {
+            response.data.data.list[i].triggerStatus = response.data.data.list[i].triggerStatus + ''
-          listUrl = this.listUrl
+            const basicInfo = pluginBasicInfo.find(plugin => plugin.id === response.data.data.list[i].id)
-        }
+            if (basicInfo) {
-        //this.searchLabel.category = 'ai_tagging'
+              filterDataList.push(response.data.data.list[i])
-        axios.get(listUrl, { params: this.searchLabel }).then(response => {
-          if (response.status === 200) {
-            for (let i = 0; i < response.data.data.list.length; i++) {
-              response.data.data.list[i].triggerStatus = response.data.data.list[i].triggerStatus + ''
-            }
-            this.tableData = response.data.data.list
-          } else {
-            console.error(response.data)
-            this.isNoData = true
-            if (response.data.message) {
-              this.$message.error(response.data.message)
-            } else {
-              this.$message.error(this.$t('tip.somethingWentWrong'))
             }
           }
-        }).finally(() => {
+          this.tableData = filterDataList
-          this.toggleLoading(false)
+        } else {
-          this.isNoData = !this.tableData || this.tableData.length === 0
+          console.error(response.data)
-        })
+          this.isNoData = true
-      }
+          if (response.data.message) {
-    },
+            this.$message.error(response.data.message)
-    unmounted () {
+          } else {
-      this.isNoData = false
+            this.$message.error(this.$t('tip.somethingWentWrong'))
+          }
+        }
+      }).finally(() => {
+        this.toggleLoading(false)
+        this.isNoData = !this.tableData || this.tableData.length === 0
+      })
     }
+  },
+  unmounted () {
+    this.isNoData = false
   }
+}
 </script>