feat: 🚀 设备管理模块页面开发

src/router/modules/device.ts

+//
+export default {
+  path: "/device",
+  // redirect: "/device/list",
+  meta: {
+    title: "设备管理"
+  },
+  children: [
+    {
+      path: "/device/detail2",
+      name: "Device",
+      component: () => import("@/views/device/detail2.vue"),
+      meta: {
+        showLink: false,
+        title: "无人机设备22",
+        showParent: true
+      }
+    },
+    {
+      path: "/device/detail",
+      name: "Device",
+      component: () => import("@/views/device/detail.vue"),
+      meta: {
+        showLink: false,
+        title: "无人机设备"
+        // showParent: true
+      }
+    }
+  ]
+};

src/views/device/components/alarmForm.vue

+<script setup lang="ts">
+import { ref, reactive } from "vue";
+
+// 声明 props 类型
+export interface FormProps {
+  formInline?: {
+    temp: string;
+    Atmospheric: string;
+    Humidity: string;
+    Rainfall: string;
+  };
+}
+
+// 声明 props 默认值
+// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({ temp: "", Atmospheric: "", Humidity: "", Rainfall: "" })
+});
+
+// vue 规定所有的 prop 都遵循着单向绑定原则，直接修改 prop 时，Vue 会抛出警告。此处的写法仅仅是为了消除警告。
+// 因为对一个 reactive 对象执行 ref，返回 Ref 对象的 value 值仍为传入的 reactive 对象，
+// 即 newFormInline === props.formInline 为 true，所以此处代码的实际效果，仍是直接修改 props.formInline。
+// 但该写法仅适用于 props.formInline 是一个对象类型的情况，原始类型需抛出事件
+// 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
+const newFormInline = ref(props.formInline);
+const info = reactive([
+  {
+    label: "温度",
+    value: "temp",
+    unit: "°C",
+    title: "温度报警阈值"
+  },
+  {
+    label: "大气压",
+    value: "Atmospheric",
+    unit: "Pa",
+    title: "大气压报警阈值"
+  },
+  {
+    label: "湿度",
+    value: "Humidity",
+    unit: "%",
+    title: "湿度报警阈值"
+  },
+  {
+    label: "降雨量",
+    value: "Rainfall",
+    unit: "mm",
+    title: "降雨量报警阈值"
+  }
+]);
+</script>
+
+<template>
+  <div>
+    <div v-for="(i, index) in info" :key="index" class="mb-10!">
+      <p class="mb-2!">{{ i.title }}</p>
+      <el-input
+        v-model="newFormInline.temp"
+        style="max-width: 600px"
+        :placeholder="'请输入' + i.label + '报警阈值'"
+        class="input-with-select"
+      >
+        <template #prepend>
+          <span>大于等于</span>
+        </template>
+        <template #append>
+          <span>{{ i.unit }}</span>
+        </template>
+      </el-input>
+    </div>
+  </div>
+</template>

src/views/device/components/dataChart.vue

+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import * as echarts from "echarts";
+import { onMounted } from "vue";
+const radio = ref("今天");
+// 定义一个折线图
+const tempCharts = ref(null);
+const humiCharts = ref(null);
+const AtmosphericCharts = ref(null);
+const tempData = reactive({
+  title: {
+    text: "温度",
+    left: "center"
+  },
+  tooltip: {
+    trigger: "axis"
+  },
+  legend: {
+    data: ["温度"],
+    left: "left"
+  },
+  xAxis: {
+    type: "category",
+    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"]
+  },
+  yAxis: {
+    type: "value"
+  },
+  series: [
+    {
+      name: "温度",
+      type: "line",
+      data: [820, 932, 901, 934, 1290, 1330, 1320]
+    }
+  ]
+});
+onMounted(() => {
+  // 初始化echarts
+  tempCharts.value = echarts.init(document.getElementById("tempCharts"));
+  // 使用刚指定的配置项和数据显示图表。
+  tempCharts.value.setOption(tempData);
+  // 初始化湿度图表
+  humiCharts.value = echarts.init(document.getElementById("humiCharts"));
+  // 使用刚指定的配置项和数据显示图表。
+  humiCharts.value.setOption(tempData);
+  // 初始化大气压图表
+  AtmosphericCharts.value = echarts.init(
+    document.getElementById("AtmosphericCharts")
+  );
+  // 使用刚指定的配置项和数据显示图表。
+  AtmosphericCharts.value.setOption(tempData);
+});
+</script>
+
+<template>
+  <div>
+    <!-- 单选（紧凑风格的按钮样式） -->
+    <el-radio-group v-model="radio">
+      <el-radio-button label="今天">今天</el-radio-button>
+      <el-radio-button label="3天">3天</el-radio-button>
+      <el-radio-button label="自定义">自定义</el-radio-button>
+    </el-radio-group>
+    <!-- 三个echats折线图，分别是温度、大气压、湿度 -->
+    <div class="flex justify-between w-full">
+      <div id="tempCharts" class="w-80 h-80" />
+      <div id="humiCharts" class="w-80 h-80" />
+      <div id="AtmosphericCharts" class="w-80 h-80" />
+    </div>
+  </div>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->

src/views/device/components/dataLog.vue

+<script setup lang="ts">
+import { ref, reactive } from "vue";
+const date = ref("");
+const pickerOptions = {
+  shortcuts: [
+    {
+      text: "今天",
+      onClick(picker) {
+        picker.$emit("pick", new Date());
+      }
+    },
+    {
+      text: "昨天",
+      onClick(picker) {
+        const date = new Date();
+        date.setTime(date.getTime() - 3600 * 1000 * 24);
+        picker.$emit("pick", date);
+      }
+    },
+    {
+      text: "一周前",
+      onClick(picker) {
+        const date = new Date();
+        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+        picker.$emit("pick", date);
+      }
+    }
+  ]
+};
+const tableData = reactive([
+  {
+    time: "2023-10-01 12:00:00",
+    airPressure: "1013 hPa",
+    temperature: "25 °C",
+    windSpeed: "5 m/s",
+    windDirection: "北",
+    rainfall: "0 mm",
+    L5: "10",
+    L10: "20",
+    L50: "30",
+    L90: "40",
+    L95: "50"
+  },
+  {
+    time: "2023-10-01 13:00:00",
+    airPressure: "1012 hPa",
+    temperature: "26 °C",
+    windSpeed: "6 m/s",
+    windDirection: "东北",
+    rainfall: "1 mm",
+    L5: "15",
+    L10: "25",
+    L50: "35",
+    L90: "45",
+    L95: "55"
+  }
+]);
+</script>
+
+<template>
+  <div>
+    <!-- 一个日期时间范围选择器 -->
+    <el-date-picker
+      v-model="date"
+      type="daterange"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      :picker-options="pickerOptions"
+    />
+    <!-- 一个表格，展示设备数据日志；表头分别是: 时间、大气压、温度、风速、风向、降雨量、L5、L10、L50、L90、L95 -->
+    <el-table :data="tableData">
+      <el-table-column prop="time" label="时间" />
+      <el-table-column prop="airPressure" label="大气压" />
+      <el-table-column prop="temperature" label="温度" />
+      <el-table-column prop="windSpeed" label="风速" />
+      <el-table-column prop="windDirection" label="风向" />
+      <el-table-column prop="rainfall" label="降雨量" />
+      <el-table-column prop="L5" label="L5" />
+      <el-table-column prop="L10" label="L10" />
+      <el-table-column prop="L50" label="L50" />
+      <el-table-column prop="L90" label="L90" />
+      <el-table-column prop="L95" label="L95" />
+    </el-table>
+  </div>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->

src/views/device/components/deviceAnalysis.vue

+<script setup lang="ts">
+import { ref, reactive } from "vue";
+const radio = ref("今天");
+</script>
+
+<template>
+  <div>
+    <!-- 单选（紧凑风格的按钮样式） -->
+    <el-radio-group v-model="radio">
+      <el-radio-button label="今天">今天</el-radio-button>
+      <el-radio-button label="3天">3天</el-radio-button>
+      <el-radio-button label="自定义">自定义</el-radio-button>
+    </el-radio-group>
+    <!-- 这一块时暂无数据 -->
+    <el-empty description="暂无数据" />
+  </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";
+
+const { lookDetail } = 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: "xxx街道南路01号"
+  },
+  {
+    name: "设备部署位置",
+    value: "准格尔旗薛家湾"
+  }
+]);
+</script>
+
+<template>
+  <div>
+    <el-row
+      v-for="(i, index) in 5"
+      :key="i"
+      class="bg-gray-100 py-5 px-10 mb-8"
+    >
+      <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(i, index)"
+        >
+          <div class="flex justify-between items-center">
+            <span class="mr-10 font-semibold"> 2072无人机设备XX设备名称</span>
+            <div>
+              <span
+                v-for="i in labels"
+                :key="i.value"
+                class="inline-block w-20 text-sm text-center text-white bg-blue-400 text-grate-500 border-2 border-grate-500 rounded-full mr-5"
+                >{{ i.label }}</span
+              >
+            </div>
+          </div>
+          <el-button type="text" @click="lookDetail(i, index)"
+            >查看详情</el-button
+          >
+        </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>
+          </p>
+        </div>
+        <IconifyIconOnline class="m-auto mt-3" icon="cuida:caret-up-outline" />
+        <!-- <IconifyIconOnline
+          class="m-auto mt-2"
+          icon="cuida:caret-down-outline"
+        /> -->
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->

