smart_storage_app/pages/tabbar/components/topology/jingke.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>