From 75e167ae35f775866bdf4418c853fc35859529a4 Mon Sep 17 00:00:00 2001
From: caill <815519168@qq.com>
Date: Fri, 17 Oct 2025 17:03:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E6=B5=8F=E8=A7=88=E5=99=A8=E8=AE=BF?=
 =?UTF-8?q?=E9=97=AE=E5=BC=82=E5=B8=B8=E4=BF=A1=E6=81=AF=E5=90=8E=E5=8F=B0?=
 =?UTF-8?q?=EF=BC=8C=E6=89=93=E5=8C=85=E6=9C=89=E5=8C=BA=E5=88=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |   3 +-
 src/hubRouter/index.js                        |  21 +
 src/main.js                                   |   6 +-
 src/pages/modules/{ => build}/gl-map-4.vue    |   0
 src/pages/modules/{ => build}/gl-map.vue      |   2 +-
 .../modules/{building.vue => build/index.vue} |   2 +-
 .../modules/{device.vue => device/index.vue}  |   6 +-
 src/pages/modules/{ => device}/save-chain.vue |   0
 src/pages/modules/hub/index.vue               | 277 ++++++
 src/pages/modules/map/map copy.vue            | 838 ++++++++++++++++++
 .../modules/{warning.vue => warn/index.vue}   |   0
 src/pages/modules/{ => warn}/warn-modal.vue   |   2 +-
 src/router/index.js                           |   6 +-
 13 files changed, 1151 insertions(+), 12 deletions(-)
 create mode 100644 src/hubRouter/index.js
 rename src/pages/modules/{ => build}/gl-map-4.vue (100%)
 rename src/pages/modules/{ => build}/gl-map.vue (99%)
 rename src/pages/modules/{building.vue => build/index.vue} (99%)
 rename src/pages/modules/{device.vue => device/index.vue} (98%)
 rename src/pages/modules/{ => device}/save-chain.vue (100%)
 create mode 100644 src/pages/modules/hub/index.vue
 create mode 100644 src/pages/modules/map/map copy.vue
 rename src/pages/modules/{warning.vue => warn/index.vue} (100%)
 rename src/pages/modules/{ => warn}/warn-modal.vue (97%)

