Merge branch 'dev' of http://192.168.0.115:3000/bill/traffic-laser into dev

src/graphic/CanvasStyle/ImageLabels/SVGIcons.js

@@ -1,75 +1,5 @@
 const SVGIcons = {
-  ZebraCrossing: {
-    text: "尸体",
-    draw: function (ctx, fillStyle, strokeStyle) {
-      ctx.save();
-      ctx.strokeStyle = "rgba(0,0,0,0)";
-      ctx.miterLimit = 4;
-      // ctx.font="15px ''";
-      ctx.fillStyle = "rgba(0,0,0,0)";
-      // ctx.font="   15px ''";
-      ctx.save();
-      ctx.fillStyle = fillStyle;
-      ctx.strokeStyle = strokeStyle;
-      // ctx.font="   15px ''";
-      ctx.beginPath();
-      ctx.arc(32, 13, 8, 0, 6.283185307179586, false);
-      ctx.closePath();
-      ctx.fill();
-      ctx.stroke();
-      ctx.restore();
-      ctx.save();
-      ctx.fillStyle = "rgba(0,0,0,0)";
-      ctx.strokeStyle = strokeStyle;
-      ctx.lineCap = "round";
-      ctx.lineJoin = "round";
-      // ctx.font="   15px ''";
-      ctx.beginPath();
-      ctx.moveTo(32, 44.5);
-      ctx.lineTo(24, 59.5);
-      ctx.fill();
-      ctx.stroke();
-      ctx.restore();
-      ctx.save();
-      ctx.fillStyle = "rgba(0,0,0,0)";
-      ctx.strokeStyle = strokeStyle;
-      ctx.lineCap = "round";
-      ctx.lineJoin = "round";
-      // ctx.font="   15px ''";
-      ctx.beginPath();
-      ctx.moveTo(32, 44.5);
-      ctx.lineTo(40, 59.5);
-      ctx.fill();
-      ctx.stroke();
-      ctx.restore();
-      ctx.save();
-      ctx.fillStyle = "rgba(0,0,0,0)";
-      ctx.strokeStyle = strokeStyle;
-      ctx.lineCap = "round";
-      ctx.lineJoin = "round";
-      // ctx.font="   15px ''";
-      ctx.beginPath();
-      ctx.moveTo(25, 33);
-      ctx.lineTo(32, 21);
-      ctx.lineTo(39, 33);
-      ctx.fill();
-      ctx.stroke();
-      ctx.restore();
-      ctx.save();
-      ctx.fillStyle = "rgba(0,0,0,0)";
-      ctx.strokeStyle = strokeStyle;
-      ctx.lineCap = "round";
-      ctx.lineJoin = "round";
-      // ctx.font="   15px ''";
-      ctx.beginPath();
-      ctx.moveTo(32, 21);
-      ctx.lineTo(32, 44.5);
-      ctx.fill();
-      ctx.stroke();
-      ctx.restore();
-      ctx.restore();
-    },
-  },
+ 
   "chemotuoche_p.svg": {
     text: "侧三轮平面",
     draw: function (ctx, fillStyle, strokeStyle) {
@@ -4280,11 +4210,7 @@ export const imageTypeKeys = [
     ],
   },
 
-  // 道路结构
-  {
-    type: "道路结构",
-    children: ["ZebraCrossing"],
-  },
+ 
 ];
 
 export default SVGIcons;

src/graphic/Controls/AddRoad.js

@@ -69,9 +69,12 @@ export default class AddRoad {
         if (hasComputerRoadIds.indexOf(key) < 0) {
           roadService.setLanes(key);
           hasComputerRoadIds.push(key);
+          let road = dataService.getRoad(key);
+          roadService.initRoadWidthTipsPos(road);
         }
       }
     }
+ 
     listenLayer.clear();
     this.clear();
   }

src/graphic/Controls/MoveRoad.js

