简柏林 / thingskit-front · Commits

Commit 395714dd05b967648aaef7b3766b0186f55e1fbc

Authored by loveumiko
1 parent a12d48f8

fix: 修改看板组件添加是否显示时间选项

Inline Side-by-side
Showing 31 changed files with 198 additions and 240 deletions
... ... @@ -213,6 +213,7 @@
213 213 </Tooltip>
214 214 <Tooltip title="删除">
215 215 <DeleteOutlined
  216 + v-show="dataSource.length > 1"
216 217 @click="handleDelete(item)"
217 218 class="cursor-pointer text-lg !leading-32px"
218 219 />
... ...
... ... @@ -15,6 +15,7 @@ export const option: PublicPresetOptions = {
15 15 [ComponentConfigFieldEnum.OPEN_COLOR]: '#00F43D',
16 16 [ComponentConfigFieldEnum.CLOSE_COLOR]: '#FF0000',
17 17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true,
  18 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
18 19 };
19 20
20 21 export default class Config extends PublicConfigClass implements CreateComponentType {
... ...
... ... @@ -30,6 +30,12 @@
30 30 component: 'Checkbox',
31 31 defaultValue: option.showDeviceName,
32 32 },
  33 + {
  34 + field: ComponentConfigFieldEnum.SHOW_TIME,
  35 + label: '显示时间',
  36 + component: 'Checkbox',
  37 + defaultValue: option.showTime,
  38 + },
33 39 ],
34 40 showActionButtonGroup: false,
35 41 labelWidth: 120,
... ...
... ... @@ -10,6 +10,7 @@
10 10 import { ReceiveAlarmDataCmdsMessageType } from '../../../hook/socket/useSocket.type';
11 11 import { useDataBoardContext } from '/@/views/visual/palette/hooks/useDataBoardContext';
12 12 import { useAlarmContext } from '/@/views/visual/palette/hooks/useAlarmTime';
  13 + import { getMessage } from '../config';
