147 lines
3.8 KiB
Vue
147 lines
3.8 KiB
Vue
|
||
<template>
|
||
<div>
|
||
<el-card shadow="always" class="common-card-container zb-common-card-container">
|
||
<div slot="header">
|
||
<span class="large-title">1#总表</span>
|
||
<div class="status">
|
||
<div>通信中断</div>
|
||
<div>数据更新时间：2024-10-11 12:00:00</div>
|
||
</div>
|
||
</div>
|
||
<el-table
|
||
class="common-table"
|
||
:data="zbTableData"
|
||
stripe
|
||
style="width: 100%;">
|
||
<el-table-column
|
||
prop="name"
|
||
label="类别">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="zong"
|
||
label="总/kWh"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="jian"
|
||
label="尖/kWh">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="feng"
|
||
label="峰/kWh">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="ping"
|
||
label="平/kWh">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="gu"
|
||
label="谷/kWh">
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
<el-card shadow="always" class="common-card-container cnb-common-card-container">
|
||
<div slot="header">
|
||
<span class="large-title">2#储能表</span>
|
||
<div class="status">
|
||
<div>通信正常</div>
|
||
<div>数据更新时间：2024-10-11 12:00:00</div>
|
||
</div>
|
||
</div>
|
||
<el-table
|
||
class="common-table"
|
||
:data="cnbTableData"
|
||
stripe
|
||
style="width: 100%;">
|
||
<el-table-column
|
||
prop="name"
|
||
label="类别">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="zong"
|
||
label="总/kWh"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="jian"
|
||
label="尖/kWh">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="feng"
|
||
label="峰/kWh">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="ping"
|
||
label="平/kWh">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="gu"
|
||
label="谷/kWh">
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
export default {
|
||
name:'DzjkSbjkDb',
|
||
data() {
|
||
return {
|
||
zbTableData:[
|
||
{name:'累计充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
|
||
{name:'累计放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
|
||
{name:'日充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
|
||
{name:'日放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
|
||
],
|
||
cnbTableData:[
|
||
{name:'累计充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
|
||
{name:'累计放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
|
||
{name:'日充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
|
||
{name:'日放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
|
||
]
|
||
}
|
||
},
|
||
methods:{
|
||
|
||
},
|
||
mounted(){
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.zb-common-card-container,.cnb-common-card-container{
|
||
::v-deep{
|
||
.el-card__header{
|
||
padding:10px 14px;
|
||
background-color: #FC6B69;
|
||
color:#ffffff;
|
||
position: relative;
|
||
}
|
||
}
|
||
}
|
||
.cnb-common-card-container{
|
||
margin-top:25px;
|
||
::v-deep{
|
||
.el-card__header{
|
||
background-color: #05AEA3;
|
||
}
|
||
}
|
||
}
|
||
.status{
|
||
position: absolute;
|
||
right:14px;
|
||
top:50%;
|
||
transform: translateY(-50%);
|
||
color: #ffffff;
|
||
font-size: 12px;
|
||
line-height: 20px;
|
||
}
|
||
|
||
|
||
</style>
|