123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415 |
- 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;
|