From 4931dd2a5ebbfbadc9d118c415e43eb30e85dcab Mon Sep 17 00:00:00 2001
From: LSF <695944503@qq.com>
Date: Tue, 23 Jul 2024 19:35:18 +0800
Subject: [PATCH] add:iot init

---
 src/api/iot/device.ts                   |  32 +++++
 src/views/iot/device/add-or-update.vue  | 120 ++++++++++++++++
 src/views/iot/device/device-debug.vue   | 173 ++++++++++++++++++++++++
 src/views/iot/device/device-details.vue |  38 ++++++
 src/views/iot/device/device-event.vue   |  71 ++++++++++
 src/views/iot/device/device-info.vue    | 161 ++++++++++++++++++++++
 src/views/iot/device/device-service.vue |  67 +++++++++
 src/views/iot/device/index.vue          | 121 +++++++++++++++++
 8 files changed, 783 insertions(+)
 create mode 100644 src/api/iot/device.ts
 create mode 100644 src/views/iot/device/add-or-update.vue
 create mode 100644 src/views/iot/device/device-debug.vue
 create mode 100644 src/views/iot/device/device-details.vue
 create mode 100644 src/views/iot/device/device-event.vue
 create mode 100644 src/views/iot/device/device-info.vue
 create mode 100644 src/views/iot/device/device-service.vue
 create mode 100644 src/views/iot/device/index.vue

