Commit 37f26610 authored by wangkai's avatar wangkai 🤒
Browse files

first commit

parent d4a80f46
/yarn.lock
/package-lock.json
/dist
/node_modules
/pages
.umi
.umi-production
**/*.md
**/*.svg
**/*.ejs
**/*.html
package.json
.umi
.umi-production
{
"singleQuote": true,
"trailingComma": "all",
"printWidth": 100,
"overrides": [
{
"files": ".prettierrc",
"options": { "parser": "json" }
}
]
}
export default {
plugins: [
[
'umi-plugin-block-dev',
{
layout: 'ant-design-pro',
},
],
[
'umi-plugin-react',
{
antd: true,
dva: true,
locale: true,
},
],
],
};
The MIT License (MIT)
Copyright (c) 2019-present wangkai ()
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
js-export-pdf
\ No newline at end of file
# @umi-blocks/tree-form
左侧为树结构,右侧为树节点详情,左右联动。
可对树节点执行:编辑、删除、添加子级、添加同级操作。
## Usage
```sh
umi block add https://gitlab.rd.virsical.cn/wangkai/tree-form.git --path=/[The directory you placed]
```
## SNAPSHOT
![avatar](/snapshot.png)
## LICENSE
MIT
{
"name": "@umi-block/tree-form",
"version": "0.0.1",
"description": "left tree.right form.",
"main": "src/index.js",
"authors": {
"name": "wangkai",
"email": ""
},
"repository": "umijs/umi-blocks/tree-form",
"scripts": {
"dev": "umi dev"
},
"dependencies": {
"antd": "^3.24.0",
"bizcharts": "^3.5.7",
"dva": "^2.4.1",
"html2canvas": "^1.0.0-rc.5",
"jspdf": "^1.5.3",
"moment-timezone": "^0.5.27",
"react": ">=16.0.0",
"umi-plugin-react": "^1.12.6",
"umi-request": "^1.2.8"
},
"devDependencies": {
"@ant-design/pro-layout": "^4.5.16",
"umi": "^2.9.0",
"umi-plugin-block-dev": "^2.0.0"
},
"license": "MIT"
}
const treeData = [
{
id: 1,
name: '威发',
children: [
{
id: 10,
name: '前端组',
children: [],
parentId: 3,
parentName: '威发',
},
],
parentId: 0,
parentName: '',
},
];
export default {
// 树
'GET /api/BLOCK_NAME_CAMEL_CASE/fetchTreeData': {
code: 0,
msg: 'success',
data: treeData,
},
// 节点
'GET /api/BLOCK_NAME_CAMEL_CASE/fetchNodeData': (req, res) => {
if (req.query.id == 1) {
res.send({
code: 0,
msg: 'success',
data: {
id: 1,
name: '威发',
},
});
} else if (req.query.id == 10) {
res.send({
code: 0,
msg: 'success',
data: {
id: 10,
name: '前端组',
},
});
}
},
// 保存
'POST /api/BLOCK_NAME_CAMEL_CASE/saveNodeData': {
code: 0,
msg: 'success',
data: null,
},
// 更新
'POST /api/BLOCK_NAME_CAMEL_CASE/updateNodeData': {
code: 0,
msg: 'success',
data: null,
},
'POST /api/BLOCK_NAME_CAMEL_CASE/deleteNode': {
code: 0,
msg: 'success',
data: null,
},
};
import React from 'react';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import { Card, Table, Divider, Tag, Button } from 'antd';
import {
G2,
Chart,
Geom,
Axis,
Tooltip,
Coord,
Label,
Legend,
View,
Guide,
Shape,
Facet,
Util,
} from 'bizcharts';
const chartData = [
{
country: 'Asia',
year: '1750',
value: 502,
},
{
country: 'Asia',
year: '1800',
value: 635,
},
{
country: 'Asia',
year: '1850',
value: 809,
},
{
country: 'Asia',
year: '1900',
value: 5268,
},
{
country: 'Asia',
year: '1950',
value: 4400,
},
{
country: 'Asia',
year: '1999',
value: 3634,
},
{
country: 'Asia',
year: '2050',
value: 947,
},
{
country: 'Africa',
year: '1750',
value: 106,
},
{
country: 'Africa',
year: '1800',
value: 107,
},
{
country: 'Africa',
year: '1850',
value: 111,
},
{
country: 'Africa',
year: '1900',
value: 1766,
},
{
country: 'Africa',
year: '1950',
value: 221,
},
{
country: 'Africa',
year: '1999',
value: 767,
},
{
country: 'Africa',
year: '2050',
value: 133,
},
];
const cols = {
value: {
min: 0,
},
year: {
range: [0, 1],
},
};
class Index extends React.Component {
state = {
chartImg: null,
};
down = () => {
const content = document.getElementById('content');
html2canvas(content).then(canvas => {
const contentWidth = canvas.width;
const contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
const pageHeight = (contentWidth / 592.28) * 841.89;
//未生成pdf的html页面高度
const leftHeight = contentHeight;
//页面偏移
const position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
const imgWidth = 595.28;
const imgHeight = (592.28 / contentWidth) * contentHeight;
const pageData = canvas.toDataURL('image/jpeg', 1.0);
const pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('content.pdf');
});
};
render() {
const { chartImg } = this.state;
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: text => <a>{text}</a>,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
{
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
render: tags => (
<span>
{tags.map(tag => {
let color = tag.length > 5 ? 'geekblue' : 'green';
if (tag === 'loser') {
color = 'volcano';
}
return (
<Tag color={color} key={tag}>
{tag.toUpperCase()}
</Tag>
);
})}
</span>
),
},
{
title: 'Action',
key: 'action',
render: (text, record) => (
<span>
<a>Invite {record.name}</a>
<Divider type="vertical" />
<a>Delete</a>
</span>
),
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
return (
<div>
<Card bordered={false} style={{ marginBottom: 16 }}>
<Button onClick={() => this.down()}>下载</Button>
</Card>
<div id="content" style={{ backgroundColor: '#F0F2F5' }}>
<Card bordered={false} title="tabel" style={{ marginBottom: 16 }}>
<Table dataSource={data} columns={columns} pagination={false} />
</Card>
<Card bordered={false} title="tabel2" style={{ marginBottom: 16 }}>
<Table dataSource={data} columns={columns} pagination={false} />
</Card>
<Card bordered={false} title="chart">
<Chart height={400} data={chartData} padding='10%' scale={cols} forceFit>
<Axis name="year" />
<Axis name="value" />
<Legend />
<Tooltip />
<Geom
type="areaStack"
position="year*value"
color={[
'country',
[
'l (90) 0:rgba(0, 146, 255, 1) 1:rgba(0, 146, 255, 0.1)',
'l (90) 0:rgba(0, 268, 0, 1) 1:rgba(0, 268, 0, 0.1)',
],
]}
/>
<Geom
type="lineStack"
position="year*value"
size={2}
color={['country', ['rgba(0, 146, 255, 1)', '#00ff00']]}
/>
</Chart>
</Card>
</div>
{chartImg && (
<Card bordered={false} style={{ marginTop: 16 }}>
<img src={chartImg} alt="" />
</Card>
)}
</div>
);
}
}
export default Index;
.card {
min-height: 692px;
}
.cardLeft {
min-height: 692px;
border-left: 0;
}
.tableList {
height: 100%;
.tableListOperator {
margin-bottom: 16px;
button {
margin-right: 8px;
}
}
}
\ No newline at end of file
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment