|
@ -1,5 +1,5 @@
|
1
|
1
|
<template>
|
2
|
|
<div class="container">
|
|
2
|
<div class="large-container">
|
3
|
3
|
<div class="header">
|
4
|
4
|
<div class="left">
|
5
|
5
|
<div class="time">
|
|
@ -459,7 +459,7 @@ export default {
|
459
|
459
|
formatter: (v) => {
|
460
|
460
|
var total = 0
|
461
|
461
|
option.series[1].data.forEach(element => {
|
462
|
|
total += element.value
|
|
462
|
total += element.value
|
463
|
463
|
})
|
464
|
464
|
return '{a|' + v.name + (v.value * 100 / total).toFixed(2) + '%}'
|
465
|
465
|
},
|
|
@ -585,6 +585,7 @@ export default {
|
585
|
585
|
},
|
586
|
586
|
legend: {
|
587
|
587
|
right: 10,
|
|
588
|
top: 15,
|
588
|
589
|
data: ['空调', '智能表记', '工程装备', '工生产加工机械', '其它'],
|
589
|
590
|
icon: 'circle',
|
590
|
591
|
itemWidth: 6,
|
|
@ -978,7 +979,7 @@ export default {
|
978
|
979
|
}
|
979
|
980
|
</script>
|
980
|
981
|
<style scoped>
|
981
|
|
.container{
|
|
982
|
.large-container{
|
982
|
983
|
background-color: #080815;
|
983
|
984
|
width: 1920px;
|
984
|
985
|
height: 1080px;
|
|
@ -1018,6 +1019,18 @@ export default {
|
1018
|
1019
|
transform-origin:bottom center;
|
1019
|
1020
|
transform:rotateZ(-45deg) scale(1.414);
|
1020
|
1021
|
}
|
|
1022
|
.header .left .diagonal::after{
|
|
1023
|
content:"";
|
|
1024
|
position:absolute;
|
|
1025
|
left: -10px;
|
|
1026
|
top: -5px;
|
|
1027
|
width:100%;
|
|
1028
|
height:26px;
|
|
1029
|
box-sizing:border-box;
|
|
1030
|
border-bottom:2px solid #3247E5;
|
|
1031
|
transform-origin:bottom center;
|
|
1032
|
transform:rotateZ(-45deg) scale(1.414);
|
|
1033
|
}
|
1021
|
1034
|
.header .left .time{
|
1022
|
1035
|
display: flex;
|
1023
|
1036
|
width: 623px;
|
|
@ -1027,18 +1040,6 @@ export default {
|
1027
|
1040
|
.header .left .time>div{
|
1028
|
1041
|
margin-right: 10px;
|
1029
|
1042
|
}
|
1030
|
|
.header .left .time::before{
|
1031
|
|
content:"";
|
1032
|
|
position:absolute;
|
1033
|
|
left: 615px;
|
1034
|
|
top: -6px;
|
1035
|
|
width: 53px;
|
1036
|
|
height: 26px;
|
1037
|
|
box-sizing:border-box;
|
1038
|
|
border-bottom:2px solid #3247E5;
|
1039
|
|
transform-origin:bottom center;
|
1040
|
|
transform:rotateZ(-45deg) scale(1.414);
|
1041
|
|
}
|
1042
|
1043
|
.header .center{
|
1043
|
1044
|
font-size: 38px;
|
1044
|
1045
|
line-height: 53px;
|
|
@ -1072,23 +1073,23 @@ export default {
|
1072
|
1073
|
width: 19px;
|
1073
|
1074
|
margin: auto 49px auto auto;
|
1074
|
1075
|
}
|
1075
|
|
.header .right .icon::before{
|
|
1076
|
.header .right .diagonal::before{
|
1076
|
1077
|
content:"";
|
1077
|
1078
|
position:absolute;
|
1078
|
|
left: 1255px;
|
1079
|
|
top: -6px;
|
1080
|
|
width: 53px;
|
1081
|
|
height: 26px;
|
|
1079
|
left:0;
|
|
1080
|
top:0;
|
|
1081
|
width:100%;
|
|
1082
|
height:26px;
|
1082
|
1083
|
box-sizing:border-box;
|
1083
|
1084
|
border-bottom:2px solid #3247E5;
|
1084
|
1085
|
transform-origin:bottom center;
|
1085
|
1086
|
transform:rotateZ(45deg) scale(1.414);
|
1086
|
1087
|
}
|
1087
|
|
.header .right .diagonal::before{
|
|
1088
|
.header .right .diagonal::after{
|
1088
|
1089
|
content:"";
|
1089
|
1090
|
position:absolute;
|
1090
|
|
left:0;
|
1091
|
|
top:0;
|
|
1091
|
left: 10px;
|
|
1092
|
top: -5px;
|
1092
|
1093
|
width:100%;
|
1093
|
1094
|
height:26px;
|
1094
|
1095
|
box-sizing:border-box;
|
|
@ -1293,6 +1294,10 @@ export default {
|
1293
|
1294
|
text-align: center;
|
1294
|
1295
|
line-height: 25px;
|
1295
|
1296
|
}
|
|
1297
|
.content .right .up .content-container .device-table-container tbody .icon img{
|
|
1298
|
height: unset;
|
|
1299
|
width: unset;
|
|
1300
|
}
|
1296
|
1301
|
.content .right .down{
|
1297
|
1302
|
width: 430px;
|
1298
|
1303
|
height: 328px;
|