@@ -44,13 +44,21 @@ export default class MoveRoad {
     // }
     this.adsorbPointRoads = {};
     this.splitRoadId = null;
-    let flag = this.canMoveForPoint(pointId, position, linkedRoadPointId, linkedRoadId);
+    let flag = this.canMoveForPoint(
+      pointId,
+      position,
+      linkedRoadPointId,
+      linkedRoadId
+    );
 
     if (!flag) {
       return false;
     }
 
-    if (this.splitRoadId == null && Object.keys(this.adsorbPointRoads).length > 0) {
+    if (
+      this.splitRoadId == null &&
+      Object.keys(this.adsorbPointRoads).length > 0
+    ) {
       //要吸附一下
       const adsorbPointId = Object.keys(this.adsorbPointRoads)[0];
       const road = dataService.getRoad(this.adsorbPointRoads[adsorbPointId]);
@@ -66,8 +74,14 @@ export default class MoveRoad {
       point.setPosition(position);
     }
     // 与别的墙角重合
-    else if (modifyPoint.hasOwnProperty("linkedRoadPointId") && modifyPoint.linkedRoadPointId != null) {
-      const roadId = roadService.getRoadId(pointId, modifyPoint.linkedRoadPointId);
+    else if (
+      modifyPoint.hasOwnProperty("linkedRoadPointId") &&
+      modifyPoint.linkedRoadPointId != null
+    ) {
+      const roadId = roadService.getRoadId(
+        pointId,
+        modifyPoint.linkedRoadPointId
+      );
       // pointId与linkedPointId属于同一堵墙，不允许，所以不移动
       if (roadId != null) {
         return false;
@@ -83,15 +97,24 @@ export default class MoveRoad {
       const endPoint = dataService.getRoadPoint(road.endId);
 
       // 与其余墙角的距离过短，不允许拖动
-      if (mathUtil.getDistance(startPoint, position) < Constant.minRealDis || mathUtil.getDistance(endPoint, position) < Constant.minRealDis) {
+      if (
+        mathUtil.getDistance(startPoint, position) < Constant.minRealDis ||
+        mathUtil.getDistance(endPoint, position) < Constant.minRealDis
+      ) {
         return false;
       }
       point.setPosition(modifyPoint);
     } else if (modifyPoint.hasOwnProperty("linkedCurveRoadPointId")) {
       point.setPosition(position);
-    } else if (modifyPoint.hasOwnProperty("linkedRoadPointIdX") && modifyPoint.linkedRoadPointIdX) {
+    } else if (
+      modifyPoint.hasOwnProperty("linkedRoadPointIdX") &&
+      modifyPoint.linkedRoadPointIdX
+    ) {
       point.setPosition(position);
-    } else if (modifyPoint.hasOwnProperty("linkedRoadPointIdY") && modifyPoint.linkedRoadPointIdY) {
+    } else if (
+      modifyPoint.hasOwnProperty("linkedRoadPointIdY") &&
+      modifyPoint.linkedRoadPointIdY
+    ) {
       point.setPosition(position);
     } else {
       return false;
@@ -151,13 +174,30 @@ export default class MoveRoad {
   }
 
   finishByMoveRoadPoint(point) {
-    if (listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("linkedRoadPointId")) {
+    if (
+      listenLayer.modifyPoint &&
+      listenLayer.modifyPoint.hasOwnProperty("linkedRoadPointId")
+    ) {
       this.moveTo(point.vectorId, listenLayer.modifyPoint.linkedRoadPointId);
-    } else if (listenLayer.modifyPoint && (listenLayer.modifyPoint.linkedRoadPointIdX || listenLayer.modifyPoint.linkedRoadPointIdY)) {
+    } else if (
+      listenLayer.modifyPoint &&
+      (listenLayer.modifyPoint.linkedRoadPointIdX ||
+        listenLayer.modifyPoint.linkedRoadPointIdY)
+    ) {
       mathUtil.clonePoint(point, listenLayer.modifyPoint);
-    } else if (listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("linkedRoadId")) {
-      roadService.splitRoad(listenLayer.modifyPoint.linkedRoadId, point.vectorId, "start");
+    } else if (
+      listenLayer.modifyPoint &&
+      listenLayer.modifyPoint.hasOwnProperty("linkedRoadId")
+    ) {
+      roadService.splitRoad(
+        listenLayer.modifyPoint.linkedRoadId,
+        point.vectorId,
+        "start"
+      );
       edgeService.updateEdgeForMovePoint(point.vectorId);
+      if (listenLayer.modifyPoint.linkedRoadId == this.splitRoadId) {
+        this.splitRoadId = null;
+      }
     }
     // else if (this.splitRoadId != null) {
     //   roadService.splitRoad(this.splitRoadId, point.vectorId, "start");
@@ -206,7 +246,10 @@ export default class MoveRoad {
     const startPoint = dataService.getRoadPoint(road.startId);
 
     function sortNumber(a, b) {
-      return mathUtil.getDistance(startPoint, a.join) - mathUtil.getDistance(startPoint, b.join);
+      return (
+        mathUtil.getDistance(startPoint, a.join) -
+        mathUtil.getDistance(startPoint, b.join)
+      );
     }
 
     joins = joins.sort(sortNumber.bind(this));
@@ -224,7 +267,10 @@ export default class MoveRoad {
       let splitRoad = dataService.getRoad(this.splitRoadId);
       let splitRoadStartPoint = dataService.getRoadPoint(splitRoad.startId);
       let splitRoadEndPoint = dataService.getRoadPoint(splitRoad.endId);
-      let splitLine = mathUtil.createLine1(splitRoadStartPoint, splitRoadEndPoint);
+      let splitLine = mathUtil.createLine1(
+        splitRoadStartPoint,
+        splitRoadEndPoint
+      );
       let parent = point.getParent();
       for (let key in parent) {
         let road = dataService.getRoad(key);
@@ -232,10 +278,17 @@ export default class MoveRoad {
         let endPoint = dataService.getRoadPoint(road.endId);
         let line = mathUtil.createLine1(startPoint, endPoint);
         let join = mathUtil.getIntersectionPoint(splitLine, line);
-        if (mathUtil.isContainForSegment(join, startPoint, endPoint) && mathUtil.getDistance(join, splitRoadStartPoint) < Constant.minAdsorbPix) {
+        if (
+          mathUtil.isContainForSegment(join, startPoint, endPoint) &&
+          mathUtil.getDistance(join, splitRoadStartPoint) <
+            Constant.minAdsorbPix
+        ) {
           roadService.splitRoad(key, splitRoadStartPoint.vectorId, "start");
           return splitRoadStartPoint.vectorId;
-        } else if (mathUtil.isContainForSegment(join, startPoint, endPoint) && mathUtil.getDistance(join, splitRoadEndPoint) < Constant.minAdsorbPix) {
+        } else if (
+          mathUtil.isContainForSegment(join, startPoint, endPoint) &&
+          mathUtil.getDistance(join, splitRoadEndPoint) < Constant.minAdsorbPix
+        ) {
           roadService.splitRoad(key, splitRoadEndPoint.vectorId, "end");
           return splitRoadEndPoint.vectorId;
         }
@@ -304,8 +357,16 @@ export default class MoveRoad {
       const startPoint2 = dataService.getRoadPoint(road2.startId);
       const endPoint2 = dataService.getRoadPoint(road2.endId);
 
-      const join1 = mathUtil.getIntersectionPoint4(startPoint1, endPoint1, newLine);
-      const join2 = mathUtil.getIntersectionPoint4(startPoint2, endPoint2, newLine);
+      const join1 = mathUtil.getIntersectionPoint4(
+        startPoint1,
+        endPoint1,
+        newLine
+      );
+      const join2 = mathUtil.getIntersectionPoint4(
+        startPoint2,
+        endPoint2,
+        newLine
+      );
 
       // 取角度大的
       if (join1 == null && join2 == null) {
@@ -344,7 +405,10 @@ export default class MoveRoad {
       let join = mathUtil.getIntersectionPoint(startLimitLine, newLine);
       const tempStartPoint = dataService.getRoadPoint(tempRoad.startId);
       const tempEndPoint = dataService.getRoadPoint(tempRoad.endId);
-      if (angle > Constant.maxAngle || !mathUtil.isPointOnSegment(join, tempStartPoint, tempEndPoint)) {
+      if (
+        angle > Constant.maxAngle ||
+        !mathUtil.isPointOnSegment(join, tempStartPoint, tempEndPoint)
+      ) {
         startLimitLine = mathUtil.getVerticalLine(roadLine, startPoint);
         limitInfos.startRoadId = null;
         limitInfos.newStartRoadId = true;
@@ -380,8 +444,16 @@ export default class MoveRoad {
       const startPoint2 = dataService.getRoadPoint(road2.startId);
       const endPoint2 = dataService.getRoadPoint(road2.endId);
 
-      const join1 = mathUtil.getIntersectionPoint4(startPoint1, endPoint1, newLine);
-      const join2 = mathUtil.getIntersectionPoint4(startPoint2, endPoint2, newLine);
+      const join1 = mathUtil.getIntersectionPoint4(
+        startPoint1,
+        endPoint1,
+        newLine
+      );
+      const join2 = mathUtil.getIntersectionPoint4(
+        startPoint2,
+        endPoint2,
+        newLine
+      );
 
       // 取角度大的
       if (join1 == null && join2 == null) {
@@ -420,7 +492,10 @@ export default class MoveRoad {
       const tempStartPoint = dataService.getRoadPoint(tempRoad.start);
       const tempEndPoint = dataService.getRoadPoint(tempRoad.end);
 
-      if (angle > Constant.maxAngle || !mathUtil.isPointOnSegment(join, tempStartPoint, tempEndPoint)) {
+      if (
+        angle > Constant.maxAngle ||
+        !mathUtil.isPointOnSegment(join, tempStartPoint, tempEndPoint)
+      ) {
         endLimitLine = mathUtil.getVerticalLine(roadLine, endPoint);
         limitInfos.endRoadId = null;
         limitInfos.newEndRoadId = true;
@@ -440,7 +515,13 @@ export default class MoveRoad {
     // 开始考虑第一点
     if (flag) {
       // 不仅仅角度，还有相交
-      flag = this.isOKForCross(pointId, position, point.parent, linkedRoadPointId, linkedRoadId);
+      flag = this.isOKForCross(
+        pointId,
+        position,
+        point.parent,
+        linkedRoadPointId,
+        linkedRoadId
+      );
     }
     return flag;
   }
@@ -596,7 +677,14 @@ export default class MoveRoad {
         const otherPointId = _road.getOtherPointId(pointId);
         const otherPoint = dataService.getRoadPoint(otherPointId);
 
-        const flag = this.isOKForCrossTwoRoad(position, otherPoint, key, linkedRoadPointId, linkedRoadId, _road.vectorId);
+        const flag = this.isOKForCrossTwoRoad(
+          position,
+          otherPoint,
+          key,
+          linkedRoadPointId,
+          linkedRoadId,
+          _road.vectorId
+        );
         // 交叉
         if (!flag) {
           this.adsorbPointRoads = {};
@@ -617,12 +705,28 @@ export default class MoveRoad {
   // position1表示拖拽的点的坐标（修复过了的）
   // position2对应墙的另一头坐标
   // roadId表示其余的墙（与position1无关的墙）
-  isOKForCrossTwoRoad(position1, position2, roadId, linkedRoadPointId, linkedRoadId, dragRoadId) {
+  isOKForCrossTwoRoad(
+    position1,
+    position2,
+    roadId,
+    linkedRoadPointId,
+    linkedRoadId,
+    dragRoadId
+  ) {
     const road = dataService.getRoad(roadId);
     const startPoint = dataService.getRoadPoint(road.startId);
     const endPoint = dataService.getRoadPoint(road.endId);
-    const join = mathUtil.getIntersectionPoint3(position1, position2, startPoint, endPoint);
-    if (join && road.startId != linkedRoadPointId && road.endId != linkedRoadPointId) {
+    const join = mathUtil.getIntersectionPoint3(
+      position1,
+      position2,
+      startPoint,
+      endPoint
+    );
+    if (
+      join &&
+      road.startId != linkedRoadPointId &&
+      road.endId != linkedRoadPointId
+    ) {
       // 交叉了
       this.splitRoadId = roadId;
       return true;
@@ -634,14 +738,20 @@ export default class MoveRoad {
       let join1 = mathUtil.getJoinLinePoint(startPoint, line);
       let join2 = mathUtil.getJoinLinePoint(endPoint, line);
 
-      if (mathUtil.getDistance(join1, startPoint) < Constant.minRealDis && mathUtil.PointInSegment(join1, position1, position2)) {
+      if (
+        mathUtil.getDistance(join1, startPoint) < Constant.minRealDis &&
+        mathUtil.PointInSegment(join1, position1, position2)
+      ) {
         if (road.startId != linkedRoadPointId) {
           // 交叉了
           this.adsorbPointRoads[startPoint.vectorId] = dragRoadId;
           //为了找到全部的吸附点，暂时返回true,在外面一层再做判断
           return true;
         }
-      } else if (mathUtil.getDistance(join2, endPoint) < Constant.minRealDis && mathUtil.PointInSegment(join2, position1, position2)) {
+      } else if (
+        mathUtil.getDistance(join2, endPoint) < Constant.minRealDis &&
+        mathUtil.PointInSegment(join2, position1, position2)
+      ) {
         if (road.endId != linkedRoadPointId) {
           // 交叉了
           this.adsorbPointRoads[endPoint.vectorId] = dragRoadId;
@@ -653,14 +763,28 @@ export default class MoveRoad {
       line = mathUtil.createLine1(startPoint, endPoint);
       join1 = mathUtil.getJoinLinePoint(position1, line);
       join2 = mathUtil.getJoinLinePoint(position2, line);
-      if (mathUtil.getDistance(join1, position1) < Constant.minRealDis && mathUtil.PointInSegment(join1, startPoint, endPoint)) {
-        if (road.startId != linkedRoadPointId && road.endId != linkedRoadPointId && roadId != linkedRoadId) {
+      if (
+        mathUtil.getDistance(join1, position1) < Constant.minRealDis &&
+        mathUtil.PointInSegment(join1, startPoint, endPoint)
+      ) {
+        if (
+          road.startId != linkedRoadPointId &&
+          road.endId != linkedRoadPointId &&
+          roadId != linkedRoadId
+        ) {
           // 交叉了
           //return false
           return true;
         }
-      } else if (mathUtil.getDistance(join2, position2) < Constant.minRealDis && mathUtil.PointInSegment(join2, startPoint, endPoint)) {
-        if (road.startId != linkedRoadPointId && road.endId != linkedRoadPointId && roadId != linkedRoadId) {
+      } else if (
+        mathUtil.getDistance(join2, position2) < Constant.minRealDis &&
+        mathUtil.PointInSegment(join2, startPoint, endPoint)
+      ) {
+        if (
+          road.startId != linkedRoadPointId &&
+          road.endId != linkedRoadPointId &&
+          roadId != linkedRoadId
+        ) {
           // 交叉了
           //return false
           return true;
@@ -675,7 +799,13 @@ export default class MoveRoad {
     const road = dataService.getRoad(roadId);
     const startPoint = dataService.getRoadPoint(road.startId);
     const endPoint = dataService.getRoadPoint(road.endId);
-    let flag = mathUtil.crossTwoLines(position1, position2, startPoint, endPoint, 0.01);
+    let flag = mathUtil.crossTwoLines(
+      position1,
+      position2,
+      startPoint,
+      endPoint,
+      0.01
+    );
     if (flag) {
       // 交叉了
       return false;
@@ -696,7 +826,13 @@ export default class MoveRoad {
     const road = dataService.getRoad(roadId);
     const startPoint = dataService.getRoadPoint(road.startId);
     const endPoint = dataService.getRoadPoint(road.endId);
-    const flag = mathUtil.crossTwoLines(position1, position2, startPoint, endPoint, 0.01);
+    const flag = mathUtil.crossTwoLines(
+      position1,
+      position2,
+      startPoint,
+      endPoint,
+      0.01
+    );
     if (flag) {
       // 交叉了
       return false;
@@ -708,17 +844,26 @@ export default class MoveRoad {
       let join1 = mathUtil.getJoinLinePoint(startPoint, line);
       const join2 = mathUtil.getJoinLinePoint(endPoint, line);
 
-      if (mathUtil.getDistance(join1, startPoint) < Constant.minRealDis && mathUtil.isPointOnSegment(join1, position1, position2)) {
+      if (
+        mathUtil.getDistance(join1, startPoint) < Constant.minRealDis &&
+        mathUtil.isPointOnSegment(join1, position1, position2)
+      ) {
         // 交叉了
         return false;
-      } else if (mathUtil.getDistance(join2, endPoint) < Constant.minRealDis && mathUtil.isPointOnSegment(join2, position1, position2)) {
+      } else if (
+        mathUtil.getDistance(join2, endPoint) < Constant.minRealDis &&
+        mathUtil.isPointOnSegment(join2, position1, position2)
+      ) {
         // 交叉了
         return false;
       }
 
       line = mathUtil.createLine1(startPoint, endPoint);
       join1 = mathUtil.getJoinLinePoint(position1, line);
-      if (mathUtil.getDistance(join1, position1) < Constant.minRealDis && roadService.isContain(road, join1)) {
+      if (
+        mathUtil.getDistance(join1, position1) < Constant.minRealDis &&
+        roadService.isContain(road, join1)
+      ) {
         // 交叉了
         return false;
       }
@@ -734,10 +879,16 @@ export default class MoveRoad {
     let line = mathUtil.createLine1(position1, position2);
     let join1 = mathUtil.getJoinLinePoint(startPoint, line);
     let join2 = mathUtil.getJoinLinePoint(endPoint, line);
-    if (mathUtil.getDistance(join1, startPoint) < Constant.minRealDis && mathUtil.PointInSegment(join1, position1, position2)) {
+    if (
+      mathUtil.getDistance(join1, startPoint) < Constant.minRealDis &&
+      mathUtil.PointInSegment(join1, position1, position2)
+    ) {
       // 交叉了
       return false;
-    } else if (mathUtil.getDistance(join2, endPoint) < Constant.minRealDis && mathUtil.PointInSegment(join2, position1, position2)) {
+    } else if (
+      mathUtil.getDistance(join2, endPoint) < Constant.minRealDis &&
+      mathUtil.PointInSegment(join2, position1, position2)
+    ) {
       // 交叉了
       return false;
     }
@@ -746,10 +897,16 @@ export default class MoveRoad {
     join1 = mathUtil.getJoinLinePoint(position1, line);
     join2 = mathUtil.getJoinLinePoint(position2, line);
 
-    if (mathUtil.getDistance(join1, position1) < Constant.minRealDis && roadService.isContain(road, join1)) {
+    if (
+      mathUtil.getDistance(join1, position1) < Constant.minRealDis &&
+      roadService.isContain(road, join1)
+    ) {
       // 交叉了
       return false;
-    } else if (mathUtil.getDistance(join2, position2) < Constant.minRealDis && roadService.isContain(road, join2)) {
+    } else if (
+      mathUtil.getDistance(join2, position2) < Constant.minRealDis &&
+      roadService.isContain(road, join2)
+    ) {
       // 交叉了
       return false;
     }
@@ -769,8 +926,11 @@ export default class MoveRoad {
         otherPoint = dataService.getRoadPoint(otherPointId);
         // 会吸附另一头
         if (
-          mathUtil.getDistance(virtualPosition, otherPoint) < Constant.minRealDis ||
-          (!roadService.isContain(limitRoad, virtualPosition) && mathUtil.getDistance(virtualPosition, otherPoint) < mathUtil.getDistance(virtualPosition, point))
+          mathUtil.getDistance(virtualPosition, otherPoint) <
+            Constant.minRealDis ||
+          (!roadService.isContain(limitRoad, virtualPosition) &&
+            mathUtil.getDistance(virtualPosition, otherPoint) <
+              mathUtil.getDistance(virtualPosition, point))
         ) {
           mathUtil.clonePoint(virtualPosition, otherPoint);
           adsorb = true;
@@ -865,7 +1025,15 @@ export default class MoveRoad {
   // position5和position6表示road的end一边的线段（endPoint——virtualEndPoint）
   // adsorbPointId1对应start那一头的吸附点
   // adsorbPointId2对应end那一头的吸附点
-  isOKForCrossForMoveRoad(position1, position2, roadId, startPointId, endPointId, adsorbPointId1, adsorbPointId2) {
+  isOKForCrossForMoveRoad(
+    position1,
+    position2,
+    roadId,
+    startPointId,
+    endPointId,
+    adsorbPointId1,
+    adsorbPointId2
+  ) {
     const startPoint = dataService.getRoadPoint(startPointId);
     const endPoint = dataService.getRoadPoint(endPointId);
     let flag = true;
@@ -879,10 +1047,16 @@ export default class MoveRoad {
       let flag2 = true;
 
       const _road = dataService.getRoad(key);
-      if (adsorbPointId1 && (adsorbPointId1 == _road.startId || adsorbPointId1 == _road.endId)) {
+      if (
+        adsorbPointId1 &&
+        (adsorbPointId1 == _road.startId || adsorbPointId1 == _road.endId)
+      ) {
         flag1 = false;
       }
-      if (adsorbPointId2 && (adsorbPointId2 == _road.startId || adsorbPointId2 == _road.endId)) {
+      if (
+        adsorbPointId2 &&
+        (adsorbPointId2 == _road.startId || adsorbPointId2 == _road.endId)
+      ) {
         flag2 = false;
       }
 
@@ -902,7 +1076,11 @@ export default class MoveRoad {
       if (!flag) {
         return false;
       }
-      if (flag1 && _road.startId != startPointId && _road.endId != startPointId) {
+      if (
+        flag1 &&
+        _road.startId != startPointId &&
+        _road.endId != startPointId
+      ) {
         flag = this.isOKForCrossTwoRoad3(position1, startPoint, key);
       }
 
@@ -928,7 +1106,10 @@ export default class MoveRoad {
     const road = dataService.getRoad(roadId);
     const startPoint = dataService.getRoadPoint(road.startId);
     const endPoint = dataService.getRoadPoint(road.endId);
-    if (Object.keys(startPoint.getParent()).length == 1 && Object.keys(endPoint.getParent()).length == 1) {
+    if (
+      Object.keys(startPoint.getParent()).length == 1 &&
+      Object.keys(endPoint.getParent()).length == 1
+    ) {
       const p1 = { x: startPoint.x + dx, y: startPoint.y + dy };
       const p2 = { x: endPoint.x + dx, y: endPoint.y + dy };
 
@@ -1081,7 +1262,9 @@ export default class MoveRoad {
         road1.endId = pointId2;
         point2.setPointParent(roadId1, "end");
       } else {
-        console.error("roadService.moveTo****************************************************");
+        console.error(
+          "roadService.moveTo****************************************************"
+        );
       }
     }
 
@@ -1149,16 +1332,27 @@ export default class MoveRoad {
     const line2 = mathUtil.createLine1(rightEdge.start, rightEdge.end);
     let rightJoin = mathUtil.getJoinLinePoint(position, line2);
 
-    if (dir == "left" && (mathUtil.isContainForSegment(position, join, rightJoin) || mathUtil.isContainForSegment(rightJoin, join, position))) {
+    if (
+      dir == "left" &&
+      (mathUtil.isContainForSegment(position, join, rightJoin) ||
+        mathUtil.isContainForSegment(rightJoin, join, position))
+    ) {
       return;
     }
 
-    if (dir == "right" && (mathUtil.isContainForSegment(position, join, leftJoin) || mathUtil.isContainForSegment(leftJoin, join, position))) {
+    if (
+      dir == "right" &&
+      (mathUtil.isContainForSegment(position, join, leftJoin) ||
+        mathUtil.isContainForSegment(leftJoin, join, position))
+    ) {
       return;
     }
 
     const newWidth = mathUtil.getDisForPoinLine(position, line);
-    if (newWidth > Constant.minRoadSideWidth && newWidth < Constant.maxRoadSideWidth) {
+    if (
+      newWidth > Constant.minRoadSideWidth &&
+      newWidth < Constant.maxRoadSideWidth
+    ) {
       roadService.updateForWidth(parent, newWidth, dir);
     }
     // roadService.initRoadWidthTipsPos(road);
@@ -1226,25 +1420,70 @@ export default class MoveRoad {
 
     const leftCurveEdge = dataService.getCurveRoadEdge(curveRoad.leftEdgeId);
     const rightCurveEdge = dataService.getCurveRoadEdge(curveRoad.rightEdgeId);
-    let joinInfo = mathUtil.getHitInfoForCurve(position, curveRoad.curves[index], Math.max(curveRoad.leftWidth, curveRoad.rightWidth));
-
-    let leftJoinInfo = mathUtil.getHitInfoForCurve(position, leftCurveEdge.curves[index], curveRoad.leftWidth);
-    let leftLine = mathUtil.createLine1(leftJoinInfo.position, joinInfo.position);
+    let joinInfo = mathUtil.getHitInfoForCurve(
+      position,
+      curveRoad.curves[index],
+      Math.max(curveRoad.leftWidth, curveRoad.rightWidth)
+    );
+
+    let leftJoinInfo = mathUtil.getHitInfoForCurve(
+      position,
+      leftCurveEdge.curves[index],
+      curveRoad.leftWidth
+    );
+    let leftLine = mathUtil.createLine1(
+      leftJoinInfo.position,
+      joinInfo.position
+    );
     let leftJoin = mathUtil.getJoinLinePoint(position, leftLine);
 
-    let rightJoinInfo = mathUtil.getHitInfoForCurve(position, rightCurveEdge.curves[index], curveRoad.rightWidth);
-    let rightLine = mathUtil.createLine1(rightJoinInfo.position, joinInfo.position);
+    let rightJoinInfo = mathUtil.getHitInfoForCurve(
+      position,
+      rightCurveEdge.curves[index],
+      curveRoad.rightWidth
+    );
+    let rightLine = mathUtil.createLine1(
+      rightJoinInfo.position,
+      joinInfo.position
+    );
     let rightJoin = mathUtil.getJoinLinePoint(position, rightLine);
-    if (dir == "left" && (mathUtil.isContainForSegment(rightJoin, rightJoinInfo.position, joinInfo.position) || mathUtil.isContainForSegment(rightJoinInfo.position, rightJoin, joinInfo.position))) {
+    if (
+      dir == "left" &&
+      (mathUtil.isContainForSegment(
+        rightJoin,
+        rightJoinInfo.position,
+        joinInfo.position
+      ) ||
+        mathUtil.isContainForSegment(
+          rightJoinInfo.position,
+          rightJoin,
+          joinInfo.position
+        ))
+    ) {
       return;
     }
 
-    if (dir == "right" && (mathUtil.isContainForSegment(leftJoin, leftJoinInfo.position, joinInfo.position) || mathUtil.isContainForSegment(leftJoinInfo.position, leftJoin, joinInfo.position))) {
+    if (
+      dir == "right" &&
+      (mathUtil.isContainForSegment(
+        leftJoin,
+        leftJoinInfo.position,
+        joinInfo.position
+      ) ||
+        mathUtil.isContainForSegment(
+          leftJoinInfo.position,
+          leftJoin,
+          joinInfo.position
+        ))
+    ) {
       return;
     }
 
     const newWidth = mathUtil.getDistance(joinInfo.position, position);
-    if (newWidth > Constant.minRoadSideWidth && newWidth < Constant.maxRoadSideWidth) {
+    if (
+      newWidth > Constant.minRoadSideWidth &&
+      newWidth < Constant.maxRoadSideWidth
+    ) {
       curveRoadService.updateForWidth(parent, newWidth, dir);
     }
     if (curveEdge.roadSide) {

src/graphic/Controls/UIControl.js

@@ -340,6 +340,15 @@ export default class UIControl {
     } else if (selectUI == VectorEvents.AddNarrowRoad) {
     } else if (selectUI == VectorEvents.UnLock) {
       let road = dataService.getRoad(focusItem.vectorId);
+      let leftEdge = dataService.getRoadEdge(road.leftEdgeId);
+      let rightEdge = dataService.getRoadEdge(road.rightEdgeId);
+      // 解锁前需要把路缘线设置为单实线
+      if (leftEdge.roadSide) {
+        leftEdge.setStyle("SingleSolidLine");
+      }
+      if (rightEdge.roadSide) {
+        rightEdge.setStyle("SingleSolidLine");
+      }
       if (road) {
         roadService.convertToLines(focusItem.vectorId);
       } else {
@@ -348,6 +357,7 @@ export default class UIControl {
           curveRoadService.convertToCurveLines(focusItem.vectorId);
         }
       }
+
       if (road) {
         this.deleteVector(focusItem.vectorId, focusItem.type);
         this.layer.history.save();

src/graphic/Geometry/CurveRoadEdge.js

@@ -57,7 +57,7 @@ export default class CurveRoadEdge extends Geometry {
       this.curveRoadSide.points = [];
       this.curveRoadSide.curves = [];
       for (let i = 0; i < curveRoad.points.length; ++i) {
-        this.curveRoadSide.points[i] = mathUtil.getLinePointPos(
+        this.curveRoadSide.points[i] = mathUtil.getLineEndPointPos(
           curveRoad.points[i],
           this.points[i],
           this.curveRoadSide.width

src/graphic/Geometry/Road.js

@@ -1,10 +1,10 @@
-import VectorType from '../enum/VectorType.js';
-import Geometry from './Geometry.js';
-import Settings from '../Settings';
-import Constant from '../Constant';
-import { mathUtil } from '../Util/MathUtil.js';
-import { coordinate } from '../Coordinate.js';
-import { dataService } from '../Service/DataService.js';
+import VectorType from "../enum/VectorType.js";
+import Geometry from "./Geometry.js";
+import Settings from "../Settings";
+import Constant from "../Constant";
+import { mathUtil } from "../Util/MathUtil.js";
+import { coordinate } from "../Coordinate.js";
+import { dataService } from "../Service/DataService.js";
 
 export default class Road extends Geometry {
   constructor(startId, endId, vectorId) {
@@ -22,7 +22,7 @@ export default class Road extends Geometry {
     this.midDivide = {
       leftMidDivide: {},
       rightMidDivide: {},
-      midDivideWidth: Settings.roadMidDivideWidth,
+      midDivideWidth: Settings.roadMidDivideWidth * window.coordinate.ratio,
     };
 
     this.leftDrivewayCount = Settings.roadLeftDrivewayCount; //左边的车道个数
@@ -51,9 +51,9 @@ export default class Road extends Geometry {
 
   setWidth(value, dir) {
     if (this.way == Constant.twoWay) {
-      if (dir == 'left') {
+      if (dir == "left") {
         this.leftWidth = value;
-      } else if (dir == 'right') {
+      } else if (dir == "right") {
         this.rightWidth = value;
       }
     } else if (this.way == Constant.oneWay) {
@@ -72,7 +72,7 @@ export default class Road extends Geometry {
   }
 
   getPointId(dir) {
-    if (dir == 'start') {
+    if (dir == "start") {
       return this.startId;
     } else {
       return this.endId;
@@ -109,7 +109,7 @@ export default class Road extends Geometry {
     if (this.way == Constant.oneWay) {
       return this.singleRoadDrivewayCount;
     } else if (this.way == Constant.twoWay) {
-      if (dir == 'left') {
+      if (dir == "left") {
         return this.leftDrivewayCount;
       } else {
         return this.rightDrivewayCount;
@@ -128,6 +128,4 @@ export default class Road extends Geometry {
   setSingleLanes(singleLanes) {
     this.singleLanes = JSON.parse(JSON.stringify(singleLanes));
   }
-
- 
 }

src/graphic/History/HistoryUtil.js

@@ -150,7 +150,8 @@ export default class HistoryUtil {
       road1.endId == road2.endId &&
       road1.leftEdgeId == road2.leftEdgeId &&
       road1.rightEdgeId == road2.rightEdgeId &&
-      road1.way == road2.way
+      road1.way == road2.way &&
+      road1.roadWidthTipsPos == road2.roadWidthTipsPos 
     ) {
       if (road1.way == Constant.oneWay) {
         if (

src/graphic/Layer.js

@@ -159,11 +159,7 @@ export default class Layer {
         stateService.setEventName(LayerEvents.MovePoint);
         const newPoint = addPoint.buildPoint(position);
         if (newPoint) {
-          stateService.setSelectItem(
-            newPoint.vectorId,
-            VectorType.Point,
-            SelectState.Select
-          );
+          stateService.setSelectItem(newPoint.vectorId, VectorType.Point, SelectState.Select);
           this.renderer.autoRedraw();
         }
         break;
@@ -175,11 +171,7 @@ export default class Layer {
       case LayerEvents.AddText:
         stateService.setEventName(LayerEvents.MoveText);
         addText.buildText(position);
-        stateService.setSelectItem(
-          addText.newText.vectorId,
-          VectorType.Text,
-          SelectState.Select
-        );
+        stateService.setSelectItem(addText.newText.vectorId, VectorType.Text, SelectState.Select);
         addText.clear();
         break;
       case LayerEvents.AddSVG:
@@ -193,11 +185,7 @@ export default class Layer {
       case LayerEvents.AddMagnifier:
         stateService.setEventName(LayerEvents.MoveMagnifier);
         addMagnifier.buildMagnifier(position);
-        stateService.setSelectItem(
-          addMagnifier.newMagnifier.vectorId,
-          VectorType.Magnifier,
-          SelectState.Select
-        );
+        stateService.setSelectItem(addMagnifier.newMagnifier.vectorId, VectorType.Magnifier, SelectState.Select);
         addMagnifier.clear();
         break;
       case VectorEvents.AddLane:
@@ -208,17 +196,9 @@ export default class Layer {
             selectAddLaneFlag = true;
             let roadLanCount = road.getLanesCount(selectItem.dir);
             if (selectItem.dir == "left") {
-              roadService.updateForAddSubtractLanesCount(
-                road.vectorId,
-                roadLanCount + 1,
-                selectItem.dir
-              );
+              roadService.updateForAddSubtractLanesCount(road.vectorId, roadLanCount + 1, selectItem.dir);
             } else {
-              roadService.updateForAddSubtractLanesCount(
-                road.vectorId,
-                roadLanCount + 1,
-                selectItem.dir
-              );
+              roadService.updateForAddSubtractLanesCount(road.vectorId, roadLanCount + 1, selectItem.dir);
             }
             roadService.initRoadWidthTipsPos(road);
 
@@ -236,26 +216,18 @@ export default class Layer {
               selectAddLaneFlag = true;
               let curveRoadLanCount = road.getLanesCount(selectItem.dir);
               if (selectItem.dir == "left") {
-                curveRoadService.updateForAddSubtractLanesCount(
-                  road.vectorId,
-                  curveRoadLanCount + 1,
-                  selectItem.dir
-                );
+                curveRoadService.updateForAddSubtractLanesCount(road.vectorId, curveRoadLanCount + 1, selectItem.dir);
               } else {
-                curveRoadService.updateForAddSubtractLanesCount(
-                  road.vectorId,
-                  curveRoadLanCount + 1,
-                  selectItem.dir
-                );
+                curveRoadService.updateForAddSubtractLanesCount(road.vectorId, curveRoadLanCount + 1, selectItem.dir);
               }
               let leftEdge = dataService.getRoadEdge(road.leftEdgeId);
               let rightEdge = dataService.getRoadEdge(road.rightEdgeId);
-              if (leftEdge.roadSide) {
-                leftEdge.initCurveRoadSide();
-              }
-              if (rightEdge.roadSide) {
-                rightEdge.initCurveRoadSide();
-              }
+              // if (leftEdge.roadSide) {
+              //   leftEdge.initCurveRoadSide();
+              // }
+              // if (rightEdge.roadSide) {
+              //   rightEdge.initCurveRoadSide();
+              // }
             }
           }
 
@@ -274,17 +246,9 @@ export default class Layer {
             selectDelLaneFlag = true;
             let roadLanCount = road.getLanesCount(selectItem.dir);
             if (selectItem.dir == "left") {
-              roadService.updateForAddSubtractLanesCount(
-                road.vectorId,
-                roadLanCount - 1,
-                selectItem.dir
-              );
+              roadService.updateForAddSubtractLanesCount(road.vectorId, roadLanCount - 1, selectItem.dir);
             } else {
-              roadService.updateForAddSubtractLanesCount(
-                road.vectorId,
-                roadLanCount - 1,
-                selectItem.dir
-              );
+              roadService.updateForAddSubtractLanesCount(road.vectorId, roadLanCount - 1, selectItem.dir);
             }
             let leftEdge = dataService.getRoadEdge(road.leftEdgeId);
             let rightEdge = dataService.getRoadEdge(road.rightEdgeId);
@@ -294,35 +258,29 @@ export default class Layer {
             if (rightEdge.roadSide) {
               rightEdge.initRoadSide();
             }
+            roadService.initRoadWidthTipsPos(road);
           } else {
             road = dataService.getCurveRoad(selectItem.vectorId);
             if (road) {
               selectDelLaneFlag = true;
               let curveRoadLanCount = road.getLanesCount(selectItem.dir);
               if (selectItem.dir == "left") {
-                curveRoadService.updateForAddSubtractLanesCount(
-                  road.vectorId,
-                  curveRoadLanCount - 1,
-                  selectItem.dir
-                );
+                curveRoadService.updateForAddSubtractLanesCount(road.vectorId, curveRoadLanCount - 1, selectItem.dir);
               } else {
-                curveRoadService.updateForAddSubtractLanesCount(
-                  road.vectorId,
-                  curveRoadLanCount - 1,
-                  selectItem.dir
-                );
+                curveRoadService.updateForAddSubtractLanesCount(road.vectorId, curveRoadLanCount - 1, selectItem.dir);
               }
               let leftEdge = dataService.getRoadEdge(road.leftEdgeId);
               let rightEdge = dataService.getRoadEdge(road.rightEdgeId);
-              if (leftEdge.roadSide) {
-                leftEdge.initCurveRoadSide();
-              }
-              if (rightEdge.roadSide) {
-                rightEdge.initCurveRoadSide();
-              }
+              // 暂时屏蔽 曲路暂时还没有 会报错
+              // if (leftEdge.roadSide) {
+              //   leftEdge.initCurveRoadSide();
+              // }
+              // if (rightEdge.roadSide) {
+              //   rightEdge.initCurveRoadSide();
+              // }
             }
           }
-          roadService.initRoadWidthTipsPos(road);
+          // roadService.initRoadWidthTipsPos(road);
           this.history.save();
           this.renderer.autoRedraw();
         }
@@ -334,18 +292,12 @@ export default class Layer {
         if (focusItem && focusItem.vectorId) {
           if (focusItem.type == VectorType.CurveRoad) {
             const curveRoad = dataService.getCurveRoad(focusItem.vectorId);
-            let index = mathUtil.getIndexForCurvesPoints(
-              position,
-              curveRoad.points
-            );
+            let index = mathUtil.getIndexForCurvesPoints(position, curveRoad.points);
             if (index != -1) {
               curveRoadService.addCPoint(curveRoad, position, index);
             } else {
               const dis1 = mathUtil.getDistance(curveRoad.points[0], position);
-              const dis2 = mathUtil.getDistance(
-                curveRoad.points[curveRoad.points.length - 1],
-                position
-              );
+              const dis2 = mathUtil.getDistance(curveRoad.points[curveRoad.points.length - 1], position);
               if (dis1 > dis2) {
                 index = curveRoad.points.length - 2;
               } else {
@@ -372,18 +324,12 @@ export default class Layer {
             curveLine.setStyle(style);
           } else if (focusItem.type == VectorType.CurveLine) {
             let curveLine = dataService.getCurveLine(focusItem.vectorId);
-            let index = mathUtil.getIndexForCurvesPoints(
-              position,
-              curveLine.points
-            );
+            let index = mathUtil.getIndexForCurvesPoints(position, curveLine.points);
             if (index != -1) {
               lineService.addCPoint(position, index, focusItem.vectorId);
             } else {
               const dis1 = mathUtil.getDistance(curveLine.points[0], position);
-              const dis2 = mathUtil.getDistance(
-                curveLine.points[curveLine.points.length - 1],
-                position
-              );
+              const dis2 = mathUtil.getDistance(curveLine.points[curveLine.points.length - 1], position);
               if (dis1 > dis2) {
                 index = curveLine.points.length - 2;
               } else {
@@ -417,11 +363,7 @@ export default class Layer {
     selectItem = stateService.getSelectItem();
     stateService.setDraggingItem(selectItem);
     stateService.clearFocusItem();
-    if (
-      selectItem &&
-      this.uiControl.focusVector &&
-      selectItem.vectorId == this.uiControl.focusVector.vectorId
-    ) {
+    if (selectItem && this.uiControl.focusVector && selectItem.vectorId == this.uiControl.focusVector.vectorId) {
     } else {
       this.uiControl.clearFocusVector();
     }
@@ -486,24 +428,14 @@ export default class Layer {
       y: position.y,
     };
     const eventName = stateService.getEventName();
-    if (
-      !this.dragging &&
-      Math.abs(X - this.startX) < minDragDis &&
-      Math.abs(Y - this.startY) < minDragDis
-    ) {
+    if (!this.dragging && Math.abs(X - this.startX) < minDragDis && Math.abs(Y - this.startY) < minDragDis) {
       return;
     }
     this.dragging = true;
-    if (
-      Math.abs(X - this.startX) > minDragDis ||
-      Math.abs(Y - this.startY) > minDragDis
-    ) {
+    if (Math.abs(X - this.startX) > minDragDis || Math.abs(Y - this.startY) > minDragDis) {
       // 是否拖拽了
       if (eventName != null) {
-        if (
-          eventName == LayerEvents.MoveMagnifier &&
-          stateService.getSelectItem().state != 0
-        ) {
+        if (eventName == LayerEvents.MoveMagnifier && stateService.getSelectItem().state != 0) {
         } else {
           stateService.clearFocusItem();
           this.uiControl.clearFocusVector();
@@ -530,10 +462,8 @@ export default class Layer {
       case LayerEvents.PanBackGround:
         stateService.clearItems();
         let center = {};
-        center.x =
-          coordinate.center.x - (dx * coordinate.defaultZoom) / coordinate.zoom;
-        center.y =
-          coordinate.center.y + (dy * coordinate.defaultZoom) / coordinate.zoom;
+        center.x = coordinate.center.x - (dx * coordinate.defaultZoom) / coordinate.zoom;
+        center.y = coordinate.center.y + (dy * coordinate.defaultZoom) / coordinate.zoom;
         let tempCenter = {};
         mathUtil.clonePoint(tempCenter, coordinate.center);
         mathUtil.clonePoint(coordinate.center, center);
@@ -548,10 +478,7 @@ export default class Layer {
       case LayerEvents.AddRoad:
         needAutoRedraw = true;
         listenLayer.start(position);
-        if (
-          listenLayer.modifyPoint &&
-          listenLayer.modifyPoint.hasOwnProperty("x")
-        ) {
+        if (listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x")) {
           position = {
             x: listenLayer.modifyPoint.x,
             y: listenLayer.modifyPoint.y,
@@ -566,10 +493,7 @@ export default class Layer {
       case LayerEvents.AddLine:
         needAutoRedraw = true;
         listenLayer.start(position);
-        if (
-          listenLayer.modifyPoint &&
-          listenLayer.modifyPoint.hasOwnProperty("x")
-        ) {
+        if (listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x")) {
           position = {
             x: listenLayer.modifyPoint.x,
             y: listenLayer.modifyPoint.y,
@@ -583,10 +507,7 @@ export default class Layer {
       case LayerEvents.AddCurveLine:
         needAutoRedraw = true;
         listenLayer.start(position);
-        if (
-          listenLayer.modifyPoint &&
-          listenLayer.modifyPoint.hasOwnProperty("x")
-        ) {
+        if (listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x")) {
           position = {
             x: listenLayer.modifyPoint.x,
             y: listenLayer.modifyPoint.y,
@@ -600,10 +521,7 @@ export default class Layer {
       case LayerEvents.AddCircle:
         needAutoRedraw = true;
         listenLayer.start(position);
-        if (
-          listenLayer.modifyPoint &&
-          listenLayer.modifyPoint.hasOwnProperty("x")
-        ) {
+        if (listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x")) {
           position = {
             x: listenLayer.modifyPoint.x,
             y: listenLayer.modifyPoint.y,
@@ -625,10 +543,7 @@ export default class Layer {
         //   addRoad.startInfo.linkedRoadPointId
         // });
 
-        if (
-          listenLayer.modifyPoint &&
-          listenLayer.modifyPoint.hasOwnProperty("x")
-        ) {
+        if (listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x")) {
           position = {
             x: listenLayer.modifyPoint.x,
             y: listenLayer.modifyPoint.y,
@@ -670,10 +585,7 @@ export default class Layer {
           exceptLineIds: exceptLineId,
           exceptPointId: exceptPointId,
         });
-        if (
-          listenLayer.modifyPoint &&
-          listenLayer.modifyPoint.hasOwnProperty("x")
-        ) {
+        if (listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x")) {
           position = {
             x: listenLayer.modifyPoint.x,
             y: listenLayer.modifyPoint.y,
@@ -703,10 +615,7 @@ export default class Layer {
           exceptCurveLineId: exceptCurveLineId,
           exceptCurvePointId: exceptCurvePointId,
         });
-        if (
-          listenLayer.modifyPoint &&
-          listenLayer.modifyPoint.hasOwnProperty("x")
-        ) {
+        if (listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x")) {
           position = {
             x: listenLayer.modifyPoint.x,
             y: listenLayer.modifyPoint.y,
@@ -731,10 +640,7 @@ export default class Layer {
           exceptCircleId = addCircle.newCircle.vectorId;
         }
         listenLayer.start(position, { exceptCircleId: exceptCircleId });
-        if (
-          listenLayer.modifyPoint &&
-          listenLayer.modifyPoint.hasOwnProperty("x")
-        ) {
+        if (listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x")) {
           position = {
             x: listenLayer.modifyPoint.x,
             y: listenLayer.modifyPoint.y,
@@ -756,16 +662,9 @@ export default class Layer {
         let road = dataService.getRoad(draggingItem.vectorId);
         let start = dataService.getRoadPoint(road.startId);
         let end = dataService.getRoadPoint(road.endId);
-        if (
-          Object.keys(start.getParent()).length == 1 &&
-          Object.keys(end.getParent()).length == 1
-        ) {
+        if (Object.keys(start.getParent()).length == 1 && Object.keys(end.getParent()).length == 1) {
           //拖拽的路只有一条
-          moveRoad.moveRoad(
-            draggingItem.vectorId,
-            (dx * coordinate.defaultZoom) / coordinate.zoom,
-            (dy * coordinate.defaultZoom) / coordinate.zoom
-          );
+          moveRoad.moveRoad(draggingItem.vectorId, (dx * coordinate.defaultZoom) / coordinate.zoom, (dy * coordinate.defaultZoom) / coordinate.zoom);
         }
         break;
       case LayerEvents.MoveRoadPoint:
@@ -790,11 +689,7 @@ export default class Layer {
           listenLayer.modifyPoint = null;
         }
 
-        let flag = moveRoad.moveingRoadPoint(
-          draggingItem.vectorId,
-          position,
-          listenLayer.modifyPoint
-        );
+        let flag = moveRoad.moveingRoadPoint(draggingItem.vectorId, position, listenLayer.modifyPoint);
         if (!flag) {
           elementService.hideAll();
         } else {
@@ -805,10 +700,7 @@ export default class Layer {
       case LayerEvents.AddCurveRoad:
         needAutoRedraw = true;
         listenLayer.start(position);
-        if (
-          listenLayer.modifyPoint &&
-          listenLayer.modifyPoint.hasOwnProperty("x")
-        ) {
+        if (listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x")) {
           position = {
             x: listenLayer.modifyPoint.x,
             y: listenLayer.modifyPoint.y,
@@ -822,10 +714,7 @@ export default class Layer {
       case LayerEvents.AddingCurveRoad:
         needAutoRedraw = true;
         listenLayer.start(position);
-        if (
-          listenLayer.modifyPoint &&
-          listenLayer.modifyPoint.hasOwnProperty("x")
-        ) {
+        if (listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x")) {
           position = {
             x: listenLayer.modifyPoint.x,
             y: listenLayer.modifyPoint.y,
@@ -848,11 +737,7 @@ export default class Layer {
         break;
       case LayerEvents.MoveCurveRoad:
         needAutoRedraw = true;
-        moveRoad.moveCurveRoad(
-          draggingItem.vectorId,
-          (dx * coordinate.defaultZoom) / coordinate.zoom,
-          (dy * coordinate.defaultZoom) / coordinate.zoom
-        );
+        moveRoad.moveCurveRoad(draggingItem.vectorId, (dx * coordinate.defaultZoom) / coordinate.zoom, (dy * coordinate.defaultZoom) / coordinate.zoom);
         break;
       case LayerEvents.MoveCurveRoadPoint:
         if (!draggingItem || !draggingItem.vectorId) {
@@ -896,21 +781,13 @@ export default class Layer {
         break;
       case LayerEvents.MoveCurveEdge:
         if (listenLayer.modifyPoint) {
-          moveRoad.moveCurveEdge(
-            draggingItem.vectorId,
-            listenLayer.modifyPoint.selectIndex,
-            position
-          );
+          moveRoad.moveCurveEdge(draggingItem.vectorId, listenLayer.modifyPoint.selectIndex, position);
         }
         needAutoRedraw = true;
         break;
       case LayerEvents.MoveLine:
         if (draggingItem != null) {
-          let flag = moveLine.moveLine(
-            draggingItem.vectorId,
-            (dx * coordinate.defaultZoom) / coordinate.zoom,
-            (dy * coordinate.defaultZoom) / coordinate.zoom
-          );
+          let flag = moveLine.moveLine(draggingItem.vectorId, (dx * coordinate.defaultZoom) / coordinate.zoom, (dy * coordinate.defaultZoom) / coordinate.zoom);
           if (!flag) {
             this.lastX = this.lastX - dx / coordinate.ratio;
             this.lastY = this.lastY - dy / coordinate.ratio;
@@ -926,20 +803,13 @@ export default class Layer {
             exceptLineIds: point.parent,
           });
 
-          if (
-            listenLayer.modifyPoint &&
-            listenLayer.modifyPoint.x &&
-            listenLayer.modifyPoint.y
-          ) {
+          if (listenLayer.modifyPoint && listenLayer.modifyPoint.x && listenLayer.modifyPoint.y) {
             position = {
               x: listenLayer.modifyPoint.x,
               y: listenLayer.modifyPoint.y,
             };
           }
-          let movePointFlag = movePoint.movePoint(
-            position,
-            draggingItem.vectorId
-          );
+          let movePointFlag = movePoint.movePoint(position, draggingItem.vectorId);
           needAutoRedraw = true;
           if (!point) {
             stateService.clearEventName();
@@ -955,10 +825,7 @@ export default class Layer {
             exceptCurvePointId: draggingItem.vectorId,
             exceptCurveLineId: curvePoint.parent,
           });
-          if (
-            listenLayer.modifyPoint &&
-            listenLayer.modifyPoint.hasOwnProperty("x")
-          ) {
+          if (listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x")) {
             position = {
               x: listenLayer.modifyPoint.x,
               y: listenLayer.modifyPoint.y,
@@ -973,33 +840,16 @@ export default class Layer {
         break;
       case LayerEvents.MoveCurveLine:
         if (draggingItem != null) {
-          moveLine.moveCurveLine(
-            draggingItem.vectorId,
-            (dx * coordinate.defaultZoom) / coordinate.zoom,
-            (dy * coordinate.defaultZoom) / coordinate.zoom
-          );
+          moveLine.moveCurveLine(draggingItem.vectorId, (dx * coordinate.defaultZoom) / coordinate.zoom, (dy * coordinate.defaultZoom) / coordinate.zoom);
           needAutoRedraw = true;
         }
         break;
       case LayerEvents.MoveCircle:
         if (draggingItem != null) {
           if (draggingItem.state == -1) {
-            moveCircle.moveFull(
-              draggingItem.vectorId,
-              (dx * coordinate.defaultZoom) / coordinate.zoom,
-              (dy * coordinate.defaultZoom) / coordinate.zoom
-            );
-          } else if (
-            draggingItem.state == 0 ||
-            draggingItem.state == 1 ||
-            draggingItem.state == 2 ||
-            draggingItem.state == 3
-          ) {
-            moveCircle.movePoint(
-              position,
-              draggingItem.vectorId,
-              draggingItem.state
-            );
+            moveCircle.moveFull(draggingItem.vectorId, (dx * coordinate.defaultZoom) / coordinate.zoom, (dy * coordinate.defaultZoom) / coordinate.zoom);
+          } else if (draggingItem.state == 0 || draggingItem.state == 1 || draggingItem.state == 2 || draggingItem.state == 3) {
+            moveCircle.movePoint(position, draggingItem.vectorId, draggingItem.state);
           } else {
             debugger;
           }
@@ -1023,22 +873,14 @@ export default class Layer {
           if (draggingItem.state == -1) {
             moveSVG.moveFullSVG(position, draggingItem.vectorId);
           } else {
-            moveSVG.movePoint(
-              position,
-              draggingItem.vectorId,
-              draggingItem.state
-            );
+            moveSVG.movePoint(position, draggingItem.vectorId, draggingItem.state);
           }
         }
         break;
       case LayerEvents.MoveMagnifier:
         needAutoRedraw = true;
         if (draggingItem != null) {
-          moveMagnifier.moveFullMagnifier(
-            position,
-            draggingItem.vectorId,
-            draggingItem.state
-          );
+          moveMagnifier.moveFullMagnifier(position, draggingItem.vectorId, draggingItem.state);
         }
         break;
     }
@@ -1133,6 +975,13 @@ export default class Layer {
           addRoad.buildRoad();
           elementService.hideAll();
         }
+        let roadEdges = dataService.getRoadEdges();
+        for (let roadEdgeId in roadEdges) {
+          let roadEdge = dataService.getRoadEdge(roadEdgeId);
+          if (roadEdge.roadSide) {
+            roadEdge.initRoadSide();
+          }
+        }
         this.uiControl.confirmEntry(); //不能连续创建道路
         break;
       case LayerEvents.AddingLine:
@@ -1140,10 +989,7 @@ export default class Layer {
         addLine.finish(position);
         this.updateForLocation();
         //绘制的是基准线
-        if (
-          addLine.newLine &&
-          Settings.baseLineId == addLine.newLine.vectorId
-        ) {
+        if (addLine.newLine && Settings.baseLineId == addLine.newLine.vectorId) {
           stateService.clearEventName();
           this.history.save();
         }
@@ -1205,24 +1051,11 @@ export default class Layer {
         break;
       case LayerEvents.MoveCurveRoadPoint:
         needAutoRedraw = true;
-        if (
-          listenLayer.modifyPoint &&
-          listenLayer.modifyPoint.linkedCurveRoadPointId
-        ) {
-          let curveRoadPoint1 = dataService.getCurveRoadPoint(
-            listenLayer.modifyPoint.linkedCurveRoadPointId
-          );
-          let curveRoadPoint2 = dataService.getCurveRoadPoint(
-            draggingItem.vectorId
-          );
-          if (
-            listenLayer.modifyPoint.linkedCurveRoadPointId !=
-              draggingItem.vectorId &&
-            curveRoadPoint1.getParent() == curveRoadPoint2.getParent()
-          ) {
-            curveRoadPointService.deleteCurveRoadPoint(
-              listenLayer.modifyPoint.linkedCurveRoadPointId
-            );
+        if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedCurveRoadPointId) {
+          let curveRoadPoint1 = dataService.getCurveRoadPoint(listenLayer.modifyPoint.linkedCurveRoadPointId);
+          let curveRoadPoint2 = dataService.getCurveRoadPoint(draggingItem.vectorId);
+          if (listenLayer.modifyPoint.linkedCurveRoadPointId != draggingItem.vectorId && curveRoadPoint1.getParent() == curveRoadPoint2.getParent()) {
+            curveRoadPointService.deleteCurveRoadPoint(listenLayer.modifyPoint.linkedCurveRoadPointId);
           }
         }
         this.history.save();
@@ -1254,23 +1087,11 @@ export default class Layer {
         break;
       case LayerEvents.MoveCurvePoint:
         needAutoRedraw = true;
-        if (
-          listenLayer.modifyPoint &&
-          listenLayer.modifyPoint.linkedCurvePointId
-        ) {
-          let curvePoint1 = dataService.getCurvePoint(
-            listenLayer.modifyPoint.linkedCurvePointId
-          );
+        if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedCurvePointId) {
+          let curvePoint1 = dataService.getCurvePoint(listenLayer.modifyPoint.linkedCurvePointId);
           let curvePoint2 = dataService.getCurvePoint(draggingItem.vectorId);
-          if (
-            listenLayer.modifyPoint.linkedCurvePointId !=
-              draggingItem.vectorId &&
-            curvePoint1.getParent() == curvePoint2.getParent()
-          ) {
-            lineService.deleteCrossPointForCurveLine(
-              listenLayer.modifyPoint.linkedCurvePointId,
-              curvePoint1.getParent()
-            );
+          if (listenLayer.modifyPoint.linkedCurvePointId != draggingItem.vectorId && curvePoint1.getParent() == curvePoint2.getParent()) {
+            lineService.deleteCrossPointForCurveLine(listenLayer.modifyPoint.linkedCurvePointId, curvePoint1.getParent());
           }
         }
         elementService.hideAll();
@@ -1315,9 +1136,7 @@ export default class Layer {
     const type = e.type;
     if (type == "DOMMouseScroll" || type == "mousewheel") {
       // 当在canvas用滚轮滚动时
-      const delta = e.wheelDelta
-        ? (e.wheelDelta / 120) * 20
-        : (-(e.detail || 0) / 3) * 20;
+      const delta = e.wheelDelta ? (e.wheelDelta / 120) * 20 : (-(e.detail || 0) / 3) * 20;
       const zoom = coordinate.zoom + delta;
       let X = e.offsetX || e.layerX;
       let Y = e.offsetY || e.layerY;
@@ -1421,10 +1240,7 @@ export default class Layer {
 
   stopAddVector() {
     let eventName = stateService.getEventName();
-    if (
-      eventName != LayerEvents.AddingRoad &&
-      eventName != LayerEvents.AddingLine
-    ) {
+    if (eventName != LayerEvents.AddingRoad && eventName != LayerEvents.AddingLine) {
       stateService.clearEventName();
     } else if (eventName == LayerEvents.AddingRoad) {
       stateService.setEventName(LayerEvents.AddRoad);
@@ -1562,57 +1378,23 @@ export default class Layer {
     let otherPoint1 = null;
     let otherPoint2 = null;
     if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedRoadPointIdX) {
-      otherPoint1 = dataService.getRoadPoint(
-        listenLayer.modifyPoint.linkedRoadPointIdX
-      );
-    } else if (
-      listenLayer.modifyPoint &&
-      listenLayer.modifyPoint.linkedCurveRoadPointIdX
-    ) {
-      otherPoint1 = dataService.getCurveRoadPoint(
-        listenLayer.modifyPoint.linkedCurvePointIdX
-      );
-    } else if (
-      listenLayer.modifyPoint &&
-      listenLayer.modifyPoint.linkedPointIdX
-    ) {
-      otherPoint1 = dataService.getPoint(
-        listenLayer.modifyPoint.linkedPointIdX
-      );
-    } else if (
-      listenLayer.modifyPoint &&
-      listenLayer.modifyPoint.linkedCurvePointIdX
-    ) {
-      otherPoint1 = dataService.getCurvePoint(
-        listenLayer.modifyPoint.linkedCurvePointIdX
-      );
+      otherPoint1 = dataService.getRoadPoint(listenLayer.modifyPoint.linkedRoadPointIdX);
+    } else if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedCurveRoadPointIdX) {
+      otherPoint1 = dataService.getCurveRoadPoint(listenLayer.modifyPoint.linkedCurvePointIdX);
+    } else if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedPointIdX) {
+      otherPoint1 = dataService.getPoint(listenLayer.modifyPoint.linkedPointIdX);
+    } else if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedCurvePointIdX) {
+      otherPoint1 = dataService.getCurvePoint(listenLayer.modifyPoint.linkedCurvePointIdX);
     }
 
     if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedRoadPointIdY) {
-      otherPoint2 = dataService.getRoadPoint(
-        listenLayer.modifyPoint.linkedRoadPointIdY
-      );
-    } else if (
-      listenLayer.modifyPoint &&
-      listenLayer.modifyPoint.linkedCurvePointIdY
-    ) {
-      otherPoint2 = dataService.getCurveRoadPoint(
-        listenLayer.modifyPoint.linkedCurvePointIdY
-      );
-    } else if (
-      listenLayer.modifyPoint &&
-      listenLayer.modifyPoint.linkedPointIdY
-    ) {
-      otherPoint2 = dataService.getPoint(
-        listenLayer.modifyPoint.linkedPointIdY
-      );
-    } else if (
-      listenLayer.modifyPoint &&
-      listenLayer.modifyPoint.linkedCurvePointIdY
-    ) {
-      otherPoint2 = dataService.getCurvePoint(
-        listenLayer.modifyPoint.linkedCurvePointIdY
-      );
+      otherPoint2 = dataService.getRoadPoint(listenLayer.modifyPoint.linkedRoadPointIdY);
+    } else if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedCurvePointIdY) {
+      otherPoint2 = dataService.getCurveRoadPoint(listenLayer.modifyPoint.linkedCurvePointIdY);
+    } else if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedPointIdY) {
+      otherPoint2 = dataService.getPoint(listenLayer.modifyPoint.linkedPointIdY);
+    } else if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedCurvePointIdY) {
+      otherPoint2 = dataService.getCurvePoint(listenLayer.modifyPoint.linkedCurvePointIdY);
     }
 
     let otherPoint = {};

src/graphic/Renderer/Draw.js

@@ -11,6 +11,7 @@ import SVGIcons from "../CanvasStyle/ImageLabels/SVGIcons";
 import VectorStyle from "@/graphic/enum/VectorStyle.js";
 import VectorWeight from "@/graphic/enum/VectorWeight.js";
 import router from "@/router/index";
+import VectorType from "../enum/VectorType.js";
 
 const isScreenStyle = () =>
   Settings.screenMode && router.currentRoute.value.params.mode === "0";
@@ -157,7 +158,7 @@ export const help = {
   },
   getRealDistance(p1, p2) {
     return Math.round(
-      (mathUtil.getDistance(p1, p2) * coordinate.res * 100) / coordinate.ratio
+      (mathUtil.getDistance(p1, p2) * coordinate.res * 1000) / coordinate.ratio
     );
   },
   getPerpendicularPoint(p1, p2, p3, d) {
@@ -198,6 +199,7 @@ export const help = {
     const vline = mathUtil.getVerticalLineByDistance(start, end, fontSize);
     const center = mathUtil.lineCenter(vline[0], vline[1]);
     // console.log(center, start, end);
+
     ctx.save();
     ctx.translate(center.x, center.y);
     ctx.rotate((angle * Math.PI) / 180);
@@ -423,6 +425,7 @@ export const help = {
         ctx.stroke();
         ctx.closePath();
         ctx.restore();
+
         return;
     }
 
@@ -657,12 +660,57 @@ export default class Draw {
           );
         }
 
+        console.log(edgeVector, vector);
+        // edgeVector.style = VectorStyle.SingleSolidLine;
         help.drawStyleLine(
           ctx,
           points,
           edgeVector.roadSide ? VectorStyle.RoadSide : edgeVector.style,
           edgeVector.roadSide ? edgeVector.roadSide.width : edgeVector.weight
         );
+
+        if (edgeVector.roadSide) {
+          const checkLine = [edgeVector.start, edgeVector.end];
+          const targetLine = [
+            vector.roadWidthTipsPos[0].start,
+            vector.roadWidthTipsPos[0].end,
+          ];
+          const isStartMax =
+            mathUtil.getDisForLineCoord(checkLine, targetLine[0]) >
+            mathUtil.getDisForLineCoord(checkLine, targetLine[1]);
+
+          if (!isStartMax) {
+            const temp = targetLine[0];
+            targetLine[0] = targetLine[1];
+            targetLine[1] = temp;
+          }
+
+          const tstart = mathUtil.translate(
+            targetLine[0],
+            targetLine[1],
+            targetLine[1],
+            edgeVector.roadSide.width
+          );
+          const tend = mathUtil.translate(
+            targetLine[0],
+            targetLine[1],
+            targetLine[1],
+            edgeVector.roadSide.width + 24
+          );
+
+          help.drawLineText(
+            ctx,
+            coordinate.getScreenXY(tstart),
+            coordinate.getScreenXY(tend),
+            edgeVector.roadSide.width * 10,
+            {
+              fillColor: isScreenStyle() ? "#000" : "#fff",
+              padding: 6,
+              fontSize: 12,
+              backColor: style.strokeStyle,
+            }
+          );
+        }
       }
       if (import.meta.env.DEV) {
         this.drawTextByInfo(
@@ -760,7 +808,7 @@ export default class Draw {
     ctx.save();
     help.setVectorStyle(ctx, vector);
     ctx.beginPath();
-    if (!isScreenStyle()) {
+    if (!Settings.screenMode) {
       ctx.arc(
         extremePoint.x,
         extremePoint.y,
@@ -936,7 +984,7 @@ export default class Draw {
     this.drawPoint(vector);
   }
 
-  drawLineArrow(line, doubleArrow = false) {
+  drawLineArrow(line, doubleArrow = false, len = 20) {
     const ctx = this.context;
     const [start, end] = line;
     const dires = doubleArrow
@@ -948,7 +996,7 @@ export default class Draw {
 
     ctx.save();
     for (let [start, end] of dires) {
-      const lines = mathUtil.getArrow(start, end);
+      const lines = mathUtil.getArrow(start, end, 30, len);
       ctx.moveTo(lines[0].x, lines[0].y);
       ctx.lineTo(lines[1].x, lines[1].y);
       ctx.lineTo(lines[2].x, lines[2].y);
@@ -970,7 +1018,11 @@ export default class Draw {
     if (vector.color) {
       ctx.strokeStyle = vector.color;
     }
-    this.drawLineArrow([start, end], vector.category === UIEvents.DoubleArrow);
+    this.drawLineArrow(
+      [start, end],
+      vector.category === UIEvents.DoubleArrow,
+      40
+    );
   }
 
   drawMagnifier(vector) {
@@ -1118,7 +1170,7 @@ export default class Draw {
     const screenNotDrawTypes = [VectorCategory.Point.NormalPoint];
     if (!screenSave) {
       if (
-        (isScreenStyle() &&
+        (Settings.screenMode &&
           (!vector.category || screenNotDrawTypes.includes(vector.category))) ||
         vector.category === VectorCategory.Point.TestBasePoint
       ) {
@@ -1141,6 +1193,7 @@ export default class Draw {
         ctx.restore();
         return;
       }
+
       if (line.category !== "ZebraCrossing") {
         const [stylea, attr] = help.getVectorStyle(line, line.category);
         style = {
@@ -1149,6 +1202,19 @@ export default class Draw {
           fillStyle: attr ? "#fff" : stylea.strokeStyle,
         };
       }
+      if (
+        line &&
+        [VectorType.SingleArrowLine, VectorType.DoubleArrowLine].includes(
+          line.category
+        ) &&
+        line.color
+      ) {
+        style = {
+          ...style,
+          fillStyle: line.color,
+          strokeStyle: line.color,
+        };
+      }
     } else if (vector.category === VectorCategory.Point.FixPoint) {
       const text = dataService.getText(vector?.linkedTextId);
       if (text) {
@@ -1404,7 +1470,7 @@ export default class Draw {
       coordinate.getScreenXY(startReal),
       coordinate.getScreenXY(endReal),
       vector.value
-        ? Math.round(vector.value * 100) / 100
+        ? Math.round(vector.value * 1000)
         : help.getRealDistance(startReal, endReal),
       style
     );
@@ -1499,7 +1565,15 @@ export default class Draw {
       this.context.setLineDash(style.dash);
     }
 
-    console.log(vector);
+    if (
+      [VectorType.SingleArrowLine, VectorType.DoubleArrowLine].includes(
+        vector.category
+      ) &&
+      vector.color
+    ) {
+      this.context.strokeStyle = vector.color;
+    }
+    console.log(vector.style);
     help.drawStyleLine(this.context, [start, end], vector.style, vector.weight);
     // vector.category = VectorCategory.Line.LocationLineByFixPoint;
     switch (vector.category) {
@@ -1517,6 +1591,7 @@ export default class Draw {
       case VectorCategory.Line.FreeMeasureLine:
       case VectorCategory.Line.MeasureLine:
       case VectorCategory.Line.PositionLine:
+        console.log(vector);
         this.drawLineText(vector, style.text);
 
         if (
@@ -1525,7 +1600,7 @@ export default class Draw {
             VectorCategory.Line.LocationLineByBasePoint,
           ].includes(vector.category)
         ) {
-          this.drawLineArrow([start, end], true);
+          this.drawLineArrow([start, end], true, 10);
         }
         break;
     }

src/graphic/Service/RoadService.js

@@ -14,7 +14,7 @@ import VectorStyle from "../enum/VectorStyle.js";
 export default class RoadService {
   constructor() {}
 
-  create(startId, endId, vectorId) {
+  create(startId, endId, vectorId, split) {
     let road = new Road(startId, endId, vectorId);
     dataService.addRoad(road);
 
@@ -60,6 +60,7 @@ export default class RoadService {
     }
     this.setLanes(road.vectorId);
     this.initRoadWidthTipsPos(road);
+
     return road;
   }
 
@@ -151,9 +152,11 @@ export default class RoadService {
     newRoad.rightDrivewayCount = road.rightDrivewayCount;
     if (oldLeftEdge.roadSide) {
       leftEdge.initRoadSide();
+      leftEdge.setRoadSideWidth(oldLeftEdge.roadSide.width);
     }
     if (oldRightEdge.roadSide) {
       rightEdge.initRoadSide();
+      rightEdge.setRoadSideWidth(oldLeftEdge.roadSide.width);
     }
     this.setLanes(newRoad.vectorId);
     this.initRoadWidthTipsPos(newRoad);
@@ -205,7 +208,9 @@ export default class RoadService {
     if (dir == "start") {
       // 第一步把旧的road的另一端点对应的parent(旧的roadId)断开
       delete endPoint.parent[roadId];
-      newRoad = this.create(pointId, road.endId);
+
+      newRoad = this.create(pointId, road.endId, null);
+
       // 更新旧公路的end
       point.setPointParent(roadId, "end");
       road.endId = pointId;
@@ -220,6 +225,7 @@ export default class RoadService {
     if (road.way == Constant.oneWay) {
       newRoad.setWay(road.way);
       newRoad.singleRoadDrivewayCount = road.singleRoadDrivewayCount;
+      newRoad.singleRoadWidth = road.singleRoadWidth;
     } else if (road.way == Constant.twoWay) {
       newRoad.setWay(road.way);
       newRoad.leftDrivewayCount = road.leftDrivewayCount;
@@ -243,14 +249,34 @@ export default class RoadService {
 
       let newRoadLeftEdge = dataService.getRoadEdge(newRoad.leftEdgeId);
       mathUtil.clonePoint(newRoadLeftEdge.end, oldLeftEdgeEndPoint);
+      //newRoadLeftEdge.roadSide = leftEdge.roadSide;
+      if(leftEdge.roadSide){
+        newRoadLeftEdge.initRoadSide()
+        newRoadLeftEdge.setRoadSideWidth(leftEdge.roadSide.width)
+      }
 
       let newRoadRightEdge = dataService.getRoadEdge(newRoad.rightEdgeId);
       mathUtil.clonePoint(newRoadRightEdge.end, oldRightEdgeEndPoint);
+      //newRoadRightEdge.roadSide = rightEdge.roadSide;
+      if(rightEdge.roadSide){
+        newRoadRightEdge.initRoadSide()
+        newRoadRightEdge.setRoadSideWidth(rightEdge.roadSide.width)
+      }
 
       if (Object.keys(startPoint).length > 1) {
         mathUtil.clonePoint(leftEdge.start, oldLeftEdgeStartPoint);
         mathUtil.clonePoint(rightEdge.start, oldRightEdgeStartPoint);
       }
+      //修改路缘线end
+      if(leftEdge.roadSide){
+        leftEdge.initRoadSide()
+        leftEdge.setRoadSideWidth(leftEdge.roadSide.width)
+      }
+      if(rightEdge.roadSide){
+        leftEdge.initRoadSide()
+        rightEdge.setRoadSideWidth(rightEdge.roadSide.width)
+      }
+
     } else if (dir == "end") {
       let cpt = dataService.getCrossPointForEdgeId(road.leftEdgeId, "start");
       crossPointService.replaceEdgeId(cpt, road.leftEdgeId, newRoad.leftEdgeId);
@@ -264,16 +290,49 @@ export default class RoadService {
 
       let newRoadLeftEdge = dataService.getRoadEdge(newRoad.leftEdgeId);
       mathUtil.clonePoint(newRoadLeftEdge.start, oldLeftEdgeStartPoint);
+      //newRoadLeftEdge.roadSide = leftEdge.roadSide;
+      if(leftEdge.roadSide){
+        newRoadLeftEdge.initRoadSide()
+        newRoadLeftEdge.setRoadSideWidth(leftEdge.roadSide.width)
+      }
 
       let newRoadRightEdge = dataService.getRoadEdge(newRoad.rightEdgeId);
       mathUtil.clonePoint(newRoadRightEdge.start, oldRightEdgeStartPoint);
+      //newRoadRightEdge.roadSide = rightEdge.roadSide;
+      if(rightEdge.roadSide){
+        newRoadRightEdge.initRoadSide()
+        newRoadRightEdge.setRoadSideWidth(rightEdge.roadSide.width)
+      }
 
       if (Object.keys(endPoint).length > 1) {
         mathUtil.clonePoint(leftEdge.end, oldLeftEdgeEndPoint);
         mathUtil.clonePoint(rightEdge.end, oldRightEdgeEndPoint);
       }
+      //修改路缘线start
+      if(leftEdge.roadSide){
+        leftEdge.initRoadSide()
+        leftEdge.setRoadSideWidth(leftEdge.roadSide.width)
+      }
+      if(rightEdge.roadSide){
+        rightEdge.initRoadSide()
+        rightEdge.setRoadSideWidth(rightEdge.roadSide.width)
+      }
     }
-
+    // let newStartPoint = dataService.getRoadPoint(newRoad.startId);
+    // let newEndPoint = dataService.getRoadPoint(newRoad.endId);
+    // let parents = {};
+    // if (Object.keys(newStartPoint.parent).length > 1) {
+    //   parents = newStartPoint.parent;
+    // }
+
+    // if (Object.keys(newEndPoint.parent).length > 1) {
+    //   parents = newEndPoint.parent;
+    // }
+
+    // for (let key in parents) {
+    //   let road = dataService.getRoad(key);
+    //   this.initRoadWidthTipsPos(road);
+    // }
     return newRoad.vectorId;
   }
 
@@ -1559,11 +1618,73 @@ export default class RoadService {
   initRoadWidthTipsPos(road) {
     let leftEdge = dataService.getRoadEdge(road.leftEdgeId);
     let rightEdge = dataService.getRoadEdge(road.rightEdgeId);
-    let leftEdgePoint = mathUtil.getLinePointPos(leftEdge.start, leftEdge.end);
-    let rightEdgePoint = mathUtil.getLinePointPos(
+    // let leftEdgePoint = mathUtil.getLineEndPointPos(leftEdge.start, leftEdge.end);
+
+    let roadStartPoint = dataService.getRoadPoint(road.startId);
+    let roadEndPoint = dataService.getRoadPoint(road.endId);
+    let roadInfo = {
+      start: {
+        x: roadStartPoint.x,
+        y: roadStartPoint.y,
+      },
+      end: {
+        x: roadEndPoint.x,
+        y: roadEndPoint.y,
+      },
+    };
+
+    let roadLine = mathUtil.createLine1(
+      dataService.getRoadPoint(road.startId),
+      dataService.getRoadPoint(road.endId)
+    );
+    let roadLineCrossPoint = mathUtil.getLineEndPointPos(
+      roadInfo.start,
+      roadInfo.end
+    );
+    let CrossPointStartDistance = mathUtil.getDistance(
+      roadStartPoint,
+      roadLineCrossPoint
+    );
+    let leftEdgeDistance = mathUtil.getDistance(leftEdge.start, leftEdge.end);
+    let righttEdgeDistance = mathUtil.getDistance(
       rightEdge.start,
       rightEdge.end
     );
+    if (
+      CrossPointStartDistance > leftEdgeDistance ||
+      CrossPointStartDistance > righttEdgeDistance
+    ) {
+      let satrtEdgeLine = mathUtil.createLine1(leftEdge.start, rightEdge.start);
+      let endEdgeLine = mathUtil.createLine1(leftEdge.end, rightEdge.end);
+      let satrtEdgeCrossPoint = mathUtil.getIntersectionPoint(
+        satrtEdgeLine,
+        roadLine
+      );
+      let endEdgeCrossPoint = mathUtil.getIntersectionPoint(
+        endEdgeLine,
+        roadLine
+      );
+
+      roadLineCrossPoint = mathUtil.getLineEndPointPos(
+        satrtEdgeCrossPoint,
+        endEdgeCrossPoint
+      );
+    }
+    // if(roadLineCrossPoint){
+    //   let lineLength = this.getDistance(startPoint, endPoint);
+    // }
+    let leftEdgeLine = mathUtil.createLine1(leftEdge.start, leftEdge.end);
+    let rightEdgeLine = mathUtil.createLine1(rightEdge.start, rightEdge.end);
+    let leftEdgePoint = mathUtil.getJoinLinePoint(
+      roadLineCrossPoint,
+      leftEdgeLine
+    );
+    let rightEdgePoint = mathUtil.getJoinLinePoint(
+      roadLineCrossPoint,
+      rightEdgeLine
+    );
+
+    // let rightEdgePoint = mathUtil.getLineEndPointPos(rightEdge.start, rightEdge.end);
     let edgeLine = mathUtil.createLine1(leftEdgePoint, rightEdgePoint);
     let roadWidthTipsPos = [];
     if (road.way == Constant.oneWay) {
@@ -1576,42 +1697,81 @@ export default class RoadService {
             road.singleLanes[i].start,
             road.singleLanes[i].end
           );
-          let crossPoint = mathUtil.getIntersectionPoint(edgeLine, crossLine);
-          crossList.push(crossPoint);
+          // let crossPoint = mathUtil.getIntersectionPoint(edgeLine, crossLine);
+          // crossList.push(crossPoint);
+          crossList.push(crossLine);
         }
         for (let i = 0; i < crossList.length; i++) {
           if (i == 0) {
             //第一个位置
-            roadWidthTipsPos.push({ start: rightEdgePoint, end: crossList[i] });
+            // roadWidthTipsPos.push({ start: rightEdgePoint, end: crossList[i] });
+            roadWidthTipsPos.push({
+              start: rightEdgePoint,
+              end: mathUtil.getJoinLinePoint(roadLineCrossPoint, crossList[i]),
+            });
           } else {
             //以此类推
+
+            let middleEdgePoint1 = mathUtil.getJoinLinePoint(
+              roadLineCrossPoint,
+              crossList[i - 1]
+            );
+            let middleEdgePoint2 = mathUtil.getJoinLinePoint(
+              roadLineCrossPoint,
+              crossList[i]
+            );
+            // roadWidthTipsPos.push({
+            //   start: crossList[i - 1],
+            //   end: crossList[i],
+            // });
+            // console.error(middleEdgePoint1);
             roadWidthTipsPos.push({
-              start: crossList[i - 1],
-              end: crossList[i],
+              start: middleEdgePoint1,
+              end: middleEdgePoint2,
             });
           }
         }
         //最后一个位置
+        // roadWidthTipsPos.push({
+        //   start: crossList[crossList.length - 1],
+        //   end: leftEdgePoint,
+        // });
+        let a = mathUtil.getJoinLinePoint(
+          roadLineCrossPoint,
+          crossList[crossList.length - 1]
+        );
         roadWidthTipsPos.push({
-          start: crossList[crossList.length - 1],
+          start: a,
           end: leftEdgePoint,
         });
         road.setRoadWidthTipsPos(roadWidthTipsPos);
       } else {
-          //单向单车道
+        //单向单车道
+
         roadWidthTipsPos.push({ start: leftEdgePoint, end: rightEdgePoint });
         road.setRoadWidthTipsPos(roadWidthTipsPos);
       }
     } else if (road.way == Constant.twoWay) {
       //双单车道
-      let leftMidDividePoint = mathUtil.getLinePointPos(
+      // let leftMidDividePoint = mathUtil.getLineEndPointPos(road.midDivide.leftMidDivide.start, road.midDivide.leftMidDivide.end);
+      // let rightMidDividePoint = mathUtil.getLineEndPointPos(road.midDivide.rightMidDivide.start, road.midDivide.rightMidDivide.end);
+
+      let leftMidDivideLine = mathUtil.createLine1(
         road.midDivide.leftMidDivide.start,
         road.midDivide.leftMidDivide.end
       );
-      let rightMidDividePoint = mathUtil.getLinePointPos(
+      let rightMidDividePointLine = mathUtil.createLine1(
         road.midDivide.rightMidDivide.start,
         road.midDivide.rightMidDivide.end
       );
+      let leftMidDividePoint = mathUtil.getJoinLinePoint(
+        roadLineCrossPoint,
+        leftMidDivideLine
+      );
+      let rightMidDividePoint = mathUtil.getJoinLinePoint(
+        roadLineCrossPoint,
+        rightMidDividePointLine
+      );
 
       // leftLanes,rightLanes
       if (road.leftLanes.length) {
@@ -1621,27 +1781,48 @@ export default class RoadService {
             road.leftLanes[i].start,
             road.leftLanes[i].end
           );
-          let crossPoint = mathUtil.getIntersectionPoint(edgeLine, crossLine);
-          crossList.push(crossPoint);
+          // let crossPoint = mathUtil.getIntersectionPoint(edgeLine, crossLine);
+          // crossList.push(crossPoint);
+
+          crossList.push(crossLine);
         }
         for (let i = 0; i < crossList.length; i++) {
           if (i == 0) {
             //第一个位置
+            // roadWidthTipsPos.push({
+            //   start: leftMidDividePoint,
+            //   end: crossList[i],
+            // });
+
             roadWidthTipsPos.push({
               start: leftMidDividePoint,
-              end: crossList[i],
+              end: mathUtil.getJoinLinePoint(roadLineCrossPoint, crossList[i]),
             });
           } else {
             //以此类推
+            // roadWidthTipsPos.push({
+            //   start: crossList[i - 1],
+            //   end: crossList[i],
+            // });
             roadWidthTipsPos.push({
-              start: crossList[i - 1],
-              end: crossList[i],
+              start: mathUtil.getJoinLinePoint(
+                roadLineCrossPoint,
+                crossList[i - 1]
+              ),
+              end: mathUtil.getJoinLinePoint(roadLineCrossPoint, crossList[i]),
             });
           }
         }
         //最后一个位置
+        // roadWidthTipsPos.push({
+        //   start: crossList[crossList.length - 1],
+        //   end: leftEdgePoint,
+        // });
         roadWidthTipsPos.push({
-          start: crossList[crossList.length - 1],
+          start: mathUtil.getJoinLinePoint(
+            roadLineCrossPoint,
+            crossList[crossList.length - 1]
+          ),
           end: leftEdgePoint,
         });
         road.setRoadWidthTipsPos(roadWidthTipsPos);
@@ -1659,29 +1840,51 @@ export default class RoadService {
             road.rightLanes[i].start,
             road.rightLanes[i].end
           );
-          let crossPoint = mathUtil.getIntersectionPoint(edgeLine, crossLine);
-          crossList.push(crossPoint);
+          // let crossPoint = mathUtil.getIntersectionPoint(edgeLine, crossLine);
+          // crossList.push(crossPoint);
+          crossList.push(crossLine);
         }
         for (let i = 0; i < crossList.length; i++) {
           if (i == 0) {
             //第一个位置
+            // roadWidthTipsPos.push({
+            //   start: rightMidDividePoint,
+            //   end: crossList[i],
+            // });
+
             roadWidthTipsPos.push({
               start: rightMidDividePoint,
-              end: crossList[i],
+              end: mathUtil.getJoinLinePoint(roadLineCrossPoint, crossList[i]),
             });
           } else {
             //以此类推
+            // roadWidthTipsPos.push({
+            //   start: crossList[i - 1],
+            //   end: crossList[i],
+            // });
+
             roadWidthTipsPos.push({
-              start: crossList[i - 1],
-              end: crossList[i],
+              start: mathUtil.getJoinLinePoint(
+                roadLineCrossPoint,
+                crossList[i - 1]
+              ),
+              end: mathUtil.getJoinLinePoint(roadLineCrossPoint, crossList[i]),
             });
           }
         }
         //最后一个位置
+        // roadWidthTipsPos.push({
+        //   start: crossList[crossList.length - 1],
+        //   end: rightEdgePoint,
+        // });
         roadWidthTipsPos.push({
-          start: crossList[crossList.length - 1],
+          start: mathUtil.getJoinLinePoint(
+            roadLineCrossPoint,
+            crossList[crossList.length - 1]
+          ),
           end: rightEdgePoint,
         });
+
         road.setRoadWidthTipsPos(roadWidthTipsPos);
       } else {
         roadWidthTipsPos.push({

src/graphic/Util/MathUtil.js

@@ -89,6 +89,10 @@ export default class MathUtil {
     perpendicularVector.x /= length;
     perpendicularVector.y /= length;
 
+    if (slope === 1) {
+      perpendicularVector.y = 0;
+    }
+
     // 计算垂直方向平移后的新坐标
     var newP1 = {
       x: p1.x + perpendicularVector.x * translationDistance,
@@ -434,7 +438,7 @@ export default class MathUtil {
     return (fi * 180) / Math.PI;
   }
 
-  getArrow(start, end, ange = 30, L = 20) {
+  getArrow(start, end, ange = 30, L = 14) {
     let a = Math.atan2(end.y - start.y, end.x - start.x);
     let xC = end.x - L * Math.cos(a + (ange * Math.PI) / 180); // θ=30
     let yC = end.y - L * Math.sin(a + (ange * Math.PI) / 180);
@@ -466,6 +470,18 @@ export default class MathUtil {
     const join = this.getIntersectionPoint(line, verticalLine);
     return join;
   }
+  getDisForLineCoord(line, point) {
+    const [{ x: x1, y: y1 }, { x: x2, y: y2 }] = line;
+    const { x: x3, y: y3 } = point;
+    // 计算直线的斜率
+    const k = (y2 - y1) / (x2 - x1);
+
+    // 计算直线的截距
+    const b = y1 - k * x1;
+
+    // 计算点到直线的距离
+    return Math.abs(k * x3 - y3 + b) / Math.sqrt(k ** 2 + 1);
+  }
 
   // 点到直线的距离
   getDisForPoinLine(point, line) {
@@ -1933,7 +1949,7 @@ export default class MathUtil {
     return `rgb(${r},${g},${b})`;
   }
 
-  //获取选段内距离末端断点某个位置点的坐标
+  //获取选段内距离末端端点某个位置点的坐标
   /**
    *
    * @param {*} startPoint  //线段起点
@@ -1941,7 +1957,7 @@ export default class MathUtil {
    * @param {*} targetPointDistance  //目标点到终点的距离
    * @returns
    */
-  getLinePointPos(startPoint, endPoint, targetPointDistance) {
+  getLineEndPointPos(startPoint, endPoint, targetPointDistance) {
     if (!targetPointDistance) {
       targetPointDistance = Constant.roadWidthTipsDistance;
     }

src/store/sync.ts

@@ -248,12 +248,14 @@ const syncSceneStore = () => {
       tables: tables.value,
     }),
     (data) => {
+      console.error("收到数据源更新")
       updateSceneStore(data);
     },
-    { deep: true }
+    { deep: true, flush: 'sync' }
   );
 };
 
+
 loadStore().catch((e) => {
   console.error(e);
   alert("场景数据加载失败");

src/store/tables.ts

@@ -1,3 +1,5 @@
 import { ref } from "vue";
 
 export const tables = ref({});
+
+(window as any).tables = tables

src/views/graphic/childMenus.vue

@@ -9,6 +9,7 @@
         v-for="menu in menus"
         :key="menu.key"
         class="menu"
+        :style="{ pointerEvents: disable ? 'none' : 'all' }"
         :class="{ active: uiType.current === menu.key }"
         @click="clickHandler(menu)"
       >
@@ -27,6 +28,7 @@ import { computed } from "vue";
 
 const props = defineProps<{ menus: MenusRaw }>();
 const title = computed(() => findMainMenuByAttr(props.menus)?.text);
+const disable = computed(() => !!findMainMenuByAttr(props.menus)?.disable);
 
 const emit = defineEmits<{ (e: "quit") }>();
 const clickHandler = (menu) => {

src/views/graphic/geos/index.ts

@@ -13,6 +13,7 @@ import DelAndCopu from "@/views/graphic/geos/delAndCopu.vue";
 export const GlobalComp = Del;
 
 export default {
+  ["ZebraCrossing"]: DelAndCopu,
   [VectorType.SVG]: DelAndCopu,
   [VectorType.Road]: Road,
   [VectorType.RoadEdge]: RoadEdge,
@@ -23,6 +24,7 @@ export default {
   // [VectorCategory.Line.MeasureLine]: Arrow,
   [VectorCategory.Line.NormalLine]: NormalLine,
   [VectorType.CurveLine]: NormalLine,
+
   [VectorType.Text]: Text,
   [VectorCategory.Point.FixPoint]: Text,
   [VectorType.Circle]: Circle,

src/views/graphic/geos/roadEdge.vue

@@ -1,11 +1,10 @@
 <template>
   <GeoTeleport :menus="menus" class="geo-teleport-use" :active="active" />
   <GeoTeleport :menus="childMenus" v-if="childMenus" class="type-geo" />
-  {{ showChange }}
   <VRange
     v-if="showChange"
-    :max="100"
-    :min="10"
+    :max="1000"
+    :min="100"
     :step="1"
     unit="mm"
     v-model:value="(lineWidthMenu[2].desc as number)"
@@ -99,7 +98,7 @@ const lineWidthMenu = reactive([
     key: "setRoadEdageWidth",
     icon: "l_thin",
     text: "宽度",
-    desc: 20,
+    desc: 200,
     onClick: () => {
       showChange.value = !showChange.value;
       childMenus.value = null;
@@ -124,7 +123,7 @@ watchEffect(() => {
   if (style.value === VectorStyle.RoadSide) {
     console.log(vector.value.roadSide);
     menus.value[1] = lineWidthMenu[2];
-    lineWidthMenu[2].desc = vector.value.roadSide.width;
+    lineWidthMenu[2].desc = vector.value.roadSide.width * 10;
   } else {
     (menus.value[1] =
       vector.value?.weight === VectorWeight.Bold ? lineWidthMenu[0] : lineWidthMenu[1]),
@@ -133,7 +132,7 @@ watchEffect(() => {
 });
 watchEffect(() => {
   if (style.value === VectorStyle.RoadSide) {
-    vector.value.setRoadSideWidth(lineWidthMenu[2].desc);
+    vector.value.setRoadSideWidth((lineWidthMenu[2].desc as number) / 10);
     drawRef.value.renderer.autoRedraw();
   }
 });

src/views/graphic/header.vue

@@ -72,7 +72,7 @@ import { AccidentPhoto, accidentPhotos, types } from "@/store/accidentPhotos";
 import { useData } from "./data";
 import UiInput from "@/components/base/components/input/index.vue";
 import { roadPhotos } from "@/store/roadPhotos";
-import { uploadImage } from "@/store/sync";
+import { downloadImage, uploadImage } from "@/store/sync";
 import { genUseLoading } from "@/hook";
 import { loadData, bus } from "@/hook/useGraphic";
 
@@ -184,10 +184,17 @@ const saveStore = genUseLoading(async () => {
     origin.push(newData);
   }
   data.value = newData;
+  if (!isRoad.value) {
+    await downloadImage(blob);
+  }
 });
 
 const saveHandler = async () => {
   await saveStore();
+  console.error("isRoad.value", isRoad.value);
+  if (isRoad.value) {
+    Message.success(`保存成功`);
+  }
   await router.replace({
     name: isRoad.value ? writeRouteName.roads : writeRouteName.accidents,
   });

src/views/graphic/menus.ts

@@ -38,6 +38,7 @@ export type MenuRaw = {
   icon?: string;
   children?: MenusRaw;
   extend?: MenusRaw;
+  disable?: boolean;
 };
 export type MenusRaw = Array<MenuRaw>;
 
@@ -192,6 +193,7 @@ export const mainMenusRaw: MenusRaw = [
         icon: "r_structure",
         text: "道路模板",
         extend: templateMenusRaw,
+        disable: true,
       },
     ],
   },

src/views/graphic/setting.vue

@@ -8,8 +8,10 @@
             <span>单位： mm</span>
           </p>
           <ui-input
-            :modelValue="data.singleRoadWidth * 100"
-            @update:modelValue="(val) => (data.singleRoadWidth = val / 100)"
+            :modelValue="data.singleRoadWidth * 1000"
+            @update:modelValue="
+              (val) => (data.singleRoadWidth = Number(val) ? val / 1000 : 0)
+            "
             width="100%"
           >
             <template v-slot:icon>
@@ -28,8 +30,10 @@
             <span>单位： mm</span>
           </p>
           <ui-input
-            :modelValue="data.roadQuarantineWidth * 100"
-            @update:modelValue="(val) => (data.roadQuarantineWidth = val / 100)"
+            :modelValue="data.roadQuarantineWidth * 1000"
+            @update:modelValue="
+              (val) => (data.roadQuarantineWidth = Number(val) ? val / 1000 : 0)
+            "
             width="100%"
           >
             <template v-slot:icon>

src/views/roads/index.vue

@@ -53,7 +53,7 @@
     >
       <template v-slot="{ data }">
         <p v-if="currentType === TypeEnum.Table">
-          {{ (data as any).title || "默认标题" }}
+          <!-- {{ (data as any).title || "默认标题" }} -->
         </p>
       </template>
     </Photos>
@@ -113,12 +113,13 @@ const sortPhotos = computed(() =>
     .reverse()
 );
 const onBack = () => {
-  let back = router.currentRoute.value.query.back;
-  if (back) {
-    router.back();
-  } else {
-    api.closePage();
-  }
+  router.back();
+  // let back = router.currentRoute.value.query.back;
+  // if (back) {
+  //   router.back();
+  // } else {
+  //   api.closePage();
+  // }
 };
 
 const active = ref<RoadPhoto>();

src/views/scene/covers/range.vue

@@ -44,10 +44,10 @@
 </template>
 
 <script setup lang="ts">
-import { Pos, SDK } from "@/sdk";
+import { Mode, Pos, SDK } from "@/sdk";
 import { computed, onMounted, onUnmounted, ref, watchEffect } from "vue";
 import { sceneSeting } from "@/store/sceneSeting";
-import { disabledMap, modeDisabled, useSDK } from "@/hook";
+import { customMap, disabledMap, modeDisabled, useSDK } from "@/hook";
 
 const props = defineProps<{ rangeKey: string }>();
 const topSetting = useSDK().scene.getSceneCropSetting().top;
@@ -82,23 +82,25 @@ watchEffect((onCleanup) => {
   if (props.rangeKey && cropApi.value) {
     const name = `${props.rangeKey[0].toUpperCase()}${props.rangeKey.substring(1)}`;
     cropApi.value[`enterSet${name}`]();
-    console.log(`enterSet${name}`)
+    console.log(`enterSet${name}`);
     onCleanup(() => {
       cropApi.value[`leaveSet${name}`]();
-      console.log(`leaveSet${name}`)
+      console.log(`leaveSet${name}`);
     });
   }
 });
 
+let oldMode;
 let pop;
 onMounted(() => {
-  console.log("enterCropSetting")
   cropApi.value = useSDK().scene.enterCropSetting();
+  oldMode = customMap.mode;
+  customMap.mode = Mode.cloud;
   pop = modeDisabled.push(ref(true));
 });
 onUnmounted(() => {
-  console.log("quit")
   cropApi.value && cropApi.value.quit();
+  customMap.mode = oldMode;
   modeDisabled.pop();
 });
 </script>

src/views/scene/index.vue

@@ -3,7 +3,13 @@
     <template v-slot:header>
       <div class="photos-header">
         <div class="left">
-          <ui-icon class="back-icon" type="return" ctrl style="margin-right: 10px" @click="back" />
+          <ui-icon
+            class="back-icon"
+            type="return"
+            ctrl
+            style="margin-right: 10px"
+            @click="back"
+          />
           <span> 案件 </span>
         </div>
       </div>
@@ -14,15 +20,28 @@
         <div class="info-top-left" :class="{ full: viewStatus }">
           <Container @loaded="loaded = true" />
           <template v-if="loaded && !trackMode">
-            <Menus v-if="viewStatus" @active="(data) => (activeMenuKeys = data)" @enter-child="childPage = true" @leave-child="childPage = false" />
+            <Menus
+              v-if="viewStatus"
+              @active="(data) => (activeMenuKeys = data)"
+              @enter-child="childPage = true"
+              @leave-child="childPage = false"
+            />
             <!-- v-if="currentView" -->
             <BasePoints />
             <FixPoints />
             <Measures />
             <Photo />
-            <Range v-if="activeMenuKeys[0] === 'range'" :rangeKey="activeMenuKeys.slice(1).join(':')" />
+            <Range
+              v-if="activeMenuKeys[0] === 'range'"
+              :rangeKey="activeMenuKeys.slice(1).join(':')"
+            />
             <!-- <ButtonPane class="back fun-ctrl" size="48" @click="router.push('/scene')" v-if="!childPage"> -->
-            <ButtonPane class="back fun-ctrl" :size="viewStatus ? 64 : 48" @click="onScale" v-if="!childPage">
+            <ButtonPane
+              class="back fun-ctrl"
+              :size="viewStatus ? 64 : 48"
+              @click="onScale"
+              v-if="!childPage"
+            >
               <ui-icon :type="viewStatus ? 'screen_c' : 'screen_f'" class="icon" />
             </ButtonPane>
             <Mode />
@@ -43,11 +62,27 @@
           </div>
           <div class="text-item">
             <p>事故描述:</p>
-            <textarea class="info-textarea" v-model="sceneInfo.accidentDesc" @input="inputHandler"></textarea>
+            <textarea
+              class="info-textarea"
+              v-model="sceneInfo.accidentDesc"
+              @input="inputHandler"
+            ></textarea>
           </div>
           <div class="info-btn">
-            <div class="right-btn" @click="router.push('/roads?back=1')">现场绘图({{ sceneSortPhotos.length }})</div>
-            <div class="right-btn" @click="router.push('/accidents?back=1')">事故照片({{ accodentSortPhotos.length }})</div>
+            <div
+              class="right-btn"
+              @click="
+                router.push({
+                  name: writeRouteName.roads,
+                  params: { type: 'table', back: 1 },
+                })
+              "
+            >
+              现场绘图({{ sceneSortPhotos.length }})
+            </div>
+            <div class="right-btn" @click="router.push('/accidents?back=1')">
+              事故照片({{ accodentSortPhotos.length }})
+            </div>
           </div>
         </div>
       </div>
@@ -79,7 +114,7 @@ import { ref, watchEffect, computed, onMounted, onActivated, nextTick } from "vu
 import { back } from "@/store/sync";
 import { trackMode } from "@/views/scene/trackMeasureWidth";
 import { currentView } from "./currentScene";
-import { router } from "@/router";
+import { router, writeRouteName } from "@/router";
 import { roadPhotos } from "@/store/roadPhotos";
 import { types, accidentPhotos } from "@/store/accidentPhotos";
 import { debounce } from "@/utils";
@@ -90,13 +125,17 @@ const accodentSortPhotos = computed(() => {
   const photos = [...accidentPhotos.value];
   return photos.sort((a, b) => types.indexOf(a.type) - types.indexOf(b.type));
 });
-
+const sortPhotos = computed(() =>
+  roadPhotos.value
+    // .filter((item) => (currentType.value === TypeEnum.Draw ? !item.table : !!item.table))
+    .reverse()
+);
 const enum TypeEnum {
   Draw,
   Table,
 }
 const currentType = ref(TypeEnum.Draw);
-const sceneSortPhotos = computed(() => roadPhotos.value.filter((item) => (currentType.value === TypeEnum.Draw ? !item.table : !!item.table)).reverse());
+const sceneSortPhotos = computed(() => roadPhotos.value);
 
 const loaded = ref(false);
 const childPage = ref(false);
@@ -115,7 +154,6 @@ const sceneInfo = ref({
   accidentDesc: "",
 });
 const inputHandler = debounce(() => {
-  console.error(1);
   tables.value["sceneInfo"] = sceneInfo.value;
 }, 300);
 const viewStatus = ref(false);

src/views/scene/trackMeasureWidth.ts

@@ -1,20 +1,20 @@
-import { router } from '@/router';
-import writeRouteName from '../../router/constant';
-import { startMeasure, SuccessMeasureAtom } from '../scene/linkage/measure';
-import { ref, watchEffect } from 'vue';
-import { useAsyncSDK } from '@/hook/useLaser';
-import { customMap, laserModeStack } from '@/hook/custom/index';
-import { Mode } from '@/sdk';
-import { mount } from '@/components/base/utils/componentHelper';
-import TrackMeasure from '@/views/scene/TrackMeasure.vue';
-import { list } from '@/store/measure';
+import { router } from "@/router";
+import writeRouteName from "../../router/constant";
+import { startMeasure, SuccessMeasureAtom } from "../scene/linkage/measure";
+import { ref, watchEffect } from "vue";
+import { useAsyncSDK } from "@/hook/useLaser";
+import { customMap, laserModeStack } from "@/hook/custom/index";
+import { Mode } from "@/sdk";
+import { mount } from "@/components/base/utils/componentHelper";
+import TrackMeasure from "@/views/scene/TrackMeasure.vue";
+import { list } from "@/store/measure";
 
 export const trackMode = ref(false);
 
 export const trackMeasureWidth = async () => {
   trackMode.value = true;
   // await router.push({ name: writeRouteName.scene });
-  await router.push('/scene?full=1');
+  await router.push("/scene?full=1");
   const sdk = await useAsyncSDK();
 
   laserModeStack.push(ref(Mode.cloud));
@@ -38,7 +38,7 @@ export const trackMeasureWidth = async () => {
 
   trackMode.value = false;
   if (measure) {
-    return Number(measure.length.toFixed(2));
+    return Number(measure.length.toFixed(3));
   } else {
     return null;
   }

src/views/tables/ask.vue

@@ -151,12 +151,12 @@
         </div>
       </div>
     </div>
-    <div class="bottom-name" v-show="!isWrite">
+    <div v-if="page <= 1" class="bottom-name" v-show="!isWrite">
       <span v-if="type == '1'">被询问人:</span>
       <span v-else>被讯问人:</span>
       <div style="flex: 1">
         <input type="text" v-model="data.askerBys" />
-        <div class="content-box">{{ data.askerBys }}</div>
+        <div class="content-box left">{{ data.askerBys }}</div>
       </div>
     </div>
   </div>
@@ -274,6 +274,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
+  word-break: break-all;
   &.left {
     justify-content: flex-start;
   }

src/views/tables/author/author-one.vue

@@ -43,37 +43,37 @@
       <div class="item" style="margin-top: 100px">
         <span>受委托人姓名：</span>
         <div style="flex: 1" class="input-box">
-          <input style="width: 100%" v-model="data.authorBy.name" />
-          <div class="content-box">{{ data.authorBy.name }}</div>
+          <input style="width: 100%" v-model="data.authorByName" />
+          <div class="content-box">{{ data.authorByName }}</div>
         </div>
         <span>性别：</span>
         <div class="input-box" style="min-width: 60px">
-          <input style="width: 60px" v-model="data.authorBy.sex" />
-          <div class="content-box">{{ data.authorBy.sex }}</div>
+          <input style="width: 60px" v-model="data.authorBySex" />
+          <div class="content-box">{{ data.authorBySex }}</div>
         </div>
         <span>年龄：</span>
         <div class="input-box" style="min-width: 60px">
-          <input style="width: 60px" v-model="data.authorBy.age" />
-          <div class="content-box">{{ data.authorBy.age }}</div>
+          <input style="width: 60px" v-model="data.authorByAge" />
+          <div class="content-box">{{ data.authorByAge }}</div>
         </div>
         <span>身份证号：</span>
       </div>
       <div class="item">
         <div style="flex: 1" class="input-box">
-          <input style="width: 100%" v-model="data.authorBy.id" />
-          <div class="content-box">{{ data.authorBy.id }}</div>
+          <input style="width: 100%" v-model="data.authorById" />
+          <div class="content-box">{{ data.authorById }}</div>
         </div>
         <span>工作单位：</span>
         <div class="input-box" style="min-width: 330px">
-          <input style="width: 330px" v-model="data.authorBy.company" />
-          <div class="content-box">{{ data.authorBy.company }}</div>
+          <input style="width: 330px" v-model="data.authorByCompany" />
+          <div class="content-box">{{ data.authorByCompany }}</div>
         </div>
         <span>住址及联系方式：</span>
       </div>
       <div class="item">
         <div style="flex: 1" class="input-box">
-          <input style="width: 100%" v-model="data.authorBy.addressPhoneNum" />
-          <div class="content-box">{{ data.authorBy.addressPhoneNum }}</div>
+          <input style="width: 100%" v-model="data.authorByPhoneNum" />
+          <div class="content-box">{{ data.authorByPhoneNum }}</div>
         </div>
       </div>
 
@@ -91,8 +91,8 @@
       <div class="item" style="margin-top: 100px">
         <span>受托人：</span>
         <div class="input-box">
-          <input style="width: 100%" v-model="data.authorBy.name" />
-          <div class="content-box">{{ data.authorBy.name }}</div>
+          <input style="width: 100%" v-model="data.authorByName" />
+          <div class="content-box">{{ data.authorByName }}</div>
         </div>
         <span>代理权限为：</span>
       </div>
@@ -136,18 +136,18 @@ const checkData = ref({
 });
 
 const saveHandler = () => {
-  return { type: "author", data: data.value };
+  return { type: "authorOne", data: data.value };
 };
 
 defineExpose({ saveHandler, data });
 onMounted(() => {
   if (props.isDownloadShow) {
   } else {
-    setData("author");
+    setData("authorOne");
   }
 
-  if (tablesInfo.author) {
-    data.value = tablesInfo.author;
+  if (tablesInfo.authorOne) {
+    data.value = tablesInfo.authorOne;
   }
 });
 </script>

src/views/tables/author/author-two.vue

@@ -82,18 +82,18 @@ const checkData = ref({
 });
 
 const saveHandler = () => {
-  return { type: "author", data: data.value };
+  return { type: "authorTwo", data: data.value };
 };
 
 defineExpose({ saveHandler, data });
 onMounted(() => {
   if (props.isDownloadShow) {
   } else {
-    setData("author");
+    setData("authorTwo");
   }
 
-  if (tablesInfo.author) {
-    data.value = tablesInfo.author;
+  if (tablesInfo.authorTwo) {
+    data.value = tablesInfo.authorTwo;
   }
 });
 </script>

src/views/tables/data/index.ts

@@ -189,23 +189,26 @@ let data = {
       ["", "", "", "", "", "", ""],
     ],
   },
-  author: {
+  authorTwo: {
+    options: { check: "", value: "" },
+    authorSign: "",
+    authorBySign: "",
+  },
+
+  authorOne: {
     authorList: [
       { name: "", sex: "", age: "", id: "", address: "", phoneNum: "" },
       { name: "", sex: "", age: "", id: "", address: "", phoneNum: "" },
       { name: "", sex: "", age: "", id: "", address: "", phoneNum: "" },
     ],
-    authorBy: {
-      sex: "",
-      age: "",
-      id: "",
-      company: "",
-      addressPhoneNum: "",
-    },
+    authorByName: "",
+    authorBySex: "",
+    authorByAge: "",
+    authorById: "",
+    authorByCompany: "",
+    authorByPhoneNum: "",
     message: "",
     options: { check: "", value: "" },
-    authorSign: "",
-    authorBySign: "",
   },
 };
 

src/views/tables/explorate-four.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="explorate" v-if="data">
+  <div class="explorate" v-if="data" :class="{ downMode: downMode }">
     <div>
       <h2 class="title">道路交通事故现场勘查笔录(续页)</h2>
 
@@ -21,7 +21,10 @@
 
             <tr v-for="(i, index) in data.driversInfoList">
               <td v-for="(j, j_index) in i">
-                <div><input type="text" /></div>
+                <div>
+                  <div class="content-box">{{ data.driversInfoList[index][j_index] }}</div>
+                  <input type="text" v-model="data.driversInfoList[index][j_index]" />
+                </div>
               </td>
               <!-- <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
@@ -87,7 +90,10 @@
             </tr>
             <tr v-for="(i, index) in data.carsInfoList">
               <td v-for="(j, j_index) in i">
-                <div><input type="text" /></div>
+                <div>
+                  <div class="content-box" v-html="data.carsInfoList[index][j_index]"></div>
+                  <input type="text" v-model="data.carsInfoList[index][j_index]" />
+                </div>
               </td>
               <!-- <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
@@ -137,12 +143,14 @@
             <span>现场勘查人员签名：</span>
             <div>
               <input type="text" v-model="data.explorateSign" />
+              <div class="content-box left">{{ data.clientSign }}</div>
             </div>
           </div>
           <div>
             <span>记录人签名：</span>
             <div>
               <input type="text" v-model="data.reportSign" />
+              <div class="content-box left">{{ data.clientSign }}</div>
             </div>
           </div>
         </div>
@@ -151,12 +159,14 @@
             <span>当事人签名：</span>
             <div>
               <input type="text" v-model="data.clientSign" />
+              <div class="content-box left">{{ data.clientSign }}</div>
             </div>
           </div>
           <div>
             <span>见证人签名：</span>
             <div>
               <input type="text" v-model="data.witnessSign" />
+              <div class="content-box left">{{ data.witnessSign }}</div>
             </div>
           </div>
         </div>
@@ -200,13 +210,30 @@ onMounted(() => {
 });
 </script>
 <style lang="scss" scoped>
+.content-box {
+  width: 100%;
+  height: 100%;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  &.left {
+    justify-content: flex-start;
+  }
+}
 .explorate {
   color: #000;
   width: 100%;
   height: 100%;
 
   font-family: sr, st;
-
+  &.downMode {
+    input {
+      display: none;
+    }
+    .content-box {
+      display: flex;
+    }
+  }
   .title {
     text-align: center;
     margin-bottom: 10px;
@@ -237,7 +264,7 @@ onMounted(() => {
           padding: 0 5px;
           box-sizing: border-box;
           text-align: center;
-          max-width: 11%;
+          // max-width: 11%;
           height: 40px;
           border-right: 1px solid #000;
           border-bottom: 1px solid #000;

src/views/tables/explorate-one.vue

@@ -23,19 +23,22 @@
             <div>勘查单位</div>
             <!-- <div class="input-box" contenteditable v-html="data.explorateCompany"></div> -->
             <div class="input-box">
-              <input type="text" v-model="data.explorateCompany" />
+              <input type="text" style="text-align: center" v-model="data.explorateCompany" />
+              <div class="content-box">{{ data.explorateCompany }}</div>
             </div>
           </div>
           <div class="info">
             <div>勘查时间</div>
             <div class="input-box">
-              <input type="text" v-model="data.explorateTime" />
+              <input type="text" style="text-align: center" v-model="data.explorateTime" />
+              <div class="content-box">{{ data.explorateTime }}</div>
             </div>
           </div>
           <div class="info">
             <div>事故时间</div>
             <div class="input-box">
-              <input type="text" v-model="data.accidentTime" />
+              <input type="text" style="text-align: center" v-model="data.accidentTime" />
+              <div class="content-box">{{ data.accidentTime }}</div>
             </div>
           </div>
           <div class="time">
@@ -51,7 +54,7 @@
                         <div class="item-info-name">技术等级</div>
                         <div class="item-info-box">
                           <div class="item" v-for="(i, index) in technicalLevel.options" @click="checkLevel(technicalLevel, index)">
-                            <ui-icon :type="technicalLevel.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+                            <ui-icon :type="data.technicalLevel == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                             <span>{{ i.title }}</span>
                           </div>
                         </div>
@@ -60,10 +63,11 @@
                         <div class="item-info-name">行政等级</div>
                         <div class="item-info-box">
                           <div class="item" v-for="(i, index) in administrativeLevel.options" @click="checkLevel(administrativeLevel, index)">
-                            <ui-icon :type="administrativeLevel.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+                            <ui-icon :type="data.administrativeLevel.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                             <span>{{ i.title }}</span>
                             <div class="input-box" style="flex: 1" v-if="i.id == 5">
                               <input type="text" v-model="data.administrativeLevel.value" />
+                              <div style="height: 24px;" class="content-box left border-bottom">{{ data.administrativeLevel.value }}</div>
                             </div>
                           </div>
                         </div>
@@ -76,7 +80,7 @@
                       <div class="item-info">
                         <div class="item-info-box" style="flex-flow: row wrap">
                           <div class="item" v-for="(i, index) in cityRoadList.options" @click="checkLevel(cityRoadList, index)">
-                            <ui-icon :type="cityRoadList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+                            <ui-icon :type="data.cityRoad == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                             <span>{{ i.title }}</span>
                           </div>
                         </div>
@@ -92,7 +96,7 @@
                     <div class="type-item-name">路口</div>
                     <div class="item-msg intersection" style="min-height: 48px; flex-flow: row wrap">
                       <div class="item" v-for="(i, index) in roadSideList.options" @click="checkLevel(roadSideList, index)">
-                        <ui-icon :type="roadSideList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+                        <ui-icon :type="data.roadSide == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                         <span>{{ i.title }}</span>
                       </div>
                     </div>
@@ -101,7 +105,7 @@
                     <div class="type-item-name">路段</div>
                     <div class="item-msg intersection" style="min-height: 60px; flex-flow: row wrap">
                       <div class="item" v-for="(i, index) in roadPartList.options" @click="checkLevel(roadPartList, index)">
-                        <ui-icon :type="roadPartList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+                        <ui-icon :type="data.roadPart == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                         <span>{{ i.title }}</span>
                       </div>
                     </div>
@@ -113,10 +117,12 @@
                 <div class="road-msg">
                   <div class="road-name-text input-box">
                     <input type="text" v-model="data.roadName" />
+                    <div class="content-box left">{{ data.roadName }}</div>
                   </div>
                   <div class="road-num">路号（公路）</div>
                   <div class="road-num-text input-box">
                     <input type="text" v-model="data.roadNum" />
+                    <div class="content-box left">{{ data.roadNum }}</div>
                   </div>
                 </div>
               </div>
@@ -155,10 +161,11 @@
 
             <div style="flex-flow: row wrap">
               <div class="item" v-for="(i, index) in weatherList.options" @click="checkLevel(weatherList, index)">
-                <ui-icon :type="weatherList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+                <ui-icon :type="data.weather.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                 <span>{{ i.title }}</span>
                 <div class="input-box" v-if="i.id == 10">
                   <input type="text" v-model="data.weather.value" />
+                  <div class="content-box left border-bottom">{{ data.weather.value }}</div>
                 </div>
               </div>
             </div>
@@ -171,14 +178,16 @@
                   <span class="info-title">{{ i.title }}</span>
                   <div class="check-box">
                     <div class="check-item" :style="j_index == i.options.length - 1 ? 'flex:1;' : ''" v-for="(j, j_index) in i.options" @click="checkEnvironItem(j, index, j_index)">
-                      <ui-icon :type="i.check == j.id ? 'rb_y' : 'rb_n'"></ui-icon>
+                      <ui-icon :type="data.environments[index].check == j.id ? 'rb_y' : 'rb_n'"></ui-icon>
                       <span>{{ j.name }}</span>
-                      <div class="input-box" v-if="j_index == i.options.length - 1">
+                      <div class="input-box" v-if="j_index == i.options.length - 1 && i.id != 9">
                         <input type="text" v-model="data.environments[index].value" />
+                        <div class="content-box left">{{ data.environments[index].value }}</div>
                       </div>
                     </div>
-                    <div class="input-box" v-if="!i.options.length">
+                    <div class="input-box" style="flex: none; width: 80%" v-if="!i.options.length">
                       <input type="text" v-model="data.environments[index].value" />
+                      <div class="content-box left"  style="height: 24px;">{{ data.environments[index].value }}</div>
                     </div>
                   </div>
                   <!-- <div class="input-box" v-if="index == environments.length - 1">
@@ -193,12 +202,14 @@
               <span>现场勘查人员签名：</span>
               <div>
                 <input type="text" v-model="data.explorateSign" />
+                <div class="content-box left">{{ data.explorateSign }}</div>
               </div>
             </div>
             <div>
               <span>记录人签名：</span>
               <div>
                 <input type="text" v-model="data.reportSign" />
+                <div class="content-box left">{{ data.reportSign }}</div>
               </div>
             </div>
           </div>
@@ -207,12 +218,14 @@
               <span>当事人签名：</span>
               <div>
                 <input type="text" v-model="data.clientSign" />
+                <div class="content-box left">{{ data.clientSign }}</div>
               </div>
             </div>
             <div>
               <span>见证人签名：</span>
               <div>
                 <input type="text" v-model="data.witnessSign" />
+                <div class="content-box left">{{ data.witnessSign }}</div>
               </div>
             </div>
           </div>
@@ -246,18 +259,18 @@ const props = defineProps({
 const data = ref(null);
 
 const layoutRef = ref<HTMLDivElement>();
-const downMode = ref(false);
-const getLayoutImage = async () => {
-  downMode.value = true;
-  await nextTick();
-  console.error(layoutRef.value);
-  const canvas = await html2canvas(layoutRef.value);
-  Message.success({ msg: "已保存至相册", time: 2000 });
-  downMode.value = false;
-  const blob = await new Promise<Blob>((resolve) => canvas.toBlob(resolve, "image/jpeg", 0.95));
-  await downloadImage(blob, "12312.jpg");
-  // return await uploadImage(blob);
-};
+// const downMode = ref(false);
+// const getLayoutImage = async () => {
+//   downMode.value = true;
+//   await nextTick();
+//   console.error(layoutRef.value);
+//   const canvas = await html2canvas(layoutRef.value);
+//   Message.success({ msg: "已保存至相册", time: 2000 });
+//   downMode.value = false;
+//   const blob = await new Promise<Blob>((resolve) => canvas.toBlob(resolve, "image/jpeg", 0.95));
+//   await downloadImage(blob, "12312.jpg");
+//   // return await uploadImage(blob);
+// };
 const sceneTypes = ref({
   check: 0,
   type: "explorateType",
@@ -402,6 +415,7 @@ const weatherList = ref({
 const checkEnvironItem = (item, index, j_index) => {
   environments.value[index].check = item.id;
   data.value.environments[index].check = item.id;
+  console.log(item.id)
 };
 const environments = ref([
   {
@@ -509,7 +523,7 @@ const environments = ref([
   },
   {
     id: 10,
-    title: "照明情况：",
+    title: "其他需要记录的情况：",
     value: "",
     check: 0,
     options: [],
@@ -538,6 +552,19 @@ onMounted(() => {
 });
 </script>
 <style lang="scss" scoped>
+.content-box {
+  width: 100%;
+  height: 100%;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  &.left {
+    justify-content: flex-start;
+  }
+  &.border-bottom {
+    border-bottom: 1px solid #000;
+  }
+}
 input {
   width: 100%;
 }
@@ -552,8 +579,14 @@ div {
   // display: grid;
 
   font-family: sr, st;
-
-  // padding: 80px 0 0 0;
+  &.downMode {
+    input {
+      display: none;
+    }
+    .content-box {
+      display: flex;
+    }
+  }
   > div {
     // padding: 20px 50px 30px;
   }
@@ -576,13 +609,13 @@ div {
     }
   }
 
-  &.downMode {
-    width: 1050px;
-    height: 1485px;
-    > div {
-      padding: 125px 100px 75px;
-    }
-  }
+  // &.downMode {
+  //   width: 1050px;
+  //   height: 1485px;
+  //   > div {
+  //     padding: 125px 100px 75px;
+  //   }
+  // }
 }
 
 .wrapper {
@@ -634,7 +667,8 @@ div {
     display: grid;
     grid-template-columns: 14% 86%;
     grid-template-rows: repeat(1, 100%);
-    height: 35px;
+    // height: 35px;
+    min-height: 35px;
     > div {
       border-bottom: 1px solid #000;
       border-right: 1px solid #000;

src/views/tables/explorate-three.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="explorate" v-if="data">
+  <div class="explorate" v-if="data" :class="{ downMode }">
     <div>
       <h2 class="title">道路交通事故现场勘查笔录(续页)</h2>
 
@@ -10,23 +10,38 @@
 
           <div class="item column">
             <span>（一）地面痕迹：</span>
-            <div><textarea v-model="data.groundTrace" name="" id="" cols="30" rows="10"></textarea></div>
+            <div>
+              <textarea v-model="data.groundTrace" name="" id="" cols="30" rows="10"></textarea>
+              <div class="content-box top-left">{{ data.groundTrace }}</div>
+            </div>
           </div>
           <div class="item column">
             <span>（二）车体痕迹：</span>
-            <div><textarea v-model="data.carTrace" name="" id="" cols="30" rows="10"></textarea></div>
+            <div>
+              <div class="content-box top-left">{{ data.carTrace }}</div>
+              <textarea v-model="data.carTrace" name="" id="" cols="30" rows="10"></textarea>
+            </div>
           </div>
           <div class="item column">
             <span>（三）人体痕迹：</span>
-            <div><textarea v-model="data.bodyTrace" name="" id="" cols="30" rows="10"></textarea></div>
+            <div>
+              <div class="content-box top-left">{{ data.bodyTrace }}</div>
+              <textarea v-model="data.bodyTrace" name="" id="" cols="30" rows="10"></textarea>
+            </div>
           </div>
           <div class="item column">
             <span>（四）物证：</span>
-            <div><textarea v-model="data.meterialEvidence" name="" id="" cols="30" rows="10"></textarea></div>
+            <div>
+              <div class="content-box top-left">{{ data.meterialEvidence }}</div>
+              <textarea v-model="data.meterialEvidence" name="" id="" cols="30" rows="10"></textarea>
+            </div>
           </div>
           <div class="item column">
             <span>（五）其他：</span>
-            <div><textarea v-model="data.other" name="" id="" cols="30" rows="10"></textarea></div>
+            <div>
+              <div class="content-box top-left">{{ data.other }}</div>
+              <textarea v-model="data.other" name="" id="" cols="30" rows="10"></textarea>
+            </div>
           </div>
         </div>
 
@@ -35,12 +50,14 @@
             <span>现场勘查人员签名：</span>
             <div>
               <input type="text" v-model="data.explorateSign" />
+              <div class="content-box left">{{ data.explorateSign }}</div>
             </div>
           </div>
           <div>
             <span>记录人签名：</span>
             <div>
               <input type="text" v-model="data.reportSign" />
+              <div class="content-box left">{{ data.reportSign }}</div>
             </div>
           </div>
         </div>
@@ -49,12 +66,14 @@
             <span>当事人签名：</span>
             <div>
               <input type="text" v-model="data.clientSign" />
+              <div class="content-box left">{{ data.clientSign }}</div>
             </div>
           </div>
           <div>
             <span>见证人签名：</span>
             <div>
               <input type="text" v-model="data.witnessSign" />
+              <div class="content-box left">{{ data.witnessSign }}</div>
             </div>
           </div>
         </div>
@@ -97,6 +116,21 @@ onMounted(() => {
 });
 </script>
 <style lang="scss" scoped>
+.content-box {
+  width: 100%;
+  height: 100%;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  word-break: break-all;
+  &.left {
+    justify-content: flex-start;
+  }
+  &.top-left {
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+}
 .explorate {
   color: #000;
   width: 100%;
@@ -104,6 +138,15 @@ onMounted(() => {
   // display: grid;
 
   font-family: sr, st;
+  &.downMode {
+    input,
+    textarea {
+      display: none;
+    }
+    .content-box {
+      display: flex;
+    }
+  }
 
   // padding: 80px 0 0 0;
   > div {

src/views/tables/explorate-two.vue

@@ -13,7 +13,7 @@
               <span>{{ i.title }}</span>
               <div v-if="i.id == 2" style="flex: 1">
                 <input type="text" v-model="data.cameraInfo.value" />
-                <div class="content-box left" style="border-bottom: 1px solid #000">{{ data.cameraInfo.value }}</div>
+                <div class="content-box left" style="height: 24px; border-bottom: 1px solid #000">{{ data.cameraInfo.value }}</div>
               </div>
             </div>
           </div>
@@ -36,18 +36,24 @@
           <div class="item">
             <span>受伤：（</span>
             <div style="min-width: 10px">
-              <input style="width: 30px" type="text" />
-              <div class="content-box"></div>
+              <input style="width: 30px" type="text" v-model="data.hurtNum" />
+              <div class="content-box">{{ data.hurtNum }}</div>
             </div>
             <span>）人。</span>
           </div>
           <div class="item column">
             <span>伤亡人员去向：</span>
-            <div style="height: 60px; width: 100%" contenteditable></div>
+            <div style="min-height: 60px; width: 100%">
+              <textarea style="height: 60px" v-model="data.hurtDieGo" name="" id="" cols="30" rows="10"></textarea>
+              <div class="content-box top-left">{{ data.hurtDieGo }}</div>
+            </div>
           </div>
           <div class="item column">
             <span>其他需求说明的情况：</span>
-            <div style="height: 60px; width: 100%" contenteditable></div>
+            <div style="min-height: 60px; width: 100%">
+              <textarea style="height: 60px" v-model="data.desc" name="" id="" cols="30" rows="10"></textarea>
+              <div class="content-box top-left">{{ data.desc }}</div>
+            </div>
           </div>
           <p>（二）救援简要情况：</p>
 
@@ -72,7 +78,7 @@
             <template v-for="(i, index) in reachList.options">
               <div v-if="index < 2" @click="checkOptions(reachList, index)">
                 <div style="display: inline-block">
-                  <ui-icon :type="reachList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+                  <ui-icon :type="data.reachs.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                   <span>{{ i.title }}</span>
                 </div>
               </div>
@@ -82,7 +88,7 @@
             <template v-for="(i, index) in reachList.options">
               <div v-if="index >= 2" @click="checkOptions(reachList, index)">
                 <div style="display: inline-block">
-                  <ui-icon :type="reachList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+                  <ui-icon :type="data.reachs.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                   <span>{{ i.title }}</span>
                 </div>
               </div>
@@ -117,21 +123,33 @@
         <div class="sign-box">
           <div>
             <span>现场勘查人员签名：</span>
-            <div><input type="text" v-model="data.explorateSign" /></div>
+            <div>
+              <input type="text" v-model="data.explorateSign" />
+              <div class="content-box left">{{ data.explorateSign }}</div>
+            </div>
           </div>
           <div>
             <span>记录人签名：</span>
-            <div><input type="text" v-model="data.reportSign" /></div>
+            <div>
+              <input type="text" v-model="data.reportSign" />
+              <div class="content-box left">{{ data.reportSign }}</div>
+            </div>
           </div>
         </div>
         <div class="sign-box">
           <div>
             <span>当事人签名：</span>
-            <div><input type="text" v-model="data.clientSign" /></div>
+            <div>
+              <input type="text" v-model="data.clientSign" />
+              <div class="content-box left">{{ data.clientSign }}</div>
+            </div>
           </div>
           <div>
             <span>见证人签名：</span>
-            <div><input type="text" v-model="data.witnessSign" /></div>
+            <div>
+              <input type="text" v-model="data.witnessSign" />
+              <div class="content-box left">{{ data.witnessSign }}</div>
+            </div>
           </div>
         </div>
       </div>
@@ -241,6 +259,10 @@ div[contenteditable] {
   &.left {
     justify-content: flex-start;
   }
+  &.top-left {
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
 }
 .explorate {
   color: #000;
@@ -249,7 +271,15 @@ div[contenteditable] {
   // display: grid;
 
   font-family: sr, st;
-
+  &.downMode {
+    input,
+    textarea {
+      display: none;
+    }
+    .content-box {
+      display: flex;
+    }
+  }
   // padding: 80px 0 0 0;
   > div {
     // padding: 20px 50px 30px;
@@ -352,6 +382,11 @@ div[contenteditable] {
           > div {
             outline: none;
             height: 100%;
+            textarea {
+              height: 100%;
+              width: 100%;
+              resize: none;
+            }
           }
         }
         > div {

src/views/tables/extract.vue

@@ -8,21 +8,21 @@
         <tr>
           <td width="12%" colspan="2">姓名</td>
           <td width="20%">
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.name" />
               <div class="content-box">{{ data.name }}</div>
             </div>
           </td>
           <td width="10%">性别</td>
           <td width="8%">
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.sex" />
               <div class="content-box">{{ data.sex }}</div>
             </div>
           </td>
           <td width="20%">身份证号码</td>
           <td width="30%" colspan="2">
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.id" />
               <div class="content-box">{{ data.id }}</div>
             </div>
@@ -31,14 +31,14 @@
         <tr>
           <td width="15%" colspan="2">事故时间</td>
           <td width="35%" colspan="3">
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.time" />
               <div class="content-box">{{ data.time }}</div>
             </div>
           </td>
           <td width="20%">地点</td>
           <td width="30%" colspan="2">
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.address" />
               <div class="content-box">{{ data.address }}</div>
             </div>
@@ -47,7 +47,7 @@
         <tr>
           <td colspan="2">血样（尿样)提取时间</td>
           <td colspan="6">
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.extractTime" />
               <div class="content-box">{{ data.extractTime }}</div>
             </div>
@@ -56,7 +56,7 @@
         <tr>
           <td colspan="2">血样（尿样)提取地点</td>
           <td colspan="6">
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.extractAdress" />
               <div class="content-box">{{ data.extractAdress }}</div>
             </div>
@@ -67,7 +67,7 @@
           <td width="5%" rowspan="3">提取登记</td>
           <td colspan="3">A样本盛装容器编号</td>
           <td>
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.aNumber" />
               <div class="content-box">{{ data.aNumber }}</div>
             </div>
@@ -75,7 +75,7 @@
           <td width="10%">提取量</td>
           <td>
             <div>
-              <div>
+              <div style="white-space: normal; line-height: 24px">
                 <input v-model="data.aVolume" />
                 <div class="content-box">{{ data.aVolume }}</div>
               </div>
@@ -86,7 +86,7 @@
         <tr>
           <td colspan="3">B样本盛装容器编号</td>
           <td>
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.bNumber" />
               <div class="content-box">{{ data.bNumber }}</div>
             </div>
@@ -94,7 +94,7 @@
           <td>提取量</td>
           <td>
             <div>
-              <div>
+              <div style="white-space: normal; line-height: 24px">
                 <input v-model="data.bVolume" />
                 <div class="content-box">{{ data.bVolume }}</div>
               </div>
@@ -105,14 +105,14 @@
         <tr>
           <td colspan="1">消毒名称</td>
           <td colspan="2">
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.disinfect" />
               <div class="content-box">{{ data.disinfect }}</div>
             </div>
           </td>
           <td>密封方式</td>
           <td colspan="2">
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.sealing" />
               <div class="content-box">{{ data.sealing }}</div>
             </div>
@@ -121,14 +121,14 @@
         <tr>
           <td width="10%" colspan="2">提取人员单位</td>
           <td colspan="2">
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.extractUnit" />
               <div class="content-box">{{ data.extractUnit }}</div>
             </div>
           </td>
           <td>提取人员（签名）</td>
           <td colspan="2">
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.extractMumber" />
               <div class="content-box">{{ data.extractMumber }}</div>
             </div>
@@ -137,7 +137,7 @@
         <tr>
           <td>通知家属情况</td>
           <td colspan="7">
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.notice" />
               <div class="content-box">{{ data.notice }}</div>
             </div>
@@ -146,21 +146,21 @@
         <tr>
           <td>被提取人（签名）</td>
           <td colspan="2">
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.extractBySign" />
               <div class="content-box">{{ data.extractBySign }}</div>
             </div>
           </td>
           <td>见证人（签名）</td>
           <td colspan="2">
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.witnessSign" />
               <div class="content-box">{{ data.witnessSign }}</div>
             </div>
           </td>
           <td>交通警察（签名）</td>
           <td colspan="2">
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.policeSign" />
               <div class="content-box">{{ data.policeSign }}</div>
             </div>
@@ -169,7 +169,7 @@
         <tr>
           <td>办案单位</td>
           <td colspan="7">
-            <div>
+            <div style="white-space: normal; line-height: 24px">
               <input v-model="data.company" />
               <div class="content-box">{{ data.company }}</div>
             </div>
@@ -213,6 +213,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
+  word-break: break-all;
   &.left {
     justify-content: flex-start;
   }

src/views/tables/identification.vue

@@ -61,7 +61,7 @@
               <span>当事人：</span>
               <div style="flex: 1">
                 <input v-model="data.optionsOne.client" />
-                <div class="content-box">{{ data.optionsOne.client }}</div>
+                <div class="content-box left" >{{ data.optionsOne.client }}</div>
               </div>
             </div>
             <div>
@@ -72,7 +72,7 @@
             <span>交通警察：</span>
             <div style="flex: 1">
               <input v-model="data.optionsOne.police" />
-              <div class="content-box">{{ data.optionsOne.police }}</div>
+              <div class="content-box left">{{ data.optionsOne.police }}</div>
             </div>
           </div>
         </div>
@@ -84,8 +84,8 @@
             <div style="flex: 1">
               <span>当事人：</span>
               <div style="flex: 1">
-                <input v-model="data.optionsOne.client" />
-                <div class="content-box">{{ data.optionsOne.client }}</div>
+                <input v-model="data.optionsTwo.client" />
+                <div class="content-box left">{{ data.optionsTwo.client }}</div>
               </div>
             </div>
             <div>
@@ -95,8 +95,8 @@
           <div class="sign-box">
             <span>交通警察：</span>
             <div style="flex: 1">
-              <input v-model="data.optionsOne.police" />
-              <div class="content-box">{{ data.optionsOne.police }}</div>
+              <input v-model="data.optionsTwo.police" />
+              <div class="content-box left">{{ data.optionsTwo.police }}</div>
             </div>
           </div>
         </div>

src/views/tables/index.vue

@@ -3,7 +3,7 @@
   <MainPanel>
     <template v-slot:header>
       <Header :title="headerTitle" :on-back="onBack" type="return">
-        <ui-button v-if="!isWrite" style="margin-right: 16px" class="download-btn" type="null" width="96px" @click="downloadHandler"> 下载 </ui-button>
+        <ui-button v-if="!isWrite && tableType != 'law'" style="margin-right: 16px" class="download-btn" type="null" width="96px" @click="downloadHandler"> 下载 </ui-button>
         <ui-button v-if="tableType != 'law'" type="primary" width="96px" @click="saveHandler"> {{ isWrite ? "确定" : "保存" }} </ui-button>
       </Header>
     </template>
@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, watch, onMounted, nextTick, onActivated, onDeactivated, provide } from "vue";
+import { reactive, ref, watch, onMounted, nextTick, onActivated, onDeactivated, provide, watchEffect } from "vue";
 import { router } from "@/router";
 import Swiper from "swiper";
 import html2canvas from "html2canvas";
@@ -176,11 +176,12 @@ const getLayoutImage = async () => {
     eleList.value.forEach(async (element, index) => {
       let ele = document.getElementById(`layoutRef${index}`);
       const canvas = await html2canvas(ele);
-      Message.success({ msg: "已保存至相册", time: 2000 });
+
       const blob = await new Promise<Blob>((resolve) => {
         return canvas.toBlob(resolve, "image/jpeg", 0.95);
       });
       await downloadImage(blob, `tables_${index}.jpg`);
+      Message.success({ msg: "已保存至相册", time: 2000 });
       num++;
 
       if (num == eleList.value.length) {
@@ -329,12 +330,13 @@ onDeactivated(() => {
         &.downMode {
           padding: 125px 100px 75px;
           width: 1050px;
-          height: 1485px;
+          min-height: 1485px;
           box-sizing: border-box;
 
           // transform: scale(.5) translateY(-52%);
-          transform: translateY(-100%);
+          transform: translateY(-200%);
           position: absolute;
+          // opacity: 0;
         }
         &.show {
           padding: 125px 100px 75px;

src/views/tables/legacy.vue

@@ -100,17 +100,19 @@ const handlerInput = (e, index, j_index) => {
   data.value.list[index][j_index] = e.target.innerText;
 };
 
-const saveHandler = async () => {
-  await saveStore();
+const saveHandler = () => {
+  return { type: "legacy", data: data.value };
 };
-const saveStore = genUseLoading(async () => {
+const saveStore = () => {
   // return new Promise((res, rej) => {
-  const origin = tables.value;
-  console.log(data.value);
-  origin["legacy"] = JSON.parse(JSON.stringify(data.value));
+  // const origin = tables.value;
+  // console.log(data.value);
+  // return { type: "legacy", data: data.value };
+  // origin["legacy"] = JSON.parse(JSON.stringify(data.value));
   // });
-});
+};
 defineExpose({ saveHandler, data });
+
 onMounted(() => {
   if (props.isDownloadShow) {
   } else {

src/views/tables/write/doc.vue

@@ -17,21 +17,31 @@
     </div>
   </div>
 
-  <div class="bottom-name">
+  <div class="bottom-name" :class="{ downMode }" v-if="data">
     <span v-if="type == '1'">被询问人:</span>
     <span v-else>被讯问人:</span>
-    <div style="flex: 1" contenteditable></div>
+    <div style="flex: 1">
+      <input type="text" v-model="data.askerBys" />
+      <div class="content-box left">{{ data.askerBys }}</div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick, defineProps, defineEmits } from 'vue';
-import { router } from '@/router';
-
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick, defineProps, defineEmits } from "vue";
+import { router } from "@/router";
+import { tables } from "@/store/tables";
+import { tablesInfo, setData } from "../data";
+const data = ref(null);
 const props = defineProps({
+  downMode: {
+    type: Boolean,
+    default: false,
+  },
+  isDownloadShow: { type: Boolean, default: false },
   text: {
     type: String,
-    default: '',
+    default: "",
   },
   page: {
     type: Number,
@@ -42,12 +52,13 @@ const props = defineProps({
     default: 1,
   },
 });
-const emits = defineEmits(['goWrite']);
+
+const emits = defineEmits(["goWrite"]);
 const type = ref(router.currentRoute.value.query.type);
 const lineCount = ref(1);
 const inputHeight = ref(0);
 const getLineCount = () => {
-  let containerH = document.getElementById('view-container').clientHeight;
+  let containerH = document.getElementById("view-container").clientHeight;
   let count = Math.floor(containerH / 40);
   lineCount.value = count;
   inputHeight.value = count * 40;
@@ -57,15 +68,44 @@ const getLineCount = () => {
 const goWrite = () => {
   let text = window.getSelection();
   let textIndex = text.anchorOffset;
-  emits('goWrite', { textIndex });
+  emits("goWrite", { textIndex });
 };
 
 onMounted(async () => {
   await nextTick();
   getLineCount();
+
+  if (props.isDownloadShow) {
+  } else {
+    if (type.value == "1") {
+      setData("askOne");
+    } else {
+      setData("askTwo");
+    }
+  }
+  if (type.value == "1") {
+    if (tablesInfo.askOne) {
+      data.value = tablesInfo.askOne;
+    }
+  } else {
+    if (tablesInfo.askTwo) {
+      data.value = tablesInfo.askTwo;
+    }
+    console.error(tablesInfo);
+  }
 });
 </script>
 <style lang="scss" scoped>
+.content-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &.left {
+    justify-content: flex-start;
+  }
+}
 div[contenteditable] {
   outline: none;
 }
@@ -77,6 +117,17 @@ div[contenteditable] {
   display: flex;
   font-size: 24px;
   font-family: SimSun-Regular, SimSun;
+  .content-box {
+    display: none;
+  }
+  &.downMode {
+    input {
+      display: none;
+    }
+    .content-box {
+      display: flex;
+    }
+  }
 }
 .num-box {
   display: flex;