From 6202c76ba9070b7287c51fbb6f3fc2eaa9def8d2 Mon Sep 17 00:00:00 2001 From: dataeaseShu <106045316+dataeaseShu@users.noreply.github.com> Date: Wed, 28 Dec 2022 18:42:31 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A1=80=E7=BC=98=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E9=9B=86=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../system/relationship/consanguinity.vue | 38 +++--- .../src/views/system/relationship/index.vue | 125 ++---------------- 2 files changed, 35 insertions(+), 128 deletions(-) diff --git a/frontend/src/views/system/relationship/consanguinity.vue b/frontend/src/views/system/relationship/consanguinity.vue index 17a03e77ef..bbdaa7e480 100644 --- a/frontend/src/views/system/relationship/consanguinity.vue +++ b/frontend/src/views/system/relationship/consanguinity.vue @@ -11,10 +11,6 @@ import { } from '@/api/chart/chart.js' export default { props: { - current: { - type: Object, - default: () => {} - }, chartSize: { type: Object, default: () => {} @@ -23,6 +19,8 @@ export default { data() { return { measureText: null, + current: {}, + activeId: '', treeData: [], myChart: null, datasourcePanel: { @@ -43,8 +41,11 @@ export default { } }, methods: { - getChartData(id) { - switch (this.current.queryType) { + getChartData(current) { + this.current = {...current} + const { queryType, num: id } = current + this.activeId = id + switch (queryType) { case 'datasource': this.getDatasourceRelationship(id) break @@ -68,9 +69,14 @@ export default { }, getDatasetRelationship(id) { getDatasetRelationship(id).then((res) => { + const { id, name } = res.data + res.data.id = this.current.num + res.data.name = this.current.label + res.data.type = this.current.queryType const arr = res.data ? [res.data] : [] + this.current = { num: id, label: name, queryType: 'datasource' } this.treeData = [] - this.dfsTree(arr, this.current.num) + this.dfsTree(arr, id) this.initEchart() }) }, @@ -89,12 +95,14 @@ export default { this.dfsTreeFlip(subRelation, { id, name }) } else if (type === 'dataset') { this.treeData.push({ id, name, type, pid: this.current.num }) - this.treeData.push({ - id: obj.id, - name: obj.name, - type: 'datasource', - pid: id - }) + if (obj.id) { + this.treeData.push({ + id: obj.id, + name: obj.name, + type: 'datasource', + pid: id + }) + } } }) }, @@ -374,7 +382,7 @@ export default { ], //相对位置 z2: 10, style: { - text: api.value(5), //data中取值 + text: isNaN(api.value(5)) ? data.find(ele => ele[4] === api.value(4))[5] : api.value(5), //data中取值 color: '#1F2329', x: 5, y: 5 @@ -405,7 +413,7 @@ export default { ), style: { ...api.style(), - fill: api.value(4) === that.current.num ? '#c2d4ff' : 'none', + fill: api.value(4) === that.activeId ? '#c2d4ff' : 'none', stroke: '#3370FF' } } diff --git a/frontend/src/views/system/relationship/index.vue b/frontend/src/views/system/relationship/index.vue index b6b0aae437..49a3c4b8ff 100644 --- a/frontend/src/views/system/relationship/index.vue +++ b/frontend/src/views/system/relationship/index.vue @@ -50,14 +50,14 @@
@@ -204,6 +204,10 @@ export default { this.getChartSize() }, methods: { + activeQueryType(activeIcon) { + this.activeIcon = activeIcon + this.onSubmit() + }, async searchDetail(id, queryType) { switch (queryType) { case 'datasource': @@ -247,9 +251,13 @@ export default { }, getDatasetRelationship(id) { getDatasetRelationship(id).then((res) => { + const { id, name } = res.data + res.data.id = this.current.num + res.data.name = this.current.label + res.data.type = this.current.queryType const arr = res.data ? [res.data] : [] this.treeData = [] - this.dfsTree(arr, this.current) + this.dfsTree(arr, { num: id, label: name, queryType: 'datasource' }) this.initTable() }) }, @@ -352,9 +360,7 @@ export default { if (this.activeIcon === 'date') { this.getChartData() } else { - this.$refs.consanguinity.getChartData( - this.formInline.dataSourceName - ) + this.$refs.consanguinity.getChartData(this.current) } } }) @@ -367,113 +373,6 @@ export default { handleCurrentChange(currentPage) { this.paginationConfig.currentPage = currentPage this.onSubmit() - }, - initTree() { - const chartDom = document.getElementById('consanguinity') - this.treeChart = this.$echarts.init(chartDom) - const data = { - name: 'flare', - children: [ - { - name: 'data', - children: [ - { - name: 'converters', - children: [ - { name: 'Converters', value: 721 }, - { name: 'DelimitedTextConverter', value: 4294 } - ] - }, - { - name: 'DataUtil', - value: 3322 - } - ] - }, - { - name: 'display', - children: [ - { name: 'DirtySprite', value: 8833 }, - { name: 'LineSprite', value: 1732 }, - { name: 'RectSprite', value: 3623 } - ] - }, - { - name: 'flex', - children: [{ name: 'FlareVis', value: 4116 }] - }, - { - name: 'scale', - children: [ - { name: 'IScaleMap', value: 2105 }, - { name: 'LinearScale', value: 1316 }, - { name: 'LogScale', value: 3151 }, - { name: 'OrdinalScale', value: 3770 }, - { name: 'QuantileScale', value: 2435 }, - { name: 'QuantitativeScale', value: 4839 }, - { name: 'RootScale', value: 1756 }, - { name: 'Scale', value: 4268 }, - { name: 'ScaleType', value: 1821 }, - { name: 'TimeScale', value: 5833 } - ] - } - ] - } - - const option = { - tooltip: { - trigger: 'item', - triggerOn: 'mousemove' - }, - series: [ - { - type: 'tree', - id: 0, - name: 'tree1', - data: [data], - top: '10%', - left: '8%', - bottom: '22%', - right: '20%', - symbolSize: 0, - edgeShape: 'polyline', - edgeForkPosition: '50%', - initialTreeDepth: 3, - lineStyle: { - width: 2 - }, - label: { - formatter: function (a, b) { - return [`{a|${a.data.name}a}`].join('\n') - }, - - rich: { - a: { - color: 'red', - backgroundColor: '#fff', - lineHeight: 10, - borderColor: '#DCDFE6', - borderWidth: '1', - borderRadius: 2, - padding: [5, 10] - } - } - }, - leaves: { - label: { - position: 'right', - verticalAlign: 'middle', - align: 'left' - } - }, - expandAndCollapse: true, - animationDuration: 550, - animationDurationUpdate: 750 - } - ] - } - - this.treeChart.setOption(option) } } }