feat: 🚀 设备管理模块接口联调

plop-templates/plopfile.cjs

@@ -45,30 +45,30 @@ module.exports = function (plop) {
       //   message: "是否生成页面的components文件夹",
       //   default: false
       // },
-      // {
-      //   type: "confirm",
-      //   name: "hasRoute",
-      //   message: "是否生成路由配置?",
-      //   default: true
-      // },
+      {
+        type: "confirm",
+        name: "hasRoute",
+        message: "是否生成路由配置?",
+        default: true
+      },
       // {
       //   type: "confirm",
       //   name: "hasAsyncRoute",
       //   message: "是否生成动态路由配置?",
       //   default: true
       // },
-      // {
-      //   type: "input",
-      //   name: "title",
-      //   message: "请输入路由title名称:",
-      //   when: answers => answers.hasAsyncRoute && answers.hasRoute,
-      //   validate: title => {
-      //     if (!title) {
-      //       return "路由title名称不能为空";
-      //     }
-      //     return true;
-      //   }
-      // },
+      {
+        type: "input",
+        name: "title",
+        message: "请输入路由title名称:",
+        when: answers => answers.hasAsyncRoute && answers.hasRoute,
+        validate: title => {
+          if (!title) {
+            return "路由title名称不能为空";
+          }
+          return true;
+        }
+      },
       {
         type: "confirm",
         name: "hasApi",

src/api/device.ts

 import { http } from "@/utils/http";
 
+// interface DeviceInfo {
+//   deviceName: string;
+//   // ... 其他属性
+// }
+
+type ResultData = {
+  fileId?: string;
+  records?: Array<any>;
+  [key: string]: any;
+  // data?: DeviceInfo;
+};
+
 type Result = {
-  success: boolean;
-  data?: {
-    /** 列表数据 */
-    list?: Array<any>;
-    [key: string]: any;
-  };
+  success?: boolean;
+  data: Array<ResultData>;
+  msg: string;
+  code: string;
+  requestId?: string;
+  id?: number;
+};
+
+type RcordsResult = {
+  success?: boolean;
+  data: ResultData;
+  msg: string;
+  code: string;
+  requestId?: string;
+  id?: number;
 };
 
 /** 添加设备 */
@@ -16,26 +37,89 @@ export const addDevice = (data?: object) => {
 
 /** 获取设备列表 */
 export const getDeviceList = (data?: object) => {
-  return http.request<Result>("post", "/device/api/device/list", { data });
+  return http.request<RcordsResult>("post", "/device/api/device/list", {
+    data
+  });
 };
-/** 删除设备 */
-export const setBlackList = (data?: object) => {
-  return http.request<Result>("post", "/device/api/device/set-black-list", {
+// 获取设备树形列表
+export const getDeviceTreeList = (data?: object) => {
+  return http.request<RcordsResult>("post", "/device/api/device/list_tree", {
     data
   });
 };
+/** 删除设备 */
+export const setBlackList = (data?: object) => {
+  return http.request<Result>(
+    "post",
+    "/device/api/device/set-black-list",
+    {
+      data
+    },
+    {
+      headers: {
+        "Content-Type": "multipart/form-data"
+      }
+    }
+  );
+};
 /** 编辑设备 */
 export const updateDevice = (data?: object) => {
   return http.request<Result>("post", "/device/api/device/update", { data });
 };
 /** 获取设备详情 */
 export const getDeviceInfo = (data?: object) => {
-  return http.request<Result>("post", "/device/api/device/info", { data });
+  return http.request<ResultData>(
+    "post",
+    "/device/api/device/info",
+    { data },
+    {
+      headers: {
+        "Content-Type": "multipart/form-data"
+      }
+    }
+  );
 };
 
 /** 导入设备 */
 export const importDevice = (data?: object) => {
-  return http.request<Result>("post", "/device/api/device/import", {
+  return http.request<Result>(
+    "post",
+    "/device/api/device/import",
+    {
+      data
+    },
+    {
+      headers: {
+        "Content-Type": "multipart/form-data"
+      }
+    }
+  );
+};
+// 根据设备层级查询设备信息
+export const getDeviceByLevel = (data?: object) => {
+  return http.request<Result>(
+    "post",
+    "/device/api/device/info_by_level",
+    {
+      data
+    },
+    {
+      headers: {
+        "Content-Type": "multipart/form-data"
+      }
+    }
+  );
+};
+// 获取设备站点
+export const getDeviceSite = (data?: object) => {
+  return http.request<Result>("post", "/device/api/device/find-station-list", {
+    data
+  });
+};
+
+// 获取操作记录列表数据
+export const getOperationRecords = (data?: object) => {
+  return http.request<RcordsResult>("post", "/device/api/operate-record/list", {
     data
   });
 };

src/api/manufacturer.ts

@@ -22,6 +22,14 @@ type Result = {
   requestId?: string;
 };
 
+type ResultNoPage = {
+  success?: boolean;
+  data: Array<ResultData>;
+  msg: string;
+  code: string;
+  requestId?: string;
+};
+
 /** 添加厂商 */
 export const addManufacturer = (data?: object) => {
   return http.request<Result>("post", "/device/api/manufacturer/add", {
@@ -47,6 +55,16 @@ export const getManufacturerList = (data?: object) => {
     data
   });
 };
+// 获取厂商列表不分页
+export const getManufacturerListNoPage = (data?: object) => {
+  return http.request<ResultNoPage>(
+    "post",
+    "/device/api/manufacturer/find_manufacturer_list",
+    {
+      data
+    }
+  );
+};
 
 /** 获取厂商详情 */
 export const getManufacturerInfo = (data?: object) => {

src/api/public.ts

+import { http } from "@/utils/http";
+
+export type Result = {
+  // data?: {
+  //   /** 列表数据 */
+  //   list: Array<any>;
+  // };
+  code: string;
+  msg: string;
+  data: {
+    [key: string]: string;
+  };
+  status: number;
+  requestId: boolean;
+};
+
+// 定义一个公共字典接口，用于获取字典数据
+/**
+ * 设备类型code： deviceType
+ *
+ */
+export const getDictItems = (code: string) => {
+  return http.request<Result>(
+    "post",
+    `/webapi/api/dict/get-dict-items/${code}`
+  );
+};

src/api/systems.ts

@@ -18,7 +18,13 @@ export const getCaptcha = (time?: string) => {
 
 /** 刷新`token` */
 export const refreshTokenApi = (data?: object) => {
-  return http.request<RefreshTokenResult>("post", "/refresh-token", { data });
+  return http.request<RefreshTokenResult>(
+    "post",
+    "/usermanage/api/auth/refresh-token",
+    {
+      data
+    }
+  );
 };
 
 /** 账户设置-个人信息 */

src/components/templete/index.vue

 <script setup lang="ts">
+import router from "@/router";
 defineOptions({
   name: ""
 });
 import type { UploadProps, UploadRequestOptions } from "element-plus";
 import {
   downLoadTemplate,
-  importManufacturer,
-  uploadTemplate
+  importManufacturer
+  // uploadTemplate
 } from "@/api/manufacturer";
+import { importDevice } from "@/api/device";
 import { downloadFile } from "@/utils/utils";
 
 const formData = new FormData();
+console.log(1111, router.currentRoute.value.query.type);
+
+// 定义所有导入的接口
+const importApi = {
+  manufacturer: importManufacturer,
+  device: importDevice
+};
+
+// 定义模版名称
+const templateName = {
+  manufacturer: "厂商模版",
+  device: "设备模版"
+};
 
 // 定义一个函数，用于处理头像上传成功
 const handleAvatarSuccess: UploadProps["onSuccess"] = (
   response,
   uploadFile
-) => {
-  // // 打印上传文件
-  // console.log("uploadFile", uploadFile);
-  // // 设置图片地址为上传文件的地址
-  // imageUrl.value = URL.createObjectURL(uploadFile.raw!);
-  // // 打印图片地址
-  // console.log("imageUrl.value", imageUrl.value);
-};
+) => {};
 
 // 定义一个函数，用于处理头像上传前
 const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
@@ -59,7 +67,10 @@ const uploadFile = async (options: UploadRequestOptions) => {
 const confirm = () => {
   // 调用接口，上传文件
   // uploadTemplate(formData).then(res => {
-  importManufacturer(formData).then(res => {
+  // 获取url上的参数type值
+  const type = JSON.parse(JSON.stringify(router.currentRoute.value.query.type));
+  // 调用对应的接口
+  importApi[type](formData).then(res => {
     // 如果上传成功，则返回文件地址
     if (res.code === "0" || res.code === "A0230") {
       ElMessage.success("模版导入成功");
@@ -68,12 +79,23 @@ const confirm = () => {
       ElMessage.error("模版导入失败");
     }
   });
+
+  // importManufacturer(formData).then(res => {
+  //   // 如果上传成功，则返回文件地址
+  //   if (res.code === "0" || res.code === "A0230") {
+  //     ElMessage.success("模版导入成功");
+  //   } else {
+  //     // 如果上传失败，则返回空字符串
+  //     ElMessage.error("模版导入失败");
+  //   }
+  // });
 };
 
 const dwTemplate = async () => {
+  const type = JSON.parse(JSON.stringify(router.currentRoute.value.query.type));
   // 调用下载模版接口
-  const res = await downLoadTemplate({ templateName: "厂商模版" });
-  downloadFile(res, "厂商模版");
+  const res = await downLoadTemplate({ templateName: templateName[type] });
+  downloadFile(res, templateName[type]);
 };
 </script>
 

src/layout/components/lay-content/index.vue

@@ -198,6 +198,7 @@ const transitionMain = defineComponent({
 .app-main {
   position: relative;
   width: 100%;
+  min-width: 1200px;
   height: 100vh;
   overflow-x: hidden;
 }

src/router/modules/device.ts

@@ -25,6 +25,16 @@ export default {
         title: "无人机设备"
         // showParent: true
       }
+    },
+    {
+      path: "/device/edit",
+      name: "DeviceEdit",
+      component: () => import("@/views/device/add.vue"),
+      meta: {
+        showLink: false,
+        title: "设备编辑"
+        // showParent: true
+      }
     }
   ]
 };

src/router/modules/openlayers.ts

+export default {
+  path: "/openlayers",
+  redirect: "/openlayers/index",
+  meta: {
+    icon: "ri/file-info-line",
+    title: "地图"
+  },
+  children: [
+    {
+      path: "/openlayers/index",
+      name: "OpenLayers",
+      component: () => import("@/views/openlayers/index.vue"),
+      meta: {
+        title: "地图",
+        showParent: true
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;

src/views/device/components/childrenListTable.vue

+<script setup lang="ts">
+import { reactive } from "vue";
+import { useListHook } from "../utils/listHook";
+
+const { lookDetail, listData } = useListHook();
+// 定义props,接收父组件传递过来的数据childrenList
+interface Device {
+  deviceName: string;
+  deviceCode?: string;
+  deviceType?: string;
+  deviceModel?: string;
+  deviceSide?: string;
+  deviceAddress?: string;
+  [key: string]: any;
+}
+const props = defineProps<{
+  childrenList: Device[];
+}>();
+const labels = reactive([
+  {
+    label: "已连接",
+    value: "1"
+  },
+  {
+    label: "降落",
+    value: "2"
+  },
+  {
+    label: "空闲",
+    value: "3"
+  }
+]);
+const deviceList = reactive([
+  {
+    name: "设备编号",
+    prop: "deviceCode",
+    value: ""
+  },
+  {
+    name: "设备类型",
+    prop: "deviceType",
+    value: ""
+  },
+  {
+    name: "设备型号",
+    prop: "deviceModel",
+    value: ""
+  },
+  {
+    name: "所属站点",
+    prop: "deviceSide",
+    value: ""
+  },
+  {
+    name: "设备部署位置",
+    prop: "deviceAddress",
+    value: ""
+  }
+]);
+</script>
+
+<template>
+  <div class="w-full mx-3">
+    <el-row
+      v-for="(device, index) in childrenList"
+      :key="index"
+      class="bg-gray-200 py-5 px-10 rounded-2xl mt-3 w-full"
+    >
+      <el-col :span="3" :gutter="10">
+        <img
+          src="https://shoplineimg.com/65a8de08211b1e008886980e/6659acc772c9d500104bb668/800x.png?"
+          alt=""
+          srcset=""
+          width="100"
+      /></el-col>
+      <el-col :span="21" class="cursor-pointer">
+        <div
+          class="flex justify-between items-center"
+          @click="lookDetail(device, index)"
+        >
+          <div class="flex justify-between items-center">
+            <span class="mr-10 font-semibold"> {{ device.deviceName }}</span>
+          </div>
+          <el-button type="text" @click="lookDetail(device, index)"
+            >查看详情</el-button
+          >
+        </div>
+        <div class="flex justify-between items-center mt-5">
+          <p v-for="(i, index) in deviceList" :key="index">
+            <label class="mr-3">{{ i.name }}</label>
+            <span>{{ device[i.prop] }}</span>
+          </p>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->

src/views/device/components/listTable.vue

 <script setup lang="ts">
 import { reactive } from "vue";
 import { useListHook } from "../utils/listHook";
+import childrenListTable from "./childrenListTable.vue";
 
-const { lookDetail } = useListHook();
+const { lookDetail, listData, toggleExpand, handleEdit, deleteDevice } =
+  useListHook();
 const labels = reactive([
   {
     label: "已连接",
@@ -19,23 +21,28 @@ const labels = reactive([
 ]);
 const deviceList = reactive([
   {
-    name: "设备名称",
+    name: "设备编号",
+    prop: "deviceCode",
     value: "ZR103432434"
   },
   {
     name: "设备类型",
+    prop: "deviceType",
     value: "气体检测仪"
   },
   {
     name: "设备型号",
+    prop: "deviceModel",
     value: "ZR-351"
   },
   {
     name: "所属站点",
+    prop: "deviceSide",
     value: "xxx街道南路01号"
   },
   {
     name: "设备部署位置",
+    prop: "deviceAddress",
     value: "准格尔旗薛家湾"
   }
 ]);
@@ -44,8 +51,8 @@ const deviceList = reactive([
 <template>
   <div>
     <el-row
-      v-for="(i, index) in 5"
-      :key="i"
+      v-for="(device, index) in listData"
+      :key="device.deviceCode"
       class="bg-gray-100 py-5 px-10 mb-8"
     >
       <el-col :span="3" :gutter="10">
@@ -56,12 +63,9 @@ const deviceList = reactive([
           width="100"
       /></el-col>
       <el-col :span="21" class="cursor-pointer">
-        <div
-          class="flex justify-between items-center"
-          @click="lookDetail(i, index)"
-        >
+        <div class="flex justify-between items-center">
           <div class="flex justify-between items-center">
-            <span class="mr-10 font-semibold"> 2072无人机设备XX设备名称</span>
+            <span class="mr-10 font-semibold"> {{ device.deviceName }}</span>
             <div>
               <span
                 v-for="i in labels"
@@ -71,22 +75,39 @@ const deviceList = reactive([
               >
             </div>
           </div>
-          <el-button type="text" @click="lookDetail(i, index)"
-            >查看详情</el-button
-          >
+          <div>
+            <el-button type="text" @click="lookDetail(device.deviceCode)"
+              >查看详情</el-button
+            >
+            <el-button
+              type="text"
+              @click.prevent="handleEdit(device.deviceCode)"
+              >编辑</el-button
+            >
+            <el-button type="text" @click="deleteDevice(device.deviceCode)"
+              >删除</el-button
+            >
+          </div>
         </div>
         <div class="flex justify-between items-center mt-5">
           <p v-for="(i, index) in deviceList" :key="index">
-            <label>{{ i.name }}</label>
-            <span>{{ i.value }}</span>
+            <label class="mr-3">{{ i.name }}</label>
+            <span>{{ device[i.prop] }}</span>
           </p>
         </div>
-        <IconifyIconOnline class="m-auto mt-3" icon="cuida:caret-up-outline" />
-        <!-- <IconifyIconOnline
-          class="m-auto mt-2"
-          icon="cuida:caret-down-outline"
-        /> -->
+        <IconifyIconOnline
+          v-if="device.children?.length"
+          class="m-auto mt-5"
+          :icon="
+            !device.isExpend ? 'tabler:chevrons-up' : 'tabler:chevrons-down'
+          "
+          @click="toggleExpand(index)"
+        />
       </el-col>
+      <childrenListTable
+        v-if="device.isExpend"
+        :childrenList="device.children"
+      />
     </el-row>
   </div>
 </template>

src/views/device/components/operationRecord.vue

 <script setup lang="ts">
 import { ref, reactive } from "vue";
-const radio = ref("今天");
+import { useDetailHook } from "../utils/detailHook";
+
+const { operationRecords, radio } = useDetailHook();
+const { lastBuildTime } = __APP_INFO__;
+import { useRenderFlicker } from "@/components/ReFlicker";
+import { randomGradient } from "@pureadmin/utils";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Iphone from "~icons/ep/iphone";
+
+const activities = [
+  {
+    content: "支持圆点发光",
+    timestamp: lastBuildTime,
+    icon: markRaw(useRenderFlicker())
+  },
+  {
+    content: "支持方形发光",
+    timestamp: lastBuildTime,
+    icon: markRaw(useRenderFlicker({ borderRadius: 0, background: "#67C23A" }))
+  },
+  {
+    content: "支持渐变发光",
+    timestamp: lastBuildTime,
+    icon: markRaw(
+      useRenderFlicker({
+        background: randomGradient({
+          randomizeHue: true
+        })
+      })
+    )
+  },
+  {
+    content: "支持默认颜色",
+    timestamp: lastBuildTime
+  },
+  {
+    content: "支持自定义颜色",
+    timestamp: lastBuildTime,
+    color: "#F56C6C"
+  },
+  {
+    content: "支持自定义图标",
+    timestamp: "2023-10-01 12:00:00",
+    color: "transparent",
+    icon: useRenderIcon(Iphone, {
+      color: "#0bbd87"
+    })
+  }
+];
 </script>
 
 <template>
@@ -12,8 +60,51 @@ const radio = ref("今天");
       <el-radio-button label="自定义">自定义</el-radio-button>
     </el-radio-group>
     <!-- 这一块时暂无数据 -->
-    <el-empty description="暂无数据" />
+    <!-- <el-empty description="暂无数据" /> -->
+    <div class="mt-6 flex justify-center">
+      <el-timeline>
+        <el-timeline-item
+          v-for="(activity, index) in operationRecords"
+          :key="index"
+          :icon="activity.icon"
+          :color="activity.color"
+          :timestamp="activity.timestamp"
+        >
+          <span class="text-lg font-bold">{{ activity.operateType }}</span>
+          <p v-if="activity.operateDescribe">{{ activity.operateDescribe }}</p>
+          <div class="message">
+            <span>操作人：{{ activity.createUser }}</span>
+            <span
+              >操作状态：{{
+                activity.operateStatus == 1 ? "成功" : "失败"
+              }}</span
+            >
+          </div>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+
+    <!-- <el-timeline class="pl-40!">
+      <el-timeline-item
+        v-for="(activity, index) in activities"
+        :key="index"
+        :icon="activity.icon"
+        :color="activity.color"
+        :timestamp="activity.timestamp"
+        placement="bottom"
+      >
+        <div class="message">
+          vue-pure-admin 第{{ activities.length - index }}个版本发布啦
+        </div>
+      </el-timeline-item>
+    </el-timeline> -->
   </div>
 </template>
 
-<!-- <style lang="scss" scoped></style> -->
+<style lang="scss" scoped>
+::v-deep .el-timeline-item__timestamp {
+  position: absolute;
+  top: -4px;
+  left: -135px;
+}
+</style>

src/views/device/detail.vue

@@ -3,80 +3,21 @@ defineOptions({
   name: "DeviceDetail"
 });
 import { reactive } from "vue";
-import { useListHook } from "./utils/listHook";
+import { useDetailHook } from "./utils/detailHook";
 import type { TabsPaneContext } from "element-plus";
 import deviceAnalysis from "./components/deviceAnalysis.vue";
 import dataChart from "./components/dataChart.vue";
 import dataLog from "./components/dataLog.vue";
 import operationRecord from "./components/operationRecord.vue";
-const { lookDetail, alarmSetting } = useListHook();
-const labels = reactive([
-  {
-    label: "已连接",
-    value: "1"
-  },
-  {
-    label: "降落",
-    value: "2"
-  },
-  {
-    label: "空闲",
-    value: "3"
-  }
-]);
-const deviceList = reactive([
-  {
-    name: "设备编号",
-    value: "ZR103432434"
-  },
-  {
-    name: "设备类型",
-    value: "气体检测仪"
-  },
-  {
-    name: "设备型号",
-    value: "ZR-351"
-  },
-  // {
-  //   name: "设备厂商",
-  //   value: "ZR-351"
-  // },
-  {
-    name: "设备联系人",
-    value: "ZR-351"
-  },
-  {
-    name: "所属站点",
-    value: "xxx街道..."
-  },
-  {
-    name: "设备部署位置",
-    value: "准格尔旗薛家湾..."
-  },
-  {
-    name: "备注",
-    value: "ZR-351"
-  }
-]);
+
+const { deviceInfo, labels, deviceList, Factor } = useDetailHook();
+
 // {
 //   name: "出厂日期",
 //   value: "ZR-351"
 // }
-const info = reactive([
-  {
-    name: "臭氧浓度（mg/m³）",
-    value: "0.0172"
-  },
-  {
-    name: "温度（°C）",
-    value: "30.0"
-  },
-  {
-    name: "大气压（kPa）",
-    value: "103.54"
-  }
-]);
-const activeName = ref("1");
+
+const activeName = ref("4");
 
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab, event);
@@ -90,9 +31,9 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
         <!-- 设备信息模块 -->
         <div class="flex items-center mb-10">
           <!-- 设备基本信息 -->
-          <div>
+          <div class="flex-1">
             <div class="flex items-center">
-              <h3 class="mr-5!">无人机六旋翼款</h3>
+              <h3 class="mr-5!">{{ deviceInfo.deviceName }}</h3>
               <span class="text-sm flex items-center mr-5">
                 <i
                   class="block w-3.5 h-3.5 bg-sky-600 rounded-lg mr-1 cursor-pointer"
@@ -111,14 +52,14 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
                 class="felx mb-4! basis-1/4"
               >
                 <label>{{ i.name }}</label>
-                <span>{{ i.value }}</span>
+                <span>{{ deviceInfo[i.prop] }}</span>
               </p>
             </div>
             <div
               class="flex items-center justify-between bg-gray-100 px-12 py-8 mt-10"
             >
               <p
-                v-for="i in info"
+                v-for="i in Factor"
                 :key="i.name"
                 class="flex flex-col items-center"
               >

src/views/device/list.vue

 <script setup lang="ts">
 import listTable from "./components/listTable.vue";
+import { useListHook } from "./utils/listHook";
+
+const { addDevice, importDeviceTemplate } = useListHook();
 </script>
 
 <template>
   <div class="device-list">
     <div class="btn mb-5">
-      <el-button>新建</el-button>
-      <el-button>编辑</el-button>
-      <el-button>删除</el-button>
-      <el-button>导入</el-button>
+      <el-button @click="addDevice">新建</el-button>
+      <!-- <el-button>编辑</el-button>
+      <el-button>删除</el-button> -->
+      <el-button @click="importDeviceTemplate">导入</el-button>
       <el-button>报修</el-button>
     </div>
     <listTable />

src/views/device/utils/detailHook.tsx

+import router from "@/router";
+import { ref, onMounted } from "vue";
+import { useRenderFlicker } from "@/components/ReFlicker";
+// import { randomGradient } from "@pureadmin/utils";
+// import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+// import Iphone from "~icons/ep/iphone";
+
+import { getDeviceInfo, getOperationRecords } from "@/api/device";
+
+export function useDetailHook() {
+  const deviceInfo = ref({
+    // deviceName: ""
+  });
+  const labels = reactive([
+    {
+      label: "已连接",
+      value: "1"
+    },
+    {
+      label: "降落",
+      value: "2"
+    },
+    {
+      label: "空闲",
+      value: "3"
+    }
+  ]);
+  const deviceList = reactive([
+    {
+      name: "设备编号",
+      prop: "deviceCode",
+      value: ""
+    },
+    {
+      name: "设备类型",
+      prop: "deviceType",
+      value: ""
+    },
+    {
+      name: "设备型号",
+      prop: "deviceModel",
+      value: ""
+    },
+    // {
+    //   name: "设备厂商",
+    //   value: "ZR-351"
+    // },
+    {
+      name: "设备联系人",
+      prop: "deviceContact",
+      value: ""
+    },
+    {
+      name: "所属站点",
+      prop: "deviceSite",
+      value: ""
+    },
+    {
+      name: "设备部署位置",
+      prop: "deviceLocation",
+      value: ""
+    },
+    {
+      name: "备注",
+      prop: "notes",
+      value: ""
+    }
+  ]);
+  // 各种因子
+  const Factor = reactive([
+    {
+      name: "臭氧浓度（mg/m³）",
+      value: "0.0172"
+    },
+    {
+      name: "温度（°C）",
+      value: "30.0"
+    },
+    {
+      name: "大气压（kPa）",
+      value: "103.54"
+    }
+  ]);
+
+  const operationRecords = ref([]);
+  const radio = ref("今天");
+
+  // 根据deviceCode获取设备详情
+  const getDeviceInfoByCode = async () => {
+    console.log(
+      "router.currentRoute.value.query",
+      router.currentRoute.value.query
+    );
+
+    const res = await getDeviceInfo({
+      deviceCode: router.currentRoute.value.query?.deviceCode
+    });
+    deviceInfo.value = res.data || {};
+  };
+
+  // 获取操作记录列表数据
+  const getOperationRecordsList = async () => {
+    const params = {
+      deviceCode: router.currentRoute.value.query?.deviceCode,
+      endTime: "2026-06-28 14:10:00",
+      pageNum: 0,
+      pageSize: 10,
+      startTime: "2016-06-28 14:10:00"
+    };
+    const res = await getOperationRecords(params);
+    if (!res || !res.data) return;
+    operationRecords.value = handleOperationRecords(res.data.records) || [];
+  };
+  // 处理操作记录的数据结构
+  const handleOperationRecords = (data: any) => {
+    const newData = [];
+    data.forEach((item: any) => {
+      item.createTime = item.createTime.slice(0, 19).replace("T", " ");
+      newData.push({
+        ...item,
+        timestamp: item.operateTime.slice(0, 19).replace("T", " "),
+        icon: markRaw(useRenderFlicker())
+      });
+    });
+    return newData;
+  };
+
+  onMounted(() => {
+    // getList();
+    getDeviceInfoByCode();
+    getOperationRecordsList();
+    // 获取设备类型
+    // 获取设备型号
+    // 获取设备厂商
+    // 获取设备状态
+  });
+  return {
+    deviceInfo,
+    labels,
+    deviceList,
+    Factor,
+    operationRecords,
+    radio
+  };
+}

src/views/device/utils/listHook.tsx

 import router from "@/router";
-import { message } from "@/utils/message";
-import { reactive, ref, onMounted, toRaw } from "vue";
-import {
-  addDialog
-  // closeDialog,
-  // updateDialog,
-  // closeAllDialog
-} from "@/components/ReDialog";
+import { ref, onMounted } from "vue";
 
-import forms, { type FormProps } from "../components/alarmForm.vue";
+import { getDeviceTreeList, setBlackList } from "@/api/device";
 
 export function useListHook() {
-  const form = reactive({
-    name: "",
-    sssb: "",
-    sbmc2: "",
-    sbbh: "",
-    sblx: "",
-    sbxh: "",
-    sblxr: "",
-    bswz: "",
-    sszd: "",
-    sbccrq: "",
-    sbcs: "",
-    njtx: "",
-    sbyt: "",
-    bz: ""
-  });
-
-  const formRef = ref();
-  const validateForm = reactive({
-    fileList: [],
-    date: ""
-  });
-  const rules = {
-    name: [{ required: true, message: "请输入设备名称", trigger: "blur" }]
-    // sssb: [{ required: true, message: "请输入设备分类", trigger: "blur" }],
-    // sbmc2: [{ required: true, message: "请输入所属设备", trigger: "blur" }],
-    // sblx: [{ required: true, message: "请输入设备类型", trigger: "blur" }],
-    // sbxh: [{ required: true, message: "请输入设备型号", trigger: "blur" }],
-    // sblxr: [{ required: true, message: "请输入设备联系人", trigger: "blur" }],
-    // bswz: [{ required: true, message: "请输入设备位置", trigger: "blur" }],
-    // sszd: [{ required: true, message: "请输入所属站点", trigger: "blur" }],
-    // sbccrq: [{ required: true, message: "请输入出厂日期", trigger: "blur" }],
-    // sbcs: [{ required: true, message: "请输入设备厂商", trigger: "blur" }],
-    // njtx: [{ required: true, message: "请输入年检提醒", trigger: "blur" }],
-    // sbyt: [{ required: true, message: "请输入设备状态", trigger: "blur" }],
-    // bz: [{ required: true, message: "请输入备注", trigger: "blur" }]
+  const listData = ref([]);
+  // 根据索引判断跳转到不同的设备详情页面
+  const lookDetail = deviceCode => {
+    router.push({
+      path: "/device/detail",
+      query: { deviceCode }
+    });
   };
 
-  // 定义一个handleReset函数，用于重置表单
-  const handleReset = () => {
-    // 遍历form对象的所有键
-    Object.keys(form).forEach(key => {
-      // 将form对象中对应键的值设置为空字符串
-      form[key] = "";
-    });
+  // 点击编辑按钮，跳转到编辑页面
+  const handleEdit = deviceCode => {
+    router.push({ path: `/device/edit`, query: { deviceCode } });
   };
 
-  // 提交表单
-  const handleSubmit = async () => {
-    // 将表单数据转换为原始数据
-    const data = toRaw(form);
-    // 调用添加设备接口
-    const res = await addDevice(data);
-    // 判断接口返回的code是否为200
-    if (res.code === 200) {
-      // 如果是200，则显示添加成功
-      message.success("添加成功");
-    } else {
-      // 如果不是200，则显示添加失败并显示错误信息
-      message.error("添加失败" + res.msg);
-    }
+  // 点击新建按钮，跳转到新建页面
+  const addDevice = () => {
+    router.push({ path: "/device/add" });
   };
 
-  // 根据索引判断跳转到不同的设备详情页面
-  const lookDetail = (row: any, index: number) => {
-    // 如果索引大于0，则跳转到设备详情2页面
-    index > 0
-      ? router.push({ path: "/device/detail2" })
-      : // 否则跳转到设备详情页面
-        router.push({ path: "/device/detail" });
+  // 获取设备列表
+  const getList = async () => {
+    // 调用getDeviceList函数，获取设备列表
+    const res = await getDeviceTreeList({ pageNum: 1, pageSize: 10 });
+    // 给数据添加一个isExpend属性,默认值是false，点击展开按钮的时候，将isExpend属性设置为true，再次点击的时候，将isExpend属性设置为false
+    res.data.records.forEach((item: any) => {
+      item.isExpend = false;
+    });
+    listData.value = res.data.records;
   };
 
-  const alarmSetting = () => {
-    addDialog({
-      width: "35%",
-      title: "阈值设置",
-      contentRenderer: () => forms,
-      props: {
-        // 赋默认值
-        formInline: {
-          user: "菜虚鲲",
-          region: "浙江"
-        }
-      },
-      closeCallBack: ({ options, args }) => {
-        // options.props 是响应式的
-        const { formInline } = options.props as FormProps;
-        const text = `姓名：${formInline.user} 城市：${formInline.region}`;
-        if (args?.command === "cancel") {
-          // 您点击了取消按钮
-          message(`您点击了取消按钮，当前表单数据为 ${text}`);
-        } else if (args?.command === "sure") {
-          message(`您点击了确定按钮，当前表单数据为 ${text}`);
-        } else {
-          message(
-            `您点击了右上角关闭按钮或空白页或按下了esc键，当前表单数据为 ${text}`
-          );
-        }
+  // 删除设备
+  const deleteDevice = async deviceCode => {
+    // 删除之前，先弹出一个确认框，确认是否删除
+    ElMessageBox.confirm("确认删除该设备吗？", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning"
+    }).then(async () => {
+      // 确认删除之后，调用deleteDevice函数，删除设备
+      // await deleteDevice(deviceCode);
+      // 调用setBlackList函数，删除设备
+      const res = await setBlackList({ deviceCode });
+      // 判断接口返回的code是否为200
+      if (res.code === "0") {
+        // 如果是200，则显示删除成功
+        ElMessage.success("删除成功");
+        getList();
       }
     });
   };
 
+  // 导入设备模版
+  const importDeviceTemplate = async () => {
+    // // 调用importDevice函数，导入设备模版
+    // const res = await importDevice();
+    // // 判断接口返回的code是否为200
+    // if (res.code === "0") {
+    //   // 如果是200，则显示导入成功
+    //   ElMessage.success("导入成功");
+    //   getList();
+    // }
+    router.push({ path: "/import-templete", query: { type: "device" } });
+  };
+
+  // 是否展开二级设备
+  const toggleExpand = index => {
+    listData.value[index].isExpend = !listData.value[index].isExpend;
+  };
+
   onMounted(() => {
+    getList();
     // 获取设备类型
     // 获取设备型号
     // 获取设备厂商
     // 获取设备状态
   });
   return {
-    form,
-    handleReset,
-    handleSubmit,
-    rules,
-    formRef,
-    validateForm,
     lookDetail,
-    alarmSetting
+    getList,
+    listData,
+    toggleExpand,
+    addDevice,
+    handleEdit,
+    deleteDevice,
+    importDeviceTemplate
   };
 }

src/views/device/utils/searchHook.tsx

-import dayjs from "dayjs";
+// import dayjs from "dayjs";
 import { message } from "@/utils/message";
 import { getKeyList } from "@pureadmin/utils";
-import { getLoginLogsList } from "@/api/system";
 // import { usePublicHooks } from "@/views/system/hooks";
 import type { PaginationProps } from "@pureadmin/table";
-import { type Ref, reactive, ref, onMounted, toRaw } from "vue";
+// import { type Ref, reactive, ref, onMounted } from "vue";
+import { getDeviceByLevel, getDeviceList, getDeviceSite } from "@/api/device";
+import { getDictItems } from "@/api/public";
+import { getManufacturerListNoPage } from "@/api/manufacturer";
 
 export function useRole(tableRef: Ref) {
-  const form = reactive({
-    username: "",
-    status: "",
-    loginTime: ""
+  const formObj = ref({
+    deviceLevel: null, //设备层级
+    parentCode: "", //上级设备编码
+    deviceName: "", //设备名称
+    deviceType: "", //设备类型
+    deviceCode: "", //设备编码
+    deviceModel: "", //设备型号
+    manufacturerId: "", //设备厂商
+    deviceStatus: "", //设备状态
+    deviceAddress: "", //设备位置
+    deviceSide: "", //所属站点
+    deviceContact: "", //设备联系人
+    devicePhone: "", //设备联系电话
+    deviceRemake: "", //备注
+    factoryTime: "", //出厂日期
+    inspectTime: "", //年检提醒
+    devicePurpose: "", //设备用途
+    notes: "", //备注
+    devicePicture: "", //设备图片
+    fileId: "" //文件id
   });
-  const dataList = ref([]);
+  const listData = ref([]);
   const loading = ref(false);
   const selectedNum = ref(0);
   // const { tagStyle } = usePublicHooks();
 
+  const deviceTypeOptions = ref({}); //设备类型数据列表
+  const deviceLevelOptions = ref([]); //所属设备数据列表
+  const deviceSiteOptions = ref([]); //设备站点列表数据
+  const deviceManufacturerOptions = ref([]); //设备厂商列表数据
+  const deviceModelOptions = ref({}); //设备型号列表数据
+
   const pagination = reactive<PaginationProps>({
     total: 0,
     pageSize: 10,
@@ -37,76 +61,84 @@ export function useRole(tableRef: Ref) {
     },
     {
       label: "设备分类",
-      prop: "username",
+      prop: "deviceLevel",
       minWidth: 100
     },
     {
       label: "所属设备",
-      prop: "ip",
+      prop: "parentCode",
       minWidth: 140
     },
     {
       label: "设备名称",
-      prop: "address",
+      prop: "deviceName",
       minWidth: 140
     },
     {
       label: "设备类型",
-      prop: "system",
+      prop: "deviceType",
       minWidth: 100
     },
     {
       label: "设备型号",
-      prop: "browser",
+      prop: "deviceModel",
       minWidth: 100
     },
     {
       label: "所属站点",
-      prop: "behavior",
+      prop: "deviceSide",
       minWidth: 100
     },
     {
       label: "设备联系人",
-      prop: "behavior",
+      prop: "devicePhone",
       minWidth: 100
     },
     {
       label: "部署位置",
-      prop: "behavior",
+      prop: "deviceAddress",
       minWidth: 100
     },
     {
       label: "设备出厂日期",
-      prop: "loginTime",
-      minWidth: 180,
-      formatter: ({ loginTime }) =>
-        dayjs(loginTime).format("YYYY-MM-DD HH:mm:ss")
+      prop: "factoryTime",
+      minWidth: 180
+      // formatter: ({ loginTime }) =>
+      //   dayjs(loginTime).format("YYYY-MM-DD HH:mm:ss")
     },
     {
       label: "设备厂商",
-      prop: "behavior",
+      prop: "manufacturerId",
       minWidth: 100
     },
     {
       label: "年检提醒",
-      prop: "behavior",
+      prop: "inspectTime",
       minWidth: 100
     }
   ];
 
   function handleSizeChange(val: number) {
     console.log(`${val} items per page`);
+    pagination.pageSize = val;
+    // 重置表格高度
+    tableRef.value.setAdaptive();
+    // 重新获取列表数据
+    onSearch();
   }
 
   function handleCurrentChange(val: number) {
     console.log(`current page: ${val}`);
+    pagination.currentPage = val;
+    // 重置表格高度
+    tableRef.value.setAdaptive();
+    // 重新获取列表数据
+    onSearch();
   }
 
   /** 当CheckBox选择项发生变化时会触发该事件 */
   function handleSelectionChange(val) {
     selectedNum.value = val.length;
-    // 重置表格高度
-    tableRef.value.setAdaptive();
   }
 
   /** 取消选择 */
@@ -128,6 +160,82 @@ export function useRole(tableRef: Ref) {
     onSearch();
   }
 
+  // 获取设备类型的字典数据
+  const getDeviceType = async () => {
+    const res = await getDictItems("deviceType");
+    if (res.code === "0") {
+      deviceTypeOptions.value = res.data;
+    } else {
+      ElMessage.error(`获取设备类型失败`);
+    }
+  };
+  // 获取设备类型的字典数据
+  const getDeviceModelType = async () => {
+    const res = await getDictItems("deviceModel");
+    if (res.code === "0") {
+      deviceModelOptions.value = res.data;
+    } else {
+      ElMessage.error(`获取设备模型失败`);
+    }
+  };
+
+  // 获取所属设备列表
+  const getDeviceLevelList = async () => {
+    const res = await getDeviceByLevel({ deviceLevel: 2 });
+    if (res.code === "0") {
+      deviceLevelOptions.value = res.data;
+    } else {
+      ElMessage.error(`获取设备类型失败`);
+    }
+  };
+
+  // 获取设备站点列表
+  const getDeviceSiteList = async () => {
+    const res = await getDeviceSite();
+    if (res.code === "0") {
+      deviceSiteOptions.value = res.data;
+    } else {
+      ElMessage.error(`获取设备类型失败`);
+    }
+  };
+
+  // 获取设备厂商列表
+  const getManufacturerList = async () => {
+    const res = await getManufacturerListNoPage();
+    if (res.code === "0") {
+      deviceManufacturerOptions.value = res.data;
+    } else {
+      ElMessage.error(`获取设备类型失败`);
+    }
+  };
+
+  // 获取设备列表
+  const getList = async () => {
+    // 调用getDeviceList函数，获取设备列表
+    const params = toRaw(formObj.value);
+    // 过滤掉值为空的属性;
+    Object.keys(params).forEach(key => {
+      if (!params[key]) {
+        delete params[key];
+      }
+    });
+    const res = await getDeviceList({
+      ...params,
+      pageNum: pagination.currentPage,
+      pageSize: pagination.pageSize
+    });
+    if (res.code === "0") {
+      // 给数据添加一个isExpend属性,默认值是false，点击展开按钮的时候，将isExpend属性设置为true，再次点击的时候，将isExpend属性设置为false
+      res.data.records.forEach((item: any) => {
+        item.isExpend = false;
+      });
+      listData.value = res.data.records;
+      loading.value = false;
+    } else {
+      ElMessage.error(`获取设备列表失败: ${res.msg}`);
+    }
+  };
+
   /** 清空日志 */
   function clearAll() {
     // 根据实际业务，调用接口删除所有日志数据
@@ -139,32 +247,37 @@ export function useRole(tableRef: Ref) {
 
   async function onSearch() {
     loading.value = true;
-    const { data } = await getLoginLogsList(toRaw(form));
-    dataList.value = data.list;
-    pagination.total = data.total;
-    pagination.pageSize = data.pageSize;
-    pagination.currentPage = data.currentPage;
-
-    setTimeout(() => {
-      loading.value = false;
-    }, 500);
+    getList();
   }
 
-  const resetForm = formEl => {
-    if (!formEl) return;
-    formEl.resetFields();
+  const resetForm = () => {
+    // if (!formEl) return;
+    // formEl.resetFields();
+    // 重置表单后，清空所有搜索条件
+    Object.keys(formObj.value).forEach(key => {
+      formObj.value[key] = ""; // 清空所有搜索条件
+    });
+    // 重新获取列表数据
+    pagination.currentPage = 1; // 重置当前页为1
+    pagination.pageSize = 10; // 重置每页条数为10
+    // 调用搜索函数
     onSearch();
   };
 
   onMounted(() => {
-    // onSearch();
+    onSearch();
+    getDeviceType();
+    getDeviceModelType();
+    getManufacturerList();
+    getDeviceSiteList();
+    getDeviceLevelList;
   });
 
   return {
-    form,
+    formObj,
     loading,
     columns,
-    dataList,
+    listData,
     pagination,
     selectedNum,
     onSearch,
@@ -174,6 +287,12 @@ export function useRole(tableRef: Ref) {
     handleSizeChange,
     onSelectionCancel,
     handleCurrentChange,
-    handleSelectionChange
+    handleSelectionChange,
+    getList,
+    deviceTypeOptions,
+    deviceLevelOptions,
+    deviceSiteOptions,
+    deviceManufacturerOptions,
+    deviceModelOptions
   };
 }

src/views/fac-manage/fac-list/utils/hook.tsx

@@ -236,7 +236,7 @@ export function useFacList() {
 
   // 跳转到导入页面
   const goImport = () => {
-    router.push("/import-templete");
+    router.push({ path: "/import-templete", query: { type: "manufacturer" } });
   };
 
   // 导出全部列表数据

src/views/openlayers/index.vue

+<template>
+  <div class="open-layers">
+    <h2>OpenLayers</h2>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+// 组件逻辑部分
+import { ref } from "vue";
+
+const count = ref(0);
+
+const increment = () => {
+  count.value++;
+};
+</script>
+
+<style scoped lang="scss">
+.open-layers {
+  padding: 20px;
+  border: 1px solid #ccc;
+}
+</style>