|
@@ -1,5 +1,5 @@
|
|
|
import React from 'react';
|
|
|
-import { Button, Spin, message, Table, Row, Col } from 'antd';
|
|
|
+import { Button, Spin, message, Table, Row, Col, Icon } from 'antd';
|
|
|
import ajax from 'jquery/src/ajax/xhr.js';
|
|
|
import $ from 'jquery/src/ajax';
|
|
|
import money from '../../../money.js';
|
|
@@ -11,6 +11,11 @@ import 'echarts/lib/chart/line';
|
|
|
import 'echarts/lib/component/legend';
|
|
|
import 'echarts/lib/component/title';
|
|
|
import 'echarts/lib/component/tooltip';
|
|
|
+import jspdf from 'jspdf';
|
|
|
+import html2canvas from 'html2canvas';
|
|
|
+
|
|
|
+window.html2canvas = html2canvas;
|
|
|
+window.jspdf = jspdf;
|
|
|
|
|
|
import './info.less';
|
|
|
|
|
@@ -38,7 +43,8 @@ const evaluateInfo = React.createClass({
|
|
|
getInitialState() {
|
|
|
return {
|
|
|
loading: true,
|
|
|
- data: null
|
|
|
+ data: null,
|
|
|
+ exporting: false
|
|
|
};
|
|
|
},
|
|
|
//基础资料
|
|
@@ -130,20 +136,18 @@ const evaluateInfo = React.createClass({
|
|
|
title: {
|
|
|
x: 'center',
|
|
|
text: '未来' + NUMBERS[uf.years.length - 1] + '年收入/增长率预测',
|
|
|
- top: 20,
|
|
|
+ top: 3,
|
|
|
textStyle: {
|
|
|
fontSize: 16
|
|
|
}
|
|
|
},
|
|
|
grid: [
|
|
|
- { left: '18%', width: '60%', zlevel: 0 },
|
|
|
- { left: '18%', width: '60%', zlevel: 1 }
|
|
|
+ { left: '18%', width: '73%', zlevel: 0 },
|
|
|
+ { left: '18%', width: '73%', zlevel: 1 }
|
|
|
],
|
|
|
legend: {
|
|
|
data: ['客户预测值', '系统预测值', '调整值'],
|
|
|
- right: '1%',
|
|
|
- top: 'center',
|
|
|
- orient: 'vertical'
|
|
|
+ top: 23
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
@@ -245,7 +249,7 @@ const evaluateInfo = React.createClass({
|
|
|
],
|
|
|
legend: {
|
|
|
data: ['销售收入', '收入分成额'],
|
|
|
- top: '2%'
|
|
|
+ top: 23
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
@@ -286,6 +290,50 @@ const evaluateInfo = React.createClass({
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
+ export() {
|
|
|
+ if (this.state.exporting) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ exporting: true
|
|
|
+ });
|
|
|
+ let width = 595, height = 842;
|
|
|
+ html2canvas(document.getElementsByClassName('report-pages'), {
|
|
|
+ background: '#fff',
|
|
|
+ onrendered: function (canvas) {
|
|
|
+
|
|
|
+ var contentWidth = canvas.width;
|
|
|
+ var contentHeight = canvas.height;
|
|
|
+
|
|
|
+ var pageHeight = contentWidth / width * height;
|
|
|
+
|
|
|
+ var leftHeight = contentHeight;
|
|
|
+
|
|
|
+ var position = 0;
|
|
|
+
|
|
|
+ var imgWidth = width;
|
|
|
+ var imgHeight = width / contentWidth * contentHeight;
|
|
|
+
|
|
|
+ var pageData = canvas.toDataURL('image/jpeg', 1.0);
|
|
|
+
|
|
|
+ var pdf = new jspdf('', 'pt', [width, height]);
|
|
|
+
|
|
|
+ while (leftHeight > 0) {
|
|
|
+ pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
|
|
|
+ leftHeight -= pageHeight;
|
|
|
+ position -= height;
|
|
|
+ if (leftHeight > 0) {
|
|
|
+ pdf.addPage();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ pdf.save('EvaluationReport.pdf');
|
|
|
+ this.setState({
|
|
|
+ exporting: false
|
|
|
+ });
|
|
|
+ }.bind(this)
|
|
|
+ });
|
|
|
+ },
|
|
|
renderData(data) {
|
|
|
let now = new Date(),
|
|
|
nowStr = now.getFullYear() + '年' + getDateValue(now.getMonth() + 1) + '月' + getDateValue(now.getDate()) + '日',
|
|
@@ -298,8 +346,10 @@ const evaluateInfo = React.createClass({
|
|
|
{ dictMap } = this.state, step2 = data.log[1],
|
|
|
step3 = data.log[2],
|
|
|
step7 = data.log[6];
|
|
|
- return <div>
|
|
|
+ return <div className="report-pages">
|
|
|
<div className="report-page">
|
|
|
+ <div className="report-title"> </div>
|
|
|
+ <div className="report-title"> </div>
|
|
|
<div className="report-title">{data.name}</div>
|
|
|
<div className="report-title">
|
|
|
无形资产在线评估
|
|
@@ -367,18 +417,18 @@ const evaluateInfo = React.createClass({
|
|
|
<Table {...tableProps} columns={part3Table.col} dataSource={part3Table.data} footer={part3Table.footer}></Table>
|
|
|
<p> 经查询WIND资讯终端,该行业平均收入增长率约为{data.industryAverageRate}%,若以该增长率进行预测,则系统推荐预测收入及年增长率如下表所示:</p>
|
|
|
<Table {...tableProps} columns={part3Table2.col} dataSource={part3Table2.data}></Table>
|
|
|
+ <p> 针对客户自行预估数据与系统推荐数据,为避免产生过度乐观或过度悲观的偏差,本系统分析后对两者进行调整:</p>
|
|
|
<div className="report-pageno">- 4 -</div>
|
|
|
</div>
|
|
|
<div className="report-page">
|
|
|
- <p> 针对客户自行预估数据与系统推荐数据,为避免产生过度乐观或过度悲观的偏差,本系统分析后对两者进行调整:</p>
|
|
|
<Table {...tableProps} columns={part3Table3.col} dataSource={part3Table3.data}></Table>
|
|
|
<ReactEcharts option={this.getBarChartOption(part3Table, part3Table2, part3Table3)} echarts={echarts} />
|
|
|
<p> 2、剩余期限收入预测</p>
|
|
|
<p> 委托方预估无形资产剩余经济寿命为{data.timeLeft}年,根据评估理论及实务常用经验法则,一般前五年为发展期,五年以后进入稳定期,稳定期的营收增长率将逐渐趋近于行业长期平均成长、多年总体经济成长。</p>
|
|
|
+ <ReactEcharts option={this.getBarChartOption(this.part3Table(data.userForecast, data.timeLeft), this.part3Table(data.sysForecast, data.timeLeft), this.part3Table(data.measuredForecast, data.timeLeft))} echarts={echarts} />
|
|
|
<div className="report-pageno">- 5 -</div>
|
|
|
</div>
|
|
|
<div className="report-page">
|
|
|
- <ReactEcharts option={this.getBarChartOption(this.part3Table(data.userForecast, data.timeLeft), this.part3Table(data.sysForecast, data.timeLeft), this.part3Table(data.measuredForecast, data.timeLeft))} echarts={echarts} />
|
|
|
<p> 三、分成率</p>
|
|
|
<p> 利用分成率测算技术分成额,即以技术产品产生的收入为基础,按一定比例分成确定专有技术的收益。</p>
|
|
|
<p> A、确定待估技术分成率的取值范围</p>
|
|
@@ -388,9 +438,6 @@ const evaluateInfo = React.createClass({
|
|
|
<p> 1、法律因素</p>
|
|
|
<p> (1)法律状态</p>
|
|
|
<p> {dictMap.legalStatus[step2.legalStatus]},取{SCORES[step2.legalStatus - 1]}分。</p>
|
|
|
- <div className="report-pageno">- 6 -</div>
|
|
|
- </div>
|
|
|
- <div className="report-page">
|
|
|
<p> (2)保密性</p>
|
|
|
<p> {dictMap.confidentialities[step2.confidentiality]},取{SCORES[step2.confidentiality - 1]}分。</p>
|
|
|
<p> (3)侵权判定</p>
|
|
@@ -408,6 +455,9 @@ const evaluateInfo = React.createClass({
|
|
|
<p> {dictMap.alternatives[step3.alternatives]},取{SCORES[step3.alternatives - 1]}分。</p>
|
|
|
<p> (6)技术防御力</p>
|
|
|
<p> {dictMap.defensive[step3.defensive]},取{SCORES[step3.defensive - 1]}分。</p>
|
|
|
+ <div className="report-pageno">- 6 -</div>
|
|
|
+ </div>
|
|
|
+ <div className="report-page">
|
|
|
<p> (7)技术产品应用范围</p>
|
|
|
<p> {dictMap.rangeOfApplication[step3.rangeOfApplication]},取{SCORES[step3.rangeOfApplication - 1]}分。</p>
|
|
|
<p> 3、经济因素</p>
|
|
@@ -416,9 +466,6 @@ const evaluateInfo = React.createClass({
|
|
|
<p> (2)独立获利能力</p>
|
|
|
<p> {dictMap.profitability[step3.profitability]},取{SCORES[step3.profitability - 1]}分。</p>
|
|
|
<p> 依循上量化述指标结果,系统配合数据库数据进行运算,得出分成率为{data.profitRate * 100}%</p>
|
|
|
- <div className="report-pageno">- 7 -</div>
|
|
|
- </div>
|
|
|
- <div className="report-page">
|
|
|
<p> 四、折现率</p>
|
|
|
<p> 折现率是将未来的收益折算为现值的系数,它体现了资金的时间价值。此次评估采用国际通用的风险累加法来估测评估中适用的折现率。</p>
|
|
|
<p> 1、无风险报酬率</p>
|
|
@@ -436,13 +483,13 @@ const evaluateInfo = React.createClass({
|
|
|
<p> (5)管理风险</p>
|
|
|
<p> {dictMap.management[step7.management]},取风险系数为{RISK_RATE[step7.management - 1]}。</p>
|
|
|
<p> 根据上述量化指标结果,系统以风险累加法配合数据库数据进行运算和调整,折现率估计值为{data.discountRate * 100}%。</p>
|
|
|
- <div className="report-pageno">- 8 -</div>
|
|
|
+ <div className="report-pageno">- 7 -</div>
|
|
|
</div>
|
|
|
<div className="report-page">
|
|
|
<div className="report-subtitle">第四部分 评估值计算</div>
|
|
|
<p> 根据前述收入预测情况,以及分成率、折现率计算数据,以{data.profitRate * 100}%作为分成率、{data.discountRate * 100}%为折现率,对未来{data.timeLeft}年收入进行分成折现后,得出评估值为{money((data.value / 100 | 0) / 100, 2)}万元</p>
|
|
|
<ReactEcharts option={this.getResultChartOption(data.measuredForecast, data.profitList)} echarts={echarts} />
|
|
|
- <div className="report-pageno">- 9 -</div>
|
|
|
+ <div className="report-pageno">- 8 -</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
},
|
|
@@ -451,6 +498,7 @@ const evaluateInfo = React.createClass({
|
|
|
return (
|
|
|
<Spin spinning={loading}>
|
|
|
<div className="report-container">
|
|
|
+ {data ? <Button icon="file-pdf" className="export" onClick={this.export} loading={this.state.exporting}>导出PDF</Button> : ''}
|
|
|
{
|
|
|
data ?
|
|
|
this.renderData(data) :
|