mirror of
https://gitee.com/myxzgzs/boyue-ui-admin-vue3
synced 2025-08-08 16:32:43 +08:00
【功能修改】IoT：完善设备详情的属性展示
This commit is contained in:
YunaiV
parent
18617d309b
commit
c830c2b9bb
@ -25,10 +25,6 @@
|
|||||||
<Icon icon="ep:search" class="mr-5px" />
|
<Icon icon="ep:search" class="mr-5px" />
|
||||||
搜索
|
搜索
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button @click="resetQuery">
|
|
||||||
<Icon icon="ep:refresh" class="mr-5px" />
|
|
||||||
重置
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
@ -110,11 +106,5 @@ const handleQuery = () => {
|
|||||||
getList()
|
getList()
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
const resetQuery = () => {
|
|
||||||
queryFormRef.value.resetFields()
|
|
||||||
handleQuery()
|
|
||||||
}
|
|
||||||
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,83 +1,84 @@
|
|||||||
<!-- 设备信息 -->
|
<!-- 设备信息 -->
|
||||||
<template>
|
<template>
|
||||||
<ContentWrap>
|
<ContentWrap>
|
||||||
<el-collapse v-model="activeNames">
|
<el-descriptions :column="3" title="设备信息">
|
||||||
<el-descriptions :column="3" title="设备信息">
|
<el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
|
<el-descriptions-item label="ProductKey">
|
||||||
<el-descriptions-item label="ProductKey">
|
{{ product.productKey }}
|
||||||
{{ product.productKey }}
|
<el-button @click="copyToClipboard(product.productKey)">复制</el-button>
|
||||||
<el-button @click="copyToClipboard(product.productKey)">复制</el-button>
|
</el-descriptions-item>
|
||||||
</el-descriptions-item>
|
<el-descriptions-item label="设备类型">
|
||||||
<el-descriptions-item label="设备类型">
|
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
|
||||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
|
</el-descriptions-item>
|
||||||
</el-descriptions-item>
|
<el-descriptions-item label="DeviceName">
|
||||||
<el-descriptions-item label="DeviceName">
|
{{ device.deviceName }}
|
||||||
{{ device.deviceName }}
|
<el-button @click="copyToClipboard(device.deviceName)">复制</el-button>
|
||||||
<el-button @click="copyToClipboard(device.deviceName)">复制</el-button>
|
</el-descriptions-item>
|
||||||
</el-descriptions-item>
|
<el-descriptions-item label="备注名称">{{ device.nickname }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="备注名称">{{ device.nickname }}</el-descriptions-item>
|
<el-descriptions-item label="创建时间">
|
||||||
<el-descriptions-item label="创建时间">
|
{{ formatDate(device.createTime) }}
|
||||||
{{ formatDate(device.createTime) }}
|
</el-descriptions-item>
|
||||||
</el-descriptions-item>
|
<el-descriptions-item label="当前状态">
|
||||||
<el-descriptions-item label="激活时间">
|
<dict-tag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
|
||||||
{{ formatDate(device.activeTime) }}
|
</el-descriptions-item>
|
||||||
</el-descriptions-item>
|
<el-descriptions-item label="激活时间">
|
||||||
<el-descriptions-item label="最后上线时间">
|
{{ formatDate(device.activeTime) }}
|
||||||
{{ formatDate(device.onlineTime) }}
|
</el-descriptions-item>
|
||||||
</el-descriptions-item>
|
<el-descriptions-item label="最后上线时间">
|
||||||
<el-descriptions-item label="当前状态">
|
{{ formatDate(device.onlineTime) }}
|
||||||
<dict-tag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.status" />
|
</el-descriptions-item>
|
||||||
</el-descriptions-item>
|
<el-descriptions-item label="最后离线时间" :span="3">
|
||||||
<el-descriptions-item label="最后离线时间" :span="3">
|
{{ formatDate(device.offlineTime) }}
|
||||||
{{ formatDate(device.offlineTime) }}
|
</el-descriptions-item>
|
||||||
</el-descriptions-item>
|
<el-descriptions-item label="MQTT 连接参数">
|
||||||
<el-descriptions-item label="MQTT 连接参数">
|
<el-button type="primary" @click="openMqttParams">查看</el-button>
|
||||||
<el-button type="primary" @click="openMqttParams">查看</el-button>
|
</el-descriptions-item>
|
||||||
</el-descriptions-item>
|
</el-descriptions>
|
||||||
</el-descriptions>
|
|
||||||
</el-collapse>
|
|
||||||
|
|
||||||
<!-- MQTT 连接参数弹框 -->
|
|
||||||
<Dialog
|
|
||||||
title="MQTT 连接参数"
|
|
||||||
v-model="mqttDialogVisible"
|
|
||||||
width="50%"
|
|
||||||
:before-close="handleCloseMqttDialog"
|
|
||||||
>
|
|
||||||
<el-form :model="mqttParams" label-width="120px">
|
|
||||||
<el-form-item label="clientId">
|
|
||||||
<el-input v-model="mqttParams.mqttClientId" readonly>
|
|
||||||
<template #append>
|
|
||||||
<el-button @click="copyToClipboard(mqttParams.mqttClientId)" type="primary">
|
|
||||||
<Icon icon="ph:copy" />
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="username">
|
|
||||||
<el-input v-model="mqttParams.mqttUsername" readonly>
|
|
||||||
<template #append>
|
|
||||||
<el-button @click="copyToClipboard(mqttParams.mqttUsername)" type="primary">
|
|
||||||
<Icon icon="ph:copy" />
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="passwd">
|
|
||||||
<el-input v-model="mqttParams.mqttPassword" readonly type="password">
|
|
||||||
<template #append>
|
|
||||||
<el-button @click="copyToClipboard(mqttParams.mqttPassword)" type="primary">
|
|
||||||
<Icon icon="ph:copy" />
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="mqttDialogVisible = false">关闭</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
|
|
||||||
|
<!-- MQTT 连接参数弹框 -->
|
||||||
|
<Dialog
|
||||||
|
title="MQTT 连接参数"
|
||||||
|
v-model="mqttDialogVisible"
|
||||||
|
width="50%"
|
||||||
|
:before-close="handleCloseMqttDialog"
|
||||||
|
>
|
||||||
|
<el-form :model="mqttParams" label-width="120px">
|
||||||
|
<el-form-item label="clientId">
|
||||||
|
<el-input v-model="mqttParams.mqttClientId" readonly>
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="copyToClipboard(mqttParams.mqttClientId)" type="primary">
|
||||||
|
<Icon icon="ph:copy" />
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="username">
|
||||||
|
<el-input v-model="mqttParams.mqttUsername" readonly>
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="copyToClipboard(mqttParams.mqttUsername)" type="primary">
|
||||||
|
<Icon icon="ph:copy" />
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="passwd">
|
||||||
|
<el-input v-model="mqttParams.mqttPassword" readonly type="password">
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="copyToClipboard(mqttParams.mqttPassword)" type="primary">
|
||||||
|
<Icon icon="ph:copy" />
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="mqttDialogVisible = false">关闭</el-button>
|
||||||
|
</template>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
<!-- TODO 待开发：设备标签 -->
|
||||||
|
<!-- TODO 待开发：设备地图 -->
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { DICT_TYPE } from '@/utils/dict'
|
import { DICT_TYPE } from '@/utils/dict'
|
||||||
@ -90,7 +91,6 @@ const message = useMessage() // 消息提示
|
|||||||
const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>() // 定义 Props
|
const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>() // 定义 Props
|
||||||
const emit = defineEmits(['refresh']) // 定义 Emits
|
const emit = defineEmits(['refresh']) // 定义 Emits
|
||||||
|
|
||||||
const activeNames = ref(['basicInfo']) // 展示的折叠面板
|
|
||||||
const mqttDialogVisible = ref(false) // 定义 MQTT 弹框的可见性
|
const mqttDialogVisible = ref(false) // 定义 MQTT 弹框的可见性
|
||||||
const mqttParams = ref({
|
const mqttParams = ref({
|
||||||
mqttClientId: '',
|
mqttClientId: '',
|
||||||
|
|||||||
@ -41,9 +41,9 @@
|
|||||||
<ContentWrap>
|
<ContentWrap>
|
||||||
<el-tabs>
|
<el-tabs>
|
||||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||||
<el-table-column label="属性标识符" align="center" prop="identifier" />
|
<el-table-column label="属性标识符" align="center" prop="property.identifier" />
|
||||||
<el-table-column label="属性名称" align="center" prop="name" />
|
<el-table-column label="属性名称" align="center" prop="property.name" />
|
||||||
<el-table-column label="数据类型" align="center" prop="dataType" />
|
<el-table-column label="数据类型" align="center" prop="property.dataType" />
|
||||||
<el-table-column label="属性值" align="center" prop="value" />
|
<el-table-column label="属性值" align="center" prop="value" />
|
||||||
<el-table-column
|
<el-table-column
|
||||||
label="更新时间"
|
label="更新时间"
|
||||||
@ -57,9 +57,9 @@
|
|||||||
<el-button
|
<el-button
|
||||||
link
|
link
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="openDetail(props.device.id, scope.row.identifier)"
|
@click="openDetail(props.device.id, scope.row.property.identifier)"
|
||||||
>
|
>
|
||||||
历史
|
查看数据
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|||||||
@ -1,39 +1,37 @@
|
|||||||
<template>
|
<template>
|
||||||
<ContentWrap>
|
<ContentWrap>
|
||||||
<el-collapse v-model="activeNames">
|
<el-descriptions :column="3" title="产品信息">
|
||||||
<el-descriptions :column="3" title="产品信息">
|
<el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
|
<el-descriptions-item label="所属分类">{{ product.categoryName }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="所属分类">{{ product.categoryName }}</el-descriptions-item>
|
<el-descriptions-item label="设备类型">
|
||||||
<el-descriptions-item label="设备类型">
|
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
|
||||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
|
</el-descriptions-item>
|
||||||
</el-descriptions-item>
|
<el-descriptions-item label="创建时间">
|
||||||
<el-descriptions-item label="创建时间">
|
{{ formatDate(product.createTime) }}
|
||||||
{{ formatDate(product.createTime) }}
|
</el-descriptions-item>
|
||||||
</el-descriptions-item>
|
<el-descriptions-item label="数据格式">
|
||||||
<el-descriptions-item label="数据格式">
|
<dict-tag :type="DICT_TYPE.IOT_DATA_FORMAT" :value="product.dataFormat" />
|
||||||
<dict-tag :type="DICT_TYPE.IOT_DATA_FORMAT" :value="product.dataFormat" />
|
</el-descriptions-item>
|
||||||
</el-descriptions-item>
|
<el-descriptions-item label="数据校验级别">
|
||||||
<el-descriptions-item label="数据校验级别">
|
<dict-tag :type="DICT_TYPE.IOT_VALIDATE_TYPE" :value="product.validateType" />
|
||||||
<dict-tag :type="DICT_TYPE.IOT_VALIDATE_TYPE" :value="product.validateType" />
|
</el-descriptions-item>
|
||||||
</el-descriptions-item>
|
<el-descriptions-item label="产品状态">
|
||||||
<el-descriptions-item label="产品状态">
|
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
|
||||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
|
</el-descriptions-item>
|
||||||
</el-descriptions-item>
|
<el-descriptions-item
|
||||||
<el-descriptions-item
|
label="联网方式"
|
||||||
label="联网方式"
|
v-if="[DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(product.deviceType)"
|
||||||
v-if="[DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(product.deviceType)"
|
>
|
||||||
>
|
<dict-tag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
|
||||||
<dict-tag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
|
</el-descriptions-item>
|
||||||
</el-descriptions-item>
|
<el-descriptions-item
|
||||||
<el-descriptions-item
|
label="接入网关协议"
|
||||||
label="接入网关协议"
|
v-if="product.deviceType === DeviceTypeEnum.GATEWAY_SUB"
|
||||||
v-if="product.deviceType === DeviceTypeEnum.GATEWAY_SUB"
|
>
|
||||||
>
|
<dict-tag :type="DICT_TYPE.IOT_PROTOCOL_TYPE" :value="product.protocolType" />
|
||||||
<dict-tag :type="DICT_TYPE.IOT_PROTOCOL_TYPE" :value="product.protocolType" />
|
</el-descriptions-item>
|
||||||
</el-descriptions-item>
|
<el-descriptions-item label="产品描述">{{ product.description }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="产品描述">{{ product.description }}</el-descriptions-item>
|
</el-descriptions>
|
||||||
</el-descriptions>
|
|
||||||
</el-collapse>
|
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -42,7 +40,4 @@ import { DeviceTypeEnum, ProductVO } from '@/api/iot/product/product'
|
|||||||
import { formatDate } from '@/utils/formatTime'
|
import { formatDate } from '@/utils/formatTime'
|
||||||
|
|
||||||
const { product } = defineProps<{ product: ProductVO }>()
|
const { product } = defineProps<{ product: ProductVO }>()
|
||||||
|
|
||||||
// 展示的折叠面板
|
|
||||||
const activeNames = ref(['basicInfo'])
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user