初次提交
This commit is contained in:
406
pages/tabbar/components/topology/jingke.vue
Normal file
406
pages/tabbar/components/topology/jingke.vue
Normal file
@ -0,0 +1,406 @@
|
||||
<template>
|
||||
<view class="station-box">
|
||||
<u-tabs
|
||||
ref="uTabs"
|
||||
name="name"
|
||||
:list="tabList"
|
||||
:is-scroll="false"
|
||||
:current="currentTab"
|
||||
@change="changeTab"
|
||||
active-color="#009C77"
|
||||
></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>
|
||||
Reference in New Issue
Block a user