src/views/device/components/operationRecord.vue

+<script setup lang="ts">
+import { ref, reactive } from "vue";
+const radio = ref("今天");
+</script>
+
+<template>
+  <div>
+    <!-- 单选（紧凑风格的按钮样式） -->
+    <el-radio-group v-model="radio">
+      <el-radio-button label="今天">今天</el-radio-button>
+      <el-radio-button label="3天">3天</el-radio-button>
+      <el-radio-button label="自定义">自定义</el-radio-button>
+    </el-radio-group>
+    <!-- 这一块时暂无数据 -->
+    <el-empty description="暂无数据" />
+  </div>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->

src/views/device/detail.vue

+<script setup lang="ts">
+import { reactive } from "vue";
+import { useListHook } from "./utils/listHook";
+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"
+  }
+]);
+// {
+//   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 handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event);
+};
+</script>
+
+<template>
+  <el-row class="device-list-detail2 px-10 py-5">
+    <el-col :span="18">
+      <div>
+        <!-- 设备信息模块 -->
+        <div class="flex items-center mb-10">
+          <!-- 设备基本信息 -->
+          <div>
+            <div class="flex items-center">
+              <h3 class="mr-5!">无人机六旋翼款</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"
+                />降落</span
+              >
+              <span class="text-sm flex items-center mr-3 cursor-pointer">
+                <i
+                  class="block w-3.5 h-3.5 bg-gray-500 rounded-lg mr-1"
+                />未连接</span
+              >
+            </div>
+            <div class="flex items-center mt-5 flex-wrap">
+              <p
+                v-for="(i, index) in deviceList"
+                :key="index"
+                class="felx mb-4! basis-1/4"
+              >
+                <label>{{ i.name }}</label>
+                <span>{{ i.value }}</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"
+                :key="i.name"
+                class="flex flex-col items-center"
+              >
+                <span class="text-gray-400 mb-2">{{ i.name }}</span>
+                <span class="font-semibold text-lg">{{ i.value }}</span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <!-- 设备数据分析相关项 -->
+        <el-tabs
+          v-model="activeName"
+          class="demo-tabs"
+          @tab-click="handleClick"
+        >
+          <el-tab-pane label="数据图表" name="1"><dataChart /></el-tab-pane>
+          <el-tab-pane label="设备分析" name="2"
+            ><deviceAnalysis
+          /></el-tab-pane>
+          <el-tab-pane label="数据日志" name="3"><dataLog /></el-tab-pane>
+          <el-tab-pane label="操作记录" name="4"
+            ><operationRecord
+          /></el-tab-pane>
+        </el-tabs></div
+    ></el-col>
+    <el-col :span="6" class="pl-10">
+      <p class="text-sm mb-3!">最近更新时间：2025.04.23 15:00:00</p>
+      <img
+        src="https://shoplineimg.com/65a8de08211b1e008886980e/6659acc772c9d500104bb668/800x.png?"
+        alt=""
+        class="w-60 h-50! rounded-3xl mr-5 shadow shadow-red-300"
+      />
+      <div class="mt-10 border-1 border-gray-300 rounded-sm h-110">
+        <p
+          class="p-5 flex items-center justify-between border-b-1 border-gray-300"
+        >
+          <span>报警阈值设置</span
+          ><IconifyIconOnline
+            class="cursor-pointer"
+            icon="cuida:caret-up-outline"
+            @click="alarmSetting"
+          />
+        </p>
+        <div class="p-5">
+          <p>臭氧≥40mg/m³发生报警</p>
+          <p class="mt-5!">文档≥40℃发生报警</p>
+          <p class="mt-5!">大气压≥4kPa发生报警</p>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<style lang="scss" scoped>
+.device-list-detail2 {
+  cursor: pointer;
+  background: white;
+}
+</style>

