smart_storage_web/src/views/new-screen-zz-pv/components/left-top.vue

<template>
  <div class="left-top-warp">
    <item :title="$t('screen.groupData')">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="top-all-box">
        <div class="value-box">
          <el-tooltip class="item" effect="dark" :content="$t('screen.capacity')" placement="top">
            <div class="title">{{ $t('screen.capacity') }}</div>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="info.capacity |kwhFormat" placement="top">
            <div class="value">{{ info.capacity |kwhFormat }}</div>
          </el-tooltip>
          <div class="unit">{{ info.capacity | kwhUnitFormat }}</div>
        </div>
        <div class="value-box">
          <el-tooltip class="item" effect="dark" :content="$t('screen.stationNum')" placement="top">
            <div class="title">{{ $t('screen.stationNum') }}</div>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="info.stationNumber" placement="top">
            <div class="value">{{ info.stationNumber }}</div>
          </el-tooltip>
          <div class="unit">{{ lang === 'zh'? '个':'' }}</div>
        </div>
        <div class="value-box" style="width:100%">
          <el-tooltip class="item" effect="dark" :content="$t('screen.dailyPowerGeneration')" placement="top">
            <div class="title" style="min-width:170px;max-width:170px;">{{ $t('screen.dailyPowerGeneration') }}</div>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="info.dailyReleaseElec |kwhFormat" placement="top">
            <div class="value" style="min-width:170px;max-width:170px;">{{ info.dailyReleaseElec |kwhFormat }}</div>
          </el-tooltip>
          <div class="unit">{{ info.dailyReleaseElec |kwhUnitFormat }}</div>
        </div>
        <div class="value-box" style="width:100%">
          <el-tooltip class="item" effect="dark" :content="$t('screen.yearlyPowerGeneration')" placement="top">
            <div class="title" style="min-width:170px;max-width:170px;">{{ $t('screen.yearlyPowerGeneration') }}</div>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="info.yearReleaseElec |kwhFormat" placement="top">
            <div class="value" style="min-width:170px;max-width:170px;">{{ info.yearReleaseElec |kwhFormat }}</div>
          </el-tooltip>
          <div class="unit">{{ info.yearReleaseElec |kwhUnitFormat }}</div>
        </div>
        <div class="value-box" style="width:100%">
          <el-tooltip class="item" effect="dark" :content="$t('screen.cumulativePowerGeneration')" placement="top">
            <div class="title" style="min-width:170px;max-width:170px;">{{ $t('screen.cumulativePowerGeneration') }}</div>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="info.totalReleaseElec |kwhFormat" placement="top">
            <div class="value" style="min-width:170px;max-width:170px;">{{ info.totalReleaseElec |kwhFormat }}</div>
          </el-tooltip>
          <div class="unit">{{ info.totalReleaseElec |kwhUnitFormat }}</div>
        </div>
      </div>
    </item>
  </div>
</template>

<script>
import item from './item-warp.vue'

export default {
  components: { item },
  props: {
    info: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      loading: true
    }
  },
  computed: {
    lang() {
      return this.$store.getters.language
    }
  },
  watch: {
    info: {
      handler(val) {
        if (val) {
          this.loading = false
        } else {
          this.loading = true
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
  },
  mounted() {
    this.getData()
  },

  methods: {
    getData() {

    }
  }
}
</script>

<style lang="scss" scoped>
.left-top-warp {
  width: 100%;
  height: 100%;

  .top-all-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    .value-box{
      width: 50%;
      height: 32px;
      background: url(../../../assets/new-screen/top-left-bg.png)no-repeat;
      background-size: 120% 100%;
      display: flex;
      align-items: center;

    .title{
      color: rgba(179, 221, 253, 1);
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 90px;
      max-width: 90px;
      padding-left: 16px;
      white-space: nowrap;
    }
    .value{
      color: rgba(255, 184, 0, 1);
      padding-left: 10px;
      min-width: 70px;
      max-width: 70px;
      text-align: right;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .unit{
      color: rgba(183, 193, 201, 1);
      padding-right: 20px;
      padding-left: 5px;
      font-size: 12px;
    }
    }
  }
}
</style>