13 14
14 15 interface IStatus {
15 16 text: string;
... ... @@ -20,6 +21,7 @@
20 21 id: string;
21 22 deviceName: string;
22 23 showDeviceName: boolean;
  24 + showTime: boolean;
23 25 status: IStatus;
24 26 time: number;
25 27 }
... ... @@ -51,7 +53,7 @@
51 53 const getDesign = computed(() => {
52 54 const { persetOption = {}, option } = props.config;
53 55 const { dataSource } = option;
54   - const { showDeviceName: presetShowDeviceName } = persetOption;
  56 + const { showDeviceName: presetShowDeviceName, showTime: persetShowTime } = persetOption;
55 57
56 58 return {
57 59 dataSource: dataSource?.map((item) => {
... ... @@ -60,6 +62,7 @@
60 62 id: deviceId,
61 63 deviceName: deviceRename || deviceName,
62 64 showDeviceName: componentInfo.showDeviceName ?? presetShowDeviceName,
  65 + showTime: componentInfo.showTime ?? persetShowTime,
63 66 };
64 67 }),
65 68 };
... ... @@ -71,67 +74,6 @@
71 74 }, 4000);
72 75 };
73 76
74   - // 发送websocket的格式
75   - const getMessage = (cmdId: number) => {
76   - const message = {
77   - alarmDataCmds: [
78   - {
79   - query: {
80   - entityFilter: {
81   - type: 'entityList',
82   - resolveMultiple: true,
83   - entityType: 'DEVICE',
84   - entityList: unref(getDesign).dataSource?.map((item) => item.id),
85   - },
86   - pageLink: {
87   - page: 0,
88   - pageSize: unref(alarmForm)?.pageSize,
89   - textSearch: null,
90   - searchPropagatedAlarms: false,
91   - statusList: [],
92   - severityList: [],
93   - typeList: [],
94   - sortOrder: {
95   - key: {
96   - key: 'createdTime',
97   - type: 'ALARM_FIELD',
98   - },
99   - direction: 'DESC',
100   - },
101   - timeWindow: unref(alarmForm)?.time,
102   - },
103   - alarmFields: [
104   - {
105   - type: 'ALARM_FIELD',
106   - key: 'createdTime',
107   - },
108   - {
109   - type: 'ALARM_FIELD',
110   - key: 'originator',
111   - },
112   - {
113   - type: 'ALARM_FIELD',
114   - key: 'type',
115   - },
116   - {
117   - type: 'ALARM_FIELD',
118   - key: 'severity',
119   - },
120   - {
121   - type: 'ALARM_FIELD',
122   - key: 'status',
123   - },
124   - ],
125   - entityFields: [],
126   - latestValues: [],
127   - },
128   - cmdId,
129   - },
130   - ],
131   - };
132   - return message;
133   - };
134   -
135 77 const alarmStatusList = ref<IAlarmStatusList[]>([
136 78 {
137 79 id: '1',
... ... @@ -139,6 +81,7 @@
139 81 status: { text: '紧急', color: 'alarm_state_major' },
140 82 time: 1689574726,
141 83 showDeviceName: true,
  84 + showTime: true,
142 85 },
143 86 ]);
144 87
... ... @@ -147,14 +90,14 @@
147 90 watch(
148 91 () => alarmForm?.value,
149 92 () => {
150   - send?.(JSON.stringify(getMessage(unref(currentCmdId))));
  93 + send?.(JSON.stringify(getMessage(unref(currentCmdId), unref(getDesign), unref(alarmForm))));
151 94 },
152 95 { immediate: false }
153 96 );
154 97
155 98 const transformMessage = (cmdId: number) => {
156 99 currentCmdId.value = cmdId;
157   - send?.(JSON.stringify(getMessage(cmdId)));
  100 + send?.(JSON.stringify(getMessage(cmdId, unref(getDesign), unref(alarmForm))));
158 101 };
159 102
160 103 const getReduce = (data) => {
... ... @@ -185,6 +128,7 @@
185 128 id: item.id,
186 129 deviceName: item.deviceName,
187 130 showDeviceName: item.showDeviceName,
  131 + showTime: item.showTime,
188 132 status: { text: '', color: '' },
189 133 time: 0,
190 134 };
... ... @@ -215,23 +159,20 @@
215 159
216 160 <template>
217 161 <main :style="getScale" class="w-full h-full flex justify-center items-center">
218   - <!-- <DeviceName :config="config" class="text-center" /> -->
219   - <div
220   - v-for="item in alarmStatusList"
221   - :key="item.id"
222   - class="flex flex-col justify-center items-center"
223   - >
224   - <div class="text-gray-500 text-sm truncate"
225   - >{{
226   - item.status.text
227   - ? item.showDeviceName
228   - ? item.deviceName + '-'
229   - : ''
230   - : '当前设备未发现告警'
231   - }}{{ item.status.text }}</div
232   - >
233   - <div :class="item.status.color"></div>
234   - <UpdateTime :time="item.time" />
  162 + <div v-for="item in alarmStatusList" :key="item.id" class="flex flex-col items-center">
  163 + <div class="flex justify-center items-center flex-col">
  164 + <div class="text-gray-500 text-sm truncate"
  165 + >{{
  166 + item.status.text
  167 + ? item.showDeviceName
  168 + ? item.deviceName + '-'
  169 + : ''
  170 + : '当前设备未发现告警'
  171 + }}{{ item.status.text }}</div
  172 + >
  173 + <div :class="item.status.color"></div>
  174 + </div>
  175 + <UpdateTime v-show="item.showTime" :time="item.time" />
235 176 </div>
236 177 </main>
237 178 </template>
... ...
... ... @@ -2,16 +2,16 @@ import { FormSchema } from '/@/components/Form';
2 2 import { DataSourceField } from '../../../config/common.config';
3 3 import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
4 4 import { findDictItemByCode } from '/@/api/system/dict';
5   -import { getDeviceProfile } from '/@/api/alarm/position';
6   -import { useSelectWidgetMode } from '/@/views/visual/dataSourceBindPanel/useContext';
7   -import { DataActionModeEnum } from '/@/enums/toolEnum';
8   -import { unref } from 'vue';
  5 +// import { getDeviceProfile } from '/@/api/alarm/position';
  6 +// import { useSelectWidgetMode } from '/@/views/visual/dataSourceBindPanel/useContext';
  7 +// import { DataActionModeEnum } from '/@/enums/toolEnum';
  8 +// import { unref } from 'vue';
