yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat:map1

pull/789/head
alwayssuper 2025-07-04 14:39:51 +08:00
parent a80ef2273c
commit 10ca38c609
3 changed files with 64 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/iot/device/device/DeviceForm.vue
View File

@ -136,7 +136,7 @@ const formData = ref({
gatewayId: undefined, gatewayId: undefined,
deviceType: undefined as number | undefined, deviceType: undefined as number | undefined,
serialNumber: undefined, serialNumber: undefined,
locationType: undefined, locationType: undefined as number | undefined,
longitude: undefined, longitude: undefined,
latitude: undefined, latitude: undefined,
groupIds: [] as number[] groupIds: [] as number[]
@ -270,5 +270,6 @@ const handleProductChange = (productId: number) => {
} }
const product = products.value?.find((item) => item.id === productId) const product = products.value?.find((item) => item.id === productId)
formData.value.deviceType = product?.deviceType formData.value.deviceType = product?.deviceType
formData.value.locationType = product?.locationType
} }
</script> </script>

152
src/views/iot/device/device/detail/DeviceDetailsInfo.vue
View File

@ -4,84 +4,56 @@
<ContentWrap> <ContentWrap>
<el-row :gutter="16"> <el-row :gutter="16">
<!-- 左侧设备信息 --> <!-- 左侧设备信息 -->
<el-col :span="8"> <el-col :span="12">
<el-card> <el-card class="h-full">
<template #header> <template #header>
<div class="flex items-center"> <div class="flex items-center">
<Icon icon="ep:info-filled" class="mr-2 text-primary" /> <Icon icon="ep:info-filled" class="mr-2 text-primary" />
<span>设备信息</span> <span>设备信息</span>
</div> </div>
</template> </template>
<div class="info-list"> <el-descriptions :column="2" border class="device-descriptions">
<div class="info-item"> <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
<span class="label">产品名称：</span> <el-descriptions-item label="ProductKey">
<span class="value">{{ product.name }}</span> {{ product.productKey }}
</div> <el-button @click="copyToClipboard(product.productKey)" link>复制</el-button>
<div class="info-item"> </el-descriptions-item>
<span class="label">ProductKey：</span> <el-descriptions-item label="设备类型">
<span class="value"> <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
{{ product.productKey }} </el-descriptions-item>
<el-button @click="copyToClipboard(product.productKey)" link>复制</el-button> <el-descriptions-item label="定位类型">
</span> <dict-tag :type="DICT_TYPE.IOT_LOCATION_TYPE" :value="device.locationType" />
</div> </el-descriptions-item>
<div class="info-item"> <el-descriptions-item label="DeviceName">
<span class="label">设备类型：</span> {{ device.deviceName }}
<span class="value"> <el-button @click="copyToClipboard(device.deviceName)" link>复制</el-button>
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" /> </el-descriptions-item>
</span> <el-descriptions-item label="备注名称">{{ device.nickname }}</el-descriptions-item>
</div> <el-descriptions-item label="创建时间">
<div class="info-item"> {{ formatDate(device.createTime) }}
<span class="label">定位类型：</span> </el-descriptions-item>
<span class="value"> <el-descriptions-item label="当前状态">
<dict-tag :type="DICT_TYPE.IOT_LOCATION_TYPE" :value="device.locationType" /> <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
</span> </el-descriptions-item>
</div> <el-descriptions-item label="激活时间">
<div class="info-item"> {{ formatDate(device.activeTime) }}
<span class="label">DeviceName：</span> </el-descriptions-item>
<span class="value"> <el-descriptions-item label="最后上线时间">
{{ device.deviceName }} {{ formatDate(device.onlineTime) }}
<el-button @click="copyToClipboard(device.deviceName)" link>复制</el-button> </el-descriptions-item>
</span> <el-descriptions-item label="最后离线时间">
</div> {{ formatDate(device.offlineTime) }}
<div class="info-item"> </el-descriptions-item>
<span class="label">备注名称：</span> <el-descriptions-item label="认证信息">
<span class="value">{{ device.nickname }}</span> <el-button type="primary" @click="handleAuthInfoDialogOpen" plain>查看</el-button>
</div> </el-descriptions-item>
<div class="info-item"> </el-descriptions>
<span class="label">创建时间：</span>
<span class="value">{{ formatDate(device.createTime) }}</span>
</div>
<div class="info-item">
<span class="label">当前状态：</span>
<span class="value">
<dict-tag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
</span>
</div>
<div class="info-item">
<span class="label">激活时间：</span>
<span class="value">{{ formatDate(device.activeTime) }}</span>
</div>
<div class="info-item">
<span class="label">最后上线时间：</span>
<span class="value">{{ formatDate(device.onlineTime) }}</span>
</div>
<div class="info-item">
<span class="label">最后离线时间：</span>
<span class="value">{{ formatDate(device.offlineTime) }}</span>
</div>
<div class="info-item">
<span class="label">认证信息：</span>
<span class="value">
<el-button type="primary" @click="handleAuthInfoDialogOpen" plain>查看</el-button>
</span>
</div>
</div>
</el-card> </el-card>
</el-col> </el-col>
<!-- 右侧地图 --> <!-- 右侧地图 -->
<el-col :span="16"> <el-col :span="12">
<el-card class="map-card"> <el-card class="h-full">
<template #header> <template #header>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
@ -89,11 +61,22 @@
<span>设备位置</span> <span>设备位置</span>
</div> </div>
<div class="text-[14px] text-[var(--el-text-color-secondary)]"> <div class="text-[14px] text-[var(--el-text-color-secondary)]">
最后上线时间：{{ device.onlineTime ? formatDate(device.onlineTime, 'MM-DD HH:mm:ss') : '--' }} 最后上线时间：{{
device.onlineTime ? formatDate(device.onlineTime, 'MM-DD HH:mm:ss') : '--'
}}
</div> </div>
</div> </div>
</template> </template>
<Map v-if="showMap" :center="getLocationString()" /> <div class="h-[400px] w-full">
<Map v-if="showMap" :center="getLocationString()" class="h-full w-full" />
<div
v-else
class="flex items-center justify-center h-full w-full bg-[var(--el-fill-color-light)] text-[var(--el-text-color-secondary)]"
>
<Icon icon="ep:warning" class="mr-2 text-warning" />
<span>暂无位置信息</span>
</div>
</div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
@ -210,29 +193,16 @@ const handleAuthInfoDialogClose = () => {
authDialogVisible.value = false authDialogVisible.value = false
} }
</script> </script>
<style scoped> <style scoped>
.info-list .info-item { /* 使用少量CSS覆盖el-descriptions组件的样式，使其更符合Tailwind的间距设计 */
display: flex; .device-descriptions :deep(.el-descriptions__label),
margin-bottom: 16px; .device-descriptions :deep(.el-descriptions__content) {
@apply px-4 py-3 flex items-center;
min-height: 50px;
} }
.info-list .info-item .label { .device-descriptions :deep(.el-descriptions__body) {
width: 100px; @apply p-0;
color: var(--el-text-color-secondary);
}
.info-list .info-item .value {
flex: 1;
color: var(--el-text-color-primary);
}
.map-card {
height: 100%;
}
.map-card :deep(.el-card__body) {
height: calc(100% - 55px);
padding: 0;
} }
</style> </style>

2
src/views/iot/product/product/ProductForm.vue
View File

@ -139,7 +139,7 @@ const formRules = reactive({
name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }], name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
categoryId: [{ required: true, message: '产品分类不能为空', trigger: 'change' }], categoryId: [{ required: true, message: '产品分类不能为空', trigger: 'change' }],
deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }], deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
locationType: [{ required: true, message: '定位类型不能为空', trigger: 'change' }], locationType: [{ required: false, message: '定位类型不能为空', trigger: 'change' }],
netType: [ netType: [
{ {
required: true, required: true,