Commit 97897e25e94af51573942e554fd9de0f8081c7b6

Authored by loveumiko
1 parent a778a386

fix: 修改看板组件告警实时数据的问题

... ... @@ -96,6 +96,7 @@
96 96 );
97 97
98 98 const transformMessage = (cmdId: number) => {
  99 + if (props.config.option.mode == 'SELECT_PREVIEW') return;
99 100 currentCmdId.value = cmdId;
100 101 send?.(JSON.stringify(getMessage(cmdId, unref(getDesign), unref(alarmForm))));
101 102 };
... ...
... ... @@ -139,8 +139,8 @@
139 139 );
140 140
141 141 const transformMessage = (cmdId: number) => {
  142 + if (props.config.option.mode == 'SELECT_PREVIEW') return;
142 143 currentCmdId.value = cmdId;
143   -
144 144 send?.(JSON.stringify(getMessage(cmdId, unref(getDesign), unref(alarmForm))));
145 145 };
146 146
... ...
... ... @@ -24,7 +24,7 @@
24 24 // const time = ref<Nullable<number>>(null);
25 25
26 26 const updateInterval = ref<number>(1000); //默认每秒更新一次
27   - const maxDataPoints = ref<number>(10); //默认每秒显示10个数据点
  27 + const maxDataPoints = ref<number>(30); //默认每秒显示10个数据点
28 28
29 29 const chartData = ref<{ time: string | number; value: number }[]>([]);
30 30 const legendData = ref<string[]>(['温度']);
... ... @@ -51,7 +51,7 @@
51 51 grid: {
52 52 top: '30%',
53 53 left: '6%',
54   - right: '16%',
  54 + right: '10%',
55 55 bottom: '1%',
56 56 containLabel: true,
57 57 },
... ...
... ... @@ -219,7 +219,7 @@ class Subscriber {
219 219 throw error;
220 220 }
221 221 }
222   - return;
  222 + // return;
