smart_storage_app/pages/tabbar/components/stationData/zzhb.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>
      <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>
      <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.cumulativePowerGeneration | kwhFormat
          }}</view>
          <view class="item-title">{{ this.$t('homePage.home.dayPhotovoltaic') }}({{ panelData.cumulativePowerGeneration | kwhUnitFormat }})</view>
        </view>
      </view>

      <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: {}
    }
  },
  components: { historyModal },
  computed: {
    currentStation() {
      return this.vuex_currentStation;
    },
  },
  watch: {
    currentStation: {
      handler(val) {
        if (val && val.id) {
          this.stationId = val.id
          this.loading = true
          Promise.all([this.GetZZHBPowerGeneration(), this.GetPcsTotalData()]).finally((res) => {
            this.loading = false
          })
        }
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    showHistory(name, modelCol, modelType, unit) {
      this.hisParams = {
        modelCol: modelCol,
        modelType: modelType,
        unit: unit
      }
      this.chartTitle = name
      this.histroyShow = true
    },
    async GetZZHBPowerGeneration(){
   
      let self = this;
      return new Promise((resolve, reject) => {
        self.$u.api.homePageData
          .GetZZHBPv({
            stationId: this.stationId,
          })
          .then((res) => {
          
            this.panelData = Object.assign(this.panelData, 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 = Object.assign(this.panelData, res.data);
            resolve(res);
          })
          .catch((err) => {
            reject("错误");
          });
      });
    },
  },
}
</script>
<style lang="scss" scoped>
@import url(./style/index.css);
</style>