6 changed files with 556 additions and 4 deletions
@ -0,0 +1,70 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'设备在线率'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts" id="deviceUptime"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import WgtTitle from "../../../../perception/widgets/title"; |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
export default { |
|||
name: 'DeviceUptime', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
var myChart = echarts.init(document.getElementById('deviceUptime')); |
|||
myChart.setOption(chartsStatistics); |
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.board{ |
|||
height:510px; |
|||
width: 100%; |
|||
padding: 0px 20px; |
|||
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 0.8; |
|||
border: 1px solid; |
|||
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
|
|||
} |
|||
} |
|||
.charts { |
|||
height:100%; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,182 @@ |
|||
|
|||
let data = [100, 0, 0, 0, 40, 40,40, 64,40, 64,40, 64] |
|||
let indicator = [ |
|||
|
|||
{ name: '智能设备箱', max: 100 }, |
|||
{ name: '智能行车诱导系统', max: 100 }, |
|||
{ name: '一类交通量调查站', max: 100 }, |
|||
{ name: '激光疲劳唤醒系统', max: 100 }, |
|||
{ name: '合流区预警系统', max: 100 }, |
|||
{ name: '毫米波雷达', max: 100 }, |
|||
{ name: '护碰撞预警系统', max: 100 }, |
|||
{ name: '路段语音广播系统', max: 100 }, |
|||
{ name: '气象检测器', max: 100 }, |
|||
{ name: '站前悬臂式可变信息标志', max: 100 }, |
|||
{ name: '雨棚可变信息标志', max: 100 }, |
|||
{ name: '门架式可变信息标志', max: 100 }, |
|||
{ name: '180°全景摄像机', max: 100 }, |
|||
{ name: '360°全景摄像机', max: 100 }, |
|||
{ name: '高清网络枪型固定摄像机', max: 100 }, |
|||
{ name: '高清网络球形摄像机', max: 100 }, |
|||
] |
|||
|
|||
let options = { |
|||
|
|||
tooltip: {}, |
|||
radar: { |
|||
center: ['50%', '50%'], |
|||
radius: '75%', |
|||
nameGap: 0, |
|||
indicator: indicator, |
|||
splitLine: { |
|||
show: false |
|||
|
|||
}, |
|||
splitArea: { |
|||
show: false |
|||
}, |
|||
axisLine: { |
|||
show: true |
|||
}, |
|||
name: { |
|||
textStyle: { |
|||
color: '#F2F3F5', |
|||
fontSize: '20', |
|||
borderRadius: 3, |
|||
padding: [3, 5] |
|||
} |
|||
}, |
|||
}, |
|||
series: [{ |
|||
type: 'radar', |
|||
data: [data], |
|||
name: '安全作业', |
|||
label: { |
|||
show: true, |
|||
formatter: function (params) { |
|||
console.log(params) |
|||
return params.value; |
|||
}, |
|||
color: '#fff', |
|||
// position:[-20,-10,-10,-10],
|
|||
align: 'right', |
|||
distance: 10, |
|||
align: 'right' |
|||
}, |
|||
symbolSize: 10, |
|||
lineStyle: { //边缘颜色
|
|||
width: 2, |
|||
color: '#2287FE' |
|||
}, |
|||
itemStyle: { |
|||
borderWidth: 0, |
|||
color: '#ffffff00', |
|||
borderColor: '#2287F00', |
|||
}, |
|||
areaStyle: { |
|||
color: '#2287FE60', |
|||
opacity: 1 |
|||
} |
|||
}, |
|||
{ |
|||
type: 'radar', |
|||
name: '安全作业', |
|||
data: [ |
|||
[100, 100, 100, 100, 100, 100, 100, 100,100, 100, 100, 100, 100, 100, 100, 100], |
|||
], |
|||
|
|||
symbol: 'none', |
|||
lineStyle: { |
|||
width: 1 |
|||
}, |
|||
itemStyle: { |
|||
color: '#2AD1BC' |
|||
}, |
|||
|
|||
areaStyle: { |
|||
color: '#2AD1BC29', |
|||
opacity: 0.1 |
|||
} |
|||
}, |
|||
{ |
|||
type: 'radar', |
|||
name: '安全作业', |
|||
data: [ |
|||
[80, 80, 80, 80, 80, 80, 80, 80,80, 80, 80, 80, 80, 80, 80, 80] |
|||
], |
|||
|
|||
symbol: 'none', |
|||
lineStyle: { |
|||
width: 1 |
|||
}, |
|||
itemStyle: { |
|||
color: '#2AD1BC' |
|||
}, |
|||
|
|||
areaStyle: { |
|||
color: '#2AD1BC29', |
|||
opacity: 0.2 |
|||
} |
|||
}, |
|||
{ |
|||
type: 'radar', |
|||
name: '安全作业', |
|||
data: [ |
|||
[60, 60, 60, 60, 60, 60, 60, 60,60, 60, 60, 60, 60, 60, 60, 60], |
|||
], |
|||
|
|||
symbol: 'none', |
|||
lineStyle: { |
|||
width: 1 |
|||
}, |
|||
itemStyle: { |
|||
color: '#2AD1BC' |
|||
}, |
|||
|
|||
areaStyle: { |
|||
color: '#2AD1BC29', |
|||
opacity: 0.1 |
|||
} |
|||
}, |
|||
{ |
|||
type: 'radar', |
|||
name: '安全作业', |
|||
data: [ |
|||
[40, 40, 40, 40, 40, 40, 40, 40,40, 40, 40, 40, 40, 40, 40, 40], |
|||
], |
|||
symbol: 'none', |
|||
lineStyle: { |
|||
width: 1 |
|||
}, |
|||
itemStyle: { |
|||
color: '#2AD1BC' |
|||
}, |
|||
|
|||
areaStyle: { |
|||
color: '#2AD1BC29', |
|||
opacity: 0.1 |
|||
} |
|||
}, |
|||
{ |
|||
type: 'radar', |
|||
name: '安全作业', |
|||
data: [ |
|||
[20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20], |
|||
], |
|||
symbol: 'none', |
|||
lineStyle: { |
|||
width: 1 |
|||
}, |
|||
itemStyle: { |
|||
color: '#2AD1BC' |
|||
}, |
|||
|
|||
areaStyle: { |
|||
color: '#2AD1BC29', |
|||
opacity: 0.1 |
|||
} |
|||
}, |
|||
] |
|||
}; |
|||
|
|||
export default options; |
|||
@ -0,0 +1,274 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'月设备变化曲线'"></WgtTitle> |
|||
<div class="board"> |
|||
|
|||
<div class="round-div" v-for="(item) in dataList" :style="{background:'linear-gradient(80deg, '+item.color+'66 0%, '+item.color+'00 100%)',width:'calc('+ item.num / 100 +' * 400px)',top:item.top+'px',left:item.left+'px'}" > |
|||
<div class="round-num" :style="{color:item.color}" > |
|||
{{ item.num }}% |
|||
</div> |
|||
<div class="round-text" > |
|||
{{ item.text }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import WgtTitle from "../../../../perception/widgets/title"; |
|||
import * as echarts from "echarts"; |
|||
|
|||
export default { |
|||
name: 'MonthlyEquipment', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
dataList:[ |
|||
{ |
|||
num:40, |
|||
text:"高清网络球形摄像机", |
|||
color:"#17A2FF", |
|||
top:200, |
|||
left:100, |
|||
}, |
|||
{ |
|||
num:30, |
|||
text:"360°全景摄像机", |
|||
color:"#1C7C3A", |
|||
top:100, |
|||
left:100, |
|||
}, |
|||
{ |
|||
num:80, |
|||
text:"门架式可变信息标志", |
|||
color:"#17A2FF", |
|||
top:130, |
|||
left:300, |
|||
}, |
|||
{ |
|||
num:70, |
|||
text:"站前悬臂式可变信息标志", |
|||
color:"#17E3FF", |
|||
top:230, |
|||
left:500, |
|||
}, |
|||
{ |
|||
num:60, |
|||
text:"气象检测器", |
|||
color:"#17A2FF", |
|||
top:330, |
|||
left:250, |
|||
}, |
|||
{ |
|||
num:70, |
|||
text:"合流区预警系统", |
|||
color:"#17A2FF", |
|||
top:330, |
|||
left:550, |
|||
}, |
|||
{ |
|||
num:40, |
|||
text:"高清网络枪型固定摄像机", |
|||
color:"#17E3FF", |
|||
top:30, |
|||
left:250, |
|||
}, |
|||
{ |
|||
num:40, |
|||
text:"雨棚可变信息标志", |
|||
color:"#17A2FF", |
|||
top:230, |
|||
left:280, |
|||
}, |
|||
{ |
|||
num:80, |
|||
text:"毫米波雷达", |
|||
color:"#FFCE85", |
|||
top:100, |
|||
left:680, |
|||
}, |
|||
{ |
|||
num:80, |
|||
text:"路段语音广播系统", |
|||
color:"#17A2FF", |
|||
top:250, |
|||
left:820, |
|||
}, |
|||
{ |
|||
num:60, |
|||
text:"护碰撞预警系统", |
|||
color:"#17A2FF", |
|||
top:170, |
|||
left:920, |
|||
},{ |
|||
num:70, |
|||
text:"激光疲劳唤醒系统", |
|||
color:"#17E3FF" , |
|||
top:70, |
|||
left:1020, |
|||
},{ |
|||
num:40, |
|||
text:"180°全景摄像机" , |
|||
color:"#1C7C3A", |
|||
top:20, |
|||
left:820, |
|||
},{ |
|||
num:50, |
|||
text:"一类交通量调音站" , |
|||
color:'#17A2FF', |
|||
top:20, |
|||
left:520, |
|||
},{ |
|||
num:50, |
|||
text:"智能行车诱导系统" , |
|||
color:'#17E3FF', |
|||
top:350, |
|||
left:920, |
|||
},{ |
|||
num:60, |
|||
text:"智能设备箱" , |
|||
color:"#FFCE85", |
|||
top:430, |
|||
left:320, |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
|
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.board{ |
|||
position: relative; |
|||
height:510px; |
|||
width: 100%; |
|||
padding: 0px 20px; |
|||
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 0.8; |
|||
border: 1px solid; |
|||
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
|
|||
.round-div:nth-child(5n + 1) { |
|||
animation:mymove 6.5s infinite; |
|||
-webkit-animation:mymove 1.5s infinite; |
|||
} |
|||
|
|||
.round-div:nth-child(4n + 1){ |
|||
animation:mymove_dow 5.5s infinite; |
|||
animation-delay: 3s; |
|||
} |
|||
|
|||
.round-div:nth-child(3n + 1){ |
|||
animation:mymove 4.5s infinite; |
|||
animation-delay: 2s; |
|||
} |
|||
|
|||
.round-div:nth-child(2n + 1){ |
|||
animation:mymove 3.5s infinite; |
|||
animation-delay: 1s; |
|||
} |
|||
|
|||
.round-div:nth-child(n + 1){ |
|||
animation:mymove 2.5s infinite; |
|||
animation-delay: 0s; |
|||
} |
|||
|
|||
.round-div { |
|||
position: absolute; |
|||
flex-direction: column; |
|||
display: inline-flex; |
|||
width: 182px; |
|||
height: 69px; |
|||
background: linear-gradient(80deg, rgba(23,162,255,0.6) 0%, rgba(23,162,255,0) 100%); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
border-radius: 50%; |
|||
border: 2px solid; |
|||
border: rgba(23, 162, 255, 0.2); |
|||
|
|||
|
|||
> .round-num { |
|||
width:100%; |
|||
height:30px; |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 18px !important; |
|||
font-family: PangMenZhengDao, PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #2CA7F7; |
|||
} |
|||
|
|||
.round-text { |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 21px; |
|||
font-size: 14px; |
|||
font-family: Hiragino Sans GB, Hiragino Sans GB; |
|||
font-weight: normal; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.charts { |
|||
height:100%; |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
@keyframes mymove{ |
|||
0% {transform: translate(0px, 0px);} |
|||
50% {transform: translate(0px, -10px);} |
|||
100% {transform: translate(0px, 0px);} |
|||
|
|||
} |
|||
|
|||
@keyframes mymove_dow{ |
|||
0% {transform: translate(0px, 0px);} |
|||
50% {transform: translate(0px, 20px);} |
|||
100% {transform: translate(0px, 0px);} |
|||
|
|||
} |
|||
|
|||
/*Safari 和 Chrome:*/ |
|||
@-webkit-keyframes mymove |
|||
{ |
|||
0% {transform: translate(0px, 0px);} |
|||
50% {transform: translate(0px, -10px);} |
|||
100% {transform: translate(0px, 0px);} |
|||
} |
|||
|
|||
|
|||
</style> |
|||
|
|||
Loading…
Reference in new issue