From 410ed4c78d62d95bcc9533c9668051225bf9b455 Mon Sep 17 00:00:00 2001 From: dataeaseShu Date: Mon, 26 Feb 2024 16:23:18 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E7=A7=BB=E5=8A=A8=E7=AB=AF):=20=E6=9F=A5?= =?UTF-8?q?=E8=AF=A2=E6=97=B6=E9=97=B4=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/dashboard/DbToolbar.vue | 8 + .../custom-component/v-query/Component.vue | 6 +- .../src/custom-component/v-query/Time.vue | 162 ++++++++++++++++++ .../src/views/dashboard/MobileConfigPanel.vue | 2 +- 4 files changed, 176 insertions(+), 2 deletions(-) diff --git a/core/core-frontend/src/components/dashboard/DbToolbar.vue b/core/core-frontend/src/components/dashboard/DbToolbar.vue index 712cbe22b2..d18270aaa0 100644 --- a/core/core-frontend/src/components/dashboard/DbToolbar.vue +++ b/core/core-frontend/src/components/dashboard/DbToolbar.vue @@ -141,6 +141,13 @@ const saveCanvasWithCheck = () => { saveResource() } +const saveCanvasWithCheckFromMobile = () => { + snapshotStore.resetStyleChangeTimes() + canvasSave(() => { + ElMessage.success('保存成功') + }) +} + const saveResource = () => { if (styleChangeTimes.value > 0) { snapshotStore.resetStyleChangeTimes() @@ -192,6 +199,7 @@ const mobileConfig = () => { eventBus.on('preview', previewInner) eventBus.on('save', saveCanvasWithCheck) +eventBus.on('saveFromMobile', saveCanvasWithCheckFromMobile) eventBus.on('clearCanvas', clearCanvas) const openDataBoardSetting = () => { diff --git a/core/core-frontend/src/custom-component/v-query/Component.vue b/core/core-frontend/src/custom-component/v-query/Component.vue index 70f4122a06..459a17b4c5 100644 --- a/core/core-frontend/src/custom-component/v-query/Component.vue +++ b/core/core-frontend/src/custom-component/v-query/Component.vue @@ -367,7 +367,10 @@ const autoStyle = computed(() => { * -
+
@@ -536,6 +539,7 @@ const autoStyle = computed(() => { display: flex; flex-wrap: wrap; line-height: 28px; + position: relative; :deep(.ed-date-editor) { width: 227px; diff --git a/core/core-frontend/src/custom-component/v-query/Time.vue b/core/core-frontend/src/custom-component/v-query/Time.vue index 1f55d4ac4c..a423600c47 100644 --- a/core/core-frontend/src/custom-component/v-query/Time.vue +++ b/core/core-frontend/src/custom-component/v-query/Time.vue @@ -2,6 +2,15 @@ import { toRefs, PropType, ref, onBeforeMount, watch, nextTick, computed } from 'vue' import { Calendar } from '@element-plus/icons-vue' import { type DatePickType } from 'element-plus-secondary' +import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' +import VanPopup from 'vant/es/popup' +import VanDatePicker from 'vant/es/date-picker' +import VanTimePicker from 'vant/es/time-picker' +import VanPickerGroup from 'vant/es/picker-group' +import 'vant/es/popup/style' +import 'vant/es/date-picker/style' +import 'vant/es/picker-group/style' +import 'vant/es/time-picker/style' interface SelectConfig { selectValue: any @@ -37,6 +46,7 @@ const props = defineProps({ }) const selectValue = ref() const multiple = ref(false) +const dvMainStore = dvMainStoreWithOut() const { config } = toRefs(props) @@ -114,6 +124,105 @@ const selectStyle = computed(() => { return props.isConfig ? {} : { width: multiple.value ? '470px' : '227px' } }) +const columnsType = computed(() => { + if (!dvMainStore.mobileInPc) return [] + return ['year', 'month', 'day'].slice(0, getIndex() + 1) +}) + +const showTimePick = computed(() => { + if (!dvMainStore.mobileInPc) return false + const type = multiple.value ? config.value.timeGranularityMultiple : config.value.timeGranularity + return type.includes('datetime') +}) +const currentTime = ref([]) +const currentDate = ref(['2021', '01', '01']) +const showDate = ref(false) + +const isRange = computed(() => { + if (!dvMainStore.mobileInPc) return false + return +config.value.displayType === 7 +}) + +const showPopupRight = () => { + const [_, end] = selectValue.value || [] + if (!!end) { + const time = new Date(end) + currentDate.value = [ + `${time.getFullYear()}`, + `${time.getMonth() + 1}`, + `${time.getDate()}` + ].slice(0, getIndex() + 1) + showTimePick.value && + (currentTime.value = [`${time.getHours()}`, `${time.getMinutes()}`, `${time.getSeconds()}`]) + } + selectSecond.value = true + showDate.value = true +} + +const getIndex = () => { + const type = multiple.value ? config.value.timeGranularityMultiple : config.value.timeGranularity + const index = ['year', 'month', 'date'].findIndex(ele => type.includes(ele)) + return index +} + +const showPopup = () => { + if (isRange.value) { + const [start] = selectValue.value || [] + if (!!start) { + const time = new Date(start) + currentDate.value = [ + `${time.getFullYear()}`, + `${time.getMonth() + 1}`, + `${time.getDate()}` + ].slice(0, getIndex() + 1) + showTimePick.value && + (currentTime.value = [`${time.getHours()}`, `${time.getMinutes()}`, `${time.getSeconds()}`]) + } + } else { + const time = selectValue.value ? new Date(selectValue.value) : new Date() + currentDate.value = [ + `${time.getFullYear()}`, + `${time.getMonth() + 1}`, + `${time.getDate()}` + ].slice(0, getIndex() + 1) + showTimePick.value && + (currentTime.value = [`${time.getHours()}`, `${time.getMinutes()}`, `${time.getSeconds()}`]) + } + selectSecond.value = false + showDate.value = true +} + +const onCancel = () => { + showDate.value = false +} + +const selectSecond = ref(false) + +const setArrValue = () => { + currentDate.value = currentDate.value.slice(0, getIndex() + 1) + if (isRange.value) { + const [start, end] = selectValue.value || [] + if (selectSecond.value) { + selectValue.value = [ + start, + new Date(`${currentDate.value.join('/')} ${currentTime.value.join(':')}`) + ] + } else { + selectValue.value = [ + new Date(`${currentDate.value.join('/')} ${currentTime.value.join(':')}`), + end + ] + } + } else { + selectValue.value = new Date(`${currentDate.value.join('/')} ${currentTime.value.join(':')}`) + } +} + +const onConfirm = () => { + setArrValue() + showDate.value = false +} + onBeforeMount(() => { init() }) @@ -149,4 +258,57 @@ const formatDate = computed(() => { :prefix-icon="Calendar" :placeholder="$t('commons.date.select_date_time')" /> +
+
+ + + + + + + + + diff --git a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue index 1234f9f952..447eba420a 100644 --- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue +++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue @@ -78,7 +78,7 @@ const hanedleMessage = event => { } }) - eventBus.emit('save') + eventBus.emit('saveFromMobile') } } onMounted(() => {