mt-fe-group/11-mes-new
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 3d公用工程消耗

Browse Source
This commit is contained in:
lb 2022-11-17 14:15:22 +08:00
parent 2d3d0d4a3a
commit 8428141a30
2 changed files with 63 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/3DOverview/components/DianChart.vue
View File

@ -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'

54
src/views/3DOverview/components/LeftContentPublicConsume.vue
View File

@ -9,7 +9,7 @@
<div class="content-part">
<div class="row">
<span class="name">纯 &nbsp;&nbsp;&nbsp;水</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,25 +44,25 @@
<div class="content-part">
<div class="row">
<span class="name">氧&nbsp;&nbsp;&nbsp;&nbsp;气</span>
<span class="diy-process-bar color-1" />
<span class="diy-process-bar bar-width-4 color-1" />
<span class="amount">
23Pa
</span>
</div>
<div class="row">
<span class="name">CDA</span>
<span class="diy-process-bar bar-width-5 color-2" />
<span class="amount">
39Pa
</span>
</div>
<div class="row">
<span class="name">CDA</span>
<span class="diy-process-bar color-2" />
<span class="name">天然气</span>
<span class="diy-process-bar bar-width-6 color-3" />
<span class="amount">
239pa
</span>
</div>
<div class="row">
<span class="name">天然气</span>
<span class="diy-process-bar color-3" />
<span class="amount">
23Pa
</span>
</div>
</div>
</TechyBox>
</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);
}