简柏林 / thingskit-front · Commits

Commit 406515aa8983894886b941c3f5ae288f73f9932a

Authored by fengtao
1 parent 1ec03a6f

refractor：重新修改了报表配置部分代码

Inline Side-by-side
Showing 3 changed files with 289 additions and 370 deletions
1 <template> 1 <template>
2 - <BasicDrawer  
3 - v-bind="$attrs"  
4 - @register="registerDrawer"  
5 - showFooter  
6 - :title="getTitle"  
7 - width="30%"  
8 - @ok="handleSubmit"  
9 - > 2 + <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="30%" @ok="handleSubmit">
10 <BasicForm @register="registerForm"> 3 <BasicForm @register="registerForm">
11 <template #devices> 4 <template #devices>
12 - <Select  
13 - placeholder="请选择设备"  
14 - v-model:value="selectDevice"  
15 - style="width: 100%"  
16 - :options="selectOptions"  
17 - @change="handleDeviceChange"  
18 - mode="multiple"  
19 - labelInValue  
20 - allowClear  
21 - notFoundContent="请选择设备"  
22 - /> 5 + <Select placeholder="请选择设备" v-model:value="selectDevice" style="width: 100%" :options="selectOptions"
  6 + @change="handleDeviceChange" mode="multiple" labelInValue allowClear notFoundContent="请选择设备" />
23 <div style="margin-top: 1.5vh"></div> 7 <div style="margin-top: 1.5vh"></div>
24 <div v-for="(item, index) in deviceList" :key="index"> 8 <div v-for="(item, index) in deviceList" :key="index">
25 - <DeviceAttrCpns  
26 - ref="deviceAttrRef"  
27 - @change="handleChange"  
28 - :value="item"  
29 - :orgId="organizationId || orgId"  
30 - /> 9 + <DeviceAttrCpns ref="deviceAttrRef" @change="handleChange" :value="item" :orgId="organizationId || orgId" />
31 </div> 10 </div>
32 </template> 11 </template>
33 </BasicForm> 12 </BasicForm>
34 </BasicDrawer> 13 </BasicDrawer>
35 </template> 14 </template>
36 <script lang="ts" setup> 15 <script lang="ts" setup>
37 - import { ref, computed, unref, reactive, watch, nextTick } from 'vue';  
38 - import { BasicForm, useForm } from '/@/components/Form';  
39 - import { formSchema, organizationId } from './config.data';  
40 - import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';  
41 - import { createOrEditReportManage, putReportConfigManage } from '/@/api/report/reportManager';  
42 - import { useMessage } from '/@/hooks/web/useMessage';  
43 - import moment from 'moment';  
44 - import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi';  
45 - import { Select } from 'ant-design-vue';  
46 - import DeviceAttrCpns from './cpns/DeviceAttrCpns.vue'; 16 +import { ref, computed, unref, reactive, watch, nextTick, Ref } from 'vue';
  17 +import { BasicForm, useForm } from '/@/components/Form';
  18 +import { formSchema, organizationId } from './config.data';
  19 +import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  20 +import { createOrEditReportManage, putReportConfigManage } from '/@/api/report/reportManager';
  21 +import { useMessage } from '/@/hooks/web/useMessage';
  22 +import moment from 'moment';
  23 +import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi';
  24 +import { Select } from 'ant-design-vue';
  25 +import DeviceAttrCpns from './cpns/DeviceAttrCpns.vue';
  26 +import { SelectTypes } from 'ant-design-vue/es/select';
