add 首页

src/views/home.vue

@@ -6,6 +6,7 @@
       <img @click="drawViaPoint" src="@/assets/image/add.png" />
       <img @click="drawAvoidPoint" src="@/assets/image/avoidP.png" />
       <img @click="drawAvoidArea" src="@/assets/image/updown.png" />
+      <div @click="clear" class="sure">清除</div>
       <div @click="calculateShortestPath" class="sure">确定</div>
       <!-- <div class="control-panel">
         <button @click="drawStartPoint">绘制起点</button>
@@ -23,98 +24,144 @@
           <div class="title">参数</div>
           <el-form
             @submit.native.prevent="calculateShortestPath"
-            label-width="80px"
+            label-width="100px"
             label-position="left"
-            size="small"
+            size="mini"
+            :model="form"
           >
             <el-form-item label="起点">
-              <el-input v-model="form.startPoint"></el-input>
+              <el-input v-model="form.startPoint" @blur="pointsChange('startPoint')"></el-input>
             </el-form-item>
             <el-form-item label="终点">
-              <el-input v-model="form.endPoint"></el-input>
+              <el-input v-model="form.endPoint" @blur="pointsChange('endPoint')"></el-input>
             </el-form-item>
             <el-form-item label="途径点">
-              <el-input v-model="form.viaPoints" placeholder=""></el-input>
+              <div v-for="(item, index) in form.viaPoints" :key="index">
+                <el-input v-model="item.points" placeholder="" @blur="pointsChange('viaPoints', item)"></el-input>
+              </div>
             </el-form-item>
             <el-form-item label="避让点">
-              <el-input v-model="form.avoidPoints" placeholder=""></el-input>
+              <div v-for="(item, index) in form.avoidPoints" :key="index">
+                <el-input v-model="item.points" placeholder="" @blur="pointsChange('avoidPoints', item)"></el-input>
+              </div>
             </el-form-item>
             <el-form-item label="避让区域">
-              <el-input
-                type="textarea"
-                v-model="form.avoidAreas"
-                :rows="4"
-                placeholder=""
-              ></el-input>
+              <div v-for="(item, index) in form.avoidAreas" :key="index">
+                <el-input
+                  type="textarea"
+                  v-model="item.points"
+                  :rows="4"
+                  placeholder=""
+                  @blur="pointsChange('avoidAreas', item)"
+                ></el-input>
+              </div>
             </el-form-item>
             <!-- <el-form-item>
               <el-button type="primary" @click="calculateShortestPath">计算最短路径</el-button>
               <el-button @click="clear">清除所有</el-button>
             </el-form-item> -->
           </el-form>
-          <div class="importJson">导入json文件</div>
+          <input type="file" ref="fileInput" @change="handleFileUpload" style="display: none;" />
+          <div class="importJson" @click="triggerFileUpload">导入json文件</div>
         </div>
         <div class="control-panel">
           <div class="title">机动属性</div>
           <el-form
             @submit.native.prevent="calculateShortestPath"
-            label-width="80px"
+            label-width="100px"
             label-position="left"
-            size="small"
-          >
-            <el-form-item label="长">
-              <el-input v-model="form.startPoint"></el-input>
+            size="mini"
+          > 
+            <el-form-item label="宽度">
+              <el-input v-model="inputform.width"></el-input>
             </el-form-item>
-            <el-form-item label="宽">
-              <el-input v-model="form.endPoint"></el-input>
+            <el-form-item label="载重（吨）">
+              <el-input v-model="inputform.load" placeholder=""></el-input>
             </el-form-item>
-            <el-form-item label="高">
-              <el-input v-model="form.viaPoints" placeholder=""></el-input>
+            <el-form-item label="最小转弯半径">
+              <el-input v-model="inputform.minTurnRadius" placeholder=""></el-input>
             </el-form-item>
-            <el-form-item label="载重">
-              <el-input v-model="form.avoidPoints" placeholder=""></el-input>
-            </el-form-item>
-            <el-form-item label="避让区域">
-              <el-input
-                type="textarea"
-                v-model="form.avoidAreas"
-                :rows="4"
-                placeholder=""
-              ></el-input>
-            </el-form-item>
-            <!-- <el-form-item>
-              <el-button type="primary" @click="calculateShortestPath">计算最短路径</el-button>
-              <el-button @click="clear">清除所有</el-button>
-            </el-form-item> -->
           </el-form>
