<template>
|
<div>
|
<div class="single-data-title">
|
<div style="margin-left:30px;padding-top:8px">
|
<img src="http://47.106.172.9:443/download/icon/single_data_icon.png" style="margin-top:0px" height="13px" width="15px">
|
<span style="color:white">单灯数据</span>
|
</div>
|
</div>
|
<div class="single-data-body">
|
<el-row style="padding-top:15px;" :gutter="15">
|
<el-col style="text-align:right" :span="6">
|
<span style="color:white">平均输入电压</span>
|
</el-col>
|
<el-col :span="10">
|
<div style="height:15px;background-color:#08BBFD"></div>
|
</el-col>
|
<el-col :span="8">
|
<span style="color:white">220V</span>
|
</el-col>
|
</el-row>
|
<el-row style="padding-top:10px;" :gutter="15">
|
<el-col style="text-align:right" :span="6">
|
<span style="color:white">平均输入电流</span>
|
</el-col>
|
<el-col :span="6">
|
<div style="height:15px;background-color:#08BBFD"></div>
|
</el-col>
|
<el-col :span="12">
|
<span style="color:white">30A</span>
|
</el-col>
|
</el-row>
|
<el-row style="padding-top:10px;" :gutter="15">
|
<el-col style="text-align:right" :span="6">
|
<span style="color:white">平均输出电压</span>
|
</el-col>
|
<el-col :span="10">
|
<div style="height:15px;background-color:#08BBFD"></div>
|
</el-col>
|
<el-col :span="8">
|
<span style="color:white">220V</span>
|
</el-col>
|
</el-row>
|
<el-row style="padding-top:10px;" :gutter="15">
|
<el-col style="text-align:right" :span="6">
|
<span style="color:white">平均输出电流</span>
|
</el-col>
|
<el-col :span="4">
|
<div style="height:15px;background-color:#08BBFD"></div>
|
</el-col>
|
<el-col :span="14">
|
<span style="color:white">5A</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<single-data-chart></single-data-chart>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="single-data-bottom"></div>
|
</div>
|
</template>
|
|
<script>
|
import SingleDataChart from './single-data/single-data-chart'
|
export default {
|
data () {
|
return {
|
|
}
|
},
|
components: {
|
SingleDataChart
|
},
|
activated () {
|
this.init()
|
},
|
methods: {
|
init () {
|
var h = window.innerHeight || document.body.clientHeight
|
var body = document.getElementById('single-data-body')
|
var num = h / 3
|
body.style.height = num + 'px'
|
}
|
}
|
}
|
</script>
|
<style>
|
.single-data-title {
|
height: 30px;
|
width: 100%;
|
background-image: url(~@/assets/img/content_charts_title.png);
|
background-size: 100% 30px;
|
}
|
.single-data-body {
|
width: 100%;
|
background-image: url(~@/assets/img/content_charts_body.png);
|
background-size: 100% 450px;
|
}
|
.single-data-bottom {
|
height: 30px;
|
width: 100%;
|
background-image: url(~@/assets/img/content_charts_bottom.png);
|
background-size: 100% 30px;
|
}
|
</style>
|
