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

2024-01-11 16:36:07 +08:00
parent 8e4d5bff88
commit a3e770963f
5 changed files with 115 additions and 94 deletions
--- a/src/assets/css/components/views/charts2/EntityDetailSubscriberTopApp.scss
+++ b/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;
-          margin-right:30px;
+          width:80px;
+          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;
--- a/src/components/table/system/PluginTable.vue
+++ b/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)
        }
--- a/src/utils/constants.js
+++ b/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',
--- a/src/views/charts2/charts/entityDetail/EntityDetailSubscriberTopApp.vue
+++ b/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-trend">
+          <div class="app-name" :title="appData.app">{{appData.app}}</div>
+          <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) { // 重新设置图标高度
-          this.isSetHeight = true
-          this.newHeight = 'height:' + unitConvert(data.length / 10, unitTypes.percent, null, null, 0).join('') + ';'
-        }
+        // 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.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)
+        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 () {
--- a/src/views/system/Plugin.vue
+++ b/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 dataListMixin from '@/mixins/data-list'
-  import pluginTable from '@/components/table/system/PluginTable'
-  import { api } from '@/utils/api'
-  import axios from 'axios'
+import cnDataList from '@/components/table/CnDataList'
+import dataListMixin from '@/mixins/data-list'
+import pluginTable from '@/components/table/system/PluginTable'
+import { api } from '@/utils/api'
+import { pluginBasicInfo } from '@/utils/constants'
+import axios from 'axios'

-  export default {
-    name: 'Plugin',
-    mixins: [dataListMixin],
-    components: {
-      cnDataList,
-      pluginTable
-    },
-    data () {
-      return {
-        url: api.pluginList,
-        blankObject: { // 空白对象
-          id: '',
-          name: '',
-          remark: '',
-          type: '',
-          schedule: '',
-          status: 1
-        },
-        tableId: 'userTable'
+export default {
+  name: 'Plugin',
+  mixins: [dataListMixin],
+  components: {
+    cnDataList,
+    pluginTable
+  },
+  data () {
+    return {
+      url: api.pluginList,
+      blankObject: { // 空白对象
+        id: '',
+        name: '',
+        remark: '',
+        type: '',
+        schedule: '',
+        status: 1
+      },
+      tableId: 'pluginTable'
+    }
+  },
+  methods: {
+    getTableData (params, isAll, isClearType) {
+      if (isAll) {
+        this.searchLabel = null
+      } else if (isClearType) {
+        this.searchLabel.type = ''// 换新接口需要修改的属性名称
      }
-    },
-    methods: {
-      getTableData (params, isAll, isClearType) {
-        if (isAll) {
-          this.searchLabel = null
-        } else if (isClearType) {
-          this.searchLabel.type = ''// 换新接口需要修改的属性名称
-        }
-        if (params) {
-          this.searchLabel = { ...this.searchLabel, ...params }
-        }
-        //this.searchLabel = { ...this.searchLabel, ...this.pageObj }
-        this.searchLabel = {...this.searchLabel,jobGroup:3}
-        this.isNoData = false
-        this.toggleLoading(true)
-        delete this.searchLabel.total
-        let listUrl = this.url
-        if (this.listUrl) {
-          listUrl = this.listUrl
-        }
-        //this.searchLabel.category = 'ai_tagging'
-        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'))
+      if (params) {
+        this.searchLabel = { ...this.searchLabel, ...params }
+      }
+      // this.searchLabel = { ...this.searchLabel, ...this.pageObj }
+      this.searchLabel = { ...this.searchLabel, jobGroup: 3 }
+      this.isNoData = false
+      this.toggleLoading(true)
+      delete this.searchLabel.total
+      let listUrl = this.url
+      if (this.listUrl) {
+        listUrl = this.listUrl
+      }
+      // 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])
            }
          }
-        }).finally(() => {
-          this.toggleLoading(false)
-          this.isNoData = !this.tableData || this.tableData.length === 0
-        })
-      }
-    },
-    unmounted () {
-      this.isNoData = false
+          this.tableData = filterDataList
+        } 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.toggleLoading(false)
+        this.isNoData = !this.tableData || this.tableData.length === 0
+      })
    }
+  },
+  unmounted () {
+    this.isNoData = false
  }
+}
 </script>