diff --git a/README.md b/README.md
index d37fa1d..a67e86e 100644
--- a/README.md
+++ b/README.md
@@ -24,4 +24,5 @@ npm run lint
 See [Configuration Reference](https://cli.vuejs.org/config/).
 
 ### 项目须知
-1.屏幕视窗大小1281px * 752px
+1.屏幕视窗大小1281px * 752px；
+2.打包注意事项：选择router文件夹打包apt15e在操作屏使用，选择hubRouter文件夹打包apt15e后台在浏览器操作；
diff --git a/src/hubRouter/index.js b/src/hubRouter/index.js
new file mode 100644
index 0000000..550d286
--- /dev/null
+++ b/src/hubRouter/index.js
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+// const Login = r => require.ensure([], () => r(require('../pages/modules/login/login.vue')), 'login')
+const Hub = r => require.ensure([], () => r(require('../pages/modules/hub/index.vue')), 'Hub')
+Vue.use(VueRouter)
+
+const router = new VueRouter({
+  routes: [
+    {
+      path: '/',
+      redirect: '/hub'
+    },
+    {
+      path: '/hub',
+      component: Hub
+    }
+  ]
+})
+
+export default router
diff --git a/src/main.js b/src/main.js
index aa7b919..baccb51 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
-import router from './router'
+// import router from './router'
+import router from './hubRouter'
 import store from './vuex/store'
 import './style/reset.css'
-import { Row, Col, Button, Icon, Dialog, Form, FormItem, Input, Select, Option, Table, TableColumn, Tabs, TabPane, Popover, Loading, MessageBox, Message, Progress } from 'element-ui'
+import { Row, Col, Button, Icon, Dialog, Form, FormItem, Input, Select, Option, Table, TableColumn, Tabs, TabPane, Popover, Loading, MessageBox, Message, Progress, Upload } from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import './style/common.styl'
 import i18n from './i18n/i18n'
@@ -29,6 +30,7 @@ Vue.use(TabPane)
 Vue.use(Popover)
 Vue.use(Loading)
 Vue.use(Progress)
+Vue.use(Upload)
 Vue.prototype.$confirm = MessageBox.confirm
 Vue.prototype.$message = Message
 Vue.prototype.$post = post
diff --git a/src/pages/modules/gl-map-4.vue b/src/pages/modules/build/gl-map-4.vue
similarity index 100%
rename from src/pages/modules/gl-map-4.vue
rename to src/pages/modules/build/gl-map-4.vue
diff --git a/src/pages/modules/gl-map.vue b/src/pages/modules/build/gl-map.vue
similarity index 99%
rename from src/pages/modules/gl-map.vue
rename to src/pages/modules/build/gl-map.vue
index b6f70a8..0b21401 100644
--- a/src/pages/modules/gl-map.vue
+++ b/src/pages/modules/build/gl-map.vue
@@ -41,7 +41,7 @@ export default {
         maxY: 10    // 点云Y轴最大值
       },
       // 小车相关
-      vehicleImage: require('../../images/new/agv.png'),
+      vehicleImage: require('@/images/new/agv.png'),
       carMovementEnabled: true,
       carSize: 30,
       // 视图控制
diff --git a/src/pages/modules/building.vue b/src/pages/modules/build/index.vue
similarity index 99%
rename from src/pages/modules/building.vue
rename to src/pages/modules/build/index.vue
index 105a0d3..5e85a11 100644
--- a/src/pages/modules/building.vue
+++ b/src/pages/modules/build/index.vue
@@ -66,7 +66,7 @@
 import GlMap from './gl-map.vue'
 import { driver } from 'driver.js'
 import 'driver.js/dist/driver.css'
-import { startMapping, stopMapping, getMappingStatus, setStation, oneClickDeployment, abandonMapping, sendAutoBack } from '../../config/getData.js'
+import { startMapping, stopMapping, getMappingStatus, setStation, oneClickDeployment, abandonMapping, sendAutoBack } from '@/config/getData.js'
 import { mapGetters } from 'vuex'
 export default {
   name: 'ModuleBuilding',
diff --git a/src/pages/modules/device.vue b/src/pages/modules/device/index.vue
similarity index 98%
rename from src/pages/modules/device.vue
rename to src/pages/modules/device/index.vue
index f820b93..77e0234 100644
--- a/src/pages/modules/device.vue
+++ b/src/pages/modules/device/index.vue
@@ -69,7 +69,7 @@
 <script>
 import SaveChain from './save-chain.vue'
 // import { queryStation, queryTaskChain } from '../../config/mork.js'
-import { queryStation, queryTaskChain, queryTaskChainDtl, sendTask, saveTask, cancelTask, deleteTaskChain, updateStation } from '../../config/getData.js'
+import { queryStation, queryTaskChain, queryTaskChainDtl, sendTask, saveTask, cancelTask, deleteTaskChain, updateStation } from '@/config/getData.js'
 export default {
   name: 'ModuleDevice',
   components: {
@@ -384,7 +384,7 @@ export default {
   height 0.6rem
   padding 0.1rem
   margin-bottom 0.02rem
-  background center / 100% 100% url(../../images/new/bg2.png) no-repeat
+  background center / 100% 100% url(@/images/new/bg2.png) no-repeat
   p
     font-size .2rem
     font-family 'SourceHanSansCN-Bold'
@@ -448,7 +448,7 @@ export default {
   box-sizing border-box
   margin 0
   color #9ff0fc
-  background center / 100% 100% url(../../images/new/tab_bg.png) no-repeat
+  background center / 100% 100% url(@/images/new/tab_bg.png) no-repeat
   padding 0
   font-size 24px
   height 65px
diff --git a/src/pages/modules/save-chain.vue b/src/pages/modules/device/save-chain.vue
similarity index 100%
rename from src/pages/modules/save-chain.vue
rename to src/pages/modules/device/save-chain.vue
diff --git a/src/pages/modules/hub/index.vue b/src/pages/modules/hub/index.vue
new file mode 100644
index 0000000..1dc23f7
--- /dev/null
+++ b/src/pages/modules/hub/index.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="page_container">
+    <div class="container">
+      <div class="upload-container">
+        <!-- Excel文件上传 -->
+        <div class="upload-card">
+          <div class="upload-icon" style="color: #67C23A;">
+            <i class="el-icon-document"></i>
+          </div>
+          <div class="upload-title">异常信息Excel文件上传</div>
+          <div class="upload-desc">支持.xlsx和.xls格式，最大10MB</div>
+          <div class="upload-btn">
+            <el-upload
+              ref="excelUpload1"
+              :action="`${serverUrl}/anomalyInfo/importErrorInfoExcel`"
+              :limit="1"
+              :before-upload="beforeExcelUpload"
+              :on-success="handleExcelSuccess1"
+              :on-error="handleError"
+              :file-list="excelFileList1"
+              accept=".xlsx, .xls">
+              <el-button size="medium" type="success" icon="el-icon-upload">上传Excel文件</el-button>
+            </el-upload>
+          </div>
+          <div class="upload-progress" v-if="excelProgress1 > 0">
+            <el-progress :percentage="excelProgress1" :status="excelStatus1"></el-progress>
+          </div>
+          <div class="file-list">
+            <div class="file-item" v-for="file in excelFileList1" :key="file.uid">
+              <i class="el-icon-document" style="color: #67C23A;"></i>
+              <span class="file-name">{{ file.name }}</span>
+              <span class="file-status" :class="{ error: file.status === 'error' }">
+                {{ file.status === 'success' ? '上传成功' : (file.status === 'error' ? '上传失败' : '上传中') }}
+              </span>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 第二个Excel文件上传 -->
+        <div class="upload-card">
+          <div class="upload-icon" style="color: #E6A23C;">
+            <i class="el-icon-document"></i>
+          </div>
+          <div class="upload-title">异常信息处理方式Excel文件上传</div>
+          <div class="upload-desc">支持.xlsx和.xls格式，最大10MB</div>
+          <div class="upload-btn">
+            <el-upload
+              ref="excelUpload2"
+              action="/anomalyInfo/importErrorHandlingExcel"
+              :on-success="handleExcelSuccess2"
+              :on-error="handleError"
+              :before-upload="beforeExcelUpload"
+              :file-list="excelFileList2"
+              :limit="1"
+              accept=".xlsx, .xls">
+              <el-button size="medium" type="warning" icon="el-icon-upload">上传Excel文件</el-button>
+            </el-upload>
+          </div>
+          <div class="upload-progress" v-if="excelProgress2 > 0">
+            <el-progress :percentage="excelProgress2" :status="excelStatus2"></el-progress>
+          </div>
+          <div class="file-list">
+            <div class="file-item" v-for="file in excelFileList2" :key="file.uid">
+              <i class="el-icon-document" style="color: #E6A23C;"></i>
+              <span class="file-name">{{ file.name }}</span>
+              <span class="file-status" :class="{ error: file.status === 'error' }">
+                {{ file.status === 'success' ? '上传成功' : (file.status === 'error' ? '上传失败' : '上传中') }}
+              </span>
+            </div>
+          </div>
+        </div>
+        
+        <!-- ZIP文件上传 -->
+        <div class="upload-card">
+          <div class="upload-icon" style="color: #409EFF;">
+            <i class="el-icon-folder-opened"></i>
+          </div>
+          <div class="upload-title">异常处理图片ZIP文件上传</div>
+          <div class="upload-desc">支持.zip格式，最大50MB</div>
+          <div class="upload-btn">
+            <el-upload
+              ref="zipUpload"
+              action="/anomalyInfo/importErrorImage"
+              :on-success="handleZipSuccess"
+              :on-error="handleError"
+              :before-upload="beforeZipUpload"
+              :file-list="zipFileList"
+              :limit="1"
+              accept=".zip">
+              <el-button size="medium" type="primary" icon="el-icon-upload">上传ZIP文件</el-button>
+            </el-upload>
+          </div>
+          <div class="upload-progress" v-if="zipProgress > 0">
+            <el-progress :percentage="zipProgress" :status="zipStatus"></el-progress>
+          </div>
+          <div class="file-list">
+            <div class="file-item" v-for="file in zipFileList" :key="file.uid">
+              <i class="el-icon-folder-opened" style="color: #409EFF;"></i>
+              <span class="file-name">{{ file.name }}</span>
+              <span class="file-status" :class="{ error: file.status === 'error' }">
+                {{ file.status === 'success' ? '上传成功' : (file.status === 'error' ? '上传失败' : '上传中') }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapGetters } from 'vuex'
+export default {
+  name: 'ModuleRelocation',
+  data () {
+    return {
+      dataList: [],
+      excelFileList1: [],
+      excelProgress1: 0,
+      excelStatus1: '',
+      excelFileList2: [],
+      excelProgress2: 0,
+      excelStatus2: '',
+      zipFileList: [],
+      zipProgress: 0,
+      zipStatus: ''
+    }
+  },
+  computed: {
+    ...mapGetters(['serverUrl'])
+  },
+  methods: {
+    // Excel文件上传前的验证
+    beforeExcelUpload(file) {
+      const isExcel = file.type === 'application/vnd.ms-excel' || 
+                      file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+      const isLt10M = file.size / 1024 / 1024 < 10;
+      
+      if (!isExcel) {
+        this.$message.error('只能上传Excel文件!');
+      }
+      if (!isLt10M) {
+        this.$message.error('Excel文件大小不能超过10MB!');
+      }
+      return isExcel && isLt10M;
+    },
+    // ZIP文件上传前的验证
+    beforeZipUpload(file) {
+      const isZip = file.type === 'application/zip' || 
+                    file.type === 'application/x-zip-compressed';
+      const isLt50M = file.size / 1024 / 1024 < 50;
+      
+      if (!isZip) {
+        this.$message.error('只能上传ZIP文件!');
+      }
+      if (!isLt50M) {
+        this.$message.error('ZIP文件大小不能超过50MB!');
+      }
+      return isZip && isLt50M;
+    },
+    // 第一个Excel上传成功回调
+    handleExcelSuccess1(response, file, fileList) {
+      this.excelFileList1 = fileList;
+      this.excelProgress1 = 100;
+      this.excelStatus1 = 'success';
+      this.$message.success('第一个Excel文件上传成功!');
+    },
+    // 第二个Excel上传成功回调
+    handleExcelSuccess2(response, file, fileList) {
+      this.excelFileList2 = fileList;
+      this.excelProgress2 = 100;
+      this.excelStatus2 = 'success';
+      this.$message.success('第二个Excel文件上传成功!');
+    },
+    // ZIP上传成功回调
+    handleZipSuccess(response, file, fileList) {
+      this.zipFileList = fileList;
+      this.zipProgress = 100;
+      this.zipStatus = 'success';
+      this.$message.success('ZIP文件上传成功!');
+    },
+    // 上传失败回调
+    handleError(err, file, fileList) {
+      this.$message.error('文件上传失败!');
+      if (file.raw.type.includes('excel') || file.name.includes('.xls')) {
+        this.excelProgress1 = 0;
+        this.excelProgress2 = 0;
+      } else {
+        this.zipProgress = 0;
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.upload-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 20px;
+}
+.upload-card {
+  flex: 1;
+  min-width: 300px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  padding: 25px;
+  transition: all 0.3s ease;
+}
+.upload-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+.upload-icon {
+  font-size: 48px;
+  text-align: center;
+  margin-bottom: 15px;
+}
+.upload-title {
+  font-size: 20px;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 10px;
+}
+.upload-desc {
+  color: #909399;
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 14px;
+}
+.upload-btn {
+  display: flex;
+  justify-content: center;
+}
+.file-list {
+  margin-top: 20px;
+}
+.file-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #ebeef5;
+}
+.file-item:last-child {
+  border-bottom: none;
+}
+.file-name {
+  flex: 1;
+  margin-left: 10px;
+}
+.file-status {
+  color: #67C23A;
+}
+.file-status.error {
+  color: #F56C6C;
+}
+.upload-progress {
+  margin-top: 15px;
+}
+.footer {
+  text-align: center;
+  margin-top: 40px;
+  color: #909399;
+  font-size: 14px;
+}
+@media (max-width: 768px) {
+  .upload-container {
+    flex-direction: column;
+  }
+  .upload-card {
+    min-width: 100%;
+  }
+}
+</style>
diff --git a/src/pages/modules/map/map copy.vue b/src/pages/modules/map/map copy.vue
new file mode 100644
index 0000000..d6d37d9
--- /dev/null
+++ b/src/pages/modules/map/map copy.vue	
@@ -0,0 +1,838 @@
+
+<template>
+  <div class="page_container" :class="{'enClass': $i18n.locale === 'en-us'}">
+    <div class="canvas-container" ref="mapContainer">
+      <canvas
+        class="mapCanvas"
+        ref="mapCanvas"
+        @click="handleCanvasClick"
+        @touchstart="handleTouchStart"
+        @touchmove="handleTouchMove"
+        @touchend="handleTouchEnd"
+        @mousedown="handleMouseDown"
+        @mousemove="handleMouseMove"
+        @mouseup="handleMouseUp"
+        @mouseleave="handleMouseUp"
+        @wheel="handleZoom"
+      ></canvas>
+      <svg 
+        class="mapSvg" 
+        ref="mapSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g ref="svgPoints">
+          <circle
+            v-for="(point, index) in greenPoints"
+            :key="index"
+            :cx="convertToSvgX(point.x)"
+            :cy="convertToSvgY(point.y)"
+            r="1"
+            fill="red"
+          />
+        </g>
+        <image
+          ref="carImage"
+          :href="require('../../images/new/agv.png')"
+          alt="小车"
+          width="30"
+          height="30"
+          :x="carX"
+          :y="carY"
+          :transform="`rotate(${rotateAngle} ${carX + 15} ${carY + 15})`"
+          @mousedown="startCarDrag"
+          @touchstart="startCarDrag"
+        />
+      </svg>
+      <div class="map_tools">
+        <el-button class="zoom_btn" type="primary" :disabled="zoomPercentage === 2" icon="el-icon-minus" size="mini" @click="zoomOut"></el-button>
+        <div class="zoom_data">{{ zoomPercentage }}%</div>
+        <el-button class="zoom_btn" type="primary" :disabled="zoomPercentage === 200" icon="el-icon-plus" size="mini" @click="zoomIn"></el-button>
+        <el-button class="zoom_btn" style="margin-top: .2rem !important" type="primary" icon="el-icon-rank" size="mini"></el-button>
+        <el-button class="zoom_btn" type="primary" icon="el-icon-location" size="mini" @click="handleRelocate"></el-button>
+      </div>
+    </div>
+    <div
+      v-if="showPopup"
+      class="point-popup"
+      :style="popupStyle"
+      @click.stop
+    >
+      <el-row type="flex" justify="space-between" class="popup-content" style="border-bottom: 1px solid #fff;">
+        <el-col :span="10"><h3>{{$t('Number')}}</h3></el-col>
+        <el-col :span="14"><p>{{selectedPoint.station_code}}</p></el-col>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="popup-content">
+        <el-col :span="10"><h3>{{$t('Alias')}}</h3></el-col>
+        <el-col :span="14"><p>{{selectedPoint.station_name}}</p></el-col>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="popup-content">
+        <el-col :span="10"><h3>{{$t('XCoordinate')}}</h3></el-col>
+        <el-col :span="14"><p>{{ selectedPoint.x }}</p></el-col>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="popup-content">
+        <el-col :span="10"><h3>{{ $t('YCoordinate') }}</h3></el-col>
+        <el-col :span="14"><p>{{ selectedPoint.y }}</p></el-col>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="popup-content">
+        <el-col :span="10"><h3>{{$t('AngleValue')}}</h3></el-col>
+        <el-col :span="14"><p>{{ selectedPoint.angle }}</p></el-col>
+      </el-row>
+    </div>
+    <div
+      v-if="showPathPopup"
+      class="point-popup"
+      :style="pathPopupStyle"
+      @click.stop
+    >
+      <el-row type="flex" justify="space-between" class="popup-content" style="border-bottom: 1px solid #fff;">
+        <el-col :span="10"><h3>{{ $t('PathID') }}</h3></el-col>
+        <el-col :span="14"><p>{{selectedPath.route_id}}</p></el-col>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="popup-content">
+        <el-col :span="10"><h3>{{$t('StartCode')}}</h3></el-col>
+        <el-col :span="14"><p>{{getStationNameById(selectedPath.start_id)}}</p></el-col>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="popup-content">
+        <el-col :span="10"><h3>{{$t('EndCode')}}</h3></el-col>
+        <el-col :span="14"><p>{{getStationNameById(selectedPath.end_id)}}</p></el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { throttle } from 'lodash'
+import markerImage from '@/images/new/station.png'
+import { getMapInfoByCode, getRouteInfo, queryMapAllStation } from '@/config/mork.js'
+import { mapGetters } from 'vuex'
+import { points } from '@/config/point.js'
+/* eslint-disable */
+export default {
+  name: 'ModuleMap',
+  data () {
+    return {
+      canvas: null, // Canvas元素
+      ctx: null, // Canvas绘图上下文
+      canvasWidth: 0, // Canvas/SVG 宽度（同步更新）
+      canvasHeight: 0, // Canvas/SVG 高度（同步更新）
+      originX: 0, // Canvas原点X
+      originY: 0, // Canvas原点Y
+      cachedImages: {
+        map: null,
+        marker: null
+      },
+      mapData: null, // 地图数据
+      pathData: null, // 路径数据
+      pointData: null, // 点位数据
+      mapScale: 1, // 地图图片缩放比例
+      showPopup: false,
+      selectedPoint: {},
+      popupStyle: {left: '0px', top: '0px'},
+      selectedPointId: null,
+      showPathPopup: false,
+      selectedPath: {route_id: null},
+      pathPopupStyle: { left: '0px', top: '0px' },
+      pathClickThreshold: 5,
+      touchStart: null, // 触摸起点
+      isDragging: false, // 是否正在拖动地图
+      lastX: 0, // 上一次鼠标/触摸X位置
+      lastY: 0, // 上一次鼠标/触摸Y位置
+      offsetX: 0, // Canvas偏移X
+      offsetY: 0, // Canvas偏移Y
+      scale: 1, // 缩放比例
+      zoomPercentage: 100, // 当前缩放百分比
+      greenPoints: [], // 绿色点位数组
+      websocket: null, // WebSocket实例
+      isCarLocked: false, // 是否锁定小车位置（点击relocate后为true）
+      isDraggingCar: false, // 是否正在拖拽小车
+      carX: 0, // 小车自然坐标转页面坐标
+      carY: 0, // 小车自然坐标转页面坐标
+      rotateAngle: 0, // 旋转弧度
+      dragStartX: 0, // 记录拖拽开始的偏移量
+      dragStartY: 0 // 记录拖拽开始的偏移量
+    }
+  },
+  computed: {
+    ...mapGetters(['serverUrl', 'carPosition', 'userRole'])
+  },
+  watch: {
+    carPosition: {
+      handler(newVal) {
+        this.updateCarPosition(newVal)
+      },
+      deep: true
+    },
+    mapData: {
+      handler(newVal) {
+        if (newVal) {
+          this.updateCarPosition(this.carPosition)
+        }
+      }
+    }
+  },
+  mounted () {
+    this.loadAllDataInParallel()
+  },
+  beforeDestroy () {
+    this.closeWebSocket()
+  },
+  methods: {
+    async loadAllDataInParallel () {
+      try {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
+        const [mapData, pathData, stations] = await Promise.all([
+          this._getMapInfoByCode(),
+          this._getRouteInfo(),
+          this._queryMapAllStation()
+        ])
+        await Promise.all([
+          this.preloadImage('map', mapData.mapImageAddress),
+          this.preloadImage('marker', markerImage)
+        ])
+        this.mapData = mapData
+        this.pathData = [...pathData]
+        this.pointData = this.filterPointData(pathData, stations)
+        this.initCanvas()
+        this.loading.close()
+        return true
+      } catch (e) {
+        this.$message.error(e.message)
+        this.loading.close()
+        return false
+      }
+    },
+    preloadImage(key, url) {
+      return new Promise((resolve, reject) => {
+        const img = new Image()
+        img.src = url
+        img.onload = () => {
+          this.cachedImages[key] = img
+          resolve()
+        }
+        img.onerror = () => reject(new Error(`图片加载失败: ${url}`))
+      })
+    },
+    async _getMapInfoByCode () {
+      try {
+        const res = await getMapInfoByCode()
+        if (!res) throw new Error('地图信息为空')
+        return res
+      } catch (e) {
+        console.error('获取地图信息失败:', e)
+        throw new Error(`获取地图信息失败: ${e.message}`)
+      }
+    },
+    async _getRouteInfo () {
+      try {
+        const res = await getRouteInfo()
+        if (!res) throw new Error('路径信息为空')
+        return res
+      } catch (e) {
+        console.error('获取路径信息失败:', e)
+        throw new Error(`获取路径信息失败: ${e.message}`)
+      }
+    },
+    async _queryMapAllStation () {
+      try {
+        const res = await queryMapAllStation()
+        if (!res) throw new Error('站点信息为空')
+        return res
+      } catch (e) {
+        console.error('获取站点信息失败:', e)
+        throw new Error(`获取站点信息失败: ${e.message}`)
+      }
+    },
+    filterPointData (routes, stations) {
+      const result = []
+      const seenStationIds = new Set()
+      routes.forEach(route => {
+        const startStation = stations.find(s => s.station_id === route.start_id)
+        const endStation = stations.find(s => s.station_id === route.end_id)
+        if (startStation && !seenStationIds.has(startStation.station_id)) {
+          result.push(startStation)
+          seenStationIds.add(startStation.station_id)
+        }
+        if (endStation && !seenStationIds.has(endStation.station_id)) {
+          result.push(endStation)
+          seenStationIds.add(endStation.station_id)
+        }
+      })
+      return result
+    },
+    initCanvas () {
+      this.canvas = this.$refs.mapCanvas
+      this.ctx = this.canvas.getContext('2d')
+      const container = this.$refs.mapContainer
+      this.canvasWidth = container.clientWidth
+      this.canvasHeight = container.clientHeight
+      this.canvas.width = this.canvasWidth
+      this.canvas.height = this.canvasHeight
+      // 计算地图图片缩放比例
+      if (this.mapData.width > this.canvas.width || this.mapData.height > this.canvas.height) {
+        const scaleX = this.canvas.width / this.mapData.width
+        const scaleY = this.canvas.height / this.mapData.height
+        this.mapScale = Math.min(scaleX, scaleY)
+      }
+      const scaledWidth = this.mapData.width * this.mapScale
+      const scaledHeight = this.mapData.height * this.mapScale
+      // 计算地图图片左上角位置（即要移动到的原点）
+      this.originX = (this.canvas.width - scaledWidth) / 2
+      this.originY = (this.canvas.height - scaledHeight) / 2
+      this.ctx.translate(this.originX, this.originY)
+      this.ctx.save()
+      this.redrawCanvas()
+      // svg
+      const mapSvg = this.$refs.mapSvg
+      mapSvg.setAttribute('width', this.canvasWidth);
+      mapSvg.setAttribute('height', this.canvasHeight);
+      mapSvg.setAttribute('viewBox', `-${this.originX} -${this.originY} ${this.canvasWidth} ${this.canvasHeight}`)
+    },
+    updateCarPosition(newVal) {
+      if (!this.mapData) {
+        return
+      }
+      if (typeof newVal?.x !== 'number' || typeof newVal?.y !== 'number') {
+        return
+      }
+      if (!this.isCarLocked) {
+        const carX = ((newVal.x - this.mapData.x) / this.mapData.resolution) * this.mapScale
+        const carY = (this.mapData.height - (newVal.y - this.mapData.y) / this.mapData.resolution) * this.mapScale
+        const rotateAngle = -newVal.angle * 57.295779513
+        this.carX = carX - 15
+        this.carY = carY - 15
+        this.rotateAngle = rotateAngle
+      }
+    },
+    redrawCanvas: throttle(function () {
+      if (!this.ctx || !this.mapData) return
+      const scaledWidth = this.mapData.width * this.mapScale
+      const scaledHeight = this.mapData.height * this.mapScale
+      this.ctx.save()
+      this.ctx.setTransform(1, 0, 0, 1, 0, 0)
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+      this.ctx.restore()
+      if (!this.cachedImages.map) {
+        this.cachedImages.map = new Image()
+        this.cachedImages.map.src = this.mapData.mapImageAddress
+        this.cachedImages.map.onload = () => {
+          this.drawMapAndOverlays(scaledWidth, scaledHeight)
+        }
+      } else {
+        this.drawMapAndOverlays(scaledWidth, scaledHeight)
+      }
+    }, 30),
+    drawMapAndOverlays(scaledWidth, scaledHeight) {
+      if (!this.ctx || !this.cachedImages.map) return
+      // 绘制地图背景
+      this.ctx.drawImage(this.cachedImages.map, 0, 0, scaledWidth, scaledHeight)
+      // 绘制路径（叠加在地图上）
+      this.drawPath()
+      // 绘制点位（叠加在最上层）
+      this.drawMarkers()
+    },
+    drawPath () {
+      if (!this.pathData.length) return
+      this.pathData.forEach((point, index) => {
+        const startX = ((point.start_x - this.mapData.x) / this.mapData.resolution) * this.mapScale
+        const startY = (this.mapData.height - (point.start_y - this.mapData.y) / this.mapData.resolution) * this.mapScale
+        const endX = ((point.end_x - this.mapData.x) / this.mapData.resolution) * this.mapScale
+        const endY = (this.mapData.height - (point.end_y - this.mapData.y) / this.mapData.resolution) * this.mapScale
+        const nextPoint = this.pathData[index + 1];
+        let controlX, controlY;
+        if (nextPoint) {
+          // 有下一个点时，使用当前终点和下一个起点的中点作为控制点
+          const nextStartX = ((nextPoint.start_x - this.mapData.x) / this.mapData.resolution) * this.mapScale;
+          const nextStartY = (this.mapData.height - (nextPoint.start_y - this.mapData.y) / this.mapData.resolution) * this.mapScale;
+          controlX = (endX + nextStartX) / 2;
+          controlY = (endY + nextStartY) / 2;
+        } else {
+          // 最后一个点，使用当前终点作为控制点
+          controlX = endX;
+          controlY = endY;
+        }
+        this.ctx.beginPath()
+        this.ctx.moveTo(startX, startY)
+        this.ctx.quadraticCurveTo(controlX, controlY, endX, endY);
+        if (this.selectedPath.route_id === point.route_id) {
+          this.ctx.strokeStyle = '#ff5722' // 橙色高亮
+          this.ctx.lineWidth = 4
+        } else {
+          this.ctx.strokeStyle = '#009de5' // 默认蓝色
+          this.ctx.lineWidth = 2
+        }
+        this.ctx.stroke()
+      })
+    },
+    drawMarkers () {
+      if (!this.pointData.length || !this.ctx) return
+      const markerSize = 16
+      if (!this.cachedImages.marker) {
+        this.cachedImages.marker = new Image()
+        this.cachedImages.marker.src = markerImage
+        // 图标加载完成后重新绘制，确保点位显示
+        this.cachedImages.marker.onload = () => {
+          this.redrawCanvas()
+        }
+        return // 等待图标加载完成后再绘制
+      }
+      this.pointData.forEach(point => {
+        const x = ((point.x - this.mapData.x) / this.mapData.resolution) * this.mapScale
+        const y = (this.mapData.height - (point.y - this.mapData.y) / this.mapData.resolution) * this.mapScale
+        // 绘制选中状态
+        if (point.station_id === this.selectedPointId) {
+          this.ctx.beginPath()
+          this.ctx.arc(x, y, 5, 0, Math.PI * 2)
+          this.ctx.fillStyle = '#59ccd2'
+          this.ctx.fill()
+        } else {
+          this.ctx.drawImage(this.cachedImages.marker, x - markerSize / 2, y - markerSize / 2, markerSize, markerSize)
+        }
+        // 绘制点位名称（文字大小随缩放变化）
+        if (point.station_type !== 'Station') {
+          this.ctx.font = '12px Arial'
+          this.ctx.fillStyle = '#62fa0a'
+          this.ctx.textAlign = 'center'
+          this.ctx.fillText(point.station_name, x, y + 22)
+          this.ctx.fillText(point.x, x, y + 34)
+          this.ctx.fillText(point.y, x, y + 50)
+        }
+      })
+    },
+    handleCanvasClick (event) {
+      const rect = this.canvas.getBoundingClientRect()
+      const mouseX = (event.clientX - rect.left - this.originX) / this.scale
+      const mouseY = (event.clientY - rect.top - this.originY) / this.scale
+      // 1. 优先检测点位点击
+      let pointClicked = false
+      for (const point of this.pointData) {
+        let x = ((point.x - this.mapData.x) / this.mapData.resolution) * this.mapScale
+        let y = (this.mapData.height - (point.y - this.mapData.y) / this.mapData.resolution) * this.mapScale
+        x = Math.abs(x) === 0 ? 0 : x
+        y = Math.abs(y) === 0 ? 0 : y
+        if (mouseX >= x - 10 && mouseX <= x + 10 && mouseY >= y - 10 && mouseY <= y + 10) {
+          this.handlePointSelect(point, event)
+          event.stopPropagation()
+          pointClicked = true
+          if (this.showPathPopup) {
+            this.selectedPath = {route_id: null}
+            this.showPathPopup = false
+            this.redrawCanvas()
+          }
+          break
+        }
+      }
+      // 2. 只有点位未被点击时，才检测路径点击
+      if (!pointClicked) {
+        if (this.showPopup) {
+          this.selectedPointId = null
+          this.selectedPoint = null
+          this.showPopup = false
+          this.redrawCanvas()
+        }
+        let pathClicked = false
+        for (const path of this.pathData) {
+          // 计算路径线段的Canvas坐标
+          const startX = ((path.start_x - this.mapData.x) / this.mapData.resolution) * this.mapScale
+          const startY = (this.mapData.height - (path.start_y - this.mapData.y) / this.mapData.resolution) * this.mapScale
+          const endX = ((path.end_x - this.mapData.x) / this.mapData.resolution) * this.mapScale
+          const endY = (this.mapData.height - (path.end_y - this.mapData.y) / this.mapData.resolution) * this.mapScale
+          // 计算点击点到线段的距离
+          const distance = this.pointToLineDistance(
+            { x: mouseX, y: mouseY },
+            { x: startX, y: startY },
+            { x: endX, y: endY }
+          )
+          // 距离小于阈值则认为点击了该路径
+          if (distance <= this.pathClickThreshold) {
+            this.handlePathSelect(path, event)
+            event.stopPropagation()
+            pathClicked = true
+            break
+          }
+        }
+        if (!pathClicked && this.showPathPopup) {
+          this.selectedPath = {route_id: null}
+          this.showPathPopup = false
+          this.redrawCanvas()
+        }
+      }
+    },
+    // 计算点到线段的最短距离
+    pointToLineDistance (point, lineStart, lineEnd) {
+      // 线段向量
+      const dx = lineEnd.x - lineStart.x
+      const dy = lineEnd.y - lineStart.y
+      // 线段长度的平方
+      const lengthSquared = dx * dx + dy * dy
+      // 线段长度为0（起点终点重合），直接返回点到起点的距离
+      if (lengthSquared === 0) {
+        return Math.hypot(point.x - lineStart.x, point.y - lineStart.y)
+      }
+      // 计算点击点在投影到线段上的位置比例（0~1之间为在线段上）
+      let t = ((point.x - lineStart.x) * dx + (point.y - lineStart.y) * dy) / lengthSquared
+      t = Math.max(0, Math.min(1, t)) // 限制在0~1范围内
+      // 投影点坐标
+      const projectionX = lineStart.x + t * dx
+      const projectionY = lineStart.y + t * dy
+      // 点到投影点的距离
+      return Math.hypot(point.x - projectionX, point.y - projectionY)
+    },
+    // 处理点位选中
+    handlePointSelect (point, event) {
+      if (this.selectedPointId === point.station_id) {
+        this.selectedPointId = null
+        this.selectedPoint = null
+        this.showPopup = false
+      } else {
+        this.selectedPointId = point.station_id
+        this.selectedPoint = point
+        this.showPopup = true
+        this.calculatePopupPosition(event)
+      }
+      this.redrawCanvas()
+    },
+    // 处理路径选中
+    handlePathSelect (path, event) {
+      if (this.selectedPath.route_id === path.route_id) {
+        this.selectedPath = {route_id: null}
+        this.showPathPopup = false
+      } else {
+        this.selectedPath = path
+        this.showPathPopup = true
+        this.calculatePathPopupPosition(event)
+      }
+      this.redrawCanvas()
+    },
+    // 计算弹窗位置
+    calculatePopupPosition (event) {
+      const popupWidth = 200
+      const popupHeight = 180
+      let left = event.clientX - 40
+      let top = event.clientY - 150
+
+      // 限制弹窗在窗口可视范围内
+      left = Math.max(10, Math.min(left, window.innerWidth - popupWidth - 10))
+      top = Math.max(10, Math.min(top, window.innerHeight - popupHeight - 10))
+
+      this.popupStyle = { left: `${left}px`, top: `${top}px` }
+    },
+    // 计算路径弹窗位置
+    calculatePathPopupPosition (event) {
+      const popupWidth = 160
+      const popupHeight = 100
+      let left = event.clientX - 40
+      let top = event.clientY - 120
+      // 限制弹窗在窗口可视范围内
+      left = Math.max(10, Math.min(left, window.innerWidth - popupWidth - 10))
+      top = Math.max(10, Math.min(top, window.innerHeight - popupHeight - 10))
+      this.pathPopupStyle = { left: `${left}px`, top: `${top}px` }
+    },
+    getStationNameById (stationId) {
+      if (!stationId || !this.pointData || !this.pointData.length) return null
+      const station = this.pointData.find(point => point.station_id === stationId)
+      return station ? station.station_name : null
+    },
+    // 触摸事件：支持单指拖动和双指缩放
+    handleTouchStart (event) {
+      // 记录触摸点
+      const touches = Array.from(event.touches)
+      if (touches.length === 1) {
+        // 单指：准备拖动
+        this.isDragging = true
+        this.lastX = touches[0].clientX
+        this.lastY = touches[0].clientY
+      } else if (touches.length === 2) {
+        // 双指：准备缩放（禁用拖动）
+        this.isDragging = false
+        this.touchStart = touches.map(touch => ({
+          x: touch.clientX,
+          y: touch.clientY
+        }))
+      }
+    },
+    applyTransform () {
+      const mapSvg = this.$refs.mapSvg
+      if (this.canvas) {
+        this.canvas.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`
+        mapSvg.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`
+      }
+    },
+    // 计算两点之间的距离
+    getDistance (x1, y1, x2, y2) {
+      return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
+    },
+    zoom (step) {
+      this.scale = Math.min(2, Math.max(0.02, this.scale + step / 100))
+      this.zoomPercentage = Math.round(this.scale * 100)
+      this.applyTransform()
+    },
+    handleTouchMove (event) {
+      event.preventDefault() // 阻止页面滚动
+      const touches = Array.from(event.touches)
+      if (this.isDragging && touches.length === 1) {
+        // 单指拖动
+        const currentX = touches[0].clientX
+        const currentY = touches[0].clientY
+        // 计算移动距离（考虑缩放影响，拖动速度与缩放比例成反比）
+        const moveX = (currentX - this.lastX) / this.scale
+        const moveY = (currentY - this.lastY) / this.scale
+        // 更新偏移量
+        this.offsetX += moveX
+        this.offsetY += moveY
+        // 更新上一次位置
+        this.lastX = currentX
+        this.lastY = currentY
+        // 应用变换
+        this.applyTransform()
+      } else if (this.touchStart && touches.length === 2) {
+        // 双指缩放（原有逻辑）
+        const startDist = this.getDistance(this.touchStart[0].x, this.touchStart[0].y, this.touchStart[1].x, this.touchStart[1].y)
+        const currentDist = this.getDistance(touches[0].clientX, touches[0].clientY, touches[1].clientX, touches[1].clientY)
+        // 计算缩放步长（更平滑的缩放）
+        const scaleFactor = currentDist / startDist
+        const step = (scaleFactor - 1) * 50; // 调整缩放灵敏度
+        this.zoom(step)
+        // 更新触摸起点
+        this.touchStart = touches.map(touch => ({
+          x: touch.clientX,
+          y: touch.clientY
+        }))
+      }
+    },
+    handleTouchEnd () {
+      this.touchStart = null
+      this.isDragging = false
+    },
+    // 鼠标按下（开始拖动）
+    handleMouseDown (event) {
+      event.preventDefault()
+      this.isDragging = true
+      // 记录初始鼠标位置
+      this.lastX = event.clientX
+      this.lastY = event.clientY
+      // 鼠标样式变为抓手
+      this.canvas.style.cursor = 'grabbing'
+    },
+    // 鼠标移动（拖动中）
+    handleMouseMove (event) {
+      if (!this.isDragging) return
+      event.preventDefault()
+      // 计算移动距离（考虑缩放影响）
+      const currentX = event.clientX
+      const currentY = event.clientY
+      const moveX = (currentX - this.lastX) / this.scale
+      const moveY = (currentY - this.lastY) / this.scale
+      // 更新偏移量
+      this.offsetX += moveX
+      this.offsetY += moveY
+      // 更新上一次位置
+      this.lastX = currentX
+      this.lastY = currentY
+      // 应用变换
+      this.applyTransform()
+    },
+    // 鼠标松开（结束拖动）
+    handleMouseUp () {
+      this.isDragging = false
+      this.canvas.style.cursor = 'default'
+    },
+    // 鼠标滚动缩放
+    handleZoom (event) {
+      event.preventDefault()
+      const delta = event.deltaY
+      const step = delta > 0 ? -1 : 1
+      this.zoom(step)
+    },
+    zoomIn () {
+      if (this.scale < 2) {
+        this.zoom(8) // 每次放大8%
+      }
+    },
+    zoomOut () {
+      if (this.scale > 0.02) {
+        this.zoom(-8) // 每次缩小8%
+      }
+    },
+    initWebSocket () {
+      this.loading = this.$loading({
+        lock: true,
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.6)'
+      })
+      const protocol = this.serverUrl.startsWith('https') ? 'wss' : 'ws'
+      const wsHost = this.serverUrl.replace(/^https?:\/\//, '')
+      this.closeWebSocket()
+      this.websocket = new WebSocket(`${protocol}://${wsHost}/webSocket/PointCloudData/${this.userRole}`)
+      this.websocket.onopen = () => {}
+      this.websocket.onmessage = (event) => {
+        try {
+          const res = JSON.parse(event.data)
+          this.greenPoints = res
+          this.loading.close()
+        } catch (error) {
+          console.error('WebSocket消息解析失败:', error)
+        }
+      }
+      this.websocket.onerror = (error) => {
+        this.$message.error(this.$t('WebSocketerror') + ':', error)
+      }
+      this.websocket.onclose = () => {
+        this.loading.close()
+      }
+    },
+    closeWebSocket () {
+      if (this.websocket) {
+        this.websocket.close(1000, '正常关闭')
+        this.websocket = null
+      }
+    },
+    // 点击重定位：锁定小车位置，初始化拖拽起点
+    handleRelocate () {
+      this.greenPoints = []
+      this.greenPoints = points.data
+      // this.initWebSocket()
+      if (typeof this.carPosition?.x !== 'number' || typeof this.carPosition?.y !== 'number' || !this.mapData) {
+        return
+      }
+      // 锁定小车（不再响应carPosition变化）
+      this.isCarLocked = true
+    },
+    // 开始拖拽小车
+    startCarDrag (e) {
+      if (!this.isCarLocked) return // 未锁定时不允许拖拽
+      this.isDraggingCar = true
+      // 初始化拖拽起点
+      const clientX = e.clientX || e.touches[0].clientX
+      const clientY = e.clientY || e.touches[0].clientY
+      // 将 clientX 转换为 SVG 坐标系中的 carX
+      const svgPoint = this.clientToSvg(clientX, clientY)
+      // 记录拖拽开始的偏移量
+      this.dragStartX = svgPoint.x - this.carX
+      this.dragStartY = svgPoint.y - this.carY
+      const options = { passive: false }
+      document.addEventListener('mousemove', this.onCarDragMove, options)
+      document.addEventListener('mouseup', this.endCarDrag, options)
+      document.addEventListener('touchmove', this.onCarDragMove, options)
+      document.addEventListener('touchend', this.endCarDrag, options)
+      e.preventDefault()
+    },
+    // 拖拽小车移动
+    onCarDragMove: throttle(function (e) {
+      if (!this.isDraggingCar || !this.isCarLocked) return
+      e.preventDefault()
+      const clientX = e.clientX || e.touches[0].clientX
+      const clientY = e.clientY || e.touches[0].clientY
+      // 转换为 SVG 坐标
+      const svgPoint = this.clientToSvg(clientX, clientY)
+      // 计算新的车辆位置（减去偏移量）
+      this.carX = svgPoint.x - this.dragStartX
+      this.carY = svgPoint.y - this.dragStartY
+    }, 16),
+    // 结束拖拽小车
+    endCarDrag () {
+      if (this.isDraggingCar) {
+        this.isDraggingCar = false
+        const options = { passive: false }
+        document.removeEventListener('mousemove', this.onCarDragMove, options)
+        document.removeEventListener('mouseup', this.endCarDrag, options)
+        document.removeEventListener('touchmove', this.onCarDragMove, options)
+        document.removeEventListener('touchend', this.endCarDrag, options)
+        const mapCoord = this.svgToMapCoordinate(this.carX + 15, this.carY + 15)
+        console.log(mapCoord)
+      }
+    },
+    // 将 clientX 转换为 SVG 坐标系
+    clientToSvg(clientX, clientY) {
+      const svg = this.$refs.mapSvg
+      const pt = svg.createSVGPoint()
+      
+      pt.x = clientX
+      pt.y = clientY
+      
+      // 使用 SVG 的变换矩阵将屏幕坐标转换为 SVG 内部坐标
+      return pt.matrixTransform(svg.getScreenCTM().inverse())
+    },
+    // 将 SVG 坐标转换为 clientX
+    svgToClient(svgX, svgY) {
+      const svg = this.$refs.mapSvg
+      const pt = svg.createSVGPoint()
+      
+      pt.x = svgX
+      pt.y = svgY
+      
+      // 将 SVG 坐标转换为屏幕坐标
+      return pt.matrixTransform(svg.getScreenCTM())
+    },
+    // 将 SVG 坐标 carX 转换回地图坐标系
+    svgToMapCoordinate(svgX, svgY) {
+      if (!this.mapData) return null
+      // 反向计算您的原始公式
+      const mapX = (svgX / this.mapScale) * this.mapData.resolution + this.mapData.x
+      const mapY = this.mapData.y + (this.mapData.height - (svgY / this.mapScale)) * this.mapData.resolution
+      
+      return { x: mapX, y: mapY }
+    },
+    convertToSvgX (x) {
+      if (!this.mapData || !this.mapScale) return 0
+      const svgX = ((x - this.mapData.x) / this.mapData.resolution) * this.mapScale
+      return svgX
+    },
+    convertToSvgY (y) {
+      if (!this.mapData || !this.mapScale) return 0
+      const svgY = (this.mapData.height - (y - this.mapData.y) / this.mapData.resolution) * this.mapScale
+      return svgY
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.canvas-container
+  position relative
+  height 100%
+  background-color rgba(4, 33, 58, 70%)
+  box-shadow inset 1px 1px 7px 2px #4d9bcd
+  overflow hidden
+.mapCanvas, .mapSvg
+  position absolute
+  top 0
+  left 0
+  width 100%
+  height 100%
+.mapSvg
+  pointer-events none
+  z-index 10
+  image
+    pointer-events auto
+.point-popup
+  position fixed
+  background rgba(0, 0, 0, 70%)
+  border 1px solid rgba(255, 255, 255, .3)
+  border-radius: 8px;
+  padding 10px
+  box-shadow 0 0px 4px 2px rgba(255,255,255,0.1)
+  z-index 100
+  min-width 160px
+  animation fadeIn 0.2s ease-out
+  h3
+    color #fff
+    font-size 14px
+    line-height 24px
+    text-align center
+  p
+    color #fff
+    font-size 14px
+    line-height 24px
+    text-align center
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.enClass
+  .point-popup
+    min-width 240px
+</style>
diff --git a/src/pages/modules/warning.vue b/src/pages/modules/warn/index.vue
similarity index 100%
rename from src/pages/modules/warning.vue
rename to src/pages/modules/warn/index.vue
diff --git a/src/pages/modules/warn-modal.vue b/src/pages/modules/warn/warn-modal.vue
similarity index 97%
rename from src/pages/modules/warn-modal.vue
rename to src/pages/modules/warn/warn-modal.vue
index a9e67fe..59947f6 100644
--- a/src/pages/modules/warn-modal.vue
+++ b/src/pages/modules/warn/warn-modal.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { queryErrorDataByCode } from '../../config/getData.js'
+import { queryErrorDataByCode } from '@/config/getData.js'
 export default {
   data () {
     return {
diff --git a/src/router/index.js b/src/router/index.js
index 3dff653..b508c62 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,9 +4,9 @@ import VueRouter from 'vue-router'
 // const Login = r => require.ensure([], () => r(require('../pages/modules/login/login.vue')), 'login')
 const IndexComponent = r => require.ensure([], () => r(require('../pages/shells/index.vue')), 'index')
 const Home = r => require.ensure([], () => r(require('../pages/modules/home.vue')), 'Home')
-const Device = r => require.ensure([], () => r(require('../pages/modules/device.vue')), 'Device')
-const Warning = r => require.ensure([], () => r(require('../pages/modules/warning.vue')), 'Warning')
-const Building = r => require.ensure([], () => r(require('../pages/modules/building.vue')), 'Building')
+const Device = r => require.ensure([], () => r(require('../pages/modules/device/index.vue')), 'Device')
+const Warning = r => require.ensure([], () => r(require('../pages/modules/warn/index.vue')), 'Warning')
+const Building = r => require.ensure([], () => r(require('../pages/modules/build/index.vue')), 'Building')
 const Map = r => require.ensure([], () => r(require('../pages/modules/map/index.vue')), 'Map')
 const Relocation = r => require.ensure([], () => r(require('../pages/modules/relocation.vue')), 'Relocation')
 Vue.use(VueRouter)