9 9 import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
10 10 import { MasterDeviceList } from '/@/api/dataBoard/model';
11 11
12 12 export const formSchemas = (): FormSchema[] => {
13   - const mode = useSelectWidgetMode();
14   - const isUpdate = unref(mode) === DataActionModeEnum.UPDATE;
  13 + // const mode = useSelectWidgetMode();
  14 + // const isUpdate = unref(mode) === DataActionModeEnum.UPDATE;
15 15 return [
16 16 {
17 17 field: DataSourceField.DEVICE_NAME,
... ... @@ -49,41 +49,41 @@ export const formSchemas = (): FormSchema[] => {
49 49 };
50 50 },
51 51 },
52   - {
53   - field: DataSourceField.DEVICE_PROFILE_ID,
54   - component: 'ApiSelect',
55   - label: '产品',
56   - colProps: { span: 8 },
57   - rules: [{ required: true, message: '产品为必填项' }],
58   - componentProps: ({ formActionType, formModel }) => {
59   - const { setFieldsValue } = formActionType;
60   - const deviceType = formModel[DataSourceField.DEVICE_TYPE];
61   - return {
62   - api: async () => {
63   - if (!deviceType) return [];
64   - const list = await getDeviceProfile(deviceType);
65   - if (isUpdate) {
66   - const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
67   - const record = list.find((item) => item.id === deviceProfileId);
68   - setFieldsValue({ [DataSourceField.TRANSPORT_TYPE]: record?.transportType });
69   - }
70   - return list;
71   - },
72   - labelField: 'name',
73   - valueField: 'id',
74   - placeholder: '请选择产品',
75   - onChange: (_, option = {} as Record<'transportType', string>) => {
76   - setFieldsValue({
77   - [DataSourceField.DEVICE_ID]: null,
78   - [DataSourceField.ATTRIBUTE]: null,
79   - [DataSourceField.ATTRIBUTE_NAME]: null,
80   - [DataSourceField.TRANSPORT_TYPE]: option[DataSourceField.TRANSPORT_TYPE],
81   - });
82   - },
83   - getPopupContainer: () => document.body,
84   - };
85   - },
86   - },
  52 + // {
  53 + // field: DataSourceField.DEVICE_PROFILE_ID,
  54 + // component: 'ApiSelect',
  55 + // label: '产品',
  56 + // colProps: { span: 8 },
  57 + // rules: [{ required: true, message: '产品为必填项' }],
  58 + // componentProps: ({ formActionType, formModel }) => {
  59 + // const { setFieldsValue } = formActionType;
  60 + // const deviceType = formModel[DataSourceField.DEVICE_TYPE];
  61 + // return {
  62 + // api: async () => {
  63 + // if (!deviceType) return [];
  64 + // const list = await getDeviceProfile(deviceType);
  65 + // if (isUpdate) {
  66 + // const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
  67 + // const record = list.find((item) => item.id === deviceProfileId);
  68 + // setFieldsValue({ [DataSourceField.TRANSPORT_TYPE]: record?.transportType });
  69 + // }
  70 + // return list;
  71 + // },
  72 + // labelField: 'name',
  73 + // valueField: 'id',
  74 + // placeholder: '请选择产品',
  75 + // onChange: (_, option = {} as Record<'transportType', string>) => {
  76 + // setFieldsValue({
  77 + // [DataSourceField.DEVICE_ID]: null,
  78 + // [DataSourceField.ATTRIBUTE]: null,
  79 + // [DataSourceField.ATTRIBUTE_NAME]: null,
  80 + // [DataSourceField.TRANSPORT_TYPE]: option[DataSourceField.TRANSPORT_TYPE],
  81 + // });
  82 + // },
  83 + // getPopupContainer: () => document.body,
  84 + // };
  85 + // },
  86 + // },
87 87 {
88 88 field: DataSourceField.ORIGINATION_ID,
89 89 component: 'OrgTreeSelect',
... ... @@ -131,6 +131,7 @@ export const formSchemas = (): FormSchema[] => {
131 131 deviceProfileId,
132 132 deviceType,
133 133 });
  134 + console.log(data, 'data');
134 135 if (data)
135 136 return data.map((item) => ({
136 137 ...item,
... ...
... ... @@ -128,66 +128,6 @@
128 128 };
129 129 });
130 130
131   - // const getMessage = (cmdId: number) => {
132   - // const message = {
133   - // alarmDataCmds: [
134   - // {
135   - // query: {
136   - // entityFilter: {
137   - // type: 'entityList',
138   - // resolveMultiple: true,
139   - // entityType: 'DEVICE',
140   - // entityList: unref(getDesign).dataSource?.map((item) => item.id),
141   - // },
142   - // pageLink: {
143   - // page: 0,
144   - // pageSize: unref(alarmForm)?.pageSize,
145   - // textSearch: null,
146   - // searchPropagatedAlarms: false,
147   - // statusList: [],
148   - // severityList: [],
149   - // typeList: [],
150   - // sortOrder: {
151   - // key: {
152   - // key: 'createdTime',
153   - // type: 'ALARM_FIELD',
154   - // },
155   - // direction: 'DESC',
156   - // },
157   - // timeWindow: unref(alarmForm)?.time,
158   - // },
159   - // alarmFields: [
160   - // {
161   - // type: 'ALARM_FIELD',
162   - // key: 'createdTime',
163   - // },
164   - // {
165   - // type: 'ALARM_FIELD',
166   - // key: 'originator',
167   - // },
168   - // {
169   - // type: 'ALARM_FIELD',
170   - // key: 'type',
171   - // },
172   - // {
173   - // type: 'ALARM_FIELD',
174   - // key: 'severity',
175   - // },
176   - // {
177   - // type: 'ALARM_FIELD',
178   - // key: 'status',
179   - // },
180   - // ],
181   - // entityFields: [],
182   - // latestValues: [],
183   - // },
184   - // cmdId,
185   - // },
186   - // ],
187   - // };
188   - // return message;
189   - // };
190   -
191 131 const { alarmForm } = useAlarmContext();
192 132
193 133 watch(
... ...
... ... @@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('CircleFlowmeter');
5 5
6 6 export const CircleFlowmeterConfig: ConfigType = {
7 7 ...componentKeys,
8   - title: '流量计2',
  8 + title: '计量计2',
9 9 package: PackagesCategoryEnum.FLOWMETER,
10 10 };
... ...
... ... @@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('RectFlowmeter');
5 5
6 6 export const RectFlowmeteConfig: ConfigType = {
7 7 ...componentKeys,
8   - title: '流量计1',
  8 + title: '计量计1',
9 9 package: PackagesCategoryEnum.FLOWMETER,
10 10 };
... ...
... ... @@ -22,6 +22,7 @@ export enum GradientColor {
22 22 export const option: PublicPresetOptions = {
23 23 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
24 24 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  25 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
25 26 [ComponentConfigFieldEnum.UNIT]: '℃',
26 27 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
27 28 [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5',
... ...
... ... @@ -22,18 +22,18 @@
22 22 defaultValue: option.fontColor,
23 23 },
24 24 {
25   - field: ComponentConfigFieldEnum.UNIT,
26   - label: '数值单位',
27   - component: 'Input',
28   - defaultValue: option.unit,
29   - },
30   - {
31 25 field: ComponentConfigFieldEnum.POINTER_COLOR,
32 26 label: '指针颜色',
33 27 component: 'ColorPicker',
34 28 changeEvent: 'update:value',
35 29 defaultValue: option.pointerColor,
36 30 },
  31 + {
  32 + field: ComponentConfigFieldEnum.UNIT,
  33 + label: '数值单位',
  34 + component: 'Input',
  35 + defaultValue: option.unit,
  36 + },
37 37 // {
38 38 // field: ComponentConfigFieldEnum.INSTRUMENT_PANEL_WIDTH,
39 39 // label: '仪表盘宽度',
... ... @@ -48,6 +48,13 @@
48 48 defaultValue: option.showDeviceName,
49 49 },
50 50 {
  51 + field: ComponentConfigFieldEnum.SHOW_TIME,
  52 + label: '显示时间',
  53 + component: 'Checkbox',
  54 + defaultValue: option.showTime,
  55 + },
  56 +
  57 + {
51 58 field: ComponentConfigFieldEnum.FIRST_PHASE_COLOR,
52 59 label: '起始颜色',
53 60 component: 'ColorPicker',
... ... @@ -88,13 +95,14 @@
88 95 fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
89 96 unit: item[ComponentConfigFieldEnum.UNIT],
90 97 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
  98 + showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
91 99 pointerColor: item[ComponentConfigFieldEnum.POINTER_COLOR],
92 100 } as ComponentInfo;
93 101 };
94 102
95 103 const setFormValues = (data: Recordable) => {
96 104 // return setFieldsValue(data);
97   - const { gradientInfo, unit, fontColor, showDeviceName, pointerColor } = data;
  105 + const { gradientInfo, unit, fontColor, showDeviceName, pointerColor, showTime } = data;
98 106 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
99 107 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
100 108
... ... @@ -102,6 +110,7 @@
102 110 [ComponentConfigFieldEnum.UNIT]: unit,
103 111 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
104 112 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
  113 + [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
105 114 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0,
106 115 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
107 116 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,
... ...
... ... @@ -30,8 +30,9 @@
30 30 pointerColor: presetPointerColor,
31 31 instrumentPanelColor: presetInstrumentPanelColor,
32 32 gradientInfo: presetGradientInfo,
  33 + showTime: persetShowTime,
33 34 } = persetOption || {};
34   - const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo } =
  35 + const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo, showTime } =
35 36 componentInfo || {};
36 37 return {
37 38 unit: unit ?? presetUnit,
... ... @@ -40,6 +41,7 @@
40 41 pointerColor: pointerColor ?? presetPointerColor,
41 42 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
42 43 gradientInfo: gradientInfo ?? presetGradientInfo,
  44 + showTime: showTime ?? persetShowTime,
43 45 };
44 46 });
45 47
... ... @@ -204,12 +206,15 @@
204 206 </script>
205 207
206 208 <template>
207   - <main class="w-full h-full flex flex-col justify-center items-center">
  209 + <main
  210 + class="w-full h-full flex flex-col justify-center items-center"
  211 + :class="!getDesign.showTime && 'p-5'"
  212 + >
