修正问题

src/components/base/assets/scss/_base-vars.scss

@@ -9,8 +9,8 @@
   --colors-color: #999;
   --colors-border-color: rgba(var(--colors-primary-fill), 0.16);
   --colors-content-color: rgb(--colors-primary-fill);
-  
-  
+
+
   --colors-normal-back: rgba(var(--colors-primary-fill), 0.1);
   --colors-normal-base: rgba(var(--colors-primary-fill), 0.7);
   --colors-normal-hover: rgba(var(--colors-primary-fill), 1);
@@ -22,7 +22,7 @@
   --colors-normal-fill-click: var(--colors-primary-click);
 
   --colors-error-fill: 250, 63, 72;
-  
+
   --small-size: 12px;
   --medium-size: 14px;
   --big-size: 16px;
@@ -38,11 +38,11 @@
 
   --editor-head-filter: blur(0px);
   --editor-head-height: 50px;
-  
+
   --editor-head-back: #252828;
 
   --editor-menu-filter: var(--editor-head-filter);
-  --editor-menu-width: 80px;
+  --editor-menu-width: 64px;
   --editor-menu-left: 0px;
   --editor-menu-right: 0px;
   --editer-menu-fill: 27, 27, 28;

src/components/base/assets/scss/components/_men-item.scss

@@ -13,7 +13,7 @@
 
   span{
     margin-top: 6px;
-    width: 68px;
+    //width: 68px;
     overflow: hidden;
     word-wrap: break-word;
     text-align: center;
@@ -25,4 +25,4 @@
       color: var( --color-main-normal);
       background-color: rgba(255,255,255,0.06);
   }
-}
+}

src/components/base/assets/scss/editor/_menu.scss

