Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
H
holo-web
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
xinkong
holo-web
Commits
c2ffbddf
Commit
c2ffbddf
authored
May 23, 2024
by
ninglx
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
wj-smartcity 综合调整各模块样式 地图事件点位 首页态势监测图表按照要求修改展示内容 信号评价内容修改 数据查询除快照模块 联调及数据组装展示基本完成
parent
fe0050de
Changes
18
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
18 changed files
with
615 additions
and
201 deletions
+615
-201
eventPoint.png
wj-smartcity/src/assets/images/holo/eventPoint.png
+0
-0
elementTable.less
wj-smartcity/src/assets/less/elementTable.less
+2
-2
msg-card.vue
wj-smartcity/src/components/Standard/msg-card.vue
+2
-1
mapAssets.js
wj-smartcity/src/config/holo/mapAssets.js
+1
-1
optApi.js
wj-smartcity/src/dao/optApi.js
+7
-0
situation.js
wj-smartcity/src/dao/situation.js
+6
-0
chartStyle.js
wj-smartcity/src/utils/chartStyle.js
+1
-1
index.js
wj-smartcity/src/utils/index.js
+1
-1
cycleData.vue
wj-smartcity/src/views/dataQueries/rightForm/cycleData.vue
+201
-131
index.vue
wj-smartcity/src/views/dataQueries/rightForm/index.vue
+6
-4
index.vue
wj-smartcity/src/views/signal/index.vue
+3
-0
eventPopup.vue
wj-smartcity/src/views/signal/mapPopup/eventPopup.vue
+2
-2
index.vue
wj-smartcity/src/views/signal/msgs/index.vue
+9
-6
cross.vue
wj-smartcity/src/views/signal/msgs/left/cross.vue
+97
-32
keyCross.vue
wj-smartcity/src/views/signal/msgs/right/keyCross.vue
+28
-7
trafficEventV2.vue
wj-smartcity/src/views/signal/msgs/right/trafficEventV2.vue
+235
-0
topIndexes.vue
...ignalEvaluation/rightIndex/crossComponents/topIndexes.vue
+13
-12
mutLineChart.vue
...gnalEvaluation/rightIndex/lineComponents/mutLineChart.vue
+1
-1
No files found.
wj-smartcity/src/assets/images/holo/eventPoint.png
0 → 100644
View file @
c2ffbddf
2.38 KB
wj-smartcity/src/assets/less/elementTable.less
View file @
c2ffbddf
...
...
@@ -101,12 +101,12 @@
::v-deep .row-deep.hover-row {
td {
background-color: #171f34;
background-color: #171f34
!important
;
}
}
::v-deep .row-not.hover-row {
td {
background-color: #171f34;
background-color: #171f34
!important
;
}
}
\ No newline at end of file
wj-smartcity/src/components/Standard/msg-card.vue
View file @
c2ffbddf
...
...
@@ -46,8 +46,9 @@ export default {
}
.msg-card-content {
overflow: hidden;
padding:
10px 0 0 0
;
padding:
5px
;
background-size: 100% 100%;
//background-image: url("../../assets/images/holo/border.png");
height: calc(100% - 45px);
}
.msg-card-content-noHeader {
...
...
wj-smartcity/src/config/holo/mapAssets.js
View file @
c2ffbddf
...
...
@@ -4,7 +4,7 @@ export default {
crossNormal
:
require
(
'
../../assets/images/holo/location-yellow.png
'
),
crossFalse
:
require
(
'
../../assets/images/holo/location-gray.png
'
),
crossSelect
:
require
(
'
../../assets/images/holo/location-red.png
'
),
event
:
require
(
'
../../assets/images/holo/event.png
'
),
event
:
require
(
'
../../assets/images/holo/event
Point
.png
'
),
milli
:
require
(
'
../../assets/images/holo/hmbld.png
'
),
radar
:
require
(
'
../../assets/images/holo/jgld.png
'
),
weather
:
require
(
'
../../assets/images/holo/qxjcy.png
'
),
...
...
wj-smartcity/src/dao/optApi.js
View file @
c2ffbddf
...
...
@@ -70,4 +70,11 @@ export const getLaneSnapshotIndex = (data) => request({
url
:
`
${
baseUrl
}
/trend/laneSnapshotIndex`
,
method
:
'
post
'
,
data
:
data
})
// 根据路口id获取车道号
export
const
initLaneSort
=
(
data
)
=>
request
({
url
:
`
${
baseUrl
}
/trend/laneSnapshotIndex`
,
method
:
'
post
'
,
data
:
data
})
\ No newline at end of file
wj-smartcity/src/dao/situation.js
View file @
c2ffbddf
...
...
@@ -125,6 +125,12 @@ export const eventAnalysis = () =>request({
method
:
'
get
'
,
})
export
const
eventAnalysisV2
=
(
params
)
=>
request
({
url
:
'
/holo/event-analysis/queryByType
'
,
method
:
'
get
'
,
params
:
params
})
export
const
areaRecent
=
()
=>
request
({
url
:
'
/holo/area-index-analysis/recently
'
,
method
:
'
get
'
,
...
...
wj-smartcity/src/utils/chartStyle.js
View file @
c2ffbddf
export
const
noDataTitle
=
{
show
:
true
,
text
:
'
暂无数据
...
'
,
text
:
'
暂无数据
'
,
textStyle
:{
color
:
'
rgba(255,255,255,0.8)
'
,
},
...
...
wj-smartcity/src/utils/index.js
View file @
c2ffbddf
// 判空占位
export
function
occupancyValue
(
value
)
{
export
function
occupancyValue
(
value
,
prop
)
{
if
(
value
||
value
===
0
)
{
return
value
}
...
...
wj-smartcity/src/views/dataQueries/rightForm/cycleData.vue
View file @
c2ffbddf
This diff is collapsed.
Click to expand it.
wj-smartcity/src/views/dataQueries/rightForm/index.vue
View file @
c2ffbddf
...
...
@@ -84,12 +84,14 @@ export default {
height: 45px;
display: flex;
width: 100%;
justify-content: space-between;
background: linear-gradient( 90deg, #043A70 0%, rgba(4,59,113,0.2) 100%);
.c-tab-item {
width:
45%
;
width:
140px
;
cursor: pointer;
background-color: #1a68af;
margin-right: 6px;
background-color: #0b549a;
display: flex;
justify-content: center;
align-items: center;
...
...
@@ -100,7 +102,7 @@ export default {
}
.active {
background-color: #
207dd2
;
background-color: #
1f93ff
;
}
}
...
...
wj-smartcity/src/views/signal/index.vue
View file @
c2ffbddf
...
...
@@ -590,9 +590,12 @@ export default {
this
.
waveTitle
=
data
.
name
},
showCrossStatus
(
data
)
{
console
.
log
(
'
showCrossStatus
'
)
this
.
timer
=
setInterval
(()
=>
{
if
(
map
?.
hasImage
(
'
crossStatus0
'
)
&&
map
?.
hasImage
(
'
crossStatus1
'
)
&&
map
?.
hasImage
(
'
crossStatus2
'
)
&&
map
?.
hasImage
(
'
crossStatus3
'
)){
clearInterval
(
this
.
timer
)
console
.
log
(
'
sAddOrUpdateCrossStatus
'
)
let
features
=
[]
for
(
let
item
of
data
)
{
features
.
push
(
turf
.
point
(
item
.
location
,
item
))
...
...
wj-smartcity/src/views/signal/mapPopup/eventPopup.vue
View file @
c2ffbddf
...
...
@@ -29,8 +29,8 @@ export default {
return
[
{
label
:
"
时间:
"
,
value
:
this
.
model
.
startTime
},
{
label
:
"
事件编号:
"
,
value
:
occupancyValue
(
this
.
model
.
eventId
)
},
{
label
:
"
停车状态:
"
,
value
:
'
--
'
},
{
label
:
"
车辆类型:
"
,
value
:
occupancyValue
(
this
.
model
.
objectType
)
},
{
label
:
"
停车状态:
"
,
value
:
'
触发
'
},
{
label
:
"
车辆类型:
"
,
value
:
'
机动车
'
},
{
label
:
"
车辆号码:
"
,
value
:
occupancyValue
(
this
.
model
.
plateNo
)
},
];
},
...
...
wj-smartcity/src/views/signal/msgs/index.vue
View file @
c2ffbddf
...
...
@@ -9,12 +9,13 @@
<cross-detail
:clickCrossData=
"clickCrossData"
class=
"full-w-h"
:key=
"detailKey"
v-if=
"isCrossDetail"
/>
<div
class=
"full-w-h"
v-else
>
<key-cross
style=
"height: 33%"
/>
<traffic-event
style=
"height: 33%"
/>
<traffic-event
-v2
style=
"height: 33%"
/>
<warning-msg
style=
"height: 33%"
/>
</div>
</div>
<div
class=
"button_flow"
:class=
"[
{ hide_bottom: !show }]">
<traffic-flow
@
showEventPoint=
"showEventPoint"
:crossData=
"clickCrossData"
:key=
"bottomChartKey"
:isCrossDetail=
"isCrossDetail"
style=
"height: 100%;"
/>
<traffic-flow
@
showEventPoint=
"showEventPoint"
:crossData=
"clickCrossData"
:key=
"bottomChartKey"
:isCrossDetail=
"isCrossDetail"
style=
"height: 100%;"
/>
</div>
</div>
</
template
>
...
...
@@ -27,10 +28,12 @@ import WarningMsg from "@/views/signal/msgs/right/warningMsg.vue";
import
TrafficFlow
from
"
@/views/signal/msgs/trafficFlow.vue
"
;
import
KeyCross
from
"
@/views/signal/msgs/right/keyCross.vue
"
;
import
CrossDetail
from
"
@/views/signal/msgs/right/crossDetail.vue
"
;
import
TrafficEventV2
from
"
@/views/signal/msgs/right/trafficEventV2.vue
"
;
export
default
{
props
:
[
"
show
"
,
'
isCrossDetail
'
,
'
clickCrossData
'
],
components
:
{
TrafficEventV2
,
CrossDetail
,
KeyCross
,
TrafficFlow
,
...
...
@@ -43,7 +46,7 @@ export default {
return
{};
},
computed
:
{
bottomChartKey
(){
bottomChartKey
()
{
return
`bottomChart
${
this
.
isCrossDetail
}${
this
.
clickCrossData
.
id
}
`
},
detailKey
()
{
...
...
@@ -55,8 +58,8 @@ export default {
mounted
()
{
},
methods
:
{
showEventPoint
(
events
){
this
.
$emit
(
'
showEventPoint
'
,
events
)
showEventPoint
(
events
)
{
this
.
$emit
(
'
showEventPoint
'
,
events
)
},
showCrossStatus
(
data
)
{
this
.
$emit
(
'
showCrossStatus
'
,
data
)
...
...
@@ -150,7 +153,7 @@ export default {
box-shadow: 0 -30px 30px 0px #030b19;
z-index: 12;
position: absolute;
background: linear-gradient(
180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,
0.8) 100%);
background: linear-gradient(
180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0,
0.8) 100%);
left: 50%;
bottom: 0;
transform: translateX(-50%);
...
...
wj-smartcity/src/views/signal/msgs/left/cross.vue
View file @
c2ffbddf
...
...
@@ -5,7 +5,7 @@
element-loading-background=
"rgba(3, 11, 25, 0.8)"
>
<div
class=
"questionArea"
>
<div
class=
"kip-box"
>
<!-- @click="kipClick(item)"-->
<!-- @click="kipClick(item)"-->
<div
class=
"kip-item"
v-for=
"(item, index) in kipData"
...
...
@@ -20,17 +20,17 @@
</div>
</div>
<!--
<div
class=
"alarm-title-box"
>
-->
<!--
<div
class=
"alarm-title"
>
-->
<!--
<img
src=
"../../../../assets/images/homepage/second-title-icon.svg"
alt=
""
/>
-->
<!-- 路口列表
{{
kipActive
.
name
?
"
-
"
:
""
}}{{
kipActive
.
name
}}
-->
<!--
</div>
-->
<!-- <!–-->
<!--
<el-radio-group
v-model=
"radio"
@
change=
"initData"
>
-->
<!--
<el-radio
:label=
"1"
>
常发性
</el-radio>
-->
<!--
<el-radio
:label=
"2"
>
偶发性
</el-radio>
-->
<!--
</el-radio-group>
–>
-->
<!--
</div>
-->
<!--
<div
class=
"alarm-title-box"
>
-->
<!--
<div
class=
"alarm-title"
>
-->
<!--
<img
src=
"../../../../assets/images/homepage/second-title-icon.svg"
alt=
""
/>
-->
<!-- 路口列表
{{
kipActive
.
name
?
"
-
"
:
""
}}{{
kipActive
.
name
}}
-->
<!--
</div>
-->
<!-- <!–-->
<!--
<el-radio-group
v-model=
"radio"
@
change=
"initData"
>
-->
<!--
<el-radio
:label=
"1"
>
常发性
</el-radio>
-->
<!--
<el-radio
:label=
"2"
>
偶发性
</el-radio>
-->
<!--
</el-radio-group>
–>
-->
<!--
</div>
-->
<div
class=
"list_control"
>
<el-input
class=
"homepage-search"
...
...
@@ -188,11 +188,11 @@ export default {
listData
:
[],
listDataCopy
:
[],
kipData
:
[
{
name
:
"
溢出
"
,
type
:
3
,
value
:
0
,
color
:
'
#9a0807
'
},
{
name
:
"
拥堵
"
,
type
:
2
,
value
:
0
,
color
:
'
#c56504
'
},
{
name
:
"
失衡
"
,
type
:
1
,
value
:
0
,
color
:
'
#e1b102
'
},
{
name
:
"
空放
"
,
type
:
5
,
value
:
0
,
color
:
'
#87898c
'
},
{
name
:
"
畅通
"
,
type
:
0
,
value
:
0
,
color
:
'
#007b33
'
},
{
name
:
"
溢出
"
,
type
:
3
,
value
:
0
,
color
:
'
#9a0807
'
,
bg
:
'
rgba(154, 8, 7,0.3)
'
},
{
name
:
"
拥堵
"
,
type
:
2
,
value
:
0
,
color
:
'
#c56504
'
,
bg
:
'
rgba(197, 101, 4,0.3)
'
},
{
name
:
"
失衡
"
,
type
:
1
,
value
:
0
,
color
:
'
#e1b102
'
,
bg
:
'
rgba(225, 177, 2,0.3)
'
},
{
name
:
"
空放
"
,
type
:
5
,
value
:
0
,
color
:
'
#87898c
'
,
bg
:
'
rgba(135, 137, 140,0.3)
'
},
{
name
:
"
畅通
"
,
type
:
0
,
value
:
0
,
color
:
'
#007b33
'
,
bg
:
'
rgba(0, 123, 51,0.3)
'
},
],
infoStatusObj
:
{
"
0
"
:
"
未开启
"
,
...
...
@@ -205,11 +205,11 @@ export default {
};
},
methods
:
{
getRowClassName
(
e
){
getRowClassName
(
e
)
{
if
(
e
.
rowIndex
%
2
!==
0
)
{
return
"
row-even
"
;
return
"
row-even
"
;
}
else
{
return
"
row-odd
"
;
return
"
row-odd
"
;
}
},
...
...
@@ -256,11 +256,41 @@ export default {
// {name: "失衡", type: 1, value: data.abnormalCrossStats.unbalance},
// {name: "溢出", type: 3, value: data.abnormalCrossStats.spillover},
// {name: "正常", type: 0, value: data.abnormalCrossStats.normal},
{
name
:
"
溢出
"
,
type
:
3
,
value
:
data
.
abnormalCrossStats
.
spillover
,
color
:
'
#9a0807
'
,
bg
:
'
rgba(154, 8, 7,0.3)
'
},
{
name
:
"
拥堵
"
,
type
:
2
,
value
:
data
.
abnormalCrossStats
.
congestion
,
color
:
'
#c56504
'
,
bg
:
'
rgba(197, 101, 4,0.3)
'
,},
{
name
:
"
失衡
"
,
type
:
1
,
value
:
data
.
abnormalCrossStats
.
unbalance
,
color
:
'
#e1b102
'
,
bg
:
'
rgba(225, 177, 2,0.3)
'
},
{
name
:
"
空放
"
,
type
:
5
,
value
:
data
.
abnormalCrossStats
.
phaseEmpty
,
color
:
'
#87898c
'
,
bg
:
'
rgba(135, 137, 140,0.3)
'
},
{
name
:
"
畅通
"
,
type
:
0
,
value
:
data
.
abnormalCrossStats
.
normal
,
color
:
'
#007b33
'
,
bg
:
'
rgba(0, 123, 51,0.3)
'
},
{
name
:
"
溢出
"
,
type
:
3
,
value
:
data
.
abnormalCrossStats
.
spillover
,
color
:
'
#9a0807
'
,
bg
:
'
rgba(154, 8, 7,0.3)
'
},
{
name
:
"
拥堵
"
,
type
:
2
,
value
:
data
.
abnormalCrossStats
.
congestion
,
color
:
'
#c56504
'
,
bg
:
'
rgba(197, 101, 4,0.3)
'
,
},
{
name
:
"
失衡
"
,
type
:
1
,
value
:
data
.
abnormalCrossStats
.
unbalance
,
color
:
'
#e1b102
'
,
bg
:
'
rgba(225, 177, 2,0.3)
'
},
{
name
:
"
空放
"
,
type
:
5
,
value
:
data
.
abnormalCrossStats
.
phaseEmpty
,
color
:
'
#87898c
'
,
bg
:
'
rgba(135, 137, 140,0.3)
'
},
{
name
:
"
畅通
"
,
type
:
0
,
value
:
data
.
abnormalCrossStats
.
normal
,
color
:
'
#007b33
'
,
bg
:
'
rgba(0, 123, 51,0.3)
'
},
];
this
.
listData
=
data
.
abnormalCrossList
.
sort
((
a
,
b
)
=>
{
return
Number
(
b
.
congestionIndex
)
-
Number
(
a
.
congestionIndex
)
...
...
@@ -279,7 +309,7 @@ export default {
this
.
listDataCopy
=
(
JSON
.
parse
(
JSON
.
stringify
(
this
.
listData
)))
}
else
{
this
.
kipActive
=
{
name
:
item
.
name
,
type
:
item
.
type
};
this
.
listDataCopy
=
this
.
listData
.
filter
(
row
=>
{
this
.
listDataCopy
=
this
.
listData
.
filter
(
row
=>
{
return
row
.
realtimeStatus
==
item
.
type
})
}
...
...
@@ -302,11 +332,41 @@ export default {
// {name: "失衡", type: 1, value: data.abnormalCrossStats.unbalance},
// {name: "溢出", type: 3, value: data.abnormalCrossStats.spillover},
// {name: "正常", type: 0, value: data.abnormalCrossStats.normal},
{
name
:
"
溢出
"
,
type
:
3
,
value
:
data
.
abnormalCrossStats
.
spillover
,
color
:
'
#9a0807
'
,
bg
:
'
rgba(154, 8, 7,0.3)
'
},
{
name
:
"
拥堵
"
,
type
:
2
,
value
:
data
.
abnormalCrossStats
.
congestion
,
color
:
'
#c56504
'
,
bg
:
'
rgba(197, 101, 4,0.3)
'
,},
{
name
:
"
失衡
"
,
type
:
1
,
value
:
data
.
abnormalCrossStats
.
unbalance
,
color
:
'
#e1b102
'
,
bg
:
'
rgba(225, 177, 2,0.3)
'
},
{
name
:
"
空放
"
,
type
:
5
,
value
:
data
.
abnormalCrossStats
.
phaseEmpty
,
color
:
'
#87898c
'
,
bg
:
'
rgba(135, 137, 140,0.3)
'
},
{
name
:
"
畅通
"
,
type
:
0
,
value
:
data
.
abnormalCrossStats
.
normal
,
color
:
'
#007b33
'
,
bg
:
'
rgba(0, 123, 51,0.3)
'
},
{
name
:
"
溢出
"
,
type
:
3
,
value
:
data
.
abnormalCrossStats
.
spillover
,
color
:
'
#9a0807
'
,
bg
:
'
rgba(154, 8, 7,0.3)
'
},
{
name
:
"
拥堵
"
,
type
:
2
,
value
:
data
.
abnormalCrossStats
.
congestion
,
color
:
'
#c56504
'
,
bg
:
'
rgba(197, 101, 4,0.3)
'
,
},
{
name
:
"
失衡
"
,
type
:
1
,
value
:
data
.
abnormalCrossStats
.
unbalance
,
color
:
'
#e1b102
'
,
bg
:
'
rgba(225, 177, 2,0.3)
'
},
{
name
:
"
空放
"
,
type
:
5
,
value
:
data
.
abnormalCrossStats
.
phaseEmpty
,
color
:
'
#87898c
'
,
bg
:
'
rgba(135, 137, 140,0.3)
'
},
{
name
:
"
畅通
"
,
type
:
0
,
value
:
data
.
abnormalCrossStats
.
normal
,
color
:
'
#007b33
'
,
bg
:
'
rgba(0, 123, 51,0.3)
'
},
];
this
.
listData
=
data
.
abnormalCrossList
.
sort
((
a
,
b
)
=>
{
return
Number
(
b
.
congestionIndex
)
-
Number
(
a
.
congestionIndex
)
...
...
@@ -376,6 +436,7 @@ export default {
::v-deep .el-table__empty-text {
color: #ccc;
}
::v-deep .row-even {
td {
background-color: #030d1e;
...
...
@@ -387,9 +448,11 @@ export default {
background-color: #0b1933;
}
}
::v-deep .el-input__inner {
color: white;
}
.item-cross {
...
...
@@ -405,7 +468,8 @@ export default {
.sort_btn {
width: 25%;
::v-deep .el-input__inner{
::v-deep .el-input__inner {
background-color: #233b6b;
}
}
...
...
@@ -421,6 +485,7 @@ export default {
flex-wrap: nowrap;
justify-content: space-between;
margin-bottom: 5px;
.kip-item {
cursor: pointer;
border: 1px solid transparent;
...
...
wj-smartcity/src/views/signal/msgs/right/keyCross.vue
View file @
c2ffbddf
...
...
@@ -36,6 +36,12 @@ export default {
if
(
!
this
.
xData
.
length
){
title
=
noDataTitle
}
let
colors
=
[
"
rgba(24, 144, 255, 1)
"
,
"
rgba(0, 189, 208, 1)
"
,
"
rgba(79, 210, 125, 1)
"
,
"
rgba(255, 209, 69, 1)
"
,
]
return
{
title
,
dataZoom
:
{
...
...
@@ -43,12 +49,6 @@ export default {
startValue
:
Object
.
keys
(
this
.
chartResult
).
length
-
6
,
endValue
:
Object
.
keys
(
this
.
chartResult
).
length
-
1
,
},
color
:
[
"
rgba(24, 144, 255, 1)
"
,
"
rgba(0, 189, 208, 1)
"
,
"
rgba(79, 210, 125, 1)
"
,
"
rgba(255, 209, 69, 1)
"
,
],
tooltip
:
{
enterable
:
true
,
trigger
:
"
axis
"
,
...
...
@@ -122,13 +122,34 @@ export default {
let
nameReal
=
this
.
$store
.
state
.
dicts
.
Direction
.
find
((
item
)
=>
{
return
item
.
code
==
key
;
}).
name
let
index
=
Object
.
keys
(
this
.
chartResult
).
indexOf
(
key
)
series
.
push
({
name
:
nameReal
,
type
:
"
bar
"
,
barWidth
:
getFontSize
(
6
),
barWidth
:
getFontSize
(
8
),
label
:
{
show
:
false
,
},
itemStyle
:{
borderRadius
:
4
,
color
:
new
echarts
.
graphic
.
LinearGradient
(
0
,
1
,
0
,
0
,
[
{
offset
:
0
,
color
:
colors
[
index
].
replace
(
'
1)
'
,
'
0.2)
'
),
// 100% 处的颜色
},
{
offset
:
1
,
color
:
colors
[
index
]
,
// 0% 处的颜色
},
],
false
),
},
emphasis
:
{
focus
:
"
series
"
,
},
...
...
wj-smartcity/src/views/signal/msgs/right/trafficEventV2.vue
0 → 100644
View file @
c2ffbddf
<
template
>
<msg-card
class=
"item-trafficEvent"
title=
"交通事件"
>
<div
class=
"full-h trafficEvent"
v-loading=
"eventLoading"
element-loading-spinner=
"el-icon-loading"
element-loading-text=
"数据加载中..."
element-loading-background=
"rgba(3, 11, 25, 0.8)"
>
<div
class=
"event-list-container full-w-h"
>
<div
class=
"trafficItem"
:class=
"`event$
{i.eventType}`"
v-for="(i,index) of eventList"
:key="index"
>
<div
class=
"leftImg"
:class=
"`event$
{i.eventType}`">
</div>
<div
class=
"right"
>
<div>
{{
i
.
eventNumber
}}
</div>
<div
:title=
"i.eventLabel"
>
{{
i
.
eventLabel
}}
</div>
</div>
</div>
</div>
</div>
</msg-card>
</
template
>
<
script
>
import
{
eventAnalysis
,
eventAnalysisV2
}
from
"
../../../../dao/situation
"
;
import
msgCard
from
"
../../../../components/Standard/msg-card.vue
"
;
export
default
{
name
:
"
trafficEventV2
"
,
components
:
{
msgCard
,
},
data
()
{
return
{
eventLoading
:
true
,
chart
:
null
,
// 交通事件
trafficEvents
:
[],
eventList
:
[],
};
},
methods
:
{
getEventAnalysis
()
{
eventAnalysisV2
({
eventType
:
'
1,401,701,702,703,704,502,503,504
'
}).
then
((
res
)
=>
{
console
.
log
(
'
events...
'
,
res
)
this
.
eventLoading
=
false
this
.
eventList
=
res
.
content
.
reduce
((
a
,
b
)
=>
{
if
([
'
502
'
,
'
503
'
,
'
504
'
].
includes
(
b
.
eventType
)){
let
containFlag
=
false
for
(
let
aItem
of
a
){
if
(
aItem
.
eventType
===
'
yd
'
){
containFlag
=
true
aItem
.
eventNumber
+=
Number
(
b
.
eventNumber
)
}
}
if
(
!
containFlag
){
a
.
push
({
eventType
:
'
yd
'
,
eventNumber
:
b
.
eventNumber
,
eventLabel
:
'
拥堵事件
'
})
}
}
else
if
([
'
1
'
,
'
401
'
].
includes
(
b
.
eventType
)){
let
containFlag
=
false
for
(
let
aItem
of
a
){
if
(
aItem
.
eventType
===
'
tcsj
'
){
containFlag
=
true
aItem
.
eventNumber
+=
Number
(
b
.
eventNumber
)
}
}
if
(
!
containFlag
){
a
.
push
({
eventType
:
'
tcsj
'
,
eventNumber
:
b
.
eventNumber
,
eventLabel
:
'
停车事件
'
})
}
}
else
{
a
.
push
(
b
)
}
return
a
},
[])
});
},
},
mounted
()
{
this
.
getEventAnalysis
();
},
};
</
script
>
<
style
lang=
"less"
scoped
>
.item-trafficEvent {
//::-webkit-scrollbar {
// width: 0;
// height: 0;
// background-color: #f5f7fa;
//}
::v-deep .el-tabs__item {
color: white;
height: 28px;
line-height: 24px;
font-size: 16px;
font-weight: 500;
padding: 0 12px;
}
::v-deep .el-tabs__active-bar {
background: linear-gradient(90deg,
transparent 0%,
rgba(41, 110, 194, 1) 50%,
transparent 100%);
}
::v-deep .el-tabs__header {
margin: 0;
height: 30px;
}
::v-deep .el-tabs__nav {
transform: translateX(-50%) !important;
left: 50%;
}
::v-deep .el-tabs__nav-wrap::after {
background-color: transparent;
}
::v-deep .el-tabs__content {
background-color: #010613;
padding: 12px;
overflow: auto;
height: calc(100% - 30px);
}
.head {
display: flex;
width: 100%;
height: 100%;
.name {
height: 100%;
width: 90%;
line-height: normal;
}
.number {
line-height: normal;
}
}
.trafficEvent {
overflow: hidden;
}
.event-list-container {
color: rgba(155, 177, 212, 1);
display: flex;
height: 100%;
justify-content: space-between;
flex-flow: row wrap;
align-items: center;
.trafficItem {
width: 49%;
font-size: 14px;
height:29%;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #012546;
padding: 6px 10px 6px 0;
.leftImg{
width: 36%;
height: 100%;
background-position-x: right;
background-size: auto 100%;
background-repeat: no-repeat;
}
.eventtcsj{
background-image: url("../../../../assets/images/smartCityMain/event1.png");
}
.eventyd{
background-image: url("../../../../assets/images/smartCityMain/event222.png");
}
.event701{
background-image: url("../../../../assets/images/smartCityMain/event701.png");
}
.event702{
background-image: url("../../../../assets/images/smartCityMain/event702.png");
}
.event703{
background-image: url("../../../../assets/images/smartCityMain/event703.png");
}
.event704{
background-image: url("../../../../assets/images/smartCityMain/event704.png");
}
.right {
width: 55%;
max-width: 60%;
color: rgba(255,255,255,0.9);
font-size: 16px;
display: inline-block;
text-align: left;
// max-width: 80%;
white-space: nowrap;
div{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
div:first-child{
font-size: 18px;
color:#0cd2ff;
font-weight: bold;
}
}
}
.trafficItem:nth-child(5){
margin-bottom: 0;
}
.trafficItem:nth-child(6){
margin-bottom: 0;
}
}
}
</
style
>
wj-smartcity/src/views/signalEvaluation/rightIndex/crossComponents/topIndexes.vue
View file @
c2ffbddf
...
...
@@ -8,44 +8,45 @@
</div>
</div>
<div
class=
"full-h child"
>
<div
class=
"indexTitle"
style=
"background-color: #
69431d"
>
拥堵
</div>
<div
class=
"indexContent"
style=
"background-color: #2
e2b2a
"
>
<div
class=
"indexTitle"
style=
"background-color: #
49141f"
>
溢出
</div>
<div
class=
"indexContent"
style=
"background-color: #2
1182b
"
>
<div
class=
"sideIndex"
>
<div>
次数
</div>
<div>
{{
indexes
.
congestion
Times
||
0
}}
</div>
<div>
{{
indexes
.
spillover
Times
||
0
}}
</div>
</div>
<div
class=
"sideIndex"
>
<div>
总时长
</div>
<div>
{{
indexes
.
congestion
Sum
||
0
}}
min
</div>
<div>
{{
indexes
.
spillover
Sum
||
0
}}
min
</div>
</div>
</div>
</div>
<div
class=
"full-h child"
>
<div
class=
"indexTitle"
style=
"background-color: #695f1e"
>
失衡
</div>
<div
class=
"indexContent"
style=
"background-color: #2e
36
2a"
>
<div
class=
"indexTitle"
style=
"background-color: #69431d"
>
拥堵
</div>
<div
class=
"indexContent"
style=
"background-color: #2e
2b
2a"
>
<div
class=
"sideIndex"
>
<div>
次数
</div>
<div>
{{
indexes
.
unbalance
Times
||
0
}}
</div>
<div>
{{
indexes
.
congestion
Times
||
0
}}
</div>
</div>
<div
class=
"sideIndex"
>
<div>
总时长
</div>
<div>
{{
indexes
.
unbalance
Sum
||
0
}}
min
</div>
<div>
{{
indexes
.
congestion
Sum
||
0
}}
min
</div>
</div>
</div>
</div>
<div
class=
"full-h child"
>
<div
class=
"indexTitle"
style=
"background-color: #49141f"
>
溢出
</div>
<div
class=
"indexContent"
style=
"background-color: #2
1182b
"
>
<div
class=
"indexTitle"
style=
"background-color: #695f1e"
>
失衡
</div>
<div
class=
"indexContent"
style=
"background-color: #2
e362a
"
>
<div
class=
"sideIndex"
>
<div>
次数
</div>
<div>
{{
indexes
.
spillover
Times
||
0
}}
</div>
<div>
{{
indexes
.
unbalance
Times
||
0
}}
</div>
</div>
<div
class=
"sideIndex"
>
<div>
总时长
</div>
<div>
{{
indexes
.
spillover
Sum
||
0
}}
min
</div>
<div>
{{
indexes
.
unbalance
Sum
||
0
}}
min
</div>
</div>
</div>
</div>
<div
class=
"full-h child"
>
<div
class=
"indexTitle"
style=
"background-color: #495563"
>
空放
</div>
<div
class=
"indexContent"
style=
"background-color: #213246"
>
...
...
wj-smartcity/src/views/signalEvaluation/rightIndex/lineComponents/mutLineChart.vue
View file @
c2ffbddf
...
...
@@ -92,7 +92,7 @@
</el-select>
</div>
</div>
<div
class=
"line-chart noDataMsg"
v-if=
"!indexModel"
>
暂无数据
...
</div>
<div
class=
"line-chart noDataMsg"
v-if=
"!indexModel"
>
暂无数据
</div>
<div
class=
"line-chart"
ref=
"chartLine"
v-else
></div>
</div>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment