feat: 设备群组（群组查询）

src/api/iot/device.ts

@@ -159,3 +159,30 @@ export const addDeviceCmd = (data: { deviceId: string, cmdLabel: string, cmdPara
     data
   })
 }
+
+/**
+ * 此函数发送一个 POST 请求以创建一个具有指定标签和上层组 ID 的新设备组。
+ * @param data - `data` 参数是一个包含两个属性的对象：
+ * @returns `addDeviceGroup` 函数返回一个解析为字符串的 Promise。该字符串是在使用提供的“数据”对象向“/deviceGroup”端点发出 POST 请求后服务器的响应。
+ */
+export const addDeviceGroup = (data: { groupLabel: string, upperGroupId: string }) => {
+  return request<string>({
+    url: '/deviceGroup',
+    method: 'POST',
+    data
+  })
+}
+
+/**
+ * 此函数发送 GET 请求以根据上层组 ID 参数检索设备组列表。
+ * @param params - `params` 参数是一个包含 `upperGroupId` 属性的对象。此属性是一个字符串，表示用户要为其检索子组列表的上层设备组的 ID。
+ * @returns `listDeviceGroup` 函数返回一个解析为字符串的 Promise。该字符串是使用提供的 params 对象作为查询参数向 `/deviceGroup` 端点发出 GET
+ * 请求的响应。
+ */
+export const listDeviceGroup = (params: { upperGroupId: string }) => {
+  return request<string>({
+    url: '/deviceGroup',
+    method: 'GET',
+    params
+  })
+}

src/controller/iot/device.ts

@@ -1,6 +1,7 @@
 import {
   addDevice, addSubDevice, delDevice, delDeviceMul, delDeviceTag,
-  getDeviceById, getDeviceCount, getDeviceList, getDeviceMsgList, addDeviceMsg, getDeviceTag, getSubDeviceList, updateDeviceLabel, addDeviceCmd, getDeviceCmdList, addDeviceTag
+  getDeviceById, getDeviceCount, getDeviceList, getDeviceMsgList, addDeviceMsg, getDeviceTag,
+  getSubDeviceList, updateDeviceLabel, addDeviceCmd, getDeviceCmdList, addDeviceTag, addDeviceGroup, listDeviceGroup
 } from '@/api/iot/device'
 import { DeviceMsgEnum } from '@/enum/common'
 import { message } from 'ant-design-vue'
@@ -141,4 +142,16 @@ export class DeviceContriller {
     await addDeviceCmd(data)
     message.success('新增命令成功')
   }
+
+  /** 设备分组 新增分组 */
+  static async postDeviceGroup (data: { groupLabel: string, upperGroupId: string }) {
+    await addDeviceGroup(data)
+    message.success('新增分组成功')
+  }
+
+  /** 设备分组 新增分组 */
+  static async listDeviceGroup (params: { upperGroupId: string }) {
+    await listDeviceGroup(params)
+    message.success('新增分组成功')
+  }
 }

src/pages/Iot/device/group.vue

@@ -1,8 +1,91 @@
 <template>
- <div>group</div>
+ <a-row :gutter="[8, 8]" >
+  <a-col :lg="5" :md="8" :xs="24">
+    <a-card style="height: 100%;" >
+      <template #title >
+        <a-row justify="space-between" align="middle" >
+          <a-col><a-button type="primary" >+ 新增设备群组</a-button></a-col>
+          <a-col><ReloadIconTsx :loading="state.groupLoading" @reload="getDeviceGroup"/></a-col>
+        </a-row>
+      </template>
+      <a-tree
+        v-model:expandedKeys="expandedKeys"
+        v-model:selectedKeys="selectedKeys"
+        v-model:checkedKeys="checkedKeys"
+        :tree-data="treeData"
+      >
+        <template #title="{ title, key }">
+          <a-space  >
+            <span> {{ title }} </span>
+            <plus-circle-outlined />
+            <delete-outlined />
+          </a-space>
+        </template>
+      </a-tree>
+    </a-card>
+  </a-col>
+  <a-col :lg="19" :md="16" :xs="24">
+    <a-card style="height: 100%;" >3</a-card>
+  </a-col>
+ </a-row>
 </template>
 
 <script lang="ts" setup >
+import { ReloadIconTsx } from '@/components/MicroComponents/index'
+import { DeviceContriller } from '@/controller'
+import { onMounted, reactive, ref, watch } from 'vue'
+import { PlusCircleOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+const treeData: TreeProps['treeData'] = [
+  {
+    title: '所有分组',
+    key: '0-0',
+    children: [
+      {
+        title: 'parent 1-0',
+        key: '0-0-0',
+        children: [
+          { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
+          { title: 'leaf', key: '0-0-0-1' }
+        ]
+      },
+      {
+        title: 'parent 1-1',
+        key: '0-0-1',
+        children: [{ key: '0-0-1-0', title: 'sss' }]
+      }
+    ]
+  }
+]
+
+const expandedKeys = ref<string[]>(['0-0-0', '0-0-1'])
+const selectedKeys = ref<string[]>(['0-0-0', '0-0-1'])
+const checkedKeys = ref<string[]>(['0-0-0', '0-0-1'])
+watch(expandedKeys, () => {
+  console.log('expandedKeys', expandedKeys)
+})
+watch(selectedKeys, () => {
+  console.log('selectedKeys', selectedKeys)
+})
+watch(checkedKeys, () => {
+  console.log('checkedKeys', checkedKeys)
+})
+
+const state = reactive({
+  groupLoading: false,
+  groupDateSource: []
+})
+
+const getDeviceGroup = async () => {
+  state.groupLoading = true
+  const data = await DeviceContriller.listDeviceGroup({ upperGroupId: '' })
+  state.groupLoading = false
+  state.groupDateSource = data
+}
+
+onMounted(() => {
+
+})
+
 </script>
 
 <style>

src/type/iot.d.ts

@@ -135,6 +135,11 @@ declare namespace IOT {
         'cmdPayload': any // '{"method":null,"params":null}',
         'deviceId': string
       }
+
+      interface Group {
+        'groupLabel': string, // 分组名字
+        'upperGroupId': string, // 上级分组id
+      }
     }
 
     namespace EVENT {