From dc11e81d206c2b11e30dd7e738624fdff32e5090 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Wed, 23 Oct 2024 15:05:04 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E6=94=AF=E6=8C=81=E7=8B=AC=E7=AB=8B=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E8=AE=BE=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../io/dataease/MybatisPlusGenerator.java | 6 +- .../chart/dao/auto/entity/CoreChartView.java | 45 +- .../dao/auto/mapper/CoreChartViewMapper.java | 2 +- .../resources/db/desktop/V2.10.2__ddl.sql | 7 +- .../resources/db/migration/V2.10.2__ddl.sql | 6 +- .../rich-text/DeRichTextView.vue | 1 - .../core-frontend/src/models/chart/chart.d.ts | 2 + .../modules/data-visualization/dvMain.ts | 7 + core/core-frontend/src/utils/canvasUtils.ts | 36 + .../editor/editor-style/ChartStyleCommon.vue | 141 + .../views/chart/components/editor/index.vue | 3256 +++++++++-------- .../src/views/common/ComponentStyleEditor.vue | 49 + .../src/views/dashboard/MobileConfigPanel.vue | 94 +- .../src/views/mobile/panel/index.vue | 23 +- 14 files changed, 2040 insertions(+), 1635 deletions(-) create mode 100644 core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleCommon.vue create mode 100644 core/core-frontend/src/views/common/ComponentStyleEditor.vue diff --git a/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java b/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java index 2faf1fc800..ed819dd4b1 100644 --- a/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java +++ b/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java @@ -14,18 +14,18 @@ public class MybatisPlusGenerator { * 第一 我嫌麻烦 * 第二 后面配置会放到nacos读起来更麻烦了 */ - private static final String url = "jdbc:mysql://localhost:3306/dataease4?autoReconnect=false&useUnicode=true&characterEncoding=UTF-8&characterSetResults=UTF-8&zeroDateTimeBehavior=convertToNull&useSSL=false"; + private static final String url = "jdbc:mysql://localhost:3306/dataease?autoReconnect=false&useUnicode=true&characterEncoding=UTF-8&characterSetResults=UTF-8&zeroDateTimeBehavior=convertToNull&useSSL=false"; private static final String username = "root"; private static final String password = "123456"; /** * 业务模块例如datasource,dataset,panel等 */ - private static final String busi = "visualization"; + private static final String busi = "chart"; /** * 这是要生成代码的表名称 */ - private static final String TABLE_NAME = "visualization_link_jump_info"; + private static final String TABLE_NAME = "core_chart_view"; /** * 下面两个配置基本上不用动 diff --git a/core/core-backend/src/main/java/io/dataease/chart/dao/auto/entity/CoreChartView.java b/core/core-backend/src/main/java/io/dataease/chart/dao/auto/entity/CoreChartView.java index 7b35082b79..1058f0465e 100644 --- a/core/core-backend/src/main/java/io/dataease/chart/dao/auto/entity/CoreChartView.java +++ b/core/core-backend/src/main/java/io/dataease/chart/dao/auto/entity/CoreChartView.java @@ -9,7 +9,7 @@ import java.io.Serializable; *

* * @author fit2cloud - * @since 2024-05-07 + * @since 2024-10-23 */ @TableName("core_chart_view") public class CoreChartView implements Serializable { @@ -101,11 +101,21 @@ public class CoreChartView implements Serializable { */ private String customAttr; + /** + * 图形属性_移动端 + */ + private String customAttrMobile; + /** * 组件样式 */ private String customStyle; + /** + * 组件样式_移动端 + */ + private String customStyleMobile; + /** * 结果过滤 */ @@ -137,7 +147,7 @@ public class CoreChartView implements Serializable { private Long updateTime; /** - * 缩略图 + * 缩略图 */ private String snapshot; @@ -206,8 +216,14 @@ public class CoreChartView implements Serializable { */ private Boolean aggregate; + /** + * 流向地图起点名称field + */ private String flowMapStartName; + /** + * 流向地图终点名称field + */ private String flowMapEndName; /** @@ -215,7 +231,6 @@ public class CoreChartView implements Serializable { */ private String extColor; - public Long getId() { return id; } @@ -352,6 +367,14 @@ public class CoreChartView implements Serializable { this.customAttr = customAttr; } + public String getCustomAttrMobile() { + return customAttrMobile; + } + + public void setCustomAttrMobile(String customAttrMobile) { + this.customAttrMobile = customAttrMobile; + } + public String getCustomStyle() { return customStyle; } @@ -360,6 +383,14 @@ public class CoreChartView implements Serializable { this.customStyle = customStyle; } + public String getCustomStyleMobile() { + return customStyleMobile; + } + + public void setCustomStyleMobile(String customStyleMobile) { + this.customStyleMobile = customStyleMobile; + } + public String getCustomFilter() { return customFilter; } @@ -564,7 +595,9 @@ public class CoreChartView implements Serializable { ", extLabel = " + extLabel + ", extTooltip = " + extTooltip + ", customAttr = " + customAttr + + ", customAttrMobile = " + customAttrMobile + ", customStyle = " + customStyle + + ", customStyleMobile = " + customStyleMobile + ", customFilter = " + customFilter + ", drillFields = " + drillFields + ", senior = " + senior + @@ -585,9 +618,9 @@ public class CoreChartView implements Serializable { ", copyFrom = " + copyFrom + ", copyId = " + copyId + ", aggregate = " + aggregate + - ", flowMapStartName=" + flowMapStartName + - ", flowMapEndName=" + flowMapEndName + - ", extColor=" + extColor + + ", flowMapStartName = " + flowMapStartName + + ", flowMapEndName = " + flowMapEndName + + ", extColor = " + extColor + "}"; } } diff --git a/core/core-backend/src/main/java/io/dataease/chart/dao/auto/mapper/CoreChartViewMapper.java b/core/core-backend/src/main/java/io/dataease/chart/dao/auto/mapper/CoreChartViewMapper.java index 372e70703d..e5c4fb1c33 100644 --- a/core/core-backend/src/main/java/io/dataease/chart/dao/auto/mapper/CoreChartViewMapper.java +++ b/core/core-backend/src/main/java/io/dataease/chart/dao/auto/mapper/CoreChartViewMapper.java @@ -10,7 +10,7 @@ import org.apache.ibatis.annotations.Mapper; *

* * @author fit2cloud - * @since 2024-05-07 + * @since 2024-10-23 */ @Mapper public interface CoreChartViewMapper extends BaseMapper { diff --git a/core/core-backend/src/main/resources/db/desktop/V2.10.2__ddl.sql b/core/core-backend/src/main/resources/db/desktop/V2.10.2__ddl.sql index 50e3280149..c73724057c 100644 --- a/core/core-backend/src/main/resources/db/desktop/V2.10.2__ddl.sql +++ b/core/core-backend/src/main/resources/db/desktop/V2.10.2__ddl.sql @@ -6,4 +6,9 @@ FROM INNER JOIN data_visualization_info dvi ON ccv.scene_id = dvi.id WHERE dvi.delete_flag =1; -delete from data_visualization_info dvi where dvi.delete_flag =1; \ No newline at end of file +delete from data_visualization_info dvi where dvi.delete_flag =1; + + +ALTER TABLE `core_chart_view` + ADD COLUMN `custom_attr_mobile` longtext NULL COMMENT '图形属性_移动端', +ADD COLUMN `custom_style_mobile` longtext NULL COMMENT '组件样式_移动端'; \ No newline at end of file diff --git a/core/core-backend/src/main/resources/db/migration/V2.10.2__ddl.sql b/core/core-backend/src/main/resources/db/migration/V2.10.2__ddl.sql index b3f8d27012..35e3855e0a 100644 --- a/core/core-backend/src/main/resources/db/migration/V2.10.2__ddl.sql +++ b/core/core-backend/src/main/resources/db/migration/V2.10.2__ddl.sql @@ -7,4 +7,8 @@ FROM WHERE dvi.delete_flag =1; delete from data_visualization_info dvi where dvi.delete_flag =1; -DELETE FROM area where pid = '156710100' OR id = '156710100'; \ No newline at end of file +DELETE FROM area where pid = '156710100' OR id = '156710100'; + +ALTER TABLE `core_chart_view` + ADD COLUMN `custom_attr_mobile` longtext NULL COMMENT '图形属性_移动端' AFTER `custom_attr`, +ADD COLUMN `custom_style_mobile` longtext NULL COMMENT '组件样式_移动端' AFTER `custom_style`; \ No newline at end of file diff --git a/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue b/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue index 25d79e3278..a01c0715cd 100644 --- a/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue +++ b/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue @@ -210,7 +210,6 @@ watch( canEdit.value = false reShow() myValue.value = assignment(element.value.propValue.textValue) - console.log('===myValue.value=' + myValue.value) ed.setContent(myValue.value) } } diff --git a/core/core-frontend/src/models/chart/chart.d.ts b/core/core-frontend/src/models/chart/chart.d.ts index bda05f1f1c..8add766bbc 100644 --- a/core/core-frontend/src/models/chart/chart.d.ts +++ b/core/core-frontend/src/models/chart/chart.d.ts @@ -45,7 +45,9 @@ declare interface Chart { customFilter: {} senior: CustomSenior customAttr: CustomAttr + customAttrMobile: CustomAttr customStyle: CustomStyle + customStyleMobile: CustomStyle drillFields: ChartViewField[] drillFilters: Filter[] datasetMode: 0 | 1 diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts index b24b3a49e4..d181b3f0d8 100644 --- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts +++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts @@ -307,6 +307,13 @@ export const dvMainStore = defineStore('dataVisualization', { this.canvasState['curPointArea'] = this.curComponent['category'] } } + // 移动端通知 + if (this.mobileInPc) { + useEmitt().emitter.emit('curComponentChange', { + type: 'curComponentChange', + value: JSON.parse(JSON.stringify(this.curComponent)) + }) + } }, setBashMatrixInfo(bashMatrixInfo) { this.bashMatrixInfo = bashMatrixInfo diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index 098457efa8..7687e24f7f 100644 --- a/core/core-frontend/src/utils/canvasUtils.ts +++ b/core/core-frontend/src/utils/canvasUtils.ts @@ -743,3 +743,39 @@ export function maxYComponentCount() { .reduce((max, current) => Math.max(max, current), 0) } } + +export function componentSwitch(componentData, changeComponent) { + componentData.map(obj => (obj.id === changeComponent.id ? changeComponent : obj)) +} + +export function findComponentById(componentId) { + let result + componentData.forEach(item => { + if (item.id === componentId) { + result = item + } else if (item.component === 'Group') { + item.propValue.forEach(groupItem => { + if (groupItem.id === componentId) { + result = groupItem + } + }) + } else if (item.component === 'DeTabs') { + item.propValue.forEach(tabItem => { + tabItem.componentData.forEach(tabComponent => { + if (tabComponent.id === componentId) { + result = tabComponent + } + }) + }) + } + }) + return result +} + +export function mobileViewStyleSwitch(component) { + if (component) { + const viewInfo = canvasViewInfo.value[component.id] + viewInfo.customStyle = component.customStyle + viewInfo.customStyleMobile = component.customStyleMobile + } +} diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleCommon.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleCommon.vue new file mode 100644 index 0000000000..13850514ad --- /dev/null +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleCommon.vue @@ -0,0 +1,141 @@ + + + + + diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue index f91047794a..db804f45d4 100644 --- a/core/core-frontend/src/views/chart/components/editor/index.vue +++ b/core/core-frontend/src/views/chart/components/editor/index.vue @@ -74,7 +74,8 @@ import { const embeddedStore = useEmbedded() const snapshotStore = snapshotStoreWithOut() const dvMainStore = dvMainStoreWithOut() -const { canvasCollapse, curComponent, componentData, editMode } = storeToRefs(dvMainStore) +const { canvasCollapse, curComponent, componentData, editMode, mobileInPc } = + storeToRefs(dvMainStore) const router = useRouter() let componentNameEdit = ref(false) let inputComponentName = ref('') @@ -850,8 +851,16 @@ const updateChartData = view => { } const renderChart = view => { - useEmitt().emitter.emit('renderChart-' + view.id, view) - snapshotStore.recordSnapshotCache('renderChart', view.id) + if (mobileInPc.value) { + //移动端设计 + useEmitt().emitter.emit('onMobileStatusChange', { + type: 'componentStyleChange', + value: { type: 'renderChart', component: JSON.parse(JSON.stringify(view)) } + }) + } else { + useEmitt().emitter.emit('renderChart-' + view.id, view) + snapshotStore.recordSnapshotCache('renderChart', view.id) + } } const onAreaChange = val => { @@ -1772,575 +1781,231 @@ const deleteChartFieldItem = id => {