manual-add-device

main/manager-web/src/apis/api.js

@@ -7,6 +7,7 @@ import model from './module/model.js'
 import ota from './module/ota.js'
 import timbre from "./module/timbre.js"
 import user from './module/user.js'
+
 /**
  * 接口地址
  * 开发时自动读取使用.env.development文件
@@ -22,7 +23,6 @@ export function getServiceUrl() {
     return DEV_API_SERVICE
 }
 
-
 /** request服务封装 */
 export default {
     getServiceUrl,

main/manager-web/src/apis/module/device.js

@@ -1,5 +1,6 @@
 import { getServiceUrl } from '../api';
 import RequestService from '../httpRequest';
+import request from '../request'
 
 export default {
     // 已绑设备
@@ -68,4 +69,8 @@ export default {
                 })
             }).send()
     },
+    // 手动添加设备
+    manualAddDevice: (params, callback) => {
+        return request.post('/device/manual-add', params, callback);
+    },
 }

main/manager-web/src/components/ManualAddDeviceDialog.vue

@@ -0,0 +1,158 @@
+<template>
+  <el-dialog title="手动添加设备" :visible="visible" @close="handleClose" width="30%" center>
+    <div class="dialog-content">
+      <el-form :model="deviceForm" :rules="rules" ref="deviceForm" label-width="100px">
+        <el-form-item label="设备型号" prop="board">
+          <el-select v-model="deviceForm.board" placeholder="请选择设备型号" style="width: 100%">
+            <el-option
+              v-for="item in firmwareTypes"
+              :key="item.key"
+              :label="item.name"
+              :value="item.key">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="固件版本" prop="appVersion">
+          <el-input v-model="deviceForm.appVersion" placeholder="请输入固件版本"></el-input>
+        </el-form-item>
+        <el-form-item label="Mac地址" prop="macAddress">
+          <el-input v-model="deviceForm.macAddress" placeholder="请输入Mac地址"></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div style="display: flex;margin: 15px 15px;gap: 7px;">
+      <div class="dialog-btn" @click="submitForm">确定</div>
+      <div class="dialog-btn cancel-btn" @click="cancel">取消</div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import Api from '@/apis/api';
+
+export default {
+  name: 'ManualAddDeviceDialog',
+  props: {
+    visible: { type: Boolean, required: true },
+    agentId: { type: String, required: true }
+  },
+  data() {
+    // MAC地址验证规则
+    const validateMac = (rule, value, callback) => {
+      const macRegex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/;
+      if (!value) {
+        callback(new Error('请输入Mac地址'));
+      } else if (!macRegex.test(value)) {
+        callback(new Error('请输入正确的Mac地址格式，例如：00:1A:2B:3C:4D:5E'));
+      } else {
+        callback();
+      }
+    };
+
+    return {
+      deviceForm: {
+        board: '',
+        appVersion: '',
+        macAddress: ''
+      },
+      firmwareTypes: [],
+      rules: {
+        board: [
+          { required: true, message: '请选择设备型号', trigger: 'change' }
+        ],
+        appVersion: [
+          { required: true, message: '请输入固件版本', trigger: 'blur' }
+        ],
+        macAddress: [
+          { required: true, validator: validateMac, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.getFirmwareTypes();
+  },
+  methods: {
+    async getFirmwareTypes() {
+      try {
+        const res = await Api.dict.getDictDataByType('FIRMWARE_TYPE');
+        this.firmwareTypes = res.data;
+      } catch (error) {
+        console.error('获取固件类型失败:', error);
+        this.$message.error(error.message || '获取固件类型失败');
+      }
+    },
+    submitForm() {
+      this.$refs.deviceForm.validate((valid) => {
+        if (valid) {
+          this.addDevice();
+        }
+      });
+    },
+    addDevice() {
+      const params = {
+        agentId: this.agentId,
+        ...this.deviceForm
+      };
+      
+      Api.device.manualAddDevice(params, ({ data }) => {
+        if (data.code === 0) {
+          this.$message.success('设备添加成功');
+          this.$emit('refresh');
+          this.closeDialog();
+        } else {
+          this.$message.error(data.msg || '添加失败');
+        }
+      });
+    },
+    closeDialog() {
+      this.$emit('update:visible', false);
+      this.$refs.deviceForm.resetFields();
+    },
+    cancel() {
+      this.closeDialog();
+    },
+    handleClose() {
+      this.closeDialog();
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog-content {
+  padding: 0 20px;
+}
+
+.dialog-btn {
+  cursor: pointer;
+  flex: 1;
+  border-radius: 23px;
+  background: #5778ff;
+  height: 40px;
+  font-weight: 500;
+  font-size: 12px;
+  color: #fff;
+  line-height: 40px;
+  text-align: center;
+}
+
+.cancel-btn {
+  background: #e6ebff;
+  border: 1px solid #adbdff;
+  color: #5778ff;
+}
+
+::v-deep .el-dialog {
+  border-radius: 15px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+::v-deep .el-dialog__body {
+  padding: 20px 6px;
+}
+
+::v-deep .el-form-item {
+  margin-bottom: 20px;
+}
+</style> 

main/manager-web/src/views/DeviceManagement.vue

@@ -77,7 +77,10 @@
                   {{ isAllSelected ? '取消全选' : '全选' }}
                 </el-button>
                 <el-button type="success" size="mini" class="add-device-btn" @click="handleAddDevice">
-                  新增
+                  验证码绑定
+                </el-button>
+                <el-button type="success" size="mini" class="add-device-btn" @click="handleManualAddDevice">
+                  手动添加
                 </el-button>
                 <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteSelected">解绑</el-button>
               </div>
@@ -103,6 +106,8 @@
 
     <AddDeviceDialog :visible.sync="addDeviceDialogVisible" :agent-id="currentAgentId"
                      @refresh="fetchBindDevices(currentAgentId)"/>
+    <ManualAddDeviceDialog :visible.sync="manualAddDeviceDialogVisible" :agent-id="currentAgentId"
+                     @refresh="fetchBindDevices(currentAgentId)"/>
 
   </div>
 </template>
@@ -110,13 +115,19 @@
 <script>
 import Api from '@/apis/api';
 import AddDeviceDialog from "@/components/AddDeviceDialog.vue";
+import ManualAddDeviceDialog from "@/components/ManualAddDeviceDialog.vue";
 import HeaderBar from "@/components/HeaderBar.vue";
 
 export default {
-  components: {HeaderBar, AddDeviceDialog},
+  components: {
+    HeaderBar, 
+    AddDeviceDialog,
+    ManualAddDeviceDialog
+  },
   data() {
     return {
       addDeviceDialogVisible: false,
+      manualAddDeviceDialogVisible: false,
       selectedDevices: [],
       isAllSelected: false,
       searchKeyword: "",
@@ -252,6 +263,9 @@ export default {
     handleAddDevice() {
       this.addDeviceDialogVisible = true;
     },
+    handleManualAddDevice() {
+      this.manualAddDeviceDialogVisible = true;
+    },
     submitRemark(row) {
       if (row._submitting) return;