feats

config/dev.js

@@ -3,8 +3,8 @@ module.exports = {
     NODE_ENV: '"development"'
   },
   defineConstants: {
-    // HOST: '"https://xlk.njyz.tech"',
-    HOST: '"http://127.0.0.1:8081"',
+    HOST: '"https://xlk.njyz.tech"',
+    // HOST: '"http://127.0.0.1:8081"',
     WSS_HOST: '"ws://127.0.0.1:8081"',
     OSS_PATH: '"https://xlk-assets.oss-accelerate.aliyuncs.com/"',
     OSS_FAST_PATH: '"https://xlk-assets.oss-accelerate.aliyuncs.com/"',

src/constants/api.js

@@ -302,3 +302,6 @@ export const API_CHANNEL_RANK = resolvePath('ranklist')
 
 // 获取报备客户详情
 export const API_CHANNEL_CUSTOMER_DETAIL = resolvePath('channelCustomer')
+
+// 获取渠道折线图
+export const API_CHANNEL_LINE_CHAT = resolvePath('briefing/detail')

src/pages/mine/myCustomer/index.jsx

@@ -5,10 +5,10 @@ import '@/assets/css/iconfont.css'
 import { fetch } from '@/utils/request'
 import { API_CLIENT_LIST, API_CHANNEL_CLIENT_LIST } from '@/constants/api'
 import { ROLE_CODE } from '@/constants/user'
-import './index.scss'
+import DatePicker from '@/components/DateRangePicker'
 import MyCustomerListItem from '../components/MyCustomerListItem/index'
-import DatePicker from './components/DatePicker/index'
 import TypePicker from './TypePicker'
+import './index.scss'
 
 export default withLayout((props) => {
   const { person } = props

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

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react'
+import Taro from '@tarojs/taro'
+import * as echarts from '@/components/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 = {
+    title: {
+      text: '测试下面legend的红色区域不应被裁剪',
+      left: 'center'
+    },
+    legend: {
+      data: ['A', 'B', 'C'],
+      top: 50,
+      left: 'center',
+      backgroundColor: 'red',
+      z: 100
+    },
+    grid: {
+      containLabel: true
+    },
+    tooltip: {
+      show: true,
+      trigger: 'axis'
+    },
+    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;
+}
+
+export default (props) => {
+  const { buildingId, xType, dateRange } = props
+
+  const [ec, setEc] = useState()
+
+  useEffect(() => {
+    Taro.nextTick(() => {
+      setEc({
+        onInit: initChart
+      })
+    })
+  }, [])
+
+  useEffect(() => {
+    if (ec) {
+      const [startDate, endDate] = dateRange
+      getChannelLineChat({
+        buildingId,
+        type: xType,
+        startDate: `${startDate}T00:00:00.000Z`,
+        endDate: `${endDate}T23:59:59.999Z`,
+      }).then((res) => {})
+    }
+  }, [ec, buildingId, dateRange, xType])
+
+  return (
+    <ec-canvas ec={ec} />
+  )
+}

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

@@ -1,3 +1,6 @@
 export default {
-  navigationBarTitleText: '合作渠道'
+  navigationBarTitleText: '合作渠道',
+  usingComponents: {
+    'ec-canvas': '@/components/ec-canvas/ec-canvas'
+  }
 }

src/pages/mine/partnerChannel/index.jsx

@@ -1,32 +1,54 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import withLayout from '@/layout'
 import { ScrollView, Image } from '@tarojs/components'
 import { getChannelRank } from '@/services/agent'
 import { fetch } from '@/utils/request'
 import { API_GET_AGENT_BUILDINGS } from '@/constants/api'
-import '@/assets/css/iconfont.css'
+import {  } from '@/constants/user'
+import DateRangePicker from '@/components/DateRangePicker'
+import Picker from '@/components/Picker'
+import LineChat from './components/LineChat'
+// import '@/assets/css/iconfont.css'
 import './index.scss'
 
+const lineXDicts = [
+  {name: '按天', id: 'day'},
+  {name: '按月', id: 'month'},
+]
+
+const padMonth = m => m > 9 ? m : `0${m}`
+
 export default withLayout((props) => {
   
+  const [showPicker, setShowPicker] = useState(false)
+  const [rankDateRange, setRankDateRange] = useState([])
+  const [reportDateRange, setReportDateRange] = useState([])
   const [buildingId, setBuildingId] = useState()
   const [buildingList, setBuildingList] = useState([])
   const [rankList, setRankList] = useState([])
-  const [IsPull, setPull] = useState(false)
-  const [PullTimer, setPullTimer] = useState(null)
+  const [lineXType, setLineXType] = useState('day')
+  const [lingeDateRange, seteLineDateRange] = useState([])
+  const pickerTrigger = useRef()
 
-  const PageRefresh = () => { // 页面下拉刷新回调
-    setPull(true)
+  const handleRankDate = () => {
+    pickerTrigger.current = 'rank'
+    setShowPicker(true)
   }
 
-  useEffect(() => { // 下拉刷新触发
-    if (IsPull) {
-      clearTimeout(PullTimer)
-      setPullTimer(setTimeout(() => {
-        setPull(false)
-      }, 2000))
+  const handleReportDate = () => {
+    pickerTrigger.current = 'report'
+    setShowPicker(true)
+  }
+  
+  const handlePickerChange = (e) => {
+    setShowPicker(false)
+
+    if (pickerTrigger.current == 'rank') {
+      setRankDateRange(e)
+    } else {
+      setReportDateRange(e)
     }
-  }, [IsPull])
+  }
 
   useEffect(() => {
     fetch({ url: API_GET_AGENT_BUILDINGS }).then((res) => {
@@ -46,16 +68,38 @@ export default withLayout((props) => {
     }
   }, [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'>
-      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+      <DateRangePicker visable={showPicker} close={() => setShowPicker(false)} change={handlePickerChange} />
+      <ScrollView scrollY>
         <view className='PageContent'>
 
           {/* 排行榜 */}
           <view className='Ranking'>
             <view className='Top flex-h'>
               <text className='flex-item'>龙虎榜</text>
-              <Image mode='heightFix' src={require('@/assets/mine-icon23.png')}></Image>
+              <Image mode='heightFix' src={require('@/assets/mine-icon23.png')} onClick={handleRankDate} />
             </view>
             <view className='List flex-h'>
               {
@@ -94,7 +138,7 @@ export default withLayout((props) => {
           <view className='SaleNews'>
             <view className='Top flex-h'>
               <text>销售简报</text>
-              <Image mode='heightFix' src={require('../../../assets/mine-icon23.png')}></Image>
+              <Image mode='heightFix' src={require('../../../assets/mine-icon23.png')} onClick={handleReportDate}></Image>
               <view className='flex-item'></view>
               <text>更多</text>
               <text className='iconfont icon-jiantouright'></text>
@@ -128,12 +172,12 @@ export default withLayout((props) => {
                 <text className='iconfont icon-sanjiaoxingdown'></text>
               </view>
               <view className='Sort'>
-                <text>按天</text>
+                <Picker kv={['name', 'id']} dicts={lineXDicts} value={lineXType} onChange={setLineXType} />
                 <text className='iconfont icon-sanjiaoxingdown'></text>
               </view>
             </view>
             <view className='LineChart'>
-              
+              <LineChat buildingId={buildingId} xType={lineXType} dateRange={lingeDateRange} />
             </view>
           </view>
 

src/pages/mine/partnerChannel/index.scss

@@ -189,7 +189,7 @@
               font-size: 0;
               white-space: nowrap;
               margin-left: 20px;
-              >text {
+              >text, picker {
                 display: inline-block;
                 vertical-align: middle;
                 font-size: 30px;

src/services/agent.js

@@ -7,6 +7,7 @@ import {
   API_AGENT_CURRENT,
   API_EDIT_AGENT,
   API_CHANNEL_RANK,
+  API_CHANNEL_LINE_CHAT,
 } from '@/constants/api'
 
 
@@ -41,5 +42,16 @@ export const agentCurrent = payload => fetch({ url: API_AGENT_CURRENT, payload }
  */
 export const editAgent = payload => fetch({ url: `${API_EDIT_AGENT}?name=${payload.name}&&avatar=${payload.avatar}&&phone=${payload.phone}`, method: 'PUT' })
 
-
+/**
+ * 经纪人排行
+ * @param {*} payload 
+ * @returns 
+ */
 export const getChannelRank = (payload) => fetch({ url: API_CHANNEL_RANK, payload })
+
+/**
+ * 渠道折线图
+ * @param {*} payload 
+ * @returns 
+ */
+export const getChannelLineChat = (payload) => fetch({ url: API_CHANNEL_LINE_CHAT, payload })

src/services/news.js

@@ -4,10 +4,10 @@ import {
   API_NEWS_FAVOR,
   API_NEWS_UV,
   // API_NEWS_SHARE,
-  API_HOUSE_SHARE,
-  API_HOUSE_POSTER,
-  API_LIVE_SHARE,
-  API_LIVE_POSTER,
+  // API_HOUSE_SHARE,
+  // API_HOUSE_POSTER,
+  // API_LIVE_SHARE,
+  // API_LIVE_POSTER,
   API_ACTIVITY_GROUP,
   // API_INDEX_SHARE,
 } from '@/constants/api'
@@ -35,7 +35,7 @@ export const addNewsUv = id => fetch({ url: `${API_NEWS_UV}/${id}`, method: 'PUT
  * 房源列表分享埋点（海报）
  * @param {*} id  id
  */
-export const addHousePosterNum = id => fetch({ url: `${API_HOUSE_POSTER}/${id}`, method: 'POST' })
+// export const addHousePosterNum = id => fetch({ url: `${API_HOUSE_POSTER}/${id}`, method: 'POST' })
 /**
  * 房源列表分享埋点（小程序）
  * @param {*} id  id
@@ -45,7 +45,7 @@ export const addHousePosterNum = id => fetch({ url: `${API_HOUSE_POSTER}/${id}`,
  * 直播详情分享埋点（海报）
  * @param {*} id  id
  */
-export const addLivePosterNum = id => fetch({ url: `${API_LIVE_POSTER}/${id}`, method: 'POST' })
+// export const addLivePosterNum = id => fetch({ url: `${API_LIVE_POSTER}/${id}`, method: 'POST' })
 /**
  * 直播详情分享埋点（小程序）
  * @param {*} id  id