简柏林 / thingskit-front · Commits

Commit aac80c35cdc770d07e0a45b97e46e1e4905cf437

Authored by ww
1 parent c9ca4c2e

wip: production page model of matter tsl

Inline Side-by-side
Showing 4 changed files with 51 additions and 648 deletions
... ... @@ -27,10 +27,6 @@
27 27 const isUpdate = ref(false);
28 28
29 29 const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
30   - // const record = await getModelTsl({
31   - // functionType: FunctionType.PROPERTIES,
32   - // deviceProfileId: props.record.id,
33   - // });
34 30 setModalProps({ confirmLoading: true });
35 31 isUpdate.value = data.isUpdate;
36 32 setModalProps({ confirmLoading: false });
... ...
... ... @@ -7,25 +7,31 @@
7 7 </TypographyParagraph>
8 8 </Typography>
9 9 </div>
10   - <div class="flex justify-between items-center">
11   - <div>模型内容</div>
12   - <div>
13   - <Button @click="handlePremitter">
14   - <template #icon>
15   - <SortAscendingOutlined />
16   - </template>
17   - 格式化
18   - </Button>
19   - <Button class="ml-2" @click="handleCopy">
20   - <template #icon>
21   - <CopyOutlined />
22   - </template>
23   - copy
24   - </Button>
25   - </div>
  10 + <div>
  11 + <Tabs type="card" v-model:active-key="activeKey" @change="handleSwitchTsl">
  12 + <Tabs.TabPane :key="FunctionType.PROPERTIES" tab="属性" />
  13 + <Tabs.TabPane :key="FunctionType.SERVICE" tab="服务" />
  14 + <Tabs.TabPane :key="FunctionType.EVENTS" tab="事件" />
  15 + <template #tabBarExtraContent>
  16 + <Button @click="handlePremitter">
  17 + <template #icon>
  18 + <SortAscendingOutlined />
  19 + </template>
  20 + 格式化
  21 + </Button>
  22 + <Button class="ml-2" @click="handleCopy">
  23 + <template #icon>
  24 + <CopyOutlined />
  25 + </template>
  26 + copy
  27 + </Button>
  28 + </template>
  29 + </Tabs>
26 30 </div>
27   - <div class="mt-4">
28   - <div id="jsoneditor" ref="jsoneditorRef"></div>
  31 + <div>
  32 + <Spin :spinning="loading">
  33 + <div id="jsoneditor" ref="jsoneditorRef"></div>
  34 + </Spin>
29 35 </div>
30 36 </div>
31 37 </template>
... ... @@ -36,19 +42,29 @@
36 42 import { useMessage } from '/@/hooks/web/useMessage';
37 43 import jsoneditor from 'jsoneditor';
38 44 import 'jsoneditor/dist/jsoneditor.min.css';
39   - import { Button, Typography, TypographyParagraph } from 'ant-design-vue';
40   - import { defaultTslContent } from './config';
  45 + import { Button, Typography, TypographyParagraph, Tabs, Spin } from 'ant-design-vue';
  46 + import { FunctionType } from './config';
41 47 import useCommon from '../hook/useCommon';
  48 + import { DeviceRecord } from '/@/api/device/model/deviceModel';
  49 + import { getModelTsl } from '/@/api/device/modelOfMatter';
  50 +
  51 + const props = defineProps<{
  52 + record: DeviceRecord;
  53 + }>();
  54 +
  55 + const loading = ref(false);
42 56
43 57 const { createMessage } = useMessage();
44 58
45 59 const { useBlockContent } = useCommon();
46 60
47   - const jsonValue = ref(defaultTslContent);
  61 + const jsonValue = ref();
48 62
49 63 const jsonInstance = ref();
50 64
51   - const jsoneditorRef = ref();
  65 + const jsoneditorRef = ref<Recordable>();
  66 +
  67 + const activeKey = ref(FunctionType.PROPERTIES);
