vue3.2+ts使用antv/x6流程图
vue3.2+ts使用antv/x6流程图
我们的需求是这样的
20221201实现的效果图是这样的。基本满足要求，后期对完接口数据再更新一下。
需要安装三个包
npm i @types/dagre
npm i dagre
npm i @antv/x6
随意创建一个vue文件，复制以下代码即可运行，暂时还是静态数据。参考业务场景 | X6
---------------------------------------分割线------------------------------------------------------------
20221202修改
由于版本的不同，所以想要滚动和导出为图片，又安装了两个包
"@antv/x6": "^2.0.6",
"@antv/x6-plugin-export": "^2.1.4",
"@antv/x6-plugin-scroller": "^2.0.5",
"@antv/x6-vue-shape": "^2.0.5",新的效果图
新的代码
导出
------2023.0106分割线--------------
对接了后端数据的效果图
以下新代码
导出
后端返回的数据格式是这样的
{
"code": 200,
"message": "请求成功",
"data": {
"car_license": "车牌号2",
"data": [
{
"task_type": "1",
"type_name": "现场查勘",
"object_name": "车牌号2",
"datetime": "2023-01-09 09:17:13",
"step_list": []
},
{
"task_type": "2",
"type_name": "标的车定损",
"object_name": "sdadsa",
"datetime": "2023-01-09 09:17:09",
"step_list": [
{
"task_type": "2",
"step_name": "定损",
"step_by": "",
"datetime": "0"
},
{
"task_type": "2",
"step_name": "核价",
"step_by": "",
"datetime": "0"
},
{
"task_type": "2",
"step_name": "核损",
"step_by": "",
"datetime": "0"
},
{
"task_type": "2",
"step_name": "单证",
"step_by": "",
"datetime": "0"
},
{
"task_type": "2",
"step_name": "理算",
"step_by": "",
"datetime": "0"
},
{
"task_type": "2",
"step_name": "补偿",
"step_by": "",
"datetime": "0"
},
{
"task_type": "2",
"step_name": "补偿确认",
"step_by": "",
"datetime": "0"
},
{
"task_type": "2",
"step_name": "支付",
"step_by": "",
"datetime": "0"
}
]
},
{
"task_type": "4",
"type_name": "物损定损",
"object_name": "",
"datetime": "2023-01-09 09:17:25",
"step_list": [
{
"task_type": "4",
"step_name": "定损",
"step_by": "qrn1",
"datetime": "2023-01-09 11:37:49"
},
{
"task_type": "4",
"step_name": "核损",
"step_by": "qrn1",
"datetime": "2023-01-09 11:52:42"
},
{
"task_type": "4",
"step_name": "单证",
"step_by": "qrn1",
"datetime": "2023-01-09 11:53:09"
},
{
"task_type": "4",
"step_name": "理算",
"step_by": "",
"datetime": "0"
},
{
"task_type": "4",
"step_name": "补偿",
"step_by": "",
"datetime": "0"
},
{
"task_type": "4",
"step_name": "补偿确认",
"step_by": "",
"datetime": "0"
},
{
"task_type": "4",
"step_name": "支付",
"step_by": "",
"datetime": "0"
}
]
},
{
"task_type": "7",
"type_name": "人伤(三者)查勘",
"object_name": "",
"datetime": "2023-01-09 09:17:28",
"step_list": [
{
"task_type": "7",
"step_name": "人伤查勘",
"step_by": "qrn1",
"datetime": "2023-01-09 11:36:22"
},
{
"task_type": "7",
"step_name": "人伤查勘审核",
"step_by": "",
"datetime": "0"
},
{
"task_type": "7",
"step_name": "人伤跟踪",
"step_by": "",
"datetime": "0"
},
{
"task_type": "7",
"step_name": "人伤跟踪审核",
"step_by": "",
"datetime": "0"
},
{
"task_type": "7",
"step_name": "定损",
"step_by": "",
"datetime": "0"
},
{
"task_type": "7",
"step_name": "核损",
"step_by": "",
"datetime": "0"
},
{
"task_type": "7",
"step_name": "单证",
"step_by": "",
"datetime": "0"
},
{
"task_type": "7",
"step_name": "理算",
"step_by": "",
"datetime": "0"
},
{
"task_type": "7",
"step_name": "补偿",
"step_by": "",
"datetime": "0"
},
{
"task_type": "7",
"step_name": "补偿确认",
"step_by": "",
"datetime": "0"
},
{
"task_type": "7",
"step_name": "支付",
"step_by": "",
"datetime": "0"
}
]
}
]
},
"timestamp": 1673246018
}