简柏林 / thingskit-front · Commits

Commit 9c3bc8041a2b65f970559e27e490106c307a9fc7

Authored by xp.Huang
2 parents a6e70c28 80abea18

Merge branch 'fix/modifyTCP-add-field' into 'main_dev' 

脚本管理tcp转换脚本添加脚本类型字段

See merge request yunteng/thingskit-front!740
Inline Side-by-side
Showing 35 changed files with 214 additions and 252 deletions
@@ -48,6 +48,11 @@ export const aceEditorOptions = { @@ -48,6 +48,11 @@ export const aceEditorOptions = {
48 enableEmmet: true, 48 enableEmmet: true,
49 }; 49 };
50 50
  51 +const scriptTypeInfo = {
  52 + TRANSPORT_TCP_UP: '上行数据解析',
  53 + TRANSPORT_TCP_AUTH: '设备鉴权',
  54 +};
  55 +
51 // 表格配置 56 // 表格配置
52 export const columns: BasicColumn[] = [ 57 export const columns: BasicColumn[] = [
53 { 58 {
@@ -68,6 +73,14 @@ export const columns: BasicColumn[] = [ @@ -68,6 +73,14 @@ export const columns: BasicColumn[] = [
68 slots: { customRender: 'convertJs' }, 73 slots: { customRender: 'convertJs' },
69 }, 74 },
70 { 75 {
  76 + title: '脚本类型',
  77 + dataIndex: 'scriptType',
  78 + width: 120,
  79 + format: (values) => {
  80 + return scriptTypeInfo[values];
  81 + },
  82 + },
  83 + {
71 title: '备注', 84 title: '备注',
72 dataIndex: 'description', 85 dataIndex: 'description',
73 width: 120, 86 width: 120,
@@ -213,6 +213,7 @@ @@ -213,6 +213,7 @@
213 </Tooltip> 213 </Tooltip>
214 <Tooltip title="删除"> 214 <Tooltip title="删除">
215 <DeleteOutlined 215 <DeleteOutlined
  216 + v-show="dataSource.length > 1"
216 @click="handleDelete(item)" 217 @click="handleDelete(item)"
217 class="cursor-pointer text-lg !leading-32px" 218 class="cursor-pointer text-lg !leading-32px"
218 /> 219 />
@@ -15,6 +15,7 @@ export const option: PublicPresetOptions = { @@ -15,6 +15,7 @@ export const option: PublicPresetOptions = {
15 [ComponentConfigFieldEnum.OPEN_COLOR]: '#00F43D', 15 [ComponentConfigFieldEnum.OPEN_COLOR]: '#00F43D',
16 [ComponentConfigFieldEnum.CLOSE_COLOR]: '#FF0000', 16 [ComponentConfigFieldEnum.CLOSE_COLOR]: '#FF0000',
17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true, 17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true,
  18 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
18 }; 19 };
19 20
20 export default class Config extends PublicConfigClass implements CreateComponentType { 21 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -30,6 +30,12 @@ @@ -30,6 +30,12 @@
30 component: 'Checkbox', 30 component: 'Checkbox',
31 defaultValue: option.showDeviceName, 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 showActionButtonGroup: false, 40 showActionButtonGroup: false,
35 labelWidth: 120, 41 labelWidth: 120,
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 import { ReceiveAlarmDataCmdsMessageType } from '../../../hook/socket/useSocket.type'; 10 import { ReceiveAlarmDataCmdsMessageType } from '../../../hook/socket/useSocket.type';
11 import { useDataBoardContext } from '/@/views/visual/palette/hooks/useDataBoardContext'; 11 import { useDataBoardContext } from '/@/views/visual/palette/hooks/useDataBoardContext';
12 import { useAlarmContext } from '/@/views/visual/palette/hooks/useAlarmTime'; 12 import { useAlarmContext } from '/@/views/visual/palette/hooks/useAlarmTime';
  13 + import { getMessage } from '../config';
13 14
14 interface IStatus { 15 interface IStatus {
15 text: string; 16 text: string;
@@ -20,6 +21,7 @@ @@ -20,6 +21,7 @@
20 id: string; 21 id: string;
21 deviceName: string; 22 deviceName: string;
22 showDeviceName: boolean; 23 showDeviceName: boolean;
  24 + showTime: boolean;
23 status: IStatus; 25 status: IStatus;
24 time: number; 26 time: number;
25 } 27 }
@@ -51,7 +53,7 @@ @@ -51,7 +53,7 @@
51 const getDesign = computed(() => { 53 const getDesign = computed(() => {
52 const { persetOption = {}, option } = props.config; 54 const { persetOption = {}, option } = props.config;
53 const { dataSource } = option; 55 const { dataSource } = option;
54 - const { showDeviceName: presetShowDeviceName } = persetOption; 56 + const { showDeviceName: presetShowDeviceName, showTime: persetShowTime } = persetOption;
55 57
56 return { 58 return {
57 dataSource: dataSource?.map((item) => { 59 dataSource: dataSource?.map((item) => {
@@ -60,6 +62,7 @@ @@ -60,6 +62,7 @@
60 id: deviceId, 62 id: deviceId,
61 deviceName: deviceRename || deviceName, 63 deviceName: deviceRename || deviceName,
62 showDeviceName: componentInfo.showDeviceName ?? presetShowDeviceName, 64 showDeviceName: componentInfo.showDeviceName ?? presetShowDeviceName,
  65 + showTime: componentInfo.showTime ?? persetShowTime,
63 }; 66 };
64 }), 67 }),
65 }; 68 };
@@ -71,67 +74,6 @@ @@ -71,67 +74,6 @@
71 }, 4000); 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 const alarmStatusList = ref<IAlarmStatusList[]>([ 77 const alarmStatusList = ref<IAlarmStatusList[]>([
136 { 78 {
137 id: '1', 79 id: '1',
@@ -139,6 +81,7 @@ @@ -139,6 +81,7 @@
139 status: { text: '紧急', color: 'alarm_state_major' }, 81 status: { text: '紧急', color: 'alarm_state_major' },
140 time: 1689574726, 82 time: 1689574726,
141 showDeviceName: true, 83 showDeviceName: true,
  84 + showTime: true,
142 }, 85 },
143 ]); 86 ]);
144 87
@@ -147,14 +90,14 @@ @@ -147,14 +90,14 @@
147 watch( 90 watch(
148 () => alarmForm?.value, 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 { immediate: false } 95 { immediate: false }
153 ); 96 );
154 97
155 const transformMessage = (cmdId: number) => { 98 const transformMessage = (cmdId: number) => {
156 currentCmdId.value = cmdId; 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 const getReduce = (data) => { 103 const getReduce = (data) => {
@@ -185,6 +128,7 @@ @@ -185,6 +128,7 @@
185 id: item.id, 128 id: item.id,
186 deviceName: item.deviceName, 129 deviceName: item.deviceName,
187 showDeviceName: item.showDeviceName, 130 showDeviceName: item.showDeviceName,
  131 + showTime: item.showTime,
188 status: { text: '', color: '' }, 132 status: { text: '', color: '' },
189 time: 0, 133 time: 0,
190 }; 134 };
@@ -215,23 +159,20 @@ @@ -215,23 +159,20 @@
215 159
216 <template> 160 <template>
217 <main :style="getScale" class="w-full h-full flex justify-center items-center"> 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 </div> 176 </div>
236 </main> 177 </main>
237 </template> 178 </template>
@@ -2,16 +2,16 @@ import { FormSchema } from '/@/components/Form'; @@ -2,16 +2,16 @@ import { FormSchema } from '/@/components/Form';
2 import { DataSourceField } from '../../../config/common.config'; 2 import { DataSourceField } from '../../../config/common.config';
3 import { DeviceTypeEnum } from '/@/api/device/model/deviceModel'; 3 import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
4 import { findDictItemByCode } from '/@/api/system/dict'; 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 import { getMeetTheConditionsDevice } from '/@/api/dataBoard'; 9 import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
10 import { MasterDeviceList } from '/@/api/dataBoard/model'; 10 import { MasterDeviceList } from '/@/api/dataBoard/model';
11 11
12 export const formSchemas = (): FormSchema[] => { 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 return [ 15 return [
16 { 16 {
17 field: DataSourceField.DEVICE_NAME, 17 field: DataSourceField.DEVICE_NAME,
@@ -49,41 +49,41 @@ export const formSchemas = (): FormSchema[] => { @@ -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 field: DataSourceField.ORIGINATION_ID, 88 field: DataSourceField.ORIGINATION_ID,
89 component: 'OrgTreeSelect', 89 component: 'OrgTreeSelect',
@@ -131,6 +131,7 @@ export const formSchemas = (): FormSchema[] => { @@ -131,6 +131,7 @@ export const formSchemas = (): FormSchema[] => {
131 deviceProfileId, 131 deviceProfileId,
132 deviceType, 132 deviceType,
133 }); 133 });
  134 + console.log(data, 'data');
134 if (data) 135 if (data)
135 return data.map((item) => ({ 136 return data.map((item) => ({
136 ...item, 137 ...item,
@@ -128,66 +128,6 @@ @@ -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 const { alarmForm } = useAlarmContext(); 131 const { alarmForm } = useAlarmContext();
192 132
193 watch( 133 watch(
@@ -44,7 +44,6 @@ @@ -44,7 +44,6 @@
44 ]); 44 ]);
45 45
46 const getDesign = computed(() => { 46 const getDesign = computed(() => {
47 - console.log(props.config.option, 'option');  
48 const { persetOption = {}, option } = props.config; 47 const { persetOption = {}, option } = props.config;
49 const { dataSource = [] } = option || {}; 48 const { dataSource = [] } = option || {};
50 const { 49 const {
@@ -75,7 +74,6 @@ @@ -75,7 +74,6 @@
75 74
76 const { loading, sendCommand } = useSendCommand(); 75 const { loading, sendCommand } = useSendCommand();
77 const handleChange = async (index: number, checked: Boolean) => { 76 const handleChange = async (index: number, checked: Boolean) => {
78 - console.log(props.config.option);  
79 const { heightPx, itemHeightRatio, itemWidthRatio, mode, widthPx, dataSource } = 77 const { heightPx, itemHeightRatio, itemWidthRatio, mode, widthPx, dataSource } =
80 props.config.option; 78 props.config.option;
81 79
@@ -87,7 +85,6 @@ @@ -87,7 +85,6 @@
87 mode, 85 mode,
88 widthPx, 86 widthPx,
89 } as DataSource; 87 } as DataSource;
90 - console.log(data, 'data', checked);  
91 88
92 const flag = await sendCommand(data, checked); 89 const flag = await sendCommand(data, checked);
93 if (!flag) controlList.value[index].checked = !checked; 90 if (!flag) controlList.value[index].checked = !checked;
@@ -105,10 +102,7 @@ @@ -105,10 +102,7 @@
105 ); 102 );
106 103
107 const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => { 104 const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => {
108 - console.log(unref(getDesign).dataSource, 'dataSource');  
109 -  
110 - forEachGroupMessage(message, deviceId, attribute, (attribute, value, time) => {  
111 - console.log(attribute, value, time); 105 + forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
112 controlList.value.forEach((item) => { 106 controlList.value.forEach((item) => {
113 if (item.id === deviceId && item.attribute === attribute) { 107 if (item.id === deviceId && item.attribute === attribute) {
114 item.checked = Boolean(getNumberValue(value)); 108 item.checked = Boolean(getNumberValue(value));
@@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('CircleFlowmeter'); @@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('CircleFlowmeter');
5 5
6 export const CircleFlowmeterConfig: ConfigType = { 6 export const CircleFlowmeterConfig: ConfigType = {
7 ...componentKeys, 7 ...componentKeys,
8 - title: '流量计2', 8 + title: '计量计2',
9 package: PackagesCategoryEnum.FLOWMETER, 9 package: PackagesCategoryEnum.FLOWMETER,
10 }; 10 };
@@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('RectFlowmeter'); @@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('RectFlowmeter');
5 5
6 export const RectFlowmeteConfig: ConfigType = { 6 export const RectFlowmeteConfig: ConfigType = {
7 ...componentKeys, 7 ...componentKeys,
8 - title: '流量计1', 8 + title: '计量计1',
9 package: PackagesCategoryEnum.FLOWMETER, 9 package: PackagesCategoryEnum.FLOWMETER,
10 }; 10 };
@@ -22,6 +22,7 @@ export enum GradientColor { @@ -22,6 +22,7 @@ export enum GradientColor {
22 export const option: PublicPresetOptions = { 22 export const option: PublicPresetOptions = {
23 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347', 23 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
24 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 24 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  25 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
25 [ComponentConfigFieldEnum.UNIT]: '℃', 26 [ComponentConfigFieldEnum.UNIT]: '℃',
26 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6', 27 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
27 [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5', 28 [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5',
@@ -22,18 +22,18 @@ @@ -22,18 +22,18 @@
22 defaultValue: option.fontColor, 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.POINTER_COLOR, 25 field: ComponentConfigFieldEnum.POINTER_COLOR,
32 label: '指针颜色', 26 label: '指针颜色',
33 component: 'ColorPicker', 27 component: 'ColorPicker',
34 changeEvent: 'update:value', 28 changeEvent: 'update:value',
35 defaultValue: option.pointerColor, 29 defaultValue: option.pointerColor,
36 }, 30 },
  31 + {
  32 + field: ComponentConfigFieldEnum.UNIT,
  33 + label: '数值单位',
  34 + component: 'Input',
  35 + defaultValue: option.unit,
  36 + },
37 // { 37 // {
38 // field: ComponentConfigFieldEnum.INSTRUMENT_PANEL_WIDTH, 38 // field: ComponentConfigFieldEnum.INSTRUMENT_PANEL_WIDTH,
39 // label: '仪表盘宽度', 39 // label: '仪表盘宽度',
@@ -48,6 +48,13 @@ @@ -48,6 +48,13 @@
48 defaultValue: option.showDeviceName, 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 field: ComponentConfigFieldEnum.FIRST_PHASE_COLOR, 58 field: ComponentConfigFieldEnum.FIRST_PHASE_COLOR,
52 label: '起始颜色', 59 label: '起始颜色',
53 component: 'ColorPicker', 60 component: 'ColorPicker',
@@ -88,13 +95,14 @@ @@ -88,13 +95,14 @@
88 fontColor: item[ComponentConfigFieldEnum.FONT_COLOR], 95 fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
89 unit: item[ComponentConfigFieldEnum.UNIT], 96 unit: item[ComponentConfigFieldEnum.UNIT],
90 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME], 97 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
  98 + showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
91 pointerColor: item[ComponentConfigFieldEnum.POINTER_COLOR], 99 pointerColor: item[ComponentConfigFieldEnum.POINTER_COLOR],
92 } as ComponentInfo; 100 } as ComponentInfo;
93 }; 101 };
94 102
95 const setFormValues = (data: Recordable) => { 103 const setFormValues = (data: Recordable) => {
96 // return setFieldsValue(data); 104 // return setFieldsValue(data);
97 - const { gradientInfo, unit, fontColor, showDeviceName, pointerColor } = data; 105 + const { gradientInfo, unit, fontColor, showDeviceName, pointerColor, showTime } = data;
98 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST); 106 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
99 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND); 107 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
100 108
@@ -102,6 +110,7 @@ @@ -102,6 +110,7 @@
102 [ComponentConfigFieldEnum.UNIT]: unit, 110 [ComponentConfigFieldEnum.UNIT]: unit,
103 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor, 111 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
104 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName, 112 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
  113 + [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
105 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0, 114 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0,
106 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color, 115 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
107 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1, 116 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,
@@ -30,8 +30,9 @@ @@ -30,8 +30,9 @@
30 pointerColor: presetPointerColor, 30 pointerColor: presetPointerColor,
31 instrumentPanelColor: presetInstrumentPanelColor, 31 instrumentPanelColor: presetInstrumentPanelColor,
32 gradientInfo: presetGradientInfo, 32 gradientInfo: presetGradientInfo,
  33 + showTime: persetShowTime,
33 } = persetOption || {}; 34 } = persetOption || {};
34 - const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo } = 35 + const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo, showTime } =
35 componentInfo || {}; 36 componentInfo || {};
36 return { 37 return {
37 unit: unit ?? presetUnit, 38 unit: unit ?? presetUnit,
@@ -40,6 +41,7 @@ @@ -40,6 +41,7 @@
40 pointerColor: pointerColor ?? presetPointerColor, 41 pointerColor: pointerColor ?? presetPointerColor,
41 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor, 42 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
42 gradientInfo: gradientInfo ?? presetGradientInfo, 43 gradientInfo: gradientInfo ?? presetGradientInfo,
  44 + showTime: showTime ?? persetShowTime,
43 }; 45 };
44 }); 46 });
45 47
@@ -204,12 +206,15 @@ @@ -204,12 +206,15 @@
204 </script> 206 </script>
205 207
206 <template> 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 <DeviceName :config="config" /> 213 <DeviceName :config="config" />
209 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 214 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
210 <div class="text-gray-500 text-xs text-center truncate">{{ 215 <div class="text-gray-500 text-xs text-center truncate">{{
211 getDesign.attribute || '湿度' 216 getDesign.attribute || '湿度'
212 }}</div> 217 }}</div>
213 - <UpdateTime :time="time" /> 218 + <UpdateTime v-if="getDesign.showTime" :time="time" />
214 </main> 219 </main>
215 </template> 220 </template>
@@ -20,6 +20,7 @@ export enum GradientColor { @@ -20,6 +20,7 @@ export enum GradientColor {
20 export const option: PublicPresetOptions = { 20 export const option: PublicPresetOptions = {
21 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347', 21 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
22 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 22 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  23 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
23 [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: false, 24 [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: false,
24 [ComponentConfigFieldEnum.UNIT]: '℃', 25 [ComponentConfigFieldEnum.UNIT]: '℃',
25 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6', 26 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
@@ -22,18 +22,6 @@ @@ -22,18 +22,6 @@
22 defaultValue: option.fontColor, 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 field: ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE, 25 field: ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE,
38 label: '显示进度条圆形', 26 label: '显示进度条圆形',
39 component: 'Checkbox', 27 component: 'Checkbox',
@@ -53,6 +41,24 @@ @@ -53,6 +41,24 @@
53 changeEvent: 'update:value', 41 changeEvent: 'update:value',
54 defaultValue: GradientColor.SECOND, 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 showActionButtonGroup: false, 63 showActionButtonGroup: false,
58 labelWidth: 120, 64 labelWidth: 120,
@@ -80,13 +86,14 @@ @@ -80,13 +86,14 @@
80 fontColor: item[ComponentConfigFieldEnum.FONT_COLOR], 86 fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
81 unit: item[ComponentConfigFieldEnum.UNIT], 87 unit: item[ComponentConfigFieldEnum.UNIT],
82 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME], 88 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
  89 + showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
83 progressBarCircle: item[ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE], 90 progressBarCircle: item[ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE],
84 } as ComponentInfo; 91 } as ComponentInfo;
85 }; 92 };
86 93
87 const setFormValues = (data: Recordable) => { 94 const setFormValues = (data: Recordable) => {
88 // return setFieldsValue(data); 95 // return setFieldsValue(data);
89 - const { gradientInfo, unit, fontColor, showDeviceName, progressBarCircle } = data; 96 + const { gradientInfo, unit, fontColor, showDeviceName, progressBarCircle, showTime } = data;
90 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST); 97 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
91 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND); 98 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
92 99
@@ -94,6 +101,7 @@ @@ -94,6 +101,7 @@
94 [ComponentConfigFieldEnum.UNIT]: unit, 101 [ComponentConfigFieldEnum.UNIT]: unit,
95 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor, 102 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
96 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName, 103 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
  104 + [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
97 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0, 105 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0,
98 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color, 106 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
99 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1, 107 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,
@@ -31,9 +31,17 @@ @@ -31,9 +31,17 @@
31 instrumentPanelColor: presetInstrumentPanelColor, 31 instrumentPanelColor: presetInstrumentPanelColor,
32 progressBarCircle: presetProgressBarCircle, 32 progressBarCircle: presetProgressBarCircle,
33 gradientInfo: presetGradientInfo, 33 gradientInfo: presetGradientInfo,
  34 + showTime: persetShowTime,
34 } = persetOption || {}; 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 return { 45 return {
38 unit: unit ?? presetUnit, 46 unit: unit ?? presetUnit,
39 fontColor: fontColor ?? presetFontColor, 47 fontColor: fontColor ?? presetFontColor,
@@ -42,6 +50,7 @@ @@ -42,6 +50,7 @@
42 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor, 50 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
43 progressBarCircle: progressBarCircle ?? presetProgressBarCircle, 51 progressBarCircle: progressBarCircle ?? presetProgressBarCircle,
44 gradientInfo: gradientInfo ?? presetGradientInfo, 52 gradientInfo: gradientInfo ?? presetGradientInfo,
  53 + showTime: showTime ?? persetShowTime,
45 }; 54 };
46 }); 55 });
47 56
@@ -206,12 +215,15 @@ @@ -206,12 +215,15 @@
206 </script> 215 </script>
207 216
208 <template> 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 <DeviceName :config="config" /> 222 <DeviceName :config="config" />
211 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 223 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
212 <div class="text-gray-500 text-xs text-center truncate">{{ 224 <div class="text-gray-500 text-xs text-center truncate">{{
213 getDesign.attribute || '湿度' 225 getDesign.attribute || '湿度'
214 }}</div> 226 }}</div>
215 - <UpdateTime :time="time" /> 227 + <UpdateTime v-if="getDesign.showTime" :time="time" />
216 </main> 228 </main>
217 </template> 229 </template>
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 import { unref, ref, onMounted, computed, nextTick } from 'vue'; 3 import { unref, ref, onMounted, computed, nextTick } from 'vue';
4 import { ComponentPropsConfigType } from '../../../index.type'; 4 import { ComponentPropsConfigType } from '../../../index.type';
5 import { option } from './config'; 5 import { option } from './config';
6 - import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 + // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
7 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 7 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
8 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale'; 8 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
9 import { useReceiveMessage } from '../../../hook/useReceiveMessage'; 9 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
@@ -19,7 +19,7 @@ @@ -19,7 +19,7 @@
19 19
20 const chartInstance = ref<Nullable<ECharts>>(null); 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 const getDesign = computed(() => { 24 const getDesign = computed(() => {
25 const { option, persetOption } = props.config; 25 const { option, persetOption } = props.config;
@@ -276,11 +276,11 @@ @@ -276,11 +276,11 @@
276 const { forEachGroupMessage } = useReceiveMessage(); 276 const { forEachGroupMessage } = useReceiveMessage();
277 const { getNumberValue } = useReceiveValue(); 277 const { getNumberValue } = useReceiveValue();
278 const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => { 278 const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
279 - forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => { 279 + forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
280 series.value.forEach((item) => { 280 series.value.forEach((item) => {
281 if (item.id === deviceId && item.attribute === attribute) { 281 if (item.id === deviceId && item.attribute === attribute) {
282 item.value = getNumberValue(value); 282 item.value = getNumberValue(value);
283 - time.value = timespan; 283 + // time.value = timespan;
284 } 284 }
285 }); 285 });
286 }); 286 });
@@ -334,6 +334,6 @@ @@ -334,6 +334,6 @@
334 <main class="w-full h-full flex flex-col justify-center items-center"> 334 <main class="w-full h-full flex flex-col justify-center items-center">
335 <DeviceName :config="config" /> 335 <DeviceName :config="config" />
336 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 336 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
337 - <UpdateTime :time="time" /> 337 + <!-- <UpdateTime :time="time" /> -->
338 </main> 338 </main>
339 </template> 339 </template>
@@ -20,7 +20,8 @@ export enum GradientColor { @@ -20,7 +20,8 @@ export enum GradientColor {
20 export const option: PublicPresetOptions = { 20 export const option: PublicPresetOptions = {
21 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347', 21 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
22 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 22 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
23 - [ComponentConfigFieldEnum.UNIT]: '℃', 23 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
  24 + [ComponentConfigFieldEnum.UNIT]: 'kw',
24 }; 25 };
25 26
26 export default class Config extends PublicConfigClass implements CreateComponentType { 27 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -26,6 +26,12 @@ @@ -26,6 +26,12 @@
26 component: 'Checkbox', 26 component: 'Checkbox',
27 defaultValue: option.showDeviceName, 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 showActionButtonGroup: false, 36 showActionButtonGroup: false,
31 labelWidth: 120, 37 labelWidth: 120,
@@ -41,17 +47,19 @@ @@ -41,17 +47,19 @@
41 fontColor: item[ComponentConfigFieldEnum.FONT_COLOR], 47 fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
42 unit: item[ComponentConfigFieldEnum.UNIT], 48 unit: item[ComponentConfigFieldEnum.UNIT],
43 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME], 49 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
  50 + showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
44 } as ComponentInfo; 51 } as ComponentInfo;
45 }; 52 };
46 53
47 const setFormValues = (data: Recordable) => { 54 const setFormValues = (data: Recordable) => {
48 // return setFieldsValue(data); 55 // return setFieldsValue(data);
49 - const { unit, fontColor, showDeviceName } = data; 56 + const { unit, fontColor, showDeviceName, showTime } = data;
50 57
51 const value = { 58 const value = {
52 [ComponentConfigFieldEnum.UNIT]: unit, 59 [ComponentConfigFieldEnum.UNIT]: unit,
53 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor, 60 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
54 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName, 61 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
  62 + [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
55 }; 63 };
56 return setFieldsValue(value); 64 return setFieldsValue(value);
57 }; 65 };
@@ -29,8 +29,9 @@ @@ -29,8 +29,9 @@
29 pointerColor: presetPointerColor, 29 pointerColor: presetPointerColor,
30 instrumentPanelColor: presetInstrumentPanelColor, 30 instrumentPanelColor: presetInstrumentPanelColor,
31 gradientInfo: presetGradientInfo, 31 gradientInfo: presetGradientInfo,
  32 + showTime: persetShowTime,
32 } = persetOption || {}; 33 } = persetOption || {};
33 - const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo } = 34 + const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo, showTime } =
34 componentInfo || {}; 35 componentInfo || {};
35 return { 36 return {
36 unit: unit ?? presetUnit, 37 unit: unit ?? presetUnit,
@@ -39,6 +40,7 @@ @@ -39,6 +40,7 @@
39 pointerColor: pointerColor ?? presetPointerColor, 40 pointerColor: pointerColor ?? presetPointerColor,
40 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor, 41 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
41 gradientInfo: gradientInfo ?? presetGradientInfo, 42 gradientInfo: gradientInfo ?? presetGradientInfo,
  43 + showTime: showTime ?? persetShowTime,
42 }; 44 };
43 }); 45 });
44 46
@@ -189,12 +191,15 @@ @@ -189,12 +191,15 @@
189 </script> 191 </script>
190 192
191 <template> 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 <DeviceName :config="config" /> 198 <DeviceName :config="config" />
194 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 199 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
195 <div class="text-gray-500 text-xs text-center truncate">{{ 200 <div class="text-gray-500 text-xs text-center truncate">{{
196 - getDesign.attribute || '湿度' 201 + getDesign.attribute || '速度'
197 }}</div> 202 }}</div>
198 - <UpdateTime :time="time" /> 203 + <UpdateTime v-if="getDesign.showTime" :time="time" />
199 </main> 204 </main>
200 </template> 205 </template>
@@ -13,6 +13,7 @@ export const option: PublicPresetOptions = { @@ -13,6 +13,7 @@ export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.OPEN_COLOR]: '#30f230', 13 [ComponentConfigFieldEnum.OPEN_COLOR]: '#30f230',
14 [ComponentConfigFieldEnum.CLOSE_COLOR]: '#eeeeee', 14 [ComponentConfigFieldEnum.CLOSE_COLOR]: '#eeeeee',
15 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true, 15 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true,
  16 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
16 }; 17 };
17 18
18 export default class Config extends PublicConfigClass implements CreateComponentType { 19 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -25,10 +25,10 @@ @@ -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 component: 'Checkbox', 30 component: 'Checkbox',
31 - defaultValue: option.showDeviceName, 31 + defaultValue: option.showTime,
32 }, 32 },
33 ], 33 ],
34 showActionButtonGroup: false, 34 showActionButtonGroup: false,
@@ -24,15 +24,17 @@ @@ -24,15 +24,17 @@
24 openColor: persetOpenColor, 24 openColor: persetOpenColor,
25 closeColor: persetCloseColor, 25 closeColor: persetCloseColor,
26 showDeviceName: persetShowDeviceName, 26 showDeviceName: persetShowDeviceName,
  27 + showTime: persetShowTime,
27 } = persetOption || {}; 28 } = persetOption || {};
28 const { componentInfo, attribute, attributeName, attributeRename } = option; 29 const { componentInfo, attribute, attributeName, attributeRename } = option;
29 30
30 - const { openColor, closeColor, showDeviceName } = componentInfo || {}; 31 + const { openColor, closeColor, showDeviceName, showTime } = componentInfo || {};
31 return { 32 return {
32 openColor: openColor ?? persetOpenColor, 33 openColor: openColor ?? persetOpenColor,
33 closeColor: closeColor ?? persetCloseColor, 34 closeColor: closeColor ?? persetCloseColor,
34 showDeviceName: showDeviceName ?? persetShowDeviceName, 35 showDeviceName: showDeviceName ?? persetShowDeviceName,
35 attribute: attributeRename || attributeName || attribute, 36 attribute: attributeRename || attributeName || attribute,
  37 + showTime: showTime ?? persetShowTime,
36 }; 38 };
37 }); 39 });
38 40
@@ -60,10 +62,14 @@ @@ -60,10 +62,14 @@
60 </script> 62 </script>
61 63
62 <template> 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 <DeviceName :config="config" class="text-center" /> 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 <div 73 <div
68 :style="{ 74 :style="{
69 '--open-color': getDesign.openColor, 75 '--open-color': getDesign.openColor,
@@ -73,7 +79,7 @@ @@ -73,7 +79,7 @@
73 ></div> 79 ></div>
74 <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute }}</div> 80 <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute }}</div>
75 </div> 81 </div>
76 - <UpdateTime :time="time" /> 82 + <UpdateTime v-if="getDesign.showTime" :time="time" />
77 </main> 83 </main>
78 </template> 84 </template>
79 <style lang="less" scoped> 85 <style lang="less" scoped>
@@ -15,6 +15,7 @@ export const option: PublicPresetOptions = { @@ -15,6 +15,7 @@ export const option: PublicPresetOptions = {
15 [ComponentConfigFieldEnum.ICON_CLOSE]: 'dianyuandianya', 15 [ComponentConfigFieldEnum.ICON_CLOSE]: 'dianyuandianya',
16 [ComponentConfigFieldEnum.ICON_COLOR_CLOSE]: '#CCCCCC', 16 [ComponentConfigFieldEnum.ICON_COLOR_CLOSE]: '#CCCCCC',
17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  18 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
18 }; 19 };
19 20
20 export default class Config extends PublicConfigClass implements CreateComponentType { 21 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -52,6 +52,12 @@ @@ -52,6 +52,12 @@
52 component: 'Checkbox', 52 component: 'Checkbox',
53 defaultValue: option.showDeviceName, 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 showActionButtonGroup: false, 62 showActionButtonGroup: false,
57 labelWidth: 120, 63 labelWidth: 120,
@@ -25,11 +25,12 @@ @@ -25,11 +25,12 @@
25 fontColor: persetFontColor, 25 fontColor: persetFontColor,
26 iconClose: persetIconCLose, 26 iconClose: persetIconCLose,
27 iconColorClose: persetIconColorClose, 27 iconColorClose: persetIconColorClose,
  28 + showTime: persetShowTime,
28 } = persetOption; 29 } = persetOption;
29 30
30 const { componentInfo, attributeRename } = option; 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 componentInfo || {}; 34 componentInfo || {};
34 return { 35 return {
35 iconColor: iconColor || persetIconColor, 36 iconColor: iconColor || persetIconColor,
@@ -39,6 +40,7 @@ @@ -39,6 +40,7 @@
39 attribute: attributeRename || attributeName, 40 attribute: attributeRename || attributeName,
40 iconClose: iconClose || persetIconCLose, 41 iconClose: iconClose || persetIconCLose,
41 iconColorClose: iconColorClose || persetIconColorClose, 42 iconColorClose: iconColorClose || persetIconColorClose,
  43 + showTime: showTime ?? persetShowTime,
42 }; 44 };
43 }); 45 });
44 46
@@ -67,6 +69,6 @@ @@ -67,6 +69,6 @@
67 /> 69 />
68 <div class="text-gray-500 text-sm truncate m-2">{{ getDesign.attribute || '温度' }}</div> 70 <div class="text-gray-500 text-sm truncate m-2">{{ getDesign.attribute || '温度' }}</div>
69 </div> 71 </div>
70 - <UpdateTime :time="time" /> 72 + <UpdateTime v-show="getDesign.showTime" :time="time" />
71 </main> 73 </main>
72 </template> 74 </template>
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue'; 3 import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
4 import { ComponentPropsConfigType } from '../../../index.type'; 4 import { ComponentPropsConfigType } from '../../../index.type';
5 import { option } from './config'; 5 import { option } from './config';
6 - import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 + // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
7 import { useComponentScale } from '../../../hook/useComponentScale'; 7 import { useComponentScale } from '../../../hook/useComponentScale';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 import { useReceiveMessage } from '../../../hook/useReceiveMessage'; 9 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
@@ -180,6 +180,6 @@ @@ -180,6 +180,6 @@
180 <main class="w-full h-full flex flex-col justify-center items-center"> 180 <main class="w-full h-full flex flex-col justify-center items-center">
181 <DeviceName :config="config" /> 181 <DeviceName :config="config" />
182 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 182 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
183 - <UpdateTime :time="time" /> 183 + <!-- <UpdateTime :time="time" /> -->
184 </main> 184 </main>
185 </template> 185 </template>
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue'; 3 import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
4 import { ComponentPropsConfigType } from '../../../index.type'; 4 import { ComponentPropsConfigType } from '../../../index.type';
5 import { option } from './config'; 5 import { option } from './config';
6 - import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 + // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
7 import { useComponentScale } from '../../../hook/useComponentScale'; 7 import { useComponentScale } from '../../../hook/useComponentScale';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 import { useReceiveMessage } from '../../../hook/useReceiveMessage'; 9 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
@@ -181,6 +181,6 @@ @@ -181,6 +181,6 @@
181 <main class="w-full h-full flex flex-col justify-center items-center"> 181 <main class="w-full h-full flex flex-col justify-center items-center">
182 <DeviceName :config="config" /> 182 <DeviceName :config="config" />
183 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 183 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
184 - <UpdateTime :time="time" /> 184 + <!-- <UpdateTime :time="time" /> -->
185 </main> 185 </main>
186 </template> 186 </template>
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 import { unref, ref, onMounted, nextTick, toRaw, computed } from 'vue'; 3 import { unref, ref, onMounted, nextTick, toRaw, computed } from 'vue';
4 import { ComponentPropsConfigType } from '../../../index.type'; 4 import { ComponentPropsConfigType } from '../../../index.type';
5 import { option } from './config'; 5 import { option } from './config';
6 - import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 + // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
7 import { useComponentScale } from '../../../hook/useComponentScale'; 7 import { useComponentScale } from '../../../hook/useComponentScale';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 import { useIntervalFn } from '@vueuse/core'; 9 import { useIntervalFn } from '@vueuse/core';
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 const chartRefEl = ref<Nullable<HTMLDivElement>>(null); 21 const chartRefEl = ref<Nullable<HTMLDivElement>>(null);
22 22
23 const chartInstance = ref<Nullable<ECharts>>(null); 23 const chartInstance = ref<Nullable<ECharts>>(null);
24 - const time = ref<Nullable<number>>(null); 24 + // const time = ref<Nullable<number>>(null);
25 25
26 const updateInterval = ref<number>(1000); //默认每秒更新一次 26 const updateInterval = ref<number>(1000); //默认每秒更新一次
27 const maxDataPoints = ref<number>(10); //默认每秒显示10个数据点 27 const maxDataPoints = ref<number>(10); //默认每秒显示10个数据点
@@ -91,7 +91,6 @@ @@ -91,7 +91,6 @@
91 return { 91 return {
92 dataSource: dataSource?.map((item) => { 92 dataSource: dataSource?.map((item) => {
93 const { unit, showDeviceName, fontColor } = item.componentInfo || {}; 93 const { unit, showDeviceName, fontColor } = item.componentInfo || {};
94 - console.log(item, 'item');  
95 const { attribute, attributeRename, deviceId, attributeName, deviceName, deviceRename } = 94 const { attribute, attributeRename, deviceId, attributeName, deviceName, deviceRename } =
96 item; 95 item;
97 return { 96 return {
@@ -203,6 +202,6 @@ @@ -203,6 +202,6 @@
203 <main class="w-full h-full flex flex-col justify-center items-center"> 202 <main class="w-full h-full flex flex-col justify-center items-center">
204 <DeviceName :config="config" /> 203 <DeviceName :config="config" />
205 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 204 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
206 - <UpdateTime :time="time" /> 205 + <!-- <UpdateTime :time="time" /> -->
207 </main> 206 </main>
208 </template> 207 </template>
@@ -3,7 +3,6 @@ @@ -3,7 +3,6 @@
3 import { ComponentPropsConfigType } from '../../../index.type'; 3 import { ComponentPropsConfigType } from '../../../index.type';
4 import { Progress } from 'ant-design-vue'; 4 import { Progress } from 'ant-design-vue';
5 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 5 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
6 - import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';  
7 import { useReceiveMessage } from '../../../hook/useReceiveMessage'; 6 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
8 import { buildUUID } from '/@/utils/uuid'; 7 import { buildUUID } from '/@/utils/uuid';
9 import { useReceiveValue } from '../../../hook/useReceiveValue'; 8 import { useReceiveValue } from '../../../hook/useReceiveValue';
@@ -127,7 +126,7 @@ @@ -127,7 +126,7 @@
127 <Progress :strokeColor="item.backgroundColor" :percent="item.value" :showInfo="false" /> 126 <Progress :strokeColor="item.backgroundColor" :percent="item.value" :showInfo="false" />
128 </div> 127 </div>
129 </div> 128 </div>
130 - <UpdateTime :time="time" /> 129 + <!-- <UpdateTime :time="time" /> -->
131 </main> 130 </main>
132 </template> 131 </template>
133 <style lang="less" scoped> 132 <style lang="less" scoped>
@@ -3,7 +3,6 @@ @@ -3,7 +3,6 @@
3 import { option } from './config'; 3 import { option } from './config';
4 import { ref, unref } from 'vue'; 4 import { ref, unref } from 'vue';
5 import { SvgIcon } from '/@/components/Icon'; 5 import { SvgIcon } from '/@/components/Icon';
6 - import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';  
7 import { computed } from 'vue'; 6 import { computed } from 'vue';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 7 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 import { useReceiveMessage } from '../../../hook/useReceiveMessage'; 8 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
@@ -118,6 +117,6 @@ @@ -118,6 +117,6 @@
118 <span>{{ item.unit }} </span> 117 <span>{{ item.unit }} </span>
119 </h1> 118 </h1>
120 </div> 119 </div>
121 - <UpdateTime :time="time" /> 120 + <!-- <UpdateTime :time="time" /> -->
122 </main> 121 </main>
123 </template> 122 </template>
@@ -19,6 +19,7 @@ export enum ComponentConfigFieldEnum { @@ -19,6 +19,7 @@ export enum ComponentConfigFieldEnum {
19 SECOND_PHASE_VALUE = 'secondPhaseValue', 19 SECOND_PHASE_VALUE = 'secondPhaseValue',
20 THIRD_PHASE_VALUE = 'thirdPhaseValue', 20 THIRD_PHASE_VALUE = 'thirdPhaseValue',
21 SHOW_DEVICE_NAME = 'showDeviceName', 21 SHOW_DEVICE_NAME = 'showDeviceName',
  22 + SHOW_TIME = 'showTime',
22 GRADIENT_INFO = 'gradientInfo', 23 GRADIENT_INFO = 'gradientInfo',
23 24
24 FLOWMETER_CONFIG = 'flowmeterConfig', 25 FLOWMETER_CONFIG = 'flowmeterConfig',
@@ -19,7 +19,7 @@ export enum PackagesCategoryNameEnum { @@ -19,7 +19,7 @@ export enum PackagesCategoryNameEnum {
19 // PICTURE = '图片组件', 19 // PICTURE = '图片组件',
20 CONTROL = '控制组件', 20 CONTROL = '控制组件',
21 MAP = '地图组件', 21 MAP = '地图组件',
22 - FLOWMETER = '流量计', 22 + FLOWMETER = '计量计',
23 STATISTICS = '统计', 23 STATISTICS = '统计',
24 ALARM = '告警', 24 ALARM = '告警',
25 OTHER = '其他', 25 OTHER = '其他',
@@ -53,6 +53,7 @@ export interface ComponentInfo { @@ -53,6 +53,7 @@ export interface ComponentInfo {
53 icon: string; 53 icon: string;
54 iconColor: string; 54 iconColor: string;
55 showDeviceName: boolean; 55 showDeviceName: boolean;
  56 + showTime?: boolean;
56 gradientInfo: ComponentInfoGradientInfoType[]; 57 gradientInfo: ComponentInfoGradientInfoType[];
57 flowmeterConfig: FlowmeterConfigType; 58 flowmeterConfig: FlowmeterConfigType;
58 pointerColor?: string; 59 pointerColor?: string;
@@ -85,7 +85,7 @@ @@ -85,7 +85,7 @@
85 class="mt-4" 85 class="mt-4"
86 v-for="temp in item.items" 86 v-for="temp in item.items"
87 :key="temp.key" 87 :key="temp.key"
88 - @click="handleSelected(temp)" 88 + @click.capture="handleSelected(temp)"
89 :class="temp.key === props.checked?.componentKey ? '!border-2 !border-blue-500' : ''" 89 :class="temp.key === props.checked?.componentKey ? '!border-2 !border-blue-500' : ''"
90 > 90 >
91 <component :is="componentMap.get(temp.key)" v-bind="getBindConfig(temp.key)" /> 91 <component :is="componentMap.get(temp.key)" v-bind="getBindConfig(temp.key)" />