简柏林 / 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 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 3 <BasicForm @register="registerForm">
11 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 7 <div style="margin-top: 1.5vh"></div>
24 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 10 </div>
32 11 </template>
33 12 </BasicForm>
34 13 </BasicDrawer>
35 14 </template>
36 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 83 const { items } = await screenLinkPageByDeptIdGetDevice({
60   - organizationId: newValue,
  84 + organizationId: data.record.organizationId,
61 85 });
62 86 selectOptions.value = items.map((item) => {
63 87 if (item.deviceType !== 'GATEWAY')
... ... @@ -66,151 +90,118 @@
66 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 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 207 </script>
... ...
... ... @@ -5,17 +5,19 @@ import moment from 'moment';
5 5 import { getOrganizationList } from '/@/api/system/system';
6 6 import { copyTransFun } from '/@/utils/fnUtils';
7 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 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 21 export enum SchemaFiled {
20 22 WAY = 'way',
21 23 TIME_PERIOD = 'timePeriod',
... ... @@ -360,10 +362,11 @@ export const formSchema: QFormSchema[] = [
360 362 {
361 363 field: SchemaFiled.AGG,
362 364 label: '聚合条件',
363   - required: true,
364 365 component: 'Select',
  366 + required: true,
365 367 componentProps: {
366 368 placeholder: '请选择聚合条件',
  369 + getPopupContainer: () => document.body,
367 370 options: [
368 371 { label: '最小值', value: AggregateDataEnum.MIN },
369 372 { label: '最大值', value: AggregateDataEnum.MAX },
... ... @@ -373,205 +376,130 @@ export const formSchema: QFormSchema[] = [
373 376 { label: '空', value: AggregateDataEnum.NONE },
374 377 ],
375 378 },
376   - colProps: { span: 24 },
377 379 },
378 380 {
379 381 field: SchemaFiled.LIMIT,
380   - component: 'InputNumber',
381 382 label: '最大值',
382   - required: true,
  383 + component: 'InputNumber',
383 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 398 label: '查询周期',
  399 + component: 'RadioGroup',
  400 + defaultValue: QueryWay.LATEST,
395 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 424 label: '时间段',
417 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 458 label: '时间周期',
429   - required: true,
430   - component: 'ApiSelect',
  459 + component: 'Select',
431 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 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 481 label: '间隔时间',
562   - required: true,
563 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 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 7 <a-input
8 8 :disabled="true"
9 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 11 @change="emitChange"
12 12 />
13 13 <Select
14 14 placeholder="请选择设备属性"
15 15 v-model:value="param.attribute"
16   - style="width: 160px; margin-left: 1.8vw"
  16 + style="width: 50%; margin-left: 1.8vw"
17 17 :options="selectOptions"
18 18 @change="emitChange"
19 19 allowClear
... ...