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

<!-- 停车场分析 -->
<template>
  <view class="section">
    <!-- 营收趋势分析 -->
    <view class="section-part">
      <view class="section-part-title">
        <text>|</text>营收趋势分析
      </view>
      <view class="section-part-content">
        <ColumnChart
          v-if="revenueTrendsData.series[0].data.length"
          :chartData="revenueTrendsData"
          :title="title"
          :opts="opts1"
        />
        <view class="empty" v-else>
          <u-empty></u-empty>
        </view>
      </view>
    </view>
    <view class="section-part">
      <view class="section-part-title">
        <text>|</text>车流量统计
      </view>
      <view class="section-part-content">
        <ColumnChart
          v-if="trafficFlowData.series[0].data.length"
          :chartData="trafficFlowData"
          :title="title"
          :opts="opts2"
        />
        <view class="empty" v-else>
          <u-empty></u-empty>
        </view>
      </view>
    </view>
    <u-loading-page :loading="loading" loading-text="loading..."></u-loading-page>
  </view>
</template>

<script>
import ColumnChart from '@/components/columnChart.vue';
export default {
  components: {
    ColumnChart
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      opts1: {
        enableScroll: true,
        xAxis: {
          rotateLabel: true,
          scrollShow: true,
          itemCount: 8
        },
        yAxis: {
          showTitle: true,
          splitNumber: 5,
          data: [
            {
              title: '收益(元)',
              titleOffsetY: -3
            }
          ]
        },
        legend: {
          show: false
        },
        dataLabel: false,
        padding: [20, 0, 10, 0],
        extra: {
          column: {
            width: 20
          }
        }
      },
      opts2: {
        enableScroll: true,
        xAxis: {
          rotateLabel: true,
          scrollShow: true,
          itemCount: 8
        },
        yAxis: {
          showTitle: true,
          splitNumber: 5,
          data: [
            {
              title: '车辆(辆)',
              titleOffsetY: 0,
              titleOffsetX: 10
            }
          ]
        },
        legend: {
          show: false
        },
        dataLabel: false,
        padding: [10, 0, 10, 0],
        extra: {
          column: {
            width: 20
          }
        }
      },
      revenueTrendsData: {
        categories: [],
        series: [
          {
            name: '',
            data: []
          }
        ]
      },
      trafficFlowData: {
        categories: [],
        series: [
          {
            name: '',
            data: []
          }
        ]
      }
    };
  },
  methods: {
    getData({ reportType, queryDate }) {
      this.reportType = reportType;
      this.queryDate = queryDate;
      this.getRevenueTrendsData();
      this.getRoadTrafficFlowData();
    },
    getRevenueTrendsData() {
      this.loading = true;
      uni.$u.api.operationalAnalysisApi
        .getParkingLotRevenueAmountApi({
          reportType: this.reportType,
          queryDate: this.queryDate
        })
        .then((res) => {
          if (res.code === 200) {
            if (res.data.itemList && res.data.itemList.length) {
              this.revenueTrendsData.categories = res.data.itemList.map(
                (item) => {
                  return item.roadName;
                }
              );
              this.revenueTrendsData.series[0].data = res.data.itemList.map(
                (item) => {
                  return item.amt;
                }
              );
            } else {
              this.revenueTrendsData.categories = [];
              this.revenueTrendsData.series[0].data = [];
            }
          }
          this.loading = false;
        });
    },
    getRoadTrafficFlowData() {
      this.loading = true;
      uni.$u.api.operationalAnalysisApi
        .getParkingLotTrafficVolumeApi({
          reportType: this.reportType,
          queryDate: this.queryDate
        })
        .then((res) => {
          if (res.code === 200) {
            if (res.data.itemList && res.data.itemList.length) {
              this.trafficFlowData.categories = res.data.itemList.map(
                (item) => {
                  return item.roadName;
                }
              );
              this.trafficFlowData.series[0].data = res.data.itemList.map(
                (item) => {
                  return item.vehicleCount;
                }
              );
            } else {
              this.trafficFlowData.categories = [];
              this.trafficFlowData.series[0].data = [];
            }
          }
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.section {
  &-part {
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;

    &-title {
      padding: 15px;

      text {
        color: #f00;
        margin-right: 5px;
      }
    }
  }
  .empty {
    padding: 15px;
  }
}
</style>