Showing
9 changed files
with
134 additions
and
183 deletions
src/views/dataview/publicApi/components/SimpleRequest/components/DateRangeSelect/config.data.ts
renamed from
src/views/dataview/publicApi/components/SimpleRequest/components/config.data.ts
src/views/dataview/publicApi/components/SimpleRequest/components/DateRangeSelect/config.ts
0 → 100644
1 | +import { FormSchema } from '/@/components/Form'; | ||
2 | + | ||
3 | +export const scheme: FormSchema[] = [ | ||
4 | + { | ||
5 | + field: 'effectScope', | ||
6 | + label: '时间周期', | ||
7 | + colProps: { span: 24 }, | ||
8 | + component: 'Input', | ||
9 | + defaultValue: 'effectScope', | ||
10 | + componentProps: { | ||
11 | + disabled: true, | ||
12 | + }, | ||
13 | + }, | ||
14 | + { | ||
15 | + field: 'agg', | ||
16 | + label: '聚合方式', | ||
17 | + defaultValue: 'agg', | ||
18 | + colProps: { span: 24 }, | ||
19 | + component: 'Input', | ||
20 | + componentProps: { | ||
21 | + disabled: true, | ||
22 | + }, | ||
23 | + }, | ||
24 | + { | ||
25 | + field: 'interval', | ||
26 | + label: '间隔时间', | ||
27 | + defaultValue: 'interval', | ||
28 | + colProps: { span: 24 }, | ||
29 | + component: 'Input', | ||
30 | + componentProps: { | ||
31 | + disabled: true, | ||
32 | + }, | ||
33 | + }, | ||
34 | +]; |
src/views/dataview/publicApi/components/SimpleRequest/components/DateRangeSelect/helper.ts
renamed from
src/views/dataview/publicApi/components/SimpleRequest/components/helper.ts
src/views/dataview/publicApi/components/SimpleRequest/components/DateRangeSelect/index.vue
0 → 100644
1 | +<script setup lang="ts"> | ||
2 | + import { BasicForm, useForm } from '/@/components/Form'; | ||
3 | + import { scheme } from './config'; | ||
4 | + | ||
5 | + defineEmits(['register']); | ||
6 | + | ||
7 | + const [registerForm, { getFieldsValue, setFieldsValue, resetFields }] = useForm({ | ||
8 | + schemas: scheme, | ||
9 | + showActionButtonGroup: false, | ||
10 | + }); | ||
11 | + | ||
12 | + const getValue = () => { | ||
13 | + return getFieldsValue(); | ||
14 | + }; | ||
15 | + | ||
16 | + const setValue = (objs) => setFieldsValue(objs); | ||
17 | + | ||
18 | + const resetValue = () => resetFields(); | ||
19 | + | ||
20 | + defineExpose({ | ||
21 | + getValue, | ||
22 | + setValue, | ||
23 | + resetValue, | ||
24 | + }); | ||
25 | +</script> | ||
26 | + | ||
27 | +<template> | ||
28 | + <BasicForm @register="registerForm" /> | ||
29 | +</template> |
src/views/dataview/publicApi/components/SimpleRequest/components/config.ts
deleted
100644 → 0
1 | -import moment, { Moment } from 'moment'; | ||
2 | -import { getPacketIntervalByRange, getPacketIntervalByValue } from './helper'; | ||
3 | -import { FormSchema } from '/@/components/Form'; | ||
4 | -import { ColEx } from '/@/components/Form/src/types'; | ||
5 | -import { useGridLayout } from '/@/hooks/component/useGridLayout'; | ||
6 | -export enum QueryWay { | ||
7 | - LATEST = 'latest', | ||
8 | - TIME_PERIOD = 'timePeriod', | ||
9 | -} | ||
10 | - | ||
11 | -export enum SchemaFiled { | ||
12 | - WAY = 'way', | ||
13 | - TIME_PERIOD = 'timePeriod', | ||
14 | - KEYS = 'keys', | ||
15 | - DATE_RANGE = 'dataRange', | ||
16 | - START_TS = 'startTs', | ||
17 | - END_TS = 'endTs', | ||
18 | - INTERVAL = 'interval', | ||
19 | - LIMIT = 'limit', | ||
20 | - AGG = 'agg', | ||
21 | - ORDER_BY = 'orderBy', | ||
22 | -} | ||
23 | - | ||
24 | -export enum AggregateDataEnum { | ||
25 | - MIN = 'MIN', | ||
26 | - MAX = 'MAX', | ||
27 | - AVG = 'AVG', | ||
28 | - SUM = 'SUM', | ||
29 | - COUNT = 'COUNT', | ||
30 | - NONE = 'NONE', | ||
31 | -} | ||
32 | -export const defaultSchemas: FormSchema[] = [ | ||
33 | - { | ||
34 | - field: SchemaFiled.DATE_RANGE, | ||
35 | - label: '时间段', | ||
36 | - component: 'RangePicker', | ||
37 | - rules: [{ required: true, message: '时间段为必选项' }], | ||
38 | - componentProps({ formActionType }) { | ||
39 | - const { setFieldsValue } = formActionType; | ||
40 | - let dates: Moment[] = []; | ||
41 | - return { | ||
42 | - showTime: { | ||
43 | - defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')], | ||
44 | - }, | ||
45 | - onCalendarChange(value: Moment[]) { | ||
46 | - dates = value; | ||
47 | - }, | ||
48 | - disabledDate(current: Moment) { | ||
49 | - if (!dates || dates.length === 0 || !current) { | ||
50 | - return false; | ||
51 | - } | ||
52 | - const diffDate = current.diff(dates[0], 'years', true); | ||
53 | - return Math.abs(diffDate) > 1; | ||
54 | - }, | ||
55 | - onChange() { | ||
56 | - dates = []; | ||
57 | - setFieldsValue({ [SchemaFiled.INTERVAL]: null }); | ||
58 | - }, | ||
59 | - getPopupContainer: () => document.body, | ||
60 | - }; | ||
61 | - }, | ||
62 | - colProps: useGridLayout(2, 2, 2, 2, 2, 2) as unknown as ColEx, | ||
63 | - }, | ||
64 | - { | ||
65 | - field: SchemaFiled.AGG, | ||
66 | - label: '数据聚合功能', | ||
67 | - component: 'Select', | ||
68 | - componentProps: { | ||
69 | - getPopupContainer: () => document.body, | ||
70 | - options: [ | ||
71 | - { label: '最小值', value: AggregateDataEnum.MIN }, | ||
72 | - { label: '最大值', value: AggregateDataEnum.MAX }, | ||
73 | - { label: '平均值', value: AggregateDataEnum.AVG }, | ||
74 | - { label: '求和', value: AggregateDataEnum.SUM }, | ||
75 | - { label: '计数', value: AggregateDataEnum.COUNT }, | ||
76 | - { label: '空', value: AggregateDataEnum.NONE }, | ||
77 | - ], | ||
78 | - }, | ||
79 | - }, | ||
80 | - { | ||
81 | - field: SchemaFiled.INTERVAL, | ||
82 | - label: '分组间隔', | ||
83 | - component: 'Select', | ||
84 | - dynamicRules: ({ model }) => { | ||
85 | - return [ | ||
86 | - { | ||
87 | - required: model[SchemaFiled.AGG] !== AggregateDataEnum.NONE, | ||
88 | - message: '分组间隔为必填项', | ||
89 | - type: 'number', | ||
90 | - }, | ||
91 | - ]; | ||
92 | - }, | ||
93 | - componentProps({ formModel, formActionType }) { | ||
94 | - const options = | ||
95 | - formModel[SchemaFiled.WAY] === QueryWay.LATEST | ||
96 | - ? getPacketIntervalByValue(formModel[SchemaFiled.START_TS]) | ||
97 | - : getPacketIntervalByRange(formModel[SchemaFiled.DATE_RANGE]); | ||
98 | - if (formModel[SchemaFiled.AGG] !== AggregateDataEnum.NONE) { | ||
99 | - formActionType.setFieldsValue({ [SchemaFiled.LIMIT]: null }); | ||
100 | - } | ||
101 | - return { | ||
102 | - options, | ||
103 | - getPopupContainer: () => document.body, | ||
104 | - }; | ||
105 | - }, | ||
106 | - }, | ||
107 | - { | ||
108 | - field: SchemaFiled.LIMIT, | ||
109 | - label: '最大条数', | ||
110 | - component: 'InputNumber', | ||
111 | - // defaultValue: 7, | ||
112 | - ifShow({ values }) { | ||
113 | - return values[SchemaFiled.AGG] === AggregateDataEnum.NONE; | ||
114 | - }, | ||
115 | - helpMessage: ['根据查询条件,查出的数据条数不超过这个值'], | ||
116 | - componentProps() { | ||
117 | - return { | ||
118 | - max: 50000, | ||
119 | - min: 7, | ||
120 | - getPopupContainer: () => document.body, | ||
121 | - }; | ||
122 | - }, | ||
123 | - }, | ||
124 | -]; |
@@ -14,6 +14,7 @@ | @@ -14,6 +14,7 @@ | ||
14 | </td> | 14 | </td> |
15 | <td style="width: 12vw"> | 15 | <td style="width: 12vw"> |
16 | <Select | 16 | <Select |
17 | + :disabled="item.key === 'effectScope,agg,interval' ? true : false" | ||
17 | v-model:value="item.key" | 18 | v-model:value="item.key" |
18 | placeholder="请选择" | 19 | placeholder="请选择" |
19 | :options="selectOptions" | 20 | :options="selectOptions" |
@@ -24,17 +25,19 @@ | @@ -24,17 +25,19 @@ | ||
24 | </td> | 25 | </td> |
25 | <td style="width: 12vw"> | 26 | <td style="width: 12vw"> |
26 | <div v-if="item.key === 'date_range'"> | 27 | <div v-if="item.key === 'date_range'"> |
27 | - <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date1" /> | ||
28 | - <span>~</span> | ||
29 | - <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date2" /> | ||
30 | - </div> | ||
31 | - <div v-if="item.key === 'date_range'"> | ||
32 | - <a-checkbox | ||
33 | - style="position: relative; left: 0" | ||
34 | - @change="onHandleCheck" | ||
35 | - v-model:checked="isDateRange" | ||
36 | - >更多选项</a-checkbox | ||
37 | - > | 28 | + <div> |
29 | + <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date1" /> | ||
30 | + <span>~</span> | ||
31 | + <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date2" /> | ||
32 | + </div> | ||
33 | + <div> | ||
34 | + <a-checkbox | ||
35 | + style="position: relative; left: -3.1vw" | ||
36 | + @change="onHandleCheck" | ||
37 | + v-model:checked="isDateRange" | ||
38 | + >更多选项</a-checkbox | ||
39 | + > | ||
40 | + </div> | ||
38 | </div> | 41 | </div> |
39 | <div v-else> | 42 | <div v-else> |
40 | <a-input | 43 | <a-input |
@@ -63,15 +66,15 @@ | @@ -63,15 +66,15 @@ | ||
63 | </div> | 66 | </div> |
64 | <BasicModal | 67 | <BasicModal |
65 | @register="registerModal" | 68 | @register="registerModal" |
66 | - title="历史数据" | ||
67 | - width="70%" | ||
68 | - :minHeight="400" | ||
69 | - :footer="null" | 69 | + title="" |
70 | + width="40%" | ||
71 | + :minHeight="90" | ||
70 | wrap-class-name="history-trend-model" | 72 | wrap-class-name="history-trend-model" |
71 | :canFullscreen="false" | 73 | :canFullscreen="false" |
72 | @cancel="handleCancelModal" | 74 | @cancel="handleCancelModal" |
75 | + @ok="onHandleModal" | ||
73 | > | 76 | > |
74 | - <TimePeriodForm @register="timePeriodRegister" /> | 77 | + <DateRangeSelect ref="dateRangeSelectRef" /> |
75 | </BasicModal> | 78 | </BasicModal> |
76 | </template> | 79 | </template> |
77 | <script lang="ts" setup name="editCellTable"> | 80 | <script lang="ts" setup name="editCellTable"> |
@@ -82,10 +85,7 @@ | @@ -82,10 +85,7 @@ | ||
82 | import { editCellTableTHeadConfig } from '../../../config'; | 85 | import { editCellTableTHeadConfig } from '../../../config'; |
83 | import { selectType, tableItems } from '../../../types'; | 86 | import { selectType, tableItems } from '../../../types'; |
84 | import { useModal, BasicModal } from '/@/components/Modal'; | 87 | import { useModal, BasicModal } from '/@/components/Modal'; |
85 | - import TimePeriodForm from './selectDateRange.vue'; | ||
86 | - import { selectDeviceAttrSchema } from './config.data'; | ||
87 | - import { defaultSchemas } from './config'; | ||
88 | - import { useTimePeriodForm } from '/@/views/device/localtion/cpns/TimePeriodForm/useTimePeriodForm'; | 88 | + import DateRangeSelect from './DateRangeSelect/index.vue'; |
89 | 89 | ||
90 | defineProps({ | 90 | defineProps({ |
91 | method: { | 91 | method: { |
@@ -95,7 +95,9 @@ | @@ -95,7 +95,9 @@ | ||
95 | 95 | ||
96 | const selectOptions = ref<selectType[]>([]); | 96 | const selectOptions = ref<selectType[]>([]); |
97 | 97 | ||
98 | - const [registerModal, { openModal }] = useModal(); | 98 | + const dateRangeSelectRef = ref<InstanceType<typeof DateRangeSelect>>(); |
99 | + | ||
100 | + const [registerModal, { openModal, closeModal }] = useModal(); | ||
99 | 101 | ||
100 | const isDateRange = ref(false); | 102 | const isDateRange = ref(false); |
101 | 103 | ||
@@ -106,15 +108,19 @@ | @@ -106,15 +108,19 @@ | ||
106 | } | 108 | } |
107 | }; | 109 | }; |
108 | 110 | ||
109 | - const [timePeriodRegister, method] = useTimePeriodForm({ | ||
110 | - schemas: [...defaultSchemas, ...selectDeviceAttrSchema], | ||
111 | - async submitFunc() { | ||
112 | - const value = method.getFieldsValue(); | ||
113 | - console.log(value); | ||
114 | - }, | ||
115 | - }); | 111 | + const handleCancelModal = () => { |
112 | + closeModal(); | ||
113 | + dateRangeSelectRef.value?.resetValue(); | ||
114 | + isDateRange.value = false; | ||
115 | + }; | ||
116 | 116 | ||
117 | - const handleCancelModal = () => {}; | 117 | + const getDateRangeValue = ref<any>({}); |
118 | + | ||
119 | + const onHandleModal = () => { | ||
120 | + const values = dateRangeSelectRef.value?.getValue(); | ||
121 | + getDateRangeValue.value = values; | ||
122 | + closeModal(); | ||
123 | + }; | ||
118 | 124 | ||
119 | onMounted(() => { | 125 | onMounted(() => { |
120 | getSelectOptions(); | 126 | getSelectOptions(); |
@@ -192,7 +198,7 @@ | @@ -192,7 +198,7 @@ | ||
192 | 198 | ||
193 | //获取数据 | 199 | //获取数据 |
194 | const getValue = () => { | 200 | const getValue = () => { |
195 | - const assemblyData = tableArray.content.map((it) => { | 201 | + let assemblyData: any = tableArray.content.map((it) => { |
196 | return { | 202 | return { |
197 | key: it.key, | 203 | key: it.key, |
198 | value: it.key === 'date_range' ? `${it.date1},${it.date2}` : it.value, | 204 | value: it.key === 'date_range' ? `${it.date1},${it.date2}` : it.value, |
@@ -200,13 +206,25 @@ | @@ -200,13 +206,25 @@ | ||
200 | required: it.required, | 206 | required: it.required, |
201 | }; | 207 | }; |
202 | }); | 208 | }); |
209 | + assemblyData = assemblyData.filter((item) => item.key !== 'effectScope,agg,interval'); | ||
210 | + if (getDateRangeValue.value) { | ||
211 | + const joinStr = Object.keys(getDateRangeValue.value)?.join(','); | ||
212 | + if (isDateRange.value) { | ||
213 | + assemblyData.push({ | ||
214 | + key: joinStr, | ||
215 | + value: '', | ||
216 | + isDateRange: isDateRange.value, | ||
217 | + }); | ||
218 | + } | ||
219 | + } | ||
203 | return assemblyData; | 220 | return assemblyData; |
204 | }; | 221 | }; |
205 | 222 | ||
206 | //设置数据 | 223 | //设置数据 |
207 | const setValue = async (data) => { | 224 | const setValue = async (data) => { |
208 | await nextTick(); | 225 | await nextTick(); |
209 | - const assemblyData = data.map((it) => { | 226 | + console.log(data); |
227 | + let assemblyData = data.map((it) => { | ||
210 | return { | 228 | return { |
211 | key: it.key, | 229 | key: it.key, |
212 | value: it.value, | 230 | value: it.value, |
@@ -216,6 +234,19 @@ | @@ -216,6 +234,19 @@ | ||
216 | date2: it.key === 'date_range' ? it.value?.split(',')?.at(-1) : '', | 234 | date2: it.key === 'date_range' ? it.value?.split(',')?.at(-1) : '', |
217 | }; | 235 | }; |
218 | }); | 236 | }); |
237 | + const findIsDateRange = data.find((it) => it?.isDateRange === true); | ||
238 | + if (findIsDateRange?.isDateRange) { | ||
239 | + isDateRange.value = findIsDateRange?.isDateRange; | ||
240 | + getDateRangeValue.value = { | ||
241 | + effectScope: 'effectScope', | ||
242 | + agg: 'agg', | ||
243 | + interval: 'interval', | ||
244 | + }; | ||
245 | + } else { | ||
246 | + assemblyData = assemblyData.filter( | ||
247 | + (item) => item?.isDateRange == false || !item?.isDateRange | ||
248 | + ); | ||
249 | + } | ||
219 | tableArray.content = assemblyData; | 250 | tableArray.content = assemblyData; |
220 | tableArray.content.forEach(() => { | 251 | tableArray.content.forEach(() => { |
221 | handleChange(); | 252 | handleChange(); |
@@ -224,6 +255,7 @@ | @@ -224,6 +255,7 @@ | ||
224 | 255 | ||
225 | //重置数据 | 256 | //重置数据 |
226 | const resetValue = () => { | 257 | const resetValue = () => { |
258 | + isDateRange.value = false; | ||
227 | tableArray.content = []; | 259 | tableArray.content = []; |
228 | tableArray.content.push({ | 260 | tableArray.content.push({ |
229 | key: undefined, | 261 | key: undefined, |
src/views/dataview/publicApi/components/SimpleRequest/components/selectDateRange.vue
deleted
100644 → 0
1 | -<script setup lang="ts"> | ||
2 | - import { BasicForm, useForm } from '/@/components/Form'; | ||
3 | - import { defaultSchemas, SchemaFiled } from './config'; | ||
4 | - import { onMounted } from 'vue'; | ||
5 | - import { useGridLayout } from '/@/hooks/component/useGridLayout'; | ||
6 | - import { ColEx } from '/@/components/Form/src/types'; | ||
7 | - | ||
8 | - const emit = defineEmits(['register']); | ||
9 | - const [register, method] = useForm({ | ||
10 | - schemas: defaultSchemas, | ||
11 | - labelWidth: 120, | ||
12 | - baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx, | ||
13 | - fieldMapToTime: [ | ||
14 | - [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:mm:ss'], | ||
15 | - ], | ||
16 | - showResetButton: false, | ||
17 | - showSubmitButton: false, | ||
18 | - }); | ||
19 | - onMounted(() => { | ||
20 | - emit('register', method); | ||
21 | - }); | ||
22 | -</script> | ||
23 | - | ||
24 | -<template> | ||
25 | - <BasicForm @register="register" /> | ||
26 | -</template> |
@@ -145,9 +145,13 @@ | @@ -145,9 +145,13 @@ | ||
145 | await nextTick(() => { | 145 | await nextTick(() => { |
146 | //拆分"xx,xx,xx"多个 | 146 | //拆分"xx,xx,xx"多个 |
147 | const getSingleKey = props.data?.list; | 147 | const getSingleKey = props.data?.list; |
148 | - const getMuteKey = props.data?.list?.filter((it: any) => it.key?.split(',').length > 1); | 148 | + const findDateRange = [getSingleKey.find((item) => item?.key == 'effectScope,agg,interval')]; |
149 | + const getMuteKey = props.data?.list?.filter( | ||
150 | + (it: any) => it.key?.split(',').length > 1 && it?.key !== 'effectScope,agg,interval' | ||
151 | + ); | ||
149 | const getMuteKeys = getMultipleKeys(getMuteKey); | 152 | const getMuteKeys = getMultipleKeys(getMuteKey); |
150 | - const mergeKeys = [...getSingleKey, ...getMuteKeys]?.filter( | 153 | + const getMuteDateRangeKeys = getMultipleKeys(findDateRange); |
154 | + let mergeKeys = [...getSingleKey, ...getMuteKeys, ...getMuteDateRangeKeys]?.filter( | ||
151 | (it: any) => it.key?.split(',').length === 1 | 155 | (it: any) => it.key?.split(',').length === 1 |
152 | ); | 156 | ); |
153 | testEditCellTableRef.value?.setTableArray(mergeKeys); | 157 | testEditCellTableRef.value?.setTableArray(mergeKeys); |
@@ -14,6 +14,8 @@ export type tableItems = { | @@ -14,6 +14,8 @@ export type tableItems = { | ||
14 | fixed_date_value?: string; | 14 | fixed_date_value?: string; |
15 | editDisabled?: boolean; | 15 | editDisabled?: boolean; |
16 | required?: boolean; | 16 | required?: boolean; |
17 | + data_range_select?: boolean; | ||
18 | + isDateRange?: boolean; | ||
17 | date1?: string; | 19 | date1?: string; |
18 | date2?: string; | 20 | date2?: string; |
19 | keyValue?: null | string; | 21 | keyValue?: null | string; |