epdc-analysis-mp-yushan/miniprogram/subpages/partyInteract/pages/partyInteractIndex/components/participation/participation.ts

// subpages/partyInteract/pages/partyInteractIndex/components/participationStatus/participationStatus.js
// @ts-ignore
import * as echarts from '../../../../../../components/ec-canvas/echarts.js'
import { getparticipation } from '../../../../utils/echarts'
import { getPartyDynamicTrend } from '../../../../../../api/partyInteract'
Component({
  properties: {
    deptid: {
      type: String
    }
  },
  data: {
    ecA: {
      lazyLoad: true
    },
    showTimePicker: false,
    someMonthsType: 1,
    timeList: [
      { time: '最近一个月', id: 1 },
      { time: '最近三个月', id: 2 },
      { time: '最近六个月', id: 3 },
      { time: '最近一年', id: 4 }],
    visible: false,
    data1: [],//党员0, 0, 0, 100
    data2: [],//党员参与9, 30, 9, 40
    data3: [],//居民20, 30, 20, 30
    data4: [],//居民参与9, 30, 9, 40
    xData: [],//'第一周', '第二周', '第三周', '第四周'
    data1Total: [],
    data2Total: [],
    data3Total: [],
    data4Total: [],
    xDataTotal: []
  },
  lifetimes: {
    async attached() {
      // @ts-ignore
      this.ecComponentA = this.selectComponent('#mychart-participation')
      await this.getPartyDynamicTrend()
      this.initA()
    }
  },
  observers: {
    async deptid(newValue, oldvalue) {
      console.log('newValue',newValue)
      console.log('oldvalue',oldvalue)
      if (newValue.length !== 0) {
        await this.getPartyDynamicTrend()
        if (this.data.someMonthsType == 2) {
          // // 最近三个月
          this.setData({
            data1: this.data.data1Total.slice(0, 4),
            data2: this.data.data2Total.slice(0, 4),
            data3: this.data.data3Total.slice(0, 4),
            data4: this.data.data4Total.slice(0, 4),
            xData: this.data.xDataTotal.slice(0, 4)
          })
        } else if (this.data.someMonthsType == 3) {
          // 最近六个月
          this.setData({
            data1: this.data.data1Total.slice(0, 3),
            data2: this.data.data2Total.slice(0, 3),
            data3: this.data.data3Total.slice(0, 3),
            data4: this.data.data4Total.slice(0, 3),
            xData: this.data.xDataTotal.slice(0, 3)
          })
        } else if (this.data.someMonthsType == 4) {
          // 最近一年
          this.setData({
            data1: this.data.data1Total.slice(0, 4),
            data2: this.data.data2Total.slice(0, 4),
            data3: this.data.data3Total.slice(0, 4),
            data4: this.data.data4Total.slice(0, 4),
            xData: this.data.xDataTotal.slice(0, 4)
          })
        }
        await this.initA()
      }
    },

  },
  methods: {
    // 显示隐藏时间选择框
    chooseTimePicker() {
      this.setData({
        showTimePicker: !this.data.showTimePicker
      })
    },
    // 选择时间
    async onTimeChange(e: any) {
      // console.log('someMonthsType', e.currentTarget.dataset.time)
      this.setData({
        someMonthsType: e.currentTarget.dataset.time,
        showTimePicker: false,
      })
      await this.getPartyDynamicTrend()
      if (e.currentTarget.dataset.time == 2) {
        // // 最近三个月
        this.setData({
          data1: this.data.data1Total.slice(0, 4),
          data2: this.data.data2Total.slice(0, 4),
          data3: this.data.data3Total.slice(0, 4),
          data4: this.data.data4Total.slice(0, 4),
          xData: this.data.xDataTotal.slice(0, 4)
        })
      } else if (e.currentTarget.dataset.time == 3) {
        // 最近六个月
        this.setData({
          data1: this.data.data1Total.slice(0, 3),
          data2: this.data.data2Total.slice(0, 3),
          data3: this.data.data3Total.slice(0, 3),
          data4: this.data.data4Total.slice(0, 3),
          xData: this.data.xDataTotal.slice(0, 3)
        })
      } else if (e.currentTarget.dataset.time == 4) {
        // 最近一年
        this.setData({
          data1: this.data.data1Total.slice(0, 4),
          data2: this.data.data2Total.slice(0, 4),
          data3: this.data.data3Total.slice(0, 4),
          data4: this.data.data4Total.slice(0, 4),
          xData: this.data.xDataTotal.slice(0, 4)
        })
      }

      await this.initA()

    },
    initA() {
      // @ts-ignore
      this.ecComponentA.init((canvas: any, width: any, height: any) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        getparticipation(chart, this.data.data1, this.data.data2, this.data.data3, this.data.data4, this.data.xData)
        return chart
      })
    },
    hide() {
      this.setData({
        visible: false,
      })
    },
    onChange(e: any) {
      this.setData({
        visible: e.detail.visible,
      })
    },
    async getPartyDynamicTrend() {
      let obj = {
        deptId: this.properties.deptid,
        someMonthsType: this.data.someMonthsType
      }
      try {
        // @ts-ignore
        let res: any = await getPartyDynamicTrend(obj)
        let data1: any = []
        let data2: any = []
        let data3: any = []
        let data4: any = []
        let xData: any = []
        res.data.list.forEach((element: any) => {
          data1.unshift(element.partyTotal)
          data2.unshift(element.partyDynamicTotal)
          data3.unshift(element.residentTotal)
          data4.unshift(element.residentDynamicTotal)
          xData.unshift(element.timeName)
        })
        this.setData({
          data1: data1,
          data2: data2,
          data3: data3,
          data4: data4,
          xData: xData,
        })
        this.setData({
          data1Total: data1,
          data2Total: data2,
          data3Total: data3,
          data4Total: data4,
          xDataTotal: xData
        })
      } catch (err) {
        console.log(err)
      }


    },
    toLeft() {
      // 3个月
      if (this.data.someMonthsType == 2) {
        if (this.data.xData[0] == '第5周') {
          this.setData({
            data1: this.data.data1Total.slice(0, 4),
            data2: this.data.data2Total.slice(0, 4),
            data3: this.data.data3Total.slice(0, 4),
            data4: this.data.data4Total.slice(0, 4),
            xData: this.data.xDataTotal.slice(0, 4)
          })
        } else if (this.data.xData[0] == '第9周') {
          this.setData({
            data1: this.data.data1Total.slice(4, 8),
            data2: this.data.data2Total.slice(4, 8),
            data3: this.data.data3Total.slice(4, 8),
            data4: this.data.data4Total.slice(4, 8),
            xData: this.data.xDataTotal.slice(4, 8)
          })
        }
      } else if (this.data.someMonthsType == 3) {
        // 最近6个月
        if (this.data.xData[0] == '第4个月') {
          this.setData({
            data1: this.data.data1Total.slice(0, 3),
            data2: this.data.data2Total.slice(0, 3),
            data3: this.data.data3Total.slice(0, 3),
            data4: this.data.data4Total.slice(0, 3),
            xData: this.data.xDataTotal.slice(0, 3)
          })
        }
      } else if (this.data.someMonthsType == 4) {
        if (this.data.xData[0] == '第5个月') {
          this.setData({
            data1: this.data.data1Total.slice(0, 4),
            data2: this.data.data2Total.slice(0, 4),
            data3: this.data.data3Total.slice(0, 4),
            data4: this.data.data4Total.slice(0, 4),
            xData: this.data.xDataTotal.slice(0, 4)
          })
        } else if (this.data.xData[0] == '第9个月') {
          this.setData({
            data1: this.data.data1Total.slice(4, 8),
            data2: this.data.data2Total.slice(4, 8),
            data3: this.data.data3Total.slice(4, 8),
            data4: this.data.data4Total.slice(4, 8),
            xData: this.data.xDataTotal.slice(4, 8)
          })
        }
      }

      this.initA()
    },
    toRight() {
      // 3个月
      if (this.data.someMonthsType == 2) {
        if (this.data.xData[0] == '第1周') {
          this.setData({
            data1: this.data.data1Total.slice(4, 8),
            data2: this.data.data2Total.slice(4, 8),
            data3: this.data.data3Total.slice(4, 8),
            data4: this.data.data4Total.slice(4, 8),
            xData: this.data.xDataTotal.slice(4, 8)
          })
        } else if (this.data.xData[0] == '第5周') {
          this.setData({
            data1: this.data.data1Total.slice(8, 12),
            data2: this.data.data2Total.slice(8, 12),
            data3: this.data.data3Total.slice(8, 12),
            data4: this.data.data4Total.slice(8, 12),
            xData: this.data.xDataTotal.slice(8, 12)
          })

        }
      } else if (this.data.someMonthsType == 3) {
        // 最近6个月
        if (this.data.xData[0] == '第1个月') {
          this.setData({
            data1: this.data.data1Total.slice(3, 6),
            data2: this.data.data2Total.slice(3, 6),
            data3: this.data.data3Total.slice(3, 6),
            data4: this.data.data4Total.slice(3, 6),
            xData: this.data.xDataTotal.slice(3, 6)
          })
        }
      } else if (this.data.someMonthsType == 4) {
        // 1年
        if (this.data.xData[0] == '第1个月') {
          this.setData({
            data1: this.data.data1Total.slice(4, 8),
            data2: this.data.data2Total.slice(4, 8),
            data3: this.data.data3Total.slice(4, 8),
            data4: this.data.data4Total.slice(4, 8),
            xData: this.data.xDataTotal.slice(4, 8)
          })
        } else if (this.data.xData[0] == '第5个月') {
          this.setData({
            data1: this.data.data1Total.slice(8, 12),
            data2: this.data.data2Total.slice(8, 12),
            data3: this.data.data3Total.slice(8, 12),
            data4: this.data.data4Total.slice(8, 12),
            xData: this.data.xDataTotal.slice(8, 12)
          })
        }
      }
      this.initA()
    },
  }
})