openatc-components 0.1.33 → 0.1.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/package/kisscomps/components/BoardCard/BoardCard.vue +4 -0
  2. package/package/kisscomps/components/CommonKanban/CommonKanban.vue +5 -4
  3. package/package/kisscomps/components/DrawChannelization/drawsvg/overlapAssociatedComponent.vue +20 -9
  4. package/package/kisscomps/components/DrawChannelization/drawsvg/phaseAssociatedComponent.vue +20 -9
  5. package/package/kisscomps/components/KanBan/kanban.vue +1 -1
  6. package/package/kisscomps/components/OverLap/OverLap.vue +15 -8
  7. package/package/kisscomps/components/PatternStatus/PatternStatus.vue +258 -87
  8. package/package/kisscomps/components/SchemeConfig/tentativeplancontrolmodal/index.vue +23 -1
  9. package/package/kisscomps/components/Stages/index.vue +9 -5
  10. package/package/kisscomps/components/XRDDirSelector/XRDDirSelector.vue +672 -293
  11. package/package/kisscomps/components/patternList/patternList.vue +4 -0
  12. package/package/kissui.min.js +1 -1
  13. package/package.json +1 -1
  14. package/src/kisscomps/components/BoardCard/BoardCard.vue +4 -0
  15. package/src/kisscomps/components/CommonKanban/CommonKanban.vue +5 -4
  16. package/src/kisscomps/components/DrawChannelization/drawsvg/overlapAssociatedComponent.vue +20 -9
  17. package/src/kisscomps/components/DrawChannelization/drawsvg/phaseAssociatedComponent.vue +20 -9
  18. package/src/kisscomps/components/KanBan/kanban.vue +1 -1
  19. package/src/kisscomps/components/OverLap/OverLap.vue +15 -8
  20. package/src/kisscomps/components/PatternStatus/PatternStatus.vue +258 -87
  21. package/src/kisscomps/components/SchemeConfig/tentativeplancontrolmodal/index.vue +23 -1
  22. package/src/kisscomps/components/Stages/index.vue +9 -5
  23. package/src/kisscomps/components/XRDDirSelector/XRDDirSelector.vue +672 -293
  24. package/src/kisscomps/components/patternList/patternList.vue +4 -0
  25. package/src/node_modules/.package_versions.json +1 -0
  26. package/src/utils/RingDataModel.js +18 -2
  27. package/src/views/schemeconfig.vue +3 -3
@@ -10,300 +10,557 @@
10
10
  * See the Mulan PSL v2 for more details.
11
11
  **/
12
12
  <template>
