fix：作业范围

src/api/xj/scope.js

@@ -0,0 +1,45 @@
+import request from "@/utils/request";
+
+// 查询作业范围列表
+export function getScopeList(query) {
+  return request({
+    url: "/api/v2/segment/list",
+    method: "post",
+    data: query,
+  });
+}
+
+// 删除作业范围
+export function deleteScope(query) {
+  return request({
+    url: "/api/v2/segment/delete",
+    method: "delete",
+    data: query,
+  });
+}
+
+//  新增作业范围
+export function addScope(query) {
+  return request({
+    url: "/api/v2/segment/add",
+    method: "post",
+    data: query,
+  });
+}
+
+// 修改作业范围
+export function updateScope(query) {
+  return request({
+    url: "/api/v2/segment/update",
+    method: "put",
+    data: query,
+  });
+}
+
+// 绑定车辆下拉
+export function getCarList() {
+  return request({
+    url: "/api/aiot/aiotDropDown",
+    method: "get",
+  });
+}

src/components/map/fssm-map.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 10:46:23
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-15 09:41:43
+ * @LastEditTime: 2024-10-17 10:33:59
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\fssm-map.vue
  * @Description: 公共地图
 -->
@@ -10,11 +10,30 @@
 <template>
   <div class="map-container">
     <div ref="container" :id="`map-${mapId}`"></div>
-    <div ref="mapController" v-if="showZoom" class="control-container">
+    <div ref="mapController" class="control-container">
-      <div class="bigButton">
+      <!-- 绘制图形 -->
+      <div class="draw-map" v-if="showDraw">
+        <i class="el-icon-edit" @click="drawMap()"></i>
+        <i class="el-icon-delete" @click="deletedraw()"></i>
+      </div>
+      <!-- 切换底图控件 -->
+      <div class="change-map" v-if="showChange">
+        <i
+          class="el-icon-picture-outline"
+          :class="mapType === 'cva_c' ? 'change-map-click' : ''"
+          @click="changeImg('cva_c')"
+        ></i>
+        <i
+          class="el-icon-picture"
+          :class="mapType === 'img_c' ? 'change-map-click' : ''"
+          @click="changeImg('img_c')"
+        ></i>
+      </div>
+      <!-- 放大缩小控件 -->
+      <div class="bigButton map-btn" v-if="showZoom">
         <i class="el-icon-plus" @click="changeZoom(1, 0.5)"></i>
       </div>
-      <div class="smallButton">
+      <div class="smallButton map-btn" v-if="showZoom">
         <i class="el-icon-minus" @click="changeZoom(-1, 0.5)"></i>
       </div>
     </div>
@@ -22,10 +41,22 @@
 </template>
 
 <script>
-import { Map, View } from "ol";
+import { Feature, Map, View } from "ol";
 import XYZ from "ol/source/XYZ";
 import { Tile as TileLayer } from "ol/layer";
 import { defaults as defaultControls } from "ol/control";
