parking_LargeScreen/src/components/Receivables/analyse.vue

<!--
 * @Description: 近30日实收分析
 * @Author: wangcc
 * @Date: 2023-01-11 15:28:30
 * @LastEditors: wangcc
 * @LastEditTime: 2023-01-29 13:57:40
 * @FilePath: \parking_LargeScreen\src\components\Receivables\analyse.vue
 * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
-->

<template>
  <div class="PercenTage-box">
    <div class="PieChart">
      <div class="rankTitle">
        <h3>近30日实收分析</h3>
      </div>
      <div class="pieChart-box">
        <bar-charts :option="echartsData" v-if="hackReset"></bar-charts>
      </div>
    </div>
  </div>
</template>

<script>
import barCharts from '@/components/charts/barCharts.vue';
import { income } from '@/api/http';
export default {
  name: 'analyse',
  components: {
    barCharts
  },
  data() {
    return {
      echartsData: {
        barRData: [],
        xData: [],
        yData: []
      },
      hackReset: false,
      searchFrom: {
        isRoad: '1'
      },
      setTime: ''
    };
  },
  created() {
    this.getIncome();
  },

  watch: {
    '$store.state.addr.isRoad': {
      handler(val) {
        this.searchFrom.isRoad = val;
        this.getIncome();
      }
    }
  },
  mounted() {
    let _this = this;
    this.setTime = setInterval(function () {
      _this.getIncome();
    }, 30000);
  },

  methods: {
    clearTime() {
      clearInterval(this.setTime);
    },
    getTimeAnalysis() {
      this.echartsData.xData = this.echartsData.barRData.map((item) => {
        return item.time;
      });
      this.echartsData.yData = this.echartsData.barRData.map((item) => {
        return item.num;
      });
    },
    getIncome() {
      this.hackReset = false;
      income(this.searchFrom).then((res) => {
        if (res.code == 200) {
          this.hackReset = true;
          this.echartsData.barRData = res.data.map((item) => {
            let data = {};
            data.time = item.payTime;
            data.num = item.realAmount;
            return data;
          });
          this.echartsData.xData = this.echartsData.barRData.map((item) => {
            return item.time;
          });
          this.echartsData.yData = this.echartsData.barRData.map((item) => {
            return item.num;
          });
        }
      });
    }
  }
};
</script>

<style  lang='scss' scoped>
.PercenTage-box {
  position: absolute;
  left: 21px;
  right: 21px;
  bottom: 20px;
  overflow: hidden;
  z-index: 1001;
  .PieChart {
    width: 100%;
    background: linear-gradient(90deg, #293446 0%, rgba(41, 52, 70, 0.2) 100%);
    backdrop-filter: blur(10px);
    overflow: hidden;
    padding: 18px 0;
    .rankTitle {
      text-align: left;
      padding-left: 20px;
      font-size: 16px;
      color: #ffffff;
      /* line-height: 22px; */
      margin-bottom: 12px;
      display: flex;
      height: 22px;
      align-items: center;
    }
    .rankTitle::before {
      content: '';
      width: 16px;
      height: 15px;
      display: inline-block;
      background-image: url('@/assets/images/check.png');
      background-size: 100% 100%;
      margin-right: 10px;
    }
    .pieChart-box {
      padding: 0 20px;
      height: 165px;
    }
  }
}
</style>