@@ -36,11 +36,29 @@ export default { | |||
// const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10 | |||
let data = [ | |||
// 温度走势 | |||
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5], | |||
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => { | |||
let v = Math.floor(Math.random() * 100) | |||
while (v < 30) { | |||
v = Math.floor(Math.random() * 100) | |||
} | |||
return v | |||
}), | |||
// 电流走势 | |||
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71], | |||
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => { | |||
let v = Math.floor(Math.random() * 100) | |||
while (v < 30) { | |||
v = Math.floor(Math.random() * 100) | |||
} | |||
return v | |||
}), | |||
// 电压走势 | |||
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73] | |||
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => { | |||
let v = Math.floor(Math.random() * 100) | |||
while (v < 30) { | |||
v = Math.floor(Math.random() * 100) | |||
} | |||
return v | |||
}) | |||
] | |||
let wendu = data[0] | |||
let dianliu = data[1] | |||
@@ -52,6 +70,7 @@ export default { | |||
color: colors, | |||
legend: { | |||
top: 4, | |||
right: 50, | |||
itemWidth: 8, | |||
itemHeight: 8, | |||
textStyle: { | |||
@@ -85,10 +104,10 @@ export default { | |||
name: '电流/A', | |||
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' }, | |||
type: 'value', | |||
splitNumber: 4, | |||
splitNumber: 3, | |||
onZero: true, | |||
position: 'left', | |||
offset: 42, | |||
offset: 40, | |||
axisTick: { show: false }, | |||
axisLine: { | |||
show: true, | |||
@@ -112,7 +131,7 @@ export default { | |||
name: '电压/V', | |||
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' }, | |||
type: 'value', | |||
splitNumber: 4, | |||
splitNumber: 3, | |||
axisTick: { show: false }, | |||
onZero: true, | |||
position: 'left', | |||
@@ -147,7 +166,7 @@ export default { | |||
} | |||
}, | |||
type: 'value', | |||
splitNumber: 4, | |||
splitNumber: 3, | |||
splitLine: { | |||
lineStyle: { | |||
color: '#fff3' | |||
@@ -9,7 +9,7 @@ | |||
<div class="content-part"> | |||
<div class="row"> | |||
<span class="name">纯 水</span> | |||
<span class="diy-process-bar color-1" /> | |||
<span class="diy-process-bar bar-width-1 color-1" /> | |||
<span class="amount"> | |||
39m | |||
<sup>3</sup> | |||
@@ -17,17 +17,17 @@ | |||
</div> | |||
<div class="row"> | |||
<span class="name">循环水</span> | |||
<span class="diy-process-bar color-2" /> | |||
<span class="diy-process-bar bar-width-2 color-2" /> | |||
<span class="amount"> | |||
239m | |||
23m | |||
<sup>3</sup> | |||
</span> | |||
</div> | |||
<div class="row"> | |||
<span class="name">自来水</span> | |||
<span class="diy-process-bar color-3" /> | |||
<span class="diy-process-bar bar-width-3 color-3" /> | |||
<span class="amount"> | |||
23m | |||
239m | |||
<sup>3</sup> | |||
</span> | |||
</div> | |||
@@ -44,23 +44,23 @@ | |||
<div class="content-part"> | |||
<div class="row"> | |||
<span class="name">氧 气</span> | |||
<span class="diy-process-bar color-1" /> | |||
<span class="diy-process-bar bar-width-4 color-1" /> | |||
<span class="amount"> | |||
39Pa | |||
23Pa | |||
</span> | |||
</div> | |||
<div class="row"> | |||
<span class="name">CDA</span> | |||
<span class="diy-process-bar color-2" /> | |||
<span class="diy-process-bar bar-width-5 color-2" /> | |||
<span class="amount"> | |||
239pa | |||
39Pa | |||
</span> | |||
</div> | |||
<div class="row"> | |||
<span class="name">天然气</span> | |||
<span class="diy-process-bar color-3" /> | |||
<span class="diy-process-bar bar-width-6 color-3" /> | |||
<span class="amount"> | |||
23Pa | |||
239pa | |||
</span> | |||
</div> | |||
</div> | |||
@@ -85,8 +85,9 @@ | |||
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" /> | |||
<span>发电</span> | |||
</div> | |||
<div style="height: 100%; flex: 1; padding: calc(8px * var(--beilv))"> | |||
<FadianChart /> | |||
<div style="height: 100%; flex: 1; "> | |||
<!-- <FadianChart /> --> | |||
<DianChart /> | |||
</div> | |||
</TechyBox> | |||
</div> | |||
@@ -199,6 +200,25 @@ export default { | |||
height: 100%; | |||
} | |||
.bar-width-1::after { | |||
width: 60%; | |||
} | |||
.bar-width-2::after { | |||
width: 34%; | |||
} | |||
.bar-width-3::after { | |||
width: 99%; | |||
} | |||
.bar-width-4::after { | |||
width: 20%; | |||
} | |||
.bar-width-5::after { | |||
width: 29%; | |||
} | |||
.bar-width-6::after { | |||
width: 79%; | |||
} | |||
.diy-process-bar.color-1::after { | |||
background: linear-gradient(to right, #178be9, #67b3f2); | |||
} | |||