crm-mobile/pages_crm/statistics/customer.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar title="客户统计" />

      <view class="filter-tab">
        <view class="filter-box user" @click="handleOpenFilter('userOrDept')">
          <text class="text">
            {{ filterDataTypeLabel }}
          </text>
          <text class="icon" />
        </view>
        <view class="line" />
        <view class="filter-box time" @click="handleOpenFilter('time')">
          <text class="text">
            {{ filterTimeLabel }}
          </text>
          <text class="icon" />
        </view>
      </view>

      <scroll-view
        scroll-y
        class="container">
        <view class="statistics">
          <view class="row">
            <view class="column">
              <view class="text">
                <text class="number">
                  {{ statisticsData.allCustomer }}
                </text>
                <text class="unit">
                  个
                </text>
              </view>
              <view class="desc">
                新增客户数
              </view>
            </view>
            <view class="line" />
            <view class="column">
              <view class="text">
                <text class="number">
                  {{ statisticsData.dealCustomer }}
                </text>
                <text class="unit">
                  个
                </text>
              </view>
              <view class="desc">
                成交客户数
              </view>
            </view>
          </view>

          <view class="row">
            <view class="column">
              <view class="text">
                <text class="number">
                  {{ statisticsData.activityNum }}
                </text>
                <text class="unit">
                  个
                </text>
              </view>
              <view class="desc">
                跟进客户数
              </view>
            </view>
            <view class="line" />
            <view class="column">
              <view class="text">
                <text class="number">
                  {{ statisticsData.putInPoolNum }}
                </text>
                <text class="unit">
                  个
                </text>
              </view>
              <view class="desc">
                进入公海客户数
              </view>
            </view>
          </view>

          <view class="row">
            <view class="column">
              <view class="text">
                <text class="number">
                  {{ statisticsData.receiveNum }}
                </text>
                <text class="unit">
                  个
                </text>
              </view>
              <view class="desc">
                公海池领取客户数
              </view>
            </view>
            <view class="line" />
            <view class="column" style="visibility: hidden;" />
          </view>
        </view>
      </scroll-view>

      <uni-popup
        ref="filterPopup"
        :mask-click="filterPopupMaskFlag"
        radius="20rpx 20rpx 0 0"
        type="bottom"
        @mask-close="filterMaskClick">
        <workbench-filter
          ref="workbenchFilter"
          :filter-data="filterObj"
          :default-tab="filterDefaultTab"
          @popup-change="childPopupChange"
          @change="handleChangeFilter"
          @close="handleCloseFilter" />
      </uni-popup>
    </view>
  </view>
</template>

<script>
  import { QueryDataInfo } from 'API/crm/work'
  import WorkbenchFilter from '@/components/base/workbench-filter.vue'

  import mixins from './mixins.js'
  import uCharts from '@/components/u-charts/u-charts.js'

  let customerStatisticsChart = null

  export default {
    name: 'CustomerStatistics',
    components: {
      WorkbenchFilter
    },
    mixins: [mixins],
    data() {
      return {
        statisticsData: {}
      }
    },
    mounted() {
      const _self = this;
      // #ifdef MP-ALIPAY
      uni.getSystemInfo({
        success: function(res) {
          if (res.pixelRatio > 1) {
            // 正常这里给2就行，如果pixelRatio=3性能会降低一点
            // _self.pixelRatio =res.pixelRatio;
            _self.pixelRatio = 2;
          }
        }
      });
      // #endif
      this.cWidth = uni.upx2px(686)
      this.cHeight = uni.upx2px(450)
      this.getData()
    },
    methods: {
      getData() {
        if (this.loading) return
        this.loading = true
        QueryDataInfo({
					...this.filterData
        }).then(res => {
          this.loading = false
          this.statisticsData = res
        }).catch(() => {
          this.loading = false
        })

        // const data = [
        // 	{ type: '3-11', money: '500', achievement: '355' },
        // 	{ type: '3-12', money: '550', achievement: '2255' },
        // ]
        // this.initChart('customerStatistics', data)
      },

      initChart(canvasId, chartData) {
        const _self = this
        const options = {
          $this: _self,
          canvasId: canvasId,
          width: _self.cWidth * _self.pixelRatio,
          height: _self.cHeight * _self.pixelRatio,
          type: 'column',
          pixelRatio: _self.pixelRatio,
          background: '#FFFFFF',
          fontSize: 11,
          animation: true,
          dataLabel: false,
          padding: [15, 0, 0, 0],
          legend: { // 图例
            show: true,
            position: 'bottom',
            float: 'center'
          },
          xAxis: {
            axisLine: false,
            disableGrid: true,
            itemCount: 9,
            scrollShow: true,
            scrollAlign: 'left'
          },
          yAxis: {
            gridType: 'dash',
            min: 0
          },
          enableScroll: true,
          extra: {
            column: {
              type: 'group',
              width: 15
            }
          },
          categories: chartData.map(o => o.type),
          series: [
            {
              name: '成交客户',
              color: '#6ca2ff',
              data: chartData.map(o => o.money),
              type: 'column'
            },
            {
              name: '新增客户',
              color: '#FF7300',
              data: chartData.map(o => o.achievement),
              type: 'column'
            },
          ]
        }

        // #ifdef MP-WEIXIN
        this.$nextTick(function() {
          const query = uni.createSelectorQuery().in(this)
          query.select('#' + canvasId)
            .fields({ node: true, size: true })
            .exec(res => {
              // console.log('res: ', res[0])
              const data = res[0]
              const canvas = res[0].node
              const ctx = canvas.getContext('2d')
              options.context = ctx
              options.canvas2d = true
              const dpr = wx.getSystemInfoSync().pixelRatio
              options.width = _self.cWidth * dpr
              options.height = _self.cHeight * dpr
              options.pixelRatio = dpr
              options.extra.column.width = options.extra.column.width * dpr
              canvas.width = options.width
              canvas.height = options.height
              // eslint-disable-next-line new-cap
              customerStatisticsChart = new uCharts(options)
            })
        })
        // #endif
        // #ifndef MP-WEIXIN
        // eslint-disable-next-line new-cap
        customerStatisticsChart = new uCharts(options)
        // #endif
      },

      touchMix(e) {
        customerStatisticsChart.scrollStart(e);
      },
      moveMix(e) {
        customerStatisticsChart.scroll(e);
      },
      touchEndMix(e) {
        customerStatisticsChart.scrollEnd(e);
        customerStatisticsChart.touchLegend(e);
        // 下面是toolTip事件，如果滚动后不需要显示，可不填写
        customerStatisticsChart.showToolTip(e, {
          format: function(item, category) {
            // console.log(item)
            return category + ' ' + item.name + '：' + item.data + '个'
          }
        });
      }
    }
  }
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>