carInsightSystem_wxapp/pages/index/Salesranking/Salesranking.js

// pages/index/Salesranking/Salesranking.js
const app = getApp()
import brokenLine from "../../../components/option/singleLineOption"
import histogram from "../../../components/option/columnarOption"
import {
  times
} from "../../../components/option/text"
import moment from "moment"
let iPageIndex = 1 // 当前第几页,0代表第一页 
let iPageSize = 20 //每页显示多少数据
Page({
  data: {
    nengtitle1: '全部级别',
    nengtitle2: '全部价格',
    nengtitle3: '全部能源',
    active: 0,
    end: moment().format("YYYY-MM"),
    showChart: true,
    // select: false,
    grade_value2: "",
    grade_value4: 0,
    grades4: [{
        text: '列表展示',
        value: 0
      },
      {
        text: '图表展示',
        value: 1
      }
    ],
    num: 0,
    num1: false,
    //弹出框
    show: false,
    duration: 300,
    position: 'bottom',
    // round: true,
    overlay: true,
    showChart: true,
    //图表
    // positiveOption:brokenLine(dName,dValue,dColor,data),
    imageUrl: getApp().globalData.imageUrl,
    accountIndex: 0,
    ranking: [],
    accountIndex: 0,
    sSpec: '',
    sPriceType: '',
    sEnergyType: '',
    imageUrl: getApp().globalData.imageUrl,
    mockData: [],
    mainActiveIndex: 0,
    mainActiveIndex2: 0,
    activeId: '',
    activeId2: '',
    //
    ec: {
      lazyLoad: true // 设置图表懒加载
    },
    dateList: [], //日期列表
    currentDate: '',
    startDate: '',
    endDate: ''
  },
  onLoad() {
    app.globalData.request({
      action: 'getCheZhuLatestTimeHome',
      sType: 'Marketing',
      token: wx.getStorageSync('token') || 't%2BrswgjvzGM=',
    }).then(res => {
      let dateArr = [];
      for (let i = 0; i < 6; i++) {
        let date = this.getLastMonth(res, i);
        dateArr.push(date);
      };
      this.setData({
        dateList: dateArr,
        currentDate: dateArr[0]
      });
    })
  },
  getLastMonth(dt, number = 0) {
    if (number >= 12) {
      return
    }
    let year = new Date(dt).getFullYear(); //get年份
    let month = new Date(dt).getMonth() + 1; //get月份
    let m = month - number;
    let y = year;
    if (m < 0) {
      y = y - 1;
      m = 12 + m;
    };
    if (m < 10) {
      m = '0' + m;
    }
    return y + '-' + m;
  },
  changeDate(option) {
    iPageIndex = 1
    iPageSize = 20
    let value = option.currentTarget.dataset.value;
    this.setData({
      ranking: [],
      currentDate: value,
      startDate: value,
      endDate: value
    });
    this.getTrend();
  },
  changePast(option) {
    iPageIndex = 1
    iPageSize = 20
    let value = option.currentTarget.dataset.value;
    if (value == 'past3') {
      this.setData({
        ranking: [],
        endDate: this.data.dateList[0],
        startDate: this.data.dateList[2],
        currentDate: '近3个月'
      })
    } else if (value == 'past6') {
      this.setData({
        ranking: [],
        endDate: this.data.dateList[0],
        startDate: this.data.dateList[5],
        currentDate: '近6个月'
      })
    } else if (value == 'thisyear') {
      let start = new Date(this.data.dateList[0]).getFullYear() + '-01';
      this.setData({
        ranking: [],
        endDate: this.data.dateList[0],
        startDate: start,
        currentDate: '今年'
      })
    } else if (value == 'lastyear') {
      let start = (new Date(this.data.dateList[0]).getFullYear() - 1) + '-01';
      let end = (new Date(this.data.dateList[0]).getFullYear() - 1) + '-12';
      this.setData({
        ranking: [],
        endDate: end,
        startDate: start,
        currentDate: '去年'
      })
    }
    this.getTrend();
  },
  //  标签切换点击事件
  onChange(val) {
    let n = val.detail.index;
    this.setData({
      active: n
    })
    // wx.showToast({
    // //   title: `切换到标签 ${event.detail.name}`,
    //   icon: 'none',
    // });
  },
  getData() {
    wx.showToast({
      title: '加载中',
      icon: 'loading',
      duration: 3000
    })
    // 下拉列表
    this.getAmount();
    // 车型
    this.getTrend();
    // 品牌
    app.globalData.request({
      action: 'getUserBrand',
      token: wx.getStorageSync('token') || 't%2BrswgjvzGM=',
    }).then(res => {
      let arr = []
      for (let i = 65; i <= 90; i++) {
        arr.push({
          name: String.fromCharCode(i),
          data: []
        });
      }
      for (let i of res) {
        for (let j of arr) {
          if (i.firstword == j.name) {
            j.data.push(i)
          }
        }
      }
      this.setData({
        mockData: arr
      })
      setTimeout(() => {
        wx.hideToast();
      }, 2000)
    })
    setTimeout(() => {
      wx.hideToast();
    }, 500)
  },
  //    排行榜数据
  getTrend() {
    wx.showToast({
      title: '加载中',
      icon: 'loading',
      duration: 300000
    })
    let obj = {
      action: 'getCheZhuCarSeriesRankingHome',
      sType: 'Marketing',
      sStartTime: this.data.startDate,
      sEndTime: this.data.endDate,
      iPageIndex: iPageIndex,
      iPageSize: iPageSize,
      sSpec: this.data.sSpec,
      sPriceType: this.data.sPriceType,
      sEnergyType: this.data.sEnergyType
    }
    //第一次加载数据
    if (iPageIndex == 1) {
      this.setData({
        loadMore: true, //把"上拉加载"的变量设为true，显示  
        loadAll: false //把“没有数据”设为false，隐藏  
      })
    }
    app.globalData.request(obj, (database) => {}).then(res => {
      const carName = []
      const carValue = []
      if (res && res.length > 0) {
        iPageIndex++;
        //把新请求到的数据添加到列表里  
        let list = this.data.ranking.concat(res);
        list.forEach(e => {
          carName.push(e.seriesname)
          carValue.push(e.salescount)
        })
        this.setData({
          ranking: list, //获取数据数组    
          loadMore: false, //把"上拉加载"的变量设为false，显示  
          brandOption: histogram(carName, carValue, '#0084FF', false, (20 / list.length) * 100)
        });
        if (res.length < iPageSize) {
          this.setData({
            loadMore: false, //隐藏加载中。。
            loadAll: true //所有数据都加载完了
          });
        }
      } else {
        this.setData({
          loadAll: true, //把“没有数据”设为true，显示  
          loadMore: false //把"上拉加载"的变量设为false，隐藏  

        });
      }
      setTimeout(() => {
        wx.hideToast();
      }, 500)
    })
  },
  //页面上拉触底事件的处理函数
  onReachBottom: function () {
    let that = this
    if (!that.data.loadMore) {
      that.setData({
        loadMore: true, //加载中  
        loadAll: false //是否加载完所有数据
      });
      //加载更多，这里做下延时加载
      that.getTrend();
    }
  },
  // 筛选列表
  getAmount() {
    //能源
    app.globalData.request({
      action: 'getEnergyJson2',
    }).then(res => {
      let arr = []
      res.forEach(ele => {
        let data = ele.data || []
        let obj = {
          text: ele.value,
          id: ele.key,
        }
        if (data.length > 0) {
          obj.children = [];
          data.forEach(e => {
            let ol = {
              text: e.value,
              id: e.key
            }
            obj.children.push(ol)
          })
        }
        arr.push(obj)
      })
      this.setData({
        grades3: arr
      })
    })
    //价格
    app.globalData.request({
      action: 'getPriceRangeS',
    }).then(res => {
      let arr = []
      res.forEach(ele => {
        let obj = {
          text: ele.value,
          value: ele.key
        }
        arr.push(obj)
      })
      this.setData({
        grades2: arr
      })
    })
    //级别
    app.globalData.request({
      action: 'getSpecName1',
    }).then(res => {
      let arr = []
      res.forEach(ele => {
        let data = ele.data || []
        let obj = {
          text: ele.value,
          id: ele.key,
        }
        if (data.length > 0) {
          obj.children = [];
          data.forEach(e => {
            let ol = {
              text: e.value,
              id: e.key
            }
            obj.children.push(ol)
          })
        }
        arr.push(obj)
      })
      this.setData({
        grades1: arr,
      })
    })
  },
  bindValue(e) {
    let type = e.detail.type
    if (type == 0) {
      this.data.roomLevel = e.detail.val
    } else {
      this.data.builds = e.detail.val
    }
  },
  // 按价格
  mySelect2({
    detail
  }) {
    iPageIndex = 1
    iPageSize = 20
    let n = 0;
    if (detail) {
      n = detail * 1;
    }
    this.setData({
      ranking: [],
      sPriceType: this.data.grades2[n].value,
      nengtitle2: this.data.grades2[n].text,
    })
    this.getTrend()
  },
  // 列表展示
  mySelect4(e) {
    iPageIndex = 1
    iPageSize = 20
    this.setData({
      ranking: [],
      a: e.detail != 0,
      showvalue: false
    })
    this.getTrend()
  },
  // 全部
  all() {
    iPageIndex = 1
    iPageSize = 20
    this.data.num++
    let dj = this.data.num % 2 == 0
    this.setData({
      ranking: [],
      nengtitle1: '全部级别',
      nengtitle2: '全部价格',
      nengtitle3: '全部能源',
      sSpec: '',
      sPriceType: '',
      sEnergyType: '',
      boxSize: dj ? 'noall' : 'all1'
    })
    this.getTrend()
  },
  priceSel(e) {
    this.setData({
      intervalSel: e.currentTarget.dataset.index
    })
  },
  //弹出框
  popup(e) {
    let duration = this.data.duration
    let models = e.currentTarget.dataset.car
    app.globalData.request({
      action: "getCheZhuCarSeriesListHome",
      sType: "Marketing",
      sSeriesName: models,
      sStartTime: times(this.data.startDate),
      sEndTime: this.data.endDate,
    }).then(res => {
      const dataTime = []
      const dataCar = []
      res.forEach(e => {
        if ((e.sourcetime).substring(5, 6) == "0") {
          dataTime.push((e.sourcetime).substring((e.sourcetime).length - 1, (e.sourcetime).length) + '月')
        } else {
          dataTime.push((e.sourcetime).substring((e.sourcetime).length - 2, (e.sourcetime).length) + "月")
        }
        dataCar.push(e.salescount)
      });
      this.setData({
        show: true,
        duration,
        positiveOption: brokenLine(dataCar, dataTime),
        models
      })
    })
  },
  onClose() {
    this.setData({
      show: false
    })
  },
  exit() {
    this.setData({
      show: false
    })
  },
  onShow() {
    iPageIndex = 1;
    this.setData({
      startDate: wx.getStorageSync('newTime'),
      endDate: wx.getStorageSync('newTime')
    })
    this.getData()
  },
  changeTab(val) {
    let n = val.detail.index;
    this.setData({
      active: n
    })
  },
  // 树形结构父级点击
  // 按能源
  onClickNav({
    detail = {}
  }) {
    this.setData({
      mainActiveIndex: detail.index || 0,
    });
    let {
      grades3
    } = this.data;
    iPageIndex = 1
    if (!grades3[detail.index].children) {
      this.setData({
        ranking: [],
        sEnergyType: grades3[detail.index].id || "",
        nengtitle3: grades3[detail.index].text,
      })
      this.selectComponent('#menuitem2').toggle(false);
      this.getTrend()
    }
  },
  // 按级别
  onClickNav2({
    detail = {}
  }) {
    this.setData({
      mainActiveIndex2: detail.index || 0,
    });
    let {
      grades1
    } = this.data;
    iPageIndex = 1
    if (!grades1[detail.index].children) {
      this.setData({
        ranking: [],
        sSpec: grades1[detail.index].id || "",
        nengtitle1: grades1[detail.index].text,
      })
      this.selectComponent('#menuitem1').toggle(false);
      this.getTrend()
    }
  },
  // 树形结构子级点击
  // 按能源
  onClickItem({
    detail = {}
  }) {
    // const activeId = this.data.activeId === detail.id ? null : detail.id;
    const activeId = detail.id;
    // let {
    //     mainActiveIndex
    // } = this.data;
    iPageIndex = 1
    this.setData({
      ranking: [],
      activeId,
      nengtitle3: detail.text,
      // sEnergyType: mainActiveIndex + "," + activeId,
      sEnergyType: activeId,

    });
    this.selectComponent('#menuitem2').toggle(false);
    this.getTrend()
  },
  // 按级别
  onClickItem2({
    detail = {}
  }) {
    // const activeId2 = this.data.activeId2 === detail.id ? null : detail.id;
    const activeId2 = detail.id;
    // let {
    //     mainActiveIndex2
    // } = this.data;
    iPageIndex = 1
    this.setData({
      ranking: [],
      activeId2,
      nengtitle1: detail.text,
      // sSpec: mainActiveIndex2 + "," + activeId2,
      sSpec: activeId2,
    });
    this.selectComponent('#menuitem1').toggle(false);
    this.getTrend()
  },
})