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

# Conflicts:
#	src/graphic/enum/VectorEvents.js

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=1686102789104') format('woff2'),
-       url('iconfont.woff?t=1686102789104') format('woff'),
-       url('iconfont.ttf?t=1686102789104') format('truetype');
+  src: url('iconfont.woff2?t=1686129647618') format('woff2'),
+       url('iconfont.woff?t=1686129647618') format('woff'),
+       url('iconfont.ttf?t=1686129647618') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,154 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-huoche_s1:before {
+  content: "\e75a";
+}
+
+.icon-keche_s:before {
+  content: "\e75b";
+}
+
+.icon-lunshijixie_p:before {
+  content: "\e75c";
+}
+
+.icon-huoche_s2:before {
+  content: "\e75d";
+}
+
+.icon-zhengsanlun_p:before {
+  content: "\e75e";
+}
+
+.icon-lunshituolaji_p:before {
+  content: "\e75f";
+}
+
+.icon-keche_p:before {
+  content: "\e760";
+}
+
+.icon-shoufutuolaji_s:before {
+  content: "\e761";
+}
+
+.icon-lunshituolaji_s:before {
+  content: "\e762";
+}
+
+.icon-qianyinche_p:before {
+  content: "\e763";
+}
+
+.icon-guache_p:before {
+  content: "\e764";
+}
+
+.icon-huoche_p:before {
+  content: "\e765";
+}
+
+.icon-jiaoche_s:before {
+  content: "\e766";
+}
+
+.icon-guache_pingmian:before {
+  content: "\e767";
+}
+
+.icon-shoufutuolaji_p:before {
+  content: "\e768";
+}
+
+.icon-dianche_s:before {
+  content: "\e769";
+}
+
+.icon-erlunmotuoche:before {
+  content: "\e76a";
+}
+
+.icon-chemotuoche_p:before {
+  content: "\e76b";
+}
+
+.icon-jiaoche_p:before {
+  content: "\e76c";
+}
+
+.icon-qianyinche_s:before {
+  content: "\e76d";
+}
+
+.icon-zhengsanlun_s:before {
+  content: "\e76e";
+}
+
+.icon-dianche_p:before {
+  content: "\e76f";
+}
+
+.icon-r_structure:before {
+  content: "\e758";
+}
+
+.icon-r_template:before {
+  content: "\e759";
+}
+
+.icon-line_sf:before {
+  content: "\e751";
+}
+
+.icon-line_df:before {
+  content: "\e752";
+}
+
+.icon-line_sd:before {
+  content: "\e753";
+}
+
+.icon-line_dot:before {
+  content: "\e754";
+}
+
+.icon-line_broken:before {
+  content: "\e755";
+}
+
+.icon-line_dd:before {
+  content: "\e756";
+}
+
+.icon-treelawn:before {
+  content: "\e757";
+}
+
+.icon-road_sd:before {
+  content: "\e74b";
+}
+
+.icon-road_ss:before {
+  content: "\e74c";
+}
+
+.icon-road_st:before {
+  content: "\e74d";
+}
+
+.icon-road_ds:before {
+  content: "\e74e";
+}
+
+.icon-road_dd:before {
+  content: "\e74f";
+}
+
+.icon-road_dt:before {
+  content: "\e750";
+}
+
 .icon-arrows_s:before {
   content: "\e749";
 }

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