208 213 <DeviceName :config="config" />
209 214 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
210 215 <div class="text-gray-500 text-xs text-center truncate">{{
211 216 getDesign.attribute || '湿度'
212 217 }}</div>
213   - <UpdateTime :time="time" />
  218 + <UpdateTime v-if="getDesign.showTime" :time="time" />
214 219 </main>
215 220 </template>
... ...
... ... @@ -20,6 +20,7 @@ export enum GradientColor {
20 20 export const option: PublicPresetOptions = {
21 21 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
22 22 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  23 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
23 24 [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: false,
24 25 [ComponentConfigFieldEnum.UNIT]: '℃',
25 26 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
... ...
... ... @@ -22,18 +22,6 @@
22 22 defaultValue: option.fontColor,
23 23 },
24 24 {
25   - field: ComponentConfigFieldEnum.UNIT,
26   - label: '数值单位',
27   - component: 'Input',
28   - defaultValue: option.unit,
29   - },
30   - {
31   - field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
32   - label: '显示设备名称',
33   - component: 'Checkbox',
34   - defaultValue: option.showDeviceName,
35   - },
36   - {
37 25 field: ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE,
38 26 label: '显示进度条圆形',
39 27 component: 'Checkbox',
... ... @@ -53,6 +41,24 @@
53 41 changeEvent: 'update:value',
54 42 defaultValue: GradientColor.SECOND,
55 43 },
  44 + {
  45 + field: ComponentConfigFieldEnum.UNIT,
  46 + label: '数值单位',
  47 + component: 'Input',
  48 + defaultValue: option.unit,
  49 + },
  50 + {
  51 + field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
  52 + label: '显示设备名称',
  53 + component: 'Checkbox',
  54 + defaultValue: option.showDeviceName,
  55 + },
  56 + {
  57 + field: ComponentConfigFieldEnum.SHOW_TIME,
  58 + label: '显示时间',
  59 + component: 'Checkbox',
  60 + defaultValue: option.showTime,
  61 + },
56 62 ],
57 63 showActionButtonGroup: false,
58 64 labelWidth: 120,
... ... @@ -80,13 +86,14 @@
80 86 fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
81 87 unit: item[ComponentConfigFieldEnum.UNIT],
82 88 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
  89 + showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
83 90 progressBarCircle: item[ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE],
84 91 } as ComponentInfo;
85 92 };
86 93
87 94 const setFormValues = (data: Recordable) => {
88 95 // return setFieldsValue(data);
89   - const { gradientInfo, unit, fontColor, showDeviceName, progressBarCircle } = data;
  96 + const { gradientInfo, unit, fontColor, showDeviceName, progressBarCircle, showTime } = data;
90 97 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
91 98 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
92 99
... ... @@ -94,6 +101,7 @@
94 101 [ComponentConfigFieldEnum.UNIT]: unit,
95 102 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
96 103 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
  104 + [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
97 105 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0,
98 106 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
99 107 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,
... ...
... ... @@ -31,9 +31,17 @@
31 31 instrumentPanelColor: presetInstrumentPanelColor,
32 32 progressBarCircle: presetProgressBarCircle,
33 33 gradientInfo: presetGradientInfo,
  34 + showTime: persetShowTime,
34 35 } = persetOption || {};
35   - const { unit, fontColor, pointerColor, gradientInfo, progressBarCircle, instrumentPanelColor } =
36   - componentInfo || {};
  36 + const {
  37 + unit,
  38 + fontColor,
  39 + pointerColor,
  40 + gradientInfo,
  41 + progressBarCircle,
  42 + instrumentPanelColor,
  43 + showTime,
  44 + } = componentInfo || {};
37 45 return {
38 46 unit: unit ?? presetUnit,
39 47 fontColor: fontColor ?? presetFontColor,
... ... @@ -42,6 +50,7 @@
42 50 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
43 51 progressBarCircle: progressBarCircle ?? presetProgressBarCircle,
44 52 gradientInfo: gradientInfo ?? presetGradientInfo,
  53 + showTime: showTime ?? persetShowTime,
45 54 };
46 55 });
47 56
... ... @@ -206,12 +215,15 @@
206 215 </script>
207 216
208 217 <template>
209   - <main class="w-full h-full flex flex-col justify-center items-center">
  218 + <main
  219 + class="w-full h-full flex flex-col justify-center items-center"
  220 + :class="!getDesign.showTime && 'p-5'"
  221 + >
210 222 <DeviceName :config="config" />
211 223 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
212 224 <div class="text-gray-500 text-xs text-center truncate">{{
213 225 getDesign.attribute || '湿度'
214 226 }}</div>
215   - <UpdateTime :time="time" />
  227 + <UpdateTime v-if="getDesign.showTime" :time="time" />
216 228 </main>
217 229 </template>
... ...
... ... @@ -3,7 +3,7 @@
3 3 import { unref, ref, onMounted, computed, nextTick } from 'vue';
4 4 import { ComponentPropsConfigType } from '../../../index.type';
5 5 import { option } from './config';
6   - import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
  6 + // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
7 7 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
8 8 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
9 9 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
... ... @@ -19,7 +19,7 @@
19 19
20 20 const chartInstance = ref<Nullable<ECharts>>(null);
21 21
22   - const time = ref<Nullable<number>>(null);
  22 + // const time = ref<Nullable<number>>(null);
23 23
24 24 const getDesign = computed(() => {
25 25 const { option, persetOption } = props.config;
... ... @@ -276,11 +276,11 @@
276 276 const { forEachGroupMessage } = useReceiveMessage();
277 277 const { getNumberValue } = useReceiveValue();
278 278 const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
279   - forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
  279 + forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
280 280 series.value.forEach((item) => {
281 281 if (item.id === deviceId && item.attribute === attribute) {
282 282 item.value = getNumberValue(value);
283   - time.value = timespan;
  283 + // time.value = timespan;
284 284 }
285 285 });
286 286 });
... ... @@ -334,6 +334,6 @@
334 334 <main class="w-full h-full flex flex-col justify-center items-center">
335 335 <DeviceName :config="config" />
336 336 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
337   - <UpdateTime :time="time" />
  337 + <!-- <UpdateTime :time="time" /> -->