-          <div class="importJson">导入json文件</div>
+          <div class="importJson" @click="openDialog">数据选择</div>
         </div>
       </div>
-      <!-- <div id="map"></div> -->
-      <div id="mapbox"></div>
-      <div class="main-container">
-        <div class="control-panel"></div>
+      <div id="map"></div>
+      <!-- <div id="mapbox"></div> -->
+      <div class="main-container" style="width: 452px;">
+        <div class="control-panel" style="width: 452px;">
+        <div style="font-size: 14px;margin-bottom: 10px;">
+            详细路线：<br/>
+            起点（{{form.startPoint}}），
+            途径点（{{form.viaPoints.length > 0 && form.viaPoints[0].points ? form.viaPoints.map(item => item.points).join(";") : ''}}),
+            避让点（{{form.avoidPoints.length > 0 && form.avoidPoints[0].points ? form.avoidPoints.map(item => item.points).join(";") : ''}}),
+            终点（{{form.endPoint}}）,
+            避让区域（{{form.avoidAreas.length > 0 && form.avoidAreas[0].points ? form.avoidAreas.map(item => item.points).join(";") : ''}})。<br/>
+            装备参数:最大车辆宽度{{inputform.width || 0}},最小转弯半径{{inputform.minTurnRadius || 0}}，最大车辆载重{{inputform.load || 0}}吨
+          </div>
+          <vxe-table
+            ref="xTable"
+            :data="infoList"
+          >
+            <vxe-column field="编码" title="编码" width="65px"></vxe-column>
+            <vxe-column field="名称" title="名称" width="80px"></vxe-column>
+            <vxe-column field="宽度" title="路宽"></vxe-column>
+            <vxe-column field="曲率半" title="曲率"></vxe-column>
+            <vxe-column field="载重吨" title="载重"></vxe-column>
+            <vxe-column field="水深" title="水深"></vxe-column>
+            <vxe-column field="净空高" title="净空高" width="65px"></vxe-column>
+          </vxe-table>
+        </div>
       </div>
+      <el-dialog :visible.sync="dialogVisible" title="机动属性" width="600px">
+        <vxe-table
+          height="300px"
+          :data="tableData"
+          :row-config="{ isCurrent: true, isHover: true }"
+          :checkbox-config="{ checkField: 'checked', highlight: true }"
+          @checkbox-change="handleSelectionChange"
+        >
+          <vxe-column type="checkbox" width="50"></vxe-column>
+          <vxe-column field="width" title="宽度"></vxe-column>
+          <vxe-column field="load" title="载重（吨）"></vxe-column>
+          <vxe-column field="minTurnRadius" title="最小转弯半径"></vxe-column>
+        </vxe-table>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="confirmSelection">确定</el-button>
+        </div>
+      </el-dialog>
     </div>
   </div>
 </template>
 
 <script>
