{
.del-from-mobile {
position: absolute;
- right: 5px;
- top: 5px;
+ right: 12px;
+ top: 12px;
z-index: 2;
+ font-size: 16px;
+ cursor: pointer;
}
}
diff --git a/core/core-frontend/src/utils/style.ts b/core/core-frontend/src/utils/style.ts
index 2151f906da..4c22cb6f5d 100644
--- a/core/core-frontend/src/utils/style.ts
+++ b/core/core-frontend/src/utils/style.ts
@@ -203,12 +203,13 @@ export function getCanvasStyle(canvasStyleData) {
}
if (dvMainStore.mobileInPc && mobileSetting?.customSetting) {
- const { backgroundType, color, alpha, imageUrl } = mobileSetting
- if (backgroundType === 'image' && typeof imageUrl === 'string') {
- style['background'] = `url(${imgUrlTrans(imageUrl)}) no-repeat`
- } else if (backgroundType === 'color') {
- const colorRGBA = hexColorToRGBA(color, alpha === undefined ? 100 : alpha)
- style['background'] = colorRGBA
+ const { backgroundColorSelect, color, backgroundImageEnable, background } = mobileSetting
+ if (backgroundColorSelect && backgroundImageEnable && typeof background === 'string') {
+ style['background'] = `url(${imgUrlTrans(background)}) no-repeat ${color}`
+ } else if (backgroundColorSelect) {
+ style['background-color'] = color
+ } else if (backgroundImageEnable) {
+ style['background'] = `url(${imgUrlTrans(background)}) no-repeat`
}
}
return style
diff --git a/core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue b/core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue
index 055e458799..052847475e 100644
--- a/core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue
+++ b/core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue
@@ -1,39 +1,210 @@
-
-
-
-
-
-
-
-
- {{ $t('chart.color') }}
- 图片
-
-
-
-
- 不透明度
-
-
-
-
- 当前支持jpeg,jpg,png,gif,svg文件,大小15M内
-
-
-
-
+
+
diff --git a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
index d6b5969c1b..13c09ffc21 100644
--- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
+++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
@@ -2,6 +2,7 @@
import { ref, onMounted, unref, onBeforeUnmount, computed } from 'vue'
import eventBus from '@/utils/eventBus'
import MobileBackgroundSelector from './MobileBackgroundSelector.vue'
+import { ElMessageBox } from 'element-plus-secondary'
import { useEmitt } from '@/hooks/web/useEmitt'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { getStyle } from '@/utils/style'
@@ -10,8 +11,6 @@ import { storeToRefs } from 'pinia'
const dvMainStore = dvMainStoreWithOut()
const { componentData, canvasStyleData, canvasViewInfo, dvInfo } = storeToRefs(dvMainStore)
const mobileLoading = ref(true)
-const activeName = ref('hide')
-
const emits = defineEmits(['pcMode'])
const getComponentStyleDefault = style => {
@@ -57,6 +56,7 @@ const hanedleMessage = event => {
}
if (event.data.type === 'delFromMobile') {
+ changeTimes.value++
componentData.value.some(ele => {
if (ele.id === event.data.value) {
ele.inMobile = false
@@ -99,65 +99,103 @@ onBeforeUnmount(() => {
const addToMobile = com => {
com.inMobile = true
+ changeTimes.value++
mobileStatusChange('addToMobile', JSON.parse(JSON.stringify(unref(com))))
}
+
+const changeTimes = ref(0)
+
+const handleBack = () => {
+ if (!changeTimes.value) {
+ emits('pcMode')
+ return
+ }
+ ElMessageBox.confirm('当前的更改尚未保存，确定退出吗？', {
+ confirmButtonType: 'primary',
+ type: 'warning',
+ autofocus: false,
+ showClose: false
+ }).then(() => {
+ emits('pcMode')
+ })
+}
+
+const save = () => {
+ changeTimes.value = 0
+ mobileStatusChange('mobileSave', undefined)
+}
-
-
-
-
-
-
-
保存
+
+
+
+
+
+ {{ dvInfo.name }}
+
+
+
+
+
+ 保存
+
-
{{ dvInfo.name }}
+
+
+
+
+ {{ dvInfo.name }}
+
-
+
@@ -167,70 +205,123 @@ const addToMobile = com => {
height: 100vh;
width: 100vw;
position: relative;
+ background: #f5f6f7;
+ overflow-y: auto;
- .mobile-to-pc {
- position: absolute;
- left: 20px;
- top: 20px;
- cursor: pointer;
+ .top-bar {
+ position: sticky;
+ top: 0;
+ left: 0;
+ z-index: 10;
+ background: #050e21;
+ box-shadow: 0px 2px 4px 0px #1f23291f;
+ height: 64px;
+ padding: 0 24px 0 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .mobile-save {
+ display: flex;
+ align-items: center;
+ .ed-icon {
+ font-size: 20px;
+ cursor: pointer;
+ margin-right: 20px;
+ color: #ffffff99;
+ }
+ }
+
+ .mobile-to-pc {
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ color: #ffffffe5;
+ .ed-icon {
+ font-size: 20px;
+ cursor: pointer;
+ margin-right: 12px;
+ color: #ffffffcc;
+ }
+ }
}
- .mobile-save {
- position: absolute;
- right: 20px;
- top: 20px;
- }
.mobile-canvas {
border-radius: 30px;
- width: 370px;
- min-height: 600px;
- max-height: 700px;
+ width: 419px;
+ height: 854px;
overflow: hidden;
- background-color: #000;
background-size: 100% 100% !important;
- padding: 5px;
height: 777px;
position: absolute;
- top: 100px;
- left: 100px;
+ top: 104px;
+ left: calc(50% - 419px);
+ background-image: url(../../assets/img/mobile-bg-pc.png);
+ padding: 0 22px;
.config-panel-title {
- margin-top: 30px;
+ margin-top: 64px;
+ height: 44px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
background: #fff;
- text-align: center;
+ position: relative;
+
+ .ed-icon {
+ font-size: 20px;
+ position: absolute;
+ left: 16px;
+ top: 12px;
+ }
+ }
+
+ .config-panel-content {
+ width: 100%;
+ border-bottom-left-radius: 45px;
+ border-bottom-right-radius: 45px;
+ overflow: hidden;
}
}
.mobile-com-list {
- position: absolute;
- top: 100px;
- left: 500px;
- width: calc(100% - 600px);
- max-height: 700px;
- display: flex;
- flex-wrap: wrap;
- background: #f5f6f7;
- padding: 16px;
- padding-top: 0;
- overflow-y: auto;
+ float: right;
+ width: 420px;
+ height: 100%;
+ background-color: #fff;
+ position: relative;
+ border-left: rgba(31, 35, 41, 0.15) 1px solid;
+ height: 100%;
- :deep(.ed-tabs) {
- width: 100%;
- margin-bottom: 16px;
- position: sticky;
- top: 0;
- left: 0;
- z-index: 20;
- background: #f5f6f7;
+ .config-mobile-sidebar {
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 22px;
+ padding: 8px;
}
-
.mobile-wrapper-inner-adaptor {
position: relative;
- margin-right: 24px;
- margin-bottom: 24px;
+ margin-right: 8px;
+ margin-bottom: 8px;
+ float: left;
background: #fff;
- &:nth-child(3n - 2) {
- margin-right: 0px;
+ padding: 31px 4px 36px 4px;
+ border-radius: 4px;
+ border: 1px solid #dee0e3;
+ &:nth-child(2n) {
+ margin-right: -1px;
+ }
+
+ .component-outer {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ }
+
+ &:hover {
+ border-color: var(--ed-color-primary);
}
}
@@ -247,11 +338,11 @@ const addToMobile = com => {
position: absolute;
width: 16px;
height: 16px;
- top: 0;
- right: 0;
- border: 2px solid #ccc;
+ top: 12px;
+ right: 12px;
+ border: 2px solid #8f959e;
border-radius: 4px;
- z-index: 11;
+ z-index: 20;
cursor: pointer;
}
}
diff --git a/core/core-frontend/src/views/dashboard/index.vue b/core/core-frontend/src/views/dashboard/index.vue
index c2b32743e6..815be1b116 100644
--- a/core/core-frontend/src/views/dashboard/index.vue
+++ b/core/core-frontend/src/views/dashboard/index.vue
@@ -17,6 +17,7 @@ import ChartStyleBatchSet from '@/views/chart/components/editor/editor-style/Cha
import DeCanvas from '@/views/canvas/DeCanvas.vue'
import { check, compareStorage } from '@/utils/CrossPermission'
import { useCache } from '@/hooks/web/useCache'
+import { cloneDeep } from 'lodash-es'
import { useEmbedded } from '@/store/modules/embedded'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { interactiveStoreWithOut } from '@/store/modules/interactive'
@@ -77,7 +78,20 @@ const checkPer = async resourceId => {
const mobileConfig = ref(false)
const onMobileConfig = () => {
- mobileConfig.value = true
+ const canvasStyleDataCopy = cloneDeep(canvasStyleData.value)
+ if (!canvasStyleDataCopy.mobileSetting) {
+ canvasStyleDataCopy.mobileSetting = {
+ backgroundColorSelect: false,
+ background: '',
+ color: '#ffffff',
+ backgroundImageEnable: false,
+ customSetting: false
+ }
+ }
+ dvMainStore.setCanvasStyle(canvasStyleDataCopy)
+ nextTick(() => {
+ mobileConfig.value = true
+ })
}
// 全局监听按键事件
onMounted(async () => {
@@ -96,6 +110,7 @@ onMounted(async () => {
return
}
initDataset()
+
state.sourcePid = pid
if (resourceId) {
dataInitState.value = false