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; |