From 3ec67608bbf39b08e82a121c74528d59d5db982c Mon Sep 17 00:00:00 2001
From: hx <190679152@qq.com>
Date: Sat, 14 Mar 2026 13:43:29 +0800
Subject: [PATCH] =?UTF-8?q?b=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device/device.js          |    8 +
 src/views/device/device/index.vue | 2135 ++++++++++++++---------------
 src/views/login.vue               |  496 ++++++-
 3 files changed, 1484 insertions(+), 1155 deletions(-)

diff --git a/src/api/device/device.js b/src/api/device/device.js
index 41826bc..2a1aead 100644
--- a/src/api/device/device.js
+++ b/src/api/device/device.js
@@ -45,6 +45,14 @@ export function updateDevice(data) {
   })
 }
 
+export function updateDeviceAliasRemark(data) {
+  return request({
+    url: '/device/device/alias-remark',
+    method: 'put',
+    data: data
+  })
+}
+
 export function delDevice(id) {
   return request({
     url: '/device/device/' + id,
diff --git a/src/views/device/device/index.vue b/src/views/device/device/index.vue
index 46512eb..a6dd80e 100644
--- a/src/views/device/device/index.vue
+++ b/src/views/device/device/index.vue
@@ -1,61 +1,41 @@
 <template>
-  <div class="app-container">
-    <el-form
-      :model="queryParams"
-      ref="queryForm"
-      :inline="true"
-      v-show="showSearch"
-      label-width="68px"
-      @submit.native.prevent="handleQuery"
-    >
-      <!-- 新增：订单号搜索项 -->
+<div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" @submit.native.prevent="handleQuery">
 
-      <el-form-item label="订单号" prop="orderCode">
-        <el-input
-          v-model="queryParams.orderCode"
-          placeholder="请输入订单号"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
+        <el-form-item label="订单号" prop="orderCode">
+            <el-input v-model="queryParams.orderCode" placeholder="请输入订单号" clearable size="small" @keyup.enter.native="handleQuery" />
+        </el-form-item>
 
-      <el-form-item label="序列号" prop="sn">
-        <el-input
-          v-model="queryParams.sn"
-          placeholder="请输入序列号"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
+        <el-form-item label="型号" prop="model">
+            <el-input v-model="queryParams.model" placeholder="请输入型号" clearable size="small" @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="序列号" prop="sn">
+            <el-input v-model="queryParams.sn" placeholder="请输入序列号" clearable size="small" @keyup.enter.native="handleQuery" />
+        </el-form-item>
 
-      <el-form-item label="是否启用" prop="activationStatus">
-        <el-select
-          v-model="queryParams.activationStatus"
-          placeholder="请选择启用状态"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        >
-            <el-option label="否" :value="0" />
-              <el-option label="是" :value="1" />
-        </el-select>
-      </el-form-item>
+        <el-form-item label="名称" prop="alias">
+            <el-input v-model="queryParams.alias" placeholder="请输入名称" clearable size="small" @keyup.enter.native="handleQuery" />
+        </el-form-item>
 
-      
+        <el-form-item label="设备备注" prop="remark">
+            <el-input v-model="queryParams.remark" placeholder="请输入设备备注" clearable size="small" @keyup.enter.native="handleQuery" />
+        </el-form-item>
 
+        <el-form-item label="是否启用" prop="activationStatus">
+            <el-select v-model="queryParams.activationStatus" placeholder="请选择启用状态" clearable size="small" @keyup.enter.native="handleQuery">
+                <el-option label="否" :value="0" />
+                <el-option label="是" :value="1" />
+            </el-select>
+        </el-form-item>
 
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
+        <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
-      <!-- <el-col :span="1.5">
+        <!-- <el-col :span="1.5">
         <el-button
           type="primary"
           plain
@@ -66,61 +46,23 @@
           >新增</el-button
         >
       </el-col> -->
-      <!-- 新增：导入按钮 -->
-      <el-col :span="1.5">
-        <el-button
-          type="info"
-          plain
-          icon="el-icon-upload2"
-          size="mini"
-          @click="handleImport"
-          v-hasPermi="['device:device:import']"
-          >导入</el-button
-        >
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-s-claim"
-          size="mini"
-          @click="handleClaimDevice"
-          v-hasPermi="['device:device:claim:batch']"
-        >认领设备</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-circle-check"
-          size="mini"
-          :disabled="multiple"
-              v-hasPermi="['device:device:activate:batch']"
-          @click="handleBatchActivate"
-        >批量启用</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-circle-close"
-          size="mini"
-          :disabled="multiple"
-          @click="handleBatchDisable"
-        >批量禁用</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="info"
-          plain
-          icon="el-icon-user"
-          size="mini"
-          :disabled="multiple"
-              v-hasPermi="['device:device:activate:batch']"
-          @click="handleAssignDevice"
-        >分配设备</el-button>
-      </el-col>
-      <!-- <el-col :span="1.5">
+        <!-- 新增：导入按钮 -->
+        <el-col :span="1.5">
+            <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['device:device:import']">导入</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button type="primary" plain icon="el-icon-s-claim" size="mini" @click="handleClaimDevice" v-hasPermi="['device:device:claim:batch']">认领设备</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button type="success" plain icon="el-icon-circle-check" size="mini" :disabled="multiple" v-hasPermi="['device:device:activate:batch']" @click="handleBatchActivate">批量启用</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button type="danger" plain icon="el-icon-circle-close" size="mini" :disabled="multiple" @click="handleBatchDisable">批量禁用</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button type="info" plain icon="el-icon-user" size="mini" :disabled="multiple" v-hasPermi="['device:device:activate:batch']" @click="handleAssignDevice">分配设备</el-button>
+        </el-col>
+        <!-- <el-col :span="1.5">
         <el-button
           type="success"
           plain
@@ -144,93 +86,54 @@
           >删除</el-button
         >
       </el-col> -->
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['device:device:export']"
-          >导出</el-button
-        >
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        <el-col :span="1.5">
+            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['device:device:export']">导出</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table
-      v-loading="loading"
-      :data="deviceList"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="序列号" align="center" prop="sn" />
-      <el-table-column label="MAC 地址" align="center" prop="mac" min-width="140" />
-      <el-table-column label="订单号" align="center" prop="orderCode" />
-      <el-table-column label="最后地址名称" align="center" prop="lastAddress" min-width="180" />
-   
-      <el-table-column label="是否启用" align="center" prop="activationStatus" width="100">
-        <template slot-scope="scope">
-          <el-tag :type="getActivationTagType(scope.row.activationStatus)" size="mini">
-            {{ getActivationStatusLabel(scope.row.activationStatus) }}
-          </el-tag>
-        </template>
-      </el-table-column>
+    <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="订单号" align="center" prop="orderCode" />
 
-      <!-- <el-table-column label="绑定企业id" align="center" prop="bindBusinessId" /> -->
-      <el-table-column
-        label="最后位置更新时间"
-        align="center"
-        prop="locateUpdateTime"
-        width="180"
-      >
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.locateUpdateTime, "{y}-{m}-{d}") }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="最后经纬度" align="center" min-width="220">
-        <template slot-scope="scope">
-          <span>{{ formatCoordinates(scope.row.lastLat, scope.row.lastLng) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="电量" align="center" prop="battery" />
-      <el-table-column
-        label="最后上报时间"
-        align="center"
-        prop="lastReportedTime"
-        width="180"
-      >
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.lastReportedTime, "{y}-{m}-{d}") }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="最后位置时间"
-        align="center"
-        prop="lastLocationTime"
-        width="180"
-      >
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.lastLocationTime, "{y}-{m}-{d}") }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" width="160" 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>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-location-outline"
-            @click="handleTrajectory(scope.row)"
-          >轨迹</el-button>
-        </template>
-      </el-table-column>
-      <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <el-table-column label="设备状态" align="center" prop="activationStatus">
+            <template slot-scope="scope">
+                <el-tag :type="getActivationTagType(scope.row.activationStatus)" size="mini">
+                    {{ getActivationStatusLabel(scope.row.activationStatus) }}
+                </el-tag>
+            </template>
+        </el-table-column>
+                <el-table-column label="型号" align="center" prop="model" />
+        <el-table-column label="序列号" align="center" prop="sn" />
+        <el-table-column label="名称" align="center" prop="alias" />
+        <el-table-column label="地址" align="center" prop="lastAddress"  />
+             <el-table-column label="更新时间" align="center" prop="lastLocationTime" width="190">
+            <template slot-scope="scope">
+                <span>{{ parseTime(scope.row.lastLocationTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</span>
+            </template>
+        </el-table-column>
+      <el-table-column label="经纬度" align="center" min-width="220">
+            <template slot-scope="scope">
+                <span>{{ formatCoordinates(scope.row.lastLat, scope.row.lastLng) }}</span>
+            </template>
+        </el-table-column>
+        <el-table-column label="MAC " align="center" prop="mac" min-width="140" />
+        <el-table-column label="电量" align="center" prop="battery" />
+
+        <el-table-column label="备注" align="center" prop="remark" />
+
+        <!-- <el-table-column label="绑定企业id" align="center" prop="bindBusinessId" /> -->
+     
+  
+    
+        <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditInfo(scope.row)" v-hasPermi="['device:device:list']">修改</el-button>
+                <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)">详情</el-button>
+                <el-button size="mini" type="text" icon="el-icon-location-outline" @click="handleTrajectory(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
             size="mini"
@@ -252,326 +155,234 @@
       </el-table-column> -->
     </el-table>
 
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
 
     <!-- Excel导入弹窗：仅允许上传1个文件 + 手动输入订单号/备注 -->
-    <el-dialog
-      title="设备Excel导入"
-      :visible.sync="importOpen"
-      width="550px"
-      append-to-body
-    >
-      <el-form
-        ref="importForm"
-        :model="importForm"
-        :rules="importRules"
-        label-width="90px"
-        @submit.native.prevent
-      >
- 
-     
+    <el-dialog title="设备Excel导入" :visible.sync="importOpen" width="550px" append-to-body>
+        <el-form ref="importForm" :model="importForm" :rules="importRules" label-width="90px" @submit.native.prevent>
 
+            <!-- Excel文件上传：仅1个文件（修复核心） -->
+            <el-form-item label="Excel文件">
+                <el-upload ref="upload" :limit="1" :on-exceed="handleExceed" accept=".xlsx, .xls" :auto-upload="false" :on-change="handleFileChange" :file-list="fileList" drag>
+                    <i class="el-icon-upload"></i>
+                    <div class="el-upload__text">将Excel文件拖到此处，或<em>点击上传</em></div>
+                    <div class="el-upload__tip" slot="tip">
+                        <el-icon size="12">
+                            <warning />
+                        </el-icon>
+                        <span>仅支持 .xlsx / .xls 格式文件，且只能上传1个文件</span>
+                    </div>
+                </el-upload>
+            </el-form-item>
+        </el-form>
 
-        <!-- Excel文件上传：仅1个文件（修复核心） -->
-        <el-form-item label="Excel文件">
-          <el-upload
-            ref="upload"
-            :limit="1"
-            :on-exceed="handleExceed"
-            accept=".xlsx, .xls"
-            :auto-upload="false"
-            :on-change="handleFileChange"
-            :file-list="fileList"
-            drag
-          >
-            <i class="el-icon-upload"></i>
-            <div class="el-upload__text">将Excel文件拖到此处，或<em>点击上传</em></div>
-            <div class="el-upload__tip" slot="tip">
-              <el-icon size="12"><warning /></el-icon>
-              <span>仅支持 .xlsx / .xls 格式文件，且只能上传1个文件</span>
-            </div>
-          </el-upload>
-        </el-form-item>
-      </el-form>
-
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitImport" :loading="importing"
-          >确 定</el-button
-        >
-        <el-button @click="cancelImport">取 消</el-button>
-      </div>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="submitImport" :loading="importing">确 定</el-button>
+            <el-button @click="cancelImport">取 消</el-button>
+        </div>
     </el-dialog>
 
-    <el-dialog
-      title="导入结果"
-      :visible.sync="resultOpen"
-      width="700px"
-      append-to-body
-    >
-      <div v-if="latestImportResult">
-        <el-alert
-          :title="getImportStatusMessage(latestImportResult)"
-          :type="getImportStatusType(latestImportResult.status)"
-          :closable="false"
-          show-icon
-        />
+    <el-dialog title="导入结果" :visible.sync="resultOpen" width="700px" append-to-body>
+        <div v-if="latestImportResult">
+            <el-alert :title="getImportStatusMessage(latestImportResult)" :type="getImportStatusType(latestImportResult.status)" :closable="false" show-icon />
 
-        <el-descriptions :column="2" border class="import-result-summary">
-          <el-descriptions-item label="状态">
-            {{ getImportStatusLabel(latestImportResult.status) }}
-          </el-descriptions-item>
-          <el-descriptions-item label="总数">
-            {{ latestImportResult.total }}
-          </el-descriptions-item>
-          <el-descriptions-item label="成功数">
-            {{ latestImportResult.successCount }}
-          </el-descriptions-item>
-          <el-descriptions-item label="失败数">
-            {{ latestImportResult.failCount }}
-          </el-descriptions-item>
-          <el-descriptions-item label="开始时间">
-            {{ parseTime(latestImportResult.startTime) }}
-          </el-descriptions-item>
-          <el-descriptions-item label="结束时间">
-            {{ parseTime(latestImportResult.finishTime) }}
-          </el-descriptions-item>
-        </el-descriptions>
+            <el-descriptions :column="2" border class="import-result-summary">
+                <el-descriptions-item label="状态">
+                    {{ getImportStatusLabel(latestImportResult.status) }}
+                </el-descriptions-item>
+                <el-descriptions-item label="总数">
+                    {{ latestImportResult.total }}
+                </el-descriptions-item>
+                <el-descriptions-item label="成功数">
+                    {{ latestImportResult.successCount }}
+                </el-descriptions-item>
+                <el-descriptions-item label="失败数">
+                    {{ latestImportResult.failCount }}
+                </el-descriptions-item>
+                <el-descriptions-item label="开始时间">
+                    {{ parseTime(latestImportResult.startTime) }}
+                </el-descriptions-item>
+                <el-descriptions-item label="结束时间">
+                    {{ parseTime(latestImportResult.finishTime) }}
+                </el-descriptions-item>
+            </el-descriptions>
 
-        <div
-          v-if="latestImportResult.requestErrors && latestImportResult.requestErrors.length"
-          class="import-result-block"
-        >
-          <div class="import-result-title">请求错误</div>
-          <div
-            v-for="(item, index) in latestImportResult.requestErrors"
-            :key="'request-error-' + index"
-            class="import-result-text"
-          >
-            {{ index + 1 }}. {{ item }}
-          </div>
-        </div>
+            <div v-if="latestImportResult.requestErrors && latestImportResult.requestErrors.length" class="import-result-block">
+                <div class="import-result-title">请求错误</div>
+                <div v-for="(item, index) in latestImportResult.requestErrors" :key="'request-error-' + index" class="import-result-text">
+                    {{ index + 1 }}. {{ item }}
+                </div>
+            </div>
 
-        <div
-          v-if="latestImportResult.errors && latestImportResult.errors.length"
-          class="import-result-block"
-        >
-          <div class="import-result-title">失败明细</div>
-          <el-table
-            :data="latestImportResult.errors"
-            size="mini"
-            border
-            max-height="320"
-          >
-            <el-table-column label="行号" prop="rowIndex" width="100" align="center" />
-            <el-table-column label="错误信息" prop="message" min-width="460" />
-          </el-table>
+            <div v-if="latestImportResult.errors && latestImportResult.errors.length" class="import-result-block">
+                <div class="import-result-title">失败明细</div>
+                <el-table :data="latestImportResult.errors" size="mini" border max-height="320">
+                    <el-table-column label="行号" prop="rowIndex" width="100" align="center" />
+                    <el-table-column label="错误信息" prop="message" min-width="460" />
+                </el-table>
+            </div>
         </div>
-      </div>
 
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="resultOpen = false">关 闭</el-button>
-      </div>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="resultOpen = false">关 闭</el-button>
+        </div>
     </el-dialog>
     <!-- 核心：必须挂载企业选择组件，且绑定正确的开关 -->
-    <BusinessSelect
-      :visible.sync="businessSelectVisible"
-      @select="handleBusinessSelect"
-    />
-    <BusinessSelect
-      :visible.sync="searchBusinessSelectVisible"
-      @select="handleSearchBusinessSelect"
-    />
-    <DeviceClaimDialog
-      :visible.sync="claimDeviceOpen"
-      @success="handleClaimSuccess"
-    />
-    <el-dialog
-      title="分配设备"
-      :visible.sync="assignDeviceOpen"
-      width="1200px"
-      append-to-body
-      @close="handleAssignDialogClose"
-    >
-      <UserSelector
-        ref="userSelector"
-        selection-mode
-        @select="handleAssignUserSelect"
-      />
-      <div slot="footer" class="dialog-footer">
-        <span class="assign-selected-user">
-          {{ `已选择员工：${selectedAssignUsers.length} 人` }}
-        </span>
-        <el-button @click="handleAssignDialogClose">取 消</el-button>
-        <el-button type="primary" :loading="assignLoading" @click="handleAssignSubmit">
-          确 定
-        </el-button>
-      </div>
+    <BusinessSelect :visible.sync="businessSelectVisible" @select="handleBusinessSelect" />
+    <BusinessSelect :visible.sync="searchBusinessSelectVisible" @select="handleSearchBusinessSelect" />
+    <DeviceClaimDialog :visible.sync="claimDeviceOpen" @success="handleClaimSuccess" />
+    <el-dialog title="分配设备" :visible.sync="assignDeviceOpen" width="1200px" append-to-body @close="handleAssignDialogClose">
+        <UserSelector ref="userSelector" selection-mode @select="handleAssignUserSelect" />
+        <div slot="footer" class="dialog-footer">
+            <span class="assign-selected-user">
+                {{ `已选择员工：${selectedAssignUsers.length} 人` }}
+            </span>
+            <el-button @click="handleAssignDialogClose">取 消</el-button>
+            <el-button type="primary" :loading="assignLoading" @click="handleAssignSubmit">
+                确 定
+            </el-button>
+        </div>
     </el-dialog>
-    <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="设备的唯一哈希 ID">{{ detailForm.hashid || "-" }}</el-descriptions-item>
-          <el-descriptions-item label="型号">{{ detailForm.model || "-" }}</el-descriptions-item>
-          <el-descriptions-item label="企业">
-            {{ detailForm.businessName || detailForm.merchantName || "-" }}
-          </el-descriptions-item>
-          <el-descriptions-item label="分配员工">
-            {{ formatAssignedUsers(detailForm.assignedUsers) }}
-          </el-descriptions-item>
-          <el-descriptions-item label="最后地址名称">
-            {{ detailForm.lastAddress || "-" }}
-          </el-descriptions-item>
-          <el-descriptions-item label="最后位置更新时间">
-            {{ detailForm.locateUpdateTime ? parseTime(detailForm.locateUpdateTime, "{y}-{m}-{d}") : "-" }}
-          </el-descriptions-item>
-          <el-descriptions-item label="最后经纬度">
-            {{ formatCoordinates(detailForm.lastLat, 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 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.model || "-" }}</el-descriptions-item>
+                <el-descriptions-item label="企业">
+                    {{ detailForm.businessName || detailForm.merchantName || "-" }}
+                </el-descriptions-item>
+               
+                <el-descriptions-item label="最后地址名称">
+                    {{ detailForm.lastAddress || "-" }}
+                </el-descriptions-item>
+                 <el-descriptions-item label="分配员工">
+                    {{ formatAssignedUsers(detailForm.assignedUsers) }}
+                </el-descriptions-item>
+                <el-descriptions-item label="最后位置更新时间">
+                    {{ detailForm.locateUpdateTime ? parseTime(detailForm.locateUpdateTime, "{y}-{m}-{d} {h}:{i}:{s}") : "-" }}
+                </el-descriptions-item>
+                <el-descriptions-item label="最后经纬度">
+                    {{ formatCoordinates(detailForm.lastLat, 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} {h}:{i}:{s}") : "-" }}
+                </el-descriptions-item>
+                <el-descriptions-item label="最后位置时间">
+                    {{ detailForm.lastLocationTime ? parseTime(detailForm.lastLocationTime, "{y}-{m}-{d} {h}:{i}:{s}") : "-" }}
+                </el-descriptions-item>
+            </el-descriptions>
+        </div>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="detailOpen = false">关 闭</el-button>
+        </div>
     </el-dialog>
-    <DeviceTrajectoryDialog
-      :visible.sync="trajectoryOpen"
-      :device="trajectoryDevice"
-    />
+    <el-dialog title="修改设备信息" :visible.sync="editInfoOpen" width="520px" append-to-body @close="cancelEditInfo">
+        <el-form ref="editInfoForm" :model="editInfoForm" :rules="editInfoRules" label-width="100px">
+            <el-form-item label="序列号">
+                <el-input :value="editInfoForm.sn || '-'" disabled />
+            </el-form-item>
+            <el-form-item label="名称" prop="alias">
+                <el-input v-model="editInfoForm.alias" placeholder="请输入名称" clearable maxlength="64" show-word-limit />
+            </el-form-item>
+            <el-form-item label="设备备注" prop="remark">
+                <el-input v-model="editInfoForm.remark" type="textarea" :rows="4" placeholder="请输入设备备注" maxlength="255" show-word-limit />
+            </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="cancelEditInfo">取 消</el-button>
+            <el-button type="primary" :loading="editInfoSubmitting" @click="submitEditInfo">确 定</el-button>
+        </div>
+    </el-dialog>
+    <DeviceTrajectoryDialog :visible.sync="trajectoryOpen" :device="trajectoryDevice" />
     <!-- 添加或修改系统设备主对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="序列号" prop="sn">
-          <el-input v-model="form.sn" placeholder="请输入序列号" />
-        </el-form-item>
-        <el-form-item label="MAC 地址" prop="mac">
-          <el-input v-model="form.mac" placeholder="请输入MAC 地址" />
-        </el-form-item>
-        <!-- 新增：订单号表单项 -->
-        <el-form-item label="订单号" prop="orderCode">
-          <el-input v-model="form.orderCode" placeholder="请输入订单号" />
-        </el-form-item>
-        <el-form-item label="私钥" prop="privateKey">
-          <el-input v-model="form.privateKey" placeholder="请输入私钥" />
-        </el-form-item>
-        <el-form-item label="所属批次" prop="batchNo">
-          <el-input v-model="form.batchNo" placeholder="请输入所属批次" />
-        </el-form-item>
-        <el-form-item label="设备的唯一哈希 ID" prop="hashid">
-          <el-input v-model="form.hashid" placeholder="请输入设备的唯一哈希 ID" />
-        </el-form-item>
-        <el-form-item label="型号" prop="model">
-          <el-input v-model="form.model" placeholder="请输入型号" />
-        </el-form-item>
-        <el-form-item label="绑定企业id" prop="bindBusinessId">
-          <el-input v-model="form.bindBusinessId" placeholder="请输入绑定企业id" />
-        </el-form-item>
-        <!-- 新增：备注表单项 -->
-        <el-form-item label="备注" prop="remark">
-          <el-input
-            v-model="form.remark"
-            placeholder="请输入备注"
-            type="textarea"
-            :rows="3"
-          />
-        </el-form-item>
-        <el-form-item label="最后位置更新时间" prop="locateUpdateTime">
-          <el-date-picker
-            clearable
-            size="small"
-            v-model="form.locateUpdateTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="选择最后位置更新时间"
-          >
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="最后纬度" prop="lastLat">
-          <el-input v-model="form.lastLat" placeholder="请输入最后纬度" />
-        </el-form-item>
-        <el-form-item label="最后经度" prop="lastLng">
-          <el-input v-model="form.lastLng" placeholder="请输入最后经度" />
-        </el-form-item>
-        <el-form-item label="电量" prop="battery">
-          <el-input v-model="form.battery" placeholder="请输入电量" />
-        </el-form-item>
-        <el-form-item label="最后上报时间" prop="lastReportedTime">
-          <el-date-picker
-            clearable
-            size="small"
-            v-model="form.lastReportedTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="选择最后上报时间"
-          >
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="最后位置时间" prop="lastLocationTime">
-          <el-date-picker
-            clearable
-            size="small"
-            v-model="form.lastLocationTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="选择最后位置时间"
-          >
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="创建时间" prop="createTime">
-          <el-date-picker
-            clearable
-            size="small"
-            v-model="form.createTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="选择创建时间"
-          >
-          </el-date-picker>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+            <el-form-item label="序列号" prop="sn">
+                <el-input v-model="form.sn" placeholder="请输入序列号" />
+            </el-form-item>
+            <el-form-item label="MAC 地址" prop="mac">
+                <el-input v-model="form.mac" placeholder="请输入MAC 地址" />
+            </el-form-item>
+            <!-- 新增：订单号表单项 -->
+            <el-form-item label="订单号" prop="orderCode">
+                <el-input v-model="form.orderCode" placeholder="请输入订单号" />
+            </el-form-item>
+            <el-form-item label="私钥" prop="privateKey">
+                <el-input v-model="form.privateKey" placeholder="请输入私钥" />
+            </el-form-item>
+            <el-form-item label="所属批次" prop="batchNo">
+                <el-input v-model="form.batchNo" placeholder="请输入所属批次" />
+            </el-form-item>
+            <el-form-item label="设备的唯一哈希 ID" prop="hashid">
+                <el-input v-model="form.hashid" placeholder="请输入设备的唯一哈希 ID" />
+            </el-form-item>
+            <el-form-item label="型号" prop="model">
+                <el-input v-model="form.model" placeholder="请输入型号" />
+            </el-form-item>
+            <el-form-item label="绑定企业id" prop="bindBusinessId">
+                <el-input v-model="form.bindBusinessId" placeholder="请输入绑定企业id" />
+            </el-form-item>
+            <!-- 新增：备注表单项 -->
+            <el-form-item label="备注" prop="remark">
+                <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" :rows="3" />
+            </el-form-item>
+            <el-form-item label="最后位置更新时间" prop="locateUpdateTime">
+                <el-date-picker clearable size="small" v-model="form.locateUpdateTime" type="date" value-format="yyyy-MM-dd" placeholder="选择最后位置更新时间">
+                </el-date-picker>
+            </el-form-item>
+            <el-form-item label="最后纬度" prop="lastLat">
+                <el-input v-model="form.lastLat" placeholder="请输入最后纬度" />
+            </el-form-item>
+            <el-form-item label="最后经度" prop="lastLng">
+                <el-input v-model="form.lastLng" placeholder="请输入最后经度" />
+            </el-form-item>
+            <el-form-item label="电量" prop="battery">
+                <el-input v-model="form.battery" placeholder="请输入电量" />
+            </el-form-item>
+            <el-form-item label="最后上报时间" prop="lastReportedTime">
+                <el-date-picker clearable size="small" v-model="form.lastReportedTime" type="date" value-format="yyyy-MM-dd" placeholder="选择最后上报时间">
+                </el-date-picker>
+            </el-form-item>
+            <el-form-item label="最后位置时间" prop="lastLocationTime">
+                <el-date-picker clearable size="small" v-model="form.lastLocationTime" type="date" value-format="yyyy-MM-dd" placeholder="选择最后位置时间">
+                </el-date-picker>
+            </el-form-item>
+            <el-form-item label="创建时间" prop="createTime">
+                <el-date-picker clearable size="small" v-model="form.createTime" type="date" value-format="yyyy-MM-dd" placeholder="选择创建时间">
+                </el-date-picker>
+            </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="submitForm">确 定</el-button>
+            <el-button @click="cancel">取 消</el-button>
+        </div>
     </el-dialog>
-  </div>
+</div>
 </template>
 
 <script>
 import {
-  listDevice,
-  getDevice,
-  delDevice,
-  addDevice,
-  updateDevice,
-  batchActivateDevice,
-  batchDisableDevice,
-  exportDevice,
-  getBatchNo,
+    listDevice,
+    getDevice,
+    delDevice,
+    addDevice,
+    updateDevice,
+    updateDeviceAliasRemark,
+    batchActivateDevice,
+    batchDisableDevice,
+    exportDevice,
+    getBatchNo,
 } from "@/api/device/device";
 // 新增：导入相关API（需根据实际后端接口调整）
-import { importDeviceSync } from "@/api/device/device";
-import { assignBusinessUserDevices } from "@/api/business/businessUser";
+import {
+    importDeviceSync
+} from "@/api/device/device";
+import {
+    assignBusinessUserDevices
+} from "@/api/business/businessUser";
 // 导入企业选择组件
 import BusinessSelect from "@/components/business/BusinessSelect"; // 替换为实际组件路径
 import DeviceClaimDialog from "@/components/device";
@@ -579,675 +390,797 @@ import DeviceTrajectoryDialog from "@/components/device/TrajectoryDialog";
 import UserSelector from "@/components/user";
 
 function getDefaultImportForm() {
-  return {
-    orderCode: "",
-    batchNo: "",
-    remark: "",
-    bindBusinessId: "",
-    businessName: "",
-  };
+    return {
+        orderCode: "",
+        batchNo: "",
+        remark: "",
+        bindBusinessId: "",
+        businessName: "",
+    };
 }
 
 function getDefaultQueryParams() {
-  return {
-    pageNum: 1,
-    pageSize: 10,
-    sn: null,
-    mac: null,
-    privateKey: null,
-    batchNo: null,
-    hashid: null,
-    model: null,
-    activationStatus: undefined,
-    bindBusinessId: null,
-    locateUpdateTime: null,
-    lastLat: null,
-    lastLng: null,
-    battery: null,
-    lastReportedTime: null,
-    lastLocationTime: null,
-    orderCode: null,
-  };
-}
-
-export default {
-  name: "Device",
-  components: {
-    BusinessSelect,
-    DeviceClaimDialog,
-    DeviceTrajectoryDialog,
-    UserSelector,
-  },
-  data() {
     return {
-      baseBatchNo: "",
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      activationStatusOptions: [
-        { label: "已启用", value: true },
-        { label: "未启用", value: false },
-      ],
-      // 系统设备主表格数据
-      deviceList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示新增/修改弹窗
-      open: false,
-      // 是否显示详情弹窗
-      detailOpen: false,
-      // 详情加载状态
-      detailLoading: false,
-      // 详情数据
-      detailForm: null,
-      // 是否显示轨迹弹窗
-      trajectoryOpen: false,
-      // 轨迹弹窗设备
-      trajectoryDevice: null,
-      // 是否显示分配设备弹窗
-      assignDeviceOpen: false,
-      // 分配提交中
-      assignLoading: false,
-      // 当前选中的员工
-      selectedAssignUsers: [],
-      // 是否显示认领设备弹窗
-      claimDeviceOpen: false,
-      // 是否显示导入弹窗
-      importOpen: false,
-      // 导入加载状态
-      importing: false,
-      bindBusinessId: "", // 企业ID
-      businessName: "", // 企业名称
-      searchBusinessName: "",
-      // 导入表单数据
-      importForm: getDefaultImportForm(),
-      // 导入表单校验规则
-      importRules: {
-        file: [{ required: true, message: "请选择要上传的Excel文件", trigger: "change" }],
-      },
-      // 上传文件列表
-      fileList: [],
-      // 选中的Excel文件对象
-      uploadFile: null,
-      // 最近一次导入结果
-      latestImportResult: null,
-      // 导入结果弹窗
-      resultOpen: false,
-      // 查询参数
-      queryParams: getDefaultQueryParams(),
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        sn: [{ required: true, message: "序列号不能为空", trigger: "blur" }],
-        mac: [{ required: true, message: "MAC 地址不能为空", trigger: "blur" }],
-        orderCode: [
-          // 新增：订单号校验
-          { required: true, message: "订单号不能为空", trigger: "blur" },
-        ],
-        privateKey: [{ required: true, message: "私钥不能为空", trigger: "blur" }],
-        batchNo: [{ required: true, message: "所属批次不能为空", trigger: "blur" }],
-        hashid: [
-          { required: true, message: "设备的唯一哈希 ID不能为空", trigger: "blur" },
-        ],
-        remark: [
-          // 新增：备注非必填（可根据需求调整为必填）
-          { required: false, message: "备注不能为空", trigger: "blur" },
-        ],
-      },
-      // 企业选择弹窗开关
-      businessSelectVisible: false,
-      searchBusinessSelectVisible: false,
-    };
-  },
-  created() {
-    this.getList();
-  },
-  deactivated() {
-    this.closeBusinessSelectDialogs();
-  },
-  beforeDestroy() {
-    this.closeBusinessSelectDialogs();
-  },
-  methods: {
-    closeBusinessSelectDialogs() {
-      this.businessSelectVisible = false;
-      this.searchBusinessSelectVisible = false;
-    },
-    /** 查询系统设备主列表 */
-    getList() {
-      this.loading = true;
-      listDevice(this.queryParams)
-        .then((response) => {
-          const data = response.data || {};
-          this.deviceList = Array.isArray(data.list) ? data.list : [];
-          this.total = Number(data.total) || 0;
-        })
-        .catch(() => {
-          this.deviceList = [];
-          this.total = 0;
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: null,
+        pageNum: 1,
+        pageSize: 10,
         sn: null,
+        alias: null,
+        remark: null,
         mac: null,
-        orderCode: null, // 新增：订单号重置
         privateKey: null,
         batchNo: null,
         hashid: null,
         model: null,
+        activationStatus: undefined,
         bindBusinessId: null,
-        remark: null, // 新增：备注重置
         locateUpdateTime: null,
         lastLat: null,
         lastLng: null,
         battery: null,
         lastReportedTime: null,
         lastLocationTime: null,
-        createTime: null,
-        updateTime: null,
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      if (this.$refs.queryForm) {
-        this.resetForm("queryForm");
-      }
-      this.queryParams = getDefaultQueryParams();
-      this.searchBusinessName = "";
-      this.searchBusinessSelectVisible = false;
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.id);
-      this.single = selection.length !== 1;
-      this.multiple = !selection.length;
-    },
-    getActivationStatusLabel(value) {
-      return value === true || value === 1 || value === "1" ? "是" : "否";
-    },
-    getActivationTagType(value) {
-      return value === true || value === 1 || value === "1" ? "success" : "info";
-    },
-    formatCoordinateValue(value) {
-      return value === null || value === undefined || value === "" ? "-" : value;
-    },
-    formatCoordinates(lat, lng) {
-      return `${this.formatCoordinateValue(lat)} / ${this.formatCoordinateValue(lng)}`;
-    },
-    formatAssignedUsers(users) {
-      if (!Array.isArray(users) || !users.length) {
-        return "-";
-      }
-      return users
-        .map((user) => {
-          if (!user) {
-            return "";
-          }
-          const name = user.nickName || "";
-          const account = user.account || "";
-          if (name && account) {
-            return `${name}(${account})`;
-          }
-          return name || account || "";
-        })
-        .filter(Boolean)
-        .join("，") || "-";
-    },
-    /** 打开认领设备弹窗 */
-    handleClaimDevice() {
-      this.claimDeviceOpen = true;
-    },
-    /** 打开分配设备弹窗 */
-    handleAssignDevice() {
-      if (!this.ids.length) {
-        this.$message.warning("请先勾选需要分配的设备");
-        return;
-      }
-      this.assignDeviceOpen = true;
-      this.selectedAssignUsers = [];
-      this.$nextTick(() => {
-        if (this.$refs.userSelector && this.$refs.userSelector.clearSelectionState) {
-          this.$refs.userSelector.clearSelectionState();
-        }
-      });
-    },
-    /** 选择员工账户 */
-    handleAssignUserSelect(rows) {
-      this.selectedAssignUsers = Array.isArray(rows) ? rows : [];
-    },
-    /** 关闭分配设备弹窗 */
-    handleAssignDialogClose() {
-      this.assignDeviceOpen = false;
-      this.assignLoading = false;
-      this.selectedAssignUsers = [];
-      if (this.$refs.userSelector && this.$refs.userSelector.clearSelectionState) {
-        this.$refs.userSelector.clearSelectionState();
-      }
-    },
-    /** 提交分配设备 */
-    handleAssignSubmit() {
-      if (!this.ids.length) {
-        this.$message.warning("请先勾选需要分配的设备");
-        return;
-      }
-      if (!this.selectedAssignUsers.length) {
-        this.$message.warning("请选择员工账户");
-        return;
-      }
-      const userIds = Array.from(
-        new Set(
-          this.selectedAssignUsers
-            .map((user) => user && user.id)
-            .filter((id) => id !== undefined && id !== null)
-        )
-      );
-      const deviceIds = Array.from(new Set(this.ids));
-      if (!userIds.length) {
-        this.$message.warning("未获取到有效的员工账号");
-        return;
-      }
-      this.$confirm(
-        `确认将选中的 ${deviceIds.length} 台设备分配给 ${userIds.length} 名员工吗？`,
-        "提示",
-        {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        }
-      )
-        .then(async () => {
-          this.assignLoading = true;
-          await assignBusinessUserDevices({
-            userIds,
-            deviceIds,
-          });
-          this.$message.success("分配成功");
-          this.handleAssignDialogClose();
-          this.getList();
-        })
-        .catch(() => {})
-        .finally(() => {
-          this.assignLoading = false;
-        });
-    },
-    /** 批量启用设备 */
-    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(() => {});
-    },
-    /** 批量禁用设备 */
-    handleBatchDisable() {
-      if (!this.ids.length) {
-        this.$message.warning("请先勾选需要禁用的设备");
-        return;
-      }
-      this.$confirm(`确认禁用选中的 ${this.ids.length} 台设备吗？`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          return batchDisableDevice(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 = {
-            ...row,
-            ...(response.data || {}),
-          };
-        })
-        .finally(() => {
-          this.detailLoading = false;
-        });
+        orderCode: null,
+    };
+}
+
+export default {
+    name: "Device",
+    components: {
+        BusinessSelect,
+        DeviceClaimDialog,
+        DeviceTrajectoryDialog,
+        UserSelector,
     },
-    /** 查看设备轨迹 */
-    handleTrajectory(row) {
-      if (!row || !row.id) {
-        this.$message.warning("未获取到设备信息");
-        return;
-      }
-      this.trajectoryDevice = {
-        id: row.id,
-        sn: row.sn,
-        mac: row.mac,
-      };
-      this.trajectoryOpen = true;
+    data() {
+        return {
+            baseBatchNo: "",
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            activationStatusOptions: [{
+                    label: "已启用",
+                    value: true
+                },
+                {
+                    label: "未启用",
+                    value: false
+                },
+            ],
+            // 系统设备主表格数据
+            deviceList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示新增/修改弹窗
+            open: false,
+            // 是否显示详情弹窗
+            detailOpen: false,
+            // 详情加载状态
+            detailLoading: false,
+            // 详情数据
+            detailForm: null,
+            // 是否显示设备信息编辑弹窗
+            editInfoOpen: false,
+            // 设备信息编辑提交中
+            editInfoSubmitting: false,
+            // 设备信息编辑表单
+            editInfoForm: {
+                id: null,
+                sn: "",
+                alias: "",
+                remark: "",
+            },
+            // 设备信息编辑校验
+            editInfoRules: {
+                alias: [{
+                    max: 64,
+                    message: "名称长度不能超过64个字符",
+                    trigger: "blur"
+                }],
+                remark: [{
+                    max: 255,
+                    message: "设备备注长度不能超过255个字符",
+                    trigger: "blur"
+                }],
+            },
+            // 是否显示轨迹弹窗
+            trajectoryOpen: false,
+            // 轨迹弹窗设备
+            trajectoryDevice: null,
+            // 是否显示分配设备弹窗
+            assignDeviceOpen: false,
+            // 分配提交中
+            assignLoading: false,
+            // 当前选中的员工
+            selectedAssignUsers: [],
+            // 是否显示认领设备弹窗
+            claimDeviceOpen: false,
+            // 是否显示导入弹窗
+            importOpen: false,
+            // 导入加载状态
+            importing: false,
+            bindBusinessId: "", // 企业ID
+            businessName: "", // 企业名称
+            searchBusinessName: "",
+            // 导入表单数据
+            importForm: getDefaultImportForm(),
+            // 导入表单校验规则
+            importRules: {
+                file: [{
+                    required: true,
+                    message: "请选择要上传的Excel文件",
+                    trigger: "change"
+                }],
+            },
+            // 上传文件列表
+            fileList: [],
+            // 选中的Excel文件对象
+            uploadFile: null,
+            // 最近一次导入结果
+            latestImportResult: null,
+            // 导入结果弹窗
+            resultOpen: false,
+            // 查询参数
+            queryParams: getDefaultQueryParams(),
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                sn: [{
+                    required: true,
+                    message: "序列号不能为空",
+                    trigger: "blur"
+                }],
+                mac: [{
+                    required: true,
+                    message: "MAC 地址不能为空",
+                    trigger: "blur"
+                }],
+                orderCode: [
+                    // 新增：订单号校验
+                    {
+                        required: true,
+                        message: "订单号不能为空",
+                        trigger: "blur"
+                    },
+                ],
+                privateKey: [{
+                    required: true,
+                    message: "私钥不能为空",
+                    trigger: "blur"
+                }],
+                batchNo: [{
+                    required: true,
+                    message: "所属批次不能为空",
+                    trigger: "blur"
+                }],
+                hashid: [{
+                    required: true,
+                    message: "设备的唯一哈希 ID不能为空",
+                    trigger: "blur"
+                }, ],
+                remark: [
+                    // 新增：备注非必填（可根据需求调整为必填）
+                    {
+                        required: false,
+                        message: "备注不能为空",
+                        trigger: "blur"
+                    },
+                ],
+            },
+            // 企业选择弹窗开关
+            businessSelectVisible: false,
+            searchBusinessSelectVisible: false,
+        };
     },
-    /** 认领成功回调 */
-    handleClaimSuccess() {
-      this.claimDeviceOpen = false;
-      this.getList();
+    created() {
+        this.getList();
     },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加系统设备主";
+    deactivated() {
+        this.closeBusinessSelectDialogs();
     },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids;
-      getDevice(id).then((response) => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改系统设备主";
-      });
+    beforeDestroy() {
+        this.closeBusinessSelectDialogs();
     },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate((valid) => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateDevice(this.form).then((response) => {
-              this.$message.success("修改成功");
-              this.open = false;
-              this.getList();
+    methods: {
+        closeBusinessSelectDialogs() {
+            this.businessSelectVisible = false;
+            this.searchBusinessSelectVisible = false;
+        },
+        /** 查询系统设备主列表 */
+        getList() {
+            this.loading = true;
+            listDevice(this.queryParams)
+                .then((response) => {
+                    const data = response.data || {};
+                    this.deviceList = Array.isArray(data.list) ? data.list : [];
+                    this.total = Number(data.total) || 0;
+                })
+                .catch(() => {
+                    this.deviceList = [];
+                    this.total = 0;
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                id: null,
+                sn: null,
+                mac: null,
+                orderCode: null, // 新增：订单号重置
+                privateKey: null,
+                batchNo: null,
+                hashid: null,
+                model: null,
+                bindBusinessId: null,
+                remark: null, // 新增：备注重置
+                locateUpdateTime: null,
+                lastLat: null,
+                lastLng: null,
+                battery: null,
+                lastReportedTime: null,
+                lastLocationTime: null,
+                createTime: null,
+                updateTime: null,
+            };
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            if (this.$refs.queryForm) {
+                this.resetForm("queryForm");
+            }
+            this.queryParams = getDefaultQueryParams();
+            this.searchBusinessName = "";
+            this.searchBusinessSelectVisible = false;
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map((item) => item.id);
+            this.single = selection.length !== 1;
+            this.multiple = !selection.length;
+        },
+        getActivationStatusLabel(value) {
+            return value === true || value === 1 || value === "1" ? "启用" : "禁用";
+        },
+        getActivationTagType(value) {
+            return value === true || value === 1 || value === "1" ? "success" : "info";
+        },
+        formatCoordinateValue(value) {
+            return value === null || value === undefined || value === "" ? "-" : value;
+        },
+        formatCoordinates(lat, lng) {
+            return `${this.formatCoordinateValue(lat)} / ${this.formatCoordinateValue(lng)}`;
+        },
+        formatAssignedUsers(users) {
+            if (!Array.isArray(users) || !users.length) {
+                return "-";
+            }
+            return users
+                .map((user) => {
+                    if (!user) {
+                        return "";
+                    }
+                    const name = user.nickName || "";
+                    const account = user.account || "";
+                    if (name && account) {
+                        return `${name}(${account})`;
+                    }
+                    return name || account || "";
+                })
+                .filter(Boolean)
+                .join("，") || "-";
+        },
+        /** 打开认领设备弹窗 */
+        handleClaimDevice() {
+            this.claimDeviceOpen = true;
+        },
+        /** 打开分配设备弹窗 */
+        handleAssignDevice() {
+            if (!this.ids.length) {
+                this.$message.warning("请先勾选需要分配的设备");
+                return;
+            }
+            this.assignDeviceOpen = true;
+            this.selectedAssignUsers = [];
+            this.$nextTick(() => {
+                if (this.$refs.userSelector && this.$refs.userSelector.clearSelectionState) {
+                    this.$refs.userSelector.clearSelectionState();
+                }
             });
-          } else {
-            addDevice(this.form).then((response) => {
-              this.$message.success("新增成功");
-              this.open = false;
-              this.getList();
+        },
+        /** 选择员工账户 */
+        handleAssignUserSelect(rows) {
+            this.selectedAssignUsers = Array.isArray(rows) ? rows : [];
+        },
+        /** 关闭分配设备弹窗 */
+        handleAssignDialogClose() {
+            this.assignDeviceOpen = false;
+            this.assignLoading = false;
+            this.selectedAssignUsers = [];
+            if (this.$refs.userSelector && this.$refs.userSelector.clearSelectionState) {
+                this.$refs.userSelector.clearSelectionState();
+            }
+        },
+        /** 提交分配设备 */
+        handleAssignSubmit() {
+            if (!this.ids.length) {
+                this.$message.warning("请先勾选需要分配的设备");
+                return;
+            }
+            if (!this.selectedAssignUsers.length) {
+                this.$message.warning("请选择员工账户");
+                return;
+            }
+            const userIds = Array.from(
+                new Set(
+                    this.selectedAssignUsers
+                    .map((user) => user && user.id)
+                    .filter((id) => id !== undefined && id !== null)
+                )
+            );
+            const deviceIds = Array.from(new Set(this.ids));
+            if (!userIds.length) {
+                this.$message.warning("未获取到有效的员工账号");
+                return;
+            }
+            this.$confirm(
+                    `确认将选中的 ${deviceIds.length} 台设备分配给 ${userIds.length} 名员工吗？`,
+                    "提示", {
+                        confirmButtonText: "确定",
+                        cancelButtonText: "取消",
+                        type: "warning",
+                    }
+                )
+                .then(async () => {
+                    this.assignLoading = true;
+                    await assignBusinessUserDevices({
+                        userIds,
+                        deviceIds,
+                    });
+                    this.$message.success("分配成功");
+                    this.handleAssignDialogClose();
+                    this.getList();
+                })
+                .catch(() => {})
+                .finally(() => {
+                    this.assignLoading = false;
+                });
+        },
+        /** 批量启用设备 */
+        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(() => {});
+        },
+        /** 批量禁用设备 */
+        handleBatchDisable() {
+            if (!this.ids.length) {
+                this.$message.warning("请先勾选需要禁用的设备");
+                return;
+            }
+            this.$confirm(`确认禁用选中的 ${this.ids.length} 台设备吗？`, "提示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
+                })
+                .then(() => {
+                    return batchDisableDevice(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 = {
+                        ...row,
+                        ...(response.data || {}),
+                    };
+                })
+                .finally(() => {
+                    this.detailLoading = false;
+                });
+        },
+        resetEditInfoForm() {
+            this.editInfoForm = {
+                id: null,
+                sn: "",
+                alias: "",
+                remark: "",
+            };
+            this.$nextTick(() => {
+                if (this.$refs.editInfoForm) {
+                    this.$refs.editInfoForm.clearValidate();
+                }
             });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$confirm('是否确认删除系统设备主编号为"' + ids + '"的数据项?', "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(function () {
-          return delDevice(ids);
-        })
-        .then(() => {
-          this.getList();
-          this.$message.success("删除成功");
-        })
-        .catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm("是否确认导出所有系统设备主数据项?", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(function () {
-          return exportDevice(queryParams);
-        })
-        .then((response) => {
-          this.download(response.msg);
-        })
-        .catch(() => {});
-    },
-    // ========== 新增：Excel导入相关方法 ==========
-    /** 打开导入弹窗 */
-    handleImport() {
-      this.closeBusinessSelectDialogs();
-      this.importOpen = true;
-      // 重置导入表单和文件
-      this.importForm = getDefaultImportForm();
-      this.fileList = [];
-      this.uploadFile = null;
-      this.$nextTick(() => {
-        this.$refs.upload?.clearFiles();
-        this.$refs.importForm?.resetFields();
-        // 核心：打开弹窗后调用接口获取批次号
-        this.getBatchNo()
-          .then((res) => {
-            console.log(res.data.batchNo);
-            this.baseBatchNo = res.data.batchNo;
-            this.importForm.batchNo = res.data.batchNo; // 赋值批次号
-            // 如果已有订单号（比如回显），立即拼接
-            if (this.importForm.orderCode) {
-              this.handleOrderCodeChange();
+        },
+        /** 修改名称和备注 */
+        handleEditInfo(row) {
+            if (!row || !row.id) {
+                this.$message.warning("未获取到设备信息");
+                return;
             }
-          })
-          .catch((err) => {
-            this.$message.error("获取批次号失败：" + (err.message || "接口异常"));
-          });
-      });
-    },
-    /** 限制文件数量：超出1个时提示 */
-    handleExceed(files, fileList) {
-      this.$message.warning(`最多只能上传1个Excel文件，当前已选择 ${fileList.length} 个`);
-    },
+            this.resetEditInfoForm();
+            this.editInfoForm = {
+                id: row.id,
+                sn: row.sn || "",
+                alias: row.alias || "",
+                remark: row.remark || "",
+            };
+            this.editInfoOpen = true;
+        },
+        cancelEditInfo() {
+            this.editInfoOpen = false;
+            this.editInfoSubmitting = false;
+            this.resetEditInfoForm();
+        },
+        submitEditInfo() {
+            if (!this.$refs.editInfoForm) {
+                return;
+            }
+            this.$refs.editInfoForm.validate((valid) => {
+                if (!valid) {
+                    return;
+                }
+                this.editInfoSubmitting = true;
+                updateDeviceAliasRemark({
+                        id: this.editInfoForm.id,
+                        alias: this.editInfoForm.alias,
+                        remark: this.editInfoForm.remark,
+                    })
+                    .then(() => {
+                        this.$message.success("修改成功");
+                        this.editInfoOpen = false;
+                        this.getList();
+                    })
+                    .finally(() => {
+                        this.editInfoSubmitting = false;
+                    });
+            });
+        },
+        /** 查看设备轨迹 */
+        handleTrajectory(row) {
+            if (!row || !row.id) {
+                this.$message.warning("未获取到设备信息");
+                return;
+            }
+            this.trajectoryDevice = {
+                id: row.id,
+                sn: row.sn,
+                mac: row.mac,
+                alias: row.alias,
+                remark: row.remark,
+            };
+            this.trajectoryOpen = true;
+        },
+        /** 认领成功回调 */
+        handleClaimSuccess() {
+            this.claimDeviceOpen = false;
+            this.getList();
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "添加系统设备主";
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const id = row.id || this.ids;
+            getDevice(id).then((response) => {
+                this.form = response.data;
+                this.open = true;
+                this.title = "修改系统设备主";
+            });
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate((valid) => {
+                if (valid) {
+                    if (this.form.id != null) {
+                        updateDevice(this.form).then((response) => {
+                            this.$message.success("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addDevice(this.form).then((response) => {
+                            this.$message.success("新增成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const ids = row.id || this.ids;
+            this.$confirm('是否确认删除系统设备主编号为"' + ids + '"的数据项?', "警告", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
+                })
+                .then(function () {
+                    return delDevice(ids);
+                })
+                .then(() => {
+                    this.getList();
+                    this.$message.success("删除成功");
+                })
+                .catch(() => {});
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            const queryParams = this.queryParams;
+            this.$confirm("是否确认导出所有系统设备主数据项?", "警告", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
+                })
+                .then(function () {
+                    return exportDevice(queryParams);
+                })
+                .then((response) => {
+                    this.download(response.msg);
+                })
+                .catch(() => {});
+        },
+        // ========== 新增：Excel导入相关方法 ==========
+        /** 打开导入弹窗 */
+        handleImport() {
+            this.closeBusinessSelectDialogs();
+            this.importOpen = true;
+            // 重置导入表单和文件
+            this.importForm = getDefaultImportForm();
+            this.fileList = [];
+            this.uploadFile = null;
+            this.$nextTick(() => {
+                this.$refs.upload && this.$refs.upload.clearFiles();
+                this.$refs.importForm && this.$refs.importForm.resetFields();
+                // 核心：打开弹窗后调用接口获取批次号
+                this.getBatchNo()
+                    .then((res) => {
+                        console.log(res.data.batchNo);
+                        this.baseBatchNo = res.data.batchNo;
+                        this.importForm.batchNo = res.data.batchNo; // 赋值批次号
+                        // 如果已有订单号（比如回显），立即拼接
+                        if (this.importForm.orderCode) {
+                            this.handleOrderCodeChange();
+                        }
+                    })
+                    .catch((err) => {
+                        this.$message.error("获取批次号失败：" + (err.message || "接口异常"));
+                    });
+            });
+        },
+        /** 限制文件数量：超出1个时提示 */
+        handleExceed(files, fileList) {
+            this.$message.warning(`最多只能上传1个Excel文件，当前已选择 ${fileList.length} 个`);
+        },
 
-    /** 上传前校验文件格式 */
-    beforeUpload(file) {
-      const isExcel =
-        file.type ===
-          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
-        file.type === "application/vnd.ms-excel";
-      if (!isExcel) {
-        this.$message.error("只能上传 .xlsx 或 .xls 格式的Excel文件！");
-        return false; // 阻止上传
-      }
-      return true;
-    },
+        /** 上传前校验文件格式 */
+        beforeUpload(file) {
+            const isExcel =
+                file.type ===
+                "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
+                file.type === "application/vnd.ms-excel";
+            if (!isExcel) {
+                this.$message.error("只能上传 .xlsx 或 .xls 格式的Excel文件！");
+                return false; // 阻止上传
+            }
+            return true;
+        },
 
-    /** 监听文件选择事件 */
-    handleFileChange(file, fileList) {
-      // 强制只保留最后1个文件，确保文件列表长度始终≤1
-      this.fileList = fileList.slice(-1);
-      // 仅存储这1个文件的原生对象
-      this.uploadFile = this.fileList.length > 0 ? this.fileList[0].raw : null;
-    },
+        /** 监听文件选择事件 */
+        handleFileChange(file, fileList) {
+            // 强制只保留最后1个文件，确保文件列表长度始终≤1
+            this.fileList = fileList.slice(-1);
+            // 仅存储这1个文件的原生对象
+            this.uploadFile = this.fileList.length > 0 ? this.fileList[0].raw : null;
+        },
 
-    /** 提交导入 */
-    async submitImport() {
-      // 1. 表单校验
-      try {
-        await this.$refs.importForm.validate();
-      } catch (err) {
-        return;
-      }
+        /** 提交导入 */
+        async submitImport() {
+            // 1. 表单校验
+            try {
+                await this.$refs.importForm.validate();
+            } catch (err) {
+                return;
+            }
 
-      // 2. 强制校验文件数量（双重保障）
-      if (!this.uploadFile || this.fileList.length === 0) {
-        this.$message.warning("请选择要上传的Excel文件（仅支持1个文件）！");
-        return;
-      }
-      if (this.fileList.length > 1) {
-        this.$message.warning("最多只能上传1个Excel文件，请删除多余文件！");
-        return;
-      }
+            // 2. 强制校验文件数量（双重保障）
+            if (!this.uploadFile || this.fileList.length === 0) {
+                this.$message.warning("请选择要上传的Excel文件（仅支持1个文件）！");
+                return;
+            }
+            if (this.fileList.length > 1) {
+                this.$message.warning("最多只能上传1个Excel文件，请删除多余文件！");
+                return;
+            }
 
-      // 3. 构建FormData：仅携带1个文件
-      const formData = new FormData();
+            // 3. 构建FormData：仅携带1个文件
+            const formData = new FormData();
 
-      formData.append("file", this.uploadFile); // 仅提交这1个文件
+            formData.append("file", this.uploadFile); // 仅提交这1个文件
 
-      try {
-        this.importing = true;
-        // 4. 调用后端接口
-        const res = await importDeviceSync(formData);
-        this.latestImportResult = this.normalizeImportResult(res.data);
-        this.importOpen = false;
-        this.resultOpen = true;
-        if (this.latestImportResult.successCount > 0) {
-          this.getList();
-        }
-        if (this.latestImportResult.failCount > 0 || this.latestImportResult.requestErrors.length > 0) {
-          this.$message.warning(this.getImportStatusMessage(this.latestImportResult));
-        } else {
-          this.$message.success("导入成功！");
-        }
-      } catch (error) {
-        this.$message.error("导入失败：" + (error.message || "服务器异常"));
-      } finally {
-        this.importing = false;
-      }
-    },
-    /** 取消导入 */
-    cancelImport() {
-      this.importOpen = false;
-      this.importForm = getDefaultImportForm();
-      this.fileList = [];
-      this.uploadFile = null;
-      this.baseBatchNo = "";
-      this.businessSelectVisible = false;
-    },
-    getBatchNo() {
-      return getBatchNo();
-    },
-    /** 监听订单号变化，自动拼接到批次号 */
-    handleOrderCodeChange() {
-      // 2. 拼接规则：订单号 + "_" + 基础批次号（或自定义规则）
-      if (this.importForm.orderCode) {
-        // 无论输入多少次订单号，都基于原始baseBatchNo拼接
-        this.importForm.batchNo = `${this.importForm.orderCode}_${this.baseBatchNo}`;
-      } else {
-        // 订单号清空时，恢复为原始基础批次号
-        this.importForm.batchNo = this.baseBatchNo;
-      }
-    },
+            try {
+                this.importing = true;
+                // 4. 调用后端接口
+                const res = await importDeviceSync(formData);
+                this.latestImportResult = this.normalizeImportResult(res.data);
+                this.importOpen = false;
+                this.resultOpen = true;
+                if (this.latestImportResult.successCount > 0) {
+                    this.getList();
+                }
+                if (this.latestImportResult.failCount > 0 || this.latestImportResult.requestErrors.length > 0) {
+                    this.$message.warning(this.getImportStatusMessage(this.latestImportResult));
+                } else {
+                    this.$message.success("导入成功！");
+                }
+            } catch (error) {
+                this.$message.error("导入失败：" + (error.message || "服务器异常"));
+            } finally {
+                this.importing = false;
+            }
+        },
+        /** 取消导入 */
+        cancelImport() {
+            this.importOpen = false;
+            this.importForm = getDefaultImportForm();
+            this.fileList = [];
+            this.uploadFile = null;
+            this.baseBatchNo = "";
+            this.businessSelectVisible = false;
+        },
+        getBatchNo() {
+            return getBatchNo();
+        },
+        /** 监听订单号变化，自动拼接到批次号 */
+        handleOrderCodeChange() {
+            // 2. 拼接规则：订单号 + "_" + 基础批次号（或自定义规则）
+            if (this.importForm.orderCode) {
+                // 无论输入多少次订单号，都基于原始baseBatchNo拼接
+                this.importForm.batchNo = `${this.importForm.orderCode}_${this.baseBatchNo}`;
+            } else {
+                // 订单号清空时，恢复为原始基础批次号
+                this.importForm.batchNo = this.baseBatchNo;
+            }
+        },
 
-    // 接收选中的企业数据（核心）
-    handleBusinessSelect(row) {
-      this.importForm.bindBusinessId = row.id;
-      this.importForm.businessName = row.name;
-      // 关键：选择企业后手动触发校验，更新校验状态
-      this.$nextTick(() => {
-        // 校验企业名称字段，清除必填提示
-        this.$refs.importForm.validateField("businessName");
-        // 同时校验企业ID字段（可选，双重保障）
-        this.$refs.importForm.validateField("bindBusinessId");
-      });
+        // 接收选中的企业数据（核心）
+        handleBusinessSelect(row) {
+            this.importForm.bindBusinessId = row.id;
+            this.importForm.businessName = row.name;
+            // 关键：选择企业后手动触发校验，更新校验状态
+            this.$nextTick(() => {
+                // 校验企业名称字段，清除必填提示
+                this.$refs.importForm.validateField("businessName");
+                // 同时校验企业ID字段（可选，双重保障）
+                this.$refs.importForm.validateField("bindBusinessId");
+            });
 
-      this.businessSelectVisible = false; // 关闭企业选择弹窗
-    },
-    handleSearchBusinessSelect(row) {
-      this.queryParams.bindBusinessId = row.id;
-      this.searchBusinessName = row.name;
-      this.searchBusinessSelectVisible = false;
-    },
-    normalizeImportResult(data) {
-      return {
-        status: data?.status || "",
-        total: data?.total || 0,
-        successCount: data?.successCount || 0,
-        failCount: data?.failCount || 0,
-        startTime: data?.startTime || null,
-        finishTime: data?.finishTime || null,
-        requestErrors: Array.isArray(data?.requestErrors) ? data.requestErrors : [],
-        errors: Array.isArray(data?.errors) ? data.errors : [],
-      };
-    },
-    getImportStatusLabel(status) {
-      const statusMap = {
-        SUCCESS: "导入成功",
-        PARTIAL_SUCCESS: "部分成功",
-        FAILED: "导入失败",
-        REQUEST_INVALID: "请求校验失败",
-      };
-      return statusMap[status] || status || "未知状态";
-    },
-    getImportStatusType(status) {
-      const typeMap = {
-        SUCCESS: "success",
-        PARTIAL_SUCCESS: "warning",
-        FAILED: "error",
-        REQUEST_INVALID: "error",
-      };
-      return typeMap[status] || "info";
-    },
-    getImportStatusMessage(result) {
-      const statusLabel = this.getImportStatusLabel(result.status);
-      return `${statusLabel}，成功 ${result.successCount} 条，失败 ${result.failCount} 条`;
+            this.businessSelectVisible = false; // 关闭企业选择弹窗
+        },
+        handleSearchBusinessSelect(row) {
+            this.queryParams.bindBusinessId = row.id;
+            this.searchBusinessName = row.name;
+            this.searchBusinessSelectVisible = false;
+        },
+        normalizeImportResult(data) {
+            const safeData = data || {};
+            return {
+                status: safeData.status || "",
+                total: safeData.total || 0,
+                successCount: safeData.successCount || 0,
+                failCount: safeData.failCount || 0,
+                startTime: safeData.startTime || null,
+                finishTime: safeData.finishTime || null,
+                requestErrors: Array.isArray(safeData.requestErrors) ? safeData.requestErrors : [],
+                errors: Array.isArray(safeData.errors) ? safeData.errors : [],
+            };
+        },
+        getImportStatusLabel(status) {
+            const statusMap = {
+                SUCCESS: "导入成功",
+                PARTIAL_SUCCESS: "部分成功",
+                FAILED: "导入失败",
+                REQUEST_INVALID: "请求校验失败",
+            };
+            return statusMap[status] || status || "未知状态";
+        },
+        getImportStatusType(status) {
+            const typeMap = {
+                SUCCESS: "success",
+                PARTIAL_SUCCESS: "warning",
+                FAILED: "error",
+                REQUEST_INVALID: "error",
+            };
+            return typeMap[status] || "info";
+        },
+        getImportStatusMessage(result) {
+            const statusLabel = this.getImportStatusLabel(result.status);
+            return `${statusLabel}，成功 ${result.successCount} 条，失败 ${result.failCount} 条`;
+        },
     },
-  },
 };
 </script>
 
 <style scoped>
 .import-result-summary {
-  margin-top: 16px;
+    margin-top: 16px;
 }
 
 .import-result-block {
-  margin-top: 16px;
+    margin-top: 16px;
 }
 
 .import-result-title {
-  margin-bottom: 8px;
-  font-size: 14px;
-  font-weight: 600;
-  color: #303133;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
 }
 
 .import-result-text {
-  line-height: 1.8;
-  color: #606266;
+    line-height: 1.8;
+    color: #606266;
 }
 
 .assign-selected-user {
-  float: left;
-  line-height: 32px;
-  color: #606266;
+    float: left;
+    line-height: 32px;
+    color: #606266;
 }
 </style>
diff --git a/src/views/login.vue b/src/views/login.vue
index c710e7b..e27a233 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,50 +1,194 @@
 <template>
   <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">客户 GeoTag管理后台</h3>
-      <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
-          @keyup.enter.native="handleLogin">
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code">
-        <el-input v-model="loginForm.code" auto-complete="off" placeholder="谷歌验证码" style="width: 100%"
-          @keyup.enter.native="handleLogin">
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-        </el-input>
-        <!-- <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-        </div> -->
-      </el-form-item>
-      <!-- 人机验证 -->
-      <!-- <el-form-item prop='validateCode'>
-        <el-row :span="24">
-          <el-col :span="24">
-            <reCaptcha :sitekey="key" @getValidateCode='getValidateCode' v-model="loginForm.validateCode"></reCaptcha>
-          </el-col>
-        </el-row>
-      </el-form-item> -->
-
-      <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> -->
-      <el-form-item style="width:100%;">
-        <el-button :loading="loading" size="medium" type="waming" style="width:100%;"
-          @click.native.prevent="handleLogin">
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-      </el-form-item>
-    </el-form>
-
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <span></span>
+    <!-- 左侧动态背景区域 -->
+    <div class="login-left">
+      <!-- 网格背景 -->
+      <div class="grid-overlay"></div>
 
+      <!-- 地图网格线 SVG -->
+      <svg class="map-grid" viewBox="0 0 100 100" preserveAspectRatio="none">
+        <line x1="20" y1="0" x2="20" y2="100" stroke="rgba(76,175,80,0.3)" stroke-width="0.1"/>
+        <line x1="40" y1="0" x2="40" y2="100" stroke="rgba(76,175,80,0.3)" stroke-width="0.1"/>
+        <line x1="60" y1="0" x2="60" y2="100" stroke="rgba(76,175,80,0.3)" stroke-width="0.1"/>
+        <line x1="80" y1="0" x2="80" y2="100" stroke="rgba(76,175,80,0.3)" stroke-width="0.1"/>
+        <line x1="0" y1="20" x2="100" y2="20" stroke="rgba(76,175,80,0.3)" stroke-width="0.1"/>
+        <line x1="0" y1="40" x2="100" y2="40" stroke="rgba(76,175,80,0.3)" stroke-width="0.1"/>
+        <line x1="0" y1="60" x2="100" y2="60" stroke="rgba(76,175,80,0.3)" stroke-width="0.1"/>
+        <line x1="0" y1="80" x2="100" y2="80" stroke="rgba(76,175,80,0.3)" stroke-width="0.1"/>
+      </svg>
+
+      <!-- 地图轮廓 SVG -->
+      <svg class="map-contours" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice">
+        <path d="M100,100 Q200,50 300,100 T500,100 T700,150" stroke="rgba(255,255,255,0.4)" fill="none" stroke-width="1.5"/>
+        <path d="M50,200 Q150,150 250,200 T450,200 T650,250 T750,200" stroke="rgba(255,255,255,0.3)" fill="none" stroke-width="1"/>
+        <path d="M100,300 Q250,250 400,300 T700,350" stroke="rgba(255,255,255,0.35)" fill="none" stroke-width="1"/>
+        <path d="M50,400 Q200,350 350,400 T550,400 T750,450" stroke="rgba(255,255,255,0.25)" fill="none" stroke-width="1"/>
+        <path d="M100,500 Q300,450 500,500 T700,500" stroke="rgba(255,255,255,0.3)" fill="none" stroke-width="1"/>
+        <path d="M200,50 Q350,100 500,50 T800,100" stroke="rgba(76,175,80,0.3)" fill="none" stroke-width="1"/>
+        <path d="M0,150 Q200,200 400,150 T800,200" stroke="rgba(76,175,80,0.25)" fill="none" stroke-width="1"/>
+      </svg>
+
+      <!-- 连接线 SVG -->
+      <svg class="connection-lines" viewBox="0 0 100 100" preserveAspectRatio="none">
+        <line x1="12" y1="15" x2="50" y2="50" stroke="rgba(76,175,80,0.6)" stroke-width="0.15"/>
+        <line x1="78" y1="25" x2="50" y2="50" stroke="rgba(33,150,243,0.6)" stroke-width="0.15"/>
+        <line x1="18" y1="55" x2="50" y2="50" stroke="rgba(255,193,7,0.6)" stroke-width="0.15"/>
+        <line x1="70" y1="70" x2="50" y2="50" stroke="rgba(76,175,80,0.6)" stroke-width="0.15"/>
+        <line x1="88" y1="40" x2="50" y2="50" stroke="rgba(255,87,34,0.6)" stroke-width="0.15"/>
+        <line x1="35" y1="82" x2="50" y2="50" stroke="rgba(33,150,243,0.6)" stroke-width="0.15"/>
+        <line x1="5" y1="30" x2="50" y2="50" stroke="rgba(156,39,176,0.6)" stroke-width="0.15"/>
+        <line x1="85" y1="85" x2="50" y2="50" stroke="rgba(76,175,80,0.6)" stroke-width="0.15"/>
+        <line x1="12" y1="15" x2="78" y2="25" stroke="rgba(255,255,255,0.2)" stroke-width="0.05" stroke-dasharray="0.5,0.5"/>
+        <line x1="18" y1="55" x2="70" y2="70" stroke="rgba(255,255,255,0.2)" stroke-width="0.05" stroke-dasharray="0.5,0.5"/>
+      </svg>
+
+      <!-- 十字准星 SVG -->
+      <svg class="crosshair" width="600" height="600" viewBox="0 0 200 200">
+        <circle cx="100" cy="100" r="90" fill="none" stroke="rgba(76,175,80,0.2)" stroke-width="1" stroke-dasharray="5,3"/>
+        <circle cx="100" cy="100" r="80" fill="none" stroke="rgba(76,175,80,0.15)" stroke-width="0.5"/>
+        <line x1="100" y1="20" x2="100" y2="80" stroke="rgba(76,175,80,0.3)" stroke-width="0.5"/>
+        <line x1="100" y1="120" x2="100" y2="180" stroke="rgba(76,175,80,0.3)" stroke-width="0.5"/>
+        <line x1="20" y1="100" x2="80" y2="100" stroke="rgba(76,175,80,0.3)" stroke-width="0.5"/>
+        <line x1="120" y1="100" x2="180" y2="100" stroke="rgba(76,175,80,0.3)" stroke-width="0.5"/>
+        <path d="M 30 30 L 30 50 M 30 30 L 50 30" stroke="rgba(76,175,80,0.4)" stroke-width="1" fill="none"/>
+        <path d="M 170 30 L 170 50 M 170 30 L 150 30" stroke="rgba(76,175,80,0.4)" stroke-width="1" fill="none"/>
+        <path d="M 30 170 L 30 150 M 30 170 L 50 170" stroke="rgba(76,175,80,0.4)" stroke-width="1" fill="none"/>
+        <path d="M 170 170 L 170 150 M 170 170 L 150 170" stroke="rgba(76,175,80,0.4)" stroke-width="1" fill="none"/>
+      </svg>
+
+      <!-- 脉冲波纹 -->
+      <div class="ripple"></div>
+      <div class="ripple"></div>
+      <div class="ripple"></div>
+      <div class="ripple"></div>
+
+      <!-- 定位点 -->
+      <div class="location-pins">
+        <div class="pin">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
+          </svg>
+        </div>
+        <div class="pin">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
+          </svg>
+        </div>
+        <div class="pin">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
+          </svg>
+        </div>
+        <div class="pin">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
+          </svg>
+        </div>
+        <div class="pin">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
+          </svg>
+        </div>
+        <div class="pin">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
+          </svg>
+        </div>
+        <div class="pin">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
+          </svg>
+        </div>
+        <div class="pin">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
+          </svg>
+        </div>
+      </div>
+
+      <!-- 装饰圆环 -->
+      <div class="orbit-ring"></div>
+      <div class="orbit-ring"></div>
+      <div class="orbit-ring"></div>
+      <div class="orbit-ring"></div>
+
+      <!-- 粒子效果 -->
+      <div class="particles" id="particles"></div>
+
+      <!-- 中央超大定位标记 -->
+      <div class="center-marker">
+        <svg class="marker-icon" viewBox="0 0 100 100">
+          <circle cx="50" cy="50" r="48" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
+          <circle cx="50" cy="50" r="40" fill="none" stroke="rgba(76,175,80,0.2)" stroke-width="1.5"/>
+          <path d="M50 10 C32 10 20 24 20 42 C20 65 50 90 50 90 C50 90 80 65 80 42 C80 24 68 10 50 10 Z" 
+                fill="rgba(76,175,80,0.85)" 
+                stroke="rgba(255,255,255,0.7)" 
+                stroke-width="2.5"/>
+          <circle cx="50" cy="38" r="12" fill="rgba(255,255,255,0.95)"/>
+          <circle cx="50" cy="38" r="7" fill="rgba(76,175,80,1)"/>
+          <circle cx="50" cy="38" r="18" fill="none" stroke="rgba(76,175,80,0.6)" stroke-width="2">
+            <animate attributeName="r" from="18" to="35" dur="2s" repeatCount="indefinite"/>
+            <animate attributeName="opacity" from="0.6" to="0" dur="2s" repeatCount="indefinite"/>
+          </circle>
+          <circle cx="50" cy="38" r="18" fill="none" stroke="rgba(76,175,80,0.4)" stroke-width="1.5">
+            <animate attributeName="r" from="18" to="45" dur="2s" begin="0.5s" repeatCount="indefinite"/>
+            <animate attributeName="opacity" from="0.4" to="0" dur="2s" begin="0.5s" repeatCount="indefinite"/>
+          </circle>
+          <circle cx="50" cy="38" r="18" fill="none" stroke="rgba(76,175,80,0.3)" stroke-width="1">
+            <animate attributeName="r" from="18" to="55" dur="2s" begin="1s" repeatCount="indefinite"/>
+            <animate attributeName="opacity" from="0.3" to="0" dur="2s" begin="1s" repeatCount="indefinite"/>
+          </circle>
+        </svg>
+      </div>
+    </div>
+
+    <!-- 右侧登录表单区域 -->
+    <div class="login-right">
+      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+        <h3 class="title">GeoTag 企业客户后台</h3>
+        <el-form-item prop="username">
+          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
+            @keyup.enter.native="handleLogin">
+            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="code">
+          <el-input v-model="loginForm.code" auto-complete="off" placeholder="谷歌验证码" style="width: 100%"
+            @keyup.enter.native="handleLogin">
+            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+          </el-input>
+          <!-- <div class="login-code">
+            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+          </div> -->
+        </el-form-item>
+        <!-- 人机验证 -->
+        <!-- <el-form-item prop='validateCode'>
+          <el-row :span="24">
+            <el-col :span="24">
+              <reCaptcha :sitekey="key" @getValidateCode='getValidateCode' v-model="loginForm.validateCode"></reCaptcha>
+            </el-col>
+          </el-row>
+        </el-form-item> -->
+
+        <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> -->
+        <el-form-item style="width:100%;">
+          <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
+            @click.native.prevent="handleLogin">
+            <span v-if="!loading">登 录</span>
+            <span v-else>登 录 中...</span>
+          </el-button>
+        </el-form-item>
+      </el-form>
+
+      <!--  底部  -->
+      <div class="el-login-footer">
+        <span>Copyright © 2026 GeoTag All Rights Reserved</span>
+      </div>
     </div>
   </div>
 </template>
@@ -92,7 +236,6 @@ export default {
       loading: false,
       redirect: undefined
     };
-
   },
   watch: {
     $route: {
@@ -105,7 +248,25 @@ export default {
   created() {
     // this.getCookie();
   },
+  mounted() {
+    this.initParticles();
+  },
   methods: {
+    initParticles() {
+      const particlesContainer = document.getElementById('particles');
+      if (particlesContainer) {
+        for (let i = 0; i < 40; i++) {
+          const particle = document.createElement('div');
+          particle.className = 'particle';
+          particle.style.left = Math.random() * 100 + '%';
+          particle.style.animationDelay = Math.random() * 25 + 's';
+          particle.style.animationDuration = (20 + Math.random() * 10) + 's';
+          particle.style.width = (2 + Math.random() * 3) + 'px';
+          particle.style.height = particle.style.width;
+          particlesContainer.appendChild(particle);
+        }
+      }
+    },
     icoCreate(icoUrl) {
       var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
       link.type = 'image/x-icon';
@@ -155,25 +316,226 @@ export default {
 <style rel="stylesheet/scss" lang="scss">
 .login {
   display: flex;
-  justify-content: center;
-  align-items: center;
   width: 100%;
   height: 100%;
-  background-image: url("../assets/images/bg.png");
-  background-size: 100%;
+}
+
+/* 左侧动态背景区域 */
+.login-left {
+  flex: 0 0 60%;
+  position: relative;
+  background: linear-gradient(135deg, #0a1929 0%, #0d3c61 30%, #01579b 60%, #006064 100%);
+  overflow: hidden;
+}
+
+/* 网格背景 */
+.grid-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: 
+    linear-gradient(rgba(76,175,80,0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(76,175,80,0.08) 1px, transparent 1px);
+  background-size: 60px 60px;
+}
+
+/* 地图轮廓 */
+.map-contours {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  height: 90%;
+  opacity: 0.15;
+}
+
+/* 定位点动画 */
+.location-pins {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.pin {
+  position: absolute;
+  animation: pulsePin 3s ease-in-out infinite;
+}
+
+.pin svg {
+  width: 50px;
+  height: 50px;
+  filter: drop-shadow(0 0 15px currentColor);
+}
+
+.pin:nth-child(1) { top: 15%; left: 12%; animation-delay: 0s; color: rgba(76,175,80,0.9); }
+.pin:nth-child(2) { top: 25%; left: 78%; animation-delay: 0.5s; color: rgba(33,150,243,0.9); }
+.pin:nth-child(3) { top: 55%; left: 18%; animation-delay: 1s; color: rgba(255,193,7,0.9); }
+.pin:nth-child(4) { top: 70%; left: 70%; animation-delay: 1.5s; color: rgba(76,175,80,0.9); }
+.pin:nth-child(5) { top: 40%; left: 88%; animation-delay: 2s; color: rgba(255,87,34,0.9); }
+.pin:nth-child(6) { top: 82%; left: 35%; animation-delay: 2.5s; color: rgba(33,150,243,0.9); }
+.pin:nth-child(7) { top: 30%; left: 5%; animation-delay: 0.8s; color: rgba(156,39,176,0.9); }
+.pin:nth-child(8) { top: 85%; left: 85%; animation-delay: 1.8s; color: rgba(76,175,80,0.9); }
+
+@keyframes pulsePin {
+  0%, 100% { transform: scale(1); opacity: 0.7; }
+  50% { transform: scale(1.15); opacity: 1; }
+}
+
+/* 连接线 */
+.connection-lines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.2;
+}
+
+/* 中央大定位标记 */
+.center-marker {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.marker-icon {
+  width: 350px;
+  height: 350px;
+  animation: float 4s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-20px); }
+}
+
+/* 装饰圆环 */
+.orbit-ring {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 2px solid rgba(76, 175, 80, 0.15);
+  border-radius: 50%;
+  animation: rotate 60s linear infinite;
+}
+
+.orbit-ring:nth-child(1) { width: 500px; height: 500px; }
+.orbit-ring:nth-child(2) { width: 700px; height: 700px; animation-duration: 80s; animation-direction: reverse; }
+.orbit-ring:nth-child(3) { width: 900px; height: 900px; animation-duration: 100s; }
+.orbit-ring:nth-child(4) { width: 1100px; height: 1100px; animation-duration: 120s; }
+
+@keyframes rotate {
+  from { transform: translate(-50%, -50%) rotate(0deg); }
+  to { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+/* 粒子效果 */
+.particles {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.particle {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  background: rgba(76, 175, 80, 0.5);
+  border-radius: 50%;
+  animation: particleFloat 25s linear infinite;
+}
+
+@keyframes particleFloat {
+  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
+  10% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
+}
+
+/* 十字准星 */
+.crosshair {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+/* 地图网格线 */
+.map-grid {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.1;
+}
+
+/* 脉冲波纹 */
+.ripple {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 2px solid rgba(76, 175, 80, 0.3);
+  border-radius: 50%;
+  animation: rippleEffect 4s ease-out infinite;
+}
+
+.ripple:nth-child(1) { animation-delay: 0s; }
+.ripple:nth-child(2) { animation-delay: 1s; }
+.ripple:nth-child(3) { animation-delay: 2s; }
+.ripple:nth-child(4) { animation-delay: 3s; }
+
+@keyframes rippleEffect {
+  0% {
+    width: 100px;
+    height: 100px;
+    opacity: 0.8;
+  }
+  100% {
+    width: 800px;
+    height: 800px;
+    opacity: 0;
+  }
+}
+
+/* 右侧登录表单区域 */
+.login-right {
+  flex: 0 0 40%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
+  position: relative;
 }
 
 .title {
   margin: 0px auto 30px auto;
   text-align: center;
   color: #0A1146;
+  font-size: 26px;
+  font-weight: 600;
 }
 
 .login-form {
-  border-radius: 6px;
+  border-radius: 8px;
   background: #ffffff;
   width: 400px;
-  padding: 25px 25px 5px 25px;
+  padding: 40px 35px 15px 35px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
 
   .el-input {
     height: 38px;
@@ -210,11 +572,11 @@ export default {
 .el-login-footer {
   height: 40px;
   line-height: 40px;
-  position: fixed;
+  position: absolute;
   bottom: 0;
   width: 100%;
   text-align: center;
-  color: #fff;
+  color: #999;
   font-family: Arial;
   font-size: 12px;
   letter-spacing: 1px;
@@ -223,4 +585,30 @@ export default {
 .login-code-img {
   height: 38px;
 }
-</style>
+
+/* 响应式 */
+@media (max-width: 1024px) {
+  .login-left {
+    flex: 0 0 50%;
+  }
+  .login-right {
+    flex: 0 0 50%;
+  }
+  .login-form {
+    width: 350px;
+  }
+}
+
+@media (max-width: 768px) {
+  .login-left {
+    display: none;
+  }
+  .login-right {
+    flex: 0 0 100%;
+  }
+  .login-form {
+    width: 90%;
+    max-width: 400px;
+  }
+}
+</style>
\ No newline at end of file