47 27
48 - const emit = defineEmits(['success', 'register']);  
49 - const deviceAttrRef: any = ref(null);  
50 - const isUpdate = ref(true);  
51 - const editId = ref('');  
52 - const orgId = ref('');  
53 - const selectOptions: any = ref([]);  
54 - const selectDevice = ref([]);  
55 - const deviceList: any = ref([]);  
56 - watch(organizationId, async (newValue: string) => {  
57 - if (!newValue) return;  
58 - //获取设备 28 +type TDeviceList = {
  29 + key?: string,
  30 + value?: string,
  31 + label?: string,
  32 + attribute?: string,
  33 + device?: string
  34 +}
  35 +const emit = defineEmits(['success', 'register']);
  36 +const deviceAttrRef: any = ref(null);
  37 +const isUpdate = ref(true);
  38 +const editId = ref('');
  39 +const orgId = ref('');
  40 +const selectOptions: Ref<SelectTypes['options']> = ref([]);
  41 +const selectDevice = ref([]);
  42 +const deviceList: Ref<TDeviceList[]> = ref([]);
  43 +
  44 +watch(organizationId, async (newValue: string) => {
  45 + if (!newValue) return;
  46 + //获取设备
  47 + const { items } = await screenLinkPageByDeptIdGetDevice({
  48 + organizationId: newValue,
  49 + });
  50 + selectOptions.value = items.map((item) => {
  51 + if (item.deviceType !== 'GATEWAY')
  52 + return {
  53 + label: item.name,
  54 + value: item.tbDeviceId,
  55 + };
  56 + });
  57 +});
  58 +const handleDeviceChange = (e) => {
  59 + deviceList.value = e;
  60 +};
  61 +const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
  62 + labelWidth: 120,
  63 + schemas: formSchema,
  64 + showActionButtonGroup: false,
  65 + fieldMapToTime: [['timeZone', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],
  66 +});
  67 +const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  68 + await resetFields();
  69 + setDrawerProps({ confirmLoading: false });
  70 + isUpdate.value = !!data?.isUpdate;
  71 + if (unref(isUpdate)) {
  72 + //回显基础数据
  73 + editId.value = data.record.id;
  74 + await setFieldsValue(data.record);
  75 + //回显嵌套数据
  76 + setFieldsValue({
  77 + agg: queryCondition?.agg,
  78 + interval: queryCondition?.interval,
  79 + });
  80 + //回显设备
  81 + orgId.value = data.record.organizationId;
  82 + //获取该组织下的设备--排除网关设备
59 const { items } = await screenLinkPageByDeptIdGetDevice({ 83 const { items } = await screenLinkPageByDeptIdGetDevice({
60 - organizationId: newValue, 84 + organizationId: data.record.organizationId,
61 }); 85 });
62 selectOptions.value = items.map((item) => { 86 selectOptions.value = items.map((item) => {
63 if (item.deviceType !== 'GATEWAY') 87 if (item.deviceType !== 'GATEWAY')
@@ -66,151 +90,118 @@ @@ -66,151 +90,118 @@
66 value: item.tbDeviceId, 90 value: item.tbDeviceId,
67 }; 91 };
68 }); 92 });
  93 + //TODO 模拟的数据 待服务端返回
  94 + const deviceIds: any = [
  95 + {
  96 + label: '奥迪网关子设备',
  97 + key: '8a4cc9a0-f201-11ec-98ad-a9680487d1e0',
  98 + },
  99 + {
  100 + label: '宝马默认设备',
  101 + key: '8943f0b0-f1f7-11ec-98ad-a9680487d1e0',
  102 + },
  103 + {
  104 + label: '奔驰默认设备',
  105 + key: '6d9043f0-f1f7-11ec-98ad-a9680487d1e0',
  106 + },
  107 + {
  108 + label: '新增奥迪测试设备',
  109 + key: '8f5b4280-f29e-11ec-98ad-a9680487d1e0',
  110 + },
  111 + ];
  112 + selectDevice.value = deviceIds;
  113 + //回显设备属性 TODO 模拟的数据 待服务端返回
  114 + deviceList.value = [
  115 + {
  116 + value: '8a4cc9a0-f201-11ec-98ad-a9680487d1e0',
  117 + attribute: 'CO2',
  118 + label: '奥迪网关子设备',
  119 + },
  120 + {
  121 + value: '8943f0b0-f1f7-11ec-98ad-a9680487d1e0',
  122 + attribute: 'co',
  123 + label: '宝马默认设备',
  124 + },
  125 + {
  126 + value: '6d9043f0-f1f7-11ec-98ad-a9680487d1e0',
  127 + attribute: 'hot',
  128 + label: '奔驰默认设备',
  129 + },
  130 + {
  131 + value: '8f5b4280-f29e-11ec-98ad-a9680487d1e0',
  132 + attribute: 'wet',
  133 + label: '新增奥迪测试设备',
  134 + },
  135 + ];
  136 + nextTick(() => { });
  137 + } else {
  138 + editId.value = '';
  139 + orgId.value = '';
  140 + selectDevice.value = [];
  141 + selectOptions.value = [];
  142 + deviceList.value = [];
  143 + }
  144 +});
  145 +const getAttrDevice: Ref<TDeviceList[]> = ref([]);
  146 +const getTitle = computed(() => (!unref(isUpdate) ? '新增报表配置' : '编辑报表配置'));
  147 +const handleChange = (e: any) => {
  148 + getAttrDevice.value.push({
  149 + device: e.value,
  150 + attribute: e.attribute
69 }); 151 });
70 - const handleDeviceChange = (e) => {  
71 - deviceList.value = e;  
72 - };  
73 - const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({  
74 - labelWidth: 120,  
75 - schemas: formSchema,  
76 - showActionButtonGroup: false,  
77 - fieldMapToTime: [['timeZone', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],  
78 - });  
79 - const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {  
80 - await resetFields();  
81 - setDrawerProps({ confirmLoading: false });  
82 - isUpdate.value = !!data?.isUpdate;  
83 - if (unref(isUpdate)) {  
84 - //回显基础数据  
85 - editId.value = data.record.id;  
86 - await setFieldsValue(data.record);  
87 - //回显嵌套数据  
88 - setFieldsValue({  
89 - agg: queryCondition?.agg,  
90 - interval: queryCondition?.interval,  
91 - });  
92 - //回显设备  
93 - orgId.value = data.record.organizationId;  
94 - //获取该组织下的设备--排除网关设备  
95 - const { items } = await screenLinkPageByDeptIdGetDevice({  
96 - organizationId: data.record.organizationId,  
97 - });  
98 - selectOptions.value = items.map((item) => {  
99 - if (item.deviceType !== 'GATEWAY')  
100 - return {  
101 - label: item.name,  
102 - value: item.tbDeviceId,  
103 - };  
104 - });  
105 - //TODO 模拟的数据 待服务端返回  
106 - const deviceIds: any = [  
107 - {  
108 - label: '奥迪网关子设备',  
109 - key: '8a4cc9a0-f201-11ec-98ad-a9680487d1e0',  
110 - },  
111 - {  
112 - label: '宝马默认设备',  
113 - key: '8943f0b0-f1f7-11ec-98ad-a9680487d1e0',  
114 - },  
115 - {  
116 - label: '奔驰默认设备',  
117 - key: '6d9043f0-f1f7-11ec-98ad-a9680487d1e0',  
118 - },  
119 - {  
120 - label: '新增奥迪测试设备',  
121 - key: '8f5b4280-f29e-11ec-98ad-a9680487d1e0',  
122 - },  
123 - ];  
124 - selectDevice.value = deviceIds;  
125 - //回显设备属性 TODO 模拟的数据 待服务端返回  
126 - deviceList.value = [  
127 - {  
128 - value: '8a4cc9a0-f201-11ec-98ad-a9680487d1e0',  
129 - attribute: 'CO2',  
130 - label: '奥迪网关子设备',  
131 - },  
132 - {  
133 - value: '8943f0b0-f1f7-11ec-98ad-a9680487d1e0',  
134 - attribute: 'co',  
135 - label: '宝马默认设备',  
136 - },  
137 - {  
138 - value: '6d9043f0-f1f7-11ec-98ad-a9680487d1e0',  
139 - attribute: 'hot',  
140 - label: '奔驰默认设备',  
141 - },  
142 - {  
143 - value: '8f5b4280-f29e-11ec-98ad-a9680487d1e0',  
144 - attribute: 'wet',  
145 - label: '新增奥迪测试设备',  
146 - },  
147 - ];  
148 - nextTick(() => {}); 152 +};
  153 +let postObj: any = reactive({});
  154 +let queryCondition: any = reactive({});
  155 +let executeContent: any = reactive({});
  156 +const endTs = ref(0);
  157 +async function handleSubmit() {
  158 + setDrawerProps({ confirmLoading: true });
  159 + try {
  160 + const { createMessage } = useMessage();
  161 + const values = await validate();
  162 + if (!values) return;
  163 + if (getAttrDevice.value.length === 0) {
  164 + return createMessage.error('请选择设备及其属性');
  165 + }
  166 + if (values.executeWay == 0) {
  167 + executeContent = null;
149 } else { 168 } else {
150 - editId.value = '';  
151 - orgId.value = '';  
152 - selectDevice.value = [];  
153 - selectOptions.value = [];  
154 - deviceList.value = []; 169 + executeContent = {};
155 } 170 }
156 - });  
157 - const getAttrDevice: any = ref([]);  
158 - const getTitle = computed(() => (!unref(isUpdate) ? '新增报表配置' : '编辑报表配置'));  
159 - const handleChange = (e) => {  
160 - getAttrDevice.value.push(e);  
161 - };  
162 - let postObj: any = reactive({});  
163 - let queryCondition: any = reactive({});  
164 - let executeContent: any = reactive({});  
165 - const endTs: any = ref(0);  
166 - async function handleSubmit() {  
167 - setDrawerProps({ confirmLoading: true });  
168 - try {  
169 - const { createMessage } = useMessage();  
170 - const values = await validate();  
171 - if (!values) return;  
172 - if (getAttrDevice.value.length === 0) {  
173 - return createMessage.error('请选择设备及其属性');  
174 - }  
175 - if (values.executeWay == 0) {  
176 - executeContent = null;  
177 - } else {  
178 - executeContent = {};  
179 - }  
180 - if (values.timeZone) {  
181 - const getTime = JSON.stringify(values.timeZone);  
182 - endTs.value = moment(JSON.parse(getTime)[0]).valueOf() || 1659424160000;  
183 - }  
184 - queryCondition = {  
185 - agg: values.agg,  
186 - interval: values.interval,  
187 - limit: values.limit,  
188 - };  
189 - delete values.devices;  
190 - delete values.agg;  
191 - delete values.interval;  
192 - delete values.timeZone;  
193 - postObj = {  
194 - ...values,  
195 - ...{ executeAttributes: getAttrDevice.value },  
196 - ...{ queryCondition },  
197 - ...{ endTs: endTs.value },  
198 - ...{ executeContent },  
199 - ...{ id: editId.value !== '' ? editId.value : '' },  
200 - };  
201 - let saveMessage = '添加成功';  
202 - let updateMessage = '修改成功';  
203 - editId.value !== ''  
204 - ? await putReportConfigManage(postObj)  
205 - : await createOrEditReportManage(postObj);  
206 -  
207 - closeDrawer();  
208 - emit('success');  
209 - createMessage.success(unref(isUpdate) ? updateMessage : saveMessage);  
210 - } finally {  
211 - setTimeout(() => {  
212 - setDrawerProps({ confirmLoading: false });  
213 - }, 300); 171 + if (values.timeZone) {
  172 + const getTime = JSON.stringify(values.timeZone);
  173 + endTs.value = moment(JSON.parse(getTime)[0]).valueOf() || 1659424160000;
214 } 174 }
  175 + queryCondition = {
  176 + agg: values.agg,
  177 + interval: values.interval,
  178 + limit: values.limit,
  179 + };
  180 + delete values.devices;
  181 + delete values.agg;
  182 + delete values.interval;
  183 + delete values.timeZone;
  184 + postObj = {
  185 + ...values,
  186 + ...{ executeAttributes: getAttrDevice.value },
  187 + ...{ queryCondition },
  188 + ...{ endTs: endTs.value },
  189 + ...{ executeContent },
  190 + ...{ id: editId.value !== '' ? editId.value : '' },
  191 + };
  192 + let saveMessage = '添加成功';
  193 + let updateMessage = '修改成功';
  194 + editId.value !== ''
  195 + ? await putReportConfigManage(postObj)
  196 + : await createOrEditReportManage(postObj);
  197 +
  198 + closeDrawer();
  199 + emit('success');
  200 + createMessage.success(unref(isUpdate) ? updateMessage : saveMessage);
  201 + } finally {
  202 + setTimeout(() => {
  203 + setDrawerProps({ confirmLoading: false });
  204 + }, 300);
215 } 205 }
  206 +}
