Files
smart_storage_app/pages/home-page/device-detail/components/emu.vue

849 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="emu-warp">
<scroll-view style="height: 100% ;" scroll-y="true">
<zero-loading v-if="loading"></zero-loading>
<template v-else>
<view class="all-con-item-box">
<Section :title="$t('homePage.device.EMU')" />
<view class="group-box ">
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num"
:class="panelData.EMURingMainCabinetSwitchClosed ? 'success' : 'warning'">
{{panelData.EMURingMainCabinetSwitchClosed ? $t('homePage.device.on') : $t('homePage.device.off')}}
</view>
<view class="item-title">{{$t('homePage.device.emuSwitchPosition')}}</view>
</view>
</view>
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num"
:class="panelData.EMURemoteNetworkCabinet ? 'success' : 'warning'">
{{panelData.EMURemoteNetworkCabinet ? $t('homePage.device.distance') : $t('homePage.device.local')}}
</view>
<view class="item-title">{{$t('homePage.device.emuRemoteOperation')}}</view>
</view>
</view>
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num"
:class="panelData.EMUCabinetSwitchClosingPosition ? 'success' : 'warning'">
{{panelData.EMUCabinetSwitchClosingPosition ? $t('homePage.device.on') : $t('homePage.device.off')}}
</view>
<view class="item-title">并网柜地刀位置</view>
</view>
</view>
<view class="group-item">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num"
:class="panelData.EMURingMainCabinetSwitchClosed ? 'success' : 'warning'">
{{panelData.EMURingMainCabinetSwitchClosed ? $t('homePage.device.online') : $t('homePage.device.offline')}}
</view>
<view class="item-title">{{ $t('homePage.device.runState') }}</view>
</view>
</view>
</view>
</view>
<view class="all-con-item-box">
<Section :title="$t('homePage.device.temConCabRunData')" />
<view class="group-box">
<view class="group-item">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUBoxPhaseATemperature | isNull}}
</view>
<view class="item-title">{{$t('homePage.device.aTem')}}()</view>
</view>
</view>
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUBoxPhaseBTemperature | isNull}}
</view>
<view class="item-title">{{$t('homePage.device.bTem')}}()</view>
</view>
</view>
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUBoxPhaseCTemperature | isNull}}
</view>
<view class="item-title">{{$t('homePage.device.cTem')}}()</view>
</view>
</view>
<view class="group-item">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num"
:class="panelData.EMUDeviceOnlineStatus ? 'success' : 'warning'">
{{panelData.EMUDeviceOnlineStatus ? $t('homePage.device.online') : $t('homePage.device.offline')}}
</view>
<view class="item-title">{{ $t('homePage.device.runState') }}</view>
</view>
</view>
</view>
</view>
<view class="all-con-item-box">
<Section :title="$t('homePage.device.dehumidifierRunData')" />
<view class="group-box">
<view class="group-item">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUDehumidifier1Temperature | isNull}}
</view>
<view class="item-title">{{ $t('homePage.device.tem') }}()</view>
</view>
</view>
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUDehumidifier1Humidity | isNull}}
</view>
<view class="item-title">{{ $t('homePage.device.hum') }}(%)</view>
</view>
</view>
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUDehumidifier1HumidityStartValue | isNull}}
</view>
<view class="item-title">{{ $t('homePage.device.humStartValue') }}(%)</view>
</view>
</view>
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUDehumidifier1HumidityStopValue | isNull}}
</view>
<view class="item-title">{{ $t('homePage.device.humStopValue') }}(%)</view>
</view>
</view>
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num"
:class="panelData.EMUDeviceOnlineStatus ? 'success' : 'warning'">
{{panelData.EMUDeviceOnlineStatus ? $t('homePage.device.online') : $t('homePage.device.offline')}}
</view>
<view class="item-title">{{ $t('homePage.device.runState') }}</view>
</view>
</view>
</view>
</view>
<view class="all-con-item-box">
<Section :title="$t('homePage.device.ammeterRunData')" />
<view class="group-box">
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUPhaseVoltageUA | isNull}}
</view>
<view class="item-title">{{$t('homePage.device.avol')}}(V)</view>
</view>
</view>
<view class="group-item">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUIA | isNull}}
</view>
<view class="item-title">{{$t('homePage.device.acur')}}(A)</view>
</view>
</view>
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUPhaseVoltageUB | isNull}}
</view>
<view class="item-title">{{$t('homePage.device.bvol')}}(V)</view>
</view>
</view>
<view class="group-item">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUIB | isNull}}
</view>
<view class="item-title">{{$t('homePage.device.bcur')}}(A)</view>
</view>
</view>
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUPhaseVoltageUC | isNull}}
</view>
<view class="item-title">{{$t('homePage.device.cvol')}}(V)</view>
</view>
</view>
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUIC | isNull}}
</view>
<view class="item-title">{{$t('homePage.device.ccur')}}(A)</view>
</view>
</view>
<view class="group-item">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMULineVoltageUAB | isNull}}
</view>
<view class="item-title">{{$t('homePage.device.abLineVol')}}(V)</view>
</view>
</view>
<view class="group-item">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMULineVoltageUBC | isNull}}
</view>
<view class="item-title">{{$t('homePage.device.bcLineVol')}}(V)</view>
</view>
</view>
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMULineVoltageUAC | isNull}}
</view>
<view class="item-title">{{$t('homePage.device.caLineVol')}}(V)</view>
</view>
</view>
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUFrequency | isNull}}
</view>
<view class="item-title">{{$t('homePage.device.frequency')}}(Hz)</view>
</view>
</view>
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUAbsorbingActiveElectricalEnergy | kwhFormat}}
</view>
<view class="item-title">
{{$t('homePage.device.zxygzdl')}}({{panelData.EMUAbsorbingActiveElectricalEnergy | kwhUnitFormat}})</view>
</view>
</view>
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUReleaseActiveElectricalEnergy | kwhFormat}}
</view>
<view class="item-title">
{{$t('homePage.device.fxygzdl')}}({{panelData.EMUReleaseActiveElectricalEnergy | kwhUnitFormat}})</view>
</view>
</view>
<view class="group-item">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUInductiveEnergy | isNull}}
</view>
<view class="item-title">{{$t('homePage.device.perceptualPower')}}(kVarh)</view>
</view>
</view>
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num">{{panelData.EMUCapacitiveEnergy | isNull}}
</view>
<view class="item-title">{{$t('homePage.device.CapacitivePower')}}(kVarh)</view>
</view>
</view>
<view class="group-item ">
<view class="item-icon">
<image src="/static/aidex/images/rcdl.png"></image>
</view>
<view class="item-con">
<view class="item-num"
:class="panelData.EMUOnlineStatusOfElectricityMeter ? 'success' : 'warning'">
{{panelData.EMUOnlineStatusOfElectricityMeter ? $t('homePage.device.online') : $t('homePage.device.offline')}}
</view>
<view class="item-title">{{$t('homePage.device.runState')}}</view>
</view>
</view>
</view>
</view>
<view class="all-con-item-box">
<Section :title="$t('homePage.device.ammeterRunData')" />
<view class="group-box border-bottom padding-top-30 padding-bottom-30">
<view class="other-value">
<view class="top-value">
<view class="title">
{{ $t('homePage.device.totalActivePower')}}
</view>
<view class="value">
{{panelData.EMUPTotal | kWFormat }}{{panelData.EMUPTotal | kwUnitFormat}}
</view>
</view>
<view class="bottom-value">
<view>{{ $t('homePage.device.a')}}{{panelData.EMUPA | isNull}}</view>
<view>{{ $t('homePage.device.b')}}{{panelData.EMUPB | isNull}}</view>
<view>{{ $t('homePage.device.c')}}{{panelData.EMUPC | isNull}}</view>
</view>
</view>
</view>
<view class="group-box padding-top-30 ">
<view class="other-value">
<view class="top-value">
<view class="title">
{{ $t('homePage.device.totalReactivePower')}}
</view>
<view class="value">
{{panelData.EMUQTotal }}kVar
</view>
</view>
<view class="bottom-value">
<view>{{ $t('homePage.device.a')}}{{panelData.EMUQA | isNull}}</view>
<view>{{ $t('homePage.device.b')}}{{panelData.EMUQB | isNull}}</view>
<view>{{ $t('homePage.device.c')}}{{panelData.EMUQC | isNull}}</view>
</view>
</view>
</view>
</view>
</template>
</scroll-view>
</view>
</template>
<script>
import Section from '@/components/section/index.vue'
export default {
data() {
return {
loading: false,
panelData: {},
srcId: null,
stationId: null,
timeArr: [],
datetimerange: ["2021-03-20 20:10:10", "2021-05-10 10:10:10"],
}
},
components: {
Section
},
computed: {
currentStation() {
return this.vuex_currentStation
}
},
watch: {
currentStation: {
handler(val) {
this.stationId = val.id;
this.getTime()
},
deep: true,
immediate: true
}
},
methods: {
getTime() {
// 获取当前时间
var now = new Date();
this.maxTime =
new Date(now.toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
// 将时间调整到24小时前
now.setHours(now.getHours() - 24);
// 格式化输出开始时间
var year_start = now.getFullYear();
var month_start = now.getMonth() + 1;
month_start = month_start < 10 ? "0" + month_start : month_start;
var day_start = now.getDate();
day_start = day_start < 10 ? "0" + day_start : day_start;
var hours_start = now.getHours();
hours_start = hours_start < 10 ? "0" + hours_start : hours_start;
var minutes_start = now.getMinutes();
minutes_start = minutes_start < 10 ? "0" + minutes_start : minutes_start;
var seconds_start = now.getSeconds();
seconds_start = seconds_start < 10 ? "0" + seconds_start : seconds_start;
var formattedTime_start =
year_start +
"-" +
month_start +
"-" +
day_start +
" " +
hours_start +
":" +
minutes_start +
":" +
seconds_start;
// 获取当前时间
var now_end = new Date();
// 格式化输出结束时间
var year_end = now_end.getFullYear();
var month_end = now_end.getMonth() + 1;
month_end = month_end < 10 ? "0" + month_end : month_end;
var day_end = now_end.getDate();
day_end = day_end < 10 ? "0" + day_end : day_end;
var hours_end = now_end.getHours();
hours_end = hours_end < 10 ? "0" + hours_end : hours_end;
var minutes_end = now_end.getMinutes();
minutes_end = minutes_end < 10 ? "0" + minutes_end : minutes_end;
var seconds_end = now_end.getSeconds();
seconds_end = seconds_end < 10 ? "0" + seconds_end : seconds_end;
var formattedTime_end =
year_end +
"-" +
month_end +
"-" +
day_end +
" " +
hours_end +
":" +
minutes_end +
":" +
seconds_end;
this.datetimerange = [formattedTime_start, formattedTime_end];
this.timeArr = [formattedTime_start, formattedTime_end];
},
getData(srcId) {
this.loading = true
this.srcId = srcId
const api = [
this.getTotalData()
]
Promise.all(api).then(result => {
this.err = result
this.loading = false
})
},
getTotalData() {
this.loading = true
const self = this
return new Promise((resolve, reject) => {
self.$u.api.deviceList
.GetNewValue({
colList: ["EMURingMainCabinetSwitchClosed", "EMURemoteNetworkCabinet",
'EMUCabinetSwitchClosingPosition', 'EMUDeviceOnlineStatus',
'EMUBoxPhaseATemperature', 'EMUBoxPhaseBTemperature',
'EMUBoxPhaseCTemperature', 'EMUBoxOnlineStatus',
'EMUPhaseVoltageUA', 'EMUIA', 'EMUPhaseVoltageUB', 'EMUIB',
'EMUPhaseVoltageUC', 'EMUIC',
'EMULineVoltageUAB', 'EMULineVoltageUBC', 'EMULineVoltageUAC',
'EMUFrequency', 'EMUAbsorbingActiveElectricalEnergy',
'EMUReleaseActiveElectricalEnergy', 'EMUInductiveEnergy',
'EMUCapacitiveEnergy', 'EMUOnlineStatusOfElectricityMeter',
'EMUPTotal', 'EMUPA', 'EMUPB', 'EMUPC', 'EMUQTotal', 'EMUQA', 'EMUQB',
'EMUQC', 'EMUDehumidifier1Temperature', 'EMUDehumidifier1Humidity',
'EMUDehumidifier1HumidityStartValue', 'EMUDehumidifier1HumidityStopValue',
'EMUDehumidifier1OnlineStatus'
],
stationId: this.stationId,
srcId: this.srcId
})
.then((res) => {
this.panelData = {
EMURingMainCabinetSwitchClosed: res.data.EMURingMainCabinetSwitchClosed
?.value,
EMURemoteNetworkCabinet: res.data.EMURemoteNetworkCabinet?.value,
EMUCabinetSwitchClosingPosition: res.data.EMUCabinetSwitchClosingPosition
?.value,
EMUDeviceOnlineStatus: res.data.EMUDeviceOnlineStatus?.value,
EMUBoxPhaseATemperature: res.data.EMUBoxPhaseATemperature?.value,
EMUBoxPhaseBTemperature: res.data.EMUBoxPhaseBTemperature?.value,
EMUBoxPhaseCTemperature: res.data.EMUBoxPhaseCTemperature?.value,
EMUBoxOnlineStatus: res.data.EMUBoxOnlineStatus?.value,
EMUPhaseVoltageUA: res.data.EMUPhaseVoltageUA?.value,
EMUIA: res.data.EMUIA?.value,
EMUPhaseVoltageUB: res.data.EMUPhaseVoltageUB?.value,
EMUIB: res.data.EMUIB?.value,
EMUPhaseVoltageUC: res.data.EMUPhaseVoltageUC?.value,
EMUIC: res.data.EMUIC?.value,
EMULineVoltageUAB: res.data.EMULineVoltageUAB?.value,
EMULineVoltageUBC: res.data.EMULineVoltageUBC?.value,
EMULineVoltageUAC: res.data.EMULineVoltageUAC?.value,
EMUFrequency: res.data.EMUFrequency?.value,
EMUAbsorbingActiveElectricalEnergy: res.data
.EMUAbsorbingActiveElectricalEnergy?.value,
EMUReleaseActiveElectricalEnergy: res.data.EMUReleaseActiveElectricalEnergy
?.value,
EMUInductiveEnergy: res.data.EMUInductiveEnergy?.value,
EMUCapacitiveEnergy: res.data.EMUCapacitiveEnergy?.value,
EMUOnlineStatusOfElectricityMeter: res.data
.EMUOnlineStatusOfElectricityMeter?.value,
EMUPTotal: res.data.EMUPTotal?.value,
EMUPA: res.data.EMUPA?.value,
EMUPB: res.data.EMUPB?.value,
EMUPC: res.data.EMUPC?.value,
EMUQTotal: res.data.EMUQTotal?.value,
EMUQA: res.data.EMUQA?.value,
EMUQB: res.data.EMUQB?.value,
EMUQC: res.data.EMUQC?.value,
EMUDehumidifier1Temperature: res.data.EMUDehumidifier1Temperature?.value,
EMUDehumidifier1Humidity: res.data.EMUDehumidifier1Humidity?.value,
EMUDehumidifier1HumidityStartValue: res.data
.EMUDehumidifier1HumidityStartValue?.value,
EMUDehumidifier1HumidityStopValue: res.data
.EMUDehumidifier1HumidityStopValue?.value,
EMUDehumidifier1OnlineStatus: res.data.EMUDehumidifier1OnlineStatus?.value,
}
resolve(res);
})
.catch((err) => {
reject("错误");
})
});
}
}
}
</script>
<style lang="scss" scoped>
.emu-warp {
height: 100% !important;
background-color: #f5f5f5;
.all-con-item-box {
background: #ffffff;
border-radius: 16rpx;
padding: 30rpx;
width: 710rpx;
border: 16rpx;
margin-top: 30rpx;
box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.08);
.top-right-box {
display: flex;
flex-direction: row;
align-items: center;
flex: 1;
justify-content: flex-end;
.top-right-item {
padding: 5rpx 10rpx;
border: 1rpx solid #4c9ee6;
font-size: 24rpx;
color: #4c9ee6;
cursor: pointer;
margin-right: 10rpx;
border-radius: 8rpx;
&.active {
background: #4c9ee6;
color: #ffffff;
}
}
}
.ring-data-box {
padding: 30rpx;
.ring-data-item {
.ring-title {
font-size: 28rpx;
color: #4c9ee6;
}
}
}
.group-box {
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
.other-value {
display: flex;
flex-direction: column;
width: 100%;
.top-value {
display: flex;
justify-content: space-between;
position: relative;
.title {
font-size: 24rpx;
color: rgba(40, 40, 40, 1);
}
.zhexian-icon {
position: absolute;
right: 70%;
image {
width: 28rpx;
height: 28rpx;
}
}
.value {
font-size: 32rpx;
color: rgba(0, 156, 119, 1);
font-weight: 400;
}
}
.bottom-value {
width: 100%;
display: flex;
justify-content: space-between;
font-size: 24rpx;
color: rgba(153, 153, 153, 1);
}
}
}
.group-item {
display: flex;
flex-direction: column;
align-items: center;
width: 199rpx;
justify-content: center;
background: #d7e9e548;
border-radius: 10rpx;
margin: 10rpx 10rpx;
position: relative;
padding: 10rpx 0;
.history-icon {
position: absolute;
right: 0rpx;
top: 0rpx;
}
image {
width: 40rpx;
height: 40rpx;
}
.item-con {
display: flex;
flex-direction: column;
align-items: center;
// margin-left: 15rpx;
width: 100%;
.item-title {
width: 100%;
font-size: 24rpx;
color: #2a2a2a;
margin-top: 10rpx;
text-align: center;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis; //文本超出省略号替
}
.item-num {
font-size: 36rpx;
color: #282828;
font-weight: bold;
max-width: 90%;
text-align: center;
}
.item-unit {
color: #cccccc;
font-size: 16rpx;
padding-left: 10rpx;
}
}
}
}
.slot-content {
padding: 20rpx;
}
.border-bottom {
border-bottom: 4rpx dotted #e5e5e5;
}
.border-right {
border-right: 4rpx dotted #e5e5e5;
}
.padding-top-30 {
padding-top: 30rpx;
}
.padding-bottom-30 {
padding-bottom: 30rpx;
}
.success {
color: green !important;
}
.warning {
color: orange !important;
}
}
</style>