|
|
|
|
@ -21,6 +21,7 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="totalInfo"> |
|
|
|
|
<img src="../assets/leftborder.png" class="border" alt=""> |
|
|
|
|
<div class="leftContainer"> |
|
|
|
|
<div class="section"> |
|
|
|
|
<div class="sec1"> |
|
|
|
|
<img src="../assets/btn.png" alt=""> |
|
|
|
|
@ -31,6 +32,20 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="section1"> |
|
|
|
|
<div class="numContent" v-for="(item,index) in nList" :key="index"> |
|
|
|
|
<img src="../assets/bbg.png" class="borderNum" alt=""> |
|
|
|
|
<div class="numItem"> |
|
|
|
|
<img :src="item.pic" alt=""> |
|
|
|
|
<div class="numText">{{item.text}}</div> |
|
|
|
|
<div class="num">{{item.num}}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="section2"> |
|
|
|
|
<div style="width: 100%;height: 100%;" id="main"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="center"></div> |
|
|
|
|
@ -41,11 +56,18 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import * as echarts from 'echarts'; |
|
|
|
|
export default { |
|
|
|
|
data(){ |
|
|
|
|
return{ |
|
|
|
|
timeText:'', |
|
|
|
|
timer:null, |
|
|
|
|
nList:[ |
|
|
|
|
{pic:require('../assets/n1.png'),text:'压缩机',num:888}, |
|
|
|
|
{pic:require('../assets/n2.png'),text:'温度',num:888}, |
|
|
|
|
{pic:require('../assets/n3.png'),text:'运行时长',num:888}, |
|
|
|
|
{pic:require('../assets/n4.png'),text:'累计垃圾量',num:888}, |
|
|
|
|
], |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
methods:{ |
|
|
|
|
@ -64,9 +86,41 @@ export default { |
|
|
|
|
seconds = seconds < 10 ? '0' + seconds : seconds; |
|
|
|
|
let timeString = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds; |
|
|
|
|
this.timeText = timeString |
|
|
|
|
}, |
|
|
|
|
setNum(){ |
|
|
|
|
// 基于准备好的dom，初始化echarts实例 |
|
|
|
|
var myChart = echarts.init(document.getElementById('main')); |
|
|
|
|
// 绘制图表 |
|
|
|
|
myChart.setOption({ |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value' |
|
|
|
|
}, |
|
|
|
|
series: [{ |
|
|
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320], |
|
|
|
|
type: 'line', |
|
|
|
|
// 添加区域渐变效果 |
|
|
|
|
areaStyle: { |
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
|
|
|
offset: 0, |
|
|
|
|
color: 'rgba(0, 216, 135, 0.4)' // 渐变颜色 |
|
|
|
|
}, { |
|
|
|
|
offset: 1, |
|
|
|
|
color: 'rgba(0, 216, 135, 0)' // 渐变颜色 |
|
|
|
|
}]) |
|
|
|
|
} |
|
|
|
|
}] |
|
|
|
|
}); |
|
|
|
|
window.onresize = function() { |
|
|
|
|
myChart.resize(); |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted(){ |
|
|
|
|
this.setNum() |
|
|
|
|
// this.timer = setInterval(this.updateClock, 1000); |
|
|
|
|
}, |
|
|
|
|
destroyed(){ |
|
|
|
|
@ -83,8 +137,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
.index{ |
|
|
|
|
background: #010E25; |
|
|
|
|
border:1px solid blue; |
|
|
|
|
height:calc(100% - 2px); |
|
|
|
|
height:calc(100%); |
|
|
|
|
overflow: hidden; |
|
|
|
|
position: relative; |
|
|
|
|
.bgPic{ |
|
|
|
|
@ -102,7 +155,6 @@ export default { |
|
|
|
|
flex-direction: column; |
|
|
|
|
height:100%; |
|
|
|
|
.header{ |
|
|
|
|
border:1px solid red; |
|
|
|
|
position: relative; |
|
|
|
|
&>img{ |
|
|
|
|
width:100%; |
|
|
|
|
@ -134,33 +186,36 @@ export default { |
|
|
|
|
top: 2.7rem; |
|
|
|
|
right:2rem; |
|
|
|
|
&>img{ |
|
|
|
|
width: 20px; |
|
|
|
|
height: 20px; |
|
|
|
|
width: 2rem; |
|
|
|
|
height: 2rem; |
|
|
|
|
} |
|
|
|
|
&>span{ |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-size: 20px; |
|
|
|
|
font-size: 2rem; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
margin-left:16px; |
|
|
|
|
margin-left:1.6rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.infoContent{ |
|
|
|
|
flex:1; |
|
|
|
|
border:2px solid #fff; |
|
|
|
|
padding:2rem 0; |
|
|
|
|
display: flex; |
|
|
|
|
.left{ |
|
|
|
|
width:28%; |
|
|
|
|
flex-shrink: 0; |
|
|
|
|
border:1px solid red; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
position: relative; |
|
|
|
|
.title{ |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
margin-left:5.3rem; |
|
|
|
|
position: absolute; |
|
|
|
|
top:0; |
|
|
|
|
z-index:9; |
|
|
|
|
width: calc(100% - 5.3rem); |
|
|
|
|
span{ |
|
|
|
|
font-family: "myfont", sans-serif; |
|
|
|
|
font-weight: bold; |
|
|
|
|
@ -187,7 +242,6 @@ export default { |
|
|
|
|
} |
|
|
|
|
.totalInfo{ |
|
|
|
|
flex:1; |
|
|
|
|
border:1px solid red; |
|
|
|
|
position: relative; |
|
|
|
|
// border: 1px solid #fff; |
|
|
|
|
// border-image-source: url("../assets/leftborder.png"); |
|
|
|
|
@ -195,22 +249,117 @@ export default { |
|
|
|
|
// border-image-width: 100px 220px 100px 220px; |
|
|
|
|
// border-image-repeat: round; |
|
|
|
|
.border{ |
|
|
|
|
position: absolute; |
|
|
|
|
width:100%; |
|
|
|
|
height: 100%; |
|
|
|
|
height:100%; |
|
|
|
|
} |
|
|
|
|
.leftContainer{ |
|
|
|
|
position: absolute; |
|
|
|
|
z-index:2; |
|
|
|
|
left:0; |
|
|
|
|
top:0; |
|
|
|
|
z-index:0; |
|
|
|
|
height:100%; |
|
|
|
|
margin-left:3.6rem; |
|
|
|
|
margin-right:1.6rem; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
} |
|
|
|
|
.section{ |
|
|
|
|
position: relative; |
|
|
|
|
z-index:2; |
|
|
|
|
.sec1{ |
|
|
|
|
padding:0 1rem; |
|
|
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
// margin: 7.3rem auto 5rem auto; |
|
|
|
|
// padding-left: 2.4rem; |
|
|
|
|
margin-top:7.3rem; |
|
|
|
|
position: relative; |
|
|
|
|
&>img{ |
|
|
|
|
width:100%; |
|
|
|
|
} |
|
|
|
|
.peopleNum{ |
|
|
|
|
position: absolute; |
|
|
|
|
top: 40%; |
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
left: 50%; |
|
|
|
|
&>:first-child{ |
|
|
|
|
font-family: Microsoft YaHei; |
|
|
|
|
font-weight: 400; |
|
|
|
|
font-size: 1.6rem; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
background: linear-gradient(0deg, #0C8DF8 0%, #AFD1FF 100%); |
|
|
|
|
-webkit-background-clip: text; |
|
|
|
|
-webkit-text-fill-color: transparent; |
|
|
|
|
} |
|
|
|
|
&>:nth-child(2){ |
|
|
|
|
margin-left:2rem; |
|
|
|
|
font-family: Microsoft YaHei; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-size: 3rem; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
} |
|
|
|
|
&>:nth-child(3){ |
|
|
|
|
font-family: Microsoft YaHei; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-size: 1.6rem; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.section1{ |
|
|
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
// width: 90%; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
margin-top:5rem; |
|
|
|
|
.numContent{ |
|
|
|
|
width:calc(50% - 1rem); |
|
|
|
|
margin-bottom: 2rem; |
|
|
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
.borderNum{ |
|
|
|
|
width:100%; |
|
|
|
|
} |
|
|
|
|
.numItem{ |
|
|
|
|
position: absolute; |
|
|
|
|
z-index: 3; |
|
|
|
|
width: 100%; |
|
|
|
|
height: calc(100% - 0.6rem); |
|
|
|
|
|
|
|
|
|
top: 0; |
|
|
|
|
left: 0; |
|
|
|
|
align-items: center; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: space-around; |
|
|
|
|
img{ |
|
|
|
|
max-height:25%; |
|
|
|
|
height:auto; |
|
|
|
|
width: fit-content; |
|
|
|
|
} |
|
|
|
|
.numText{ |
|
|
|
|
font-family: Microsoft YaHei; |
|
|
|
|
font-weight: 400; |
|
|
|
|
font-size: 1.6rem; |
|
|
|
|
color: #3F87F6; |
|
|
|
|
margin:1.5rem 0; |
|
|
|
|
margin: 1% 0; |
|
|
|
|
} |
|
|
|
|
.num{ |
|
|
|
|
font-family: Microsoft YaHei; |
|
|
|
|
font-weight: 400; |
|
|
|
|
font-size: 2rem; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
.section2{ |
|
|
|
|
flex:1; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -225,12 +374,12 @@ export default { |
|
|
|
|
|
|
|
|
|
.center{ |
|
|
|
|
flex:1; |
|
|
|
|
border:1px solid blue; |
|
|
|
|
// border:1px solid blue; |
|
|
|
|
} |
|
|
|
|
.right{ |
|
|
|
|
width: 28%; |
|
|
|
|
flex-shrink: 0; |
|
|
|
|
border:1px solid red |
|
|
|
|
// border:1px solid red |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
liudan
3 days ago
