入職前端作業到現在差不多有一年半的時間了，和朋友偶然聊天的時候被問到，能不能用所學的前端知識做一個家族關系的族譜，可以使家族關系更加簡單明了，當時聽完這個需求，覺得可能還是蠻簡單的，后來動手做的時候，發現族譜的連線，是需要根據回傳的資料動態生成的，這就是我這個小前端，有點頭禿了🤡，
解決技術困難
當時阻礙我前進的就是如何實作族譜的連線以及根據資料渲染它們的對應關系，后來在逛博客的程序中，發現了antdesign的charts圖表組件，利用這個組件，如果可以進行一些改造，可能就可以實作族譜的關系圖，
開始動手
首先需要安裝ant-design/charts，具體安裝程序請參考官方檔案，
安裝完成以后，就要根據資料渲染出想要的視覺效果，由于svg圖相關的知識比較薄弱，所以實作的視覺可能有點丑陋，大家將就著看看，我寫這篇文章的目的就是總結自己的技術探索歷程，可能這篇文章下周就修改了，
先看視覺效果，
代碼：
import React, { useEffect, useState } from "react";
import "./Treechart.css";
import { Modal } from "antd";
import { OrganizationGraph } from "@ant-design/charts";
import * as _ from "lodash"
// const data = {
// id: "joel",
// value: {
// text: "李偉峰",
// value: "陳蘭蘭",
// // 建議使用 bae64 資料
// icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
// style: {
// fill: "#00CED1",
// width: "200",
// },
// img: "/api/img/%E8%80%81%E4%BA%BA.jpeg",
// },
// style: {
// width: 110,
// height: 40,
// // stroke: "#87ceeb",
// fill: " #FFC0CB",
// radius: "8",
// // textAlign: "center",
// },
// children: [
// {
// id: "c1",
// value: {
// text: "李偉峰",
// value: "陳蘭蘭",
// // 建議使用 bae64 資料
// icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
// },
// children: [
// {
// id: "c1-1",
// value: {
// text: "李偉峰",
// value: "陳蘭蘭",
// // 建議使用 bae64 資料
// icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
// },
// },
// {
// id: "c1-2",
// value: {
// text: "李偉峰",
// value: "陳蘭蘭",
// // 建議使用 bae64 資料
// icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
// },
// children: [
// {
// id: "c1-2-1",
// value: {
// text: "李偉峰",
// value: "陳蘭蘭",
// // 建議使用 bae64 資料
// icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
// },
// },
// {
// id: "c1-2-2",
// value: {
// text: "李偉峰",
// value: "陳蘭蘭",
// // 建議使用 bae64 資料
// icon: "https://lwfcll.oss-cn-hangzhou.aliyuncs.com/img/1630238333160.png",
// },
// },
// ],
// },
// ],
// },
// {
// id: "c2",
// value: {
// text: "李偉峰",
// value: "陳蘭蘭",
// // 建議使用 bae64 資料
// icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
// },
// },
// {
// id: "c3",
// value: {
// text: "李偉峰",
// value: "陳蘭蘭",
// // 建議使用 bae64 資料
// icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
// },
// children: [
// {
// id: "c3-1",
// value: {
// text: "李偉峰",
// value: "陳蘭蘭",
// // 建議使用 bae64 資料
// icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
// },
// },
// {
// id: "c3-2",
// value: {
// text: "李偉峰",
// value: "陳蘭蘭",
// // 建議使用 bae64 資料
// icon: "https://lwfcll.oss-cn-hangzhou.aliyuncs.com/img/%E4%B8%AD%E5%B9%B4%E5%A4%AB%E5%A6%872.jpeg",
// },
// children: [
// {
// id: "c3-2-1",
// value: {
// text: "李偉峰",
// value: "陳蘭蘭",
// // 建議使用 bae64 資料
// icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
// },
// },
// {
// id: "c3-2-2",
// value: {
// text: "李偉峰",
// value: "陳蘭蘭",
// // 建議使用 bae64 資料
// icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
// },
// },
// {
// id: "c3-2-3",
// value: {
// text: "李偉峰",
// value: "陳蘭蘭",
// // 建議使用 bae64 資料
// icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
// },
// },
// ],
// },
// {
// id: "c3-3",
// value: {
// text: "李偉峰",
// value: "陳蘭蘭",
// // 建議使用 bae64 資料
// icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
// },
// },
// ],
// },
// ],
// };
const colorArr = ["#00CED1", "#FFA07A", "#87CEFA", "#BA55D3", "#00FA9A"];
export default function TreeChart() {
/**
* 遍歷樹的方法
*/
// const traverseTree = (data, fn) => {
// if (typeof fn !== "function") {
// return;
// }
// if (fn(data) === false) {
// return false;
// }
// if (data && data.children) {
// for (let i = data.children.length - 1; i >= 0; i--) {
// if (!traverseTree(data.children[i], fn)) return false;
// }
// }
// return true;
// };
// traverseTree(data, (d) => {
// d.leftIcon = {
// style: {
// fill: "#e6fffb",
// stroke: "#e6fffb",
// },
// img:
// "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ",
// };
// d.rightIcon = {
// style: {
// fill: "#e6fffb",
// stroke: "#e6fffb",
// },
// img:
// "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ",
// };
// return true;
// });
const [data, setData] = useState({})
const randomNum = (minNum: number, maxNum: number) => {
switch (arguments.length) {
case 1:
return parseInt(String(Math.random() * minNum + 1), 10);
break;
case 2:
return parseInt(String(Math.random() * (maxNum - minNum + 1) + minNum), 10);
break;
default:
return 0;
break;
}
};
const fetchTableData = () => {
fetch("http://localhost:9091/genealogy/info/selectUserPage", {
method: "POST",
body: JSON.stringify({
size: 20,
current: 1,
}),
headers: {
"content-type": "application/json",
},
}).then((res) => {
res.json().then((data) => {
setData(arrayToTree(data.data)[0])
console.log(456, arrayToTree(data.data)[0])
});
});
};
const arrayToTree = (items: []) => {
const result: any = []; // 存放結果集
const itemMap: any = {};
let newItem: any = _.cloneDeep(items);
newItem = _.map(newItem, (item: any) => {
let compain = newItem.findIndex((i: any) => item?.companionId === i.id)
let value = ''
if (compain !== -1) {
value = newItem[compain]?.name;
newItem.splice(compain, 1)
}
return {
...item,
value
}
})
items = newItem.filter((item: any) => item?.id)
console.log(123, items)
items.sort((x: any, y: any) => {
return x.id - y.id
})
console.log(items)
//
for (const item: any of items) {
const id = item.id;
const parentId = item.parentId;
if (!itemMap[id]) {
itemMap[id] = {
children: [],
}
}
itemMap[id] = {
...item,
id: String(item?.id),
value: {
text: item?.name,
value: item?.value,
// 建議使用 bae64 資料
icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
style: {
fill: "#00CED1",
width: "200",
},
},
children: itemMap[id]['children']
}
const treeItem = itemMap[id];
if (parentId === 0) {
result.push(treeItem);
} else {
if (!itemMap[parentId]) {
itemMap[parentId] = {
children: [],
}
}
itemMap[parentId].children.push(treeItem)
}
}
return result;
}
useEffect(() => {
fetchTableData()
}, [])
return (
<div className="content">
<OrganizationGraph
width={1000}
height={1000}
data={data}
nodeCfg={{
// type:'circle',
padding: 0,
size: [150, 40],
style: (node) => {
const num = randomNum(0, 4);
console.log('node', node)
return {
fill: colorArr[num],
};
},
label: {
style: (node: any, group, type: any) => {
const styles = {
icon: {
width: 40,
height: 40,
x: 0,
y: 0,
},
value: {
fill: "#fff",
x: 100,
// y: 4,
},
text: {
fill: "#fff",
x: 100,
y: node?.value?.value ? 4 : 16,
},
};
return styles[type];
},
},
}}
/>
</div>
);
}
編輯頁面的視覺效果：
代碼：
import React, { useEffect, useState } from "react";
import {
Table,
Tag,
Space,
Modal,
Button,
Form,
message,
Input,
Tooltip,
DatePicker,
Select
} from "antd";
import { PlusCircleTwoTone, EditTwoTone } from "@ant-design/icons";
import moment from 'moment';
const { Option } = Select;
export default function EditTree() {
const [tabelData, setTableData] = useState([]);
const [newPersonVisible, setNewPersonVisible] = useState(false);
const [modalOkLoading, setModalOkLoading] = useState(false);
const [currentPerson, setCurrentPerson] = useState({});
const [form] = Form.useForm();
useEffect(() => {
fetchTableData();
}, []);
const fetchTableData = () => {
fetch("http://localhost:9091/genealogy/info/selectUserPage", {
method: "POST",
body: JSON.stringify({
size: 20,
current: 1,
}),
headers: {
"content-type": "application/json",
},
}).then((res) => {
res.json().then((data) => {
setTableData(data.data);
});
});
};
const columns = [
{
title: "姓名",
dataIndex: "name",
key: "name",
render: (text) => <a>{text}</a>,
},
{
title: "年齡",
dataIndex: "date",
key: "date",
render:(record:any)=>{
let birthday = moment(record).year();
let now = moment().year();
return now - birthday
}
},
{
title: "創建日期",
dataIndex: "createTime",
key: "createTime",
},
{
title: "子女",
key: "childrenName",
dataIndex: "childrenName",
align: "center",
render: (child) => (
<>
{child && child.length > 0 ? (
child.map((item, index) => {
let color = index > 0 ? "geekblue" : "green";
return (
<Tag color={color} key={item}>
{item}
</Tag>
);
})
) : (
<a>暫無子女</a>
)}
</>
),
},
{
title: "操作",
key: "action",
render: (text, record) => (
<Space size="middle">
<Tooltip title={"新增子女"} placement="top">
<PlusCircleTwoTone
onClick={() => {
setNewPersonVisible(true);
setCurrentPerson(record);
}}
/>
</Tooltip>
<Tooltip title={"編輯個人資訊"} placement="top">
<EditTwoTone />
</Tooltip>
</Space>
),
},
];
const handlModalOk = () => {
const { getFieldsValue,resetFields } = form;
let result = getFieldsValue();
if(result?.type === 'child') {
result = {
...result,
parentId: currentPerson?.id,
date: moment(result?.date).format('X') + '000'
};
delete result?.type
}else {
result = {
...result,
companionId: currentPerson?.id,
date: moment(result?.date).format('X') + '000'
};
delete result?.type
}
setModalOkLoading(true);
fetch("http://localhost:9091/genealogy/info/saveUser", {
method: "POST",
body: JSON.stringify(result),
headers: {
"content-type": "application/json",
},
}).then((res) =>
res.json().then((data) => {
if (data.isSuccess) {
setModalOkLoading(false);
setNewPersonVisible(false);
message.success("新建成功");
fetchTableData();
resetFields()
} else {
message.error(data.msg);
setModalOkLoading(false);
}
})
);
};
return (
<div>
<Table columns={columns} rowKey={(record)=> record?.id} dataSource={tabelData} />
<Modal
title={`新建${currentPerson.name}資訊`}
visible={newPersonVisible}
onCancel={() => {
setNewPersonVisible(false);
}}
onOk={handlModalOk}
cancelText="取消"
okText="確定"
centered
confirmLoading={modalOkLoading}
>
<Form form={form}>
<Form.Item label="姓名" name={"name"} required>
<Input placeholder="請輸入姓名" />
</Form.Item>
<Form.Item label="生日" name={"date"} required>
<DatePicker
style={{ width: '100%' }}
placeholder={'請選擇出生日期'}
/>
</Form.Item>
<Form.Item label="型別" name={"type"} required>
<Select
style={{ width: '100%' }}
placeholder="請選擇新增的是伴侶還是子女"
>
<Option value="child">子女</Option>
<Option value="companion">伴侶</Option>
</Select>
</Form.Item>
</Form>
</Modal>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/302246.html
標籤：其他
下一篇：快速入坑ES6