Commit 86ab8e4397e95e8c28d403ecd5c969102229da65

Authored by fengtao
1 parent 23947d79

feat: 公共接口管理新增聚合间隔等时间

src/views/dataview/publicApi/components/SimpleRequest/components/DateRangeSelect/config.data.ts renamed from src/views/dataview/publicApi/components/SimpleRequest/components/config.data.ts
  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
  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>
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,
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;