parking_operation/pages/statisticalReport/roadModel/index.vue

<!--
 * @Description: 统计报表 => 路段模块
 * @Author: 空白格
 * @Date: 2022-08-03 09:26:29
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-04 11:42:40
 * @FilePath: \parking_operation\pages\statisticalReport\roadModel\index.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved. 
-->
<!-- 统计报表 -->
<template>
  <view class="report">
    <view class="report-header">
      <view class="report-header-left">
        <template v-if="templateKey === 'reallyReceivable'">
          <view class="tab">
            <view
              class="tab-item"
              v-for="(item, index) in tabList"
              :key="index"
              :class="{'active': tabCur === item.value}"
              @click="tabClick(item)"
            >{{ item.label }}</view>
          </view>
        </template>
        <template v-else>
          <uni-datetime-picker v-model="curDate" type="daterange" @change="dateChange">
            <u--text text="日期查询" color="#1767F2"></u--text>
          </uni-datetime-picker>
        </template>
      </view>
      <view class="report-header-right">{{ currentDate }}</view>
    </view>
    <view class="report-content">
      <template v-if="templateKey === 'sectionBerth'">
        <SectionBerth ref="sectionBerth" />
      </template>
      <template v-else-if="templateKey === 'arrearsReport'">
        <ArrearsReport ref="arrearsReport" />
      </template>
      <template v-else-if="templateKey === 'revenueReport'">
        <RevenueReport ref="revenueReport" />
      </template>
      <template v-else-if="templateKey === 'reallyReceivable'">
        <ReallyReceivable ref="reallyReceivable" />
      </template>
      <template v-else-if="templateKey === 'recoveryReport'">
        <RecoveryReport ref="recoveryReport" />
      </template>
    </view>
    <!-- 年 -->
    <u-picker
      :show="yearPicker"
      :columns="yearList"
      :defaultIndex="defaultYear"
      @confirm="yearConfirm"
      @cancel="yearPicker = false"
    />
    <!-- 月 -->
    <u-picker
      :show="monthPicker"
      :columns="monthList"
      :defaultIndex="defaultMonth"
      @confirm="monthConfirm"
      @cancel="monthPicker = false"
    />
    <!-- 日 -->
    <u-picker
      :show="dayPicker"
      :columns="dayList"
      :defaultIndex="defaultDay"
      @confirm="dayConfirm"
      @cancel="dayPicker = false"
    />
  </view>
</template>

