diff --git a/core/core-frontend/package.json b/core/core-frontend/package.json
index 349dcd2bcd..872ffd1ece 100644
--- a/core/core-frontend/package.json
+++ b/core/core-frontend/package.json
@@ -24,7 +24,7 @@
     "axios": "^1.3.3",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.9",
-    "element-plus-secondary": "^0.4.15",
+    "element-plus-secondary": "^0.4.16",
     "element-resize-detector": "^1.2.4",
     "file-saver": "^2.0.5",
     "html-to-image": "^1.11.11",
diff --git a/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue b/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue
index 9f2c15ed32..904577a1c1 100644
--- a/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue
+++ b/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue
@@ -5,6 +5,7 @@ import { type DatePickType } from 'element-plus-secondary'
 import { getCustomTime } from './time-format'
 interface SelectConfig {
   timeType: string
+  timeGranularityMultiple: DatePickType
   defaultValue: [Date, Date]
   selectValue: [Date, Date]
   defaultValueCheck: boolean
@@ -25,6 +26,7 @@ const props = defineProps({
     type: Object as PropType<SelectConfig>,
     default: () => {
       return {
+        timeGranularityMultiple: 'datetimerange',
         defaultValue: [],
         selectValue: [],
         timeType: 'fixed',
@@ -136,14 +138,19 @@ const init = () => {
 onBeforeMount(() => {
   init()
 })
+
+const formatDate = computed(() => {
+  return (config.value.timeGranularityMultiple as string) === 'yearrange' ? 'YYYY' : undefined
+})
 </script>
 
 <template>
   <el-date-picker
     disabled
     v-model="selectValue"
-    type="datetimerange"
+    :type="config.timeGranularityMultiple"
     :prefix-icon="Calendar"
+    :format="formatDate"
     :range-separator="$t('cron.to')"
     :start-placeholder="$t('datasource.start_time')"
     :end-placeholder="$t('datasource.end_time')"
diff --git a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
index 8a1301d08d..a68995da66 100644
--- a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
@@ -197,6 +197,12 @@ const setTypeChange = () => {
   nextTick(() => {
     curComponent.value.field.id = ''
     inputCom.value?.displayTypeChange?.()
+    if (
+      +curComponent.value.displayType === 7 &&
+      ['yearrange', 'monthrange', 'datetimerange'].includes(curComponent.value.timeGranularity)
+    ) {
+      curComponent.value.timeGranularityMultiple = curComponent.value.timeGranularity
+    }
   })
 }
 
@@ -635,6 +641,13 @@ const dynamicTime = computed(() => {
 
 const relativeToCurrentTypeList = computed(() => {
   if (!curComponent.value) return []
+  let index = ['year', 'month', 'date', 'datetime'].indexOf(curComponent.value.timeGranularity) + 1
+  if (+curComponent.value.displayType === 7) {
+    index =
+      ['yearrange', 'monthrange', 'datetimerange'].indexOf(
+        curComponent.value.timeGranularityMultiple
+      ) + 1
+  }
   return [
     {
       label: '年',
@@ -648,7 +661,7 @@ const relativeToCurrentTypeList = computed(() => {
       label: '日',
       value: 'date'
     }
-  ].slice(0, ['year', 'month', 'date', 'datetime'].indexOf(curComponent.value.timeGranularity) + 1)
+  ].slice(0, index)
 })
 
 const timeGranularityChange = (val: string) => {
@@ -662,6 +675,15 @@ const timeGranularityChange = (val: string) => {
     curComponent.value.relativeToCurrent = relativeToCurrentList.value[0]?.value
   }
 }
+
+const timeGranularityMultipleChange = (val: string) => {
+  if (
+    ['yearrange', 'monthrange', 'datetimerange'].indexOf(val) <
+    ['year', 'month', 'date'].indexOf(curComponent.value.relativeToCurrentType)
+  ) {
+    curComponent.value.relativeToCurrentType = 'year'
+  }
+}
 const aroundList = [
   {
     label: '前',
@@ -968,9 +990,12 @@ defineExpose({
             <div class="value">
               <template v-if="curComponent.displayType === '7'">
                 <el-select
+                  @change="timeGranularityMultipleChange"
                   placeholder="请选择时间粒度"
                   v-model="curComponent.timeGranularityMultiple"
                 >
+                  <el-option label="年" value="yearrange" />
+                  <el-option label="年月" value="monthrange" />
                   <el-option label="年月日时分秒" value="datetimerange" />
                 </el-select>
               </template>
@@ -1284,7 +1309,13 @@ defineExpose({
                 </div>
               </template>
               <template v-else-if="dynamicTime && curComponent.displayType === '7'">
-                <div class="setting">
+                <div
+                  class="setting"
+                  :class="
+                    ['yearrange', 'monthrange'].includes(curComponent.timeGranularityMultiple) &&
+                    'is-year-month-range'
+                  "
+                >
                   <div class="setting-label">开始时间</div>
                   <div class="setting-input with-date range">
                     <el-input-number
@@ -1311,7 +1342,13 @@ defineExpose({
                     <el-time-picker v-model="curComponent.arbitraryTime" />
                   </div>
                 </div>
-                <div class="setting">
+                <div
+                  class="setting"
+                  :class="
+                    ['yearrange', 'monthrange'].includes(curComponent.timeGranularityMultiple) &&
+                    'is-year-month-range'
+                  "
+                >
                   <div class="setting-label">结束时间</div>
                   <div class="setting-input with-date range">
                     <el-input-number
@@ -1651,6 +1688,7 @@ defineExpose({
             padding-left: 24px;
             display: flex;
             flex-wrap: wrap;
+
             .range-title,
             .params-start,
             .params-end {
@@ -1729,6 +1767,20 @@ defineExpose({
                 }
               }
             }
+
+            &.is-year-month-range {
+              .setting-input {
+                &.with-date {
+                  .ed-input-number,
+                  .ed-select {
+                    width: 103px;
+                  }
+                }
+                .ed-date-editor.ed-input {
+                  display: none;
+                }
+              }
+            }
           }
         }
       }
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 0ead20adab..1f55d4ac4c 100644
--- a/core/core-frontend/src/custom-component/v-query/Time.vue
+++ b/core/core-frontend/src/custom-component/v-query/Time.vue
@@ -121,6 +121,10 @@ onBeforeMount(() => {
 defineExpose({
   displayTypeChange
 })
+
+const formatDate = computed(() => {
+  return (config.value.timeGranularityMultiple as string) === 'yearrange' ? 'YYYY' : undefined
+})
 </script>
 
 <template>
@@ -128,6 +132,7 @@ defineExpose({
     v-model="selectValue"
     :type="config.timeGranularityMultiple"
     :style="selectStyle"
+    :format="formatDate"
     v-if="multiple"
     @change="handleValueChange"
     :prefix-icon="Calendar"
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index 5288234d4c..5bff42219b 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -1102,7 +1102,7 @@ export default {
     select_year: '选择年',
     sql_variable_limit_1: '1、SQL 变量只能在 WHERE 条件中使用',
     sql_variable_limit_2:
-      "2、示例：select * from table_name where column_name1='${'{'}param_name1{'}'}' and column_name2 in  ( ${'{'}param_name2{'}'} ) ",
+      "2、示例：select * from table_name where column_name1='${'{'}param_name1{'}'}' and column_name2 in (${'{'}param_name2{'}'})",
     select_month: '选择月',
     select_date: '选择日期',
     select_time: '选择时间',
diff --git a/core/core-frontend/src/views/visualized/data/dataset/index.vue b/core/core-frontend/src/views/visualized/data/dataset/index.vue
index b7c35f3ae3..4d2aa9e61f 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/index.vue
@@ -759,10 +759,6 @@ const getMenuList = (val: boolean) => {
     height: calc(100vh - 56px);
     overflow: auto;
     position: relative;
-
-    &.h100 {
-      height: 100%;
-    }
   }
 
   .dataset-content {
diff --git a/core/core-frontend/src/views/visualized/data/datasource/index.vue b/core/core-frontend/src/views/visualized/data/datasource/index.vue
index 3730d8d41d..5444f9eeff 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/index.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/index.vue
@@ -1576,8 +1576,6 @@ const getMenuList = (val: boolean) => {
     overflow: auto;
     position: relative;
     &.h100 {
-      height: 100%;
-
       .datasource-table {
         height: calc(100% - 140px);
       }