2 changed files with 520 additions and 376 deletions
@ -0,0 +1,388 @@ |
|||||
|
<template> |
||||
|
<div class="solar"> |
||||
|
<div class="top"> |
||||
|
<div v-for="(item,index) of titles" class="titles"> |
||||
|
<img :src="require('@screen/images/solar/'+item.icon)" /> |
||||
|
<div class="cont"> |
||||
|
<div style="text-align: right;">{{ item.label }}</div> |
||||
|
<div class="label"><span>{{ item.value }}</span><div class="unit">{{ item.unit }}</div></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="solarCont"> |
||||
|
<div class="left"> |
||||
|
<div class="chartPanel"> |
||||
|
<div class="clabel"> |
||||
|
<div>今日发电统计</div> |
||||
|
<div>今日发电总计:{{chart1Total1}}度</div> |
||||
|
</div> |
||||
|
<div id="charts1" class="chart"></div> |
||||
|
</div> |
||||
|
<div class="chartPanel"> |
||||
|
<div class="clabel"> |
||||
|
<div>今日用电统计</div> |
||||
|
<div>今日用电总计:{{chart1Total2}}度</div> |
||||
|
</div> |
||||
|
<div id="charts2" class="chart"></div> |
||||
|
</div> |
||||
|
<div class="chartPanel"> |
||||
|
|
||||
|
<div class="clabel"> |
||||
|
<div>今日功率统计</div> |
||||
|
<div>今日容量总计:{{chart1Total3}}千瓦</div> |
||||
|
</div> |
||||
|
<div id="charts3" class="chart"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<Table style="width:65vw" :data="tableData" v-loading="loading" height="calc(100vh - 300px)" > |
||||
|
<el-table-column label="序号" type="index" :index="indexMethod" width="100" align="center" |
||||
|
header-align="center" /> |
||||
|
<ElTableColumn prop="stakeNumber" width="120" label="设备桩号"></ElTableColumn> |
||||
|
<ElTableColumn prop="state" width="140" label="充电设备运行状态"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{ scope.row.state==='1'?'正常':'异常' }}</span> |
||||
|
</template> |
||||
|
</ElTableColumn> |
||||
|
<ElTableColumn prop="s1" width="160" label="放电设备运行状态"></ElTableColumn> |
||||
|
<ElTableColumn prop="s2" width="120" label="充电状态"></ElTableColumn> |
||||
|
<ElTableColumn prop="s3" width="120" label="蓄电池状态"></ElTableColumn> |
||||
|
<ElTableColumn prop="s4" width="120" label="输入过流"></ElTableColumn> |
||||
|
<ElTableColumn prop="s5" width="120" label="输入电压状态"></ElTableColumn> |
||||
|
<ElTableColumn prop="s6" width="120" label="当日累计用电量"></ElTableColumn> |
||||
|
<ElTableColumn prop="s7" width="120" label="当日累计充电量"></ElTableColumn> |
||||
|
<ElTableColumn prop="s8" width="150" label="当日最低蓄电池电压"></ElTableColumn> |
||||
|
</Table> |
||||
|
<div class="footer" style="display: flex;justify-content: center;margin-top: 20px;"> |
||||
|
<Pagination @current-change="initQueryTable" @size-change="onSizeChange" width="'100%'" |
||||
|
:page-sizes="[10, 20, 30, 40, 50]" :page-size="searchData.pageSize" :current-page.sync="searchData.pageNum" |
||||
|
layout="total, sizes, prev, pager, next" :total="total"> |
||||
|
</Pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
import request from "@/utils/request"; |
||||
|
import * as echarts from "echarts"; |
||||
|
import Table from '@screen/components/Table.vue'; |
||||
|
import Pagination from "@screen/components/Pagination.vue"; |
||||
|
export default { |
||||
|
components: { |
||||
|
Table, |
||||
|
Pagination, |
||||
|
}, |
||||
|
name: "Soler", |
||||
|
data() { |
||||
|
return { |
||||
|
titles:[ |
||||
|
{icon:'total.png',label:'当年累计发电量',unit:'度',value:'-'}, |
||||
|
{icon:'used.png',label:'当年累计用电量',unit:'度',value:'-'}, |
||||
|
{icon:'CO2.png',label:'CO₂减排',unit:'kg',value:'-'}, |
||||
|
{icon:'tree.png',label:'等效植树',unit:'棵',value:'-'}, |
||||
|
{icon:'coal.png',label:'节约标准煤',unit:'kg',value:'-'}, |
||||
|
{icon:'error.png',label:'放电异常设备',unit:'个',value:'-'}, |
||||
|
], |
||||
|
chart1:null, |
||||
|
chart2:null, |
||||
|
chart3:null, |
||||
|
chart1Total1:'-', |
||||
|
chart1Total2:'-', |
||||
|
chart1Total3:'-', |
||||
|
tableData:[], |
||||
|
loading:false, |
||||
|
|
||||
|
total:0, |
||||
|
searchData: { |
||||
|
pageSize: 10, |
||||
|
pageNum: 1 |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initTotal(); |
||||
|
this.initChart(); |
||||
|
this.initQueryTable(); |
||||
|
}, |
||||
|
methods: { |
||||
|
//翻页时不刷新序号 |
||||
|
indexMethod(index) { |
||||
|
return ( |
||||
|
index + (this.searchData.pageNum - 1) * this.searchData.pageSize + 1 |
||||
|
); |
||||
|
}, |
||||
|
onSizeChange(pageSize) { |
||||
|
this.tableData = []; |
||||
|
this.searchData.pageSize = pageSize; |
||||
|
this.searchData.pageNum = 1; |
||||
|
this.initQueryTable(); |
||||
|
}, |
||||
|
initQueryTable() { |
||||
|
this.loading = true; |
||||
|
this.loading = false; |
||||
|
this.total = 0; |
||||
|
this.tableData = [ |
||||
|
] |
||||
|
//{stakeNumber:'1',state:1,s1:1,s2:1,s3:1,s4:1,s5:1,s6:1,s7:1,s8:1}, |
||||
|
// request({ |
||||
|
// url: "/system/status/tablist", |
||||
|
// method: "get", |
||||
|
// params:{} |
||||
|
// }).then((res) => { |
||||
|
// if (res.code == 200) { |
||||
|
// this.loading = false; |
||||
|
// this.total = res.total; |
||||
|
// this.tableData = res.rows |
||||
|
|
||||
|
// } |
||||
|
// }) |
||||
|
}, |
||||
|
initTotal(){ |
||||
|
request({ |
||||
|
url: 'business/device/properties/latestOne', |
||||
|
method: 'get' |
||||
|
}).then(result => { |
||||
|
if (result.code != 200) return; |
||||
|
this.titles[0].value= result.data.theAccumulatedChargeOfTheYear; |
||||
|
this.titles[1].value= result.data.cumulativeElectricityConsumptionInTheYear; |
||||
|
this.titles[2].value= result.data.carbonEmissionReduction; |
||||
|
this.titles[3].value= result.data.equivalentTree; |
||||
|
this.titles[4].value= result.data.standardCoal; |
||||
|
}) |
||||
|
request({ |
||||
|
url: 'business/device/properties/solarDeviceStatistics', |
||||
|
method: 'get' |
||||
|
}).then(result => { |
||||
|
if (result.code != 200) return; |
||||
|
this.titles[5].value= result.data.count; |
||||
|
}) |
||||
|
}, |
||||
|
initChart(){ |
||||
|
const _chartsOptions = { |
||||
|
color:['#00bead'], |
||||
|
title: { |
||||
|
text: '度', |
||||
|
textStyle:{ |
||||
|
color:'#E5E7E8', |
||||
|
fontSize: 15, |
||||
|
fontStyle:'normal' |
||||
|
}, |
||||
|
top:'10px', |
||||
|
left: '10px' |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis' |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: ['0点', '1点', '2点','3点', '4点','5点','6点','7点','8点', '9点','10点','11点', |
||||
|
'12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点'], |
||||
|
axisLine:{ |
||||
|
show:true, |
||||
|
lineStyle:{ |
||||
|
color:'#fff' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
align: "center", |
||||
|
rotate: "1", |
||||
|
margin: 20, |
||||
|
textStyle: { |
||||
|
fontSize: 10, |
||||
|
color: "#E5E7E8", |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
axisLabel: { |
||||
|
show: false, |
||||
|
color: "#E5E7E8", |
||||
|
textStyle: { |
||||
|
fontSize: 10, |
||||
|
}, |
||||
|
}, |
||||
|
axisLine:{ |
||||
|
show:true, |
||||
|
lineStyle:{ |
||||
|
color:'#fff' |
||||
|
} |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
left: "40px", |
||||
|
right: "20px", |
||||
|
top: "0px", |
||||
|
bottom: "10px", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
data: [], |
||||
|
type: 'line', |
||||
|
smooth: true |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
if(!this.chart1){ |
||||
|
this.chart1 = echarts.init(document.getElementById("charts1")); |
||||
|
let option1 = JSON.parse(JSON.stringify(_chartsOptions)); |
||||
|
request({ |
||||
|
url: 'business/device/properties/history/oneDay/dailyAccumulatedCharge', |
||||
|
method: 'get' |
||||
|
}).then(result => { |
||||
|
if (result.code != 200) return; |
||||
|
const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] |
||||
|
let total = 0; |
||||
|
for(let i in result.data){ |
||||
|
total += result.data[i] |
||||
|
const idx = parseInt(i.substr(11,2)); |
||||
|
data[idx] = result.data[i]; |
||||
|
} |
||||
|
this.chart1Total1 = total; |
||||
|
option1.series[0].data = data; |
||||
|
this.chart1.setOption(option1); |
||||
|
this.chart1.resize(); |
||||
|
}) |
||||
|
|
||||
|
this.chart2 = echarts.init(document.getElementById("charts2")); |
||||
|
let option2 = JSON.parse(JSON.stringify(_chartsOptions)); |
||||
|
request({ |
||||
|
url: 'business/device/properties/history/oneDay/cumulativeElectricityConsumptionOnTheDay', |
||||
|
method: 'get' |
||||
|
}).then(result => { |
||||
|
if (result.code != 200) return; |
||||
|
const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] |
||||
|
let total = 0; |
||||
|
for(let i in result.data){ |
||||
|
total += result.data[i] |
||||
|
const idx = parseInt(i.substr(11,2)); |
||||
|
data[idx] = result.data[i]; |
||||
|
} |
||||
|
this.chart1Total2 = total; |
||||
|
option2.series[0].data = data; |
||||
|
this.chart2.setOption(option2); |
||||
|
this.chart2.resize(); |
||||
|
}) |
||||
|
// 发电功率 |
||||
|
this.chart3 = echarts.init(document.getElementById("charts3")); |
||||
|
let option3 = JSON.parse(JSON.stringify(_chartsOptions)); |
||||
|
request({ |
||||
|
url: 'business/device/properties/history/oneDay/generatingPower', |
||||
|
method: 'get' |
||||
|
}).then(result => { |
||||
|
if (result.code != 200) return; |
||||
|
const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] |
||||
|
let total = 0; |
||||
|
for(let i in result.data){ |
||||
|
total += result.data[i] |
||||
|
const idx = parseInt(i.substr(11,2)); |
||||
|
data[idx] = result.data[i]; |
||||
|
} |
||||
|
this.chart1Total3 = total; |
||||
|
option3.series[0].data = data; |
||||
|
this.chart3.setOption(option3); |
||||
|
this.chart3.resize() |
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
window.addEventListener("resize", () => { |
||||
|
if(this.chart1){ |
||||
|
this.chart1.resize(); |
||||
|
this.chart2.resize(); |
||||
|
this.chart3.resize(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
.solar{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
.solarCont{ |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
gap:10px; |
||||
|
width:98%; |
||||
|
.left{ |
||||
|
width:calc(33% + 10px); |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap:10px; |
||||
|
height: calc(100vh - 300px); |
||||
|
.chartPanel{ |
||||
|
flex:1; |
||||
|
background: linear-gradient(to top, #064151, #042b34); |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
.clabel{ |
||||
|
display: flex; |
||||
|
padding:10px; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.chart{ |
||||
|
flex:1; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.right{ |
||||
|
width: 68%; |
||||
|
// background: #064151; |
||||
|
} |
||||
|
} |
||||
|
.top{ |
||||
|
display: flex; |
||||
|
width:98%; |
||||
|
gap:10px; |
||||
|
margin:10px 0px; |
||||
|
.titles{ |
||||
|
padding:30px 15px; |
||||
|
width:17%; |
||||
|
background: linear-gradient(to top, #064151, #042b34); |
||||
|
display:flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
img{ |
||||
|
width:50px; |
||||
|
height:50px; |
||||
|
margin-right:40px; |
||||
|
} |
||||
|
.cont{ |
||||
|
width:50%; |
||||
|
display: flex; |
||||
|
align-content: center; |
||||
|
justify-content: flex-end; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.label{ |
||||
|
margin-top:16px; |
||||
|
display: flex; |
||||
|
align-content: center; |
||||
|
justify-content: flex-end; |
||||
|
span{ |
||||
|
color:#c0d918; |
||||
|
font-size:26px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.unit{ |
||||
|
margin-left:5px; |
||||
|
opacity: .7; |
||||
|
margin-top:4px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Loading…
Reference in new issue