import React from 'react'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import moment from 'moment'; import '@/manageCenter/financialManage/distribute/public.less'; import { Button, Spin, DatePicker, Radio, message, Icon } from 'antd'; import { getToday, ShowModal } from '@/tools'; import ShowModalDiv from "@/showModal.jsx"; import './index.less'; import ReactEcharts from 'echarts-for-react/lib/core'; import echarts from 'echarts/lib/echarts'; import 'echarts/lib/chart/line'; import 'echarts/lib/component/legend'; import 'echarts/lib/component/title'; import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/toolbox'; import 'echarts/lib/component/grid'; const RadioButton = Radio.Button; const RadioGroup = Radio.Group; const { RangePicker } = DatePicker const Statistics = React.createClass({ getInitialState() { return { status: 1, releaseDate: getToday(1), info: {}, data: {}, htmlMenus: [], } }, componentWillMount() { this.loadData(); this.getData(); this.mainMenu(); }, mainMenu() { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/selectNavList", data: {}, success: function (data) { if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); return; } } let menu = data.data; this.setState({ htmlMenus: menu, }); }.bind(this), }).always( function (data) { this.setState({ loading: false, }); }.bind(this) ); }, loadData() { const { releaseDate } = this.state this.setState({ loading: true, }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/statistics/info", data: { startTime: releaseDate[0], endTime: releaseDate[1], }, success: function (data) { ShowModal(this); this.setState({ loading: false, }); if (data.error && data.error.length === 0) { this.setState({ info: data.data }) } else { message.warning(data.error[0].message); } }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); }, getData() { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/statistics/lists", success: function (data) { if (data.error && data.error.length === 0) { this.setState({ data: data.data, }) } else { message.warning(data.error[0].message); } }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); }, clean() { this.setState({ loading: true, }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/statistics/salesTeam/clean", success: function (data) { if (data.error && data.error.length === 0) { ShowModal(this); this.setState({ loading: false, }); this.loadData(); } else { message.warning(data.error[0].message); } }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); }, search() { this.loadData(); }, reset() { this.state.releaseDate = [] this.loadData(); }, getNewUrl(url, cd) { const { htmlMenus = [] } = this.state let id = '' htmlMenus.map(function (item) { if (item.url == url) { id = item.id; } }); return `${url}?rid=${id}#${cd}` }, isTime(second) { let time = "0秒" if (second > 3600) { time = moment.utc(second * 1000).format('h小时m分s秒') } else if (second > 60) { time = moment.utc(second * 1000).format('m分s秒') } else if (second > 0) { time = moment.utc(second * 1000).format('s秒') } return time }, render() { const { status, info, data } = this.state const list = [ { type: 0, color: "#99FFFF", title: "全部签单客户数:", sum: info.signSum, tit: "签单客户数", number: info.rangeSignSum, url: this.getNewUrl("/admin/customer.html", "companySign") }, { type: 0, color: "#FFFFCC", title: "全部私有客户数:", sum: info.privateSum, tit: "私有客户数", number: info.rangePrivateSum, url: this.getNewUrl("/admin/customer.html", "companyIntention") }, { type: 0, color: "#FFCCCC", title: "全部渠道数:", sum: info.channelSum, tit: "私有渠道数", number: info.rangeChannelSum, url: this.getNewUrl("/admin/channelList.html", "channelunit") }, { type: 0, color: "#99CCFF", title: "全部公出数:", sum: info.publicReleaseSum, tit: "公出企业数", number: info.rangePublicReleaseSum, url: "" }, { type: 0, color: "#99FFCC", title: "全部跟进客户数:", sum: info.followSum, tit: "跟进客户数", number: info.rangeFollowSum, url: this.getNewUrl("/admin/customer.html", "followUpSummaryOrdinary") }, { type: 0, color: "#CC99CC", title: "全部订单数:", sum: info.orderSum, tit: "订单数", number: info.rangeOrderSum, url: this.getNewUrl("/admin/order.html", "billing") }, { type: 0, color: "#99CCCC", title: "全部应收款:", sum: info.receivables, tit: "应收款", number: info.rangeReceivables, url: this.getNewUrl("/admin/order.html", "press") }, { type: 0, color: "#FFCC99", title: "待紧急处理事项", list: [ { key: "被驳回订单:", value: info.rejectSum, url: this.getNewUrl("/admin/order.html", "reject") }, { key: "待变更订单:", value: info.changeSum, url: this.getNewUrl("/admin/order.html", "contractChangeYxy") }, { key: "待核对专利:", value: info.projectCheckSum, url: this.getNewUrl("/admin/project.html", "businessManagement") }, { key: "暂停项目:", value: info.projectStopSum, url: this.getNewUrl("/admin/order.html", "mysuspend") },] }, { type: 1, color: "#FFCC99", title: "本人", list: [ { key: "• 拨出次数:", value: info.callSum, url: "" }, { key: "• 接通次数:", value: info.connectSum, url: "" }, { key: "• 有效次数:", value: info.validSum, url: "" }, { key: "• 时长:", value: this.isTime(info.callDurationSum), url: "" }, ] }, { type: 1, color: "#FFCC99", title: "本团队", list: [ { key: "• 团队人数:", value: info.teamPeopleSum, url: "" }, { key: "• 拨出次数:", value: info.teamCallSum, url: "" }, { key: "• 接通次数:", value: info.teamConnectSum, url: "" }, { key: "• 有效次数:", value: info.teamValidSum, url: "" }, { key: "• 时长:", value: this.isTime(info.teamCallDurationSum), url: "" }, ] } ] const option = { title: { text: '' }, tooltip: { trigger: 'axis' }, legend: { data: ['签单客户数', '私有客户数', '私有渠道数', '公出企业数', '跟进客户数', '订单数',] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, // axisLabel: { // interval: 0, // 设置X轴刻度间隔为0 // }, data: data.dates }, yAxis: { type: 'value' }, color: ['#99FFFF', '#cccca3', '#FFCCCC', '#99CCFF', '#99FFCC', '#CC99CC'], series: [ { name: '签单客户数', type: 'line', data: data.signList, }, { name: '私有客户数', type: 'line', data: data.privateList, }, { name: '私有渠道数', type: 'line', data: data.channelList, }, { name: '公出企业数', type: 'line', data: data.publicReleaseList, }, { name: '跟进客户数', type: 'line', data: data.userFollowList, }, { name: '订单数', type: 'line', data: data.orderList, } ] } return ( <div className="user-content"> <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} /> <div className="content-title" style={{ marginBottom: 10 }}> <span style={{ fontWeight: 900, fontSize: 16 }}>数据统计</span> </div> <div className="user-search"> <RadioGroup value={status} onChange={e => { this.setState({ status: e.target.value }) if (e.target.value == 0) { this.setState({ releaseDate: [] }) } else { this.setState({ releaseDate: getToday(e.target.value) }, () => { this.loadData() }) } }} > <RadioButton value={1}>今日</RadioButton> <RadioButton value={2}>昨日</RadioButton> <RadioButton value={3}>近7日</RadioButton> <RadioButton value={4}>近15日</RadioButton> <RadioButton value={5}>近30日</RadioButton> <RadioButton value={0}>自定义</RadioButton> </RadioGroup> { status == 0 && <span> <RangePicker style={{ width: 200, marginLeft: 15 }} value={[ this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null, this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null, ]} onChange={(data, dataString) => { this.setState({ releaseDate: dataString }) }} /> <Button style={{ margin: "0 15px" }} type="primary" onClick={this.search}>搜索</Button> <Button onClick={this.reset}>重置</Button> </span> } </div> <div className="patent-table"> <Spin spinning={this.state.loading}> <div className='plist'> { list.map((item, index) => { return item.type == 0 ? <div className='plitem' style={{ background: item.color }} key={index}> <div className='plititle'> <span style={{ fontWeight: item.title == "待紧急处理事项" && "bold" }}>{item.title}</span> <a href={globalConfig.context + item.url}> <span className='plisum'>{item.sum}</span> </a> </div> { item.title == "待紧急处理事项" ? <div className='list'> { item.list.map((t, i) => <div key={i}> <span>{t.key}</span> <a href={globalConfig.context + t.url}> <span style={{ textDecoration: "underline", color: "#0000FF" }}>{t.value}</span> </a> </div> ) } </div> : <div className='count'> <a href={globalConfig.context + item.url}><div className='plinum'>{item.number}</div></a> <div className='plitit'>{item.tit}</div> </div> } </div> : (item.type == 1 && item.list[0].value !== null) ? <div className='plitems' style={{ background: item.color }} key={index}> <div className='pleft'> <div className='round'><Icon type="phone" style={{ fontSize: 40, color: "#fff" }} /></div> <div>{item.title}</div> </div> <div> { item.list.map((t, i) => <div key={i}> <span>{t.key}</span> <a href=""> <span style={{ textDecoration: "underline", color: "#0000FF" }}>{t.value}</span> </a> </div> ) } </div> {/* <div className='refresh' onClick={this.clean}>刷新</div> */} </div> : null } ) } </div> </Spin> <ReactEcharts option={option} echarts={echarts} /> </div> </div> ); }, }); export default Statistics;