216 </script> 207 </script>
@@ -5,17 +5,19 @@ import moment from 'moment'; @@ -5,17 +5,19 @@ import moment from 'moment';
5 import { getOrganizationList } from '/@/api/system/system'; 5 import { getOrganizationList } from '/@/api/system/system';
6 import { copyTransFun } from '/@/utils/fnUtils'; 6 import { copyTransFun } from '/@/utils/fnUtils';
7 import { findDictItemByCode } from '/@/api/system/dict'; 7 import { findDictItemByCode } from '/@/api/system/dict';
8 -import {  
9 - optionsConfig,  
10 - isTiming,  
11 - isWeek,  
12 - isMonth,  
13 - isEmpty,  
14 - isDefultWeek,  
15 - isFixedWeek,  
16 -} from './timeConfig'; 8 +import { isTiming, isWeek, isMonth } from './timeConfig';
17 import { AggregateDataEnum } from '../../device/localtion/cpns/TimePeriodForm/config'; 9 import { AggregateDataEnum } from '../../device/localtion/cpns/TimePeriodForm/config';
  10 +import { Moment } from 'moment';
  11 +import {
  12 + getPacketIntervalByRange,
  13 + getPacketIntervalByValue,
  14 + intervalOption,
  15 +} from '../../device/localtion/cpns/TimePeriodForm/helper';
