From a3e770963f9526b7fba8ee489daaf34a5c341f78 Mon Sep 17 00:00:00 2001 From: hyx Date: Thu, 11 Jan 2024 16:36:07 +0800 Subject: [PATCH] =?UTF-8?q?fix:=201.Subscribe=E5=AE=9E=E4=BD=93=E8=AF=A6?= =?UTF-8?q?=E6=83=85=E9=A1=B5top=20=E5=BA=94=E7=94=A8=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E8=B0=83=E6=95=B4=EF=BC=9B2.=E6=8F=92=E4=BB=B6=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E5=B1=95=E7=A4=BA=E5=86=85=E5=AE=B9=E8=BF=87=E6=BB=A4?= =?UTF-8?q?=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../charts2/EntityDetailSubscriberTopApp.scss | 22 ++- src/components/table/system/PluginTable.vue | 5 +- src/utils/constants.js | 7 - .../EntityDetailSubscriberTopApp.vue | 35 +++-- src/views/system/Plugin.vue | 140 +++++++++--------- 5 files changed, 115 insertions(+), 94 deletions(-) diff --git a/src/assets/css/components/views/charts2/EntityDetailSubscriberTopApp.scss b/src/assets/css/components/views/charts2/EntityDetailSubscriberTopApp.scss index b833154e..c1eb4abc 100644 --- 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; diff --git a/src/components/table/system/PluginTable.vue b/src/components/table/system/PluginTable.vue index 6cc1f198..12e4bab4 100644 --- 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) } diff --git a/src/utils/constants.js b/src/utils/constants.js index e930469d..d575961c 100644 --- 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', diff --git a/src/views/charts2/charts/entityDetail/EntityDetailSubscriberTopApp.vue b/src/views/charts2/charts/entityDetail/EntityDetailSubscriberTopApp.vue index ee7631db..1bc03e29 100644 --- a/src/views/charts2/charts/entityDetail/EntityDetailSubscriberTopApp.vue +++ b/src/views/charts2/charts/entityDetail/EntityDetailSubscriberTopApp.vue @@ -19,13 +19,13 @@
{{++index}}
-
{{appData.app}}
-
+
{{appData.app}}
+
{{appData.up ? unitConvert(appData.up, unitTypes.byte,null,null,1).join('') : '-'}}
-
+
{{appData.down ? unitConvert(appData.down, unitTypes.byte,null,null,1).join('') : '-'}}
@@ -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 () { diff --git a/src/views/system/Plugin.vue b/src/views/system/Plugin.vue index bf9df740..fc5193e8 100644 --- 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" >