52 68
53 69 onMounted(() => {
54 70 nextTick(() => {
... ... @@ -89,13 +105,25 @@
89 105 };
90 106
91 107 const resetFormData = () => {
92   - unref(jsonInstance).set(defaultTslContent);
  108 + unref(jsonInstance).set();
93 109 };
94 110
95 111 const handlePremitter = () => {
96 112 const value = unref(jsonInstance).get();
97 113 return unref(jsonInstance).set(value);
98 114 };
  115 +
  116 + const handleSwitchTsl = async (functionType: FunctionType) => {
  117 + try {
  118 + loading.value = true;
  119 + const record = await getModelTsl({ deviceProfileId: props.record.id, functionType });
  120 + console.log(record);
  121 + } catch (error) {
  122 + } finally {
  123 + loading.value = false;
  124 + }
  125 + };
  126 +
99 127 defineExpose({
100 128 getFormData,
101 129 resetFormData,
... ...
1   -import { buildUUID } from '/@/utils/uuid';
2   -
3   -//模拟的阿里云（属性、服务、事件）服务端格式
4   -export const mockData = {
5   - _ppk: {},
6   - events: [
7   - {
8   - createTs: 1668151471327,
9   - custom: true,
10   - eventName: 'SDK运行状态',
11   - eventType: 'INFO_EVENT_TYPE',
12   - identifier: 'ContentSdkStatusEvent',
13   - outputData: [
14   - {
15   - id: buildUUID(),
16   -
17   - custom: true,
18   - dataSpecs: {
19   - dataType: 'INT',
20   - max: '1024',
21   - min: '-1024',
22   - precise: 0,
23   - step: '1',
24   - unit: '',
25   - unitName: '无',
26   - },
27   - dataType: 'INT',
28   - direction: 'PARAM_OUTPUT',
29   - identifier: 'Status',
30   - name: '状态类型值',
31   - paraOrder: 0,
32   - },
33   - {
34   - id: buildUUID(),
35   -
36   - custom: true,
37   - dataSpecs: {
38   - dataType: 'TEXT',
39   - length: 1024,
40   - },
41   - dataType: 'TEXT',
42   - direction: 'PARAM_OUTPUT',
43   - identifier: 'Message',
44   - name: '消息内容',
45   - paraOrder: 1,
46   - },
47   - {
48   - id: buildUUID(),
49   -
50   - custom: true,
51   - dataSpecsList: [
52   - {
53   - id: buildUUID(),
54   -
55   - childDataType: 'INT',
56   - childName: '测试结构体回显1',
57   - childSpecsDTO: {
58   - dataType: 'INT',
59   - max: '22',
60   - min: '11',
61   - step: '3',
62   - },
63   - custom: true,
64   - dataSpecs: {
65   - dataType: 'INT',
66   - max: '22',
67   - min: '11',
68   - step: '3',
69   - },
70   - dataType: 'STRUCT',
71   - identifier: '1',
72   - isStd: 0,
73   - name: '测试结构体回显1',
74   - },
75   - {
76   - id: buildUUID(),
77   -
78   - childDataType: 'BOOL',
79   - childEnumSpecsDTO: [
80   - {
81   - dataType: 'BOOL',
82   - name: 'ffg',
83   - value: 0,
84   - },
85   - {
86   - dataType: 'BOOL',
87   - name: 'ggg',
88   - value: 1,
89   - },
90   - ],
91   - childName: '测试结构体回显2',
92   - custom: true,
93   - dataSpecsList: [
94   - {
95   - dataType: 'BOOL',
96   - name: 'ffg',
97   - value: 0,
98   - },
99   - {
100   - dataType: 'BOOL',
101   - name: 'ggg',
102   - value: 1,
103   - },
104   - ],
105   - dataType: 'STRUCT',
106   - identifier: '3',
107   - isStd: 0,
108   - name: '测试结构体回显2',
109   - },
110   - {
111   - id: buildUUID(),
112   -
113   - childDataType: 'TEXT',
114   - childName: '测试结构体回显3',
115   - childSpecsDTO: {
116   - dataType: 'TEXT',
117   - length: 10240,
118   - },
119   - custom: true,
120   - dataSpecs: {
121   - dataType: 'TEXT',
122   - length: 10240,
123   - },
124   - dataType: 'STRUCT',
125   - identifier: '33',
126   - isStd: 0,
127   - name: '测试结构体回显3',
128   - },
129   - {
130   - id: buildUUID(),
131   -
132   - childDataType: 'DOUBLE',
133   - childName: '测试结构体回显4',
134   - childSpecsDTO: {
135   - dataType: 'DOUBLE',
136   - max: '44.0',
137   - min: '33.0',
138   - step: '5.0',
139   - unit: 'gear',
140   - unitName: '档',
141   - },
142   - custom: true,
143   - dataSpecs: {
144   - dataType: 'DOUBLE',
145   - max: '44.0',
146   - min: '33.0',
147   - step: '5.0',
148   - unit: 'gear',
149   - unitName: '档',
150   - },
151   - dataType: 'STRUCT',
152   - identifier: '4',
153   - isStd: 0,
154   - name: '测试结构体回显4',
155   - },
156   - ],
157   - dataType: 'STRUCT',
158   - direction: 'PARAM_OUTPUT',
159   - identifier: '1',
160   - name: '测试结构体回显',
161   - paraOrder: 2,
162   - },
163   - {
164   - id: buildUUID(),
165   -
166   - custom: true,
167   - dataSpecsList: [
168   - {
169   - dataType: 'BOOL',
170   - name: 'er',
171   - value: 0,
172   - },
173   - {
174   - dataType: 'BOOL',
175   - name: 'dd',
176   - value: 1,
177   - },
178   - ],
179   - dataType: 'BOOL',
180   - direction: 'PARAM_OUTPUT',
181   - identifier: '2212',
182   - name: 'bool类型',
183   - paraOrder: 3,
184   - },
185   - ],
186   - productKey: 'hsrnXEfGFDv',
187   - required: false,
188   - },
189   - ],
190   - productKey: 'hsrnXEfGFDv',
191   - properties: [
192   - {
193   - createTs: 1668152010679,
194   - custom: true,
195   - customFlag: true,
196   - dataSpecsList: [
197   - {
198   - id: buildUUID(),
199   -
200   - childDataType: 'TEXT',
201   - childName: '测试化学需氧量text类型',
202   - childSpecsDTO: {
203   - dataType: 'TEXT',
204   - length: 10240,
205   - },
206   - custom: true,
207   - dataSpecs: {
208   - dataType: 'TEXT',
209   - length: 10240,
210   - },
211   - dataType: 'STRUCT',
212   - identifier: 'text',
213   - isStd: 0,
214   - name: '测试化学需氧量text类型',
215   - },
216   - {
217   - id: buildUUID(),
218   -
219   - childDataType: 'INT',
220   - childName: '测试化学需氧量int类型',
221   - childSpecsDTO: {
222   - dataType: 'INT',
223   - max: '22',
224   - min: '11',
225   - step: '2',
226   - unit: 'mm/hour',
227   - unitName: '降雨量',
228   - },
229   - custom: true,
230   - dataSpecs: {
231   - dataType: 'INT',
232   - max: '22',
233   - min: '11',
234   - step: '2',
235   - unit: 'mm/hour',
236   - unitName: '降雨量',
237   - },
238   - dataType: 'STRUCT',
239   - identifier: 'ibt',
240   - isStd: 0,
241   - name: '测试化学需氧量int类型',
242   - },
243   - {
244   - id: buildUUID(),
245   -
246   - childDataType: 'BOOL',
247   - childEnumSpecsDTO: [
248   - {
249   - dataType: 'BOOL',
250   - name: '需要',
251   - value: 0,
252   - },
253   - {
254   - dataType: 'BOOL',
255   - name: '不需要',
256   - value: 1,
257   - },
258   - ],
259   - childName: '测试化学需氧量bool类型',
260   - custom: true,
261   - dataSpecsList: [
262   - {
263   - dataType: 'BOOL',
264   - name: '需要',
265   - value: 0,
266   - },
267   - {
268   - dataType: 'BOOL',
269   - name: '不需要',
270   - value: 1,
271   - },
272   - ],
273   - dataType: 'STRUCT',
274   - identifier: 'bol',
275   - isStd: 0,
276   - name: '测试化学需氧量bool类型',
277   - },
278   - ],
279   - dataType: 'STRUCT',
280   - description:
281   - '化学需氧量COD（Chemical Oxygen Demand）是以化学方法测量水样中需要被氧化的还原性物质的量',
282   - identifier: 'COD',
283   - name: '化学需氧量',
284   - productKey: 'hsrnXEfGFDv',
285   - required: false,
286   - rwFlag: 'READ_WRITE',
287   - std: false,
288   - },
289   - ],
290   - services: [
291   - {
292   - callType: 'SYNC',
293   - createTs: 1668148397946,
294   - custom: true,
295   - description: '删除模型1',
296   - identifier: 'DeleteModel',
297   - inputParams: [
298   - {
299   - id: buildUUID(),
300   - custom: true,
301   - dataSpecs: {
302   - dataType: 'TEXT',
303   - length: 128,
304   - },
305   - dataType: 'TEXT',
306   - direction: 'PARAM_INPUT',
307   - identifier: 'AlgorithmID',
308   - name: 'text类型',
309   - paraOrder: 0,
310   - },
311   - {
312   - id: buildUUID(),
313   - custom: true,
314   - dataSpecsList: [
315   - {
316   - id: buildUUID(),
317   -
318   - childDataType: 'INT',
319   - childName: '结构体里面1',
320   - childSpecsDTO: {
321   - dataType: 'INT',
322   - max: '22',
323   - min: '11',
324   - step: '3',
325   - unit: 'W/㎡',
326   - unitName: '太阳总辐射',
327   - },
328   - custom: true,
329   - dataSpecs: {
330   - dataType: 'INT',
331   - max: '22',
332   - min: '11',
333   - step: '3',
334   - unit: 'W/㎡',
335   - unitName: '太阳总辐射',
336   - },
337   - dataType: 'STRUCT',
338   - identifier: '1',
339   - isStd: 0,
340   - name: '结构体里面1',
341   - },
342   - {
343   - id: buildUUID(),
344   -
345   - childDataType: 'BOOL',
346   - childEnumSpecsDTO: [
347   - {
348   - dataType: 'BOOL',
349   - name: '关',
350   - value: 0,
351   - },
352   - {
353   - dataType: 'BOOL',
354   - name: '开',
355   - value: 1,
356   - },
357   - ],
358   - childName: '结构体里面2',
359   - custom: true,
360   - dataSpecsList: [
361   - {
362   - dataType: 'BOOL',
363   - name: '关',
364   - value: 0,
365   - },
366   - {
367   - dataType: 'BOOL',
368   - name: '开',
369   - value: 1,
370   - },
371   - ],
372   - dataType: 'STRUCT',
373   - identifier: '2',
374   - isStd: 0,
375   - name: '结构体里面2',
376   - },
377   - {
378   - id: buildUUID(),
379   -
380   - childDataType: 'TEXT',
381   - childName: '结构体里面3',
382   - childSpecsDTO: {
383   - dataType: 'TEXT',
384   - length: 10240,
385   - },
386   - custom: true,
387   - dataSpecs: {
388   - dataType: 'TEXT',
389   - length: 10240,
390   - },
391   - dataType: 'STRUCT',
392   - identifier: '3',
393   - isStd: 0,
394   - name: '结构体里面3',
395   - },
396   - ],
397   - dataType: 'STRUCT',
398   - direction: 'PARAM_INPUT',
399   - identifier: '1',
400   - name: '结构体里面数据',
401   - paraOrder: 1,
402   - },
403   - {
404   - id: buildUUID(),
405   -
406   - custom: true,
407   - dataSpecsList: [
408   - {
409   - dataType: 'BOOL',
410   - name: '开启',
411   - value: 0,
412   - },
413   - {
414   - dataType: 'BOOL',
415   - name: '战斗',
416   - value: 1,
417   - },
418   - ],
419   - dataType: 'BOOL',
420   - direction: 'PARAM_INPUT',
421   - identifier: 'bool',
422   - name: '布尔类型',
423   - paraOrder: 2,
424   - },
425   - {
426   - id: buildUUID(),
427   -
428   - custom: true,
429   - dataSpecs: {
430   - dataType: 'INT',
431   - max: '22',
432   - min: '11',
433   - step: '4',
434   - unit: 'dS/m',
435   - unitName: '土壤EC值',
436   - },
437   - dataType: 'INT',
438   - direction: 'PARAM_INPUT',
439   - identifier: 'int',
440   - name: 'int类型',
441   - paraOrder: 3,
442   - },
443   - ],
444   - outputParams: [
445   - {
446   - id: buildUUID(),
447   -
448   - custom: true,
449   - dataSpecs: {
450   - dataType: 'TEXT',
451   - length: 10240,
452   - },
453   - dataType: 'TEXT',
454   - direction: 'PARAM_OUTPUT',
455   - identifier: '2',
456   - name: '测试输出回显text类型',
457   - paraOrder: 0,
458   - },
459   - {
460   - id: buildUUID(),
461   -
462   - custom: true,
463   - dataSpecs: {
464   - dataType: 'INT',
465   - max: '22',
466   - min: '11',
467   - step: '3',
468   - unit: 'W/㎡',
469   - unitName: '太阳总辐射',
470   - },
471   - dataType: 'INT',
472   - direction: 'PARAM_OUTPUT',
473   - identifier: 'int',
474   - name: '测试输出回显int类型',
475   - paraOrder: 1,
476   - },
477   - {
478   - id: buildUUID(),
479   -
480   - custom: true,
481   - dataSpecsList: [
482   - {
483   - dataType: 'BOOL',
484   - name: 'd',
485   - value: 0,
486   - },
487   - {
488   - dataType: 'BOOL',
489   - name: 'ff',
490   - value: 1,
491   - },
492   - ],
493   - dataType: 'BOOL',
494   - direction: 'PARAM_OUTPUT',
495   - identifier: 'bol',
496   - name: '测试输出回显bool类型',
497   - paraOrder: 2,
498   - },
499   - {
500   - id: buildUUID(),
501   -
502   - custom: true,
503   - dataSpecsList: [
504   - {
505   - id: buildUUID(),
506   -
507   - childDataType: 'INT',
508   - childName: '测试输出回显结构体类型1',
509   - childSpecsDTO: {
510   - dataType: 'INT',
511   - max: '22',
512   - min: '11',
513   - step: '4',
514   - unit: 'mm/hour',
515   - unitName: '降雨量',
516   - },
517   - custom: true,
518   - dataSpecs: {
519   - dataType: 'INT',
520   - max: '22',
521   - min: '11',
522   - step: '4',
523   - unit: 'mm/hour',
524   - unitName: '降雨量',
525   - },
526   - dataType: 'STRUCT',
527   - identifier: '1',
528   - isStd: 0,
529   - name: '测试输出回显结构体类型1',
530   - },
531   - {
532   - id: buildUUID(),
533   -
534   - childDataType: 'BOOL',
535   - childEnumSpecsDTO: [
536   - {
537   - dataType: 'BOOL',
538   - name: 'ff',
539   - value: 0,
540   - },
541   - {
542   - dataType: 'BOOL',
543   - name: 'gg',
544   - value: 1,
545   - },
546   - ],
547   - childName: '测试输出回显结构体类型2',
548   - custom: true,
549   - dataSpecsList: [
550   - {
551   - dataType: 'BOOL',
552   - name: 'ff',
553   - value: 0,
554   - },
555   - {
556   - dataType: 'BOOL',
557   - name: 'gg',
558   - value: 1,
559   - },
560   - ],
561   - dataType: 'STRUCT',
562   - identifier: '3',
563   - isStd: 0,
564   - name: '测试输出回显结构体类型2',
565   - },
566   - {
567   - id: buildUUID(),
568   -
569   - childDataType: 'TEXT',
570   - childName: '测试输出回显结构体类型3',
571   - childSpecsDTO: {
572   - dataType: 'TEXT',
573   - length: 10240,
574   - },
575   - custom: true,
576   - dataSpecs: {
577   - dataType: 'TEXT',
578   - length: 10240,
579   - },
580   - dataType: 'STRUCT',
581   - identifier: '12',
582   - isStd: 0,
583   - name: '测试输出回显结构体类型3',
584   - },
585   - ],
586   - dataType: 'STRUCT',
587   - direction: 'PARAM_OUTPUT',
588   - identifier: 'struct',
589   - name: '测试输出回显结构体类型',
590   - paraOrder: 3,
591   - },
592   - ],
593   - productKey: 'hsrnXEfGFDv',
594   - required: false,
595   - serviceName: '删除模型1',
596   - },
597   - ],
598   -};
... ... @@ -65,29 +65,6 @@ const isBool = (type: string) => {
65 65 return type === DateTypeEnum.IS_BOOL;
66 66 };
67 67
68   -export const defaultTslContent = {
69   - schema: 'https://iotx-tsl.oss-ap-southeast-1.aliyuncs.com/schema.json',
70   - profile: {
71   - version: '1.5',
72   - productKey: 'glzlnU7azMO',
73   - },
74   - properties: [
75   - {
76   - identifier: 'LightStatus',
77   - name: '工作状态',
78   - accessMode: 'rw',
79   - required: true,
80   - dataType: {
81   - type: 'bool',
82   - specs: {
83   - '0': '关闭',
84   - '1': '打开',
85   - },
86   - },
87   - },
88   - ],
89   -};
90   -
91 68 export const serviceSchemas = (tcpDeviceFlag: boolean): FormSchema[] => {
92 69 return [
93 70 {
... ...