编辑地图 路线的方向改为 双向按照开始点到结束点 结束点到开始点两条路线来选择 选择种类新增正向 反向和随意方向

src/views/mapPage/realTimeMap/components-tool/editMapRouteDialog.vue

@@ -3,11 +3,11 @@
   <Dialog
     v-model="dialogFormVisible"
     title="编辑路线"
-    width="780"
+    width="840"
     class="map-edit-route-dialog"
     @close="dialogClose"
   >
-    <el-form :model="form" label-width="120" ref="ruleFormRef" :rules="rules">
+    <el-form :model="form" label-width="130" ref="ruleFormRef" :rules="rules">
       <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item label="开始点位序号" prop="startingSortNum">
@@ -102,24 +102,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="30">
+
-        <el-col :span="12">
-          <el-form-item label="行走方法" prop="method" required>
-            <el-select v-model="form.method" placeholder="请选择行走方法" @change="methodChange">
-              <el-option label="直线" :value="0" />
-              <el-option label="曲线" :value="1" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="方向" prop="direction" required>
-            <el-select v-model="form.direction" placeholder="请选择方向" @change="directionChange">
-              <el-option label="单向" :value="1" />
-              <el-option label="双向" :value="2" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
       <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item label="膨胀区域前" prop="expansionZoneFront" required>
@@ -190,6 +173,25 @@
       </el-row>
       <el-row :gutter="30">
         <el-col :span="12">
+          <el-form-item label="行走方法" prop="method" required>
+            <el-select v-model="form.method" placeholder="请选择行走方法" @change="methodChange">
+              <el-option label="直线" :value="0" />
+              <el-option label="曲线" :value="1" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="方向" prop="direction" required>
+            <el-select v-model="form.direction" placeholder="请选择方向">
+              <el-option label="单向" :value="1" />
+              <el-option label="双向" :value="2" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="30">
+        <!-- 单向 -->
+        <el-col :span="12" v-if="form.direction === 1">
           <el-form-item label="车头朝向" prop="toward" required>
             <el-select v-model="form.toward" placeholder="请选择车头朝向">
               <el-option
@@ -198,8 +200,43 @@
                 :label="item.label"
                 :value="item.value"
               />
-            </el-select> </el-form-item
+            </el-select>
-        ></el-col>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" v-if="form.direction === 2">
+          <el-form-item
+            :label="'开始点' + form.startingSortNum + '到结束点' + form.endPointSortNum"
+            prop="startToEndToward"
+            required
+            label-width="180"
+          >
+            <el-select v-model="form.startToEndToward" placeholder="请选择车头朝向">
+              <el-option
+                v-for="(item, index) in towardList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" v-if="form.direction === 2">
+          <el-form-item
+            :label="'结束点' + form.endPointSortNum + '到开始点' + form.startingSortNum"
+            prop="endToStartToward"
+            required
+            label-width="180"
+          >
+            <el-select v-model="form.endToStartToward" placeholder="请选择车头朝向">
+              <el-option
+                v-for="(item, index) in towardList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
       </el-row>
     </el-form>
     <template #footer>