18 16
  17 +export enum QueryWay {
  18 + LATEST = 'latest',
  19 + TIME_PERIOD = 'timePeriod',
  20 +}
19 export enum SchemaFiled { 21 export enum SchemaFiled {
20 WAY = 'way', 22 WAY = 'way',
21 TIME_PERIOD = 'timePeriod', 23 TIME_PERIOD = 'timePeriod',
@@ -360,10 +362,11 @@ export const formSchema: QFormSchema[] = [ @@ -360,10 +362,11 @@ export const formSchema: QFormSchema[] = [
360 { 362 {
361 field: SchemaFiled.AGG, 363 field: SchemaFiled.AGG,
362 label: '聚合条件', 364 label: '聚合条件',
363 - required: true,  
364 component: 'Select', 365 component: 'Select',
  366 + required: true,
365 componentProps: { 367 componentProps: {
366 placeholder: '请选择聚合条件', 368 placeholder: '请选择聚合条件',
  369 + getPopupContainer: () => document.body,
367 options: [ 370 options: [
368 { label: '最小值', value: AggregateDataEnum.MIN }, 371 { label: '最小值', value: AggregateDataEnum.MIN },
369 { label: '最大值', value: AggregateDataEnum.MAX }, 372 { label: '最大值', value: AggregateDataEnum.MAX },
@@ -373,205 +376,130 @@ export const formSchema: QFormSchema[] = [ @@ -373,205 +376,130 @@ export const formSchema: QFormSchema[] = [
373 { label: '空', value: AggregateDataEnum.NONE }, 376 { label: '空', value: AggregateDataEnum.NONE },
374 ], 377 ],
375 }, 378 },
376 - colProps: { span: 24 },  
377 }, 379 },
378 { 380 {
379 field: SchemaFiled.LIMIT, 381 field: SchemaFiled.LIMIT,
380 - component: 'InputNumber',  
381 label: '最大值', 382 label: '最大值',
382 - required: true, 383 + component: 'InputNumber',
383 defaultValue: 200, 384 defaultValue: 200,
384 - colProps: { span: 22 },  
385 - componentProps: {  
386 - min: 7,  
387 - max: 50000, 385 + required: true,
  386 + ifShow({ values }) {
  387 + return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
  388 + },
  389 + componentProps() {
  390 + return {
  391 + max: 50000,
  392 + min: 7,
  393 + };
388 }, 394 },
389 - ifShow: ({ values }) => isEmpty(values.agg),  
390 }, 395 },
391 { 396 {
392 - field: 'defaultWeek',  
393 - component: 'ApiRadioGroup', 397 + field: SchemaFiled.WAY,
394 label: '查询周期', 398 label: '查询周期',
  399 + component: 'RadioGroup',
  400 + defaultValue: QueryWay.LATEST,
395 required: true, 401 required: true,
396 - colProps: {  
397 - span: 24,  
398 - },  
399 - defaultValue: '2',  
400 - componentProps: {  
401 - placeholder: '请选择查询周期',  
402 - options: [  
403 - {  
404 - label: '自定义周期',  
405 - value: 'defaultIsWeek',  
406 - },  
407 - {  
408 - label: '固定周期',  
409 - value: '2', 402 + componentProps({ formActionType }) {
  403 + const { setFieldsValue } = formActionType;
  404 + return {
  405 + placeholder: '请选择查询周期',
  406 + options: [
  407 + { label: '固定周期', value: QueryWay.LATEST },
  408 + { label: '自定义周期', value: QueryWay.TIME_PERIOD },
  409 + ],
  410 + onChange(value) {
  411 + value === QueryWay.LATEST
  412 + ? setFieldsValue({
  413 + [SchemaFiled.DATE_RANGE]: [],
  414 + [SchemaFiled.START_TS]: null,
  415 + [SchemaFiled.END_TS]: null,
  416 + })
  417 + : setFieldsValue({ [SchemaFiled.START_TS]: null });
410 }, 418 },
411 - ], 419 + };
412 }, 420 },
413 }, 421 },
414 { 422 {
415 - field: 'timeZone', 423 + field: SchemaFiled.DATE_RANGE,
416 label: '时间段', 424 label: '时间段',
417 component: 'RangePicker', 425 component: 'RangePicker',
418 - componentProps: {  
419 - format: 'YYYY-MM-DD HH:mm:ss',  
420 - placeholder: ['开始时间', '结束时间'],  
421 - showTime: { format: 'HH:mm:ss' }, 426 + required: true,
  427 + ifShow({ values }) {
  428 + return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD;
  429 + },
  430 + componentProps({ formActionType }) {
  431 + const { setFieldsValue } = formActionType;
  432 + let dates: Moment[] = [];
  433 + return {
  434 + placeholder: '请选择时间段',
  435 + showTime: true,
  436 + onCalendarChange(value: Moment[]) {
  437 + dates = value;
  438 + },
  439 + disabledDate(current: Moment) {
  440 + if (!dates || dates.length === 0 || !current) {
  441 + return false;
  442 + }
  443 + const diffDate = current.diff(dates[0], 'years', true);
  444 + return Math.abs(diffDate) > 1;
  445 + },
  446 + onChange() {
  447 + dates = [];
  448 + setFieldsValue({ [SchemaFiled.INTERVAL]: null });
  449 + },
  450 + };
  451 + },
  452 + colProps: {
  453 + span: 10,
422 }, 454 },
423 - colProps: { span: 24 },  
424 - ifShow: ({ values }) => isDefultWeek(values.defaultWeek),  
425 }, 455 },
426 { 456 {
427 - field: 'startTs', 457 + field: SchemaFiled.START_TS,
428 label: '时间周期', 458 label: '时间周期',
429 - required: true,  
430 - component: 'ApiSelect', 459 + component: 'Select',
431 defaultValue: 1000, 460 defaultValue: 1000,
432 - componentProps: ({ formActionType }) => {  
433 - const { updateSchema } = formActionType; 461 + required: true,
  462 + ifShow({ values }) {
  463 + return (
  464 + values[SchemaFiled.AGG] !== AggregateDataEnum.NONE &&
  465 + values[SchemaFiled.WAY] == QueryWay.LATEST
  466 + );
  467 + },
  468 + componentProps({ formActionType }) {
  469 + const { setFieldsValue } = formActionType;
434 return { 470 return {
435 - api: async () => {  
436 - const data: any = await findDictItemByCode({ dictCode: 'query_week' });  
437 - const option = data.map((item) => {  
438 - return {  
439 - label: item.itemText,  
440 - value: Number(item.itemValue),  
441 - };  
442 - });  
443 - return option;  
444 - },  
445 - async onChange(e) {  
446 - if (Number(e) <= 30000) {  
447 - //30秒以内 -> 1秒  
448 - updateSchema({  
449 - field: 'interval',  
450 - componentProps: {  
451 - options: optionsConfig.slice(0, 1),  
452 - },  
453 - });  
454 - } else if (Number(e) == 60000) {  
455 - //1分钟以内 -> 1秒 5秒  
456 - updateSchema({  
457 - field: 'interval',  
458 - componentProps: {  
459 - options: optionsConfig.slice(0, 2),  
460 - },  
461 - });  
462 - } else if (Number(e) == 120000) {  
463 - //2分钟以内 -> 1秒 5秒 10 15  
464 - updateSchema({  
465 - field: 'interval',  
466 - componentProps: {  
467 - options: optionsConfig.slice(0, 4),  
468 - },  
469 - });  
470 - } else if (Number(e) == 300000) {  
471 - //5分钟以内 -> 1秒 5秒 10 15 30  
472 - updateSchema({  
473 - field: 'interval',  
474 - componentProps: {  
475 - options: optionsConfig.slice(0, 5),  
476 - },  
477 - });  
478 - } else if (Number(e) == 600000) {  
479 - //10分钟以内 -> 5秒 10 15 30 1分钟  
480 - updateSchema({  
481 - field: 'interval',  
482 - componentProps: {  
483 - options: optionsConfig.slice(1, 2).concat(optionsConfig.slice(2, 6)),  
484 - },  
485 - });  
486 - } else if (Number(e) == 900000 || Number(e) == 1800000) {  
487 - //15 30 分钟以内 -> 5秒 10 15 30 1分钟 2分钟  
488 - updateSchema({  
489 - field: 'interval',  
490 - componentProps: {  
491 - options: optionsConfig.slice(1, 2).concat(optionsConfig.slice(2, 7)),  
492 - },  
493 - });  
494 - } else if (Number(e) == 3600000) {  
495 - //1小时以内 -> 10秒 15 30 1分钟 2分钟 5分钟  
496 - updateSchema({  
497 - field: 'interval',  
498 - componentProps: {  
499 - options: optionsConfig.slice(2, 8),  
500 - },  
501 - });  
502 - } else if (Number(e) == 7200000) {  
503 - //2小时以内 -> 15秒 30 1分钟 2分钟 5分钟 10 15  
504 - updateSchema({  
505 - field: 'interval',  
506 - componentProps: {  
507 - options: optionsConfig.slice(3, 10),  
508 - },  
509 - });  
510 - } else if (Number(e) == 18000000) {  
511 - //5小时以内 -> 1分钟 2分钟 5分钟 10 15 30  
512 - updateSchema({  
513 - field: 'interval',  
514 - componentProps: {  
515 - options: optionsConfig.slice(5, 11),  
516 - },  
517 - });  
518 - } else if (Number(e) == 36000000 || Number(e) == 43200000) {  
519 - //10 12小时以内 -> 2分钟 5分钟 10 15 30 1小时  
520 - updateSchema({  
521 - field: 'interval',  
522 - componentProps: {  
523 - options: optionsConfig.slice(6, 12),  
524 - },  
525 - });  
526 - } else if (Number(e) == 86400000) {  
527 - //1天以内 -> 5分钟 10 15 30 1小时 2  
528 - updateSchema({  
529 - field: 'interval',  
530 - componentProps: {  
531 - options: optionsConfig.slice(7, 13),  
532 - },  
533 - });  
534 - } else if (Number(e) == 604800000) {  
535 - //7天以内 -> 30分钟 1小时 2 5 10 12 1天  
536 - updateSchema({  
537 - field: 'interval',  
538 - componentProps: {  
539 - options: optionsConfig.slice(10, 17),  
540 - },  
541 - });  
542 - } else if (Number(e) == 2592000000) {  
543 - //30天以内 -> 2小时 5 10 12 1天  
544 - updateSchema({  
545 - field: 'interval',  
546 - componentProps: {  
547 - options: optionsConfig.slice(12, 17),  
548 - },  
549 - });  
550 - } 471 + placeholder: '请选择时间周期',
  472 + options: intervalOption,
  473 + onChange() {
  474 + setFieldsValue({ [SchemaFiled.INTERVAL]: null });
551 }, 475 },
552 - maxLength: 250,  
553 - placeholder: '请选择查询周期',  
554 }; 476 };
555 }, 477 },
556 - colProps: { span: 24 },  
557 - ifShow: ({ values }) => isFixedWeek(values.defaultWeek) && !isEmpty(values.agg),  
558 }, 478 },
559 { 479 {
560 - field: 'interval', 480 + field: SchemaFiled.INTERVAL,
561 label: '间隔时间', 481 label: '间隔时间',
562 - required: true,  
563 component: 'Select', 482 component: 'Select',
564 - colProps: { span: 24 }, 483 + required: true,
  484 + ifShow({ values }) {
  485 + return (
  486 + values[SchemaFiled.AGG] !== AggregateDataEnum.NONE &&
  487 + values[SchemaFiled.WAY] == QueryWay.LATEST
  488 + );
  489 + },
565 defaultValue: 1000, 490 defaultValue: 1000,
566 - componentProps: {  
567 - placeholder: '请选择间隔时间',  
568 - options: [  
569 - {  
570 - label: '1秒',  
571 - value: 1000,  
572 - },  
573 - ], 491 + componentProps({ formModel, formActionType }) {
  492 + const options =
  493 + formModel[SchemaFiled.WAY] === QueryWay.LATEST
  494 + ? getPacketIntervalByValue(formModel[SchemaFiled.START_TS])
  495 + : getPacketIntervalByRange(formModel[SchemaFiled.DATE_RANGE]);
  496 + if (formModel[SchemaFiled.AGG] !== AggregateDataEnum.NONE) {
  497 + formActionType.setFieldsValue({ [SchemaFiled.LIMIT]: null });
  498 + }
  499 + return {
  500 + placeholder: '请选择间隔时间',
  501 + options,
  502 + };
574 }, 503 },
575 - ifShow: ({ values }) => isFixedWeek(values.defaultWeek) && !isEmpty(values.agg),  
576 }, 504 },
577 ]; 505 ];
@@ -7,13 +7,13 @@ @@ -7,13 +7,13 @@
7 <a-input 7 <a-input
8 :disabled="true" 8 :disabled="true"
9 v-model:value="param.device" 9 v-model:value="param.device"
10 - style="width: 38%; margin-bottom: 5px; margin-left: 1vh" 10 + style="width: 50%; margin-bottom: 5px; margin-left: 0vh"
11 @change="emitChange" 11 @change="emitChange"
12 /> 12 />
13 <Select 13 <Select
14 placeholder="请选择设备属性" 14 placeholder="请选择设备属性"
15 v-model:value="param.attribute" 15 v-model:value="param.attribute"
16 - style="width: 160px; margin-left: 1.8vw" 16 + style="width: 50%; margin-left: 1.8vw"
17 :options="selectOptions" 17 :options="selectOptions"
18 @change="emitChange" 18 @change="emitChange"
19 allowClear 19 allowClear