openatc-components 0.2.61 → 0.2.62

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "openatc-components",
3
- "version": "0.2.61",
3
+ "version": "0.2.62",
4
4
  "description": "A Vue.js project",
5
5
  "author": "openatc developer",
6
6
  "private": false,
@@ -610,6 +610,7 @@ export default {
610
610
  // if (stg === walk.phaseid) {
611
611
  let objs = {}
612
612
  objs.name = walk.name
613
+ objs.color = 'rgba(48,49,51,0.6)'
613
614
  objs.id = walk.id
614
615
  if (ped === walk.id) {
615
616
  peddirections.push(objs)
@@ -625,7 +626,7 @@ export default {
625
626
  obj.direction = ring.desc.map(item => { // 虚相位desc为空
626
627
  return {
627
628
  id: item.id,
628
- color: '#454545'
629
+ color: '#303133'
629
630
  }
630
631
  })
631
632
  } else {
@@ -634,14 +635,14 @@ export default {
634
635
  return {
635
636
  id: item,
636
637
  peddirection: peddirections,
637
- color: '#454545'
638
+ color: '#303133'
638
639
  }
639
640
  })
640
641
  } else {
641
642
  obj.direction = [
642
643
  {
643
644
  id: '',
644
- color: '#454545',
645
+ color: '#303133',
645
646
  peddirection: peddirections
646
647
  }
647
648
  ]
@@ -862,6 +863,7 @@ export default {
862
863
  let objs = {}
863
864
  objs.name = walk.name
864
865
  objs.id = walk.id
866
+ objs.color = 'rgba(48,49,51,0.6)'
865
867
  if (ped === walk.id) {
866
868
  peddirections.push(objs)
867
869
  peddirections = Array.from(new Set(peddirections))
@@ -876,7 +878,7 @@ export default {
876
878
  obj.direction = ring.desc.map(item => { // 虚相位desc为空
877
879
  return {
878
880
  id: item.id,
879
- color: '#454545'
881
+ color: '#303133'
880
882
  }
881
883
  })
882
884
  } else {
@@ -885,14 +887,14 @@ export default {
885
887
  return {
886
888
  id: item,
887
889
  peddirection: peddirections,
888
- color: '#454545'
890
+ color: '#303133'
889
891
  }
890
892
  })
891
893
  } else {
892
894
  obj.direction = [
893
895
  {
894
896
  id: '',
895
- color: '#454545',
897
+ color: '#303133',
896
898
  peddirection: peddirections
897
899
  }
898
900
  ]
@@ -1089,6 +1091,7 @@ export default {
1089
1091
  let objs = {}
1090
1092
  objs.name = walk.name
1091
1093
  objs.id = walk.id
1094
+ objs.color = 'rgba(48,49,51,0.6)'
1092
1095
  if (ped === walk.id) {
1093
1096
  peddirections.push(objs)
1094
1097
  peddirections = Array.from(new Set(peddirections))
@@ -1103,7 +1106,7 @@ export default {
1103
1106
  obj.direction = ring.desc.map(item => { // 虚相位desc为空
1104
1107
  return {
1105
1108
  id: item.id,
1106
- color: '#454545',
1109
+ color: '#303133',
1107
1110
  peddirection: peddirections
1108
1111
  }
1109
1112
  })
@@ -1112,7 +1115,7 @@ export default {
1112
1115
  obj.direction = currPhase.direction.map(item => {
1113
1116
  return {
1114
1117
  id: item,
1115
- color: '#454545',
1118
+ color: '#303133',
1116
1119
  peddirection: peddirections
1117
1120
  }
1118
1121
  })
@@ -1120,7 +1123,7 @@ export default {
1120
1123
  obj.direction = [
1121
1124
  {
1122
1125
  id: '',
1123
- color: '#454545',
1126
+ color: '#303133',
1124
1127
  peddirection: peddirections
1125
1128
  }
1126
1129
  ]
@@ -298,6 +298,7 @@ export default {
298
298
  dirListSetTheme (list) {
299
299
  let dirArr = []
300
300
  let color = getTheme() === 'light' ? '#606266' : '#F1F3F4'
301
+ let pedColor = getTheme() === 'light' ? '#606266' : 'rgba(48,49,51,0.6)'
301
302
  for (let rec of list) {
302
303
  let recd = {
303
304
  ...rec,
@@ -305,7 +306,7 @@ export default {
305
306
  }
306
307
  dirArr.push(recd)
307
308
  for(let i=0;i<rec.peddirection.length;i++) {
308
- rec.peddirection[i].color = color
309
+ rec.peddirection[i].color = pedColor
309
310
  }
310
311
  }
311
312
  return dirArr
@@ -20,7 +20,7 @@ export default {
20
20
  modeName: '交警遥控',
21
21
  controlName: '步进',
22
22
  agentId: 'jmlxhl',
23
- Token: 'eyJraWQiOiIxNzE3NDY0NjM5MjExIiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTcxNzUwNzgzOSwiaWF0IjoxNzE3NDY0NjM5fQ.zA5HUdc12pEhHgZ0aQ9IpexDEAvy-jWrN7wAmzZ9myI',
23
+ Token: 'eyJraWQiOiIxNzA4OTA5NDk2ODcxIiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTcwODk1MjY5NiwiaWF0IjoxNzA4OTA5NDk2fQ.FI0gzBQFLyQsj95LG56lVZxb6WYlr2-datNsyv6fF-I',
24
24
  reqUrl: 'http://192.168.13.103:10003/openatc'
25
25
  }
26
26
  },
@@ -1,429 +0,0 @@
1
- /* eslint-disable no-tabs */
2
- /**
3
- * Copyright (c) 2020 kedacom
4
- * OpenATC is licensed under Mulan PSL v2.
5
- * You can use this software according to the terms and conditions of the Mulan PSL v2.
6
- * You may obtain a copy of Mulan PSL v2 at:
7
- * http://license.coscl.org.cn/MulanPSL2
8
- * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
9
- * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
10
- * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
11
- * See the Mulan PSL v2 for more details.
12
- **/
13
- <template>
14
- <div :style="{position: 'absolute'}">
15
- <!-- , left: Data.left?Data.left:'2px', top: Data.top -->
16
- <svg
17
- :width="Width"
18
- :height="Height"
19
- version="1.1"
20
- id="图层_1"
21
- xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
22
- viewBox="0 0 34 34"
23
- style="enable-background:new 0 0 34 34;"
24
- xml:space="preserve">
25
- <g id="路段行人过街-东西"
26
- :class="status[0].isshow? '' : 'invisible'">
27
- <rect x="19.9" y="14.2" class="st1" width="1.6" height="5.6"/>
28
- <rect x="17.4" y="14.2" class="st1" width="1.6" height="5.6"/>
29
- <rect x="22.4" y="14.2" class="st1" width="1.6" height="5.6"/>
30
- <rect x="24.9" y="14.2" class="st1" width="1.6" height="5.6"/>
31
- <rect x="27.4" y="14.2" class="st1" width="1.6" height="5.6"/>
32
- <rect x="29.9" y="14.2" class="st1" width="1.6" height="5.6"/>
33
- <rect x="32.4" y="14.2" class="st1" width="1.6" height="5.6"/>
34
- <rect x="7.5" y="14.2" class="st1" width="1.6" height="5.6"/>
35
- <rect x="5" y="14.2" class="st1" width="1.6" height="5.6"/>
36
- <rect x="2.5" y="14.2" class="st1" width="1.6" height="5.6"/>
37
- <rect x="0" y="14.2" class="st1" width="1.6" height="5.6"/>
38
- <rect x="10" y="14.2" class="st1" width="1.6" height="5.6"/>
39
- <rect x="12.5" y="14.2" class="st1" width="1.6" height="5.6"/>
40
- <rect x="14.9" y="14.2" class="st1" width="1.6" height="5.6"/>
41
- </g>
42
- <g id="路段行人过街-南北" class="st0"
43
- :class="status[1].isshow? '' : 'invisible'">
44
- >
45
- <rect x="14.2" y="19.9" class="st1" width="5.6" height="1.6"/>
46
- <rect x="14.2" y="17.4" class="st1" width="5.6" height="1.6"/>
47
- <rect x="14.2" y="22.4" class="st1" width="5.6" height="1.6"/>
48
- <rect x="14.2" y="24.9" class="st1" width="5.6" height="1.6"/>
49
- <rect x="14.2" y="27.4" class="st1" width="5.6" height="1.6"/>
50
- <rect x="14.2" y="29.9" class="st1" width="5.6" height="1.6"/>
51
- <rect x="14.2" y="32.4" class="st1" width="5.6" height="1.6"/>
52
- <rect x="14.2" y="7.5" class="st1" width="5.6" height="1.6"/>
53
- <rect x="14.2" y="5" class="st1" width="5.6" height="1.6"/>
54
- <rect x="14.2" y="2.5" class="st1" width="5.6" height="1.6"/>
55
- <rect x="14.2" y="0" class="st1" width="5.6" height="1.6"/>
56
- <rect x="14.2" y="10" class="st1" width="5.6" height="1.6"/>
57
- <rect x="14.2" y="12.5" class="st1" width="5.6" height="1.6"/>
58
- <rect x="14.2" y="14.9" class="st1" width="5.6" height="1.6"/>
59
- </g>
60
- <g id="斜向行人1" class="st0"
61
- :class="status[2].isshow? '' : 'invisible'">
62
- >
63
- <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"/>
64
- <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"/>
65
- <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"/>
66
- <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"/>
67
- <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"/>
68
- <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"/>
69
- <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"/>
70
- <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"/>
71
- <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"/>
72
- <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"/>
73
- <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"/>
74
- <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"/>
75
- <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"/>
76
- <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"/>
77
- <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"/>
78
- <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"/>
79
- <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"/>
80
- </g>
81
- <g id="斜向行人2" class="st0"
82
- :class="status[3].isshow? '' : 'invisible'"
83
- >
84
- <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"/>
85
- <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"/>
86
- <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"/>
87
- <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"/>
88
-
89
- <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"/>
90
- <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"/>
91
- <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"/>
92
- <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"/>
93
- <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"/>
94
- <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"/>
95
- <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"/>
96
- <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"/>
97
- <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"/>
98
- <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"/>
99
-
100
- <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"/>
101
- <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"/>
102
- <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"/>
103
- </g>
104
- <g id="北行人"
105
- :class="status[4].isshow? '' : 'invisible'"
106
- class="st0">
107
- <rect x="19.9" class="st1" width="1.6" height="5.6"/>
108
- <rect x="17.4" class="st1" width="1.6" height="5.6"/>
109
- <rect x="22.4" class="st1" width="1.6" height="5.6"/>
110
- <rect x="24.9" class="st1" width="1.6" height="5.6"/>
111
- <rect x="27.4" class="st1" width="1.6" height="5.6"/>
112
- <rect x="29.9" class="st1" width="1.6" height="5.6"/>
113
- <rect x="32.4" class="st1" width="1.6" height="5.6"/>
114
- <rect x="7.5" class="st1" width="1.6" height="5.6"/>
115
- <rect x="5" class="st1" width="1.6" height="5.6"/>
116
- <rect x="2.5" class="st1" width="1.6" height="5.6"/>
117
- <rect x="0" class="st1" width="1.6" height="5.6"/>
118
- <rect x="10" class="st1" width="1.6" height="5.6"/>
119
- <rect x="12.5" class="st1" width="1.6" height="5.6"/>
120
- <rect x="14.9" class="st1" width="1.6" height="5.6"/>
121
- </g>
122
- <g id="南行人"
123
- :class="status[5].isshow? '' : 'invisible'"
124
- class="st0">
125
- <rect x="19.9" y="28.4" class="st1" width="1.6" height="5.6"/>
126
- <rect x="17.4" y="28.4" class="st1" width="1.6" height="5.6"/>
127
- <rect x="22.4" y="28.4" class="st1" width="1.6" height="5.6"/>
128
- <rect x="24.9" y="28.4" class="st1" width="1.6" height="5.6"/>
129
- <rect x="27.4" y="28.4" class="st1" width="1.6" height="5.6"/>
130
- <rect x="29.9" y="28.4" class="st1" width="1.6" height="5.6"/>
131
- <rect x="32.4" y="28.4" class="st1" width="1.6" height="5.6"/>
132
- <rect x="7.5" y="28.4" class="st1" width="1.6" height="5.6"/>
133
- <rect x="5" y="28.4" class="st1" width="1.6" height="5.6"/>
134
- <rect x="2.5" y="28.4" class="st1" width="1.6" height="5.6"/>
135
- <rect x="0" y="28.4" class="st1" width="1.6" height="5.6"/>
136
- <rect x="10" y="28.4" class="st1" width="1.6" height="5.6"/>
137
- <rect x="12.5" y="28.4" class="st1" width="1.6" height="5.6"/>
138
- <rect x="14.9" y="28.4" class="st1" width="1.6" height="5.6"/>
139
- </g>
140
- <g id="东行人"
141
- :class="status[6].isshow? '' : 'invisible'"
142
- class="st0">
143
- <rect x="28.4" y="19.9" class="st1" width="5.6" height="1.6"/>
144
- <rect x="28.4" y="17.4" class="st1" width="5.6" height="1.6"/>
145
- <rect x="28.4" y="22.4" class="st1" width="5.6" height="1.6"/>
146
- <rect x="28.4" y="24.9" class="st1" width="5.6" height="1.6"/>
147
- <rect x="28.4" y="27.4" class="st1" width="5.6" height="1.6"/>
148
- <rect x="28.4" y="29.9" class="st1" width="5.6" height="1.6"/>
149
- <rect x="28.4" y="32.4" class="st1" width="5.6" height="1.6"/>
150
- <rect x="28.4" y="7.5" class="st1" width="5.6" height="1.6"/>
151
- <rect x="28.4" y="5" class="st1" width="5.6" height="1.6"/>
152
- <rect x="28.4" y="2.5" class="st1" width="5.6" height="1.6"/>
153
- <rect x="28.4" y="0" class="st1" width="5.6" height="1.6"/>
154
- <rect x="28.4" y="10" class="st1" width="5.6" height="1.6"/>
155
- <rect x="28.4" y="12.5" class="st1" width="5.6" height="1.6"/>
156
- <rect x="28.4" y="14.9" class="st1" width="5.6" height="1.6"/>
157
- </g>
158
- <g id="西行人"
159
- :class="status[7].isshow? '' : 'invisible'"
160
- class="st0">
161
- <rect y="19.9" class="st1" width="5.6" height="1.6"/>
162
- <rect y="17.4" class="st1" width="5.6" height="1.6"/>
163
- <rect y="22.4" class="st1" width="5.6" height="1.6"/>
164
- <rect y="24.9" class="st1" width="5.6" height="1.6"/>
165
- <rect y="27.4" class="st1" width="5.6" height="1.6"/>
166
- <rect y="29.9" class="st1" width="5.6" height="1.6"/>
167
- <rect y="32.4" class="st1" width="5.6" height="1.6"/>
168
- <rect y="7.5" class="st1" width="5.6" height="1.6"/>
169
- <rect y="5" class="st1" width="5.6" height="1.6"/>
170
- <rect y="2.5" class="st1" width="5.6" height="1.6"/>
171
- <rect y="0" class="st1" width="5.6" height="1.6"/>
172
- <rect y="10" class="st1" width="5.6" height="1.6"/>
173
- <rect y="12.5" class="st1" width="5.6" height="1.6"/>
174
- <rect y="14.9" class="st1" width="5.6" height="1.6"/>
175
- </g>
176
- <g id="二次过街-西" class="st0">
177
- <g id="西下"
178
- :class="status[8].isshow? '' : 'invisible'"
179
- >
180
- <rect y="19.9" class="st1" width="5.6" height="1.6"/>
181
- <rect y="22.4" class="st1" width="5.6" height="1.6"/>
182
- <rect y="24.9" class="st1" width="5.6" height="1.6"/>
183
- <rect y="27.4" class="st1" width="5.6" height="1.6"/>
184
- <rect y="29.9" class="st1" width="5.6" height="1.6"/>
185
- <rect y="32.4" class="st1" width="5.6" height="1.6"/>
186
- </g>
187
- <g id="西上"
188
- :class="status[9].isshow? '' : 'invisible'"
189
- >
190
- <rect y="7.5" class="st1" width="5.6" height="1.6"/>
191
- <rect y="5" class="st1" width="5.6" height="1.6"/>
192
- <rect y="2.5" class="st1" width="5.6" height="1.6"/>
193
- <rect y="0" class="st1" width="5.6" height="1.6"/>
194
- <rect y="10" class="st1" width="5.6" height="1.6"/>
195
- <rect y="12.5" class="st1" width="5.6" height="1.6"/>
196
- </g>
197
- </g>
198
- <g id="二次过街-东" class="st0">
199
- <g id="东上"
200
- :class="status[10].isshow? '' : 'invisible'"
201
- >
202
- <rect x="28.4" y="12.5" class="st1" width="5.6" height="1.6"/>
203
- <rect x="28.4" y="10" class="st1" width="5.6" height="1.6"/>
204
- <rect x="28.4" y="7.5" class="st1" width="5.6" height="1.6"/>
205
- <rect x="28.4" y="5" class="st1" width="5.6" height="1.6"/>
206
- <rect x="28.4" y="2.5" class="st1" width="5.6" height="1.6"/>
207
- <rect x="28.4" y="0" class="st1" width="5.6" height="1.6"/>
208
- </g>
209
- <g id="东下"
210
- :class="status[11].isshow? '' : 'invisible'"
211
- >
212
- <rect x="28.4" y="24.9" class="st1" width="5.6" height="1.6"/>
213
- <rect x="28.4" y="27.4" class="st1" width="5.6" height="1.6"/>
214
- <rect x="28.4" y="29.9" class="st1" width="5.6" height="1.6"/>
215
- <rect x="28.4" y="32.4" class="st1" width="5.6" height="1.6"/>
216
- <rect x="28.4" y="22.4" class="st1" width="5.6" height="1.6"/>
217
- <rect x="28.4" y="19.9" class="st1" width="5.6" height="1.6"/>
218
- </g>
219
- </g>
220
- <g id="二次过街-南" class="st0">
221
- <g id="南右"
222
- :class="status[12].isshow? '' : 'invisible'"
223
- >
224
- <rect x="19.9" y="28.4" class="st1" width="1.6" height="5.6"/>
225
- <rect x="22.4" y="28.4" class="st1" width="1.6" height="5.6"/>
226
- <rect x="24.9" y="28.4" class="st1" width="1.6" height="5.6"/>
227
- <rect x="27.4" y="28.4" class="st1" width="1.6" height="5.6"/>
228
- <rect x="29.9" y="28.4" class="st1" width="1.6" height="5.6"/>
229
- <rect x="32.4" y="28.4" class="st1" width="1.6" height="5.6"/>
230
- </g>
231
- <g id="南左"
232
- :class="status[13].isshow? '' : 'invisible'"
233
- >
234
- <rect x="7.5" y="28.4" class="st1" width="1.6" height="5.6"/>
235
- <rect x="5" y="28.4" class="st1" width="1.6" height="5.6"/>
236
- <rect x="2.5" y="28.4" class="st1" width="1.6" height="5.6"/>
237
- <rect x="0" y="28.4" class="st1" width="1.6" height="5.6"/>
238
- <rect x="10" y="28.4" class="st1" width="1.6" height="5.6"/>
239
- <rect x="12.5" y="28.4" class="st1" width="1.6" height="5.6"/>
240
- </g>
241
- </g>
242
- <g id="二次过街-北_1_" class="st0">
243
- <g id="北右_1_"
244
- :class="status[14].isshow? '' : 'invisible'"
245
- >
246
- <rect x="19.9" class="st1" width="1.6" height="5.6"/>
247
- <rect x="22.4" class="st1" width="1.6" height="5.6"/>
248
- <rect x="24.9" class="st1" width="1.6" height="5.6"/>
249
- <rect x="27.4" class="st1" width="1.6" height="5.6"/>
250
- <rect x="29.9" class="st1" width="1.6" height="5.6"/>
251
- <rect x="32.4" class="st1" width="1.6" height="5.6"/>
252
- </g>
253
- <g id="北左_1_"
254
- :class="status[15].isshow? '' : 'invisible'"
255
- >
256
- <rect x="7.5" class="st1" width="1.6" height="5.6"/>
257
- <rect x="5" class="st1" width="1.6" height="5.6"/>
258
- <rect x="2.5" class="st1" width="1.6" height="5.6"/>
259
- <rect x="0" class="st1" width="1.6" height="5.6"/>
260
- <rect x="10" class="st1" width="1.6" height="5.6"/>
261
- <rect x="12.5" class="st1" width="1.6" height="5.6"/>
262
- </g>
263
- </g>
264
- </svg>
265
- </div>
266
- </template>
267
- <script>
268
- export default {
269
- name: 'PatternWalkSvg',
270
- data () {
271
- return {
272
- status: [
273
- {
274
- id: 1,
275
- name: '东西路段人行横道',
276
- isshow: false,
277
- color: '#0096ba'
278
- },
279
- {
280
- id: 2,
281
- name: '南北路段人行横道',
282
- isshow: false,
283
- color: '#0096ba'
284
- },
285
- {
286
- id: 3,
287
- name: 'X人行横道-\\',
288
- isshow: false,
289
- color: '#0096ba'
290
- },
291
- {
292
- id: 4,
293
- name: 'X人行横道-/',
294
- isshow: false,
295
- color: '#0096ba'
296
- },
297
- {
298
- id: 5,
299
- name: '北人行横道',
300
- isshow: false,
301
- color: '#0096ba'
302
- },
303
- {
304
- id: 6,
305
- name: '南人行横道',
306
- isshow: false,
307
- color: '#0096ba'
308
- },
309
- {
310
- id: 7,
311
- name: '东人行横道',
312
- isshow: false,
313
- color: '#0096ba'
314
- },
315
- {
316
- id: 8,
317
- name: '西人行横道',
318
- isshow: false,
319
- color: '#0096ba'
320
- },
321
- {
322
- id: 9,
323
- name: '西人行横道-下',
324
- isshow: false,
325
- color: '#0096ba'
326
- },
327
- {
328
- id: 10,
329
- name: '西人行横道-上',
330
- isshow: false,
331
- color: '#0096ba'
332
- },
333
- {
334
- id: 11,
335
- name: '东人行横道-上',
336
- isshow: false,
337
- color: '#0096ba'
338
- },
339
- {
340
- id: 12,
341
- name: '东人行横道-下',
342
- isshow: false,
343
- color: '#0096ba'
344
- },
345
- {
346
- id: 13,
347
- name: '南人行横道-右',
348
- isshow: false,
349
- color: '#0096ba'
350
- },
351
- {
352
- id: 14,
353
- name: '南人行横道-左',
354
- isshow: false,
355
- color: '#0096ba'
356
- },
357
- {
358
- id: 15,
359
- name: '北人行横道-右',
360
- isshow: false,
361
- color: '#0096ba'
362
- },
363
- {
364
- id: 16,
365
- name: '北人行横道-左',
366
- isshow: false,
367
- color: '#0096ba'
368
- }
369
- ]
370
- }
371
- },
372
- props: {
373
- sidewalkPhaseData: {
374
- type: Array
375
- },
376
- showWalk: {
377
- type: Array
378
- },
379
- Width: {
380
- type: String,
381
- default: '34px'
382
- },
383
- Height: {
384
- type: String,
385
- default: '34px'
386
- },
387
- Data: {
388
- type: Object
389
- }
390
- },
391
- watch: {
392
- sidewalkPhaseData: {
393
- handler: function () {
394
- this.getShow()
395
- },
396
- deep: true // 深度监听
397
- },
398
- showWalk: {
399
- handler: function () {
400
- this.getShow()
401
- },
402
- deep: true // 深度监听
403
- }
404
- },
405
- created () {
406
- this.getShow()
407
- },
408
- methods: {
409
- getShow () {
410
- console.log(this.sidewalkPhaseData, this.showWalk)
411
- if (!this.sidewalkPhaseData) return
412
- for (let i = 0; i < this.sidewalkPhaseData.length; i++) {
413
- for (let j = 0; j < this.status.length; j++) {
414
- if (this.sidewalkPhaseData[i].name === this.status[j].name && this.showWalk.includes(this.sidewalkPhaseData[i].id)) {
415
- this.status[j].isshow = true
416
- }
417
- }
418
- }
419
- }
420
- }
421
- }
422
- </script>
423
- <style scoped>
424
- .invisible {
425
- visibility: hidden;
426
- }
427
- .st0{opacity:0.5;}
428
- .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#303133;}
429
- </style>