|
|
@@ -1,30 +1,5 @@ |
|
|
|
<template> |
|
|
|
<div class="public-consume__inner"> |
|
|
|
<!-- <div class="water-area"> |
|
|
|
<TechyBarChart |
|
|
|
:id="'water-chart'" |
|
|
|
key="waterchart" |
|
|
|
title="水" |
|
|
|
:x-data="['自来水', '纯水', '循环水']" |
|
|
|
:series-data="[8.2, 10, 6.1]" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="elec-area"> |
|
|
|
<TechyLineChart :id="'elec-chart'" key="elecchart" title="电" /> |
|
|
|
</div> |
|
|
|
<div class="elec-gen-area"> |
|
|
|
<TechyLineChart :id="'elec-gen-chart'" key="elecgenchart" title="发电" /> |
|
|
|
</div> |
|
|
|
<div class="gas-area"> |
|
|
|
<TechyBarChart |
|
|
|
:id="'gas-chart'" |
|
|
|
key="gaschart" |
|
|
|
title="气" |
|
|
|
:x-data="['天然气', '氧气', 'CDA']" |
|
|
|
:series-data="[8.2, 10, 6.1]" |
|
|
|
/> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
<div> |
|
|
|
<TechyBox class="water-consume"> |
|
|
|
<div class="header-part"> |
|
|
@@ -92,25 +67,25 @@ |
|
|
|
</TechyBox> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div style="height: 1px; flex: 1;"> |
|
|
|
<div style="min-height: calc(110px * var(--beilv)); flex: 1;"> |
|
|
|
<TechyBox class="dian-consume"> |
|
|
|
<div class="header-part"> |
|
|
|
<img src="./assets/consume/d.png" width="32" height="32" alt="dian" /> |
|
|
|
<span>电</span> |
|
|
|
</div> |
|
|
|
<div class="content-part"> |
|
|
|
<div style="height: 100%; flex: 1;"> |
|
|
|
<DianChart /> |
|
|
|
</div> |
|
|
|
</TechyBox> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div style="height: 1px; flex: 1;"> |
|
|
|
<div style="min-height: calc(110px * var(--beilv)); flex: 1;"> |
|
|
|
<TechyBox class="elec-consume"> |
|
|
|
<div class="header-part"> |
|
|
|
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" /> |
|
|
|
<span>发电</span> |
|
|
|
</div> |
|
|
|
<div class="content-part"> |
|
|
|
<div style="height: 100%; flex: 1; padding: calc(8px * var(--beilv))"> |
|
|
|
<FadianChart /> |
|
|
|
</div> |
|
|
|
</TechyBox> |
|
|
@@ -138,34 +113,15 @@ export default { |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.public-consume__inner { |
|
|
|
overflow: hidden; |
|
|
|
overflow-y: auto; |
|
|
|
height: calc(100% - 32px); |
|
|
|
width: 100%; |
|
|
|
/* display: grid; |
|
|
|
grid-template-areas: |
|
|
|
'water elec elec gas' |
|
|
|
'water elec-gen elec-gen gas'; */ |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: calc(8px * var(--beilv)); |
|
|
|
} |
|
|
|
|
|
|
|
.water-area { |
|
|
|
grid-area: water; |
|
|
|
} |
|
|
|
.gas-area { |
|
|
|
grid-area: gas; |
|
|
|
} |
|
|
|
.elec-area { |
|
|
|
grid-area: elec; |
|
|
|
} |
|
|
|
.elec-gen-area { |
|
|
|
grid-area: elec-gen; |
|
|
|
} |
|
|
|
|
|
|
|
/* .elec-area,.elec-gen-area { |
|
|
|
max-height: calc((100% - 32px) / 2 - 16px); |
|
|
|
} */ |
|
|
|
|
|
|
|
.techy-box { |
|
|
|
padding: calc(16px * var(--beilv)); |
|
|
|
display: flex; |
|
|
@@ -201,17 +157,18 @@ export default { |
|
|
|
.content-part { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
font-size: calc(100vmin / 1920 * 18); |
|
|
|
font-size: calc(12px * var(--beilv)); |
|
|
|
color: #fff9; |
|
|
|
height: 10px; |
|
|
|
flex: 1 1; |
|
|
|
gap: calc(100vmin / 1920 * 8); |
|
|
|
gap: calc(4px * var(--beilv)); |
|
|
|
} |
|
|
|
|
|
|
|
.row { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
width: 100%; |
|
|
|
height: calc(100vmin / 1920 * 28); |
|
|
|
height: calc(14px * var(--beilv)); |
|
|
|
} |
|
|
|
|
|
|
|
.row > .name, |
|
|
@@ -227,10 +184,7 @@ export default { |
|
|
|
.diy-process-bar { |
|
|
|
margin: 0 8px; |
|
|
|
border-radius: 7px; |
|
|
|
height: calc(100vmin / 1920 * 14); |
|
|
|
/* margin: 0 8px; |
|
|
|
border-radius: 7px; */ |
|
|
|
/* height: 8px; */ |
|
|
|
height: calc(8px * var(--beilv)); |
|
|
|
flex: 1 1; |
|
|
|
background-color: #fff3; |
|
|
|
overflow: hidden; |
|
|
@@ -240,7 +194,7 @@ export default { |
|
|
|
.diy-process-bar::after { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
border-radius: 7px; |
|
|
|
border-radius: calc(6px * var(--beilv)); |
|
|
|
width: 30%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
@@ -254,4 +208,16 @@ export default { |
|
|
|
.diy-process-bar.color-3::after { |
|
|
|
background: linear-gradient(to right, #ff8bc3, #eb46a1); |
|
|
|
} |
|
|
|
|
|
|
|
.dian-consume, |
|
|
|
.elec-consume { |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.dian-consume > .header-part, |
|
|
|
.elec-consume > .header-part { |
|
|
|
padding: calc(16px * var(--beilv)); |
|
|
|
margin: 0; |
|
|
|
margin-left: calc(16px * var(--beilv)); |
|
|
|
} |
|
|
|
</style> |