diff --git a/src/Login.vue b/src/Login.vue index b92eb3c3..f6f44617 100644 --- a/src/Login.vue +++ b/src/Login.vue @@ -81,6 +81,7 @@ export default { res.loginSuccessPath = this.$route.query.redirect this.loginSuccess(res) localStorage.setItem(storageKey.username, this.username) + localStorage.setItem(storageKey.userId, '1') localStorage.setItem(storageKey.token, res.data.token) } else if (res.code === 518005) { this.$message.error(this.$t('Incorrect username or password')) diff --git a/src/assets/css/components/views/charts2/npmMap.scss b/src/assets/css/components/views/charts2/npmMap.scss index 735f0eea..6d8b1d2b 100644 --- a/src/assets/css/components/views/charts2/npmMap.scss +++ b/src/assets/css/components/views/charts2/npmMap.scss @@ -1,6 +1,7 @@ .cn-chart__map { height: 100%; width: 100%; + position: relative; border-radius: 4px; overflow: hidden; @@ -9,4 +10,57 @@ width: 100%; background-color: #CAD2D3; } + .map-filter { + position: absolute; + right: 10px; + top: 10px; + + .map-select { + margin-left: 10px; + + .el-input__inner { + color: #2C72C6; + } + &.map-select__direction { + width: 110px; + } + } + } + .map-legend { + display: flex; + flex-direction: column; + justify-content: center; + height: 92px; + bottom: 10px; + left: 10px; + position: absolute; + padding: 0 10px; + background-color: white; + + .map-legend__row { + display: flex; + align-items: center; + height: 23px; + + .map-legend__symbol { + height: 8px; + width: 8px; + border-radius: 50%; + + &.map-legend__symbol--green { + background-color: #7E9F54; + } + &.map-legend__symbol--yellow { + background-color: #E5A219; + } + &.map-legend__symbol--red { + background-color: #E26154; + } + } + .map-legend__desc { + padding-left: 5px; + color: #575757; + } + } + } } diff --git a/src/utils/constants.js b/src/utils/constants.js index ffdc7efb..92014614 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -13,6 +13,7 @@ export const storageKey = { timezoneLocalOffset: 'cn-timezone-local-offset', token: 'cn-token', username: 'cn-username', + userId: 'cn-userId', sysName: 'cn-sys-name', sysLogo: 'cn-sys-logo', pageSize: 'cn-pageSize', diff --git a/src/views/charts2/ChartList.vue b/src/views/charts2/ChartList.vue index 90a941c8..b1a08a5f 100644 --- a/src/views/charts2/ChartList.vue +++ b/src/views/charts2/ChartList.vue @@ -35,7 +35,7 @@ import VueGridLayout from 'vue-grid-layout' import _ from 'lodash' import Chart from '@/views/charts2/Chart' -import { panelTypeAndRouteMapping } from '@/utils/constants' +import {panelTypeAndRouteMapping, storageKey} from '@/utils/constants' import { typeMapping } from '@/views/charts2/chart-tools' export default { name: 'ChartList', @@ -68,6 +68,17 @@ export default { } else { this.layout = [...n] } + const overviewAppChart = n.find(c => c.type === typeMapping.networkOverview.appList) + let actuallyLength = 0 + if (overviewAppChart) { + const params = overviewAppChart.params.app ? overviewAppChart.params : { app: [] } + if (params.app.some(p => p.user === parseInt(localStorage.getItem(storageKey.userId)))) { + actuallyLength = params.app.find(p => p.user === parseInt(localStorage.getItem(storageKey.userId))).list.length + 1 + } else { + actuallyLength = params.app.find(p => p.user === 'default').list.length + 1 + } + overviewAppChart.h = actuallyLength % 3 > 0 ? (Math.floor(actuallyLength / 3) + 1) * 2 + 2 : Math.floor(actuallyLength / 3) * 2 + 2 + } } }, npmTabIndex (n) { diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue index 8fdfcc74..baf156f9 100644 --- a/src/views/charts2/Panel.vue +++ b/src/views/charts2/Panel.vue @@ -38,6 +38,7 @@ import { getPanelList, getChartList } from '@/utils/api' import { getNowTime } from '@/utils/date-util' import { getTypeCategory } from '@/views/charts/charts/tools' import ChartList from '@/views/charts2/ChartList' +import { typeMapping } from '@/views/charts2/chart-tools' export default { name: 'Panel', @@ -59,6 +60,7 @@ export default { await this.init() const vm = this this.emitter.on('reloadChartList', async function () { + vm.chartList = [] vm.chartList = (await getChartList({ panelId: vm.panel.id, pageSize: -1 })).map(chart => { chart.i = chart.id // 递归初始化各属性 diff --git a/src/views/charts2/charts/NetworkOverviewApps.vue b/src/views/charts2/charts/NetworkOverviewApps.vue index 1f976dd3..eb42f5ff 100644 --- a/src/views/charts2/charts/NetworkOverviewApps.vue +++ b/src/views/charts2/charts/NetworkOverviewApps.vue @@ -106,7 +106,7 @@