|
|
|
@ -13,7 +13,7 @@ |
|
|
|
<div> |
|
|
|
<Bg2 class="content-l-t"> |
|
|
|
<div class="focuse-header"> |
|
|
|
<div class="title">重点数据</div> |
|
|
|
<div class="title1"></div> |
|
|
|
</div> |
|
|
|
<div class="content-l-t-content"> |
|
|
|
<div class="content-k1"> |
|
|
|
@ -34,19 +34,19 @@ |
|
|
|
<div>今日累计发电量</div> |
|
|
|
<div class="content-ll"> |
|
|
|
<div class="content-llc"> |
|
|
|
<div v-for="(item, index) in titles2p" :key="index"></div> |
|
|
|
<div style="background-color: #FFCD4D;" v-for="(item, index) in titles2p" :key="index"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content-unit" style="width:50px;text-align:right;">{{ titles2 }}度</div> |
|
|
|
<div class="content-unit" style="color: #FFCD4D;width:50px;text-align:right;">{{ titles2 }}度</div> |
|
|
|
</div> |
|
|
|
<div class="content-k1"> |
|
|
|
<div>今日累计用电量</div> |
|
|
|
<div class="content-ll"> |
|
|
|
<div class="content-llc"> |
|
|
|
<div v-for="(item, index) in titles3p" :key="index"></div> |
|
|
|
<div style="background-color: #3FD7FE;" v-for="(item, index) in titles3p" :key="index"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content-unit" style="width:50px;text-align:right;">{{ titles3 }}度</div> |
|
|
|
<div class="content-unit" style="color: #3FD7FE;width:50px;text-align:right;">{{ titles3 }}度</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Bg2> |
|
|
|
@ -54,15 +54,26 @@ |
|
|
|
<div> |
|
|
|
<Bg2 class="content-l-t"> |
|
|
|
<div class="focuse-header"> |
|
|
|
<div class="title">设备统计</div> |
|
|
|
<div class="title3"></div> |
|
|
|
</div> |
|
|
|
<div class="content-l-sec-content"> |
|
|
|
<div id="chartp1" class="secleft"></div> |
|
|
|
<!-- <div id="chartp1" class="secleft"></div> --> |
|
|
|
<div class="seclft"> |
|
|
|
<div class="seclft-s0" v-if="device0>0">{{parseInt(device1/device0 * 100)}}%</div> |
|
|
|
<div class="seclft-s1" v-if="device0>0">{{device1}} / {{device0}}</div> |
|
|
|
<div class="seclft-s2">设备故障率</div> |
|
|
|
</div> |
|
|
|
<div class="secright"> |
|
|
|
<div class="d1"><span>{{device0}}</span> 个</div> |
|
|
|
<div class="d2">设备总数</div> |
|
|
|
<div class="d1"><span>{{device1}}</span> 个</div> |
|
|
|
<div class="d2">放电异常设备</div> |
|
|
|
<div class="d1"> |
|
|
|
<img :src="require('@screen/images/solar/d0.png')" /> |
|
|
|
<div class="d1label">放电异常设备</div> |
|
|
|
<div class="d1Num" style="color:#FFCD4D">{{device1}}</div> |
|
|
|
</div> |
|
|
|
<div class="d1"> |
|
|
|
<img :src="require('@screen/images/solar/d1.png')" /> |
|
|
|
<div class="d1label">设备总数</div> |
|
|
|
<div class="d1Num" style="color:#1EDDF3">{{device0}}个</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Bg2> |
|
|
|
@ -71,22 +82,22 @@ |
|
|
|
<div> |
|
|
|
<Bg2 class="content-l-t"> |
|
|
|
<div class="focuse-header"> |
|
|
|
<div class="title">环境贡献</div> |
|
|
|
<div class="title4"></div> |
|
|
|
</div> |
|
|
|
<div class="content-l-third-content"> |
|
|
|
<div class="thirditem"> |
|
|
|
<img :src="require('@screen/images/solar/CO2.png')" /> |
|
|
|
<div class="thirdNum"><span>{{titles4}}</span> 吨</div> |
|
|
|
<img :src="require('@screen/images/solar/c0.png')" /> |
|
|
|
<div class="thirdNum" style="color:#FFCD4D">{{titles4}}吨</div> |
|
|
|
<div>CO₂减排</div> |
|
|
|
</div> |
|
|
|
<div class="thirditem"> |
|
|
|
<img :src="require('@screen/images/solar/tree.png')" /> |
|
|
|
<div class="thirdNum"><span>{{titles5}}</span> 棵</div> |
|
|
|
<img :src="require('@screen/images/solar/c1.png')" /> |
|
|
|
<div class="thirdNum" style="color:#14C47F">{{titles5}}棵</div> |
|
|
|
<div>等效植树</div> |
|
|
|
</div> |
|
|
|
<div class="thirditem"> |
|
|
|
<img :src="require('@screen/images/solar/coal.png')" /> |
|
|
|
<div class="thirdNum"><span>{{titles6}}</span> 吨</div> |
|
|
|
<img :src="require('@screen/images/solar/c2.png')" /> |
|
|
|
<div class="thirdNum" style="color:#25B5CA">{{titles6}} 吨</div> |
|
|
|
<div>节约标准煤</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -102,17 +113,17 @@ |
|
|
|
<div class="content-box"> |
|
|
|
<div class="box-title " style="margin-top: 15px;"> |
|
|
|
<span>今日发电统计</span> |
|
|
|
<span style="margin-left: 140px;">总计：{{ chart1Total1 }}度</span> |
|
|
|
<span style="color:#2AD9FD;margin-left: 140px;">总计：{{ chart1Total1 }}度</span> |
|
|
|
</div> |
|
|
|
<div id="charts1" class="chart"></div> |
|
|
|
<div class="box-title " style="margin-top: 15px;"> |
|
|
|
<span>今日用电统计</span> |
|
|
|
<span style="margin-left: 140px;">总计：{{ chart1Total1 }}度</span> |
|
|
|
<span style="color:#FFCD4D;margin-left: 140px;">总计：{{ chart1Total1 }}度</span> |
|
|
|
</div> |
|
|
|
<div id="charts2" class="chart"></div> |
|
|
|
<div class="box-title " style="margin-top: 15px;"> |
|
|
|
<span>今日功率统计</span> |
|
|
|
<span style="margin-left: 140px;">总计：{{ chart1Total3 }}千瓦</span> |
|
|
|
<span style="color:#04BFAE;margin-left: 140px;">总计：{{ chart1Total3 }}千瓦</span> |
|
|
|
</div> |
|
|
|
<div id="charts3" class="chart"></div> |
|
|
|
</div> |
|
|
|
@ -244,11 +255,11 @@ export default { |
|
|
|
}).then(result => { |
|
|
|
if (result.code != 200) return; |
|
|
|
console.log('initTotal',result) |
|
|
|
this.titles0 = result.data.theAccumulatedChargeOfTheYear.toString().padStart(9,'0'); // |
|
|
|
this.titles1 = result.data.cumulativeElectricityConsumptionInTheYear.toString().padStart(9,'0'); |
|
|
|
this.titles2 = result.data.dailyAccumulatedCharge; |
|
|
|
this.titles3 = result.data.cumulativeElectricityConsumptionOnTheDay; |
|
|
|
let _titles2p = (result.data.dailyAccumulatedCharge/10000) * 24 |
|
|
|
this.titles0 = parseInt(result.data.theAccumulatedChargeOfTheYear).toString().padStart(9,'0'); // |
|
|
|
this.titles1 = parseInt(result.data.cumulativeElectricityConsumptionInTheYear).toString().padStart(9,'0'); |
|
|
|
this.titles2 = parseFloat(result.data.dailyAccumulatedCharge); |
|
|
|
this.titles3 = parseFloat(result.data.cumulativeElectricityConsumptionOnTheDay); |
|
|
|
let _titles2p = (result.data.dailyAccumulatedCharge/100) * 24 |
|
|
|
if(_titles2p > 24){ |
|
|
|
_titles2p = 24; |
|
|
|
} else if(_titles2p===0){ |
|
|
|
@ -256,7 +267,7 @@ export default { |
|
|
|
} |
|
|
|
this.titles2p = parseInt(_titles2p); |
|
|
|
|
|
|
|
let _titles3p = (result.data.cumulativeElectricityConsumptionOnTheDay/10000) * 24 |
|
|
|
let _titles3p = (result.data.cumulativeElectricityConsumptionOnTheDay/100) * 24 |
|
|
|
if(_titles3p > 24){ |
|
|
|
_titles3p = 24; |
|
|
|
} else if(_titles3p===0){ |
|
|
|
@ -304,12 +315,12 @@ export default { |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
if (!this.chartp1) { |
|
|
|
this.chartp1 = echarts.init(document.getElementById("chartp1")); |
|
|
|
let option1 = JSON.parse(JSON.stringify(_chartsOptions)); |
|
|
|
this.chartp1.setOption(option1); |
|
|
|
this.chartp1.resize(); |
|
|
|
} |
|
|
|
// if (!this.chartp1) { |
|
|
|
// this.chartp1 = echarts.init(document.getElementById("chartp1")); |
|
|
|
// let option1 = JSON.parse(JSON.stringify(_chartsOptions)); |
|
|
|
// this.chartp1.setOption(option1); |
|
|
|
// this.chartp1.resize(); |
|
|
|
// } |
|
|
|
}) |
|
|
|
}, |
|
|
|
initChart(){ |
|
|
|
@ -378,7 +389,31 @@ export default { |
|
|
|
{ |
|
|
|
data: [], |
|
|
|
type: 'line', |
|
|
|
smooth: true |
|
|
|
showSymbol: false, |
|
|
|
smooth: true, // 是否曲线 |
|
|
|
lineStyle: { |
|
|
|
color: "#2AD9FD", |
|
|
|
}, |
|
|
|
areaStyle: { |
|
|
|
color: { |
|
|
|
type: "linear", |
|
|
|
x: 0, //右 |
|
|
|
y: 0, //下 |
|
|
|
x2: 0, //左 |
|
|
|
y2: 1, //上 |
|
|
|
colorStops: [ |
|
|
|
{ |
|
|
|
offset: 0.1, |
|
|
|
color: "#2AD9FD", // 0% 处的颜色 |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
opacity: 0.01, |
|
|
|
color: "#2AD9FD01", // 100% 处的颜色 |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
}, |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
@ -403,7 +438,29 @@ export default { |
|
|
|
this.chart1.setOption(option1); |
|
|
|
this.chart1.resize(); |
|
|
|
}) |
|
|
|
|
|
|
|
_chartsOptions.series[0].lineStyle = { |
|
|
|
color: "#FFD15C", |
|
|
|
} |
|
|
|
_chartsOptions.series[0].areaStyle= { |
|
|
|
color: { |
|
|
|
type: "linear", |
|
|
|
x: 0, //右 |
|
|
|
y: 0, //下 |
|
|
|
x2: 0, //左 |
|
|
|
y2: 1, //上 |
|
|
|
colorStops: [ |
|
|
|
{ |
|
|
|
offset: 0.1, |
|
|
|
color: "#FFD15C", // 0% 处的颜色 |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
opacity: 0.01, |
|
|
|
color: "#FFD15C01", // 100% 处的颜色 |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
}, |
|
|
|
this.chart2 = echarts.init(document.getElementById("charts2")); |
|
|
|
let option2 = JSON.parse(JSON.stringify(_chartsOptions)); |
|
|
|
request({ |
|
|
|
@ -423,6 +480,30 @@ export default { |
|
|
|
this.chart2.setOption(option2); |
|
|
|
this.chart2.resize(); |
|
|
|
}) |
|
|
|
|
|
|
|
_chartsOptions.series[0].lineStyle = { |
|
|
|
color: "#04BFAE", |
|
|
|
} |
|
|
|
_chartsOptions.series[0].areaStyle= { |
|
|
|
color: { |
|
|
|
type: "linear", |
|
|
|
x: 0, //右 |
|
|
|
y: 0, //下 |
|
|
|
x2: 0, //左 |
|
|
|
y2: 1, //上 |
|
|
|
colorStops: [ |
|
|
|
{ |
|
|
|
offset: 0.1, |
|
|
|
color: "#04BFAE", // 0% 处的颜色 |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
opacity: 0.01, |
|
|
|
color: "#04BFAE01", // 100% 处的颜色 |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 发电功率 |
|
|
|
this.chart3 = echarts.init(document.getElementById("charts3")); |
|
|
|
let option3 = JSON.parse(JSON.stringify(_chartsOptions)); |
|
|
|
@ -515,6 +596,37 @@ export default { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
.title1 { |
|
|
|
width: 220px; |
|
|
|
height: 40px; |
|
|
|
margin-top: 10px; |
|
|
|
margin-left: 10px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
background: url("~@screen/images/title/title-import.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.title4 { |
|
|
|
width: 220px; |
|
|
|
height: 40px; |
|
|
|
margin-top: 10px; |
|
|
|
margin-left: 10px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
background: url("~@screen/images/title/title-place.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.title3 { |
|
|
|
width: 220px; |
|
|
|
height: 40px; |
|
|
|
margin-top: 10px; |
|
|
|
margin-left: 10px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
background: url("~@screen/images/title/title-device.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.title2 { |
|
|
|
|
|
|
|
@ -543,28 +655,62 @@ export default { |
|
|
|
.content-l-sec-content { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
|
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
height: 100%; |
|
|
|
.secleft { |
|
|
|
height: 180px; |
|
|
|
width: 250px; |
|
|
|
} |
|
|
|
|
|
|
|
.seclft{ |
|
|
|
height: 130px; |
|
|
|
flex: 1; |
|
|
|
background:url('~@screen/images/solar/space.png') no-repeat; |
|
|
|
margin-left:20px; |
|
|
|
margin-top:50px; |
|
|
|
display:flex; |
|
|
|
flex-direction:column; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
.seclft-s0{ |
|
|
|
font-size: 25px; |
|
|
|
font-weight:bold; |
|
|
|
} |
|
|
|
.seclft-s1{ |
|
|
|
color:#83B8B8; |
|
|
|
margin:0px 0px 32px 0px; |
|
|
|
} |
|
|
|
.seclft-s2{ |
|
|
|
color:#83B8B8; |
|
|
|
} |
|
|
|
} |
|
|
|
.secright { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
flex-direction: column; |
|
|
|
gap: 10px; |
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
gap: 15px; |
|
|
|
width:240px; |
|
|
|
.d1 { |
|
|
|
font-size: 12px; |
|
|
|
|
|
|
|
span { |
|
|
|
font-size: 30px; |
|
|
|
font-weight: bold; |
|
|
|
color: #d3d51c; |
|
|
|
display:flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
.d1label{ |
|
|
|
font-size:16px; |
|
|
|
margin:0px 5px; |
|
|
|
} |
|
|
|
.d1Num{ |
|
|
|
font-size: 20px; |
|
|
|
font-weight:bold; |
|
|
|
font-family: YouSheBiaoTiHei; |
|
|
|
} |
|
|
|
// font-size: 12px; |
|
|
|
|
|
|
|
// span { |
|
|
|
// font-size: 30px; |
|
|
|
// font-weight: bold; |
|
|
|
// color: #d3d51c; |
|
|
|
// } |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -583,7 +729,8 @@ export default { |
|
|
|
.content-k1 { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
|
|
|
|
justify-content: space-between; |
|
|
|
width:100%; |
|
|
|
.content-ll { |
|
|
|
flex: 1; |
|
|
|
width: 200px; |
|
|
|
@ -597,7 +744,7 @@ export default { |
|
|
|
gap: 3px; |
|
|
|
|
|
|
|
>div { |
|
|
|
background-color: #9ff501; |
|
|
|
|
|
|
|
width: 5px; |
|
|
|
height: 17px; |
|
|
|
} |
|
|
|
@ -608,13 +755,16 @@ export default { |
|
|
|
.content-kk { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
margin-left: 10px; |
|
|
|
|
|
|
|
margin-right: 3px; |
|
|
|
gap: 3px; |
|
|
|
|
|
|
|
>div { |
|
|
|
border: 1px solid #0c7f8a; |
|
|
|
padding: 2px 5px; |
|
|
|
// border: 1px solid #0c7f8a; |
|
|
|
background:#1f3c4d; |
|
|
|
color:#3FD7FE; |
|
|
|
padding: 2px 6px; |
|
|
|
font-weight:bold; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -629,7 +779,7 @@ export default { |
|
|
|
.content-l-third-content { |
|
|
|
display: flex; |
|
|
|
width: 100%; |
|
|
|
margin: 20px 20px 20px 10px; |
|
|
|
margin: 20px 10px 20px 0px; |
|
|
|
|
|
|
|
.thirditem { |
|
|
|
flex: 1; |
|
|
|
@ -638,12 +788,15 @@ export default { |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
gap: 10px; |
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
font-size: 18px; |
|
|
|
.thirdNum{ |
|
|
|
margin-top:-100px; |
|
|
|
margin-bottom: 30px; |
|
|
|
font-weight:bold; |
|
|
|
} |
|
|
|
img { |
|
|
|
width: 40px; |
|
|
|
height: 40px; |
|
|
|
margin-bottom: 10px; |
|
|
|
width: 100px; |
|
|
|
height: 129px; |
|
|
|
} |
|
|
|
|
|
|
|
span { |
|
|
|
|
