From 6d388efde03e0f1356a53c57a6497ee78efdf4ca Mon Sep 17 00:00:00 2001
From: hx <190679152@qq.com>
Date: Sat, 14 Mar 2026 14:08:39 +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

---
 dist/static/img/profile.5528ca1b.png          | Bin 0 -> 12340 bytes
 src/components/device/TrajectoryDialog.vue    | 758 ++++++++++++++++++
 src/components/device/index.vue               | 314 ++++++++
 src/components/user/index.vue                 | 735 +++++++++++++++++
 src/views/login2.vue                          | 226 ++++++
 .../user/components/ProfileSettingsCard.vue   | 261 ++++++
 6 files changed, 2294 insertions(+)
 create mode 100644 dist/static/img/profile.5528ca1b.png
 create mode 100644 src/components/device/TrajectoryDialog.vue
 create mode 100644 src/components/device/index.vue
 create mode 100644 src/components/user/index.vue
 create mode 100644 src/views/login2.vue
 create mode 100644 src/views/system/user/components/ProfileSettingsCard.vue

diff --git a/dist/static/img/profile.5528ca1b.png b/dist/static/img/profile.5528ca1b.png
new file mode 100644
index 0000000000000000000000000000000000000000..826ae6a7bdd78a7e4e80dc35305d9883b69edf93
GIT binary patch
literal 12340
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
TwtoF*AHS@ml0=P|N$CFp)<!2+

literal 0
HcmV?d00001

