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

<!-- 营收分析 -->
<template>
  <view class="revenue">
    <template v-if="type === 'line'">
      <view class="revenue-line">
        <LineChart v-if="hasData" :chartData="chartData" :title="title" :opts="opts" />
        <view class="empty" v-else>
          <u-empty></u-empty>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="revenue-line">
        <ColumnChart v-if="hasData" :chartData="chartData" :title="title" :opts="opts" />
        <view class="empty" v-else>
          <u-empty></u-empty>
        </view>
      </view>
    </template>
    <u-loading-page :loading="loading" loading-text="loading..."></u-loading-page>
  </view>
</template>

<script>
import LineChart from '@/components/lineChart.vue';
import ColumnChart from '@/components/columnChart.vue';
export default {
  components: {
    LineChart,
    ColumnChart
  },
  props: {
    type: {
      type: String,
      default: 'line'
    },
    title: {
      type: String,
      default: ''
    },
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      chartData: {
        categories: [],
        series: []
      },
      hasData: false,
      opts: {
        enableScroll: true,
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          rotateLabel: true,
          scrollShow: true,
          itemCount: 8
        },
        yAxis: {
          showTitle: true,
          splitNumber: 5,
          data: [
            {
              title: '收益(元)',
              titleOffsetY: -3
            }
          ]
        },
        legend: {
          show: true
        },
        dataLabel: false,
        padding: [20, 10, 10, 10],
        extra: {
          column: {
            width: 20
          }
        }
      }
    };
  },
  methods: {
    /**
     * 获取数据
     */
    getData({ reportType, queryDate }) {
      this.hasData = false;
      this.chartData.categories = [];
      this.chartData.series = [];
      this.loading = true;
      this.getParkingData({ reportType, queryDate });
    },
    /**
     * 停车场数据
     */
    getParkingData({ reportType, queryDate }) {
      uni.$u.api.operationalAnalysisApi
        .getParkingRevenueDataApi({
          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>
.revenue {
  background-color: #fff;
  border-radius: 5px;

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