yos_web/src/views/homePage/modules/storage.vue

<template>
<el-card shadow="none" :body-style="{height:'112px'}">
  <div class="flex-align-center flex-between height-full">
    <div v-if="data" style="align-self:stretch">
      <div class="flex-end height-full">
        <div style="flex:1;width:100%">
          <p class="info" style="margin-bottom:10px">云存储已使用</p>
          <!-- <p class="num">{{data.used > 1073741824?(data.used / Math.pow(1024,3)).toFixed(2)+'GB':data.used > 1048576?(data.used / Math.pow(1024,2)).toFixed(2)+'MB':data.used > 1024?(data.used / Math.pow(1024,1)).toFixed(2)+'KB':data.used+'B'}}</p> -->
          <div class="flex-align-center">
            <VueCountUp class="data-num" :start-value="0" :end-value="data.used > 1073741824?(data.used / Math.pow(1024,3)).toFixed(2):data.used > 1048576?(data.used / Math.pow(1024,2)).toFixed(2):data.used > 1024?(data.used / Math.pow(1024,1)).toFixed(2):data.used" />
            <p class="data-num">{{data.used > 1073741824?'GB':data.used > 1048576?'MB':data.used > 1024?'KB':'B'}}</p>
          </div>
        </div>
        <p class="info" style="width:100%">云存储总容量&emsp;<span style="color:#666">{{data.total}}GB</span></p>
      </div>
    </div>
    <div id="storage"></div>
  </div>
</el-card>
</template>

<script>
import { Pie } from '@antv/g2plot';
import VueCountUp from 'vue-countupjs'

export default {
  props:['data'],
  data () {
    return  {
      piePlot () {},
    }
  },
  components:{
    VueCountUp
  },
  methods:{
    renderBar () {
      this.piePlot = new Pie('storage', {
        appendPadding: 10,
        data:[],
        width:100,
        height:100,
        tooltip: {
          formatter: (datum) => {
            let value = datum.num > 1073741824?(datum.num / Math.pow(1024,3)).toFixed(2)+'GB':datum.num > 1048576?(datum.num / Math.pow(1024,2)).toFixed(2)+'MB':datum.num > 1024?(datum.num / Math.pow(1024,1)).toFixed(2)+'KB':datum.num+'B'
            return { name: datum.type, value: value, rate: 20 }
          },
        },
        label:{
          type: 'inner',
          content:''
        },
        legend:false,
        angleField: 'num',
        colorField: 'type',
        color: ['#5D76E4', '#51C186'],
        radius: 0.9,
        interactions: [{ type: 'element-active' }],
      });
      this.piePlot.render();
    }
  },
  mounted() {
    this.renderBar()
  }
}

</script>
<style>
.el-card__header {
  padding: 10px 16px !important;
}
</style>
<style scoped>
.flex-end {
  display: flex;
  flex-direction:column;
  justify-content: space-between;
}
.info{
  font-size: 14px;
  text-align:left;
}
.height-full{
  height: 100%;
}
.data-num{
  font-size: 30px;
  font-family: HelveticaNeue-, HelveticaNeue;
  font-weight: normal;
  color: #333333;
  line-height: 38px;
  text-align: left;
}
</style>