Commit 31f6730849b732ac86326de1fa5c4f914f4fc20d

Authored by ww
1 parent a073b20f

feat(公共接口/动态表单): 时间区间选择器新增周期范围选择配置

@@ -3,6 +3,7 @@ import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentI @@ -3,6 +3,7 @@ import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentI
3 import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d" 3 import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
4 import { isShareMode } from "@/views/share/hook" 4 import { isShareMode } from "@/views/share/hook"
5 import { customHttp } from "./http" 5 import { customHttp } from "./http"
  6 +import { SelectTimeAggregationFieldEnum } from "@/views/chart/ContentConfigurations/components/ChartData/external/components/SelectTImeAggregation"
6 7
7 export enum ParamsType { 8 export enum ParamsType {
8 REQUIRED, 9 REQUIRED,
@@ -91,6 +92,21 @@ const extraValue = (object: Recordable) => { @@ -91,6 +92,21 @@ const extraValue = (object: Recordable) => {
91 }, {}) 92 }, {})
92 } 93 }
93 94
  95 +const handleParams = (Params: Recordable) => {
  96 + if (Params.keys && Params?.keys?.length) {
  97 + Params.keys = (Params.keys || [] as any).join(',')
  98 + }
  99 +
  100 + const timePeriod = Params[SelectTimeAggregationFieldEnum.TIME_PERIOD]
  101 + if (timePeriod) {
  102 + Params.startTs = Date.now() - timePeriod
  103 + Params.endTs = Date.now()
  104 + Reflect.deleteProperty(Params, SelectTimeAggregationFieldEnum.TIME_PERIOD)
  105 + }
  106 +
  107 + return Object.keys(Params).filter(Boolean).reduce((prev, next) => ({ ...prev, [next]: Params[next] }), {})
  108 +}
  109 +
