cyzh-park/src/views/dashboard/parkingmng/comps/parking-statistics.vue

<template>
  <div class="page animate__animated animate__faster animate__fadeInRight">
    <more title="泊车统计" nomore></more>

    <div class="full center" style="flex-direction: column;">
      <dv-active-ring-chart :config="config" style="width:260px;height:260px" />

      <div class="static">
        <div class="data" v-for="(item,index) in dataList" :key="index">
          <div>{{item.label}}</div>
          <div>{{item.value}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import more from "@/components/more.vue"
  import {
    statistics
  } from "@/api/estate/parkingspace.js"
  export default {
    components: {
      more
    },
    data() {
      return {
        dataList: [{
            label: '总泊车位',
            value: 0
          },
          {
            label: '已泊车位',
            value: 0
          },
          {
            label: '剩余车位',
            value: 0
          }
        ],
        config: {}
      }
    },
    created() {
      this.getStat()
    },
    methods: {
      async getStat() {
        let data = (await statistics()).data.data
        if (this.$isNotEmpty(data)) {
          this.dataList[0].value = data.totalCount
          this.dataList[1].value = data.isUseCount
          this.dataList[2].value = data.notUseCount
          this.config = {
            data: [{
              name: '剩余车位',
              value: data.notUseCount
            }, {
              name: '已泊车位',
              value: data.isUseCount
            }],
            digitalFlopStyle: {
              fontSize: 16,
              fill: '#333'
            },
            lineWidth: 30,
            color: ['#4da9ff', '#ff7070']
          }
          console.log(this.config);
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .full {
    width: 100%;
    height: 100%;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .page {
    background-color: #FFFFFF;
    padding: 1.2rem;
    box-sizing: border-box;
  }

  .static {
    width: 65%;
    font-size: 1rem;
    font-weight: 400;
    margin-top: -1rem;

    .data {
      padding-bottom: 0.625rem;
      display: flex;
      justify-content: space-between;

      div:last-child {
        font-size: 1rem;
        font-weight: 500;
      }
    }
  }

  /deep/ .dv-active-ring-chart .active-ring-info .active-ring-name {
    width: 100px;
    height: 30px;
    color: #333;
    text-align: center;
    vertical-align: middle;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
</style>