设备管理

src/api/device/device.js

@@ -96,3 +96,19 @@ export function batchActivateDevice(ids) {
     }
   })
 }
+
+export function claimDeviceBatch(data) {
+  return request({
+    url: '/device/device/claim/batch',
+    method: 'post',
+    data: data
+  })
+}
+
+export function listAllDevice(query) {
+  return request({
+    url: '/device/device/AllDeviceList',
+    method: 'get',
+    params: query
+  })
+}

src/views/device/device/index.vue

@@ -61,6 +61,25 @@
           >导入</el-button
         >
       </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-s-claim"
+          size="mini"
+          @click="handleClaimDevice"
+        >认领设备</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-circle-check"
+          size="mini"
+          :disabled="multiple"
+          @click="handleBatchActivate"
+        >批量激活</el-button>
+      </el-col>
       <!-- <el-col :span="1.5">
         <el-button
           type="success"
@@ -148,6 +167,16 @@
           <span>{{ parseTime(scope.row.lastLocationTime, "{y}-{m}-{d}") }}</span>
         </template>
       </el-table-column>
+      <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleDetail(scope.row)"
+          >详情</el-button>
+        </template>
+      </el-table-column>
       <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -300,6 +329,44 @@
       :visible.sync="businessSelectVisible"
       @select="handleBusinessSelect"
     />
+    <DeviceClaimDialog
+      :visible.sync="claimDeviceOpen"
+      @success="handleClaimSuccess"
+    />
+    <el-dialog
+      title="设备详情"
+      :visible.sync="detailOpen"
+      width="720px"
+      append-to-body
+    >
+      <div v-loading="detailLoading">
+        <el-descriptions v-if="detailForm" :column="2" border>
+          <el-descriptions-item label="ID">{{ detailForm.id || "-" }}</el-descriptions-item>
+          <el-descriptions-item label="序列号">{{ detailForm.sn || "-" }}</el-descriptions-item>
+          <el-descriptions-item label="MAC 地址">{{ detailForm.mac || "-" }}</el-descriptions-item>
+          <el-descriptions-item label="私钥">{{ detailForm.privateKey || "-" }}</el-descriptions-item>
+          <el-descriptions-item label="所属批次">{{ detailForm.batchNo || "-" }}</el-descriptions-item>
+          <el-descriptions-item label="设备的唯一哈希 ID">{{ detailForm.hashid || "-" }}</el-descriptions-item>
+          <el-descriptions-item label="型号">{{ detailForm.model || "-" }}</el-descriptions-item>
+          <el-descriptions-item label="企业">{{ detailForm.merchantName || "-" }}</el-descriptions-item>
+          <el-descriptions-item label="最后位置更新时间">
+            {{ detailForm.locateUpdateTime ? parseTime(detailForm.locateUpdateTime, "{y}-{m}-{d}") : "-" }}
+          </el-descriptions-item>
+          <el-descriptions-item label="最后纬度">{{ detailForm.lastLat || "-" }}</el-descriptions-item>
+          <el-descriptions-item label="最后经度">{{ detailForm.lastLng || "-" }}</el-descriptions-item>
+          <el-descriptions-item label="电量">{{ detailForm.battery || "-" }}</el-descriptions-item>
+          <el-descriptions-item label="最后上报时间">
+            {{ detailForm.lastReportedTime ? parseTime(detailForm.lastReportedTime, "{y}-{m}-{d}") : "-" }}
+          </el-descriptions-item>
+          <el-descriptions-item label="最后位置时间">
+            {{ detailForm.lastLocationTime ? parseTime(detailForm.lastLocationTime, "{y}-{m}-{d}") : "-" }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="detailOpen = false">关 闭</el-button>
+      </div>
+    </el-dialog>
     <!-- 添加或修改系统设备主对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
@@ -406,6 +473,7 @@ import {
   delDevice,
   addDevice,
   updateDevice,
+  batchActivateDevice,
   exportDevice,
   getBatchNo,
 } from "@/api/device/device";
@@ -413,11 +481,13 @@ import {
 import { importDeviceSync } from "@/api/device/device";
 // 导入企业选择组件
 import BusinessSelect from "@/components/business/BusinessSelect"; // 替换为实际组件路径
+import DeviceClaimDialog from "@/components/device";
 
 export default {
   name: "Device",
   components: {
     BusinessSelect,
+    DeviceClaimDialog,
   },
   data() {
     return {
@@ -440,6 +510,14 @@ export default {
       title: "",
       // 是否显示新增/修改弹窗
       open: false,
+      // 是否显示详情弹窗
+      detailOpen: false,
+      // 详情加载状态
+      detailLoading: false,
+      // 详情数据
+      detailForm: null,
+      // 是否显示认领设备弹窗
+      claimDeviceOpen: false,
       // 是否显示导入弹窗
       importOpen: false,
       // 导入加载状态
@@ -574,6 +652,51 @@ export default {
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
+    /** 打开认领设备弹窗 */
+    handleClaimDevice() {
+      this.claimDeviceOpen = true;
+    },
+    /** 批量激活设备 */
+    handleBatchActivate() {
+      if (!this.ids.length) {
+        this.$message.warning("请先勾选需要激活的设备");
+        return;
+      }
+      this.$confirm(`确认激活选中的 ${this.ids.length} 台设备吗？`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          return batchActivateDevice(this.ids);
+        })
+        .then(() => {
+          this.$message.success("批量激活成功");
+          this.getList();
+        })
+        .catch(() => {});
+    },
+    /** 查看详情 */
+    handleDetail(row) {
+      if (!row || !row.id) {
+        return;
+      }
+      this.detailOpen = true;
+      this.detailLoading = true;
+      this.detailForm = { ...row };
+      getDevice(row.id)
+        .then((response) => {
+          this.detailForm = response.data || { ...row };
+        })
+        .finally(() => {
+          this.detailLoading = false;
+        });
+    },
+    /** 认领成功回调 */
+    handleClaimSuccess() {
+      this.claimDeviceOpen = false;
+      this.getList();
+    },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();