13
- <svg
14
- t="1545378648902"
15
- class="icon"
16
- viewBox="0 0 50 50"
17
- style="enable-background:new 0 0 50 50;"
18
- version="1.1"
19
- xmlns="http://www.w3.org/2000/svg"
20
- p-id="6773"
21
- xmlns:xlink="http://www.w3.org/1999/xlink"
22
- :width="Width"
23
- :height="Height"
24
- >
25
- <!-- <mask id="shade"> -->
26
- <path
27
- d="M893.44 158.72
28
- H130.56C99.84 158.72 76.8 181.76 76.8 212.48v599.04c0 30.72 23.04 53.76 53.76 53.76
29
- h762.88c30.72 0 53.76-23.04 53.76-53.76V212.48c0-30.72-23.04-53.76-53.76-53.76z
30
- M130.56 194.56
31
- h762.88c10.24 0 17.92 7.68 17.92 17.92
32
- v537.6l-209.92-189.44-171.52 143.36-245.76-209.92-171.52 186.88
33
- V212.48c0-10.24 7.68-17.92 17.92-17.92z
34
- m-17.92 616.96v-76.8l174.08-189.44 332.8 284.16
35
- H130.56c-10.24 0-17.92-7.68-17.92-17.92z
36
- m780.8 17.92
37
- h-217.6l-120.32-102.4 143.36-120.32 209.92 189.44v12.8c2.56 12.8-5.12 20.48-15.36 20.48z"
38
- :fill="MaskColor"
39
- p-id="2761"
40
- :class="maskmark ? '' : 'invisible'"
41
- ></path>
42
- <path
43
- d="M668.16 463.36c56.32 0 104.96-46.08 104.96-104.96 0-56.32-46.08-104.96-104.96-104.96S563.2 302.08 563.2 358.4c0 56.32 46.08 104.96 104.96 104.96z"
44
- :fill="MaskColor"
45
- p-id="2762"
46
- :class="maskmark ? '' : 'invisible'"
47
- ></path>
48
- <!-- </mask> -->
49
- <!-- <mask id="shade"> -->
50
- <!-- ====================================右行相位图标合集============================================= -->
51
- <g id="右行" v-if="roadDirection === 'right'">
52
- <path
53
- id="西左转_3_"
54
- :stroke-width="PathWidth"
55
- :fill="status[5].color"
56
- :class="status[5].isshow ? '' : 'invisible'"
57
- d="M17.3,36.3H1.4v2h16c2.1,0,3.8-1.7,3.9-3.8l0.3-1.9l2.5,0.3l-2.6-6.4l-4.3,5.4l2.5,0.3
58
- l-0.3,2.2C19.2,35.5,18.4,36.3,17.3,36.3L17.3,36.3z"
59
- ></path>
60
- <path
61
- id="西右转"
62
- :stroke-width="PathWidth"
63
- :fill="status[6].color"
64
- :class="status[6].isshow ? '' : 'invisible'"
65
- d="M17.3,38.3c1.1,0,1.9,0.8,2.1,1.9l0.3,2.2l-2.5,0.3l4.3,5.4l2.6-6.4L21.6,42l-0.3-1.9
66
- c-0.1-2.1-1.8-3.8-3.9-3.8h-16v2H17.3L17.3,38.3z"
67
- ></path>
68
- <polygon
69
- id="西直行_1_"
70
- :stroke-width="PathWidth"
71
- :fill="status[4].color"
72
- :class="status[4].isshow ? '' : 'invisible'"
73
- points="1.4,38.3 24.6,38.3 24.6,40.8 30.7,37.3 24.6,33.9 24.6,36.3 1.4,36.3"
74
- ></polygon>
75
- <path
76
- id="西调头_1_"
77
- :stroke-width="PathWidth"
78
- :fill="status[7].color"
79
- :class="status[7].isshow ? '' : 'invisible'"
80
- d="M11.8,29.2H8.9v-2.4l-6,3.5l6,3.5v-2.5h2.9c1,0,1.9,1.1,1.9,2.5c0,1.3-0.9,2.5-1.9,2.5H1.4
81
- v2h10.4c2.1,0,3.9-2,3.9-4.5C15.6,31.2,13.9,29.2,11.8,29.2z"
82
- ></path>
83
- <path
84
- id="南左转_1_"
85
- :stroke-width="PathWidth"
86
- :fill="status[13].color"
87
- :class="status[13].isshow ? '' : 'invisible'"
88
- d="M36.8,34.1V50h2V34c0-2.1-1.7-3.8-3.8-3.9l-1.9-0.3l0.3-2.5L27,30l5.4,4.3l0.3-2.5l2.2,0.3
89
- C35.9,32.2,36.8,33,36.8,34.1L36.8,34.1z"
90
- ></path>
91
- <path
92
- id="南右转_1_"
93
- :stroke-width="PathWidth"
94
- :fill="status[14].color"
95
- :class="status[14].isshow ? '' : 'invisible'"
96
- d="M40.9,32l2-0.3l0.3,2.5l5.4-4.3l-6.4-2.6l0.3,2.5l-1.9,0.3c-2.1,0-3.8,1.7-3.8,3.9v16h2
97
- V33.9c0-1,0.9-1.9,1.9-1.9H40.9z"
98
- ></path>
99
- <polygon
100
- id="南直行_1_"
101
- :stroke-width="PathWidth"
102
- :fill="status[12].color"
103
- :class="status[12].isshow ? '' : 'invisible'"
104
- points="38.8,50 38.8,26.8 41.2,26.8 37.8,20.7 34.3,26.8 36.8,26.8 36.8,50"
105
- ></polygon>
106
- <path
107
- id="南调头_1_"
108
- :stroke-width="PathWidth"
109
- :fill="status[15].color"
110
- :class="status[15].isshow ? '' : 'invisible'"
111
- d="M29.8,39.6v2.9h-2.5l3.5,6l3.5-6h-2.5v-2.9c0-1,1.1-1.9,2.5-1.9c1.3,0,2.5,0.9,2.5,1.9V50h2
112
- V39.6c0-2.1-2-3.9-4.5-3.9C31.8,35.8,29.8,37.5,29.8,39.6z"
113
- ></path>
114
- <path
115
- id="东左转_3_"
116
- :stroke-width="PathWidth"
117
- :fill="status[1].color"
118
- :class="status[1].isshow ? '' : 'invisible'"
119
- d="M32.7,13.7h15.9v-2h-16c-2.1,0-3.8,1.7-3.9,3.8l-0.3,1.9L26,17.1l2.6,6.4l4.3-5.4l-2.5-0.3
120
- l0.3-2.2C30.8,14.5,31.6,13.7,32.7,13.7L32.7,13.7z"
121
- ></path>
122
- <path
123
- id="东右转"
124
- :stroke-width="PathWidth"
125
- :fill="status[2].color"
126
- :class="status[2].isshow ? '' : 'invisible'"
127
- d="M32.7,11.7c-1.1,0-1.9-0.8-2-1.9l-0.3-2.2l2.5-0.3l-4.3-5.4L26,8.3L28.4,8l0.3,1.9
128
- c0.1,2.1,1.8,3.8,3.9,3.8h16v-2H32.7L32.7,11.7z"
129
- ></path>
130
- <polygon
131
- id="东直行_1_"
132
- :stroke-width="PathWidth"
133
- :fill="status[0].color"
134
- :class="status[0].isshow ? '' : 'invisible'"
135
- points="48.6,11.7 25.4,11.7 25.4,9.2 19.3,12.7 25.4,16.1 25.4,13.7 48.6,13.7"
136
- ></polygon>
137
- <path
138
- id="东调头_1_"
139
- :stroke-width="PathWidth"
140
- :fill="status[3].color"
141
- :class="status[3].isshow ? '' : 'invisible'"
142
- d="M38.2,20.8h2.9v2.4l6-3.5l-6-3.5v2.5h-2.9c-1,0-1.9-1.1-1.9-2.5c0-1.3,0.9-2.5,1.9-2.5h10.4
143
- v-2H38.2c-2.1,0-3.9,2-3.9,4.5S36.1,20.8,38.2,20.8z"
144
- ></path>
145
- <path
146
- id="北左转_1_"
147
- :stroke-width="PathWidth"
148
- :fill="status[9].color"
149
- :class="status[9].isshow ? '' : 'invisible'"
150
- d="M13.2,15.9V0l-2,0v16c0,2.1,1.7,3.8,3.8,3.9l1.9,0.3l-0.3,2.5L23,20l-5.4-4.3l-0.3,2.5
151
- l-2.2-0.3C14.1,17.8,13.2,17,13.2,15.9L13.2,15.9z"
152
- ></path>
153
- <path
154
- id="北右转_1_"
155
- :stroke-width="PathWidth"
156
- :fill="status[10].color"
157
- :class="status[10].isshow ? '' : 'invisible'"
158
- d="M9.2,17.9l-2,0.3l-0.3-2.5L1.4,20l6.4,2.6l-0.3-2.5l1.9-0.3c2.1,0,3.8-1.7,3.8-3.9V0l-2,0
159
- v16c0,1-0.9,1.9-1.9,1.9C9.3,17.9,9.2,17.9,9.2,17.9z"
160
- ></path>
161
- <polygon
162
- id="北直行_1_"
163
- :stroke-width="PathWidth"
164
- :fill="status[8].color"
165
- :class="status[8].isshow ? '' : 'invisible'"
166
- points="11.2,0 11.2,23.2 8.8,23.2 12.2,29.3 15.7,23.2 13.2,23.2 13.2,0"
167
- ></polygon>
168
- <path
169
- id="北调头_1_"
170
- :stroke-width="PathWidth"
171
- :fill="status[11].color"
172
- :class="status[11].isshow ? '' : 'invisible'"
173
- d="M20.2,10.4V7.5h2.5l-3.5-6l-3.5,6h2.5v2.9c0,1-1.1,1.9-2.5,1.9s-2.5-0.9-2.5-1.9V0l-2,0
174
- v10.4c0,2.1,2,3.9,4.5,3.9C18.2,14.2,20.2,12.5,20.2,10.4z"
175
- ></path>
176
- </g>
13
+ <div :style="{position: 'reletive'}">
14
+ <!-- <div> -->
15
+ <div :style="{position: 'absolute', left: Data?Data.left:0, top: Data?Data.top:0}">
16
+ <svg
17
+ t="1545378648902"
18
+ class="icon"
19
+ viewBox="0 0 50 50"
20
+ style="enable-background:new 0 0 50 50;"
21
+ version="1.1"
22
+ xmlns="http://www.w3.org/2000/svg"
23
+ p-id="6773"
24
+ xmlns:xlink="http://www.w3.org/1999/xlink"
25
+ :width="Width"
26
+ :height="Height"
27
+ >
28
+ <!-- <mask id="shade"> -->
29
+ <path
30
+ d="M893.44 158.72
31
+ H130.56C99.84 158.72 76.8 181.76 76.8 212.48v599.04c0 30.72 23.04 53.76 53.76 53.76
32
+ h762.88c30.72 0 53.76-23.04 53.76-53.76V212.48c0-30.72-23.04-53.76-53.76-53.76z
33
+ M130.56 194.56
34
+ h762.88c10.24 0 17.92 7.68 17.92 17.92
35
+ v537.6l-209.92-189.44-171.52 143.36-245.76-209.92-171.52 186.88
36
+ V212.48c0-10.24 7.68-17.92 17.92-17.92z
37
+ m-17.92 616.96v-76.8l174.08-189.44 332.8 284.16
38
+ H130.56c-10.24 0-17.92-7.68-17.92-17.92z
39
+ m780.8 17.92
40
+ h-217.6l-120.32-102.4 143.36-120.32 209.92 189.44v12.8c2.56 12.8-5.12 20.48-15.36 20.48z"
41
+ :fill="MaskColor"
42
+ p-id="2761"
43
+ :class="maskmark ? '' : 'invisible'"
44
+ ></path>
45
+ <path
46
+ d="M668.16 463.36c56.32 0 104.96-46.08 104.96-104.96 0-56.32-46.08-104.96-104.96-104.96S563.2 302.08 563.2 358.4c0 56.32 46.08 104.96 104.96 104.96z"
47
+ :fill="MaskColor"
48
+ p-id="2762"
49
+ :class="maskmark ? '' : 'invisible'"
50
+ ></path>
51
+ <!-- </mask> -->
52
+ <!-- <mask id="shade"> -->
53
+ <!-- ====================================右行相位图标合集============================================= -->
54
+ <g id="右行" v-if="roadDirection === 'right'">
55
+ <path
56
+ id="西左转_3_"
57
+ :stroke-width="PathWidth"
58
+ :fill="status[5].color"
59
+ :class="status[5].isshow ? '' : 'invisible'"
60
+ d="M17.3,36.3H1.4v2h16c2.1,0,3.8-1.7,3.9-3.8l0.3-1.9l2.5,0.3l-2.6-6.4l-4.3,5.4l2.5,0.3
61
+ l-0.3,2.2C19.2,35.5,18.4,36.3,17.3,36.3L17.3,36.3z"
62
+ ></path>
63
+ <path
64
+ id="西右转"
65
+ :stroke-width="PathWidth"
66
+ :fill="status[6].color"
67
+ :class="status[6].isshow ? '' : 'invisible'"
68
+ d="M17.3,38.3c1.1,0,1.9,0.8,2.1,1.9l0.3,2.2l-2.5,0.3l4.3,5.4l2.6-6.4L21.6,42l-0.3-1.9
69
+ c-0.1-2.1-1.8-3.8-3.9-3.8h-16v2H17.3L17.3,38.3z"
70
+ ></path>
71
+ <polygon
72
+ id="西直行_1_"
73
+ :stroke-width="PathWidth"
74
+ :fill="status[4].color"
75
+ :class="status[4].isshow ? '' : 'invisible'"
76
+ points="1.4,38.3 24.6,38.3 24.6,40.8 30.7,37.3 24.6,33.9 24.6,36.3 1.4,36.3"
77
+ ></polygon>
78
+ <path
79
+ id="西调头_1_"
80
+ :stroke-width="PathWidth"
81
+ :fill="status[7].color"
82
+ :class="status[7].isshow ? '' : 'invisible'"
83
+ d="M11.8,29.2H8.9v-2.4l-6,3.5l6,3.5v-2.5h2.9c1,0,1.9,1.1,1.9,2.5c0,1.3-0.9,2.5-1.9,2.5H1.4
84
+ v2h10.4c2.1,0,3.9-2,3.9-4.5C15.6,31.2,13.9,29.2,11.8,29.2z"
85
+ ></path>
86
+ <path
87
+ id="南左转_1_"
88
+ :stroke-width="PathWidth"
89
+ :fill="status[13].color"
90
+ :class="status[13].isshow ? '' : 'invisible'"
91
+ d="M36.8,34.1V50h2V34c0-2.1-1.7-3.8-3.8-3.9l-1.9-0.3l0.3-2.5L27,30l5.4,4.3l0.3-2.5l2.2,0.3
92
+ C35.9,32.2,36.8,33,36.8,34.1L36.8,34.1z"
93
+ ></path>
94
+ <path
95
+ id="南右转_1_"
96
+ :stroke-width="PathWidth"
97
+ :fill="status[14].color"
98
+ :class="status[14].isshow ? '' : 'invisible'"
99
+ d="M40.9,32l2-0.3l0.3,2.5l5.4-4.3l-6.4-2.6l0.3,2.5l-1.9,0.3c-2.1,0-3.8,1.7-3.8,3.9v16h2
100
+ V33.9c0-1,0.9-1.9,1.9-1.9H40.9z"
101
+ ></path>
102
+ <polygon
103
+ id="南直行_1_"
104
+ :stroke-width="PathWidth"
105
+ :fill="status[12].color"
106
+ :class="status[12].isshow ? '' : 'invisible'"
107
+ points="38.8,50 38.8,26.8 41.2,26.8 37.8,20.7 34.3,26.8 36.8,26.8 36.8,50"
108
+ ></polygon>
109
+ <path
110
+ id="南调头_1_"
111
+ :stroke-width="PathWidth"
112
+ :fill="status[15].color"
113
+ :class="status[15].isshow ? '' : 'invisible'"
114
+ d="M29.8,39.6v2.9h-2.5l3.5,6l3.5-6h-2.5v-2.9c0-1,1.1-1.9,2.5-1.9c1.3,0,2.5,0.9,2.5,1.9V50h2
115
+ V39.6c0-2.1-2-3.9-4.5-3.9C31.8,35.8,29.8,37.5,29.8,39.6z"
116
+ ></path>
117
+ <path
118
+ id="东左转_3_"
119
+ :stroke-width="PathWidth"
120
+ :fill="status[1].color"
121
+ :class="status[1].isshow ? '' : 'invisible'"
122
+ d="M32.7,13.7h15.9v-2h-16c-2.1,0-3.8,1.7-3.9,3.8l-0.3,1.9L26,17.1l2.6,6.4l4.3-5.4l-2.5-0.3
123
+ l0.3-2.2C30.8,14.5,31.6,13.7,32.7,13.7L32.7,13.7z"
124
+ ></path>
125
+ <path
126
+ id="东右转"
127
+ :stroke-width="PathWidth"
128
+ :fill="status[2].color"
129
+ :class="status[2].isshow ? '' : 'invisible'"
130
+ d="M32.7,11.7c-1.1,0-1.9-0.8-2-1.9l-0.3-2.2l2.5-0.3l-4.3-5.4L26,8.3L28.4,8l0.3,1.9
131
+ c0.1,2.1,1.8,3.8,3.9,3.8h16v-2H32.7L32.7,11.7z"
132
+ ></path>
133
+ <polygon
134
+ id="东直行_1_"
135
+ :stroke-width="PathWidth"
136
+ :fill="status[0].color"
137
+ :class="status[0].isshow ? '' : 'invisible'"
138
+ points="48.6,11.7 25.4,11.7 25.4,9.2 19.3,12.7 25.4,16.1 25.4,13.7 48.6,13.7"
139
+ ></polygon>
140
+ <path
141
+ id="东调头_1_"
142
+ :stroke-width="PathWidth"
143
+ :fill="status[3].color"
144
+ :class="status[3].isshow ? '' : 'invisible'"
145
+ d="M38.2,20.8h2.9v2.4l6-3.5l-6-3.5v2.5h-2.9c-1,0-1.9-1.1-1.9-2.5c0-1.3,0.9-2.5,1.9-2.5h10.4
146
+ v-2H38.2c-2.1,0-3.9,2-3.9,4.5S36.1,20.8,38.2,20.8z"
147
+ ></path>
148
+ <path
149
+ id="北左转_1_"
150
+ :stroke-width="PathWidth"
151
+ :fill="status[9].color"
152
+ :class="status[9].isshow ? '' : 'invisible'"
153
+ d="M13.2,15.9V0l-2,0v16c0,2.1,1.7,3.8,3.8,3.9l1.9,0.3l-0.3,2.5L23,20l-5.4-4.3l-0.3,2.5
154
+ l-2.2-0.3C14.1,17.8,13.2,17,13.2,15.9L13.2,15.9z"
155
+ ></path>
156
+ <path
157
+ id="北右转_1_"
158
+ :stroke-width="PathWidth"
159
+ :fill="status[10].color"
160
+ :class="status[10].isshow ? '' : 'invisible'"
161
+ d="M9.2,17.9l-2,0.3l-0.3-2.5L1.4,20l6.4,2.6l-0.3-2.5l1.9-0.3c2.1,0,3.8-1.7,3.8-3.9V0l-2,0
162
+ v16c0,1-0.9,1.9-1.9,1.9C9.3,17.9,9.2,17.9,9.2,17.9z"
163
+ ></path>
164
+ <polygon
165
+ id="北直行_1_"
166
+ :stroke-width="PathWidth"
167
+ :fill="status[8].color"
168
+ :class="status[8].isshow ? '' : 'invisible'"
169
+ points="11.2,0 11.2,23.2 8.8,23.2 12.2,29.3 15.7,23.2 13.2,23.2 13.2,0"
170
+ ></polygon>
171
+ <path
172
+ id="北调头_1_"
173
+ :stroke-width="PathWidth"
174
+ :fill="status[11].color"
175
+ :class="status[11].isshow ? '' : 'invisible'"
176
+ d="M20.2,10.4V7.5h2.5l-3.5-6l-3.5,6h2.5v2.9c0,1-1.1,1.9-2.5,1.9s-2.5-0.9-2.5-1.9V0l-2,0
177
+ v10.4c0,2.1,2,3.9,4.5,3.9C18.2,14.2,20.2,12.5,20.2,10.4z"
178
+ ></path>
179
+ </g>
177
180
 
178
- <!-- ====================================左行相位图标合集============================================= -->
179
- <g id="组-左行" v-if="roadDirection === 'left'">
180
- <path
181
- id="东右转-左行"
182
- :stroke-width="PathWidth"
183
- :fill="status[2].color"
184
- :class="status[2].isshow ? '' : 'invisible'"
185
- d="M32.7,36.3c-1.1,0-1.9-0.8-2.1-1.9l-0.3-2.2l2.5-0.3l-4.3-5.4l-2.6,6.4l2.5-0.3l0.3,1.9
186
- c0.1,2.1,1.8,3.8,3.9,3.8h16v-2H32.7L32.7,36.3z"
187
- ></path>
188
- <path
189
- id="东左转-左行"
190
- :stroke-width="PathWidth"
191
- :fill="status[1].color"
192
- :class="status[1].isshow ? '' : 'invisible'"
193
- d="M32.7,38.3h15.9v-2h-16c-2.1,0-3.8,1.7-3.9,3.8L28.4,42l-2.5-0.3l2.6,6.4l4.3-5.4
194
- l-2.5-0.3l0.3-2.2C30.8,39.1,31.6,38.3,32.7,38.3L32.7,38.3z"
195
- ></path>
196
- <polygon
197
- id="东直行-左行"
198
- :stroke-width="PathWidth"
199
- :fill="status[0].color"
200
- :class="status[0].isshow ? '' : 'invisible'"
201
- points="48.6,36.3 25.4,36.3 25.4,33.9 19.3,37.3 25.4,40.8 25.4,38.3 48.6,38.3"
202
- ></polygon>
203
- <path
204
- id="东调头-左行"
205
- class="st0"
206
- :stroke-width="PathWidth"
207
- :fill="status[3].color"
208
- :class="status[3].isshow ? '' : 'invisible'"
209
- d="M34.3,33.8c0,2.5,1.8,4.5,3.9,4.5h10.4v-2H38.2c-1,0-1.9-1.2-1.9-2.5
210
- c0-1.4,0.9-2.5,1.9-2.5h2.9v2.5l6-3.5l-6-3.5v2.4h-2.9C36.1,29.2,34.4,31.2,34.3,33.8z"
211
- ></path>
212
- <path
213
- id="南左转-左行"
214
- :stroke-width="PathWidth"
215
- :fill="status[13].color"
216
- :class="status[13].isshow ? '' : 'invisible'"
217
- d="M9.3,32c1,0,1.9,0.9,1.9,1.9V50h2V34c0-2.2-1.7-3.9-3.8-3.9l-1.9-0.3l0.3-2.5l-6.4,2.6
218
- l5.4,4.3l0.3-2.5l2,0.3H9.3z"
219
- ></path>
220
- <path
221
- id="南右转-左行"
222
- :stroke-width="PathWidth"
223
- :fill="status[14].color"
224
- :class="status[14].isshow ? '' : 'invisible'"
225
- d="M13.2,34.1c0-1.1,0.9-1.9,1.9-2l2.2-0.3l0.3,2.5L23,30l-6.4-2.7l0.3,2.5L15,30.1
226
- c-2.1,0.1-3.8,1.8-3.8,3.9v16h2V34.1L13.2,34.1z"
227
- ></path>
228
- <polygon
229
- id="南直行-左行"
230
- :stroke-width="PathWidth"
231
- :fill="status[12].color"
232
- :class="status[12].isshow ? '' : 'invisible'"
233
- points="13.2,50 13.2,26.8 15.7,26.8 12.2,20.7 8.8,26.8 11.2,26.8 11.2,50"
234
- ></polygon>
235
- <path
236
- id="南调头-左行"
237
- :stroke-width="PathWidth"
238
- :fill="status[15].color"
239
- :class="status[15].isshow ? '' : 'invisible'"
240
- d="M15.7,35.7c-2.5,0-4.5,1.8-4.5,3.9V50h2V39.6c0-1,1.2-1.9,2.5-1.9
241
- c1.4,0,2.5,0.9,2.5,1.9v2.9h-2.5l3.5,6l3.5-6h-2.5v-2.9C20.2,37.5,18.2,35.8,15.7,35.7z"
242
- ></path>
243
- <path
244
- id="西右转-左行"
245
- :stroke-width="PathWidth"
246
- :fill="status[6].color"
247
- :class="status[6].isshow ? '' : 'invisible'"
248
- d="M17.3,13.7c1.1,0,1.9,0.8,2,1.9l0.3,2.2l-2.5,0.3l4.3,5.4l2.6-6.4l-2.4,0.3l-0.3-1.9
249
- c-0.1-2.1-1.8-3.8-3.9-3.8h-16v2L17.3,13.7L17.3,13.7z"
250
- ></path>
251
- <path
252
- id="西左转-左行"
253
- :stroke-width="PathWidth"
254
- :fill="status[5].color"
255
- :class="status[5].isshow ? '' : 'invisible'"
256
- d="M17.3,11.7H1.4v2h16c2.1,0,3.8-1.7,3.9-3.8L21.6,8L24,8.3l-2.6-6.4l-4.3,5.4l2.5,0.3
257
- l-0.3,2.2C19.2,10.9,18.4,11.7,17.3,11.7L17.3,11.7z"
258
- ></path>
259
- <polygon
260
- id="西直行-左行"
261
- :stroke-width="PathWidth"
262
- :fill="status[4].color"
263
- :class="status[4].isshow ? '' : 'invisible'"
264
- points="1.4,13.7 24.6,13.7 24.6,16.1 30.7,12.7 24.6,9.2 24.6,11.7 1.4,11.7"
265
- ></polygon>
266
- <path
267
- id="西调头-左行"
268
- :stroke-width="PathWidth"
269
- :fill="status[7].color"
270
- :class="status[7].isshow ? '' : 'invisible'"
271
- d="M15.7,16.2c0-2.5-1.8-4.5-3.9-4.5H1.4v2h10.4c1,0,1.9,1.2,1.9,2.5
272
- c0,1.4-0.9,2.5-1.9,2.5H8.9v-2.5l-6,3.5l6,3.5v-2.4h2.9C13.9,20.8,15.7,18.7,15.7,16.2z"
273
- ></path>
274
- <path
275
- id="北左转-左行"
276
- :stroke-width="PathWidth"
277
- :fill="status[9].color"
278
- :class="status[9].isshow ? '' : 'invisible'"
279
- d="M40.7,17.9c-1,0-1.9-0.9-1.9-1.9V0h-2v15.9c0,2.2,1.7,3.9,3.8,3.9l1.9,0.3l-0.3,2.5
280
- l6.4-2.6l-5.5-4.3l-0.3,2.5l-2-0.3C40.8,17.9,40.7,17.9,40.7,17.9z"
281
- ></path>
282
- <path
283
- id="北右转-左行"
284
- :stroke-width="PathWidth"
285
- :fill="status[10].color"
286
- :class="status[10].isshow ? '' : 'invisible'"
287
- d="M36.8,15.9c0,1.1-0.9,1.9-1.9,2l-2.2,0.3l-0.3-2.5L27,20l6.4,2.7l-0.3-2.5l1.9-0.3
288
- c2.1-0.1,3.8-1.8,3.8-3.9V0h-2L36.8,15.9L36.8,15.9z"
289
- ></path>
290
- <polygon
291
- id="北直行-左行"
292
- :stroke-width="PathWidth"
293
- :fill="status[8].color"
294
- :class="status[8].isshow ? '' : 'invisible'"
295
- points="36.8,0 36.8,23.2 34.3,23.2 37.8,29.3 41.2,23.2 38.8,23.2 38.8,0"
296
- ></polygon>
297
- <path
298
- id="北调头-左行"
299
- :stroke-width="PathWidth"
300
- :fill="status[11].color"
301
- :class="status[11].isshow ? '' : 'invisible'"
302
- d="M34.3,14.3c2.5,0,4.5-1.8,4.5-3.9V0h-2v10.4c0,1-1.1,1.9-2.5,1.9s-2.5-0.9-2.5-1.9V7.5
303
- h2.5l-3.5-6l-3.5,6h2.5v2.9C29.8,12.5,31.8,14.2,34.3,14.3z"
304
- ></path>
305
- </g>
306
- </svg>
181
+ <!-- ====================================左行相位图标合集============================================= -->
182
+ <g id="组-左行" v-if="roadDirection === 'left'">
183
+ <path
184
+ id="东右转-左行"
185
+ :stroke-width="PathWidth"
186
+ :fill="status[2].color"
187
+ :class="status[2].isshow ? '' : 'invisible'"
188
+ d="M32.7,36.3c-1.1,0-1.9-0.8-2.1-1.9l-0.3-2.2l2.5-0.3l-4.3-5.4l-2.6,6.4l2.5-0.3l0.3,1.9
189
+ c0.1,2.1,1.8,3.8,3.9,3.8h16v-2H32.7L32.7,36.3z"
190
+ ></path>
191
+ <path
192
+ id="东左转-左行"
193
+ :stroke-width="PathWidth"
194
+ :fill="status[1].color"
195
+ :class="status[1].isshow ? '' : 'invisible'"
196
+ d="M32.7,38.3h15.9v-2h-16c-2.1,0-3.8,1.7-3.9,3.8L28.4,42l-2.5-0.3l2.6,6.4l4.3-5.4
197
+ l-2.5-0.3l0.3-2.2C30.8,39.1,31.6,38.3,32.7,38.3L32.7,38.3z"
198
+ ></path>
199
+ <polygon
200
+ id="东直行-左行"
201
+ :stroke-width="PathWidth"
202
+ :fill="status[0].color"
203
+ :class="status[0].isshow ? '' : 'invisible'"
204
+ points="48.6,36.3 25.4,36.3 25.4,33.9 19.3,37.3 25.4,40.8 25.4,38.3 48.6,38.3"
205
+ ></polygon>
206
+ <path
207
+ id="东调头-左行"
208
+ class="st0"
209
+ :stroke-width="PathWidth"
210
+ :fill="status[3].color"
211
+ :class="status[3].isshow ? '' : 'invisible'"
212
+ d="M34.3,33.8c0,2.5,1.8,4.5,3.9,4.5h10.4v-2H38.2c-1,0-1.9-1.2-1.9-2.5
213
+ c0-1.4,0.9-2.5,1.9-2.5h2.9v2.5l6-3.5l-6-3.5v2.4h-2.9C36.1,29.2,34.4,31.2,34.3,33.8z"
214
+ ></path>
215
+ <path
216
+ id="南左转-左行"
217
+ :stroke-width="PathWidth"
218
+ :fill="status[13].color"
219
+ :class="status[13].isshow ? '' : 'invisible'"
220
+ d="M9.3,32c1,0,1.9,0.9,1.9,1.9V50h2V34c0-2.2-1.7-3.9-3.8-3.9l-1.9-0.3l0.3-2.5l-6.4,2.6
221
+ l5.4,4.3l0.3-2.5l2,0.3H9.3z"
222
+ ></path>
223
+ <path
224
+ id="南右转-左行"
225
+ :stroke-width="PathWidth"
226
+ :fill="status[14].color"
227
+ :class="status[14].isshow ? '' : 'invisible'"
228
+ d="M13.2,34.1c0-1.1,0.9-1.9,1.9-2l2.2-0.3l0.3,2.5L23,30l-6.4-2.7l0.3,2.5L15,30.1
229
+ c-2.1,0.1-3.8,1.8-3.8,3.9v16h2V34.1L13.2,34.1z"
230
+ ></path>
231
+ <polygon
232
+ id="南直行-左行"
233
+ :stroke-width="PathWidth"
234
+ :fill="status[12].color"
235
+ :class="status[12].isshow ? '' : 'invisible'"
236
+ points="13.2,50 13.2,26.8 15.7,26.8 12.2,20.7 8.8,26.8 11.2,26.8 11.2,50"
237
+ ></polygon>
238
+ <path
239
+ id="南调头-左行"
240
+ :stroke-width="PathWidth"
241
+ :fill="status[15].color"
242
+ :class="status[15].isshow ? '' : 'invisible'"
243
+ d="M15.7,35.7c-2.5,0-4.5,1.8-4.5,3.9V50h2V39.6c0-1,1.2-1.9,2.5-1.9
244
+ c1.4,0,2.5,0.9,2.5,1.9v2.9h-2.5l3.5,6l3.5-6h-2.5v-2.9C20.2,37.5,18.2,35.8,15.7,35.7z"
245
+ ></path>
246
+ <path
247
+ id="西右转-左行"
248
+ :stroke-width="PathWidth"
249
+ :fill="status[6].color"
250
+ :class="status[6].isshow ? '' : 'invisible'"
251
+ d="M17.3,13.7c1.1,0,1.9,0.8,2,1.9l0.3,2.2l-2.5,0.3l4.3,5.4l2.6-6.4l-2.4,0.3l-0.3-1.9
252
+ c-0.1-2.1-1.8-3.8-3.9-3.8h-16v2L17.3,13.7L17.3,13.7z"
253
+ ></path>
254
+ <path
255
+ id="西左转-左行"
256
+ :stroke-width="PathWidth"
257
+ :fill="status[5].color"
258
+ :class="status[5].isshow ? '' : 'invisible'"
259
+ d="M17.3,11.7H1.4v2h16c2.1,0,3.8-1.7,3.9-3.8L21.6,8L24,8.3l-2.6-6.4l-4.3,5.4l2.5,0.3
260
+ l-0.3,2.2C19.2,10.9,18.4,11.7,17.3,11.7L17.3,11.7z"
261
+ ></path>
262
+ <polygon
263
+ id="西直行-左行"
264
+ :stroke-width="PathWidth"
265
+ :fill="status[4].color"
266
+ :class="status[4].isshow ? '' : 'invisible'"
267
+ points="1.4,13.7 24.6,13.7 24.6,16.1 30.7,12.7 24.6,9.2 24.6,11.7 1.4,11.7"
268
+ ></polygon>
269
+ <path
270
+ id="西调头-左行"
271
+ :stroke-width="PathWidth"
272
+ :fill="status[7].color"
273
+ :class="status[7].isshow ? '' : 'invisible'"
274
+ d="M15.7,16.2c0-2.5-1.8-4.5-3.9-4.5H1.4v2h10.4c1,0,1.9,1.2,1.9,2.5
275
+ c0,1.4-0.9,2.5-1.9,2.5H8.9v-2.5l-6,3.5l6,3.5v-2.4h2.9C13.9,20.8,15.7,18.7,15.7,16.2z"
276
+ ></path>
277
+ <path
278
+ id="北左转-左行"
279
+ :stroke-width="PathWidth"
280
+ :fill="status[9].color"
281
+ :class="status[9].isshow ? '' : 'invisible'"
282
+ d="M40.7,17.9c-1,0-1.9-0.9-1.9-1.9V0h-2v15.9c0,2.2,1.7,3.9,3.8,3.9l1.9,0.3l-0.3,2.5
283
+ l6.4-2.6l-5.5-4.3l-0.3,2.5l-2-0.3C40.8,17.9,40.7,17.9,40.7,17.9z"
284
+ ></path>
285
+ <path
286
+ id="北右转-左行"
287
+ :stroke-width="PathWidth"
288
+ :fill="status[10].color"
289
+ :class="status[10].isshow ? '' : 'invisible'"
290
+ d="M36.8,15.9c0,1.1-0.9,1.9-1.9,2l-2.2,0.3l-0.3-2.5L27,20l6.4,2.7l-0.3-2.5l1.9-0.3
291
+ c2.1-0.1,3.8-1.8,3.8-3.9V0h-2L36.8,15.9L36.8,15.9z"
292
+ ></path>
293
+ <polygon
294
+ id="北直行-左行"
295
+ :stroke-width="PathWidth"
296
+ :fill="status[8].color"
297
+ :class="status[8].isshow ? '' : 'invisible'"
298
+ points="36.8,0 36.8,23.2 34.3,23.2 37.8,29.3 41.2,23.2 38.8,23.2 38.8,0"
299
+ ></polygon>
300
+ <path
301
+ id="北调头-左行"
302
+ :stroke-width="PathWidth"
303
+ :fill="status[11].color"
304
+ :class="status[11].isshow ? '' : 'invisible'"
305
+ d="M34.3,14.3c2.5,0,4.5-1.8,4.5-3.9V0h-2v10.4c0,1-1.1,1.9-2.5,1.9s-2.5-0.9-2.5-1.9V7.5
306
+ h2.5l-3.5-6l-3.5,6h2.5v2.9C29.8,12.5,31.8,14.2,34.3,14.3z"
307
+ ></path>
308
+ </g>
309
+ </svg>
310
+ </div>
311
+ <div :style="{position: 'absolute', left: Data?Data.left:0, top: Data?Data.top:0}">
312
+ <svg
313
+ :width="Width"
314
+ :height="Height"
315
+ version="1.1"
316
+ id="图层_1"
317
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
318
+ viewBox="0 0 34 34"
319
+ style="enable-background:new 0 0 34 34;"
320
+ xml:space="preserve">
321
+ <g id="路段行人过街-东西"
322
+ :class="peoplestatus[0].isshow? '' : 'invisible'">
323
+ <rect x="19.9" y="14.2" class="st1" width="1.6" height="5.6"/>
324
+ <rect x="17.4" y="14.2" class="st1" width="1.6" height="5.6"/>
325
+ <rect x="22.4" y="14.2" class="st1" width="1.6" height="5.6"/>
326
+ <rect x="24.9" y="14.2" class="st1" width="1.6" height="5.6"/>
327
+ <rect x="27.4" y="14.2" class="st1" width="1.6" height="5.6"/>
328
+ <rect x="29.9" y="14.2" class="st1" width="1.6" height="5.6"/>
329
+ <rect x="32.4" y="14.2" class="st1" width="1.6" height="5.6"/>
330
+ <rect x="7.5" y="14.2" class="st1" width="1.6" height="5.6"/>
331
+ <rect x="5" y="14.2" class="st1" width="1.6" height="5.6"/>
332
+ <rect x="2.5" y="14.2" class="st1" width="1.6" height="5.6"/>
333
+ <rect x="0" y="14.2" class="st1" width="1.6" height="5.6"/>
334
+ <rect x="10" y="14.2" class="st1" width="1.6" height="5.6"/>
335
+ <rect x="12.5" y="14.2" class="st1" width="1.6" height="5.6"/>
336
+ <rect x="14.9" y="14.2" class="st1" width="1.6" height="5.6"/>
337
+ </g>
338
+ <g id="路段行人过街-南北" class="st0"
339
+ :class="peoplestatus[1].isshow? '' : 'invisible'">
340
+ >
341
+ <rect x="14.2" y="19.9" class="st1" width="5.6" height="1.6"/>
342
+ <rect x="14.2" y="17.4" class="st1" width="5.6" height="1.6"/>
343
+ <rect x="14.2" y="22.4" class="st1" width="5.6" height="1.6"/>
344
+ <rect x="14.2" y="24.9" class="st1" width="5.6" height="1.6"/>
345
+ <rect x="14.2" y="27.4" class="st1" width="5.6" height="1.6"/>
346
+ <rect x="14.2" y="29.9" class="st1" width="5.6" height="1.6"/>
347
+ <rect x="14.2" y="32.4" class="st1" width="5.6" height="1.6"/>
348
+ <rect x="14.2" y="7.5" class="st1" width="5.6" height="1.6"/>
349
+ <rect x="14.2" y="5" class="st1" width="5.6" height="1.6"/>
350
+ <rect x="14.2" y="2.5" class="st1" width="5.6" height="1.6"/>
351
+ <rect x="14.2" y="0" class="st1" width="5.6" height="1.6"/>
352
+ <rect x="14.2" y="10" class="st1" width="5.6" height="1.6"/>
353
+ <rect x="14.2" y="12.5" class="st1" width="5.6" height="1.6"/>
354
+ <rect x="14.2" y="14.9" class="st1" width="5.6" height="1.6"/>
355
+ </g>
356
+ <g id="斜向行人1" class="st0"
357
+ :class="peoplestatus[2].isshow? '' : 'invisible'">
358
+ >
359
+ <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"/>
360
+ <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"/>
361
+ <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"/>
362
+ <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"/>
363
+ <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"/>
364
+ <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"/>
365
+ <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"/>
366
+ <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"/>
367
+ <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"/>
368
+ <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"/>
369
+ <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"/>
370
+ <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"/>
371
+ <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"/>
372
+ <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"/>
373
+ <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"/>
374
+ <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"/>
375
+ <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"/>
376
+ </g>
377
+ <g id="斜向行人2" class="st0"
378
+ :class="peoplestatus[3].isshow? '' : 'invisible'"
379
+ >
380
+ <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"/>
381
+ <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"/>
382
+ <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"/>
383
+ <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"/>
384
+
385
+ <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"/>
386
+ <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"/>
387
+ <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"/>
388
+ <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"/>
389
+ <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"/>
390
+ <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"/>
391
+ <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"/>
392
+ <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"/>
393
+ <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"/>
394
+ <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"/>
395
+
396
+ <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"/>
397
+ <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"/>
398
+ <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"/>
399
+ </g>
400
+ <g id="北行人"
401
+ :class="peoplestatus[4].isshow? '' : 'invisible'"
402
+ class="st0">
403
+ <rect x="19.9" class="st1" width="1.6" height="5.6"/>
404
+ <rect x="17.4" class="st1" width="1.6" height="5.6"/>
405
+ <rect x="22.4" class="st1" width="1.6" height="5.6"/>
406
+ <rect x="24.9" class="st1" width="1.6" height="5.6"/>
407
+ <rect x="27.4" class="st1" width="1.6" height="5.6"/>
408
+ <rect x="29.9" class="st1" width="1.6" height="5.6"/>
409
+ <rect x="32.4" class="st1" width="1.6" height="5.6"/>
410
+ <rect x="7.5" class="st1" width="1.6" height="5.6"/>
411
+ <rect x="5" class="st1" width="1.6" height="5.6"/>
412
+ <rect x="2.5" class="st1" width="1.6" height="5.6"/>
413
+ <rect x="0" class="st1" width="1.6" height="5.6"/>
414
+ <rect x="10" class="st1" width="1.6" height="5.6"/>
415
+ <rect x="12.5" class="st1" width="1.6" height="5.6"/>
416
+ <rect x="14.9" class="st1" width="1.6" height="5.6"/>
417
+ </g>
418
+ <g id="南行人"
419
+ :class="peoplestatus[5].isshow? '' : 'invisible'"
420
+ class="st0">
421
+ <rect x="19.9" y="28.4" class="st1" width="1.6" height="5.6"/>
422
+ <rect x="17.4" y="28.4" class="st1" width="1.6" height="5.6"/>
423
+ <rect x="22.4" y="28.4" class="st1" width="1.6" height="5.6"/>
424
+ <rect x="24.9" y="28.4" class="st1" width="1.6" height="5.6"/>
425
+ <rect x="27.4" y="28.4" class="st1" width="1.6" height="5.6"/>
426
+ <rect x="29.9" y="28.4" class="st1" width="1.6" height="5.6"/>
427
+ <rect x="32.4" y="28.4" class="st1" width="1.6" height="5.6"/>
428
+ <rect x="7.5" y="28.4" class="st1" width="1.6" height="5.6"/>
429
+ <rect x="5" y="28.4" class="st1" width="1.6" height="5.6"/>
430
+ <rect x="2.5" y="28.4" class="st1" width="1.6" height="5.6"/>
431
+ <rect x="0" y="28.4" class="st1" width="1.6" height="5.6"/>
432
+ <rect x="10" y="28.4" class="st1" width="1.6" height="5.6"/>
433
+ <rect x="12.5" y="28.4" class="st1" width="1.6" height="5.6"/>
434
+ <rect x="14.9" y="28.4" class="st1" width="1.6" height="5.6"/>
435
+ </g>
436
+ <g id="东行人"
437
+ :class="peoplestatus[6].isshow? '' : 'invisible'"
438
+ class="st0">
439
+ <rect x="28.4" y="19.9" class="st1" width="5.6" height="1.6"/>
440
+ <rect x="28.4" y="17.4" class="st1" width="5.6" height="1.6"/>
441
+ <rect x="28.4" y="22.4" class="st1" width="5.6" height="1.6"/>
442
+ <rect x="28.4" y="24.9" class="st1" width="5.6" height="1.6"/>
443
+ <rect x="28.4" y="27.4" class="st1" width="5.6" height="1.6"/>
444
+ <rect x="28.4" y="29.9" class="st1" width="5.6" height="1.6"/>
445
+ <rect x="28.4" y="32.4" class="st1" width="5.6" height="1.6"/>
446
+ <rect x="28.4" y="7.5" class="st1" width="5.6" height="1.6"/>
447
+ <rect x="28.4" y="5" class="st1" width="5.6" height="1.6"/>
448
+ <rect x="28.4" y="2.5" class="st1" width="5.6" height="1.6"/>
449
+ <rect x="28.4" y="0" class="st1" width="5.6" height="1.6"/>
450
+ <rect x="28.4" y="10" class="st1" width="5.6" height="1.6"/>
451
+ <rect x="28.4" y="12.5" class="st1" width="5.6" height="1.6"/>
452
+ <rect x="28.4" y="14.9" class="st1" width="5.6" height="1.6"/>
453
+ </g>
454
+ <g id="西行人"
455
+ :class="peoplestatus[7].isshow? '' : 'invisible'"
456
+ class="st0">
457
+ <rect y="19.9" class="st1" width="5.6" height="1.6"/>
458
+ <rect y="17.4" class="st1" width="5.6" height="1.6"/>
459
+ <rect y="22.4" class="st1" width="5.6" height="1.6"/>
460
+ <rect y="24.9" class="st1" width="5.6" height="1.6"/>
461
+ <rect y="27.4" class="st1" width="5.6" height="1.6"/>
462
+ <rect y="29.9" class="st1" width="5.6" height="1.6"/>
463
+ <rect y="32.4" class="st1" width="5.6" height="1.6"/>
464
+ <rect y="7.5" class="st1" width="5.6" height="1.6"/>
465
+ <rect y="5" class="st1" width="5.6" height="1.6"/>
466
+ <rect y="2.5" class="st1" width="5.6" height="1.6"/>
467
+ <rect y="0" class="st1" width="5.6" height="1.6"/>
468
+ <rect y="10" class="st1" width="5.6" height="1.6"/>
469
+ <rect y="12.5" class="st1" width="5.6" height="1.6"/>
470
+ <rect y="14.9" class="st1" width="5.6" height="1.6"/>
471
+ </g>
472
+ <g id="二次过街-西" class="st0">
473
+ <g id="西下"
474
+ :class="peoplestatus[8].isshow? '' : 'invisible'"
475
+ >
476
+ <rect y="19.9" class="st1" width="5.6" height="1.6"/>
477
+ <rect y="22.4" class="st1" width="5.6" height="1.6"/>
478
+ <rect y="24.9" class="st1" width="5.6" height="1.6"/>
479
+ <rect y="27.4" class="st1" width="5.6" height="1.6"/>
480
+ <rect y="29.9" class="st1" width="5.6" height="1.6"/>
481
+ <rect y="32.4" class="st1" width="5.6" height="1.6"/>
482
+ </g>
483
+ <g id="西上"
484
+ :class="peoplestatus[9].isshow? '' : 'invisible'"
485
+ >
486
+ <rect y="7.5" class="st1" width="5.6" height="1.6"/>
487
+ <rect y="5" class="st1" width="5.6" height="1.6"/>
488
+ <rect y="2.5" class="st1" width="5.6" height="1.6"/>
489
+ <rect y="0" class="st1" width="5.6" height="1.6"/>
490
+ <rect y="10" class="st1" width="5.6" height="1.6"/>
491
+ <rect y="12.5" class="st1" width="5.6" height="1.6"/>
492
+ </g>
493
+ </g>
494
+ <g id="二次过街-东" class="st0">
495
+ <g id="东上"
496
+ :class="peoplestatus[10].isshow? '' : 'invisible'"
497
+ >
498
+ <rect x="28.4" y="12.5" class="st1" width="5.6" height="1.6"/>
499
+ <rect x="28.4" y="10" class="st1" width="5.6" height="1.6"/>
500
+ <rect x="28.4" y="7.5" class="st1" width="5.6" height="1.6"/>
501
+ <rect x="28.4" y="5" class="st1" width="5.6" height="1.6"/>
502
+ <rect x="28.4" y="2.5" class="st1" width="5.6" height="1.6"/>
503
+ <rect x="28.4" y="0" class="st1" width="5.6" height="1.6"/>
504
+ </g>
505
+ <g id="东下"
506
+ :class="peoplestatus[11].isshow? '' : 'invisible'"
507
+ >
508
+ <rect x="28.4" y="24.9" class="st1" width="5.6" height="1.6"/>
509
+ <rect x="28.4" y="27.4" class="st1" width="5.6" height="1.6"/>
510
+ <rect x="28.4" y="29.9" class="st1" width="5.6" height="1.6"/>
511
+ <rect x="28.4" y="32.4" class="st1" width="5.6" height="1.6"/>
512
+ <rect x="28.4" y="22.4" class="st1" width="5.6" height="1.6"/>
513
+ <rect x="28.4" y="19.9" class="st1" width="5.6" height="1.6"/>
514
+ </g>
515
+ </g>
516
+ <g id="二次过街-南" class="st0">
517
+ <g id="南右"
518
+ :class="peoplestatus[12].isshow? '' : 'invisible'"
519
+ >
520
+ <rect x="19.9" y="28.4" class="st1" width="1.6" height="5.6"/>
521
+ <rect x="22.4" y="28.4" class="st1" width="1.6" height="5.6"/>
522
+ <rect x="24.9" y="28.4" class="st1" width="1.6" height="5.6"/>
523
+ <rect x="27.4" y="28.4" class="st1" width="1.6" height="5.6"/>
524
+ <rect x="29.9" y="28.4" class="st1" width="1.6" height="5.6"/>
525
+ <rect x="32.4" y="28.4" class="st1" width="1.6" height="5.6"/>
526
+ </g>
527
+ <g id="南左"
528
+ :class="peoplestatus[13].isshow? '' : 'invisible'"
529
+ >
530
+ <rect x="7.5" y="28.4" class="st1" width="1.6" height="5.6"/>
531
+ <rect x="5" y="28.4" class="st1" width="1.6" height="5.6"/>
532
+ <rect x="2.5" y="28.4" class="st1" width="1.6" height="5.6"/>
533
+ <rect x="0" y="28.4" class="st1" width="1.6" height="5.6"/>
534
+ <rect x="10" y="28.4" class="st1" width="1.6" height="5.6"/>
535
+ <rect x="12.5" y="28.4" class="st1" width="1.6" height="5.6"/>
536
+ </g>
537
+ </g>
538
+ <g id="二次过街-北_1_" class="st0">
539
+ <g id="北右_1_"
540
+ :class="peoplestatus[14].isshow? '' : 'invisible'"
541
+ >
542
+ <rect x="19.9" class="st1" width="1.6" height="5.6"/>
543
+ <rect x="22.4" class="st1" width="1.6" height="5.6"/>
544
+ <rect x="24.9" class="st1" width="1.6" height="5.6"/>
545
+ <rect x="27.4" class="st1" width="1.6" height="5.6"/>
546
+ <rect x="29.9" class="st1" width="1.6" height="5.6"/>
547
+ <rect x="32.4" class="st1" width="1.6" height="5.6"/>
548
+ </g>
549
+ <g id="北左_1_"
550
+ :class="peoplestatus[15].isshow? '' : 'invisible'"
551
+ >
552
+ <rect x="7.5" class="st1" width="1.6" height="5.6"/>
553
+ <rect x="5" class="st1" width="1.6" height="5.6"/>
554
+ <rect x="2.5" class="st1" width="1.6" height="5.6"/>
555
+ <rect x="0" class="st1" width="1.6" height="5.6"/>
556
+ <rect x="10" class="st1" width="1.6" height="5.6"/>
557
+ <rect x="12.5" class="st1" width="1.6" height="5.6"/>
558
+ </g>
559
+ </g>
560
+ </svg>
561
+ </div>
562
+ <!-- </div> -->
563
+ </div>
307
564
  </template>
