react文件

/**
 *  @Author: qeqweqwqwqwe
 *  @Date:  2030/1/8 10:35
 *  @Description: 统计概览
 *
 */

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Link } from 'react-router';

import { showMsg } from 'ActionsFolder/CommonActions';
import * as WxGroupActions from 'ActionsFolder/WxGroupActions';

import Utils from 'UtilsFolder/utils';
import FormItem from 'UIComponentFolder/FormComponent/FormItem';
import TableComponent from 'UIComponentFolder/Table/TableComponent';
import DateOptionList from 'PageComponentFolder/DateOptionList/DateOptionList';
import PersonalChart from './PersonalChart';
import PieCharts from './PieCharts';

import './Overview.scss';

class Overview extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timeCode: 'HOURS',
      timeCode2: 'HOURS'
    };
    this.daysOption = {
      startDate: '',
      endDate: ''
    };
    this.columns1 = [
      {
        key: 'nickName',
        title: '个人号',
        render: ({ item }) => {
          return (<span>{item.nickName}</span>);
        }
      },
      {
        key: 'subject',
        title: '类型',
        render: ({ item }) => {
          if(item.agentRobot === 0) {
            return <span>{item.largeTempletName || '--'}</span>;
          } else {
            return (
              <div>
                <p>{item.agentName}</p>
                <span>
                  {item.subject || '--'}{item.grade ? ';' : ''}{item.grade}
                </span>
              </div>
            );
          }
        }
      },
      {
        key: 'friendCount',
        title: '当前好友数量',
        render: ({ item }) => {
          return (<span>{item.friendCount || '--'}</span>);
        }
      }
    ];
    this.columns2 = [
      {
        key: 'agentName',
        title: '出版社',
        render: ({ item }) => {
          return (<span>{item.agentName || '--'}</span>);
        }
      },
      {
        key: 'count',
        title: '个人号社群书数量',
        render: ({ item }) => {
          return (<span>{item.count}</span>);
        }
      }
    ];
  }

  /**
   * 获取首页头部数据信息
   */
  getHeaderDataInfo() {
    const {
      WxGroupActions: {
        getAddFriendCount,
        getBookGroupCountByJoinGroupType,
        getStatisticOverview,
        getUserCountByJoinGroupType,
        getClassifyCountByJoinGroupType
      }
    } = this.props;
    getAddFriendCount();//获取个人号累计加好友人数
    getBookGroupCountByJoinGroupType({ joinGroupType: 2 });//根据类型获取社群书数量
    getStatisticOverview();//累计扫码人数、进群率、人均发消息量
    getUserCountByJoinGroupType({ joinGroupType: 2 });//根据类型获取当前群总人数
    getClassifyCountByJoinGroupType({ joinGroupType: 2 });//根据类型获取分类数量

  }

  /**
   * 获取个人号加好友人数趋势数据
   */
  getAddFriendCountByTime(startTime, endTime, timeType) {
    const { WxGroupActions: { getAddFriendCountByTime }} = this.props;
    getAddFriendCountByTime({
      startTime,
      endTime,
      timeType
    });
  }

  /**
   * 获取个人号/读者发消息趋势
   */
  getSendMessageTrend(startDate, endDate, inHour, isRobot) {
    const { WxGroupActions: { getSendMessageTrend }} = this.props;
    getSendMessageTrend({
      startDate,
      endDate,
      inHour: Boolean(inHour),
      isRobot: Boolean(isRobot)
    });
  }

  /**
   * 获取读者行为趋势-资源服务点击人数
   */
  getAppClickByTime(startTime, endTime, timeType) {
    const { WxGroupActions: { getAppClickByTime }} = this.props;
    getAppClickByTime({
      startTime,
      endTime,
      timeType,
      joinGroupType: 2
    });
  }

  /**
   * 获取读者行为趋势-资源服务购买人数
   */
  getBookGroupSaleTrend(startTime, endTime, timeType) {
    const { WxGroupActions: { getBookGroupSaleTrend }} = this.props;
    getBookGroupSaleTrend({
      startTime,
      endTime,
      timeType
    });
  }

  // 初始化时，取小时数据
  initFetchData() {
    const st = new Date();
    const et = st - 24 * 3600 * 1000;
    const startTime = this.formatterTime(et);
    const endTime = this.formatterTime(st);
    this.getAddFriendCountByTime(startTime, endTime, 2);
    this.getSendMessageTrend(startTime, endTime, 1, 1);
  }

  initFetchData2() {
    const st = new Date();
    const et = st - 24 * 3600 * 1000;
    const startTime = this.formatterTime(et);
    const endTime = this.formatterTime(st);
    this.getAppClickByTime(startTime, endTime, 2);
    this.getSendMessageTrend(startTime, endTime, 1, 0);
    this.getBookGroupSaleTrend(startTime, endTime, 2);
  }

  // 切换时间，更新图表
  onDayTypeChange=(startDate, endDate, timeCode) => {
    this.setState({
      timeCode: timeCode
    });
    if(timeCode === 'HOURS') {
      this.initFetchData();
      return;
    }
    const { showMsg } = this.props, currentDate = Utils.date2string(new Date(), undefined, true);
    if(!!endDate && Utils.compareTime(currentDate, endDate.slice(0, 10)) < 0) {
      showMsg('结束时间应该小于等于今天');
      return;
    }
    Utils.searchAssign(this.daysOption, {
      startDate: startDate,
      endDate: endDate
    });
    this.getAddFriendCountByTime(startDate, endDate, timeCode === 'HOURS' ? 2 : 1);
    this.getSendMessageTrend(startDate, endDate, timeCode === 'HOURS', 1);
  }

  // 切换时间，更新图表
  onDayTypeChange2(startDate, endDate, timeCode) {
    this.setState({
      timeCode2: timeCode
    });
    if(timeCode === 'HOURS') {
      this.initFetchData2();
      return;
    }
    const { showMsg } = this.props, currentDate = Utils.date2string(new Date(), undefined, true);
    if(!!endDate && Utils.compareTime(currentDate, endDate.slice(0, 10)) < 0) {
      showMsg('结束时间应该小于等于今天');
      return;
    }
    Utils.searchAssign(this.daysOption, {
      startDate: startDate,
      endDate: endDate
    });
    this.getAppClickByTime(startDate, endDate, timeCode === 'HOURS' ? 2 : 1, 1);
    this.getSendMessageTrend(startDate, endDate, timeCode === 'HOURS', 0);
    this.getBookGroupSaleTrend(startDate, endDate, timeCode === 'HOURS' ? 2 : 1);
  }

  //将时间戳转化为时间格式字符串
  formatterTime(time) {
    let { Y, M, D, h, min, s } = Utils.getDate(time);
    M = M < 10 ? '0' + (M + 1) : (M + 1);
    D = D < 10 ? '0' + D : D;
    h = h < 10 ? '0' + h : h;
    min = min < 10 ? '0' + min : min;
    s = s < 10 ? '0' + s : s;
    return `${Y}-${M}-${D} ${h}:${min}:${s}`;
  }

  //获取出版社创建社群书数量排行
  getTopAgentCreateBookList(isSpecial) {
    const { WxGroupActions: { getTopAgentCreateBookGroup }} = this.props;
    getTopAgentCreateBookGroup({
      isSpecial,
      joinGroupType: 2,
      top: 5
    });
  }

  //个人号好友数量排行
  getFriendCountTop5(isSpecial) {
    const { WxGroupActions: { getFriendCountTop5 }} = this.props;
    getFriendCountTop5({
      isSpecial
    });
  }

  //获取个人号读者画像-地域分布
  getAreaDistribution(largeTemplate) {
    const { WxGroupActions: { getAreaDistribution }} = this.props;
    getAreaDistribution({
      largeTemplet: largeTemplate
    });
  }

  //获取个人号读者专业或深度分布
  getUserLabelDistribution(largeTemplate, type) {
    const { WxGroupActions: { getUserLabelDistribution }} = this.props;
    getUserLabelDistribution({
      largeTemplet: largeTemplate,
      type
    });
  }

  //更改个人号用户画像类别下拉框
  userTypeChange(value) {
    this.getAreaDistribution(value);
    this.getUserLabelDistribution(value, 1);
    this.getUserLabelDistribution(value, 2);
  }

  //选择是否是定制个人号 或 出版社
  checkBoxOnClick(value, type) {
    if(type === 1) {
      this.getFriendCountTop5(value[0] === 1);
    } else {
      this.getTopAgentCreateBookList(value[0] === 1);
    }
  }

  componentDidMount() {
    this.getHeaderDataInfo();
    this.initFetchData();
    this.initFetchData2();
    this.getTopAgentCreateBookList(false);
    this.getFriendCountTop5(false);
    this.getAreaDistribution(1);
    this.getUserLabelDistribution(1, 1);
    this.getUserLabelDistribution(1, 2);
  }

  render() {
    const {
      addFriendCount,
      statisticOverview: { avgMsgCount, joinGroupRate, scanUserCount, currentFriendCount },
      groupBookCount,
      userCount,
      groupClassifyCount,
      addFriendChart,
      sendMessageChart,
      topAgentCreateBookList,
      topFriendCountList,
      getAreaDistribution,
      getUserLabelDistribution,
      getUserLabelDistribution2,
      appClickByTime,
      sendMessageByUser,
      bookGroupSalesCountList
    } = this.props;
    const { timeCode, timeCode2 } = this.state;
    /*个人号流量趋势处理数据*/
    const addFriendChartList = addFriendChart.length && addFriendChart.map(v => v.count);
    const sendMessageList = sendMessageChart.length && sendMessageChart.map(v => v.count);
    const seriesData = areaChartData(addFriendChartList, sendMessageList);
    /*读者行为趋势处理数据*/
    const appClickByTimeList = appClickByTime.length && appClickByTime.map(v => v.count);
    const sendMessageByUserList = sendMessageByUser.length && sendMessageByUser.map(v => v.count);
    const bookGroupSalesCountListCopy = bookGroupSalesCountList.length && bookGroupSalesCountList.map(v => v.count);
    const seriesData2 = areaChartData2(sendMessageByUserList, appClickByTimeList, bookGroupSalesCountListCopy);
    let headerInfo = [
      [groupBookCount, '个人号社群书数量'],
      [scanUserCount || '--', '累积扫码人数'],
      [addFriendCount, '累积加好友人数'],
      [currentFriendCount || '--', '当前好友人数'],
      [groupClassifyCount, '群分类总数量'],
      [joinGroupRate ? `${joinGroupRate}%` : '--', '进群率'],
      [userCount, '当前群总人数'],
      [avgMsgCount || '--', '人均发消息量']
    ];
    return (
      <div className="Overview">
        <header className="header-content">
          {
            headerInfo.map(item => {
              return (
                <div className="header-item" key={item[1]}>
                  <div className="statistics-number">{item[0]}</div>
                  <div className="header-title">{item[1]}</div>
                </div>
              );
            })
          }
        </header>
        <ul className="row">
          <li className="li-col col-lg-6 col-md-6 col-sm-12">
            <div className="li-part">
              <div className="chart-title"><i className="title-icon" />个人号流量趋势</div>
              <div className="chart-filter">
                <DateOptionList
                  title="时间"
                  timeCode={timeCode}
                  searchDate={this.daysOption.startDate ? [this.daysOption.startDate, this.daysOption.endDate] : undefined}
                  onChange={this.onDayTypeChange}
                />
              </div>
              <div className="chart-item">
                <PersonalChart
                  areaChartData={seriesData}
                  yText="数量"
                  ratio="496px"
                  timeCode={timeCode}
                  xStartTime={ timeCode === 'HOURS' ? new Date(addFriendChart[0] && addFriendChart[0].beginTime) : this.daysOption.startDate}
                />
              </div>
            </div>
          </li>
          <li className="li-col col-lg-6 col-md-6 col-sm-12">
            <div className="li-part">
              <div className="chart-title"><i className="title-icon" />读者行为趋势</div>
              <div className="chart-filter">
                <DateOptionList
                  title="时间"
                  timeCode={timeCode2}
                  searchDate={this.daysOption.startDate ? [this.daysOption.startDate, this.daysOption.endDate] : undefined}
                  onChange={::this.onDayTypeChange2}
                />
              </div>
              <div className="chart-item">
                <PersonalChart
                  areaChartData={seriesData2}
                  yText="数量"
                  ratio="496px"
                  timeCode={timeCode2}
                  xStartTime={ timeCode2 === 'HOURS' ? new Date(sendMessageByUser[0] && sendMessageByUser[0].beginTime) : sendMessageByUser[0] && sendMessageByUser[0].date}
                />
              </div>
            </div>
          </li>
        </ul>
        <ul className="row">
          <li className="li-col col-lg-6 col-md-6 col-sm-12">
            <div className="li-part">
              <div className="chart-title">
                <i className="title-icon" />个人号好友数量Top5
                <FormItem type="checkbox" options={checkOptions} itemClass="inline-block ml30 isSpecial" onChange={(value) => this.checkBoxOnClick(value, 1)} />
                <Link to="/platform/personalStatistics/personal" className="showMore right">更多<i className="ic ic-right" /></Link>
              </div>
              <div className="table-item">
                <TableComponent
                  columns={this.columns1}
                  data={topFriendCountList}
                />
              </div>
            </div>
          </li>
          <li className="li-col col-lg-6 col-md-6 col-sm-12">
            <div className="li-part">
              <div className="chart-title">
                <i className="title-icon" />出版社社群书数量Top5
                <FormItem type="checkbox" options={checkOptions2} itemClass="inline-block ml30 isSpecial" onChange={(value) => this.checkBoxOnClick(value, 2)} />
                <Link to="/platform/personalStatistics/publish" className="showMore right">更多<i className="ic ic-right" /></Link>
              </div>
              <div className="table-item">
                <TableComponent
                  columns={this.columns2}
                  data={topAgentCreateBookList}
                />
              </div>
            </div>
          </li>
        </ul>
        <div className="user-draw-part">
          <div className="chart-title">
            <i className="title-icon" />个人号读者画像
            <FormItem type="select" value={1} options={SELECT_TYPE_LIST} itemClass="inline-block ml30 user-type-select" className="w210" onChange={(value) => this.userTypeChange(value)} />
          </div>
          <ul className="row">
            <li className="li-col col-lg-4 col-md-4 col-sm-12">
              <PieCharts
                data={getUserLabelDistribution}
                title="专业分布"
              />
            </li>
            <li className="li-col col-lg-4 col-md-4 col-sm-12">
              <PieCharts
                data={getUserLabelDistribution2}
                title="深度分布"
              />
            </li>
            <li className="li-col col-lg-4 col-md-4 col-sm-12">
              <PieCharts
                data={getAreaDistribution}
                title="地域分布"
              />
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  const {
    personalAccountInfo: { addFriendCount, statisticOverview, groupBookCount, userCount, groupClassifyCount },
    addFriendChart,
    sendMessageChart,
    topAgentCreateBookList,
    topFriendCountList,
    getAreaDistribution,
    getUserLabelDistribution,
    getUserLabelDistribution2,
    appClickByTime,
    sendMessageByUser,
    bookGroupSalesCountList
  } = state.wxGroup.toJS();
  return {
    addFriendCount,
    statisticOverview,
    groupBookCount,
    userCount,
    groupClassifyCount,
    addFriendChart,
    sendMessageChart,
    topAgentCreateBookList,
    topFriendCountList,
    getAreaDistribution,
    getUserLabelDistribution,
    getUserLabelDistribution2,
    appClickByTime,
    sendMessageByUser,
    bookGroupSalesCountList
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    showMsg: bindActionCreators(showMsg, dispatch),
    WxGroupActions: bindActionCreators(WxGroupActions, dispatch)
  };
};

module.exports = connect(
  mapStateToProps,
  mapDispatchToProps
)(Overview);

const areaChartData = (data, arr) => {
  return {
    series: [
      {
        name: '加好友人数',
        color: '#bca9ed',
        data: data
      },
      {
        name: '已发消息数量',
        color: '#f5d279',
        data: arr
      }
    ]
  };
};
const areaChartData2 = (data, arr, list) => {
  return {
    series: [
      {
        name: '向个人号发送消息数量',
        color: '#bca9ed',
        data: data
      },
      {
        name: '资源服务点击人数',
        color: '#f5d279',
        data: arr
      },
      {
        name: '资源服务购买人数',
        color: '#f5a9d4',
        data: list
      }
    ]
  };
};
const checkOptions = [
  {
    id: 1,
    value: '只看定制个人号'
  }
];
const checkOptions2 = [
  {
    id: 1,
    value: '只看定制出版社'
  }
];
const SELECT_TYPE_LIST = [
  {
    id: 1,
    value: 'K12类'
  },
  {
    id: 2,
    value: '少儿类'
  },
  {
    id: 3,
    value: '高等/职教'
  },
  {
    id: 4,
    value: '大众类'
  },
  {
    id: 5,
    value: '特殊出版社'
  }
];