feat(图表): 表格条件样式中，选择的是时间类型的字段时，固定值优化成日期时间选择器

core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue

@@ -8,6 +8,10 @@ import { COLOR_PANEL } from '../../../util/chart'
 import { fieldType } from '@/utils/attr'
 import { iconFieldMap } from '@/components/icon-group/field-list'
 import { cloneDeep } from 'lodash-es'
+import {
+  transDateFormat,
+  transDatePickerType
+} from '@/views/chart/components/editor/util/DateFormatUtil'
 
 const { t } = useI18n()
 
@@ -403,6 +407,14 @@ const getFieldOptions = () => {
   return fieldOptions
 }
 
+const datePickerFormat = (fieldItem: { dateStyle: any; datePattern: any }) => {
+  return transDateFormat(fieldItem.dateStyle, fieldItem.datePattern)
+}
+
+const datePickerType = (fieldItem: { dateStyle: string }) => {
+  return transDatePickerType(fieldItem.dateStyle)
+}
+
 init()
 </script>
 
@@ -528,6 +540,19 @@ init()
                   clearable
                   @change="changeThreshold"
                 />
+                <el-date-picker
+                  v-model="item.value"
+                  v-else-if="[1].includes(fieldItem.field.deType)"
+                  :type="datePickerType(fieldItem.field)"
+                  :placeholder="t('chart.drag_block_label_value')"
+                  :format="datePickerFormat(fieldItem.field)"
+                  :value-format="datePickerFormat(fieldItem.field)"
+                  key="start-time-filt"
+                  size="default"
+                  class="value-item"
+                  @change="changeThreshold"
+                  style="width: 100%"
+                />
                 <el-input
                   v-model="item.value"
                   v-else

core/core-frontend/src/views/chart/components/editor/util/DateFormatUtil.ts

@@ -0,0 +1,67 @@
+export function transDateFormat(dateStyle: string, datePattern: string): string {
+  const split = datePattern?.toLowerCase() === 'date_split' ? '/' : '-'
+
+  if (!dateStyle) {
+    return 'YYYY-MM-DD HH:mm:ss'
+  }
+
+  switch (dateStyle) {
+    case 'y':
+      return 'YYYY'
+    case 'y_M':
+      return `YYYY${split}MM`
+    case 'y_M_d':
+      return `YYYY${split}MM${split}DD`
+    case 'y_M_d_H':
+      return `YYYY${split}MM${split}DD HH`
+    case 'y_M_d_H_m':
+      return `YYYY${split}MM${split}DD HH:mm`
+    case 'y_M_d_H_m_s':
+      return `YYYY${split}MM${split}DD HH:mm:ss`
+    default:
+      return 'YYYY-MM-DD HH:mm:ss'
+  }
+}
+type DatePickerType =
+  | 'year'
+  | 'years'
+  | 'month'
+  | 'months'
+  | 'date'
+  | 'dates'
+  | 'datetime'
+  | 'week'
+  | 'datetimerange'
+  | 'daterange'
+  | 'monthrange'
+  | 'yearrange'
+
+export function transDatePickerType(dateStyle: string | undefined): DatePickerType {
+  if (!dateStyle) {
+    return 'datetime'
+  }
+  const map: Record<string, string> = {
+    y: 'year',
+    y_M: 'month',
+    y_M_d: 'date',
+    y_M_d_H: 'datetime',
+    y_M_d_H_m: 'datetime',
+    y_M_d_H_m_s: 'datetime'
+  }
+  return (
+    <
+      | 'year'
+      | 'years'
+      | 'month'
+      | 'months'
+      | 'date'
+      | 'dates'
+      | 'datetime'
+      | 'week'
+      | 'datetimerange'
+      | 'daterange'
+      | 'monthrange'
+      | 'yearrange'
+    >map[dateStyle ?? ''] ?? 'datetime'
+  )
+}