Browse Source

export pdf

albertshaw 7 years ago
parent
commit
50666b7019

+ 1 - 1
js/component/account/services/evaluate/create.jsx

@@ -28,7 +28,7 @@ const CreateEvaluate = React.createClass({
         if (res && res.data) {
           this.setState({
             loading: true,
-            announce: res.data.content
+            announce: res.data
           })
         }
       }.bind(this)).always(function () {

+ 68 - 20
js/component/account/services/evaluate/info.jsx

@@ -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">&nbsp;</div>
+        <div className="report-title">&nbsp;</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经查询WIND资讯终端,该行业平均收入增长率约为{data.industryAverageRate}%,若以该增长率进行预测,则系统推荐预测收入及年增长率如下表所示:</p>
         <Table {...tableProps} columns={part3Table2.col} dataSource={part3Table2.data}></Table>
+        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;针对客户自行预估数据与系统推荐数据,为避免产生过度乐观或过度悲观的偏差,本系统分析后对两者进行调整:</p>
         <div className="report-pageno">- 4 -</div>
       </div>
       <div className="report-page">
-        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;针对客户自行预估数据与系统推荐数据,为避免产生过度乐观或过度悲观的偏差,本系统分析后对两者进行调整:</p>
         <Table {...tableProps} columns={part3Table3.col} dataSource={part3Table3.data}></Table>
         <ReactEcharts option={this.getBarChartOption(part3Table, part3Table2, part3Table3)} echarts={echarts} />
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2、剩余期限收入预测</p>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;委托方预估无形资产剩余经济寿命为{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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三、分成率</p>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;利用分成率测算技术分成额,即以技术产品产生的收入为基础,按一定比例分成确定专有技术的收益。</p>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A、确定待估技术分成率的取值范围</p>
@@ -388,9 +438,6 @@ const evaluateInfo = React.createClass({
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1、法律因素</p>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1)法律状态</p>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{dictMap.legalStatus[step2.legalStatus]},取{SCORES[step2.legalStatus - 1]}分。</p>
-        <div className="report-pageno">- 6 -</div>
-      </div>
-      <div className="report-page">
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2)保密性</p>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{dictMap.confidentialities[step2.confidentiality]},取{SCORES[step2.confidentiality - 1]}分。</p>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(3)侵权判定</p>
@@ -408,6 +455,9 @@ const evaluateInfo = React.createClass({
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{dictMap.alternatives[step3.alternatives]},取{SCORES[step3.alternatives - 1]}分。</p>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(6)技术防御力</p>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{dictMap.defensive[step3.defensive]},取{SCORES[step3.defensive - 1]}分。</p>
+        <div className="report-pageno">- 6 -</div>
+      </div>
+      <div className="report-page">
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(7)技术产品应用范围</p>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{dictMap.rangeOfApplication[step3.rangeOfApplication]},取{SCORES[step3.rangeOfApplication - 1]}分。</p>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3、经济因素</p>
@@ -416,9 +466,6 @@ const evaluateInfo = React.createClass({
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2)独立获利能力</p>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{dictMap.profitability[step3.profitability]},取{SCORES[step3.profitability - 1]}分。</p>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;依循上量化述指标结果,系统配合数据库数据进行运算,得出分成率为{data.profitRate * 100}%</p>
-        <div className="report-pageno">- 7 -</div>
-      </div>
-      <div className="report-page">
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;四、折现率</p>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;折现率是将未来的收益折算为现值的系数,它体现了资金的时间价值。此次评估采用国际通用的风险累加法来估测评估中适用的折现率。</p>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1、无风险报酬率</p>
@@ -436,13 +483,13 @@ const evaluateInfo = React.createClass({
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(5)管理风险</p>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{dictMap.management[step7.management]},取风险系数为{RISK_RATE[step7.management - 1]}。</p>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据上述量化指标结果,系统以风险累加法配合数据库数据进行运算和调整,折现率估计值为{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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据前述收入预测情况,以及分成率、折现率计算数据,以{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) :

+ 10 - 4
js/component/account/services/evaluate/info.less

@@ -1,9 +1,15 @@
 .report-container {
-  width: 990px;
+  width: 595px;
   margin: auto;
   line-height: 1.5;
   font-size: 14px;
   color: #333;
+  .export {
+    position: fixed;
+    top: 10%;
+    right: 20%;
+    z-index: 2;
+  }
 }
 
 .report-title {
@@ -20,14 +26,14 @@
 }
 
 .report-page {
-  height: 700px;
-  padding: 30px 175px;
+  height: 842px;
+  padding: 5px 50px 25px;
   position: relative;
   p {
     margin: 4px 0;
   }
   .ant-table-wrapper {
-    margin-bottom: 16px;
+    margin-bottom: 12px;
   }
 }
 

+ 4 - 2
package.json

@@ -47,10 +47,12 @@
   "dependencies": {
     "antd": "^2.5.2",
     "echarts": "^3.6.2",
+    "echarts-for-react": "^1.4.4",
+    "html2canvas": "^0.5.0-beta4",
     "jquery": "^3.1.1",
+    "jspdf": "^1.3.3",
     "prop-types": "^15.5.10",
     "react": "^15.4.1",
-    "react-dom": "^15.4.1",
-    "echarts-for-react": "^1.4.4"
+    "react-dom": "^15.4.1"
   }
 }