fix bug修复

README.md

@@ -1,29 +1,3 @@
 # kxfx
 
-## Project setup
-
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-
-```
-npm run build
-```
-
-### Lints and fixes files
-
-```
-npm run lint
-```
-
-### Customize configuration
-
-See [Configuration Reference](https://cli.vuejs.org/config/).
+## 机动路线规划

package.json

@@ -9,12 +9,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@babel/preset-env": "^7.28.3",
     "axios": "0.21.0",
-    "core-js": "^3.8.3",
     "echarts": "^5.4.3",
     "element-ui": "2.9.2",
+    "file-saver": "^2.0.5",
     "gsap": "^3.13.0",
+    "ini-parser": "^0.0.2",
     "js-cookie": "2.2.1",
+    "raw-loader": "^4.0.2",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2",
@@ -22,13 +25,15 @@
     "vxe-table": "~3.18.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
+    "@babel/core": "^7.28.4",
     "@babel/eslint-parser": "^7.12.16",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "babel-loader": "^10.0.0",
+    "core-js": "^3.46.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",

public/config.ini

@@ -0,0 +1,6 @@
+[http]
+port=8083
+address=127.0.0.1
+
+[title]
+msg=道路堪选分析

public/config/map.json

@@ -59,7 +59,7 @@
         "id": "image-tdss",
         "name": "影像图",
         "type": "xyz",
-        "url": "http:/www.tdss.website:280/tiles/img_c/{z}/{x}/{y}",
+        "url": "http://www.tdss.website:280/tiles/img_c/{z}/{x}/{y}",
         "crs": "EPSG:4490",
         "show": true
       }

public/data/minTurnRadius.json

@@ -1,26 +1,34 @@
 [
   {
     "id": 1,
-    "width": 30,
-    "load": 500,
+    "name": "车1",
+    "long": 10,
+    "width": 7,
+    "load": 3,
     "minTurnRadius": 5
   },
   {
     "id": 2,
-    "width": 10,
-    "load": 600,
+    "name": "车2",
+    "long": 10,
+    "width": 11,
+    "load": 1,
     "minTurnRadius": 6
   },
   {
     "id": 3,
-    "width": 40,
-    "load": 700,
+    "name": "车3",
+    "long": 10,
+    "width": 8,
+    "load": 7,
     "minTurnRadius": 10
   },
   {
     "id": 4,
-    "width": 20,
-    "load": 700,
+    "name": "车4",
+    "long": 10,
+    "width": 10,
+    "load": 5,
     "minTurnRadius": 2
   }
 ]

public/data/points.json

@@ -1,38 +1,22 @@
 {
-  "startPoint": "114.262694,27.786216",
-  "endPoint": "114.274729,27.777062",
+  "startPoint": "114.26344,27.800982",
+  "endPoint": "114.284668,27.794961",
   "viaPoints": [
     {
       "time": "1694352000000",
-      "points": "114.263233,27.777047"
-    },
-    {
-      "time": "1694352001000",
-      "points": "114.265512,27.789935"
-    },
-    {
-      "time": "1694352002000",
-      "points": "114.256863,27.780437"
+      "points": "114.272329,27.797299"
     }
   ],
   "avoidPoints": [
     {
       "time": "1694352003000",
-      "points": "114.261166,27.800982"
-    },
-    {
-      "time": "1694352004000",
-      "points": "114.251312,27.786932"
+      "points": "114.27882,27.792857"
     }
   ],
   "avoidAreas": [
     {
       "time": "1694352005000",
-      "points": "[[114.267217,27.777566,0],[114.276695,27.78048,0],[114.276001,27.772547,0],[114.276001,27.772486,0]]"
-    },
-    {
-      "time": "1694352006000",
-      "points": "[[114.272317,27.786501,0],[114.281341,27.79818,0],[114.290389,27.779594,0],[114.284888,27.773934,0]]"
+      "points": "[[114.272797,27.7935,0],[114.27268,27.794201,0],[114.27537,27.795838,0]]"
     }
   ]
 }