<script>
import SectionBerth from './components/sectionBerth.vue';
import ArrearsReport from './components/arrearsReport.vue';
import RevenueReport from './components/revenueReport.vue';
import ReallyReceivable from './components/reallyReceivable.vue';
import RecoveryReport from './components/recoveryReport.vue';
export default {
  components: {
    SectionBerth,
    ArrearsReport,
    RevenueReport,
    ReallyReceivable,
    RecoveryReport
  },
  data() {
    return {
      tabList: [
        {
          label: '年',
          value: 2
        },
        {
          label: '月',
          value: 1
        },
        {
          label: '日',
          value: 0
        }
      ],
      templateKey: '',
      // 日期
      curDate: [],
      tabCur: 2,
      // 参数
      params: {
        reportType: 2,
        queryDate: ''
      },
      title: '',
      currentDate: '',
      // 年
      yearPicker: false,
      yearList: this.getYearList(),
      defaultYear: [4],
      currentYear: '',
      yearObj: {},
      // 月
      monthPicker: false,
      monthList: this.getMonthList(),
      defaultMonth: [],
      currentMonth: '01',
      monthObj: {},
      // 日
      dayPicker: false,
      dayList: this.getDayList(),
      defaultDay: [],
      currentDay: '01',
      dayObj: {}
    };
  },
  watch: {
    title(val) {
      if (val) {
        if (typeof val === 'object') {
          if (val.length) {
            let startDateList = val[0].split('-'),
              endDateList = val[1].split('-');
            this.currentDate = `${Number(startDateList[0])}年${Number(
              startDateList[1]
            )}月${Number(startDateList[2])}日至${Number(
              endDateList[0]
            )}年${Number(endDateList[1])}月${Number(endDateList[2])}日`;
          }
        } else {
          const dateArr = val.split('-');
          switch (this.tabCur) {
            case 0:
              this.currentDate = `${Number(dateArr[0])}年${Number(
                dateArr[1]
              )}月${Number(dateArr[2])}日`;
              break;
            case 1:
              this.currentDate = `${Number(dateArr[0])}年${Number(
                dateArr[1]
              )}月`;
              break;
            case 2:
              this.currentDate = `${Number(dateArr[0])}年`;
              break;
            default:
              this.currentDate = '--';
              break;
          }
        }
      }
    }
  },
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: options.title || '路段报表'
    });
    this.templateKey = options.key;
  },
  onShow() {
    if (
      this.templateKey === 'revenueReport' ||
      this.templateKey === 'reallyReceivable'
    ) {
      let today = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd');
      this.curDate = [today, today];
    } else {
      this.curDate = [];
    }
    this.$nextTick(() => {
      if (this.templateKey === 'reallyReceivable') {
        this.currentYear = this.yearList[0][4].value;
        this.yearObj = this.yearList[0][4];
        this.title = this.yearList[0][4].text;
        this.params.queryDate = `${this.currentYear}-${this.currentMonth}-${this.currentDay}`;
        this.$refs[this.templateKey].getData(this.params);
      } else {
        this.title = this.curDate;
        this.$refs[this.templateKey].getData(this.curDate);
      }
    });
  },
  methods: {
    getYearList() {
      const date = new Date();
      const year = date.getFullYear();
      const list = [[]];
      for (let i = year - 4; i < year + 1; i++) {
        const obj = {
          text: String(i),
          value: String(i)
        };
        list[0].push(obj);
      }
      return list;
    },
    getMonthList() {
      const date = new Date();
      const month = date.getMonth();
      const list = [[]];
      for (let i = 1; i < 13; i++) {
        const obj = {
          text: String(i),
          value: String(i)
        };
        if (i < 10) {
          obj.text = '0' + i;
          obj.value = '0' + i;
        }
        list[0].push(obj);
      }
      setTimeout(() => {
        this.defaultMonth = [0];
      }, 1000);
      return list;
    },
    getDayList() {
      const date = new Date();
      const year = date.getFullYear();
      let month = date.getMonth();
      if (this.monthObj) {
        month = parseInt(this.monthObj.value);
        month = String(month);
      }
      const day = date.getDate();
      const dayLen = new Date(year, month, 0).getDate();
      const list = [[]];
      for (let i = 1; i < dayLen + 1; i++) {
        const obj = {
          text: String(i),
          value: String(i)
        };
        if (i < 10) {
          obj.text = '0' + i;
          obj.value = '0' + i;
        }
        list[0].push(obj);
      }
      setTimeout(() => {
        this.defaultDay = [0];
      }, 1000);
      return list;
    },
    tabClick(item) {
      this.tabCur = item.value;
      switch (item.value) {
        case 2:
          this.yearPicker = true;
          break;
        case 1:
          this.monthPicker = true;
          break;
        case 0:
          this.dayPicker = true;
          break;
      }
      this.params.reportType = this.tabCur;
    },
    dateChange(e) {
      this.curDate = e;
      this.title = this.curDate;
      this.$refs[this.templateKey].getData(this.curDate);
    },
    yearConfirm(e) {
      this.defaultYear = [e.indexs[0]];
      this.currentYear = e.value[0].value;
      this.title = e.value[0].text;
      this.yearObj = e.value[0];
      this.params.queryDate = `${this.currentYear}-${this.currentMonth}-${this.currentDay}`;
      this.$refs[this.templateKey].getData(this.params);
      this.yearPicker = false;
    },
    monthConfirm(e) {
      this.defaultMonth = [e.indexs[0]];
      this.currentMonth = e.value[0].value;
      this.monthObj = e.value[0];
      this.title = `${this.yearObj.text}-${this.monthObj.text}`;
      this.params.queryDate = `${this.currentYear}-${this.currentMonth}-${this.currentDay}`;
      this.$refs[this.templateKey].getData(this.params);
      this.monthPicker = false;
      this.dayList = this.getDayList();
    },
    dayConfirm(e) {
      this.defaultDay = [e.indexs[0]];
      this.title = e.value[0].text;
      this.currentDay = e.value[0].value;
      this.dayObj = e.value[0];
      this.title = `${this.yearObj.text}-${this.monthObj.text}-${this.dayObj.text}`;
      this.params.queryDate = `${this.currentYear}-${this.currentMonth}-${this.currentDay}`;
      this.$refs[this.templateKey].getData(this.params);
      this.dayPicker = false;
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #1767f2;
  min-height: calc(100vh - 44px);
}
</style>

<style lang="scss" scoped>
@import './../styles/report.scss';
</style>