From 0760bd7db1f59359fa2b08b4034b6468f75f0415 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Tue, 22 Feb 2022 21:55:47 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=AA=E8=A1=A8=E6=9D=BF=E5=8F=AF?= =?UTF-8?q?=E4=BB=A5=E5=AF=B9=E7=BB=84=E4=BB=B6=E8=AE=BE=E7=BD=AE=E8=BE=B9?= =?UTF-8?q?=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../background/BackgroundController.java | 36 +++++ .../service/background/BackgroundService.java | 28 ++++ .../src/main/resources/generatorConfig.xml | 2 +- .../resources/i18n/messages_en_US.properties | 1 + .../resources/i18n/messages_zh_CN.properties | 2 + .../resources/i18n/messages_zh_TW.properties | 1 + frontend/public/board/blue_1.svg | 151 +++++++++++++++++ frontend/public/board/blue_2.svg | 40 +++++ frontend/public/board/blue_3.svg | 26 +++ frontend/public/board/blue_4.svg | 151 +++++++++++++++++ frontend/public/board/blue_5.svg | 152 ++++++++++++++++++ frontend/src/api/background/background.js | 8 + frontend/src/assets/blue_1.svg | 151 +++++++++++++++++ frontend/src/components/DeDrag/index.vue | 10 +- .../components/Editor/ComponentWrapper.vue | 73 +++++---- .../canvas/components/Editor/EditBar.vue | 5 +- .../canvas/components/Editor/SettingMenu.vue | 5 + .../canvas/components/Editor/index.vue | 23 ++- .../canvas/custom-component/component-list.js | 9 ++ frontend/src/components/canvas/utils/utils.js | 3 +- frontend/src/lang/en.js | 3 +- frontend/src/lang/tw.js | 3 +- frontend/src/lang/zh.js | 3 +- .../src/views/background/BackgroundItem.vue | 120 ++++++++++++++ frontend/src/views/background/index.vue | 97 +++++++++++ .../BackgroundColorSelector.vue | 11 ++ 26 files changed, 1076 insertions(+), 38 deletions(-) create mode 100644 backend/src/main/java/io/dataease/controller/background/BackgroundController.java create mode 100644 backend/src/main/java/io/dataease/service/background/BackgroundService.java create mode 100644 frontend/public/board/blue_1.svg create mode 100644 frontend/public/board/blue_2.svg create mode 100644 frontend/public/board/blue_3.svg create mode 100644 frontend/public/board/blue_4.svg create mode 100644 frontend/public/board/blue_5.svg create mode 100644 frontend/src/api/background/background.js create mode 100644 frontend/src/assets/blue_1.svg create mode 100644 frontend/src/views/background/BackgroundItem.vue create mode 100644 frontend/src/views/background/index.vue diff --git a/backend/src/main/java/io/dataease/controller/background/BackgroundController.java b/backend/src/main/java/io/dataease/controller/background/BackgroundController.java new file mode 100644 index 0000000000..bc16cd846a --- /dev/null +++ b/backend/src/main/java/io/dataease/controller/background/BackgroundController.java @@ -0,0 +1,36 @@ +package io.dataease.controller.background; + +import com.github.xiaoymin.knife4j.annotations.ApiSupport; +import io.dataease.base.domain.SysBackgroundImage; +import io.dataease.controller.handler.annotation.I18n; +import io.dataease.service.background.BackgroundService; +import io.swagger.annotations.Api; +import org.springframework.web.bind.annotation.GetMapping; +import org.springframework.web.bind.annotation.RequestMapping; +import org.springframework.web.bind.annotation.RestController; + +import javax.annotation.Resource; +import java.util.List; +import java.util.Map; + +/** + * Author: wangjiahao + * Date: 2022/2/22 + * Description: + */ +@Api(tags = "背景：背景边框") +@ApiSupport(order = 170) +@RestController +@RequestMapping("background") +public class BackgroundController { + @Resource + private BackgroundService backgroundService; + + @GetMapping("/findAll") + @I18n + public Map> findAll(){ + return backgroundService.findAll(); + } + + +} diff --git a/backend/src/main/java/io/dataease/service/background/BackgroundService.java b/backend/src/main/java/io/dataease/service/background/BackgroundService.java new file mode 100644 index 0000000000..1d6811ff94 --- /dev/null +++ b/backend/src/main/java/io/dataease/service/background/BackgroundService.java @@ -0,0 +1,28 @@ +package io.dataease.service.background; + +import io.dataease.base.domain.SysBackgroundImage; +import io.dataease.base.mapper.SysBackgroundImageMapper; +import org.springframework.stereotype.Service; + +import javax.annotation.Resource; +import java.util.List; +import java.util.Map; +import java.util.stream.Collectors; + +/** + * Author: wangjiahao + * Date: 2022/2/22 + * Description: + */ +@Service +public class BackgroundService { + + @Resource + private SysBackgroundImageMapper sysBackgroundImageMapper; + + public Map> findAll(){ + List result = sysBackgroundImageMapper.selectByExampleWithBLOBs(null); + return result.stream().collect(Collectors.groupingBy(SysBackgroundImage::getClassification)); + } + +} diff --git a/backend/src/main/resources/generatorConfig.xml b/backend/src/main/resources/generatorConfig.xml index ec4f820fc4..c47b158407 100644 --- a/backend/src/main/resources/generatorConfig.xml +++ b/backend/src/main/resources/generatorConfig.xml @@ -60,6 +60,6 @@ - +
diff --git a/backend/src/main/resources/i18n/messages_en_US.properties b/backend/src/main/resources/i18n/messages_en_US.properties index db35d7a38e..85fb4b3cea 100644 --- a/backend/src/main/resources/i18n/messages_en_US.properties +++ b/backend/src/main/resources/i18n/messages_en_US.properties @@ -120,3 +120,4 @@ connection_failed=Connection Failed theme_name_repeat=name of theme has been existed theme_name_empty=name can not be empty i18n_public_chart=【Public Chart】 +i18n_class_blue=Blue Tone diff --git a/backend/src/main/resources/i18n/messages_zh_CN.properties b/backend/src/main/resources/i18n/messages_zh_CN.properties index a44472bba1..bab91c8005 100644 --- a/backend/src/main/resources/i18n/messages_zh_CN.properties +++ b/backend/src/main/resources/i18n/messages_zh_CN.properties @@ -119,3 +119,5 @@ connection_failed=连接失败 theme_name_repeat=名称已存在 theme_name_empty=名称不能为空 i18n_public_chart=【存量视图】 +i18n_class_blue=蓝色调 + diff --git a/backend/src/main/resources/i18n/messages_zh_TW.properties b/backend/src/main/resources/i18n/messages_zh_TW.properties index 11914ecbda..5f6cfcc43c 100644 --- a/backend/src/main/resources/i18n/messages_zh_TW.properties +++ b/backend/src/main/resources/i18n/messages_zh_TW.properties @@ -120,3 +120,4 @@ connection_failed=連接失敗 theme_name_repeat=名稱已存在 theme_name_empty=名稱不能為空 i18n_public_chart=【存量视图】 +i18n_class_blue=蓝色调 diff --git a/frontend/public/board/blue_1.svg b/frontend/public/board/blue_1.svg new file mode 100644 index 0000000000..15cfcc7946 --- /dev/null +++ b/frontend/public/board/blue_1.svg @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/board/blue_2.svg b/frontend/public/board/blue_2.svg new file mode 100644 index 0000000000..aaee759d4e --- /dev/null +++ b/frontend/public/board/blue_2.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/board/blue_3.svg b/frontend/public/board/blue_3.svg new file mode 100644 index 0000000000..0fb08e6c48 --- /dev/null +++ b/frontend/public/board/blue_3.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + diff --git a/frontend/public/board/blue_4.svg b/frontend/public/board/blue_4.svg new file mode 100644 index 0000000000..73b23f98d8 --- /dev/null +++ b/frontend/public/board/blue_4.svg @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/board/blue_5.svg b/frontend/public/board/blue_5.svg new file mode 100644 index 0000000000..e1611130d3 --- /dev/null +++ b/frontend/public/board/blue_5.svg @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/api/background/background.js b/frontend/src/api/background/background.js new file mode 100644 index 0000000000..64a65168bf --- /dev/null +++ b/frontend/src/api/background/background.js @@ -0,0 +1,8 @@ +import request from '@/utils/request' + +export function queryBackground() { + return request({ + url: 'background/findAll', + method: 'get' + }) +} diff --git a/frontend/src/assets/blue_1.svg b/frontend/src/assets/blue_1.svg new file mode 100644 index 0000000000..15cfcc7946 --- /dev/null +++ b/frontend/src/assets/blue_1.svg @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue index 15419e187b..4d11ced659 100644 --- a/frontend/src/components/DeDrag/index.vue +++ b/frontend/src/components/DeDrag/index.vue @@ -30,7 +30,7 @@ ]" :style="mainSlotStyle" > - +
- - - - +
+ + + + +
@@ -87,6 +89,17 @@ export default { } }, computed: { + commonStyle() { + const style = { + width: '100%', + height: '100%' + } + if (this.config.commonBackground.enable) { + style['background'] = `url(${this.config.commonBackground.innerImage}) no-repeat` + style['background-size'] = `100% 100%` + } + return style + }, componentActiveFlag() { return (this.curComponent && this.config === this.curComponent) && !this.previewVisible }, diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue index 881914e264..d3fd3226f3 100644 --- a/frontend/src/components/canvas/components/Editor/EditBar.vue +++ b/frontend/src/components/canvas/components/Editor/EditBar.vue @@ -6,7 +6,7 @@
- + @@ -242,6 +242,9 @@ export default { } reader.readAsDataURL(file) + }, + boardSet() { + this.$emit('boardSet') } } } diff --git a/frontend/src/components/canvas/components/Editor/SettingMenu.vue b/frontend/src/components/canvas/components/Editor/SettingMenu.vue index 9a9a5b3c20..c48bad1b45 100644 --- a/frontend/src/components/canvas/components/Editor/SettingMenu.vue +++ b/frontend/src/components/canvas/components/Editor/SettingMenu.vue @@ -14,6 +14,7 @@ {{ $t('panel.linkage_setting') }} {{ $t('panel.add_tab') }} 跳转设置 + 设置边框
@@ -147,6 +148,10 @@ export default { // 跳转设置 linkJumpSet() { this.$emit('linkJumpSet') + }, + // 设置边框 + boardSet() { + this.$emit('boardSet') } } } diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue index d87568af00..6b7d3efb6c 100644 --- a/frontend/src/components/canvas/components/Editor/index.vue +++ b/frontend/src/components/canvas/components/Editor/index.vue @@ -55,6 +55,7 @@ @amRemoveItem="removeItem(item._dragId)" @amAddItem="addItemBox(item)" @linkJumpSet="linkJumpSet(item)" + @boardSet="boardSet(item)" @canvasDragging="canvasDragging" > + + + + @@ -196,6 +209,7 @@ import { buildFilterMap } from '@/utils/conditionUtil' // 挤占式画布 import _ from 'lodash' import $ from 'jquery' +import Background from '@/views/background/index' let positionBox = [] let coordinates = [] // 坐标点集合 @@ -762,7 +776,7 @@ function getoPsitionBox() { } export default { - components: { Shape, ContextMenu, MarkLine, Area, Grid, PGrid, DeDrag, UserViewDialog, DeOutWidget, CanvasOptBar, DragShadow, LinkJumpSet }, + components: { Background, Shape, ContextMenu, MarkLine, Area, Grid, PGrid, DeDrag, UserViewDialog, DeOutWidget, CanvasOptBar, DragShadow, LinkJumpSet }, props: { isEdit: { type: Boolean, @@ -827,6 +841,7 @@ export default { }, data() { return { + boardSetVisible: false, psDebug: false, // 定位调试模式 editorX: 0, editorY: 0, @@ -1009,10 +1024,16 @@ export default { _this.positionBoxInfoArray = positionBox }, 500) } + eventBus.$on('backgroundSetClose', () => { + this.boardSetVisible = false + }) }, created() { }, methods: { + boardSet(item) { + this.boardSetVisible = true + }, changeStyleWithScale, handleMouseDown(e) { // 如果没有选中组件 在画布上点击时需要调用 e.preventDefault() 防止触发 drop 事件 diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js index 77e109b029..ff8dcc7355 100644 --- a/frontend/src/components/canvas/custom-component/component-list.js +++ b/frontend/src/components/canvas/custom-component/component-list.js @@ -16,6 +16,15 @@ export const BASE_MOBILE_STYLE = { auxiliaryMatrix: true } +// 公共背景 +export const COMMON_BACKGROUND = { + enable: false, + backgroundType: 'color', + color: '#FFFFFF', + innerImage: null, + outerImage: null +} + // 公共样式 export const commonStyle = { rotate: 0, diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js index 97952ab0dd..8607116ae4 100644 --- a/frontend/src/components/canvas/utils/utils.js +++ b/frontend/src/components/canvas/utils/utils.js @@ -1,5 +1,5 @@ import { - BASE_MOBILE_STYLE, + BASE_MOBILE_STYLE, COMMON_BACKGROUND, HYPERLINKS } from '@/components/canvas/custom-component/component-list' @@ -93,6 +93,7 @@ export function panelInit(componentData, componentStyle) { if (item.type === 'picture-add') { item.hyperlinks = (item.hyperlinks || HYPERLINKS) } + item.commonBackground = item.commonBackground || deepCopy(COMMON_BACKGROUND) }) // style初始化 componentStyle.refreshTime = (componentStyle.refreshTime || 5) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 43bf9ac7b9..5ff3e8f5c7 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1555,7 +1555,8 @@ export default { public_link_tips: 'Currently in public link mode, the target panel does not have a public link and cannot jump to it', input_title: 'Input Title', show_title: 'Show Title', - default_settings: 'Default Settings' + default_settings: 'Default Settings', + choose_border: 'Choose Border' }, plugin: { local_install: 'Local installation', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 28e9b16dcf..3dc9bb0ac1 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1556,7 +1556,8 @@ export default { public_link_tips: '當前是公共鏈接模式，目標儀錶闆未設置公共鏈接，無法跳轉', input_title: '請輸入標題', show_title: '顯示標題', - default_settings: '默認值設置' + default_settings: '默認值設置', + choose_border: '选择边框' }, plugin: { local_install: '本地安裝', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index a8a350de1d..52b13b11fd 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1565,7 +1565,8 @@ export default { public_link_tips: '当前是公共链接模式，目标仪表板未设置公共链接，无法跳转', input_title: '请输入标题', show_title: '显示标题', - default_settings: '默认值设置' + default_settings: '默认值设置', + choose_border: '选择边框' }, plugin: { local_install: '本地安装', diff --git a/frontend/src/views/background/BackgroundItem.vue b/frontend/src/views/background/BackgroundItem.vue new file mode 100644 index 0000000000..9979fe536d --- /dev/null +++ b/frontend/src/views/background/BackgroundItem.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/frontend/src/views/background/index.vue b/frontend/src/views/background/index.vue new file mode 100644 index 0000000000..d91dcd9809 --- /dev/null +++ b/frontend/src/views/background/index.vue @@ -0,0 +1,97 @@ + + + + + diff --git a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue index 3d985280ff..58f84de123 100644 --- a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue +++ b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue @@ -9,6 +9,14 @@ + + + + + + + + {{ $t('panel.photo') }} @@ -151,6 +159,9 @@ export default { }, upload(file) { // console.log('this is upload') + }, + openBoardDialog() { + // console.log('this is upload') } } }