feat: 添加批量生成

package.json

@@ -9,9 +9,11 @@
   "dependencies": {
     "antd": "^3.26.18",
     "axios": "^0.19.0",
+    "downloadjs": "^1.4.7",
     "dva": "^2.4.1",
     "echarts": "^5.1.2",
     "echarts-for-react": "^3.0.1",
+    "html2canvas": "^1.3.2",
     "lodash": "^4.17.15",
     "lodash.clonedeep": "^4.5.0",
     "lodash.throttle": "^4.1.1",

src/pages/halberd/components/psReport/index.js

@@ -11,6 +11,9 @@ const Page = (props) => {
     setVertical(pressureData.vertical)
   }, [])
 
+  const { saveAsImage = {
+    icon: 'image://https://cdn.weipaitang.com/static/public/20210824acf87486-499f-7486499f-1d32-40d793b1fd05.svg'
+  }} = props
   const options = {
     tooltip: {
       trigger: 'axis',
@@ -24,7 +27,7 @@ const Page = (props) => {
     },
     toolbox: {
       feature: {
-        saveAsImage: {}
+        saveAsImage: saveAsImage
       }
     },
     xAxis: {

src/pages/halberd/viewReport/index.js

@@ -1,11 +1,14 @@
 import React, { Component } from 'react'
-import { Table, PageHeader, Modal, Pagination, Icon } from 'antd'
+import { Table, PageHeader, Modal, Pagination, Icon, Button } from 'antd'
 import get from 'lodash/get'
 import router from 'umi/router'
 import moment from 'moment'
 import { viewReport, eptResponse } from '../service'
 import Styles from './index.less'
 import PsReport from '../components/psReport'
+import html2canvas from 'html2canvas'
+import downloadJS from 'downloadjs'
+
 class Index extends Component {
   state = {
     data: null,
@@ -25,6 +28,8 @@ class Index extends Component {
       params = props.params
     }
     this.state = {
+      selectedRowKeys: [],
+      showMultiPsReportModal: false,
       params: {
         ...params
       }
@@ -300,7 +305,7 @@ class Index extends Component {
   }
 
   render () {
-    const { dataSource, modalDataSource = {}, task = {}, showModal, showPsReportModal, pressureData } = this.state
+    const { dataSource, modalDataSource = {}, task = {}, showModal, showPsReportModal, pressureData, selectedRowKeys, showMultiPsReportModal } = this.state
     const modalColumns = [
       {
         title: '时间',
@@ -341,8 +346,36 @@ class Index extends Component {
         key: 'response'
       }
     ]
+
+    const rowSelection = {
+      selectedRowKeys,
+      onChange: (selectedRowKeys, selectedRows) => {
+        this.setState({ selectedRowKeys })
+      },
+      getCheckboxProps: record => ({
+        disabled: !(Array.isArray(record.pressure_data.cross) && record.pressure_data.cross.length > 0)
+      })
+    }
+    const hasSelected = selectedRowKeys.length > 0
+    const dataSourceMap = (dataSource || []).reduce((acc, dataItem) => {
+      return {
+        ...acc,
+        [dataItem._id]: dataItem
+      }
+    }, {})
+
     return (
       <div>
+        <div style={{ marginBottom: 16 }}>
+          <Button type="primary" onClick={() => {
+            this.setState({ showMultiPsReportModal: true })
+          }} disabled={!hasSelected}>
+            批量查看报告
+          </Button>
+          <span style={{ marginLeft: 8 }}>
+            {hasSelected ? `选中了 ${selectedRowKeys.length} 项` : ''}
+          </span>
+        </div>
         {dataSource && <React.Fragment>
           <PageHeader
             style={{
@@ -355,6 +388,7 @@ class Index extends Component {
           />
           <Table
             columns={this.columns}
+            rowSelection={rowSelection}
             className={Styles.head}
             bordered
             rowKey="_id"
@@ -376,7 +410,46 @@ class Index extends Component {
             this.hiddenPsReport()
           }}
         >
-          <PsReport pressureData={pressureData}/>
+          <PsReport pressureData={pressureData} />
+        </Modal>
+        <Modal
+
+          visible={showMultiPsReportModal}
+          width={900}
+          destroyOnClose
+          closable={false}
+          onCancel={() => {
+            this.setState({
+              showMultiPsReportModal: false
+            })
+          }}
+          onOk={() => {
+            this.setState({
+              showMultiPsReportModal: false
+            })
+          }}
+        >
+
+          <>
+            <div style={{ textAlign: 'right', padding: '20px 80px 20px 0' }}>
+              <img
+                onClick={() => {
+                  html2canvas(document.querySelector('.multiPsReportModal')).then((canvas) => {
+                    downloadJS(canvas.toDataURL('image/png'), '批量图表生成.png')
+                  })
+                }}
+                style={{ width: 16, cursor: 'pointer' }}
+                src="https://cdn.weipaitang.com/static/public/20210824acf87486-499f-7486499f-1d32-40d793b1fd05.svg"
+                alt="" />
+            </div>
+            <div className="multiPsReportModal">
+              {
+                selectedRowKeys.map(selectedRowKey => (
+                  <PsReport pressureData={dataSourceMap[selectedRowKey].pressure_data} saveAsImage={false} />
+                ))
+              }
+            </div>
+          </>
         </Modal>
         <Modal
           visible={showModal}

yarn.lock

@@ -3648,6 +3648,16 @@ base16@^1.0.0:
   resolved "http://npm.wpt.la/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70"
   integrity sha1-4pf2DX7BAUp6lxo568ipjAtoHnA=
 
+base64-arraybuffer@^0.2.0:
+  version "0.2.0"
+  resolved "http://npm.wpt.la/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz#4b944fac0191aa5907afe2d8c999ccc57ce80f45"
+  integrity sha1-S5RPrAGRqlkHr+LYyZnMxXzoD0U=
+
+base64-arraybuffer@^1.0.1:
+  version "1.0.1"
+  resolved "http://npm.wpt.la/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz#87bd13525626db4a9838e00a508c2b73efcf348c"
+  integrity sha1-h70TUlYm20qYOOAKUIwrc+/PNIw=
+
 base64-js@^1.0.2:
   version "1.3.1"
   resolved "http://npm.wpt.la/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
@@ -5050,6 +5060,13 @@ css-has-pseudo@^0.10.0:
     postcss "^7.0.6"
     postcss-selector-parser "^5.0.0-rc.4"
 
+css-line-break@2.0.1:
+  version "2.0.1"
+  resolved "http://npm.wpt.la/css-line-break/-/css-line-break-2.0.1.tgz#3dc74c2ed5eb64211480281932475790243e7338"
+  integrity sha1-PcdMLtXrZCEUgCgZMkdXkCQ+czg=
+  dependencies:
+    base64-arraybuffer "^0.2.0"
+
 css-loader-1@2.0.0:
   version "2.0.0"
   resolved "http://npm.wpt.la/css-loader-1/-/css-loader-1-2.0.0.tgz#4dec481134dc6df3c95a769fbec440138c418fc2"
@@ -5835,6 +5852,11 @@ dotenv@^8.2.0:
   resolved "http://npm.wpt.la/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
   integrity sha1-l+YZJZradQ7qPk6j4mvO6lQksWo=
 
+downloadjs@^1.4.7:
+  version "1.4.7"
+  resolved "http://npm.wpt.la/downloadjs/-/downloadjs-1.4.7.tgz#f69f96f940e0d0553dac291139865a3cd0101e3c"
+  integrity sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw=
+
 draft-js@^0.10.0, draft-js@~0.10.0:
   version "0.10.5"
   resolved "http://npm.wpt.la/draft-js/-/draft-js-0.10.5.tgz#bfa9beb018fe0533dbb08d6675c371a6b08fa742"
@@ -8271,6 +8293,14 @@ html-webpack-plugin@4.0.0-beta.5:
     tapable "^1.1.0"
     util.promisify "1.0.0"
 
+html2canvas@^1.3.2:
+  version "1.3.2"
+  resolved "http://npm.wpt.la/html2canvas/-/html2canvas-1.3.2.tgz#951cc8388a3ce939fdac02131007ee28124afc27"
+  integrity sha1-lRzIOIo86Tn9rAITEAfuKBJK/Cc=
+  dependencies:
+    css-line-break "2.0.1"
+    text-segmentation "^1.0.2"
+
 htmlparser2@^3.10.0, htmlparser2@^3.3.0, htmlparser2@^3.9.1:
   version "3.10.1"
   resolved "http://npm.wpt.la/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
@@ -16751,6 +16781,13 @@ test-exclude@^5.2.3:
     read-pkg-up "^4.0.0"
     require-main-filename "^2.0.0"
 
+text-segmentation@^1.0.2:
+  version "1.0.2"
+  resolved "http://npm.wpt.la/text-segmentation/-/text-segmentation-1.0.2.tgz#1f828fa14aa101c114ded1bda35ba7dcc17c9858"
+  integrity sha1-H4KPoUqhAcEU3tG9o1un3MF8mFg=
+  dependencies:
+    utrie "^1.0.1"
+
 text-table@0.2.0, text-table@^0.2.0:
   version "0.2.0"
   resolved "http://npm.wpt.la/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -17926,6 +17963,13 @@ utils-merge@1.0.1:
   resolved "http://npm.wpt.la/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
+utrie@^1.0.1:
+  version "1.0.1"
+  resolved "http://npm.wpt.la/utrie/-/utrie-1.0.1.tgz#e155235ebcbddc89ae09261ab6e773ce61401b2f"
+  integrity sha1-4VUjXry93ImuCSYatudzzmFAGy8=
+  dependencies:
+    base64-arraybuffer "^1.0.1"
+
 uuid@^3.0.1, uuid@^3.3.2:
   version "3.3.3"
   resolved "http://npm.wpt.la/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"