parking_operation/pages/operationalAnalysis/parkModel/components/arrearsAnalysis.vue

<!-- 欠费分析 -->
<template>
  <view class="arrears">
    <view class="arrears-line">
      <LineChart v-if="hasData" :chartData="chartData" :title="title" :opts="opts" />
      <view class="empty" v-else>
        <u-empty></u-empty>
      </view>
    </view>
    <u-loading-page :loading="loading" loading-text="loading..."></u-loading-page>
  </view>
</template>

<script>
import LineChart from '@/components/lineChart.vue';
export default {
  components: {
    LineChart
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    opts: {
      type: Object,
      default: () => {
        return {
          enableScroll: true,
          xAxis: {
            rotateLabel: true,
            scrollShow: true,
            itemCount: 8
          },
          yAxis: {
            showTitle: true,
            splitNumber: 5,
            data: [
              {
                title: '元',
                titleOffsetY: -3
              }
            ]
          },
          legend: {
            show: true
          },
          dataLabel: false,
          padding: [20, 0, 10, 0],
          extra: {
            column: {
              width: 20
            }
          }
        };
      }
    }
  },
  data() {
    return {
      chartData: {
        categories: [],
        series: []
      },
      hasData: false,
      loading: false
    };
  },
  methods: {
    getData({ reportType, queryDate }) {
      this.hasData = false;
      this.chartData.categories = [];
      this.chartData.series = [];
      this.getParkingData({
        reportType,
        queryDate
      });
    },
    getParkingData({ reportType, queryDate }) {
      this.loading = true;
      uni.$u.api.operationalAnalysisApi
        .getParkingArrearsDataApi({
          reportType,
          queryDate
        })
        .then((res) => {
          if (res.code === 200) {
            if (res.data.itemList && res.data.itemList.length) {
              this.chartData.series[0] = {
                name: '停车场',
                data: []
              };
              this.chartData.series[0].data = res.data.itemList.map((item) => {
                return item.amt;
              });
              if (!this.chartData.categories.length) {
                this.chartData.categories = res.data.itemList.map((item) => {
                  return item.statisTime;
                });
              }
              this.hasData = true;
            } else {
              this.hasData = false;
            }
          }
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.arrears {
  background-color: #fff;
  border-radius: 5px;

  .empty {
    padding: 15px;
  }
}
</style>