ChatGPT ✖️ 前端 = 有点er意思
时隔两月 chat 已经解决了很多问题
分析 案例。 妥妥生产力工具
用g6绘制一个流向图的数据 时候 假设子节点的流向关系表示从source流向target const targetdata =[
{
"source": "a5585bba45854b0dabb42428ea0d6cde",
"target": "44b79c13fdb45883c7f21ee510155f4d"
},
{
"source": "41a95396e613c9f62f1da16142d5ddd2",
"target": "a5585bba45854b0dabb42428ea0d6cde"
},
{
"source": "bb1b9374bdafe92c3eebe4487572fc7e",
"target": "9434ee47cf97c7edc2780618a90f65f2"
},
{
"source": "c06175f2e68f32c18dd97407c6fcfc6e",
"target": "bb1b9374bdafe92c3eebe4487572fc7e"
},
{
"source": "95fde309623c534a1d310b5e692cc788",
"target": "c06175f2e68f32c18dd97407c6fcfc6e"
},
] 父节点的数据是
const data = [{
id: '717c7b8afebbfb7137f6f0f99beb',
parentid:[],
sonid: [
"44b79c13fdb45883c7f21ee510155f4d",
"a5585bba45854b0dabb42428ea0d6cde",
"9434ee47cf97c7edc2780618a90f65f2",
"bb1b9374bdafe92c3eebe4487572fc7e",
"c06175f2e68f32c18dd97407c6fcfc6e",
"95fde309623c534a1d310b5e692cc788",
"41a95396e613c9f62f1da16142d5ddd2",
"982161b1a590d7fd02ca6b6317c4532c",
"0e8289f2bf927649dd2511bbc2bb6759",
"717c7b8afebbfb7137f6f0f99beb2a94"
],
}, {
id: '45898fb9967a6d31c28ba0af765317ef',
parentid:[],
sonid: [
"8c7d1046d20edf6f24391335995096b0",
"8fe87100eddafceda9257ebf607aa098",
"788a2d89ac307fe9cb2d3a97e995b244",
"45898fb9967a6d31c28ba0af765317ef"
]
}] 其中父节点的ID表示父节点id sonid表示父节点下边的子节点 targetdata则表示子节点的流向关系
现做出 如果其中一个父节点的子节点起始和另一个父节点子节点末尾的数据存在相连 需要用js脚本找出 父节点相连的关系
并在data数据中添加父节点关系 用parentid：[父节点id] 体现他们的关系
答案。function findParentConnection(data, targetdata) {
let connections = [];
for (let i = 0; i < data.length; i++) {
let parentId = data[i].id;
let sonIds = data[i].sonid;
for (let j = 0; j < targetdata.length; j++) {
let source = targetdata[j].source;
let target = targetdata[j].target;
if (sonIds.includes(source)) {
let targetParentId = getParentId(target, data);
if (targetParentId !== parentId) {
connections.push({ parent: parentId, child: targetParentId });
}
}
}
}
return connections;
}
function getParentId(id, data) {
for (let i = 0; i < data.length; i++) {
let sonIds = data[i].sonid;
if (sonIds.includes(id)) {
return data[i].id;
}
}
return null;
}
let connections = findParentConnection(data, targetdata);
console.log(connections);
这个脚本会遍历每个父节点及其子节点，然后在子节点的流向关系数据中找出自己的子节点与其他父节点子节点的连接关系，如果连接的父节点不是自己，则记录下来。最终返回所有的父节点连接关系。
在得到父节点连接关系之后，可以遍历data数据，将每个父节点的parentid属性设置为其所有父节点的id。这样就可以体现出它们之间的关系了。代码如下：
for (let i = 0; i < data.length; i++) {
let parentId = data[i].id;
let parentConnections = connections.filter(c => c.child === parentId);
let parentIds = parentConnections.map(c => c.parent);
data[i].parentid = parentIds;
}
案例二
案例三
问题
[
{
"cells": [
{
"type": "OPERATION",
"text": null,
"operations": [
{
"operationCode": "PUBLISH_CHECK_STRATEGY_SKIP",
"operationValue": {
"strategyId": "42500120",
"text": " 张利_test1"
}
}
],
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
},
{
"type": "PLAIN_TEXT",
"text": "张利(WB01022923)",
"operations": null,
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
},
{
"type": "OPERATION",
"text": null,
"operations": [
{
"operationCode": "PUBLISH_CHECK_RULE_SKIP",
"operationValue": {
"ruleInstanceId": "1769307946",
"text": "张利_test1",
"ruleId": "34200006"
}
}
],
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
},
{
"type": "ICON",
"text": "SUCCESS",
"operations": null,
"allowMerge": null,
"hoverMessage": "通过",
"extInfo": null
},
{
"type": "PLAIN_TEXT",
"text": "-",
"operations": null,
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
}
]
},
{
"cells": [
{
"type": "OPERATION",
"text": null,
"operations": [
{
"operationCode": "PUBLISH_CHECK_STRATEGY_SKIP",
"operationValue": {
"strategyId": "42500120",
"text": " 张利_test1"
}
}
],
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
},
{
"type": "PLAIN_TEXT",
"text": "张利(WB01022923)",
"operations": null,
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
},
{
"type": "OPERATION",
"text": null,
"operations": [
{
"operationCode": "PUBLISH_CHECK_RULE_SKIP",
"operationValue": {
"ruleInstanceId": "1797937100",
"text": "张利_test4",
"ruleId": "34300009"
}
}
],
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
},
{
"type": "ICON",
"text": "SUCCESS",
"operations": null,
"allowMerge": null,
"hoverMessage": "通过",
"extInfo": null
},
{
"type": "PLAIN_TEXT",
"text": "-",
"operations": null,
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
}
]
}
] 假设一表格的数据 data {
"cells": [
{
"type": "PLAIN_TEXT",
"text": "所属策略",
"operations": null,
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
},
{
"type": "PLAIN_TEXT",
"text": "策略负责人",
"operations": null,
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
},
{
"type": "PLAIN_TEXT",
"text": "规则名称",
"operations": null,
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
},
{
"type": "PLAIN_TEXT",
"text": "状态",
"operations": null,
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
},
{
"type": "PLAIN_TEXT",
"text": "操作",
"operations": null,
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
}
]
} 表格的表头column 如果 "text": " 张利_test1" 和下一条的 "text": " 张利_test1"一致 就合并单元格
答案
import { Table } from 'antd';
const data = [
{
"cells": [
{
"type": "OPERATION",
"text": null,
"operations": [
{
"operationCode": "PUBLISH_CHECK_STRATEGY_SKIP",
"operationValue": {
"strategyId": "42500120",
"text": " 张利_test1"
}
}
],
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
},
{
"type": "PLAIN_TEXT",
"text": "张利(WB01022923)",
"operations": null,
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
},
{
"type": "OPERATION",
"text": null,
"operations": [
{
"operationCode": "PUBLISH_CHECK_RULE_SKIP",
"operationValue": {
"ruleInstanceId": "1769307946",
"text": "张利_test1",
"ruleId": "34200006"
}
}
],
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
},
{
"type": "ICON",
"text": "SUCCESS",
"operations": null,
"allowMerge": null,
"hoverMessage": "通过",
"extInfo": null
},
{
"type": "PLAIN_TEXT",
"text": "-",
"operations": null,
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
}
]
},
{
"cells": [
{
"type": "OPERATION",
"text": null,
"operations": [
{
"operationCode": "PUBLISH_CHECK_STRATEGY_SKIP",
"operationValue": {
"strategyId": "42500120",
"text": " 张利_test1"
}
}
],
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
},
{
"type": "PLAIN_TEXT",
"text": "张利(WB01022923)",
"operations": null,
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
},
{
"type": "OPERATION",
"text": null,
"operations": [
{
"operationCode": "PUBLISH_CHECK_RULE_SKIP",
"operationValue": {
"ruleInstanceId": "1797937100",
"text": "张利_test4",
"ruleId": "34300009"
}
}
],
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
},
{
"type": "ICON",
"text": "SUCCESS",
"operations": null,
"allowMerge": null,
"hoverMessage": "通过",
"extInfo": null
},
{
"type": "PLAIN_TEXT",
"text": "-",
"operations": null,
"allowMerge": null,
"hoverMessage": null,
"extInfo": null
}
]
}
];
const column = [
{
title: '所属策略',
dataIndex: 'strategy',
renderCell: (value, row, rowIndex, colIndex, dataSource) => {
const prevRow = dataSource[rowIndex - 1];
const nextRow = dataSource[rowIndex + 1];
const prevValue = prevRow?.cells?.[0]?.operations?.[0]?.operationValue?.text;
const nextValue = nextRow?.cells?.[0]?.operations?.[0]?.operationValue?.text;
const isFirstCell = !prevRow || prevValue !== value;
const isLastCell = !nextRow || nextValue !== value;
if (isFirstCell) {
const rowSpan = dataSource.filter((r) => r?.cells?.[0]?.operations?.[0]?.operationValue?.text === value).length;
return {
children: value,
props: { rowSpan },
};
}
if (isLastCell) {
return {
children: value,
props: { rowSpan: 0 },
};
}
return null;
},
},
{
总结：很完美 完美到快失业了