338 338 </main>
339 339 </template>
... ...
... ... @@ -20,7 +20,8 @@ export enum GradientColor {
20 20 export const option: PublicPresetOptions = {
21 21 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
22 22 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
23   - [ComponentConfigFieldEnum.UNIT]: '℃',
  23 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
  24 + [ComponentConfigFieldEnum.UNIT]: 'kw',
24 25 };
25 26
26 27 export default class Config extends PublicConfigClass implements CreateComponentType {
... ...
... ... @@ -26,6 +26,12 @@
26 26 component: 'Checkbox',
27 27 defaultValue: option.showDeviceName,
28 28 },
  29 + {
  30 + field: ComponentConfigFieldEnum.SHOW_TIME,
  31 + label: '显示时间',
  32 + component: 'Checkbox',
  33 + defaultValue: option.showTime,
  34 + },
29 35 ],
30 36 showActionButtonGroup: false,
31 37 labelWidth: 120,
... ... @@ -41,17 +47,19 @@
41 47 fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
42 48 unit: item[ComponentConfigFieldEnum.UNIT],
43 49 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
  50 + showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
44 51 } as ComponentInfo;
45 52 };
46 53
47 54 const setFormValues = (data: Recordable) => {
48 55 // return setFieldsValue(data);
49   - const { unit, fontColor, showDeviceName } = data;
  56 + const { unit, fontColor, showDeviceName, showTime } = data;
50 57
51 58 const value = {
52 59 [ComponentConfigFieldEnum.UNIT]: unit,
53 60 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
54 61 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
  62 + [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
55 63 };
56 64 return setFieldsValue(value);
57 65 };
... ...
... ... @@ -29,8 +29,9 @@
29 29 pointerColor: presetPointerColor,
30 30 instrumentPanelColor: presetInstrumentPanelColor,
31 31 gradientInfo: presetGradientInfo,
  32 + showTime: persetShowTime,
32 33 } = persetOption || {};
33   - const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo } =
  34 + const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo, showTime } =
34 35 componentInfo || {};
35 36 return {
36 37 unit: unit ?? presetUnit,
... ... @@ -39,6 +40,7 @@
39 40 pointerColor: pointerColor ?? presetPointerColor,
40 41 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
41 42 gradientInfo: gradientInfo ?? presetGradientInfo,
  43 + showTime: showTime ?? persetShowTime,
42 44 };
43 45 });
44 46
... ... @@ -189,12 +191,15 @@
189 191 </script>
190 192
191 193 <template>
192   - <main class="w-full h-full flex flex-col justify-center items-center">
  194 + <main
  195 + class="w-full h-full flex flex-col justify-center items-center"
  196 + :class="!getDesign.showTime && 'p-5'"
  197 + >
193 198 <DeviceName :config="config" />
194 199 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
195 200 <div class="text-gray-500 text-xs text-center truncate">{{
196   - getDesign.attribute || '湿度'
  201 + getDesign.attribute || '速度'
197 202 }}</div>
198   - <UpdateTime :time="time" />
  203 + <UpdateTime v-if="getDesign.showTime" :time="time" />