src/views/device/detail2.vue

+<script setup lang="ts">
+import { reactive } from "vue";
+import { useListHook } from "./utils/listHook";
+
+const { lookDetail } = 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"
+  }
+  // {
+  //   name: "出厂日期",
+  //   value: "ZR-351"
+  // }
+]);
+</script>
+
+<template>
+  <div class="device-list-detail2 px-10 py-5">
+    <div class="flex items-center mb-10">
+      <img
+        src="https://shoplineimg.com/65a8de08211b1e008886980e/6659acc772c9d500104bb668/800x.png?"
+        alt=""
+        srcset=""
+        width="200"
+        class="rounded-3xl mr-5"
+      />
+      <div>
+        <div class="flex items-center">
+          <h3 class="mr-5!">无人机六旋翼款</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"
+            />降落</span
+          >
+          <span class="text-sm flex items-center mr-3 cursor-pointer">
+            <i
+              class="block w-3.5 h-3.5 bg-gray-500 rounded-lg mr-1"
+            />未连接</span
+          >
+        </div>
+        <div class="flex items-center mt-5 flex-wrap">
+          <p
+            v-for="(i, index) in deviceList"
+            :key="index"
+            class="felx mb-4!"
+            :class="index > 4 ? 'basis-1/3' : 'basis-1/5'"
+          >
+            <label>{{ i.name }}</label>
+            <span>{{ i.value }}</span>
+          </p>
+        </div>
+      </div>
+    </div>
+    <!-- 设备列表 -->
+    <el-row v-for="i in 5" :key="i" class="bg-gray-100 py-5 px-10 mb-8">
+      <el-col :span="3" :gutter="10">
+        <img
+          src="https://shoplineimg.com/65a8de08211b1e008886980e/6659acc772c9d500104bb668/800x.png?"
+          alt=""
+          srcset=""
+          width="100"
+          class="rounded-3xl"
+      /></el-col>
+      <!-- 列表具体信息 -->
+      <el-col :span="21" class="cursor-pointer">
+        <div class="flex justify-between items-center" @click="lookDetail(i)">
+          <div class="flex justify-between items-center">
+            <span class="mr-10 font-semibold"> 2072无人机设备XX设备名称</span>
+            <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"
+              />降落</span
+            >
+            <span class="text-sm flex items-center mr-3 cursor-pointer">
+              <i
+                class="block w-3.5 h-3.5 bg-gray-500 rounded-lg mr-1"
+              />未连接</span
+            >
+          </div>
+        </div>
+        <div class="flex flex-wrap justify-between items-center mt-5">
+          <p
+            v-for="(i, index) in deviceList"
+            :key="index"
+            class="felx mb-4! basis-1/4"
+          >
+            <label>{{ i.name }}</label>
+            <span>{{ i.value }}</span>
+          </p>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.device-list-detail2 {
+  cursor: pointer;
+  background: white;
+}
+</style>

src/views/device/list.vue

 <script setup lang="ts">
-import { ref } from "vue";
-import { useDept } from "./utils/hook";
-import { PureTableBar } from "@/components/RePureTableBar";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-
-// 导入不同的图标组件
-import Delete from "~icons/ep/delete";
-import EditPen from "~icons/ep/edit-pen";
-import Refresh from "~icons/ep/refresh";
-import AddFill from "~icons/ri/add-circle-line";
-import { Column } from "element-plus";
-
-defineOptions({ name: "device" });
-const formRef = ref();
-const tableRef = ref();
-const {
-  form,
-  loading,
-  columns,
-  dataList,
-  onSearch,
-  resetForm,
-  openDialog,
-  handleDelete,
-  handleSelectionChange
-} = useDept();
-function onFullscreen() {
-  tableRef.value.setAdaptive();
-}
+import listTable from "./components/listTable.vue";
 </script>
 
 <template>
