openatc-components 0.0.2 → 0.0.3

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

@@ -0,0 +1,295 @@
+/* eslint-disable no-tabs */
+/**
+ * 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 :style="{position: 'absolute', left: Data.left?Data.left:'2px', top: Data.top}">
+    <svg
+       :width="Width"
+       :height="Height"
+        version="1.1"
+        id="图层_1"
+        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        viewBox="0 0 34 34"
+        style="enable-background:new 0 0 34 34;"
+        xml:space="preserve">
+    <g id="路段行人过街-东西"
+    :class="Data.name === '东西路段人行横道' ? '' : 'invisible'"
+    class="st0">
+    <rect x="19.9" y="14.2" class="st1" width="1.6" height="5.6"/>
+    <rect x="17.4" y="14.2" class="st1" width="1.6" height="5.6"/>
+    <rect x="22.4" y="14.2" class="st1" width="1.6" height="5.6"/>
+    <rect x="24.9" y="14.2" class="st1" width="1.6" height="5.6"/>
+    <rect x="27.4" y="14.2" class="st1" width="1.6" height="5.6"/>
+    <rect x="29.9" y="14.2" class="st1" width="1.6" height="5.6"/>
+    <rect x="32.4" y="14.2" class="st1" width="1.6" height="5.6"/>
+    <rect x="7.5" y="14.2" class="st1" width="1.6" height="5.6"/>
+    <rect x="5" y="14.2" class="st1" width="1.6" height="5.6"/>
+    <rect x="2.5" y="14.2" class="st1" width="1.6" height="5.6"/>
+    <rect x="0" y="14.2" class="st1" width="1.6" height="5.6"/>
+    <rect x="10" y="14.2" class="st1" width="1.6" height="5.6"/>
+    <rect x="12.5" y="14.2" class="st1" width="1.6" height="5.6"/>
+    <rect x="14.9" y="14.2" class="st1" width="1.6" height="5.6"/>
+    </g>
+    <g id="路段行人过街-南北" class="st0"
+    :class="Data.name === '南北路段人行横道' ? '' : 'invisible'"
+    >
+    <rect x="14.2" y="19.9" class="st1" width="5.6" height="1.6"/>
+    <rect x="14.2" y="17.4" class="st1" width="5.6" height="1.6"/>
+    <rect x="14.2" y="22.4" class="st1" width="5.6" height="1.6"/>
+    <rect x="14.2" y="24.9" class="st1" width="5.6" height="1.6"/>
+    <rect x="14.2" y="27.4" class="st1" width="5.6" height="1.6"/>
+    <rect x="14.2" y="29.9" class="st1" width="5.6" height="1.6"/>
+    <rect x="14.2" y="32.4" class="st1" width="5.6" height="1.6"/>
+    <rect x="14.2" y="7.5" class="st1" width="5.6" height="1.6"/>
+    <rect x="14.2" y="5" class="st1" width="5.6" height="1.6"/>
+    <rect x="14.2" y="2.5" class="st1" width="5.6" height="1.6"/>
+    <rect x="14.2" y="0" class="st1" width="5.6" height="1.6"/>
+    <rect x="14.2" y="10" class="st1" width="5.6" height="1.6"/>
+    <rect x="14.2" y="12.5" class="st1" width="5.6" height="1.6"/>
+    <rect x="14.2" y="14.9" class="st1" width="5.6" height="1.6"/>
+    </g>
+    <g id="斜向行人1" class="st0"
+    :class="Data.name === 'X人行横道-\\' ? '' : 'invisible'"
+    >
+    <rect x="14.2" y="16.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.0438 17.0053)" class="st1" width="5.6" height="1.6"/>
+    <rect x="12.4" y="14.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.3149 15.2456)" class="st1" width="5.6" height="1.6"/>
+    <rect x="15.9" y="17.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.7727 18.7651)" class="st1" width="5.6" height="1.6"/>
+    <rect x="17.7" y="19.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.5017 20.5248)" class="st1" width="5.6" height="1.6"/>
+    <rect x="19.5" y="21.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -9.2306 22.2845)" class="st1" width="5.6" height="1.6"/>
+    <rect x="21.2" y="23.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -9.9595 24.0443)" class="st1" width="5.6" height="1.6"/>
+    <rect x="23" y="25" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -10.6884 25.804)" class="st1" width="5.6" height="1.6"/>
+    <rect x="24.7" y="26.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -11.4128 27.5531)" class="st1" width="5.6" height="1.6"/>
+    <rect x="26.5" y="28.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.1418 29.3128)" class="st1" width="5.6" height="1.6"/>
+    <rect x="28.3" y="30.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.8707 31.0725)" class="st1" width="5.6" height="1.6"/>
+    <rect x="5.4" y="7.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.3993 8.2067)" class="st1" width="5.6" height="1.6"/>
+    <rect x="3.6" y="5.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -2.6704 6.4469)" class="st1" width="5.6" height="1.6"/>
+    <rect x="1.9" y="3.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.9415 4.6872)" class="st1" width="5.6" height="1.6"/>
+    <rect x="0.1" y="2.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.2126 2.9275)" class="st1" width="5.6" height="1.6"/>
+    <rect x="7.1" y="9.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.1282 9.9664)" class="st1" width="5.6" height="1.6"/>
+    <rect x="8.9" y="10.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.8571 11.7261)" class="st1" width="5.6" height="1.6"/>
+    <rect x="10.7" y="12.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.586 13.4859)" class="st1" width="5.6" height="1.6"/>
+    </g>
+    <g id="斜向行人2" class="st0"
+    :class="Data.name === 'X人行横道-/' ? '' : 'invisible'"
+    >
+    <rect x="16.2" y="14.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.047 16.9978)" class="st1" width="1.6" height="5.6"/>
+    <rect x="17.9" y="12.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.2872 17.7267)" class="st1" width="1.6" height="5.6"/>
+    <rect x="14.4" y="15.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.8067 16.2689)" class="st1" width="1.6" height="5.6"/>
+    <rect x="12.7" y="17.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -10.5664 15.54)" class="st1" width="1.6" height="5.6"/>
+
+    <rect x="10.9" y="19.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.3262 14.8111)" class="st1" width="1.6" height="5.6"/>
+    <rect x="9.1" y="21.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.0859 14.0822)" class="st1" width="1.6" height="5.6"/>
+    <rect x="7.4" y="23" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -15.8456 13.3533)" class="st1" width="1.6" height="5.6"/>
+    <rect x="5.6" y="24.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -17.5947 12.6288)" class="st1" width="1.6" height="5.6"/>
+    <rect x="3.9" y="26.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -19.3544 11.8999)" class="st1" width="1.6" height="5.6"/>
+    <rect x="2.1" y="28.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -21.1142 11.171)" class="st1" width="1.6" height="5.6"/>
+    <rect x="25" y="5.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 1.7517 20.6423)" class="st1" width="1.6" height="5.6"/>
+    <rect x="26.7" y="3.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 3.5114 21.3712)" class="st1" width="1.6" height="5.6"/>
+    <rect x="28.5" y="1.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 5.2712 22.1001)" class="st1" width="1.6" height="5.6"/>
+    <rect x="30.3" y="0.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 7.0309 22.829)" class="st1" width="1.6" height="5.6"/>
+
+    <rect x="23.2" y="7.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.040609e-03 19.9134)" class="st1" width="1.6" height="5.6"/>
+    <rect x="21.5" y="8.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.7678 19.1845)" class="st1" width="1.6" height="5.6"/>
+    <rect x="19.7" y="10.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.5275 18.4556)" class="st1" width="1.6" height="5.6"/>
+    </g>
+    <g id="北行人"
+    :class="Data.name === '北人行横道' ? '' : 'invisible'"
+    class="st0">
+    <rect x="19.9" class="st1" width="1.6" height="5.6"/>
+    <rect x="17.4" class="st1" width="1.6" height="5.6"/>
+    <rect x="22.4" class="st1" width="1.6" height="5.6"/>
+    <rect x="24.9" class="st1" width="1.6" height="5.6"/>
+    <rect x="27.4" class="st1" width="1.6" height="5.6"/>
+    <rect x="29.9" class="st1" width="1.6" height="5.6"/>
+    <rect x="32.4" class="st1" width="1.6" height="5.6"/>
+    <rect x="7.5" class="st1" width="1.6" height="5.6"/>
+    <rect x="5" class="st1" width="1.6" height="5.6"/>
+    <rect x="2.5" class="st1" width="1.6" height="5.6"/>
+    <rect x="0" class="st1" width="1.6" height="5.6"/>
+    <rect x="10" class="st1" width="1.6" height="5.6"/>
+    <rect x="12.5" class="st1" width="1.6" height="5.6"/>
+    <rect x="14.9" class="st1" width="1.6" height="5.6"/>
+    </g>
+    <g id="南行人"
+    :class="Data.name === '南人行横道' ? '' : 'invisible'"
+    class="st0">
+    <rect x="19.9" y="28.4" class="st1" width="1.6" height="5.6"/>
+    <rect x="17.4" y="28.4" class="st1" width="1.6" height="5.6"/>
+    <rect x="22.4" y="28.4" class="st1" width="1.6" height="5.6"/>
+    <rect x="24.9" y="28.4" class="st1" width="1.6" height="5.6"/>
+    <rect x="27.4" y="28.4" class="st1" width="1.6" height="5.6"/>
+    <rect x="29.9" y="28.4" class="st1" width="1.6" height="5.6"/>
+    <rect x="32.4" y="28.4" class="st1" width="1.6" height="5.6"/>
+    <rect x="7.5" y="28.4" class="st1" width="1.6" height="5.6"/>
+    <rect x="5" y="28.4" class="st1" width="1.6" height="5.6"/>
+    <rect x="2.5" y="28.4" class="st1" width="1.6" height="5.6"/>
+    <rect x="0" y="28.4" class="st1" width="1.6" height="5.6"/>
+    <rect x="10" y="28.4" class="st1" width="1.6" height="5.6"/>
+    <rect x="12.5" y="28.4" class="st1" width="1.6" height="5.6"/>
+    <rect x="14.9" y="28.4" class="st1" width="1.6" height="5.6"/>
+    </g>
+    <g id="东行人"
+    :class="Data.name === '东人行横道' ? '' : 'invisible'"
+    class="st0">
+    <rect x="28.4" y="19.9" class="st1" width="5.6" height="1.6"/>
+    <rect x="28.4" y="17.4" class="st1" width="5.6" height="1.6"/>
+    <rect x="28.4" y="22.4" class="st1" width="5.6" height="1.6"/>
+    <rect x="28.4" y="24.9" class="st1" width="5.6" height="1.6"/>
+    <rect x="28.4" y="27.4" class="st1" width="5.6" height="1.6"/>
+    <rect x="28.4" y="29.9" class="st1" width="5.6" height="1.6"/>
+    <rect x="28.4" y="32.4" class="st1" width="5.6" height="1.6"/>
+    <rect x="28.4" y="7.5" class="st1" width="5.6" height="1.6"/>
+    <rect x="28.4" y="5" class="st1" width="5.6" height="1.6"/>
+    <rect x="28.4" y="2.5" class="st1" width="5.6" height="1.6"/>
+    <rect x="28.4" y="0" class="st1" width="5.6" height="1.6"/>
+    <rect x="28.4" y="10" class="st1" width="5.6" height="1.6"/>
+    <rect x="28.4" y="12.5" class="st1" width="5.6" height="1.6"/>
+    <rect x="28.4" y="14.9" class="st1" width="5.6" height="1.6"/>
+    </g>
+    <g id="西行人"
+    :class="Data.name === '西人行横道' ? '' : 'invisible'"
+    class="st0">
+    <rect y="19.9" class="st1" width="5.6" height="1.6"/>
+    <rect y="17.4" class="st1" width="5.6" height="1.6"/>
+    <rect y="22.4" class="st1" width="5.6" height="1.6"/>
+    <rect y="24.9" class="st1" width="5.6" height="1.6"/>
+    <rect y="27.4" class="st1" width="5.6" height="1.6"/>
+    <rect y="29.9" class="st1" width="5.6" height="1.6"/>
+    <rect y="32.4" class="st1" width="5.6" height="1.6"/>
+    <rect y="7.5" class="st1" width="5.6" height="1.6"/>
+    <rect y="5" class="st1" width="5.6" height="1.6"/>
+    <rect y="2.5" class="st1" width="5.6" height="1.6"/>
+    <rect y="0" class="st1" width="5.6" height="1.6"/>
+    <rect y="10" class="st1" width="5.6" height="1.6"/>
+    <rect y="12.5" class="st1" width="5.6" height="1.6"/>
+    <rect y="14.9" class="st1" width="5.6" height="1.6"/>
+    </g>
+    <g id="二次过街-西" class="st0">
+    <g id="西下"
+    :class="Data.name === '西人行横道-下' ? '' : 'invisible'"
+    >
+        <rect y="19.9" class="st1" width="5.6" height="1.6"/>
+        <rect y="22.4" class="st1" width="5.6" height="1.6"/>
+        <rect y="24.9" class="st1" width="5.6" height="1.6"/>
+        <rect y="27.4" class="st1" width="5.6" height="1.6"/>
+        <rect y="29.9" class="st1" width="5.6" height="1.6"/>
+        <rect y="32.4" class="st1" width="5.6" height="1.6"/>
+    </g>
+    <g id="西上"
+    :class="Data.name === '西人行横道-上' ? '' : 'invisible'"
+    >
+        <rect y="7.5" class="st1" width="5.6" height="1.6"/>
+        <rect y="5" class="st1" width="5.6" height="1.6"/>
+        <rect y="2.5" class="st1" width="5.6" height="1.6"/>
+        <rect y="0" class="st1" width="5.6" height="1.6"/>
+        <rect y="10" class="st1" width="5.6" height="1.6"/>
+        <rect y="12.5" class="st1" width="5.6" height="1.6"/>
+    </g>
+    </g>
+    <g id="二次过街-东" class="st0">
+    <g id="东上"
+     :class="Data.name === '东人行横道-上' ? '' : 'invisible'"
+    >
+        <rect x="28.4" y="12.5" class="st1" width="5.6" height="1.6"/>
+        <rect x="28.4" y="10" class="st1" width="5.6" height="1.6"/>
+        <rect x="28.4" y="7.5" class="st1" width="5.6" height="1.6"/>
+        <rect x="28.4" y="5" class="st1" width="5.6" height="1.6"/>
+        <rect x="28.4" y="2.5" class="st1" width="5.6" height="1.6"/>
+        <rect x="28.4" y="0" class="st1" width="5.6" height="1.6"/>
+    </g>
+    <g id="东下"
+    :class="Data.name === '东人行横道-下' ? '' : 'invisible'"
+    >
+        <rect x="28.4" y="24.9" class="st1" width="5.6" height="1.6"/>
+        <rect x="28.4" y="27.4" class="st1" width="5.6" height="1.6"/>
+        <rect x="28.4" y="29.9" class="st1" width="5.6" height="1.6"/>
+        <rect x="28.4" y="32.4" class="st1" width="5.6" height="1.6"/>
+        <rect x="28.4" y="22.4" class="st1" width="5.6" height="1.6"/>
+        <rect x="28.4" y="19.9" class="st1" width="5.6" height="1.6"/>
+    </g>
+    </g>
+    <g id="二次过街-南" class="st0">
+    <g id="南右"
+    :class="Data.name === '南人行横道-右' ? '' : 'invisible'"
+    >
+        <rect x="19.9" y="28.4" class="st1" width="1.6" height="5.6"/>
+        <rect x="22.4" y="28.4" class="st1" width="1.6" height="5.6"/>
+        <rect x="24.9" y="28.4" class="st1" width="1.6" height="5.6"/>
+        <rect x="27.4" y="28.4" class="st1" width="1.6" height="5.6"/>
+        <rect x="29.9" y="28.4" class="st1" width="1.6" height="5.6"/>
+        <rect x="32.4" y="28.4" class="st1" width="1.6" height="5.6"/>
+    </g>
+        <g id="南左"
+        :class="Data.name === '南人行横道-左' ? '' : 'invisible'"
+        >
+            <rect x="7.5" y="28.4" class="st1" width="1.6" height="5.6"/>
+            <rect x="5" y="28.4" class="st1" width="1.6" height="5.6"/>
+            <rect x="2.5" y="28.4" class="st1" width="1.6" height="5.6"/>
+            <rect x="0" y="28.4" class="st1" width="1.6" height="5.6"/>
+            <rect x="10" y="28.4" class="st1" width="1.6" height="5.6"/>
+            <rect x="12.5" y="28.4" class="st1" width="1.6" height="5.6"/>
+        </g>
+    </g>
+        <g id="二次过街-北_1_" class="st0">
+        <g id="北右_1_"
+        :class="Data.name === '北人行横道-右' ? '' : 'invisible'"
+        >
+            <rect x="19.9" class="st1" width="1.6" height="5.6"/>
+            <rect x="22.4" class="st1" width="1.6" height="5.6"/>
+            <rect x="24.9" class="st1" width="1.6" height="5.6"/>
+            <rect x="27.4" class="st1" width="1.6" height="5.6"/>
+            <rect x="29.9" class="st1" width="1.6" height="5.6"/>
+            <rect x="32.4" class="st1" width="1.6" height="5.6"/>
+        </g>
+        <g id="北左_1_"
+        :class="Data.name === '北人行横道-左' ? '' : 'invisible'"
+        >
+            <rect x="7.5" class="st1" width="1.6" height="5.6"/>
+            <rect x="5" class="st1" width="1.6" height="5.6"/>
+            <rect x="2.5" class="st1" width="1.6" height="5.6"/>
+            <rect x="0" class="st1" width="1.6" height="5.6"/>
+            <rect x="10" class="st1" width="1.6" height="5.6"/>
+            <rect x="12.5" class="st1" width="1.6" height="5.6"/>
+        </g>
+    </g>
+    </svg>
+  </div>
+</template>
+<script>
+export default {
+  name: 'PatternWalkSvg',
+  data () {
+    return {
+    }
+  },
+  props: {
+    Width: {
+      type: String,
+      default: '34px'
+    },
+    Height: {
+      type: String,
+      default: '34px'
+    },
+    Data: {
+      type: Object
+    }
+  }
+}
+</script>
+<style scoped>
+.invisible {
+  visibility: hidden;
+}
+.st0{opacity:0.5;}
+.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#303133;}
+</style>

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

@@ -0,0 +1,300 @@
+/**
+ * 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
+    version="1.1"
+    id="图层_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 870 650"
+    style="enable-background:new 0 0 870 650;"
+    xml:space="preserve"
+    :width="Width"
+    :height="Height"
+  >
+    <g>
+      <path
+        class="st0"
+        d="M870,432.6v-18V235.1v-18H563.2L307.7,217H0v18v179.6l0,18h307.5c0.6,0,1.3,0,1.9,0.1H870V432.6z"
+      ></path>
+      <g class="st1" v-if="showSidewalk" >
+        <g>
+          <rect x="406.4" y="236.8" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="229" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="221.4" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="244.5" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="252.4" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="260.1" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="267.9" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="275.8" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="283.5" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="291.4" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="299.1" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="306.9" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="314.9" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="322.6" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="330.4" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="338.3" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="346" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="353.9" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="361.6" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="369.4" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="377.3" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="385" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="392.9" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="400.6" class="st2" width="56.3" height="4"></rect>
+        </g>
+        <g>
+          <rect x="406.4" y="408.4" class="st2" width="56.3" height="4"></rect>
+          <rect x="406.4" y="416.4" class="st2" width="56.3" height="4"></rect>
+          <rect x="406.4" y="424.4" class="st2" width="56.3" height="4"></rect>
+        </g>
+      </g>
+      <g>
+        <path class="st3" d="M0,198.4h870l0,0v-1H0"></path>
+      </g>
+      <rect y="214.9" class="st4" width="870" height="3"></rect>
+      <g>
+        <path class="st3" d="M870,451.6H0l0,0v1h870"></path>
+      </g>
+      <g>
+        <g>
+          <rect x="742.8" y="379.4" class="st5" width="11" height="2"></rect>
+          <rect x="719.7" y="379.4" class="st5" width="11.6" height="2"></rect>
+          <rect x="604.2" y="379.4" class="st5" width="11.6" height="2"></rect>
+          <rect x="627.3" y="379.4" class="st5" width="11.6" height="2"></rect>
+          <rect x="673.5" y="379.4" class="st5" width="11.6" height="2"></rect>
+          <rect x="650.4" y="379.4" class="st5" width="11.6" height="2"></rect>
+          <rect x="696.6" y="379.4" class="st5" width="11.6" height="2"></rect>
+          <rect x="581" y="379.4" class="st5" width="11.6" height="2"></rect>
+          <rect x="555.5" y="379.4" class="st5" width="14" height="2"></rect>
+          <rect x="650.4" y="349.1" class="st5" width="11.6" height="2"></rect>
+          <rect x="627.3" y="349.1" class="st5" width="11.6" height="2"></rect>
+          <rect x="581" y="349.1" class="st5" width="11.6" height="2"></rect>
+          <rect x="604.2" y="349.1" class="st5" width="11.6" height="2"></rect>
+          <rect x="696.6" y="349.1" class="st5" width="11.6" height="2"></rect>
+          <rect x="673.5" y="349.1" class="st5" width="11.6" height="2"></rect>
+          <rect x="719.7" y="349.1" class="st5" width="11.6" height="2"></rect>
+          <rect x="742.8" y="349.1" class="st5" width="11" height="2"></rect>
+          <rect x="856.8" y="379.4" class="st5" width="11" height="2"></rect>
+          <rect x="833.7" y="379.4" class="st5" width="11.6" height="2"></rect>
+          <rect x="787.5" y="379.4" class="st5" width="11.6" height="2"></rect>
+          <rect x="764.4" y="379.4" class="st5" width="11.6" height="2"></rect>
+          <rect x="810.6" y="379.4" class="st5" width="11.6" height="2"></rect>
+          <rect x="764.4" y="349.1" class="st5" width="11.6" height="2"></rect>
+          <rect x="810.6" y="349.1" class="st5" width="11.6" height="2"></rect>
+          <rect x="787.5" y="349.1" class="st5" width="11.6" height="2"></rect>
+          <rect x="833.7" y="349.1" class="st5" width="11.6" height="2"></rect>
+          <rect x="856.8" y="349.1" class="st5" width="11" height="2"></rect>
+          <rect x="870" y="379.4" class="st5" width="0" height="2"></rect>
+          <rect x="870" y="349.1" class="st5" width="0" height="2"></rect>
+          <rect x="555.5" y="349.1" class="st5" width="14" height="2"></rect>
+          <rect x="533.3" y="379.4" class="st5" width="11.6" height="2"></rect>
+          <rect x="507.8" y="379.4" class="st5" width="14" height="2"></rect>
+          <rect x="533.3" y="349.1" class="st5" width="11.6" height="2"></rect>
+          <rect x="507.8" y="349.1" class="st5" width="14" height="2"></rect>
+          <rect x="482.7" y="379.4" class="st5" width="14" height="2"></rect>
+          <rect x="482.7" y="349.1" class="st5" width="14" height="2"></rect>
+        </g>
+        <g>
+          <g>
+            <rect x="483.7" y="320.1" class="st4" width="386.2" height="2"></rect>
+          </g>
+          <rect x="484.7" y="291.8" class="st5" width="385.2" height="2"></rect>
+          <rect x="484.7" y="263.4" class="st5" width="385.2" height="2"></rect>
+          <rect x="484.7" y="235" class="st5" width="385.2" height="2"></rect>
+          <rect x="483.8" y="410" class="st5" width="386.1" height="2"></rect>
+          <polyline class="st5" points="484.7,322.1 482.7,322.1 482.7,217.5 484.7,217.5"></polyline>
+        </g>
+      </g>
+      <g>
+        <g>
+          <rect x="116.2" y="268.3" class="st5" width="11" height="2"></rect>
+          <rect x="138.7" y="268.3" class="st5" width="11.6" height="2"></rect>
+          <rect x="254.2" y="268.3" class="st5" width="11.6" height="2"></rect>
+          <rect x="231.1" y="268.3" class="st5" width="11.6" height="2"></rect>
+          <rect x="184.9" y="268.3" class="st5" width="11.6" height="2"></rect>
+          <rect x="208" y="268.3" class="st5" width="11.6" height="2"></rect>
+          <rect x="161.8" y="268.3" class="st5" width="11.6" height="2"></rect>
+          <rect x="277.4" y="268.3" class="st5" width="11.6" height="2"></rect>
+          <rect x="300.5" y="268.3" class="st5" width="14" height="2"></rect>
+          <rect x="208" y="298.5" class="st5" width="11.6" height="2"></rect>
+          <rect x="231.1" y="298.5" class="st5" width="11.6" height="2"></rect>
+          <rect x="277.4" y="298.5" class="st5" width="11.6" height="2"></rect>
+          <rect x="254.2" y="298.5" class="st5" width="11.6" height="2"></rect>
+          <rect x="161.8" y="298.5" class="st5" width="11.6" height="2"></rect>
+          <rect x="184.9" y="298.5" class="st5" width="11.6" height="2"></rect>
+          <rect x="138.7" y="298.5" class="st5" width="11.6" height="2"></rect>
+          <rect x="116.2" y="298.5" class="st5" width="11" height="2"></rect>
+          <rect x="24.2" y="268.3" class="st5" width="11" height="2"></rect>
+          <rect x="46.7" y="268.3" class="st5" width="11.6" height="2"></rect>
+          <rect x="92.9" y="268.3" class="st5" width="11.6" height="2"></rect>
+          <rect x="69.8" y="268.3" class="st5" width="11.6" height="2"></rect>
+          <rect x="69.8" y="298.5" class="st5" width="11.6" height="2"></rect>
+          <rect x="92.9" y="298.5" class="st5" width="11.6" height="2"></rect>
+          <rect x="46.7" y="298.5" class="st5" width="11.6" height="2"></rect>
+          <rect x="24.2" y="298.5" class="st5" width="11" height="2"></rect>
+          <rect x="2.2" y="268.3" class="st5" width="11" height="2"></rect>
+          <rect x="2.2" y="298.5" class="st5" width="11" height="2"></rect>
+          <rect x="0" y="268.3" class="st5" width="0" height="2"></rect>
+          <rect y="298.5" class="st5" width="0" height="2"></rect>
+          <rect x="300.5" y="298.5" class="st5" width="14" height="2"></rect>
+          <rect x="325.1" y="268.3" class="st5" width="11.6" height="2"></rect>
+          <rect x="348.2" y="268.3" class="st5" width="14" height="2"></rect>
+          <rect x="325.1" y="298.5" class="st5" width="11.6" height="2"></rect>
+          <rect x="348.2" y="298.5" class="st5" width="14" height="2"></rect>
+          <rect x="373.2" y="268.3" class="st5" width="14" height="2"></rect>
+          <rect x="373.2" y="298.5" class="st5" width="14" height="2"></rect>
+        </g>
+        <g>
+          <g>
+            <rect y="327.5" class="st4" width="386.3" height="2"></rect>
+          </g>
+          <rect y="355.9" class="st5" width="385.3" height="2"></rect>
+          <rect y="384.4" class="st5" width="385.3" height="2"></rect>
+          <rect x="0" y="412.8" class="st5" width="385.3" height="2"></rect>
+          <rect y="237.6" class="st5" width="386.1" height="2"></rect>
+          <polyline class="st5" points="385.2,327.5 387.2,327.5 387.2,432.1 385.2,432.1"></polyline>
+        </g>
+      </g>
+      <rect y="432.1" class="st4" width="870" height="3"></rect>
+      <polygon v-if="showPhaseIcon" id="东直行_3_" class="st6"
+        points="531.7,277.9 507.5,277.9 507.5,274.1 498.4,279.4 507.5,284.5 507.5,280.9
+531.7,280.9"
+      ></polygon>
+      <!-- <polygon
+        id="东直行_11_"
+        class="st6"
+        points="531.7,249.1 507.5,249.1 507.5,245.4 498.4,250.6 507.5,255.8 507.5,252.1
+531.7,252.1"
+      ></polygon>
+      <polygon
+        id="东直行_12_"
+        class="st6"
+        points="531.7,305.5 507.5,305.5 507.5,301.8 498.4,307 507.5,312.1 507.5,308.5
+531.7,308.5"
+      ></polygon> -->
+      <polygon v-if="showPhaseIcon" id="东直行_2_" class="st6"
+        points="337,372.1 361.2,372.1 361.2,375.9 370.3,370.6 361.2,365.4 361.2,369.1 337,369.1"
+      ></polygon>
+      <!-- <polygon
+        id="东直行_8_"
+        class="st6"
+        points="337,400.9 361.2,400.9 361.2,404.6 370.3,399.4 361.2,394.2 361.2,397.9 337,397.9"
+      ></polygon>
+      <polygon
+        id="东直行_10_"
+        class="st6"
+        points="337,344.3 361.2,344.3 361.2,348 370.3,342.8 361.2,337.6 361.2,341.3 337,341.3"
+      ></polygon> -->
+    </g>
+  </svg>
+</template>
+<script>
+export default {
+  name: 'pedSectionEW',
+  data () {
+    return {}
+  },
+  props: {
+    Width: {
+      type: String,
+      default: '870px'
+    },
+    Height: {
+      type: String,
+      default: '650px'
+    },
+    showSidewalk: {
+      type: Boolean,
+      default: false
+    },
+    showPhaseIcon: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {},
+  mounted () {}
+}
+</script>
+<style scoped>
+.st0 {
+  fill: #3d3939;
+}
+.st1 {
+  opacity: 0.9;
+}
+.st2 {
+  fill: #f2f2f2;
+}
+.st3 {
+  fill: #e5e5d8;
+}
+.st4 {
+  fill: #ccb63a;
+}
+.st5 {
+  fill: #dddddd;
+}
+.st6 {
+  fill: #ededed;
+}
+</style>