199 204 </main>
200 205 </template>
... ...
... ... @@ -13,6 +13,7 @@ export const option: PublicPresetOptions = {
13 13 [ComponentConfigFieldEnum.OPEN_COLOR]: '#30f230',
14 14 [ComponentConfigFieldEnum.CLOSE_COLOR]: '#eeeeee',
15 15 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true,
  16 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
16 17 };
17 18
18 19 export default class Config extends PublicConfigClass implements CreateComponentType {
... ...
... ... @@ -25,10 +25,10 @@
25 25 },
26 26 },
27 27 {
28   - field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
29   - label: '显示设备名称',
  28 + field: ComponentConfigFieldEnum.SHOW_TIME,
  29 + label: '显示时间',
30 30 component: 'Checkbox',
31   - defaultValue: option.showDeviceName,
  31 + defaultValue: option.showTime,
32 32 },
33 33 ],
34 34 showActionButtonGroup: false,
... ...
... ... @@ -24,15 +24,17 @@
24 24 openColor: persetOpenColor,
25 25 closeColor: persetCloseColor,
26 26 showDeviceName: persetShowDeviceName,
  27 + showTime: persetShowTime,
27 28 } = persetOption || {};
28 29 const { componentInfo, attribute, attributeName, attributeRename } = option;
29 30
30   - const { openColor, closeColor, showDeviceName } = componentInfo || {};
  31 + const { openColor, closeColor, showDeviceName, showTime } = componentInfo || {};
31 32 return {
32 33 openColor: openColor ?? persetOpenColor,
33 34 closeColor: closeColor ?? persetCloseColor,
34 35 showDeviceName: showDeviceName ?? persetShowDeviceName,
35 36 attribute: attributeRename || attributeName || attribute,
  37 + showTime: showTime ?? persetShowTime,
36 38 };
37 39 });
38 40
... ... @@ -60,10 +62,14 @@
60 62 </script>
61 63
62 64 <template>
63   - <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
  65 + <main
  66 + :style="getScale"
  67 + class="w-full h-full flex flex-col justify-center items-center"
  68 + :class="!getDesign.showTime && 'p-5'"
  69 + >
64 70 <DeviceName :config="config" class="text-center" />
65 71
66   - <div class="flex-1 flex justify-center items-center flex-col">
  72 + <div class="flex-1 flex justify-center items-center flex-col" :style="getScale">
67 73 <div
68 74 :style="{
69 75 '--open-color': getDesign.openColor,
... ... @@ -73,7 +79,7 @@
73 79 ></div>
74 80 <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute }}</div>
75 81 </div>
76   - <UpdateTime :time="time" />
  82 + <UpdateTime v-if="getDesign.showTime" :time="time" />
77 83 </main>
78 84 </template>
79 85 <style lang="less" scoped>
... ...
... ... @@ -15,6 +15,7 @@ export const option: PublicPresetOptions = {
15 15 [ComponentConfigFieldEnum.ICON_CLOSE]: 'dianyuandianya',
16 16 [ComponentConfigFieldEnum.ICON_COLOR_CLOSE]: '#CCCCCC',
17 17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  18 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
18 19 };
19 20
20 21 export default class Config extends PublicConfigClass implements CreateComponentType {
... ...
... ... @@ -52,6 +52,12 @@
52 52 component: 'Checkbox',
53 53 defaultValue: option.showDeviceName,
54 54 },
  55 + {
  56 + field: ComponentConfigFieldEnum.SHOW_TIME,
  57 + label: '显示设备名称',
  58 + component: 'Checkbox',
  59 + defaultValue: option.showTime,
  60 + },
55 61 ],
56 62 showActionButtonGroup: false,
57 63 labelWidth: 120,
... ...
... ... @@ -25,11 +25,12 @@
25 25 fontColor: persetFontColor,
26 26 iconClose: persetIconCLose,
27 27 iconColorClose: persetIconColorClose,
  28 + showTime: persetShowTime,
28 29 } = persetOption;
29 30
30 31 const { componentInfo, attributeRename } = option;
31 32
32   - const { icon, iconColor, fontColor, unit, iconClose, iconColorClose, attributeName } =
  33 + const { icon, iconColor, fontColor, unit, iconClose, iconColorClose, attributeName, showTime } =
33 34 componentInfo || {};
34 35 return {
35 36 iconColor: iconColor || persetIconColor,
... ... @@ -39,6 +40,7 @@
39 40 attribute: attributeRename || attributeName,
40 41 iconClose: iconClose || persetIconCLose,
41 42 iconColorClose: iconColorClose || persetIconColorClose,
  43 + showTime: showTime ?? persetShowTime,
42 44 };
43 45 });
44 46
... ... @@ -67,6 +69,6 @@
67 69 />
68 70 <div class="text-gray-500 text-sm truncate m-2">{{ getDesign.attribute || '温度' }}</div>
69 71 </div>
70   - <UpdateTime :time="time" />
  72 + <UpdateTime v-show="getDesign.showTime" :time="time" />
