From 9fc6cedca3d09a4de82075a4e6cd74c24dc249f3 Mon Sep 17 00:00:00 2001 From: junjie Date: Mon, 7 Feb 2022 13:13:50 +0800 Subject: [PATCH] feat: S2 Event --- .../canvas/custom-component/UserView.vue | 2 +- .../src/views/chart/chart/table/table-info.js | 105 ++++++++++++++++-- .../chart/components/ChartComponentS2.vue | 43 +++++-- frontend/src/views/chart/view/ChartEdit.vue | 29 +---- 4 files changed, 131 insertions(+), 48 deletions(-) diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue index d03de10662..74903dd566 100644 --- a/frontend/src/components/canvas/custom-component/UserView.vue +++ b/frontend/src/components/canvas/custom-component/UserView.vue @@ -55,7 +55,7 @@ class="table-class" /> -
+
diff --git a/frontend/src/views/chart/chart/table/table-info.js b/frontend/src/views/chart/chart/table/table-info.js index 83159b6fb0..6c0875653c 100644 --- a/frontend/src/views/chart/chart/table/table-info.js +++ b/frontend/src/views/chart/chart/table/table-info.js @@ -15,14 +15,56 @@ export function baseTableInfo(s2, container, chart, action, tableData) { const columns = [] const meta = [] - fields.forEach(ele => { - columns.push(ele.dataeaseName) - meta.push({ - field: ele.dataeaseName, - name: ele.name + // add drill list + if (chart.drill) { + let drillFields = [] + try { + drillFields = JSON.parse(chart.drillFields) + } catch (err) { + drillFields = JSON.parse(JSON.stringify(chart.drillFields)) + } + + const drillField = drillFields[chart.drillFilters.length] + + const drillFilters = JSON.parse(JSON.stringify(chart.drillFilters)) + const drillExp = drillFilters[drillFilters.length - 1].datasetTableField + + // 移除所有下钻字段 + const removeField = [] + for (let i = 0; i < chart.drillFilters.length; i++) { + const ele = chart.drillFilters[i].datasetTableField + removeField.push(ele.dataeaseName) + } + + // build field + fields.forEach(ele => { + if (removeField.indexOf(ele.dataeaseName) < 0) { + // 用下钻字段替换当前字段 + if (drillExp.dataeaseName === ele.dataeaseName) { + columns.push(drillField.dataeaseName) + meta.push({ + field: drillField.dataeaseName, + name: drillField.name + }) + } else { + columns.push(ele.dataeaseName) + meta.push({ + field: ele.dataeaseName, + name: ele.name + }) + } + } }) - }) + } else { + fields.forEach(ele => { + columns.push(ele.dataeaseName) + meta.push({ + field: ele.dataeaseName, + name: ele.name + }) + }) + } // data config const s2DataConfig = { @@ -71,14 +113,50 @@ export function baseTableNormal(s2, container, chart, action, tableData) { const columns = [] const meta = [] - fields.forEach(ele => { - columns.push(ele.dataeaseName) - meta.push({ - field: ele.dataeaseName, - name: ele.name + // add drill list + if (chart.drill) { + const drillFields = JSON.parse(chart.drillFields) + const drillField = drillFields[chart.drillFilters.length] + + const drillFilters = JSON.parse(JSON.stringify(chart.drillFilters)) + const drillExp = drillFilters[drillFilters.length - 1].datasetTableField + + // 移除所有下钻字段 + const removeField = [] + for (let i = 0; i < chart.drillFilters.length; i++) { + const ele = chart.drillFilters[i].datasetTableField + removeField.push(ele.dataeaseName) + } + + // build field + fields.forEach(ele => { + if (removeField.indexOf(ele.dataeaseName) < 0) { + // 用下钻字段替换当前字段 + if (drillExp.dataeaseName === ele.dataeaseName) { + columns.push(drillField.dataeaseName) + meta.push({ + field: drillField.dataeaseName, + name: drillField.name + }) + } else { + columns.push(ele.dataeaseName) + meta.push({ + field: ele.dataeaseName, + name: ele.name + }) + } + } }) - }) + } else { + fields.forEach(ele => { + columns.push(ele.dataeaseName) + meta.push({ + field: ele.dataeaseName, + name: ele.name + }) + }) + } // data config const s2DataConfig = { @@ -103,6 +181,9 @@ export function baseTableNormal(s2, container, chart, action, tableData) { } s2 = new TableSheet(containerDom, s2DataConfig, s2Options) + // click + s2.on(S2Event.DATA_CELL_CLICK, action) + // theme const customTheme = getCustomTheme(chart) s2.setThemeCfg({ theme: customTheme }) diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue index 42b9593482..0b9f2d4490 100644 --- a/frontend/src/views/chart/components/ChartComponentS2.vue +++ b/frontend/src/views/chart/components/ChartComponentS2.vue @@ -5,8 +5,8 @@

{{ chart.title }}

-
-
+
+
{{ $t('chart.total') }} @@ -207,18 +207,37 @@ export default { }, antVAction(param) { + console.log(param, 'param') const cell = this.myChart.getCell(param.target) const meta = cell.getMeta() - console.log(meta) + console.log(meta, 'meta') let xAxis = [] if (this.chart.xaxis) { xAxis = JSON.parse(this.chart.xaxis) } - let field = {} - if (meta.colIndex < xAxis.length) { - field = xAxis[meta.colIndex] + let drillFields = [] + if (this.chart.drillFields) { + try { + drillFields = JSON.parse(this.chart.drillFields) + } catch (err) { + drillFields = JSON.parse(JSON.stringify(this.chart.drillFields)) + } } + + let field = {} + if (this.chart.drill) { + field = drillFields[this.chart.drillFilters.length] + // check click field is drill? + if (field.dataeaseName !== meta.valueField) { + return + } + } else { + if (meta.colIndex < xAxis.length) { + field = xAxis[meta.colIndex] + } + } + const dimensionList = [] dimensionList.push({ id: field.id, value: meta.fieldValue }) this.pointParam = { @@ -226,13 +245,13 @@ export default { dimensionList: dimensionList } } - console.log(this.pointParam) + console.log(this.pointParam, 'pointParam') if (this.trackMenu.length < 2) { // 只有一个事件直接调用 this.trackClick(this.trackMenu[0]) } else { // 视图关联多个事件 - this.trackBarStyle.left = 50 + 'px' - this.trackBarStyle.top = (50 + 10) + 'px' + this.trackBarStyle.left = param.x + 'px' + this.trackBarStyle.top = (param.y + 10) + 'px' this.$refs.viewTrack.trackButtonClick() } }, @@ -360,6 +379,12 @@ export default { .table-dom-normal{ height:100%; } +.table-dom-info-drill{ + height:calc(100% - 36px - 12px); +} +.table-dom-normal-drill{ + height:calc(100% - 12px); +} .table-page{ display: flex; align-items: center; diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index 73c15a2f72..e9b0c4be34 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -483,7 +483,7 @@
@@ -798,7 +798,7 @@
-
+
@@ -1325,7 +1325,7 @@ export default { view.customAttr.label.show = true } if (view.type === 'liquid' || - view.type.includes('table') || + (view.type.includes('table') && view.render === 'echarts') || view.type.includes('text') || view.type.includes('gauge')) { view.drillFields = [] @@ -1347,22 +1347,6 @@ export default { delete view.data return view }, - save(getData, trigger, needRefreshGroup = false, switchType = false) { - const view = this.buildParam(getData, trigger, needRefreshGroup, switchType) - if (!view) return - post('/chart/view/save', view).then(response => { - if (getData) { - this.resetDrill() - this.getData(response.data.id) - } else { - this.getChart(response.data.id) - } - if (needRefreshGroup) { - this.refreshGroup(view) - } - this.closeChangeChart() - }) - }, calcData(getData, trigger, needRefreshGroup = false, switchType = false) { this.hasEdit = true const view = this.buildParam(getData, trigger, needRefreshGroup, switchType) @@ -1501,14 +1485,7 @@ export default { this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {} this.view.customStyle = this.view.customStyle ? JSON.parse(this.view.customStyle) : {} this.view.customFilter = this.view.customFilter ? JSON.parse(this.view.customFilter) : {} - - response.data.data = this.data - this.chart = response.data - - this.chart.drill = this.drill - // this.httpRequest.status = true }).catch(err => { - // this.resetView() this.httpRequest.status = err.response.data.success this.httpRequest.msg = err.response.data.message return true