209 lines
6.1 KiB
Vue
209 lines
6.1 KiB
Vue
<template>
|
|
<view class="warp">
|
|
<zero-loading position="absolute" v-if="loading"></zero-loading>
|
|
<template v-else>
|
|
|
|
<view class="group-item ">
|
|
<view class="item-icon">
|
|
<image src="/static/aidex/images/yxts.png"></image>
|
|
</view>
|
|
<view class="item-con">
|
|
<view class="item-num">{{ panelData.operationDays }}
|
|
</view>
|
|
<view class="item-title">{{ this.$t('homePage.home.safeDaysUnit') }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="group-item ">
|
|
<view class="item-icon">
|
|
<image src="/static/aidex/images/zjrl.png"></image>
|
|
</view>
|
|
<view class="item-con">
|
|
<view class="item-num">{{ panelData.totalCapacity | kwhFormat }}
|
|
|
|
</view>
|
|
<view class="item-title">{{ this.$t('homePage.home.totalCapacity') }}({{ panelData.totalCapacity | kwhUnitFormat }})</view>
|
|
</view>
|
|
</view>
|
|
<view class="group-item">
|
|
<view class="item-icon">
|
|
<image src="/static/aidex/images/xtzhl.png"></image>
|
|
</view>
|
|
<view class="item-con">
|
|
<view class="item-num">{{ (panelData.systemEfficiency * 100).toFixed(2)
|
|
}}</view>
|
|
<view class="item-title">{{ this.$t('homePage.home.systemConversionEfficiency') }}(%)</view>
|
|
</view>
|
|
</view>
|
|
<template v-if="postionDataList.length">
|
|
<view class="group-item " v-for="item in postionDataList">
|
|
<view class="item-icon">
|
|
<image src="/static/aidex/images/dqgl.png"></image>
|
|
</view>
|
|
<view class="item-con">
|
|
<view class="item-num">{{ item.value }}</view>
|
|
<view class="item-title">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<view class="group-item ">
|
|
<view class="item-icon">
|
|
<image src="/static/aidex/images/dqgl.png"></image>
|
|
</view>
|
|
<view class="item-con">
|
|
<view class="item-num">{{ panelData.currentPower | kWFormat
|
|
}}</view>
|
|
<view class="item-title">{{ this.$t('homePage.home.currentPower') }}({{ panelData.currentPower | kwUnitFormat }})</view>
|
|
</view>
|
|
</view>
|
|
<view class="group-item " @click="showHistory($t('homePage.home.totalCharge'), 'totalCharge', 'bms', 'kWh', '')">
|
|
<view class="history-icon">
|
|
<image src="/static/aidex/images/history-icon.png"></image>
|
|
</view>
|
|
<view class="item-icon">
|
|
<image src="/static/aidex/images/zcdl.png"></image>
|
|
</view>
|
|
<view class="item-con">
|
|
<view class="item-num">{{ panelData.totalChargeElec | kwhFormat
|
|
}}</view>
|
|
<view class="item-title">{{ this.$t('homePage.home.totalCharge') }}({{ panelData.totalChargeElec | kwhUnitFormat }})</view>
|
|
</view>
|
|
</view>
|
|
<view class="group-item" @click="showHistory($t('homePage.home.totalDischarge'), 'totalDischarge', 'bms', 'kWh', '')">
|
|
<view class="history-icon">
|
|
<image src="/static/aidex/images/history-icon.png"></image>
|
|
</view>
|
|
<view class="item-icon">
|
|
<image src="/static/aidex/images/zfdl.png"></image>
|
|
</view>
|
|
<view class="item-con">
|
|
<view class="item-num">{{ panelData.totalDischargeElec | kwhFormat
|
|
}}</view>
|
|
<view class="item-title">{{ this.$t('homePage.home.totalDischarge') }}({{ panelData.totalDischargeElec | 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.dailyChargeElec | kwhFormat
|
|
}}</view>
|
|
<view class="item-title">{{ this.$t('homePage.home.dailyCharge') }}({{ panelData.dailyChargeElec | kwhUnitFormat }})</view>
|
|
</view>
|
|
</view>
|
|
<view class="group-item ">
|
|
<view class="item-icon">
|
|
<image src="/static/aidex/images/rfdl.png"></image>
|
|
</view>
|
|
<view class="item-con">
|
|
<view class="item-num">{{ panelData.dailyDischargeElec | kwhFormat
|
|
}}</view>
|
|
<view class="item-title">{{ this.$t('homePage.home.dailyDischarge') }}({{ panelData.dailyDischargeElec | kwhUnitFormat }})</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<historyModal :is-show.sync="histroyShow" :title="chartTitle" :params="hisParams" />
|
|
</template>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import historyModal from '@/components/history-modal/index.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
panelData: {
|
|
operationDays: 0,
|
|
totalCapacity: 0,
|
|
systemEfficiency: 0,
|
|
currentPower: 0,
|
|
totalChargeElec: 0,
|
|
totalDischargeElec: 0,
|
|
dailyChargeElec: 0,
|
|
dailyDischargeElec: 0
|
|
},
|
|
stationId: null,
|
|
loading: false,
|
|
histroyShow: false,
|
|
chartTitle: '',
|
|
hisParams: {},
|
|
postionDataList: []
|
|
}
|
|
},
|
|
components: {
|
|
historyModal
|
|
},
|
|
computed: {
|
|
currentStation() {
|
|
return this.vuex_currentStation;
|
|
},
|
|
},
|
|
watch: {
|
|
currentStation: {
|
|
handler(val) {
|
|
if (val && val.id) {
|
|
this.stationId = val.id
|
|
this.GetPcsTotalData()
|
|
this.GetPositionStationData()
|
|
}
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
},
|
|
},
|
|
methods: {
|
|
showHistory(name, modelCol, modelType, unit) {
|
|
this.hisParams = {
|
|
modelCol: modelCol,
|
|
modelType: modelType,
|
|
unit: unit
|
|
}
|
|
this.chartTitle = name
|
|
this.histroyShow = true
|
|
},
|
|
GetPositionStationData() {
|
|
this.loading = true
|
|
let self = this;
|
|
return new Promise((resolve, reject) => {
|
|
self.$u.api.station
|
|
.getStationPostionData({
|
|
stationId: this.stationId,
|
|
pageLocation: 'fire-screen-topLeft'
|
|
})
|
|
.then((res) => {
|
|
this.loading = false
|
|
this.postionDataList = res.data
|
|
resolve(res);
|
|
})
|
|
.catch((err) => {
|
|
reject("错误");
|
|
});
|
|
});
|
|
},
|
|
async GetPcsTotalData() {
|
|
this.loading = true
|
|
let self = this;
|
|
return new Promise((resolve, reject) => {
|
|
self.$u.api.homePageData
|
|
.GetPcsTotalData({
|
|
stationId: this.stationId,
|
|
})
|
|
.then((res) => {
|
|
this.loading = false
|
|
this.panelData = res.data;
|
|
resolve(res);
|
|
})
|
|
.catch((err) => {
|
|
reject("错误");
|
|
});
|
|
});
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import url(./style/index.css);
|
|
</style> |