2 changed files with 520 additions and 376 deletions
@ -1,388 +1,144 @@ |
|||||
<template> |
<template> |
||||
<div class="solar"> |
<div class="solar"> |
||||
<div class="top"> |
<div class="solar_left"> |
||||
<div v-for="(item,index) of titles" class="titles"> |
<div> |
||||
<img :src="require('@screen/images/solar/'+item.icon)" /> |
<Bg2 class="content-l-t"> |
||||
<div class="cont"> |
<div class="focuse-header"> |
||||
<div style="text-align: right;">{{ item.label }}</div> |
<div class="title">重点数据</div> |
||||
<div class="label"><span>{{ item.value }}</span><div class="unit">{{ item.unit }}</div></div> |
|
||||
</div> |
</div> |
||||
</div> |
<div class="content-l-t-content"> |
||||
</div> |
<div class="content-k1"> |
||||
<div class="solarCont"> |
<div>当前累计发电量</div> |
||||
<div class="left"> |
<div class="content-kk"><div v-for="(item,index) in titles[0].value">{{item}}</div></div> |
||||
<div class="chartPanel"> |
<div>万度</div> |
||||
<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> |
||||
<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> |
</Bg2> |
||||
</div> |
</div> |
||||
|
<div>2</div> |
||||
|
<div>3</div> |
||||
</div> |
</div> |
||||
</template> |
<div class="solar_right"> |
||||
|
223 |
||||
<script> |
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
import request from "@/utils/request"; |
<script> |
||||
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, |
import Bg2 from "@screen/components/Decorations/bg-2.vue" |
||||
searchData: { |
import request from "@/utils/request"; |
||||
pageSize: 10, |
import * as echarts from "echarts"; |
||||
pageNum: 1 |
export default { |
||||
}, |
components: { |
||||
}; |
Bg2 |
||||
}, |
}, |
||||
mounted() { |
name: "Soler", |
||||
this.initTotal(); |
data() { |
||||
this.initChart(); |
return { |
||||
this.initQueryTable(); |
titles:[ |
||||
}, |
{icon:'total.png',label:'当年累计发电量',unit:'度',value:'0022.4512'}, |
||||
methods: { |
{icon:'used.png',label:'当年累计用电量',unit:'度',value:'-'}, |
||||
//翻页时不刷新序号 |
{icon:'CO2.png',label:'CO₂减排',unit:'kg',value:'-'}, |
||||
indexMethod(index) { |
{icon:'tree.png',label:'等效植树',unit:'棵',value:'-'}, |
||||
return ( |
{icon:'coal.png',label:'节约标准煤',unit:'kg',value:'-'}, |
||||
index + (this.searchData.pageNum - 1) * this.searchData.pageSize + 1 |
{icon:'error.png',label:'放电异常设备',unit:'个',value:'-'}, |
||||
); |
], |
||||
}, |
chart1:null, |
||||
onSizeChange(pageSize) { |
chart2:null, |
||||
this.tableData = []; |
chart3:null, |
||||
this.searchData.pageSize = pageSize; |
chart1Total1:'-', |
||||
this.searchData.pageNum = 1; |
chart1Total2:'-', |
||||
this.initQueryTable(); |
chart1Total3:'-', |
||||
}, |
loading:false, |
||||
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 |
|
||||
|
|
||||
// } |
}; |
||||
// }) |
}, |
||||
}, |
mounted() { |
||||
initTotal(){ |
}, |
||||
request({ |
methods: { |
||||
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({ |
</script> |
||||
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() |
|
||||
}) |
|
||||
|
|
||||
} |
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
window.addEventListener("resize", () => { |
.solar{ |
||||
if(this.chart1){ |
width: 100%; |
||||
this.chart1.resize(); |
display: flex; |
||||
this.chart2.resize(); |
justify-content: space-between; |
||||
this.chart3.resize(); |
height: 100vh; |
||||
} |
.solar_left{ |
||||
}); |
width: 480px; |
||||
} |
margin-left:20px; |
||||
}, |
margin-top: 20px; |
||||
}; |
overflow: hidden; |
||||
</script> |
display: flex; |
||||
|
flex-direction: column; |
||||
|
overflow: hidden; |
||||
|
height: 100%; |
||||
|
gap: 10px; |
||||
|
} |
||||
|
.solar_right{ |
||||
|
width: 480px; |
||||
|
overflow: hidden; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: flex-end; |
||||
|
overflow: hidden; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
<style rel="stylesheet/scss" lang="scss" scoped> |
.content-l-t { |
||||
.solar{ |
::v-deep { |
||||
|
.BackgroundClip.bg { |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
flex-direction: column; |
||||
align-items: center; |
justify-content: space-around; |
||||
.solarCont{ |
} |
||||
display: flex; |
} |
||||
|
.focuse-header { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.title { |
||||
|
font-size: 24px; |
||||
|
font-family: YouSheBiaoTiHei; |
||||
|
font-weight: 400; |
||||
|
margin-left: 30px; |
||||
|
background-image: -webkit-linear-gradient(bottom,#217176,#34adb6, #3fd6e1); |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content-l-t-content { |
||||
|
margin-top: 10px; |
||||
|
padding: 20px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-start; |
||||
|
gap: 10px 15px; |
||||
|
// justify-content: center; |
||||
|
flex:1; |
||||
|
flex-wrap: wrap; |
||||
|
.content-k1{ |
||||
|
display:flex; |
||||
|
flex-direction: row; |
||||
|
.content-kk{ |
||||
|
display:flex; |
||||
flex-direction: row; |
flex-direction: row; |
||||
gap:10px; |
margin-left: 10px; |
||||
width:98%; |
margin-right: 3px; |
||||
.left{ |
gap: 3px; |
||||
width:calc(33% + 10px); |
> div{ |
||||
display: flex; |
border: 1px solid #0c7f8a; |
||||
flex-direction: column; |
padding: 2px 5px; |
||||
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> |
} |
||||
|
} |
||||
|
</style> |
||||
|
|||||
@ -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