-  <div class="main">
-    <el-form
-      ref="formRef"
-      :inline="true"
-      :model="form"
-      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
-    >
-      <el-form-item label="设备名称：" prop="name">
-        <el-input
-          v-model="form.name"
-          placeholder="请输入设备名称"
-          clearable
-          class="w-[180px]!"
-        />
-      </el-form-item>
-      <el-form-item label="状态：" prop="status">
-        <el-select
-          v-model="form.status"
-          placeholder="请选择状态"
-          clearable
-          class="w-[180px]!"
-        >
-          <el-option label="启用" :value="1" />
-          <el-option label="停用" :value="0" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button
-          type="primary"
-          :icon="useRenderIcon('ri/search-line')"
-          :loading="loading"
-          @click="onSearch"
-        >
-          搜索框
-        </el-button>
-        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
-          重置
-        </el-button>
-      </el-form-item>
-    </el-form>
-
-    <PureTableBar
-      :title="'设备（仅演示，操作后不生效）'"
-      :columns="columns"
-      :tableRef="tableRef?.getTableRef()"
-      @refresh="onSearch"
-      @fullscreen="onFullscreen"
-    >
-      <template #buttons>
-        <el-button
-          type="primary"
-          :icon="useRenderIcon(AddFill)"
-          @click="openDialog()"
-        >
-          新增设备
-        </el-button>
-      </template>
-      <template v-slot="{ size, dynamicColumns }">
-        <pure-table
-          ref="tableRef"
-          adaptive
-          :adaptiveConfig="{ offsetBottom: 45 }"
-          align-whole="center"
-          row-key="id"
-          showOverflowTooltip
-          table-layout="auto"
-          default-expand-all
-          :loading="loading"
-          :size="size"
-          :data="dataList"
-          :columns="dynamicColumns"
-          :header-cell-style="{
-            background: 'var(--el-fill-color-light)',
-            color: 'var(--el-text-color-primary)'
-          }"
-          @selection-change="handleSelectionChange"
-        >
-          <template #operation="{ row }">
-            <el-button
-              class="reset-margin"
-              link
-              type="primary"
-              :size="size"
-              :icon="useRenderIcon(EditPen)"
-              @click="openDialog('修改', row)"
-            >
-              修改
-            </el-button>
-            <el-button
-              class="reset-margin"
-              link
-              type="primary"
-              :size="size"
-              :icon="useRenderIcon(AddFill)"
-              @click="openDialog('新增', { parentId: row.id } as any)"
-            >
-              新增
-            </el-button>
-            <el-popconfirm
-              :title="`是否确认删除设备名称为${row.name}的这条数据`"
-              @confirm="handleDelete(row)"
-            >
-              <template #reference>
-                <el-button
-                  class="reset-margin"
-                  link
-                  type="primary"
-                  :size="size"
-                  :icon="useRenderIcon(Delete)"
-                >
-                  删除
-                </el-button>
-              </template>
-            </el-popconfirm>
-          </template>
-        </pure-table>
-      </template>
-    </PureTableBar>
+  <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>报修</el-button>
+    </div>
+    <listTable />
   </div>
 </template>
 
 <style lang="scss" scoped>
-/* 移除表格内滚动条底部的线 */
-:deep(.el-table__inner-wrapper::before) {
-  height: 0;
-}
-
-/* 主内容区域样式 */
-:deep(.main-content) {
-  margin: 24px 24px 0 !important;
-}
-
-/* 搜索按钮样式 */
-:deep(.search-form) {
-  .el-form-item {
-    margin-bottom: 12px;
-  }
+.device-list {
+  width: 100%;
+  height: 100%;
+  padding: 10px 20px;
+  background: #fff;
 }
 </style>

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 forms, { type FormProps } from "../components/alarmForm.vue";
+
+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" }]
+  };
+
+  // 定义一个handleReset函数，用于重置表单
+  const handleReset = () => {
+    // 遍历form对象的所有键
+    Object.keys(form).forEach(key => {
+      // 将form对象中对应键的值设置为空字符串
+      form[key] = "";
+    });
+  };
+
+  // 提交表单
+  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 lookDetail = (row: any, index: number) => {
+    // 如果索引大于0，则跳转到设备详情2页面
+    index > 0
+      ? router.push({ path: "/device/detail2" })
+      : // 否则跳转到设备详情页面
+        router.push({ path: "/device/detail" });
+  };
+
+  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}`
+          );
+        }
+      }
+    });
+  };
+
+  onMounted(() => {
+    // 获取设备类型
+    // 获取设备型号
+    // 获取设备厂商
+    // 获取设备状态
+  });
+  return {
+    form,
+    handleReset,
+    handleSubmit,
+    rules,
+    formRef,
+    validateForm,
+    lookDetail,
+    alarmSetting
+  };
+}