From 14d676faa070289928e60189775502dd312dcca5 Mon Sep 17 00:00:00 2001 From: dataeaseShu <106045316+dataeaseShu@users.noreply.github.com> Date: Thu, 13 Oct 2022 17:06:36 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20antv=E5=9B=BE=E5=BA=93=20=E6=A0=87?= =?UTF-8?q?=E9=A2=98=E6=94=AF=E6=8C=81=E4=BF=AE=E6=94=B9=20=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E6=BA=90=E5=9B=BE=E6=A0=87=E6=9B=B4=E6=8D=A2=20?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=9B=86=E9=83=A8=E5=88=86bug=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/icons/svg/de-ds-error.svg | 12 +- frontend/src/utils/StringUtils.js | 4 +- .../chart/components/ChartComponentG2.vue | 279 ++++++++++++++++- .../chart/components/ChartComponentS2.vue | 281 +++++++++++++++++- .../component-style/TitleSelectorAntV.vue | 8 +- .../shape-attr/SizeSelectorAntV.vue | 56 +++- frontend/src/views/chart/view/ChartEdit.vue | 16 +- .../src/views/dataset/data/CalcFieldEdit.vue | 2 +- frontend/src/views/dataset/data/FieldEdit.vue | 1 + frontend/src/views/panel/edit/index.vue | 7 + .../src/views/system/datasource/DsTree.vue | 26 ++ 11 files changed, 662 insertions(+), 30 deletions(-) diff --git a/frontend/src/icons/svg/de-ds-error.svg b/frontend/src/icons/svg/de-ds-error.svg index 0626c19679..581a013ce4 100644 --- a/frontend/src/icons/svg/de-ds-error.svg +++ b/frontend/src/icons/svg/de-ds-error.svg @@ -1,13 +1,13 @@ - - - - + + + + - - + + diff --git a/frontend/src/utils/StringUtils.js b/frontend/src/utils/StringUtils.js index 36d1011eeb..923daf195a 100644 --- a/frontend/src/utils/StringUtils.js +++ b/frontend/src/utils/StringUtils.js @@ -17,9 +17,9 @@ export function randomRange(min, max) { return returnStr } -export function equalsAny(target,...sources) { +export function equalsAny(target, ...sources) { for (let i = 0; i < sources.length; i++) { - if (target === sources[i]){ + if (target === sources[i]) { return true } } diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue index d6f43b9a2f..30b6eb13f8 100644 --- a/frontend/src/views/chart/components/ChartComponentG2.vue +++ b/frontend/src/views/chart/components/ChartComponentG2.vue @@ -19,7 +19,20 @@ style="cursor: default;display: block;" >
-

{{ chart.title }}

+ +

{{ chart.title }}

{ + const chartView = JSON.parse(JSON.stringify(response.data)) + chartView.viewFields = chartView.viewFields ? JSON.parse(chartView.viewFields) : [] + chartView.xaxis = chartView.xaxis ? JSON.parse(chartView.xaxis) : [] + chartView.xaxisExt = chartView.xaxisExt ? JSON.parse(chartView.xaxisExt) : [] + chartView.yaxis = chartView.yaxis ? JSON.parse(chartView.yaxis) : [] + chartView.yaxisExt = chartView.yaxisExt ? JSON.parse(chartView.yaxisExt) : [] + chartView.extStack = chartView.extStack ? JSON.parse(chartView.extStack) : [] + chartView.drillFields = chartView.drillFields ? JSON.parse(chartView.drillFields) : [] + chartView.extBubble = chartView.extBubble ? JSON.parse(chartView.extBubble) : [] + chartView.customAttr = chartView.customAttr ? JSON.parse(chartView.customAttr) : {} + chartView.customStyle = chartView.customStyle ? JSON.parse(chartView.customStyle) : {} + chartView.customFilter = chartView.customFilter ? JSON.parse(chartView.customFilter) : {} + chartView.senior = chartView.senior ? JSON.parse(chartView.senior) : {} + const viewSave = this.buildParam(chartView, true, 'chart', false, false) + if (!viewSave) return + viewEditSave(this.panelInfo.id, viewSave).then(() => { + bus.$emit('aside-set-title', this.chart.title) + }) + this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true }) + }) + }, + handleTitleEditer() { + if (this.mainActiveName !== 'PanelEdit') return + this.chartTitleEditer = true + this.chartTitleUpdate = this.chart.title + this.$nextTick(() => { + this.$refs.chartTitle.focus() + }) + }, + buildParam(chartView, getData, trigger, needRefreshGroup = false, switchType = false, switchRender = false) { + if (!chartView.resultCount || + chartView.resultCount === '' || + isNaN(Number(chartView.resultCount)) || + String(chartView.resultCount).includes('.') || + parseInt(chartView.resultCount) < 1) { + chartView.resultCount = '1000' + } + const view = JSON.parse(JSON.stringify(chartView)) + view.id = chartView.id + view.sceneId = chartView.sceneId + view.name = this.chartTitleUpdate + view.title = this.chartTitleUpdate + view.tableId = chartView.tableId + if (view.type === 'map' && view.xaxis.length > 1) { + view.xaxis = [view.xaxis[0]] + } + view.xaxis.forEach(function(ele) { + if (!ele.dateStyle || ele.dateStyle === '') { + ele.dateStyle = 'y_M_d' + } + if (!ele.datePattern || ele.datePattern === '') { + ele.datePattern = 'date_sub' + } + if (!ele.sort || ele.sort === '') { + ele.sort = 'none' + } + if (!ele.filter) { + ele.filter = [] + } + }) + if (view.type === 'table-pivot' || view.type === 'bar-group') { + view.xaxisExt.forEach(function(ele) { + if (!ele.dateStyle || ele.dateStyle === '') { + ele.dateStyle = 'y_M_d' + } + if (!ele.datePattern || ele.datePattern === '') { + ele.datePattern = 'date_sub' + } + if (!ele.sort || ele.sort === '') { + ele.sort = 'none' + } + if (!ele.filter) { + ele.filter = [] + } + }) + } + if (view.type === 'map' && view.yaxis.length > 1) { + view.yaxis = [view.yaxis[0]] + } + view.yaxis.forEach(function(ele) { + if (!ele.chartType) { + ele.chartType = 'bar' + } + if (ele.chartId) { + ele.summary = '' + } else { + if (!ele.summary || ele.summary === '') { + if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) { + ele.summary = 'count' + } else { + ele.summary = 'sum' + } + } + } + + if (!ele.sort || ele.sort === '') { + ele.sort = 'none' + } + if (!ele.filter) { + ele.filter = [] + } + if (!ele.compareCalc) { + ele.compareCalc = compareItem + } + }) + if (view.type === 'chart-mix') { + view.yaxisExt.forEach(function(ele) { + if (!ele.chartType) { + ele.chartType = 'bar' + } + if (ele.chartId) { + ele.summary = '' + } else { + if (!ele.summary || ele.summary === '') { + if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) { + ele.summary = 'count' + } else { + ele.summary = 'sum' + } + } + } + + if (!ele.sort || ele.sort === '') { + ele.sort = 'none' + } + if (!ele.filter) { + ele.filter = [] + } + if (!ele.compareCalc) { + ele.compareCalc = compareItem + } + }) + } + view.extStack.forEach(function(ele) { + if (!ele.dateStyle || ele.dateStyle === '') { + ele.dateStyle = 'y_M_d' + } + if (!ele.datePattern || ele.datePattern === '') { + ele.datePattern = 'date_sub' + } + if (!ele.sort || ele.sort === '') { + ele.sort = 'none' + } + }) + view.extBubble.forEach(function(ele) { + if (!ele.summary || ele.summary === '') { + if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) { + ele.summary = 'count' + } else { + ele.summary = 'sum' + } + } + }) + if (view.type === 'label') { + if (view.xaxis.length > 1) { + view.xaxis.splice(1, view.xaxis.length) + } + } + if (view.type.startsWith('pie') || + view.type.startsWith('funnel') || + view.type.startsWith('text') || + view.type.startsWith('gauge') || + view.type === 'treemap' || + view.type === 'liquid' || + view.type === 'word-cloud' || + view.type === 'waterfall' || + view.type.includes('group')) { + if (view.yaxis.length > 1) { + view.yaxis.splice(1, view.yaxis.length) + } + } + if (view.type === 'line-stack' && trigger === 'chart') { + view.customAttr.size.lineArea = true + } + if (view.type === 'line' && trigger === 'chart') { + view.customAttr.size.lineArea = false + } + if (view.type === 'treemap' && trigger === 'chart') { + view.customAttr.label.show = true + } + if (view.type === 'liquid' || + (view.type.includes('table') && view.render === 'echarts') || + view.type.includes('text') || + view.type.includes('gauge') || + view.type === 'table-pivot') { + view.drillFields = [] + } + view.customFilter.forEach(function(ele) { + if (ele && !ele.filter) { + ele.filter = [] + } + }) + view.xaxis = JSON.stringify(view.xaxis) + view.viewFields = JSON.stringify(view.viewFields) + view.xaxisExt = JSON.stringify(view.xaxisExt) + view.yaxis = JSON.stringify(view.yaxis) + view.yaxisExt = JSON.stringify(view.yaxisExt) + view.customAttr = JSON.stringify(view.customAttr) + view.customStyle = JSON.stringify(view.customStyle) + view.customFilter = JSON.stringify(view.customFilter) + view.extStack = JSON.stringify(view.extStack) + view.drillFields = JSON.stringify(view.drillFields) + view.extBubble = JSON.stringify(view.extBubble) + view.senior = JSON.stringify(view.senior) + delete view.data + return view + }, + changeEditStatus() { + this.lostFocus() + if (this.chartTitleUpdate.length > 50) { + this.$error(this.$t('chart.title_limit')) + return + } + if (this.chartTitleUpdate === this.chart.title) return + this.chart.title = this.chartTitleUpdate + this.getChartDetail() + }, initRemark() { this.remarkCfg = getRemark(this.chart) } @@ -392,4 +646,27 @@ export default { diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue index ba1803bd19..0f43df2011 100644 --- a/frontend/src/views/chart/components/ChartComponentS2.vue +++ b/frontend/src/views/chart/components/ChartComponentS2.vue @@ -19,7 +19,20 @@ style="cursor: default;display: block;" >
-

{{ chart.title }}

+ +

{{ chart.title }}

{ + const chartView = JSON.parse(JSON.stringify(response.data)) + chartView.viewFields = chartView.viewFields ? JSON.parse(chartView.viewFields) : [] + chartView.xaxis = chartView.xaxis ? JSON.parse(chartView.xaxis) : [] + chartView.xaxisExt = chartView.xaxisExt ? JSON.parse(chartView.xaxisExt) : [] + chartView.yaxis = chartView.yaxis ? JSON.parse(chartView.yaxis) : [] + chartView.yaxisExt = chartView.yaxisExt ? JSON.parse(chartView.yaxisExt) : [] + chartView.extStack = chartView.extStack ? JSON.parse(chartView.extStack) : [] + chartView.drillFields = chartView.drillFields ? JSON.parse(chartView.drillFields) : [] + chartView.extBubble = chartView.extBubble ? JSON.parse(chartView.extBubble) : [] + chartView.customAttr = chartView.customAttr ? JSON.parse(chartView.customAttr) : {} + chartView.customStyle = chartView.customStyle ? JSON.parse(chartView.customStyle) : {} + chartView.customFilter = chartView.customFilter ? JSON.parse(chartView.customFilter) : {} + chartView.senior = chartView.senior ? JSON.parse(chartView.senior) : {} + const viewSave = this.buildParam(chartView, true, 'chart', false, false) + if (!viewSave) return + viewEditSave(this.panelInfo.id, viewSave).then(() => { + bus.$emit('aside-set-title', this.chart.title) + }) + this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true }) + }) + }, + handleTitleEditer() { + if (this.mainActiveName !== 'PanelEdit') return + this.chartTitleEditer = true + this.chartTitleUpdate = this.chart.title + this.$nextTick(() => { + this.$refs.chartTitle.focus() + }) + }, + buildParam(chartView, getData, trigger, needRefreshGroup = false, switchType = false, switchRender = false) { + if (!chartView.resultCount || + chartView.resultCount === '' || + isNaN(Number(chartView.resultCount)) || + String(chartView.resultCount).includes('.') || + parseInt(chartView.resultCount) < 1) { + chartView.resultCount = '1000' + } + const view = JSON.parse(JSON.stringify(chartView)) + view.id = chartView.id + view.sceneId = chartView.sceneId + view.name = this.chartTitleUpdate + view.title = this.chartTitleUpdate + view.tableId = chartView.tableId + if (view.type === 'map' && view.xaxis.length > 1) { + view.xaxis = [view.xaxis[0]] + } + view.xaxis.forEach(function(ele) { + if (!ele.dateStyle || ele.dateStyle === '') { + ele.dateStyle = 'y_M_d' + } + if (!ele.datePattern || ele.datePattern === '') { + ele.datePattern = 'date_sub' + } + if (!ele.sort || ele.sort === '') { + ele.sort = 'none' + } + if (!ele.filter) { + ele.filter = [] + } + }) + if (view.type === 'table-pivot' || view.type === 'bar-group') { + view.xaxisExt.forEach(function(ele) { + if (!ele.dateStyle || ele.dateStyle === '') { + ele.dateStyle = 'y_M_d' + } + if (!ele.datePattern || ele.datePattern === '') { + ele.datePattern = 'date_sub' + } + if (!ele.sort || ele.sort === '') { + ele.sort = 'none' + } + if (!ele.filter) { + ele.filter = [] + } + }) + } + if (view.type === 'map' && view.yaxis.length > 1) { + view.yaxis = [view.yaxis[0]] + } + view.yaxis.forEach(function(ele) { + if (!ele.chartType) { + ele.chartType = 'bar' + } + if (ele.chartId) { + ele.summary = '' + } else { + if (!ele.summary || ele.summary === '') { + if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) { + ele.summary = 'count' + } else { + ele.summary = 'sum' + } + } + } + if (!ele.sort || ele.sort === '') { + ele.sort = 'none' + } + if (!ele.filter) { + ele.filter = [] + } + if (!ele.compareCalc) { + ele.compareCalc = compareItem + } + }) + if (view.type === 'chart-mix') { + view.yaxisExt.forEach(function(ele) { + if (!ele.chartType) { + ele.chartType = 'bar' + } + if (ele.chartId) { + ele.summary = '' + } else { + if (!ele.summary || ele.summary === '') { + if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) { + ele.summary = 'count' + } else { + ele.summary = 'sum' + } + } + } + + if (!ele.sort || ele.sort === '') { + ele.sort = 'none' + } + if (!ele.filter) { + ele.filter = [] + } + if (!ele.compareCalc) { + ele.compareCalc = compareItem + } + }) + } + view.extStack.forEach(function(ele) { + if (!ele.dateStyle || ele.dateStyle === '') { + ele.dateStyle = 'y_M_d' + } + if (!ele.datePattern || ele.datePattern === '') { + ele.datePattern = 'date_sub' + } + if (!ele.sort || ele.sort === '') { + ele.sort = 'none' + } + }) + view.extBubble.forEach(function(ele) { + if (!ele.summary || ele.summary === '') { + if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) { + ele.summary = 'count' + } else { + ele.summary = 'sum' + } + } + }) + if (view.type === 'label') { + if (view.xaxis.length > 1) { + view.xaxis.splice(1, view.xaxis.length) + } + } + if (view.type.startsWith('pie') || + view.type.startsWith('funnel') || + view.type.startsWith('text') || + view.type.startsWith('gauge') || + view.type === 'treemap' || + view.type === 'liquid' || + view.type === 'word-cloud' || + view.type === 'waterfall' || + view.type.includes('group')) { + if (view.yaxis.length > 1) { + view.yaxis.splice(1, view.yaxis.length) + } + } + if (view.type === 'line-stack' && trigger === 'chart') { + view.customAttr.size.lineArea = true + } + if (view.type === 'line' && trigger === 'chart') { + view.customAttr.size.lineArea = false + } + if (view.type === 'treemap' && trigger === 'chart') { + view.customAttr.label.show = true + } + if (view.type === 'liquid' || + (view.type.includes('table') && view.render === 'echarts') || + view.type.includes('text') || + view.type.includes('gauge') || + view.type === 'table-pivot') { + view.drillFields = [] + } + view.customFilter.forEach(function(ele) { + if (ele && !ele.filter) { + ele.filter = [] + } + }) + view.xaxis = JSON.stringify(view.xaxis) + view.viewFields = JSON.stringify(view.viewFields) + view.xaxisExt = JSON.stringify(view.xaxisExt) + view.yaxis = JSON.stringify(view.yaxis) + view.yaxisExt = JSON.stringify(view.yaxisExt) + view.customAttr = JSON.stringify(view.customAttr) + view.customStyle = JSON.stringify(view.customStyle) + view.customFilter = JSON.stringify(view.customFilter) + view.extStack = JSON.stringify(view.extStack) + view.drillFields = JSON.stringify(view.drillFields) + view.extBubble = JSON.stringify(view.extBubble) + view.senior = JSON.stringify(view.senior) + delete view.data + return view + }, + changeEditStatus() { + this.lostFocus() + if (this.chartTitleUpdate.length > 50) { + this.$error(this.$t('chart.title_limit')) + return + } + if (this.chartTitleUpdate === this.chart.title) return + this.chart.title = this.chartTitleUpdate + this.getChartDetail() + }, pageChange(val) { this.currentPage.pageSize = val this.initData() @@ -511,4 +764,28 @@ export default { .page-style ::v-deep li{ background: transparent!important; } + +.chart-input-title{ + word-break: break-word; + font: 12px / 1.231 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Microsoft YaHei", "PingFang SC", sans-serif, "Segoe UI Symbol"; + overflow: visible; + margin: 0; + padding: 0; + font-weight: 400; + font-family: inherit; + border-radius: 2px; + color: #182b50; + font-size: 12px; + line-height: 26px; + padding-left: 10px; + padding-right: 10px; + background: transparent; + outline: none; + border-width: 0px 0px 1px; + border-image: initial; + border-bottom: 1px solid rgb(200, 203, 204); + z-index: 2; + height: 21px; + min-width: 100px; +} diff --git a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue index b9f97e75fc..738bbae4b4 100644 --- a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue +++ b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue @@ -253,13 +253,19 @@ export default { computed: { ...mapState([ 'batchOptStatus' - ]) + ]), + title() { + return this.chart.name + } }, watch: { 'chart': { handler: function() { this.initData() } + }, + title(val) { + this.titleForm = { ...this.titleForm, title: val } } }, mounted() { diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue index ea05c7c8b9..fd12ccde71 100644 --- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue +++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue @@ -361,11 +361,23 @@ - {{ $t('chart.chart_bar') }} - - {{ $t('chart.adapt') }} + {{ $t('chart.chart_bar') }} + + {{ $t('chart.adapt') }} - + - {{ $t('chart.chart_line') }} + {{ $t('chart.chart_line') }} - - + + - - {{ $t('chart.line_smooth') }} + + {{ $t('chart.line_smooth') }} - {{ $t('chart.chart_scatter') }} - + {{ $t('chart.chart_scatter') }} + 0) { @@ -2354,9 +2358,9 @@ export default { this.httpRequest.msg = err.response.data.message return true }).then(() => { - //视图为编辑状态才进行转换 + // 视图为编辑状态才进行转换 if (this.editStatue) { - this.convertChart(this.chart); + this.convertChart(this.chart) this.convertChart(this.view) } }) diff --git a/frontend/src/views/dataset/data/CalcFieldEdit.vue b/frontend/src/views/dataset/data/CalcFieldEdit.vue index fa411a2b5c..44303e5044 100644 --- a/frontend/src/views/dataset/data/CalcFieldEdit.vue +++ b/frontend/src/views/dataset/data/CalcFieldEdit.vue @@ -20,7 +20,7 @@ >
- + {{ $t('dataset.field_exp') }} {{ $t('dataset.sync_field') }} +   { if (com.type === 'custom-button' && com.options.attrs.filterIds) { diff --git a/frontend/src/views/system/datasource/DsTree.vue b/frontend/src/views/system/datasource/DsTree.vue index fafff41490..673e67568c 100644 --- a/frontend/src/views/system/datasource/DsTree.vue +++ b/frontend/src/views/system/datasource/DsTree.vue @@ -330,6 +330,7 @@ export default { data() { return { tabActive: 'all', + currentNodeId: '', dsTypeRelate: false, expandedArray: [], tData: [], @@ -437,11 +438,31 @@ export default { this.key = '' this.showSearchInput = false }, + dfsTableData(arr, id) { + arr.some((ele) => { + if (ele.id === id) { + this.$refs.myDsTree?.setCurrentNode(ele) + this.showInfo({ data: ele }) + this.expandedArray.push(id) + return true + } else if (ele.children?.length) { + this.dfsTableData(ele.children, id) + } + return false + }) + }, queryTreeDatas() { this.treeLoading = true if (this.showView === 'Datasource') { listDatasource().then((res) => { this.tData = this.buildTree(res.data) + this.$nextTick(() => { + const currentNodeId = sessionStorage.getItem('datasource-current-node') + if (currentNodeId) { + sessionStorage.setItem('datasource-current-node', '') + this.dfsTableData(this.tData, currentNodeId) + } + }) }).finally(() => { this.treeLoading = false }) @@ -569,6 +590,7 @@ export default { }, nodeClick(node, data) { if (node.type === 'folder') return + this.currentNodeId = this.showView !== 'Driver' && node.id this.showInfo(data) }, clickFileMore(param) { @@ -613,6 +635,7 @@ export default { if (this.showView === 'Datasource') { const param = { ...row, ...{ showModel: 'show' }} this.switchMain('DsForm', param, this.tData, this.dsTypes) + this.currentNodeId && sessionStorage.setItem('datasource-current-node', this.currentNodeId) return } this.editDriver = true @@ -634,6 +657,9 @@ export default { } method(parma).then((res) => { if (res.success) { + if (datasource.id === this.currentNodeId) { + sessionStorage.setItem('datasource-current-node', '') + } this.openMessageSuccess('commons.delete_success') this.switchMain('', {}, this.tData, this.dsTypes) this.refreshType(datasource)