feats

src/components/Chart/index.jsx

@@ -0,0 +1,36 @@
+import React, { useEffect, useRef, useMemo } from 'react'
+import * as echarts from '@/native/ec-canvas/echarts';
+
+function initChart(canvas, width, height, dpr) {
+  const chart = echarts.init(canvas, null, {
+    width: width,
+    height: height,
+    devicePixelRatio: dpr // new
+  });
+  canvas.setChart(chart);
+  return chart;
+}
+
+export default (props) => {
+  const { options } = props
+  const chartRef = useRef()
+  const ec = useMemo(() => {
+    const onInit = (...args) => {
+      const chart = initChart(...args)
+      chartRef.current = chart
+      return chart
+    }
+
+    return { onInit }
+  }, [])
+
+  useEffect(() => {
+    if (options && chartRef.current) {
+      chartRef.current.setOption(options);
+    }
+  }, [options])
+
+  return (
+    <ec-canvas ec={ec} />
+  )
+}

src/constants/api.js

@@ -303,5 +303,8 @@ export const API_CHANNEL_RANK = resolvePath('ranklist')
 // 获取报备客户详情
 export const API_CHANNEL_CUSTOMER_DETAIL = resolvePath('channelCustomer')
 
-// 获取渠道折线图
+// 渠道-折线图
 export const API_CHANNEL_LINE_CHAT = resolvePath('briefing/detail')
+
+// 渠道-销售简报
+export const API_CHANNEL_STAT_REPORT = resolvePath('briefing')

src/pages/mine/partnerChannel/components/LineChat.jsx

@@ -1,111 +1,37 @@
-import React, { useEffect, useRef, useState, useMemo } from 'react'
-import Taro from '@tarojs/taro'
-import * as echarts from '@/native/ec-canvas/echarts';
-import { getChannelLineChat } from '@/services/agent'
-
-function initChart(canvas, width, height, dpr) {
-  const chart = echarts.init(canvas, null, {
-    width: width,
-    height: height,
-    devicePixelRatio: dpr // new
-  });
-  canvas.setChart(chart);
-
-  // var option = {
-  //   xAxis: {
-  //     type: 'category',
-  //     boundaryGap: false,
-  //     data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-  //     // show: false
-  //   },
-  //   yAxis: {
-  //     x: 'center',
-  //     type: 'value',
-  //     splitLine: {
-  //       lineStyle: {
-  //         type: 'dashed'
-  //       }
-  //     }
-  //     // show: false
-  //   },
-  //   series: [{
-  //     name: 'A',
-  //     type: 'line',
-  //     smooth: true,
-  //     data: [18, 36, 65, 30, 78, 40, 33]
-  //   }, {
-  //     name: 'B',
-  //     type: 'line',
-  //     smooth: true,
-  //     data: [12, 50, 51, 35, 70, 30, 20]
-  //   }, {
-  //     name: 'C',
-  //     type: 'line',
-  //     smooth: true,
-  //     data: [10, 30, 31, 50, 40, 20, 10]
-  //   }]
-  // };
-
-  // chart.setOption(option);
-  return chart;
-}
+import React, { useEffect, useState } from 'react'
+import Chart from '@/components/Chart'
 
 export default (props) => {
-  const { buildingId, xType, dateRange } = props
+  const { dataSource } = props
 
   const [options, setOptions] = useState()
-  const chartRef = useRef()
-  const ec = useMemo(() => {
-    const onInit = (...args) => {
-      const chart = initChart(...args)
-      chartRef.current = chart
-      return chart
-    }
-
-    return { onInit }
-  }, [])
-
-  useEffect(() => {
-    if (buildingId) {
-      const [startDate, endDate] = dateRange
-      getChannelLineChat({
-        buildingId,
-        type: xType,
-        startDate: `${startDate}T00:00:00.000Z`,
-        endDate: `${endDate}T23:59:59.999Z`,
-      }).then((res) => {
-        const { newCustomerDetail } = res
-        const data = [[],[]];
-        (newCustomerDetail || []).forEach((it) => {
-          data[0].push(it.coordinate.substring(5))
-          data[1].push(it.customerNum)
-        })
-        setOptions({
-          xAxis: {
-            type: 'category',
-            data: data[0],
-          },
-          yAxis: {
-            type: 'value',
-          },
-          series: [{
-            type: 'line',
-            smooth: true,
-            data: data[1],
-          }],
-          color: ['#5470c6'],
-        })
-      })
-    }
-  }, [buildingId, dateRange, xType])
 
   useEffect(() => {
-    if (options) {
-      chartRef.current.setOption(options);
-    }
-  }, [options])
+    const data = [[],[]];
+    (dataSource || []).forEach((it) => {
+      const dt = it.coordinate.length >= 10 ? it.coordinate.substring(5) : it.coordinate
+
+      data[0].push(dt)
+      data[1].push(it.customerNum)
+    })
+    setOptions({
+      xAxis: {
+        type: 'category',
+        data: data[0],
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [{
+        type: 'line',
+        smooth: true,
+        data: data[1],
+      }],
+      color: ['#5470c6'],
+    });
+  }, [dataSource])
 
   return (
-    <ec-canvas ec={ec} />
+    <Chart options={options} />
   )
 }