308
565
  <script>
309
566
  // import { mapState } from 'vuex'
@@ -348,6 +605,9 @@ export default {
348
605
  roadDirection: {
349
606
  type: String,
350
607
  default: 'right'
608
+ },
609
+ Data: {
610
+ type: Object
351
611
  }
352
612
 
353
613
  },
@@ -359,6 +619,104 @@ export default {
359
619
  data () {
360
620
  return {
361
621
  maskmark: false,
622
+ peoplestatus: [
623
+ {
624
+ id: 1,
625
+ name: '东西路段人行横道',
626
+ isshow: false,
627
+ color: '#0096ba'
628
+ },
629
+ {
630
+ id: 2,
631
+ name: '南北路段人行横道',
632
+ isshow: false,
633
+ color: '#0096ba'
634
+ },
635
+ {
636
+ id: 3,
637
+ name: 'X人行横道-\\',
638
+ isshow: false,
639
+ color: '#0096ba'
640
+ },
641
+ {
642
+ id: 4,
643
+ name: 'X人行横道-/',
644
+ isshow: false,
645
+ color: '#0096ba'
646
+ },
647
+ {
648
+ id: 5,
649
+ name: '北人行横道',
650
+ isshow: false,
651
+ color: '#0096ba'
652
+ },
653
+ {
654
+ id: 6,
655
+ name: '南人行横道',
656
+ isshow: false,
657
+ color: '#0096ba'
658
+ },
659
+ {
660
+ id: 7,
661
+ name: '东人行横道',
662
+ isshow: false,
663
+ color: '#0096ba'
664
+ },
665
+ {
666
+ id: 8,
667
+ name: '西人行横道',
668
+ isshow: false,
669
+ color: '#0096ba'
670
+ },
671
+ {
672
+ id: 9,
673
+ name: '西人行横道-下',
674
+ isshow: false,
675
+ color: '#0096ba'
676
+ },
677
+ {
678
+ id: 10,
679
+ name: '西人行横道-上',
680
+ isshow: false,
681
+ color: '#0096ba'
682
+ },
683
+ {
684
+ id: 11,
685
+ name: '东人行横道-上',
686
+ isshow: false,
687
+ color: '#0096ba'
688
+ },
689
+ {
690
+ id: 12,
691
+ name: '东人行横道-下',
692
+ isshow: false,
693
+ color: '#0096ba'
694
+ },
695
+ {
696
+ id: 13,
697
+ name: '南人行横道-右',
698
+ isshow: false,
699
+ color: '#0096ba'
700
+ },
701
+ {
702
+ id: 14,
703
+ name: '南人行横道-左',
704
+ isshow: false,
705
+ color: '#0096ba'
706
+ },
707
+ {
708
+ id: 15,
709
+ name: '北人行横道-右',
710
+ isshow: false,
711
+ color: '#0096ba'
712
+ },
713
+ {
714
+ id: 16,
715
+ name: '北人行横道-左',
716
+ isshow: false,
717
+ color: '#0096ba'
718
+ }
719
+ ],
362
720
  status: [
363
721
  {
364
722
  id: 1,
@@ -491,6 +849,7 @@ export default {
491
849
  for (let i = 0; i < 16; i++) {
492
850
  if (i < showList.length) {
493
851
  let id = showList[i].id
852
+ if (!id) return
494
853
  if (id > 16 || id <= 0) {
495
854
  console.log('Id is invalied!')
496
855
  continue
@@ -499,15 +858,33 @@ export default {
499
858
  this.status[id - 1].color = showList[i].color
500
859
  }
501
860
  }
861
+ },
862
+ refreshShows (showlist) {
863
+ for (let i = 0; i < 16; i++) {
864
+ if (this.peoplestatus[i].isshow) {
865
+ this.peoplestatus[i].isshow = false
866
+ }
867
+ }
868
+ if (!showlist[0].peddirection) return
869
+ if (showlist[0].peddirection.length === 0) return
870
+ for (let i = 0; i < showlist[0].peddirection.length; i++) {
871
+ for (let j = 0; j < this.peoplestatus.length; j++) {
872
+ if (showlist[0].peddirection[i].name === this.peoplestatus[j].name) {
873
+ this.peoplestatus[j].isshow = true
874
+ }
875
+ }
876
+ }
502
877
  }
503
878
  },
504
879
  created () {
505
880
  this.refreshShow(this.showlist)
881
+ this.refreshShows(this.showlist)
506
882
  },
507
883
  watch: {
508
884
  showlist: {
509
885
  handler: function (newList) {
510
886
  this.refreshShow(newList)
887
+ this.refreshShows(newList)
511
888
  },
512
889
  deep: true // 深度监听
513
890
  }
@@ -519,4 +896,6 @@ export default {
519
896
  .invisible {
520
897
  visibility: hidden;
521
898
  }
899
+ .st0{opacity:0.5;}
900
+ .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#303133;}
522
901
  </style>