fix：病害筛查弹窗修改逻辑，道路线道路段修改，地图更换

src/api/xj/section.js

@@ -44,3 +44,12 @@ export function updateSection(query) {
     });
   }
 
+  // 查询管理站下拉数据
+  export function getDeptList(params) {
+    return request({
+      url: "/system/dept/listDropDown",
+      method: "get",
+      params,
+    });
+  }
+

src/components/map/fssm-map.vue

@@ -11,9 +11,14 @@
   <div class="map-container">
     <div ref="container" :id="`map-${mapId}`"></div>
     <div ref="mapController" :style="controlStyle" class="control-container">
+      <!-- 绘制线段 -->
+      <div class="draw-line" v-if="showLine">
+        <i class="el-icon-edit" @click="drawLineMap()"></i>
+        <i class="el-icon-delete" @click="deleteLinedraw()"></i>
+      </div>
       <!-- 绘制图形 -->
       <div class="draw-map" v-if="showDraw">
-        <i class="el-icon-edit" @click="drawMap()"></i>
+        <i class="el-icon-edit-outline" @click="drawMap()"></i>
         <i class="el-icon-delete" @click="deletedraw()"></i>
       </div>
       <!-- 切换底图控件 -->
@@ -55,7 +60,7 @@ import {
   defaults as defaultInteractions,
 } from "ol/interaction";
 import * as styleExports from "ol/style";
-import { Polygon } from "ol/geom";
+import { Polygon, LineString } from "ol/geom";
 
 export default {
   name: "FssmMap",
@@ -72,11 +77,16 @@ export default {
       type: String,
       default: "10",
     },
-    // 是否显示绘图功能
+    // 是否显示绘制多边形功能
     showDraw: {
       type: Boolean,
       default: false,
     },
+    // 是否显示绘制线段功能
+    showLine: {
+      type: Boolean,
+      default: false,
+    },
     // 是否显示地图放大缩小
     showZoom: {
       type: Boolean,
@@ -106,6 +116,11 @@ export default {
       type: Array,
       default: () => [],
     },
+    // 接收传过来的绘制线段数组
+    editCoordinatesLine:{
+      type: Array,
+      default: () => [],
+    },
     // 接收传过来的底图类型
     baseMap: {
       type: String,
@@ -120,14 +135,26 @@ export default {
       mapType: "cva_c",
       // 地图图层
       mapLayers: [],
-      // 绘制图层
+      // 绘制多边形图层
       draw: null,
+      // 绘制线段图层
+      drawLine: null,
+      // 绘制图层源
       source: new VectorSource(),
-      // 绘制图形保存的点位
+      // 绘制线段图层源
-      drawMarkers: [],
+      sourceLine: new VectorSource(),
       // 当前地图层级
       sendZoom: "",
+      // 当前选中得图层
       selectSingClick: null,
+      // 绘制图形保存的点位
+      drawMarkers: [],
+      // 绘制多边形图层layer
+      drawLayer: null,
+      // 绘制线段保存的点位
+      drawLineMarkers: [],
+      // 绘制线段图层layer
+      drawLineLayer: null,
     };
   },
   watch: {
@@ -140,22 +167,87 @@ export default {
           });
           this.drawMarkers = aa;
           const map = this.instance.get("map");
+          // 增加snap吸附功能 ，还有就是snap交互可以在编辑和画features时候保持拓扑结构
+          const snap = new Snap({
+            source: this.source,
+          });
+          map.addInteraction(snap);
+          // 添加修改元素使得绘制的多边形可以编辑
+          const modify = new Modify({ source: this.source });
+          map.addInteraction(modify);
           // 增加绘图层
-          const drawLayer = new VectorLayer({
+          this.drawLayer = new VectorLayer({
             source: this.source,
             id: "draw",
+            style: new styleExports.Style({
+              stroke: new styleExports.Stroke({
+                color: "blue",
+                size: 2,
+              }),
+            }),
           });
           const feature = new Feature({
             geometry: new Polygon([aa]),
           });
-          drawLayer.getSource().addFeature(feature);
+          this.drawLayer.getSource().addFeature(feature);
-          map.addLayer(drawLayer);
+          map.addLayer(this.drawLayer);
+          modify.on("modifyend", (e) => {
+            e.features.forEach((feature) => {
+              this.drawMarkers = feature.getGeometry().getCoordinates().flat();
+              this.$emit("endEoordinate", this.drawMarkers);
+            });
+          });
         });
       },
       deep: true,
       immediate: true,
     },
 
