Skip to content

Commit 67fb5ec

Browse files
YunaiVgitee-org
YunaiV
authored and
gitee-org
committed
!705 【代码优化】IoT: 物模型
Merge pull request !705 from puhui999/feature/iot
2 parents f7b97d3 + 0afa0bb commit 67fb5ec

File tree

11 files changed

+132
-156
lines changed

11 files changed

+132
-156
lines changed

‎src/utils/index.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { toNumber } from 'lodash-es'
1+
import {toNumber} from 'lodash-es'
22

33
/**
44
*
@@ -118,7 +118,7 @@ export function toAnyString() {
118118

119119
/**
120120
* 生成指定长度的随机字符串
121-
*
121+
*
122122
* @param length 字符串长度
123123
*/
124124
export function generateRandomStr(length: number): string {
@@ -459,7 +459,7 @@ export function jsonParse(str: string) {
459459
try {
460460
return JSON.parse(str)
461461
} catch (e) {
462-
console.error(`str[${str}] 不是一个 JSON 字符串`)
462+
// console.error(`str[${str}] 不是一个 JSON 字符串`)
463463
return ''
464464
}
465465
}

‎src/views/iot/device/device/detail/DeviceDetailsSimulator.vue

Lines changed: 9 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<el-tabs v-model="activeTab" type="border-card">
88
<!-- 上行指令调试 -->
99
<el-tab-pane label="上行指令调试" name="up">
10-
<el-tabs v-model="subTab" v-if="activeTab === 'up'">
10+
<el-tabs v-if="activeTab === 'up'" v-model="subTab">
1111
<!-- 属性上报 -->
1212
<el-tab-pane label="属性上报" name="property">
1313
<ContentWrap>
@@ -29,78 +29,19 @@
2929
</el-table-column>
3030
<el-table-column align="left" label="数据定义" prop="identifier">
3131
<template #default="{ row }">
32-
<!-- 属性 -->
33-
<template v-if="row.type === ThingModelType.PROPERTY">
34-
<!-- 非列表型：数值 -->
35-
<div
36-
v-if="
37-
[
38-
DataSpecsDataType.INT,
39-
DataSpecsDataType.DOUBLE,
40-
DataSpecsDataType.FLOAT
41-
].includes(row.property.dataType)
42-
"
43-
>
44-
取值范围：
45-
{{ `${row.property.dataSpecs.min}~${row.property.dataSpecs.max}` }}
46-
</div>
47-
<!-- 非列表型：文本 -->
48-
<div v-if="DataSpecsDataType.TEXT === row.property.dataType">
49-
数据长度：{{ row.property.dataSpecs.length }}
50-
</div>
51-
<!-- 列表型: 数组、结构、时间（特殊） -->
52-
<div
53-
v-if="
54-
[
55-
DataSpecsDataType.ARRAY,
56-
DataSpecsDataType.STRUCT,
57-
DataSpecsDataType.DATE
58-
].includes(row.property.dataType)
59-
"
60-
>
61-
-
62-
</div>
63-
<!-- 列表型: 布尔值、枚举 -->
64-
<div
65-
v-if="
66-
[DataSpecsDataType.BOOL, DataSpecsDataType.ENUM].includes(
67-
row.property.dataType
68-
)
69-
"
70-
>
71-
<div>
72-
{{
73-
DataSpecsDataType.BOOL === row.property.dataType
74-
? '布尔值'
75-
: '枚举值'
76-
}}：
77-
</div>
78-
<div v-for="item in row.property.dataSpecsList" :key="item.value">
79-
{{ `${item.name}-${item.value}` }}
80-
</div>
81-
</div>
82-
<!-- TODO @super：要不要兜底下，没翻译的类型，直接展示 json？ -->
83-
</template>
84-
<!-- 服务 -->
85-
<div v-if="row.type === ThingModelType.SERVICE">
86-
调用方式：{{ getCallTypeByValue(row.service.callType) }}
87-
</div>
88-
<!-- 事件 -->
89-
<div v-if="row.type === ThingModelType.EVENT">
90-
事件类型：{{ getEventTypeByValue(row.event.type) }}
91-
</div>
32+
<DataDefinition :data="row" />
9233
</template>
9334
</el-table-column>
9435
<!-- TODO @super：可以右侧 fixed -->
95-
<el-table-column label="值" align="center" width="80">
36+
<el-table-column align="center" label="值" width="80">
9637
<template #default="scope">
9738
<el-input v-model="scope.row.simulateValue" class="!w-60px" />
9839
</template>
9940
</el-table-column>
10041
</el-table>
10142
<!-- TODO @super：发送按钮，可以放在右侧哈。因为我们的 simulateValue 就在最右侧 -->
10243
<div class="mt-10px">
103-
<el-button type="primary" @click="handlePropertyReport"> 发送 </el-button>
44+
<el-button type="primary" @click="handlePropertyReport"> 发送</el-button>
10445
</div>
10546
</ContentWrap>
10647
</el-tab-pane>
@@ -151,7 +92,7 @@
15192
<!-- 下行指令调试 -->
15293
<!-- TODO @super：待实现 -->
15394
<el-tab-pane label="下行指令调试" name="down">
154-
<el-tabs v-model="subTab" v-if="activeTab === 'down'">
95+
<el-tabs v-if="activeTab === 'down'" v-model="subTab">
15596
<!-- 属性调试 -->
15697
<el-tab-pane label="属性调试" name="propertyDebug">
15798
<ContentWrap>
@@ -201,18 +142,13 @@
201142
</ContentWrap>
202143
</template>
203144

204-
<script setup lang="ts">
145+
<script lang="ts" setup>
205146
import { ProductVO } from '@/api/iot/product/product'
206-
import { ThingModelApi, SimulatorData } from '@/api/iot/thingmodel'
147+
import { SimulatorData, ThingModelApi } from '@/api/iot/thingmodel'
207148
import { DeviceApi, DeviceStateEnum, DeviceVO } from '@/api/iot/device/device'
208149
import DeviceDetailsLog from './DeviceDetailsLog.vue'
209-
import {
210-
DataSpecsDataType,
211-
getCallTypeByValue,
212-
getDataTypeOptionsLabel,
213-
getEventTypeByValue,
214-
ThingModelType
215-
} from '@/views/iot/thingmodel/config'
150+
import { getDataTypeOptionsLabel } from '@/views/iot/thingmodel/config'
151+
import { DataDefinition } from '@/views/iot/thingmodel/components'
216152
217153
const props = defineProps<{
218154
product: ProductVO

‎src/views/iot/thingmodel/ThingModelEvent.vue

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
label="事件类型"
66
prop="event.type"
77
>
8-
<!-- TODO @puhui999：默认选中，INFO 信息 -->
98
<el-radio-group v-model="thingModelEvent.type">
109
<el-radio :value="ThingModelEventType.INFO.value">
1110
{{ ThingModelEventType.INFO.label }}
@@ -30,14 +29,22 @@
3029
import ThingModelInputOutputParam from './ThingModelInputOutputParam.vue'
3130
import { useVModel } from '@vueuse/core'
3231
import { ThingModelEvent } from '@/api/iot/thingmodel'
33-
import { ThingModelParamDirection, ThingModelEventType } from './config'
32+
import { ThingModelEventType, ThingModelParamDirection } from './config'
33+
import { isEmpty } from '@/utils/is'
3434
3535
/** IoT 物模型事件 */
3636
defineOptions({ name: 'ThingModelEvent' })
3737
3838
const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>()
3939
const emits = defineEmits(['update:modelValue'])
4040
const thingModelEvent = useVModel(props, 'modelValue', emits) as Ref<ThingModelEvent>
41+
42+
// 默认选中，INFO 信息
43+
watch(
44+
() => thingModelEvent.value.type,
45+
(val: string) => isEmpty(val) && (thingModelEvent.value.type = ThingModelEventType.INFO.value),
46+
{ immediate: true }
47+
)
4148
</script>
4249

4350
<style lang="scss" scoped>

‎src/views/iot/thingmodel/ThingModelProperty.vue

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<el-option
1111
v-for="option in getDataTypeOptions"
1212
:key="option.value"
13-
:label="option.label"
13+
:label="`${option.value}(${option.label})`"
1414
:value="option.value"
1515
/>
1616
</el-select>
@@ -76,7 +76,6 @@
7676
v-if="property.dataType === DataSpecsDataType.STRUCT"
7777
v-model="property.dataSpecsList"
7878
/>
79-
<!-- TODO @puhui999：默认选中第一个 -->
8079
<el-form-item v-if="!isStructDataSpecs && !isParams" label="读写类型" prop="property.accessMode">
8180
<el-radio-group v-model="property.accessMode">
8281
<el-radio :label="ThingModelAccessMode.READ_WRITE.value">
@@ -104,6 +103,7 @@ import {
104103
ThingModelStructDataSpecs
105104
} from './dataSpecs'
106105
import { ThingModelProperty } from '@/api/iot/thingmodel'
106+
import { isEmpty } from '@/utils/is'
107107
108108
/** IoT 物模型属性 */
109109
defineOptions({ name: 'ThingModelProperty' })
@@ -146,6 +146,18 @@ const handleChange = (dataType: any) => {
146146
break
147147
}
148148
}
149+
150+
// 默认选中读写
151+
watch(
152+
() => property.value.accessMode,
153+
(val: string) => {
154+
if (props.isStructDataSpecs || props.isParams) {
155+
return
156+
}
157+
isEmpty(val) && (property.value.accessMode = ThingModelAccessMode.READ_WRITE.value)
158+
},
159+
{ immediate: true }
160+
)
149161
</script>
150162

151163
<style lang="scss" scoped>

‎src/views/iot/thingmodel/ThingModelService.vue

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
label="调用方式"
66
prop="service.callType"
77
>
8-
<!-- TODO @puhui999：默认选中，ASYNC 异步 -->
98
<el-radio-group v-model="service.callType">
109
<el-radio :value="ThingModelServiceCallType.ASYNC.value">
1110
{{ ThingModelServiceCallType.ASYNC.label }}
@@ -34,13 +33,21 @@ import ThingModelInputOutputParam from './ThingModelInputOutputParam.vue'
3433
import { useVModel } from '@vueuse/core'
3534
import { ThingModelService } from '@/api/iot/thingmodel'
3635
import { ThingModelParamDirection, ThingModelServiceCallType } from './config'
36+
import { isEmpty } from '@/utils/is'
3737
3838
/** IoT 物模型服务 */
3939
defineOptions({ name: 'ThingModelService' })
4040
4141
const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>()
4242
const emits = defineEmits(['update:modelValue'])
4343
const service = useVModel(props, 'modelValue', emits) as Ref<ThingModelService>
44+
45+
// 默认选中，ASYNC 异步
46+
watch(
47+
() => service.value.callType,
48+
(val: string) => isEmpty(val) && (service.value.callType = ThingModelServiceCallType.ASYNC.value),
49+
{ immediate: true }
50+
)
4451
</script>
4552

4653
<style lang="scss" scoped>

‎src/views/iot/thingmodel/components/DataDefinition.vue

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<!-- 属性 -->
3+
<template v-if="data.type === ThingModelType.PROPERTY">
4+
<!-- 非列表型：数值 -->
5+
<div
6+
v-if="
7+
[DataSpecsDataType.INT, DataSpecsDataType.DOUBLE, DataSpecsDataType.FLOAT].includes(
8+
data.property.dataType
9+
)
10+
"
11+
>
12+
取值范围：{{ `${data.property.dataSpecs.min}~${data.property.dataSpecs.max}` }}
13+
</div>
14+
<!-- 非列表型：文本 -->
15+
<div v-if="DataSpecsDataType.TEXT === data.property.dataType">
16+
数据长度：{{ data.property.dataSpecs.length }}
17+
</div>
18+
<!-- 列表型: 数组、结构、时间（特殊） -->
19+
<div
20+
v-if="
21+
[DataSpecsDataType.ARRAY, DataSpecsDataType.STRUCT, DataSpecsDataType.DATE].includes(
22+
data.property.dataType
23+
)
24+
"
25+
>
26+
-
27+
</div>
28+
<!-- 列表型: 布尔值、枚举 -->
29+
<div v-if="[DataSpecsDataType.BOOL, DataSpecsDataType.ENUM].includes(data.property.dataType)">
30+
<div> {{ DataSpecsDataType.BOOL === data.property.dataType ? '布尔值' : '枚举值' }}：</div>
31+
<div v-for="item in data.property.dataSpecsList" :key="item.value">
32+
{{ `${item.name}-${item.value}` }}
33+
</div>
34+
</div>
35+
</template>
36+
<!-- 服务 -->
37+
<div v-if="data.type === ThingModelType.SERVICE">
38+
调用方式：{{ getCallTypeByValue(data.service!.callType) }}
39+
</div>
40+
<!-- 事件 -->
41+
<div v-if="data.type === ThingModelType.EVENT">
42+
事件类型：{{ getEventTypeByValue(data.event!.type) }}
43+
</div>
44+
</template>
45+
46+
<script lang="ts" setup>
47+
import {
48+
DataSpecsDataType,
49+
getCallTypeByValue,
50+
getEventTypeByValue,
51+
ThingModelType
52+
} from '@/views/iot/thingmodel/config'
53+
import { ThingModelData } from '@/api/iot/thingmodel'
54+
55+
/** 数据定义展示组件 */
56+
defineOptions({ name: 'DataDefinition' })
57+
58+
defineProps<{ data: ThingModelData }>()
59+
</script>
60+
61+
<style lang="scss" scoped></style>

‎src/views/iot/thingmodel/components/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import DataDefinition from './DataDefinition.vue'
2+
3+
export { DataDefinition }

‎src/views/iot/thingmodel/config.ts

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { isEmpty } from '@/utils/is'
1+
import {isEmpty} from '@/utils/is'
22

33
/** dataSpecs 数值型数据结构 */
44
export interface DataSpecsNumberDataVO {
@@ -21,7 +21,7 @@ export interface DataSpecsEnumOrBoolDataVO {
2121
}
2222

2323
/** 属性值的数据类型 */
24-
// TODO @puhui999：这个枚举类，要不放到 dict 里？
24+
// TODO @puhui999：这个枚举类，要不放到 dict 里？ 这个全是当常量来使用的不好放 dict 里 🤣
2525
export const DataSpecsDataType = {
2626
INT: 'int',
2727
FLOAT: 'float',
@@ -37,23 +37,24 @@ export const DataSpecsDataType = {
3737
/** 物体模型数据类型配置项 */
3838
// TODO @puhui999：搞到字典里；label 只使用（）部分，就是整数型、单精度浮点型等，这种哈。这样，拼接 value(label) 就可以渲染出来，通用性更强
3939
export const dataTypeOptions = [
40-
{ value: DataSpecsDataType.INT, label: 'int32 (整数型)' },
41-
{ value: DataSpecsDataType.FLOAT, label: 'float (单精度浮点型)' },
42-
{ value: DataSpecsDataType.DOUBLE, label: 'double (双精度浮点型)' },
43-
{ value: DataSpecsDataType.ENUM, label: 'enum(枚举型)' },
44-
{ value: DataSpecsDataType.BOOL, label: 'bool (布尔型)' },
45-
{ value: DataSpecsDataType.TEXT, label: 'text (文本型)' },
46-
{ value: DataSpecsDataType.DATE, label: 'date (时间型)' },
47-
{ value: DataSpecsDataType.STRUCT, label: 'struct (结构体)' },
48-
{ value: DataSpecsDataType.ARRAY, label: 'array (数组)' }
40+
{ value: DataSpecsDataType.INT, label: '整数型' },
41+
{ value: DataSpecsDataType.FLOAT, label: '单精度浮点型' },
42+
{ value: DataSpecsDataType.DOUBLE, label: '双精度浮点型' },
43+
{ value: DataSpecsDataType.ENUM, label: '枚举型' },
44+
{ value: DataSpecsDataType.BOOL, label: '布尔型' },
45+
{ value: DataSpecsDataType.TEXT, label: '文本型' },
46+
{ value: DataSpecsDataType.DATE, label: '时间型' },
47+
{ value: DataSpecsDataType.STRUCT, label: '结构体' },
48+
{ value: DataSpecsDataType.ARRAY, label: '数组' }
4949
]
5050

5151
/** 获得物体模型数据类型配置项名称 */
5252
export const getDataTypeOptionsLabel = (value: string) => {
5353
if (isEmpty(value)) {
5454
return value
5555
}
56-
return dataTypeOptions.find((option) => option.value === value)?.label
56+
const dataType = dataTypeOptions.find((option) => option.value === value)
57+
return dataType && `${dataType.value}(${dataType.label})`
5758
}
5859

5960
// IOT 产品物模型类型枚举类

‎src/views/iot/thingmodel/dataSpecs/ThingModelArrayDataSpecs.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
<el-radio-group v-model="dataSpecs.childDataType" @change="handleChange">
55
<template v-for="item in dataTypeOptions" :key="item.value">
66
<el-radio
7-
class="w-1/3"
87
v-if="
98
!(
109
[DataSpecsDataType.ENUM, DataSpecsDataType.ARRAY, DataSpecsDataType.DATE] as any[]
1110
).includes(item.value)
1211
"
1312
:value="item.value"
13+
class="w-1/3"
1414
>
15-
{{ item.label }}
15+
{{ `${item.value}(${item.label})` }}
1616
</el-radio>
1717
</template>
1818
</el-radio-group>

0 commit comments

Comments
 (0)