openatc-components 0.1.169 → 0.1.171
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 +28 -1
- package/package/kisscomps/components/DrawChannelization/drawsvg/iconSvg/motorwayIconSvg.vue +26 -14
- package/package/kisscomps/components/DrawChannelization/drawsvg/iconSvg/pedroadIconSvg.vue +23 -12
- package/package/kisscomps/components/IntersectionMap/crossDirection/baseImg/SidewalkSvg.vue +43 -31
- package/package/kisscomps/components/IntersectionMap/crossDirection/crossDiagram.vue +41 -5
- package/package/kisscomps/components/IntersectionMap/crossDirection/phaseIcon/LphaseIconSvg.vue +36 -25
- package/package/kisscomps/components/IntersectionMap/crossDirection/phaseIcon/phaseIconSvg.vue +37 -26
- package/package/kisscomps/components/IntersectionMap/crossDirection/phaseIcon/rampPhaseIconSvg.vue +29 -18
- package/package/kisscomps/components/PatternStatus/PatternStatus.vue +0 -1
- package/package/kissui.min.js +1 -1
- package/package.json +1 -1
- package/src/kisscomps/components/Channelization/Channelization.vue +28 -1
- package/src/kisscomps/components/DrawChannelization/drawsvg/iconSvg/motorwayIconSvg.vue +26 -14
- package/src/kisscomps/components/DrawChannelization/drawsvg/iconSvg/pedroadIconSvg.vue +23 -12
- package/src/kisscomps/components/IntersectionMap/crossDirection/baseImg/SidewalkSvg.vue +43 -31
- package/src/kisscomps/components/IntersectionMap/crossDirection/crossDiagram.vue +41 -5
- package/src/kisscomps/components/IntersectionMap/crossDirection/phaseIcon/LphaseIconSvg.vue +36 -25
- package/src/kisscomps/components/IntersectionMap/crossDirection/phaseIcon/phaseIconSvg.vue +37 -26
- package/src/kisscomps/components/IntersectionMap/crossDirection/phaseIcon/rampPhaseIconSvg.vue +29 -18
- package/src/kisscomps/components/PatternStatus/PatternStatus.vue +0 -1
- package/src/node_modules/.package_versions.json +0 -1
|
@@ -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,29 @@ 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
|
+
control: 1
|
|
495
|
+
}
|
|
496
|
+
curLanePhaseData.push(data)
|
|
497
|
+
}
|
|
498
|
+
this.LanePhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
|
|
499
|
+
|
|
500
|
+
// 渠化行人相位
|
|
501
|
+
let curPedStatus = []
|
|
502
|
+
for (let i = 0; i < this.sidewalkPhaseData.length; i++) {
|
|
503
|
+
const data = {
|
|
504
|
+
...this.sidewalkPhaseData[i],
|
|
505
|
+
control: 1
|
|
506
|
+
}
|
|
507
|
+
curPedStatus.push(data)
|
|
508
|
+
}
|
|
509
|
+
this.sidewalkPhaseData = JSON.parse(JSON.stringify(curPedStatus))
|
|
483
510
|
}
|
|
484
511
|
},
|
|
485
512
|
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.control === 1) {
|
|
353
|
+
let highlightColor = ''
|
|
354
|
+
if (val.type === 4) {
|
|
355
|
+
highlightColor = this.GreenColor
|
|
356
|
+
}
|
|
357
|
+
if (val.control === 1) {
|
|
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.control !== 1 &&
|
|
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,7 @@ export default {
|
|
|
60
60
|
rectArr: [],
|
|
61
61
|
Viewbox: [0, 0, 206, 22],
|
|
62
62
|
showDefaultColor: '#fff', // 默认状态颜色
|
|
63
|
-
|
|
63
|
+
FlashColor: undefined,
|
|
64
64
|
lastType: ''
|
|
65
65
|
}
|
|
66
66
|
},
|
|
@@ -88,24 +88,35 @@ export default {
|
|
|
88
88
|
}
|
|
89
89
|
if (this.UsageMode === 'show') {
|
|
90
90
|
if (!val.pedtype) return
|
|
91
|
-
if (
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
91
|
+
if (this.lastType === '') {
|
|
92
|
+
if (val.pedtype === 4 || val.control === 1) {
|
|
93
|
+
let highlightColor = ''
|
|
94
|
+
if (val.pedtype === 4) {
|
|
95
|
+
highlightColor = this.GreenColor
|
|
96
|
+
}
|
|
97
|
+
if (val.control === 1) {
|
|
98
|
+
highlightColor = this.YellowColor
|
|
99
|
+
}
|
|
100
|
+
this.FlashColor = highlightColor
|
|
101
|
+
// 绿闪：绿-》灰-》绿 循环效果
|
|
102
|
+
this.FlashColor = '#7bd66b'
|
|
103
|
+
this.GreenIntervalId = setInterval(() => {
|
|
104
|
+
this.FlashColor =
|
|
105
|
+
!this.FlashColor || this.FlashColor === '#828282'
|
|
106
|
+
? highlightColor
|
|
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.control !== 1 &&
|
|
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,7 +1094,9 @@ 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
|
},
|
|
@@ -1102,24 +1104,34 @@ export default {
|
|
|
1102
1104
|
Data: {
|
|
1103
1105
|
handler: function (val) {
|
|
1104
1106
|
if (!val.pedtype) return
|
|
1105
|
-
if (
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1107
|
+
if (this.lastType === '') {
|
|
1108
|
+
if (val.pedtype === 4 || val.control === 1) {
|
|
1109
|
+
let highlightColor = ''
|
|
1110
|
+
if (val.pedtype === 4) {
|
|
1111
|
+
highlightColor = this.GreenColor
|
|
1112
|
+
}
|
|
1113
|
+
if (val.control === 1) {
|
|
1114
|
+
highlightColor = this.YellowColor
|
|
1115
|
+
}
|
|
1116
|
+
this.FlashColor = highlightColor
|
|
1117
|
+
// 绿闪：绿-》灰-》绿 循环效果
|
|
1118
|
+
this.GreenIntervalId = setInterval(() => {
|
|
1119
|
+
this.FlashColor =
|
|
1120
|
+
!this.FlashColor || this.FlashColor === '#828282'
|
|
1121
|
+
? highlightColor
|
|
1112
1122
|
: '#828282'
|
|
1113
|
-
|
|
1114
|
-
|
|
1123
|
+
}, 500)
|
|
1124
|
+
this.lastType = val.pedtype
|
|
1125
|
+
}
|
|
1115
1126
|
}
|
|
1116
1127
|
if (
|
|
1117
1128
|
this.GreenIntervalId &&
|
|
1118
1129
|
val.pedtype !== 4 &&
|
|
1130
|
+
val.control !== 1 &&
|
|
1119
1131
|
val.pedtype !== this.lastType
|
|
1120
1132
|
) {
|
|
1121
1133
|
clearInterval(this.GreenIntervalId)
|
|
1122
|
-
this.
|
|
1134
|
+
this.FlashColor = undefined
|
|
1123
1135
|
this.lastType = ''
|
|
1124
1136
|
}
|
|
1125
1137
|
},
|
|
@@ -255,7 +255,12 @@ export default {
|
|
|
255
255
|
this.comdireBusPhaseData = JSON.parse(JSON.stringify(this.busPhaseData))
|
|
256
256
|
if (val.control === 1 || val.control === 2 || val.control === 3) {
|
|
257
257
|
// 黄闪、全红、关灯属于特殊控制，优先级最高，直接改变灯色，不用判断phase里的type，也不需要考虑跟随相位的灯色优先级
|
|
258
|
-
|
|
258
|
+
if (val.control === 1) {
|
|
259
|
+
this.getYellowFlashColor()
|
|
260
|
+
} else {
|
|
261
|
+
this.SpecialControl(val)
|
|
262
|
+
}
|
|
263
|
+
this.isHasPhase = false
|
|
259
264
|
return
|
|
260
265
|
}
|
|
261
266
|
if (!val.phase && !this.overlapStatusList) {
|
|
@@ -337,7 +342,7 @@ export default {
|
|
|
337
342
|
crossType: '', // 路口底图类型
|
|
338
343
|
isLoaded: false, // 是否成功加载底图
|
|
339
344
|
isHasPhase: true, // 是否有相位状态数据
|
|
340
|
-
phaseControlColorMap: new Map([['
|
|
345
|
+
phaseControlColorMap: new Map([['全红', '#ff2828'], ['关灯', '#828282'], ['默认', '#fff'], ['方向锁定', '#fff']]),
|
|
341
346
|
sidewalkPhaseData: [], // 行人相位
|
|
342
347
|
overlapsidewalkPhaseData: [], // 行人跟随相位
|
|
343
348
|
resetflag: true, // 离线后，控制行人相位、车道相位reset标识
|
|
@@ -381,15 +386,12 @@ export default {
|
|
|
381
386
|
},
|
|
382
387
|
SpecialControl (data) {
|
|
383
388
|
switch (data.control) {
|
|
384
|
-
case 1: this.handleSpecialControlStatus('黄闪')
|
|
385
|
-
break
|
|
386
389
|
case 2: this.handleSpecialControlStatus('全红')
|
|
387
390
|
break
|
|
388
391
|
case 3: this.handleSpecialControlStatus('关灯')
|
|
389
392
|
break
|
|
390
393
|
default: this.handleSpecialControlStatus('默认')
|
|
391
394
|
}
|
|
392
|
-
this.isHasPhase = false
|
|
393
395
|
},
|
|
394
396
|
handleDefaultStatus () {
|
|
395
397
|
// 恢复默认状态
|
|
@@ -467,6 +469,40 @@ export default {
|
|
|
467
469
|
this.phaseStatusMap.set(phaseId, phaseInfo)
|
|
468
470
|
})
|
|
469
471
|
},
|
|
472
|
+
getYellowFlashColor () {
|
|
473
|
+
// 车道相位（左行右行）
|
|
474
|
+
let curLanePhaseData = []
|
|
475
|
+
for (let i = 0; i < this.LanePhaseData.length; i++) {
|
|
476
|
+
const data = {
|
|
477
|
+
...this.LanePhaseData[i],
|
|
478
|
+
control: 1
|
|
479
|
+
}
|
|
480
|
+
curLanePhaseData.push(data)
|
|
481
|
+
}
|
|
482
|
+
this.LanePhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
|
|
483
|
+
|
|
484
|
+
// 行人相位
|
|
485
|
+
let curPedStatus = []
|
|
486
|
+
for (let i = 0; i < this.sidewalkPhaseData.length; i++) {
|
|
487
|
+
const data = {
|
|
488
|
+
...this.sidewalkPhaseData[i],
|
|
489
|
+
control: 1
|
|
490
|
+
}
|
|
491
|
+
curPedStatus.push(data)
|
|
492
|
+
}
|
|
493
|
+
this.sidewalkPhaseData = JSON.parse(JSON.stringify(curPedStatus))
|
|
494
|
+
|
|
495
|
+
// 公交相位
|
|
496
|
+
let curBusLanePhaseData = []
|
|
497
|
+
for (let i = 0; i < this.busPhaseData.length; i++) {
|
|
498
|
+
const data = {
|
|
499
|
+
...this.busPhaseData[i],
|
|
500
|
+
control: 1
|
|
501
|
+
}
|
|
502
|
+
curBusLanePhaseData.push(data)
|
|
503
|
+
}
|
|
504
|
+
this.busPhaseData = JSON.parse(JSON.stringify(curBusLanePhaseData))
|
|
505
|
+
},
|
|
470
506
|
getPhaseStatus () {
|
|
471
507
|
// 得到车道相位状态（颜色）
|
|
472
508
|
this.comdirePhaseData = []
|
package/package/kisscomps/components/IntersectionMap/crossDirection/phaseIcon/LphaseIconSvg.vue
CHANGED
|
@@ -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.control === 1) {
|
|
72
75
|
// 绿闪：绿-》灰-》绿 循环效果
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
76
|
+
let highlightColor = ''
|
|
77
|
+
if (val.type === 4) {
|
|
78
|
+
highlightColor = this.GreenColor
|
|
79
|
+
}
|
|
80
|
+
if (val.control === 1) {
|
|
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.control !== 1 && val.type !== this.lastType) {
|
|
80
91
|
clearInterval(this.GreenIntervalId)
|
|
81
|
-
this.
|
|
92
|
+
this.FlashColor = undefined
|
|
82
93
|
this.lastType = ''
|
|
83
94
|
}
|
|
84
95
|
},
|