From 6e07d7b269271c7b4ba3108bd9dd89809d1768ab Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Mon, 2 Aug 2021 13:22:15 +0800 Subject: [PATCH] =?UTF-8?q?CN-56=20perf:=20entity=E8=AF=A6=E6=83=85?= =?UTF-8?q?=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++-- src/components/entities/EntityList.vue | 15 ++++++++++++--- src/components/layout/LeftMenu.vue | 2 +- src/utils/constants.js | 5 ++++- src/views/charts/Chart.vue | 3 +-- src/views/charts/Panel.vue | 19 ++++++++++++++++++- src/views/entities/EntityExplorer.vue | 18 +++++++++++++++--- 7 files changed, 53 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 35efb3e2..4c33c21a 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ npm run lint ### 3.图表组件库 图表：echarts5.0 -地图(支持下钻)(待定)：echarts+自定义事件 | amCharts +地图：amCharts 拖拽 & Resize：Vue-grid-layout  https://jbaysolutions.github.io/vue-grid-layout/guide/ ### 4.响应式方案 @@ -37,7 +37,7 @@ lib-flexible + postcss-px2rem-exclude + 媒体查询 lib-flexible 将px自动转为rem，postcss-px2rem-exclude 避免将ui库的css转换，媒体查询根据不同屏幕大小使用不同的root font size ### 5.工具 -使用lodash库，该库包含大部分常用工具方法，包括数组操作、函数功能扩展、对象操作等，且高性能、一致。开发中应该优先使用该库的方法 +lodash库，该库包含大部分常用工具方法，包括数组操作、函数功能扩展、对象操作等，且高性能、一致。开发中应该优先使用该库的方法 https://www.lodashjs.com/ ## 开发规范 & 要求 diff --git a/src/components/entities/EntityList.vue b/src/components/entities/EntityList.vue index 57200043..a4042376 100644 --- a/src/components/entities/EntityList.vue +++ b/src/components/entities/EntityList.vue @@ -36,7 +36,7 @@ {{$t('entities.asn')}}:
{{d.asn || '-'}}
-
{{$t('overall.detail')}}
+
{{$t('overall.detail')}}
@@ -95,6 +95,12 @@ export default { entityType: String, pageObj: Object }, + data () { + return { + showDetail: false, + typeName: '' + } + }, computed: { circleColor () { let color @@ -161,6 +167,9 @@ export default { } }) }) + }, + entityDetail (params) { + this.$emit('showDetail', params) } } } diff --git a/src/components/layout/LeftMenu.vue b/src/components/layout/LeftMenu.vue index ac0b7b47..e5214cb7 100644 --- a/src/components/layout/LeftMenu.vue +++ b/src/components/layout/LeftMenu.vue @@ -111,7 +111,7 @@ export default { methods: { jump (route) { if (route === this.route) { - // this.refresh() + this.refresh() return } this.$router.push({ diff --git a/src/utils/constants.js b/src/utils/constants.js index 9bfe1505..0652e19f 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -36,7 +36,10 @@ export const fromRoute = { export const panelTypeAndRouteMapping = { trafficSummary: 1, networkAppPerformance: 2, - dnsServiceInsights: 3 + dnsServiceInsights: 3, + ipEntityDetail: 4, + domainEntityDetail: 5, + appEntityDetail: 6 } export const position = { diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue index 4700bc3d..7cb78f08 100644 --- a/src/views/charts/Chart.vue +++ b/src/views/charts/Chart.vue @@ -632,7 +632,7 @@ export default { immediate: true, deep: true, handler (n, o) { - if (n) { + if (n && o) { this.$nextTick(() => { this.initChart() }) @@ -643,7 +643,6 @@ export default { setup (props) { const chartInfo = JSON.parse(JSON.stringify(props.chart)) chartInfo.category = getTypeCategory(props.chart.type) - chartInfo.params = chartInfo.params ? JSON.parse(chartInfo.params) : null return { chartInfo, layoutConstant, diff --git a/src/views/charts/Panel.vue b/src/views/charts/Panel.vue index 38ce773e..df206b9b 100644 --- a/src/views/charts/Panel.vue +++ b/src/views/charts/Panel.vue @@ -40,6 +40,10 @@ import TimeRefresh from '@/components/common/TimeRange/TimeRefresh' export default { name: 'Panel', + props: { + typeName: String, + entity: Object + }, components: { Chart, DateTimeRange, @@ -61,7 +65,7 @@ export default { const panel = ref({}) let panelType = 1 // 取得panel的type const { params } = useRoute() - panelTypeAndRouteMapping[params.typeName] && (panelType = panelTypeAndRouteMapping[params.typeName]) + panelType = props.typeName ? panelTypeAndRouteMapping[props.typeName] : panelTypeAndRouteMapping[params.typeName] return { panelType, panel, @@ -78,10 +82,23 @@ export default { if (this.panel.id) { this.chartList = (await getChartList({ panelId: this.panel.id, pageSize: -1 })).map(chart => { chart.i = chart.id + this.recursionParamsConvert(chart) return chart }) } }, + recursionParamsConvert (chart) { + console.info(chart) + chart.params = chart.params ? JSON.parse(chart.params) : null + if (this.entity) { + chart.params = { ...chart.params, ...this.entity } + } + if (!this.$_.isEmpty(chart.children)) { + chart.children.forEach(c => { + this.recursionParamsConvert(c) + }) + } + }, timeRefreshChange () { if (!this.$refs.dateTimeRange.isCustom) { const value = this.timeFilter.dateRangeValue diff --git a/src/views/entities/EntityExplorer.vue b/src/views/entities/EntityExplorer.vue index c4d637c6..e5d554fb 100644 --- a/src/views/entities/EntityExplorer.vue +++ b/src/views/entities/EntityExplorer.vue @@ -1,5 +1,5 @@