From da26a5b40f7dbd5ba25e503aa30ccd37360f2dad Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Tue, 24 May 2022 22:32:11 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=AA=E8=A1=A8=E6=9D=BF=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E6=97=B6=E5=8F=AF=E4=BB=A5=E6=8C=89=E7=85=A7=E4=BB=AA?= =?UTF-8?q?=E8=A1=A8=E6=9D=BF=E5=A4=8D=E7=94=A8=E8=A7=86=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../panel/PanelGroupController.java | 7 + .../service/panel/PanelGroupService.java | 37 ++- frontend/src/api/panel/panel.js | 8 + .../canvas/components/Editor/CanvasOptBar.vue | 4 +- .../canvas/components/Editor/CloseBar.vue | 4 +- .../components/Editor/ComponentWrapper.vue | 15 +- .../canvas/components/Editor/EditBar.vue | 4 +- .../canvas/components/Editor/EditBarView.vue | 46 ++- .../canvas/components/Editor/Preview.vue | 27 +- .../canvas/components/Editor/PreviewEject.vue | 15 +- .../components/Editor/PreviewFullScreen.vue | 14 +- .../canvas/components/Editor/index.vue | 14 +- .../canvas/custom-component/UserView.vue | 25 +- .../canvas/custom-component/component-list.js | 2 +- frontend/src/components/canvas/store/copy.js | 53 +++- frontend/src/components/canvas/utils/utils.js | 15 +- frontend/src/lang/en.js | 1 + frontend/src/lang/tw.js | 27 +- frontend/src/lang/zh.js | 1 + frontend/src/store/index.js | 17 +- frontend/src/views/link/view/index.vue | 13 +- .../panel/ViewSelect/index-with-drag.vue | 264 ++++++++++++++++++ .../views/panel/ViewSelect/multiplexing.vue | 122 ++++++++ .../panel/ViewSelect/multiplexingView.vue | 165 +++++++++++ frontend/src/views/panel/edit/index.vue | 70 ++++- frontend/src/views/panel/list/PanelMain.vue | 2 +- .../src/views/panel/list/PanelViewShow.vue | 14 +- 27 files changed, 913 insertions(+), 73 deletions(-) create mode 100644 frontend/src/views/panel/ViewSelect/index-with-drag.vue create mode 100644 frontend/src/views/panel/ViewSelect/multiplexing.vue create mode 100644 frontend/src/views/panel/ViewSelect/multiplexingView.vue diff --git a/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java b/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java index 3bd3a50be0..c1ca4e8678 100644 --- a/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java +++ b/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java @@ -97,6 +97,13 @@ public class PanelGroupController { return panelGroupService.queryPanelViewTree(); } + @ApiOperation("仪表板视图复用信息") + @PostMapping("/queryPanelMultiplexingViewTree") + @I18n + public List queryPanelMultiplexingViewTree() { + return panelGroupService.queryPanelMultiplexingViewTree(); + } + @ApiOperation("仪表板组件信息") @GetMapping("/queryPanelComponents/{id}") @I18n diff --git a/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java b/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java index bb7b734cce..20c2962cb8 100644 --- a/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java +++ b/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java @@ -265,6 +265,7 @@ public class PanelGroupService { List panelIds = panelResult.stream().map(VAuthModelDTO::getId).collect(Collectors.toList()); VAuthModelRequest viewRequest = new VAuthModelRequest(); viewRequest.setPids(panelIds); +// Version 1.11 only gets the current panel List viewResult = extVAuthModelMapper.queryAuthModelViews(viewRequest); if (CollectionUtils.isNotEmpty(viewResult)) { result.addAll(viewResult); @@ -282,6 +283,36 @@ public class PanelGroupService { return result; } + public List queryPanelMultiplexingViewTree() { + List result = new ArrayList<>(); + VAuthModelRequest panelRequest = new VAuthModelRequest(); + panelRequest.setUserId(String.valueOf(AuthUtils.getUser().getUserId())); + panelRequest.setModelType("panel"); + List panelResult = extVAuthModelMapper.queryAuthModel(panelRequest); + // 获取仪表板下面的视图 + if (CollectionUtils.isNotEmpty(panelResult)) { + result.addAll(panelResult); + List panelIds = panelResult.stream().map(VAuthModelDTO::getId).collect(Collectors.toList()); + VAuthModelRequest viewRequest = new VAuthModelRequest(); + viewRequest.setPids(panelIds); + // Version 1.11 only gets the current panel +// List viewResult = extVAuthModelMapper.queryAuthModelViews(viewRequest); +// if (CollectionUtils.isNotEmpty(viewResult)) { +// result.addAll(viewResult); +// } + result = TreeUtils.mergeTree(result, "panel_list"); +// if (AuthUtils.getUser().getIsAdmin()) { +// // 原有视图的目录结构 +// List viewOriginal = extVAuthModelMapper.queryAuthViewsOriginal(viewRequest); +// if (CollectionUtils.isNotEmpty(viewOriginal) && viewOriginal.size() > 1) { +// result.addAll(TreeUtils.mergeTree(viewOriginal, "public_chart")); +// } +// } + + } + return result; + } + public String panelGroupCopy(PanelGroupRequest request, String newPanelId, boolean checkName) { String sourcePanelId = request.getId(); //源仪表板ID if (StringUtils.isEmpty(newPanelId)) { @@ -531,9 +562,9 @@ public class PanelGroupService { } } - public void updatePanelStatus(String panelId,PanelGroupBaseInfoRequest request){ - Assert.notNull(request.getStatus(),"status can not be null"); - Assert.notNull(panelId,"panelId can not be null"); + public void updatePanelStatus(String panelId, PanelGroupBaseInfoRequest request) { + Assert.notNull(request.getStatus(), "status can not be null"); + Assert.notNull(panelId, "panelId can not be null"); PanelGroupWithBLOBs panelGroup = new PanelGroupWithBLOBs(); panelGroup.setId(panelId); panelGroup.setStatus(request.getStatus()); diff --git a/frontend/src/api/panel/panel.js b/frontend/src/api/panel/panel.js index 34493b7803..83849f1dd9 100644 --- a/frontend/src/api/panel/panel.js +++ b/frontend/src/api/panel/panel.js @@ -165,6 +165,14 @@ export function queryPanelViewTree() { }) } +export function queryPanelMultiplexingViewTree() { + return request({ + url: '/panel/group/queryPanelMultiplexingViewTree', + method: 'post', + loading: false + }) +} + export function initPanelComponentsData(panelId, callback) { // 加载仪表板组件视图数据 queryPanelComponents(panelId).then(rep => { diff --git a/frontend/src/components/canvas/components/Editor/CanvasOptBar.vue b/frontend/src/components/canvas/components/Editor/CanvasOptBar.vue index 7aa7cd866e..9043554a02 100644 --- a/frontend/src/components/canvas/components/Editor/CanvasOptBar.vue +++ b/frontend/src/components/canvas/components/Editor/CanvasOptBar.vue @@ -39,8 +39,8 @@ export default { z-index: 10; height: 20px; border-radius:2px; - padding-left: 5px; - padding-right: 2px; + padding-left: 3px; + padding-right: 0px; cursor:pointer!important; opacity: 0.8; /*background-color: #0a7be0;*/ diff --git a/frontend/src/components/canvas/components/Editor/CloseBar.vue b/frontend/src/components/canvas/components/Editor/CloseBar.vue index 80959e96f4..ab4ce0f1bd 100644 --- a/frontend/src/components/canvas/components/Editor/CloseBar.vue +++ b/frontend/src/components/canvas/components/Editor/CloseBar.vue @@ -45,8 +45,8 @@ export default { float:right; z-index: 2; border-radius:2px; - padding-left: 5px; - padding-right: 2px; + padding-left: 3px; + padding-right: 0px; cursor:pointer!important; background-color: #0a7be0; } diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue index a192165007..6076398ad2 100644 --- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue +++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue @@ -37,6 +37,8 @@ :filters="filters" :terminal="terminal" :screen-shot="screenShot" + :canvas-style-data="canvasStyleData" + :show-position="showPosition" /> @@ -88,6 +90,18 @@ export default { screenShot: { type: Boolean, default: false + }, + canvasStyleData: { + type: Object, + required: false, + default: function() { + return {} + } + }, + showPosition: { + type: String, + required: false, + default: 'NotProvided' } }, data() { @@ -129,7 +143,6 @@ export default { }, ...mapState([ 'mobileLayoutStatus', - 'canvasStyleData', 'curComponent', 'componentGap' ]) diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue index 765458d7a2..67f037e229 100644 --- a/frontend/src/components/canvas/components/Editor/EditBar.vue +++ b/frontend/src/components/canvas/components/Editor/EditBar.vue @@ -286,8 +286,8 @@ export default { float:right; z-index: 2; border-radius:2px; - padding-left: 5px; - padding-right: 2px; + padding-left: 3px; + padding-right: 0px; cursor:pointer!important; background-color: rgba(10,123,224, 1); } diff --git a/frontend/src/components/canvas/components/Editor/EditBarView.vue b/frontend/src/components/canvas/components/Editor/EditBarView.vue index 469ac4aede..e7d995173d 100644 --- a/frontend/src/components/canvas/components/Editor/EditBarView.vue +++ b/frontend/src/components/canvas/components/Editor/EditBarView.vue @@ -1,6 +1,6 @@ @@ -17,14 +19,24 @@ import bus from '@/utils/bus' import { mapState } from 'vuex' export default { props: { + element: { + type: Object, + default: null + }, viewId: { type: String, required: true }, + // Deprecated isEdit: { type: Boolean, required: false, default: true + }, + showPosition: { + type: String, + required: false, + default: 'NotProvided' } }, data() { @@ -39,10 +51,19 @@ export default { } }, computed: { + // gapStyle() { + // return { + // 'right': this.curGap + 'px!important' + // } + // }, + // curGap() { + // return (this.canvasStyleData.panel.gap === 'yes' && this.element.auxiliaryMatrix) ? this.componentGap : 0 + // }, ...mapState([ 'linkageSettingStatus', 'componentData', - 'canvasStyleData' + 'canvasStyleData', + 'componentGap' ]) }, mounted() { @@ -63,7 +84,20 @@ export default { }, showViewDetails() { this.$emit('showViewDetails') + }, + positionCheck(position) { + return this.showPosition === position + }, + multiplexingCheck(val) { + if (val) { + // push + this.$store.commit('addCurMultiplexingComponent', { 'component': this.element, 'componentId': this.viewId }) + } else { + // remove + this.$store.commit('removeCurMultiplexingComponentWithId', this.viewId) + } } + } } @@ -74,9 +108,9 @@ export default { right: 0px; float:right; z-index: 2; - border-radius:2px; - padding-left: 5px; - padding-right: 2px; + border-radius:2px!important; + padding-left: 3px!important; + padding-right: 0px!important; cursor:pointer!important; background-color: #0a7be0; } diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue index 13ab4b9414..ab6e59fbfc 100644 --- a/frontend/src/components/canvas/components/Editor/Preview.vue +++ b/frontend/src/components/canvas/components/Editor/Preview.vue @@ -29,6 +29,8 @@ :terminal="terminal" :filters="filterMap[item.propValue && item.propValue.viewId]" :screen-shot="screenShot" + :canvas-style-data="canvasStyleData" + :show-position="showPosition" />
- +
+ + diff --git a/frontend/src/views/panel/ViewSelect/multiplexing.vue b/frontend/src/views/panel/ViewSelect/multiplexing.vue new file mode 100644 index 0000000000..928b4f92cc --- /dev/null +++ b/frontend/src/views/panel/ViewSelect/multiplexing.vue @@ -0,0 +1,122 @@ + + + + + diff --git a/frontend/src/views/panel/ViewSelect/multiplexingView.vue b/frontend/src/views/panel/ViewSelect/multiplexingView.vue new file mode 100644 index 0000000000..9811a3a04d --- /dev/null +++ b/frontend/src/views/panel/ViewSelect/multiplexingView.vue @@ -0,0 +1,165 @@ + + + + + diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index 560ab1e7e1..7a902d50c6 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -111,11 +111,10 @@ style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;" >
@@ -123,7 +122,7 @@ style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;" > - 复用 + {{ $t('panel.multiplexing') }}
@@ -150,7 +149,7 @@ :close-on-press-escape="false" :modal-append-to-body="true" > - + @@ -276,6 +275,8 @@ v-if="previewVisible" :in-screen="!previewVisible" :show-type="canvasStyleData.selfAdaption?'full':'width'" + :canvas-style-data="canvasStyleData" + :component-data="componentData" /> + + + +
+ + {{ $t('panel.multiplexing') }} + + + {{ $t('commons.confirm') }} + {{ $t('commons.cancel') }} + +
+ + @@ -325,7 +345,7 @@ import ViewSelect from '../ViewSelect' import SubjectSetting from '../SubjectSetting' import bus from '@/utils/bus' import Editor from '@/components/canvas/components/Editor/index' -import { deepCopy, matrixBaseChange, panelInit } from '@/components/canvas/utils/utils' +import { deepCopy, matrixBaseChange } from '@/components/canvas/utils/utils' import componentList, { BASE_MOBILE_STYLE, COMMON_BACKGROUND, @@ -334,7 +354,7 @@ import componentList, { import { mapState } from 'vuex' import { uuid } from 'vue-uuid' import Toolbar from '@/components/canvas/components/Toolbar' -import { initPanelData, initViewCache } from '@/api/panel/panel' +import { initPanelData, initViewCache, queryPanelMultiplexingViewTree } from '@/api/panel/panel' import Preview from '@/components/canvas/components/Editor/Preview' import elementResizeDetectorMaker from 'element-resize-detector' import AssistComponent from '@/views/panel/AssistComponent' @@ -354,10 +374,12 @@ import { deleteEnshrine, saveEnshrine, starStatus } from '@/api/panel/enshrine' import ChartEdit from '@/views/chart/view/ChartEdit' import OuterParamsSet from '@/views/panel/OuterParamsSet/index' import ChartStyleBatchSet from '@/views/chart/view/ChartStyleBatchSet' +import Multiplexing from '@/views/panel/ViewSelect/multiplexing' export default { name: 'PanelEdit', components: { + Multiplexing, ChartStyleBatchSet, OuterParamsSet, ComponentWait, @@ -378,6 +400,8 @@ export default { }, data() { return { + viewData: [], + multiplexingShow: false, asideToolType: 'none', outerParamsSetVisible: false, autoMoveOffSet: 15, @@ -545,6 +569,9 @@ export default { return this.pcMatrixCount } }, + multiplexingDisabled() { + return Object.keys(this.curMultiplexingComponents) === 0 + }, ...mapState([ 'curComponent', 'curCanvasScale', @@ -560,7 +587,8 @@ export default { 'mobileMatrixCount', 'mobileLayoutStyle', 'scrollAutoMove', - 'batchOptStatus' + 'batchOptStatus', + 'curMultiplexingComponents' ]) }, @@ -616,12 +644,18 @@ export default { _this.restore() }) }) + this.loadMultiplexingViewTree() }, beforeDestroy() { const elx = this.$refs.rightPanel elx && elx.remove() }, methods: { + loadMultiplexingViewTree() { + queryPanelMultiplexingViewTree().then(res => { + this.viewData = res.data + }) + }, closeOuterParamsSetDialog() { this.outerParamsSetVisible = false }, @@ -1080,6 +1114,15 @@ export default { const canvasInfoMobile = document.getElementById('canvasInfoMobile') canvasInfoMobile.scrollTop = canvasInfoMobile.scrollTop + offset this.$store.commit('setScrollAutoMove', this.scrollAutoMove + offset) + }, + showMultiplexing(type) { + this.multiplexingShow = type + }, + saveMultiplexing() { + this.showMultiplexing(false) + this.$store.commit('copyMultiplexingComponents') + this.$store.commit('recordSnapshot') + this.$store.state.styleChangeTimes++ } } } @@ -1348,4 +1391,15 @@ export default { height: calc(100vh - 100px); } + .dialog-css ::v-deep .el-dialog__title { + font-size: 14px; + } + + .dialog-css ::v-deep .el-dialog__header { + padding: 20px 20px 0; + } + + .dialog-css ::v-deep .el-dialog__body { + padding: 10px 20px 20px; + } diff --git a/frontend/src/views/panel/list/PanelMain.vue b/frontend/src/views/panel/list/PanelMain.vue index 187739d088..4b1e819d12 100644 --- a/frontend/src/views/panel/list/PanelMain.vue +++ b/frontend/src/views/panel/list/PanelMain.vue @@ -68,7 +68,7 @@ export default { this.$store.commit('initViewRender', plugins) }).catch(e => { localStorage.setItem('plugin-views', null) - this.$store.commit('initViewRender', plugins) + this.$store.commit('initViewRender', []) }) this.clear() }, diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue index 345f7874ea..58bd436229 100644 --- a/frontend/src/views/panel/list/PanelViewShow.vue +++ b/frontend/src/views/panel/list/PanelViewShow.vue @@ -52,13 +52,13 @@ - + - + @@ -90,7 +90,15 @@
- +