@@ -6,6 +6,265 @@
   "description": "交通事故现场勘验系统",
   "glyphs": [
     {
+      "icon_id": "35882982",
+      "name": "huoche_s1",
+      "font_class": "huoche_s1",
+      "unicode": "e75a",
+      "unicode_decimal": 59226
+    },
+    {
+      "icon_id": "35882983",
+      "name": "keche_s",
+      "font_class": "keche_s",
+      "unicode": "e75b",
+      "unicode_decimal": 59227
+    },
+    {
+      "icon_id": "35882984",
+      "name": "lunshijixie_p",
+      "font_class": "lunshijixie_p",
+      "unicode": "e75c",
+      "unicode_decimal": 59228
+    },
+    {
+      "icon_id": "35882985",
+      "name": "huoche_s2",
+      "font_class": "huoche_s2",
+      "unicode": "e75d",
+      "unicode_decimal": 59229
+    },
+    {
+      "icon_id": "35882986",
+      "name": "zhengsanlun_p",
+      "font_class": "zhengsanlun_p",
+      "unicode": "e75e",
+      "unicode_decimal": 59230
+    },
+    {
+      "icon_id": "35882987",
+      "name": "lunshituolaji_p",
+      "font_class": "lunshituolaji_p",
+      "unicode": "e75f",
+      "unicode_decimal": 59231
+    },
+    {
+      "icon_id": "35882988",
+      "name": "keche_p",
+      "font_class": "keche_p",
+      "unicode": "e760",
+      "unicode_decimal": 59232
+    },
+    {
+      "icon_id": "35882989",
+      "name": "shoufutuolaji_s",
+      "font_class": "shoufutuolaji_s",
+      "unicode": "e761",
+      "unicode_decimal": 59233
+    },
+    {
+      "icon_id": "35882990",
+      "name": "lunshituolaji_s",
+      "font_class": "lunshituolaji_s",
+      "unicode": "e762",
+      "unicode_decimal": 59234
+    },
+    {
+      "icon_id": "35882991",
+      "name": "qianyinche_p",
+      "font_class": "qianyinche_p",
+      "unicode": "e763",
+      "unicode_decimal": 59235
+    },
+    {
+      "icon_id": "35882992",
+      "name": "guache_p",
+      "font_class": "guache_p",
+      "unicode": "e764",
+      "unicode_decimal": 59236
+    },
+    {
+      "icon_id": "35882993",
+      "name": "huoche_p",
+      "font_class": "huoche_p",
+      "unicode": "e765",
+      "unicode_decimal": 59237
+    },
+    {
+      "icon_id": "35882994",
+      "name": "jiaoche_s",
+      "font_class": "jiaoche_s",
+      "unicode": "e766",
+      "unicode_decimal": 59238
+    },
+    {
+      "icon_id": "35882995",
+      "name": "guache_pingmian",
+      "font_class": "guache_pingmian",
+      "unicode": "e767",
+      "unicode_decimal": 59239
+    },
+    {
+      "icon_id": "35882996",
+      "name": "shoufutuolaji_p",
+      "font_class": "shoufutuolaji_p",
+      "unicode": "e768",
+      "unicode_decimal": 59240
+    },
+    {
+      "icon_id": "35882997",
+      "name": "dianche_s",
+      "font_class": "dianche_s",
+      "unicode": "e769",
+      "unicode_decimal": 59241
+    },
+    {
+      "icon_id": "35882998",
+      "name": "erlunmotuoche",
+      "font_class": "erlunmotuoche",
+      "unicode": "e76a",
+      "unicode_decimal": 59242
+    },
+    {
+      "icon_id": "35882999",
+      "name": "chemotuoche_p",
+      "font_class": "chemotuoche_p",
+      "unicode": "e76b",
+      "unicode_decimal": 59243
+    },
+    {
+      "icon_id": "35883000",
+      "name": "jiaoche_p",
+      "font_class": "jiaoche_p",
+      "unicode": "e76c",
+      "unicode_decimal": 59244
+    },
+    {
+      "icon_id": "35883001",
+      "name": "qianyinche_s",
+      "font_class": "qianyinche_s",
+      "unicode": "e76d",
+      "unicode_decimal": 59245
+    },
+    {
+      "icon_id": "35883002",
+      "name": "zhengsanlun_s",
+      "font_class": "zhengsanlun_s",
+      "unicode": "e76e",
+      "unicode_decimal": 59246
+    },
+    {
+      "icon_id": "35883003",
+      "name": "dianche_p",
+      "font_class": "dianche_p",
+      "unicode": "e76f",
+      "unicode_decimal": 59247
+    },
+    {
+      "icon_id": "35874728",
+      "name": "r_structure",
+      "font_class": "r_structure",
+      "unicode": "e758",
+      "unicode_decimal": 59224
+    },
+    {
+      "icon_id": "35874729",
+      "name": "r_template",
+      "font_class": "r_template",
+      "unicode": "e759",
+      "unicode_decimal": 59225
+    },
+    {
+      "icon_id": "35873698",
+      "name": "line_sf",
+      "font_class": "line_sf",
+      "unicode": "e751",
+      "unicode_decimal": 59217
+    },
+    {
+      "icon_id": "35873699",
+      "name": "line_df",
+      "font_class": "line_df",
+      "unicode": "e752",
+      "unicode_decimal": 59218
+    },
+    {
+      "icon_id": "35873700",
+      "name": "line_sd",
+      "font_class": "line_sd",
+      "unicode": "e753",
+      "unicode_decimal": 59219
+    },
+    {
+      "icon_id": "35873701",
+      "name": "line_dot",
+      "font_class": "line_dot",
+      "unicode": "e754",
+      "unicode_decimal": 59220
+    },
+    {
+      "icon_id": "35873702",
+      "name": "line_broken",
+      "font_class": "line_broken",
+      "unicode": "e755",
+      "unicode_decimal": 59221
+    },
+    {
+      "icon_id": "35873703",
+      "name": "line_dd",
+      "font_class": "line_dd",
+      "unicode": "e756",
+      "unicode_decimal": 59222
+    },
+    {
+      "icon_id": "35873704",
+      "name": "treelawn",
+      "font_class": "treelawn",
+      "unicode": "e757",
+      "unicode_decimal": 59223
+    },
+    {
+      "icon_id": "35870945",
+      "name": "road_sd",
+      "font_class": "road_sd",
+      "unicode": "e74b",
+      "unicode_decimal": 59211
+    },
+    {
+      "icon_id": "35870946",
+      "name": "road_ss",
+      "font_class": "road_ss",
+      "unicode": "e74c",
+      "unicode_decimal": 59212
+    },
+    {
+      "icon_id": "35870947",
+      "name": "road_st",
+      "font_class": "road_st",
+      "unicode": "e74d",
+      "unicode_decimal": 59213
+    },
+    {
+      "icon_id": "35870948",
+      "name": "road_ds",
+      "font_class": "road_ds",
+      "unicode": "e74e",
+      "unicode_decimal": 59214
+    },
+    {
+      "icon_id": "35870949",
+      "name": "road_dd",
+      "font_class": "road_dd",
+      "unicode": "e74f",
+      "unicode_decimal": 59215
+    },
+    {
+      "icon_id": "35870950",
+      "name": "road_dt",
+      "font_class": "road_dt",
+      "unicode": "e750",
+      "unicode_decimal": 59216
+    },
+    {
       "icon_id": "35850865",
       "name": "arrows_s",
       "font_class": "arrows_s",

src/graphic/Layer.js

@@ -501,11 +501,22 @@ export default class Layer {
       case LayerEvents.AddingRoad:
         needAutoRedraw = true;
         listenLayer.start(position);
+
+        // listenLayer.start(position, {
+        //   exceptLineId: exceptLineId,
+        //   exceptPointId: exceptPointId,
+        //   addRoad.startInfo.linkedRoadId
+        //   addRoad.startInfo.linkedRoadPointId
+        // });
+
         if (listenLayer.modifyPoint) {
           position = {
             x: listenLayer.modifyPoint.x,
             y: listenLayer.modifyPoint.y,
           };
+          // console.log(
+          //   "LayerEvents.AddingRoad:" + JSON.stringify(listenLayer.modifyPoint)
+          // );
         }
 
         elementService.execute(addRoad.startInfo.position, position);

src/graphic/ListenLayer.js

@@ -644,8 +644,9 @@ export default class ListenLayer {
       // }
       let distance = this.getDistance(position, join);
       if (
-        mathUtil.isContainForSegment(position, join, leftJoin) ||
-        mathUtil.isContainForSegment(position, join, rightJoin)
+        mathUtil.isContainForSegment(join, startPoint, endPoint) &&
+        (mathUtil.isContainForSegment(position, join, leftJoin) ||
+          mathUtil.isContainForSegment(position, join, rightJoin))
       ) {
         if (!roadInfo.roadId || distance < roadInfo.distance) {
           roadInfo = {

src/graphic/Service/DataService.js

@@ -342,11 +342,11 @@ export class DataService {
 
   deleteRoad(roadId) {
     let road = this.getRoad(roadId);
-    this.deleteRoadPoint(road.startId, roadId);
-    this.deleteRoadPoint(road.endId, roadId);
     this.deleteRoadEdge(road.leftEdgeId);
     this.deleteRoadEdge(road.rightEdgeId);
     delete this.vectorData.roads[roadId];
+    this.deleteRoadPoint(road.startId, roadId);
+    this.deleteRoadPoint(road.endId, roadId);
   }
 
   /**

src/graphic/Service/EdgeService.js

@@ -509,21 +509,29 @@ export default class EdgeService {
         mathUtil.clonePoint(leftEdge1.start, newEdgePoint1);
         mathUtil.clonePoint(rightEdge2.start, newEdgePoint1);
 
+        crossPointService.update(
+          newEdgePoint1,
+          startPoint1,
+          newEdgePoint1,
+          leftEdge1,
+          rightEdge2,
+          "start",
+          "start"
+        );
         if (angle > Constant.maxAngle || angle < Constant.minAngle) {
           //要删除控制点
           dataService.deleteCrossPoint(leftEdge1.vectorId, rightEdge2.vectorId);
         } else {
           //需要考虑控制点CrossPointService
-          crossPointService.update(
-            newEdgePoint1,
-            startPoint1,
-            newEdgePoint1,
-            leftEdge1,
-            rightEdge2,
-            "start",
-            "start"
-          );
-
+          // crossPointService.update(
+          //   newEdgePoint1,
+          //   startPoint1,
+          //   newEdgePoint1,
+          //   leftEdge1,
+          //   rightEdge2,
+          //   "start",
+          //   "start"
+          // );
           //需要删除之前的控制点，包含：leftEdge1.vectorId和rightEdge2.vectorId
         }
       } else {
@@ -531,20 +539,29 @@ export default class EdgeService {
         mathUtil.clonePoint(rightEdge1.start, newEdgePoint2);
         mathUtil.clonePoint(leftEdge2.start, newEdgePoint2);
 
+        crossPointService.update(
+          newEdgePoint2,
+          startPoint1,
+          newEdgePoint2,
+          leftEdge2,
+          rightEdge1,
+          "start",
+          "start"
+        );
         if (angle > Constant.maxAngle || angle < Constant.minAngle) {
           //要删除控制点
           dataService.deleteCrossPoint(leftEdge2.vectorId, rightEdge1.vectorId);
         } else {
           //需要考虑控制点CrossPointService
-          crossPointService.update(
-            newEdgePoint2,
-            startPoint1,
-            newEdgePoint2,
-            leftEdge2,
-            rightEdge1,
-            "start",
-            "start"
-          );
+          // crossPointService.update(
+          //   newEdgePoint2,
+          //   startPoint1,
+          //   newEdgePoint2,
+          //   leftEdge2,
+          //   rightEdge1,
+          //   "start",
+          //   "start"
+          // );
         }
       }
       return true;
@@ -573,26 +590,45 @@ export default class EdgeService {
         mathUtil.clonePoint(leftEdge1.start, newEdgePoint1);
         mathUtil.clonePoint(leftEdge2.end, newEdgePoint1);
 
+        crossPointService.update(
+          newEdgePoint1,
+          startPoint1,
+          newEdgePoint1,
+          leftEdge1,
+          leftEdge2,
+          "start",
+          "end"
+        );
         if (angle > Constant.maxAngle || angle < Constant.minAngle) {
           //要删除控制点
           dataService.deleteCrossPoint(leftEdge1.vectorId, leftEdge2.vectorId);
         } else {
           //需要考虑控制点CrossPointService
-          crossPointService.update(
-            newEdgePoint1,
-            startPoint1,
-            newEdgePoint1,
-            leftEdge1,
-            leftEdge2,
-            "start",
-            "end"
-          );
+          // crossPointService.update(
+          //   newEdgePoint1,
+          //   startPoint1,
+          //   newEdgePoint1,
+          //   leftEdge1,
+          //   leftEdge2,
+          //   "start",
+          //   "end"
+          // );
         }
       } else {
         //console.log("情况4");
         mathUtil.clonePoint(rightEdge1.start, newEdgePoint2);
         mathUtil.clonePoint(rightEdge2.end, newEdgePoint2);
 
+        //需要考虑控制点CrossPointService
+        crossPointService.update(
+          newEdgePoint2,
+          startPoint1,
+          newEdgePoint2,
+          rightEdge1,
+          rightEdge2,
+          "start",
+          "end"
+        );
         if (angle > Constant.maxAngle || angle < Constant.minAngle) {
           //要删除控制点
           dataService.deleteCrossPoint(
@@ -600,16 +636,16 @@ export default class EdgeService {
             rightEdge2.vectorId
           );
         } else {
-          //需要考虑控制点CrossPointService
-          crossPointService.update(
-            newEdgePoint2,
-            startPoint1,
-            newEdgePoint2,
-            rightEdge1,
-            rightEdge2,
-            "start",
-            "end"
-          );
+          // //需要考虑控制点CrossPointService
+          // crossPointService.update(
+          //   newEdgePoint2,
+          //   startPoint1,
+          //   newEdgePoint2,
+          //   rightEdge1,
+          //   rightEdge2,
+          //   "start",
+          //   "end"
+          // );
         }
       }
       return true;
@@ -638,26 +674,44 @@ export default class EdgeService {
         mathUtil.clonePoint(leftEdge1.end, newEdgePoint1);
         mathUtil.clonePoint(leftEdge2.start, newEdgePoint1);
 
+        crossPointService.update(
+          newEdgePoint1,
+          endPoint1,
+          newEdgePoint1,
+          leftEdge1,
+          leftEdge2,
+          "end",
+          "start"
+        );
         if (angle > Constant.maxAngle || angle < Constant.minAngle) {
           //要删除控制点
           dataService.deleteCrossPoint(leftEdge1.vectorId, leftEdge2.vectorId);
         } else {
           //需要考虑控制点CrossPointService
-          crossPointService.update(
-            newEdgePoint1,
-            endPoint1,
-            newEdgePoint1,
-            leftEdge1,
-            leftEdge2,
-            "end",
-            "start"
-          );
+          // crossPointService.update(
+          //   newEdgePoint1,
+          //   endPoint1,
+          //   newEdgePoint1,
+          //   leftEdge1,
+          //   leftEdge2,
+          //   "end",
+          //   "start"
+          // );
         }
       } else {
         //console.log("情况6");
         mathUtil.clonePoint(rightEdge1.end, newEdgePoint2);
         mathUtil.clonePoint(rightEdge2.start, newEdgePoint2);
 
+        crossPointService.update(
+          newEdgePoint2,
+          endPoint1,
+          newEdgePoint2,
+          rightEdge1,
+          rightEdge2,
+          "end",
+          "start"
+        );
         if (angle > Constant.maxAngle || angle < Constant.minAngle) {
           //要删除控制点
           dataService.deleteCrossPoint(
@@ -666,15 +720,15 @@ export default class EdgeService {
           );
         } else {
           //需要考虑控制点CrossPointService
-          crossPointService.update(
-            newEdgePoint2,
-            endPoint1,
-            newEdgePoint2,
-            rightEdge1,
-            rightEdge2,
-            "end",
-            "start"
-          );
+          // crossPointService.update(
+          //   newEdgePoint2,
+          //   endPoint1,
+          //   newEdgePoint2,
+          //   rightEdge1,
+          //   rightEdge2,
+          //   "end",
+          //   "start"
+          // );
         }
       }
       return true;
@@ -703,40 +757,58 @@ export default class EdgeService {
         mathUtil.clonePoint(leftEdge1.end, newEdgePoint1);
         mathUtil.clonePoint(rightEdge2.end, newEdgePoint1);
 
+        crossPointService.update(
+          newEdgePoint1,
+          endPoint1,
+          newEdgePoint1,
+          leftEdge1,
+          leftEdge2,
+          "end",
+          "end"
+        );
         if (angle > Constant.maxAngle || angle < Constant.minAngle) {
           //要删除控制点
           dataService.deleteCrossPoint(leftEdge1.vectorId, leftEdge2.vectorId);
         } else {
           //需要考虑控制点CrossPointService
-          crossPointService.update(
-            newEdgePoint1,
-            endPoint1,
-            newEdgePoint1,
-            leftEdge1,
-            leftEdge2,
-            "end",
-            "end"
-          );
+          // crossPointService.update(
+          //   newEdgePoint1,
+          //   endPoint1,
+          //   newEdgePoint1,
+          //   leftEdge1,
+          //   leftEdge2,
+          //   "end",
+          //   "end"
+          // );
         }
       } else {
         //console.log("情况8");
         mathUtil.clonePoint(rightEdge1.end, newEdgePoint2);
         mathUtil.clonePoint(leftEdge2.end, newEdgePoint2);
 
+        crossPointService.update(
+          newEdgePoint2,
+          endPoint1,
+          newEdgePoint2,
+          rightEdge1,
+          leftEdge2,
+          "end",
+          "end"
+        );
         if (angle > Constant.maxAngle || angle < Constant.minAngle) {
           //要删除控制点
           dataService.deleteCrossPoint(rightEdge1.vectorId, leftEdge2.vectorId);
         } else {
           //需要考虑控制点CrossPointService
-          crossPointService.update(
-            newEdgePoint2,
-            endPoint1,
-            newEdgePoint2,
-            rightEdge1,
-            leftEdge2,
-            "end",
-            "end"
-          );
+          // crossPointService.update(
+          //   newEdgePoint2,
+          //   endPoint1,
+          //   newEdgePoint2,
+          //   rightEdge1,
+          //   leftEdge2,
+          //   "end",
+          //   "end"
+          // );
         }
       }
       return true;

src/graphic/Service/RoadService.js

@@ -597,7 +597,7 @@ export default class RoadService {
     const newPoint = roadPointService.create(point);
     // 第三步建立链接
     newPoint.setPointParent(roadId, dir);
-    this.setRoadPointId(roadId, pointId, dir);
+    this.setRoadPointId(roadId, newPoint.vectorId, dir);
     // 第四步更新Edge
     edgeService.updateDefaultEdge(roadId, dir);
     this.setLanes(roadId, null, dir);
@@ -610,13 +610,13 @@ export default class RoadService {
     dataService.deleteRoad(roadId);
   }
 
-  setRoadPointId = function (roadId, pointId, dir) {
+  setRoadPointId(roadId, pointId, dir) {
     const vectorInfo = {};
     vectorInfo.roadId = roadId;
     vectorInfo.dir = dir;
     vectorInfo.pointId = pointId;
     this.setRoadInfo(vectorInfo);
-  };
+  }
 
   setRoadInfo(vectorInfo) {
     const road = dataService.getRoad(vectorInfo.roadId);

src/graphic/enum/SVGType.js

@@ -1,4 +1,8 @@
-const SVGType = {
-  BusPlane: "BusPlane",
-};
+import icons from "../CanvasStyle/ImageLabels/SVGIcons.js"
+
+const SVGType = {}
+Object.keys(icons).forEach(key => {
+  SVGType[key] = key
+})
+
 export default SVGType;

src/graphic/enum/VectorStyle.js

@@ -1,13 +1,22 @@
 import UIEvents from "./UIEvents";
 const VectorStyle = {
-  SingleSolidLine: UIEvents.SingleSolidLine,
-  SingleDashedLine: UIEvents.SingleDashedLine,
-  DoubleSolidLine: UIEvents.DoubleSolidLine,
-  DoubleDashedLine: UIEvents.DoubleDashedLine,
-  BrokenLine: UIEvents.BrokenLine,
-  PointDrawLine: UIEvents.PointDrawLine,
-  Greenbelt: UIEvents.Greenbelt,
-  Bold: UIEvents.Bold,
-  Thinning: UIEvents.Thinning,
+  // 单实线
+  SingleSolidLine: "SingleSolidLine",
+  // 单虚线
+  SingleDashedLine: "SingleDashedLine",
+  // 双实线
+  DoubleSolidLine: "DoubleSolidLine",
+  // 双虚线
+  DoubleDashedLine: "DoubleDashedLine",
+  // 折线
+  BrokenLine: "BrokenLine",
+  // 点画线
+  PointDrawLine: "PointDrawLine",
+  // 绿化带
+  Greenbelt: "Greenbelt",
+  // 加粗
+  Bold: "Bold",
+  // 变细
+  Thinning: "Thinning",
 };
 export default VectorStyle;

src/views/graphic/geos/roadEdge.vue

@@ -11,6 +11,7 @@ import {dataService} from "@/graphic/Service/DataService";
 import GeoActions from "@/graphic/enum/GeoActions"
 import {UITypeExtend} from "@/views/graphic/menus";
 import VectorEvents from "@/graphic/enum/VectorEvents";
+import VectorStyle from "@/graphic/enum/VectorStyle";
 
 
 const props = defineProps<{ geo: FocusVector }>()
@@ -23,41 +24,41 @@ const clickHandlerFactory = (key) => {
 
 const lineTypeMenu = [
   {
-    key: VectorEvents.SingleSolidLine,
+    key: VectorStyle.SingleSolidLine,
     icon: "line",
     text: "单实线",
-    onClick: clickHandlerFactory(VectorEvents.SingleSolidLine)
+    onClick: clickHandlerFactory(VectorStyle.SingleSolidLine)
   },
   {
-    key: VectorEvents.SingleDashedLine,
+    key: VectorStyle.SingleDashedLine,
     icon: "line",
     text: "单虚线",
-    onClick: clickHandlerFactory(VectorEvents.SingleDashedLine)
+    onClick: clickHandlerFactory(VectorStyle.SingleDashedLine)
   },
   {
-    key: VectorEvents.DoubleSolidLine,
+    key: VectorStyle.DoubleSolidLine,
     icon: "line",
     text: "双实线",
-    onClick: clickHandlerFactory(VectorEvents.DoubleSolidLine)
+    onClick: clickHandlerFactory(VectorStyle.DoubleSolidLine)
   },
   {
-    key: VectorEvents.DoubleDashedLine,
+    key: VectorStyle.DoubleDashedLine,
     icon: "line",
     text: "双虚线",
-    onClick: clickHandlerFactory(VectorEvents.DoubleDashedLine)
+    onClick: clickHandlerFactory(VectorStyle.DoubleDashedLine)
   },
-  {key: VectorEvents.BrokenLine, icon: "line", text: "折线", onClick: clickHandlerFactory(VectorEvents.BrokenLine)},
+  {key: VectorStyle.BrokenLine, icon: "line", text: "折线", onClick: clickHandlerFactory(VectorStyle.BrokenLine)},
   {
-    key: VectorEvents.PointDrawLine,
+    key: VectorStyle.PointDrawLine,
     icon: "line",
     text: "点画线",
-    onClick: clickHandlerFactory(VectorEvents.PointDrawLine)
+    onClick: clickHandlerFactory(VectorStyle.PointDrawLine)
   },
-  {key: VectorEvents.Greenbelt, icon: "line", text: "绿化带 ", onClick: clickHandlerFactory(VectorEvents.Greenbelt)},
+  {key: VectorStyle.Greenbelt, icon: "line", text: "绿化带 ", onClick: clickHandlerFactory(VectorStyle.Greenbelt)},
 ]
 const lineWidthMenu = [
-  {key: VectorEvents.Bold, icon: 'l_thick', text: "粗", onClick: clickHandlerFactory(VectorEvents.Bold)},
-  {key: VectorEvents.Thinning, icon: 'l_thin', text: "细", onClick: clickHandlerFactory(VectorEvents.Thinning)},
+  {key: VectorStyle.Bold, icon: 'l_thick', text: "粗", onClick: clickHandlerFactory(VectorStyle.Bold)},
+  {key: VectorStyle.Thinning, icon: 'l_thin', text: "细", onClick: clickHandlerFactory(VectorStyle.Thinning)},
 ]
 const childMenus = ref<UnwrapRef<typeof menus>>()
 const menus = ref([

src/views/graphic/imageLabel.vue

@@ -1,3 +1,154 @@
 <template>
+  <div class="graphic-child-menus">
+    <div class="header">
+      <ui-icon type="left" class="icon" ctrl @click="$emit('quit')" />
+      <p>图例</p>
+    </div>
+    <ui-input type="text" width="100%" v-model="keyword">
+      <template v-slot:preIcon>
+        <ui-icon type="magnify_g"  color="rgba(255,255,255,0.6)"/>
+      </template>
+    </ui-input>
 
-</template>
+    <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'" />
+      </h2>
+      <div class="menu-list" v-show="showTypeMenu.title === typeMenu.title">
+        <div
+            v-for="menu in typeMenu.children"
+            :key="menu.key"
+            class="menu"
+            :class="{active: uiType.current === menu.key}"
+            @click="uiType.change(menu.key as any)"
+        >
+          <ui-icon :type="menu.icon" class="icon" />
+          <p>{{ menu.text }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiIcon from "@/components/base/components/icon/index.vue";
+import { uiType } from '@/hook/useGraphic'
+import icons, {typeKeys} from "@/graphic/CanvasStyle/ImageLabels/SVGIcons"
+import {computed, ref, watch} from "vue";
+import UiInput from "@/components/base/components/input/index.vue";
+
+
+const typeMenusRaw = typeKeys.map(({type, children}) => ({
+  title: type,
+  children: children.map(key => ({
+    key: key,
+    text: icons[key].text,
+    icon: key.substring(0,key.lastIndexOf("."))
+  }))
+}))
+const keyword = ref("")
+const typeMenus = computed(() => typeMenusRaw
+  .map(
+    (typeMenu) => ({
+      ...typeMenu,
+      children: typeMenu.children.filter(item => item.text.includes(keyword.value))
+    })
+  )
+  .filter(typeMenu => typeMenu.children.length > 0)
+)
+const showTypeMenu = ref()
+watch(
+  typeMenus,
+  () => showTypeMenu.value = typeMenus.value[0],
+  { immediate: true }
+)
+console.log(typeMenus, showTypeMenu.value)
+
+defineEmits<{ (e: "quit") }>();
+
+</script>
+
+<style lang="scss" scoped>
+.graphic-child-menus {
+  background-color: var(--editor-menu-back);
+  position: absolute;
+  top: calc(var(--editor-head-height) + var(--header-top));
+  bottom: 0;
+  left: calc(var(--editor-menu-left) + var(--editor-menu-width));
+  padding: 16px;
+  overflow-y: auto;
+
+  .menu-list {
+    display: grid;
+    grid-template-columns: repeat(3, 80px);
+    grid-gap: 16px;
+    padding-bottom: 16px;
+  }
+}
+
+.menu {
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  height: 100px;
+  transition: color .3s ease;
+
+  //&:hover,
+  &.active {
+    color: var(--colors-primary-base);
+  }
+
+  &.active {
+    background-color: rgba(255, 255, 255, 0.06);
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    font-size: 40px;
+    text-align: center;
+    background: #383838;
+  }
+  p {
+    padding: 4px;
+    font-size: 12px;
+    text-align: center;
+  }
+}
+
+.header {
+  margin-bottom: 10px;
+  padding: 5px 0;
+  text-align: center;
+  font-size: 16px;
+  position: relative;
+
+  .icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+  }
+}
+
+.type-menu {
+  margin-top: 21px;
+  h2 {
+    margin: 16px 0;
+    font-size: 16px;
+    font-weight: bold;
+    color: rgba(255,255,255,0.6);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .icon {
+      font-size: 16px;
+    }
+  }
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+}
+</style>

src/views/graphic/menus.ts

@@ -135,14 +135,14 @@ export const mainMenusRaw: MenusRaw = [
     text: "道路",
     icon: "road",
     children: [
-      { key: UIType.OneEdgeOneLanRoad, text: "单向单车道直路" },
-      { key: UIType.OneEdgeTwoLanRoad, text: "单向双车道直路" },
-      { key: UIType.OneEdgeThreeLanRoad, text: "单向三车道直路" },
-      { key: UIType.TwoEdgeOneLanRoad, text: "双向单车道直路" },
-      { key: UIType.TwoEdgeTwoLanRoad, text: "双向双车道直路" },
-      { key: UIType.TwoEdgeThreeLanRoad, text: "双向三车道直路" },
-      { key: UITypeExtend.structure, text: "道路结构", extend: structureMenusRaw },
-      { key: UITypeExtend.template, text: "道路模板", extend: templateMenusRaw },
+      { key: UIType.OneEdgeOneLanRoad, icon: "road_ss", text: "单向单车道直路" },
+      { key: UIType.OneEdgeTwoLanRoad, icon: "road_sd", text: "单向双车道直路" },
+      { key: UIType.OneEdgeThreeLanRoad, icon: "road_st", text: "单向三车道直路" },
+      { key: UIType.TwoEdgeOneLanRoad, icon: "road_ds", text: "双向单车道直路" },
+      { key: UIType.TwoEdgeTwoLanRoad, icon: "road_dd", text: "双向双车道直路" },
+      { key: UIType.TwoEdgeThreeLanRoad, icon: "road_dt", text: "双向三车道直路" },
+      { key: UITypeExtend.structure, icon: "r_template", text: "道路结构", extend: structureMenusRaw },
+      { key: UITypeExtend.template, icon: "r_structure", text: "道路模板", extend: templateMenusRaw },
     ]
   }, {
     key: UITypeExtend.image,