diff --git a/src/components/device/TrajectoryDialog.vue b/src/components/device/TrajectoryDialog.vue
new file mode 100644
index 0000000..9ed4ee5
--- /dev/null
+++ b/src/components/device/TrajectoryDialog.vue
@@ -0,0 +1,758 @@
+<template>
+  <el-dialog
+    :title="dialogTitle"
+    :visible.sync="dialogVisible"
+    width="1100px"
+    append-to-body
+    @open="handleOpen"
+    @close="handleClose"
+  >
+    <div class="trajectory-summary">
+      <span>设备ID：{{ device && device.id ? device.id : "-" }}</span>
+      <span>序列号：{{ device && device.sn ? device.sn : "-" }}</span>
+      <span>名称：{{ device && device.alias ? device.alias : "-" }}</span>
+      <span>设备备注：{{ device && device.remark ? device.remark : "-" }}</span>
+      <span>显示轨迹点：{{ trajectoryPoints.length }}</span>
+      <span v-if="totalTrajectoryCount > trajectoryPoints.length">
+        共 {{ totalTrajectoryCount }} 条，当前仅展示最近 {{ trajectoryPoints.length }} 条
+      </span>
+    </div>
+
+    <el-alert
+      v-if="loadError"
+      :title="loadError"
+      type="warning"
+      :closable="false"
+      show-icon
+      class="trajectory-alert"
+    />
+
+    <el-tabs
+      v-model="activePanel"
+      class="trajectory-tabs"
+      @tab-click="handlePanelChange"
+    >
+      <el-tab-pane label="地图轨迹" name="map">
+        <div class="trajectory-toolbar">
+          <span class="trajectory-toolbar__label">地图服务</span>
+          <el-radio-group
+            v-model="mapProvider"
+            size="small"
+            @change="handleProviderChange"
+          >
+            <el-radio-button label="amap" :disabled="!hasAmapKey">
+              高德地图
+            </el-radio-button>
+            <el-radio-button label="google" :disabled="!hasGoogleKey">
+              谷歌地图
+            </el-radio-button>
+          </el-radio-group>
+        </div>
+
+        <div class="trajectory-map-shell" v-loading="loading || mapLoading">
+          <el-empty
+            v-if="!loading && !mapLoading && !loadError && !trajectoryPoints.length"
+            description="暂无轨迹数据"
+            :image-size="88"
+          />
+          <div
+            v-show="!loadError && trajectoryPoints.length"
+            ref="map"
+            class="trajectory-map"
+          ></div>
+        </div>
+      </el-tab-pane>
+
+      <el-tab-pane label="轨迹明细" name="table">
+        <el-empty
+          v-if="!loading && !trajectoryPoints.length"
+          description="暂无轨迹数据"
+          :image-size="88"
+        />
+        <el-table
+          v-else
+          :data="trajectoryPoints"
+          border
+          size="mini"
+          max-height="420"
+          class="trajectory-table"
+        >
+          <el-table-column label="#" type="index" width="60" align="center" />
+          <el-table-column label="位置时间" min-width="180" align="center">
+            <template slot-scope="scope">
+              {{
+                formatTrackTime(
+                  scope.row.locationTime ||
+                    scope.row.reportedTime ||
+                    scope.row.createTime
+                )
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column label="经纬度" min-width="220" align="center">
+            <template slot-scope="scope">
+              {{ formatTrackCoordinates(scope.row.lat, scope.row.lng) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="地址" min-width="240" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.address || "-" }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="电量"
+            prop="battery"
+            width="100"
+            align="center"
+          />
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import {
+  getDeviceTrajectory,
+  getDeviceTrajectoryMapConfig,
+} from "@/api/device/device";
+import { loadAMap } from "@/utils/loadAMap";
+import { loadGoogleMaps } from "@/utils/loadGoogleMaps";
+
+const AMAP_DEFAULT_CENTER = [121.4737, 31.2304];
+const GOOGLE_DEFAULT_CENTER = { lat: 31.2304, lng: 121.4737 };
+const CONVERT_BATCH_SIZE = 40;
+const MAX_TRAJECTORY_POINTS = 100;
+
+export default {
+  name: "DeviceTrajectoryDialog",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    device: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      activePanel: "map",
+      mapProvider: "amap",
+      loading: false,
+      mapLoading: false,
+      loadError: "",
+      trajectoryPoints: [],
+      totalTrajectoryCount: 0,
+      map: null,
+      mapVendor: "",
+      polyline: null,
+      markers: [],
+      markerInfoWindows: [],
+      mapsApi: null,
+      mapConfig: null,
+    };
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(value) {
+        this.$emit("update:visible", value);
+      },
+    },
+    dialogTitle() {
+      const sn = this.device && this.device.sn ? this.device.sn : "";
+      return sn ? `设备轨迹 - ${sn}` : "设备轨迹";
+    },
+    hasAmapKey() {
+      return !!(this.mapConfig && this.mapConfig.gaodeKey);
+    },
+    hasGoogleKey() {
+      return !!(this.mapConfig && this.mapConfig.googleKey);
+    },
+  },
+  methods: {
+    async handleOpen() {
+      this.activePanel = "map";
+      if (!this.device || !this.device.id) {
+        this.loadError = "未获取到设备信息，无法查看轨迹";
+        return;
+      }
+      await this.fetchMapConfig();
+      if (this.loadError) {
+        return;
+      }
+      this.mapProvider = this.resolveDefaultProvider();
+      await this.fetchTrajectory();
+      if (!this.trajectoryPoints.length || this.loadError) {
+        return;
+      }
+      await this.renderCurrentProviderMap();
+    },
+    handleClose() {
+      this.destroyMap(true);
+      this.activePanel = "map";
+      this.mapProvider = "amap";
+      this.loadError = "";
+      this.trajectoryPoints = [];
+      this.totalTrajectoryCount = 0;
+      this.mapConfig = null;
+    },
+    async handlePanelChange() {
+      if (this.activePanel !== "map" || !this.trajectoryPoints.length) {
+        return;
+      }
+      await this.renderCurrentProviderMap();
+    },
+    async handleProviderChange() {
+      if (this.activePanel !== "map" || !this.trajectoryPoints.length) {
+        return;
+      }
+      this.destroyMap(true);
+      await this.renderCurrentProviderMap();
+    },
+    resolveDefaultProvider() {
+      if (this.hasAmapKey) {
+        return "amap";
+      }
+      if (this.hasGoogleKey) {
+        return "google";
+      }
+      return "amap";
+    },
+    async fetchMapConfig() {
+      this.loadError = "";
+      try {
+        const response = await getDeviceTrajectoryMapConfig();
+        const data = response && response.data ? response.data : {};
+        if (!data.gaodeKey && !data.googleKey) {
+          this.loadError = "当前企业未配置地图 Key";
+          return;
+        }
+        this.mapConfig = data;
+      } catch (error) {
+        this.mapConfig = null;
+        this.loadError =
+          error && error.message ? error.message : "地图配置加载失败";
+      }
+    },
+    async fetchTrajectory() {
+      this.loading = true;
+      this.loadError = "";
+      try {
+        const response = await getDeviceTrajectory(this.device.id);
+        const data = Array.isArray(response.data) ? response.data : [];
+        const validPoints = data
+          .map((item) => {
+            const latNum = this.normalizeCoordinate(item.lat, "lat");
+            const lngNum = this.normalizeCoordinate(item.lng, "lng");
+            return {
+              ...item,
+              latNum,
+              lngNum,
+            };
+          })
+          .filter((item) => item.latNum !== null && item.lngNum !== null);
+        this.totalTrajectoryCount = validPoints.length;
+        this.trajectoryPoints = validPoints.slice(-MAX_TRAJECTORY_POINTS);
+      } catch (error) {
+        this.trajectoryPoints = [];
+        this.totalTrajectoryCount = 0;
+        this.loadError = error && error.message ? error.message : "轨迹加载失败";
+      } finally {
+        this.loading = false;
+      }
+    },
+    async renderCurrentProviderMap() {
+      if (!this.trajectoryPoints.length) {
+        return;
+      }
+      this.loadError = "";
+      await this.$nextTick();
+      if (this.mapProvider === "google") {
+        await this.ensureGoogleMap();
+        if (!this.loadError) {
+          this.renderGoogleTrajectory();
+        }
+        return;
+      }
+      await this.ensureAmap();
+      if (!this.loadError) {
+        await this.prepareTrajectoryForAmap();
+        this.renderAmapTrajectory();
+      }
+    },
+    async ensureAmap() {
+      if (!this.hasAmapKey) {
+        this.loadError = "当前企业未配置高德地图 Key";
+        return;
+      }
+      this.mapLoading = true;
+      try {
+        const mapsApi = await loadAMap({
+          key: this.mapConfig.gaodeKey,
+          securityJsCode: this.mapConfig.gaodeSecurityKey || "",
+          plugins: ["AMap.Scale", "AMap.ToolBar"],
+        });
+        if (!this.$refs.map) {
+          return;
+        }
+        if (!this.map || this.mapVendor !== "amap") {
+          this.destroyMap();
+          this.mapsApi = mapsApi;
+          this.map = new mapsApi.Map(this.$refs.map, {
+            center: AMAP_DEFAULT_CENTER,
+            zoom: 4,
+            resizeEnable: true,
+            viewMode: "2D",
+          });
+          this.mapVendor = "amap";
+          if (mapsApi.Scale) {
+            this.map.addControl(new mapsApi.Scale());
+          }
+          if (mapsApi.ToolBar) {
+            this.map.addControl(new mapsApi.ToolBar());
+          }
+        } else if (typeof this.map.resize === "function") {
+          this.mapsApi = mapsApi;
+          this.map.resize();
+        }
+      } catch (error) {
+        this.loadError = error && error.message ? error.message : "高德地图加载失败";
+      } finally {
+        this.mapLoading = false;
+      }
+    },
+    async ensureGoogleMap() {
+      if (!this.hasGoogleKey) {
+        this.loadError = "当前企业未配置谷歌地图 Key";
+        return;
+      }
+      this.mapLoading = true;
+      try {
+        const mapsApi = await loadGoogleMaps(this.mapConfig.googleKey);
+        if (!this.$refs.map) {
+          return;
+        }
+        if (!this.map || this.mapVendor !== "google") {
+          this.destroyMap();
+          this.mapsApi = mapsApi;
+          this.map = new mapsApi.Map(this.$refs.map, {
+            center: GOOGLE_DEFAULT_CENTER,
+            zoom: 4,
+            mapTypeControl: false,
+            streetViewControl: false,
+            fullscreenControl: true,
+          });
+          this.mapVendor = "google";
+        } else if (mapsApi.event) {
+          this.mapsApi = mapsApi;
+          mapsApi.event.trigger(this.map, "resize");
+        }
+      } catch (error) {
+        this.loadError = error && error.message ? error.message : "谷歌地图加载失败";
+      } finally {
+        this.mapLoading = false;
+      }
+    },
+    async prepareTrajectoryForAmap() {
+      if (
+        this.trajectoryPoints.every(
+          (item) => item.amapLng !== undefined && item.amapLat !== undefined
+        )
+      ) {
+        return;
+      }
+      const convertedPoints = await this.convertTrajectoryCoordinates(
+        this.trajectoryPoints
+      );
+      this.trajectoryPoints = this.trajectoryPoints.map((item, index) => {
+        const convertedPoint = convertedPoints[index];
+        return {
+          ...item,
+          amapLng: convertedPoint ? convertedPoint.lng : item.lngNum,
+          amapLat: convertedPoint ? convertedPoint.lat : item.latNum,
+        };
+      });
+    },
+    async convertTrajectoryCoordinates(points) {
+      if (!this.mapsApi || !Array.isArray(points) || !points.length) {
+        return [];
+      }
+      const sourcePoints = points.map((item) => [item.lngNum, item.latNum]);
+      if (typeof this.mapsApi.convertFrom !== "function") {
+        return sourcePoints.map((item) => ({ lng: item[0], lat: item[1] }));
+      }
+      try {
+        const convertedPoints = [];
+        for (
+          let index = 0;
+          index < sourcePoints.length;
+          index += CONVERT_BATCH_SIZE
+        ) {
+          const batch = sourcePoints.slice(index, index + CONVERT_BATCH_SIZE);
+          const convertedBatch = await this.convertBatch(batch);
+          convertedPoints.push(...convertedBatch);
+        }
+        if (convertedPoints.length === sourcePoints.length) {
+          return convertedPoints;
+        }
+      } catch (error) {
+        return sourcePoints.map((item) => ({ lng: item[0], lat: item[1] }));
+      }
+      return sourcePoints.map((item) => ({ lng: item[0], lat: item[1] }));
+    },
+    convertBatch(points) {
+      return new Promise((resolve, reject) => {
+        if (!points.length) {
+          resolve([]);
+          return;
+        }
+        this.mapsApi.convertFrom(points, "gps", (status, result) => {
+          if (
+            status === "complete" &&
+            result &&
+            Array.isArray(result.locations) &&
+            result.locations.length === points.length
+          ) {
+            resolve(
+              result.locations.map((location) => ({
+                lng: Number(location.lng.toFixed(7)),
+                lat: Number(location.lat.toFixed(7)),
+              }))
+            );
+            return;
+          }
+          reject(new Error("高德坐标转换失败"));
+        });
+      });
+    },
+    renderAmapTrajectory() {
+      if (!this.map || !this.mapsApi || !this.trajectoryPoints.length) {
+        return;
+      }
+      this.clearOverlays();
+      const path = this.trajectoryPoints.map((item) => [
+        item.amapLng !== undefined ? item.amapLng : item.lngNum,
+        item.amapLat !== undefined ? item.amapLat : item.latNum,
+      ]);
+
+      this.polyline = new this.mapsApi.Polyline({
+        path,
+        strokeColor: "#1a73e8",
+        strokeOpacity: 0.9,
+        strokeWeight: 5,
+        lineJoin: "round",
+      });
+
+      const startPoint = path[0];
+      const endPoint = path[path.length - 1];
+      const startItem = this.trajectoryPoints[0];
+      const endItem = this.trajectoryPoints[this.trajectoryPoints.length - 1];
+
+      this.markers = [
+        new this.mapsApi.Marker({
+          position: startPoint,
+          content: this.buildAmapMarkerContent(
+            "起",
+            "#67c23a",
+            this.getPointTrackTime(startItem)
+          ),
+          offset: new this.mapsApi.Pixel(-44, -52),
+        }),
+      ];
+
+      if (path.length > 1) {
+        this.markers.push(
+          new this.mapsApi.Marker({
+            position: endPoint,
+            content: this.buildAmapMarkerContent(
+              "终",
+              "#f56c6c",
+              this.getPointTrackTime(endItem)
+            ),
+            offset: new this.mapsApi.Pixel(-44, -52),
+          })
+        );
+      }
+
+      this.map.add(this.polyline);
+      this.map.add(this.markers);
+
+      if (path.length === 1) {
+        this.map.setZoomAndCenter(15, startPoint);
+      } else {
+        this.map.setFitView(
+          [this.polyline].concat(this.markers),
+          false,
+          [60, 60, 60, 60]
+        );
+      }
+    },
+    renderGoogleTrajectory() {
+      if (!this.map || !this.mapsApi || !this.trajectoryPoints.length) {
+        return;
+      }
+      this.clearOverlays();
+      const path = this.trajectoryPoints.map((item) => ({
+        lat: item.latNum,
+        lng: item.lngNum,
+      }));
+      const bounds = new this.mapsApi.LatLngBounds();
+      path.forEach((point) => bounds.extend(point));
+
+      this.polyline = new this.mapsApi.Polyline({
+        path,
+        geodesic: true,
+        strokeColor: "#1a73e8",
+        strokeOpacity: 0.9,
+        strokeWeight: 4,
+      });
+      this.polyline.setMap(this.map);
+
+      const startPoint = path[0];
+      const endPoint = path[path.length - 1];
+      const startItem = this.trajectoryPoints[0];
+      const endItem = this.trajectoryPoints[this.trajectoryPoints.length - 1];
+
+      this.markers = [
+        new this.mapsApi.Marker({
+          position: startPoint,
+          map: this.map,
+          label: "起",
+        }),
+      ];
+
+      if (path.length > 1) {
+        this.markers.push(
+          new this.mapsApi.Marker({
+            position: endPoint,
+            map: this.map,
+            label: "终",
+          })
+        );
+      }
+
+      const startInfoWindow = this.openGoogleMarkerInfoWindow(
+        this.markers[0],
+        "开始时间",
+        this.getPointTrackTime(startItem)
+      );
+      if (startInfoWindow) {
+        this.markerInfoWindows.push(startInfoWindow);
+      }
+
+      if (this.markers.length > 1) {
+        const endInfoWindow = this.openGoogleMarkerInfoWindow(
+          this.markers[this.markers.length - 1],
+          "结束时间",
+          this.getPointTrackTime(endItem)
+        );
+        if (endInfoWindow) {
+          this.markerInfoWindows.push(endInfoWindow);
+        }
+      }
+
+      if (path.length === 1) {
+        this.map.setCenter(startPoint);
+        this.map.setZoom(15);
+      } else {
+        this.map.fitBounds(bounds);
+      }
+    },
+    openGoogleMarkerInfoWindow(marker, title, timeText) {
+      if (!this.mapsApi || !this.map || !marker || !this.mapsApi.InfoWindow) {
+        return null;
+      }
+      const infoWindow = new this.mapsApi.InfoWindow({
+        content:
+          '<div style="min-width:160px;padding:6px 8px;line-height:1.6;">' +
+          '<div style="font-weight:600;color:#303133;">' +
+          this.escapeHtml(title) +
+          "</div>" +
+          '<div style="color:#606266;">' +
+          this.escapeHtml(timeText || "-") +
+          "</div>" +
+          "</div>",
+      });
+      infoWindow.open({
+        anchor: marker,
+        map: this.map,
+        shouldFocus: false,
+      });
+      return infoWindow;
+    },
+    buildAmapMarkerContent(label, color, timeText) {
+      return (
+        '<div style="display:flex;flex-direction:column;align-items:center;gap:6px;">' +
+        '<div style="' +
+        "min-width:28px;height:28px;border-radius:14px;" +
+        "background:" +
+        color +
+        ";color:#fff;display:flex;align-items:center;justify-content:center;" +
+        'font-size:12px;font-weight:600;box-shadow:0 4px 10px rgba(0,0,0,0.18);">' +
+        this.escapeHtml(label) +
+        "</div>" +
+        '<div style="padding:4px 8px;border-radius:6px;background:rgba(255,255,255,0.96);color:#303133;font-size:12px;line-height:1.4;box-shadow:0 4px 10px rgba(0,0,0,0.12);white-space:nowrap;">' +
+        this.escapeHtml(timeText || "-") +
+        "</div>" +
+        "</div>"
+      );
+    },
+    clearOverlays() {
+      if (!this.map) {
+        this.polyline = null;
+        this.markers = [];
+        this.markerInfoWindows = [];
+        return;
+      }
+      if (this.mapVendor === "google") {
+        if (this.polyline) {
+          this.polyline.setMap(null);
+        }
+        if (this.markers.length) {
+          this.markers.forEach((marker) => marker.setMap(null));
+        }
+        if (this.markerInfoWindows.length) {
+          this.markerInfoWindows.forEach((infoWindow) => {
+            if (infoWindow && typeof infoWindow.close === "function") {
+              infoWindow.close();
+            }
+          });
+        }
+      } else {
+        if (this.polyline) {
+          this.map.remove(this.polyline);
+        }
+        if (this.markers.length) {
+          this.map.remove(this.markers);
+        }
+      }
+      this.polyline = null;
+      this.markers = [];
+      this.markerInfoWindows = [];
+    },
+    destroyMap(resetVendor = false) {
+      this.clearOverlays();
+      if (!this.map) {
+        if (resetVendor) {
+          this.mapVendor = "";
+          this.mapsApi = null;
+        }
+        return;
+      }
+      if (this.mapVendor === "amap" && typeof this.map.destroy === "function") {
+        this.map.destroy();
+      } else if (this.$refs.map) {
+        this.$refs.map.innerHTML = "";
+      }
+      this.map = null;
+      if (resetVendor) {
+        this.mapVendor = "";
+        this.mapsApi = null;
+      }
+    },
+    normalizeCoordinate(value, type) {
+      if (value === undefined || value === null || value === "") {
+        return null;
+      }
+      const numberValue = Number(value);
+      if (!Number.isFinite(numberValue)) {
+        return null;
+      }
+      const directLimit = type === "lat" ? 90 : 180;
+      const normalizedValue =
+        Math.abs(numberValue) > directLimit
+          ? numberValue / 10000000
+          : numberValue;
+      if (Math.abs(normalizedValue) > directLimit) {
+        return null;
+      }
+      return Number(normalizedValue.toFixed(7));
+    },
+    formatTrackTime(value) {
+      if (!value) {
+        return "-";
+      }
+      return this.parseTime ? this.parseTime(value) : value;
+    },
+    formatTrackCoordinates(lat, lng) {
+      const latText =
+        lat === null || lat === undefined || lat === "" ? "-" : lat;
+      const lngText =
+        lng === null || lng === undefined || lng === "" ? "-" : lng;
+      return `${latText} / ${lngText}`;
+    },
+    getPointTrackTime(point) {
+      if (!point) {
+        return "-";
+      }
+      return this.formatTrackTime(
+        point.locationTime || point.reportedTime || point.createTime
+      );
+    },
+    escapeHtml(value) {
+      return String(value)
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/\"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.trajectory-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  margin-bottom: 12px;
+  color: #606266;
+}
+
+.trajectory-alert {
+  margin-bottom: 12px;
+}
+
+.trajectory-tabs {
+  margin-top: 12px;
+}
+
+.trajectory-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.trajectory-toolbar__label {
+  color: #606266;
+  font-size: 13px;
+}
+
+.trajectory-map-shell {
+  min-height: 420px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #f5f7fa;
+}
+
+.trajectory-map {
+  width: 100%;
+  height: 420px;
+}
+
+.trajectory-table {
+  margin-top: 8px;
+}
+</style>
diff --git a/src/components/device/index.vue b/src/components/device/index.vue
new file mode 100644
index 0000000..e130fc0
--- /dev/null
+++ b/src/components/device/index.vue
@@ -0,0 +1,314 @@
+<template>
+  <el-dialog
+    title="认领设备"
+    :visible.sync="dialogVisible"
+    width="980px"
+    append-to-body
+    @close="handleClose"
+  >
+    <el-form
+      ref="queryForm"
+      :model="queryParams"
+      :inline="true"
+      label-width="80px"
+      class="claim-query-form"
+    >
+      <el-form-item label="订单号" prop="orderCode">
+        <el-input
+          v-model.trim="queryParams.orderCode"
+          placeholder="请输入订单号"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </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-alert
+      title="请先输入订单号查询设备，再勾选需要认领的设备进行确认。"
+      type="info"
+      :closable="false"
+      show-icon
+      class="claim-tip"
+    />
+
+    <el-table
+      ref="claimTable"
+      v-loading="loading"
+      :data="deviceList"
+      border
+      height="420"
+      row-key="id"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
+      <el-table-column label="设备ID" prop="id" width="90" align="center" />
+      <el-table-column label="序列号" prop="sn" min-width="180" align="center" />
+      <!-- <el-table-column label="操作" width="100" align="center" fixed="right">
+        <template slot-scope="scope">
+          <el-button type="text" size="mini" @click="handleDetail(scope.row)">详情</el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+
+    <el-empty
+      v-if="searched && !loading && !deviceList.length"
+      description="未查询到可认领的设备"
+      :image-size="80"
+      class="claim-empty"
+    />
+
+    <pagination
+      v-show="searched && total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="handlePageChange"
+    />
+
+    <div slot="footer" class="dialog-footer">
+      <span class="claim-selected">已选 {{ selectedIds.length }} 台设备</span>
+      <el-button @click="handleClose">取 消</el-button>
+      <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
+        确认认领
+      </el-button>
+    </div>
+
+    <el-dialog
+      title="设备详情"
+      :visible.sync="detailOpen"
+      width="720px"
+      append-to-body
+    >
+      <div v-loading="detailLoading">
+        <el-descriptions v-if="deviceDetail" :column="2" border>
+          <el-descriptions-item label="设备ID">
+            {{ deviceDetail.id || "-" }}
+          </el-descriptions-item>
+          <el-descriptions-item label="订单号">
+            {{ deviceDetail.orderCode || "-" }}
+          </el-descriptions-item>
+          <el-descriptions-item label="序列号">
+            {{ deviceDetail.sn || "-" }}
+          </el-descriptions-item>
+          <el-descriptions-item label="MAC 地址">
+            {{ deviceDetail.mac || "-" }}
+          </el-descriptions-item>
+          <el-descriptions-item label="所属批次">
+            {{ deviceDetail.batchNo || "-" }}
+          </el-descriptions-item>
+          <el-descriptions-item label="型号">
+            {{ deviceDetail.model || "-" }}
+          </el-descriptions-item>
+          <el-descriptions-item label="企业">
+            {{ deviceDetail.merchantName || "-" }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="detailOpen = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </el-dialog>
+</template>
+
+<script>
+import { claimDeviceBatch, getDevice, listAllDevice } from "@/api/device/device";
+
+export default {
+  name: "DeviceClaimDialog",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      submitLoading: false,
+      detailLoading: false,
+      searched: false,
+      total: 0,
+      deviceList: [],
+      deviceDetail: null,
+      selectedIds: [],
+      selectedDeviceMap: {},
+      detailOpen: false,
+      queryParams: {
+        orderCode: "",
+        pageNum: 1,
+        pageSize: 10,
+      },
+    };
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(value) {
+        this.$emit("update:visible", value);
+      },
+    },
+  },
+  methods: {
+    handleQuery() {
+      if (!this.queryParams.orderCode) {
+        this.$message.warning("请输入订单号后再搜索");
+        return;
+      }
+      this.searched = true;
+      this.queryParams.pageNum = 1;
+      this.clearSelectedDevices();
+      this.fetchDeviceList();
+    },
+    handlePageChange() {
+      if (!this.queryParams.orderCode) {
+        return;
+      }
+      this.fetchDeviceList();
+    },
+    fetchDeviceList() {
+      this.loading = true;
+      listAllDevice(this.queryParams)
+        .then((response) => {
+          const data = response.data || {};
+          this.deviceList = Array.isArray(data.list) ? data.list : [];
+          this.total = Number(data.total) || 0;
+          this.$nextTick(() => {
+            this.syncSelection();
+          });
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    resetQuery() {
+      this.queryParams = {
+        orderCode: "",
+        pageNum: 1,
+        pageSize: 10,
+      };
+      this.total = 0;
+      this.deviceList = [];
+      this.searched = false;
+      this.clearSelectedDevices();
+      if (this.$refs.queryForm) {
+        this.$refs.queryForm.resetFields();
+      }
+    },
+    handleSelectionChange(selection) {
+      const currentPageIds = this.deviceList.map((item) => item.id);
+      currentPageIds.forEach((id) => {
+        if (this.selectedDeviceMap[id]) {
+          this.$delete(this.selectedDeviceMap, id);
+        }
+      });
+      selection.forEach((item) => {
+        this.$set(this.selectedDeviceMap, item.id, item);
+      });
+      this.selectedIds = Object.keys(this.selectedDeviceMap).map((id) => Number(id));
+    },
+    handleSubmit() {
+      if (!this.queryParams.orderCode) {
+        this.$message.warning("请先输入订单号并查询设备");
+        return;
+      }
+      if (!this.selectedIds.length) {
+        this.$message.warning("请至少选择一台设备");
+        return;
+      }
+      this.$confirm(
+        `确认认领当前选中的 ${this.selectedIds.length} 台设备吗？`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          this.submitLoading = true;
+          return claimDeviceBatch({
+            orderCode: this.queryParams.orderCode,
+            deviceIds: this.selectedIds,
+          });
+        })
+        .then(() => {
+          this.$message.success("认领成功");
+          this.$emit("success");
+          this.handleClose();
+        })
+        .finally(() => {
+          this.submitLoading = false;
+        });
+    },
+    handleDetail(row) {
+      if (!row || !row.id) {
+        return;
+      }
+      this.detailOpen = true;
+      this.detailLoading = true;
+      this.deviceDetail = { ...row };
+      getDevice(row.id)
+        .then((response) => {
+          this.deviceDetail = response.data || {};
+        })
+        .finally(() => {
+          this.detailLoading = false;
+        });
+    },
+    handleClose() {
+      this.resetQuery();
+      this.detailOpen = false;
+      this.deviceDetail = null;
+      this.dialogVisible = false;
+    },
+    clearSelectedDevices() {
+      this.selectedDeviceMap = {};
+      this.selectedIds = [];
+      if (this.$refs.claimTable) {
+        this.$refs.claimTable.clearSelection();
+      }
+    },
+    syncSelection() {
+      if (!this.$refs.claimTable) {
+        return;
+      }
+      this.$refs.claimTable.clearSelection();
+      this.deviceList.forEach((row) => {
+        if (this.selectedDeviceMap[row.id]) {
+          this.$refs.claimTable.toggleRowSelection(row, true);
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.claim-query-form {
+  margin-bottom: 12px;
+}
+
+.claim-tip {
+  margin-bottom: 16px;
+}
+
+.claim-empty {
+  margin-top: 12px;
+}
+
+.claim-selected {
+  float: left;
+  line-height: 32px;
+  color: #606266;
+}
+</style>
diff --git a/src/components/user/index.vue b/src/components/user/index.vue
new file mode 100644
index 0000000..0effea2
--- /dev/null
+++ b/src/components/user/index.vue
@@ -0,0 +1,735 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+
+      <!--用户数据-->
+        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+          <el-form-item label="用户名称" prop="account">
+            <el-input
+              v-model="queryParams.account"
+              placeholder="请输入用户名称"
+              clearable
+              size="small"
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+             <el-form-item label="昵称" prop="nickName">
+            <el-input
+              v-model="queryParams.nickName"
+              placeholder="请输入昵称"
+              clearable
+              size="small"
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select
+              v-model="queryParams.status"
+              placeholder="用户状态"
+              clearable
+              size="small"
+              style="width: 240px"
+            >
+              <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>
+
+        <el-row :gutter="10" class="mb8">
+          <el-col v-if="!selectionMode" :span="1.5">
+            <el-button
+              type="primary"
+              plain
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAdd"
+              v-hasPermi="['system:user:add']"
+            >新增</el-button>
+          </el-col>
+          <el-col v-if="!selectionMode" :span="1.5">
+            <el-button
+              type="success"
+              plain
+              icon="el-icon-edit"
+              size="mini"
+              :disabled="single"
+              @click="handleUpdate"
+              v-hasPermi="['system:user:edit']"
+            >修改</el-button>
+          </el-col>
+          <el-col v-if="!selectionMode" :span="1.5">
+            <el-button
+              type="danger"
+              plain
+              icon="el-icon-delete"
+              size="mini"
+              :disabled="multiple"
+              @click="handleDelete"
+              v-hasPermi="['system:user:remove']"
+            >删除</el-button>
+          </el-col>
+          <!-- <el-col :span="1.5">
+            <el-button
+              type="info"
+              plain
+              icon="el-icon-upload2"
+              size="mini"
+              @click="handleImport"
+              v-hasPermi="['system:user:import']"
+            >导入</el-button>
+          </el-col> -->
+          <el-col v-if="!selectionMode" :span="1.5">
+            <el-button
+              type="warning"
+              plain
+              icon="el-icon-download"
+              size="mini"
+              @click="handleExport"
+              v-hasPermi="['system:user:export']"
+            >导出</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+        </el-row>
+
+        <el-table
+          ref="userTable"
+          v-loading="loading"
+          :data="userList"
+          row-key="id"
+          @selection-change="handleSelectionChange"
+          @row-click="handleRowClick"
+        >
+          <el-table-column
+            type="selection"
+            width="50"
+            align="center"
+            :reserve-selection="selectionMode"
+          />
+          <el-table-column label="用户编号" align="center" key="id" prop="id" v-if="columns[0].visible" />
+          <el-table-column label="用户名称" align="center" key="account" prop="account" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+<!--          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />-->
+<!--          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />-->
+          <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
+            <template slot-scope="scope">
+              <el-switch
+                v-if="!selectionMode"
+                v-model="scope.row.status"
+                active-value="0"
+                inactive-value="1"
+                @change="handleStatusChange(scope.row)"
+              ></el-switch>
+              <span v-else>{{ scope.row.status === "0" ? "启用" : "禁用" }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="谷歌令牌" align="center" key="googleAuthSecret" prop="googleAuthSecret" v-if="columns[6].visible">
+            <template slot-scope="scope">
+              <!-- <img :src="columns[6].url+'?content=otpauth://totp/GeoTag_'+scope.row.account+'?secret='+scope.row.googleAuthSecret" style="width: 100px; height: 100px;"> -->
+            <img :src="columns[6].url + '?content=' + encodeURIComponent(`otpauth://totp/GeoTag_${scope.row.account}?secret=${scope.row.googleAuthSecret}`)" style="width: 100px; height: 100px;">
+
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[7].visible" width="160">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="!selectionMode"
+            label="操作"
+            align="center"
+            width="160"
+            class-name="small-padding fixed-width"
+          >
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:user:edit']"
+              >修改</el-button>
+              <el-button
+                v-if="scope.row.id !== 1"
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['system:user:remove']"
+              >删除</el-button>
+              <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-key"
+              @click="handleResetPwd(scope.row)"
+              v-hasPermi="['system:user:resetPwd']"
+            >重置</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+    </el-row>
+
+    <!-- 添加或修改参数配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item v-if="form.id == undefined" label="用户名称" prop="account">
+              <el-input v-model="form.account" placeholder="请输入用户名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if="form.id == undefined" label="用户密码" prop="passwordHash">
+              <el-input v-model="form.passwordHash" placeholder="请输入用户密码" type="passwordHash" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="用户昵称" prop="nickName">
+              <el-input v-model="form.nickName" placeholder="请输入用户昵称" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="角色">
+              <el-select
+                v-model="form.roleIds"
+                multiple
+                filterable
+                placeholder="请选择角色（全部角色）"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in roleOptions"
+                  :key="item.roleId"
+                  :label="(item.roleName || item.name) || ('角色' + item.roleId)"
+                  :value="String(item.roleId)"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+
+
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="状态" prop="status">
+              <el-radio-group v-model="form.status">
+                <el-radio :label="0">启用</el-radio>
+                <el-radio :label="1">禁用</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </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>
+
+    <!-- 用户导入对话框 -->
+    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+      <el-upload
+        ref="upload"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport"
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :auto-upload="false"
+        drag
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">
+          将文件拖到此处，或
+          <em>点击上传</em>
+        </div>
+        <div class="el-upload__tip" slot="tip">
+          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
+          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
+        </div>
+        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="upload.open = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listEmployeeUser,listUser, getUser, delUser, addUser, updateUser, exportUser, resetUserPwd, changeUserStatus, importTemplate } from "@/api/system/user";
+import { listRole } from "@/api/system/role";
+import { getToken } from "@/utils/auth";
+// import { treeselect } from "@/api/system/dept";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  name: "User",
+  props: {
+    selectionMode: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: { Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      userList: null,
+      // 选择模式下当前选中的员工
+      selectedRows: [],
+      selectedUserMap: {},
+      // 弹出层标题
+      title: "",
+      // 部门树选项
+      deptOptions: undefined,
+      // 是否显示弹出层
+      open: false,
+      // 部门名称
+      deptName: undefined,
+      // 默认密码
+      passwordHash: undefined,
+      // 日期范围
+      dateRange: [],
+      // 状态数据字典
+      statusOptions: [],
+      // 性别状态字典
+      sexOptions: [],
+      // 岗位选项
+      postOptions: [],
+      // 角色选项
+      roleOptions: [],
+      // 表单参数（保证 roleIds 为响应式数组）
+      form: {
+        roleIds: []
+      },
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      // 用户导入参数
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/system/user/importData"
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        account: undefined,
+        phonenumber: undefined,
+        status: undefined,
+        deptId: undefined
+      },
+      // 列信息
+      columns: [
+        { key: 0, label: `用户编号`, visible: true },
+        { key: 1, label: `用户名称`, visible: true },
+        { key: 2, label: `用户昵称`, visible: true },
+        { key: 3, label: `部门`, visible: true },
+        { key: 4, label: `手机号码`, visible: true },
+        { key: 5, label: `状态`, visible: true },
+        { key: 6, label: `谷歌令牌`, visible: true, url: process.env.VUE_APP_BASE_API + "/business/businessUser/activityCode" },
+        { key: 7, label: `创建时间`, visible: true }
+      ],
+      // 表单校验
+      rules: {
+        account: [
+          { required: true, message: "用户名称不能为空", trigger: "blur" }
+        ],
+        nickName: [
+          { required: true, message: "用户昵称不能为空", trigger: "blur" }
+        ],
+        passwordHash: [
+          { required: true, message: "用户密码不能为空", trigger: "blur" }
+        ],
+        email: [
+          {
+            type: "email",
+            message: "'请输入正确的邮箱地址",
+            trigger: ["blur", "change"]
+          }
+        ],
+        phonenumber: [
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  created() {
+    this.getList();
+    this.getRoleList();
+    // this.getTreeselect();
+    // this.getDicts("sys_normal_disable").then(response => {
+    //   this.statusOptions = response.data;
+    // });
+    // this.getDicts("sys_user_sex").then(response => {
+    //   this.sexOptions = response.data;
+    // });
+    // this.getConfigKey("sys.user.passwordHash").then(response => {
+    //   this.passwordHash = response.msg;
+    // });
+  },
+  methods: {
+    /** 查询角色列表（拉取全部角色，统一为 roleId/roleName 便于下拉展示） */
+    getRoleList() {
+      listRole({ pageNum: 1, pageSize: 1000 }).then(response => {
+        const list = response.data.list || response.data || [];
+        this.roleOptions = list.map(item => ({
+          roleId: item.roleId != null ? item.roleId : item.id,
+          roleName: item.roleName != null ? item.roleName : item.name
+        }));
+      });
+    },
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true;
+      listEmployeeUser(this.addDateRange(this.queryParams, this.dateRange))
+        .then(response => {
+          const data = response.data;
+          const list = Array.isArray(data) ? data : (data && Array.isArray(data.list) ? data.list : []);
+          this.userList = list.map(user => ({
+            ...user,
+            status: String(user.status)
+          }));
+          this.total = Array.isArray(data)
+            ? list.length
+            : Number((data && data.total) || list.length);
+          if (this.selectionMode) {
+            this.$nextTick(() => {
+              this.syncSelection();
+            });
+          }
+        })
+        .catch(() => {
+          this.userList = [];
+          this.total = 0;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    /** 查询部门下拉树结构 */
+    getTreeselect() {
+      treeselect().then(response => {
+        this.deptOptions = response.data;
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id;
+      this.getList();
+    },
+    // 用户状态修改
+    handleStatusChange(row) {
+      let text = row.status === "0" ? "启用" : "停用";
+      this.$confirm('确认要"' + text + '""' + row.account + '"用户吗?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return changeUserStatus(row.id, row.status);
+        }).then(() => {
+          this.msgSuccess(text + "成功");
+        }).catch(function() {
+          row.status = row.status === "0" ? "1" : "0";
+        });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        deptId: undefined,
+        account: undefined,
+        nickName: undefined,
+        passwordHash: undefined,
+        phonenumber: undefined,
+        email: undefined,
+        sex: undefined,
+        status: 0,
+        remark: undefined,
+        postIds: [],
+        roleIds: []
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      if (this.selectionMode) {
+        this.clearSelectionState();
+      }
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      if (this.selectionMode) {
+        const currentPageIds = (this.userList || []).map(item => item.id);
+        currentPageIds.forEach((id) => {
+          if (this.selectedUserMap[id]) {
+            this.$delete(this.selectedUserMap, id);
+          }
+        });
+        selection.forEach((item) => {
+          this.$set(this.selectedUserMap, item.id, item);
+        });
+        this.selectedRows = Object.values(this.selectedUserMap);
+        this.ids = this.selectedRows.map(item => item.id);
+        this.single = this.selectedRows.length !== 1;
+        this.multiple = !this.selectedRows.length;
+        this.$emit("select", this.selectedRows);
+        return;
+      }
+      this.ids = selection.map(item => item.id);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    handleRowClick(row) {
+      if (!this.selectionMode) {
+        return;
+      }
+      this.$refs.userTable.toggleRowSelection(row);
+    },
+    clearSelectionState() {
+      this.selectedRows = [];
+      this.selectedUserMap = {};
+      this.ids = [];
+      this.single = true;
+      this.multiple = true;
+      if (this.$refs.userTable) {
+        this.$refs.userTable.clearSelection();
+      }
+    },
+    syncSelection() {
+      if (!this.selectionMode || !this.$refs.userTable) {
+        return;
+      }
+      this.$refs.userTable.clearSelection();
+      (this.userList || []).forEach((row) => {
+        if (this.selectedUserMap[row.id]) {
+          this.$refs.userTable.toggleRowSelection(row, true);
+        }
+      });
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.getRoleList();
+      this.open = true;
+      this.title = "添加用户";
+      this.form.passwordHash = this.passwordHash;
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids;
+      Promise.all([getUser(id), listRole({ pageNum: 1, pageSize: 1000 })]).then(([userRes, roleRes]) => {
+        const data = userRes.data; // 用户基本信息在 data 里
+        // roleIds、roles 在响应根级别，不在 data 里
+        const resRoleIds = userRes.roleIds || [];
+        const resRoles = userRes.roles || [];
+
+        const list = roleRes.data?.list || roleRes.data || [];
+        // 角色选项：先取 listRole 列表，再用 getUser 返回的 roles 里的 roleName 覆盖/补充
+        const optionsMap = new Map();
+        list.forEach(item => {
+          optionsMap.set(String(item.roleId != null ? item.roleId : item.id), {
+            roleId: item.roleId != null ? item.roleId : item.id,
+            roleName: item.roleName != null ? item.roleName : item.name
+          });
+        });
+        resRoles.forEach(r => {
+          const rid = r.roleId != null ? r.roleId : r.id;
+          const name = r.roleName != null ? r.roleName : r.name;
+          if (rid != null) optionsMap.set(String(rid), { roleId: rid, roleName: name });
+        });
+        this.roleOptions = Array.from(optionsMap.values());
+
+        // 当前用户所属角色：取响应根级别的 roleIds
+        const roleIds = resRoleIds.map(rid => String(rid));
+
+        this.form = Object.assign({}, data, {
+          postIds: userRes.postIds || [],
+          roleIds: roleIds,
+          passwordHash: ""
+        });
+        this.$set(this.form, "roleIds", roleIds);
+        this.title = "修改用户";
+        this.$nextTick(() => {
+          this.open = true;
+        });
+      });
+    },
+    /** 重置密码按钮操作 */
+    handleResetPwd(row) {
+      this.$prompt('请输入"' + row.account + '"的新密码', "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消"
+      }).then(({ value }) => {
+          resetUserPwd(row.id, value).then(response => {
+            this.msgSuccess("修改成功，新密码是：" + value);
+          });
+        }).catch(() => {});
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          // 将角色ID从字符串数组转换为数字数组
+          const submitData = {
+            ...this.form,
+            roleIds: this.form.roleIds.map(id => Number(id))
+          };
+
+          if (this.form.id != undefined) {
+            updateUser(submitData).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addUser(submitData).then(response => {
+              this.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$confirm('是否确认删除用户编号为"' + ids + '"的数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return delUser(ids);
+        }).then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm('是否确认导出所有用户数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return exportUser(queryParams);
+        }).then(response => {
+          this.download(response.msg);
+        })
+    },
+    /** 导入按钮操作 */
+    handleImport() {
+      this.upload.title = "用户导入";
+      this.upload.open = true;
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+      importTemplate().then(response => {
+        this.download(response.msg);
+      });
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      this.upload.open = false;
+      this.upload.isUploading = false;
+      this.$refs.upload.clearFiles();
+      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
+      this.getList();
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit();
+    }
+  }
+};
+</script>
diff --git a/src/views/login2.vue b/src/views/login2.vue
new file mode 100644
index 0000000..c710e7b
--- /dev/null
+++ b/src/views/login2.vue
@@ -0,0 +1,226 @@
+<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>
+  </div>
+</template>
+
+<script>
+import Cookies from "js-cookie";
+import { encrypt, decrypt } from '@/utils/jsencrypt'
+
+export default {
+  name: "Login",
+  data() {
+    var checkCode = (rule, value, callback) => {
+      if (value == false) {
+        callback(new Error('请进行人机验证'));
+      } else {
+        callback();
+      }
+    };
+    return {
+      codeUrl: "",
+      cookiePassword: "",
+      key: '6LcBoGUaAAAAABUnZINfh4j6FgqpQR-yHakZepIR',
+      loginForm: {
+        username: "",
+        password: "",
+        rememberMe: false,
+        code: "",
+        uuid: "",
+        getValidateCode: false
+      },
+      loginRules: {
+        username: [
+          { required: true, trigger: "blur", message: "用户名不能为空" }
+        ],
+        password: [
+          { required: true, trigger: "blur", message: "密码不能为空" }
+        ],
+        code: [
+          { required: true, trigger: "change", message: "验证码不能为空" }
+        ],
+        validateCode: [
+          { validator: checkCode, trigger: 'change' }
+        ]
+      },
+      loading: false,
+      redirect: undefined
+    };
+
+  },
+  watch: {
+    $route: {
+      handler: function (route) {
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true
+    }
+  },
+  created() {
+    // this.getCookie();
+  },
+  methods: {
+    icoCreate(icoUrl) {
+      var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
+      link.type = 'image/x-icon';
+      link.rel = 'shortcut icon';
+      link.href = icoUrl
+      document.getElementsByTagName('head')[0].appendChild(link);
+    },
+    getValidateCode(value) {
+      this.loginForm.validateCode = value
+    },
+    getCookie() {
+      const username = Cookies.get("username");
+      const password = Cookies.get("password");
+      const rememberMe = Cookies.get('rememberMe')
+      this.loginForm = {
+        username: username === undefined ? this.loginForm.username : username,
+        password: password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+      };
+    },
+
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          this.loading = true;
+          if (this.loginForm.rememberMe) {
+            Cookies.set("username", this.loginForm.username, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
+            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+          } else {
+            Cookies.remove("username");
+            Cookies.remove("password");
+            Cookies.remove('rememberMe');
+          }
+          this.$store.dispatch("Login", this.loginForm).then(() => {
+            this.$router.push({ path: this.redirect || "/" }).catch(() => { });
+          }).catch(() => {
+            this.loading = false;
+          });
+        }
+      });
+    }
+  }
+};
+</script>
+
+<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%;
+}
+
+.title {
+  margin: 0px auto 30px auto;
+  text-align: center;
+  color: #0A1146;
+}
+
+.login-form {
+  border-radius: 6px;
+  background: #ffffff;
+  width: 400px;
+  padding: 25px 25px 5px 25px;
+
+  .el-input {
+    height: 38px;
+
+    input {
+      height: 38px;
+    }
+  }
+
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 2px;
+  }
+}
+
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+
+.login-code {
+  width: 33%;
+  height: 38px;
+  float: right;
+
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+
+.login-code-img {
+  height: 38px;
+}
+</style>
diff --git a/src/views/system/user/components/ProfileSettingsCard.vue b/src/views/system/user/components/ProfileSettingsCard.vue
new file mode 100644
index 0000000..45dc6a6
--- /dev/null
+++ b/src/views/system/user/components/ProfileSettingsCard.vue
@@ -0,0 +1,261 @@
+<template>
+  <el-card class="profile-settings-card" shadow="never">
+    <div slot="header" class="clearfix">
+      <span>基本资料</span>
+    </div>
+
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="基本资料" name="basic">
+        <el-form
+          ref="profileForm"
+          :model="profileForm"
+          :rules="profileRules"
+          label-width="120px"
+          size="small"
+        >
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="登录账户">
+                <el-input v-model="profileForm.account" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="所属企业">
+                <el-input v-model="profileForm.businessName" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="昵称" prop="nickName">
+                <el-input v-model="profileForm.nickName" maxlength="30" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="谷歌地图 Key">
+                <el-input
+                  v-model="profileForm.googleKey"
+                  :disabled="!profileForm.canEditBusinessConfig"
+                  placeholder="请输入谷歌地图 Key"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="高德地图 Key">
+                <el-input
+                  v-model="profileForm.gaodeKey"
+                  :disabled="!profileForm.canEditBusinessConfig"
+                  placeholder="请输入高德地图 Key"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="高德安全密钥">
+                <el-input
+                  v-model="profileForm.gaodeSecurityKey"
+                  :disabled="!profileForm.canEditBusinessConfig"
+                  placeholder="请输入高德安全密钥"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-alert
+            v-if="!profileForm.canEditBusinessConfig"
+            type="info"
+            :closable="false"
+            show-icon
+            title="当前账号只能修改自己的昵称，企业地图 Key 仅企业管理员可修改。"
+            class="profile-tip"
+          />
+
+          <el-form-item>
+            <el-button type="primary" :loading="profileSaving" @click="submitProfile">
+              保存资料
+            </el-button>
+            <el-button @click="loadProfile">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+
+      <el-tab-pane label="修改密码" name="password">
+        <el-form
+          ref="passwordForm"
+          :model="passwordForm"
+          :rules="passwordRules"
+          label-width="120px"
+          size="small"
+        >
+          <el-form-item label="旧密码" prop="oldPassword">
+            <el-input
+              v-model="passwordForm.oldPassword"
+              type="password"
+              show-password
+              placeholder="请输入旧密码"
+            />
+          </el-form-item>
+          <el-form-item label="新密码" prop="newPassword">
+            <el-input
+              v-model="passwordForm.newPassword"
+              type="password"
+              show-password
+              placeholder="请输入新密码"
+            />
+          </el-form-item>
+          <el-form-item label="确认密码" prop="confirmPassword">
+            <el-input
+              v-model="passwordForm.confirmPassword"
+              type="password"
+              show-password
+              placeholder="请再次输入新密码"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" :loading="passwordSaving" @click="submitPassword">
+              修改密码
+            </el-button>
+            <el-button @click="resetPasswordForm">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+    </el-tabs>
+  </el-card>
+</template>
+
+<script>
+import {
+  getUserProfile,
+  updateUserProfile,
+  updateUserPwd,
+} from "@/api/system/user";
+
+function createDefaultProfileForm() {
+  return {
+    id: undefined,
+    businessId: undefined,
+    account: "",
+    nickName: "",
+    businessName: "",
+    gaodeKey: "",
+    gaodeSecurityKey: "",
+    googleKey: "",
+    canEditBusinessConfig: false,
+  };
+}
+
+function createDefaultPasswordForm() {
+  return {
+    oldPassword: "",
+    newPassword: "",
+    confirmPassword: "",
+  };
+}
+
+export default {
+  name: "ProfileSettingsCard",
+  data() {
+    const confirmPasswordValidator = (rule, value, callback) => {
+      if (value !== this.passwordForm.newPassword) {
+        callback(new Error("两次输入的新密码不一致"));
+        return;
+      }
+      callback();
+    };
+
+    return {
+      activeTab: "basic",
+      profileSaving: false,
+      passwordSaving: false,
+      profileForm: createDefaultProfileForm(),
+      passwordForm: createDefaultPasswordForm(),
+      profileRules: {
+        nickName: [
+          { required: true, message: "昵称不能为空", trigger: "blur" },
+        ],
+      },
+      passwordRules: {
+        oldPassword: [
+          { required: true, message: "旧密码不能为空", trigger: "blur" },
+        ],
+        newPassword: [
+          { required: true, message: "新密码不能为空", trigger: "blur" },
+          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
+        ],
+        confirmPassword: [
+          { required: true, message: "确认密码不能为空", trigger: "blur" },
+          { validator: confirmPasswordValidator, trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {
+    this.loadProfile();
+  },
+  methods: {
+    loadProfile() {
+      getUserProfile().then((response) => {
+        const data = response && response.data ? response.data : {};
+        this.profileForm = Object.assign(createDefaultProfileForm(), data);
+      });
+    },
+    submitProfile() {
+      this.$refs.profileForm.validate((valid) => {
+        if (!valid) {
+          return;
+        }
+        const payload = {
+          nickName: this.profileForm.nickName,
+          gaodeKey: this.profileForm.gaodeKey,
+          gaodeSecurityKey: this.profileForm.gaodeSecurityKey,
+          googleKey: this.profileForm.googleKey,
+        };
+        this.profileSaving = true;
+        updateUserProfile(payload)
+          .then(() => {
+            this.$modal.msgSuccess("基本资料已更新");
+            this.loadProfile();
+          })
+          .finally(() => {
+            this.profileSaving = false;
+          });
+      });
+    },
+    submitPassword() {
+      this.$refs.passwordForm.validate((valid) => {
+        if (!valid) {
+          return;
+        }
+        this.passwordSaving = true;
+        updateUserPwd(this.passwordForm.oldPassword, this.passwordForm.newPassword)
+          .then(() => {
+            this.$modal.msgSuccess("密码修改成功");
+            this.resetPasswordForm();
+          })
+          .finally(() => {
+            this.passwordSaving = false;
+          });
+      });
+    },
+    resetPasswordForm() {
+      this.passwordForm = createDefaultPasswordForm();
+      this.$nextTick(() => {
+        this.$refs.passwordForm && this.$refs.passwordForm.clearValidate();
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.profile-settings-card {
+  margin-bottom: 16px;
+}
+
+.profile-tip {
+  margin-bottom: 18px;
+}
+</style>