parking_operation/pages/operationalAnalysis/roadModel/components/incomeAnalysis.vue

<!-- 收入分析 -->
<template>
  <view class="revenue">
    <view class="revenue-search">
      <view class="revenue-search-item" @click="incomeTypePicker = true">
        <u--input
          placeholder="请输入内容"
          v-model="searchContent.text"
          suffixIcon="arrow-down"
          :readonly="true"
        />
      </view>
    </view>
    <view class="revenue-line">
      <ColumnChart
        v-if="chartData.series[0].data.length"
        :chartData="chartData"
        :title="title"
        :opts="opts"
      />
      <view class="empty" v-else>
        <u-empty></u-empty>
      </view>
    </view>
    <u-picker
      :show="incomeTypePicker"
      :columns="dictList"
      @confirm="incomeTypeConfirm"
      @cancel="incomeTypePicker = false"
    />
    <u-loading-page :loading="loading" loading-text="loading..." />
  </view>
</template>

<script>
import ColumnChart from '@/components/columnChart.vue';
export default {
  components: {
    ColumnChart
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    opts: {
      type: Object,
      default: () => {
        return {
          enableScroll: true,
          xAxis: {
            rotateLabel: false,
            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
            }
          }
        };
      }
    }
  },
  data() {
    return {
      chartData: {
        categories: [[]],
        series: [
          {
            name: '路段',
            data: []
          }
        ]
      },
      searchContent: {
        text: '',
        value: ''
      },
      dictList: [[]],
      incomeTypePicker: false,
      reportType: '',
      queryDate: '',
      loading: false
    };
  },
  methods: {
    getData({ reportType, queryDate }) {
      this.reportType = reportType;
      this.queryDate = queryDate;
      this.getDict();
    },
    getDict() {
      this.loading = true;
      uni.$u.api.getDictApi({ type: 'income_type' }).then((res) => {
        if (res.code === 200) {
          let list = res.data.map((item) => {
            return {
              text: item.dictLabel,
              value: item.dictValue
            };
          });
          this.dictList = [list];
          if (!this.searchContent.value) {
            this.searchContent = this.dictList[0][0];
          }
          this.getIncomeData();
        }
      });
    },
    getIncomeData() {
      this.loading = true;
      this.chartData.categories = [];
      this.chartData.series[0].data = [];
      this.chartData.series[0].name = this.searchContent.text;
      uni.$u.api.operationalAnalysisApi
        .getIncomeDataApi({
          reportType: this.reportType,
          queryDate: this.queryDate,
          incomeType: this.searchContent.value
        })
        .then((res) => {
          if (res.code === 200) {
            if (res.data.itemList && res.data.itemList.length) {
              this.chartData.categories = res.data.itemList.map((item) => {
                return item.statisTime;
              });
              this.chartData.series[0].data = res.data.itemList.map((item) => {
                return item.amt;
              });
            }
          }
          this.loading = false;
        });
    },
    incomeTypeConfirm(e) {
      this.searchContent = e.value[0];
      this.getIncomeData();
      this.incomeTypePicker = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.revenue {
  background-color: #fff;
  border-radius: 5px;
  &-search {
    margin-bottom: 12px;
    padding: 19px 15px 0 15px;
    display: flex;
    &-item {
      width: 48%;
      margin-right: 2%;
      &-btn {
        width: 50%;
        height: 38px;
      }
    }
  }
}
.empty {
  padding: 15px;
}
</style>