+import VectorLayer from "ol/layer/Vector";
+import { Vector as VectorSource } from "ol/source";
+import {
+  Draw,
+  Modify,
+  Select,
+  Snap,
+  defaults as defaultInteractions,
+} from "ol/interaction";
+import * as styleExports from "ol/style";
+import { Polygon } from "ol/geom";
+
 export default {
   name: "FssmMap",
   props: {
@@ -39,30 +70,110 @@ export default {
     // 接受传过来得地图层级
     zoom: {
       type: String,
-      default: "10",
+      default: "9",
+    },
+    // 是否显示绘图功能
+    showDraw: {
+      type: Boolean,
+      default: false,
     },
     // 是否显示地图放大缩小
     showZoom: {
       type: Boolean,
-      default: true,
+      default: false,
     },
+    // 是否显示切换地图底层按钮
+    showChange: {
+      type: Boolean,
+      default: false,
+    },
+    // 用于区分同一个页面多个地图的id
     mapId: {
       type: String,
       default: "0",
     },
+    // 接受传过来的绘制点位数组
+    editCoordinates: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
       // 地图实例
       instance: new Map(),
+      // 点击地图类型
+      mapType: "cva_c",
+      // 地图图层
+      mapLayers: [],
+      // 绘制图层
+      draw: null,
+      source: new VectorSource(),
+      // 绘制图形保存的点位
+      drawMarkers: [],
     };
   },
+  watch: {
+    editCoordinates: {
+      handler(val) {
+        this.$nextTick(() => {
+          const aa = val.map((item) => {
+            return [item[0] * 1, item[1] * 1];
+          });
+          this.drawMarkers = aa;
+          const map = this.instance.get("map");
+          // 增加绘图层
+          const drawLayer = new VectorLayer({
+            source: this.source,
+            id: "draw",
+          });
+          const feature = new Feature({
+            geometry: new Polygon([aa]),
+          });
+          drawLayer.getSource().addFeature(feature);
+          map.addLayer(drawLayer);
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   mounted() {
     this.initMap();
   },
+  created() {
+    // this.changeImg("cva_c");
+  },
   methods: {
     /* 初始化openlayer地图 */
     initMap() {
+      const tianditu_vec_c = new TileLayer({
+        title: "矢量底图",
+        id: "vec_c",
+        source: new XYZ({
+          url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=vec_c&tk=c691040443c68cda625755c5c3e2acc3",
+          projection: "EPSG:4326",
+        }),
+        visible: true,
+      });
+      const tianditu_cva_c = new TileLayer({
+        title: "矢量地图",
+        id: "cva_c",
+        source: new XYZ({
+          url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=cva_c&tk=c691040443c68cda625755c5c3e2acc3",
+          projection: "EPSG:4326",
+        }),
+        visible: true,
+      });
+      const tianditu_img_c = new TileLayer({
+        title: "影像地图",
+        id: "img_c",
+        source: new XYZ({
+          url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=img_c&tk=c691040443c68cda625755c5c3e2acc3",
+          projection: "EPSG:4326",
+        }),
+        visible: false,
+      });
       const map = new Map({
         target: `map-${this.mapId}`,
         controls: defaultControls({
@@ -75,20 +186,7 @@ export default {
           zoom: this.zoom, //图层缩放大小
           projection: "EPSG:4326",
         }),
-        layers: [
+        layers: [tianditu_vec_c, tianditu_img_c, tianditu_cva_c],
-          new TileLayer({
-            source: new XYZ({
-              url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=vec_c&tk=c691040443c68cda625755c5c3e2acc3",
-              projection: "EPSG:4326",
-            }),
-          }),
-          new TileLayer({
-            source: new XYZ({
-              url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=cva_c&tk=c691040443c68cda625755c5c3e2acc3",
-              projection: "EPSG:4326",
-            }),
-          }),
-        ],
       });
       // 图层点击事件
       map.on("singleclick", (e) => {
@@ -141,6 +239,182 @@ export default {
       this.instance.set("map", map);
       this.instance.set("overlay-list", []);
     },
+    /* 绘制地图 */
+    drawMap() {
+      if (this.drawMarkers.length < 1) {
+        const map = this.instance.get("map");
+        // 增加绘图层
+        const drawLayer = new VectorLayer({
+          source: this.source,
+          id: "draw",
+        });
+        map.addLayer(drawLayer);
+        // 增加snap吸附功能 ，还有就是snap交互可以在编辑和画features时候保持拓扑结构
+        const snap = new Snap({
+          source: this.source,
+        });
+        map.addInteraction(snap);
+        // 添加修改元素使得绘制的多边形可以编辑
+        const modify = new Modify({ source: this.source });
+        map.addInteraction(modify);
+        this.draw = new Draw({
+          source: this.source,
+          type: "Polygon",
+          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.draw);
+        this.draw.on("drawend", (e) => {
+          this.drawend(e);
+        });
+        modify.on("modifyend", (e) => {
+          e.features.forEach((feature) => {
+            this.drawMarkers = feature.getGeometry().getCoordinates().flat();
+            this.$emit("endEoordinate", this.drawMarkers);
+          });
+        });
+      }
+    },
+    /* 监听绘制完成的事件 */
+    drawend(event) {
+      const feature = event.feature;
+      const geometry = feature.getGeometry();
+      // 获取区域点位
+      const coordinates = geometry.getCoordinates()[0];
+      this.drawMarkers = coordinates;
+      // 在 drawend 结束后检查是否有交叉的线段
+      if (coordinates.length > 3 && this.isSelfCrossing(coordinates)) {
+        this.$modal.msgWarning("线段交叉，请重新绘制");
+        this.deletedraw();
+        this.drawMap();
+        // map.removeInteraction(this.draw);
+      } else {
+        const map = this.instance.get("map");
+        map.removeInteraction(this.draw);
+      }
+      this.$emit("endEoordinate", this.drawMarkers);
+    },
+    /* 检测交叉点位方法 */
+    isSelfCrossing(coordinates) {
+      for (let i = 0; i < coordinates.length - 1; i++) {
+        const segment1 = [coordinates[i], coordinates[i + 1]];
+        for (let j = i + 2; j < coordinates.length - 1; j++) {
+          const segment2 = [coordinates[j], coordinates[j + 1]];
+
+          if (this.doSegmentsCross(segment1, segment2)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    },
+    /* 检测交叉线段 */
+    doSegmentsCross(segment1, segment2) {
+      const [p1, p2] = segment1;
+      const [q1, q2] = segment2;
+
+      function crossProduct(p, q) {
+        return p[0] * q[1] - p[1] * q[0];
+      }
+
+      function subtractPoints(p, q) {
+        return [p[0] - q[0], p[1] - q[1]];
+      }
+
+      const r = subtractPoints(p2, p1);
+      const s = subtractPoints(q2, q1);
+      const uNumerator = crossProduct(subtractPoints(q1, p1), r);
+      const denominator = crossProduct(r, s);
+
+      if (denominator === 0) {
+        return false; // 线段平行或共线
+      }
+
+      const u = uNumerator / denominator;
+      const t = crossProduct(subtractPoints(q1, p1), s) / denominator;
+
+      // 判断是否相交并且不是共线
+      return t > 0 && t < 1 && u > 0 && u < 1;
+    },
+    /* 删除绘制功能 */
+    deletedraw() {
+      const map = this.instance.get("map");
+      map.removeInteraction(this.draw);
+      const [layer] = map.getAllLayers().filter((item) => {
+        return item.get("id") === "draw";
+      });
+      map.removeLayer(layer);
+      this.draw = null;
+      this.source = new VectorSource();
+      this.drawMarkers = [];
+      this.$emit("endEoordinate", []);
+    },
+    /* 修改地图底图样式 */
+    changeImg(item) {
+      if (this.mapType !== item) {
+        this.mapType = item;
+        this.$nextTick(() => {
+          if (item === "img_c") {
+            const layer = this.instance
+              .get("map")
+              .getAllLayers()
+              .filter((itemInfo) => {
+                return (
+                  itemInfo.get("id") === "cva_c" ||
+                  itemInfo.get("id") === "vec_c"
+                );
+              });
+            layer.forEach((it) => {
+              it.setVisible(false);
+            });
+            const layerDisabled = this.instance
+              .get("map")
+              .getAllLayers()
+              .filter((itemInfo) => {
+                return itemInfo.get("id") === "img_c";
+              });
+            layerDisabled.forEach((it) => {
+              it.setVisible(true);
+            });
+          } else if (item === "cva_c") {
+            const layer = this.instance
+              .get("map")
+              .getAllLayers()
+              .filter((itemInfo) => {
+                return (
+                  itemInfo.get("id") === "cva_c" ||
+                  itemInfo.get("id") === "vec_c"
+                );
+              });
+            layer.forEach((it) => {
+              it.setVisible(true);
+            });
+            const layerDisabled = this.instance
+              .get("map")
+              .getAllLayers()
+              .filter((itemInfo) => {
+                return itemInfo.get("id") === "img_c";
+              });
+            layerDisabled.forEach((it) => {
+              it.setVisible(false);
+            });
+          }
+        });
+      }
+    },
     /**
      * @description: 切换当前位置
      * @param {Array} position 中心点位置
@@ -186,11 +460,6 @@ export default {
         });
       }
     },
-
-    /* 生命周期函数 */
-    beforeDestroy() {
-      this.instance.clear();
-    },
   },
 };
 </script>
@@ -199,6 +468,7 @@ export default {
 .map-container {
   width: 100%;
   height: 100%;
+  position: relative;
 
   #map-0 {
     width: 100%;
@@ -209,7 +479,7 @@ export default {
     width: 100%;
     height: 100%;
   }
-
+  // 放大缩小控件
   .control-container {
     display: flex;
     flex-direction: column;
@@ -219,10 +489,61 @@ export default {
     left: 1rem;
     top: 1rem;
 
+    .draw-map {
+      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);
+      }
+    }
+
+    .change-map {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      width: 1.5rem;
+      height: 3rem;
+      background-color: rgb(198, 216, 216);
+
+      i {
+        cursor: pointer;
+        padding: 0.1rem 0;
+        font-size: 1.2rem;
+      }
+
+      .change-map-click {
+        background-color: rgb(240, 240, 240);
+      }
+    }
+
+    .map-btn {
+      width: 1.5rem;
+      background-color: rgb(198, 216, 216);
+      height: 1.5rem;
+      display: flex;
+      margin: 0.1rem 0;
+      align-items: center;
+      justify-content: center;
+
+      i {
+        cursor: pointer;
         padding: 0.1rem 0;
         font-size: 1.2rem;
       }
     }
+  }
 }
 </style>

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

@@ -0,0 +1,192 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-16 10:00:40
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-17 09:10:38
+ * @FilePath: \znxjxt-ui\src\views\xj\route\route-scope\components\scope-add.vue
+ * @Description: 作业范围-新增编辑弹窗
+-->
+
+<template>
+  <div class="add-content">
+    <div class="add-form">
+      <el-form
+        ref="dialogForm"
+        :model="dialogForm"
+        :rules="rules"
+        label-width="120px"
+      >
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="作业范围名称" prop="segCode">
+              <el-input
+                v-model="dialogForm.segCode"
+                placeholder="请输入作业范围名称"
+                clearable
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="绑定车辆" prop="roadType">
+              <el-select
+                v-model="dialogForm.roadType"
+                placeholder="请选择绑定车辆"
+              >
+                <el-option
+                  v-for="dict in bindCarList"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="24">
+            <el-form-item label="作业范围" prop="coordinates">
+              <el-input
+                type="textarea"
+                :disabled="true"
+                v-model="dialogForm.coordinates"
+                rows="3"
+                resize="none"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="bottom-map">
+      <fssm-map
+        @endEoordinate="geteoordinate"
+        :editCoordinates="editCoordinates"
+        :showChange="true"
+        :showZoom="false"
+        :showDraw="true"
+      ></fssm-map>
+    </div>
+    <div class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addScope, updateScope } from "@/api/xj/scope";
+import FssmMap from "@/components/map/fssm-map";
+export default {
+  components: { FssmMap },
+  name: "ScopeAdd",
+  props: {
+    dialogItem: {
+      type: Object,
+      default: () => {},
+    },
+    bindCarList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      // 表单绑定
+      dialogForm: {
+        segCode: "",
+        roadType: "",
+        coordinates: "",
+      },
+      rules: {
+        segCode: [
+          { required: true, message: "作业范围名称不能为空", trigger: "blur" },
+        ],
+        roadType: [
+          { required: true, message: "请选择绑定车辆", trigger: "change" },
+        ],
+        coordinates: [
+          {
+            required: true,
+            message: "请在下方地图添加作业范围",
+            trigger: "blur",
+          },
+        ],
+      },
+      editCoordinates: [],
+    };
+  },
+  watch: {
+    dialogItem: {
+      handler(val) {
+        if (val.title === "修改") {
+          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";
+          this.dialogForm.coordinates = a;
+          this.editCoordinates = a.split(";").map((item) => {
+            return item.split(",");
+          });
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  created() {},
+  methods: {
+    /* 获取多边形坐标方法 */
+    geteoordinate(list) {
+      this.dialogForm.coordinates = list.join(";");
+    },
+    /* 点击取消事件 */
+    cancel() {
+      this.$emit("addCancel");
+    },
+    /* 点击确认事件 */
+    submitForm() {
+      this.$refs["dialogForm"].validate((valid) => {
+        if (valid) {
+          if (this.dialogItem.title === "修改") {
+            updateScope(this.dialogForm).then(({ data, code }) => {
+              if (code === 200) {
+                this.$emit("addCancel");
+              }
+            });
+          } else {
+            addScope(this.dialogForm).then(({ data, code }) => {
+              if (code === 200) {
+                this.$emit("addCancel");
+              }
+            });
+          }
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.add-content {
+  width: 100%;
+  height: 100%;
+
+  .add-form {
+    .el-select {
+      width: 100%;
+    }
+  }
+
+  .bottom-map {
+    width: 100%;
+    height: 30rem;
+  }
+
+  .dialog-footer {
+    width: 100%;
+    height: 2.5rem;
+    margin-top: 1rem;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

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

@@ -0,0 +1,296 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-16 09:42:28
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-16 10:40:11
+ * @FilePath: \znxjxt-ui\src\views\xj\route\route-scope\index.vue
+ * @Description: 路线管理-作业范围
+-->
+
+<template>
+  <div class="section-content">
+    <!-- 搜索表单 -->
+    <div class="section-form">
+      <el-form
+        :model="sectionForm"
+        ref="queryForm"
+        size="small"
+        :inline="true"
+        label-width="6rem"
+      >
+        <el-form-item label="作业范围名称" prop="name">
+          <el-input
+            v-model="sectionForm.name"
+            placeholder="请输入作业范围名称"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 操作按钮 -->
+    <div class="btn-row">
+      <el-button
+        type="primary"
+        plain
+        icon="el-icon-plus"
+        size="mini"
+        @click="handleAdd"
+        >新增
+      </el-button>
+    </div>
+    <!-- 列表 -->
+    <el-table
+      ref="roadTable"
+      v-loading="loading"
+      :data="sectionList"
+      @selection-change="handleSelectionChange"
+      style="width: 100%"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column
+        width="300"
+        label="作业范围名称"
+        align="center"
+        prop="segmentCode"
+      />
+      <el-table-column label="绑定车辆" align="center" prop="name" />
+      <el-table-column
+        width="200"
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="editTable(scope.row)"
+            >修改
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="deleteTable(scope.row)"
+            >删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <div class="pagination-part">
+      <el-pagination
+        background
+        :current-page.sync="pagination.page"
+        @current-change="handleCurrentChange"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size.sync="pagination.size"
+        @size-change="handleSizeChange"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="tableTotal"
+      >
+      </el-pagination>
+    </div>
+    <!-- 新增/修改弹窗 -->
+    <el-dialog
+      :title="addTitle"
+      :visible.sync="addVisible"
+      width="60%"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="addCancel"
+    >
+      <scope-add
+        :bindCarList="bindCarList"
+        :dialogItem="dialogItem"
+        @addCancel="addCancel"
+      ></scope-add>
+    </el-dialog>
+  </div>
+</template>
+  
+  <script>
+import { getScopeList, deleteScope, getCarList } from "@/api/xj/scope";
+import ScopeAdd from "./components/scope-add.vue";
+
+export default {
+  components: { ScopeAdd },
+  name: "RouteScope",
+  data() {
+    return {
+      // 搜索表单
+      sectionForm: {
+        // segmentCode: "",
+        name: "",
+      },
+      // 查询表单
+      searchForm: {},
+      // 列表加载状态
+      loading: false,
+      // 非多个禁用
+      multiple: true,
+      // 列表数据
+      sectionList: [],
+      // 列表已选数组
+      checkIds: [],
+      // 分页-列表总数
+      tableTotal: 0,
+      // 分页-页数页码
+      pagination: {
+        page: 1,
+        size: 10,
+      },
+      // 绑定车辆下拉
+      bindCarList: [],
+      // 弹窗标题
+      addTitle: "",
+      // 弹窗显隐控制
+      addVisible: false,
+      // 传弹窗数据
+      dialogItem: {},
+    };
+  },
+  mounted() {},
+  created() {
+    this.getTableList();
+    this.getBindCar();
+  },
+  methods: {
+    /* 获取绑定车辆下拉 */
+    getBindCar() {
+      getCarList().then(({ data, code }) => {
+        if (code === 200) {
+          this.bindCarList = data;
+        }
+      });
+    },
+    /* 点击搜索事件 */
+    handleQuery() {
+      this.searchForm = JSON.parse(JSON.stringify(this.sectionForm));
+      this.getTableList();
+    },
+    /* 点击重置事件 */
+    resetQuery() {
+      this.sectionForm = {
+        // segmentCode: "",
+        name: "",
+      };
+      this.searchForm = {};
+      this.getTableList();
+    },
+    /* 获取列表数据 */
+    getTableList() {
+      const params = {
+        ...this.searchForm,
+        ...this.pagination,
+      };
+      getScopeList(params).then(({ code, data }) => {
+        if (code === 200) {
+          this.sectionList = data.rows;
+        }
+      });
+    },
+    /* 点击新增 */
+    handleAdd() {
+      this.addTitle = "新增作业范围";
+      this.dialogItem = {
+        title: "新增",
+      };
+      this.addVisible = true;
+    },
+    /* 列表选择改变事件 */
+    handleSelectionChange(selection) {
+      this.checkIds = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /* 列表修改事件 */
+    editTable() {
+      this.addTitle = "修改作业范围";
+      this.dialogItem = {
+        title: "修改",
+      };
+      this.addVisible = true;
+    },
+    /* 列表删除/批量删除事件 */
+    deleteTable(row) {
+      const checkIds = row ? [row.id] : this.checkIds;
+      if (!checkIds.length) {
+        this.$modal.msgWarning("请选择要删除的记录");
+        return;
+      }
+      this.$modal
+        .confirm(`是否确认删除选中的${checkIds.length}条记录？`)
+        .then(() => {
+          return deleteScope(checkIds);
+        })
+        .then(() => {
+          this.getTableList();
+          this.$refs.roadTable.clearSelection();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    /* 切换分页 */
+    handleCurrentChange(arg) {
+      this.pagination.page = arg;
+      this.getTableList();
+    },
+    /* 切换每条/页 */
+    handleSizeChange(arg) {
+      this.pagination.size = arg;
+      this.getTableList();
+    },
+    /* 关闭弹窗事件 */
+    addCancel() {
+      this.addTitle = "";
+      this.dialogItem = {};
+      this.addVisible = false;
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.section-content {
+  width: 100%;
+  height: calc(100vh - 5.3rem);
+  padding: 1rem;
+}
+
+.section-form {
+  width: 100%;
+  height: 5%;
+}
+
+.btn-row {
+  height: 6%;
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+}
+
+/* 分页样式 */
+.pagination-part {
+  width: 100%;
+  display: flex;
+  padding-top: 1rem;
+  justify-content: flex-end;
+}
+</style>
+  

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

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-15 14:27:36
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-16 09:36:51
+ * @LastEditTime: 2024-10-16 10:28:42
  * @FilePath: \znxjxt-ui\src\views\xj\route\route-section\components\section-add.vue
  * @Description: 道路段-新增/编辑弹窗
 -->
@@ -172,6 +172,7 @@
                   :disabled="true"
                   v-model="dialogForm.coordinates"
                   rows="4"
+                  resize="none"
                 ></el-input>
               </el-form-item>
             </el-col>