71 73 </main>
72 74 </template>
... ...
... ... @@ -3,7 +3,7 @@
3 3 import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
4 4 import { ComponentPropsConfigType } from '../../../index.type';
5 5 import { option } from './config';
6   - import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
  6 + // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
7 7 import { useComponentScale } from '../../../hook/useComponentScale';
8 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 9 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
... ... @@ -180,6 +180,6 @@
180 180 <main class="w-full h-full flex flex-col justify-center items-center">
181 181 <DeviceName :config="config" />
182 182 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
183   - <UpdateTime :time="time" />
  183 + <!-- <UpdateTime :time="time" /> -->
184 184 </main>
185 185 </template>
... ...
... ... @@ -3,7 +3,7 @@
3 3 import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
4 4 import { ComponentPropsConfigType } from '../../../index.type';
5 5 import { option } from './config';
6   - import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
  6 + // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
7 7 import { useComponentScale } from '../../../hook/useComponentScale';
8 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 9 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
... ... @@ -181,6 +181,6 @@
181 181 <main class="w-full h-full flex flex-col justify-center items-center">
182 182 <DeviceName :config="config" />
183 183 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
184   - <UpdateTime :time="time" />
  184 + <!-- <UpdateTime :time="time" /> -->
185 185 </main>
186 186 </template>
... ...
... ... @@ -3,7 +3,7 @@
3 3 import { unref, ref, onMounted, nextTick, toRaw, computed } from 'vue';
4 4 import { ComponentPropsConfigType } from '../../../index.type';
5 5 import { option } from './config';
6   - import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
  6 + // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
7 7 import { useComponentScale } from '../../../hook/useComponentScale';
8 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 9 import { useIntervalFn } from '@vueuse/core';
... ... @@ -21,7 +21,7 @@
21 21 const chartRefEl = ref<Nullable<HTMLDivElement>>(null);
22 22
23 23 const chartInstance = ref<Nullable<ECharts>>(null);
24   - const time = ref<Nullable<number>>(null);
  24 + // const time = ref<Nullable<number>>(null);
25 25
26 26 const updateInterval = ref<number>(1000); //默认每秒更新一次
27 27 const maxDataPoints = ref<number>(10); //默认每秒显示10个数据点
... ... @@ -203,6 +203,6 @@
203 203 <main class="w-full h-full flex flex-col justify-center items-center">
204 204 <DeviceName :config="config" />
205 205 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
206   - <UpdateTime :time="time" />
  206 + <!-- <UpdateTime :time="time" /> -->
207 207 </main>
208 208 </template>
... ...
... ... @@ -19,6 +19,7 @@ export enum ComponentConfigFieldEnum {
19 19 SECOND_PHASE_VALUE = 'secondPhaseValue',
20 20 THIRD_PHASE_VALUE = 'thirdPhaseValue',
21 21 SHOW_DEVICE_NAME = 'showDeviceName',
  22 + SHOW_TIME = 'showTime',
22 23 GRADIENT_INFO = 'gradientInfo',
23 24
24 25 FLOWMETER_CONFIG = 'flowmeterConfig',
... ...
... ... @@ -19,7 +19,7 @@ export enum PackagesCategoryNameEnum {
19 19 // PICTURE = '图片组件',
20 20 CONTROL = '控制组件',
21 21 MAP = '地图组件',
22   - FLOWMETER = '流量计',
  22 + FLOWMETER = '计量计',
23 23 STATISTICS = '统计',
24 24 ALARM = '告警',
25 25 OTHER = '其他',
... ...
... ... @@ -53,6 +53,7 @@ export interface ComponentInfo {
53 53 icon: string;
54 54 iconColor: string;
55 55 showDeviceName: boolean;
  56 + showTime?: boolean;
56 57 gradientInfo: ComponentInfoGradientInfoType[];
57 58 flowmeterConfig: FlowmeterConfigType;
58 59 pointerColor?: string;
... ...
... ... @@ -85,7 +85,7 @@
85 85 class="mt-4"
86 86 v-for="temp in item.items"
87 87 :key="temp.key"
88   - @click="handleSelected(temp)"
  88 + @click.capture="handleSelected(temp)"
89 89 :class="temp.key === props.checked?.componentKey ? '!border-2 !border-blue-500' : ''"
90 90 >
91 91 <component :is="componentMap.get(temp.key)" v-bind="getBindConfig(temp.key)" />
... ...