diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue index 0c670b939b..26b0361302 100644 --- a/frontend/src/components/canvas/components/Toolbar.vue +++ b/frontend/src/components/canvas/components/Toolbar.vue @@ -467,7 +467,8 @@ export default { } }, editReset() { - this.cancelMobileLayoutStatue(JSON.parse(this.componentDataCache)) + this.$store.commit('setComponentData', JSON.parse(this.componentDataCache)) + this.$store.commit('setMobileLayoutStatus', false) this.$store.commit('openMobileLayout') }, editCancel() { diff --git a/frontend/src/views/panel/edit/ComponentWait.vue b/frontend/src/views/panel/edit/ComponentWait.vue index 8a0b8b4fb0..c03ef8df86 100644 --- a/frontend/src/views/panel/edit/ComponentWait.vue +++ b/frontend/src/views/panel/edit/ComponentWait.vue @@ -6,7 +6,7 @@ -
- - - +
+
+ + + + +
+
@@ -30,6 +34,7 @@ import { mapState } from 'vuex' import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar' import { getStyle } from '@/components/canvas/utils/style' import DeOutWidget from '@/components/dataease/DeOutWidget' +import { hexColorToRGBA } from '@/views/chart/chart/util' export default { name: 'ComponentWaitItem', @@ -51,6 +56,37 @@ export default { } }, computed: { + commonStyle() { + const style = { + width: '100%', + height: '100%' + } + if (this.config.commonBackground) { + style['padding'] = (this.config.commonBackground.innerPadding || 0) + 'px' + style['border-radius'] = (this.config.commonBackground.borderRadius || 0) + 'px' + let colorRGBA = '' + if (this.config.commonBackground.backgroundColorSelect) { + colorRGBA = hexColorToRGBA(this.config.commonBackground.color, this.config.commonBackground.alpha) + } + if (this.config.commonBackground.enable) { + if (this.config.commonBackground.backgroundType === 'innerImage' && typeof this.config.commonBackground.innerImage === 'string') { + let innerImage = this.config.commonBackground.innerImage + if (this.screenShot) { + innerImage = innerImage.replace('svg', 'png') + } + style['background'] = `url(${innerImage}) no-repeat ${colorRGBA}` + } else if (this.config.commonBackground.backgroundType === 'outerImage' && typeof this.config.commonBackground.outerImage === 'string') { + style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat ${colorRGBA}` + } else { + style['background-color'] = colorRGBA + } + } else { + style['background-color'] = colorRGBA + } + style['overflow'] = 'hidden' + } + return style + }, outItemHeight() { return this.itemHeight - (4 * this.componentGap) }, diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index 0d4ee83382..10d2672acd 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -333,7 +333,6 @@ import DeContainer from '@/components/dataease/DeContainer' import DeAsideContainer from '@/components/dataease/DeAsideContainer' import { addClass, removeClass } from '@/utils' import FilterGroup from '../filter' -import ViewSelect from '../ViewSelect' import SubjectSetting from '../SubjectSetting' import bus from '@/utils/bus' import Editor from '@/components/canvas/components/Editor/index' @@ -358,7 +357,7 @@ import '@/components/canvas/styles/animate.css' import { ApplicationContext } from '@/utils/ApplicationContext' import FilterDialog from '../filter/filterDialog' import toast from '@/components/canvas/utils/toast' -import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list' +import { commonAttr } from '@/components/canvas/custom-component/component-list' import generateID from '@/components/canvas/utils/generateID' import TextAttr from '@/components/canvas/components/TextAttr' import ComponentWait from '@/views/panel/edit/ComponentWait'