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 b94fd5ad45
commit 1fd862b688
1 changed files with 93 additions and 46 deletions
Show Stats Download Patch File Download Diff File

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

@ -2,6 +2,7 @@
<div>
<div class="bg">
<div class="title">正道能源监控系统</div>
<div class="time">{{ clockText }}</div>
<div class="subTitle" style="top: 13.5%;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>
@ -108,27 +109,17 @@
<div class="table1">
<div class="h1" style="line-height: 1vw">
<div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 3);">
<div class="scrollTable" :style="getTableCellStyle(true)">
设备名称
</div>
<div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 3);">
{{ currentTypeMeta.field1Label }}
<div
class="scrollTable"
v-for="column in currentTypeMeta.columns"
:key="column.key"
:style="getTableCellStyle(true)"
>
{{ column.label }}
</div>
<!-- <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">-->
<!-- B相电流-->
<!-- </div>-->
<!-- <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">-->
<!-- C相电流-->
<!-- </div>-->
<div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 3);">
{{ currentTypeMeta.field2Label }}
</div>
<!-- <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">-->
<!-- B相电压-->
<!-- </div>-->
<!-- <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">-->
<!-- C相电压-->
<!-- </div>-->
</div>
<vue-seamless-scroll
:class-option="{...chart1TableOption,limitMoveNum:6}"
@ -142,27 +133,17 @@
:key="index"
>
<div class="T1">
<div class="scrollTable" style="width: calc(100% / 3);">
<div class="scrollTable" :style="getTableCellStyle()">
{{ item.monitorName || '' }}
</div>
<div class="scrollTable" style="width: calc(100% / 3);">
{{ item[currentTypeMeta.field1Key] || 0 }}
<div
class="scrollTable"
v-for="column in currentTypeMeta.columns"
:key="column.key"
:style="getTableCellStyle()"
>
{{ item[column.key] || 0 }}
</div>
<!-- <div class="scrollTable" style="width: calc(100% / 7);">-->
<!-- {{ item.iB || 0 }}-->
<!-- </div>-->
<!-- <div class="scrollTable" style="width: calc(100% / 7);">-->
<!-- {{ item.iC || 0 }}-->
<!-- </div>-->
<div class="scrollTable" style="width: calc(100% / 3);">
{{ item[currentTypeMeta.field2Key] || 0 }}
</div>
<!-- <div class="scrollTable" style="width: calc(100% / 7);">-->
<!-- {{ item.vB || 0 }}-->
<!-- </div>-->
<!-- <div class="scrollTable" style="width: calc(100% / 7);">-->
<!-- {{ item.vC || 0 }}-->
<!-- </div>-->
</div>
</div>
</vue-seamless-scroll>
@ -252,7 +233,7 @@ import {
fiveConsumptionStatistics,
monthConsumptionRanking,
peaksValleysConsumption, realTimeAlarm,
realTimeData
realTimeDataByEnergy
} from "@/api/board";
export default {
name: 'Board',
@ -266,11 +247,47 @@ export default {
},
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' }
'2': {
rankName: '用电',
unit: 'kWh',
columns: [
{ key: 'iA', label: '电流' },
{ key: 'vA', label: '电压' },
{ key: 'zxyg', label: '正向有功' }
]
},
'3': {
rankName: '用水',
unit: 'm³',
columns: [
{ key: 'fluxFlow', label: '瞬时流量' },
{ key: 'waterFlow', label: '累计流量' }
]
},
'4': {
rankName: '用蒸汽',
unit: 't',
columns: [
{ key: 'fluxFlow', label: '瞬时流量' },
{ key: 'steamFlow', label: '累计流量' }
]
},
'5': {
rankName: '用压缩空气',
unit: 'm³',
columns: [
{ key: 'fluxFlow', label: '瞬时流量' },
{ key: 'steamFlow', label: '累计流量' }
]
},
'6': {
rankName: '用氮气',
unit: 'm³',
columns: [
{ key: 'fluxFlow', label: '瞬时流量' },
{ key: 'steamFlow', label: '累计流量' }
]
}
}
return map[this.typeData] || map['4']
}
@ -278,7 +295,7 @@ export default {
data() {
return {
selectData: 'year',
selectData: 'day',
typeData: "4",
colors: ['#30A0FB', '#00FF89', '#F9E435', '#FB5C2D', '#73c0de'],
chart1TableOption: {
@ -294,6 +311,9 @@ export default {
table1Data: [],
scrollKey1: '',
scrollKey2: '',
clockText: '',
timer: null,
dataTimer: null,
deviceOverviewData: {},
rankingData: [],
statisticsData: [],
@ -303,9 +323,28 @@ export default {
}
},
async mounted() {
this.tickClock()
this.timer = setInterval(this.tickClock, 1000)
this.getData()
this.dataTimer = setInterval(this.getData, 10 * 60 * 1000)
},
beforeDestroy() {
if (this.timer) clearInterval(this.timer)
if (this.dataTimer) clearInterval(this.dataTimer)
},
methods: {
tickClock() {
const d = new Date()
const pad = n => (n < 10 ? '0' + n : '' + n)
this.clockText = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
},
getTableCellStyle(isHeader = false) {
const width = `calc(100% / ${this.currentTypeMeta.columns.length + 1})`
return {
width,
...(isHeader ? { lineHeight: '1vw', fontWeight: 'bold' } : {})
}
},
getData() {
deviceOverview().then(res => {
this.deviceOverviewData = res.data
@ -675,10 +714,10 @@ export default {
this.scrollKey2 = new Date().getTime()
})
realTimeData({
monitorType: this.typeData
realTimeDataByEnergy({
monitorType: this.typeData,
isAmmeter: '1'
}).then(res => {
console.log(res)
this.table1Data = res.data
this.scrollKey1 = new Date().getTime()
})
@ -775,6 +814,14 @@ export default {
}
.time {
position: absolute;
top: 2.4%;
right: 2%;
font-size: 1vw;
color: #9fc4e8;
}
.subTitle {
position: absolute;
font-size: 1vw;

Write Preview
Loading…
Cancel
Save