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