diff --git a/src/api/iot/device.ts b/src/api/iot/device.ts
new file mode 100644
index 0000000..1b1080a
--- /dev/null
+++ b/src/api/iot/device.ts
@@ -0,0 +1,32 @@
+import service from "@/utils/request";
+
+export const useIot_deviceApi = (id: number) => {
+  return service.get("/iot/device/" + id);
+};
+
+export const useIot_deviceSubmitApi = (dataForm: any) => {
+  if (dataForm.id) {
+    return service.put("/iot/device", dataForm);
+  } else {
+    return service.post("/iot/device", dataForm);
+  }
+};
+
+// 发送指令，等待设备回复
+export const useIot_deviceSyncSendCommandApi = (dataForm: any) => {
+  return service.post("/iot/device/syncSendCommand", dataForm);
+};
+// 发送指令，等待设备回复，调试模式
+export const useIot_deviceSyncSendCommandDebugApi = (dataForm: any) => {
+  return service.post("/iot/device/syncSendCommand/debug", dataForm);
+};
+
+// 发送指令，不等待设备回复
+export const useIot_deviceAsyncSendCommandApi = (dataForm: any) => {
+  return service.post("/iot/device/asyncSendCommand", dataForm);
+};
+
+//模拟设备属性数据上报
+export const useIot_deviceSimulateDeviceReportAttributeDataApi = (dataForm: any) => {
+  return service.post("/iot/device/simulateDeviceReportAttributeData", dataForm);
+};
diff --git a/src/views/iot/device/add-or-update.vue b/src/views/iot/device/add-or-update.vue
new file mode 100644
index 0000000..c1ce6c3
--- /dev/null
+++ b/src/views/iot/device/add-or-update.vue
@@ -0,0 +1,120 @@
+<template>
+  <el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false">
+    <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="200px" @keyup.enter="submitHandle()">
+      <el-form-item label="编码" prop="code">
+        <el-input v-model="dataForm.code" placeholder="编码"></el-input>
+      </el-form-item>
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="dataForm.name" placeholder="名称"></el-input>
+      </el-form-item>
+      <el-form-item label="设备类型" prop="type">
+        <ma-dict-select v-model="dataForm.type" dict-type="device_type" placeholder="设备类型"
+                        clearable></ma-dict-select>
+      </el-form-item>
+      <el-form-item label="唯一标识码" prop="uid">
+        <el-input v-model="dataForm.uid" placeholder="唯一标识码"></el-input>
+      </el-form-item>
+      <el-form-item label="设备密钥" prop="secret">
+        <el-input v-model="dataForm.secret" placeholder="设备密钥"></el-input>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <ma-dict-radio v-model="dataForm.status" dict-type="enable_disable"></ma-dict-radio>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="submitHandle()">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { ElMessage } from "element-plus/es";
+import { useIot_deviceApi, useIot_deviceSubmitApi } from "@/api/iot/device";
+
+const emit = defineEmits(["refreshDataList"]);
+
+const visible = ref(false);
+const dataFormRef = ref();
+
+const dataForm = reactive({
+  id: "",
+  code: "",
+  name: "",
+  type: "",
+  uid: "",
+  secret: "",
+  status: "",
+  tenantId: "",
+  creator: "",
+  createTime: "",
+  updater: "",
+  updateTime: ""
+});
+
+const init = (id?: number) => {
+  visible.value = true;
+  dataForm.id = "";
+
+  // 重置表单数据
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+  }
+
+  if (id) {
+    getIot_device(id);
+  }
+};
+
+const getIot_device = (id: number) => {
+  useIot_deviceApi(id).then(res => {
+    Object.assign(dataForm, res.data);
+  });
+};
+
+const dataRules = ref({
+  code: [
+    { required: true, message: "编码不能为空", trigger: "blur" }
+  ],
+  name: [
+    { required: true, message: "名称不能为空", trigger: "blur" }
+  ],
+  type: [
+    { required: true, message: "设备类型不能为空", trigger: "blur" }
+  ],
+  uid: [
+    { required: true, message: "唯一标识码不能为空", trigger: "blur" }
+  ],
+  secret: [
+    { required: true, message: "设备密钥不能为空", trigger: "blur" }
+  ],
+  status: [
+    { required: true, message: "状态不能为空", trigger: "blur" }
+  ]
+});
+
+// 表单提交
+const submitHandle = () => {
+  dataFormRef.value.validate((valid: boolean) => {
+    if (!valid) {
+      return false;
+    }
+
+    useIot_deviceSubmitApi(dataForm).then(() => {
+      ElMessage.success({
+        message: "操作成功",
+        duration: 500,
+        onClose: () => {
+          visible.value = false;
+          emit("refreshDataList");
+        }
+      });
+    });
+  });
+};
+
+defineExpose({
+  init
+});
+</script>
diff --git a/src/views/iot/device/device-debug.vue b/src/views/iot/device/device-debug.vue
new file mode 100644
index 0000000..f953eec
--- /dev/null
+++ b/src/views/iot/device/device-debug.vue
@@ -0,0 +1,173 @@
+<template>
+  <h3>需要开启MQTT监听功能</h3>
+  <el-divider>服务下发</el-divider>
+  <div>
+    <el-form v-loading="loading" :model="serviceDebugDataForm">
+      <el-row :gutter="30">
+        <el-col :span="8">
+          <el-form-item label="接入协议" prop="accessProtocol">
+            <el-select v-model="serviceDebugDataForm.accessProtocol">
+              <el-option label="MQTT" value="MQTT" />
+              <el-option label="CoAP" value="CoAP" disabled />
+              <el-option label="LwM2M" value="LwM2M" disabled />
+              <el-option label="HTTP" value="HTTP" disabled />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="指令" prop="command">
+            <ma-dict-select v-model="serviceDebugDataForm.command" dict-type="device_command"
+                            style="width: 100%"></ma-dict-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="30">
+        <el-col :span="16">
+          <el-form-item label="设备响应" prop="waitResponse">
+            <el-radio-group v-model="serviceDebugDataForm.waitResponse">
+              <el-radio value="0" size="large">不等待</el-radio>
+              <el-radio value="1" size="large">等待</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="30">
+        <el-col :span="16">
+          <el-form-item label="指令内容" prop="payload">
+            <el-input v-model="serviceDebugDataForm.payload" placeholder="请输入指令内容" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="30">
+        <el-col :span="8">
+          <el-form-item>
+            <el-button v-auth="'iot:device:send'" type="primary" @click="serviceDebugHandle(serviceDebugDataForm)">
+              下发
+            </el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+  <el-divider>属性上报</el-divider>
+  <div>
+    <el-form :model="propertyDataForm">
+      <el-row :gutter="30">
+        <el-col :span="8">
+          <el-form-item label="接入协议" prop="accessProtocol">
+            <el-select v-model="propertyDataForm.accessProtocol">
+              <el-option label="MQTT" value="MQTT" />
+              <el-option label="CoAP" value="CoAP" disabled />
+              <el-option label="LwM2M" value="LwM2M" disabled />
+              <el-option label="HTTP" value="HTTP" disabled />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="属性" prop="propertyType">
+            <ma-dict-select v-model="propertyDataForm.propertyType" dict-type="device_property"
+                            style="width: 100%"></ma-dict-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="30">
+        <el-col :span="16">
+          <el-form-item label="属性值" prop="payload">
+            <template v-if="propertyDataForm.propertyType === 'RUNNING_STATUS'">
+              <ma-dict-select v-model="propertyDataForm.payload" dict-type="device_running_status"
+                              style="width: 100%"></ma-dict-select>
+            </template>
+            <template v-else-if="propertyDataForm.propertyType === 'BATTERY_PERCENT'">
+              <el-input-number v-model="propertyDataForm.payload" :min="0" :max="100" />
+            </template>
+            <template v-else-if="propertyDataForm.propertyType === 'TEMPERATURE'">
+              <el-input-number v-model="propertyDataForm.payload" :min="0" :max="100" />
+            </template>
+            <template v-else>
+              <el-input v-model="propertyDataForm.payload" placeholder="请输入最新的属性值" clearable />
+            </template>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="30">
+        <el-col :span="8">
+          <el-form-item>
+            <el-button v-auth="'iot:device:report'" type="primary"
+                       @click="deviceReportAttributeDataHandle(propertyDataForm)">上报
+            </el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+
+</template>
+
+<script setup lang="ts">
+import { defineProps, reactive, ref } from "vue";
+import {
+  useIot_deviceAsyncSendCommandApi,
+  useIot_deviceSimulateDeviceReportAttributeDataApi,
+  useIot_deviceSyncSendCommandDebugApi
+} from "@/api/iot/device";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+  deviceId: {
+    type: Number,
+    required: true
+  }
+});
+
+const serviceDebugDataForm = reactive({
+  deviceId: props.deviceId,
+  accessProtocol: "MQTT",
+  command: "LOCK",
+  payload: "",
+  waitResponse: "0"
+});
+
+//设备属性上报表单
+const propertyDataForm = reactive({
+  deviceId: props.deviceId,
+  accessProtocol: "MQTT",
+  propertyType: "RUNNING_STATUS",
+  command: "LOCK",
+  payload: "0"
+});
+
+
+const loading = ref(false);
+
+const serviceDebugHandle = (serviceDebugDataForm: any) => {
+  if (serviceDebugDataForm.waitResponse == "1") {
+    loading.value = true;
+    useIot_deviceSyncSendCommandDebugApi(serviceDebugDataForm)
+      .then(res => {
+        ElMessage.success({
+          message: res.data
+
+        });
+      }).finally(() => {
+      loading.value = false;
+    });
+  } else {
+    useIot_deviceAsyncSendCommandApi(serviceDebugDataForm).then(() => {
+      ElMessage.success({
+        message: "服务指令下发成功！"
+      });
+    });
+  }
+};
+
+//设备属性上报
+
+const deviceReportAttributeDataHandle = (propertyDataForm: any) => {
+  useIot_deviceSimulateDeviceReportAttributeDataApi(propertyDataForm).then(() => {
+    ElMessage.success({
+      message: "属性上报成功！"
+    });
+  });
+};
+
+</script>
diff --git a/src/views/iot/device/device-details.vue b/src/views/iot/device/device-details.vue
new file mode 100644
index 0000000..97dce5f
--- /dev/null
+++ b/src/views/iot/device/device-details.vue
@@ -0,0 +1,38 @@
+<template>
+  <el-card>
+    <el-tabs v-model="activeName">
+      <el-tab-pane v-auth="'iot:device:info'" label="设备详情" name="info">
+        <DeviceInfo :device-id=props.deviceId />
+      </el-tab-pane>
+      <el-tab-pane v-auth="'iot:device:info'" label="服务" name="service">
+        <DeviceService :device-id=props.deviceId />
+      </el-tab-pane>
+      <el-tab-pane v-auth="'iot:device:info'" label="事件" name="event">
+        <DeviceEvent :device-id=props.deviceId />
+      </el-tab-pane>
+      <el-tab-pane v-auth="'iot:device:update'" label="调试" name="debug">
+        <DeviceDebug :device-id=props.deviceId />
+      </el-tab-pane>
+    </el-tabs>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { defineProps, ref } from "vue";
+import DeviceService from "./device-service.vue";
+import DeviceEvent from "./device-event.vue";
+import DeviceInfo from "./device-info.vue";
+import DeviceDebug from "./device-debug.vue";
+
+
+// 接收来自第一个页面的 deviceId
+const props = defineProps({
+  deviceId: {
+    type: Number,
+    required: true
+  }
+});
+
+// 默认显示的标签页名称
+const activeName = ref("info");
+</script>
diff --git a/src/views/iot/device/device-event.vue b/src/views/iot/device/device-event.vue
new file mode 100644
index 0000000..b2cb9bb
--- /dev/null
+++ b/src/views/iot/device/device-event.vue
@@ -0,0 +1,71 @@
+<template>
+  <el-card class="layout-query">
+    <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
+      <el-form-item prop="serviceType">
+        <ma-dict-select v-model="state.queryForm.eventTypeEnum" dict-type="device_event_type" style="width: 100%"
+                        clearable></ma-dict-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
+      </el-form-item>
+    </el-form>
+  </el-card>
+
+  <el-card>
+    <el-table v-loading="state.dataListLoading" :data="state.dataList" border class="layout-table"
+              @selection-change="selectionChangeHandle">
+      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+      <el-table-column prop="eventUid" label="事件ID" header-align="center" align="center"></el-table-column>
+      <ma-dict-column prop="eventTypeEnum" label="事件类型" dict-type="device_event_type"></ma-dict-column>
+      <el-table-column prop="eventPayload" label="事件内容" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="eventTime" label="事件时间" header-align="center" align="center"></el-table-column>
+    </el-table>
+    <el-pagination
+      :current-page="state.page"
+      :page-sizes="state.pageSizes"
+      :page-size="state.limit"
+      :total="state.total"
+      layout="total, sizes, prev, pager, next, jumper"
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+    >
+    </el-pagination>
+
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
+  </el-card>
+</template>
+
+<script setup lang="ts" name="IotIot_device_service_logIndex">
+import { useCrud } from "@/hooks";
+import { defineProps, onMounted, reactive, ref } from "vue";
+import { IHooksOptions } from "@/hooks/interface";
+import AddOrUpdate from "./add-or-update.vue";
+
+const state: IHooksOptions = reactive({
+  dataListUrl: "/iot/device_event_log/page",
+  deleteUrl: "/iot/device_event_log",
+  queryForm: {
+    deviceId: ''
+  }
+});
+
+const queryRef = ref();
+const props = defineProps({
+  deviceId: {
+    type: Number,
+    required: true
+  }
+});
+
+onMounted(() => {
+  state.queryForm.deviceId = props.deviceId
+});
+
+const {
+  getDataList,
+  selectionChangeHandle,
+  sizeChangeHandle,
+  currentChangeHandle
+} = useCrud(state);
+</script>
diff --git a/src/views/iot/device/device-info.vue b/src/views/iot/device/device-info.vue
new file mode 100644
index 0000000..f1ff5f0
--- /dev/null
+++ b/src/views/iot/device/device-info.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="card-container">
+    <h4>设备信息</h4>
+    <el-card>
+      <el-divider content-position="left">设备标识</el-divider>
+      <el-row :gutter="30">
+        <el-col :span="12">
+          <el-form-item label="编码">
+            <el-input v-model="dataForm.code" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备名称">
+            <el-input v-model="dataForm.name" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="唯一标识码">
+            <el-input v-model="dataForm.uid" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-divider content-position="left">基本信息</el-divider>
+      <el-row :gutter="30">
+        <el-col :span="12">
+          <el-form-item label="设备状态">
+            <ma-dict-select v-model="dataForm.status" dict-type="enable_disable" disabled
+                            style="width: 100%"></ma-dict-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="运行状态">
+            <ma-dict-select v-model="dataForm.runningStatus" dict-type="device_running_status" disabled
+                            style="width: 100%"></ma-dict-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="30">
+        <el-col :span="12">
+          <el-form-item label="上线时间">
+            <el-input v-model="dataForm.upTime" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="下线时间">
+            <el-input v-model="dataForm.downTime" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="30">
+        <el-col :span="12">
+          <el-form-item label="设备版本">
+            <el-input v-model="dataForm.appVersion" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="电池电量">
+            <el-input v-model="dataForm.batteryPercent" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备温度">
+            <el-input v-model="dataForm.temperature" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-divider content-position="left">创建信息</el-divider>
+      <el-row :gutter="30">
+        <el-col :span="12">
+          <el-form-item label="创建时间">
+            <el-input v-model="dataForm.createTime" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="更新时间">
+            <el-input v-model="dataForm.updateTime" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-card>
+    <h4>设备类型信息</h4>
+    <el-card>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="设备类型">
+            <ma-dict-select v-model="dataForm.type" dict-type="device_type" disabled
+                            style="width: 100%"></ma-dict-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, onMounted, reactive, ref } from "vue";
+import { useIot_deviceApi } from "@/api/iot/device";
+
+const visible = ref(false);
+const dataFormRef = ref();
+
+const dataForm = reactive({
+  id: "",
+  code: "",
+  name: "",
+  type: "",
+  uid: "",
+  secret: "",
+  appVersion: "",
+  batteryPercent: "",
+  temperature: "",
+  status: "",
+  runningStatus: "",
+  upTime: "",
+  downTime: "",
+  tenantId: "",
+  creator: "",
+  createTime: "",
+  updater: "",
+  updateTime: ""
+});
+
+const props = defineProps({
+  deviceId: {
+    type: Number,
+    required: true
+  }
+});
+const init = () => {
+  visible.value = true;
+  // 重置表单数据
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+  }
+
+  if (props.deviceId) {
+    getIot_device(props.deviceId);
+  }
+};
+
+const getIot_device = (id: number) => {
+  useIot_deviceApi(id).then(res => {
+    Object.assign(dataForm, res.data);
+  });
+};
+
+
+onMounted(() => {
+  init();
+});
+
+</script>
+<style scoped>
+.card-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+</style>
diff --git a/src/views/iot/device/device-service.vue b/src/views/iot/device/device-service.vue
new file mode 100644
index 0000000..c11cccf
--- /dev/null
+++ b/src/views/iot/device/device-service.vue
@@ -0,0 +1,67 @@
+<template>
+  <el-card class="layout-query">
+    <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
+      <el-form-item prop="deviceCommand">
+        <ma-dict-select v-model="state.queryForm.deviceCommandEnum" dict-type="device_command" style="width: 100%"
+                        clearable></ma-dict-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
+      </el-form-item>
+    </el-form>
+  </el-card>
+
+  <el-card>
+    <el-table v-loading="state.dataListLoading" :data="state.dataList" border class="layout-table"
+              @selection-change="selectionChangeHandle">
+      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+      <el-table-column prop="serviceUid" label="服务ID" header-align="center" align="center"></el-table-column>
+      <ma-dict-column prop="deviceCommandEnum" label="服务类型" dict-type="device_command"></ma-dict-column>
+      <el-table-column prop="servicePayload" label="下发内容" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="serviceTime" label="下发时间" header-align="center" align="center"></el-table-column>
+    </el-table>
+    <el-pagination
+      :current-page="state.page"
+      :page-sizes="state.pageSizes"
+      :page-size="state.limit"
+      :total="state.total"
+      layout="total, sizes, prev, pager, next, jumper"
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+    >
+    </el-pagination>
+  </el-card>
+</template>
+
+<script setup lang="ts" name="IotIot_device_service_logIndex">
+import { useCrud } from "@/hooks";
+import { defineProps, onMounted, reactive, ref } from "vue";
+import { IHooksOptions } from "@/hooks/interface";
+
+const state: IHooksOptions = reactive({
+  dataListUrl: "/iot/device_service_log/page",
+  deleteUrl: "/iot/device_service_log",
+  queryForm: {
+    deviceId: ''
+  }
+});
+
+const queryRef = ref();
+const props = defineProps({
+  deviceId: {
+    type: Number,
+    required: true
+  }
+});
+
+onMounted(() => {
+  state.queryForm.deviceId = props.deviceId
+});
+
+const {
+  getDataList,
+  selectionChangeHandle,
+  sizeChangeHandle,
+  currentChangeHandle
+} = useCrud(state);
+</script>
diff --git a/src/views/iot/device/index.vue b/src/views/iot/device/index.vue
new file mode 100644
index 0000000..c078056
--- /dev/null
+++ b/src/views/iot/device/index.vue
@@ -0,0 +1,121 @@
+<template>
+  <el-card class="layout-query">
+    <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
+      <el-form-item prop="type">
+        <ma-dict-select v-model="state.queryForm.type" dict-type="device_type" placeholder="设备类型"
+                        clearable></ma-dict-select>
+      </el-form-item>
+      <el-form-item prop="status">
+        <ma-dict-select v-model="state.queryForm.status" dict-type="enable_disable" placeholder="设备状态"
+                        clearable></ma-dict-select>
+      </el-form-item>
+      <el-form-item prop="runningStatus">
+        <ma-dict-select v-model="state.queryForm.runningStatus" dict-type="device_running_status" placeholder="运行状态"
+                        clearable></ma-dict-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="RefreshRight" @click="reset(queryRef)">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </el-card>
+
+  <el-card>
+    <el-space>
+      <el-space>
+        <el-button v-auth="'iot:device:save'" icon="Plus" type="primary" @click="addOrUpdateHandle()">新增
+        </el-button>
+      </el-space>
+      <el-space>
+        <el-button v-auth="'iot:device:delete'" icon="Delete" plain type="danger" @click="deleteBatchHandle()">
+          批量删除
+        </el-button>
+      </el-space>
+    </el-space>
+    <el-table v-loading="state.dataListLoading" :data="state.dataList" border class="layout-table"
+              @selection-change="selectionChangeHandle">
+      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+      <ma-dict-column prop="status" label="状态" dict-type="enable_disable"></ma-dict-column>
+      <el-table-column prop="code" label="编码" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="name" label="名称" header-align="center" align="center"></el-table-column>
+      <ma-dict-column prop="type" label="设备类型" dict-type="device_type"></ma-dict-column>
+      <el-table-column prop="uid" label="唯一标识码" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="secret" label="设备密钥" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="appVersion" label="App版本" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="batteryPercent" label="电池电量" header-align="center"
+                       align="center"></el-table-column>
+      <el-table-column prop="temperature" label="温度" header-align="center" align="center"></el-table-column>
+      <ma-dict-column prop="runningStatus" label="运行状态" dict-type="device_running_status"></ma-dict-column>
+      <el-table-column prop="upTime" label="最近在线时间" header-align="center" align="center"></el-table-column>
+      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="200">
+        <template #default="scope">
+          <el-button v-auth="'iot:device:info'" type="primary" link @click="showDeviceDetailsHandle(scope.row)">
+            设备详情
+          </el-button>
+          <el-button v-auth="'iot:device:delete'" type="primary" link @click="deleteBatchHandle(scope.row.id)">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :current-page="state.page"
+      :page-sizes="state.pageSizes"
+      :page-size="state.limit"
+      :total="state.total"
+      layout="total, sizes, prev, pager, next, jumper"
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+    >
+    </el-pagination>
+
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
+    <el-drawer v-if="deviceDetailsVisible" v-model="deviceDetailsVisible" :title="deviceDetailsTitle" :size="800"
+               :close-on-press-escape="false">
+      <device-details :device-id="deviceId"></device-details>
+    </el-drawer>
+  </el-card>
+
+
+</template>
+
+<script setup lang="ts" name="IotIot_deviceIndex">
+import { useCrud } from "@/hooks";
+import { reactive, ref } from "vue";
+import { IHooksOptions } from "@/hooks/interface";
+import DeviceDetails from "./device-details.vue";
+import AddOrUpdate from "./add-or-update.vue";
+
+
+const state: IHooksOptions = reactive({
+  dataListUrl: "/iot/device/page",
+  deleteUrl: "/iot/device",
+  queryForm: {}
+});
+
+const queryRef = ref();
+const addOrUpdateRef = ref();
+
+const deviceDetailsVisible = ref(false);
+const deviceDetailsTitle = ref();
+const deviceId = ref();
+const showDeviceDetailsHandle = (row: any) => {
+  deviceId.value = row.id;
+  deviceDetailsTitle.value = "设备 - " + row.code + "-" + row.name;
+  deviceDetailsVisible.value = true;
+};
+const addOrUpdateHandle = (id?: number) => {
+  addOrUpdateRef.value.init(id);
+};
+
+const {
+  getDataList,
+  selectionChangeHandle,
+  sizeChangeHandle,
+  currentChangeHandle,
+  deleteBatchHandle,
+  reset
+} = useCrud(state);
+</script>
-- 
Gitee