|
|
@@ -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}
|
茅日盛