-import Header from './header/index.vue'
+import router from '@/router';
+
 export default {
-  name: '',
-  components: {
-    Header,
-  },
   data() {
     return {
-      form: {},
+      dialogVisible: false,
+      tableData: [],
+      multipleSelection: [],
+      inputform: {
+        width: '',
+        load: '',
+        minTurnRadius: ''
+      },
+      form: {
+        startPoint: '',
+        endPoint: '',
+        viaPoints: [{ points: '', time: '' }],
+        avoidPoints: [{ points: '', time: '' }],
+        avoidAreas: [{ points: '', time: '' }],
+      },
       viewer: null,
       graphicLayer: null,
       polygonZAM: null,
       pointQD: null,
       pointZD: null,
       shortestPathLayer: null,
+      infoList: [],
       roadNetworkLayer: null,
       roadNetworkGeoJSON: null,
       mapOptions: null,
@@ -125,12 +172,26 @@ export default {
     }
   },
   async mounted() {
+    console.log('go')
+    this.viewer = null
     await this.getMapOption()
-    // this.initMap()
+    this.$nextTick(async () => {
+      await this.initMap()
+    })
+  },
+  beforeDestroy() {
+    this.destroyMap()
   },
   methods: {
+    destroyMap() {
+      // if (this.viewer) {
+      //   this.viewer.destroy();
+      //   this.viewer = null;
+      // }
+      this.clear()
+    },
     async getMapOption() {
-      await fetch('./config/map.json')
+      await fetch('/config/map.json')
         .then((response) => {
           return response.json()
         })
@@ -140,7 +201,18 @@ export default {
         .catch((error) => {})
     },
     async initMap() {
-      this.viewer = new window.mars3d.Map('map', this.mapOptions || {})
+      this.viewer = new window.mars3d.Map('map', {
+        ...this.mapOptions,
+        scene: {
+          center: {
+            lat: 27.729862392917948,
+            lng: 114.27980291774088,
+            alt: 3808,
+            heading: 5,
+            pitch: -35
+          }
+        },
+      } || {})
       this.graphicLayer = new window.mars3d.layer.GraphicLayer()
       this.viewer.addLayer(this.graphicLayer)
 
@@ -154,47 +226,50 @@ export default {
       })
     },
     clear() {
-      // 清除障碍面
-      if (this.polygonZAM) {
-        this.polygonZAM.remove()
-        this.polygonZAM = null
-      }
-
       // 清除起点
       if (this.pointQD) {
         this.pointQD.remove()
         this.pointQD = null
+        this.form.startPoint = ''
       }
 
       // 清除终点
       if (this.pointZD) {
         this.pointZD.remove()
         this.pointZD = null
+        this.form.endPoint = ''
+      }
+      if (this.viaPoints.length > 0) {
+        // 清除途径点
+        this.viaPoints.forEach((point) => {
+          point.remove()
+        })
+        this.viaPoints = []
+        this.form.viaPoints = [{ points: '', time: '' }]
       }
 
-      // 清除途径点
-      this.viaPoints.forEach((point) => {
-        point.remove()
-      })
-      this.viaPoints = []
+      if (this.avoidPoints.length > 0) {
+        // 清除避让点
+        this.avoidPoints.forEach((point) => {
+          point.remove()
+        })
+        this.avoidPoints = []
+        this.form.avoidPoints = [{ points: '', time: '' }]
+      }
 
-      // 清除避让点
-      this.avoidPoints.forEach((point) => {
-        point.remove()
-      })
-      this.avoidPoints = []
-
-      // 清除避让区域
-      this.avoidAreas.forEach((area) => {
-        area.remove()
-      })
-      this.avoidAreas = []
-
-      // 清除最短路径图层
-      this.shortestPathLayer.clear()
-
-      // 清除路网数据图层
-      // this.graphicLayer.clear();
+      if (this.avoidAreas.length > 0) {
+        // 清除避让区域
+        this.avoidAreas.forEach((area) => {
+          area.remove()
+        })
+        this.avoidAreas = []
+        this.form.avoidAreas = [{ points: '', time: '' }]
+      }
+      if (this.shortestPathLayer) {
+        // 清除最短路径图层
+        this.shortestPathLayer.clear()
+        this.infoList = []
+      }
     },
     async loadShapefile() {
       try {
@@ -203,7 +278,7 @@ export default {
         // const shpJson = await shp(shpBuffer);   // {features: [...]}
 
         // 1. 读取本地 jeojson
-        const shpBuffer = await fetch('./config/map/data/dao.geojson')
+        const shpBuffer = await fetch('/config/dao.geojson')
           .then((response) => {
             return response.json()
           })
@@ -233,27 +308,247 @@ export default {
         console.error('加载 Shapefile 数据失败:', error)
       }
     },
-    async drawPolygon() {
-      if (this.polygonZAM) {
-        this.polygonZAM.remove()
-        this.polygonZAM = null
+    // 弹框
+    async openDialog() {
+      await fetch('/data/minTurnRadius.json')
+      .then((response) => {
+        return response.json()
+      })
+      .then((data) => {
+        this.tableData = data
+      })
+      .catch((error) => {})
+      this.dialogVisible = true;
+    },
+    handleSelectionChange({ records }) {
+      this.multipleSelection = records;
+    },
+    confirmSelection() {
+      if (this.multipleSelection.length === 0) {
+        this.$message.warning('请至少选择一行数据');
+        return;
       }
-      this.polygonZAM = await this.graphicLayer.startDraw({
-        type: 'polygon',
+      const maxValues = this.multipleSelection.reduce((acc, item) => {
+        acc.width = Math.max(acc.width, item.width);
+        acc.load = Math.max(acc.load, item.load);
+        acc.minTurnRadius = Math.max(acc.minTurnRadius, item.minTurnRadius);
+        return acc;
+      }, { width: 0, load: 0, minTurnRadius: 0 });
+      this.inputform.width = maxValues.width;
+      this.inputform.load = maxValues.load;
+      this.inputform.minTurnRadius = maxValues.minTurnRadius;
+      this.dialogVisible = false;
+    },
+    // 导入json文件
+    triggerFileUpload() {
+      this.$refs.fileInput.click();
+    },
+    handleFileUpload(event) {
+      const file = event.target.files[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          try {
+            const uploadedJson = JSON.parse(e.target.result);
+            this.importJson(uploadedJson);
+          } catch (error) {
+            console.error('解析 JSON 文件失败:', error);
+            this.$message.error('解析 JSON 文件失败');
+          }
+        };
+        reader.readAsText(file);
+      }
+    },
+    async importJson(uploadedJson) {
+      if (!uploadedJson) {
+        this.$message.warning('请先选择一个 JSON 文件');
+        return;
+      };
+      // 清除现有数据
+      this.clear();
+      // 加载起点
+      if (uploadedJson.startPoint) {
+        this.form.startPoint = uploadedJson.startPoint
+        this.addPointToMap('startPoint', this.form.startPoint);
+      }
+
+      // 加载终点
+      if (uploadedJson.endPoint) {
+        this.form.endPoint = uploadedJson.endPoint
+        this.addPointToMap('endPoint', this.form.endPoint);
+      }
+
+      // 加载途径点
+      if (uploadedJson.viaPoints) {
+        this.form.viaPoints = uploadedJson.viaPoints
+        uploadedJson.viaPoints.forEach(viaPoint => {
+          this.addPointToMap('viaPoints', viaPoint, viaPoint.time);
+        });
+      }
+
+      // 加载避让点
+      if (uploadedJson.avoidPoints) {
+        this.form.avoidPoints = uploadedJson.avoidPoints
+        uploadedJson.avoidPoints.forEach(avoidPoint => {
+          this.addPointToMap('avoidPoints', avoidPoint, avoidPoint.time);
+        });
+      }
+
+      // 加载避让区域
+      if (uploadedJson.avoidAreas) {
+        this.form.avoidAreas = uploadedJson.avoidAreas
+        uploadedJson.avoidAreas.forEach(avoidArea => {
+          const time = Date.now();
+          this.addPolygonToMap('avoidAreas', avoidArea, avoidArea.time);
+        });
+      }
+
+    },
+    addPointToMap(type, point, time) {
+      const coords = time ? point.points.split(',').map(Number) : point.split(',').map(Number);
+      const graphic = new window.mars3d.graphic.PointEntity({
+        position: new window.mars3d.LngLatPoint(coords[0], coords[1]),
         style: {
-          color: '#00ffff',
+          pixelSize: 10,
+          color: type === 'startPoint' ? 'red' : type === 'endPoint' ? 'red' : type === 'viaPoints' ? 'blue' : 'orange',
+          label: {
+            text: type === 'startPoint' ? '起点' : type === 'endPoint' ? '终点' : type === 'viaPoints' ? '途径点' : '避让点',
+            font_size: 20,
+            color: '#ffffff',
+            outline: true,
+            outlineColor: '#000000',
+            pixelOffsetY: -20,
+          },
+          time: time
+        },
+      });
+      this.graphicLayer.addGraphic(graphic);
+
+      if (type === 'startPoint') {
+        this.pointQD = graphic;
+      } else if (type === 'endPoint') {
+        this.pointZD = graphic;
+      } else if (type === 'viaPoints') {
+        this.viaPoints.push(graphic);
+      } else if (type === 'avoidPoints') {
+        this.avoidPoints.push(graphic);
+      }
+    },
+    addPolygonToMap(type, area, time) {
+      const coords = JSON.parse(area.points);
+      const graphic = new window.mars3d.graphic.PolygonEntity({
+        positions: coords.map(coord => new window.mars3d.LngLatPoint(coord[0], coord[1])),
+        style: {
+          color: 'red',
           opacity: 0.4,
           clampToGround: true,
           outline: true,
           outlineWidth: 1,
           outlineColor: '#ffffff',
+          time: time
         },
-      })
+      });
+      this.graphicLayer.addGraphic(graphic);
+
+      if (type === 'avoidAreas') {
+        this.avoidAreas.push(graphic);
+      }
+    },
+    // 输入框失去焦点 反向编辑点
+    pointsChange(type, row) {
+      if (type === 'startPoint') {
+        if ((!this.form.startPoint || this.form.startPoint == '' || this.form.startPoint == null || this.form.startPoint == undefined) && this.pointQD) {
+          this.pointQD.remove()
+          this.pointQD = null;
+          return
+        }
+        this.updatePointPosition(this.pointQD, this.form.startPoint);
+      } else if (type === 'endPoint') {
+        if ((!this.form.endPoint || this.form.endPoint == '' || this.form.endPoint == null || this.form.endPoint == undefined) && this.pointZD) {
+          this.pointZD.remove()
+          this.pointZD = null;
+          return
+        }
+        this.updatePointPosition(this.pointZD, this.form.endPoint);
+      } else if (type === 'viaPoints') {
+          if (!row.points) {
+          const graphic = this.viaPoints.find(viaPoint => viaPoint.style.time === row.time);
+          if (this.form.viaPoints.length === 1 && this.form.viaPoints[0].points === '') {
+            // 如果只剩下一个空项，不删除图形，清空输入框值
+            this.form.viaPoints[0].points = '';
+            graphic?.remove();
+            this.viaPoints = this.viaPoints.filter(viaPoint => viaPoint.style.time !== row.time);
+          } else {
+            this.form.viaPoints = this.form.viaPoints.filter(viaPoint => viaPoint.time !== row.time);
+          }
+          graphic?.remove();
+          this.viaPoints = this.viaPoints.filter(viaPoint => viaPoint.style.time !== row.time);
+        } else {
+          const graphic = this.viaPoints.find(viaPoint => viaPoint.style.time === row.time);
+          this.updatePointPosition(graphic, row.points);
+        }
+      } else if (type === 'avoidPoints') {
+        if (!row.points) {
+          const graphic = this.avoidPoints.find(avoidPoint => avoidPoint.style.time === row.time);
+          if (this.form.avoidPoints.length === 1 && this.form.avoidPoints[0].points === '') {
+            // 如果只剩下一个空项，不删除图形，清空输入框值
+            this.form.avoidPoints[0].points = '';
+          } else {
+            this.form.avoidPoints = this.form.avoidPoints.filter(avoidPoint => avoidPoint.time !== row.time);
+          }
+          graphic?.remove();
+          this.avoidPoints = this.avoidPoints.filter(avoidPoint => avoidPoint.style.time !== row.time);
+        } else {
+          const graphic = this.avoidPoints.find(avoidPoint => avoidPoint.style.time === row.time);
+          this.updatePointPosition(graphic, row.points);
+        }
+      } else if (type === 'avoidAreas') {
+        if (!row.points) {
+          const graphic = this.avoidAreas.find(avoidArea => avoidArea.style.time === row.time);
+          if (this.form.avoidAreas.length === 1 && this.form.avoidAreas[0].points === '') {
+            // 如果只剩下一个空项，不删除图形，清空输入框值
+            this.form.avoidAreas[0].points = '';
+          } else {
+            this.form.avoidAreas = this.form.avoidAreas.filter(avoidArea => avoidArea.time !== row.time);
+          }
+          graphic?.remove();
+          this.avoidAreas = this.avoidAreas.filter(avoidArea => avoidArea.style.time !== row.time);
+        } else {
+          const graphic = this.avoidAreas.find(avoidArea => avoidArea.style.time === row.time);
+          this.updatePolygonPosition(graphic, row.points);
+        }
+      }
+    },
+    handleEmptyArray(type) {
+      if (type === 'viaPoints' && this.form.viaPoints.length === 1 && this.form.viaPoints[0].points === '') {
+        this.form.viaPoints = [];
+      } else if (type === 'avoidPoints' && this.form.avoidPoints.length === 1 && this.form.avoidPoints[0].points === '') {
+        this.form.avoidPoints = [];
+      } else if (type === 'avoidAreas' && this.form.avoidAreas.length === 1 && this.form.avoidAreas[0].points === '') {
+        this.form.avoidAreas = [];
+      }
+    },
+    updatePointPosition(graphic, pointsStr) {
+      if (!graphic) return;
+      const coords = pointsStr.split(',').map(Number);
+      if (coords.length === 2) {
+        graphic.position = new window.mars3d.LngLatPoint(coords[0], coords[1]);
+      }
+    },
+    updatePolygonPosition(graphic, pointsStr) {
+      if (!graphic) return;
+      try {
+        const coords = JSON.parse(pointsStr);
+        graphic.positions = coords.map(coord => new window.mars3d.LngLatPoint(coord[0], coord[1]));
+      } catch (error) {
+        graphic.remove();
+      }
     },
     drawStartPoint() {
       if (this.pointQD) {
         this.pointQD.remove()
         this.pointQD = null
+        this.form.startPoint = ''
       }
       this.graphicLayer.startDraw({
         type: 'point',
@@ -271,7 +566,7 @@ export default {
         },
         success: (graphic) => {
           this.pointQD = graphic
-          this.graphicLayer.stopDraw()
+          this.form.startPoint = [graphic.toGeoJSON().geometry.coordinates[0],graphic.toGeoJSON().geometry.coordinates[1]].join(",");
         },
       })
     },
@@ -279,6 +574,7 @@ export default {
       if (this.pointZD) {
         this.pointZD.remove()
         this.pointZD = null
+        this.form.endPoint = ''
       }
       this.graphicLayer.startDraw({
         type: 'point',
@@ -296,12 +592,13 @@ export default {
         },
         success: (graphic) => {
           this.pointZD = graphic
-          this.graphicLayer.stopDraw()
+          this.form.endPoint = [graphic.toGeoJSON().geometry.coordinates[0],graphic.toGeoJSON().geometry.coordinates[1]].join(",");
         },
       })
     },
     // 途径点
     drawViaPoint() {
+      const time = Date.now();
       this.graphicLayer.startDraw({
         type: 'point',
         style: {
@@ -315,15 +612,23 @@ export default {
             outlineColor: '#000000',
             pixelOffsetY: -20,
           },
+          time: time
         },
         success: (graphic) => {
           this.viaPoints.push(graphic)
-          this.graphicLayer.stopDraw()
+          const points = [graphic.toGeoJSON().geometry.coordinates[0],graphic.toGeoJSON().geometry.coordinates[1]].join(",")
+          if(this.form.viaPoints.length == 1 && this.form.viaPoints[0].points == '' && !this.form.viaPoints[0].points){
+            this.form.viaPoints[0].points = points
+            this.form.viaPoints[0].time = time
+          } else {
+            this.form.viaPoints.push({points,time})
+          }
         },
       })
     },
     // 避让点
     drawAvoidPoint() {
+      const time = Date.now();
       this.graphicLayer.startDraw({
         type: 'point',
         style: {
@@ -337,15 +642,23 @@ export default {
             outlineColor: '#000000',
             pixelOffsetY: -20,
           },
+          time: time
         },
         success: (graphic) => {
           this.avoidPoints.push(graphic)
-          this.graphicLayer.stopDraw()
+          const points = [graphic.toGeoJSON().geometry.coordinates[0],graphic.toGeoJSON().geometry.coordinates[1]].join(",")
+          if(this.form.avoidPoints.length == 1 && this.form.avoidPoints[0].points == '' && !this.form.avoidPoints[0].points){
+            this.form.avoidPoints[0].points = points
+            this.form.avoidPoints[0].time = time
+          } else {
+            this.form.avoidPoints.push({points, time})
+          }
         },
       })
     },
     // 避让区域
     drawAvoidArea() {
+      const time = Date.now();
       this.graphicLayer.startDraw({
         type: 'polygon',
         drawEndEventType: window.mars3d.EventType.dblClick,
@@ -356,10 +669,18 @@ export default {
           outline: true,
           outlineWidth: 1,
           outlineColor: '#ffffff',
+          time: time
         },
         success: (graphic) => {
           this.avoidAreas.push(graphic)
-          this.graphicLayer.stopDraw()
+          const avoidAreasGeoJSON = graphic.toGeoJSON()
+          const points = JSON.stringify(avoidAreasGeoJSON.geometry.coordinates[0])
+          if(this.form.avoidAreas.length == 1 && this.form.avoidAreas[0].points == '' && !this.form.avoidAreas[0].points){
+            this.form.avoidAreas[0].points = points
+            this.form.avoidAreas[0].time = time
+          } else {
+            this.form.avoidAreas.push({points, time})
+          }
         },
       })
     },
@@ -395,7 +716,6 @@ export default {
         graph[endNode] = graph[endNode] || {}
         graph[endNode][startNode] = distance
       })
-
       return {graph, nodeCoords}
     },
     // 2. 匹配最近路网节点（经纬度坐标）
@@ -430,6 +750,7 @@ export default {
           ? [startCoord, viaPoints[0].geometry.coordinates, endCoord]
           : [startCoord, endCoord]
       const fullPath = []
+      const infoList = []
 
       for (let i = 0; i < points.length - 1; i++) {
         const segmentStart = points[i]
@@ -499,11 +820,12 @@ export default {
           )
           if (segment) {
             fullPath.push(...segment.geometry.coordinates[0])
+            infoList.push(segment)
           }
         }
       }
 
-      return fullPath
+      return {fullPath, infoList}
     },
     async calculateShortestPath() {
       if (!this.pointQD || !this.pointZD || !this.roadNetworkGeoJSON) {
@@ -511,6 +833,7 @@ export default {
         return
       }
       this.shortestPathLayer.clear()
+      this.infoList = []
       const startPoint = turf.point(
         this.pointQD.toGeoJSON().geometry.coordinates
       ).geometry.coordinates // 起点
@@ -552,7 +875,7 @@ export default {
     drawPath(path) {
       const positions = path
       const polyline = new window.mars3d.graphic.PolylinePrimitive({
-        positions: positions,
+        positions: positions.fullPath,
         style: {
           clampToGround: true,
           color: '#55ff33',
@@ -560,6 +883,7 @@ export default {
         },
       })
       this.shortestPathLayer.addGraphic(polyline)
+      this.infoList = path.infoList.map(item => item.properties)
     },
   },
 }
@@ -579,6 +903,7 @@ export default {
   height: 24px;
   width: 24px;
   margin-right: 12px;
+  cursor: pointer;
 }
 .sure {
   display: flex;
@@ -594,8 +919,11 @@ export default {
   color: #ffffff;
   font-weight: 400;
   font-size: 14px;
-  position: absolute;
-  right: 30px;
+  margin-right: 10px;
+  cursor: pointer;
+}
+.dialog-body {
+  max-height: 500px;
 }
 .home {
   display: flex;
@@ -603,23 +931,35 @@ export default {
   background: #abc6bc;
 }
 .main-container {
-  width: 100%;
+  width: 340px;
   height: 100%;
+  background: #d4e5db;
+  overflow: hidden;
+  overflow-y: auto;
+  scrollbar-width: none; /* 隐藏滚动条（Firefox） */
+}
+
+.main-container::-webkit-scrollbar {
+  display: none; /* 隐藏滚动条（Chrome, Safari, Edge） */
 }
 
 .control-panel {
   width: 340px;
   padding: 20px 26px;
-  margin-left: 4px;
   background-size: cover;
-  background: #d4e5db;
+  box-sizing: border-box;
 }
 
 .control-panel .title {
+  /* text-align: center; */
   margin-bottom: 10px;
   color: #1c1c1c;
 }
 .importJson {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
   background: #2f705f;
   border-radius: 4px;
   color: #fff;
@@ -627,7 +967,8 @@ export default {
   height: 24px;
   font-size: 14px;
   text-align: center;
-  margin-left: 40px;
+  margin-left: 20px;
+  cursor: pointer;
 }
 
 .form-group {
@@ -651,8 +992,7 @@ export default {
 #mapbox,
 .el-main {
   flex: 1;
-  width: 100%;
+  width: calc(100vw- 792px);
   height: 100%;
-  border: 1px solid #333;
 }
-</style>
+</style>