openatc-components 0.1.170 → 0.1.172
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/kisscomps/components/Channelization/Channelization.vue +30 -1
- package/package/kisscomps/components/DrawChannelization/drawsvg/iconSvg/motorwayIconSvg.vue +26 -14
- package/package/kisscomps/components/DrawChannelization/drawsvg/iconSvg/pedroadIconSvg.vue +24 -13
- package/package/kisscomps/components/IntersectionMap/crossDirection/baseImg/SidewalkSvg.vue +43 -32
- package/package/kisscomps/components/IntersectionMap/crossDirection/crossDiagram.vue +27 -1
- package/package/kisscomps/components/IntersectionMap/crossDirection/phaseIcon/LphaseIconSvg.vue +36 -25
- package/package/kisscomps/components/IntersectionMap/crossDirection/phaseIcon/phaseIconSvg.vue +32 -25
- package/package/kisscomps/components/IntersectionMap/crossDirection/phaseIcon/rampPhaseIconSvg.vue +29 -18
- package/package/kissui.min.js +1 -1
- package/package.json +1 -1
- package/src/kisscomps/components/Channelization/Channelization.vue +30 -1
- package/src/kisscomps/components/DrawChannelization/drawsvg/iconSvg/motorwayIconSvg.vue +26 -14
- package/src/kisscomps/components/DrawChannelization/drawsvg/iconSvg/pedroadIconSvg.vue +24 -13
- package/src/kisscomps/components/IntersectionMap/crossDirection/baseImg/SidewalkSvg.vue +43 -32
- package/src/kisscomps/components/IntersectionMap/crossDirection/crossDiagram.vue +27 -1
- package/src/kisscomps/components/IntersectionMap/crossDirection/phaseIcon/LphaseIconSvg.vue +36 -25
- package/src/kisscomps/components/IntersectionMap/crossDirection/phaseIcon/phaseIconSvg.vue +32 -25
- package/src/kisscomps/components/IntersectionMap/crossDirection/phaseIcon/rampPhaseIconSvg.vue +29 -18
- package/src/views/intersection.vue +4 -4
- package/src/views/overView.vue +2 -2
package/package.json
CHANGED
|
@@ -84,7 +84,11 @@ export default {
|
|
|
84
84
|
this.overlapStatusList = val.overlap
|
|
85
85
|
if (val.control === 1 || val.control === 2 || val.control === 3) {
|
|
86
86
|
// 黄闪、全红、关灯属于特殊控制，优先级最高，直接改变灯色，不用判断phase里的type，也不需要考虑跟随相位的灯色优先级
|
|
87
|
-
|
|
87
|
+
if (val.control === 1) {
|
|
88
|
+
this.getYellowFlashColor()
|
|
89
|
+
} else {
|
|
90
|
+
this.SpecialControl(val)
|
|
91
|
+
}
|
|
88
92
|
return
|
|
89
93
|
}
|
|
90
94
|
if (!val.phase && !this.overlapStatusList) {
|
|
@@ -480,6 +484,31 @@ export default {
|
|
|
480
484
|
console.log('resize this.bodyDomSize.width', _this.bodyDomSize.width)
|
|
481
485
|
}, false)
|
|
482
486
|
})
|
|
487
|
+
},
|
|
488
|
+
getYellowFlashColor () {
|
|
489
|
+
// 渠化车道相位
|
|
490
|
+
let curLanePhaseData = []
|
|
491
|
+
for (let i = 0; i < this.LanePhaseData.length; i++) {
|
|
492
|
+
const data = {
|
|
493
|
+
...this.LanePhaseData[i],
|
|
494
|
+
type: '黄闪',
|
|
495
|
+
control: 1
|
|
496
|
+
}
|
|
497
|
+
curLanePhaseData.push(data)
|
|
498
|
+
}
|
|
499
|
+
this.LanePhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
|
|
500
|
+
|
|
501
|
+
// 渠化行人相位
|
|
502
|
+
let curPedStatus = []
|
|
503
|
+
for (let i = 0; i < this.sidewalkPhaseData.length; i++) {
|
|
504
|
+
const data = {
|
|
505
|
+
...this.sidewalkPhaseData[i],
|
|
506
|
+
pedtype: '黄闪',
|
|
507
|
+
control: 1
|
|
508
|
+
}
|
|
509
|
+
curPedStatus.push(data)
|
|
510
|
+
}
|
|
511
|
+
this.sidewalkPhaseData = JSON.parse(JSON.stringify(curPedStatus))
|
|
483
512
|
}
|
|
484
513
|
},
|
|
485
514
|
created () {
|
|
@@ -171,28 +171,28 @@
|
|
|
171
171
|
<path
|
|
172
172
|
id="直行"
|
|
173
173
|
:class="name === '直行' ? '' : 'invisible'"
|
|
174
|
-
:fill="
|
|
174
|
+
:fill="FlashColor ? FlashColor : (Data.color ? Data.color : showDefaultColor)"
|
|
175
175
|
d="M7572.88,1912h-2.61v-28.3h-3.26l4.56-7.7,4.43,7.7h-3.12V1912h-2.61"
|
|
176
176
|
transform="translate(-7548 -1876)"
|
|
177
177
|
></path>
|
|
178
178
|
<path
|
|
179
179
|
id="左转"
|
|
180
180
|
:class="name === '左转' ? '' : 'invisible'"
|
|
181
|
-
:fill="
|
|
181
|
+
:fill="FlashColor ? FlashColor : (Data.color ? Data.color : showDefaultColor)"
|
|
182
182
|
d="M7570.47,1893.69V1912h2.54v-18.44a5.038,5.038,0,0,0-4.83-4.98l-2.41-.38,0.38-3.19-8.14,3.44,6.87,5.5,0.38-3.2,2.8,0.39a2.615,2.615,0,0,1,2.41,2.55h0Zm0,0V1912h2.54v-18.44m-2.54,18.44h2.54m-2.54-4.28V1912h2.54v-4.28"
|
|
183
183
|
transform="translate(-7548 -1876)"
|
|
184
184
|
></path>
|
|
185
185
|
<path
|
|
186
186
|
id="右转"
|
|
187
187
|
:class="name === '右转' ? '' : 'invisible'"
|
|
188
|
-
:fill="
|
|
188
|
+
:fill="FlashColor ? FlashColor : (Data.color ? Data.color : showDefaultColor)"
|
|
189
189
|
d="M7572.53,1893.69V1912h-2.54v-18.44a5.038,5.038,0,0,1,4.83-4.98l2.41-.38-0.38-3.19,8.14,3.44-6.87,5.5-0.38-3.2-2.8.39a2.615,2.615,0,0,0-2.41,2.55h0Zm0-.13V1912h-2.54v-18.56m2.54,18.56h-2.54m2.54,0h-2.54v-4.28"
|
|
190
190
|
transform="translate(-7548 -1876)"
|
|
191
191
|
></path>
|
|
192
192
|
<path
|
|
193
193
|
id="掉头"
|
|
194
194
|
:class="name === '掉头' ? '' : 'invisible'"
|
|
195
|
-
:fill="
|
|
195
|
+
:fill="FlashColor ? FlashColor : (Data.color ? Data.color : showDefaultColor)"
|
|
196
196
|
d="M7570,1912h2.54m-2.54,0h2.54m-2.54,0h2.54m-11.44-11.31v3.71h-3.18l4.45,7.68,4.45-7.68h-3.18v-3.71c0-1.28,1.4-2.43,3.18-2.43,1.65,0,3.18,1.15,3.18,2.43V1912h2.54v-11.31c0-2.69-2.54-5-5.72-5C7563.64,1895.82,7561.1,1898,7561.1,1900.69Z"
|
|
197
197
|
transform="translate(-7548 -1876)"
|
|
198
198
|
></path>
|
|
@@ -318,7 +318,9 @@ export default {
|
|
|
318
318
|
reset: true,
|
|
319
319
|
iconnameArr: [],
|
|
320
320
|
showDefaultColor: '#fff', // 默认状态颜色
|
|
321
|
-
|
|
321
|
+
FlashColor: undefined,
|
|
322
|
+
GreenColor: '#77fb65',
|
|
323
|
+
YellowColor: '#f7b500',
|
|
322
324
|
lastType: ''
|
|
323
325
|
}
|
|
324
326
|
},
|
|
@@ -345,24 +347,34 @@ export default {
|
|
|
345
347
|
this.item.angle = val.angle
|
|
346
348
|
}
|
|
347
349
|
if (this.UsageMode === 'show') {
|
|
348
|
-
if (
|
|
350
|
+
if (this.lastType === '') {
|
|
349
351
|
// 绿闪：绿-》灰-》绿 循环效果
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
352
|
+
if (val.type === 4 || val.type === '黄闪') {
|
|
353
|
+
let highlightColor = ''
|
|
354
|
+
if (val.type === 4) {
|
|
355
|
+
highlightColor = this.GreenColor
|
|
356
|
+
}
|
|
357
|
+
if (val.type === '黄闪') {
|
|
358
|
+
highlightColor = this.YellowColor
|
|
359
|
+
}
|
|
360
|
+
this.FlashColor = highlightColor
|
|
361
|
+
this.GreenIntervalId = setInterval(() => {
|
|
362
|
+
this.FlashColor =
|
|
363
|
+
!this.FlashColor || this.FlashColor === '#828282'
|
|
364
|
+
? highlightColor
|
|
355
365
|
: '#828282'
|
|
356
|
-
|
|
357
|
-
|
|
366
|
+
}, 500)
|
|
367
|
+
this.lastType = val.type
|
|
368
|
+
}
|
|
358
369
|
}
|
|
359
370
|
if (
|
|
360
371
|
this.GreenIntervalId &&
|
|
361
372
|
val.type !== 4 &&
|
|
373
|
+
val.type !== '黄闪' &&
|
|
362
374
|
val.type !== this.lastType
|
|
363
375
|
) {
|
|
364
376
|
clearInterval(this.GreenIntervalId)
|
|
365
|
-
this.
|
|
377
|
+
this.FlashColor = undefined
|
|
366
378
|
this.lastType = ''
|
|
367
379
|
}
|
|
368
380
|
}
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
<rect v-for="(rectItem, index) in rectArr" :x="rectItem" :key="index" width="4" :height="IconH"></rect>
|
|
42
42
|
</g>
|
|
43
43
|
<!-- 展示模式 -->
|
|
44
|
-
<g v-if="UsageMode === 'show'" :fill="this.
|
|
44
|
+
<g v-if="UsageMode === 'show'" :fill="this.FlashColor ? this.FlashColor : (PedData.color ? PedData.color : showDefaultColor)">
|
|
45
45
|
<rect v-for="(rectItem, index) in rectArr" :x="rectItem" :key="index" width="4" :height="IconH"></rect>
|
|
46
46
|
</g>
|
|
47
47
|
</svg>
|
|
@@ -60,7 +60,9 @@ export default {
|
|
|
60
60
|
rectArr: [],
|
|
61
61
|
Viewbox: [0, 0, 206, 22],
|
|
62
62
|
showDefaultColor: '#fff', // 默认状态颜色
|
|
63
|
-
|
|
63
|
+
FlashColor: undefined,
|
|
64
|
+
GreenColor: '#77fb65',
|
|
65
|
+
YellowColor: '#f7b500',
|
|
64
66
|
lastType: ''
|
|
65
67
|
}
|
|
66
68
|
},
|
|
@@ -87,25 +89,34 @@ export default {
|
|
|
87
89
|
this.item.angle = val.angle
|
|
88
90
|
}
|
|
89
91
|
if (this.UsageMode === 'show') {
|
|
90
|
-
if (
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
92
|
+
if (this.lastType === '') {
|
|
93
|
+
if (val.pedtype === 4 || val.pedtype === '黄闪') {
|
|
94
|
+
let flashLightColor = ''
|
|
95
|
+
if (val.pedtype === 4) {
|
|
96
|
+
flashLightColor = this.GreenColor
|
|
97
|
+
}
|
|
98
|
+
if (val.pedtype === '黄闪') {
|
|
99
|
+
flashLightColor = this.YellowColor
|
|
100
|
+
}
|
|
101
|
+
this.FlashColor = flashLightColor
|
|
102
|
+
// 绿闪：绿-》灰-》绿 循环效果
|
|
103
|
+
this.GreenIntervalId = setInterval(() => {
|
|
104
|
+
this.FlashColor =
|
|
105
|
+
!this.FlashColor || this.FlashColor === '#828282'
|
|
106
|
+
? flashLightColor
|
|
98
107
|
: '#828282'
|
|
99
|
-
|
|
100
|
-
|
|
108
|
+
}, 500)
|
|
109
|
+
this.lastType = val.pedtype
|
|
110
|
+
}
|
|
101
111
|
}
|
|
102
112
|
if (
|
|
103
113
|
this.GreenIntervalId &&
|
|
104
114
|
val.pedtype !== 4 &&
|
|
115
|
+
val.pedtype !== '黄闪' &&
|
|
105
116
|
val.pedtype !== this.lastType
|
|
106
117
|
) {
|
|
107
118
|
clearInterval(this.GreenIntervalId)
|
|
108
|
-
this.
|
|
119
|
+
this.FlashColor = undefined
|
|
109
120
|
this.lastType = ''
|
|
110
121
|
}
|
|
111
122
|
}
|
|
@@ -17,14 +17,14 @@
|
|
|
17
17
|
:width="Width"
|
|
18
18
|
:height="Height"
|
|
19
19
|
>
|
|
20
|
-
<!-- <path id="西" v-if="crossType !== 'TypeT-east'" :class="Data.name === '西人行横道' ? '' : 'invisible'" :fill="this.
|
|
21
|
-
<path id="东" v-if="crossType !== 'TypeT-west'" :class="Data.name === '东人行横道' ? '' : 'invisible'" :fill="this.
|
|
22
|
-
<path id="北" v-if="crossType !== 'TypeT-south'" :class="Data.name === '北人行横道' ? '' : 'invisible'" :fill="this.
|
|
23
|
-
<path id="南" v-if="crossType !== 'TypeT-north'" :class="Data.name === '南人行横道' ? '' : 'invisible'" :fill="this.
|
|
20
|
+
<!-- <path id="西" v-if="crossType !== 'TypeT-east'" :class="Data.name === '西人行横道' ? '' : 'invisible'" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)" d="M2,230v-4H18v4H2Zm0-12H18v4H2v-4Zm0-8H18v4H2v-4Zm0-8H18v4H2v-4Zm0-8H18v4H2v-4Zm0-8H18v4H2v-4Zm0-8H18v4H2v-4Zm0-9H18v4H2v-4Zm0-8H18v4H2v-4Zm0-8H18v4H2v-4Zm0-8H18v4H2v-4Zm0-8H18v4H2v-4Zm0-8H18v4H2v-4Zm0-8H18v4H2v-4Zm0-8H18v4H2v-4Zm0-8H18v4H2v-4Zm0-8H18v4H2V97Zm0-8H18v4H2V89Zm0-8H18v4H2V81Zm0-9H18v4H2V72Zm0-8H18v4H2V64Zm0-8H18v4H2V56Zm0-8H18v4H2V48Zm0-8H18v4H2V40Zm0-8H18v4H2V32Zm0-8H18v4H2V24Z" transform="translate(-2 -1)"/>
|
|
21
|
+
<path id="东" v-if="crossType !== 'TypeT-west'" :class="Data.name === '东人行横道' ? '' : 'invisible'" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)" d="M238,230v-4h16v4H238Zm0-12h16v4H238v-4Zm0-8h16v4H238v-4Zm0-8h16v4H238v-4Zm0-8h16v4H238v-4Zm0-8h16v4H238v-4Zm0-8h16v4H238v-4Zm0-9h16v4H238v-4Zm0-8h16v4H238v-4Zm0-8h16v4H238v-4Zm0-8h16v4H238v-4Zm0-8h16v4H238v-4Zm0-8h16v4H238v-4Zm0-8h16v4H238v-4Zm0-8h16v4H238v-4Zm0-8h16v4H238v-4Zm0-8h16v4H238V97Zm0-8h16v4H238V89Zm0-8h16v4H238V81Zm0-9h16v4H238V72Zm0-8h16v4H238V64Zm0-8h16v4H238V56Zm0-8h16v4H238V48Zm0-8h16v4H238V40Zm0-8h16v4H238V32Zm0-8h16v4H238V24Z" transform="translate(-2 -1)"/>
|
|
22
|
+
<path id="北" v-if="crossType !== 'TypeT-south'" :class="Data.name === '北人行横道' ? '' : 'invisible'" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)" d="M227,17V1h4V17h-4ZM219,1h4V17h-4V1Zm-8,0h4V17h-4V1Zm-8,0h4V17h-4V1Zm-8,0h4V17h-4V1Zm-8,0h4V17h-4V1Zm-8,0h4V17h-4V1Zm-9,0h4V17h-4V1Zm-8,0h4V17h-4V1Zm-8,0h4V17h-4V1Zm-8,0h4V17h-4V1Zm-8,0h4V17h-4V1Zm-8,0h4V17h-4V1Zm-8,0h4V17h-4V1Zm-8,0h4V17h-4V1Zm-8,0h4V17h-4V1ZM98,1h4V17H98V1ZM90,1h4V17H90V1ZM82,1h4V17H82V1ZM73,1h4V17H73V1ZM65,1h4V17H65V1ZM57,1h4V17H57V1ZM49,1h4V17H49V1ZM41,1h4V17H41V1ZM33,1h4V17H33V1ZM25,1h4V17H25V1Z" transform="translate(-2 -1)"/>
|
|
23
|
+
<path id="南" v-if="crossType !== 'TypeT-north'" :class="Data.name === '南人行横道' ? '' : 'invisible'" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)" d="M227,253V237h4v16h-4Zm-8-16h4v16h-4V237Zm-8,0h4v16h-4V237Zm-8,0h4v16h-4V237Zm-8,0h4v16h-4V237Zm-8,0h4v16h-4V237Zm-8,0h4v16h-4V237Zm-9,0h4v16h-4V237Zm-8,0h4v16h-4V237Zm-8,0h4v16h-4V237Zm-8,0h4v16h-4V237Zm-8,0h4v16h-4V237Zm-8,0h4v16h-4V237Zm-8,0h4v16h-4V237Zm-8,0h4v16h-4V237Zm-8,0h4v16h-4V237Zm-8,0h4v16H98V237Zm-8,0h4v16H90V237Zm-8,0h4v16H82V237Zm-9,0h4v16H73V237Zm-8,0h4v16H65V237Zm-8,0h4v16H57V237Zm-8,0h4v16H49V237Zm-8,0h4v16H41V237Zm-8,0h4v16H33V237Zm-8,0h4v16H25V237Z" transform="translate(-2 -1)"/>-->
|
|
24
24
|
<g
|
|
25
25
|
id="西"
|
|
26
26
|
:class="Data.name === '西人行横道' ? '' : 'invisible'"
|
|
27
|
-
:fill="this.
|
|
27
|
+
:fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"
|
|
28
28
|
>
|
|
29
29
|
<g>
|
|
30
30
|
<rect y="225" class="st0" width="16" height="4"></rect>
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
<g id="西-上下">
|
|
63
63
|
<g
|
|
64
64
|
:class="Data.name === '西人行横道-下' ? '' : 'invisible'"
|
|
65
|
-
:fill="this.
|
|
65
|
+
:fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"
|
|
66
66
|
>
|
|
67
67
|
<rect y="225" class="st0" width="16" height="4"></rect>
|
|
68
68
|
<rect y="217" class="st0" width="16" height="4"></rect>
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
</g>
|
|
80
80
|
<g
|
|
81
81
|
:class="Data.name === '西人行横道-上' ? '' : 'invisible'"
|
|
82
|
-
:fill="this.
|
|
82
|
+
:fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"
|
|
83
83
|
>
|
|
84
84
|
<rect y="112" class="st0" width="16" height="4"></rect>
|
|
85
85
|
<rect y="104" class="st0" width="16" height="4"></rect>
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
<g
|
|
100
100
|
id="东"
|
|
101
101
|
:class="Data.name === '东人行横道' ? '' : 'invisible'"
|
|
102
|
-
:fill="this.
|
|
102
|
+
:fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"
|
|
103
103
|
>
|
|
104
104
|
<g>
|
|
105
105
|
<rect x="236" y="225" class="st0" width="16" height="4"></rect>
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
<g id="东-上下">
|
|
139
139
|
<g
|
|
140
140
|
:class="Data.name === '东人行横道-下' ? '' : 'invisible'"
|
|
141
|
-
:fill="this.
|
|
141
|
+
:fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"
|
|
142
142
|
>
|
|
143
143
|
<rect x="236" y="225" class="st0" width="16" height="4"></rect>
|
|
144
144
|
<rect x="236" y="217" class="st0" width="16" height="4"></rect>
|
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
</g>
|
|
156
156
|
<g
|
|
157
157
|
:class="Data.name === '东人行横道-上' ? '' : 'invisible'"
|
|
158
|
-
:fill="this.
|
|
158
|
+
:fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"
|
|
159
159
|
>
|
|
160
160
|
<rect x="236" y="112" class="st0" width="16" height="4"></rect>
|
|
161
161
|
<rect x="236" y="104" class="st0" width="16" height="4"></rect>
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
<g
|
|
176
176
|
id="北"
|
|
177
177
|
:class="Data.name === '北人行横道' ? '' : 'invisible'"
|
|
178
|
-
:fill="this.
|
|
178
|
+
:fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"
|
|
179
179
|
>
|
|
180
180
|
<g>
|
|
181
181
|
<rect x="225" class="st0" width="4" height="16"></rect>
|
|
@@ -214,7 +214,7 @@
|
|
|
214
214
|
<g id="北-左右">
|
|
215
215
|
<g
|
|
216
216
|
:class="Data.name === '北人行横道-右' ? '' : 'invisible'"
|
|
217
|
-
:fill="this.
|
|
217
|
+
:fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"
|
|
218
218
|
>
|
|
219
219
|
<rect x="225" class="st0" width="4" height="16"></rect>
|
|
220
220
|
<rect x="217" class="st0" width="4" height="16"></rect>
|
|
@@ -231,7 +231,7 @@
|
|
|
231
231
|
</g>
|
|
232
232
|
<g
|
|
233
233
|
:class="Data.name === '北人行横道-左' ? '' : 'invisible'"
|
|
234
|
-
:fill="this.
|
|
234
|
+
:fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"
|
|
235
235
|
>
|
|
236
236
|
<rect x="112" class="st0" width="4" height="16"></rect>
|
|
237
237
|
<rect x="104" class="st0" width="4" height="16"></rect>
|
|
@@ -251,7 +251,7 @@
|
|
|
251
251
|
<g
|
|
252
252
|
id="南"
|
|
253
253
|
:class="Data.name === '南人行横道' ? '' : 'invisible'"
|
|
254
|
-
:fill="this.
|
|
254
|
+
:fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"
|
|
255
255
|
>
|
|
256
256
|
<g>
|
|
257
257
|
<rect x="225" y="236" class="st0" width="4" height="16"></rect>
|
|
@@ -290,7 +290,7 @@
|
|
|
290
290
|
<g id="南-左右">
|
|
291
291
|
<g
|
|
292
292
|
:class="Data.name === '南人行横道-右' ? '' : 'invisible'"
|
|
293
|
-
:fill="this.
|
|
293
|
+
:fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"
|
|
294
294
|
>
|
|
295
295
|
<rect x="225" y="236" class="st0" width="4" height="16"></rect>
|
|
296
296
|
<rect x="217" y="236" class="st0" width="4" height="16"></rect>
|
|
@@ -307,7 +307,7 @@
|
|
|
307
307
|
</g>
|
|
308
308
|
<g
|
|
309
309
|
:class="Data.name === '南人行横道-左' ? '' : 'invisible'"
|
|
310
|
-
:fill="this.
|
|
310
|
+
:fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"
|
|
311
311
|
>
|
|
312
312
|
<rect x="112" y="236" class="st0" width="4" height="16"></rect>
|
|
313
313
|
<rect x="104" y="236" class="st0" width="4" height="16"></rect>
|
|
@@ -327,7 +327,7 @@
|
|
|
327
327
|
<g
|
|
328
328
|
id="斜向行人过街"
|
|
329
329
|
:class="Data.name === 'X人行横道-/' ? '' : 'invisible'"
|
|
330
|
-
:fill="this.
|
|
330
|
+
:fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"
|
|
331
331
|
>
|
|
332
332
|
<rect
|
|
333
333
|
x="78"
|
|
@@ -620,7 +620,7 @@
|
|
|
620
620
|
<g
|
|
621
621
|
id="斜向行人过街1"
|
|
622
622
|
:class="Data.name === 'X人行横道-\\' ? '' : 'invisible'"
|
|
623
|
-
:fill="this.
|
|
623
|
+
:fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"
|
|
624
624
|
>
|
|
625
625
|
<rect
|
|
626
626
|
x="72"
|
|
@@ -922,7 +922,7 @@
|
|
|
922
922
|
<g
|
|
923
923
|
id="路段行人过街-东西"
|
|
924
924
|
:class="Data.name === '东西路段人行横道' ? '' : 'invisible'"
|
|
925
|
-
:fill="this.
|
|
925
|
+
:fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"
|
|
926
926
|
>
|
|
927
927
|
<g>
|
|
928
928
|
<rect x="37.9" y="97.9" width="4" height="56.3"></rect>
|
|
@@ -1005,7 +1005,7 @@
|
|
|
1005
1005
|
<g
|
|
1006
1006
|
id="路段行人过街-南北"
|
|
1007
1007
|
:class="Data.name === '南北路段人行横道' ? '' : 'invisible'"
|
|
1008
|
-
:fill="this.
|
|
1008
|
+
:fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"
|
|
1009
1009
|
>
|
|
1010
1010
|
<g>
|
|
1011
1011
|
<rect x="97.9" y="37.9" width="56.3" height="4"></rect>
|
|
@@ -1094,32 +1094,43 @@ export default {
|
|
|
1094
1094
|
data () {
|
|
1095
1095
|
return {
|
|
1096
1096
|
defaultColor: '#fff', // 默认状态颜色
|
|
1097
|
-
|
|
1097
|
+
FlashColor: undefined,
|
|
1098
|
+
GreenColor: '#77fb65',
|
|
1099
|
+
YellowColor: '#f7b500',
|
|
1098
1100
|
lastType: ''
|
|
1099
1101
|
}
|
|
1100
1102
|
},
|
|
1101
1103
|
watch: {
|
|
1102
1104
|
Data: {
|
|
1103
1105
|
handler: function (val) {
|
|
1104
|
-
if (
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1106
|
+
if (this.lastType === '') {
|
|
1107
|
+
if (val.pedtype === 4 || val.pedtype === '黄闪') {
|
|
1108
|
+
let highlightColor = ''
|
|
1109
|
+
if (val.pedtype === 4) {
|
|
1110
|
+
highlightColor = this.GreenColor
|
|
1111
|
+
}
|
|
1112
|
+
if (val.pedtype === '黄闪') {
|
|
1113
|
+
highlightColor = this.YellowColor
|
|
1114
|
+
}
|
|
1115
|
+
this.FlashColor = highlightColor
|
|
1116
|
+
// 绿闪：绿-》灰-》绿 循环效果
|
|
1117
|
+
this.GreenIntervalId = setInterval(() => {
|
|
1118
|
+
this.FlashColor =
|
|
1119
|
+
!this.FlashColor || this.FlashColor === '#828282'
|
|
1120
|
+
? highlightColor
|
|
1112
1121
|
: '#828282'
|
|
1113
|
-
|
|
1114
|
-
|
|
1122
|
+
}, 500)
|
|
1123
|
+
this.lastType = val.pedtype
|
|
1124
|
+
}
|
|
1115
1125
|
}
|
|
1116
1126
|
if (
|
|
1117
1127
|
this.GreenIntervalId &&
|
|
1118
1128
|
val.pedtype !== 4 &&
|
|
1129
|
+
val.pedtype !== '黄闪' &&
|
|
1119
1130
|
val.pedtype !== this.lastType
|
|
1120
1131
|
) {
|
|
1121
1132
|
clearInterval(this.GreenIntervalId)
|
|
1122
|
-
this.
|
|
1133
|
+
this.FlashColor = undefined
|
|
1123
1134
|
this.lastType = ''
|
|
1124
1135
|
}
|
|
1125
1136
|
},
|
|
@@ -470,15 +470,41 @@ export default {
|
|
|
470
470
|
})
|
|
471
471
|
},
|
|
472
472
|
getYellowFlashColor () {
|
|
473
|
+
// 车道相位（左行右行）
|
|
473
474
|
let curLanePhaseData = []
|
|
474
475
|
for (let i = 0; i < this.LanePhaseData.length; i++) {
|
|
475
476
|
const data = {
|
|
476
477
|
...this.LanePhaseData[i],
|
|
477
|
-
type: '黄闪'
|
|
478
|
+
type: '黄闪',
|
|
479
|
+
control: 1
|
|
478
480
|
}
|
|
479
481
|
curLanePhaseData.push(data)
|
|
480
482
|
}
|
|
481
483
|
this.LanePhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
|
|
484
|
+
|
|
485
|
+
// 行人相位
|
|
486
|
+
let curPedStatus = []
|
|
487
|
+
for (let i = 0; i < this.sidewalkPhaseData.length; i++) {
|
|
488
|
+
const data = {
|
|
489
|
+
...this.sidewalkPhaseData[i],
|
|
490
|
+
pedtype: '黄闪',
|
|
491
|
+
control: 1
|
|
492
|
+
}
|
|
493
|
+
curPedStatus.push(data)
|
|
494
|
+
}
|
|
495
|
+
this.sidewalkPhaseData = JSON.parse(JSON.stringify(curPedStatus))
|
|
496
|
+
|
|
497
|
+
// 公交相位
|
|
498
|
+
let curBusLanePhaseData = []
|
|
499
|
+
for (let i = 0; i < this.busPhaseData.length; i++) {
|
|
500
|
+
const data = {
|
|
501
|
+
...this.busPhaseData[i],
|
|
502
|
+
type: '黄闪',
|
|
503
|
+
control: 1
|
|
504
|
+
}
|
|
505
|
+
curBusLanePhaseData.push(data)
|
|
506
|
+
}
|
|
507
|
+
this.busPhaseData = JSON.parse(JSON.stringify(curBusLanePhaseData))
|
|
482
508
|
},
|
|
483
509
|
getPhaseStatus () {
|
|
484
510
|
// 得到车道相位状态（颜色）
|
|
@@ -16,20 +16,20 @@
|
|
|
16
16
|
viewBox="0 0 36 26" style="enable-background:new 0 0 36 26;" xml:space="preserve" :width="IconLengh" :height="IconWdith">
|
|
17
17
|
<!-- 东相位 -->
|
|
18
18
|
<path id="东左转" :class="Data.name === '东左转' ? '' : 'invisible'" d="M11,7.1h24v-3H10.9c-3.1,0-5.7,2.6-5.8,5.7l-0.4,2.9L1,12.2l3.9,9.7l6.5-8.2l-3.7-0.5l0.5-3.3
|
|
19
|
-
C8.2,8.4,9.4,7.1,11,7.1L11,7.1z" :fill="this.
|
|
19
|
+
C8.2,8.4,9.4,7.1,11,7.1L11,7.1z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
|
|
20
20
|
<path id="东右转" :class="Data.name === '东右转' ? '' : 'invisible'" d="M8.1,15.8l-0.4-3l3.7-0.5L4.9,4.1L1,13.8l3.7-0.5l0.4,2.9c0,3.2,2.6,5.7,5.8,5.7H35v-3H10.9
|
|
21
|
-
c-1.5,0-2.8-1.3-2.8-2.8V15.8z" :fill="this.
|
|
22
|
-
<polygon id="东直行" :class="Data.name === '东直行' ? '' : 'invisible'" points="35,11.5 10.1,11.5 10.1,7.8 0.9,13 10.1,18.2 10.1,14.5 35,14.5 " :fill="this.
|
|
21
|
+
c-1.5,0-2.8-1.3-2.8-2.8V15.8z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
|
|
22
|
+
<polygon id="东直行" :class="Data.name === '东直行' ? '' : 'invisible'" points="35,11.5 10.1,11.5 10.1,7.8 0.9,13 10.1,18.2 10.1,14.5 35,14.5 " :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
|
|
23
23
|
<path id="东掉头" :class="Data.name === '东掉头' ? '' : 'invisible'" d="M13.6,15.2c0,3.7,2.6,6.7,5.8,6.7H35v-3H19.4c-1.5,0-2.8-1.7-2.8-3.7s1.3-3.7,2.8-3.7h4.3v3.7
|
|
24
|
-
l9.1-5.2l-9.1-5.2v3.7h-4.3C16.2,8.5,13.6,11.5,13.6,15.2z" :fill="this.
|
|
24
|
+
l9.1-5.2l-9.1-5.2v3.7h-4.3C16.2,8.5,13.6,11.5,13.6,15.2z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
|
|
25
25
|
<!-- 西相位 -->
|
|
26
26
|
<path id="西左转" :class="Data.name === '西左转' ? '' : 'invisible'" d="M25,18.9H1v3h24.1c3.1,0,5.7-2.6,5.8-5.7l0.4-2.9l3.7,0.5l-3.9-9.7l-6.5,8.2l3.7,0.5l-0.5,3.3
|
|
27
|
-
C27.8,17.6,26.6,18.9,25,18.9L25,18.9z" :fill="this.
|
|
27
|
+
C27.8,17.6,26.6,18.9,25,18.9L25,18.9z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
|
|
28
28
|
<path id="西右转" :class="Data.name === '西右转' ? '' : 'invisible'" d="M27.9,10.2l0.4,3l-3.7,0.5l6.5,8.2l3.9-9.7l-3.7,0.5l-0.4-2.9c0-3.2-2.6-5.7-5.8-5.7H1v3h24.1
|
|
29
|
-
c1.5,0,2.8,1.3,2.8,2.8V10.2z" :fill="this.
|
|
30
|
-
<polygon id="西直行" :class="Data.name === '西直行' ? '' : 'invisible'" points="1,14.5 26,14.5 26,18.2 35.1,13 26,7.8 26,11.5 1,11.5 " :fill="this.
|
|
29
|
+
c1.5,0,2.8,1.3,2.8,2.8V10.2z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
|
|
30
|
+
<polygon id="西直行" :class="Data.name === '西直行' ? '' : 'invisible'" points="1,14.5 26,14.5 26,18.2 35.1,13 26,7.8 26,11.5 1,11.5 " :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
|
|
31
31
|
<path id="西掉头" :class="Data.name === '西掉头' ? '' : 'invisible'" d="M22.4,10.8c0-3.7-2.6-6.7-5.8-6.7H1v3h15.7c1.5,0,2.8,1.7,2.8,3.7s-1.3,3.7-2.8,3.7h-4.3v-3.7
|
|
32
|
-
L3.3,16l9,5.3v-3.8h4.3C19.8,17.5,22.4,14.5,22.4,10.8z" :fill="this.
|
|
32
|
+
L3.3,16l9,5.3v-3.8h4.3C19.8,17.5,22.4,14.5,22.4,10.8z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
|
|
33
33
|
</svg>
|
|
34
34
|
</div>
|
|
35
35
|
<div :class="Data.id >= 9 ? '' : 'hide'">
|
|
@@ -37,20 +37,20 @@ L3.3,16l9,5.3v-3.8h4.3C19.8,17.5,22.4,14.5,22.4,10.8z" :fill="this.GreenFlashCol
|
|
|
37
37
|
viewBox="0 0 26 36" style="enable-background:new 0 0 26 36;" xml:space="preserve" :width="IconWdith" :height="IconLengh">
|
|
38
38
|
<!-- 南相位 -->
|
|
39
39
|
<path id="南左转" :class="Data.name === '南左转' ? '' : 'invisible'" d="M18.9,11v24h3V10.9c0-3.1-2.6-5.7-5.7-5.8l-2.9-0.4L13.8,1L4.1,4.9l8.2,6.5l0.5-3.7l3.3,0.5
|
|
40
|
-
C17.6,8.2,18.9,9.4,18.9,11L18.9,11z" :fill="this.
|
|
40
|
+
C17.6,8.2,18.9,9.4,18.9,11L18.9,11z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
|
|
41
41
|
<path id="南右转" :class="Data.name === '南右转' ? '' : 'invisible'" d="M10.2,8.1l3-0.4l0.5,3.7l8.2-6.5L12.2,1l0.5,3.7L9.8,5.1c-3.2,0-5.7,2.6-5.7,5.8V35h3V10.9
|
|
42
|
-
c0-1.5,1.3-2.8,2.8-2.8H10.2z" :fill="this.
|
|
43
|
-
<polygon id="南直行" :class="Data.name === '南直行' ? '' : 'invisible'" points="14.5,35 14.5,10.1 18.2,10.1 13,0.9 7.8,10.1 11.5,10.1 11.5,35 " :fill="this.
|
|
42
|
+
c0-1.5,1.3-2.8,2.8-2.8H10.2z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
|
|
43
|
+
<polygon id="南直行" :class="Data.name === '南直行' ? '' : 'invisible'" points="14.5,35 14.5,10.1 18.2,10.1 13,0.9 7.8,10.1 11.5,10.1 11.5,35 " :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
|
|
44
44
|
<path id="南掉头" :class="Data.name === '南掉头' ? '' : 'invisible'" d="M10.8,13.6c-3.7,0-6.7,2.6-6.7,5.8V35h3V19.4c0-1.5,1.7-2.8,3.7-2.8s3.7,1.3,3.7,2.8v4.3h-3.7
|
|
45
|
-
l5.2,9.1l5.2-9.1h-3.8v-4.3C17.4,16.2,14.4,13.6,10.8,13.6z" :fill="this.
|
|
45
|
+
l5.2,9.1l5.2-9.1h-3.8v-4.3C17.4,16.2,14.4,13.6,10.8,13.6z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
|
|
46
46
|
<!-- 北相位 -->
|
|
47
47
|
<path id="北左转" :class="Data.name === '北左转' ? '' : 'invisible'" d="M7.1,25V1h-3v24.1c0,3.1,2.6,5.7,5.7,5.8l2.9,0.4L12.2,35l9.7-3.9l-8.2-6.5l-0.5,3.7l-3.3-0.5
|
|
48
|
-
C8.4,27.8,7.1,26.6,7.1,25L7.1,25z" :fill="this.
|
|
48
|
+
C8.4,27.8,7.1,26.6,7.1,25L7.1,25z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
|
|
49
49
|
<path id="北右转" :class="Data.name === '北右转' ? '' : 'invisible'" d="M15.8,27.9l-3,0.4l-0.5-3.7l-8.2,6.5l9.7,3.9l-0.5-3.7l2.9-0.4c3.2,0,5.7-2.6,5.7-5.8V1h-3v24.1
|
|
50
|
-
c0,1.5-1.3,2.8-2.8,2.8H15.8z" :fill="this.
|
|
51
|
-
<polygon id="北直行" :class="Data.name === '北直行' ? '' : 'invisible'" points="11.5,0.9 11.5,25.9 7.8,25.9 13,35 18.2,25.9 14.5,25.9 14.5,0.9 " :fill="this.
|
|
50
|
+
c0,1.5-1.3,2.8-2.8,2.8H15.8z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
|
|
51
|
+
<polygon id="北直行" :class="Data.name === '北直行' ? '' : 'invisible'" points="11.5,0.9 11.5,25.9 7.8,25.9 13,35 18.2,25.9 14.5,25.9 14.5,0.9 " :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
|
|
52
52
|
<path id="北掉头" :class="Data.name === '北掉头' ? '' : 'invisible'" d="M15.2,22.4c3.7,0,6.7-2.6,6.7-5.8V1h-3v15.7c0,1.5-1.7,2.8-3.7,2.8s-3.7-1.3-3.7-2.8v-4.3h3.7
|
|
53
|
-
L10,3.3l-5.2,9h3.7v4.3C8.5,19.8,11.5,22.4,15.2,22.4z" :fill="this.
|
|
53
|
+
L10,3.3l-5.2,9h3.7v4.3C8.5,19.8,11.5,22.4,15.2,22.4z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
|
|
54
54
|
</svg>
|
|
55
55
|
</div>
|
|
56
56
|
</div>
|
|
@@ -61,24 +61,35 @@ export default {
|
|
|
61
61
|
data () {
|
|
62
62
|
return {
|
|
63
63
|
defaultColor: '#fff', // 默认状态颜色
|
|
64
|
-
|
|
64
|
+
FlashColor: undefined,
|
|
65
|
+
GreenColor: '#77fb65',
|
|
66
|
+
YellowColor: '#f7b500',
|
|
65
67
|
lastType: ''
|
|
66
68
|
}
|
|
67
69
|
},
|
|
68
70
|
watch: {
|
|
69
71
|
Data: {
|
|
70
72
|
handler: function (val) {
|
|
71
|
-
if (
|
|
73
|
+
if (this.lastType === '') {
|
|
74
|
+
if (val.type === 4 || val.type === '黄闪') {
|
|
72
75
|
// 绿闪：绿-》灰-》绿 循环效果
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
76
|
+
let highlightColor = ''
|
|
77
|
+
if (val.type === 4) {
|
|
78
|
+
highlightColor = this.GreenColor
|
|
79
|
+
}
|
|
80
|
+
if (val.type === '黄闪') {
|
|
81
|
+
highlightColor = this.YellowColor
|
|
82
|
+
}
|
|
83
|
+
this.FlashColor = highlightColor
|
|
84
|
+
this.GreenIntervalId = setInterval(() => {
|
|
85
|
+
this.FlashColor = !this.FlashColor || this.FlashColor === '#828282' ? highlightColor : '#828282'
|
|
86
|
+
}, 500)
|
|
87
|
+
this.lastType = val.type
|
|
88
|
+
}
|
|
78
89
|
}
|
|
79
|
-
if (this.GreenIntervalId && val.type !== 4 && val.type !== this.lastType) {
|
|
90
|
+
if (this.GreenIntervalId && val.type !== 4 && val.type !== '黄闪' && val.type !== this.lastType) {
|
|
80
91
|
clearInterval(this.GreenIntervalId)
|
|
81
|
-
this.
|
|
92
|
+
this.FlashColor = undefined
|
|
82
93
|
this.lastType = ''
|
|
83
94
|
}
|
|
84
95
|
},
|