feat(移动端): 查询时间组件

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 = () => {

core/core-frontend/src/custom-component/v-query/Component.vue

@@ -367,7 +367,10 @@ const autoStyle = computed(() => {
                   <span v-if="ele.required" class="required">*</span>
                 </div>
               </div>
-              <div class="label-wrapper-tooltip" v-if="showPosition !== 'preview'">
+              <div
+                class="label-wrapper-tooltip"
+                v-if="showPosition !== 'preview' && !dvMainStore.mobileInPc"
+              >
                 <el-tooltip effect="dark" content="设置过滤条件" placement="top">
                   <el-icon @click="editeQueryConfig(ele.id)">
                     <Icon name="icon_edit_outlined"></Icon>
@@ -536,6 +539,7 @@ const autoStyle = computed(() => {
         display: flex;
         flex-wrap: wrap;
         line-height: 28px;
+        position: relative;
 
         :deep(.ed-date-editor) {
           width: 227px;

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')"
   />
+  <div
+    v-if="dvMainStore.mobileInPc"
+    class="vant-mobile"
+    :class="isRange && 'wl50'"
+    @click="showPopup"
+  />
+  <div v-if="dvMainStore.mobileInPc && isRange" class="vant-mobile wr50" @click="showPopupRight" />
+  <van-popup
+    v-if="dvMainStore.mobileInPc"
+    teleport="body"
+    position="bottom"
+    v-model:show="showDate"
+  >
+    <van-picker-group
+      @confirm="onConfirm"
+      @cancel="onCancel"
+      v-if="showTimePick"
+      title="时间选择"
+      :tabs="['选择日期', '选择时间']"
+      next-step-text="下一步"
+    >
+      <van-date-picker :columns-type="columnsType" v-model="currentDate" />
+      <van-time-picker :columns-type="['hour', 'minute', 'second']" v-model="currentTime" />
+    </van-picker-group>
+    <van-date-picker
+      title="选择日期"
+      :columns-type="columnsType"
+      @confirm="onConfirm"
+      @cancel="onCancel"
+      v-if="!showTimePick"
+      v-model="currentDate"
+    />
+  </van-popup>
 </template>
+
+<style lang="less">
+.vant-mobile {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  &.wl50 {
+    width: 50%;
+  }
+
+  &.wr50 {
+    left: auto;
+    right: 0;
+    width: 50%;
+  }
+}
+</style>

core/core-frontend/src/views/dashboard/MobileConfigPanel.vue

@@ -78,7 +78,7 @@ const hanedleMessage = event => {
       }
     })
 
-    eventBus.emit('save')
+    eventBus.emit('saveFromMobile')
   }
 }
 onMounted(() => {