【新增功能】IOT：设备数据展示

src/api/iot/device/index.ts

@@ -35,6 +35,19 @@ export interface DeviceUpdateStatusVO {
   status: number // 设备状态
 }
 
+// IoT 设备数据 VO
+export interface DeviceDataVO {
+  deviceId: number // 设备编号
+  thinkModelFunctionId: number // 物模型编号
+  productKey: string // 产品标识
+  deviceName: string // 设备名称
+  identifier: string // 属性标识符
+  name: string // 属性名称
+  dataType: string // 数据类型
+  updateTime: Date // 更新时间
+  value: string // 最新值
+}
+
 // 设备 API
 export const DeviceApi = {
   // 查询设备分页
@@ -70,5 +83,10 @@ export const DeviceApi = {
   // 获取设备数量
   getDeviceCount: async (productId: number) => {
     return await request.get({ url: `/iot/device/count?productId=` + productId })
+  },
+
+  // 获取设备属性最新数据
+  getDevicePropertiesLatestData: async (params: any) => {
+    return await request.get({ url: `/iot/device/data/latest-data`, params })
   }
 }

src/api/iot/product/index.ts

@@ -23,6 +23,12 @@ export enum ValidateTypeEnum {
   WEAK = 0, // 弱校验
   NONE = 1 // 免校验
 }
+// IOT 产品设备类型枚举类 0: 直连设备, 1: 网关子设备, 2: 网关设备
+export enum DeviceTypeEnum {
+  DEVICE = 0, // 直连设备
+  GATEWAY_SUB = 1, // 网关子设备
+  GATEWAY = 2 // 网关设备
+}
 
 // IoT 产品 API
 export const ProductApi = {
@@ -63,6 +69,6 @@ export const ProductApi = {
 
   // 查询产品（精简）列表
   getSimpleProductList() {
-    return request.get({ url: '/iot/product/list-all-simple' })
+    return request.get({ url: '/iot/product/simple-list' })
   }
 }

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

+<template>
+  <Dialog title="查看数据" v-model="dialogVisible">
+    <p>查看数据</p>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { DeviceApi, DeviceVO } from '@/api/iot/device'
+import { ProductApi } from '@/api/iot/product'
+
+/** IoT 设备 表单 */
+defineOptions({ name: 'IoTDeviceForm' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false)
+
+/** 打开弹窗 */
+const open = async (deviceId: number, identifier: String) => {
+  dialogVisible.value = true
+
+  detailLoading.value = true
+  try {
+    // formData.value = await DeviceApi.getDevice(id)
+  } finally {
+    detailLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>

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

+<template>
+  <ContentWrap>
+    <el-tabs>
+      <el-tab-pane label="运行状态">
+        <ContentWrap>
+          <!-- 搜索工作栏 -->
+          <el-form
+            class="-mb-15px"
+            :model="queryParams"
+            ref="queryFormRef"
+            :inline="true"
+            label-width="68px"
+          >
+            <el-form-item label="标识符" prop="identifier">
+              <el-input
+                v-model="queryParams.identifier"
+                placeholder="请输入标识符"
+                clearable
+                class="!w-240px"
+              />
+            </el-form-item>
+            <el-form-item label="属性名称" prop="name">
+              <el-input
+                v-model="queryParams.name"
+                placeholder="请输入属性名称"
+                clearable
+                class="!w-240px"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="handleQuery"
+                ><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button
+              >
+              <el-button @click="resetQuery"
+                ><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </ContentWrap>
+        <ContentWrap>
+          <el-tabs>
+            <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="name" />
+              <el-table-column label="数据类型" align="center" prop="dataType" />
+              <el-table-column
+                label="更新时间"
+                align="center"
+                prop="updateTime"
+                :formatter="dateFormatter"
+                width="180px"
+              />
+              <el-table-column label="最新值" align="center" prop="value" />
+              <el-table-column label="操作" align="center">
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    @click="openDetail(scope.row.deviceId, scope.row.identifier)"
+                  >
+                    查看数据
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-tabs>
+          <!-- 表单弹窗：添加/修改 -->
+          <DeviceDataDetail ref="detailRef" :device="device" :product="product" />
+        </ContentWrap>
+      </el-tab-pane>
+      <el-tab-pane label="事件管理">
+        <p>事件管理</p>
+      </el-tab-pane>
+      <el-tab-pane label="服务调用">
+        <p>服务调用</p>
+      </el-tab-pane>
+    </el-tabs>
+  </ContentWrap>
+</template>
+<script setup lang="ts">
+import { ProductVO } from '@/api/iot/product'
+import { DeviceApi, DeviceDataVO, DeviceVO } from '@/api/iot/device'
+import { dateFormatter } from '@/utils/formatTime'
+import DeviceDataDetail from './DeviceDataDetail.vue'
+
+const props = defineProps<{ product: ProductVO; device: DeviceVO }>()
+
+const loading = ref(true) // 列表的加载中
+const list = ref<DeviceDataVO[]>([]) // 列表的数据
+const queryParams = reactive({
+  deviceId: -1,
+  identifier: undefined as string | undefined,
+  name: undefined as string | undefined
+})
+
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    queryParams.deviceId = props.device.id
+    list.value = await DeviceApi.getDevicePropertiesLatestData(queryParams)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  queryParams.identifier = undefined
+  queryParams.name = undefined
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const detailRef = ref()
+const openDetail = (deviceId: number, identifier: String) => {
+  detailRef.value.open(deviceId, identifier)
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

src/views/iot/device/detail/index.vue

@@ -11,17 +11,21 @@
         <DeviceDetailsInfo :product="product" :device="device" />
       </el-tab-pane>
       <el-tab-pane label="Topic 列表" />
-      <el-tab-pane label="物模型数据" />
-      <el-tab-pane label="子设备管理" />
+      <el-tab-pane label="物模型数据">
+        <DeviceDetailsModel :product="product" :device="device" />
+      </el-tab-pane>
+      <el-tab-pane label="子设备管理" v-if="product.deviceType === DeviceTypeEnum.GATEWAY" />
+      <el-tab-pane label="设备影子" />
     </el-tabs>
   </el-col>
 </template>
 <script lang="ts" setup>
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { DeviceApi, DeviceVO } from '@/api/iot/device'
-import { ProductApi, ProductVO } from '@/api/iot/product'
+import { DeviceTypeEnum, ProductApi, ProductVO } from '@/api/iot/product'
 import DeviceDetailsHeader from '@/views/iot/device/detail/DeviceDetailsHeader.vue'
 import DeviceDetailsInfo from '@/views/iot/device/detail/DeviceDetailsInfo.vue'
+import DeviceDetailsModel from '@/views/iot/device/detail/DeviceDetailsModel.vue'
 
 defineOptions({ name: 'IoTDeviceDetail' })
 

src/views/iot/product/ProductForm.vue

@@ -131,8 +131,6 @@ const formRules = reactive({
   deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
   netType: [
     {
-      // TODO @haohao：0、1、/2 最好前端也枚举下；另外，这里的 required 可以直接设置为 true。然后表单那些 v-if。只要不存在，它自动就不校验了哈
-      // required: formData.deviceType === 0 || formData.deviceType === 2,
       required: true,
       message: '联网方式不能为空',
       trigger: 'change'

src/views/iot/product/detail/ThinkModelFunction.vue

@@ -47,6 +47,8 @@
         </el-table-column>
         <el-table-column label="功能名称" align="center" prop="name" />
         <el-table-column label="标识符" align="center" prop="identifier" />
+        <el-table-column label="数据类型" align="center" prop="identifier" />
+        <el-table-column label="数据定义" align="center" prop="identifier" />
         <el-table-column label="操作" align="center">
           <template #default="scope">
             <el-button

src/views/iot/product/detail/ThinkModelFunctionForm.vue

@@ -138,7 +138,7 @@ const formRules = reactive({
       trigger: 'blur'
     },
     {
-      validator: (value, callback) => {
+      validator: (rule, value, callback) => {
         const reservedKeywords = ['set', 'get', 'post', 'property', 'event', 'time', 'value']
         if (reservedKeywords.includes(value)) {
           callback(
@@ -146,6 +146,8 @@ const formRules = reactive({
               'set, get, post, property, event, time, value 是系统保留字段，不能用于标识符定义'
             )
           )
+        } else if (/^\d+$/.test(value)) {
+          callback(new Error('标识符不能是纯数字'))
         } else {
           callback()
         }