dd_xcx/pages/statistics/taskStatistical/taskStatistical.js

var app = getApp()
var that;
var animation;
var setTime;
var chart1;
var chart2;
Page({
  data: {
    animationInfo: '',
    showStaff: true,
    date: app.globalData.month,
    names: '',
    users: [],
    isAdministrator: true,//是否管理者
    isAllChecked: false,

    popupCx: '',
    start_date: '',
    end_date: '',
    result: {},
    isBh:'4',
    setECharts: [],//柱形图数据

    bfb: '0',//一图百分比
    sum: 0,
  },
  onLoad() {
    that = this;
    chart1, chart2 = '';
    dd.setNavigationBar({ title: "任务统计" });
    this.init();
    this.getMonth();//设置日期
  },
  // 页面被关闭
  onUnload() {
    app.globalData.socketApi.closewebsocket();
  },
  onShow() {
    animation = dd.createAnimation({
      duration: 200,
      timeFunction: "linear",
    });
    if(this.data.isAllChecked){
          this.opneWebSocket(true)
          return false
    }
    this.opneWebSocket()
  },
  showText(e) {
    let index = e.target.dataset.index;
    if(index=='5'){
      that.setData({
        start_date2: that.data.start_date,
        end_date2: that.data.end_date,
      })
    }
    this.setData({ isBh: index })
  },
  init() {
    let manage_scope = app.globalData.userData.employee_detail.manage_scope;
    let names = '';
    let users = [];
    let isAdministrator = true;//是否员工
    if (manage_scope.length > 0) {
      isAdministrator = true;
      manage_scope.forEach((item,index) => {
        if((index+1)!=manage_scope.length){
          names += item.name + ',';
        }else{
          names += item.name
        }
        users.push(item)
      })
    } else {
      isAdministrator = false;
      names = app.globalData.userData.name;
      users = [app.globalData.userData];
    }
    this.setData({
      names: names,
      users: users,
      isAdministrator: isAdministrator
    })
  },
  openUrl(e) {
    let index = e.target.dataset.index;
    let method = 'expiredList';
    if (index == '1') {
      method = 'expiredList';
    } else if (index == '2') {
      method = 'todayExpireList';
    } else if (index == '3') {
      method = 'doingList';
    } else {
      method = 'reviewingList';
    }
    let target = [];
    if (this.data.isAllChecked) {
      target = [app.globalData.userData.id]
    } else {
      target = this.data.users.map(item => {
        return item.id;
      })
    }
    let data = {
      type: 'task_statistics',
      start_date: this.data.start_date,
      end_date: this.data.end_date,
      target: target,
      method: method,
      index: index,
      page: 1,
      page_size: 100
    }
    dd.navigateTo({
      url: '../taskSList/taskSList?data=' + JSON.stringify(data)
    })
  },
  onInitChart(F2, config) {
    const data = [{
      x: '1',
      y: 0
    }];
    chart1 = new F2.Chart(config);
    chart1.source(data, { y: { max: 100, min: 0 } });
    chart1.axis(false);
    chart1.tooltip(false);
    chart1.coord('polar', {
      transposed: true,
      innerRadius: 1.2,
      radius: 0.85
    });
    chart1.guide().arc({
      start: [0, 0],
      end: [1, 99.98],
      top: false,
      style: {
        lineWidth: 20,
        stroke: '#ccc'
      }
    });
    chart1.interval().position('x*y').size(20).animate({
      appear: {
        duration: 1200,
        easing: 'cubicIn'
      }
    });
    chart1.render();
  },
  onInitChart2(F2, config) {
    const data = [];
    chart2 = new F2.Chart(config);
    chart2.source(data, {
      percent: {
        formatter: function formatter(val) {
          return val * 100 + '%';
        }
      }
    });
    chart2.tooltip(false);
    chart2.coord('polar', {
      transposed: true,
      radius: 0.85
    });
    chart2.axis(false);
    chart2.interval()
      .position('a*percent')
      .color('name', ['#1890FF', '#F56C6C', '#2FC25B', '#FACC14', '#F04864', '#8543E0'])
      .adjust('stack')
      .style({
        lineWidth: 1,
        stroke: '#fff',
        lineJoin: 'round',
        lineCap: 'round'
      })
      .animate({
        appear: {
          duration: 1200,
          easing: 'bounceOut'
        }
      });
    chart2.render();
  },
  ruleActiveAll(e) {
    this.setData({
      isAllChecked: e.detail.value
    })
    if (e.detail.value) {
      this.opneWebSocket(true);
    } else {
      this.opneWebSocket();
    }
  },
  tsTamp(ydm) {
    return new Date(ydm).getTime()
  },
  opneWebSocket(is) {
    let timeC = (this.tsTamp(this.data.start_date) - this.tsTamp(this.data.end_date)) / (60 * 60 * 24 * 1000)
    if (timeC > 0) {
      app.globalData.showToast("开始时间不能大于结束时间")
      return
    }
    dd.showLoading({
      content: '加载中...',
    });
    setTimeout(() => {
      dd.hideLoading();
    }, 600)
    let target = this.data.users.map(item => {
      return item.id;
    })
    let data = {
      type: 'task_statistics',
      start_date: this.data.start_date,
      end_date: this.data.end_date,
      target: is ? [app.globalData.userData.id] : target
    }
    app.globalData.socketApi.sendData(data, this.onmessageWS);
  },
  onmessageWS(e) {
    // 因为作用域问题，这个函数不能使用this
    if (e.type == 'task_statistics') {
      let result = e.result;
      that.setData({
        result: result,
      })
      setTimeout(() => {
        that.setChart(result)
      }, 600)
    }
  },
  setChart(result) {
    // 图像一
    // result.complete={
    //   done:50,
    //   all:60,
    //   ahead:40,
    //   expired:90,
    // }
    let bfb = (Math.round(result.complete.done / result.complete.all * 10000) / 100.00);
    if (bfb !== bfb) { bfb = 0; };
    if(result.complete.done > result.complete.all){
      const setECharts = [{ x: '1', y: 100 }];
      that.setData({
        bfb: 100
      })
      chart1.changeData(setECharts)
    }else{
      const setECharts = [{ x: '1', y: bfb }];
      chart1.changeData(setECharts)
      that.setData({
        bfb: bfb
      })
    }

    // 图像二
    let complete = result.complete
    let sum = complete.ahead + complete.expired;
    let ahead = (Math.round(complete.ahead / sum * 10000) / 100.00);
    let expired = (Math.round(complete.expired / sum * 10000) / 100.00);
    const data = [{
      name: '按时完成',
      percent: ahead !== ahead ? 0 : ahead,
      num: complete.ahead,
      a: '1'
    }, {
      name: '逾期完成',
      percent: expired !== expired ? 0 : expired,
      num: complete.expired,
      a: '1'
    }];
    const map = [];
    data.forEach(function (obj) {
      map[obj.name] = obj.num + '项    ' + obj.percent + '%';
    });
    chart2.legend({
      position: 'right',
      itemFormatter: function itemFormatter(val) {
        return val + '    ' + map[val];
      }
    });
    chart2.changeData(data)
  },
  //选择弹窗
  openSelect() {
    that.setData({ showStaff: false });
    if (this.data.isAllChecked) {
      return false
    }
    animation.translateY(0).step();
    that.setData({
      showStaff: true,
      popupCx: 'container__mask',
      animationInfo: animation.export()
    });
  },
  //关闭规则
  onClose() {
    animation.translateY(1200).step();
    that.setData({
      popupCx: '',
      showStaff: false,
      animationInfo: animation.export()
    });
  },
  //时间选择
  openDate(e) {
    let num = e.target.dataset.num
    let date = num == '1' ? that.data.start_date : that.data.end_date
    dd.datePicker({
      format: 'yyyy-MM-dd',
      currentDate: date,
      success: (res) => {
        if (res.date) {
          if (num == '1') {
            that.setData({
              start_date2: res.date,
            })
          } else {
            that.setData({
              end_date2: res.date,
            })
          }
        }
      }
    });
  },
  qrDate(){
      that.setData({
        start_date: that.data.start_date2,
        end_date: that.data.end_date2,
        isBh: "4"
      })

      if (that.data.isAllChecked) {
        that.opneWebSocket(true);
      } else {
        that.opneWebSocket();
      }
  },
  //选择员工
  onSelectUser(data) {
    let names = '', users = [];
    data.forEach((item,index) => {
      if((index+1)!=data.length){
        names += item.name + ',';
      }else{
        names += item.name
      }
      users.push(item);
    })
    this.setData({
      names: names,
      users: users,
    })
    this.opneWebSocket()
  },
  getMonth() {
    // 获取当前月的第一天
    var start = new Date();
    start.setDate(1);
    // 获取当前月的最后一天
    var date = new Date();
    var currentMonth = date.getMonth();
    var nextMonth = ++currentMonth;
    var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
    var oneDay = 1000 * 60 * 60 * 24;
    var end = new Date(nextMonthFirstDay - oneDay);

    var startDate = this.transferDate(start); // 日期变换
    var endDate = this.transferDate(end); // 日期变换
    this.setData({
      start_date: startDate,
      end_date: endDate
    })
    // return startDate + ' - ' + endDate;
  },
  transferDate(date) {
    // 年
    var year = date.getFullYear();
    // 月
    var month = date.getMonth() + 1;
    // 日
    var day = date.getDate();
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (day >= 0 && day <= 9) {
      day = "0" + day;
    }
    var dateString = year + '-' + month + '-' + day;
    return dateString;
  }
});