详情页面

src/views/devices/DetailsForm.vue

@@ -0,0 +1,181 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      label-width="100px"
+      :disabled="true"
+    >
+      <el-form-item label="设备ID">
+        <span>{{ formData.deviceKey }}</span>
+      </el-form-item>
+      <el-form-item label="设备名称">
+        <span>{{ formData.deviceName }}</span>
+      </el-form-item>
+      <el-form-item label="所属机构">
+        <span>{{ getOrgName(formData.productId) }}</span>
+      </el-form-item>
+      <el-form-item label="设备类型">
+        <span>{{ getDeviceTypeName(formData.deviceType) }}</span>
+      </el-form-item>
+      <el-form-item label="设备位置">
+        <span>{{ formData.address }}</span>
+      </el-form-item>
+      <el-form-item label="设备状态">
+        <span>{{ getDeviceStateName(formData.state) }}</span>
+      </el-form-item>
+      <el-form-item label="设备描述">
+        <span>{{ formData.description || '-' }}</span>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="dialogVisible = false">关 闭</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as DeviceApi from '@/api/iot/device/device'
+import * as ProductApi from '@/api/iot/product/product'
+import { DeviceStateEnum } from '@/api/iot/device/device'
+
+defineOptions({ name: 'DeviceDetailsForm' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中
+const formData = ref<DeviceApi.DeviceVO>({
+  id: 0,
+  deviceKey: '',
+  deviceName: '',
+  productId: 0,
+  productKey: '',
+  deviceType: 0,
+  nickname: '',
+  gatewayId: 0,
+  state: DeviceStateEnum.INACTIVE,
+  onlineTime: new Date(),
+  offlineTime: new Date(),
+  activeTime: new Date(),
+  createTime: new Date(),
+  ip: '',
+  firmwareVersion: '',
+  deviceSecret: '',
+  mqttClientId: '',
+  mqttUsername: '',
+  mqttPassword: '',
+  authType: '',
+  latitude: 0,
+  longitude: 0,
+  areaId: 0,
+  address: '',
+  serialNumber: '',
+  config: '',
+  description: '',
+  groupIds: []
+})
+
+const productList = ref<ProductApi.ProductVO[]>([]) // 产品列表
+
+// 获取机构名称
+const getOrgName = (productId: number) => {
+  const product = productList.value.find(item => item.id === productId)
+  return product?.name || '-'
+}
+
+// 获取设备类型名称
+const getDeviceTypeName = (type: number) => {
+  const dict = getIntDictOptions(DICT_TYPE.IOT_DEVICE_TYPE).find(item => item.value === type)
+  return dict?.label || '-'
+}
+
+// 获取设备状态名称
+const getDeviceStateName = (state: number) => {
+  const dict = getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATE).find(item => item.value === state)
+  return dict?.label || '-'
+}
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = '设备详情'
+  resetForm()
+  // 获取设备数据
+  if (id) {
+    formLoading.value = true
+    try {
+      // 这里模拟获取设备数据，实际项目中应该调用API
+      const mockDeviceData = {
+        id: id,
+        deviceKey: 'Device' + id,
+        deviceName: '测试设备' + id,
+        deviceType: 1,
+        state: DeviceStateEnum.INACTIVE,
+        address: '北京市/海淀区/中关村',
+        description: '这是一个测试设备的描述信息',
+        productId: 1,
+        productKey: 'product_key_' + id,
+        nickname: '设备昵称' + id,
+        gatewayId: 1,
+        onlineTime: new Date(),
+        offlineTime: new Date(),
+        activeTime: new Date(),
+        createTime: new Date(),
+        ip: '192.168.1.1',
+        firmwareVersion: '1.0.0',
+        deviceSecret: 'secret_' + id,
+        mqttClientId: 'client_' + id,
+        mqttUsername: 'username_' + id,
+        mqttPassword: 'password_' + id,
+        authType: 'password',
+        latitude: 39.123456,
+        longitude: 117.123456,
+        areaId: 1,
+        serialNumber: 'SN' + id,
+        config: '{}',
+        groupIds: []
+      }
+      formData.value = mockDeviceData
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: 0,
+    deviceKey: '',
+    deviceName: '',
+    productId: 0,
+    productKey: '',
+    deviceType: 0,
+    nickname: '',
+    gatewayId: 0,
+    state: DeviceStateEnum.INACTIVE,
+    onlineTime: new Date(),
+    offlineTime: new Date(),
+    activeTime: new Date(),
+    createTime: new Date(),
+    ip: '',
+    firmwareVersion: '',
+    deviceSecret: '',
+    mqttClientId: '',
+    mqttUsername: '',
+    mqttPassword: '',
+    authType: '',
+    latitude: 0,
+    longitude: 0,
+    areaId: 0,
+    address: '',
+    serialNumber: '',
+    config: '',
+    description: '',
+    groupIds: []
+  }
+}
+</script>

src/views/devices/DevFrom.vue

@@ -6,10 +6,14 @@
       :model="formData"
       :rules="formRules"
       label-width="100px"
+      :disabled="isDetail"
     >
       <el-form-item label="设备ID" prop="deviceId">
         <el-input v-model="formData.deviceId" placeholder="请输入设备ID" />
       </el-form-item>
+      <el-form-item label="设备名称" prop="deviceName">
+        <el-input v-model="formData.deviceName" placeholder="请输入设备名称" />
+      </el-form-item>
       <el-form-item label="所属机构" prop="orgId">
         <el-select v-model="formData.orgId" placeholder="请选择所属机构" @change="handleProductChange">
           <el-option
@@ -67,8 +71,8 @@
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button v-if="!isDetail" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button @click="dialogVisible = false">{{ isDetail ? '关 闭' : '取 消' }}</el-button>
     </template>
   </Dialog>
 </template>
@@ -97,9 +101,10 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const isDetail = ref(false) // 是否为详情模式
 const formData = ref<DeviceApi.DeviceVO>({
   id: undefined,
-  deviceKey: undefined,
+  deviceId: undefined,
   deviceName: undefined,
   productId: undefined,
   productKey: undefined,
@@ -122,14 +127,16 @@ const formData = ref<DeviceApi.DeviceVO>({
   longitude: undefined,
   areaId: undefined,
   address: undefined,
+  detailAddress: undefined,
   serialNumber: undefined,
   config: undefined,
+  description: undefined,
   groupIds: []
 })
 
 const formRules = reactive<FormRules>({
   deviceId: [{ required: true, message: '设备ID不能为空', trigger: 'blur' }],
-  orgId: [{ required: true, message: '所属机构不能为空', trigger: 'blur' }],
+  deviceName: [{ required: true, message: '设备名称不能为空', trigger: 'blur' }],
   deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'blur' }],
   address: [{ required: true, message: '设备位置不能为空', trigger: 'blur' }],
 })
@@ -145,12 +152,46 @@ const open = async (type: string, id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
+  isDetail.value = type === 'details' // 设置是否为详情模式
   resetForm()
   // 修改时，设置数据
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await DeviceApi.getDevice(id)
+      // 这里模拟获取设备数据，实际项目中应该调用API
+      const mockDeviceData = {
+        id: id,
+        deviceId: 'Device' + id,
+        deviceName: '测试设备' + id,
+        deviceType: 1,
+        state: DeviceStateEnum.INACTIVE,
+        address: '',
+        detailAddress: '测试地址123号',
+        description: '这是一个测试设备的描述信息',
+        productId: 1,
+        productKey: 'product_key_' + id,
+        nickname: '设备昵称' + id,
+        gatewayId: 1,
+        onlineTime: new Date(),
+        offlineTime: new Date(),
+        activeTime: new Date(),
+        createTime: new Date(),
+        ip: '192.168.1.1',
+        firmwareVersion: '1.0.0',
+        deviceSecret: 'secret_' + id,
+        mqttClientId: 'client_' + id,
+        mqttUsername: 'username_' + id,
+        mqttPassword: 'password_' + id,
+        authType: 'password',
+        latitude: 39.123456,
+        longitude: 117.123456,
+        areaId: 1,
+        serialNumber: 'SN' + id,
+        config: '{}',
+        groupIds: []
+      }
+      formData.value = mockDeviceData
+      
       // 处理地址数据
       if (formData.value.address) {
         const addressParts = formData.value.address.split('/')
@@ -176,10 +217,6 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
-  // 获得产品列表
-  productList.value = await ProductApi.getSimpleProductList()
-  // 获得分组列表
-  groupList.value = await DeviceGroupApi.getSimpleDeviceGroupList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -213,7 +250,7 @@ const submitForm = async () => {
 const resetForm = () => {
   formData.value = {
     id: undefined,
-    deviceKey: undefined,
+    deviceId: undefined,
     deviceName: undefined,
     productId: undefined,
     productKey: undefined,
@@ -236,8 +273,10 @@ const resetForm = () => {
     longitude: undefined,
     areaId: undefined,
     address: undefined,
+    detailAddress: undefined,
     serialNumber: undefined,
     config: undefined,
+    description: undefined,
     groupIds: []
   }
   selectedOptions.value = []

src/views/devices/devices_cards.vue

@@ -29,7 +29,7 @@
         </p>
         <p class="detail-item">
           <span class="label">位置：</span>
-          <span class="value">{{ deviceInfo.location }}</span>
+          <span class="value">{{ deviceInfo.address }}</span>
         </p>
       </div>
       <div class="divider"></div>
@@ -82,7 +82,7 @@ const props = defineProps({
       id: '',
       name: '',
       type: '',
-      location: '',
+      address: '',
       status: 'normal',
       statusText: '正常'
     })

src/views/devices/index.vue

@@ -76,6 +76,7 @@
 
   <!-- 设备表单 -->
   <DeviceForm ref="deviceFormRef" @success="handleQuery" />
+  <DetailsForm ref="detailsFormRef" @success="handleQuery" />
 </template>
 
 <script setup lang="ts">
@@ -85,6 +86,7 @@ import { getIntDictOptions } from '@/utils/dict'
 import { DICT_TYPE } from '@/utils/dict'
 import DeviceCard from '../devices/devices_cards.vue'
 import DeviceForm from './DevFrom.vue'
+import DetailsForm from './DetailsForm.vue'
 
 // 查询参数
 interface QueryParams {
@@ -105,7 +107,7 @@ const deviceList = ref([
     id: 'Blood001',
     name: '血压仪',
     type: '血压仪',
-    location: '天津市/西青区/精武镇',
+    address: '天津市/市辖区/西青区/精武镇',
     status: 'normal',
     statusText: '在线'
   },
@@ -113,7 +115,7 @@ const deviceList = ref([
     id: 'Glucose001',
     name: '血糖仪',
     type: '血糖仪',
-    location: '河北省/廊坊市/安次区',
+    address: '河北省/廊坊市/安次区',
     status: 'warning',
     statusText: '待激活'
   },
@@ -121,7 +123,7 @@ const deviceList = ref([
     id: 'Oxygen001',
     name: '血氧仪',
     type: '血氧仪',
-    location: '四川省/绵阳市/涪城区',
+    address: '四川省/绵阳市/涪城区',
     status: 'error',
     statusText: '离线'
   }
@@ -131,6 +133,8 @@ const deviceList = ref([
 const queryFormRef = ref()
 // 设备表单引用
 const deviceFormRef = ref()
+// 设备详情表单引用
+const detailsFormRef = ref()
 
 // 查询方法
 const handleQuery = () => {
@@ -145,14 +149,17 @@ const resetQuery = () => {
 }
 
 // 打开表单
-const openForm = (type: string, id?: number) => {
+const openForm = (type: string) => {
-  deviceFormRef.value?.open(type, id)
+  deviceFormRef.value?.open(type)
 }
 
 // 处理设备操作
 const handleDeviceAction = (action: any) => {
-  if (action.type === 'detail') {
+  if (action.action === 'details') {
-    openForm('update', action.device.id)
+    // 打开表单并加载设备数据
+    detailsFormRef.value?.open(action.deviceId)
+  } else {
+    console.log('设备操作：', action)
   }
 }