1 import React, { Component } from 'react';
2 import axios from 'axios';
3 import { Modal, Table } from 'tinper-bee';
4 import echarts from 'echarts/lib/echarts';
5 import 'echarts/lib/chart/bar';
6 import 'echarts/lib/component/tooltip';
7 import 'echarts/lib/component/title';
8 import sort from 'bee-table/build/lib/sort';
9
10 const SortTable = sort(Table);
11
12 class RegionMoneyBar extends Component {
13 constructor(props) {
14 super(props);
15 this.handleClick = this.handleClick.bind(this);
16 this.legendHandleClick = this.legendHandleClick.bind(this);
17 this.openOrClose = this.openOrClose.bind(this);
18 this.state = {
19 totalcontractkey: [],
20 zxtotalcontractvalue: [],
21 fxtotalcontractvalue: [],
22 zxtotalmoney: 0,
23 fxtotalmoney: 0,
24 maxmoney: 100,
25 currregion: '',
26 showdetail: false,
27 content: [],
28 legendselected: {
29 直销: true,
30 分销: true
31 }
32 };
33 // 展示表表头
34 this.columns = [
35 {
36 title: '序号',
37 dataIndex: 'index',
38 key: 'index',
39 render(record, text, index) {
40 return index + 1;
41 }
42 },
43 { title: '产品条码', dataIndex: 'softdog', key: 'softdog' },
44 { title: '机构', dataIndex: 'organizname', key: 'organizname', sorter: (a, b) => a.organizname.localeCompare(b.organizname, 'zh') },
45 { title: '部署模式', dataIndex: 'cloudtype', key: 'cloudtype', sorter: (a, b) => a.cloudtype.localeCompare(b.cloudtype, 'zh') },
46 { title: '直销分销', dataIndex: 'saletype', key: 'saletype', sorter: (a, b) => a.saletype.localeCompare(b.saletype, 'zh') },
47 { title: '客户名称', dataIndex: 'corpname', key: 'corpname', sorter: (a, b) => a.corpname.localeCompare(b.corpname, 'zh') },
48 { title: '行业大类', dataIndex: 'industry', key: 'industry', sorter: (a, b) => a.industry.localeCompare(b.industry, 'zh') },
49 { title: '行业分类', dataIndex: 'industrydetail', key: 'industrydetail', sorter: (a, b) => a.industrydetail.localeCompare(b.industrydetail, 'zh') },
50 { title: '签约金额(万)', dataIndex: 'signmny', key: 'signmny', sorter: (a, b) => a.signmny - b.signmny },
51 { title: '收款金额(万)', dataIndex: 'collectmny', key: 'collectmny', sorter: (a, b) => a.collectmny - b.collectmny },
52 { title: '签约时间', dataIndex: 'billmakedate', key: 'billmakedate' }
53 ];
54 }
55 async componentWillMount() {
56 const res = await axios.post('******', { type: '直销' });
57 const res2 = await axios.post('******', { type: '分销' });
58 if (res.data.success === 'success') {
59 this.setState({
60 totalcontractkey: res.data.detailMsg.data.totalcontractkey,
61 zxtotalcontractvalue: res.data.detailMsg.data.totalcontractvalue,
62 zxtotalmoney: res.data.detailMsg.data.totalmoney,
63 fxtotalcontractvalue: res2.data.detailMsg.data.totalcontractvalue,
64 fxtotalmoney: res2.data.detailMsg.data.totalmoney,
65 maxmoney: res.data.detailMsg.data.maxmoney
66 });
67 const RegionMoneyBarChart = echarts.init(document.getElementById('RegionMoneyBar'));
68 // 绘制图表
69 RegionMoneyBarChart.setOption({
70 title: {
71 text: '本年大区签约情况',
72 left: 'center',
73 y: '10px'
74 },
75 tooltip: {
76 trigger: 'axis',
77 axisPointer: {
78 type: 'shadow'
79 }
80 },
81 legend: {
82 y: '40px',
83 data: [`直销(总计：${this.state.zxtotalmoney}万元)`, `分销(总计：${this.state.fxtotalmoney}万元)`]
84 },
85 calculable: true,
86 xAxis: [
87 {
88 type: 'category',
89 splitLine: {
90 show: false
91 },
92 endOnTick: true,
93 data: this.state.totalcontractkey
94 }
95 ],
96 yAxis: [
97 {
98 type: 'value',
99 max: this.state.maxmoney,
100 splitLine: {
101 show: false
102 }
103 }
104 ],
105 series: [
106 {
107 name: `直销(总计：${this.state.zxtotalmoney}万元)`,
108 type: 'bar',
109 itemStyle: {
110 normal:
111 {
112 label:
113 {
114 show: true,
115 position: 'top'
116 },
117 color: '#F05B61'
118 }
119 },
120 data: this.state.zxtotalcontractvalue
121 },
122 {
123 name: `分销(总计：${this.state.fxtotalmoney}万元)`,
124 type: 'bar',
125 itemStyle: {
126 normal:
127 {
128 label:
129 {
130 show: true,
131 position: 'top'
132 },
133 color: '#28AED1'
134 }
135 },
136 data: this.state.fxtotalcontractvalue
137 }
138 ]
139
140 });
141 RegionMoneyBarChart.on('click', this.handleClick);
142 RegionMoneyBarChart.on('legendselectchanged', this.legendHandleClick);
143 }
144 }
145 handleClick(params) {
146 const legendkeys = Object.keys(this.state.legendselected);
147 let zx = false;
148 let fx = false;
149 const legendselected = this.state.legendselected;
150 legendkeys.forEach((val) => {
151 if (val.indexOf('直销') !== -1) {
152 if (legendselected[val]) {
153 zx = true;
154 }
155 }
156 if (val.indexOf('分销') !== -1) {
157 if (legendselected[val]) {
158 fx = true;
159 }
160 }
161 });
162 let zf = 'ALL';
163 if (zx && !fx) {
164 zf = 'ZX';
165 }
166 if (!zx && fx) {
167 zf = 'FX';
168 }
169 axios.post('*********', { region: params.name, zfdatas: zf }).then((res) => {
170 if (res.data.success === 'success') {
171 this.setState({
172 showdetail: true,
173 currregion: params.name,
174 content: res.data.detailMsg.data
175 });
176 }
177 });
178 }
179 legendHandleClick(params) {
180 this.setState({
181 legendselected: params.selected
182 });
183 }
184 openOrClose() {
185 this.setState({
186 showdetail: false
187 });
188 }
189 render() {
190 return (
191 <div style={{ width: '90%', height: '600px' }}>
192 <div id="RegionMoneyBar" style={{ width: '100%', height: '500px' }} />
193 <Modal show={this.state.showdetail} onHide={this.openOrClose} style={{ width: '90%', height: '600px' }}>
194 <Modal.Header closeButton style={{ padding: '10px' }}>
195 <Modal.Title >
196 {this.state.currregion}
197 </Modal.Title>
198 </Modal.Header >
199 <Modal.Body style={{ padding: '5px' }}>
200 <div style={{ height: '600px', overflowY: 'auto' }}>
201 <SortTable
202 data={this.state.content}
203 columns={this.columns}
204 rowKey="billcode"
205 style={{ margin: '5px' }}
206 />
207 </div>
208 </Modal.Body>
209 </Modal>
210 </div>
211 );
212 }
213 }
214
215 export default RegionMoneyBar;