94 export const customRequest = async (request: RequestConfigType) => { 110 export const customRequest = async (request: RequestConfigType) => {
95 const { requestHttpType, requestParams, requestParamsBodyType, requestOriginUrl } = request as ExtraRequestConfigType 111 const { requestHttpType, requestParams, requestParamsBodyType, requestOriginUrl } = request as ExtraRequestConfigType
96 let { requestUrl } = request as ExtraRequestConfigType 112 let { requestUrl } = request as ExtraRequestConfigType
@@ -105,10 +121,7 @@ export const customRequest = async (request: RequestConfigType) => { @@ -105,10 +121,7 @@ export const customRequest = async (request: RequestConfigType) => {
105 121
106 const body = transformBodyValue(Body, requestParamsBodyType) 122 const body = transformBodyValue(Body, requestParamsBodyType)
107 123
108 - if (Params.keys && Params?.keys?.length) {  
109 - Params.keys = (Params.keys || [] as any).join(',')  
110 - }  
111 - 124 + Params = handleParams(Params)
112 return customHttp.request<any>({ 125 return customHttp.request<any>({
113 url: requestUrl, 126 url: requestUrl,
114 baseURL: getOriginUrl(requestOriginUrl!), 127 baseURL: getOriginUrl(requestOriginUrl!),
@@ -9,6 +9,7 @@ export interface ParamsItemType { @@ -9,6 +9,7 @@ export interface ParamsItemType {
9 key: string 9 key: string
10 required: boolean 10 required: boolean
11 value: string 11 value: string
  12 + mores: boolean
12 } 13 }
13 14
14 export interface PublicInterfaceRequestParams { 15 export interface PublicInterfaceRequestParams {
@@ -95,7 +95,6 @@ watch( @@ -95,7 +95,6 @@ watch(
95 () => props.chartConfig.option.dataset, 95 () => props.chartConfig.option.dataset,
96 newData => { 96 newData => {
97 option.dataset = newData 97 option.dataset = newData
98 - console.log(option.dataset)  
99 }, 98 },
100 { 99 {
101 immediate: true, 100 immediate: true,
@@ -4,6 +4,7 @@ import { FormItemInst, NDatePicker, NForm, NFormItem, NInput, NSelect, NTreeSele @@ -4,6 +4,7 @@ import { FormItemInst, NDatePicker, NForm, NFormItem, NInput, NSelect, NTreeSele
4 import { computed, nextTick, ref, unref, watch } from 'vue'; 4 import { computed, nextTick, ref, unref, watch } from 'vue';
5 import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm'; 5 import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm';
6 import { Help } from '@vicons/ionicons5' 6 import { Help } from '@vicons/ionicons5'
  7 +import { SelectTimeAggregation } from '../SelectTImeAggregation';
7 8
8 const props = defineProps<{ 9 const props = defineProps<{
9 paramsItemList: ParamsItemType[] 10 paramsItemList: ParamsItemType[]
@@ -13,7 +14,8 @@ const componentMap: { [key in ComponentType]?: any } = { @@ -13,7 +14,8 @@ const componentMap: { [key in ComponentType]?: any } = {
13 [ComponentType.SELECT_TREE]: NTreeSelect, 14 [ComponentType.SELECT_TREE]: NTreeSelect,
14 [ComponentType.SELECT]: NSelect, 15 [ComponentType.SELECT]: NSelect,
15 [ComponentType.INPUT]: NInput, 16 [ComponentType.INPUT]: NInput,
16 - [ComponentType.DATE_PICKER]: NDatePicker 17 + [ComponentType.DATE_PICKER]: NDatePicker,
  18 + [ComponentType.SELECT_TIME_AGGREGATION]: SelectTimeAggregation
17 } 19 }
18 20
19 const getParamsItemList = computed(() => { 21 const getParamsItemList = computed(() => {
  1 +enum TimeUnitEnum {
  2 + SECOND = 'SECOND',
  3 + MINUTE = 'MINUTE',
  4 + HOUR = 'HOUR',
  5 + DAY = 'DAY',
  6 +}
  7 +
  8 +const unitMapping = {
  9 + [TimeUnitEnum.SECOND]: '秒',
  10 + [TimeUnitEnum.MINUTE]: '分',
  11 + [TimeUnitEnum.HOUR]: '小时',
  12 + [TimeUnitEnum.DAY]: '天',
  13 +}
  14 +
  15 +const unitConversion = {
  16 + [TimeUnitEnum.SECOND]: 1 * 1000,
  17 + [TimeUnitEnum.MINUTE]: 1 * 60 * 1000,
  18 + [TimeUnitEnum.HOUR]: 1 * 60 * 60 * 1000,
  19 + [TimeUnitEnum.DAY]: 1 * 60 * 60 * 24 * 1000,
  20 +}
  21 +
  22 +export const defaultIntervalOptions = [
  23 + {
  24 + id: 1,
  25 + unit: TimeUnitEnum.SECOND,
  26 + linkage: [
  27 + { id: 1, unit: TimeUnitEnum.SECOND }
  28 + ]
  29 + },
  30 + {
  31 + id: 5,
  32 + unit: TimeUnitEnum.SECOND,
  33 + linkage: [
  34 + { id: 1, unit: TimeUnitEnum.SECOND }
  35 + ]
  36 + },
  37 + {
  38 + id: 10,
  39 + unit: TimeUnitEnum.SECOND,
  40 + linkage: [
  41 + { id: 1, unit: TimeUnitEnum.SECOND }
  42 + ]
  43 + },
  44 + {
  45 + id: 15,
  46 + unit: TimeUnitEnum.SECOND,
  47 + linkage: [
  48 + { id: 1, unit: TimeUnitEnum.SECOND }
  49 + ]
  50 + },
  51 + {
  52 + id: 30,
  53 + unit: TimeUnitEnum.SECOND,
  54 + linkage: [
  55 + { id: 1, unit: TimeUnitEnum.SECOND }
  56 + ]
  57 + },
  58 + {
  59 + id: 1,
  60 + unit: TimeUnitEnum.MINUTE,
  61 + linkage: [
  62 + { id: 1, unit: TimeUnitEnum.SECOND },
  63 + { id: 5, unit: TimeUnitEnum.SECOND },
  64 + ]
  65 + },
  66 + {
  67 + id: 2,
  68 + unit: TimeUnitEnum.MINUTE,
  69 + linkage: [
  70 + { id: 1, unit: TimeUnitEnum.SECOND },
  71 + { id: 5, unit: TimeUnitEnum.SECOND },
  72 + { id: 10, unit: TimeUnitEnum.SECOND },
  73 + { id: 15, unit: TimeUnitEnum.SECOND },
  74 + ]
  75 + },
  76 + {
  77 + id: 5,
  78 + unit: TimeUnitEnum.MINUTE,
  79 + linkage: [
  80 + { id: 1, unit: TimeUnitEnum.SECOND },
  81 + { id: 5, unit: TimeUnitEnum.SECOND },
  82 + { id: 10, unit: TimeUnitEnum.SECOND },
  83 + { id: 15, unit: TimeUnitEnum.SECOND },
  84 + { id: 30, unit: TimeUnitEnum.SECOND },
  85 + ]
  86 + },
  87 + {
  88 + id: 10,
  89 + unit: TimeUnitEnum.MINUTE,
  90 + linkage: [
  91 + { id: 5, unit: TimeUnitEnum.SECOND },
  92 + { id: 10, unit: TimeUnitEnum.SECOND },
  93 + { id: 15, unit: TimeUnitEnum.SECOND },
  94 + { id: 30, unit: TimeUnitEnum.SECOND },
  95 + { id: 1, unit: TimeUnitEnum.MINUTE },
  96 + ]
  97 + },
  98 + {
  99 + id: 15,
  100 + unit: TimeUnitEnum.MINUTE,
  101 + linkage: [
  102 + { id: 5, unit: TimeUnitEnum.SECOND },
  103 + { id: 10, unit: TimeUnitEnum.SECOND },
  104 + { id: 15, unit: TimeUnitEnum.SECOND },
  105 + { id: 30, unit: TimeUnitEnum.SECOND },
  106 + { id: 1, unit: TimeUnitEnum.MINUTE },
  107 + { id: 2, unit: TimeUnitEnum.MINUTE },
  108 + ]
  109 + },
  110 + {
  111 + id: 30,
  112 + unit: TimeUnitEnum.MINUTE,
  113 + linkage: [
  114 + { id: 5, unit: TimeUnitEnum.SECOND },
  115 + { id: 10, unit: TimeUnitEnum.SECOND },
  116 + { id: 15, unit: TimeUnitEnum.SECOND },
  117 + { id: 30, unit: TimeUnitEnum.SECOND },
  118 + { id: 1, unit: TimeUnitEnum.MINUTE },
  119 + { id: 2, unit: TimeUnitEnum.MINUTE },
  120 + ]
  121 + },
  122 + {
  123 + id: 1,
  124 + unit: TimeUnitEnum.HOUR,
  125 + linkage: [
  126 + { id: 10, unit: TimeUnitEnum.SECOND },
  127 + { id: 15, unit: TimeUnitEnum.SECOND },
  128 + { id: 30, unit: TimeUnitEnum.SECOND },
  129 + { id: 1, unit: TimeUnitEnum.MINUTE },
  130 + { id: 2, unit: TimeUnitEnum.MINUTE },
  131 + { id: 5, unit: TimeUnitEnum.MINUTE },
  132 + ]
  133 + },
  134 + {
  135 + id: 2,
  136 + unit: TimeUnitEnum.HOUR,
  137 + linkage: [
  138 + { id: 15, unit: TimeUnitEnum.SECOND },
  139 + { id: 30, unit: TimeUnitEnum.SECOND },
  140 + { id: 1, unit: TimeUnitEnum.MINUTE },
  141 + { id: 2, unit: TimeUnitEnum.MINUTE },
  142 + { id: 5, unit: TimeUnitEnum.MINUTE },
  143 + { id: 10, unit: TimeUnitEnum.MINUTE },
  144 + { id: 15, unit: TimeUnitEnum.MINUTE },
  145 + ]
  146 + },
  147 + {
  148 + id: 5,
  149 + unit: TimeUnitEnum.HOUR,
  150 + linkage: [
  151 + { id: 1, unit: TimeUnitEnum.MINUTE },
  152 + { id: 2, unit: TimeUnitEnum.MINUTE },
  153 + { id: 5, unit: TimeUnitEnum.MINUTE },
  154 + { id: 10, unit: TimeUnitEnum.MINUTE },
  155 + { id: 15, unit: TimeUnitEnum.MINUTE },
  156 + { id: 30, unit: TimeUnitEnum.MINUTE },
  157 + ]
  158 + },
  159 + {
  160 + id: 10,
  161 + unit: TimeUnitEnum.HOUR,
  162 + linkage: [
  163 + { id: 2, unit: TimeUnitEnum.MINUTE },
  164 + { id: 5, unit: TimeUnitEnum.MINUTE },
  165 + { id: 10, unit: TimeUnitEnum.MINUTE },
  166 + { id: 15, unit: TimeUnitEnum.MINUTE },
  167 + { id: 30, unit: TimeUnitEnum.MINUTE },
  168 + { id: 1, unit: TimeUnitEnum.HOUR },
  169 + ]
  170 + },
  171 + {
  172 + id: 12,
  173 + unit: TimeUnitEnum.HOUR,
  174 + linkage: [
  175 + { id: 2, unit: TimeUnitEnum.MINUTE },
  176 + { id: 5, unit: TimeUnitEnum.MINUTE },
  177 + { id: 10, unit: TimeUnitEnum.MINUTE },
  178 + { id: 15, unit: TimeUnitEnum.MINUTE },
  179 + { id: 30, unit: TimeUnitEnum.MINUTE },
  180 + { id: 1, unit: TimeUnitEnum.HOUR },
  181 + ]
  182 + },
  183 + {
  184 + id: 1,
  185 + unit: TimeUnitEnum.DAY,
  186 + linkage: [
  187 + { id: 5, unit: TimeUnitEnum.MINUTE },
  188 + { id: 10, unit: TimeUnitEnum.MINUTE },
  189 + { id: 15, unit: TimeUnitEnum.MINUTE },
  190 + { id: 30, unit: TimeUnitEnum.MINUTE },
  191 + { id: 1, unit: TimeUnitEnum.HOUR },
  192 + { id: 2, unit: TimeUnitEnum.HOUR },
  193 + ]
  194 + },
  195 + {
  196 + id: 7,
  197 + unit: TimeUnitEnum.DAY,
  198 + linkage: [
  199 + { id: 30, unit: TimeUnitEnum.MINUTE },
  200 + { id: 1, unit: TimeUnitEnum.HOUR },
  201 + { id: 2, unit: TimeUnitEnum.HOUR },
  202 + { id: 5, unit: TimeUnitEnum.HOUR },
  203 + { id: 10, unit: TimeUnitEnum.HOUR },
  204 + { id: 12, unit: TimeUnitEnum.HOUR },
  205 + { id: 1, unit: TimeUnitEnum.DAY },
  206 + ]
  207 + },
  208 + {
  209 + id: 30,
  210 + unit: TimeUnitEnum.DAY,
  211 + linkage: [
  212 + { id: 2, unit: TimeUnitEnum.HOUR },
  213 + { id: 5, unit: TimeUnitEnum.HOUR },
  214 + { id: 10, unit: TimeUnitEnum.HOUR },
  215 + { id: 12, unit: TimeUnitEnum.HOUR },
  216 + { id: 1, unit: TimeUnitEnum.DAY },
  217 + ]
  218 + },
  219 +].map(item => {
  220 + return {
  221 + id: item.id * unitConversion[item.unit],
  222 + name: item.id + unitMapping[item.unit],
  223 + linkage: item.linkage.map(item => {
  224 + return {
  225 + id: item.id * unitConversion[item.unit],
  226 + name: item.id + unitMapping[item.unit],
  227 + }
  228 + })
  229 + }
  230 +})
  231 +
  232 +export const aggergationOptions = [
  233 + { id: 'AVG', name: '平均值' },
  234 + { id: 'MIN', name: '最小值' },
  235 + { id: 'MAX', name: '最大值' },
  236 + { id: 'SUM', name: '求和' },
  237 + { id: 'COUNT', name: '计数' },
  238 + { id: 'NONE', name: '空' },
  239 +]
@@ -6,6 +6,8 @@ import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore @@ -6,6 +6,8 @@ import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore
6 import { DatePickerProps, FormItemRule, InputProps, SelectProps, TreeSelectProps } from "naive-ui" 6 import { DatePickerProps, FormItemRule, InputProps, SelectProps, TreeSelectProps } from "naive-ui"
7 import { computed, onMounted, reactive, Ref, ref, unref } from "vue" 7 import { computed, onMounted, reactive, Ref, ref, unref } from "vue"
8 import { DictEnum } from '@/enums/external/dictEnum' 8 import { DictEnum } from '@/enums/external/dictEnum'
  9 +import { SelectTimeAggregationFieldEnum, SelectTimeAggregationValueTypw } from "../SelectTImeAggregation"
  10 +import { isArray } from "@/utils"
9 11
10 const GROUP_SEPARATOR = ',' 12 const GROUP_SEPARATOR = ','
11 13
@@ -15,7 +17,8 @@ export enum BuiltInVariable { @@ -15,7 +17,8 @@ export enum BuiltInVariable {
15 ORGANIZATION_ID = 'organizationId', 17 ORGANIZATION_ID = 'organizationId',
16 DEVICE_PROFILE_ID = 'deviceProfileId', 18 DEVICE_PROFILE_ID = 'deviceProfileId',
17 DATE_FIXED = 'fixed_date', 19 DATE_FIXED = 'fixed_date',
18 - DATE_RANGE = 'date_range' 20 + DATE_RANGE = 'date_range',
  21 + SELECT_TIME_AGGREGATION = 'selectTimeAggregation'
19 } 22 }
20 23
21 export enum ComponentType { 24 export enum ComponentType {
@@ -23,6 +26,7 @@ export enum ComponentType { @@ -23,6 +26,7 @@ export enum ComponentType {
23 SELECT_TREE = 'selectTree', 26 SELECT_TREE = 'selectTree',
24 DATE_PICKER = 'datePicker', 27 DATE_PICKER = 'datePicker',
25 INPUT = 'input', 28 INPUT = 'input',
  29 + SELECT_TIME_AGGREGATION = 'selectTimeAggregation'
26 } 30 }
27 31
28 32
@@ -57,7 +61,9 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { @@ -57,7 +61,9 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
57 61
58 const builtInVariable = ref<BuiltInVariableRecord>() 62 const builtInVariable = ref<BuiltInVariableRecord>()
59 63
60 - const params = reactive<Recordable & { [key in BuiltInVariable]?: any }>({}) 64 + const params = reactive<Recordable & { [key in BuiltInVariable]?: any }>({
  65 + [BuiltInVariable.SELECT_TIME_AGGREGATION]: {}
  66 + })
61 67
62 const optionsSet = reactive<Recordable>({}) 68 const optionsSet = reactive<Recordable>({})
63 69
@@ -109,7 +115,6 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { @@ -109,7 +115,6 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
109 if (!validIsExist(BuiltInVariable.DEVICE_PROFILE_ID) || !validIsExist(BuiltInVariable.ORGANIZATION_ID) || !params[BuiltInVariable.ORGANIZATION_ID]) return 115 if (!validIsExist(BuiltInVariable.DEVICE_PROFILE_ID) || !validIsExist(BuiltInVariable.ORGANIZATION_ID) || !params[BuiltInVariable.ORGANIZATION_ID]) return
110 const result: Recordable[] = await getDeviceList({ [BuiltInVariable.ORGANIZATION_ID]: params[BuiltInVariable.ORGANIZATION_ID], [BuiltInVariable.DEVICE_PROFILE_ID]: params[BuiltInVariable.DEVICE_PROFILE_ID] }) 116 const result: Recordable[] = await getDeviceList({ [BuiltInVariable.ORGANIZATION_ID]: params[BuiltInVariable.ORGANIZATION_ID], [BuiltInVariable.DEVICE_PROFILE_ID]: params[BuiltInVariable.DEVICE_PROFILE_ID] })
111 optionsSet[BuiltInVariable.ENTITY_ID] = result.map(item => ({ ...item, alias: item.alias || item.name })) 117 optionsSet[BuiltInVariable.ENTITY_ID] = result.map(item => ({ ...item, alias: item.alias || item.name }))
112 - console.log(optionsSet[BuiltInVariable.ENTITY_ID])  
113 } 118 }
114 119
115 const getDeviceAttrOption = async () => { 120 const getDeviceAttrOption = async () => {
@@ -121,6 +126,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { @@ -121,6 +126,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
121 126
122 const getValue = computed(() => { 127 const getValue = computed(() => {
123 const value = { ...unref(params) } 128 const value = { ...unref(params) }
  129 +
124 if (Reflect.has(value, BuiltInVariable.DATE_FIXED)) { 130 if (Reflect.has(value, BuiltInVariable.DATE_FIXED)) {
125 const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_FIXED) 131 const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_FIXED)
126 Reflect.set(value, fieldMapping?.value || '', value[BuiltInVariable.DATE_FIXED]) 132 Reflect.set(value, fieldMapping?.value || '', value[BuiltInVariable.DATE_FIXED])
@@ -130,13 +136,19 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { @@ -130,13 +136,19 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
130 if (Reflect.has(value, BuiltInVariable.DATE_RANGE)) { 136 if (Reflect.has(value, BuiltInVariable.DATE_RANGE)) {
131 const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_RANGE) 137 const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_RANGE)
132 const [start, end] = ((fieldMapping || {}).value || '').split(GROUP_SEPARATOR) 138 const [start, end] = ((fieldMapping || {}).value || '').split(GROUP_SEPARATOR)
133 - const [startValue, endValue] = value[BuiltInVariable.DATE_RANGE] || [] 139 + const dateRangeValue = value[BuiltInVariable.DATE_RANGE]
  140 + const [startValue, endValue] = isArray(dateRangeValue) ? dateRangeValue : [null, null]
134 value[start] = startValue 141 value[start] = startValue
135 value[end] = endValue 142 value[end] = endValue
136 -  
137 Reflect.deleteProperty(value, BuiltInVariable.DATE_RANGE) 143 Reflect.deleteProperty(value, BuiltInVariable.DATE_RANGE)
138 } 144 }
139 145
  146 + if (Reflect.has(value, BuiltInVariable.SELECT_TIME_AGGREGATION)) {
  147 + const aggregation = Reflect.get(value, BuiltInVariable.SELECT_TIME_AGGREGATION) || {}
  148 + Object.assign(value, { ...aggregation })
  149 + Reflect.deleteProperty(value, BuiltInVariable.SELECT_TIME_AGGREGATION)
  150 + }
  151 +
140 return value 152 return value
141 }) 153 })
142 154
@@ -240,6 +252,15 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { @@ -240,6 +252,15 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
240 } as InputProps 252 } as InputProps
241 } 253 }
242 254
  255 + const getSelectTimeAggregation = computed(() => {
  256 + return {
  257 + value: params[BuiltInVariable.SELECT_TIME_AGGREGATION],
  258 + onChange(value: SelectTimeAggregationValueTypw) {
  259 + params[BuiltInVariable.SELECT_TIME_AGGREGATION] = value
  260 + }
  261 + }
  262 + })
  263 +
243 const builtInVariableConfiguration: { [key in BuiltInVariable]?: DynamicFormSchema } = { 264 const builtInVariableConfiguration: { [key in BuiltInVariable]?: DynamicFormSchema } = {
244 [BuiltInVariable.ORGANIZATION_ID]: { 265 [BuiltInVariable.ORGANIZATION_ID]: {
245 component: ComponentType.SELECT_TREE, 266 component: ComponentType.SELECT_TREE,
@@ -270,9 +291,32 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { @@ -270,9 +291,32 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
270 component: ComponentType.DATE_PICKER, 291 component: ComponentType.DATE_PICKER,
271 key: BuiltInVariable.DATE_FIXED, 292 key: BuiltInVariable.DATE_FIXED,
272 props: getSelectDate 293 props: getSelectDate
  294 + },
  295 + }
  296 +
  297 + const moresComponentConfiguration: { [key in BuiltInVariable]?: DynamicFormSchema } = {
  298 + [BuiltInVariable.DATE_RANGE]: {
  299 + component: ComponentType.SELECT_TIME_AGGREGATION,
  300 + key: BuiltInVariable.SELECT_TIME_AGGREGATION,
  301 + props: getSelectTimeAggregation
273 } 302 }
274 } 303 }
275 304
  305 + const timePeriodRules = (required: boolean, key: string, message: string) => {
  306 + return [{
  307 + trigger: ['blur', 'change'],
  308 + validator() {
  309 + const record = params[BuiltInVariable.SELECT_TIME_AGGREGATION]
  310 + // const keys = [SelectTimeAggregationFieldEnum.AGG, SelectTimeAggregationFieldEnum.INTERVAL, SelectTimeAggregationFieldEnum.TIME_PERIOD]
  311 + if (required && ![record[SelectTimeAggregationFieldEnum.AGG], record[SelectTimeAggregationFieldEnum.INTERVAL], record[SelectTimeAggregationFieldEnum.TIME_PERIOD]].every(Boolean)) {
  312 + validFlag.value = false
  313 + return new Error(`${message}需要填写完整`)
  314 + }
  315 + validFlag.value = true
  316 + }
  317 + }] as FormItemRule
  318 + }
  319 +
276 const validFlag = ref(true) 320 const validFlag = ref(true)
277 321
278 const createRules = (required: boolean, key: string, message: string) => { 322 const createRules = (required: boolean, key: string, message: string) => {
@@ -288,20 +332,25 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { @@ -288,20 +332,25 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
288 }] as FormItemRule 332 }] as FormItemRule
289 } 333 }
290 334
291 - const toFormSchemas = (builtInVariableKey: string, required: boolean, value: any) => { 335 + const toFormSchemas = (builtInVariableKey: string, required: boolean, value: any, mores: boolean) => {
292 const groupList = (builtInVariableKey || '').split(GROUP_SEPARATOR) 336 const groupList = (builtInVariableKey || '').split(GROUP_SEPARATOR)
293 return groupList.reduce((prev, next) => { 337 return groupList.reduce((prev, next) => {
294 - const result = builtInVariableConfiguration[next as BuiltInVariable]  
295 - const props = unref(result?.props) 338 + let result = builtInVariableConfiguration[next as BuiltInVariable]
  339 + let props = unref(result?.props)
296 const name = (unref(builtInVariable) || {})[next as BuiltInVariable]?.itemText 340 const name = (unref(builtInVariable) || {})[next as BuiltInVariable]?.itemText
297 let schema: DynamicFormSchema 341 let schema: DynamicFormSchema
298 - if (builtInVariableConfiguration[next as BuiltInVariable]) { 342 + if (result) {
  343 + if (mores) {
  344 + result = moresComponentConfiguration[next as BuiltInVariable]
  345 + props = unref(result?.props)
  346 + }
  347 +
299 schema = { 348 schema = {
300 ...result, 349 ...result,
301 props, 350 props,
302 name, 351 name,
303 required, 352 required,
304 - rules: createRules(required, next, name || next) 353 + rules: mores ? timePeriodRules(required, next, name || next) : createRules(required, next, name || next)
305 } as DynamicFormSchema 354 } as DynamicFormSchema
306 } else { 355 } else {
307 schema = { 356 schema = {
@@ -313,7 +362,6 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { @@ -313,7 +362,6 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
313 rules: createRules(required, value, value) 362 rules: createRules(required, value, value)
314 } as DynamicFormSchema 363 } as DynamicFormSchema
315 } 364 }
316 -  
317 return [...prev, schema] 365 return [...prev, schema]
318 366
319 }, [] as DynamicFormSchema[]) 367 }, [] as DynamicFormSchema[])
@@ -321,10 +369,11 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { @@ -321,10 +369,11 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
321 } 369 }
322 370
323 const getDynamicFormSchemas = computed<DynamicFormSchema[]>(() => { 371 const getDynamicFormSchemas = computed<DynamicFormSchema[]>(() => {
324 - return unref(getParams).reduce((prev: DynamicFormSchema[], { key, value, required }) => {  
325 - const schemas = toFormSchemas(key, required, value) 372 + const result = unref(getParams).reduce((prev: DynamicFormSchema[], { key, value, required, mores }) => {
  373 + const schemas = toFormSchemas(key, required, value, mores)
326 return [...prev, ...schemas] 374 return [...prev, ...schemas]
327 }, [] as DynamicFormSchema[]) 375 }, [] as DynamicFormSchema[])
  376 + return result
328 }) 377 })
329 378
330 const createForm = async () => { 379 const createForm = async () => {
@@ -335,15 +384,20 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { @@ -335,15 +384,20 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
335 } 384 }
336 385
337 const setParams = (Params: Recordable = {}) => { 386 const setParams = (Params: Recordable = {}) => {
338 - for (const { key, value } of unref(getParams)) { 387 + for (const { key, value, mores } of unref(getParams)) {
339 const splitKeys = value ? value.split(GROUP_SEPARATOR) : key.split(GROUP_SEPARATOR) 388 const splitKeys = value ? value.split(GROUP_SEPARATOR) : key.split(GROUP_SEPARATOR)
340 if (isDateComponent(key as BuiltInVariable)) { 389 if (isDateComponent(key as BuiltInVariable)) {
341 if (key as BuiltInVariable === BuiltInVariable.DATE_FIXED) { 390 if (key as BuiltInVariable === BuiltInVariable.DATE_FIXED) {
342 params[key] = Params[splitKeys[0]] || null 391 params[key] = Params[splitKeys[0]] || null
343 continue 392 continue
344 } 393 }
345 - const value = [Params[splitKeys[0]], Params[splitKeys[1]]]  
346 - params[key] = value.every(Boolean) ? value : null 394 + if (mores) {
  395 + const { agg, interval, timePeriod } = Params
  396 + params[BuiltInVariable.SELECT_TIME_AGGREGATION] = { agg, interval, timePeriod }
  397 + } else {
  398 + const value = [Params[splitKeys[0]], Params[splitKeys[1]]]
  399 + params[key] = value.every(Boolean) ? value : null
  400 + }
347 continue 401 continue
348 } 402 }
349 for (const temp of splitKeys) { 403 for (const temp of splitKeys) {
@@ -356,6 +410,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { @@ -356,6 +410,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
356 Object.keys(params).forEach(key => { 410 Object.keys(params).forEach(key => {
357 Reflect.deleteProperty(params, key) 411 Reflect.deleteProperty(params, key)
358 }) 412 })
  413 + params[BuiltInVariable.SELECT_TIME_AGGREGATION] = {}
359 } 414 }
360 415
361 const setDynamicFormValue = (params: Recordable) => { 416 const setDynamicFormValue = (params: Recordable) => {
  1 +export { default as SelectTimeAggregation } from './index.vue'
  2 +
  3 +export interface SelectTimeAggregationValueTypw {
  4 + timePeriod?: Nullable<number>
  5 + agg?: Nullable<string>
  6 + interval?: Nullable<number>
  7 +}
  8 +
  9 +
  10 +export enum SelectTimeAggregationFieldEnum {
  11 + TIME_PERIOD = 'timePeriod',
  12 + AGG = 'agg',
  13 + INTERVAL = 'interval'
  14 +}
  15 +
  1 +<script lang="ts">
  2 +export default {
  3 + inheritAttrs: true,
  4 + components: { NFormItem }
  5 +}
  6 +</script>
  7 +<script lang="ts" setup>
  8 +import { FormItemRule, NFormItem, NGi, NGrid, NSelect } from 'naive-ui';
  9 +import { defaultIntervalOptions, aggergationOptions } from '../DynamicForm/timeInterval'
  10 +import { unref, computed, ref, watch } from 'vue';
  11 +import { isObject } from '@/utils/external/is';
  12 +
  13 +interface Value {
  14 + timePeriod?: Nullable<number>
  15 + agg?: Nullable<string>
  16 + interval?: Nullable<number>
  17 +}
  18 +
  19 +const props = withDefaults(
  20 + defineProps<{
  21 + value?: Value
  22 + }>(),
  23 + {
  24 + value: () => ({})
  25 + }
  26 +)
  27 +
  28 +const emit = defineEmits<{
  29 + (e: 'update:value', value: Value): void
  30 + (e: 'change', value: Value): void
  31 +}>()
  32 +
  33 +
  34 +const timePeriod = ref(props.value?.timePeriod)
  35 +const agg = ref(props.value?.agg)
  36 +const interval = ref(props.value?.interval)
  37 +
  38 +const getIntervalTimeOptions = computed(() => {
  39 + return defaultIntervalOptions.find(item => item.id === unref(timePeriod))?.linkage || []
  40 +})
  41 +
  42 +// const getTimePeriod = computed({
  43 +// get() {
  44 +// return props.value?.timePeriod
  45 +// },
  46 +// set(value) {
  47 +// emit('update:value', { ...props.value || {}, timePeriod: value })
  48 +// emit('change', { ...props.value || {}, timePeriod: value })
  49 +// }
  50 +// })
  51 +
  52 +// const getAggereation = computed({
  53 +// get() {
  54 +// return props.value?.agg
  55 +// },
  56 +// set(value) {
  57 +// emit('update:value', { ...props.value || {}, agg: value })
  58 +// emit('change', { ...props.value || {}, agg: value })
  59 +
  60 +// }
  61 +// })
  62 +// const getInterval = computed({
  63 +// get() {
  64 +// return props.value?.interval
  65 +// },
  66 +// set(value) {
  67 +// emit('update:value', { ...props.value || {}, interval: value })
  68 +// emit('change', { ...props.value || {}, interval: value })
  69 +
  70 +// }
  71 +// })
  72 +
  73 +// const getTimePeriod = computed(() => props.value.timePeriod)
  74 +// const getAggereation = computed(() => props.value.agg)
  75 +// const getInterval = computed(() => props.value.interval)
  76 +
  77 +const handleTimePerionChange = (value: number) => {
  78 + emit('update:value', { ...props.value, timePeriod: value, interval: null })
  79 + emit('change', { ...props.value || {}, timePeriod: value, interval: null })
  80 +}
  81 +
  82 +const handleAggChange = (value: string) => {
  83 + emit('update:value', { ...props.value, agg: value })
  84 + emit('change', { ...props.value, agg: value })
  85 +}
  86 +
  87 +const handleIntervalChange = (value: number) => {
  88 + emit('update:value', { ...props.value, interval: value })
  89 + emit('change', { ...props.value, interval: value })
  90 +}
  91 +
  92 +watch(() => props.value, (target) => {
  93 + if (target && isObject(target)) {
  94 + const { agg: _agg, interval: _interval, timePeriod: _timePeriod } = target || {}
  95 + timePeriod.value = _timePeriod
  96 + agg.value = _agg
  97 + interval.value = _interval
  98 + }
  99 +})
  100 +
  101 +const timePeriodRule: FormItemRule = {
  102 + trigger: ['blur'],
  103 + validator() {
  104 + if (!unref(timePeriod)) {
  105 + return new Error('请选择时间周期')
  106 + }
  107 + }
  108 +}
  109 +
  110 +const aggRule: FormItemRule = {
  111 + trigger: ['blur'],
  112 + validator() {
  113 + if (!unref(agg)) {
  114 + return new Error('请选择聚合方式')
  115 + }
  116 + }
  117 +}
  118 +
  119 +const intervalRule: FormItemRule = {
  120 + trigger: ['blur'],
  121 + validator() {
  122 + if (!unref(interval)) {
  123 + return new Error('请选择间隔时间')
  124 + }
  125 + }
  126 +}
  127 +
  128 +</script>
  129 +
  130 +<template>
  131 + <NGrid :cols="3">
  132 + <NGi>
  133 + <NFormItem :show-label="false" :rule="timePeriodRule">
  134 + <NSelect v-model:value="timePeriod" :options="defaultIntervalOptions" label-field="name" value-field="id"
  135 + @update:value="handleTimePerionChange" placeholder="请选择时间周期"></NSelect>
  136 + </NFormItem>
  137 + </NGi>
  138 + <NGi>
  139 + <NFormItem :show-label="false" :rule="aggRule">
  140 + <NSelect v-model:value="agg" @update:value="handleAggChange" :options="aggergationOptions" label-field="name"
  141 + value-field="id" placeholder="聚合方式"></NSelect>
  142 + </NFormItem>
  143 + </NGi>
  144 + <NGi>
  145 + <NFormItem :show-label="false" :rule="intervalRule">
  146 + <NSelect v-model:value="interval" @update:value="handleIntervalChange" :options="getIntervalTimeOptions"
  147 + label-field="name" value-field="id" placeholder="间隔时间"></NSelect>
  148 + </NFormItem>
  149 + </NGi>
  150 + </NGrid>
  151 +</template>