From d32043ef8bba787c4300d5473becdbe5b660e9ad Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Fri, 18 Nov 2022 15:43:32 +0800 Subject: [PATCH 1/9] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE-AntV=E6=8A=98?= =?UTF-8?q?=E7=BA=BF=E5=9B=BE):=20=E6=8A=98=E7=BA=BF=E5=9B=BE=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E9=9A=90=E8=97=8F=E6=97=A0=E6=95=B0=E6=8D=AE=E7=9A=84?= =?UTF-8?q?=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit AntV折线图支持对空数据进行处理，可选线条断开，置0或者跳过空值 https://www.tapd.cn/55578866/prong/stories/view/1155578866001009888 --- .../service/chart/util/ChartDataBuild.java | 15 ++- frontend/src/lang/en.js | 6 +- frontend/src/lang/tw.js | 6 +- frontend/src/lang/zh.js | 6 +- frontend/src/views/chart/chart/chart.js | 3 +- .../src/views/chart/chart/line/line_antv.js | 8 +- frontend/src/views/chart/chart/util.js | 117 ++++++++++++++++++ .../chart/components/senior/FunctionCfg.vue | 26 +++- frontend/src/views/chart/view/ChartEdit.vue | 2 +- 9 files changed, 174 insertions(+), 15 deletions(-) diff --git a/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java b/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java index d2351a8a3e..7af383f8bd 100644 --- a/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java +++ b/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java @@ -158,12 +158,17 @@ public class ChartDataBuild { } catch (Exception e) { axisChartDataDTO.setValue(new BigDecimal(0)); } - if ("line".equals(view.getType()) && CollectionUtils.isEmpty(xAxisExt)) { - axisChartDataDTO.setCategory(yAxis.get(j).getName()); - } else { - axisChartDataDTO.setCategory(b.toString()); - } + axisChartDataDTO.setCategory(b.toString()); dataList.add(axisChartDataDTO); + + if ("line".equals(view.getType())) { + if (CollectionUtils.isEmpty(xAxisExt)){ + axisChartDataDTO.setCategory(yAxis.get(j).getName()); + } else { + // 多指标只取第一个 + break; + } + } } } map.put("data", dataList); diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 1c29812fce..4dd9554dee 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1441,7 +1441,11 @@ export default { proportion: 'Proportion', label_content: 'Label Content', percent: 'Percent', - table_index_desc: 'Index Header Name' + table_index_desc: 'Index Header Name', + empty_data_strategy: 'Empty Data Strategy', + break_line: 'Disconnection', + set_zero: 'Set Zero', + ignore_data: 'Ignore Data' }, dataset: { spend_time: 'Spend', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index b9cb26303c..fb01fe7a53 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1441,7 +1441,11 @@ export default { proportion: '佔比', label_content: '標籤展示', percent: '占比', - table_index_desc: '表頭名稱' + table_index_desc: '表頭名稱', + empty_data_strategy: '空值處理', + break_line: '線條斷開', + set_zero: '置為0，線條不斷開', + ignore_data: '跳過空值，不展示' }, dataset: { spend_time: '耗時', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 6de5ff7443..08630abd18 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1440,7 +1440,11 @@ export default { proportion: '占比', label_content: '标签展示', percent: '占比', - table_index_desc: '表头名称' + table_index_desc: '表头名称', + empty_data_strategy: '空值处理', + break_line: '线条断开', + set_zero: '置为0,线条不断开', + ignore_data: '跳过空值,不展示' }, dataset: { spend_time: '耗时', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index c2c3bf250a..a8e389b72d 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -434,7 +434,8 @@ export const DEFAULT_FUNCTION_CFG = { sliderRange: [0, 10], sliderBg: '#FFFFFF', sliderFillBg: '#BCD6F1', - sliderTextClolor: '#999999' + sliderTextClolor: '#999999', + emptyDataStrategy: 'breakLine' } export const DEFAULT_THRESHOLD = { gaugeThreshold: '', diff --git a/frontend/src/views/chart/chart/line/line_antv.js b/frontend/src/views/chart/chart/line/line_antv.js index 52cd766dfe..4616c7e695 100644 --- a/frontend/src/views/chart/chart/line/line_antv.js +++ b/frontend/src/views/chart/chart/line/line_antv.js @@ -10,7 +10,8 @@ import { getSlider, getAnalyse } from '@/views/chart/chart/common/common_antv' -import { antVCustomColor } from '@/views/chart/chart/util' +import { antVCustomColor, handleEmptyDataStrategy } from '@/views/chart/chart/util' +import _ from 'lodash' export function baseLineOptionAntV(plot, container, chart, action) { // theme @@ -23,7 +24,7 @@ export function baseLineOptionAntV(plot, container, chart, action) { const xAxis = getXAxis(chart) const yAxis = getYAxis(chart) // data - const data = chart.data.data + const data = _.cloneDeep(chart.data.data) // config const slider = getSlider(chart) const analyse = getAnalyse(chart) @@ -87,7 +88,8 @@ export function baseLineOptionAntV(plot, container, chart, action) { } // custom color options.color = antVCustomColor(chart) - + const emptyDataStrategy = chart.senior ? JSON.parse(chart.senior)?.functionCfg.emptyDataStrategy : 'breakLine' + handleEmptyDataStrategy(emptyDataStrategy, chart, data, options) // 开始渲染 if (plot) { plot.destroy() diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js index 3c6faa1616..8e51b103d0 100644 --- a/frontend/src/views/chart/chart/util.js +++ b/frontend/src/views/chart/chart/util.js @@ -3304,3 +3304,120 @@ export function getRemark(chart) { } export const quotaViews = ['label', 'richTextView', 'text', 'gauge', 'liquid'] + +export function handleEmptyDataStrategy(strategy, chart, data, options) { + if (!data?.length) { + return + } + if (strategy === 'ignoreData') { + handleIgnoreData(chart, data) + return + } + const yaxis = JSON.parse(chart.yaxis) + const extAxis = JSON.parse(chart.xaxisExt) + const multiDimension = yaxis?.length >= 2 || extAxis?.length > 0 + switch (strategy) { + case 'breakLine': { + if (multiDimension) { + // 多维度线条断开 + handleBreakLineMultiDimension(chart, data, options) + } else { + // 单维度线条断开 + options.connectNulls = false + } + break + } + case 'setZero': { + if (multiDimension > 0) { + // 多维度置0 + handleSetZeroMultiDimension(chart, data, options) + } else { + // 单维度置0 + handleSetZeroSingleDimension(chart, data, options) + } + break + } + default: + break + } +} + +function handleBreakLineMultiDimension(chart, data, options) { + options.connectNulls = false + const dimensionInfoMap = new Map() + const subDimensionSet = new Set() + for (let i = 0; i < data.length; i++) { + const item = data[i] + const dimensionInfo = dimensionInfoMap.get(item.field) + if (dimensionInfo) { + dimensionInfo.set.add(item.category) + } else { + dimensionInfoMap.set(item.field, { set: new Set([item.category]), index: i }) + } + subDimensionSet.add(item.category) + } + // Map 是按照插入顺序排序的，所以插入索引往后推 + let insertCount = 0 + dimensionInfoMap.forEach((dimensionInfo, field) => { + if (dimensionInfo.set.size < subDimensionSet.size) { + const toBeFillDimension = [...subDimensionSet].filter(item => !dimensionInfo.set.has(item)) + toBeFillDimension.forEach(dimension => { + data.splice(dimensionInfo.index + insertCount, 0, { + field, + value: null, + category: dimension + }) + }) + insertCount += toBeFillDimension.size + } + }) +} + +function handleSetZeroMultiDimension(chart, data) { + const dimensionInfoMap = new Map() + const subDimensionSet = new Set() + for (let i = 0; i < data.length; i++) { + const item = data[i] + if (item.value === null) { + item.value = 0 + } + const dimensionInfo = dimensionInfoMap.get(item.field) + if (dimensionInfo) { + dimensionInfo.set.add(item.category) + } else { + dimensionInfoMap.set(item.field, { set: new Set([item.category]), index: i }) + } + subDimensionSet.add(item.category) + } + let insertCount = 0 + dimensionInfoMap.forEach((dimensionInfo, field) => { + if (dimensionInfo.set.size < subDimensionSet.size) { + const toBeFillDimension = [...subDimensionSet].filter(item => !dimensionInfo.set.has(item)) + toBeFillDimension.forEach(dimension => { + data.splice(dimensionInfo.index + insertCount, 0, { + field, + value: 0, + category: dimension + }) + }) + insertCount += toBeFillDimension.size + } + }) +} + +function handleSetZeroSingleDimension(chart, data) { + data.forEach(item => { + if (item.value === null) { + item.value = 0 + } + }) +} + +function handleIgnoreData(chart, data) { + for (let i = data.length - 1; i >= 0; i--) { + const item = data[i] + if (item.value === null) { + data.splice(i, 1) + } + } +} diff --git a/frontend/src/views/chart/components/senior/FunctionCfg.vue b/frontend/src/views/chart/components/senior/FunctionCfg.vue index 4c76c7159a..4fe2252ca1 100644 --- a/frontend/src/views/chart/components/senior/FunctionCfg.vue +++ b/frontend/src/views/chart/components/senior/FunctionCfg.vue @@ -67,6 +67,20 @@ @change="changeFunctionCfg" /> + + + {{ $t('chart.break_line') }} + {{ $t('chart.set_zero') }} + {{ $t('chart.ignore_data') }} + + @@ -110,7 +124,7 @@ export default { senior = JSON.parse(chart.senior) } if (senior.functionCfg) { - this.functionForm = senior.functionCfg + this.functionForm = { ...DEFAULT_FUNCTION_CFG, ...senior.functionCfg } } else { this.functionForm = JSON.parse(JSON.stringify(DEFAULT_FUNCTION_CFG)) } @@ -123,7 +137,7 @@ export default { } - diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index 12c77740fc..b7535804c2 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -2059,7 +2059,7 @@ export default { ele.filter = [] } }) - if (view.type === 'table-pivot' || view.type === 'bar-group') { + if (view.type === 'table-pivot' || view.type === 'bar-group' || (view.render === 'antv' && view.type === 'line')) { view.xaxisExt.forEach(function(ele) { if (!ele.dateStyle || ele.dateStyle === '') { ele.dateStyle = 'y_M_d' From a4414bcb94d229ef338c2625f29e05c7ef563e06 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Fri, 18 Nov 2022 16:38:15 +0800 Subject: [PATCH 2/9] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?= =?UTF-8?q?=E4=BB=AA=E8=A1=A8=E6=9D=BF=E8=87=AA=E5=8A=A8=E5=88=B7=E6=96=B0?= =?UTF-8?q?=E6=97=B6=E6=B8=85=E7=90=86=E8=81=94=E5=8A=A8=E6=9D=A1=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/canvas/components/editor/Preview.vue | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/src/components/canvas/components/editor/Preview.vue b/frontend/src/components/canvas/components/editor/Preview.vue index 770930e288..15a5186b6e 100644 --- a/frontend/src/components/canvas/components/editor/Preview.vue +++ b/frontend/src/components/canvas/components/editor/Preview.vue @@ -501,10 +501,15 @@ export default { } } this.timer = setInterval(() => { + this.clearAllLinkage() this.searchCount++ }, refreshTime) } }, + clearAllLinkage() { + this.$store.commit('clearPanelLinkageInfo') + bus.$emit('clear_panel_linkage', { viewId: 'all' }) + }, changeStyleWithScale, getStyle, restore() { From c6ccb414f74c3602a540d6035014b63f3aac37fb Mon Sep 17 00:00:00 2001 From: fit2cloud-chenyw Date: Fri, 18 Nov 2022 17:02:23 +0800 Subject: [PATCH 3/9] =?UTF-8?q?fix(=E5=9C=B0=E5=9B=BE):=20=E5=A4=9A?= =?UTF-8?q?=E7=B3=BB=E5=88=97=E6=95=B0=E6=8D=AE=E4=B8=8B=E9=92=BB=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/views/chart/chart/map/map.js | 4 ++-- .../src/views/chart/components/ChartComponent.vue | 14 +++++++++----- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/frontend/src/views/chart/chart/map/map.js b/frontend/src/views/chart/chart/map/map.js index 2675295976..fbc331b0cb 100644 --- a/frontend/src/views/chart/chart/map/map.js +++ b/frontend/src/views/chart/chart/map/map.js @@ -37,7 +37,7 @@ const fillGradientColor = (data, colors) => { }) return data } -export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) { +export function baseMapOption(chart_option, chart, themeStyle, curAreaCode, seriesId) { // 处理shape attr let customAttr = {} let isGradient = false @@ -45,7 +45,7 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) { if (chart.customAttr) { customAttr = JSON.parse(chart.customAttr) if (chart.yaxis && chart.yaxis.length > 1) { - let currentSeriesId = customAttr.currentSeriesId + let currentSeriesId = seriesId const yAxis = JSON.parse(chart.yaxis) if (!currentSeriesId || !yAxis.some(item => item.id === currentSeriesId)) { currentSeriesId = yAxis[0].id diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue index 89862e73df..1c8cedf253 100644 --- a/frontend/src/views/chart/components/ChartComponent.vue +++ b/frontend/src/views/chart/components/ChartComponent.vue @@ -119,7 +119,8 @@ export default { linkageActiveParam: null, buttonTextColor: null, loading: true, - showSuspension: true + showSuspension: true, + currentSeriesId: null } }, @@ -132,6 +133,11 @@ export default { ]) }, watch: { + currentSeriesId(value, old) { + if (value !== old) { + this.preDraw() + } + }, chart: { handler(newVal, oldVla) { this.preDraw() @@ -171,9 +177,7 @@ export default { if (id !== this.chart.id) { return } - const customAttr = JSON.parse(this.chart.customAttr) - customAttr.currentSeriesId = seriesId - this.chart.customAttr = JSON.stringify(customAttr) + this.currentSeriesId = seriesId }, reDrawView() { this.myChart.dispatchAction({ @@ -366,7 +370,7 @@ export default { this.buttonTextColor = null } } - const chart_option = baseMapOption(base_json, chart, this.buttonTextColor, curAreaCode) + const chart_option = baseMapOption(base_json, chart, this.buttonTextColor, curAreaCode, this.currentSeriesId) this.myEcharts(chart_option) const opt = this.myChart.getOption() if (opt && opt.series) { From 206125c4446785a0ac77b43320a4768e2365f5e0 Mon Sep 17 00:00:00 2001 From: fit2cloud-chenyw Date: Fri, 18 Nov 2022 17:13:42 +0800 Subject: [PATCH 4/9] =?UTF-8?q?fix(=E5=9C=B0=E5=9B=BE):=20=E7=BC=A9?= =?UTF-8?q?=E6=94=BE=E5=8A=9F=E8=83=BD=E5=BC=82=E5=B8=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/chart/components/map/MapController.vue | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/frontend/src/views/chart/components/map/MapController.vue b/frontend/src/views/chart/components/map/MapController.vue index 706abe3663..2f877ceae4 100644 --- a/frontend/src/views/chart/components/map/MapController.vue +++ b/frontend/src/views/chart/components/map/MapController.vue @@ -79,10 +79,19 @@ export default { this.chart.customAttr = JSON.stringify(this.customAttr) }, callParent(methodName, param) { - this.$emit(methodName, param) + this.$emit(this.toLowerLine(methodName), param) }, init() { + }, + toLowerLine(str) { + var temp = str.replace(/[A-Z]/g, function(match) { + return '-' + match.toLowerCase() + }) + if (temp.slice(0, 1) === '-') { + temp = temp.slice(1) + } + return temp } } } From 0b5520577e6dae5f7a23ada0d97605b105f7cd23 Mon Sep 17 00:00:00 2001 From: fit2cloud-chenyw Date: Fri, 18 Nov 2022 17:59:47 +0800 Subject: [PATCH 5/9] =?UTF-8?q?fix(=E7=99=BB=E5=BD=95):=20=E5=9B=BD?= =?UTF-8?q?=E9=99=85=E9=A3=9E=E4=B9=A6=E9=80=89=E9=A1=B9=E5=8D=95=E7=8B=AC?= =?UTF-8?q?=E6=97=A0=E6=B3=95=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/views/login/index.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue index 3dd8fda949..c577ca6809 100644 --- a/frontend/src/views/login/index.vue +++ b/frontend/src/views/login/index.vue @@ -259,10 +259,10 @@ export default { return this.$store.state.user.loginMsg }, qrTypes() { - return this.loginTypes && this.loginTypes.filter(item => item > 3 && item < 8) || [] + return this.loginTypes && this.loginTypes.filter(item => item > 3 && item < 7) || [] }, radioTypes() { - return this.loginTypes && this.loginTypes.filter(item => item < 4 || item > 7) || [] + return this.loginTypes && this.loginTypes.filter(item => item < 4 || item > 6) || [] } }, watch: { From 541c9dba1f7557bdb9c379dbdbe20e1ffaaabac9 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Fri, 18 Nov 2022 18:58:30 +0800 Subject: [PATCH 6/9] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?= =?UTF-8?q?=E6=82=AC=E6=B5=AE=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E7=B2=BE?= =?UTF-8?q?=E7=A1=AE=E4=BD=8D=E7=BD=AE=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvas/components/editor/SettingMenu.vue | 10 ++ frontend/src/lang/en.js | 5 + frontend/src/lang/tw.js | 5 + frontend/src/lang/zh.js | 5 + frontend/src/store/index.js | 14 +- frontend/src/views/chart/view/ChartEdit.vue | 149 +++++++++++------- .../src/views/chart/view/PositionAdjust.vue | 92 +++++++++++ frontend/src/views/panel/edit/index.vue | 7 +- 8 files changed, 223 insertions(+), 64 deletions(-) create mode 100644 frontend/src/views/chart/view/PositionAdjust.vue diff --git a/frontend/src/components/canvas/components/editor/SettingMenu.vue b/frontend/src/components/canvas/components/editor/SettingMenu.vue index 56d30a4e9c..c1c1ac35bd 100644 --- a/frontend/src/components/canvas/components/editor/SettingMenu.vue +++ b/frontend/src/components/canvas/components/editor/SettingMenu.vue @@ -90,6 +90,13 @@ {{ $t('panel.hyperlinks') }} + + + {{ $t('panel.position_adjust') }} + @@ -213,6 +220,9 @@ export default { this.showCustomSort = false }) }, + positionAdjust() { + bus.$emit('change_panel_right_draw', true) + }, edit() { if (this.curComponent.type === 'custom') { bus.$emit('component-dialog-edit', 'update') diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 4cc96873e4..1979ce85d2 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1875,6 +1875,11 @@ export default { back_parent: 'Back to previous' }, panel: { + position_adjust: 'Position', + space_top: 'Top', + space_left: 'Left', + space_width: 'Widht', + space_height: 'Height', to_top: 'To Top', down: 'Down', mobile_style_setting: 'Style setting', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 1f265b98d2..4914de9835 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1875,6 +1875,11 @@ export default { back_parent: '返回上一級' }, panel: { + position_adjust: '位置', + space_top: '上', + space_left: '左', + space_width: '寬', + space_height: '高', to_top: '置頂', down: '下載', mobile_style_setting: '樣式設置', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index f9c00523d5..88749cf7c9 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1875,6 +1875,11 @@ export default { back_parent: '返回上一级' }, panel: { + position_adjust: '位置', + space_top: '上', + space_left: '左', + space_width: '宽', + space_height: '高', to_top: '置顶', down: '下载', mobile_style_setting: '样式设置', diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js index f03e066752..64cbee8318 100644 --- a/frontend/src/store/index.js +++ b/frontend/src/store/index.js @@ -22,12 +22,10 @@ import layer from '@/components/canvas/store/layer' import snapshot from '@/components/canvas/store/snapshot' import lock from '@/components/canvas/store/lock' import task from './modules/task' -import { valueValid, formatCondition } from '@/utils/conditionUtil' +import { formatCondition, valueValid } from '@/utils/conditionUtil' import { Condition } from '@/components/widget/bean/Condition' -import { - DEFAULT_COMMON_CANVAS_STYLE_STRING -} from '@/views/panel/panel' +import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel' import bus from '@/utils/bus' import { BASE_MOBILE_STYLE } from '@/components/canvas/customComponent/component-list' import { TYPE_CONFIGS } from '@/views/chart/chart/util' @@ -236,10 +234,10 @@ const data = { setShapeStyle({ curComponent, canvasStyleData, curCanvasScaleMap }, { top, left, width, height, rotate }) { const curCanvasScaleSelf = curCanvasScaleMap[curComponent.canvasId] if (curComponent) { - if (top || top === 0) curComponent.style.top = (top / curCanvasScaleSelf.scalePointHeight) + 0.0000001 - if (left || left === 0) curComponent.style.left = (left / curCanvasScaleSelf.scalePointWidth) + 0.0000001 - if (width || width === 0) curComponent.style.width = (width / curCanvasScaleSelf.scalePointWidth + 0.0000001) - if (height || height === 0) curComponent.style.height = (height / curCanvasScaleSelf.scalePointHeight) + 0.0000001 + if (top || top === 0) curComponent.style.top = Math.round((top / curCanvasScaleSelf.scalePointHeight)) + if (left || left === 0) curComponent.style.left = Math.round((left / curCanvasScaleSelf.scalePointWidth)) + if (width || width === 0) curComponent.style.width = Math.round((width / curCanvasScaleSelf.scalePointWidth)) + if (height || height === 0) curComponent.style.height = Math.round((height / curCanvasScaleSelf.scalePointHeight)) if (rotate || rotate === 0) curComponent.style.rotate = rotate } }, diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index bd78ac4b01..30ac660e0c 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -74,7 +74,9 @@ round @click="changeDs" > - {{ $t('panel.template_view_tips') }} + {{ $t('panel.template_view_tips') }} @@ -1107,6 +1109,16 @@ + + + + {{ $t('chart.cancel') }} + >{{ $t('chart.cancel') }} + {{ $t('chart.confirm') }} + >{{ $t('chart.confirm') }} + @@ -1262,12 +1276,14 @@ {{ $t('chart.cancel') }} + >{{ $t('chart.cancel') }} + {{ $t('chart.confirm') }} + >{{ $t('chart.confirm') }} + {{ $t('chart.cancel') }} + >{{ $t('chart.cancel') }} + {{ $t('chart.confirm') }} + >{{ $t('chart.confirm') }} + {{ $t('chart.cancel') }} + >{{ $t('chart.cancel') }} + {{ $t('chart.confirm') }} + >{{ $t('chart.confirm') }} + @@ -1346,7 +1366,8 @@ {{ $t('chart.cancel') }} + >{{ $t('chart.cancel') }} + {{ $t('chart.close') }} + >{{ $t('chart.close') }} + @@ -1411,7 +1433,8 @@ size="mini" style="float: right;" @click="closeEditChartField" - >{{ $t('chart.close') }} + >{{ $t('chart.close') }} + @@ -1436,12 +1459,14 @@ {{ $t('chart.cancel') }} + >{{ $t('chart.cancel') }} + {{ $t('chart.confirm') }} + >{{ $t('chart.confirm') }} + @@ -1466,12 +1491,14 @@ {{ $t('chart.cancel') }} + >{{ $t('chart.cancel') }} + {{ $t('chart.confirm') }} + >{{ $t('chart.confirm') }} + @@ -1498,12 +1525,14 @@ {{ $t('chart.cancel') }} + >{{ $t('chart.cancel') }} + {{ $t('chart.confirm') }} + >{{ $t('chart.confirm') }} + @@ -1530,12 +1559,14 @@ {{ $t('chart.cancel') }} + >{{ $t('chart.cancel') }} + {{ $t('chart.confirm') }} + >{{ $t('chart.confirm') }} + @@ -1562,10 +1593,11 @@ - diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index 5d4f1914a5..1634189267 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -283,11 +283,10 @@ @click="changeRightDrawOpen(false)" /> + {{ $t('panel.position_adjust') }} -
- {{ $t('panel.select_view') }} -
+ @@ -526,10 +525,12 @@ import DeCanvas from '@/components/canvas/DeCanvas' import TextAttr from '@/components/canvas/components/TextAttr' import { userLoginInfo } from '@/api/systemInfo/userLogin' import { activeWatermark } from '@/components/canvas/tools/watermark' +import PositionAdjust from '@/views/chart/view/PositionAdjust' export default { name: 'PanelEdit', components: { + PositionAdjust, TextAttr, DeCanvas, Multiplexing, From 0cb98bd6c159ad2eb6122fded7efe75fb2ac335d Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Mon, 21 Nov 2022 11:29:25 +0800 Subject: [PATCH 7/9] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=B2=98=E8=B4=B4=E5=A4=8D=E5=88=B6=E4=BF=9D?= =?UTF-8?q?=E5=AD=98=E6=94=BE=E5=A4=A7=E7=AD=89=E5=BF=AB=E6=8D=B7=E9=94=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/canvas/components/Toolbar.vue | 9 ++++++-- .../canvas/components/editor/EditBar.vue | 8 +++++++ .../components/canvas/utils/shortcutKey.js | 21 +++++++++++++++++-- 3 files changed, 34 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue index 1ab2995f04..994cbac5d7 100644 --- a/frontend/src/components/canvas/components/Toolbar.vue +++ b/frontend/src/components/canvas/components/Toolbar.vue @@ -294,7 +294,7 @@ export default { created() { eventBus.$on('editPanelInitReady', this.editPanelInit) eventBus.$on('preview', this.preview) - eventBus.$on('save', this.save) + eventBus.$on('checkAndSave', this.checkAndSave) eventBus.$on('clearCanvas', this.clearCanvas) this.scale = this.canvasStyleData.scale this.mobileLayoutInitStatus = this.mobileLayoutStatus @@ -303,13 +303,18 @@ export default { }, beforeDestroy() { eventBus.$off('preview', this.preview) - eventBus.$off('save', this.save) + eventBus.$off('checkAndSave', this.checkAndSave) eventBus.$off('clearCanvas', this.clearCanvas) eventBus.$off('editPanelInitReady', this.editPanelInit) clearInterval(this.timer) this.timer = null }, methods: { + checkAndSave() { + if (!this.saveButtonDisabled) { + this.save(false) + } + }, editPanelInit() { this.showGridSwitch = this.canvasStyleData.aidedDesign.showGrid }, diff --git a/frontend/src/components/canvas/components/editor/EditBar.vue b/frontend/src/components/canvas/components/editor/EditBar.vue index 6a4d7bd3c2..3f2c726998 100644 --- a/frontend/src/components/canvas/components/editor/EditBar.vue +++ b/frontend/src/components/canvas/components/editor/EditBar.vue @@ -193,6 +193,7 @@ import LinkJumpSet from '@/views/panel/linkJumpSet' import Background from '@/views/background/index' import MapLayerController from '@/views/chart/components/map/MapLayerController' import { uploadFileResult } from '@/api/staticResource/staticResource' +import eventBus from '@/components/canvas/utils/eventBus' export default { components: { Background, LinkJumpSet, FieldsList, SettingMenu, LinkageField, MapLayerController }, @@ -364,9 +365,16 @@ export default { this.initCurFields() if (this.element.type === 'view') { bus.$on('initCurFields-' + this.element.id, this.initCurFields) + eventBus.$on('viewEnlarge', this.viewEnlarge) } }, + beforeDestroy() { + eventBus.$off('preview', this.showViewDetails) + }, methods: { + viewEnlarge() { + this.showViewDetails('enlarge') + }, backgroundSetClose() { this.boardSetVisible = false }, diff --git a/frontend/src/components/canvas/utils/shortcutKey.js b/frontend/src/components/canvas/utils/shortcutKey.js index 2c1cba10e6..3e1dd16b7f 100644 --- a/frontend/src/components/canvas/utils/shortcutKey.js +++ b/frontend/src/components/canvas/utils/shortcutKey.js @@ -1,4 +1,5 @@ import store from '@/store' +import eventBus from '@/components/canvas/utils/eventBus' const ctrlKey = 17 const commandKey = 91 // mac command @@ -15,8 +16,13 @@ const bKey = 66 // 拆分 const lKey = 76 // 锁定 const dKey = 68 // 删除 + const deleteKey = 46 // 删除 +const sKey = 83 // 保存 + +const enlargeKey = 190 // command + . + export const keycodes = [66, 67, 68, 69, 71, 76, 80, 83, 85, 86, 88, 89, 90] // 与组件状态无关的操作 @@ -35,10 +41,13 @@ const unlockMap = { [bKey]: decompose, [dKey]: deleteComponent, [deleteKey]: deleteComponent, - [lKey]: lock + [lKey]: lock, + [sKey]: save, + [enlargeKey]: viewEnlarge } let isCtrlOrCommandDown = false + // Monitor key operations globally and execute corresponding commands export function listenGlobalKeyDown() { window.onkeydown = (e) => { @@ -47,7 +56,7 @@ export function listenGlobalKeyDown() { if (keyCode === ctrlKey || keyCode === commandKey) { isCtrlOrCommandDown = true } else if (isCtrlOrCommandDown) { - if (keyCode === zKey || keyCode === yKey) { + if (keyCode === zKey || keyCode === yKey || keyCode === vKey || keyCode === cKey || keyCode === sKey || keyCode === enlargeKey) { e.preventDefault() unlockMap[keyCode]() } @@ -107,3 +116,11 @@ function deleteComponent() { function lock() { store.commit('lock') } + +function save() { + eventBus.$emit('checkAndSave') +} + +function viewEnlarge() { + eventBus.$emit('viewEnlarge') +} From 63bde5e19656bb2f8f19f03edf89d4a02dc921e7 Mon Sep 17 00:00:00 2001 From: fit2cloud-chenyw Date: Mon, 21 Nov 2022 15:57:11 +0800 Subject: [PATCH 8/9] =?UTF-8?q?fix(=E5=85=AC=E5=85=B1=E9=93=BE=E6=8E=A5):?= =?UTF-8?q?=20=E6=B7=B1=E8=89=B2=E4=B8=BB=E9=A2=98=E4=B8=8B=E6=93=8D?= =?UTF-8?q?=E4=BD=9C=E5=8C=BA=E5=9F=9F=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvas/components/editor/CanvasOptBar.vue | 66 +++++++++++++++++-- .../canvas/components/editor/Preview.vue | 6 ++ frontend/src/icons/svg/link-back.svg | 5 +- frontend/src/icons/svg/link-down.svg | 5 +- .../src/views/panel/export/PDFPreExport.vue | 2 +- 5 files changed, 68 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/canvas/components/editor/CanvasOptBar.vue b/frontend/src/components/canvas/components/editor/CanvasOptBar.vue index 0f174096c0..4aae7a12ad 100644 --- a/frontend/src/components/canvas/components/editor/CanvasOptBar.vue +++ b/frontend/src/components/canvas/components/editor/CanvasOptBar.vue @@ -8,6 +8,7 @@ v-if="isPublicLink" ref="widget-div" class="function-div" + :class="functionClass" > {{ $t('panel.remove_all_linkage') }} + >{{ $t('panel.remove_all_linkage') }} { @@ -142,13 +164,43 @@ export default { width: max-content; text-align: end; z-index: 999; - ::v-deep button:hover { - background-color: rgba(31, 35, 41, 0.1); - color: #1F2329; - font-weight: bold; - border-color: rgba(31, 35, 41, 0.1) + border-radius: 4px; + ::v-deep button { + border-radius: 0px; + } + } + .function-light { + background: #FFFFFF; + border: 1px solid #DEE0E3; + box-shadow: 0px 4px 8px rgb(31 35 41 / 10%); + ::v-deep button { + background-color: #FFFFFF; + box-shadow: 0px 4px 8px rgba(31, 35, 41, 0.1); + border: 1px solid #DEE0E3; + &:hover { + background-color: rgba(31, 35, 41, 0.1); + color: #1F2329; + font-weight: bold; + border-color: rgba(31, 35, 41, 0.1) + } + } + } + .function-dark { + background: #1A1A1A; + border: 1px solid #434343; + box-shadow: 0px 4px 8px rgba(26, 26, 26, 0.1); + ::v-deep button { + background-color: #1A1A1A; + border: 1px solid #434343; + box-shadow: 0px 4px 8px rgba(26, 26, 26, 0.1); + color: #FFFFFF; + &:hover { + background-color: rgba(235, 235, 235, 0.1); + color: #EBEBEB; + font-weight: bold; + border-color: rgba(235, 235, 235, 0.1); + } } - } &:hover { border-top: 60px solid rgba(245, 74, 69, 0);; diff --git a/frontend/src/components/canvas/components/editor/Preview.vue b/frontend/src/components/canvas/components/editor/Preview.vue index 15a5186b6e..2aeb6fb1d5 100644 --- a/frontend/src/components/canvas/components/editor/Preview.vue +++ b/frontend/src/components/canvas/components/editor/Preview.vue @@ -11,6 +11,7 @@ >
{ this.exporting = true + this.backScreenShot = true + const scrollHeight = document.getElementById('preview-temp-canvas-main').scrollHeight + + document.getElementById('preview-canvas-main').style.height = (scrollHeight + 'px') setTimeout(() => { html2canvas(document.getElementById(domId)).then(canvas => { const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量 this.dataLoading = false this.exporting = false + this.backScreenShot = false if (snapshot !== '') { this.snapshotInfo = snapshot this.pdfExportShow = true diff --git a/frontend/src/icons/svg/link-back.svg b/frontend/src/icons/svg/link-back.svg index 1d1352fe5d..88339b6c3a 100644 --- a/frontend/src/icons/svg/link-back.svg +++ b/frontend/src/icons/svg/link-back.svg @@ -1,4 +1 @@ - - - - \ No newline at end of file + \ No newline at end of file diff --git a/frontend/src/icons/svg/link-down.svg b/frontend/src/icons/svg/link-down.svg index 90a6a5bda1..f0aaca266a 100644 --- a/frontend/src/icons/svg/link-down.svg +++ b/frontend/src/icons/svg/link-down.svg @@ -1,4 +1 @@ - - - - \ No newline at end of file + \ No newline at end of file diff --git a/frontend/src/views/panel/export/PDFPreExport.vue b/frontend/src/views/panel/export/PDFPreExport.vue index 586b653d0a..8d2c54076c 100644 --- a/frontend/src/views/panel/export/PDFPreExport.vue +++ b/frontend/src/views/panel/export/PDFPreExport.vue @@ -117,7 +117,7 @@ export default { initContent() { this.templateContentChange = this.templateContent for (const [key, value] of Object.entries(this.varsInfo)) { - this.templateContentChange = pdfTemplateReplaceAll(this.templateContentChange, key, value) + this.templateContentChange = pdfTemplateReplaceAll(this.templateContentChange, key, value || '') } }, From 01c7d4d4d74aa6403528a37a7580726add2ae014 Mon Sep 17 00:00:00 2001 From: fit2cloud-chenyw Date: Mon, 21 Nov 2022 17:39:51 +0800 Subject: [PATCH 9/9] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?= =?UTF-8?q?=E6=89=B9=E9=87=8F=E8=AE=BE=E7=BD=AEecharts=E8=A7=86=E5=9B=BE?= =?UTF-8?q?=E5=A4=96=E9=97=B4=E8=B7=9D=E6=97=A0=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/canvas/customComponent/UserView.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/frontend/src/components/canvas/customComponent/UserView.vue b/frontend/src/components/canvas/customComponent/UserView.vue index cfedd58b54..2c5988c915 100644 --- a/frontend/src/components/canvas/customComponent/UserView.vue +++ b/frontend/src/components/canvas/customComponent/UserView.vue @@ -585,6 +585,9 @@ export default { updateParams['customAttr'] = this.sourceCustomAttrStr } else if (param.custom === 'customStyle') { const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr) + if (param.property === 'margin') { + sourceCustomStyle[param.property] = param.value + } sourceCustomStyle[param.property][param.value.modifyName] = param.value[param.value.modifyName] this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle) this.chart.customStyle = this.sourceCustomStyleStr