+    /* 监听传过来的绘制线段坐标 */
+    editCoordinatesLine: {
+      handler(val) {
+        this.$nextTick(() => {
+          const aa = val.map((item) => {
+            return [item[0] * 1, item[1] * 1];
+          });
+          this.drawLineMarkers = aa;
+          const map = this.instance.get("map");
+          // 增加snap吸附功能 ，还有就是snap交互可以在编辑和画features时候保持拓扑结构
+          const snap = new Snap({
+            source: this.sourceLine,
+          });
+          map.addInteraction(snap);
+          // 添加修改元素使得绘制的多边形可以编辑
+          const modify = new Modify({ source: this.sourceLine });
+          map.addInteraction(modify);
+          // 增加绘图层
+          this.drawLineLayer = new VectorLayer({
+            source: this.sourceLine,
+            id: "drawLine",
+            style: new styleExports.Style({
+              stroke: new styleExports.Stroke({
+                color: "red",
+                size: 4,
+              }),
+            }),
+          });
+          const feature = new Feature({
+            geometry: new LineString(aa),
+          });
+          this.drawLineLayer.getSource().addFeature(feature);
+          map.addLayer(this.drawLineLayer);
+          modify.on("modifyend", (e) => {
+            e.features.forEach((feature) => {
+              this.drawLineMarkers = feature.getGeometry().getCoordinates();
+              this.$emit("endEoordinateLine", this.drawLineMarkers);
+            });
+          });
+        });
+      },
+      immediate: true,
+      deep: true,
+    },
+
     /* 监听传过来的底图类型 */
     baseMap: {
       handler(val) {
@@ -313,7 +405,7 @@ export default {
       this.instance.set("map", map);
       this.instance.set("overlay-list", []);
     },
-    
+
     /**
      * @description: 删除图层选择对象
      * @return {*}
@@ -323,18 +415,18 @@ export default {
     },
 
     /**
-     * @description: 绘制地图
+     * @description: 绘制多边形地图
      * @return {*}
      */
     drawMap() {
       if (this.drawMarkers.length < 1) {
         const map = this.instance.get("map");
         // 增加绘图层
-        const drawLayer = new VectorLayer({
+        this.drawLayer = new VectorLayer({
           source: this.source,
           id: "draw",
         });
-        map.addLayer(drawLayer);
+        map.addLayer(this.drawLayer);
         // 增加snap吸附功能 ，还有就是snap交互可以在编辑和画features时候保持拓扑结构
         const snap = new Snap({
           source: this.source,
@@ -367,6 +459,8 @@ export default {
           this.drawend(e);
         });
         modify.on("modifyend", (e) => {
+          console.log(11111111);
+          
           e.features.forEach((feature) => {
             this.drawMarkers = feature.getGeometry().getCoordinates().flat();
             this.$emit("endEoordinate", this.drawMarkers);
@@ -376,7 +470,7 @@ export default {
     },
 
     /**
-     * @description: 监听绘制完成的事件
+     * @description: 监听绘制多边形完成的事件
      * @param {*} event
      * @return {*}
      */
@@ -389,9 +483,10 @@ export default {
       // 在 drawend 结束后检查是否有交叉的线段
       if (coordinates.length > 3 && this.isSelfCrossing(coordinates)) {
         this.$modal.msgWarning("线段交叉，请重新绘制");
-        this.deletedraw();
+        this.$nextTick(() => {
-        this.drawMap();
+          this.deletedraw();
-        // map.removeInteraction(this.draw);
+          this.drawMap();
+        });
       } else {
         const map = this.instance.get("map");
         map.removeInteraction(this.draw);
@@ -399,6 +494,75 @@ export default {
       this.$emit("endEoordinate", this.drawMarkers);
     },
 
+    /**
+     * @description: 绘制线段地图
+     * @return {*}
+     */
+    drawLineMap() {
+      if (this.drawLineMarkers.length < 1) {
+        const map = this.instance.get("map");
+        // 增加绘图层
+        this.drawLineLayer = new VectorLayer({
+          source: this.sourceLine,
+          id: "drawLine",
+        });
+        map.addLayer(this.drawLineLayer);
+        // 增加snap吸附功能 ，还有就是snap交互可以在编辑和画features时候保持拓扑结构
+        const snap = new Snap({
+          source: this.sourceLine,
+        });
+        map.addInteraction(snap);
+        // 添加修改元素使得绘制的多边形可以编辑
+        const modify = new Modify({ source: this.sourceLine });
+        map.addInteraction(modify);
+        this.drawLine = new Draw({
+          source: this.sourceLine,
+          type: "LineString",
+          style: new styleExports.Style({
+            image: new styleExports.Circle({
+              radius: 5,
+              fill: new styleExports.Fill({
+                color: "blue",
+              }),
+            }),
+            stroke: new styleExports.Stroke({
+              color: "blue",
+              width: 2,
+            }),
+            fill: new styleExports.Fill({
+              color: "rgba(0, 0, 255, 0.2)",
+            }),
+          }),
+        });
+        map.addInteraction(this.drawLine);
+        this.drawLine.on("drawend", (e) => {
+          this.drawLineend(e);
+        });
+        modify.on("modifyend", (e) => {
+          e.features.forEach((feature) => {
+            this.drawLineMarkers = feature.getGeometry().getCoordinates();
+            this.$emit("endEoordinateLine", this.drawLineMarkers);
+          });
+        });
+      }
+    },
+
+    /**
+     * @description: 监听绘制线段完成的事件
+     * @param {*} e
+     * @return {*}
+     */
+    drawLineend(e) {
+      const feature = e.feature;
+      const geometry = feature.getGeometry();
+      // 获取区域点位
+      const coordinates = geometry.getCoordinates();
+      this.drawLineMarkers = coordinates;
+      this.$emit("endEoordinateLine", this.drawLineMarkers);
+      const map = this.instance.get("map");
+      map.removeInteraction(this.drawLine);
+    },
+
     /**
      * @description: 检测交叉点位方法
      * @param {*} coordinates
@@ -453,22 +617,35 @@ export default {
     },
 
     /**
-     * @description: 删除绘制功能
+     * @description: 删除绘制多边形功能
      * @return {*}
      */
     deletedraw() {
       const map = this.instance.get("map");
       map.removeInteraction(this.draw);
-      const [layer] = map.getAllLayers().filter((item) => {
+      this.drawLayer.getSource().clear();
-        return item.get("id") === "draw";
+      map.removeLayer(this.drawLayer);
-      });
-      map.removeLayer(layer);
       this.draw = null;
       this.source = new VectorSource();
       this.drawMarkers = [];
       this.$emit("endEoordinate", []);
     },
 
+    /**
+     * @description: 删除绘制线段功能
+     * @return {*}
+     */
+    deleteLinedraw(){
+      const map = this.instance.get("map");
+      map.removeInteraction(this.drawLine);
+      this.drawLineLayer.getSource().clear();
+      map.removeLayer(this.drawLineLayer);
+      this.drawLine = null;
+      this.source = new VectorSource();
+      this.drawLineMarkers = [];
+      this.$emit("endEoordinateLine", []);
+    },
+
     /**
      * @description: 修改地图底图样式
      * @param {*} item
@@ -612,6 +789,25 @@ export default {
     position: absolute;
     // left: 1rem;
     // top: 1rem;
+    .draw-line {
+      width: 1.5rem;
+      height: 3rem;
+      background-color: rgb(198, 216, 216);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+
+      i {
+        cursor: pointer;
+        padding: 0.1rem 0;
+        font-size: 1.2rem;
+      }
+
+      .change-map-click {
+        background-color: rgb(240, 240, 240);
+      }
+    }
 
     .draw-map {
       width: 1.5rem;

src/views/big-screen/components/img-dialog.vue

@@ -133,10 +133,7 @@
             :style="getRectStyle(item.rectPosition, index)"
             @click="clickImage(item)"
           >
-            <div
+            <div :style="{ color: colorList[index] }" class="rect-overlay-text">
-              :style="{ color: colorList[index] }"
-              class="rect-overlay-text"
-            >
               目标详情>>
             </div>
           </div>
@@ -281,8 +278,8 @@ export default {
         this.defectData.length > this.currentIndex
       ) {
         // this.showImage(this.currentIndex);
-        return this.defectData[this.currentIndex].items[this.selectedThumbnail]
+        const index = this.defectData[this.currentIndex].items.length - 1;
-          .img;
+        return this.defectData[this.currentIndex].items[index].img;
       }
     },
     // 下方小列表数据
@@ -488,8 +485,10 @@ export default {
       // if (this.currentIndex === this.defectData.length - 1) {
       //   this.loadMoreBottomImages();
       // }
+
       this.currentIndex = index;
-      this.selectedThumbnail = 0; // Reset to the first thumbnail when changing the main item
+      const indexInfo = this.defectData[this.currentIndex].items.length - 1;
+      this.selectedThumbnail = indexInfo; // Reset to the first thumbnail when changing the main item
       this.scrollToCurrentImage();
       this.$nextTick(() => {
         this.updateRects();
@@ -572,7 +571,8 @@ export default {
         event.preventDefault();
         if (this.currentIndex > 0) {
           this.currentIndex--;
-          this.selectedThumbnail = 0; // Reset when changing main images via keyboard
+          const index = this.defectData[this.currentIndex].items.length - 1;
+          this.selectedThumbnail = index; // Reset when changing main images via keyboard
           this.scrollToCurrentImage();
           this.updateRects();
         }
@@ -582,7 +582,8 @@ export default {
           this.currentIndex === this.defectData.length - 1
             ? this.currentIndex
             : this.currentIndex++;
-          this.selectedThumbnail = 0; // Reset when changing main images via keyboard
+          const index = this.defectData[this.currentIndex].items.length - 1;
+          this.selectedThumbnail = index; // Reset when changing main images via keyboard
           this.scrollToCurrentImage();
           this.updateRects();
         } else {
@@ -610,6 +611,13 @@ export default {
     updateRects() {
       this.rectItem = [];
       if (this.defectData.length > 0) {
+        if (
+          this.selectedThumbnail >
+          this.defectData[this.currentIndex]?.items.length - 1
+        ) {
+          this.selectedThumbnail =
+            this.defectData[this.currentIndex]?.items.length - 1;
+        }
         this.rectItem = this.defectData[this.currentIndex]?.items[
           this.selectedThumbnail
         ].children.map((item) => {
@@ -665,7 +673,8 @@ export default {
 <style lang="scss" scoped>
 .app {
   width: 100%;
-  height: 54rem;
+  // height: 54rem;
+  height: calc(100vh - 3rem);
   display: flex;
   flex-direction: row;
   background-color: #2e3a46;
@@ -741,6 +750,7 @@ export default {
 
 .main-content {
   width: calc(100% - 250px);
+  height: 100%;
   background-color: #1b2126;
   padding: 10px;
   display: flex;
@@ -826,6 +836,11 @@ export default {
       color: inherit;
       font-size: 1.1rem;
     }
+
+    .el-checkbox__label {
+      color: inherit;
+      font-size: 1.1rem;
+    }
   }
 }
 
@@ -860,7 +875,8 @@ export default {
 }
 
 .image-viewer {
-  height: 43rem;
+  // height: 43rem;
+  height: calc(100% - 9rem);
   display: flex;
   flex-direction: column;
   align-items: center;

src/views/big-screen/index.vue

@@ -820,7 +820,7 @@ export default {
       if (!this.markLayerLines) {
         mapPciList().then(({ code, data }) => {
           if (code === 200) {
-            this.lineString = data;
+            this.lineString = data.filter((item) => item.coordinates !== null);
             this.drawLine();
           }
         });
@@ -831,7 +831,7 @@ export default {
     drawLine() {
       const features = [];
       this.lineString.forEach((element) => {
-        const lines = element?.coordinates?.split(";").map((it) => {
+        const lines = element?.coordinates?.split(";")?.map((it) => {
           return it.split(",").map(Number);
         });
         const line = new Feature({

src/views/xj/route/route-line/index.vue

@@ -67,18 +67,6 @@
           >新增
         </el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['xj:route:edit']"
-          >修改
-        </el-button>
-      </el-col>
       <el-col :span="1.5">
         <el-button
           type="danger"
@@ -118,8 +106,6 @@
       <el-table-column label="路线名称" align="center" prop="routeName" />
       <el-table-column label="路线全称" align="center" prop="fullName" />
       <el-table-column label="方向" align="center" prop="direction" />
-      <el-table-column label="起点" align="center" prop="startPoint" />
-      <el-table-column label="终点" align="center" prop="endPoint" />
       <el-table-column label="起点桩号" align="center" prop="startMilepost" />
       <el-table-column label="止点桩号" align="center" prop="endMilepost" />
       <el-table-column label="创建人" align="center" prop="createdBy" />
@@ -183,136 +169,118 @@
     <el-dialog
       :title="title"
       :visible.sync="dialogVisible"
+      :close-on-click-modal="false"
       width="80%"
       append-to-body
     >
-      <div style="display: flex">
+      <template v-if="dialogVisible">
-        <!-- 左侧表单部分 -->
+        <div style="display: flex">
-        <div style="flex: 1; padding-right: 40px">
+          <!-- 左侧表单部分 -->
-          <el-form ref="form" :model="form" :rules="rules" label-width="70px">
+          <div style="flex: 1; padding-right: 40px">
-            <el-form-item>
+            <el-form
-              <el-row :gutter="20">
+              ref="form"
-                <el-col :span="12">
+              :model="lineForm"
-                  <el-form-item label="路线编码">
+              :rules="rules"
-                    <el-input v-model="form.routeCode"></el-input>
+              label-width="5rem"
-                  </el-form-item>
+            >
-                </el-col>
+              <el-form-item>
-                <el-col :span="12">
+                <el-row :gutter="24">
-                  <el-form-item label="路线名称">
+                  <el-col :span="12">
-                    <el-input v-model="form.routeName"></el-input>
+                    <el-form-item label="路线编码" prop="routeCode">
-                  </el-form-item>
+                      <el-input v-model="lineForm.routeCode"></el-input>
-                </el-col>
+                    </el-form-item>
-              </el-row>
+                  </el-col>
-            </el-form-item>
+                  <el-col :span="12">
-            <el-form-item>
+                    <el-form-item label="路线名称" prop="routeName">
-              <el-row :gutter="20">
+                      <el-input v-model="lineForm.routeName"></el-input>
-                <el-col :span="12">
+                    </el-form-item>
-                  <el-form-item label="路线类型">
+                  </el-col>
-                    <el-select
+                </el-row>
-                      v-model="form.routeType"
+              </el-form-item>
-                      placeholder="请选择路线类型"
+              <el-form-item>
-                    >
+                <el-row :gutter="24">
-                      <el-option
+                  <!-- <el-col :span="12">
-                        v-for="dict in dict.type.bas_road_type"
+                    <el-form-item label="路线全称" prop="fullName">
-                        :key="dict.value"
+                      <el-input v-model="lineForm.fullName"></el-input>
-                        :label="dict.label"
+                    </el-form-item>
-                        :value="dict.value"
+                  </el-col> -->
-                      ></el-option>
+                  <el-col :span="24">
-                    </el-select>
+                    <el-form-item label="方向" prop="direction">
-                  </el-form-item>
+                      <el-select
-                </el-col>
+                        v-model="lineForm.direction"
-                <el-col :span="12"> </el-col>
+                        placeholder="请选择方向"
-              </el-row>
+                        style="width: 100%"
-            </el-form-item>
+                        clearable
-            <el-form-item>
+                      >
-              <el-row :gutter="5">
+                        <el-option
-                <el-col :span="12">
+                          v-for="dict in dict.type.bas_direction"
-                  <el-form-item label="路线全称">
+                          :key="dict.value"
-                    <el-input v-model="form.fullName"></el-input>
+                          :label="dict.label"
-                  </el-form-item>
+                          :value="dict.value"
-                </el-col>
+                        />
-                <el-col :span="12">
+                      </el-select>
-                  <el-form-item label="方向">
+                    </el-form-item>
-                    <el-select
+                  </el-col>
-                      v-model="queryParams.direction"
+                </el-row>
-                      placeholder="请选择方向"
+              </el-form-item>
-                      clearable
+              
-                    >
+              <el-form-item>
-                      <el-option
+                <el-row :gutter="24">
-                        v-for="dict in dict.type.bas_direction"
+                  <el-col :span="12">
-                        :key="dict.value"
+                    <el-form-item label="起点桩号" prop="startMilepost">
-                        :label="dict.label"
+                      <el-input v-model="lineForm.startMilepost"></el-input>
-                        :value="dict.value"
+                    </el-form-item>
-                      />
+                  </el-col>
-                    </el-select>
+                  <el-col :span="12">
-                  </el-form-item>
+                    <el-form-item label="止点桩号" prop="endMilepost">
-                </el-col>
+                      <el-input v-model="lineForm.endMilepost"></el-input>
-              </el-row>
+                    </el-form-item>
-            </el-form-item>
+                  </el-col>
-            <el-form-item>
+                </el-row>
-              <el-row :gutter="20">
+              </el-form-item>
-                <el-col :span="12">
+              <el-form-item>
-                  <el-form-item label="起点">
+                <el-row :gutter="24">
-                    <el-input v-model="form.startPoint"></el-input>
+                  <el-col :span="24">
-                  </el-form-item>
+                    <el-form-item label="坐标点" prop="coordinates">
-                </el-col>
+                      <el-input
-                <el-col :span="12">
+                        type="textarea"
-                  <el-form-item label="终点">
+                        :disabled="true"
-                    <el-input v-model="form.endPoint"></el-input>
+                        v-model="lineForm.coordinates"
-                  </el-form-item>
+                        rows="4"
-                </el-col>
+                      ></el-input>
-              </el-row>
+                    </el-form-item>
-            </el-form-item>
+                  </el-col>
-            <el-form-item>
+                </el-row>
-              <el-row :gutter="20">
+              </el-form-item>
-                <el-col :span="12">
+              <el-form-item>
-                  <el-form-item label="起点桩号">
+                <el-row :gutter="24">
-                    <el-input v-model="form.startMilepost"></el-input>
+                  <el-col :span="24">
-                  </el-form-item>
+                    <el-form-item label="备注" prop="remark">
-                </el-col>
+                      <el-input v-model="lineForm.remarks"></el-input>
-                <el-col :span="12">
+                    </el-form-item>
-                  <el-form-item label="止点桩号">
+                  </el-col>
-                    <el-input v-model="form.endMilepost"></el-input>
+                </el-row>
-                  </el-form-item>
+              </el-form-item>
-                </el-col>
+            </el-form>
-              </el-row>
+          </div>
-            </el-form-item>
-            <el-form-item>
-              <el-row :gutter="20">
-                <el-col :span="24">
-                  <el-form-item label="坐标点">
-                    <el-input
-                      type="textarea"
-                      :disabled="true"
-                      v-model="form.coordinates"
-                      rows="4"
-                    ></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-            </el-form-item>
-            <el-form-item>
-              <el-row :gutter="20">
-                <el-col :span="24">
-                  <el-form-item label="备注">
-                    <el-input v-model="form.remarks"></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-            </el-form-item>
-          </el-form>
-        </div>
 
-        <!-- 右侧地图部分 -->
+          <!-- 右侧地图部分 -->
-        <div style="flex: 1; position: relative">
+          <div style="flex: 1; position: relative">
-          <!-- <div id="add_map" ref="mapContainer" class="no-hand-cursor"></div> -->
+            <!-- <div id="add_map" ref="mapContainer" class="no-hand-cursor"></div> -->
-          <fssm-map :showDraw="true" class="no-hand-cursor" ref="mapContainer"></fssm-map>
+            <fssm-map
+              :showLine="true"
+              @endEoordinateLine="getEndEoordinate"
+              :editCoordinatesLine="editCoordinatesLine"
+              class="no-hand-cursor"
+              ref="mapContainer"
+            ></fssm-map>
+          </div>
         </div>
-      </div>
+        <div slot="footer" class="dialog-footer">
-      <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        </div>
-      </div>
+      </template>
     </el-dialog>
   </div>
 </template>
@@ -327,12 +295,6 @@ import {
 } from "@/api/xj/route";
 // 地图
 import FssmMap from "@/components/map/fssm-map.vue";
-import { Feature } from "ol";
-import { Point } from "ol/geom";
-import { Style } from "ol/style";
-import * as styleExports from "ol/style";
-import VectorLayer from "ol/layer/Vector";
-import { Vector as VectorSource } from "ol/source";
 export default {
   name: "Route",
   dicts: ["bas_road_type", "bas_direction"],
@@ -349,8 +311,6 @@ export default {
         routeName: "",
         routeFullName: "",
         direction: "",
-        startPoint: "",
-        endPoint: "",
         startStake: "",
         endStake: "",
         coordinates: "",
@@ -385,10 +345,9 @@ export default {
         routeCode: null,
         routeName: null,
         fullName: null,
-        routeType: null,
       },
       // 表单参数
-      form: {
+      lineForm: {
         coordinates: "",
       },
       // 表单校验
@@ -403,10 +362,22 @@ export default {
         routeName: [
           { required: true, message: "路线名称不能为空", trigger: "blur" },
         ],
-        routeType: [
+        direction: [
-          { required: true, message: "路线类型不能为空", trigger: "change" },
+          { required: true, message: "方向不能为空", trigger: "change" },
         ],
+        startMilepost: [
+          { required: true, message: "起点桩号不能为空", trigger: "blur" },
+        ],
+        endMilepost: [
+          { required: true, message: "止点桩号不能为空", trigger: "blur" },
+        ],
+        coordinates: [
+          { required: true, message: "坐标点不能为空", trigger: "blur" },
+        ],
+        
       },
+      // 编辑坐标点
+      editCoordinatesLine: [],
     };
   },
   created() {
@@ -426,19 +397,23 @@ export default {
       });
     },
 
+    /**
+     * @description: 获取线段坐标点
+     * @param {coordinates}
+     * @return {*}
+     */
+    getEndEoordinate(coordinates) {
+      this.$set(this.lineForm, "coordinates", coordinates.join(";"));
+    },
+
     /**
      * @description: 取消按钮
      * @return {*}
      */
     cancel() {
       this.dialogVisible = false;
-    },
+      this.lineForm = {};
-
+      this.editCoordinatesLine = [];
-    /**
-     * @description: 表单重置
-     * @return {*}
-     */
-    reset() {
     },
 
     /**
@@ -458,7 +433,7 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    
+
     /**
      * @description: 多选框选中数据
      * @param {selection}
@@ -469,13 +444,12 @@ export default {
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
-    
+
     /**
      * @description: 新增按钮操作
      * @return {*}
      */
     handleAdd() {
-      this.reset();
       this.dialogVisible = true;
       this.title = "添加道路线";
     },
@@ -486,10 +460,14 @@ export default {
      * @return {*}
      */
     handleUpdate(row) {
-      this.reset();
       const id = row.id || this.ids;
       getRoute(id).then((response) => {
-        this.form = response.data;
+        this.lineForm = response.data;
+        this.editCoordinatesLine = response.data.coordinates
+          .split(";")
+          .map((item) => {
+            return item.split(",");
+          });
         this.dialogVisible = true;
         this.title = "修改道路线";
       });
@@ -502,14 +480,14 @@ export default {
     submitForm() {
       this.$refs["form"].validate((valid) => {
         if (valid) {
-          if (this.form.id != null) {
+          if (this.lineForm.id != null) {
-            updateRoute(this.form).then((response) => {
+            updateRoute(this.lineForm).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.dialogVisible = false;
               this.getList();
             });
           } else {
-            addRoute(this.form).then((response) => {
+            addRoute(this.lineForm).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.dialogVisible = false;
               this.getList();

src/views/xj/route/route-scope/components/scope-add.vue

@@ -18,9 +18,9 @@
       >
         <el-row :gutter="24">
           <el-col :span="12">
-            <el-form-item label="作业范围名称" prop="segCode">
+            <el-form-item label="作业范围名称" prop="segmentCode">
               <el-input
-                v-model="dialogForm.segCode"
+                v-model="dialogForm.segmentCode"
                 placeholder="请输入作业范围名称"
                 clearable
               ></el-input>
@@ -93,12 +93,12 @@ export default {
     return {
       // 表单绑定
       dialogForm: {
-        segCode: "",
+        segmentCode: "",
         roadType: "",
         coordinates: "",
       },
       rules: {
-        segCode: [
+        segmentCode: [
           { required: true, message: "作业范围名称不能为空", trigger: "blur" },
         ],
         roadType: [
@@ -112,6 +112,7 @@ export default {
           },
         ],
       },
+      // 回显的多边形区域
       editCoordinates: [],
     };
   },
@@ -119,8 +120,11 @@ export default {
     dialogItem: {
       handler(val) {
         if (val.title === "修改") {
+          this.dialogForm = val.item;
+          // 获取多边形区域
+          // const a =val.item.coordinates;
           const a =
-            "122.2772084092066,42.1903654574782;122.4566518803403,41.91936930784885;123.0608999272153,41.9541594027907;122.9638539170191,42.419247153717315;122.37425425176474,42.413753989654815;122.36143698071095,42.24529693046514;122.2772084092066,42.1903654574782";
+            "123.10796364297124,42.017659779208934;123.12993629922124,41.87346422256831;123.35652931679937,41.789693470615184;123.91271217812749,41.76085435928706;123.74379738320562,42.00530016006831;123.35790260781499,42.05199205459956;123.17662819375249,42.10143053116206;123.10796364297124,42.017659779208934";
           this.dialogForm.coordinates = a;
           this.editCoordinates = a.split(";").map((item) => {
             return item.split(",");
@@ -128,20 +132,35 @@ export default {
         }
       },
       immediate: true,
-      deep: true,
+      // deep: true,
     },
   },
   created() {},
   methods: {
-    /* 获取多边形坐标方法 */
+    /**
+     * @description: 获取多边形坐标方法
+     * @param {list}
+     * @return {*}
+     */
     geteoordinate(list) {
-      this.dialogForm.coordinates = list.join(";");
+      console.log(list,'ssss');
+      
+      // this.dialogForm.coordinates = list.join(";");
+      this.$set(this.dialogForm, "coordinates", list.join(";"));
     },
-    /* 点击取消事件 */
+
+    /**
+     * @description: 点击取消事件
+     * @return {*}
+     */
     cancel() {
       this.$emit("addCancel");
     },
-    /* 点击确认事件 */
+
+    /**
+     * @description: 点击确认事件
+     * @return {*}
+     */
     submitForm() {
       this.$refs["dialogForm"].validate((valid) => {
         if (valid) {

src/views/xj/route/route-scope/index.vue

@@ -116,6 +116,7 @@
       @close="addCancel"
     >
       <scope-add
+        v-if="addVisible"
         :bindCarList="bindCarList"
         :dialogItem="dialogItem"
         @addCancel="addCancel"
@@ -220,10 +221,11 @@ export default {
       this.multiple = !selection.length;
     },
     /* 列表修改事件 */
-    editTable() {
+    editTable(item) {
       this.addTitle = "修改作业范围";
       this.dialogItem = {
         title: "修改",
+        item,
       };
       this.addVisible = true;
     },

src/views/xj/route/route-section/components/section-add.vue

@@ -19,18 +19,18 @@
         >
           <el-row :gutter="24">
             <el-col :span="12">
-              <el-form-item label="路段编码" prop="segCode">
+              <el-form-item label="路段编码" prop="segmentCode">
                 <el-input
-                  v-model="dialogForm.segCode"
+                  v-model="dialogForm.segmentCode"
                   placeholder="请输入路段编码"
                   clearable
                 ></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="路段名称" prop="segName">
+              <el-form-item label="路段名称" prop="segmentName">
                 <el-input
-                  v-model="dialogForm.segName"
+                  v-model="dialogForm.segmentName"
                   placeholder="请输入路段名称"
                   clearable
                 ></el-input>
@@ -60,7 +60,7 @@
                   placeholder="请选择管理站"
                 >
                   <el-option
-                    v-for="dict in dict.type.bas_road_type"
+                    v-for="dict in deptIdList"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -137,9 +137,9 @@
           </el-row>
           <el-row :gutter="24">
             <el-col :span="12">
-              <el-form-item label="最大限速" prop="maxspeedLimit">
+              <el-form-item label="最大限速" prop="maxSpeedLimit">
                 <el-input-number
-                  v-model="dialogForm.maxspeedLimit"
+                  v-model="dialogForm.maxSpeedLimit"
                   controls-position="right"
                   placeholder="请填写最大限速"
                   :min="0"
@@ -166,7 +166,7 @@
           </el-row>
           <el-row :gutter="24">
             <el-col :span="24">
-              <el-form-item label="坐标点" prop="coordinates">
+              <el-form-item label="路段坐标点" prop="coordinates">
                 <el-input
                   type="textarea"
                   :disabled="true"
@@ -177,6 +177,19 @@
               </el-form-item>
             </el-col>
           </el-row>
+          <el-row :gutter="24">
+            <el-col :span="24">
+              <el-form-item label="范围坐标点" prop="polygon">
+                <el-input
+                  type="textarea"
+                  :disabled="true"
+                  v-model="dialogForm.polygon"
+                  rows="4"
+                  resize="none"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
           <el-row :gutter="24">
             <el-col :span="24">
               <el-form-item label="备注">
@@ -187,7 +200,16 @@
         </el-form>
       </div>
       <div class="right-map">
-        <div id="add_map" ref="mapContainer"></div>
+        <fssm-map
+          :showLine="true"
+          :showDraw="true"
+          id="add_map"
+          ref="mapContainer"
+          @endEoordinateLine="getEndEoordinate"
+          @endEoordinate="getEndPolygon"
+          :editCoordinates="editCoordinates"
+          :editCoordinatesLine="editCoordinatesLine"
+        ></fssm-map>
       </div>
     </div>
     <div class="dialog-footer">
@@ -199,8 +221,12 @@
 
 <script>
 import { addSection, updateSection } from "@/api/xj/section";
+import FssmMap from "@/components/map/fssm-map.vue";
 export default {
   name: "SectionAdd",
+  components: {
+    FssmMap,
+  },
   dicts: ["bas_road_type", "bas_direction"],
   props: {
     dialogItem: {
@@ -211,13 +237,17 @@ export default {
       type: Array,
       default: () => [],
     },
+    deptIdList: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
       // 表单绑定
       dialogForm: {
-        segCode: "",
+        segmentCode: "",
-        segName: "",
+        segmentName: "",
         roadType: "",
         deptId: "",
         stakeStart: "",
@@ -226,17 +256,20 @@ export default {
         mileage: "",
         laneCount: "",
         curingLevel: "",
-        maxspeedLimit: "",
+        city: "沈阳市",
+        district: "和平区",
+        maxSpeedLimit: "",
         routeId: "",
         coordinates: "",
+        polygon: "",
         mark: "",
       },
       // 表单验证规则
       rules: {
-        segCode: [
+        segmentCode: [
           { required: true, message: "路段编码不能为空", trigger: "blur" },
         ],
-        segName: [
+        segmentName: [
           { required: true, message: "路段名称不能为空", trigger: "blur" },
         ],
         roadType: [
@@ -267,164 +300,67 @@ export default {
         curingLevel: [
           { required: true, message: "养护级别不能为空", trigger: "blur" },
         ],
-        maxspeedLimit: [
+        maxSpeedLimit: [
           { required: true, message: "最大限速不能为空", trigger: "blur" },
         ],
         routeId: [{ required: true, message: "请选择路线", trigger: "change" }],
         coordinates: [
           { required: true, message: "请在右侧地图添加路段", trigger: "blur" },
         ],
+        polygon: [
+          { required: true, message: "请在右侧地图添加范围", trigger: "blur" },
+        ],
       },
-      // 养护单位下拉数据
+      // 编辑线段坐标点
-      deptOptions: [],
+      editCoordinatesLine: [],
-      // 上一点位
+      // 编辑范围坐标点
-      previousPoint: null,
+      editCoordinates: [],
-      // 保存所有添加的连线
-      lines: [],
-      // 保存所有添加的点
-      markers: [],
-      // 地图右键菜单显隐控制
-      menuOpen: false,
     };
   },
   watch: {
+    // 监听弹窗数据
     dialogItem: {
       handler(val) {
         if (val.title === "修改") {
-          this.$nextTick(() => {
+          this.dialogForm = val.item;
-            this.initMap();
+          this.editCoordinates = val.item.polygon.split(";").map((item) => {
-            this.drawExistingCoordinates(this.dialogForm.coordinates);
+            return item.split(",");
-          });
-        } else {
-          this.$nextTick(() => {
-            this.initMap();
           });
+          this.editCoordinatesLine = val.item.coordinates
+            .split(";")
+            .map((item) => {
+              return item.split(",");
+            });
+          console.log(val, "ddssss");
         }
       },
       immediate: true,
-      deep: true,
     },
   },
-  mounted() {
+  mounted() {},
-    // this.initMap();
-  },
   methods: {
-    /* 初始化地图 */
+    /**
-    initMap() {
+     * @description: 获取线段坐标点
-      this.map = new T.Map("add_map");
+     * @param {coordinates}
-      this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12); // 设置中心点和缩放级别
+     * @return {*}
-      // 添加点击事件
+     */
-      this.map.on("click", this.onMapClick);
+    getEndEoordinate(coordinates) {
-      // 添加右键菜单
+      this.$set(this.dialogForm, "coordinates", coordinates.join(";"));
-      this.map.on("contextmenu", this.onMapRightClick);
     },
-    /* 地图单击事件 */
-    onMapClick(e) {
-      if (this.menuOpen) {
-        this.menuOpen = false;
-        return;
-      }
-      const latLng = e.lnglat;
-      const point = `${latLng.lng},${latLng.lat}`;
-      // 追加经纬度到textarea
-      if (this.dialogForm.coordinates == null) {
-        this.dialogForm.coordinates = "";
-      }
-      this.dialogForm.coordinates += this.dialogForm.coordinates
-        ? `;${point}`
-        : point;
-      // 绘制点和连线
-      const marker = new T.Marker(latLng);
-      this.markers.push(marker); // 保存点
-      // 连线
-      if (this.previousPoint) {
-        const line = new T.Polyline([this.previousPoint, latLng], {
-          strokeColor: "blue",
-          strokeWeight: 3,
-          strokeOpacity: 0.7,
-        });
-        this.map.addOverLay(line);
-        this.lines.push(line);
-      }
-      if (this.lines.length == 0) {
-        this.map.addOverLay(marker);
-      }
-      this.previousPoint = latLng; // 记录上一个点
-    },
-    /* 地图右键事件 */
-    onMapRightClick() {
-      this.menuOpen = true;
-      var menu = new T.ContextMenu({
-        width: 50,
-      });
-      var _MenuItem1 = new T.MenuItem("撤销", this.undoLastAction);
-      var _MenuItem2 = new T.MenuItem("重绘", this.resetMap);
-      menu.addItem(_MenuItem1);
-      menu.addItem(_MenuItem2);
-      this.map.addContextMenu(menu);
-    },
-    /* 地图右键撤销事件 */
-    undoLastAction() {
-      if (this.lines.length > 0) {
-        const lastLine = this.lines.pop();
-        // 从地图中移除最后一条线
-        this.map.removeOverLay(lastLine);
-      }
 
-      if (this.lines.length == 0) {
+    /**
-        this.resetMap();
+     * @description: 获取范围坐标点
-        return;
+     * @param {polygon}
-      }
+     * @return {*}
-      this.markers.pop();
+     */
-      // 更新上一个点为撤销后的点
+    getEndPolygon(polygon) {
-      this.previousPoint =
+      this.$set(this.dialogForm, "polygon", polygon.join(";"));
-        this.markers.length > 0
-          ? this.markers[this.markers.length - 1].getLngLat()
-          : null;
-
-      // 更新坐标点 textarea
-      const coordArr = this.dialogForm.coordinates.split(";");
-      coordArr.pop(); // 移除最后一个坐标
-      this.dialogForm.coordinates = coordArr.join(";");
     },
-    /* 回显地图路径 */
-    drawExistingCoordinates(e) {
-      const coordArr = e.split(";");
-      let previousLatLng = null;
 
-      coordArr.forEach((coord, index) => {
+    /**
-        const [lng, lat] = coord.split(",").map(Number);
+     * @description: 点击确定事件
-        const latLng = new T.LngLat(lng, lat);
+     * @return {*}
-
+     */
-        // 绘制点
-        const marker = new T.Marker(latLng);
-        this.markers.push(marker);
-
-        // 如果有上一个点，绘制连线
-        if (previousLatLng) {
-          const line = new T.Polyline([previousLatLng, latLng], {
-            strokeColor: "blue",
-            strokeWeight: 3,
-            strokeOpacity: 0.7,
-          });
-          this.map.addOverLay(line);
-          this.lines.push(line);
-        }
-        // 将当前点设置为 previousPoint，最后一个点会被设置为最后的 previousPoint
-        previousLatLng = latLng;
-      });
-      // 设置最后一个点为当前的 previousPoint，方便继续绘制
-      this.previousPoint = previousLatLng;
-    },
-    /* 清空坐标点/地图上的所有覆盖物 */
-    resetMap() {
-      this.dialogForm.coordinates = "";
-      this.previousPoint = null;
-      this.map.clearOverLays();
-      this.markers = [];
-      this.lines = [];
-    },
-    /* 点击确定事件 */
     submitForm() {
       this.$refs["dialogForm"].validate((valid) => {
         if (valid) {
@@ -444,7 +380,11 @@ export default {
         }
       });
     },
-    /* 点击取消事件 */
+
+    /**
+     * @description: 点击取消事件
+     * @return {*}
+     */
     cancel() {
       this.$emit("addCancel");
     },
@@ -455,10 +395,10 @@ export default {
 <style lang="scss" scoped>
 .add-content {
   width: 100%;
-  height: 35rem;
+  height: 40rem;
 
   > div {
-    height: 32.5rem;
+    height: 37.5rem;
     display: flex;
 
     .left-form {

src/views/xj/route/route-section/index.vue

@@ -86,7 +86,12 @@
     >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="路段编码" align="center" prop="segmentCode" />
-      <el-table-column label="路段名称" align="center" prop="segmentName" />
+      <el-table-column
+        label="路段名称"
+        show-overflow-tooltip
+        align="center"
+        prop="segmentName"
+      />
       <el-table-column label="道路类型" align="center" prop="roadType" />
       <el-table-column label="里程" align="center" prop="mileage" />
       <el-table-column label="路宽" align="center" prop="width" />
@@ -140,11 +145,12 @@
       append-to-body
       :close-on-click-modal="false"
       destroy-on-close
-      @close="addCancel"
     >
       <section-add
+        v-if="addVisible"
         :dialogItem="dialogItem"
         :routeList="routeList"
+        :deptIdList="deptIdList"
         @addCancel="addCancel"
       ></section-add>
     </el-dialog>
@@ -156,6 +162,7 @@ import {
   getSectionList,
   deleteSection,
   getSegmentList,
+  getDeptList,
 } from "@/api/xj/section";
 import SectionAdd from "./components/section-add.vue";
 
@@ -194,15 +201,32 @@ export default {
       dialogItem: {},
       // 路线下拉数据
       routeList: [],
+      // 管理站下拉数据
+      deptIdList: [],
     };
   },
-  mounted() {},
+  mounted() {
-  created() {
     this.getTableList();
+  },
+  created() {
     this.getRoadList();
+    this.getDeptIdList();
   },
   methods: {
-    /* 获取路线下拉数据 */
+    /**
+     * @description: 获取管理站下拉数据
+     * @return {*}
+     */
+    getDeptIdList() {
+      getDeptList().then(({ data }) => {
+        this.deptIdList = data;
+      });
+    },
+
+    /**
+     * @description: 获取路线下拉数据
+     * @return {*}
+     */
     getRoadList() {
       getSegmentList().then(({ code, data }) => {
         if (code === 200) {
@@ -210,12 +234,20 @@ export default {
         }
       });
     },
-    /* 点击搜索事件 */
+
+    /**
+     * @description: 点击搜索事件
+     * @return {*}
+     */
     handleQuery() {
       this.searchForm = JSON.parse(JSON.stringify(this.sectionForm));
       this.getTableList();
     },
-    /* 点击重置事件 */
+
+    /**
+     * @description: 点击重置事件
+     * @return {*}
+     */
     resetQuery() {
       this.sectionForm = {
         // segmentCode: "",
@@ -224,7 +256,11 @@ export default {
       this.searchForm = {};
       this.getTableList();
     },
-    /* 获取列表数据 */
+
+    /**
+     * @description: 获取列表数据
+     * @return {*}
+     */
     getTableList() {
       const params = {
         ...this.searchForm,
@@ -233,10 +269,15 @@ export default {
       getSectionList(params).then(({ code, data }) => {
         if (code === 200) {
           this.sectionList = data.rows;
+          this.tableTotal = data.total;
         }
       });
     },
-    /* 点击新增 */
+
+    /**
+     * @description: 点击新增
+     * @return {*}
+     */
     handleAdd() {
       this.addTitle = "新增路段";
       this.dialogItem = {
@@ -244,23 +285,40 @@ export default {
       };
       this.addVisible = true;
     },
-    /* 点击导出 */
+
+    /**
+     * @description: 点击导出
+     * @return {*}
+     */
     handleExport() {},
-    /* 列表选择改变事件 */
+
+    /**
+     * @description: 列表选择改变事件
+     * @return {*}
+     */
     handleSelectionChange(selection) {
       this.checkIds = selection.map((item) => item.id);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
-    /* 列表修改事件 */
+
-    editTable() {
+    /**
+     * @description: 列表修改事件
+     * @return {*}
+     */
+    editTable(item) {
       this.addTitle = "修改路段";
       this.dialogItem = {
         title: "修改",
+        item,
       };
       this.addVisible = true;
     },
-    /* 列表删除/批量删除事件 */
+
+    /**
+     * @description: 列表删除/批量删除事件
+     * @return {*}
+     */
     deleteTable(row) {
       const checkIds = row ? [row.id] : this.checkIds;
       if (!checkIds.length) {
@@ -279,21 +337,34 @@ export default {
         })
         .catch(() => {});
     },
-    /* 切换分页 */
+
+    /**
+     * @description: 切换分页
+     * @return {*}
+     */
     handleCurrentChange(arg) {
       this.pagination.page = arg;
       this.getTableList();
     },
-    /* 切换每条/页 */
+
+    /**
+     * @description: 切换每条/页
+     * @return {*}
+     */
     handleSizeChange(arg) {
       this.pagination.size = arg;
       this.getTableList();
     },
-    /* 关闭弹窗事件 */
+
+    /**
+     * @description: 关闭弹窗事件
+     * @return {*}
+     */
     addCancel() {
+      this.addVisible = false;
       this.addTitle = "";
       this.dialogItem = {};
-      this.addVisible = false;
+      this.getTableList();
     },
   },
 };