parking_operation/pages/operationalAnalysis/roadModel/index.vue

<!--
 * @Description: 运营分析路段模块
 * @Author: 空白格
 * @Date: 2022-08-02 16:47:29
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-04 11:43:21
 * @FilePath: \parking_operation\pages\operationalAnalysis\roadModel\index.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved. 
-->
<template>
  <view class="analysis">
    <view class="analysis-header">
      <view class="analysis-header-left">
        <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>
      </view>
      <view class="analysis-header-right">{{ currentDate }}</view>
    </view>
    <view class="analysis-main">
      <template v-if="templateKey === 'sectionAnalysis'">
        <section-analysis ref="sectionAnalysis" />
      </template>
      <template v-else-if="templateKey === 'arrearsAnalysis'">
        <arrears-analysis ref="arrearsAnalysis" />
      </template>
      <template v-else-if="templateKey === 'revenueAnalysis'">
        <revenue-analysis ref="revenueAnalysis" />
      </template>
      <template v-else-if="templateKey === 'incomeAnalysis'">
        <income-analysis ref="incomeAnalysis" />
      </template>
      <template v-else-if="templateKey === 'paymentMethod'">
        <payment-method ref="paymentMethod" />
      </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 SectionAnalysis from './components/sectionAnalysis.vue';
import ArrearsAnalysis from './components/arrearsAnalysis.vue';
import RevenueAnalysis from './components/revenueAnalysis.vue';
import IncomeAnalysis from './components/incomeAnalysis.vue';
import PaymentMethod from './components/paymentMethod.vue';
export default {
  components: {
    SectionAnalysis,
    ArrearsAnalysis,
    RevenueAnalysis,
    IncomeAnalysis,
    PaymentMethod
  },
  data() {
    return {
      tabList: [
        {
          label: '年',
          value: 2
        },
        {
          label: '月',
          value: 1
        },
        {
          label: '日',
          value: 0
        }
      ],
      tabCur: 2,
      templateKey: '',
      title: '',
      currentDate: '',
      // 参数
      params: {
        reportType: 2,
        queryDate: ''
      },
      // 年
      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) {
        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() {
    this.defaultSetVal();
  },
  methods: {
    defaultSetVal() {
      this.currentYear = this.yearList[0][4].value;
      this.title = this.yearList[0][4].text;
      this.yearObj = this.yearList[0][4];
      this.params.queryDate = `${this.currentYear}-${this.currentMonth}-${this.currentDay}`;
      this.$nextTick(() => {
        this.$refs[this.templateKey].getData(this.params);
      });
    },
    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);
      }
      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;
    },
    /**
     * 点击tab
     * @param {Object} item
     */
    tabClick(item) {
      this.tabCur = item.value;
      switch (item.value) {
        case 0:
          this.dayPicker = true;
          break;
        case 1:
          this.monthPicker = true;
          break;
        case 2:
          this.yearPicker = true;
          break;
      }
      this.params.reportType = this.tabCur;
    },
    yearConfirm(e) {
      this.defaultYear = [e.indexs[0]];
      this.title = e.value[0].text;
      this.currentYear = e.value[0].value;
      this.yearObj = e.value[0];
      this.params.queryDate = `${this.currentYear}-${this.currentMonth}-${this.currentDay}`;
      this.$nextTick(() => {
        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.$nextTick(() => {
        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.$nextTick(() => {
        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/analysis.scss';
</style>