前端vue用jsmind写思维导图
1、下载依赖
npm 安装
npm install --save jsmind
yarn 安装
yarn jsmind
版本:"jsmind": "^0.4.6",2、完整代码：
名称： {{ obj.topic ? obj.topic : '-' }}
部门： {{ obj.orgName ? obj.orgName : '-' }}
描述： {{ obj.jobType ? obj.jobType : '-' }}
状态：
正在进行
已超期
已审批
已完成
开始时间： {{ obj.startDate ? obj.startDate : '-'}}
结束时间： {{ obj.endDate ? obj.endDate : '-' }}
附件： {{ obj.attachment ? obj.attachment : '-'}}
下载
批注：{{ obj.annotation ? obj.annotation : '-'}}
3、数据格式：
{
"manageStartTime": "2024-01-15",
"manageEndTime": "2024-01-18",
"list": [
{
"id": "1749596797626675202",
"parentId": "0",
"children": [
{
"id": "1749596948705505282",
"parentId": "1749596797626675202",
"children": [
{
"id": "1749597460314124290",
"parentId": "1749596948705505282",
"hasChildren": false,
"name": "",
"topic": "1",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "一队1",
"description": "2",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "已超期",
"startDate": "2024-01-23 00:00:00",
"endDate": "2024-01-23 00:00:00",
"principal": "詹宁123",
"attachment": "22",
"attachmentAddress": "",
"annotation": ""
},
{
"id": "1749643728044810241",
"parentId": "1749596948705505282",
"hasChildren": false,
"name": "",
"topic": "1111",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "",
"description": "222",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "正在进行",
"startDate": "",
"endDate": "",
"principal": "",
"attachment": "",
"attachmentAddress": "",
"annotation": ""
},
{
"id": "1749644214860898307",
"parentId": "1749596948705505282",
"hasChildren": false,
"name": "",
"topic": "步骤2",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "",
"description": "222",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "正在进行",
"startDate": "",
"endDate": "",
"principal": "",
"attachment": "",
"attachmentAddress": "",
"annotation": ""
}
],
"hasChildren": true,
"name": "",
"topic": "22",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "机关首长",
"description": "22",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "已超期",
"startDate": "2024-01-23 00:00:00",
"endDate": "2024-01-24 00:00:00",
"principal": "副局长1号AAAAA",
"attachment": "",
"attachmentAddress": "",
"annotation": ""
},
{
"id": "1749644214860898306",
"parentId": "1749596797626675202",
"hasChildren": false,
"name": "",
"topic": "步骤1",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "",
"description": "3333333",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "正在进行",
"startDate": "",
"endDate": "",
"principal": "",
"attachment": "",
"attachmentAddress": "",
"annotation": ""
},
{
"id": "1749644351012200449",
"parentId": "1749596797626675202",
"hasChildren": false,
"name": "",
"topic": "步骤1",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "",
"description": "3333333",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "正在进行",
"startDate": "",
"endDate": "",
"principal": "",
"attachment": "",
"attachmentAddress": "",
"annotation": ""
}
],
"hasChildren": true,
"name": "",
"topic": "123",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "首长首长222",
"description": "123",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "正在进行",
"startDate": "2024-01-24 00:00:00",
"endDate": "2024-01-25 00:00:00",
"principal": "canmouyichu",
"attachment": "障碍物数据 (2).xlsx",
"attachmentAddress": "",
"annotation": ""
},
{
"id": "1749598509187919873",
"parentId": "0",
"children": [
{
"id": "1749598725676920834",
"parentId": "1749598509187919873",
"hasChildren": false,
"name": "",
"topic": "2.1",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "一队1",
"description": "2.1",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "已超期",
"startDate": "2024-01-23 00:00:00",
"endDate": "2024-01-24 00:00:00",
"principal": "詹宁123",
"attachment": "22",
"attachmentAddress": "",
"annotation": ""
}
],
"hasChildren": true,
"name": "",
"topic": "2",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "机关首长",
"description": "2",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "已超期",
"startDate": "2024-01-24 00:00:00",
"endDate": "2024-01-24 00:00:00",
"principal": "副局长1号AAAAA",
"attachment": "2",
"attachmentAddress": "",
"annotation": ""
},
{
"id": "1749654320818278402",
"parentId": "0",
"hasChildren": false,
"name": "",
"topic": "222",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "",
"description": "333",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "正在进行",
"startDate": "",
"endDate": "",
"principal": "",
"attachment": "",
"attachmentAddress": "",
"annotation": ""
},
{
"id": "1749662052795404290",
"parentId": "0",
"hasChildren": false,
"name": "",
"topic": "步骤2",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "首长首长222",
"description": "2.2",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "已超期",
"startDate": "2024-01-23 00:00:00",
"endDate": "2024-01-23 00:00:00",
"principal": "canmouyichu",
"attachment": "",
"attachmentAddress": "",
"annotation": ""
},
{
"id": "1749662644481683457",
"parentId": "0",
"hasChildren": false,
"name": "",
"topic": "2.6",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "首长首长222",
"description": "2.6",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "已超期",
"startDate": "2024-01-24 00:00:00",
"endDate": "2024-01-24 00:00:00",
"principal": "canmouyichu",
"attachment": "",
"attachmentAddress": "",
"annotation": ""
}
],
"id": "1746789335255597057",
"topic": "任务名称任务名称任务名称任务名称任务名"
}4、效果如下：
注意：数据格式看对，里面topic很重要；
最后 感谢阅读 如果有不足之处 请指出