openatc-components 0.5.16 → 0.5.17

package/package/kisscomps/components/DrawChannelization/drawsvg/iconSvg/motorwayIconSvg.vue

@@ -1,368 +1,368 @@
-/**
- * Copyright (c) 2020 kedacom
- * OpenATC is licensed under Mulan PSL v2.
- * You can use this software according to the terms and conditions of the Mulan PSL v2.
- * You may obtain a copy of Mulan PSL v2 at:
- * http://license.coscl.org.cn/MulanPSL2
- * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
- * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
- * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
- * See the Mulan PSL v2 for more details.
- **/
-<template>
-  <div v-if="reset" class="motorway-icon">
-    <!-- <div class="phaseText" :style="{'left': Data.x - Data.w / 2  - 10 + 'px', 'top': Data.y - Data.h / 2 - 10  + 'px', 'transform': 'rotate('+ Data.angle+'deg)' }">{{Data.phaselabel}}</div> -->
-    <drr
-      :style="{'z-index': chooseIndex === Data.index ? 9 : 0}"
-      :id="'motor-'+ Data.index"
-      :x="item.x"
-      :y="item.y"
-      :w="item.w"
-      :h="item.h"
-      :selected="chooseIndex === Data.index"
-      :selectable="isSeletable"
-      :angle="item.angle"
-      :aspectRatio="true"
-      @select="handleSelectIcon(item)"
-      @dragstop="boxDragStop(item, ...arguments)"
-      @resizestop="boxResizeStop(item, ...arguments)"
-      @rotatestop="boxRotateStop(item, ...arguments)"
-    >
-      <div
-        class="phaseText"
-        style="top: -28px;"
-        :style="{'marginLeft': Data.w / 2 + 'px', 'transform': `translateX(-50%) rotate(${-item.angle}deg)` }"
-      >{{Data.phaselabel}}</div>
-
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 27.07 89.36"
-        xml:space="preserve"
-        :width="IconW"
-        :height="IconH"
-      >
-        <!-- 渠化图手动绘制图标 -->
-        <g v-if="UsageMode === 'draw'">
-          <g v-for="(name, index) in iconnameArr" :key="index">
-            <path
-              id="直行"
-              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
-              :class="name === '直行' ? '' : 'invisible'"
-              d="M15,36H12.35V7.7H9.09L13.65,0l4.43,7.7H15V36H12.35" />
-            <path
-              id="左转"
-              :class="name === '左转' ? '' : 'invisible'"
-              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
-              d="M12.55,17.69V36h2.54V17.56a5,5,0,0,0-4.83-5L7.85,12.2,8.23,9,.09,12.45,7,18l.38-3.2,2.8.39a2.61,2.61,0,0,1,2.41,2.55Zm0,0V36h2.54V17.56M12.55,36h2.54m-2.54-4.28V36h2.54V31.72"
-            />
-            <path
-              id="右转"
-              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
-              :class="name === '右转' ? '' : 'invisible'"
-              d="M14.61,17.69V36H12.07V17.56a5,5,0,0,1,4.83-5l2.41-.38L18.93,9l8.14,3.44L20.2,18l-.38-3.2-2.8.39a2.61,2.61,0,0,0-2.41,2.55Zm0-.13V36H12.07V17.44M14.61,36H12.07m2.54,0H12.07V31.72"
-            />
-            <path
-              id="掉头"
-              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
-              :class="name === '掉头' ? '' : 'invisible'"
-              d="M12.08,36h2.54m-2.54,0h2.54m-2.54,0h2.54M3.18,24.69V28.4H0l4.45,7.68L8.9,28.4H5.72V24.69c0-1.28,1.4-2.43,3.18-2.43s3.18,1.15,3.18,2.43V36h2.54V24.69c0-2.69-2.54-5-5.72-5S3.18,22,3.18,24.69Z"
-            />
-            <!-- 特殊车道类型 -->
-            <path
-              id="sideroad"
-              v-if="Data.controltype === 1"
-              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
-              d="M21,70.57l-6,0c3-2.65,5.45-7.64,4.46-10.93-1.15-3.29-4.61-6.34-11.68-7.56C11.58,52.24,28.28,53.72,21,70.57ZM8,52.34c5.73,1.48,9.54,4.41,9.39,8.39-.22,3.66-4.22,8.3-6.29,9.91-5.85,0-6.87,0-6.87,0S23,57.56,8,52.34Z"
-            />
-            <path
-              id="bus-back"
-              v-if="Data.controltype === 3 && Data.flip === true"
-              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
-              d="M8.08,82.61V80.67A3,3,0,0,0,11,77.55a3.08,3.08,0,0,0-2.87-3.11V58.22A3,3,0,0,0,11,55.1,3.08,3.08,0,0,0,8.08,52V46.15a.74.74,0,0,1,.75-.78h4.24l.5,1h3.74a2.28,2.28,0,0,1,2.25,2.33V84.69a4.18,4.18,0,0,1-4,4.67H9.7C9.33,87.94,8.58,84.43,8.08,82.61Zm9.86-32v-1.3a.73.73,0,0,0-.75-.77H10.08a.73.73,0,0,0-.75.77v1.17a.73.73,0,0,0,.75.78l7.11.13A.74.74,0,0,0,17.94,50.56Zm-.5,9.86a.67.67,0,0,0,.62-.64V53.42a.68.68,0,0,0-.62-.65H14.82a.69.69,0,0,0-.63.65v6.36a.68.68,0,0,0,.63.64Zm0,8.7a.68.68,0,0,0,.62-.65V62.11a.68.68,0,0,0-.62-.65H14.82a.69.69,0,0,0-.63.65v6.36a.69.69,0,0,0,.63.65Zm0,8.82a.68.68,0,0,0,.62-.65V70.81a.68.68,0,0,0-.62-.65H14.82a.69.69,0,0,0-.63.65v6.48a.69.69,0,0,0,.63.65Zm0,8.83a.68.68,0,0,0,.62-.65V79.76a.68.68,0,0,0-.62-.65H14.82a.69.69,0,0,0-.63.65v6.36a.69.69,0,0,0,.63.65ZM10.08,55.23a2.47,2.47,0,0,1-2.25,2.34,2.34,2.34,0,1,1,2.25-2.34Zm-3.87,0a1.76,1.76,0,0,0,1.62,1.69,1.68,1.68,0,0,0,1.62-1.69,1.53,1.53,0,0,0-1.62-1.68A1.68,1.68,0,0,0,6.21,55.23Zm3.87,22.45a2.25,2.25,0,1,1-2.25-2.33A2.29,2.29,0,0,1,10.08,77.68Zm-3.87,0a1.78,1.78,0,0,0,1.62,1.69,1.69,1.69,0,0,0,0-3.37A1.68,1.68,0,0,0,6.21,77.68Z"
-            />
-            <path
-              id="bus-front"
-              v-if="Data.controltype === 3 && Data.flip === false"
-              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
-              d="M19.43,82.59v-2a3,3,0,0,1-2.87-3.11,3.09,3.09,0,0,1,2.87-3.12V58.19a3,3,0,0,1-2.87-3.11A3.09,3.09,0,0,1,19.43,52V46.12a.73.73,0,0,0-.75-.77H14.44l-.5,1H10.2A2.28,2.28,0,0,0,8,48.72v36a4.18,4.18,0,0,0,4,4.67h5.86C18.19,87.91,18.93,84.41,19.43,82.59ZM9.58,50.54v-1.3a.73.73,0,0,1,.75-.78h7.11a.74.74,0,0,1,.75.78v1.17a.74.74,0,0,1-.75.78l-7.11.12A.73.73,0,0,1,9.58,50.54Zm.5,9.86a.69.69,0,0,1-.63-.65V53.39a.69.69,0,0,1,.63-.65H12.7a.68.68,0,0,1,.62.65v6.36a.68.68,0,0,1-.62.65Zm0,8.69a.68.68,0,0,1-.63-.65V62.09a.69.69,0,0,1,.63-.65H12.7a.68.68,0,0,1,.62.65v6.35a.67.67,0,0,1-.62.65Zm0,8.83a.69.69,0,0,1-.63-.65V70.78a.69.69,0,0,1,.63-.65H12.7a.68.68,0,0,1,.62.65v6.49a.68.68,0,0,1-.62.65Zm0,8.82a.68.68,0,0,1-.63-.64V79.74a.69.69,0,0,1,.63-.65H12.7a.68.68,0,0,1,.62.65V86.1a.68.68,0,0,1-.62.64Zm7.36-31.53a2.46,2.46,0,0,0,2.24,2.33,2.34,2.34,0,1,0-2.24-2.33Zm3.86,0a1.76,1.76,0,0,1-1.62,1.69,1.68,1.68,0,0,1-1.62-1.69,1.54,1.54,0,0,1,1.62-1.69A1.68,1.68,0,0,1,21.3,55.21ZM17.44,77.66a2.25,2.25,0,1,0,2.24-2.34A2.28,2.28,0,0,0,17.44,77.66Zm3.86,0a1.78,1.78,0,0,1-1.62,1.69,1.69,1.69,0,1,1,1.62-1.69Z"
-            />
-            <path
-              id="brt-front"
-              v-if="Data.controltype === 4 && Data.flip === false"
-              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
-              d="M8.94,49.63H19.73v2.12H8.94v3.13H6.74V46.51h2.2Zm8.25,8,2.54-1.28v2.54L16.9,60.43A18.2,18.2,0,0,0,15,61.56a1.78,1.78,0,0,0-.53.63,2.83,2.83,0,0,0-.14,1.07v.43h5.42v2.13h-13V61.34a6.2,6.2,0,0,1,.35-2.45,2.65,2.65,0,0,1,1.22-1.21,4.16,4.16,0,0,1,2.06-.48,3.85,3.85,0,0,1,2.46.73A3.19,3.19,0,0,1,14,60a5.56,5.56,0,0,1,1.08-1.13A15.89,15.89,0,0,1,17.19,57.63Zm-5.6,2a2,2,0,0,0-1-.25,1.85,1.85,0,0,0-1,.25A1.2,1.2,0,0,0,9,60.3,8,8,0,0,0,8.94,62v1.66h3.29V62.12a8.28,8.28,0,0,0-.12-1.84A1.2,1.2,0,0,0,11.59,59.64ZM14,69.23a3.49,3.49,0,0,1,2-.53,4.11,4.11,0,0,1,2.4.67A2.8,2.8,0,0,1,19.57,71a16.84,16.84,0,0,1,.16,3v3.58h-13V73.3a6.54,6.54,0,0,1,.32-2.43,2.66,2.66,0,0,1,1.13-1.18A3.46,3.46,0,0,1,10,69.21a3.45,3.45,0,0,1,1.7.41,2.76,2.76,0,0,1,1.12,1.07A2.78,2.78,0,0,1,14,69.23Zm-4.54,2.3a1.06,1.06,0,0,0-.45.61,12.39,12.39,0,0,0-.09,2V75.4h3V74a14.58,14.58,0,0,0-.05-1.56,1.32,1.32,0,0,0-.46-.85,1.56,1.56,0,0,0-1-.31A1.65,1.65,0,0,0,9.44,71.53Zm5.35-.37a1.29,1.29,0,0,0-.57.71,6.86,6.86,0,0,0-.15,1.81V75.4h3.46v-2a6.1,6.1,0,0,0-.14-1.67,1.23,1.23,0,0,0-.54-.62,1.84,1.84,0,0,0-1-.25A1.85,1.85,0,0,0,14.79,71.16Z"
-            />
-            <path
-              id="brt-back"
-              v-if="Data.controltype === 4 && Data.flip === true"
-              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
-              d="M17.88,77.55H7.09V75.43H17.88V72.3h2.19v8.37H17.88Zm-8.26-8L7.09,70.83V68.29l2.83-1.54a16.63,16.63,0,0,0,1.91-1.13,1.53,1.53,0,0,0,.53-.63,2.79,2.79,0,0,0,.15-1.07v-.43H7.09V61.36h13v4.48a6.11,6.11,0,0,1-.35,2.46,2.65,2.65,0,0,1-1.21,1.2,4.17,4.17,0,0,1-2.07.48A3.9,3.9,0,0,1,14,69.26a3.24,3.24,0,0,1-1.17-2.06,5.11,5.11,0,0,1-1.09,1.13A14.26,14.26,0,0,1,9.62,69.55Zm5.61-2a1.86,1.86,0,0,0,1,.25,1.73,1.73,0,0,0,1-.25,1.21,1.21,0,0,0,.52-.66,8.72,8.72,0,0,0,.1-1.73V63.49h-3.3v1.57a8.05,8.05,0,0,0,.13,1.84A1.16,1.16,0,0,0,15.23,67.54ZM12.84,58a3.54,3.54,0,0,1-2,.53,4.1,4.1,0,0,1-2.39-.67,2.76,2.76,0,0,1-1.21-1.6,15.86,15.86,0,0,1-.16-3V49.66h13v4.22a6.59,6.59,0,0,1-.31,2.43,2.71,2.71,0,0,1-1.13,1.18,3.71,3.71,0,0,1-3.52.07A2.64,2.64,0,0,1,14,56.49,2.88,2.88,0,0,1,12.84,58Zm4.54-2.3a1,1,0,0,0,.44-.61,12.39,12.39,0,0,0,.09-2V51.78h-3v1.4c0,.84,0,1.36,0,1.56a1.33,1.33,0,0,0,.47.85,1.53,1.53,0,0,0,1,.31A1.66,1.66,0,0,0,17.38,55.65ZM12,56a1.37,1.37,0,0,0,.56-.72,6.32,6.32,0,0,0,.16-1.81V51.78H9.29v2a6.21,6.21,0,0,0,.13,1.66A1.19,1.19,0,0,0,10,56a1.88,1.88,0,0,0,1,.25A1.94,1.94,0,0,0,12,56Z"
-            />
-            <path
-              id="rail-back"
-              v-if="Data.controltype === 5 && Data.flip === true"
-              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
-              d="M4.74,88V44.25a.81.81,0,0,1,.63-.64.69.69,0,0,1,.65.64V88a.69.69,0,0,1-.65.64A.68.68,0,0,1,4.74,88Zm2.81-1.8V47.85c-.38-1.41,2.05-2.44,3.33-2.44a8,8,0,0,1,7.92,8v4.11l.64-1c0-.13.13-.13.39-.13s.13.13.38.13l1.54,4a.78.78,0,0,1-.13.52.74.74,0,0,1-.51-.13l-1.28-3.35-.77,1.29V86.17a.74.74,0,0,1-.77.77h-10A.74.74,0,0,1,7.55,86.17ZM15,53a1.1,1.1,0,0,0,1-1,2.9,2.9,0,0,0-2.94-3H9.47a.9.9,0,0,0-1,.9V52a1.1,1.1,0,0,0,1,1Zm.38,5a.69.69,0,0,0,.64-.64V55.18a.68.68,0,0,0-.64-.64H12.54v.13a.68.68,0,0,0-.64.64v2.06a.69.69,0,0,0,.64.64Zm0,3.86a.69.69,0,0,0,.64-.65v-2a.69.69,0,0,0-.64-.65H12.54a.69.69,0,0,0-.64.65v2a.69.69,0,0,0,.64.65Zm0,4a.68.68,0,0,0,.64-.64V63.15a.69.69,0,0,0-.64-.64H12.54a.68.68,0,0,0-.64.64v2.06a.69.69,0,0,0,.64.64Zm0,4.24a.68.68,0,0,0,.64-.64V67.39a.69.69,0,0,0-.64-.64H12.54a.69.69,0,0,0-.64.64v2.06a.68.68,0,0,0,.64.64Zm0,4a.69.69,0,0,0,.64-.64V71.38a.68.68,0,0,0-.64-.64H12.54a.68.68,0,0,0-.64.64v2.06a.69.69,0,0,0,.64.64Zm0,3.73a.69.69,0,0,0,.64-.64V75.24a.69.69,0,0,0-.64-.65H12.54a.52.52,0,0,0-.64.52v2.06a.69.69,0,0,0,.64.64Zm0,4.37a.69.69,0,0,0,.64-.64V79.48a.68.68,0,0,0-.64-.64H12.54a.68.68,0,0,0-.64.64v2.06a.69.69,0,0,0,.64.64Zm0,3.86a.69.69,0,0,0,.64-.65v-2a.69.69,0,0,0-.64-.65H12.54a.69.69,0,0,0-.64.65v2a.69.69,0,0,0,.64.65Z"
-            />
-            <path
-              id="rail-front"
-              v-if="Data.controltype === 5 && Data.flip === false"
-              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
-              d="M22,88V44.3a.84.84,0,0,0-.64-.64.69.69,0,0,0-.64.64V88a.69.69,0,0,0,.64.64A.69.69,0,0,0,22,88Zm-2.82-1.8V47.9c.39-1.41-2-2.44-3.32-2.44a8,8,0,0,0-7.93,8v4.12l-.64-1c0-.13-.13-.13-.38-.13s-.13.13-.39.13L5,60.5A.78.78,0,0,0,5.1,61a.77.77,0,0,0,.51-.13l1.28-3.34.76,1.28V86.22a.74.74,0,0,0,.77.77h10A.74.74,0,0,0,19.16,86.22ZM11.75,53.05a1.11,1.11,0,0,1-1-1,2.91,2.91,0,0,1,2.94-3h3.59a.91.91,0,0,1,1,.9V52a1.11,1.11,0,0,1-1,1Zm-.39,5a.69.69,0,0,1-.64-.64V55.23a.69.69,0,0,1,.64-.64h2.82v.13a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Zm0,3.86a.69.69,0,0,1-.64-.65V59.22a.7.7,0,0,1,.64-.65h2.82a.69.69,0,0,1,.64.65v2.05a.7.7,0,0,1-.64.65Zm0,4a.69.69,0,0,1-.64-.64V63.2a.69.69,0,0,1,.64-.64h2.82a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Zm0,4.25a.69.69,0,0,1-.64-.65v-2a.7.7,0,0,1,.64-.65h2.82a.69.69,0,0,1,.64.65v2a.7.7,0,0,1-.64.65Zm0,4a.69.69,0,0,1-.64-.64V71.43a.69.69,0,0,1,.64-.64h2.82a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Zm0,3.73a.69.69,0,0,1-.64-.64V75.29a.69.69,0,0,1,.64-.64h2.82a.51.51,0,0,1,.64.51v2.06a.69.69,0,0,1-.64.64Zm0,4.37a.69.69,0,0,1-.64-.64V79.53a.69.69,0,0,1,.64-.64h2.82a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Zm0,3.86a.69.69,0,0,1-.64-.64V83.39a.69.69,0,0,1,.64-.64h2.82a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Z"
-            />
-            <path
-              id="bike-back"
-              v-if="Data.controltype === 6 && Data.flip === true"
-              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
-              d="M15.38,69.56a4.48,4.48,0,0,0-.17-1.21l2.41-1.14,1.17.46v.68a.7.7,0,0,0,.22.5.74.74,0,0,0,.51.2.71.71,0,0,0,.72-.71v-2.9a.71.71,0,0,0-.21-.5.75.75,0,0,0-.52-.2.72.72,0,0,0-.72.7v.71L18.38,66v-6.9l.76.24c.14.05.34.18.34.29v1.21a.72.72,0,0,0,.73.71.71.71,0,0,0,.72-.71V59.62A1.83,1.83,0,0,0,19.59,58l-4.26-1.32a5.06,5.06,0,0,0,.05-.68,4.57,4.57,0,0,0-4.63-4.5,4.51,4.51,0,1,0,0,9A4.67,4.67,0,0,0,14.89,58l.65.2L10.3,63.33h0l0,0a.49.49,0,0,0-.07.11.25.25,0,0,0,0,.07l.23.08h0l-.25,0a.76.76,0,0,0,0,.15v1.33a4.5,4.5,0,0,0,.6,9,4.57,4.57,0,0,0,4.63-4.5Zm1.55-4.15-4.77-1.9,4.77-4.66ZM11.6,66.58a3.17,3.17,0,0,1,1.68,1.11l-1.69.8Zm3,.49a4.59,4.59,0,0,0-3-1.94V64.8l4.23,1.69Zm-4.46,2.55a.7.7,0,0,0,.34.59.75.75,0,0,0,.71,0L13.87,69a2.86,2.86,0,0,1,.06.58,3.19,3.19,0,0,1-6.37,0,3.11,3.11,0,0,1,2.59-3Zm.72-14.33a.7.7,0,0,0-.55.05.69.69,0,0,0,.11,1.29l3.06.95a3.22,3.22,0,0,1-2.73,1.51A3.1,3.1,0,1,1,13.93,56a2.18,2.18,0,0,1,0,.25Z"
-            />
-            <path
-              id="bike-front"
-              v-if="Data.controltype === 6 && Data.flip === false"
-              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
-              d="M11.7,69.61a4.23,4.23,0,0,1,.17-1.22L9.44,67.25l-1.17.46v.68a.67.67,0,0,1-.21.5.73.73,0,0,1-1.24-.5V65.47A.71.71,0,0,1,7,65a.77.77,0,0,1,.52-.2.71.71,0,0,1,.72.71v.7L8.68,66V59.1l-.76.23c-.14.05-.35.18-.35.29v1.22a.72.72,0,0,1-.73.71.71.71,0,0,1-.72-.71V59.62A1.83,1.83,0,0,1,7.46,58l4.29-1.33A3.82,3.82,0,0,1,11.7,56a4.65,4.65,0,1,1,4.65,4.53A4.69,4.69,0,0,1,12.19,58l-.66.2,5.27,5.14h0l0,0a.75.75,0,0,1,.07.12s0,0,0,.06l-.23.09h0l.25,0a.61.61,0,0,1,0,.14v1.34a4.54,4.54,0,1,1-5.25,4.49Zm-1.56-4.17,4.79-1.91-4.79-4.68Zm5.35,1.17a3.27,3.27,0,0,0-1.69,1.13l1.7.8Zm-3,.5a4.64,4.64,0,0,1,3-2v-.33l-4.24,1.7ZM17,69.67a.7.7,0,0,1-.34.6.73.73,0,0,1-.7,0L13.21,69a2.86,2.86,0,0,0-.06.58A3.2,3.2,0,1,0,17,66.55Zm-.72-14.39a.77.77,0,0,1,.56,0,.74.74,0,0,1,.36.42.71.71,0,0,1-.48.89l-3.06.94a3.21,3.21,0,0,0,2.74,1.52A3.11,3.11,0,1,0,13.15,56a2.18,2.18,0,0,0,0,.25Z"
-            />
-          </g>
-        </g>
-        <!-- 展示相位图标 -->
-        <g v-if="UsageMode === 'show'">
-          <g v-for="(name, index) in iconnameArr" :key="index">
-            <path
-              id="直行"
-              :class="name === '直行' ? '' : 'invisible'"
-              :fill="FlashColor ? FlashColor : (Data.color ? Data.color : showDefaultColor)"
-              d="M15,36H12.35V7.7H9.09L13.65,0l4.43,7.7H15V36H12.35"
-            ></path>
-            <path
-              id="左转"
-              :class="name === '左转' ? '' : 'invisible'"
-              :fill="FlashColor ? FlashColor : (Data.color ? Data.color : showDefaultColor)"
-              d="M12.55,17.69V36h2.54V17.56a5,5,0,0,0-4.83-5L7.85,12.2,8.23,9,.09,12.45,7,18l.38-3.2,2.8.39a2.61,2.61,0,0,1,2.41,2.55Zm0,0V36h2.54V17.56M12.55,36h2.54m-2.54-4.28V36h2.54V31.72"
-            ></path>
-            <path
-              id="右转"
-              :class="name === '右转' ? '' : 'invisible'"
-              :fill="FlashColor ? FlashColor : (Data.color ? Data.color : showDefaultColor)"
-              d="M14.61,17.69V36H12.07V17.56a5,5,0,0,1,4.83-5l2.41-.38L18.93,9l8.14,3.44L20.2,18l-.38-3.2-2.8.39a2.61,2.61,0,0,0-2.41,2.55Zm0-.13V36H12.07V17.44M14.61,36H12.07m2.54,0H12.07V31.72"
-            ></path>
-            <path
-              id="掉头"
-              :class="name === '掉头' ? '' : 'invisible'"
-              :fill="FlashColor ? FlashColor : (Data.color ? Data.color : showDefaultColor)"
-              d="M12.08,36h2.54m-2.54,0h2.54m-2.54,0h2.54M3.18,24.69V28.4H0l4.45,7.68L8.9,28.4H5.72V24.69c0-1.28,1.4-2.43,3.18-2.43s3.18,1.15,3.18,2.43V36h2.54V24.69c0-2.69-2.54-5-5.72-5S3.18,22,3.18,24.69Z"
-            ></path>
-          </g>
-          <g>
-            <!-- 特殊车道类型 -->
-            <path
-              v-if="Data.controltype === 3 && Data.flip === true"
-              :fill="showDefaultColor"
-              d="M8.08,82.61V80.67A3,3,0,0,0,11,77.55a3.08,3.08,0,0,0-2.87-3.11V58.22A3,3,0,0,0,11,55.1,3.08,3.08,0,0,0,8.08,52V46.15a.74.74,0,0,1,.75-.78h4.24l.5,1h3.74a2.28,2.28,0,0,1,2.25,2.33V84.69a4.18,4.18,0,0,1-4,4.67H9.7C9.33,87.94,8.58,84.43,8.08,82.61Zm9.86-32v-1.3a.73.73,0,0,0-.75-.77H10.08a.73.73,0,0,0-.75.77v1.17a.73.73,0,0,0,.75.78l7.11.13A.74.74,0,0,0,17.94,50.56Zm-.5,9.86a.67.67,0,0,0,.62-.64V53.42a.68.68,0,0,0-.62-.65H14.82a.69.69,0,0,0-.63.65v6.36a.68.68,0,0,0,.63.64Zm0,8.7a.68.68,0,0,0,.62-.65V62.11a.68.68,0,0,0-.62-.65H14.82a.69.69,0,0,0-.63.65v6.36a.69.69,0,0,0,.63.65Zm0,8.82a.68.68,0,0,0,.62-.65V70.81a.68.68,0,0,0-.62-.65H14.82a.69.69,0,0,0-.63.65v6.48a.69.69,0,0,0,.63.65Zm0,8.83a.68.68,0,0,0,.62-.65V79.76a.68.68,0,0,0-.62-.65H14.82a.69.69,0,0,0-.63.65v6.36a.69.69,0,0,0,.63.65ZM10.08,55.23a2.47,2.47,0,0,1-2.25,2.34,2.34,2.34,0,1,1,2.25-2.34Zm-3.87,0a1.76,1.76,0,0,0,1.62,1.69,1.68,1.68,0,0,0,1.62-1.69,1.53,1.53,0,0,0-1.62-1.68A1.68,1.68,0,0,0,6.21,55.23Zm3.87,22.45a2.25,2.25,0,1,1-2.25-2.33A2.29,2.29,0,0,1,10.08,77.68Zm-3.87,0a1.78,1.78,0,0,0,1.62,1.69,1.69,1.69,0,0,0,0-3.37A1.68,1.68,0,0,0,6.21,77.68Z"
-              id="bus-back"
-            ></path>
-            <path
-              v-if="Data.controltype === 3 && Data.flip === false"
-              :fill="showDefaultColor"
-              d="M19.43,82.59v-2a3,3,0,0,1-2.87-3.11,3.09,3.09,0,0,1,2.87-3.12V58.19a3,3,0,0,1-2.87-3.11A3.09,3.09,0,0,1,19.43,52V46.12a.73.73,0,0,0-.75-.77H14.44l-.5,1H10.2A2.28,2.28,0,0,0,8,48.72v36a4.18,4.18,0,0,0,4,4.67h5.86C18.19,87.91,18.93,84.41,19.43,82.59ZM9.58,50.54v-1.3a.73.73,0,0,1,.75-.78h7.11a.74.74,0,0,1,.75.78v1.17a.74.74,0,0,1-.75.78l-7.11.12A.73.73,0,0,1,9.58,50.54Zm.5,9.86a.69.69,0,0,1-.63-.65V53.39a.69.69,0,0,1,.63-.65H12.7a.68.68,0,0,1,.62.65v6.36a.68.68,0,0,1-.62.65Zm0,8.69a.68.68,0,0,1-.63-.65V62.09a.69.69,0,0,1,.63-.65H12.7a.68.68,0,0,1,.62.65v6.35a.67.67,0,0,1-.62.65Zm0,8.83a.69.69,0,0,1-.63-.65V70.78a.69.69,0,0,1,.63-.65H12.7a.68.68,0,0,1,.62.65v6.49a.68.68,0,0,1-.62.65Zm0,8.82a.68.68,0,0,1-.63-.64V79.74a.69.69,0,0,1,.63-.65H12.7a.68.68,0,0,1,.62.65V86.1a.68.68,0,0,1-.62.64Zm7.36-31.53a2.46,2.46,0,0,0,2.24,2.33,2.34,2.34,0,1,0-2.24-2.33Zm3.86,0a1.76,1.76,0,0,1-1.62,1.69,1.68,1.68,0,0,1-1.62-1.69,1.54,1.54,0,0,1,1.62-1.69A1.68,1.68,0,0,1,21.3,55.21ZM17.44,77.66a2.25,2.25,0,1,0,2.24-2.34A2.28,2.28,0,0,0,17.44,77.66Zm3.86,0a1.78,1.78,0,0,1-1.62,1.69,1.69,1.69,0,1,1,1.62-1.69Z"
-              id="bus-front"
-            ></path>
-            <path
-              v-if="Data.controltype === 4 && Data.flip === false"
-              :fill="showDefaultColor"
-              d="M8.94,49.63H19.73v2.12H8.94v3.13H6.74V46.51h2.2Zm8.25,8,2.54-1.28v2.54L16.9,60.43A18.2,18.2,0,0,0,15,61.56a1.78,1.78,0,0,0-.53.63,2.83,2.83,0,0,0-.14,1.07v.43h5.42v2.13h-13V61.34a6.2,6.2,0,0,1,.35-2.45,2.65,2.65,0,0,1,1.22-1.21,4.16,4.16,0,0,1,2.06-.48,3.85,3.85,0,0,1,2.46.73A3.19,3.19,0,0,1,14,60a5.56,5.56,0,0,1,1.08-1.13A15.89,15.89,0,0,1,17.19,57.63Zm-5.6,2a2,2,0,0,0-1-.25,1.85,1.85,0,0,0-1,.25A1.2,1.2,0,0,0,9,60.3,8,8,0,0,0,8.94,62v1.66h3.29V62.12a8.28,8.28,0,0,0-.12-1.84A1.2,1.2,0,0,0,11.59,59.64ZM14,69.23a3.49,3.49,0,0,1,2-.53,4.11,4.11,0,0,1,2.4.67A2.8,2.8,0,0,1,19.57,71a16.84,16.84,0,0,1,.16,3v3.58h-13V73.3a6.54,6.54,0,0,1,.32-2.43,2.66,2.66,0,0,1,1.13-1.18A3.46,3.46,0,0,1,10,69.21a3.45,3.45,0,0,1,1.7.41,2.76,2.76,0,0,1,1.12,1.07A2.78,2.78,0,0,1,14,69.23Zm-4.54,2.3a1.06,1.06,0,0,0-.45.61,12.39,12.39,0,0,0-.09,2V75.4h3V74a14.58,14.58,0,0,0-.05-1.56,1.32,1.32,0,0,0-.46-.85,1.56,1.56,0,0,0-1-.31A1.65,1.65,0,0,0,9.44,71.53Zm5.35-.37a1.29,1.29,0,0,0-.57.71,6.86,6.86,0,0,0-.15,1.81V75.4h3.46v-2a6.1,6.1,0,0,0-.14-1.67,1.23,1.23,0,0,0-.54-.62,1.84,1.84,0,0,0-1-.25A1.85,1.85,0,0,0,14.79,71.16Z"
-              id="brt-front"
-            ></path>
-            <path
-              v-if="Data.controltype === 4 && Data.flip === true"
-              :fill="showDefaultColor"
-              d="M17.88,77.55H7.09V75.43H17.88V72.3h2.19v8.37H17.88Zm-8.26-8L7.09,70.83V68.29l2.83-1.54a16.63,16.63,0,0,0,1.91-1.13,1.53,1.53,0,0,0,.53-.63,2.79,2.79,0,0,0,.15-1.07v-.43H7.09V61.36h13v4.48a6.11,6.11,0,0,1-.35,2.46,2.65,2.65,0,0,1-1.21,1.2,4.17,4.17,0,0,1-2.07.48A3.9,3.9,0,0,1,14,69.26a3.24,3.24,0,0,1-1.17-2.06,5.11,5.11,0,0,1-1.09,1.13A14.26,14.26,0,0,1,9.62,69.55Zm5.61-2a1.86,1.86,0,0,0,1,.25,1.73,1.73,0,0,0,1-.25,1.21,1.21,0,0,0,.52-.66,8.72,8.72,0,0,0,.1-1.73V63.49h-3.3v1.57a8.05,8.05,0,0,0,.13,1.84A1.16,1.16,0,0,0,15.23,67.54ZM12.84,58a3.54,3.54,0,0,1-2,.53,4.1,4.1,0,0,1-2.39-.67,2.76,2.76,0,0,1-1.21-1.6,15.86,15.86,0,0,1-.16-3V49.66h13v4.22a6.59,6.59,0,0,1-.31,2.43,2.71,2.71,0,0,1-1.13,1.18,3.71,3.71,0,0,1-3.52.07A2.64,2.64,0,0,1,14,56.49,2.88,2.88,0,0,1,12.84,58Zm4.54-2.3a1,1,0,0,0,.44-.61,12.39,12.39,0,0,0,.09-2V51.78h-3v1.4c0,.84,0,1.36,0,1.56a1.33,1.33,0,0,0,.47.85,1.53,1.53,0,0,0,1,.31A1.66,1.66,0,0,0,17.38,55.65ZM12,56a1.37,1.37,0,0,0,.56-.72,6.32,6.32,0,0,0,.16-1.81V51.78H9.29v2a6.21,6.21,0,0,0,.13,1.66A1.19,1.19,0,0,0,10,56a1.88,1.88,0,0,0,1,.25A1.94,1.94,0,0,0,12,56Z"
-              id="brt-back"
-            ></path>
-            <path
-              v-if="Data.controltype === 5 && Data.flip === true"
-              :fill="showDefaultColor"
-              d="M4.74,88V44.25a.81.81,0,0,1,.63-.64.69.69,0,0,1,.65.64V88a.69.69,0,0,1-.65.64A.68.68,0,0,1,4.74,88Zm2.81-1.8V47.85c-.38-1.41,2.05-2.44,3.33-2.44a8,8,0,0,1,7.92,8v4.11l.64-1c0-.13.13-.13.39-.13s.13.13.38.13l1.54,4a.78.78,0,0,1-.13.52.74.74,0,0,1-.51-.13l-1.28-3.35-.77,1.29V86.17a.74.74,0,0,1-.77.77h-10A.74.74,0,0,1,7.55,86.17ZM15,53a1.1,1.1,0,0,0,1-1,2.9,2.9,0,0,0-2.94-3H9.47a.9.9,0,0,0-1,.9V52a1.1,1.1,0,0,0,1,1Zm.38,5a.69.69,0,0,0,.64-.64V55.18a.68.68,0,0,0-.64-.64H12.54v.13a.68.68,0,0,0-.64.64v2.06a.69.69,0,0,0,.64.64Zm0,3.86a.69.69,0,0,0,.64-.65v-2a.69.69,0,0,0-.64-.65H12.54a.69.69,0,0,0-.64.65v2a.69.69,0,0,0,.64.65Zm0,4a.68.68,0,0,0,.64-.64V63.15a.69.69,0,0,0-.64-.64H12.54a.68.68,0,0,0-.64.64v2.06a.69.69,0,0,0,.64.64Zm0,4.24a.68.68,0,0,0,.64-.64V67.39a.69.69,0,0,0-.64-.64H12.54a.69.69,0,0,0-.64.64v2.06a.68.68,0,0,0,.64.64Zm0,4a.69.69,0,0,0,.64-.64V71.38a.68.68,0,0,0-.64-.64H12.54a.68.68,0,0,0-.64.64v2.06a.69.69,0,0,0,.64.64Zm0,3.73a.69.69,0,0,0,.64-.64V75.24a.69.69,0,0,0-.64-.65H12.54a.52.52,0,0,0-.64.52v2.06a.69.69,0,0,0,.64.64Zm0,4.37a.69.69,0,0,0,.64-.64V79.48a.68.68,0,0,0-.64-.64H12.54a.68.68,0,0,0-.64.64v2.06a.69.69,0,0,0,.64.64Zm0,3.86a.69.69,0,0,0,.64-.65v-2a.69.69,0,0,0-.64-.65H12.54a.69.69,0,0,0-.64.65v2a.69.69,0,0,0,.64.65Z"
-              id="rail-back"
-            ></path>
-            <path
-              v-if="Data.controltype === 5 && Data.flip === false"
-              :fill="showDefaultColor"
-              d="M22,88V44.3a.84.84,0,0,0-.64-.64.69.69,0,0,0-.64.64V88a.69.69,0,0,0,.64.64A.69.69,0,0,0,22,88Zm-2.82-1.8V47.9c.39-1.41-2-2.44-3.32-2.44a8,8,0,0,0-7.93,8v4.12l-.64-1c0-.13-.13-.13-.38-.13s-.13.13-.39.13L5,60.5A.78.78,0,0,0,5.1,61a.77.77,0,0,0,.51-.13l1.28-3.34.76,1.28V86.22a.74.74,0,0,0,.77.77h10A.74.74,0,0,0,19.16,86.22ZM11.75,53.05a1.11,1.11,0,0,1-1-1,2.91,2.91,0,0,1,2.94-3h3.59a.91.91,0,0,1,1,.9V52a1.11,1.11,0,0,1-1,1Zm-.39,5a.69.69,0,0,1-.64-.64V55.23a.69.69,0,0,1,.64-.64h2.82v.13a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Zm0,3.86a.69.69,0,0,1-.64-.65V59.22a.7.7,0,0,1,.64-.65h2.82a.69.69,0,0,1,.64.65v2.05a.7.7,0,0,1-.64.65Zm0,4a.69.69,0,0,1-.64-.64V63.2a.69.69,0,0,1,.64-.64h2.82a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Zm0,4.25a.69.69,0,0,1-.64-.65v-2a.7.7,0,0,1,.64-.65h2.82a.69.69,0,0,1,.64.65v2a.7.7,0,0,1-.64.65Zm0,4a.69.69,0,0,1-.64-.64V71.43a.69.69,0,0,1,.64-.64h2.82a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Zm0,3.73a.69.69,0,0,1-.64-.64V75.29a.69.69,0,0,1,.64-.64h2.82a.51.51,0,0,1,.64.51v2.06a.69.69,0,0,1-.64.64Zm0,4.37a.69.69,0,0,1-.64-.64V79.53a.69.69,0,0,1,.64-.64h2.82a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Zm0,3.86a.69.69,0,0,1-.64-.64V83.39a.69.69,0,0,1,.64-.64h2.82a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Z"
-              id="rail-front"
-            ></path>
-            <path
-              v-if="Data.controltype === 6 && Data.flip === true"
-              :fill="showDefaultColor"
-              d="M15.38,69.56a4.48,4.48,0,0,0-.17-1.21l2.41-1.14,1.17.46v.68a.7.7,0,0,0,.22.5.74.74,0,0,0,.51.2.71.71,0,0,0,.72-.71v-2.9a.71.71,0,0,0-.21-.5.75.75,0,0,0-.52-.2.72.72,0,0,0-.72.7v.71L18.38,66v-6.9l.76.24c.14.05.34.18.34.29v1.21a.72.72,0,0,0,.73.71.71.71,0,0,0,.72-.71V59.62A1.83,1.83,0,0,0,19.59,58l-4.26-1.32a5.06,5.06,0,0,0,.05-.68,4.57,4.57,0,0,0-4.63-4.5,4.51,4.51,0,1,0,0,9A4.67,4.67,0,0,0,14.89,58l.65.2L10.3,63.33h0l0,0a.49.49,0,0,0-.07.11.25.25,0,0,0,0,.07l.23.08h0l-.25,0a.76.76,0,0,0,0,.15v1.33a4.5,4.5,0,0,0,.6,9,4.57,4.57,0,0,0,4.63-4.5Zm1.55-4.15-4.77-1.9,4.77-4.66ZM11.6,66.58a3.17,3.17,0,0,1,1.68,1.11l-1.69.8Zm3,.49a4.59,4.59,0,0,0-3-1.94V64.8l4.23,1.69Zm-4.46,2.55a.7.7,0,0,0,.34.59.75.75,0,0,0,.71,0L13.87,69a2.86,2.86,0,0,1,.06.58,3.19,3.19,0,0,1-6.37,0,3.11,3.11,0,0,1,2.59-3Zm.72-14.33a.7.7,0,0,0-.55.05.69.69,0,0,0,.11,1.29l3.06.95a3.22,3.22,0,0,1-2.73,1.51A3.1,3.1,0,1,1,13.93,56a2.18,2.18,0,0,1,0,.25Z"
-              id="bike-back"
-            ></path>
-            <path
-              v-if="Data.controltype === 6 && Data.flip === false"
-              :fill="showDefaultColor"
-              d="M11.7,69.61a4.23,4.23,0,0,1,.17-1.22L9.44,67.25l-1.17.46v.68a.67.67,0,0,1-.21.5.73.73,0,0,1-1.24-.5V65.47A.71.71,0,0,1,7,65a.77.77,0,0,1,.52-.2.71.71,0,0,1,.72.71v.7L8.68,66V59.1l-.76.23c-.14.05-.35.18-.35.29v1.22a.72.72,0,0,1-.73.71.71.71,0,0,1-.72-.71V59.62A1.83,1.83,0,0,1,7.46,58l4.29-1.33A3.82,3.82,0,0,1,11.7,56a4.65,4.65,0,1,1,4.65,4.53A4.69,4.69,0,0,1,12.19,58l-.66.2,5.27,5.14h0l0,0a.75.75,0,0,1,.07.12s0,0,0,.06l-.23.09h0l.25,0a.61.61,0,0,1,0,.14v1.34a4.54,4.54,0,1,1-5.25,4.49Zm-1.56-4.17,4.79-1.91-4.79-4.68Zm5.35,1.17a3.27,3.27,0,0,0-1.69,1.13l1.7.8Zm-3,.5a4.64,4.64,0,0,1,3-2v-.33l-4.24,1.7ZM17,69.67a.7.7,0,0,1-.34.6.73.73,0,0,1-.7,0L13.21,69a2.86,2.86,0,0,0-.06.58A3.2,3.2,0,1,0,17,66.55Zm-.72-14.39a.77.77,0,0,1,.56,0,.74.74,0,0,1,.36.42.71.71,0,0,1-.48.89l-3.06.94a3.21,3.21,0,0,0,2.74,1.52A3.11,3.11,0,1,0,13.15,56a2.18,2.18,0,0,0,0,.25Z"
-              id="bike-front"
-            ></path>
-          </g>
-        </g>
-      </svg>
-    </drr>
-  </div>
-</template>
-<script>
-export default {
-  name: 'motor-icon-svg',
-  data () {
-    return {
-      defaultColor: '#fff', // 默认状态颜色
-      highlightColor: '#299BCC', // 选中高亮状态颜色
-      item: {},
-      reset: true,
-      iconnameArr: [],
-      showDefaultColor: '#fff', // 默认状态颜色
-      FlashColor: undefined,
-      GreenColor: '#77fb65',
-      YellowColor: '#f7b500',
-      lastType: ''
-    }
-  },
-  watch: {
-    // item: {
-    //   handler: function (newval, oldval) {
-    //     if (JSON.stringify(oldval) !== '{}') {
-    //       // 更改原数据的位置大小数据
-    //       let data = {
-    //         ...this.Data,
-    //         ...newval
-    //       }
-    //       let fields = Object.keys(newval)
-    //       this.$emit('changeMotorwayItem', data, fields)
-    //     }
-    //   }
-    // },
-    Data: {
-      handler: function (val) {
-        this.iconnameArr = val.icondirename
-        if (this.UsageMode === 'draw') {
-          this.item.x = val.x
-          this.item.y = val.y
-          this.item.angle = val.angle
-        }
-        if (this.UsageMode === 'show') {
-          if (this.lastType === '') {
-          // 绿闪：绿-》灰-》绿 循环效果
-            if (val.type === 4 || val.type === '黄闪') {
-              let highlightColor = ''
-              if (val.type === 4) {
-                highlightColor = this.GreenColor
-              }
-              if (val.type === '黄闪') {
-                highlightColor = this.YellowColor
-              }
-              this.FlashColor = highlightColor
-              this.GreenIntervalId = setInterval(() => {
-                this.FlashColor =
-              !this.FlashColor || this.FlashColor === '#828282'
-                ? highlightColor
-                : '#828282'
-              }, 500)
-              this.lastType = val.type
-            }
-          }
-          if (
-            this.GreenIntervalId &&
-          val.type !== 4 &&
-          val.type !== '黄闪' &&
-          val.type !== this.lastType
-          ) {
-            clearInterval(this.GreenIntervalId)
-            this.FlashColor = undefined
-            this.lastType = ''
-          }
-        }
-      },
-      deep: true
-    }
-    // ,
-    // chooseIndex: {
-    //   handler: function (val) {
-    //     console.log(this.Data)
-    //   }
-    // }
-  },
-  props: {
-    Data: {
-      type: Object
-    },
-    isSeletable: {
-      type: Boolean
-    },
-    chooseIndex: {
-      type: Number
-    },
-    UsageMode: {
-      // 当前图标模式： 绘制draw 展示show
-      type: String,
-      default: 'draw'
-    }
-  },
-  methods: {
-    boxDragStop (origin, final) {
-      this.item = JSON.parse(JSON.stringify(final))
-      this.handleChangeData()
-    },
-    boxResizeStop (origin, final) {
-      this.IconW = final.w + 'px'
-      this.IconH = final.h + 'px'
-      this.resetSvg()
-      this.item = JSON.parse(JSON.stringify(final))
-      this.handleChangeData()
-    },
-    boxRotateStop (origin, final) {
-      this.item = JSON.parse(JSON.stringify(final))
-      // 第四象限的角度是负值（开源组件接口返回），转化为正值便于理解
-      if (this.item.angle < 0) {
-        this.item.angle = this.item.angle + 360
-      }
-      this.handleChangeData()
-    },
-    resetSvg () {
-      this.reset = false
-      this.$nextTick(() => {
-        this.reset = true
-      })
-    },
-    handleSelectIcon () {
-      this.$emit('handleSelectIcon', this.Data)
-    },
-    handleChangeData () {
-      let data = {
-        ...this.Data,
-        ...this.item
-      }
-      let fields = Object.keys(this.item)
-      this.$emit('changeMotorwayItem', data, fields)
-      this.handleSelectIcon()
-    }
-  },
-  created () {
-    this.IconW = this.Data.w
-    this.IconH = this.Data.h
-    this.item = {
-      x: this.Data.x,
-      y: this.Data.y,
-      w: this.Data.w,
-      h: this.Data.h,
-      angle: this.Data.angle
-    }
-  },
-  mounted () {
-    // console.log('motor', this.Data)
-    this.iconnameArr = this.Data.icondirename
-  }
-}
-</script>
-<style scoped>
-.invisible {
-  visibility: hidden;
-}
-</style>
+/**
+ * Copyright (c) 2020 kedacom
+ * OpenATC is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ * http://license.coscl.org.cn/MulanPSL2
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ **/
+<template>
+  <div v-if="reset" class="motorway-icon">
+    <!-- <div class="phaseText" :style="{'left': Data.x - Data.w / 2  - 10 + 'px', 'top': Data.y - Data.h / 2 - 10  + 'px', 'transform': 'rotate('+ Data.angle+'deg)' }">{{Data.phaselabel}}</div> -->
+    <drr
+      :style="{'z-index': chooseIndex === Data.index ? 9 : 0}"
+      :id="'motor-'+ Data.index"
+      :x="item.x"
+      :y="item.y"
+      :w="item.w"
+      :h="item.h"
+      :selected="chooseIndex === Data.index"
+      :selectable="isSeletable"
+      :angle="item.angle"
+      :aspectRatio="true"
+      @select="handleSelectIcon(item)"
+      @dragstop="boxDragStop(item, ...arguments)"
+      @resizestop="boxResizeStop(item, ...arguments)"
+      @rotatestop="boxRotateStop(item, ...arguments)"
+    >
+      <div
+        class="phaseText"
+        style="top: -28px;"
+        :style="{'marginLeft': Data.w / 2 + 'px', 'transform': `translateX(-50%) rotate(${-item.angle}deg)` }"
+      >{{Data.phaselabel}}</div>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 27.07 89.36"
+        xml:space="preserve"
+        :width="IconW"
+        :height="IconH"
+      >
+        <!-- 渠化图手动绘制图标 -->
+        <g v-if="UsageMode === 'draw'">
+          <g v-for="(name, index) in iconnameArr" :key="index">
+            <path
+              id="直行"
+              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
+              :class="name === '直行' ? '' : 'invisible'"
+              d="M15,36H12.35V7.7H9.09L13.65,0l4.43,7.7H15V36H12.35" />
+            <path
+              id="左转"
+              :class="name === '左转' ? '' : 'invisible'"
+              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
+              d="M12.55,17.69V36h2.54V17.56a5,5,0,0,0-4.83-5L7.85,12.2,8.23,9,.09,12.45,7,18l.38-3.2,2.8.39a2.61,2.61,0,0,1,2.41,2.55Zm0,0V36h2.54V17.56M12.55,36h2.54m-2.54-4.28V36h2.54V31.72"
+            />
+            <path
+              id="右转"
+              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
+              :class="name === '右转' ? '' : 'invisible'"
+              d="M14.61,17.69V36H12.07V17.56a5,5,0,0,1,4.83-5l2.41-.38L18.93,9l8.14,3.44L20.2,18l-.38-3.2-2.8.39a2.61,2.61,0,0,0-2.41,2.55Zm0-.13V36H12.07V17.44M14.61,36H12.07m2.54,0H12.07V31.72"
+            />
+            <path
+              id="掉头"
+              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
+              :class="name === '掉头' ? '' : 'invisible'"
+              d="M12.08,36h2.54m-2.54,0h2.54m-2.54,0h2.54M3.18,24.69V28.4H0l4.45,7.68L8.9,28.4H5.72V24.69c0-1.28,1.4-2.43,3.18-2.43s3.18,1.15,3.18,2.43V36h2.54V24.69c0-2.69-2.54-5-5.72-5S3.18,22,3.18,24.69Z"
+            />
+            <!-- 特殊车道类型 -->
+            <path
+              id="sideroad"
+              v-if="Data.controltype === 1"
+              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
+              d="M21,70.57l-6,0c3-2.65,5.45-7.64,4.46-10.93-1.15-3.29-4.61-6.34-11.68-7.56C11.58,52.24,28.28,53.72,21,70.57ZM8,52.34c5.73,1.48,9.54,4.41,9.39,8.39-.22,3.66-4.22,8.3-6.29,9.91-5.85,0-6.87,0-6.87,0S23,57.56,8,52.34Z"
+            />
+            <path
+              id="bus-back"
+              v-if="Data.controltype === 3 && Data.flip === true"
+              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
+              d="M8.08,82.61V80.67A3,3,0,0,0,11,77.55a3.08,3.08,0,0,0-2.87-3.11V58.22A3,3,0,0,0,11,55.1,3.08,3.08,0,0,0,8.08,52V46.15a.74.74,0,0,1,.75-.78h4.24l.5,1h3.74a2.28,2.28,0,0,1,2.25,2.33V84.69a4.18,4.18,0,0,1-4,4.67H9.7C9.33,87.94,8.58,84.43,8.08,82.61Zm9.86-32v-1.3a.73.73,0,0,0-.75-.77H10.08a.73.73,0,0,0-.75.77v1.17a.73.73,0,0,0,.75.78l7.11.13A.74.74,0,0,0,17.94,50.56Zm-.5,9.86a.67.67,0,0,0,.62-.64V53.42a.68.68,0,0,0-.62-.65H14.82a.69.69,0,0,0-.63.65v6.36a.68.68,0,0,0,.63.64Zm0,8.7a.68.68,0,0,0,.62-.65V62.11a.68.68,0,0,0-.62-.65H14.82a.69.69,0,0,0-.63.65v6.36a.69.69,0,0,0,.63.65Zm0,8.82a.68.68,0,0,0,.62-.65V70.81a.68.68,0,0,0-.62-.65H14.82a.69.69,0,0,0-.63.65v6.48a.69.69,0,0,0,.63.65Zm0,8.83a.68.68,0,0,0,.62-.65V79.76a.68.68,0,0,0-.62-.65H14.82a.69.69,0,0,0-.63.65v6.36a.69.69,0,0,0,.63.65ZM10.08,55.23a2.47,2.47,0,0,1-2.25,2.34,2.34,2.34,0,1,1,2.25-2.34Zm-3.87,0a1.76,1.76,0,0,0,1.62,1.69,1.68,1.68,0,0,0,1.62-1.69,1.53,1.53,0,0,0-1.62-1.68A1.68,1.68,0,0,0,6.21,55.23Zm3.87,22.45a2.25,2.25,0,1,1-2.25-2.33A2.29,2.29,0,0,1,10.08,77.68Zm-3.87,0a1.78,1.78,0,0,0,1.62,1.69,1.69,1.69,0,0,0,0-3.37A1.68,1.68,0,0,0,6.21,77.68Z"
+            />
+            <path
+              id="bus-front"
+              v-if="Data.controltype === 3 && Data.flip === false"
+              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
+              d="M19.43,82.59v-2a3,3,0,0,1-2.87-3.11,3.09,3.09,0,0,1,2.87-3.12V58.19a3,3,0,0,1-2.87-3.11A3.09,3.09,0,0,1,19.43,52V46.12a.73.73,0,0,0-.75-.77H14.44l-.5,1H10.2A2.28,2.28,0,0,0,8,48.72v36a4.18,4.18,0,0,0,4,4.67h5.86C18.19,87.91,18.93,84.41,19.43,82.59ZM9.58,50.54v-1.3a.73.73,0,0,1,.75-.78h7.11a.74.74,0,0,1,.75.78v1.17a.74.74,0,0,1-.75.78l-7.11.12A.73.73,0,0,1,9.58,50.54Zm.5,9.86a.69.69,0,0,1-.63-.65V53.39a.69.69,0,0,1,.63-.65H12.7a.68.68,0,0,1,.62.65v6.36a.68.68,0,0,1-.62.65Zm0,8.69a.68.68,0,0,1-.63-.65V62.09a.69.69,0,0,1,.63-.65H12.7a.68.68,0,0,1,.62.65v6.35a.67.67,0,0,1-.62.65Zm0,8.83a.69.69,0,0,1-.63-.65V70.78a.69.69,0,0,1,.63-.65H12.7a.68.68,0,0,1,.62.65v6.49a.68.68,0,0,1-.62.65Zm0,8.82a.68.68,0,0,1-.63-.64V79.74a.69.69,0,0,1,.63-.65H12.7a.68.68,0,0,1,.62.65V86.1a.68.68,0,0,1-.62.64Zm7.36-31.53a2.46,2.46,0,0,0,2.24,2.33,2.34,2.34,0,1,0-2.24-2.33Zm3.86,0a1.76,1.76,0,0,1-1.62,1.69,1.68,1.68,0,0,1-1.62-1.69,1.54,1.54,0,0,1,1.62-1.69A1.68,1.68,0,0,1,21.3,55.21ZM17.44,77.66a2.25,2.25,0,1,0,2.24-2.34A2.28,2.28,0,0,0,17.44,77.66Zm3.86,0a1.78,1.78,0,0,1-1.62,1.69,1.69,1.69,0,1,1,1.62-1.69Z"
+            />
+            <path
+              id="brt-front"
+              v-if="Data.controltype === 4 && Data.flip === false"
+              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
+              d="M8.94,49.63H19.73v2.12H8.94v3.13H6.74V46.51h2.2Zm8.25,8,2.54-1.28v2.54L16.9,60.43A18.2,18.2,0,0,0,15,61.56a1.78,1.78,0,0,0-.53.63,2.83,2.83,0,0,0-.14,1.07v.43h5.42v2.13h-13V61.34a6.2,6.2,0,0,1,.35-2.45,2.65,2.65,0,0,1,1.22-1.21,4.16,4.16,0,0,1,2.06-.48,3.85,3.85,0,0,1,2.46.73A3.19,3.19,0,0,1,14,60a5.56,5.56,0,0,1,1.08-1.13A15.89,15.89,0,0,1,17.19,57.63Zm-5.6,2a2,2,0,0,0-1-.25,1.85,1.85,0,0,0-1,.25A1.2,1.2,0,0,0,9,60.3,8,8,0,0,0,8.94,62v1.66h3.29V62.12a8.28,8.28,0,0,0-.12-1.84A1.2,1.2,0,0,0,11.59,59.64ZM14,69.23a3.49,3.49,0,0,1,2-.53,4.11,4.11,0,0,1,2.4.67A2.8,2.8,0,0,1,19.57,71a16.84,16.84,0,0,1,.16,3v3.58h-13V73.3a6.54,6.54,0,0,1,.32-2.43,2.66,2.66,0,0,1,1.13-1.18A3.46,3.46,0,0,1,10,69.21a3.45,3.45,0,0,1,1.7.41,2.76,2.76,0,0,1,1.12,1.07A2.78,2.78,0,0,1,14,69.23Zm-4.54,2.3a1.06,1.06,0,0,0-.45.61,12.39,12.39,0,0,0-.09,2V75.4h3V74a14.58,14.58,0,0,0-.05-1.56,1.32,1.32,0,0,0-.46-.85,1.56,1.56,0,0,0-1-.31A1.65,1.65,0,0,0,9.44,71.53Zm5.35-.37a1.29,1.29,0,0,0-.57.71,6.86,6.86,0,0,0-.15,1.81V75.4h3.46v-2a6.1,6.1,0,0,0-.14-1.67,1.23,1.23,0,0,0-.54-.62,1.84,1.84,0,0,0-1-.25A1.85,1.85,0,0,0,14.79,71.16Z"
+            />
+            <path
+              id="brt-back"
+              v-if="Data.controltype === 4 && Data.flip === true"
+              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
+              d="M17.88,77.55H7.09V75.43H17.88V72.3h2.19v8.37H17.88Zm-8.26-8L7.09,70.83V68.29l2.83-1.54a16.63,16.63,0,0,0,1.91-1.13,1.53,1.53,0,0,0,.53-.63,2.79,2.79,0,0,0,.15-1.07v-.43H7.09V61.36h13v4.48a6.11,6.11,0,0,1-.35,2.46,2.65,2.65,0,0,1-1.21,1.2,4.17,4.17,0,0,1-2.07.48A3.9,3.9,0,0,1,14,69.26a3.24,3.24,0,0,1-1.17-2.06,5.11,5.11,0,0,1-1.09,1.13A14.26,14.26,0,0,1,9.62,69.55Zm5.61-2a1.86,1.86,0,0,0,1,.25,1.73,1.73,0,0,0,1-.25,1.21,1.21,0,0,0,.52-.66,8.72,8.72,0,0,0,.1-1.73V63.49h-3.3v1.57a8.05,8.05,0,0,0,.13,1.84A1.16,1.16,0,0,0,15.23,67.54ZM12.84,58a3.54,3.54,0,0,1-2,.53,4.1,4.1,0,0,1-2.39-.67,2.76,2.76,0,0,1-1.21-1.6,15.86,15.86,0,0,1-.16-3V49.66h13v4.22a6.59,6.59,0,0,1-.31,2.43,2.71,2.71,0,0,1-1.13,1.18,3.71,3.71,0,0,1-3.52.07A2.64,2.64,0,0,1,14,56.49,2.88,2.88,0,0,1,12.84,58Zm4.54-2.3a1,1,0,0,0,.44-.61,12.39,12.39,0,0,0,.09-2V51.78h-3v1.4c0,.84,0,1.36,0,1.56a1.33,1.33,0,0,0,.47.85,1.53,1.53,0,0,0,1,.31A1.66,1.66,0,0,0,17.38,55.65ZM12,56a1.37,1.37,0,0,0,.56-.72,6.32,6.32,0,0,0,.16-1.81V51.78H9.29v2a6.21,6.21,0,0,0,.13,1.66A1.19,1.19,0,0,0,10,56a1.88,1.88,0,0,0,1,.25A1.94,1.94,0,0,0,12,56Z"
+            />
+            <path
+              id="rail-back"
+              v-if="Data.controltype === 5 && Data.flip === true"
+              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
+              d="M4.74,88V44.25a.81.81,0,0,1,.63-.64.69.69,0,0,1,.65.64V88a.69.69,0,0,1-.65.64A.68.68,0,0,1,4.74,88Zm2.81-1.8V47.85c-.38-1.41,2.05-2.44,3.33-2.44a8,8,0,0,1,7.92,8v4.11l.64-1c0-.13.13-.13.39-.13s.13.13.38.13l1.54,4a.78.78,0,0,1-.13.52.74.74,0,0,1-.51-.13l-1.28-3.35-.77,1.29V86.17a.74.74,0,0,1-.77.77h-10A.74.74,0,0,1,7.55,86.17ZM15,53a1.1,1.1,0,0,0,1-1,2.9,2.9,0,0,0-2.94-3H9.47a.9.9,0,0,0-1,.9V52a1.1,1.1,0,0,0,1,1Zm.38,5a.69.69,0,0,0,.64-.64V55.18a.68.68,0,0,0-.64-.64H12.54v.13a.68.68,0,0,0-.64.64v2.06a.69.69,0,0,0,.64.64Zm0,3.86a.69.69,0,0,0,.64-.65v-2a.69.69,0,0,0-.64-.65H12.54a.69.69,0,0,0-.64.65v2a.69.69,0,0,0,.64.65Zm0,4a.68.68,0,0,0,.64-.64V63.15a.69.69,0,0,0-.64-.64H12.54a.68.68,0,0,0-.64.64v2.06a.69.69,0,0,0,.64.64Zm0,4.24a.68.68,0,0,0,.64-.64V67.39a.69.69,0,0,0-.64-.64H12.54a.69.69,0,0,0-.64.64v2.06a.68.68,0,0,0,.64.64Zm0,4a.69.69,0,0,0,.64-.64V71.38a.68.68,0,0,0-.64-.64H12.54a.68.68,0,0,0-.64.64v2.06a.69.69,0,0,0,.64.64Zm0,3.73a.69.69,0,0,0,.64-.64V75.24a.69.69,0,0,0-.64-.65H12.54a.52.52,0,0,0-.64.52v2.06a.69.69,0,0,0,.64.64Zm0,4.37a.69.69,0,0,0,.64-.64V79.48a.68.68,0,0,0-.64-.64H12.54a.68.68,0,0,0-.64.64v2.06a.69.69,0,0,0,.64.64Zm0,3.86a.69.69,0,0,0,.64-.65v-2a.69.69,0,0,0-.64-.65H12.54a.69.69,0,0,0-.64.65v2a.69.69,0,0,0,.64.65Z"
+            />
+            <path
+              id="rail-front"
+              v-if="Data.controltype === 5 && Data.flip === false"
+              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
+              d="M22,88V44.3a.84.84,0,0,0-.64-.64.69.69,0,0,0-.64.64V88a.69.69,0,0,0,.64.64A.69.69,0,0,0,22,88Zm-2.82-1.8V47.9c.39-1.41-2-2.44-3.32-2.44a8,8,0,0,0-7.93,8v4.12l-.64-1c0-.13-.13-.13-.38-.13s-.13.13-.39.13L5,60.5A.78.78,0,0,0,5.1,61a.77.77,0,0,0,.51-.13l1.28-3.34.76,1.28V86.22a.74.74,0,0,0,.77.77h10A.74.74,0,0,0,19.16,86.22ZM11.75,53.05a1.11,1.11,0,0,1-1-1,2.91,2.91,0,0,1,2.94-3h3.59a.91.91,0,0,1,1,.9V52a1.11,1.11,0,0,1-1,1Zm-.39,5a.69.69,0,0,1-.64-.64V55.23a.69.69,0,0,1,.64-.64h2.82v.13a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Zm0,3.86a.69.69,0,0,1-.64-.65V59.22a.7.7,0,0,1,.64-.65h2.82a.69.69,0,0,1,.64.65v2.05a.7.7,0,0,1-.64.65Zm0,4a.69.69,0,0,1-.64-.64V63.2a.69.69,0,0,1,.64-.64h2.82a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Zm0,4.25a.69.69,0,0,1-.64-.65v-2a.7.7,0,0,1,.64-.65h2.82a.69.69,0,0,1,.64.65v2a.7.7,0,0,1-.64.65Zm0,4a.69.69,0,0,1-.64-.64V71.43a.69.69,0,0,1,.64-.64h2.82a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Zm0,3.73a.69.69,0,0,1-.64-.64V75.29a.69.69,0,0,1,.64-.64h2.82a.51.51,0,0,1,.64.51v2.06a.69.69,0,0,1-.64.64Zm0,4.37a.69.69,0,0,1-.64-.64V79.53a.69.69,0,0,1,.64-.64h2.82a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Zm0,3.86a.69.69,0,0,1-.64-.64V83.39a.69.69,0,0,1,.64-.64h2.82a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Z"
+            />
+            <path
+              id="bike-back"
+              v-if="Data.controltype === 6 && Data.flip === true"
+              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
+              d="M15.38,69.56a4.48,4.48,0,0,0-.17-1.21l2.41-1.14,1.17.46v.68a.7.7,0,0,0,.22.5.74.74,0,0,0,.51.2.71.71,0,0,0,.72-.71v-2.9a.71.71,0,0,0-.21-.5.75.75,0,0,0-.52-.2.72.72,0,0,0-.72.7v.71L18.38,66v-6.9l.76.24c.14.05.34.18.34.29v1.21a.72.72,0,0,0,.73.71.71.71,0,0,0,.72-.71V59.62A1.83,1.83,0,0,0,19.59,58l-4.26-1.32a5.06,5.06,0,0,0,.05-.68,4.57,4.57,0,0,0-4.63-4.5,4.51,4.51,0,1,0,0,9A4.67,4.67,0,0,0,14.89,58l.65.2L10.3,63.33h0l0,0a.49.49,0,0,0-.07.11.25.25,0,0,0,0,.07l.23.08h0l-.25,0a.76.76,0,0,0,0,.15v1.33a4.5,4.5,0,0,0,.6,9,4.57,4.57,0,0,0,4.63-4.5Zm1.55-4.15-4.77-1.9,4.77-4.66ZM11.6,66.58a3.17,3.17,0,0,1,1.68,1.11l-1.69.8Zm3,.49a4.59,4.59,0,0,0-3-1.94V64.8l4.23,1.69Zm-4.46,2.55a.7.7,0,0,0,.34.59.75.75,0,0,0,.71,0L13.87,69a2.86,2.86,0,0,1,.06.58,3.19,3.19,0,0,1-6.37,0,3.11,3.11,0,0,1,2.59-3Zm.72-14.33a.7.7,0,0,0-.55.05.69.69,0,0,0,.11,1.29l3.06.95a3.22,3.22,0,0,1-2.73,1.51A3.1,3.1,0,1,1,13.93,56a2.18,2.18,0,0,1,0,.25Z"
+            />
+            <path
+              id="bike-front"
+              v-if="Data.controltype === 6 && Data.flip === false"
+              :fill="chooseIndex === Data.index ? highlightColor : defaultColor"
+              d="M11.7,69.61a4.23,4.23,0,0,1,.17-1.22L9.44,67.25l-1.17.46v.68a.67.67,0,0,1-.21.5.73.73,0,0,1-1.24-.5V65.47A.71.71,0,0,1,7,65a.77.77,0,0,1,.52-.2.71.71,0,0,1,.72.71v.7L8.68,66V59.1l-.76.23c-.14.05-.35.18-.35.29v1.22a.72.72,0,0,1-.73.71.71.71,0,0,1-.72-.71V59.62A1.83,1.83,0,0,1,7.46,58l4.29-1.33A3.82,3.82,0,0,1,11.7,56a4.65,4.65,0,1,1,4.65,4.53A4.69,4.69,0,0,1,12.19,58l-.66.2,5.27,5.14h0l0,0a.75.75,0,0,1,.07.12s0,0,0,.06l-.23.09h0l.25,0a.61.61,0,0,1,0,.14v1.34a4.54,4.54,0,1,1-5.25,4.49Zm-1.56-4.17,4.79-1.91-4.79-4.68Zm5.35,1.17a3.27,3.27,0,0,0-1.69,1.13l1.7.8Zm-3,.5a4.64,4.64,0,0,1,3-2v-.33l-4.24,1.7ZM17,69.67a.7.7,0,0,1-.34.6.73.73,0,0,1-.7,0L13.21,69a2.86,2.86,0,0,0-.06.58A3.2,3.2,0,1,0,17,66.55Zm-.72-14.39a.77.77,0,0,1,.56,0,.74.74,0,0,1,.36.42.71.71,0,0,1-.48.89l-3.06.94a3.21,3.21,0,0,0,2.74,1.52A3.11,3.11,0,1,0,13.15,56a2.18,2.18,0,0,0,0,.25Z"
+            />
+          </g>
+        </g>
+        <!-- 展示相位图标 -->
+        <g v-if="UsageMode === 'show'">
+          <g v-for="(name, index) in iconnameArr" :key="index">
+            <path
+              id="直行"
+              :class="name === '直行' ? '' : 'invisible'"
+              :fill="FlashColor ? FlashColor : (Data.color ? Data.color : showDefaultColor)"
+              d="M15,36H12.35V7.7H9.09L13.65,0l4.43,7.7H15V36H12.35"
+            ></path>
+            <path
+              id="左转"
+              :class="name === '左转' ? '' : 'invisible'"
+              :fill="FlashColor ? FlashColor : (Data.color ? Data.color : showDefaultColor)"
+              d="M12.55,17.69V36h2.54V17.56a5,5,0,0,0-4.83-5L7.85,12.2,8.23,9,.09,12.45,7,18l.38-3.2,2.8.39a2.61,2.61,0,0,1,2.41,2.55Zm0,0V36h2.54V17.56M12.55,36h2.54m-2.54-4.28V36h2.54V31.72"
+            ></path>
+            <path
+              id="右转"
+              :class="name === '右转' ? '' : 'invisible'"
+              :fill="FlashColor ? FlashColor : (Data.color ? Data.color : showDefaultColor)"
+              d="M14.61,17.69V36H12.07V17.56a5,5,0,0,1,4.83-5l2.41-.38L18.93,9l8.14,3.44L20.2,18l-.38-3.2-2.8.39a2.61,2.61,0,0,0-2.41,2.55Zm0-.13V36H12.07V17.44M14.61,36H12.07m2.54,0H12.07V31.72"
+            ></path>
+            <path
+              id="掉头"
+              :class="name === '掉头' ? '' : 'invisible'"
+              :fill="FlashColor ? FlashColor : (Data.color ? Data.color : showDefaultColor)"
+              d="M12.08,36h2.54m-2.54,0h2.54m-2.54,0h2.54M3.18,24.69V28.4H0l4.45,7.68L8.9,28.4H5.72V24.69c0-1.28,1.4-2.43,3.18-2.43s3.18,1.15,3.18,2.43V36h2.54V24.69c0-2.69-2.54-5-5.72-5S3.18,22,3.18,24.69Z"
+            ></path>
+          </g>
+          <g>
+            <!-- 特殊车道类型 -->
+            <path
+              v-if="Data.controltype === 3 && Data.flip === true"
+              :fill="showDefaultColor"
+              d="M8.08,82.61V80.67A3,3,0,0,0,11,77.55a3.08,3.08,0,0,0-2.87-3.11V58.22A3,3,0,0,0,11,55.1,3.08,3.08,0,0,0,8.08,52V46.15a.74.74,0,0,1,.75-.78h4.24l.5,1h3.74a2.28,2.28,0,0,1,2.25,2.33V84.69a4.18,4.18,0,0,1-4,4.67H9.7C9.33,87.94,8.58,84.43,8.08,82.61Zm9.86-32v-1.3a.73.73,0,0,0-.75-.77H10.08a.73.73,0,0,0-.75.77v1.17a.73.73,0,0,0,.75.78l7.11.13A.74.74,0,0,0,17.94,50.56Zm-.5,9.86a.67.67,0,0,0,.62-.64V53.42a.68.68,0,0,0-.62-.65H14.82a.69.69,0,0,0-.63.65v6.36a.68.68,0,0,0,.63.64Zm0,8.7a.68.68,0,0,0,.62-.65V62.11a.68.68,0,0,0-.62-.65H14.82a.69.69,0,0,0-.63.65v6.36a.69.69,0,0,0,.63.65Zm0,8.82a.68.68,0,0,0,.62-.65V70.81a.68.68,0,0,0-.62-.65H14.82a.69.69,0,0,0-.63.65v6.48a.69.69,0,0,0,.63.65Zm0,8.83a.68.68,0,0,0,.62-.65V79.76a.68.68,0,0,0-.62-.65H14.82a.69.69,0,0,0-.63.65v6.36a.69.69,0,0,0,.63.65ZM10.08,55.23a2.47,2.47,0,0,1-2.25,2.34,2.34,2.34,0,1,1,2.25-2.34Zm-3.87,0a1.76,1.76,0,0,0,1.62,1.69,1.68,1.68,0,0,0,1.62-1.69,1.53,1.53,0,0,0-1.62-1.68A1.68,1.68,0,0,0,6.21,55.23Zm3.87,22.45a2.25,2.25,0,1,1-2.25-2.33A2.29,2.29,0,0,1,10.08,77.68Zm-3.87,0a1.78,1.78,0,0,0,1.62,1.69,1.69,1.69,0,0,0,0-3.37A1.68,1.68,0,0,0,6.21,77.68Z"
+              id="bus-back"
+            ></path>
+            <path
+              v-if="Data.controltype === 3 && Data.flip === false"
+              :fill="showDefaultColor"
+              d="M19.43,82.59v-2a3,3,0,0,1-2.87-3.11,3.09,3.09,0,0,1,2.87-3.12V58.19a3,3,0,0,1-2.87-3.11A3.09,3.09,0,0,1,19.43,52V46.12a.73.73,0,0,0-.75-.77H14.44l-.5,1H10.2A2.28,2.28,0,0,0,8,48.72v36a4.18,4.18,0,0,0,4,4.67h5.86C18.19,87.91,18.93,84.41,19.43,82.59ZM9.58,50.54v-1.3a.73.73,0,0,1,.75-.78h7.11a.74.74,0,0,1,.75.78v1.17a.74.74,0,0,1-.75.78l-7.11.12A.73.73,0,0,1,9.58,50.54Zm.5,9.86a.69.69,0,0,1-.63-.65V53.39a.69.69,0,0,1,.63-.65H12.7a.68.68,0,0,1,.62.65v6.36a.68.68,0,0,1-.62.65Zm0,8.69a.68.68,0,0,1-.63-.65V62.09a.69.69,0,0,1,.63-.65H12.7a.68.68,0,0,1,.62.65v6.35a.67.67,0,0,1-.62.65Zm0,8.83a.69.69,0,0,1-.63-.65V70.78a.69.69,0,0,1,.63-.65H12.7a.68.68,0,0,1,.62.65v6.49a.68.68,0,0,1-.62.65Zm0,8.82a.68.68,0,0,1-.63-.64V79.74a.69.69,0,0,1,.63-.65H12.7a.68.68,0,0,1,.62.65V86.1a.68.68,0,0,1-.62.64Zm7.36-31.53a2.46,2.46,0,0,0,2.24,2.33,2.34,2.34,0,1,0-2.24-2.33Zm3.86,0a1.76,1.76,0,0,1-1.62,1.69,1.68,1.68,0,0,1-1.62-1.69,1.54,1.54,0,0,1,1.62-1.69A1.68,1.68,0,0,1,21.3,55.21ZM17.44,77.66a2.25,2.25,0,1,0,2.24-2.34A2.28,2.28,0,0,0,17.44,77.66Zm3.86,0a1.78,1.78,0,0,1-1.62,1.69,1.69,1.69,0,1,1,1.62-1.69Z"
+              id="bus-front"
+            ></path>
+            <path
+              v-if="Data.controltype === 4 && Data.flip === false"
+              :fill="showDefaultColor"
+              d="M8.94,49.63H19.73v2.12H8.94v3.13H6.74V46.51h2.2Zm8.25,8,2.54-1.28v2.54L16.9,60.43A18.2,18.2,0,0,0,15,61.56a1.78,1.78,0,0,0-.53.63,2.83,2.83,0,0,0-.14,1.07v.43h5.42v2.13h-13V61.34a6.2,6.2,0,0,1,.35-2.45,2.65,2.65,0,0,1,1.22-1.21,4.16,4.16,0,0,1,2.06-.48,3.85,3.85,0,0,1,2.46.73A3.19,3.19,0,0,1,14,60a5.56,5.56,0,0,1,1.08-1.13A15.89,15.89,0,0,1,17.19,57.63Zm-5.6,2a2,2,0,0,0-1-.25,1.85,1.85,0,0,0-1,.25A1.2,1.2,0,0,0,9,60.3,8,8,0,0,0,8.94,62v1.66h3.29V62.12a8.28,8.28,0,0,0-.12-1.84A1.2,1.2,0,0,0,11.59,59.64ZM14,69.23a3.49,3.49,0,0,1,2-.53,4.11,4.11,0,0,1,2.4.67A2.8,2.8,0,0,1,19.57,71a16.84,16.84,0,0,1,.16,3v3.58h-13V73.3a6.54,6.54,0,0,1,.32-2.43,2.66,2.66,0,0,1,1.13-1.18A3.46,3.46,0,0,1,10,69.21a3.45,3.45,0,0,1,1.7.41,2.76,2.76,0,0,1,1.12,1.07A2.78,2.78,0,0,1,14,69.23Zm-4.54,2.3a1.06,1.06,0,0,0-.45.61,12.39,12.39,0,0,0-.09,2V75.4h3V74a14.58,14.58,0,0,0-.05-1.56,1.32,1.32,0,0,0-.46-.85,1.56,1.56,0,0,0-1-.31A1.65,1.65,0,0,0,9.44,71.53Zm5.35-.37a1.29,1.29,0,0,0-.57.71,6.86,6.86,0,0,0-.15,1.81V75.4h3.46v-2a6.1,6.1,0,0,0-.14-1.67,1.23,1.23,0,0,0-.54-.62,1.84,1.84,0,0,0-1-.25A1.85,1.85,0,0,0,14.79,71.16Z"
+              id="brt-front"
+            ></path>
+            <path
+              v-if="Data.controltype === 4 && Data.flip === true"
+              :fill="showDefaultColor"
+              d="M17.88,77.55H7.09V75.43H17.88V72.3h2.19v8.37H17.88Zm-8.26-8L7.09,70.83V68.29l2.83-1.54a16.63,16.63,0,0,0,1.91-1.13,1.53,1.53,0,0,0,.53-.63,2.79,2.79,0,0,0,.15-1.07v-.43H7.09V61.36h13v4.48a6.11,6.11,0,0,1-.35,2.46,2.65,2.65,0,0,1-1.21,1.2,4.17,4.17,0,0,1-2.07.48A3.9,3.9,0,0,1,14,69.26a3.24,3.24,0,0,1-1.17-2.06,5.11,5.11,0,0,1-1.09,1.13A14.26,14.26,0,0,1,9.62,69.55Zm5.61-2a1.86,1.86,0,0,0,1,.25,1.73,1.73,0,0,0,1-.25,1.21,1.21,0,0,0,.52-.66,8.72,8.72,0,0,0,.1-1.73V63.49h-3.3v1.57a8.05,8.05,0,0,0,.13,1.84A1.16,1.16,0,0,0,15.23,67.54ZM12.84,58a3.54,3.54,0,0,1-2,.53,4.1,4.1,0,0,1-2.39-.67,2.76,2.76,0,0,1-1.21-1.6,15.86,15.86,0,0,1-.16-3V49.66h13v4.22a6.59,6.59,0,0,1-.31,2.43,2.71,2.71,0,0,1-1.13,1.18,3.71,3.71,0,0,1-3.52.07A2.64,2.64,0,0,1,14,56.49,2.88,2.88,0,0,1,12.84,58Zm4.54-2.3a1,1,0,0,0,.44-.61,12.39,12.39,0,0,0,.09-2V51.78h-3v1.4c0,.84,0,1.36,0,1.56a1.33,1.33,0,0,0,.47.85,1.53,1.53,0,0,0,1,.31A1.66,1.66,0,0,0,17.38,55.65ZM12,56a1.37,1.37,0,0,0,.56-.72,6.32,6.32,0,0,0,.16-1.81V51.78H9.29v2a6.21,6.21,0,0,0,.13,1.66A1.19,1.19,0,0,0,10,56a1.88,1.88,0,0,0,1,.25A1.94,1.94,0,0,0,12,56Z"
+              id="brt-back"
+            ></path>
+            <path
+              v-if="Data.controltype === 5 && Data.flip === true"
+              :fill="showDefaultColor"
+              d="M4.74,88V44.25a.81.81,0,0,1,.63-.64.69.69,0,0,1,.65.64V88a.69.69,0,0,1-.65.64A.68.68,0,0,1,4.74,88Zm2.81-1.8V47.85c-.38-1.41,2.05-2.44,3.33-2.44a8,8,0,0,1,7.92,8v4.11l.64-1c0-.13.13-.13.39-.13s.13.13.38.13l1.54,4a.78.78,0,0,1-.13.52.74.74,0,0,1-.51-.13l-1.28-3.35-.77,1.29V86.17a.74.74,0,0,1-.77.77h-10A.74.74,0,0,1,7.55,86.17ZM15,53a1.1,1.1,0,0,0,1-1,2.9,2.9,0,0,0-2.94-3H9.47a.9.9,0,0,0-1,.9V52a1.1,1.1,0,0,0,1,1Zm.38,5a.69.69,0,0,0,.64-.64V55.18a.68.68,0,0,0-.64-.64H12.54v.13a.68.68,0,0,0-.64.64v2.06a.69.69,0,0,0,.64.64Zm0,3.86a.69.69,0,0,0,.64-.65v-2a.69.69,0,0,0-.64-.65H12.54a.69.69,0,0,0-.64.65v2a.69.69,0,0,0,.64.65Zm0,4a.68.68,0,0,0,.64-.64V63.15a.69.69,0,0,0-.64-.64H12.54a.68.68,0,0,0-.64.64v2.06a.69.69,0,0,0,.64.64Zm0,4.24a.68.68,0,0,0,.64-.64V67.39a.69.69,0,0,0-.64-.64H12.54a.69.69,0,0,0-.64.64v2.06a.68.68,0,0,0,.64.64Zm0,4a.69.69,0,0,0,.64-.64V71.38a.68.68,0,0,0-.64-.64H12.54a.68.68,0,0,0-.64.64v2.06a.69.69,0,0,0,.64.64Zm0,3.73a.69.69,0,0,0,.64-.64V75.24a.69.69,0,0,0-.64-.65H12.54a.52.52,0,0,0-.64.52v2.06a.69.69,0,0,0,.64.64Zm0,4.37a.69.69,0,0,0,.64-.64V79.48a.68.68,0,0,0-.64-.64H12.54a.68.68,0,0,0-.64.64v2.06a.69.69,0,0,0,.64.64Zm0,3.86a.69.69,0,0,0,.64-.65v-2a.69.69,0,0,0-.64-.65H12.54a.69.69,0,0,0-.64.65v2a.69.69,0,0,0,.64.65Z"
+              id="rail-back"
+            ></path>
+            <path
+              v-if="Data.controltype === 5 && Data.flip === false"
+              :fill="showDefaultColor"
+              d="M22,88V44.3a.84.84,0,0,0-.64-.64.69.69,0,0,0-.64.64V88a.69.69,0,0,0,.64.64A.69.69,0,0,0,22,88Zm-2.82-1.8V47.9c.39-1.41-2-2.44-3.32-2.44a8,8,0,0,0-7.93,8v4.12l-.64-1c0-.13-.13-.13-.38-.13s-.13.13-.39.13L5,60.5A.78.78,0,0,0,5.1,61a.77.77,0,0,0,.51-.13l1.28-3.34.76,1.28V86.22a.74.74,0,0,0,.77.77h10A.74.74,0,0,0,19.16,86.22ZM11.75,53.05a1.11,1.11,0,0,1-1-1,2.91,2.91,0,0,1,2.94-3h3.59a.91.91,0,0,1,1,.9V52a1.11,1.11,0,0,1-1,1Zm-.39,5a.69.69,0,0,1-.64-.64V55.23a.69.69,0,0,1,.64-.64h2.82v.13a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Zm0,3.86a.69.69,0,0,1-.64-.65V59.22a.7.7,0,0,1,.64-.65h2.82a.69.69,0,0,1,.64.65v2.05a.7.7,0,0,1-.64.65Zm0,4a.69.69,0,0,1-.64-.64V63.2a.69.69,0,0,1,.64-.64h2.82a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Zm0,4.25a.69.69,0,0,1-.64-.65v-2a.7.7,0,0,1,.64-.65h2.82a.69.69,0,0,1,.64.65v2a.7.7,0,0,1-.64.65Zm0,4a.69.69,0,0,1-.64-.64V71.43a.69.69,0,0,1,.64-.64h2.82a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Zm0,3.73a.69.69,0,0,1-.64-.64V75.29a.69.69,0,0,1,.64-.64h2.82a.51.51,0,0,1,.64.51v2.06a.69.69,0,0,1-.64.64Zm0,4.37a.69.69,0,0,1-.64-.64V79.53a.69.69,0,0,1,.64-.64h2.82a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Zm0,3.86a.69.69,0,0,1-.64-.64V83.39a.69.69,0,0,1,.64-.64h2.82a.69.69,0,0,1,.64.64v2.06a.69.69,0,0,1-.64.64Z"
+              id="rail-front"
+            ></path>
+            <path
+              v-if="Data.controltype === 6 && Data.flip === true"
+              :fill="showDefaultColor"
+              d="M15.38,69.56a4.48,4.48,0,0,0-.17-1.21l2.41-1.14,1.17.46v.68a.7.7,0,0,0,.22.5.74.74,0,0,0,.51.2.71.71,0,0,0,.72-.71v-2.9a.71.71,0,0,0-.21-.5.75.75,0,0,0-.52-.2.72.72,0,0,0-.72.7v.71L18.38,66v-6.9l.76.24c.14.05.34.18.34.29v1.21a.72.72,0,0,0,.73.71.71.71,0,0,0,.72-.71V59.62A1.83,1.83,0,0,0,19.59,58l-4.26-1.32a5.06,5.06,0,0,0,.05-.68,4.57,4.57,0,0,0-4.63-4.5,4.51,4.51,0,1,0,0,9A4.67,4.67,0,0,0,14.89,58l.65.2L10.3,63.33h0l0,0a.49.49,0,0,0-.07.11.25.25,0,0,0,0,.07l.23.08h0l-.25,0a.76.76,0,0,0,0,.15v1.33a4.5,4.5,0,0,0,.6,9,4.57,4.57,0,0,0,4.63-4.5Zm1.55-4.15-4.77-1.9,4.77-4.66ZM11.6,66.58a3.17,3.17,0,0,1,1.68,1.11l-1.69.8Zm3,.49a4.59,4.59,0,0,0-3-1.94V64.8l4.23,1.69Zm-4.46,2.55a.7.7,0,0,0,.34.59.75.75,0,0,0,.71,0L13.87,69a2.86,2.86,0,0,1,.06.58,3.19,3.19,0,0,1-6.37,0,3.11,3.11,0,0,1,2.59-3Zm.72-14.33a.7.7,0,0,0-.55.05.69.69,0,0,0,.11,1.29l3.06.95a3.22,3.22,0,0,1-2.73,1.51A3.1,3.1,0,1,1,13.93,56a2.18,2.18,0,0,1,0,.25Z"
+              id="bike-back"
+            ></path>
+            <path
+              v-if="Data.controltype === 6 && Data.flip === false"
+              :fill="showDefaultColor"
+              d="M11.7,69.61a4.23,4.23,0,0,1,.17-1.22L9.44,67.25l-1.17.46v.68a.67.67,0,0,1-.21.5.73.73,0,0,1-1.24-.5V65.47A.71.71,0,0,1,7,65a.77.77,0,0,1,.52-.2.71.71,0,0,1,.72.71v.7L8.68,66V59.1l-.76.23c-.14.05-.35.18-.35.29v1.22a.72.72,0,0,1-.73.71.71.71,0,0,1-.72-.71V59.62A1.83,1.83,0,0,1,7.46,58l4.29-1.33A3.82,3.82,0,0,1,11.7,56a4.65,4.65,0,1,1,4.65,4.53A4.69,4.69,0,0,1,12.19,58l-.66.2,5.27,5.14h0l0,0a.75.75,0,0,1,.07.12s0,0,0,.06l-.23.09h0l.25,0a.61.61,0,0,1,0,.14v1.34a4.54,4.54,0,1,1-5.25,4.49Zm-1.56-4.17,4.79-1.91-4.79-4.68Zm5.35,1.17a3.27,3.27,0,0,0-1.69,1.13l1.7.8Zm-3,.5a4.64,4.64,0,0,1,3-2v-.33l-4.24,1.7ZM17,69.67a.7.7,0,0,1-.34.6.73.73,0,0,1-.7,0L13.21,69a2.86,2.86,0,0,0-.06.58A3.2,3.2,0,1,0,17,66.55Zm-.72-14.39a.77.77,0,0,1,.56,0,.74.74,0,0,1,.36.42.71.71,0,0,1-.48.89l-3.06.94a3.21,3.21,0,0,0,2.74,1.52A3.11,3.11,0,1,0,13.15,56a2.18,2.18,0,0,0,0,.25Z"
+              id="bike-front"
+            ></path>
+          </g>
+        </g>
+      </svg>
+    </drr>
+  </div>
+</template>
+<script>
+export default {
+  name: 'motor-icon-svg',
+  data () {
+    return {
+      defaultColor: '#fff', // 默认状态颜色
+      highlightColor: '#299BCC', // 选中高亮状态颜色
+      item: {},
+      reset: true,
+      iconnameArr: [],
+      showDefaultColor: '#fff', // 默认状态颜色
+      FlashColor: undefined,
+      GreenColor: '#77fb65',
+      YellowColor: '#f7b500',
+      lastType: ''
+    }
+  },
+  watch: {
+    // item: {
+    //   handler: function (newval, oldval) {
+    //     if (JSON.stringify(oldval) !== '{}') {
+    //       // 更改原数据的位置大小数据
+    //       let data = {
+    //         ...this.Data,
+    //         ...newval
+    //       }
+    //       let fields = Object.keys(newval)
+    //       this.$emit('changeMotorwayItem', data, fields)
+    //     }
+    //   }
+    // },
+    Data: {
+      handler: function (val) {
+        this.iconnameArr = val.icondirename
+        if (this.UsageMode === 'draw') {
+          this.item.x = val.x
+          this.item.y = val.y
+          this.item.angle = val.angle
+        }
+        if (this.UsageMode === 'show') {
+          if (this.lastType === '') {
+          // 绿闪：绿-》灰-》绿 循环效果
+            if (val.type === 4 || val.type === '黄闪') {
+              let highlightColor = ''
+              if (val.type === 4) {
+                highlightColor = this.GreenColor
+              }
+              if (val.type === '黄闪') {
+                highlightColor = this.YellowColor
+              }
+              this.FlashColor = highlightColor
+              this.GreenIntervalId = setInterval(() => {
+                this.FlashColor =
+              !this.FlashColor || this.FlashColor === '#828282'
+                ? highlightColor
+                : '#828282'
+              }, 500)
+              this.lastType = val.type
+            }
+          }
+          if (
+            this.GreenIntervalId &&
+          val.type !== 4 &&
+          val.type !== '黄闪' &&
+          val.type !== this.lastType
+          ) {
+            clearInterval(this.GreenIntervalId)
+            this.FlashColor = undefined
+            this.lastType = ''
+          }
+        }
+      },
+      deep: true
+    }
+    // ,
+    // chooseIndex: {
+    //   handler: function (val) {
+    //     console.log(this.Data)
+    //   }
+    // }
+  },
+  props: {
+    Data: {
+      type: Object
+    },
+    isSeletable: {
+      type: Boolean
+    },
+    chooseIndex: {
+      type: Number
+    },
+    UsageMode: {
+      // 当前图标模式： 绘制draw 展示show
+      type: String,
+      default: 'draw'
+    }
+  },
+  methods: {
+    boxDragStop (origin, final) {
+      this.item = JSON.parse(JSON.stringify(final))
+      this.handleChangeData()
+    },
+    boxResizeStop (origin, final) {
+      this.IconW = final.w + 'px'
+      this.IconH = final.h + 'px'
+      this.resetSvg()
+      this.item = JSON.parse(JSON.stringify(final))
+      this.handleChangeData()
+    },
+    boxRotateStop (origin, final) {
+      this.item = JSON.parse(JSON.stringify(final))
+      // 第四象限的角度是负值（开源组件接口返回），转化为正值便于理解
+      if (this.item.angle < 0) {
+        this.item.angle = this.item.angle + 360
+      }
+      this.handleChangeData()
+    },
+    resetSvg () {
+      this.reset = false
+      this.$nextTick(() => {
+        this.reset = true
+      })
+    },
+    handleSelectIcon () {
+      this.$emit('handleSelectIcon', this.Data)
+    },
+    handleChangeData () {
+      let data = {
+        ...this.Data,
+        ...this.item
+      }
+      let fields = Object.keys(this.item)
+      this.$emit('changeMotorwayItem', data, fields)
+      this.handleSelectIcon()
+    }
+  },
+  created () {
+    this.IconW = this.Data.w
+    this.IconH = this.Data.h
+    this.item = {
+      x: this.Data.x,
+      y: this.Data.y,
+      w: this.Data.w,
+      h: this.Data.h,
+      angle: this.Data.angle
+    }
+  },
+  mounted () {
+    // console.log('motor', this.Data)
+    this.iconnameArr = this.Data.icondirename
+  }
+}
+</script>
+<style scoped>
+.invisible {
+  visibility: hidden;
+}
+</style>