parking_operation/pages/collectorManagement/performanceAnalysis/performanceAnalysis.vue

<!--
 * @Description: 业绩分析
 * @Author: 空白格
 * @Date: 2022-06-20 09:20:23
 * @LastEditors: 空白格
 * @LastEditTime: 2022-06-20 11:30:19
 * @FilePath: \parking_operation\pages\collectorManagement\performanceAnalysis\performanceAnalysis.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved. 
-->
<template>
  <view class="performance-analysis">
    <view class="performance-analysis-search">
      <view class="performance-analysis-search-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="performance-analysis-search-right">
        <u--input placeholder="" border="surround" v-model="currentDate" disabled inputAlign="center"/>
      </view>
    </view>
    <view class="performance-analysis-content">
      <template v-if="chartData.series[0].data.length > 0">
        <LineChart :chartData="chartData" :opts="opts" />
      </template>
      <template v-else>
        <view class="empty">
          <u-empty></u-empty>
        </view>
      </template>
    </view>
    <!-- 年 -->
    <u-picker
      :show="yearPicker"
      :columns="yearList"
      :defaultIndex="defaultYear"
      @confirm="yearConfirm"
      @cancel="yearPicker = false"
    ></u-picker>
    <!-- 月 -->
    <u-picker
      :show="monthPicker"
      :columns="monthList"
      :defaultIndex="defaultMonth"
      @confirm="monthConfirm"
      @cancel="monthPicker = false"
    ></u-picker>
    <!-- 日 -->
    <u-picker
      :show="dayPicker"
      :columns="dayList"
      :defaultIndex="defaultDay"
      @confirm="dayConfirm"
      @cancel="dayPicker = false"
    ></u-picker>
  </view>
</template>

<script>
import LineChart from '@/components/lineChart.vue';
export default {
  components: {
    LineChart
  },
  data() {
    return {
      tabList: [
        {
          label: '年',
          value: 2
        },
        {
          label: '月',
          value: 1
        },
        {
          label: '日',
          value: 0
        }
      ],
      tabCur: 2,
      params: {
        queryDate: '',
        reportType: 2
      },
      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: {},
      chartData: {
        categories: [],
        series: [
          {
            name: '',
            data: []
          }
        ]
      },
      opts: {
        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, 10, 10, 10],
        extra: {
          column: {
            width: 20
          }
        }
      }
    };
  },
  onShow() {
    this.defaultSetVal();
  },
  watch: {
    'params.queryDate'(val) {
      if (val) {
        let timestamp = new Date(val).valueOf();
        switch (this.params.reportType) {
          case 0:
            this.currentDate = uni.$u.timeFormat(timestamp, 'yyyy年mm月dd日');
            break;
          case 1:
            this.currentDate = uni.$u.timeFormat(timestamp, 'yyyy年mm月');
            break;
          case 2:
            this.currentDate = uni.$u.timeFormat(timestamp, 'yyyy年');
            break;
        }
      }
    }
  },
  methods: {
    defaultSetVal() {
      this.currentYear = this.yearList[0][4].value;
      this.yearObj = this.yearList[0][4];
      this.params.queryDate = `${this.currentYear}-${this.currentMonth}-${this.currentDay}`;
      this.getData();
    },
    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 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.currentYear = e.value[0].value;
      this.yearObj = e.value[0];
      this.params.queryDate = `${this.currentYear}-${this.currentMonth}-${this.currentDay}`;
      this.yearPicker = false;
      this.getData();
    },
    monthConfirm(e) {
      this.defaultMonth = [e.indexs[0]];
      this.currentMonth = e.value[0].value;
      this.monthObj = e.value[0];
      this.params.queryDate = `${this.currentYear}-${this.currentMonth}-${this.currentDay}`;
      this.monthPicker = false;
      this.dayList = this.getDayList();
      this.getData();
    },
    dayConfirm(e) {
      this.defaultDay = [e.indexs[0]];
      this.currentDay = e.value[0].value;
      this.dayObj = e.value[0];
      this.params.queryDate = `${this.currentYear}-${this.currentMonth}-${this.currentDay}`;
      this.dayPicker = false;
      this.getData();
    },
    getData() {
      uni.$u.api.operationalAnalysisApi
        .getTollCollectorPerformanceApi({ ...this.params })
        .then((res) => {
          if (res.code === 200) {
            if (res.rows && res.rows.length) {
              this.chartData.categories = res.rows.map((item) => {
                return item.payeeName;
              });
              this.chartData.series[0].data = res.rows.map((item) => {
                return item.amt;
              });
            } else {
              this.chartData.categories = [];
              this.chartData.series[0].data = [];
            }
          }
        });
    }
  }
};
</script>
<style lang="scss">
	page {
	  background-color: #1767f2;
	  min-height: calc(100vh - 44px);
	}
</style>
<style lang="scss" scoped>
@import './performanceAnalysis.scss';
</style>