Skip to content

Commit c830c2b

Browse files
YunaiVYunaiV
committed
【功能修改】IoT：完善设备详情的属性展示
1 parent 18617d3 commit c830c2b

File tree

4 files changed

+114
-129
lines changed

4 files changed

+114
-129
lines changed

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

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,6 @@
2525
<Icon icon="ep:search" class="mr-5px" />
2626
搜索
2727
</el-button>
28-
<el-button @click="resetQuery">
29-
<Icon icon="ep:refresh" class="mr-5px" />
30-
重置
31-
</el-button>
3228
</el-form-item>
3329
</el-form>
3430
</ContentWrap>
@@ -110,11 +106,5 @@ const handleQuery = () => {
110106
getList()
111107
}
112108
113-
/** 重置按钮操作 */
114-
const resetQuery = () => {
115-
queryFormRef.value.resetFields()
116-
handleQuery()
117-
}
118-
119109
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
120110
</script>

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

Lines changed: 77 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,84 @@
11
<!-- 设备信息 -->
22
<template>
33
<ContentWrap>
4-
<el-collapse v-model="activeNames">
5-
<el-descriptions :column="3" title="设备信息">
6-
<el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
7-
<el-descriptions-item label="ProductKey">
8-
{{ product.productKey }}
9-
<el-button @click="copyToClipboard(product.productKey)">复制</el-button>
10-
</el-descriptions-item>
11-
<el-descriptions-item label="设备类型">
12-
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
13-
</el-descriptions-item>
14-
<el-descriptions-item label="DeviceName">
15-
{{ device.deviceName }}
16-
<el-button @click="copyToClipboard(device.deviceName)">复制</el-button>
17-
</el-descriptions-item>
18-
<el-descriptions-item label="备注名称">{{ device.nickname }}</el-descriptions-item>
19-
<el-descriptions-item label="创建时间">
20-
{{ formatDate(device.createTime) }}
21-
</el-descriptions-item>
22-
<el-descriptions-item label="激活时间">
23-
{{ formatDate(device.activeTime) }}
24-
</el-descriptions-item>
25-
<el-descriptions-item label="最后上线时间">
26-
{{ formatDate(device.onlineTime) }}
27-
</el-descriptions-item>
28-
<el-descriptions-item label="当前状态">
29-
<dict-tag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.status" />
30-
</el-descriptions-item>
31-
<el-descriptions-item label="最后离线时间" :span="3">
32-
{{ formatDate(device.offlineTime) }}
33-
</el-descriptions-item>
34-
<el-descriptions-item label="MQTT 连接参数">
35-
<el-button type="primary" @click="openMqttParams">查看</el-button>
36-
</el-descriptions-item>
37-
</el-descriptions>
38-
</el-collapse>
39-
40-
<!-- MQTT 连接参数弹框 -->
41-
<Dialog
42-
title="MQTT 连接参数"
43-
v-model="mqttDialogVisible"
44-
width="50%"
45-
:before-close="handleCloseMqttDialog"
46-
>
47-
<el-form :model="mqttParams" label-width="120px">
48-
<el-form-item label="clientId">
49-
<el-input v-model="mqttParams.mqttClientId" readonly>
50-
<template #append>
51-
<el-button @click="copyToClipboard(mqttParams.mqttClientId)" type="primary">
52-
<Icon icon="ph:copy" />
53-
</el-button>
54-
</template>
55-
</el-input>
56-
</el-form-item>
57-
<el-form-item label="username">
58-
<el-input v-model="mqttParams.mqttUsername" readonly>
59-
<template #append>
60-
<el-button @click="copyToClipboard(mqttParams.mqttUsername)" type="primary">
61-
<Icon icon="ph:copy" />
62-
</el-button>
63-
</template>
64-
</el-input>
65-
</el-form-item>
66-
<el-form-item label="passwd">
67-
<el-input v-model="mqttParams.mqttPassword" readonly type="password">
68-
<template #append>
69-
<el-button @click="copyToClipboard(mqttParams.mqttPassword)" type="primary">
70-
<Icon icon="ph:copy" />
71-
</el-button>
72-
</template>
73-
</el-input>
74-
</el-form-item>
75-
</el-form>
76-
<template #footer>
77-
<el-button @click="mqttDialogVisible = false">关闭</el-button>
78-
</template>
79-
</Dialog>
4+
<el-descriptions :column="3" title="设备信息">
5+
<el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
6+
<el-descriptions-item label="ProductKey">
7+
{{ product.productKey }}
8+
<el-button @click="copyToClipboard(product.productKey)">复制</el-button>
9+
</el-descriptions-item>
10+
<el-descriptions-item label="设备类型">
11+
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
12+
</el-descriptions-item>
13+
<el-descriptions-item label="DeviceName">
14+
{{ device.deviceName }}
15+
<el-button @click="copyToClipboard(device.deviceName)">复制</el-button>
16+
</el-descriptions-item>
17+
<el-descriptions-item label="备注名称">{{ device.nickname }}</el-descriptions-item>
18+
<el-descriptions-item label="创建时间">
19+
{{ formatDate(device.createTime) }}
20+
</el-descriptions-item>
21+
<el-descriptions-item label="当前状态">
22+
<dict-tag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
23+
</el-descriptions-item>
24+
<el-descriptions-item label="激活时间">
25+
{{ formatDate(device.activeTime) }}
26+
</el-descriptions-item>
27+
<el-descriptions-item label="最后上线时间">
28+
{{ formatDate(device.onlineTime) }}
29+
</el-descriptions-item>
30+
<el-descriptions-item label="最后离线时间" :span="3">
31+
{{ formatDate(device.offlineTime) }}
32+
</el-descriptions-item>
33+
<el-descriptions-item label="MQTT 连接参数">
34+
<el-button type="primary" @click="openMqttParams">查看</el-button>
35+
</el-descriptions-item>
36+
</el-descriptions>
8037
</ContentWrap>
38+
39+
<!-- MQTT 连接参数弹框 -->
40+
<Dialog
41+
title="MQTT 连接参数"
42+
v-model="mqttDialogVisible"
43+
width="50%"
44+
:before-close="handleCloseMqttDialog"
45+
>
46+
<el-form :model="mqttParams" label-width="120px">
47+
<el-form-item label="clientId">
48+
<el-input v-model="mqttParams.mqttClientId" readonly>
49+
<template #append>
50+
<el-button @click="copyToClipboard(mqttParams.mqttClientId)" type="primary">
51+
<Icon icon="ph:copy" />
52+
</el-button>
53+
</template>
54+
</el-input>
55+
</el-form-item>
56+
<el-form-item label="username">
57+
<el-input v-model="mqttParams.mqttUsername" readonly>
58+
<template #append>
59+
<el-button @click="copyToClipboard(mqttParams.mqttUsername)" type="primary">
60+
<Icon icon="ph:copy" />
61+
</el-button>
62+
</template>
63+
</el-input>
64+
</el-form-item>
65+
<el-form-item label="passwd">
66+
<el-input v-model="mqttParams.mqttPassword" readonly type="password">
67+
<template #append>
68+
<el-button @click="copyToClipboard(mqttParams.mqttPassword)" type="primary">
69+
<Icon icon="ph:copy" />
70+
</el-button>
71+
</template>
72+
</el-input>
73+
</el-form-item>
74+
</el-form>
75+
<template #footer>
76+
<el-button @click="mqttDialogVisible = false">关闭</el-button>
77+
</template>
78+
</Dialog>
79+
80+
<!-- TODO 待开发：设备标签 -->
81+
<!-- TODO 待开发：设备地图 -->
8182
</template>
8283
<script setup lang="ts">
8384
import { DICT_TYPE } from '@/utils/dict'
@@ -90,7 +91,6 @@ const message = useMessage() // 消息提示
9091
const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>() // 定义 Props
9192
const emit = defineEmits(['refresh']) // 定义 Emits
9293
93-
const activeNames = ref(['basicInfo']) // 展示的折叠面板
9494
const mqttDialogVisible = ref(false) // 定义 MQTT 弹框的可见性
9595
const mqttParams = ref({
9696
mqttClientId: '',

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@
4141
<ContentWrap>
4242
<el-tabs>
4343
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
44-
<el-table-column label="属性标识符" align="center" prop="identifier" />
45-
<el-table-column label="属性名称" align="center" prop="name" />
46-
<el-table-column label="数据类型" align="center" prop="dataType" />
44+
<el-table-column label="属性标识符" align="center" prop="property.identifier" />
45+
<el-table-column label="属性名称" align="center" prop="property.name" />
46+
<el-table-column label="数据类型" align="center" prop="property.dataType" />
4747
<el-table-column label="属性值" align="center" prop="value" />
4848
<el-table-column
4949
label="更新时间"
@@ -57,9 +57,9 @@
5757
<el-button
5858
link
5959
type="primary"
60-
@click="openDetail(props.device.id, scope.row.identifier)"
60+
@click="openDetail(props.device.id, scope.row.property.identifier)"
6161
>
62-
历史
62+
查看数据
6363
</el-button>
6464
</template>
6565
</el-table-column>

‎src/views/iot/product/product/detail/ProductDetailsInfo.vue

Lines changed: 32 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,37 @@
11
<template>
22
<ContentWrap>
3-
<el-collapse v-model="activeNames">
4-
<el-descriptions :column="3" title="产品信息">
5-
<el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
6-
<el-descriptions-item label="所属分类">{{ product.categoryName }}</el-descriptions-item>
7-
<el-descriptions-item label="设备类型">
8-
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
9-
</el-descriptions-item>
10-
<el-descriptions-item label="创建时间">
11-
{{ formatDate(product.createTime) }}
12-
</el-descriptions-item>
13-
<el-descriptions-item label="数据格式">
14-
<dict-tag :type="DICT_TYPE.IOT_DATA_FORMAT" :value="product.dataFormat" />
15-
</el-descriptions-item>
16-
<el-descriptions-item label="数据校验级别">
17-
<dict-tag :type="DICT_TYPE.IOT_VALIDATE_TYPE" :value="product.validateType" />
18-
</el-descriptions-item>
19-
<el-descriptions-item label="产品状态">
20-
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
21-
</el-descriptions-item>
22-
<el-descriptions-item
23-
label="联网方式"
24-
v-if="[DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(product.deviceType)"
25-
>
26-
<dict-tag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
27-
</el-descriptions-item>
28-
<el-descriptions-item
29-
label="接入网关协议"
30-
v-if="product.deviceType === DeviceTypeEnum.GATEWAY_SUB"
31-
>
32-
<dict-tag :type="DICT_TYPE.IOT_PROTOCOL_TYPE" :value="product.protocolType" />
33-
</el-descriptions-item>
34-
<el-descriptions-item label="产品描述">{{ product.description }}</el-descriptions-item>
35-
</el-descriptions>
36-
</el-collapse>
3+
<el-descriptions :column="3" title="产品信息">
4+
<el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
5+
<el-descriptions-item label="所属分类">{{ product.categoryName }}</el-descriptions-item>
6+
<el-descriptions-item label="设备类型">
7+
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
8+
</el-descriptions-item>
9+
<el-descriptions-item label="创建时间">
10+
{{ formatDate(product.createTime) }}
11+
</el-descriptions-item>
12+
<el-descriptions-item label="数据格式">
13+
<dict-tag :type="DICT_TYPE.IOT_DATA_FORMAT" :value="product.dataFormat" />
14+
</el-descriptions-item>
15+
<el-descriptions-item label="数据校验级别">
16+
<dict-tag :type="DICT_TYPE.IOT_VALIDATE_TYPE" :value="product.validateType" />
17+
</el-descriptions-item>
18+
<el-descriptions-item label="产品状态">
19+
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
20+
</el-descriptions-item>
21+
<el-descriptions-item
22+
label="联网方式"
23+
v-if="[DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(product.deviceType)"
24+
>
25+
<dict-tag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
26+
</el-descriptions-item>
27+
<el-descriptions-item
28+
label="接入网关协议"
29+
v-if="product.deviceType === DeviceTypeEnum.GATEWAY_SUB"
30+
>
31+
<dict-tag :type="DICT_TYPE.IOT_PROTOCOL_TYPE" :value="product.protocolType" />
32+
</el-descriptions-item>
33+
<el-descriptions-item label="产品描述">{{ product.description }}</el-descriptions-item>
34+
</el-descriptions>
3735
</ContentWrap>
3836
</template>
3937
<script setup lang="ts">
@@ -42,7 +40,4 @@ import { DeviceTypeEnum, ProductVO } from '@/api/iot/product/product'
4240
import { formatDate } from '@/utils/formatTime'
4341
4442
const { product } = defineProps<{ product: ProductVO }>()
45-
46-
// 展示的折叠面板
47-
const activeNames = ref(['basicInfo'])
4843
</script>

0 commit comments

Comments
 (0)