@@ -301,18 +338,53 @@ const form = ref({
   direction: 2, //方向 1.单向 2.双向
   forwardSpeedLimit: 1.5, //正向限速
   reverseSpeedLimit: 0.4, //	反向限速
-  toward: 0 //车头朝向  0:正正 1:正反 2:反正 3:反反
+  toward: 0, //车头朝向(0:正正 1:正反 2:反正 3:反反 4正随 5随正 6随反 7反随 8随随 如果是单向的话 0代表正 1代表反 2代表随意
+  startToEndToward: 0, //开始点到结束点车头朝向
+  endToStartToward: 0 //结束点到开始点车头朝向
 })
 
 const open = (item) => {
   dialogFormVisible.value = true
   form.value = item
-  if (form.value.direction == 1) {
+  if (form.value.direction == 2) {
-    //单向
-    towardList.value = unidirectional
-  } else {
     //双向
-    towardList.value = bidirectional
+    if (item.toward === 0) {
+      //正正
+      form.value.startToEndToward = 0
+      form.value.endToStartToward = 0
+    } else if (item.toward === 1) {
+      //正反
+      form.value.startToEndToward = 0
+      form.value.endToStartToward = 1
+    } else if (item.toward === 2) {
+      //反正
+      form.value.startToEndToward = 1
+      form.value.endToStartToward = 0
+    } else if (item.toward === 3) {
+      //反反
+      form.value.startToEndToward = 1
+      form.value.endToStartToward = 1
+    } else if (item.toward === 4) {
+      // 4正随
+      form.value.startToEndToward = 0
+      form.value.endToStartToward = 2
+    } else if (item.toward === 5) {
+      //5随正
+      form.value.startToEndToward = 2
+      form.value.endToStartToward = 0
+    } else if (item.toward === 6) {
+      //6随反
+      form.value.startToEndToward = 2
+      form.value.endToStartToward = 1
+    } else if (item.toward === 7) {
+      //7反随
+      form.value.startToEndToward = 1
+      form.value.endToStartToward = 2
+    } else if (item.toward === 8) {
+      //8随随
+      form.value.startToEndToward = 2
+      form.value.endToStartToward = 2
+    }
   }
 }
 
@@ -323,6 +395,7 @@ const dialogClose = () => {
 const emit = defineEmits(['editMapRouteDialogSubmit', 'addEventListener'])
 const submitForm = async (formEl) => {
   if (!formEl) return
+  await checkToward()
   await formEl.validate(async (valid, fields) => {
     if (valid) {
       let actualStartPoint = disposeEventPoint(form.value.startPointX, form.value.startPointY)
@@ -373,46 +446,46 @@ const methodChange = (e) => {
   }
 }
 
-//方向改变
+const checkToward = () => {
-const towardList = ref([])
+  //如果是双向
-const unidirectional = [
+  if (form.value.direction !== 2) return
-  {
+  //车头朝向(0:正正 1:正反 2:反正 3:反反 4正随 5随正 6随反 7反随 8随随
-    value: 0,
+  if (form.value.startToEndToward === 0 && form.value.endToStartToward === 0) {
-    label: '正'
+    form.value.toward = 0
-  },
+  } else if (form.value.startToEndToward === 0 && form.value.endToStartToward === 1) {
-  {
+    form.value.toward = 1
-    value: 1,
+  } else if (form.value.startToEndToward === 1 && form.value.endToStartToward === 0) {
-    label: '反'
+    form.value.toward = 2
+  } else if (form.value.startToEndToward === 1 && form.value.endToStartToward === 1) {
+    form.value.toward = 3
+  } else if (form.value.startToEndToward === 0 && form.value.endToStartToward === 2) {
+    form.value.toward = 4
+  } else if (form.value.startToEndToward === 2 && form.value.endToStartToward === 0) {
+    form.value.toward = 5
+  } else if (form.value.startToEndToward === 2 && form.value.endToStartToward === 1) {
+    form.value.toward = 6
+  } else if (form.value.startToEndToward === 1 && form.value.endToStartToward === 2) {
+    form.value.toward = 7
+  } else if (form.value.startToEndToward === 2 && form.value.endToStartToward === 2) {
+    form.value.toward = 8
   }
-] //单向
+}
-const bidirectional = [
+
+//方向改变
+const towardList = ref([
   {
     value: 0,
-    label: '正正'
+    label: '前进'
   },
   {
     value: 1,
-    label: '正反'
+    label: '倒车'
   },
   {
     value: 2,
-    label: '反正'
+    label: '不限制方向'
-  },
-  {
-    value: 3,
-    label: '反反'
   }
-] //双向
+])
-const directionChange = (e) => {
-  form.value.toward = 0
-  if (e == 1) {
-    //单向
-    towardList.value = unidirectional
-  } else {
-    //双向
-    towardList.value = bidirectional
-  }
-}
 
 //传入x y轴坐标
 const disposeEventPoint = (x, y) => {

src/views/mapPage/realTimeMap/editMap.vue

@@ -495,7 +495,6 @@
                       :stroke="curve.isSelected ? '#f48924' : '#2d72d9'"
                       stroke-width="5"
                       @click="handleChooseRoute(curve, index)"
-                      @dblclick="handleEditRoute(curve, index)"
                     />
                     <text
                       style="user-select: none"
@@ -505,6 +504,7 @@
                       text-anchor="middle"
                       fill="black"
                       v-if="curve.isSelected"
+                      @click="handleChooseRoute(curve, index)"
                     >
                       {{ calculateRouteLength(curve, 'line') }}米
                     </text>
@@ -518,7 +518,6 @@
                       stroke-width="5"
                       fill="none"
                       @click="handleChooseRoute(curve, index)"
-                      @dblclick="handleEditRoute(curve, index)"
                     />
                     <text
                       style="user-select: none"
@@ -528,6 +527,7 @@
                       text-anchor="middle"
                       fill="black"
                       v-if="curve.isSelected"
+                      @click="handleChooseRoute(curve, index)"
                     >
                       {{ calculateRouteLength(curve, 'curve') }}米
                     </text>
@@ -2417,17 +2417,7 @@ const getCurvePath = (curve) => {
   curve.curvePath = path
   return path
 }
-//编辑路线 双击
+// 编辑路线
-const handleEditRoute = (item, index) => {
-  state.mapRouteList.forEach((curve, i) => {
-    curve.isSelected = i === index
-  })
-  state.currentDragTarget.index = index
-  state.selectedCurve = item
-  removeEventListener() //移除监听
-  editMapRouteDialogRef.value.open(JSON.parse(JSON.stringify(item)))
-}
-//单击 选中
 const handleChooseRoute = (item, index) => {
   state.mapRouteList.forEach((curve, i) => {
     curve.isSelected = i === index
@@ -2436,6 +2426,11 @@ const handleChooseRoute = (item, index) => {
   state.currentDragTarget.index = index
   //让节点不选中
   state.currentItemIndex = -1
+
+  if (toolbarSwitchType.value === 'editRoute') {
+    removeEventListener() //移除监听
+    editMapRouteDialogRef.value.open(JSON.parse(JSON.stringify(item)))
+  }
 }
 //编辑路线成功
 const editMapRouteDialogSubmit = (form) => {