yinq
/
HKZD-EMS-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update 厂区看板能耗统计顺序优化

Browse Source
master
yinq 1 week ago
parent 04361b112d
commit b94fd5ad45
1 changed files with 29 additions and 19 deletions
Show Stats Download Patch File Download Diff File

48
src/views/board/factoryIndex.vue
Unescape Escape View File

@ -3,8 +3,8 @@
<div class="bg">
<div class="title">正道能源监控系统</div>
<div class="subTitle" style="top: 13.5%;left: 6%;">设备总览</div>
<div class="subTitle" style="top: 42.3%;left: 6%">本月用电排行</div>
<div class="subTitle" style="top: 71.2%;left: 6%">本月用电分项统计</div>
<div class="subTitle" style="top: 42.3%;left: 6%">本月{{ currentTypeMeta.rankName }}排行</div>
<div class="subTitle" style="top: 71.2%;left: 6%">本月{{ currentTypeMeta.rankName }}分项统计</div>
<div class="subTitle" style="top: 71.2%;left: 30.5%">能耗统计</div>
<div class="subTitle" style="top: 71.2%;left: 78%">实时预警</div>
<div class="subTitle" style="top: 13.5%;left: 78%">近7天尖峰平谷统计</div>
@ -27,26 +27,26 @@
</div>
</div>
<div class="typeSelect">
<div class="selectItem" style="width:2.4vw;left: calc(57%)" :class="{'active': typeData === '2'}"
@click="typeChange('2')">
电
<div class="selectItem" style="width:2.4vw;left: calc(57%)" :class="{'active': typeData === '4'}"
@click="typeChange('4')">
蒸汽
</div>
<div class="selectItem" style="width:2.4vw;left: calc(57% + 2.4vw)" :class="{'active': typeData === '3'}"
@click="typeChange('3')">
水
</div>
<div class="selectItem" style="width:3.8vw;left: calc(57% + 4.8vw)" :class="{'active': typeData === '4'}"
@click="typeChange('4')">
<div class="selectItem" style="width:3.8vw;left: calc(57% + 4.8vw)" :class="{'active': typeData === '5'}"
@click="typeChange('5')">
压缩空气
</div>
<div class="selectItem" style="width:3vw;left: calc(57% + 8.6vw)" :class="{'active': typeData === '5'}"
@click="typeChange('5')">
蒸汽
</div>
<div class="selectItem" style="width:3vw;left: calc(57% + 11.6vw)" :class="{'active': typeData === '6'}"
<div class="selectItem" style="width:3vw;left: calc(57% + 8.6vw)" :class="{'active': typeData === '6'}"
@click="typeChange('6')">
氮气
</div>
<div class="selectItem" style="width:3vw;left: calc(57% + 11.6vw)" :class="{'active': typeData === '2'}"
@click="typeChange('2')">
电
</div>
</div>
<div class="sbzl">
<div class="num" style="top: 22%;left: 7%;">{{ deviceOverviewData.deviceSum }}</div>
@ -112,7 +112,7 @@
设备名称
</div>
<div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 3);">
A相电流
{{ currentTypeMeta.field1Label }}
</div>
<!-- <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">-->
<!-- B相电流-->
@ -121,7 +121,7 @@
<!-- C相电流-->
<!-- </div>-->
<div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 3);">
A相电压
{{ currentTypeMeta.field2Label }}
</div>
<!-- <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">-->
<!-- B相电压-->
@ -146,7 +146,7 @@
{{ item.monitorName || '' }}
</div>
<div class="scrollTable" style="width: calc(100% / 3);">
{{ item.iA || 0 }}
{{ item[currentTypeMeta.field1Key] || 0 }}
</div>
<!-- <div class="scrollTable" style="width: calc(100% / 7);">-->
<!-- {{ item.iB || 0 }}-->
@ -155,7 +155,7 @@
<!-- {{ item.iC || 0 }}-->
<!-- </div>-->
<div class="scrollTable" style="width: calc(100% / 3);">
{{ item.vA || 0 }}
{{ item[currentTypeMeta.field2Key] || 0 }}
</div>
<!-- <div class="scrollTable" style="width: calc(100% / 7);">-->
<!-- {{ item.vB || 0 }}-->
@ -232,7 +232,7 @@
<div class="text">{{ i.workUnitName }}</div>
<div class="num">
<span style="color: #25B89A">{{ i.expend }}</span>
<span>kwh</span>
<span>{{ currentTypeMeta.unit }}</span>
</div>
<div class="schedule">
<div class="schedule1" :style="`width:${Math.min(100,i.expend)}%`"></div>
@ -263,13 +263,23 @@ export default {
computed: {
topRankingData() {
return this.rankingData.slice(0, 5)
},
currentTypeMeta() {
const map = {
'2': { rankName: '用电', unit: 'kWh', field1Label: 'A相电流', field2Label: 'A相电压', field1Key: 'iA', field2Key: 'vA' },
'3': { rankName: '用水', unit: 'm³', field1Label: '瞬时流量', field2Label: '累计流量', field1Key: 'instantFlow', field2Key: 'cumulativeFlow' },
'4': { rankName: '用蒸汽', unit: 't', field1Label: '瞬时流量', field2Label: '累计流量', field1Key: 'instantFlow', field2Key: 'cumulativeFlow' },
'5': { rankName: '用压缩空气', unit: 'm³', field1Label: '瞬时流量', field2Label: '累计流量', field1Key: 'instantFlow', field2Key: 'cumulativeFlow' },
'6': { rankName: '用氮气', unit: 'm³', field1Label: '瞬时流量', field2Label: '累计流量', field1Key: 'instantFlow', field2Key: 'cumulativeFlow' }
}
return map[this.typeData] || map['4']
}
},
data() {
return {
selectData: 'year',
typeData: "2",
typeData: "4",
colors: ['#30A0FB', '#00FF89', '#F9E435', '#FB5C2D', '#73c0de'],
chart1TableOption: {
step: 0.5, // 数值越大速度滚动越快
@ -588,7 +598,7 @@ export default {
},
yAxis: {
type: 'value',
name: '单位(kwh)',
name: `单位(${this.currentTypeMeta.unit})`,
max: function (value) {
return value.max * 1.2;
},

Write Preview
Loading…
Cancel
Save