src/pages/mine/partnerChannel/hooks/useChart.js

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react'
+import { getChannelLineChat } from '@/services/agent'
+import { fillTime, cutDays, cutMonths } from '../utils'
+
+const now = new Date()
+
+export default function useReport(buildingId) {
+  const [statType, setStatType] = useState('day')
+  const [custType, setCustType] = useState('new')
+  const [chartData, setChartData] = useState([])
+
+  useEffect(() => {
+    if (buildingId) {
+      const startDate = statType === 'month' ? cutMonths(now, 6) : cutDays(now, 7)
+      getChannelLineChat({
+        buildingId,
+        type: statType,
+        customerType: custType,
+        startDate: fillTime(startDate.toJSON().substring(0, 10), true),
+        endDate: fillTime(now.toJSON().substring(0, 10), false),
+      }).then((res) => {
+        setChartData(res || [])
+      })
+    }
+  }, [buildingId, statType, custType])
+
+  return [statType, setStatType, custType, setCustType, chartData]
+}

src/pages/mine/partnerChannel/hooks/useRank.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react'
+import { getChannelRank } from '@/services/agent'
+import { fillTime } from '../utils'
+
+const now = new Date()
+
+export default function useRank(buildingId) {
+  const [rankDateRange, setRankDateRange] = useState([now.toJSON().substring(0, 10), now.toJSON().substring(0, 10)])
+  const [rankList, setRankList] = useState([])
+
+  useEffect(() => {
+    if (buildingId) {
+      const [startDate, endDate] = rankDateRange
+      getChannelRank({
+        buildingId,
+        startDate: fillTime(startDate, true),
+        endDate: fillTime(endDate, false),
+      }).then((res) => {
+        setRankList(res || [])
+      })
+    }
+  }, [buildingId, rankDateRange])
+
+  return [rankDateRange, setRankDateRange, rankList]
+}

src/pages/mine/partnerChannel/hooks/useReport.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react'
+import { getChannelStatReport } from '@/services/agent'
+import { fillTime } from '../utils'
+
+const now = new Date()
+
+export default function useReport(buildingId) {
+  const [reportDateRange, setReportDateRange] = useState([now.toJSON().substring(0, 10), now.toJSON().substring(0, 10)])
+  const [reportInfo, setReportInfo] = useState({})
+
+  useEffect(() => {
+    if (buildingId) {
+      const [startDate, endDate] = reportDateRange
+      getChannelStatReport({
+        buildingId,
+        startDate: fillTime(startDate, true),
+        endDate: fillTime(endDate, false),
+      }).then((res) => {
+        setReportInfo(res || {})
+      })
+    }
+  }, [buildingId, reportDateRange])
+
+  return [reportDateRange, setReportDateRange, reportInfo]
+}

src/pages/mine/partnerChannel/index.jsx

@@ -1,34 +1,43 @@
 import React, { useState, useEffect, useRef } from 'react'
 import withLayout from '@/layout'
