406 lines
12 KiB
Vue
406 lines
12 KiB
Vue
<template>
|
||
<view class="station-box">
|
||
<u-tabs
|
||
ref="uTabs"
|
||
name="name"
|
||
:list="tabList"
|
||
:is-scroll="false"
|
||
:current="currentTab"
|
||
@change="changeTab"
|
||
active-color="#009458"
|
||
></u-tabs>
|
||
|
||
<swiper
|
||
style="height: 340px"
|
||
:current="swiperCurrent"
|
||
@animationfinish="swiperAnimationfinish"
|
||
>
|
||
<swiper-item v-for="(item, index) in tabList" :key="index">
|
||
<div :id="'wrap' + index">
|
||
<view class="detail-box">
|
||
<div class="detail-data-box">
|
||
<div class="detail-title">
|
||
<image :src="gui" />
|
||
<div>{{ index * 2 + 1 }}#PCS</div>
|
||
</div>
|
||
<div class="data-box">
|
||
<div class="data-item">
|
||
<span class="name">{{ $t("homePage.home.workStatus" )}}</span>
|
||
<span
|
||
v-if="statusList[index * 2].workStatus === 0"
|
||
class="error-value"
|
||
>{{
|
||
workStatus(statusList[index * 2].workStatus)
|
||
}}</span
|
||
>
|
||
<span
|
||
v-if="statusList[index * 2].workStatus === 1"
|
||
class="warning-value"
|
||
>{{
|
||
workStatus(statusList[index * 2].workStatus)
|
||
}}</span
|
||
>
|
||
<span
|
||
v-if="statusList[index * 2].workStatus === 2"
|
||
class="error-value"
|
||
>{{
|
||
workStatus(statusList[index * 2].workStatus)
|
||
}}</span
|
||
>
|
||
<span
|
||
v-if="
|
||
statusList[index * 2].workStatus === 3 ||
|
||
statusList[index * 2].workStatus === 4 ||
|
||
statusList[index * 2].workStatus === 5 ||
|
||
statusList[index * 2].workStatus === 6
|
||
"
|
||
class="run-value"
|
||
>{{
|
||
workStatus(statusList[index * 2].workStatus)
|
||
}}</span
|
||
>
|
||
</div>
|
||
<div class="data-item">
|
||
<span class="name">{{ $t("homePage.home.activePower" )}}</span
|
||
><span class="value">{{
|
||
statusList[index * 2].activePowerPCS
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="data-box">
|
||
<div class="data-item">
|
||
<span class="name">{{ $t("homePage.home.reactivePower" )}}</span
|
||
><span class="value">{{
|
||
statusList[index * 2].reactivePowerPCS
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="detail-data-box">
|
||
<div class="detail-title margin-top-10">
|
||
<image :src="battery" />
|
||
<div>
|
||
<span>SOC：</span>
|
||
<span class="value"
|
||
>{{ statusList[index * 2].soc }}%</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="data-box">
|
||
<div class="data-item">
|
||
<span class="name"> {{ $t("homePage.home.totalV" )}} </span
|
||
><span class="value">{{
|
||
statusList[index * 2].bmsTotalVol
|
||
}}</span>
|
||
</div>
|
||
<div class="data-item">
|
||
<span class="name">{{ $t("homePage.home.current" )}}</span
|
||
><span class="value">{{
|
||
statusList[index * 2].bmsTotalCurrent
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="data-box">
|
||
<div class="data-item">
|
||
<span class="name">{{ $t("homePage.home.maxCellVol" )}}</span
|
||
><span class="value">{{
|
||
statusList[index * 2].bmsMaxVol
|
||
}}</span>
|
||
</div>
|
||
<div class="data-item">
|
||
<span class="name">{{ $t("homePage.home.minCellVol" )}}</span
|
||
><span class="value">{{
|
||
statusList[index * 2].bmsMinVol
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
<view class="detail-box">
|
||
<div class="detail-data-box">
|
||
<div class="detail-title">
|
||
<image :src="gui" />
|
||
<div>{{ (index + 1) * 2 }}#PCS</div>
|
||
</div>
|
||
<div class="data-box">
|
||
<div class="data-item">
|
||
<span class="name">{{ $t("homePage.home.workStatus" )}}</span>
|
||
<span
|
||
v-if="statusList[index * 2 + 1].workStatus === 0"
|
||
class="error-value"
|
||
>{{
|
||
workStatus(statusList[index * 2 + 1].workStatus)
|
||
}}</span
|
||
>
|
||
<span
|
||
v-if="statusList[index * 2 + 1].workStatus === 1"
|
||
class="warning-value"
|
||
>{{
|
||
workStatus(statusList[index * 2 + 1].workStatus)
|
||
}}</span
|
||
>
|
||
<span
|
||
v-if="statusList[index * 2 + 1].workStatus === 2"
|
||
class="error-value"
|
||
>{{
|
||
workStatus(statusList[index * 2 + 1].workStatus)
|
||
}}</span
|
||
>
|
||
<span
|
||
v-if="
|
||
statusList[index * 2 + 1].workStatus === 3 ||
|
||
statusList[index * 2 + 1].workStatus === 4 ||
|
||
statusList[index * 2 + 1].workStatus === 5 ||
|
||
statusList[index * 2 + 1].workStatus === 6
|
||
"
|
||
class="run-value"
|
||
>{{
|
||
workStatus(statusList[index * 2 + 1].workStatus)
|
||
}}</span
|
||
>
|
||
</div>
|
||
<div class="data-item">
|
||
<span class="name">{{ $t("homePage.home.activePower" )}}</span
|
||
><span class="value">{{
|
||
statusList[index * 2 + 1].activePowerPCS
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="data-box">
|
||
<div class="data-item">
|
||
<span class="name">{{ $t("homePage.home.reactivePower" )}}</span
|
||
><span class="value">{{
|
||
statusList[index * 2 + 1].reactivePowerPCS
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="detail-data-box">
|
||
<div class="detail-title margin-top-10">
|
||
<image :src="battery" />
|
||
<div>
|
||
<span>SOC：</span
|
||
><span class="value"
|
||
>{{ statusList[index * 2 + 1].soc }}%</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="data-box">
|
||
<div class="data-item">
|
||
<span class="name">{{ $t("homePage.home.totalV" )}}</span
|
||
><span class="value">{{
|
||
statusList[index * 2 + 1].bmsTotalVol
|
||
}}</span>
|
||
</div>
|
||
<div class="data-item">
|
||
<span class="name">{{ $t("homePage.home.current" )}}</span
|
||
><span class="value">{{
|
||
statusList[index * 2 + 1].bmsTotalCurrent
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="data-box">
|
||
<div class="data-item">
|
||
<span class="name">{{ $t("homePage.home.maxCellVol" )}}</span
|
||
><span class="value">{{
|
||
statusList[index * 2 + 1].bmsMaxVol
|
||
}}</span>
|
||
</div>
|
||
<div class="data-item">
|
||
<span class="name">{{ $t("homePage.home.minCellVol" )}}</span
|
||
><span class="value">{{
|
||
statusList[index * 2 + 1].bmsMinVol
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</div>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import battery from "static/aidex/device/battery.png";
|
||
import gui from "static/aidex/device/gui.png";
|
||
|
||
export default {
|
||
data(){
|
||
return {
|
||
statusList: [{}, {}, {}, {}, {}, {}, {}, {}],
|
||
tabList: [
|
||
{ name: "1#箱变", value: 1 },
|
||
{ name: "2#箱变", value: 2 },
|
||
{ name: "3#箱变", value: 3 },
|
||
{ name: "4#箱变", value: 4 },
|
||
],
|
||
currentTab: 0,
|
||
swiperCurrent: 0,
|
||
swiperHeight: 290,
|
||
battery,
|
||
gui,
|
||
stationId:null
|
||
|
||
|
||
}
|
||
},
|
||
computed: {
|
||
currentStation() {
|
||
return this.vuex_currentStation;
|
||
}
|
||
},
|
||
created() {
|
||
this.$nextTick(() => {
|
||
this.setSwiperHeight(); // 动态设置 swiper 的高度
|
||
});
|
||
},
|
||
|
||
methods:{
|
||
getData(val){
|
||
this.stationId = val
|
||
this.$nextTick(() => {
|
||
this.setSwiperHeight(); // 动态设置 swiper 的高度
|
||
});
|
||
this.getJingKeData()
|
||
},
|
||
workStatus(val) {
|
||
if (val === 0) {
|
||
return this.$t("homePage.home.shutdown");
|
||
} else if (val === 1) {
|
||
return this.$t("homePage.home.standby");
|
||
} else if (val === 2) {
|
||
return this.$t("homePage.home.fault");
|
||
} else if (val === 3 || val === 4 || val === 5 || val === 6) {
|
||
return this.$t("homePage.home.run");
|
||
}
|
||
},
|
||
async getJingKeData() {
|
||
let self = this;
|
||
return new Promise((resolve, reject) => {
|
||
self.$u.api.homePageData
|
||
.GetJingKeData({
|
||
stationId: this.stationId,
|
||
})
|
||
.then((res) => {
|
||
this.statusList = res.data;
|
||
resolve();
|
||
})
|
||
.catch((err) => {
|
||
reject("错误");
|
||
});
|
||
});
|
||
},
|
||
toFix(val) {
|
||
if (val) {
|
||
const result = Number(val).toFixed(2);
|
||
return result;
|
||
} else if (val === 0) {
|
||
return 0;
|
||
} else {
|
||
return "";
|
||
}
|
||
},
|
||
changeTab(index) {
|
||
this.currentTab = index;
|
||
this.swiperCurrent = index;
|
||
},
|
||
swiperAnimationfinish(e) {
|
||
let current = e.detail.current;
|
||
this.swiperCurrent = current;
|
||
this.currentTab = current;
|
||
},
|
||
/* 动态设置 swiper 的高度 */
|
||
setSwiperHeight() {
|
||
const element = "#wrap" + this.swiperCurrent;
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.select(element).boundingClientRect();
|
||
query.exec((res) => {
|
||
if (res && res[0]) this.swiperHeight = res[0].height;
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.station-box {
|
||
width: 100%;
|
||
|
||
.swiper-box {
|
||
width: 100%;
|
||
height: 300px;
|
||
}
|
||
|
||
.detail-box {
|
||
width: 100%;
|
||
border-top: 1px solid #93d5c5;
|
||
margin-top: 30rpx;
|
||
background: linear-gradient(
|
||
rgba(0, 156, 119, 0.05),
|
||
rgba(0, 156, 119, 0)
|
||
);
|
||
margin-bottom: 34rpx;
|
||
padding-top: 12rpx;
|
||
padding-left: 20rpx;
|
||
padding-right: 20rpx;
|
||
|
||
.detail-title {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
color: #666;
|
||
font-size: 26rpx;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.value {
|
||
color: #ffb800;
|
||
}
|
||
}
|
||
|
||
.detail-data-box {
|
||
width: 100%;
|
||
}
|
||
|
||
.data-box {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-top: 10rpx;
|
||
|
||
.data-item {
|
||
width: 50%;
|
||
color: #666;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
.name {
|
||
width: 210rpx;
|
||
text-align: end;
|
||
display: block;
|
||
}
|
||
|
||
.value {
|
||
color: #ffb800;
|
||
}
|
||
.run-value {
|
||
color: green;
|
||
}
|
||
.error-value {
|
||
color: red;
|
||
}
|
||
.warning-value {
|
||
color: #ffb800;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |