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