index.js

import React, {Component} from 'react';
import {connect} from 'dva'
import {withRouter} from 'react-router-dom'
import cliess from '../../assets/image/clientless.png'
import echarts from 'echarts/lib/echarts';
import  'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import {Toast, Picker} from 'antd-mobile';
import perform from './Performance.css'
import shareHide from "../../utils/shareHide"
class Performance extends Component {
  constructor(props) {
    super(props)
    this.state = {
      currentIndex: 0,
      itemList : ['当日', '当月', '季度', '年度'],
      dpValue: null,
      customChildValue: null,
      visible: false,
      getFullYear:'',
      getMonth:'',
      arr:[],
      perData:'D',
      performArr:[],
      Xdata:[],
      getseriesData:[],
      getXdata:[],
      intervalDate:'',
      amount:0.00,
    }
    this.setCurrentIndex = this.setCurrentIndex.bind(this)
  }
  // 改变index显示高亮
  setCurrentIndex(index) {
    let _this = this
    this.setState({currentIndex: index},()=>{
      _this.getIndex()
    })
  }
  //个人业绩接口
  getIndex = () =>{
    switch (this.state.currentIndex) {
      case 0:this.setState({perData:'D'},()=>{
        this.performace()
      });
             break;
      case 1:this.setState({perData:'M'},()=>{
        this.performace()
      });
        break;
      case 2:this.setState({perData:'Q'},()=>{
        this.performace()
      });
        break;
      case 3:this.setState({perData:'Y'},()=>{
        this.performace()
      });
        break;
    }
  }
  performace =()=>{
    this.performaceServer()
  }
//个人业绩接口
  performaceServer(){
    let that = this;
    Toast.loading('loading...');
    this.props.dispatch({
      type: 'Performance/performList',
      payload: {
        "daySize": this.state.perData,
        "managerId": localStorage.getItem("id"),
        "roleId": localStorage.getItem("roleId"),
      },
      callback(data){
        Toast.hide();
        that.setState({
          performArr:data
        })
        that.getEchares();//建立新的图表
      },
      error(data){
        Toast.info(data.message)
      }
    })
  }
  //保单请求接口
  filterData = () =>{
    let that = this;
    Toast.loading('loading...');
    this.props.dispatch({
      type: 'Performance/policyList',
      payload: {
        "daySize": "M",
        "customSetDay":this.state.getFullYear+"-"+this.state.getMonth,
        "managerId": localStorage.getItem("id"),
        "roleId": localStorage.getItem("roleId")
      },
      callback(data){
        Toast.hide();
        that.setState({
          arr:data
        })
      },
      error(data){
        Toast.info(data.message)
      }
    })
  }
  //echares图表
  getEchares =()=>{
    let myChart = echarts.init(document.getElementById('main'));
    let { performArr } = this.state
    let Xdata = performArr.achievements;
    let getXdata = [];
    let getseriesData = [];
    let intervalDate=Math.ceil((performArr.achievements)&&(performArr.achievements).length/5)
    Xdata && Xdata.map((item)=>{
        getXdata.push(item.statisticaldate.substr(5));
        getseriesData.push(item.totalprem);
    })
    // console.log(getXdata,intervalDate,getseriesData)
    //此处需要在setOption之前处理dom显隐。否则样式会出问题，setOption是根据父元素的宽高来渲染图标大小
    this.dealDay();

    myChart.setOption({
      xAxis: {
        type: 'category',
        data: getXdata,
        axisLine:{
          show:true,
          onZero:true,
          lineStyle:{
            color: '#fff',
            width: 2,
            type: 'solid',
          }
        },
        axisLabel: {
          interval:intervalDate,
        }
      },
      yAxis: {
        type: 'value',
        axisLine:{       //y轴
          show:false,
          lineStyle:{
            color: '#fff',
            width: 2,
            type: 'solid'
          }
        },
        axisTick:{       //y轴刻度线
          show:false
        },
        splitLine: {     //网格线
          show: true
        },
      },
      series: [{
        data: getseriesData,
        type: 'line',
        areaStyle: {normal: {}},
        // itemStyle: {
        //         normal: {   //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
        //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
        //                     offset: 0, color: '#fff' // 0% 处的颜色
        //                 }, {
        //                     offset: 1, color: '#ffffff40' // 100% 处的颜色
        //                 }]
        //             )
        //         },
        //         emphasis: {  //线条样式
        //         }
        //     }
      }],
      color: {
        colorStops: [{
          offset: 0, color: '#fff' // 0% 处的颜色
        }, {
          offset: 1, color: '#fff' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      },
      grid:{
        x:50,
        y:50,
        x2:10,
        y2:30,
        borderWidth:1
      },
      subtextStyle:{
        fontSize:5
      }
    });
  }
  // 处理月份
  getDate () {
    let arr = [];
    for (let i = 1; i <= 12; i++){
      if(i<10){
        arr.push({ label:'0'+i+'月',value:i})
      }else{
        arr.push({ label:i+'月',value:i})
      }
    }
    return arr;
  }
  // 处理年份
  getYear () {
    let arrYear = [];
    let Dates = new Date();
    let newYear = Dates.getFullYear()
    for(let i = 1999 ; i<= newYear; i++){
      arrYear.push({ label:i+'年',value:i})
    }
    return arrYear
  }

  goHome=()=>{
    this.props.history.push('/home')
  }
  //当按天查询业绩的时候 显示默认图
  dealDay(){
    if(this.state.currentIndex == 0){
      document.getElementById("main").style.display = "none";
      document.getElementById("mainImg").style.display = "block";
    }else{
      document.getElementById("main").style.display = "block";
      document.getElementById("mainImg").style.display = "none";
    }
  }
  componentDidMount() {
    shareHide()
    document.title = '业绩';
    let yearAry = [],monthAry = [];
    let year = new Date().getFullYear(), month = new Date().getMonth()+1;
    yearAry.push(year);
    monthAry.push(month)
    this.setState({
      getFullYear: yearAry,
      getMonth: monthAry
    },()=>{
      this.filterData()
    })

    this.performace()
  }
  componentWillUnmount(){
    document.title = ''
  }
  render() {
    let {itemList,arr,performArr} = this.state;
   let amount  = performArr.amount?parseFloat(performArr.amount).toFixed(2):'0.00';

    return (
      <div className={perform.performWrap}>
        {/*<div className={perform.performtop}>
          <ul>
            <li className={perform.img} onClick={this.goHome}>X</li>
            <li className={perform.text}> 业绩</li>
            <li className={perform.omit}>…</li>
          </ul>
        </div>*/}
        <div className={perform.performContent}>
          <div className={perform.contentTop}>
            <ul className={perform.contentLis}>
              {
                itemList.map ((item,i)=>{
                  return <li
                          key={i}
                          className={this.state.currentIndex === i ? perform.active : ''}
                          index={i}
                          onClick={()=>this.setCurrentIndex(i)}
                          >
                      {itemList[i]}
                  </li>
              })
              }
            </ul>
          </div>
          <div style={{width: '100%',overflow: 'auto'}}>
            <div className={perform.contentEsh}>
              <ul className={perform.itemEsh}>
                <li className={perform.lispan}>我的业绩</li>
                <li className={perform.litext}>{performArr && amount}  <span style={{fontSize:'.2rem',float:'none'}}>元</span> </li>
                <li className={perform.lispan}>{this.state.currentIndex !=0 ? '业绩走势' : ''}&nbsp;</li>
              </ul>
              <div id="main" className={perform.display_block} ></div>
              <img id="mainImg" src={require("../../assets/image/preformance_default.png")} className={perform.display_block_img} />
              {this.state.currentIndex !=0 && <span className={perform.ptext}>该业绩统计以标准保费为口径</span>}
            </div>
            <div className={perform.policy}>
              <p> <span>我的保单</span> <span className={arr.length > 0 ? perform.spantext:perform.action}>该月共<b>{ arr.length }</b>张保单</span></p>
              <div className={perform.allDate}>
                <div className={perform.date_picker_list} style={{ backgroundColor: 'white' }}>
                  <Picker
                    data={this.getYear()}
                    cols={1}
                    value={this.state.getFullYear}
                    onChange={v => {
                      const _this = this;
                      this.setState({ getFullYear: v },()=>{
                        _this.filterData()
                      })
                    }}
                  >
                    <div className={perform.year}>{ this.state.getFullYear +'年'} <span></span></div>
                  </Picker>
                </div>
                <div className={perform.date_picker_list} style={{ backgroundColor: 'white' }}>
                  <Picker
                    data={this.getDate()}
                    cols={1}
                    value={this.state.getMonth}
                    onChange={s => {
                      const _this = this;
                      this.setState({ getMonth: s },()=>{
                        _this.filterData()
                      })
                    }}
                  >
                    <div className={perform.choose}>{ this.state.getMonth < 10 ?'0'+this.state.getMonth +'月':this.state.getMonth +'月'} <span></span></div>
                  </Picker>
                </div>
              </div>
              <div className={ arr.length > 0 ? perform.action:perform.cliessCentext}>
                <img className={perform.cliessImg} src={cliess} alt=""/>
                <p>您该月未开单哦～</p>
              </div>
              {
                arr && arr.length > 0 && arr.map((item,i)=>{
                  return <div className={perform.policyList} key={i}>
                            <ul className={perform.policyUli}>
                            <li className={perform.ulis}><span>保单号：{item.contno}</span><span> {item.insuretime}</span></li>
                            <li className={perform.ulilast}><span>{item.planname}</span><span className={perform.spanPad}><b>{item.firstprem}元</b>首期保费</span></li>
                            </ul>
                            <p>客户：{item.appntname}</p>
                        </div>
                })
              }
            </div>
            </div>
          </div>
        </div>

    );
  }

}
Performance.propsTypes = {}
export default connect(({Performance})=>({Performance}))(withRouter(Performance));