@@ -3,7 +3,7 @@
 .ui-editor-menu {
     user-select: none;
     width: var(--editor-menu-width);
-    filter: var(--editor-menu-filter); 
+    filter: var(--editor-menu-filter);
     background-color: var(--editor-menu-back);
     position: fixed;
     left: var(--editor-menu-left);

src/components/base/components/icon/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4084834 */
-  src: url('iconfont.woff2?t=1686814186940') format('woff2'),
-       url('iconfont.woff?t=1686814186940') format('woff'),
-       url('iconfont.ttf?t=1686814186940') format('truetype');
+  src: url('iconfont.woff2?t=1686900891221') format('woff2'),
+       url('iconfont.woff?t=1686900891221') format('woff'),
+       url('iconfont.ttf?t=1686900891221') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,30 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-jtxx_fangxb:before {
+  content: "\e7a4";
+}
+
+.icon-jtxx_fjdcxsfx:before {
+  content: "\e7a5";
+}
+
+.icon-jtxx_fengxb:before {
+  content: "\e7a0";
+}
+
+.icon-jtxx_jcd:before {
+  content: "\e7a1";
+}
+
+.icon-jtxx_jdcxsfx:before {
+  content: "\e7a2";
+}
+
+.icon-jtxx_ryydfx:before {
+  content: "\e7a3";
+}
+
 .icon-sc_sc:before {
   content: "\e79d";
 }

src/components/base/components/icon/iconfont/iconfont.json

@@ -6,6 +6,48 @@
   "description": "交通事故现场勘验系统",
   "glyphs": [
     {
+      "icon_id": "36017753",
+      "name": "jtxx_fangxb",
+      "font_class": "jtxx_fangxb",
+      "unicode": "e7a4",
+      "unicode_decimal": 59300
+    },
+    {
+      "icon_id": "36017754",
+      "name": "jtxx_fjdcxsfx",
+      "font_class": "jtxx_fjdcxsfx",
+      "unicode": "e7a5",
+      "unicode_decimal": 59301
+    },
+    {
+      "icon_id": "36017749",
+      "name": "jtxx_fengxb",
+      "font_class": "jtxx_fengxb",
+      "unicode": "e7a0",
+      "unicode_decimal": 59296
+    },
+    {
+      "icon_id": "36017750",
+      "name": "jtxx_jcd",
+      "font_class": "jtxx_jcd",
+      "unicode": "e7a1",
+      "unicode_decimal": 59297
+    },
+    {
+      "icon_id": "36017751",
+      "name": "jtxx_jdcxsfx",
+      "font_class": "jtxx_jdcxsfx",
+      "unicode": "e7a2",
+      "unicode_decimal": 59298
+    },
+    {
+      "icon_id": "36017752",
+      "name": "jtxx_ryydfx",
+      "font_class": "jtxx_ryydfx",
+      "unicode": "e7a3",
+      "unicode_decimal": 59299
+    },
+    {
       "icon_id": "36016563",
       "name": "sc_sc",
       "font_class": "sc_sc",

src/graphic/CanvasStyle/default.js

@@ -1,20 +1,20 @@
 import { coordinate } from "../Coordinate.js";
 
 const Road = {
-  strokeStyle: "#939393",
+  strokeStyle: "#2F8FFF",
   lineWidth: 1 * coordinate.ratio,
 };
 
 const RoadEdge = {
   ...Road,
   lineWidth: 1 * coordinate.ratio,
-  strokeStyle: "#000",
+  strokeStyle: "#2F8FFF",
 };
 
 const Lane = {
   ...RoadEdge,
   lineWidth: 1 * coordinate.ratio,
-  strokeStyle: "#000",
+  strokeStyle: "#2F8FFF",
   dash: [8 * coordinate.ratio, 8 * coordinate.ratio],
 };
 
@@ -117,8 +117,8 @@ const Measure = {
 };
 
 const NormalLine = {
-  strokeStyle: "#000",
-  lineWidth: 2 * coordinate.ratio,
+  strokeStyle: "#2F8FFF",
+  lineWidth: 1 * coordinate.ratio,
 };
 const CurveLine = {
   ...NormalLine,
@@ -136,7 +136,7 @@ const GuidePositionLine = {
 }
 const MeasureLine = {
   strokeStyle: "#2F8FFF",
-  lineWidth: 4 * coordinate.ratio,
+  lineWidth: 2 * coordinate.ratio,
   text: {
     fontSize: 12,
     fillColor: "#fff",
@@ -147,18 +147,18 @@ const MeasureLine = {
 const BaseLine = {
   strokeStyle: "red",
   fillStyle: "red",
-  lineWidth: 3 * coordinate.ratio,
+  lineWidth: 1 * coordinate.ratio,
 };
 
 const BasePoint = {
-  strokeStyle: "rgba(0,0,0,0)",
-  fillStyle: "#000",
+  strokeStyle: "rgba(255,255,255,0)",
+  fillStyle: "red",
   radius: 6 * coordinate.ratio,
-  lineWidth: 1 * coordinate.ratio,
+  lineWidth: 4 * coordinate.ratio,
   out: {
-    strokeStyle: "#000",
+    strokeStyle: "red",
     fillStyle: "rgba(255,255,255,0)",
-    radius: 8 * coordinate.ratio,
+    radius: 9 * coordinate.ratio,
     lineWidth: 1 * coordinate.ratio,
   },
 };
@@ -209,8 +209,8 @@ const TestPoint = {
 
 const SVG = {
   fillStyle: "rgba(0,0,0,0)",
-  strokeStyle: "black",
-  lineWidth: 2 * coordinate.ratio,
+  strokeStyle: "#3290FF",
+  lineWidth: 1 * coordinate.ratio,
 };
 
 export default {

src/graphic/CanvasStyle/focus.js

@@ -14,13 +14,13 @@ const Circle = {
   radius: 30 * coordinate.ratio,
 };
 const MeasureLine = {
-  strokeStyle: "red",
+  strokeStyle: "#2F8FFF",
   lineWidth: 4 * coordinate.ratio,
   text: {
     fontSize: 12,
     fillColor: "#fff",
     padding: 6 * coordinate.ratio,
-    backColor: "red",
+    backColor: "#2F8FFF",
   },
 };
 const NormalLine = {
@@ -91,18 +91,6 @@ const DoubleArrowLine = {
   strokeStyle: "red",
 };
 
-const BasePoint = {
-  strokeStyle: "rgba(0,0,0,0)",
-  fillStyle: "#3290FF",
-  radius: 6 * coordinate.ratio,
-  lineWidth: 1 * coordinate.ratio,
-  out: {
-    strokeStyle: "#3290FF",
-    fillStyle: "rgba(255,255,255,0)",
-    radius: 8 * coordinate.ratio,
-    lineWidth: 1 * coordinate.ratio,
-  },
-};
 
 const TestPoint = {
   strokeStyle: "rgba(0,0,0,0)",
@@ -117,20 +105,20 @@ const TestPoint = {
   },
 };
 const BaseLine = {
-  strokeStyle: "#3290FF",
+  strokeStyle: "red",
+  fillStyle: "red",
   lineWidth: 3 * coordinate.ratio,
 };
 
 const SVG = {
-  fillStyle: "rgba(50,144,255,0.2)",
-  strokeStyle: "black",
+  fillStyle: "rgba(0,0,0,0)",
+  strokeStyle: "#3290FF",
   lineWidth: 2 * coordinate.ratio,
 };
 
 export default {
   Road,
   Text,
-  BasePoint,
   Point,
   SVG,
   SingleArrowLine,

src/graphic/CanvasStyle/select.js

@@ -14,18 +14,19 @@ const Circle = {
   radius: 30 * coordinate.ratio,
 };
 const MeasureLine = {
-  strokeStyle: "red",
+  strokeStyle: "#2F8FFF",
   lineWidth: 4 * coordinate.ratio,
   text: {
     fontSize: 12,
     fillColor: "#fff",
     padding: 6 * coordinate.ratio,
-    backColor: "red",
+    backColor: "#2F8FFF",
   },
 };
 
 const BaseLine = {
-  strokeStyle: "#3290FF",
+  strokeStyle: "red",
+  fillStyle: "red",
   lineWidth: 3 * coordinate.ratio,
 };
 const NormalLine = {
@@ -89,18 +90,6 @@ const CrossPoint = {
   fillStyle: "#3290FF",
 };
 
-const BasePoint = {
-  strokeStyle: "rgba(0,0,0,0)",
-  fillStyle: "#3290FF",
-  radius: 6 * coordinate.ratio,
-  lineWidth: 1 * coordinate.ratio,
-  out: {
-    strokeStyle: "#3290FF",
-    fillStyle: "rgba(255,255,255,0)",
-    radius: 8 * coordinate.ratio,
-    lineWidth: 1 * coordinate.ratio,
-  },
-};
 
 const TestPoint = {
   strokeStyle: "rgba(0,0,0,0)",
@@ -116,11 +105,12 @@ const TestPoint = {
 };
 
 const SVG = {
-  fillStyle: "rgba(50,144,255,0.2)",
-  strokeStyle: "black",
+  fillStyle: "rgba(0,0,0,0)",
+  strokeStyle: "#3290FF",
   lineWidth: 2 * coordinate.ratio,
 };
 
+
 export default {
   Road,
   Text,
@@ -132,7 +122,6 @@ export default {
   CrossPoint,
   CurveRoad,
   MeasureLine,
-  BasePoint,
   BaseLine,
   CurveLine,
   Circle,

src/graphic/Geometry/RoadEdge.js

@@ -12,6 +12,7 @@ export default class RoadEdge extends Geometry {
     this.vectorId = null;
     this.style = null;
     this.geoType = VectorType.RoadEdge;
+    this.lineWidth = 4
     this.setId(vectorId);
     this.setPositions(start, end);
   }

src/graphic/Renderer/Draw.js

@@ -8,6 +8,8 @@ import UIEvents from "@/graphic/enum/UIEvents.js";
 import VectorCategory from "@/graphic/enum/VectorCategory.js";
 import Settings from "@/graphic/Settings.js";
 import SVGIcons from "../CanvasStyle/ImageLabels/SVGIcons";
+import VectorStyle from "@/graphic/enum/VectorStyle.js";
+import VectorWeight from "@/graphic/enum/VectorWeight.js";
 
 const imgCache = {};
 const help = {
@@ -200,6 +202,139 @@ const help = {
     ctx.fillText(text, -textCenter.x, -textCenter.y);
     ctx.restore();
   },
+  isTriangleClockwise(p1, p2, p3) {
+    const crossProduct = (p2.x - p1.x) * (p3.y - p1.y) - (p3.x - p1.x) * (p2.y - p1.y);
+    return crossProduct < 0;
+  },
+  drawStyleLine(ctx, line, style = VectorStyle.SingleSolidLine, weight = VectorStyle.Thinning) {
+    ctx.save();
+    style = style || VectorStyle.SingleSolidLine
+    ctx.beginPath();
+    const lineWidth = Settings.lineWidth * (ctx.lineWidth || 1) * (weight === VectorWeight.Bold ? 2 : 1);
+
+    switch (style) {
+      case VectorStyle.PointDrawLine:
+      case VectorStyle.SingleDashedLine:
+      case VectorStyle.SingleSolidLine:
+        ctx.lineWidth = lineWidth
+        if (style === VectorStyle.SingleDashedLine) {
+          ctx.setLineDash([8 * coordinate.ratio, 8 * coordinate.ratio]);
+        } else if (style === VectorStyle.PointDrawLine) {
+          ctx.setLineDash([6 * coordinate.ratio, 6* coordinate.ratio, 2 * coordinate.ratio]);
+        }
+
+        ctx.moveTo(line[0].x, line[0].y);
+        ctx.lineTo(line[1].x, line[1].y);
+        break
+        // 单实线
+      case VectorStyle.DoubleDashedLine:
+      case VectorStyle.DoubleSolidLine:
+        if (style === VectorStyle.DoubleDashedLine) {
+          ctx.setLineDash([8 * coordinate.ratio, 8 * coordinate.ratio]);
+        }
+        ctx.lineWidth = lineWidth * 4
+        ctx.moveTo(line[0].x, line[0].y);
+        ctx.lineTo(line[1].x, line[1].y);
+        ctx.stroke();
+
+
+        ctx.moveTo(line[0].x, line[0].y);
+        ctx.lineTo(line[1].x, line[1].y);
+        ctx.lineWidth = lineWidth * 2
+        ctx.strokeStyle = 'rgb(255,255,255)'
+        break
+      case VectorStyle.BrokenLine:
+        const ldis = 5 * coordinate.ratio
+        if (mathUtil.getDistance(...line) < ldis * 2) {
+          ctx.moveTo(line[0].x, line[0].y);
+          ctx.lineTo(line[1].x, line[1].y);
+        } else {
+          const start = mathUtil.translate(line[0], line[1], line[0], ldis)
+          const end = mathUtil.translate(line[0], line[1], line[1], -ldis)
+          const lineDis = mathUtil.getDistance(start, end)
+          const len = Math.ceil(lineDis / (6 * coordinate.ratio))
+          const split = lineDis / len
+
+          const points = [start]
+          let temp = start
+          for (let i = 0; i < len ; i++) {
+            temp = mathUtil.translate(temp, line[1], temp, split)
+            points.push(temp)
+          }
+
+          ctx.moveTo(line[0].x, line[0].y);
+          ctx.lineTo(start.x, start.y);
+          for (let i = 0; i < points.length - 1; i++) {
+            const vTop = help.getPerpendicularPoint(
+              points[i],
+              points[i + 1],
+              mathUtil.lineCenter(points[i], points[i + 1]),
+              (split * ((i%2) ? -1 : 1)) / 2
+            )
+            ctx.lineTo(vTop.x, vTop.y);
+          }
+          ctx.lineTo(end.x, end.y);
+          ctx.lineTo(line[1].x, line[1].y);
+        }
+        ctx.lineWidth = lineWidth
+        break
+      case VectorStyle.Greenbelt:
+        const dis = 4 * coordinate.ratio
+        const size = 8 * coordinate.ratio
+        const p1 = help.getPerpendicularPoint(
+          line[0], line[1], line[0], dis
+        )
+        const p2 = help.getPerpendicularPoint(
+          line[0], line[1], line[1], dis
+        )
+        const p3 = help.getPerpendicularPoint(
+          p1, p2, p2, size
+        )
+        const p4 = help.getPerpendicularPoint(
+          p1, p2, p1, size
+        )
+
+        ctx.beginPath()
+        ctx.lineWidth = lineWidth
+        ctx.moveTo(line[0].x, line[0].y);
+        ctx.lineTo(line[1].x, line[1].y);
+        ctx.stroke();
+        ctx.beginPath()
+        ctx.moveTo(p4.x, p4.y);
+        ctx.lineTo(p1.x, p1.y);
+        ctx.lineTo(p2.x, p2.y);
+        ctx.lineTo(p3.x, p3.y);
+        ctx.stroke();
+
+
+        const rdis = 6 * coordinate.ratio
+        const lineDis = mathUtil.getDistance(p3, p4)
+        const len = Math.ceil(lineDis / rdis)
+        const split = lineDis / len
+        const points = [p3]
+        const geo = [p4, {...p4, x: 999}, p3]
+        let angle = (mathUtil.Angle1(...geo) / 180) * Math.PI
+        const isClock = help.isTriangleClockwise(...geo) || angle === 0
+
+        angle = isClock ? -angle : angle
+
+        let temp = p3
+        for (let i = 0; i < len; i++) {
+          temp = mathUtil.translate(temp, p4, temp, split)
+          points.push(temp)
+        }
+        for (let i = 0; i < points.length - 1; i++) {
+          const center = mathUtil.lineCenter(points[i], points[i+1])
+          ctx.beginPath()
+          ctx.arc(center.x, center.y, split / 2, angle, angle + Math.PI, !isClock)
+          ctx.stroke();
+        }
+        ctx.lineWidth = lineWidth
+        break
+    }
+    ctx.stroke();
+    ctx.restore();
+  }
 };
 
 export default class Draw {
@@ -327,6 +462,7 @@ export default class Draw {
     ctx.save();
     ctx.beginPath();
     help.setVectorStyle(ctx, null, "Lane");
+    ctx.lineWidth *= Settings.lineWidth
     ctx.setLineDash(Style.Lane.dash);
     ctx.moveTo(start.x, start.y);
     ctx.lineTo(end.x, end.y);
@@ -346,6 +482,7 @@ export default class Draw {
       : dataService.getRoadPoint(vector.startId);
     const end = isTemp ? vector.end : dataService.getRoadPoint(vector.endId);
 
+
     const drawRoadEdgeChild = (edgeVector) => {
       const flag = mathUtil.isSameDirForVector(
         start,
@@ -355,12 +492,9 @@ export default class Draw {
       );
 
       if (flag) {
-        ctx.beginPath();
         const point1 = coordinate.getScreenXY(edgeVector.start);
         const point2 = coordinate.getScreenXY(edgeVector.end);
-        ctx.moveTo(point1.x, point1.y);
-        ctx.lineTo(point2.x, point2.y);
-        ctx.stroke();
+        help.drawStyleLine(ctx, [point1, point2], edgeVector.style, edgeVector.weight)
       }
       if (import.meta.env.DEV) {
         this.drawTextByInfo(
@@ -383,8 +517,13 @@ export default class Draw {
     ctx.save();
     isTemp && (ctx.globalAlpha = 0.3);
     help.setVectorStyle(ctx, leftEdge);
+    let [style, fo] = help.getVectorStyle(vector)
+    fo && help.setStyle(ctx, style)
     drawRoadEdgeChild(leftEdge);
+
     help.setVectorStyle(ctx, rightEdge);
+    fo && help.setStyle(ctx, style)
+
     drawRoadEdgeChild(rightEdge);
     ctx.restore();
 
@@ -452,14 +591,15 @@ export default class Draw {
       const ctx = this.context;
       ctx.save();
       help.setVectorStyle(ctx, vector);
+      ctx.lineWidth *= Settings.lineWidth
       for (let coves of covesArray) {
         help.drawCoves(ctx, coves);
       }
       ctx.restore();
     }
 
-    this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.rightEdgeId));
-    this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.leftEdgeId));
+    this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.rightEdgeId), vector);
+    this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.leftEdgeId), vector);
     vector.leftLanesCurves &&
       vector.leftLanesCurves.forEach(this.drawCurveLan.bind(this));
     vector.rightLanesCurves &&
@@ -470,11 +610,14 @@ export default class Draw {
     // }
   }
 
-  drawCurveRoadEdge(vector, isTemp) {
+  drawCurveRoadEdge(vector, roadVector) {
     const [coves] = help.transformCoves([vector.curves]);
     const ctx = this.context;
+    const [style, select] = help.getVectorStyle(roadVector)
     ctx.save();
     help.setVectorStyle(ctx, vector);
+    select && help.setStyle(ctx, style)
+    ctx.lineWidth *= Settings.lineWidth
     help.drawCoves(ctx, coves);
     ctx.restore();
 
@@ -489,6 +632,7 @@ export default class Draw {
     ctx.save();
 
     help.setVectorStyle(ctx, null, "CurveLan");
+    ctx.lineWidth *= Settings.lineWidth
     ctx.setLineDash(Style.Lane.dash);
     help.drawCoves(ctx, coves);
     ctx.restore();
@@ -697,7 +841,7 @@ export default class Draw {
     if (Settings.selectBasePointId === vector.vectorId) {
       style = {
         ...style,
-        fillStyle: "red",
+        strokeStyle: "rgba(255,255,255,1)",
         out: style.out && {
           ...style.out,
           strokeStyle: "red",
@@ -712,14 +856,15 @@ export default class Draw {
     }
 
     if (vector.category === "BasePoint") {
+      ctx.font = `${22}px Microsoft YaHei`
       const bound = help.getTextCenter(ctx, "基准点")
       const textPt = {
-        y: pt.y - bound.height,
-        x: pt.x - (bound.width / 2)
+        y: vector.y + bound.height,
+        x: vector.x - (bound.width / 2)
       }
 
       ctx.fillStyle = style.fillStyle
-      this.drawTextByInfo(coordinate.getXYFromScreen(textPt), "基准点", 0, false);
+      this.drawTextByInfo(textPt, "基准点", 0, false);
     } else {
       if (import.meta.env.DEV) {
         if (vector.vectorId) {
@@ -800,12 +945,13 @@ export default class Draw {
       this.context.lineTo(points[1].x, points[1].y);
       this.context.lineTo(points[2].x, points[2].y);
       this.context.lineTo(points[3].x, points[3].y);
-      this.context.strokeStyle = "red"
+      this.context.strokeStyle = style.strokeStyle
+      this.context.lineWidth = 2 *  coordinate.ratio
       this.context.setLineDash([6 * coordinate.ratio, 2 * coordinate.ratio]);
       this.context.closePath();
       this.context.stroke();
       this.context.restore();
-      vector.points.forEach(point => this.drawPoint({...point, color: 'red', radius: 5 }))
+      vector.points.forEach(point => this.drawPoint({...point, color: style.strokeStyle, radius: 5 }))
     }
   }
 
@@ -900,11 +1046,7 @@ export default class Draw {
       this.context.setLineDash(style.dash);
     }
 
-    this.context.beginPath();
-    this.context.moveTo(start.x, start.y);
-    this.context.lineTo(end.x, end.y);
-    this.context.stroke();
-    this.context.restore();
+    help.drawStyleLine(this.context, [start, end], vector.style, vector.weight)
 
     const drawPoints = () => {
       // if (attr) {

src/graphic/Util/MathUtil.js

@@ -348,6 +348,26 @@ export default class MathUtil {
       return ((2 * Math.PI - fi) * 180) / Math.PI;
     }
   }
+  Angle1(o, s, e) {
+    let cosfi = 0,
+      fi = 0,
+      norm = 0;
+    let dsx = s.x - o.x;
+    let dsy = s.y - o.y;
+    let dex = e.x - o.x;
+    let dey = e.y - o.y;
+
+    cosfi = dsx * dex + dsy * dey;
+    norm = (dsx * dsx + dsy * dsy) * (dex * dex + dey * dey);
+    cosfi /= Math.sqrt(norm);
+
+    if (cosfi >= 1.0) return 0;
+    //if (cosfi <= -1.0) return Math.PI;
+    if (cosfi <= -1.0) return 180;
+    fi = Math.acos(cosfi);
+
+    return (fi * 180) / Math.PI;
+  }
 
   getArrow(start, end, ange = 30, L = 20) {
     let a = Math.atan2(end.y - start.y, end.x - start.x);

src/views/graphic/geos/normalLine.vue

@@ -18,7 +18,6 @@ import VectorCategory from "@/graphic/enum/VectorCategory";
 
 const props = defineProps<{ geo: FocusVector }>()
 const vector = computed(() => dataService.getLine(props.geo.vectorId))
-console.error(props.geo)
 
 const clickHandlerFactory = (key) => {
   return () => drawRef.value.uiControl.updateVectorForSelectUI(key)
@@ -59,8 +58,24 @@ const lineTypeMenu = [
   {key: VectorStyle.Greenbelt, icon: "treelawn", text: "绿化带 ", onClick: clickHandlerFactory(VectorStyle.Greenbelt)},
 ]
 const lineWidthMenu = [
-  {key: VectorWeight.Bold, icon: 'l_thick', text: "粗", onClick: clickHandlerFactory(VectorWeight.Bold)},
-  {key: VectorWeight.Thinning, icon: 'l_thin', text: "细", onClick: clickHandlerFactory(VectorWeight.Thinning)},
+  {
+    key: VectorWeight.Bold,
+    icon: 'l_thick',
+    text: "宽度",
+    onClick: () => {
+      clickHandlerFactory(VectorWeight.Bold)()
+      menus.value[1] = lineWidthMenu[1]
+    }
+  },
+  {
+    key: VectorWeight.Thinning,
+    icon: 'l_thin',
+    text: "宽度",
+    onClick: () => {
+      clickHandlerFactory(VectorWeight.Thinning)()
+      menus.value[1] = lineWidthMenu[0]
+    }
+  },
 ]
 
 const appendMenus = props.geo.category === VectorCategory.Line.NormalLine
@@ -89,14 +104,7 @@ const menus = ref([
       childMenus.value = toRaw(childMenus.value) === lineTypeMenu ? null : lineTypeMenu
     }
   },
-  {
-    key: UITypeExtend.width,
-    text: "宽度",
-    icon: 'l_thick',
-    onClick() {
-      childMenus.value = toRaw(childMenus.value) === lineWidthMenu ? null : lineWidthMenu
-    }
-  },
+  vector.value?.style === VectorWeight.Bold ? lineWidthMenu[0] : lineWidthMenu[1],
   ...appendMenus,
   {
     key: 'copy',

src/views/graphic/geos/roadEdge.vue

@@ -16,8 +16,8 @@ import VectorWeight from "@/graphic/enum/VectorWeight";
 
 
 const props = defineProps<{ geo: FocusVector }>()
-const vector = computed(() => dataService.getLine(props.geo.vectorId))
-console.error(props.geo)
+const vector = computed(() => dataService.getRoadEdge(props.geo.vectorId))
+console.error(vector.value)
 
 const clickHandlerFactory = (key) => {
   return () => drawRef.value.uiControl.updateVectorForSelectUI(key)
@@ -58,6 +58,7 @@ const lineTypeMenu = [
   {key: VectorStyle.Greenbelt, icon: "treelawn", text: "绿化带 ", onClick: clickHandlerFactory(VectorStyle.Greenbelt)},
 ]
 const lineWidthMenu = [
+
   {
     key: VectorWeight.Bold,
     icon: 'l_thick',
@@ -104,7 +105,7 @@ const menus = ref([
       childMenus.value = toRaw(childMenus.value) === lineTypeMenu ? null : lineTypeMenu
     }
   },
-  lineWidthMenu[0],
+  vector.value?.style === VectorWeight.Bold ? lineWidthMenu[0] : lineWidthMenu[1],
   ...appendMenus
 ])
 

src/views/graphic/imageLabel.vue

@@ -13,7 +13,7 @@
     <div v-for="typeMenu in typeMenus" :key="typeMenu.title" class="type-menu">
       <h2 @click="showTypeMenu = typeMenu">
         {{typeMenu.title}}
-        <ui-icon :type="showTypeMenu.title === typeMenu.title ? 'del' : 'copy'" />
+        <ui-icon :type="showTypeMenu.title === typeMenu.title ? 'fold' : 'unfold'" />
       </h2>
       <div class="menu-list" v-show="showTypeMenu.title === typeMenu.title">
         <div
@@ -48,6 +48,7 @@ const typeMenusRaw = typeKeys.map(({type, children}) => ({
   }))
 }))
 const keyword = ref("")
+console.log(typeMenusRaw)
 const typeMenus = computed(() => typeMenusRaw
   .map(
     (typeMenu) => ({

src/views/scene/menus/pane.vue

@@ -2,6 +2,7 @@
   <ActionMenus
       v-if="!store.child.value"
       class="menus"
+      :class="{level: level === 2}"
       :menus="store.menus as any"
       :active-key="store.activeMenuKey.value"
       dire="column"
@@ -96,3 +97,26 @@ onMounted(() => {
   z-index: 2;
 }
 </style>
+
+<style>
+.level div:first-child {
+  background-color: rgba(255, 255, 255, .3);
+  height: 50px;
+  width: 50px;
+  min-width: 50px;
+  margin-top: -26px;
+  border-radius: 50%;
+  margin-bottom: 30px !important;
+  position: relative;
+
+  &:after {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 1px;
+    bottom: -15px;
+    background-color: rgba(255, 255, 255, .3);
+
+  }
+}
+</style>

src/views/sys/menu/item/style.scss

@@ -10,8 +10,8 @@
 }
 
 .child-menu-item {
-  height: 80px;
-  width: 80px;
+  height: 84px;
+  width: 84px;
   font-size: 12px;
 }