编辑路线时提高svg层级

src/views/mapPage/realTimeMap/editMap.vue

@@ -669,7 +669,12 @@
             <svg
               :width="imgBgObj.width"
               :height="imgBgObj.height"
-              style="position: absolute; top: 0; left: 0; z-index: 9"
+              :style="{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                zIndex: state.svgRouteZIndex
+              }"
               id="svgId"
             >
               <!-- 实时绘制当前直线 -->
@@ -753,27 +758,49 @@
                       stroke-dasharray="4"
                       stroke-width="2"
                     />
-                    <circle
+                    <!-- 控制点circle已移至SVG末尾 -->
-                      v-if="state.currentDragTarget.index == index"
-                      id="startCircle"
-                      :cx="curve.beginControlX"
-                      :cy="curve.beginControlY"
-                      r="5"
-                      :fill="curve.isSelected ? '#f48924' : '#2d72d9'"
-                      @mousedown="startDrag(curve, index, 'start')"
-                    />
-                    <circle
-                      v-if="state.currentDragTarget.index == index"
-                      id="endCircle"
-                      :cx="curve.endControlX"
-                      :cy="curve.endControlY"
-                      r="5"
-                      :fill="curve.isSelected ? '#f48924' : '#2d72d9'"
-                      @mousedown="startDrag(curve, index, 'end')"
-                    />
                   </template>
                 </template>
               </template>
+              <!-- 控制点circle统一渲染，保证层级最高 -->
+              <template v-if="state.currentDragTarget.index !== null">
+                <circle
+                  id="startCircle"
+                  :cx="state.mapRouteList[state.currentDragTarget.index].beginControlX"
+                  :cy="state.mapRouteList[state.currentDragTarget.index].beginControlY"
+                  r="5"
+                  :fill="
+                    state.mapRouteList[state.currentDragTarget.index].isSelected
+                      ? '#f48924'
+                      : '#2d72d9'
+                  "
+                  @mousedown="
+                    startDrag(
+                      state.mapRouteList[state.currentDragTarget.index],
+                      state.currentDragTarget.index,
+                      'start'
+                    )
+                  "
+                />
+                <circle
+                  id="endCircle"
+                  :cx="state.mapRouteList[state.currentDragTarget.index].endControlX"
+                  :cy="state.mapRouteList[state.currentDragTarget.index].endControlY"
+                  r="5"
+                  :fill="
+                    state.mapRouteList[state.currentDragTarget.index].isSelected
+                      ? '#f48924'
+                      : '#2d72d9'
+                  "
+                  @mousedown="
+                    startDrag(
+                      state.mapRouteList[state.currentDragTarget.index],
+                      state.currentDragTarget.index,
+                      'end'
+                    )
+                  "
+                />
+              </template>
             </svg>
           </div>
         </div>
@@ -1684,7 +1711,8 @@ const state = reactive({
   MathPI: Math.PI,
   routeDirection: 2, //1单2双
   vLine: [],
-  hLine: []
+  hLine: [],
+  svgRouteZIndex: 9
 })
 
 const getRefLineParams = (params) => {
@@ -1778,6 +1806,13 @@ const toolbarClick = async (item) => {
     state.cursorStyle = `auto`
   }
 
+  //编辑路线的时候更换svg层级
+  if (toolbarSwitchType.value === 'editRoute') {
+    state.svgRouteZIndex = 999
+  } else {
+    state.svgRouteZIndex = 9
+  }
+
   //非测距
   if (toolbarSwitchType.value !== 'ranging') {
     state.measureDistancesPoints = [] // 清空存储点击的点位

stylelint.config.js

@@ -57,156 +57,11 @@ module.exports = {
       {
         severity: 'warning'
       }
-    ],
-    // Specify the alphabetical order of the attributes in the declaration block
-    'order/properties-order': [
-      'position',
-      'top',
-      'right',
-      'bottom',
-      'left',
-      'z-index',
-      'display',
-      'float',
-      'width',
-      'height',
-      'max-width',
-      'max-height',
-      'min-width',
-      'min-height',
-      'padding',
-      'padding-top',
-      'padding-right',
-      'padding-bottom',
-      'padding-left',
-      'margin',
-      'margin-top',
-      'margin-right',
-      'margin-bottom',
-      'margin-left',
-      'margin-collapse',
-      'margin-top-collapse',
-      'margin-right-collapse',
-      'margin-bottom-collapse',
-      'margin-left-collapse',
-      'overflow',
-      'overflow-x',
-      'overflow-y',
-      'clip',
-      'clear',
-      'font',
-      'font-family',
-      'font-size',
-      'font-smoothing',
-      'osx-font-smoothing',
-      'font-style',
-      'font-weight',
-      'hyphens',
-      'src',
-      'line-height',
-      'letter-spacing',
-      'word-spacing',
-      'color',
-      'text-align',
-      'text-decoration',
-      'text-indent',
-      'text-overflow',
-      'text-rendering',
-      'text-size-adjust',
-      'text-shadow',
-      'text-transform',
-      'word-break',
-      'word-wrap',
-      'white-space',
-      'vertical-align',
-      'list-style',
-      'list-style-type',
-      'list-style-position',
-      'list-style-image',
-      'pointer-events',
-      'cursor',
-      'background',
-      'background-attachment',
-      'background-color',
-      'background-image',
-      'background-position',
-      'background-repeat',
-      'background-size',
-      'border',
-      'border-collapse',
-      'border-top',
-      'border-right',
-      'border-bottom',
-      'border-left',
-      'border-color',
-      'border-image',
-      'border-top-color',
-      'border-right-color',
-      'border-bottom-color',
-      'border-left-color',
-      'border-spacing',
-      'border-style',
-      'border-top-style',
-      'border-right-style',
-      'border-bottom-style',
-      'border-left-style',
-      'border-width',
-      'border-top-width',
-      'border-right-width',
-      'border-bottom-width',
-      'border-left-width',
-      'border-radius',
-      'border-top-right-radius',
-      'border-bottom-right-radius',
-      'border-bottom-left-radius',
-      'border-top-left-radius',
-      'border-radius-topright',
-      'border-radius-bottomright',
-      'border-radius-bottomleft',
-      'border-radius-topleft',
-      'content',
-      'quotes',
-      'outline',
-      'outline-offset',
-      'opacity',
-      'filter',
-      'visibility',
-      'size',
-      'zoom',
-      'transform',
-      'box-align',
-      'box-flex',
-      'box-orient',
-      'box-pack',
-      'box-shadow',
-      'box-sizing',
-      'table-layout',
-      'animation',
-      'animation-delay',
-      'animation-duration',
-      'animation-iteration-count',
-      'animation-name',
-      'animation-play-state',
-      'animation-timing-function',
-      'animation-fill-mode',
-      'transition',
-      'transition-delay',
-      'transition-duration',
-      'transition-property',
-      'transition-timing-function',
-      'background-clip',
-      'backface-visibility',
-      'resize',
-      'appearance',
-      'user-select',
-      'interpolation-mode',
-      'direction',
-      'marks',
-      'page',
-      'set-link-source',
-      'unicode-bidi',
-      'speak'
     ]
+    // Specify the alphabetical order of the attributes in the declaration block
+    // 'order/properties-order': [
+    //   ...
+    // ],
   },
   ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
   overrides: [