Merge pull request #7141 from dataease/pr@dev-v2_dzz

Pr@dev v2 dzz

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

@@ -211,6 +211,10 @@ const infoFormat = (obj: ComponentInfo) => {
     relativeToCurrentType: 'year',
     around: 'f',
     arbitraryTime: new Date(),
+    timeNumRange: 0,
+    relativeToCurrentTypeRange: 'year',
+    aroundRange: 'f',
+    arbitraryTimeRange: new Date(),
     auto: false,
     defaultValue: undefined,
     selectValue: undefined,

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

@@ -0,0 +1,151 @@
+<script lang="ts" setup>
+import { toRefs, PropType, ref, onBeforeMount, watch, computed } from 'vue'
+import { Calendar } from '@element-plus/icons-vue'
+import { type DatePickType } from 'element-plus-secondary'
+import { getCustomTime } from './time-format'
+interface SelectConfig {
+  timeType: string
+  defaultValue: [Date, Date]
+  selectValue: [Date, Date]
+  defaultValueCheck: boolean
+  id: string
+  timeNum: number
+  relativeToCurrentType: string
+  around: string
+  arbitraryTime: Date
+  timeGranularity: DatePickType
+  timeNumRange: number
+  relativeToCurrentTypeRange: string
+  aroundRange: string
+  arbitraryTimeRange: Date
+}
+
+const props = defineProps({
+  config: {
+    type: Object as PropType<SelectConfig>,
+    default: () => {
+      return {
+        defaultValue: [],
+        selectValue: [],
+        timeType: 'fixed',
+        timeNum: 0,
+        relativeToCurrentType: 'year',
+        around: 'f',
+        arbitraryTime: new Date(),
+        defaultValueCheck: false,
+        timeGranularity: 'date',
+        timeNumRange: 0,
+        relativeToCurrentTypeRange: 'year',
+        aroundRange: 'f',
+        arbitraryTimeRange: new Date()
+      }
+    }
+  }
+})
+const selectValue = ref<[Date, Date]>([new Date(), new Date()])
+
+const { config } = toRefs(props)
+
+const timeConfig = computed(() => {
+  const {
+    timeNum,
+    relativeToCurrentType,
+    around,
+    defaultValueCheck,
+    arbitraryTime,
+    timeGranularity,
+    timeNumRange,
+    relativeToCurrentTypeRange,
+    aroundRange,
+    arbitraryTimeRange
+  } = config.value
+  return {
+    timeNum,
+    relativeToCurrentType,
+    around,
+    defaultValueCheck,
+    arbitraryTime,
+    timeGranularity,
+    timeNumRange,
+    relativeToCurrentTypeRange,
+    aroundRange,
+    arbitraryTimeRange
+  }
+})
+
+watch(
+  () => timeConfig.value,
+  () => {
+    init()
+  },
+  {
+    deep: true
+  }
+)
+
+watch(
+  () => selectValue.value,
+  val => {
+    config.value.defaultValue = val
+    config.value.selectValue = val
+  }
+)
+
+watch(
+  () => config.value.id,
+  () => {
+    init()
+  }
+)
+
+const init = () => {
+  const {
+    timeNum,
+    relativeToCurrentType,
+    around,
+    defaultValueCheck,
+    arbitraryTime,
+    timeGranularity,
+    timeNumRange,
+    relativeToCurrentTypeRange,
+    aroundRange,
+    arbitraryTimeRange
+  } = timeConfig.value
+  if (!defaultValueCheck) {
+    selectValue.value = [new Date(), new Date()]
+    return
+  }
+
+  const startTime = getCustomTime(
+    timeNum,
+    relativeToCurrentType,
+    timeGranularity,
+    around,
+    arbitraryTime
+  )
+  const endTime = getCustomTime(
+    timeNumRange,
+    relativeToCurrentTypeRange,
+    timeGranularity,
+    aroundRange,
+    arbitraryTimeRange
+  )
+  selectValue.value = [startTime, endTime]
+}
+
+onBeforeMount(() => {
+  init()
+})
+</script>
+
+<template>
+  <el-date-picker
+    disabled
+    v-model="selectValue"
+    type="datetimerange"
+    :prefix-icon="Calendar"
+    :range-separator="$t('cron.to')"
+    :start-placeholder="$t('datasource.start_time')"
+    :end-placeholder="$t('datasource.end_time')"
+  />
+</template>

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { ref, reactive, nextTick, computed, shallowRef, toRefs, watch } from 'vue'
 import { storeToRefs } from 'pinia'
+import { getCustomTime } from './time-format'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -13,6 +14,7 @@ import { cloneDeep } from 'lodash-es'
 import Select from './Select.vue'
 import Time from './Time.vue'
 import DynamicTime from './DynamicTime.vue'
+import DynamicTimeRange from './DynamicTimeRange.vue'
 import { getDatasetTree } from '@/api/dataset'
 import { Tree } from '@/views/visualized/data/dataset/form/CreatDsGroup.vue'
 import draggable from 'vuedraggable'
@@ -258,7 +260,44 @@ const validate = () => {
       return true
     }
 
-    if ([1, 7].includes(+ele.displayType)) {
+    if (+ele.displayType === 7) {
+      if (!ele.defaultValueCheck) {
+        return false
+      }
+      const {
+        timeNum,
+        relativeToCurrentType,
+        around,
+        arbitraryTime,
+        timeGranularity,
+        timeNumRange,
+        relativeToCurrentTypeRange,
+        aroundRange,
+        arbitraryTimeRange
+      } = ele
+
+      const startTime = getCustomTime(
+        timeNum,
+        relativeToCurrentType,
+        timeGranularity,
+        around,
+        arbitraryTime
+      )
+      const endTime = getCustomTime(
+        timeNumRange,
+        relativeToCurrentTypeRange,
+        timeGranularity,
+        aroundRange,
+        arbitraryTimeRange
+      )
+      if (+startTime > +endTime) {
+        ElMessage.error('结束时间必须大于开始时间!')
+        return true
+      }
+      return false
+    }
+
+    if ([1].includes(+ele.displayType)) {
       return false
     }
 
@@ -335,8 +374,10 @@ const confirmValueSource = () => {
 const filterTypeCom = computed(() => {
   const { displayType, timeType = 'fixed' } = curComponent.value
   return ['1', '7'].includes(displayType)
-    ? timeType === 'dynamic' && displayType === '1'
+    ? timeType === 'dynamic'
-      ? DynamicTime
+      ? displayType === '1'
+        ? DynamicTime
+        : DynamicTimeRange
       : Time
     : Select
 })
@@ -425,7 +466,11 @@ const parameterCompletion = () => {
     timeNum: 0,
     relativeToCurrentType: 'year',
     around: 'f',
-    arbitraryTime: new Date()
+    arbitraryTime: new Date(),
+    timeNumRange: 0,
+    relativeToCurrentTypeRange: 'year',
+    aroundRange: 'f',
+    arbitraryTimeRange: new Date()
   }
   Object.entries(attributes).forEach(([key, val]) => {
     !curComponent.value[key] && (curComponent.value[key] = val)
@@ -570,7 +615,7 @@ const relativeToCurrentList = computed(() => {
 })
 
 const dynamicTime = computed(() => {
-  return curComponent.value.timeType === 'dynamic' && curComponent.value.displayType === '1'
+  return curComponent.value.timeType === 'dynamic'
 })
 
 const relativeToCurrentTypeList = computed(() => {
@@ -1087,27 +1132,75 @@ defineExpose({
             <div class="label">
               <el-checkbox v-model="curComponent.parametersCheck" label="绑定参数" />
             </div>
-            <div v-if="curComponent.parametersCheck" class="parameters">
+            <template v-if="curComponent.parametersCheck">
-              <el-select
+              <div v-if="curComponent.displayType !== '7'" class="parameters">
-                popper-class="dataset-parameters"
+                <el-select
-                value-key="id"
+                  popper-class="dataset-parameters"
-                multiple
+                  value-key="id"
-                v-model="curComponent.parameters"
+                  multiple
-                clearable
+                  v-model="curComponent.parameters"
-              >
+                  clearable
-                <el-option
-                  v-for="item in parametersFilter"
-                  :key="item.id"
-                  :label="item.variableName"
-                  :value="item"
                 >
-                  <div class="variable-name ellipsis">{{ item.variableName }}</div>
+                  <el-option
-                  <el-tooltip effect="dark" :content="item.datasetFullName" placement="top">
+                    v-for="item in parametersFilter"
-                    <div class="dataset-full-name ellipsis">{{ item.datasetFullName }}</div>
+                    :key="item.id"
-                  </el-tooltip>
+                    :label="item.variableName"
-                </el-option>
+                    :value="item"
-              </el-select>
+                  >
-            </div>
+                    <div class="variable-name ellipsis">{{ item.variableName }}</div>
+                    <el-tooltip effect="dark" :content="item.datasetFullName" placement="top">
+                      <div class="dataset-full-name ellipsis">{{ item.datasetFullName }}</div>
+                    </el-tooltip>
+                  </el-option>
+                </el-select>
+              </div>
+              <div v-else class="parameters-range">
+                <div class="range-title">开始时间</div>
+                <div class="range-title">结束时间</div>
+                <div class="params-start">
+                  <el-select
+                    popper-class="dataset-parameters"
+                    value-key="id"
+                    multiple
+                    v-model="curComponent.parameters"
+                    clearable
+                  >
+                    <el-option
+                      v-for="item in parametersFilter"
+                      :key="item.id"
+                      :label="item.variableName"
+                      :value="item"
+                    >
+                      <div class="variable-name ellipsis">{{ item.variableName }}</div>
+                      <el-tooltip effect="dark" :content="item.datasetFullName" placement="top">
+                        <div class="dataset-full-name ellipsis">{{ item.datasetFullName }}</div>
+                      </el-tooltip>
+                    </el-option>
+                  </el-select>
+                </div>
+                <div class="params-end">
+                  <el-select
+                    popper-class="dataset-parameters"
+                    value-key="id"
+                    multiple
+                    v-model="curComponent.parameters"
+                    clearable
+                  >
+                    <el-option
+                      v-for="item in parametersFilter"
+                      :key="item.id"
+                      :label="item.variableName"
+                      :value="item"
+                    >
+                      <div class="variable-name ellipsis">{{ item.variableName }}</div>
+                      <el-tooltip effect="dark" :content="item.datasetFullName" placement="top">
+                        <div class="dataset-full-name ellipsis">{{ item.datasetFullName }}</div>
+                      </el-tooltip>
+                    </el-option>
+                  </el-select>
+                </div>
+              </div>
+            </template>
           </div>
           <div class="list-item">
             <div class="label">
@@ -1115,7 +1208,7 @@ defineExpose({
             </div>
             <div
               class="setting-content"
-              v-if="curComponent.defaultValueCheck && curComponent.displayType === '1'"
+              v-if="curComponent.defaultValueCheck && ['1', '7'].includes(curComponent.displayType)"
             >
               <div class="setting">
                 <el-radio-group v-model="curComponent.timeType">
@@ -1123,7 +1216,7 @@ defineExpose({
                   <el-radio label="dynamic">动态时间</el-radio>
                 </el-radio-group>
               </div>
-              <template v-if="dynamicTime">
+              <template v-if="dynamicTime && curComponent.displayType === '1'">
                 <div class="setting">
                   <div class="setting-label">相对当前</div>
                   <div class="setting-value select">
@@ -1170,6 +1263,62 @@ defineExpose({
                   </div>
                 </div>
               </template>
+              <template v-else-if="dynamicTime && curComponent.displayType === '7'">
+                <div class="setting">
+                  <div class="setting-label">开始时间</div>
+                  <div class="setting-input with-date range">
+                    <el-input-number
+                      v-model="curComponent.timeNum"
+                      :min="0"
+                      controls-position="right"
+                    />
+                    <el-select v-model="curComponent.relativeToCurrentType">
+                      <el-option
+                        v-for="item in relativeToCurrentTypeList"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                    <el-select v-model="curComponent.around">
+                      <el-option
+                        v-for="item in aroundList"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                    <el-time-picker v-model="curComponent.arbitraryTime" />
+                  </div>
+                </div>
+                <div class="setting">
+                  <div class="setting-label">结束时间</div>
+                  <div class="setting-input with-date range">
+                    <el-input-number
+                      v-model="curComponent.timeNumRange"
+                      :min="0"
+                      controls-position="right"
+                    />
+                    <el-select v-model="curComponent.relativeToCurrentTypeRange">
+                      <el-option
+                        v-for="item in relativeToCurrentTypeList"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                    <el-select v-model="curComponent.aroundRange">
+                      <el-option
+                        v-for="item in aroundList"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                    <el-time-picker v-model="curComponent.arbitraryTimeRange" />
+                  </div>
+                </div>
+              </template>
             </div>
             <div
               v-if="curComponent.defaultValueCheck"
@@ -1465,8 +1614,38 @@ defineExpose({
               }
             }
           }
+          .parameters-range {
+            width: 100%;
+            padding-left: 24px;
+            display: flex;
+            flex-wrap: wrap;
+            .range-title,
+            .params-start,
+            .params-end {
+              width: 50%;
+            }
+
+            .params-start,
+            .params-end {
+              margin-top: 8px;
+              .ed-select {
+                width: 100%;
+              }
+            }
+
+            .params-end {
+              padding-left: 4px;
+            }
+
+            .params-start {
+              padding-right: 4px;
+            }
+          }
 
           .setting {
+            &.setting {
+              margin-top: 8px;
+            }
             &.parameters {
               width: 100%;
               padding-left: 24px;
@@ -1497,6 +1676,9 @@ defineExpose({
               padding-left: 86px;
               justify-content: flex-end;
               align-items: center;
+              &.range {
+                padding-left: 0px;
+              }
               & > div + div {
                 margin-left: 8px;
               }

core/core-frontend/src/custom-component/v-query/time-format.ts

@@ -50,7 +50,7 @@ function getCustomTime(
   timeType: string,
   timeGranularity: string,
   around: string,
-  arbitraryTime?: string
+  arbitraryTime?: Date
 ) {
   const date = new Date()
   const num = around === 'f' ? -timeNum : timeNum
@@ -80,7 +80,7 @@ function getCustomTime(
   if (!!arbitraryTime) {
     const time = new Date(arbitraryTime)
     time.setFullYear(resultYear)
-    time.setMonth(resultMonth)
+    time.setMonth(resultMonth - 1)
     time.setDate(resultDate)
     return time
   }

core/core-frontend/src/hooks/web/useFilter.ts

@@ -1,6 +1,6 @@
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
-import { getDynamicRange } from '@/custom-component/v-query/time-format'
+import { getDynamicRange, getCustomTime } from '@/custom-component/v-query/time-format'
 const dvMainStore = dvMainStoreWithOut()
 const { componentData } = storeToRefs(dvMainStore)
 
@@ -100,10 +100,46 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
               displayType,
               multiple
             } = item
-            if (timeType === 'dynamic' && +displayType === 1 && firstLoad && !value?.length) {
+            if (
-              selectValue = getDynamicRange(item)
+              timeType === 'dynamic' &&
-              item.defaultValue = new Date(selectValue[0])
+              [1, 7].includes(+displayType) &&
-              item.selectValue = new Date(selectValue[0])
+              firstLoad &&
+              !value?.length
+            ) {
+              if (+displayType === 1) {
+                selectValue = getDynamicRange(item)
+                item.defaultValue = new Date(selectValue[0])
+                item.selectValue = new Date(selectValue[0])
+              } else {
+                const {
+                  timeNum,
+                  relativeToCurrentType,
+                  around,
+                  arbitraryTime,
+                  timeGranularity,
+                  timeNumRange,
+                  relativeToCurrentTypeRange,
+                  aroundRange,
+                  arbitraryTimeRange
+                } = ele
+
+                const startTime = getCustomTime(
+                  timeNum,
+                  relativeToCurrentType,
+                  timeGranularity,
+                  around,
+                  arbitraryTime
+                )
+                const endTime = getCustomTime(
+                  timeNumRange,
+                  relativeToCurrentTypeRange,
+                  timeGranularity,
+                  aroundRange,
+                  arbitraryTimeRange
+                )
+                item.defaultValue = [startTime, endTime]
+                item.selectValue = [startTime, endTime]
+              }
             } else {
               selectValue = getValueByDefaultValueCheckOrFirstLoad(
                 defaultValueCheck,

core/core-frontend/src/views/template-market/component/TemplateMarketV2Item.vue

@@ -14,10 +14,10 @@
         {{ template.title }}
       </el-row>
       <el-row class="template-button">
-        <el-button size="mini" style="width: 100px" @click="templateInnerPreview">{{
+        <el-button size="mini" style="width: calc(50% - 18px)" @click="templateInnerPreview">{{
           t('visualization.preview')
         }}</el-button>
-        <el-button size="mini" style="width: 100px" type="primary" @click="apply">{{
+        <el-button size="mini" style="width: calc(50% - 18px)" type="primary" @click="apply">{{
           t('visualization.apply')
         }}</el-button>
       </el-row>