Skip to content

Commit 5e8aad7

Browse files
author
alwayssuper
committed
feat:DeviceDetailsSimulator
1 parent 61ebe5b commit 5e8aad7

File tree

2 files changed

+180
-43
lines changed

2 files changed

+180
-43
lines changed

‎src/api/iot/thingmodel/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ export const ThingModelApi = {
4545
return await request.get({ url: `/iot/thing-model/page`, params })
4646
},
4747

48+
// 获得产品物模型列表
49+
getThingModelList: async (params: any) => {
50+
return await request.get({ url: `/iot/thing-model/list`, params })
51+
},
52+
4853
// 获得产品物模型
4954
getThingModelListByProductId: async (params: any) => {
5055
return await request.get({

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

Lines changed: 175 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,83 @@
1010
<!-- 属性上报 -->
1111
<el-tab-pane label="属性上报" name="property">
1212
<ContentWrap>
13-
<el-table v-loading="loading" :data="propertyList" :stripe="true">
13+
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
1414
<el-table-column label="值" align="center" width="80">
1515
<template #default="scope">
1616
<el-input v-model="scope.row.value" class="!w-60px" />
1717
</template>
1818
</el-table-column>
19-
<el-table-column label="功能名称" align="center" prop="name" />
20-
<el-table-column label="标识符" align="center" prop="identifier" />
21-
<el-table-column label="数据类型" align="center" prop="dataType" />
22-
<el-table-column label="数据定义" align="center" prop="specs" :show-overflow-tooltip="true" />
19+
<el-table-column align="center" label="功能名称" prop="name" />
20+
<el-table-column align="center" label="标识符" prop="identifier" />
21+
<el-table-column align="center" label="数据类型" prop="identifier">
22+
<template #default="{ row }">
23+
{{ dataTypeOptionsLabel(row.property?.dataType) ?? '-' }}
24+
</template>
25+
</el-table-column>
26+
<el-table-column align="left" label="数据定义" prop="identifier">
27+
<template #default="{ row }">
28+
<!-- 属性 -->
29+
<template v-if="row.type === ThingModelType.PROPERTY">
30+
<!-- 非列表型：数值 -->
31+
<div
32+
v-if="
33+
[
34+
DataSpecsDataType.INT,
35+
DataSpecsDataType.DOUBLE,
36+
DataSpecsDataType.FLOAT
37+
].includes(row.property.dataType)
38+
"
39+
>
40+
取值范围：{{
41+
`${row.property.dataSpecs.min}~${row.property.dataSpecs.max}`
42+
}}
43+
</div>
44+
<!-- 非列表型：文本 -->
45+
<div v-if="DataSpecsDataType.TEXT === row.property.dataType">
46+
数据长度：{{ row.property.dataSpecs.length }}
47+
</div>
48+
<!-- 列表型: 数组、结构、时间（特殊） -->
49+
<div
50+
v-if="
51+
[
52+
DataSpecsDataType.ARRAY,
53+
DataSpecsDataType.STRUCT,
54+
DataSpecsDataType.DATE
55+
].includes(row.property.dataType)
56+
"
57+
>
58+
-
59+
</div>
60+
<!-- 列表型: 布尔值、枚举 -->
61+
<div
62+
v-if="
63+
[DataSpecsDataType.BOOL, DataSpecsDataType.ENUM].includes(
64+
row.property.dataType
65+
)
66+
"
67+
>
68+
<div>
69+
{{
70+
DataSpecsDataType.BOOL === row.property.dataType
71+
? '布尔值'
72+
: '枚举值'
73+
}}：
74+
</div>
75+
<div v-for="item in row.property.dataSpecsList" :key="item.value">
76+
{{ `${item.name}-${item.value}` }}
77+
</div>
78+
</div>
79+
</template>
80+
<!-- 服务 -->
81+
<div v-if="row.type === ThingModelType.SERVICE">
82+
调用方式：{{ getCallTypeByValue(row.service.callType) }}
83+
</div>
84+
<!-- 事件 -->
85+
<div v-if="row.type === ThingModelType.EVENT">
86+
事件类型：{{ getEventTypeByValue(row.event.type) }}
87+
</div>
88+
</template>
89+
</el-table-column>
2390
</el-table>
2491
<div class="mt-10px">
2592
<el-button type="primary" @click="handlePropertyReport">发送</el-button>
@@ -39,7 +106,12 @@
39106
<el-table-column label="功能名称" align="center" prop="name" />
40107
<el-table-column label="标识符" align="center" prop="identifier" />
41108
<el-table-column label="数据类型" align="center" prop="dataType" />
42-
<el-table-column label="数据定义" align="center" prop="specs" :show-overflow-tooltip="true" />
109+
<el-table-column
110+
label="数据定义"
111+
align="center"
112+
prop="specs"
113+
:show-overflow-tooltip="true"
114+
/>
43115
</el-table>
44116
<div class="mt-10px">
45117
<el-button type="primary" @click="handleEventReport">发送</el-button>
@@ -51,8 +123,12 @@
51123
<el-tab-pane label="状态变更" name="status">
52124
<ContentWrap>
53125
<div class="flex gap-4">
54-
<el-button type="primary" @click="handleDeviceState('online')">设备上线</el-button>
55-
<el-button type="primary" @click="handleDeviceState('offline')">设备下线</el-button>
126+
<el-button type="primary" @click="handleDeviceState('online')"
127+
>设备上线</el-button
128+
>
129+
<el-button type="primary" @click="handleDeviceState('offline')"
130+
>设备下线</el-button
131+
>
56132
</div>
57133
</ContentWrap>
58134
</el-tab-pane>
@@ -74,7 +150,12 @@
74150
<el-table-column label="功能名称" align="center" prop="name" />
75151
<el-table-column label="标识符" align="center" prop="identifier" />
76152
<el-table-column label="数据类型" align="center" prop="dataType" />
77-
<el-table-column label="数据定义" align="center" prop="specs" :show-overflow-tooltip="true" />
153+
<el-table-column
154+
label="数据定义"
155+
align="center"
156+
prop="specs"
157+
:show-overflow-tooltip="true"
158+
/>
78159
</el-table>
79160
<div class="mt-10px">
80161
<el-button type="primary" @click="handlePropertyGet">获取</el-button>
@@ -107,15 +188,44 @@
107188

108189
<script setup lang="ts">
109190
import { ProductVO } from '@/api/iot/product/product'
191+
import { ThingModelApi, ThingModelData } from '@/api/iot/thingmodel'
110192
import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
111193
import DeviceDetailsLog from './DeviceDetailsLog.vue'
194+
import {
195+
DataSpecsDataType,
196+
getCallTypeByValue,
197+
getDataTypeOptionsLabel,
198+
getEventTypeByValue,
199+
ThingModelType
200+
} from '@/views/iot/thingmodel/config'
112201
113202
const message = useMessage() // 消息弹窗
114203
const loading = ref(false)
115204
const activeTab = ref('up')
116205
const subTab = ref('property')
117206
207+
const queryParams = reactive({
208+
type: undefined,
209+
productId: -1
210+
})
211+
const dataTypeOptionsLabel = computed(() => (value: string) => getDataTypeOptionsLabel(value)) // 解析数据类型
118212
const props = defineProps<{ product: ProductVO; device: DeviceVO }>()
213+
const list = ref<ThingModelData[]>([]) // 物模型列表的数据
214+
215+
/** 查询列表 */
216+
const getList = async () => {
217+
loading.value = true
218+
try {
219+
queryParams.productId = props.product?.id || -1
220+
const data = await ThingModelApi.getThingModelList(queryParams)
221+
list.value = data
222+
console.log(data)
223+
console.log(list.value)
224+
console.log(queryParams)
225+
} finally {
226+
loading.value = false
227+
}
228+
}
119229
120230
// 功能列表数据结构定义
121231
interface TableItem {
@@ -126,40 +236,62 @@ interface TableItem {
126236
value: string | number
127237
}
128238
129-
// 属性列表数据
130-
const propertyList = ref<TableItem[]>([
131-
{
132-
name: '电量',
133-
identifier: 'power',
134-
dataType: 'int32',
135-
specs: '',
136-
value: ''
137-
},
138-
{
139-
name: '设备型号',
140-
identifier: 'DeviceType',
141-
dataType: 'text',
142-
specs: '{ "length": "128" }',
143-
value: ''
144-
},
145-
{
146-
name: '信号强度',
147-
identifier: 'rssi',
148-
dataType: 'int32',
149-
specs: '{ "min": "-127", "max": "127" }',
150-
value: ''
151-
},
152-
{
153-
name: '门状态',
154-
identifier: 'doorStatus',
155-
dataType: 'enum',
156-
specs: '{ "0": "关", "1": "开" }',
157-
value: ''
158-
}
159-
])
239+
// 添加计算属性来过滤物模型数据
240+
const propertyList = computed(() => {
241+
return list.value
242+
.filter((item) => item.type === 'property')
243+
.map((item) => ({
244+
name: item.name,
245+
identifier: item.identifier,
246+
dataType: item.dataType,
247+
specs: item.specs,
248+
value: ''
249+
}))
250+
})
160251
161-
// 事件列表数据
162-
const eventList = ref<TableItem[]>([])
252+
const eventList = computed(() => {
253+
return list.value
254+
.filter((item) => item.type === 'event')
255+
.map((item) => ({
256+
name: item.name,
257+
identifier: item.identifier,
258+
dataType: item.dataType,
259+
specs: item.specs,
260+
value: ''
261+
}))
262+
})
263+
264+
// 监听标签页变化 todo:后续改成查询字典
265+
watch(
266+
[activeTab, subTab],
267+
([newActiveTab, newSubTab]) => {
268+
// 根据标签页设置查询类型
269+
if (newActiveTab === 'up') {
270+
switch (newSubTab) {
271+
case 'property':
272+
queryParams.type = 1
273+
break
274+
case 'event':
275+
queryParams.type = 3
276+
break
277+
// case 'status':
278+
// queryParams.type = 'status'
279+
// break
280+
}
281+
} else if (newActiveTab === 'down') {
282+
switch (newSubTab) {
283+
case 'propertyDebug':
284+
queryParams.type = 1
285+
break
286+
case 'service':
287+
queryParams.type = 2
288+
break
289+
}
290+
}
291+
getList() // 切换标签时重新获取数据
292+
},
293+
{ immediate: true }
294+
)
163295
164296
// 处理属性上报
165297
const handlePropertyReport = async () => {
@@ -187,6 +319,6 @@ const handlePropertyGet = async () => {
187319
188320
// 初始化
189321
onMounted(() => {
190-
// TODO: 获取初始数据
322+
getList()
191323
})
192324
</script>

0 commit comments

Comments
 (0)