src/router/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import HomeView from '../views/home.vue'
+import HomeView from '../views/home/home.vue'
 import residentAnalysis from '@/views/residentAnalysis/index.vue'
 
 Vue.use(VueRouter)

src/views/header/index.vue

@@ -23,7 +23,7 @@ export default {
     return {
       tabList: [
         {id: 1, label: '机动路线规划'},
-        {id: 2, label: '临时部署驻地分析'},
+        // {id: 2, label: '临时部署驻地分析'},
       ],
       activeIndex: 1,
     }

src/views/residentAnalysis/index.vue

@@ -74,19 +74,28 @@
       </div>
       <div class="center" id="cesiumContainer"></div>
 
-      <div class="right flex column j-s">
+      <div
+        class="right flex column"
+        v-loading="showLoading"
+        element-loading-text="数据加载中"
+      >
         <!-- 路点 -->
+        <div class="table-title" v-if="roadPointList.length > 0">
+          道路附属点
+        </div>
         <vxe-table
           class="item"
           :data="roadPointList"
           v-if="roadPointList.length > 0"
         >
           <vxe-column type="seq" width="70"></vxe-column>
-          <vxe-column field="name" title="Name"></vxe-column>
-          <vxe-column field="sex" title="Sex"></vxe-column>
-          <vxe-column field="age" title="Age"></vxe-column>
+          <vxe-column field="编码" title="编码"></vxe-column>
+          <vxe-column field="名称" title="名称"></vxe-column>
+          <vxe-column field="A" title="A"></vxe-column>
         </vxe-table>
+
         <!-- 路线 -->
+        <div class="table-title" v-if="roadLineList.length > 0">道路附属线</div>
         <vxe-table
           class="item"
           :data="roadLineList"
@@ -94,30 +103,38 @@
         >
           <vxe-column type="seq" width="70"></vxe-column>
           <vxe-column field="编码" title="编码"></vxe-column>
-          <vxe-column field="A" title="名称"></vxe-column>
-          <vxe-column field="图形特" title="图形特"></vxe-column>
+          <vxe-column field="名称" title="名称"></vxe-column>
+          <vxe-column field="A" title="A"></vxe-column>
         </vxe-table>
+
         <!-- 水点 -->
+        <div class="table-title" v-if="waterPointList.length > 0">
+          水系附属点
+        </div>
         <vxe-table
           class="item"
           :data="waterPointList"
           v-if="waterPointList.length > 0"
         >
           <vxe-column type="seq" width="70"></vxe-column>
-          <vxe-column field="name" title="Name"></vxe-column>
-          <vxe-column field="sex" title="Sex"></vxe-column>
-          <vxe-column field="age" title="Age"></vxe-column>
+          <vxe-column field="编码" title="编码"></vxe-column>
+          <vxe-column field="名称" title="名称"></vxe-column>
+          <vxe-column field="A" title="A"></vxe-column>
         </vxe-table>
+
         <!-- 水线 -->
+        <div class="table-title" v-if="waterLineList.length > 0">
+          水系附属线
+        </div>
         <vxe-table
           class="item"
           :data="waterLineList"
           v-if="waterLineList.length > 0"
         >
           <vxe-column type="seq" width="70"></vxe-column>
-          <vxe-column field="name" title="Name"></vxe-column>
-          <vxe-column field="sex" title="Sex"></vxe-column>
-          <vxe-column field="age" title="Age"></vxe-column>
+          <vxe-column field="编码" title="编码"></vxe-column>
+          <vxe-column field="名称" title="名称"></vxe-column>
+          <vxe-column field="A" title="A"></vxe-column>
         </vxe-table>
       </div>
     </div>
@@ -133,6 +150,7 @@ export default {
   name: '',
   data() {
     return {
+      showLoading: false,
       imagesList: [{id: 1, src: require('@/assets/image/crop.png')}],
       roadPointList: [],
       roadLineList: [],
@@ -682,6 +700,8 @@ export default {
       // 清除之前的矩形
       this.clearRectangles()
 
+      console.log('this.rectangles===>', this.rectangles)
+
       // 获取分割参数
       const xSplit = parseInt(this.form.xLength) || 3
       const ySplit = parseInt(this.form.yLength) || 3
@@ -813,6 +833,7 @@ export default {
         console.error('坡度分析失败', e)
         this.$message.error('坡度分析失败，请检查地形数据')
       } finally {
+        rectInfoMap.clear()
         this.drawLabelAndRec()
       }
     },
@@ -1014,7 +1035,11 @@ export default {
 
     // 选择矩形
     selectRectangle(rect) {
-      console.log('rect===>', rect)
+      this.showLoading = true
+      setTimeout(() => {
+        this.showLoading = false
+      }, 500)
+
       if (this.selectedRect?.id === rect.id) return
       this.selectedRect = {
         id: rect.id,
@@ -1092,17 +1117,17 @@ export default {
     // 清除所有矩形
     clearRectangles() {
       if (this.rectangles.length > 0) {
-        this.rectangles.forEach((rect) => {
-          window.graphicLayer.removeGraphic(rect)
-        })
+        this.rectangles.forEach((item) => item.remove())
+        window.graphicLayer.removeGraphic(this.rectangles)
+        this.rectangles = []
+        this.rectCount = 0
+        this.validBlocks = []
       }
       if (this.labels.length > 0) {
-        this.labels.forEach((label) => {
-          window.graphicLayer.removeGraphic(label)
-        })
+        this.labels.forEach((item) => item.remove())
+        window.graphicLayer.removeGraphic(this.labels)
+        this.labels = []
       }
-      this.rectangles = []
-      this.labels = []
     },
   },
 }
@@ -1192,11 +1217,20 @@ export default {
     height: 100%;
     background-color: #d4e5db;
     padding-left: 20px;
+    padding-right: 10px;
     overflow: auto;
 
     .item {
       margin-bottom: 10px;
     }
+
+    .table-title {
+      font-size: 16px;
+      font-family: 'Pingfang';
+      font-weight: bold;
+      letter-spacing: 0.1em;
+      margin-bottom: 10px;
+    }
   }
 }
 </style>

vue.config.js

@@ -1,30 +1,52 @@
 const {defineConfig} = require('@vue/cli-service')
 const postcssPxToViewport = require('postcss-px-to-viewport')
-const path = require('path') // 需要引入 path 模块
+const path = require('path')
 
 module.exports = defineConfig({
   publicPath: './',
-  transpileDependencies: false,
+  transpileDependencies: false, // 我们自己管，不让 CLI 插手
   lintOnSave: false,
-  devServer: {
-    client: {
-      overlay: false,
-    },
-  },
-  configureWebpack: (config) => {
-    //调试JS
+  devServer: {client: {overlay: false}},
+
+  configureWebpack(config) {
+    // 调试
     config.devtool = 'source-map'
-    config.resolve = {
-      alias: {
-        '@': path.resolve(__dirname, 'src'),
+    // 别名
+    config.resolve.alias['@'] = path.resolve(__dirname, 'src')
+
+    /* 1. 追加 ini 规则 */
+    config.module.rules.push({
+      test: /\.ini$/,
+      use: 'raw-loader',
+    })
+
+    /* 2. 追加 ES5 规则（只转 src，不转 node_modules） */
+    config.module.rules.push({
+      test: /\.js$/,
+      include: path.resolve(__dirname, 'src'),
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            [
+              '@babel/preset-env',
+              {
+                targets: {ie: '11'}, // 强制 ES5
+                corejs: 3,
+                useBuiltIns: 'entry',
+              },
+            ],
+          ],
+        },
       },
-    }
+    })
   },
+
   css: {
+    /* 你的 px-to-viewport 配置不动 */
     loaderOptions: {
       postcss: {
         postcssOptions: {
-          // 增加这一层 postcssOptions
           plugins: [
             postcssPxToViewport({
               unitToConvert: 'px',
@@ -37,7 +59,7 @@ module.exports = defineConfig({
               minPixelValue: 1,
               mediaQuery: false,
               replace: true,
-              exclude: /(\/|\\)(node_modules)(\/|\\)/,
+              exclude: /node_modules/,
               include: [],
               landscape: false,
             }),