+import Taro from '@tarojs/taro'
 import { ScrollView, Image } from '@tarojs/components'
-import { getChannelRank } from '@/services/agent'
+import { getChannelRank, getChannelStatReport } from '@/services/agent'
 import { fetch } from '@/utils/request'
 import { API_GET_AGENT_BUILDINGS } from '@/constants/api'
-import {  } from '@/constants/user'
+// import {  } from '@/constants/user'
 import DateRangePicker from '@/components/DateRangePicker'
 import Picker from '@/components/Picker'
 import LineChat from './components/LineChat'
+import useRank from './hooks/useRank'
+import useReport from './hooks/useReport'
+import useChart from './hooks/useChart'
 // import '@/assets/css/iconfont.css'
 import './index.scss'
 
-const lineXDicts = [
+const statTypeDicts = [
   {name: '按天', id: 'day'},
   {name: '按月', id: 'month'},
 ]
-
-const padMonth = m => m > 9 ? m : `0${m}`
+const custTypeDicts = [
+  {name: '新增人员', id: 'new'},
+  {name: '跟进', id: 'follow'},
+  {name: '成交', id: 'success'},
+]
 
 export default withLayout((props) => {
   
   const [showPicker, setShowPicker] = useState(false)
-  const [rankDateRange, setRankDateRange] = useState([])
-  const [reportDateRange, setReportDateRange] = useState([])
+  const pickerTrigger = useRef()
   const [buildingId, setBuildingId] = useState()
   const [buildingList, setBuildingList] = useState([])
-  const [rankList, setRankList] = useState([])
-  const [lineXType, setLineXType] = useState('day')
-  const [lingeDateRange, seteLineDateRange] = useState([])
-  const pickerTrigger = useRef()
+  const [,setRankDateRange, rankList] = useRank(buildingId)
+  const [,setReportDateRange, reportInfo] = useReport(buildingId)
+  const [statType, setStatType, custType, setCustType, chartData] = useChart(buildingId)
+
+  const handleMore = () => {
+    Taro.navigateTo({ url: '/pages/mine/myCustomer/index' })
+  }
 
   const handleRankDate = () => {
     pickerTrigger.current = 'rank'
@@ -60,35 +69,6 @@ export default withLayout((props) => {
     })
   }, [])
 
-  useEffect(() => {
-    if (buildingId) {
-      getChannelRank({buildingId}).then((res) => {
-        setRankList(res || [])
-      })
-    }
-  }, [buildingId])
-
-  useEffect(() => {
-    const now = new Date()
-    const endDay = now.toJSON().substring(0, 10)
-    if (lineXType === 'day') {
-      const cutDay = 7 * 24 * 60 * 60 * 1000
-      const start = new Date(now - cutDay)
-      seteLineDateRange([start.toJSON().substring(0, 10), endDay])
-    } else {
-      const cutMonth = 6
-      const curMonth = now.getMonth() + 1
-      const startMonth = curMonth - cutMonth + 1
-      if (startMonth <= 0) {
-        const startYear = now.getFullYear() - 1
-        seteLineDateRange([`${startYear}-${padMonth(startMonth + 12)}-01`, endDay])
-      } else {
-        seteLineDateRange([`${now.getFullYear()}-${padMonth(startMonth)}-01`, endDay])
-      }
-    }
-    
-  }, [lineXType])
-
   return (
     <view className='Page partnerChannel'>
       <DateRangePicker visable={showPicker} close={() => setShowPicker(false)} change={handlePickerChange} />
@@ -126,7 +106,7 @@ export default withLayout((props) => {
                     </view>
                     <view className='Num'>
                       <text></text>
-                      <text>{item.number}</text>
+                      <text>{`到访 ${item.number||0} 人`}</text>
                     </view>
                   </view>
                 ))
@@ -140,23 +120,23 @@ export default withLayout((props) => {
               <text>销售简报</text>
               <Image mode='heightFix' src={require('../../../assets/mine-icon23.png')} onClick={handleReportDate}></Image>
               <view className='flex-item'></view>
-              <text>更多</text>
+              <text onClick={handleMore}>更多</text>
               <text className='iconfont icon-jiantouright'></text>
             </view>
             <view className='List'>
               <view className='flex-h'>
                 <text className='flex-item'>新增客户</text>
-                <text>34人</text>
+                <text>{`${reportInfo.newCustomerNum||0}人`}</text>
                 <text className='iconfont icon-jiantouright'></text>
               </view>
               <view className='flex-h'>
                 <text className='flex-item'>跟进客户</text>
-                <text>34人</text>
+                <text>{`${reportInfo.followCustomerNum||0}人`}</text>
                 <text className='iconfont icon-jiantouright'></text>
               </view>
               <view className='flex-h'>
                 <text className='flex-item'>成交客户</text>
-                <text>34人</text>
+                <text>{`${reportInfo.successCustomerNum||0}人`}</text>
                 <text className='iconfont icon-jiantouright'></text>
               </view>
             </view>
@@ -168,16 +148,16 @@ export default withLayout((props) => {
               <text>销售趋势</text>
               <view className='flex-item'></view>
               <view className='Type'>
-                <text>新增客户</text>
+                <Picker kv={['name', 'id']} dicts={custTypeDicts} value={custType} onChange={setCustType} />
                 <text className='iconfont icon-sanjiaoxingdown'></text>
               </view>
               <view className='Sort'>
-                <Picker kv={['name', 'id']} dicts={lineXDicts} value={lineXType} onChange={setLineXType} />
+                <Picker kv={['name', 'id']} dicts={statTypeDicts} value={statType} onChange={setStatType} />
                 <text className='iconfont icon-sanjiaoxingdown'></text>
               </view>
             </view>
             <view className='LineChart'>
-              <LineChat buildingId={buildingId} xType={lineXType} dateRange={lingeDateRange} />
+              <LineChat dataSource={chartData} />
             </view>
           </view>
 

src/pages/mine/partnerChannel/utils/index.js

@@ -0,0 +1,43 @@
+
+
+const padMonth = m => m > 9 ? m : `0${m}`
+
+/**
+ * 补齐 ISO 的时间
+ * @param {*} dt 
+ * @param {*} isStart 
+ * @returns 
+ */
+export function fillTime(dt, isStart) {
+  const tm = isStart ? '00:00:00.000' : '23:59:59.999'
+  return `${dt}T${tm}Z`
+} 
+
+/**
+ * 日期减去天数, 并返回结果的凌晨
+ * @param {*} dt 
+ * @param {*} days 
+ * @returns 
+ */
+export function cutDays(dt, days) {
+  const ret = new Date(new Date(dt).valueOf() - days * 24 * 3600 * 1000)
+  return new Date(ret.toJSON().substring(0, 10))
+}
+
+/**
+ * 日期减去月数, 并返回结果月的第一天的凌晨
+ * @param {*} dt 
+ * @param {*} months 
+ * @returns 
+ */
+export function cutMonths(dt, months) {
+  const origin = new Date(dt)
+  const mon = origin.getMonth() + 1
+  const startMonth = mon - months + 1
+  if (startMonth <= 0) {
+    const startYear = origin.getFullYear() - 1
+    return new Date(`${startYear}-${padMonth(startMonth + 12)}-01`)
+  } else {
+    return new Date(`${origin.getFullYear()}-${padMonth(startMonth)}-01`)
+  }
+}

src/services/agent.js

@@ -8,6 +8,7 @@ import {
   API_EDIT_AGENT,
   API_CHANNEL_RANK,
   API_CHANNEL_LINE_CHAT,
+  API_CHANNEL_STAT_REPORT,
 } from '@/constants/api'
 
 
@@ -55,3 +56,10 @@ export const getChannelRank = (payload) => fetch({ url: API_CHANNEL_RANK, payloa
  * @returns 
  */
 export const getChannelLineChat = (payload) => fetch({ url: API_CHANNEL_LINE_CHAT, payload })
+
+/**
+ * 渠道-销售简报
+ * @param {*} payload 
+ * @returns 
+ */
+export const getChannelStatReport = (payload) => fetch({ url: API_CHANNEL_STAT_REPORT, payload })