epdc-analysis-mp-yushan/miniprogram/subpages/reality/pages/peolieThing/peopleSatisfied/peopleSatisfied.ts

// subpages/reality/pages/peopleSatisfied/peopleSatisfied.js
// @ts-ignore
import * as echarts from '../../../../../components/ec-canvas/echarts.js'
import { getEvaluateCountList } from '../../../../../api/reality'
function setOption(chart, chartData, color) {
  var option = {
    color: color,
    series: [
      {
        type: 'pie',
        radius: ['70%', '95%'],
        silent: true,
        avoidLabelOverlap: false,
        label: {
          show: false
        },
        labelLine: {
          show: false,
          normal: {
            show: false
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: '2',
        },
        data: chartData
      }
    ]
  };
  chart.setOption(option);
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    selectTab: 'tab1',
    type: 'first',
    allnum: 0,//总数
    pageSize:10,
    pageIndex:1,
    listLength:0,
    evaluateCountList: [],
    chartData: [],
    loadVisible:true,
    loadType: 'more',
    isShow:false,
    preloadVisible: true,
    color: [],
    ec: {},
    isShowLoading:true,//true加载中,false加载完毕
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    this.ecComponent = this.selectComponent('#mychart-dom-bar')

    this.getEvaluateCountList()
    this.selectComponent("#peopleList").getList(this.data)
  },
   /**
   * 子页面传值
   */
  onGetCode: function (e: { detail: { val: any } }) {
    this.setData({
      listLength: e.detail.listLength
    })
  },
  /**
    * 页面上拉触底事件的处理函数
    */
  onReachBottom: function () {
    // 判断是否需要在加载数据
    if (this.data.listLength !== this.data.pageSize) {
      this.setData({
        loadType: 'none',
      })
      return
    }
    this.setData({
      loadType: 'more',
    })
    let obj = {
      pageIndex: ++this.data.pageIndex,
      pageSize: this.data.pageSize,
    }
    this.selectComponent("#peopleList").getList(this.data)
  },
  // 获取数据
  getEvaluateCountList() {
    this.setData({
      isShowLoading:true
    })
    let that = this
    let evaluateType = '1'//评价类别:1.非常满意，2.基本满意，3.不满意
    if (that.data.selectTab == 'tab1') {
      evaluateType = '1'
    } else {
      evaluateType = '2'
    }
    let cotegoryType = '1'//分类类别：1.一级，2.二级，3.三级
    if (that.data.type == 'first') {//一级
      cotegoryType = '1'
    } else if (that.data.type == 'second') {//二级
      cotegoryType = '2'
    } else if (that.data.type == 'third') {//三级
      cotegoryType = '3'
    }
   getEvaluateCountList(evaluateType, cotegoryType).then(function (res: { data: any }) {
      that.setData.evaluateCountList = []
      that.setData.allnum = 0
      let datalength = res.data.length

      if (datalength == 0) {
        that.setData({
          loadVisible: false,
          preloadVisible:false,
          isShow: true,
          isShowLoading:false
        })
      }

      for (var i = 0; i < res.data.length; i++) {
        that.setData({
          allnum: that.data.allnum + res.data[i].count
        });
      };
      if (datalength == 1) {
        if (res.data[0].count != 0) {
          that.setData({
            evaluateCountList: res.data,
            color: ['#AD6DFE'],
            chartData: [
              {
                value: res.data[0].count / that.data.allnum,
                name: '1'
              }
            ],
          });
        }

      } else if (datalength == 2) {
        if (res.data[1].count == 0) {
          that.setData({
            evaluateCountList: res.data,
            color: ['#AD6DFE'],
            chartData: [
              {
                value: res.data[0].count / that.data.allnum,
                name: '1'
              }
            ],
          });
        } else {
          that.setData({
            evaluateCountList: res.data,
            color: ['#AD6DFE', '#FFA270'],
            chartData: [
              {
                value: res.data[0].count / that.data.allnum,
                name: '1'
              },
              {
                value: res.data[1].count / that.data.allnum,
                name: '2'
              }
            ],
          });
        }
      } else if (datalength == 3) {
        if (res.data[2].count == 0) {
          that.setData({
            evaluateCountList: res.data,
            color: ['#AD6DFE', '#FFA270'],
            chartData: [
              {
                value: res.data[0].count / that.data.allnum,
                name: '1'
              },
              {
                value: res.data[1].count / that.data.allnum,
                name: '2'
              }
            ],
          });
        } else {
          that.setData({
            evaluateCountList: res.data,
            color: ['#AD6DFE', '#FFA270', '#29B9A5'],
            chartData: [
              {
                value: res.data[0].count / that.data.allnum,
                name: '1'
              },
              {
                value: res.data[1].count / that.data.allnum,
                name: '2'
              },
              {
                value: res.data[2].count / that.data.allnum,
                name: '3'
              }
            ],
          });
        }
      } else if (datalength == 4) {
        if (res.data[3].count == 0) {
          that.setData({
            evaluateCountList: res.data,
            color: ['#AD6DFE', '#FFA270', '#29B9A5'],
            chartData: [
              {
                value: res.data[0].count / that.data.allnum,
                name: '1'
              },
              {
                value: res.data[1].count / that.data.allnum,
                name: '2'
              },
              {
                value: res.data[2].count / that.data.allnum,
                name: '3'
              },
            ],
          });
        } else {
          that.setData({
            evaluateCountList: res.data,
            color: ['#AD6DFE', '#FFA270', '#29B9A5', '#63CFED'],
            chartData: [
              {
                value: res.data[0].count / that.data.allnum,
                name: '1'
              },
              {
                value: res.data[1].count / that.data.allnum,
                name: '2'
              },
              {
                value: res.data[2].count / that.data.allnum,
                name: '3'
              },
              {
                value: res.data[3].count / that.data.allnum,
                name: '4'
              }
            ],
          });
        }

      } else if (datalength == 5) {
        if (res.data[4].count == 0) {
          that.setData({
            evaluateCountList: res.data,
            color: ['#AD6DFE', '#FFA270', '#29B9A5', '#63CFED'],
            chartData: [
              {
                value: res.data[0].count / that.data.allnum,
                name: '1'
              },
              {
                value: res.data[1].count / that.data.allnum,
                name: '2'
              },
              {
                value: res.data[2].count / that.data.allnum,
                name: '3'
              },
              {
                value: res.data[3].count / that.data.allnum,
                name: '4'
              }
            ],
          });
        } else {
          that.setData({
            evaluateCountList: res.data,
            color: ['#AD6DFE', '#FFA270', '#29B9A5', '#63CFED', '#679CF7'],
            chartData: [
              {
                value: res.data[0].count / that.data.allnum,
                name: '1'
              },
              {
                value: res.data[1].count / that.data.allnum,
                name: '2'
              },
              {
                value: res.data[2].count / that.data.allnum,
                name: '3'
              },
              {
                value: res.data[3].count / that.data.allnum,
                name: '4'
              },
              {
                value: res.data[4].count / that.data.allnum,
                name: '5'
              }
            ],
          });
        }

      } else if (datalength == 6) {
        if (res.data[5].count == 0) {
          that.setData({
            evaluateCountList: res.data,
            color: ['#AD6DFE', '#FFA270', '#29B9A5', '#63CFED', '#679CF7'],
            chartData: [
              {
                value: res.data[0].count / that.data.allnum,
                name: '1'
              },
              {
                value: res.data[1].count / that.data.allnum,
                name: '2'
              },
              {
                value: res.data[2].count / that.data.allnum,
                name: '3'
              },
              {
                value: res.data[3].count / that.data.allnum,
                name: '4'
              },
              {
                value: res.data[4].count / that.data.allnum,
                name: '5'
              },
            ],
          });
        } else {
          that.setData({
            evaluateCountList: res.data,
            color: ['#AD6DFE', '#FFA270', '#29B9A5', '#63CFED', '#679CF7', '#FFC600'],
            chartData: [
              {
                value: res.data[0].count / that.data.allnum,
                name: '1'
              },
              {
                value: res.data[1].count / that.data.allnum,
                name: '2'
              },
              {
                value: res.data[2].count / that.data.allnum,
                name: '3'
              },
              {
                value: res.data[3].count / that.data.allnum,
                name: '4'
              },
              {
                value: res.data[4].count / that.data.allnum,
                name: '5'
              },
              {
                value: res.data[5].count / that.data.allnum,
                name: '6'
              }
            ],
          });
        }

      }

      that.init()
    })
  },
  init() {
    this.setData({
      isShowLoading:true
    })
    // @ts-ignore
    this.ecComponent.init((canvas: any, width: any, height: any) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      })
      setOption(chart, this.data.chartData, this.data.color)
      return chart
    })
    if (this.data.chartData.length > 0){
      let that = this
      that.setData({
        preloadVisible: false,
        isShowLoading:false
      })
    }
    this.setData({
      isShowLoading:false
    })
  },
  // tab 切换
 onTabChange(e: AnyObject) {
    if (this.data.isShowLoading) {
      wx.showToast({
        title: '正在加载中请稍后切换', //提示的内容,
        icon: 'none', //图标,
        duration: 2000, //延迟时间,
        mask: true, //显示透明蒙层，防止触摸穿透,
      });
      return
    }
    this.setData({
      chartData: [],
      color: [],
      selectTab: e.currentTarget.dataset.tab,
      pageSize: 10,
      pageIndex: 1,
      loadType: 'more',
      isShow: false,
      preloadVisible: true,
      evaluateCountList:[]
    })
    this.init()
    this.getEvaluateCountList();
    this.selectComponent("#peopleList").getList(this.data)
  },
  // 类目切换
  onButtonChange(e: AnyObject) {
    if (this.data.isShowLoading) {
      wx.showToast({
        title: '正在加载中请稍后切换', //提示的内容,
        icon: 'none', //图标,
        duration: 2000, //延迟时间,
        mask: true, //显示透明蒙层，防止触摸穿透,
      });
      return
    }
    this.setData({
      chartData: [],
      color: [],
      type: e.currentTarget.dataset.type,
      preloadVisible: true,
      evaluateCountList:[]
    })
    this.init()
    this.getEvaluateCountList()
  },
})