223 223 }
224 224
225 225 for (const item of subscriptionGroup) {
... ...
... ... @@ -91,7 +91,11 @@
91 91
92 92 const isAlarm = computed(() => {
93 93 const frontId = props.sourceInfo.frontId;
94   - if (frontId == 'DeviceAlarm' || frontId == 'DeviceAlarmHistory') {
  94 + if (
  95 + frontId == 'DeviceAlarm' ||
  96 + frontId == 'DeviceAlarmHistory' ||
  97 + frontId == 'StatisticsComponent7'
  98 + ) {
95 99 return true;
96 100 } else {
97 101 return false;
... ...
... ... @@ -20,7 +20,7 @@ export enum SchemaFiled {
20 20 LIMIT = 'limit',
21 21 AGG = 'agg',
22 22 ORDER_BY = 'orderBy',
23   - PAGE_SIZe = 'pageSize',
  23 + PAGE_SIZE = 'pageSize',
24 24 }
25 25
26 26 export enum AggregateDataEnum {
... ... @@ -60,7 +60,7 @@ export const formSchema = (): FormSchema[] => {
60 60 },
61 61
62 62 {
63   - field: SchemaFiled.PAGE_SIZe,
  63 + field: SchemaFiled.PAGE_SIZE,
64 64 label: '分页条数',
65 65 component: 'InputNumber',
66 66 defaultValue: 20,
... ...
1   -export { default as alarmTimeModal } from './index.vue';
  1 +export { default as AlarmTimeModal } from './index.vue';
... ...
1 1 <script lang="ts" setup>
2 2 import { ref, unref } from 'vue';
3   - import { formSchema, SchemaFiled } from './config';
  3 + import { AggregateDataEnum, formSchema, QueryWay, SchemaFiled } from './config';
4 4 import { useForm } from '/@/components/Form';
5 5 import { useModalInner } from '/@/components/Modal';
6 6 import { useGridLayout } from '/@/hooks/component/useGridLayout';
... ... @@ -8,13 +8,81 @@
8 8 import { BasicForm } from '/@/components/Form';
9 9 import { BasicModal } from '/@/components/Modal';
10 10 import { nextTick } from 'vue';
  11 + import {
  12 + getPacketIntervalByRange,
  13 + getPacketIntervalByValue,
  14 + } from '/@/views/device/localtion/cpns/TimePeriodForm/helper';
11 15
12   - const emit = defineEmits(['register', 'getAlarmForm']);
  16 + const emit = defineEmits(['register', 'getAlarmForm', 'getHistoryForm']);
13 17 // const emit = defineEmits<{
14 18 // (event: 'getAlarmForm', data: WidgetDataType): void;
15 19 // }>();
16 20
17   - const [registerModal, { closeModal }] = useModalInner();
  21 + const fontId = ref('');
  22 + const [registerModal, { closeModal }] = useModalInner(async (data) => {
  23 + fontId.value = unref(data).record.frontId;
  24 + method.updateSchema([
  25 + {
  26 + field: SchemaFiled.PAGE_SIZE,
  27 + ifShow: unref(fontId) !== 'StatisticsComponent7',
  28 + },
  29 + ]);
  30 + if (unref(fontId) !== 'StatisticsComponent7') return;
  31 + await nextTick();
  32 + method.appendSchemaByField(
  33 + {
  34 + field: SchemaFiled.AGG,
  35 + label: '数据聚合功能',
  36 + component: 'Select',
  37 + defaultValue: AggregateDataEnum.NONE,
  38 + componentProps: {
  39 + getPopupContainer: () => document.body,
  40 + options: [
  41 + { label: '最小值', value: AggregateDataEnum.MIN },
  42 + { label: '最大值', value: AggregateDataEnum.MAX },
  43 + { label: '平均值', value: AggregateDataEnum.AVG },
  44 + { label: '求和', value: AggregateDataEnum.SUM },
  45 + { label: '计数', value: AggregateDataEnum.COUNT },
  46 + { label: '空', value: AggregateDataEnum.NONE },
  47 + ],
  48 + },
  49 + },
  50 + SchemaFiled.DATE_RANGE
  51 + );
  52 + method.appendSchemaByField(
  53 + {
  54 + field: SchemaFiled.INTERVAL,
  55 + label: '分组间隔',
  56 + component: 'Select',
  57 + dynamicRules: ({ model }) => {
  58 + return [
  59 + {
  60 + required: model[SchemaFiled.AGG] !== AggregateDataEnum.NONE,
  61 + message: '分组间隔为必填项',
  62 + type: 'number',
  63 + },
  64 + ];
  65 + },
  66 + ifShow({ values }) {
  67 + return values[SchemaFiled.AGG] !== AggregateDataEnum.NONE;
  68 + },
  69 + componentProps({ formModel, formActionType }) {
  70 + const options =
  71 + formModel[SchemaFiled.WAY] === QueryWay.LATEST
  72 + ? getPacketIntervalByValue(formModel[SchemaFiled.START_TS])
  73 + : getPacketIntervalByRange(formModel[SchemaFiled.DATE_RANGE]);
  74 + if (formModel[SchemaFiled.AGG] !== AggregateDataEnum.NONE) {
  75 + formActionType.setFieldsValue({ [SchemaFiled.LIMIT]: null });
  76 + }
  77 + return {
  78 + options,
  79 + getPopupContainer: () => document.body,
  80 + };
  81 + },
  82 + },
  83 + SchemaFiled.AGG
  84 + );
  85 + });
18 86
19 87 const [register, method] = useForm({
20 88 schemas: formSchema(),
... ... @@ -33,21 +101,14 @@
33 101 const handleCancel = () => {
34 102 // destory()
35 103 };
36   - const alarmForm = ref({ time: 2592000000, pageSize: 10 }); //默认30天
37 104 const handleSubmit = async () => {
38   - const { way, pageSize, startTs, endTs } = method.getFieldsValue();
39   - if (way == 'timePeriod') {
40   - alarmForm.value = {
41   - time: new Date(endTs).getTime() - new Date(startTs).getTime(),
42   - pageSize,
43   - };
  105 + const values = method.getFieldsValue();
  106 + if (unref(fontId) == 'StatisticsComponent7') {
  107 + emit('getHistoryForm', values);
44 108 } else {
45   - alarmForm.value = {
46   - time: startTs,
47   - pageSize,
48   - };
  109 + emit('getAlarmForm', values);
49 110 }
50   - emit('getAlarmForm', unref(alarmForm));
  111 +
51 112 await nextTick();
52 113 closeModal();
53 114 };
... ...
  1 +import { Ref, inject, provide } from 'vue';
  2 +
  3 +const SymbolKey = Symbol('alarm-info');
  4 +interface IHistory {
  5 + [key: string]: string;
  6 +}
  7 +
  8 +export interface AlarmContextType {
  9 + historyForm: Ref<IHistory> | any;
  10 + getHistoryForm: (value: any) => void;
  11 +}
  12 +
  13 +export const createHistoryContext = (options: AlarmContextType) => {
  14 + provide(SymbolKey, options);
  15 +};
  16 +
  17 +export const useHistoryContext = () => {
  18 + return inject<AlarmContextType>(SymbolKey) || ({} as Partial<AlarmContextType>);
  19 +};
... ...
... ... @@ -25,13 +25,14 @@
25 25 import { ModalParamsType } from '/#/utils';
26 26 import { DataActionModeEnum } from '/@/enums/toolEnum';
27 27 import { HistoryTrendModal } from './components/HistoryTrendModal';
28   - import { alarmTimeModal } from './components/alarmTimeModal';
  28 + import { AlarmTimeModal } from './components/AlarmTimeModal';
29 29 import { watch } from 'vue';
30 30 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
31 31 import { ThemeEnum } from '/@/enums/appEnum';
32 32 import { createDataBoardContext } from './hooks/useDataBoardContext';
33 33 import { useSocket } from '/@/views/visual/packages/hook/socket/useSocket';
34 34 import { createAlarmContext } from './hooks/useAlarmTime';
  35 + import { createHistoryContext } from './hooks/useHistoryForm';
35 36
36 37 const props = defineProps<{
37 38 value?: Recordable;
... ... @@ -85,15 +86,46 @@
85 86 time: 2592000000,
86 87 pageSize: 10,
87 88 });
88   - const getAlarmForm = (value) => {
89   - alarmForm.value = {
90   - time: value.time,
91   - pageSize: value.pageSize,
92   - };
93   - };
94 89
  90 + //告警发送数据
  91 + const getAlarmForm = (values) => {
  92 + const { way, pageSize, startTs, endTs } = values;
  93 + if (way == 'timePeriod')
  94 + alarmForm.value = {
  95 + time: new Date(endTs).getTime() - new Date(startTs).getTime(),
  96 + pageSize,
  97 + };
  98 + else
  99 + alarmForm.value = {
  100 + time: startTs,
  101 + pageSize,
  102 + };
  103 + };
95 104 createAlarmContext({ alarmForm: alarmForm, getAlarmForm });
96 105
  106 + // 历史数据发送
  107 + const historyForm = ref({
  108 + startTs: 2592000000,
  109 + endTs: undefined,
  110 + agg: 'NONE',
  111 + limit: null,
  112 + interval: undefined,
  113 + way: 'latest',
  114 + });
  115 + const getHistoryForm = (values) => {
  116 + const { startTs, endTs, agg, limit, interval, way } = values;
  117 + historyForm.value = {
  118 + startTs,
  119 + endTs,
  120 + agg,
  121 + limit,
  122 + interval,
  123 + way,
  124 + };
  125 + console.log(values);
  126 + };
  127 + createHistoryContext({ historyForm: historyForm, getHistoryForm });
  128 +
97 129 const { send, close } = useSocket(dataSource);
98 130
99 131 createDataBoardContext({ send, close });
... ... @@ -188,7 +220,11 @@
188 220 <HistoryTrendModal @register="registerTrendModal" />
189 221
190 222 <!-- 告警选择时间 -->
191   - <alarmTimeModal @register="registerAlarmModal" @getAlarmForm="getAlarmForm" />
  223 + <AlarmTimeModal
  224 + @register="registerAlarmModal"
  225 + @getAlarmForm="getAlarmForm"
  226 + @getHistoryForm="getHistoryForm"
  227 + />
192 228 </section>
193 229 </template>
194 230
... ...