openatc-components 0.2.65 → 0.2.68

package/src/kisscomps/components/IntersectionMap/crossDirection/baseImg/SidewalkClickSvg.vue

@@ -1,1272 +1,1272 @@
-/**
- * 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>
-    <svg
-      :id="Data[0].key"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 252.1 250.2"
-      :width="Width"
-      :height="Height"
-      :style="{position: 'absolute', left: '310px', top: '198px', zIndex: '10'}"
-    >
-      <g
-        id="西行人"
-        direction="2"
-        :class="this.sidewalkDir.indexOf(2) !== -1 ? '' : 'invisible'"
-        :fill="defaultColor"
-      >
-        <g>
-          <rect y="225" class="st0" width="16" height="4"></rect>
-          <rect y="217" class="st0" width="16" height="4"></rect>
-          <rect y="209" class="st0" width="16" height="4"></rect>
-          <rect y="201" class="st0" width="16" height="4"></rect>
-          <rect y="193" class="st0" width="16" height="4"></rect>
-          <rect y="185" class="st0" width="16" height="4"></rect>
-          <rect y="177" class="st0" width="16" height="4"></rect>
-          <rect y="168" class="st0" width="16" height="4"></rect>
-          <rect y="160" class="st0" width="16" height="4"></rect>
-          <rect y="152" class="st0" width="16" height="4"></rect>
-          <rect y="144" class="st0" width="16" height="4"></rect>
-          <rect y="136" class="st0" width="16" height="4"></rect>
-        </g>
-        <g>
-          <rect y="128" class="st0" width="16" height="4"></rect>
-          <rect y="120" class="st0" width="16" height="4"></rect>
-        </g>
-        <g>
-          <rect y="112" class="st0" width="16" height="4"></rect>
-          <rect y="104" class="st0" width="16" height="4"></rect>
-          <rect y="96" class="st0" width="16" height="4"></rect>
-          <rect y="88" class="st0" width="16" height="4"></rect>
-          <rect y="80" class="st0" width="16" height="4"></rect>
-          <rect y="71" class="st0" width="16" height="4"></rect>
-          <rect y="63" class="st0" width="16" height="4"></rect>
-          <rect y="55" class="st0" width="16" height="4"></rect>
-          <rect y="47" class="st0" width="16" height="4"></rect>
-          <rect y="39" class="st0" width="16" height="4"></rect>
-          <rect y="31" class="st0" width="16" height="4"></rect>
-          <rect y="23" class="st0" width="16" height="4"></rect>
-        </g>
-      </g>
-      <g id="西-上下">
-        <g
-          id="西行人下"
-          direction="8"
-          :class="this.sidewalkDir.indexOf(8) !== -1 ? '' : 'invisible'"
-          :fill="defaultColor"
-        >
-          <rect y="225" class="st0" width="16" height="4"></rect>
-          <rect y="217" class="st0" width="16" height="4"></rect>
-          <rect y="209" class="st0" width="16" height="4"></rect>
-          <rect y="201" class="st0" width="16" height="4"></rect>
-          <rect y="193" class="st0" width="16" height="4"></rect>
-          <rect y="185" class="st0" width="16" height="4"></rect>
-          <rect y="177" class="st0" width="16" height="4"></rect>
-          <rect y="168" class="st0" width="16" height="4"></rect>
-          <rect y="160" class="st0" width="16" height="4"></rect>
-          <rect y="152" class="st0" width="16" height="4"></rect>
-          <rect y="144" class="st0" width="16" height="4"></rect>
-          <rect y="136" class="st0" width="16" height="4"></rect>
-        </g>
-        <g
-          id="西行人上"
-          direction="7"
-          :class="this.sidewalkDir.indexOf(7) !== -1 ? '' : 'invisible'"
-          :fill="defaultColor"
-        >
-          <rect y="112" class="st0" width="16" height="4"></rect>
-          <rect y="104" class="st0" width="16" height="4"></rect>
-          <rect y="96" class="st0" width="16" height="4"></rect>
-          <rect y="88" class="st0" width="16" height="4"></rect>
-          <rect y="80" class="st0" width="16" height="4"></rect>
-          <rect y="71" class="st0" width="16" height="4"></rect>
-          <rect y="63" class="st0" width="16" height="4"></rect>
-          <rect y="55" class="st0" width="16" height="4"></rect>
-          <rect y="47" class="st0" width="16" height="4"></rect>
-          <rect y="39" class="st0" width="16" height="4"></rect>
-          <rect y="31" class="st0" width="16" height="4"></rect>
-          <rect y="23" class="st0" width="16" height="4"></rect>
-        </g>
-      </g>
-
-      <g
-        id="东行人"
-        direction="1"
-        :class="this.sidewalkDir.indexOf(1) !== -1 ? '' : 'invisible'"
-        :fill="defaultColor"
-      >
-        <g>
-          <rect x="236" y="225" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="217" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="209" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="201" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="193" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="185" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="177" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="168" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="160" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="152" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="144" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="136" class="st0" width="16" height="4"></rect>
-        </g>
-        <g>
-          <rect x="236" y="128" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="120" class="st0" width="16" height="4"></rect>
-        </g>
-        <g>
-          <rect x="236" y="112" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="104" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="96" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="88" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="80" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="71" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="63" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="55" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="47" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="39" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="31" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="23" class="st0" width="16" height="4"></rect>
-        </g>
-      </g>
-
-      <g id="东-上下">
-        <g
-          id="东行人下"
-          direction="6"
-          :class="this.sidewalkDir.indexOf(6) !== -1 ? '' : 'invisible'"
-          :fill="defaultColor"
-        >
-          <rect x="236" y="225" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="217" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="209" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="201" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="193" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="185" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="177" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="168" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="160" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="152" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="144" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="136" class="st0" width="16" height="4"></rect>
-        </g>
-        <g
-          id="东行人上"
-          direction="5"
-          :class="this.sidewalkDir.indexOf(5) !== -1 ? '' : 'invisible'"
-          :fill="defaultColor"
-        >
-          <rect x="236" y="112" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="104" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="96" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="88" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="80" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="71" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="63" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="55" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="47" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="39" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="31" class="st0" width="16" height="4"></rect>
-          <rect x="236" y="23" class="st0" width="16" height="4"></rect>
-        </g>
-      </g>
-
-      <g
-        id="北行人"
-        direction="4"
-        :class="this.sidewalkDir.indexOf(4) !== -1 ? '' : 'invisible'"
-        :fill="defaultColor"
-      >
-        <g>
-          <rect x="225" class="st0" width="4" height="16"></rect>
-          <rect x="217" class="st0" width="4" height="16"></rect>
-          <rect x="209" class="st0" width="4" height="16"></rect>
-          <rect x="201" class="st0" width="4" height="16"></rect>
-          <rect x="193" class="st0" width="4" height="16"></rect>
-          <rect x="185" class="st0" width="4" height="16"></rect>
-          <rect x="177" class="st0" width="4" height="16"></rect>
-          <rect x="168" class="st0" width="4" height="16"></rect>
-          <rect x="160" class="st0" width="4" height="16"></rect>
-          <rect x="152" class="st0" width="4" height="16"></rect>
-          <rect x="144" class="st0" width="4" height="16"></rect>
-          <rect x="136" class="st0" width="4" height="16"></rect>
-        </g>
-        <g>
-          <rect x="128" class="st0" width="4" height="16"></rect>
-          <rect x="120" class="st0" width="4" height="16"></rect>
-        </g>
-        <g>
-          <rect x="112" class="st0" width="4" height="16"></rect>
-          <rect x="104" class="st0" width="4" height="16"></rect>
-          <rect x="96" class="st0" width="4" height="16"></rect>
-          <rect x="88" class="st0" width="4" height="16"></rect>
-          <rect x="80" class="st0" width="4" height="16"></rect>
-          <rect x="71" class="st0" width="4" height="16"></rect>
-          <rect x="63" class="st0" width="4" height="16"></rect>
-          <rect x="55" class="st0" width="4" height="16"></rect>
-          <rect x="47" class="st0" width="4" height="16"></rect>
-          <rect x="39" class="st0" width="4" height="16"></rect>
-          <rect x="31" class="st0" width="4" height="16"></rect>
-          <rect x="23" class="st0" width="4" height="16"></rect>
-        </g>
-      </g>
-
-      <g id="北-左右">
-        <g
-          id="北行人右"
-          direction="12"
-          :class="this.sidewalkDir.indexOf(12) !== -1 ? '' : 'invisible'"
-          :fill="defaultColor"
-        >
-          <rect x="225" class="st0" width="4" height="16"></rect>
-          <rect x="217" class="st0" width="4" height="16"></rect>
-          <rect x="209" class="st0" width="4" height="16"></rect>
-          <rect x="201" class="st0" width="4" height="16"></rect>
-          <rect x="193" class="st0" width="4" height="16"></rect>
-          <rect x="185" class="st0" width="4" height="16"></rect>
-          <rect x="177" class="st0" width="4" height="16"></rect>
-          <rect x="168" class="st0" width="4" height="16"></rect>
-          <rect x="160" class="st0" width="4" height="16"></rect>
-          <rect x="152" class="st0" width="4" height="16"></rect>
-          <rect x="144" class="st0" width="4" height="16"></rect>
-          <rect x="136" class="st0" width="4" height="16"></rect>
-        </g>
-        <g
-          id="北行人左"
-          direction="11"
-          :class="this.sidewalkDir.indexOf(11) !== -1 ? '' : 'invisible'"
-          :fill="defaultColor"
-        >
-          <rect x="112" class="st0" width="4" height="16"></rect>
-          <rect x="104" class="st0" width="4" height="16"></rect>
-          <rect x="96" class="st0" width="4" height="16"></rect>
-          <rect x="88" class="st0" width="4" height="16"></rect>
-          <rect x="80" class="st0" width="4" height="16"></rect>
-          <rect x="71" class="st0" width="4" height="16"></rect>
-          <rect x="63" class="st0" width="4" height="16"></rect>
-          <rect x="55" class="st0" width="4" height="16"></rect>
-          <rect x="47" class="st0" width="4" height="16"></rect>
-          <rect x="39" class="st0" width="4" height="16"></rect>
-          <rect x="31" class="st0" width="4" height="16"></rect>
-          <rect x="23" class="st0" width="4" height="16"></rect>
-        </g>
-      </g>
-
-      <g
-        id="南行人"
-        direction="3"
-        :class="this.sidewalkDir.indexOf(3) !== -1 ? '' : 'invisible'"
-        :fill="defaultColor"
-      >
-        <g>
-          <rect x="225" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="217" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="209" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="201" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="193" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="185" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="177" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="168" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="160" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="152" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="144" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="136" y="236" class="st0" width="4" height="16"></rect>
-        </g>
-        <g>
-          <rect x="128" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="120" y="236" class="st0" width="4" height="16"></rect>
-        </g>
-        <g>
-          <rect x="112" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="104" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="96" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="88" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="80" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="71" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="63" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="55" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="47" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="39" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="31" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="23" y="236" class="st0" width="4" height="16"></rect>
-        </g>
-      </g>
-
-      <g id="南-左右">
-        <g
-          id="南行人右"
-          direction="10"
-          :class="this.sidewalkDir.indexOf(10) !== -1 ? '' : 'invisible'"
-          :fill="defaultColor"
-        >
-          <rect x="225" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="217" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="209" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="201" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="193" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="185" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="177" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="168" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="160" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="152" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="144" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="136" y="236" class="st0" width="4" height="16"></rect>
-        </g>
-        <g
-          id="南行人左"
-          direction="9"
-          :class="this.sidewalkDir.indexOf(9) !== -1 ? '' : 'invisible'"
-          :fill="defaultColor"
-        >
-          <rect x="112" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="104" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="96" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="88" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="80" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="71" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="63" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="55" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="47" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="39" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="31" y="236" class="st0" width="4" height="16"></rect>
-          <rect x="23" y="236" class="st0" width="4" height="16"></rect>
-        </g>
-      </g>
-
-      <g
-        id="斜杠行人"
-        direction="13"
-        :class="this.sidewalkDir.indexOf(13) !== -1 ? '' : 'invisible'"
-        :fill="defaultColor"
-      >
-        <rect
-          x="78"
-          y="164"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -98.1528 106.9619)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="83.7"
-          y="158.3"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -92.496 109.3051)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="89.4"
-          y="152.6"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -86.8391 111.6482)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="95"
-          y="147"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -81.1823 113.9914)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="55.4"
-          y="186.6"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -120.7803 97.5894)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="61.1"
-          y="180.9"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -115.1234 99.9325)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-
-        <rect
-          x="66.7"
-          y="175.3"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -109.4666 102.2757)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-
-        <rect
-          x="72.4"
-          y="169.6"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -103.8097 104.6188)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="49.8"
-          y="192.2"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -126.4371 95.2462)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="27.1"
-          y="214.9"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -149.0645 85.8736)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="32.8"
-          y="209.2"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -143.4077 88.2168)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="38.4"
-          y="203.6"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -137.7508 90.5599)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="44.1"
-          y="197.9"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -132.094 92.9031)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-
-        <rect
-          x="100.7"
-          y="141.3"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -75.5254 116.3345)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-
-        <rect
-          x="106.3"
-          y="135.7"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -69.8686 118.6777)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="112"
-          y="130"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -64.2117 121.0208)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-
-        <rect
-          x="118.3"
-          y="123.7"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -57.8478 123.6569)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="124"
-          y="118"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -52.1909 126)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-
-        <rect
-          x="129.7"
-          y="112.3"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -46.5341 128.3431)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-
-        <rect
-          x="135.3"
-          y="106.7"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -40.8772 130.6863)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="141"
-          y="101"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -35.2203 133.0294)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="146.6"
-          y="95.4"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -29.5635 135.3726)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="152.3"
-          y="89.7"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -23.9066 137.7157)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="157.9"
-          y="84.1"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -18.2498 140.0589)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="163.6"
-          y="78.4"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.5929 142.402)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="169.3"
-          y="72.7"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.9361 144.7452)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="174.9"
-          y="67.1"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.2792 147.0883)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="180.6"
-          y="61.4"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 4.3776 149.4315)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="186.9"
-          y="55.1"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 10.7416 152.0675)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="192.6"
-          y="49.4"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 16.3984 154.4106)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="198.2"
-          y="43.8"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 22.0553 156.7538)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="203.9"
-          y="38.1"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 27.7122 159.0969)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="209.6"
-          y="32.4"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 33.369 161.4401)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="215.2"
-          y="26.8"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 39.0259 163.7832)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-        <rect
-          x="220.9"
-          y="21.1"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 44.6827 166.1264)"
-          class="st0"
-          width="4"
-          height="16"
-        ></rect>
-      </g>
-      <g
-        id="反斜杠行人"
-        direction="14"
-        :class="this.sidewalkDir.indexOf(14) !== -1 ? '' : 'invisible'"
-        :fill="defaultColor"
-      >
-        <rect
-          x="72"
-          y="78"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -33.1529 80.0381)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="77.7"
-          y="83.7"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -35.496 85.6949)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="83.4"
-          y="89.4"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -37.8391 91.3518)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="89"
-          y="95"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -40.1823 97.0086)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="49.4"
-          y="55.4"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -23.7803 57.4106)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="55.1"
-          y="61.1"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -26.1234 63.0675)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="60.7"
-          y="66.7"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -28.4666 68.7243)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="66.4"
-          y="72.4"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -30.8097 74.3812)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="43.8"
-          y="49.8"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -21.4371 51.7538)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="21.1"
-          y="27.1"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.0645 29.1264)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="26.8"
-          y="32.8"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.4077 34.7832)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="32.4"
-          y="38.4"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -16.7508 40.4401)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="38.1"
-          y="44.1"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -19.094 46.0969)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="94.7"
-          y="100.7"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -42.5254 102.6655)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-
-        <rect
-          x="100.3"
-          y="106.3"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -44.8686 108.3223)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="106"
-          y="112"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -47.2117 113.9792)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-
-        <rect
-          x="112.3"
-          y="118.3"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -49.8478 120.3431)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="118"
-          y="124"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -52.1909 126)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-
-        <rect
-          x="123.7"
-          y="129.7"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -54.5341 131.6569)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-
-        <rect
-          x="129.3"
-          y="135.3"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -56.8772 137.3137)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="135"
-          y="141"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -59.2203 142.9706)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-
-        <rect
-          x="140.6"
-          y="146.6"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -61.5635 148.6274)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-
-        <rect
-          x="146.3"
-          y="152.3"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -63.9066 154.2843)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-
-        <rect
-          x="151.9"
-          y="157.9"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -66.2498 159.9411)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="157.6"
-          y="163.6"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -68.5929 165.598)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-
-        <rect
-          x="163.3"
-          y="169.3"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -70.9361 171.2548)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-
-        <rect
-          x="168.9"
-          y="174.9"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -73.2792 176.9117)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-
-        <rect
-          x="174.6"
-          y="180.6"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -75.6224 182.5685)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-
-        <rect
-          x="180.9"
-          y="186.9"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -78.2584 188.9325)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-
-        <rect
-          x="186.6"
-          y="192.6"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -80.6016 194.5894)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-
-        <rect
-          x="192.2"
-          y="198.2"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -82.9447 200.2462)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-
-        <rect
-          x="197.9"
-          y="203.9"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -85.2878 205.9031)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-        <rect
-          x="203.6"
-          y="209.6"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -87.631 211.5599)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-
-        <rect
-          x="209.2"
-          y="215.2"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -89.9741 217.2168)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-
-        <rect
-          x="214.9"
-          y="220.9"
-          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -92.3173 222.8736)"
-          class="st0"
-          width="16"
-          height="4"
-        ></rect>
-      </g>
-      <g
-        id="东西路段行人"
-        direction="15"
-        :class="this.sidewalkDir.indexOf(15) !== -1 ? '' : 'invisible'"
-        :fill="defaultColor"
-      >
-        <g>
-          <rect x="37.9" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="30.1" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="22.5" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="45.7" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="53.5" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="61.3" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="69.1" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="76.9" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="84.7" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="92.5" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="100.3" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="108.1" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="116" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="123.8" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="131.6" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="139.4" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="147.2" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="155" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="162.8" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="170.6" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="178.4" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="186.2" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="194" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="201.8" y="97.9" width="4" height="56.3"></rect>
-        </g>
-        <g>
-          <rect x="209.6" y="97.9" width="4" height="56.3"></rect>
-          <rect x="217.6" y="97.9" width="4" height="56.3"></rect>
-          <rect x="225.5" y="97.9" width="4" height="56.3"></rect>
-        </g>
-      </g>
-      <g
-        id="南北路段行人"
-        direction="16"
-        :class="this.sidewalkDir.indexOf(16) !== -1 ? '' : 'invisible'"
-        :fill="defaultColor"
-      >
-        <g>
-          <rect x="97.9" y="37.9" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="30.1" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="22.5" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="45.7" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="53.5" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="61.3" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="69.1" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="76.9" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="84.7" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="92.5" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="100.3" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="108.1" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="116" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="123.8" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="131.6" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="139.4" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="147.2" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="155" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="162.8" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="170.6" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="178.4" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="186.2" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="194" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="201.8" width="56.3" height="4"></rect>
-        </g>
-        <g>
-          <rect x="97.9" y="209.6" width="56.3" height="4"></rect>
-          <rect x="97.9" y="217.6" width="56.3" height="4"></rect>
-          <rect x="97.9" y="225.5" width="56.3" height="4"></rect>
-        </g>
-      </g>
-    </svg>
-</template>
-<script>
-export default {
-  name: 'sidewalkclicksvg',
-  data () {
-    return {
-      defaultColor: '#fff', // 默认状态颜色
-      FlashColor: undefined,
-      GreenColor: '#77fb65',
-      YellowColor: '#f7b500',
-      lastType: '',
-      clickedColor: '#299bcc',
-      disabledColor: '#828282',
-      sidewalkData: [],
-      sidewalkDir: []
-    }
-  },
-  watch: {
-    Data: {
-      handler: function (val) {
-        this.init()
-      },
-      deep: true
-    }
-  },
-  props: {
-    Width: {
-      type: String,
-      default: '252.1px'
-    },
-    Height: {
-      type: String,
-      default: '250.2px'
-    },
-    Data: {
-      type: Array
-    },
-    crossType: {
-      type: String
-    },
-    clickMode: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    handleClick (e) {
-      let clickedPath = e.currentTarget
-      let direction = Number(clickedPath.getAttribute('direction'))
-      if (clickedPath) {
-        let curChoosePed = {}
-        // 在这里对找到的元素进行操作
-        if (clickedPath.getAttribute('disabled') === 'true') {
-          return
-        }
-        if (clickedPath.getAttribute('fill') === this.clickedColor) {
-          // 取消点击
-          for (let i = 0; i < this.sidewalkData.length; i++) {
-            if (direction === this.sidewalkData[i].id) {
-              delete this.sidewalkData[i].clicked
-            }
-          }
-          clickedPath.setAttribute('fill', '#fff')
-        } else {
-          // 点击
-          for (let i = 0; i < this.sidewalkData.length; i++) {
-            if (direction === this.sidewalkData[i].id) {
-              this.sidewalkData[i].clicked = true
-              curChoosePed = JSON.parse(JSON.stringify(this.sidewalkData[i]))
-            }
-          }
-          clickedPath.setAttribute('fill', this.clickedColor)
-        }
-        this.$emit('handleClickSidewalkIcon', this.sidewalkData, curChoosePed)
-      }
-    },
-    handleStatus () {
-      let sideJson = require('../posJson/sidePos.json').sideList
-      sideJson.forEach(side => {
-        if (side.svgid) {
-          let svgdom = document.getElementById(`${this.Data[0].key}`)
-          let dom = svgdom.querySelector(`#${side.svgid}`)
-          if (dom) {
-            let data = this.sidewalkData.filter(ele => ele.id === side.id)[0]
-            if (data && data.clicked === true) {
-              dom.setAttribute('fill', this.clickedColor)
-            }
-            if (this.clickMode && data && data.disabled === true) {
-              dom.setAttribute('fill', this.disabledColor)
-              dom.setAttribute('disabled', 'true')
-            }
-            if (data && data.disabled === undefined && data.clicked === undefined) {
-              dom.setAttribute('fill', this.defaultColor)
-              dom.removeAttribute('disabled')
-            }
-          }
-        }
-      })
-    },
-    IconAddEvent () {
-      let sideJson = require('../posJson/sidePos.json').sideList
-      sideJson.forEach(side => {
-        if (side.svgid) {
-          let svgdom = document.getElementById(`${this.Data[0].key}`)
-          let dom = svgdom.querySelector(`#${side.svgid}`)
-          if (dom) {
-            if (this.clickMode) {
-              dom.addEventListener('click', this.handleClick)
-            }
-          }
-        }
-      })
-    },
-    getPedDirection () {
-      let sidewalkDir = []
-      this.sidewalkData.forEach(ele => {
-        sidewalkDir.push(ele.id)
-      })
-      this.sidewalkDir = Array.from(new Set([...sidewalkDir]))
-    },
-    init () {
-      this.sidewalkData = JSON.parse(JSON.stringify(this.Data))
-      this.getPedDirection()
-      this.handleStatus()
-      this.IconAddEvent()
-    }
-  },
-  mounted () {
-    this.init()
-  }
-}
-</script>
-<style scoped>
-.invisible {
-  visibility: hidden;
-}
-.hide {
-  display: none;
-}
-
-.green {
-  fill: #7bd66b;
-}
-.red {
-  fill: #e24b4b;
-}
-.yellow {
-  fill: #ce932c;
-}
-.gray {
-  fill: #828282;
-}
-.cls-1 {
-  fill: #f2f2f2;
-  fill-rule: evenodd;
-}
-.st1 {
-  opacity: 0.9;
-}
-.st2 {
-  fill: #606060;
-}
-</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>
+    <svg
+      :id="Data[0].key"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 252.1 250.2"
+      :width="Width"
+      :height="Height"
+      :style="{position: 'absolute', left: '310px', top: '198px', zIndex: '10'}"
+    >
+      <g
+        id="西行人"
+        direction="2"
+        :class="this.sidewalkDir.indexOf(2) !== -1 ? '' : 'invisible'"
+        :fill="defaultColor"
+      >
+        <g>
+          <rect y="225" class="st0" width="16" height="4"></rect>
+          <rect y="217" class="st0" width="16" height="4"></rect>
+          <rect y="209" class="st0" width="16" height="4"></rect>
+          <rect y="201" class="st0" width="16" height="4"></rect>
+          <rect y="193" class="st0" width="16" height="4"></rect>
+          <rect y="185" class="st0" width="16" height="4"></rect>
+          <rect y="177" class="st0" width="16" height="4"></rect>
+          <rect y="168" class="st0" width="16" height="4"></rect>
+          <rect y="160" class="st0" width="16" height="4"></rect>
+          <rect y="152" class="st0" width="16" height="4"></rect>
+          <rect y="144" class="st0" width="16" height="4"></rect>
+          <rect y="136" class="st0" width="16" height="4"></rect>
+        </g>
+        <g>
+          <rect y="128" class="st0" width="16" height="4"></rect>
+          <rect y="120" class="st0" width="16" height="4"></rect>
+        </g>
+        <g>
+          <rect y="112" class="st0" width="16" height="4"></rect>
+          <rect y="104" class="st0" width="16" height="4"></rect>
+          <rect y="96" class="st0" width="16" height="4"></rect>
+          <rect y="88" class="st0" width="16" height="4"></rect>
+          <rect y="80" class="st0" width="16" height="4"></rect>
+          <rect y="71" class="st0" width="16" height="4"></rect>
+          <rect y="63" class="st0" width="16" height="4"></rect>
+          <rect y="55" class="st0" width="16" height="4"></rect>
+          <rect y="47" class="st0" width="16" height="4"></rect>
+          <rect y="39" class="st0" width="16" height="4"></rect>
+          <rect y="31" class="st0" width="16" height="4"></rect>
+          <rect y="23" class="st0" width="16" height="4"></rect>
+        </g>
+      </g>
+      <g id="西-上下">
+        <g
+          id="西行人下"
+          direction="8"
+          :class="this.sidewalkDir.indexOf(8) !== -1 ? '' : 'invisible'"
+          :fill="defaultColor"
+        >
+          <rect y="225" class="st0" width="16" height="4"></rect>
+          <rect y="217" class="st0" width="16" height="4"></rect>
+          <rect y="209" class="st0" width="16" height="4"></rect>
+          <rect y="201" class="st0" width="16" height="4"></rect>
+          <rect y="193" class="st0" width="16" height="4"></rect>
+          <rect y="185" class="st0" width="16" height="4"></rect>
+          <rect y="177" class="st0" width="16" height="4"></rect>
+          <rect y="168" class="st0" width="16" height="4"></rect>
+          <rect y="160" class="st0" width="16" height="4"></rect>
+          <rect y="152" class="st0" width="16" height="4"></rect>
+          <rect y="144" class="st0" width="16" height="4"></rect>
+          <rect y="136" class="st0" width="16" height="4"></rect>
+        </g>
+        <g
+          id="西行人上"
+          direction="7"
+          :class="this.sidewalkDir.indexOf(7) !== -1 ? '' : 'invisible'"
+          :fill="defaultColor"
+        >
+          <rect y="112" class="st0" width="16" height="4"></rect>
+          <rect y="104" class="st0" width="16" height="4"></rect>
+          <rect y="96" class="st0" width="16" height="4"></rect>
+          <rect y="88" class="st0" width="16" height="4"></rect>
+          <rect y="80" class="st0" width="16" height="4"></rect>
+          <rect y="71" class="st0" width="16" height="4"></rect>
+          <rect y="63" class="st0" width="16" height="4"></rect>
+          <rect y="55" class="st0" width="16" height="4"></rect>
+          <rect y="47" class="st0" width="16" height="4"></rect>
+          <rect y="39" class="st0" width="16" height="4"></rect>
+          <rect y="31" class="st0" width="16" height="4"></rect>
+          <rect y="23" class="st0" width="16" height="4"></rect>
+        </g>
+      </g>
+
+      <g
+        id="东行人"
+        direction="1"
+        :class="this.sidewalkDir.indexOf(1) !== -1 ? '' : 'invisible'"
+        :fill="defaultColor"
+      >
+        <g>
+          <rect x="236" y="225" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="217" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="209" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="201" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="193" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="185" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="177" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="168" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="160" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="152" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="144" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="136" class="st0" width="16" height="4"></rect>
+        </g>
+        <g>
+          <rect x="236" y="128" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="120" class="st0" width="16" height="4"></rect>
+        </g>
+        <g>
+          <rect x="236" y="112" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="104" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="96" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="88" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="80" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="71" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="63" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="55" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="47" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="39" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="31" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="23" class="st0" width="16" height="4"></rect>
+        </g>
+      </g>
+
+      <g id="东-上下">
+        <g
+          id="东行人下"
+          direction="6"
+          :class="this.sidewalkDir.indexOf(6) !== -1 ? '' : 'invisible'"
+          :fill="defaultColor"
+        >
+          <rect x="236" y="225" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="217" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="209" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="201" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="193" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="185" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="177" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="168" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="160" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="152" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="144" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="136" class="st0" width="16" height="4"></rect>
+        </g>
+        <g
+          id="东行人上"
+          direction="5"
+          :class="this.sidewalkDir.indexOf(5) !== -1 ? '' : 'invisible'"
+          :fill="defaultColor"
+        >
+          <rect x="236" y="112" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="104" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="96" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="88" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="80" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="71" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="63" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="55" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="47" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="39" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="31" class="st0" width="16" height="4"></rect>
+          <rect x="236" y="23" class="st0" width="16" height="4"></rect>
+        </g>
+      </g>
+
+      <g
+        id="北行人"
+        direction="4"
+        :class="this.sidewalkDir.indexOf(4) !== -1 ? '' : 'invisible'"
+        :fill="defaultColor"
+      >
+        <g>
+          <rect x="225" class="st0" width="4" height="16"></rect>
+          <rect x="217" class="st0" width="4" height="16"></rect>
+          <rect x="209" class="st0" width="4" height="16"></rect>
+          <rect x="201" class="st0" width="4" height="16"></rect>
+          <rect x="193" class="st0" width="4" height="16"></rect>
+          <rect x="185" class="st0" width="4" height="16"></rect>
+          <rect x="177" class="st0" width="4" height="16"></rect>
+          <rect x="168" class="st0" width="4" height="16"></rect>
+          <rect x="160" class="st0" width="4" height="16"></rect>
+          <rect x="152" class="st0" width="4" height="16"></rect>
+          <rect x="144" class="st0" width="4" height="16"></rect>
+          <rect x="136" class="st0" width="4" height="16"></rect>
+        </g>
+        <g>
+          <rect x="128" class="st0" width="4" height="16"></rect>
+          <rect x="120" class="st0" width="4" height="16"></rect>
+        </g>
+        <g>
+          <rect x="112" class="st0" width="4" height="16"></rect>
+          <rect x="104" class="st0" width="4" height="16"></rect>
+          <rect x="96" class="st0" width="4" height="16"></rect>
+          <rect x="88" class="st0" width="4" height="16"></rect>
+          <rect x="80" class="st0" width="4" height="16"></rect>
+          <rect x="71" class="st0" width="4" height="16"></rect>
+          <rect x="63" class="st0" width="4" height="16"></rect>
+          <rect x="55" class="st0" width="4" height="16"></rect>
+          <rect x="47" class="st0" width="4" height="16"></rect>
+          <rect x="39" class="st0" width="4" height="16"></rect>
+          <rect x="31" class="st0" width="4" height="16"></rect>
+          <rect x="23" class="st0" width="4" height="16"></rect>
+        </g>
+      </g>
+
+      <g id="北-左右">
+        <g
+          id="北行人右"
+          direction="12"
+          :class="this.sidewalkDir.indexOf(12) !== -1 ? '' : 'invisible'"
+          :fill="defaultColor"
+        >
+          <rect x="225" class="st0" width="4" height="16"></rect>
+          <rect x="217" class="st0" width="4" height="16"></rect>
+          <rect x="209" class="st0" width="4" height="16"></rect>
+          <rect x="201" class="st0" width="4" height="16"></rect>
+          <rect x="193" class="st0" width="4" height="16"></rect>
+          <rect x="185" class="st0" width="4" height="16"></rect>
+          <rect x="177" class="st0" width="4" height="16"></rect>
+          <rect x="168" class="st0" width="4" height="16"></rect>
+          <rect x="160" class="st0" width="4" height="16"></rect>
+          <rect x="152" class="st0" width="4" height="16"></rect>
+          <rect x="144" class="st0" width="4" height="16"></rect>
+          <rect x="136" class="st0" width="4" height="16"></rect>
+        </g>
+        <g
+          id="北行人左"
+          direction="11"
+          :class="this.sidewalkDir.indexOf(11) !== -1 ? '' : 'invisible'"
+          :fill="defaultColor"
+        >
+          <rect x="112" class="st0" width="4" height="16"></rect>
+          <rect x="104" class="st0" width="4" height="16"></rect>
+          <rect x="96" class="st0" width="4" height="16"></rect>
+          <rect x="88" class="st0" width="4" height="16"></rect>
+          <rect x="80" class="st0" width="4" height="16"></rect>
+          <rect x="71" class="st0" width="4" height="16"></rect>
+          <rect x="63" class="st0" width="4" height="16"></rect>
+          <rect x="55" class="st0" width="4" height="16"></rect>
+          <rect x="47" class="st0" width="4" height="16"></rect>
+          <rect x="39" class="st0" width="4" height="16"></rect>
+          <rect x="31" class="st0" width="4" height="16"></rect>
+          <rect x="23" class="st0" width="4" height="16"></rect>
+        </g>
+      </g>
+
+      <g
+        id="南行人"
+        direction="3"
+        :class="this.sidewalkDir.indexOf(3) !== -1 ? '' : 'invisible'"
+        :fill="defaultColor"
+      >
+        <g>
+          <rect x="225" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="217" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="209" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="201" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="193" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="185" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="177" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="168" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="160" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="152" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="144" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="136" y="236" class="st0" width="4" height="16"></rect>
+        </g>
+        <g>
+          <rect x="128" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="120" y="236" class="st0" width="4" height="16"></rect>
+        </g>
+        <g>
+          <rect x="112" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="104" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="96" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="88" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="80" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="71" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="63" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="55" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="47" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="39" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="31" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="23" y="236" class="st0" width="4" height="16"></rect>
+        </g>
+      </g>
+
+      <g id="南-左右">
+        <g
+          id="南行人右"
+          direction="10"
+          :class="this.sidewalkDir.indexOf(10) !== -1 ? '' : 'invisible'"
+          :fill="defaultColor"
+        >
+          <rect x="225" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="217" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="209" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="201" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="193" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="185" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="177" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="168" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="160" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="152" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="144" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="136" y="236" class="st0" width="4" height="16"></rect>
+        </g>
+        <g
+          id="南行人左"
+          direction="9"
+          :class="this.sidewalkDir.indexOf(9) !== -1 ? '' : 'invisible'"
+          :fill="defaultColor"
+        >
+          <rect x="112" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="104" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="96" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="88" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="80" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="71" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="63" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="55" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="47" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="39" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="31" y="236" class="st0" width="4" height="16"></rect>
+          <rect x="23" y="236" class="st0" width="4" height="16"></rect>
+        </g>
+      </g>
+
+      <g
+        id="斜杠行人"
+        direction="13"
+        :class="this.sidewalkDir.indexOf(13) !== -1 ? '' : 'invisible'"
+        :fill="defaultColor"
+      >
+        <rect
+          x="78"
+          y="164"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -98.1528 106.9619)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="83.7"
+          y="158.3"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -92.496 109.3051)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="89.4"
+          y="152.6"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -86.8391 111.6482)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="95"
+          y="147"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -81.1823 113.9914)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="55.4"
+          y="186.6"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -120.7803 97.5894)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="61.1"
+          y="180.9"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -115.1234 99.9325)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+
+        <rect
+          x="66.7"
+          y="175.3"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -109.4666 102.2757)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+
+        <rect
+          x="72.4"
+          y="169.6"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -103.8097 104.6188)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="49.8"
+          y="192.2"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -126.4371 95.2462)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="27.1"
+          y="214.9"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -149.0645 85.8736)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="32.8"
+          y="209.2"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -143.4077 88.2168)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="38.4"
+          y="203.6"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -137.7508 90.5599)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="44.1"
+          y="197.9"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -132.094 92.9031)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+
+        <rect
+          x="100.7"
+          y="141.3"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -75.5254 116.3345)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+
+        <rect
+          x="106.3"
+          y="135.7"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -69.8686 118.6777)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="112"
+          y="130"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -64.2117 121.0208)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+
+        <rect
+          x="118.3"
+          y="123.7"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -57.8478 123.6569)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="124"
+          y="118"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -52.1909 126)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+
+        <rect
+          x="129.7"
+          y="112.3"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -46.5341 128.3431)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+
+        <rect
+          x="135.3"
+          y="106.7"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -40.8772 130.6863)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="141"
+          y="101"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -35.2203 133.0294)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="146.6"
+          y="95.4"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -29.5635 135.3726)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="152.3"
+          y="89.7"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -23.9066 137.7157)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="157.9"
+          y="84.1"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -18.2498 140.0589)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="163.6"
+          y="78.4"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.5929 142.402)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="169.3"
+          y="72.7"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.9361 144.7452)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="174.9"
+          y="67.1"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.2792 147.0883)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="180.6"
+          y="61.4"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 4.3776 149.4315)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="186.9"
+          y="55.1"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 10.7416 152.0675)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="192.6"
+          y="49.4"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 16.3984 154.4106)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="198.2"
+          y="43.8"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 22.0553 156.7538)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="203.9"
+          y="38.1"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 27.7122 159.0969)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="209.6"
+          y="32.4"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 33.369 161.4401)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="215.2"
+          y="26.8"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 39.0259 163.7832)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+        <rect
+          x="220.9"
+          y="21.1"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 44.6827 166.1264)"
+          class="st0"
+          width="4"
+          height="16"
+        ></rect>
+      </g>
+      <g
+        id="反斜杠行人"
+        direction="14"
+        :class="this.sidewalkDir.indexOf(14) !== -1 ? '' : 'invisible'"
+        :fill="defaultColor"
+      >
+        <rect
+          x="72"
+          y="78"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -33.1529 80.0381)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="77.7"
+          y="83.7"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -35.496 85.6949)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="83.4"
+          y="89.4"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -37.8391 91.3518)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="89"
+          y="95"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -40.1823 97.0086)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="49.4"
+          y="55.4"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -23.7803 57.4106)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="55.1"
+          y="61.1"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -26.1234 63.0675)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="60.7"
+          y="66.7"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -28.4666 68.7243)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="66.4"
+          y="72.4"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -30.8097 74.3812)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="43.8"
+          y="49.8"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -21.4371 51.7538)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="21.1"
+          y="27.1"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.0645 29.1264)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="26.8"
+          y="32.8"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.4077 34.7832)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="32.4"
+          y="38.4"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -16.7508 40.4401)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="38.1"
+          y="44.1"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -19.094 46.0969)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="94.7"
+          y="100.7"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -42.5254 102.6655)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+
+        <rect
+          x="100.3"
+          y="106.3"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -44.8686 108.3223)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="106"
+          y="112"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -47.2117 113.9792)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+
+        <rect
+          x="112.3"
+          y="118.3"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -49.8478 120.3431)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="118"
+          y="124"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -52.1909 126)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+
+        <rect
+          x="123.7"
+          y="129.7"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -54.5341 131.6569)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+
+        <rect
+          x="129.3"
+          y="135.3"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -56.8772 137.3137)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="135"
+          y="141"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -59.2203 142.9706)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+
+        <rect
+          x="140.6"
+          y="146.6"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -61.5635 148.6274)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+
+        <rect
+          x="146.3"
+          y="152.3"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -63.9066 154.2843)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+
+        <rect
+          x="151.9"
+          y="157.9"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -66.2498 159.9411)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="157.6"
+          y="163.6"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -68.5929 165.598)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+
+        <rect
+          x="163.3"
+          y="169.3"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -70.9361 171.2548)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+
+        <rect
+          x="168.9"
+          y="174.9"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -73.2792 176.9117)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+
+        <rect
+          x="174.6"
+          y="180.6"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -75.6224 182.5685)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+
+        <rect
+          x="180.9"
+          y="186.9"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -78.2584 188.9325)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+
+        <rect
+          x="186.6"
+          y="192.6"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -80.6016 194.5894)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+
+        <rect
+          x="192.2"
+          y="198.2"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -82.9447 200.2462)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+
+        <rect
+          x="197.9"
+          y="203.9"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -85.2878 205.9031)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+        <rect
+          x="203.6"
+          y="209.6"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -87.631 211.5599)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+
+        <rect
+          x="209.2"
+          y="215.2"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -89.9741 217.2168)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+
+        <rect
+          x="214.9"
+          y="220.9"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -92.3173 222.8736)"
+          class="st0"
+          width="16"
+          height="4"
+        ></rect>
+      </g>
+      <g
+        id="东西路段行人"
+        direction="15"
+        :class="this.sidewalkDir.indexOf(15) !== -1 ? '' : 'invisible'"
+        :fill="defaultColor"
+      >
+        <g>
+          <rect x="37.9" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="30.1" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="22.5" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="45.7" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="53.5" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="61.3" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="69.1" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="76.9" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="84.7" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="92.5" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="100.3" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="108.1" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="116" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="123.8" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="131.6" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="139.4" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="147.2" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="155" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="162.8" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="170.6" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="178.4" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="186.2" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="194" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="201.8" y="97.9" width="4" height="56.3"></rect>
+        </g>
+        <g>
+          <rect x="209.6" y="97.9" width="4" height="56.3"></rect>
+          <rect x="217.6" y="97.9" width="4" height="56.3"></rect>
+          <rect x="225.5" y="97.9" width="4" height="56.3"></rect>
+        </g>
+      </g>
+      <g
+        id="南北路段行人"
+        direction="16"
+        :class="this.sidewalkDir.indexOf(16) !== -1 ? '' : 'invisible'"
+        :fill="defaultColor"
+      >
+        <g>
+          <rect x="97.9" y="37.9" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="30.1" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="22.5" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="45.7" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="53.5" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="61.3" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="69.1" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="76.9" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="84.7" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="92.5" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="100.3" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="108.1" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="116" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="123.8" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="131.6" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="139.4" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="147.2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="155" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="162.8" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="170.6" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="178.4" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="186.2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="194" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="201.8" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="97.9" y="209.6" width="56.3" height="4"></rect>
+          <rect x="97.9" y="217.6" width="56.3" height="4"></rect>
+          <rect x="97.9" y="225.5" width="56.3" height="4"></rect>
+        </g>
+      </g>
+    </svg>
+</template>
+<script>
+export default {
+  name: 'sidewalkclicksvg',
+  data () {
+    return {
+      defaultColor: '#fff', // 默认状态颜色
+      FlashColor: undefined,
+      GreenColor: '#77fb65',
+      YellowColor: '#f7b500',
+      lastType: '',
+      clickedColor: '#299bcc',
+      disabledColor: '#828282',
+      sidewalkData: [],
+      sidewalkDir: []
+    }
+  },
+  watch: {
+    Data: {
+      handler: function (val) {
+        this.init()
+      },
+      deep: true
+    }
+  },
+  props: {
+    Width: {
+      type: String,
+      default: '252.1px'
+    },
+    Height: {
+      type: String,
+      default: '250.2px'
+    },
+    Data: {
+      type: Array
+    },
+    crossType: {
+      type: String
+    },
+    clickMode: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    handleClick (e) {
+      let clickedPath = e.currentTarget
+      let direction = Number(clickedPath.getAttribute('direction'))
+      if (clickedPath) {
+        let curChoosePed = {}
+        // 在这里对找到的元素进行操作
+        if (clickedPath.getAttribute('disabled') === 'true') {
+          return
+        }
+        if (clickedPath.getAttribute('fill') === this.clickedColor) {
+          // 取消点击
+          for (let i = 0; i < this.sidewalkData.length; i++) {
+            if (direction === this.sidewalkData[i].id) {
+              delete this.sidewalkData[i].clicked
+            }
+          }
+          clickedPath.setAttribute('fill', '#fff')
+        } else {
+          // 点击
+          for (let i = 0; i < this.sidewalkData.length; i++) {
+            if (direction === this.sidewalkData[i].id) {
+              this.sidewalkData[i].clicked = true
+              curChoosePed = JSON.parse(JSON.stringify(this.sidewalkData[i]))
+            }
+          }
+          clickedPath.setAttribute('fill', this.clickedColor)
+        }
+        this.$emit('handleClickSidewalkIcon', this.sidewalkData, curChoosePed)
+      }
+    },
+    handleStatus () {
+      let sideJson = require('../posJson/sidePos.json').sideList
+      sideJson.forEach(side => {
+        if (side.svgid) {
+          let svgdom = document.getElementById(`${this.Data[0].key}`)
+          let dom = svgdom.querySelector(`#${side.svgid}`)
+          if (dom) {
+            let data = this.sidewalkData.filter(ele => ele.id === side.id)[0]
+            if (data && data.clicked === true) {
+              dom.setAttribute('fill', this.clickedColor)
+            }
+            if (this.clickMode && data && data.disabled === true) {
+              dom.setAttribute('fill', this.disabledColor)
+              dom.setAttribute('disabled', 'true')
+            }
+            if (data && data.disabled === undefined && data.clicked === undefined) {
+              dom.setAttribute('fill', this.defaultColor)
+              dom.removeAttribute('disabled')
+            }
+          }
+        }
+      })
+    },
+    IconAddEvent () {
+      let sideJson = require('../posJson/sidePos.json').sideList
+      sideJson.forEach(side => {
+        if (side.svgid) {
+          let svgdom = document.getElementById(`${this.Data[0].key}`)
+          let dom = svgdom.querySelector(`#${side.svgid}`)
+          if (dom) {
+            if (this.clickMode) {
+              dom.addEventListener('click', this.handleClick)
+            }
+          }
+        }
+      })
+    },
+    getPedDirection () {
+      let sidewalkDir = []
+      this.sidewalkData.forEach(ele => {
+        sidewalkDir.push(ele.id)
+      })
+      this.sidewalkDir = Array.from(new Set([...sidewalkDir]))
+    },
+    init () {
+      this.sidewalkData = JSON.parse(JSON.stringify(this.Data))
+      this.getPedDirection()
+      this.handleStatus()
+      this.IconAddEvent()
+    }
+  },
+  mounted () {
+    this.init()
+  }
+}
+</script>
+<style scoped>
+.invisible {
+  visibility: hidden;
+}
+.hide {
+  display: none;
+}
+
+.green {
+  fill: #7bd66b;
+}
+.red {
+  fill: #e24b4b;
+}
+.yellow {
+  fill: #ce932c;
+}
+.gray {
+  fill: #828282;
+}
+.cls-1 {
+  fill: #f2f2f2;
+  fill-rule: evenodd;
+}
+.st1 {
+  opacity: 0.9;
+}
+.st2 {
+  fill: #606060;
+}
+</style>