要实现以上工作流程图,需要用到"d3": "5.16.0"、"dagre-d3": "0.6.4"两个依赖,直接上代码
<!--Created by lyn on 2021-09-09 15:50:16-->
<template>
<div>
<a-modal
:visible="show"
:title="title"
@ok="closeModal"
@cancel="closeModal"
:closable="true"
:centered="true"
:maskClosable="false"
:destroyOnClose="true"
:width="flowWidth + 62"
>
<a-button slot="footer" @click="closeModal">关闭</a-button>
<div v-show="loading" class="loading">
<a-spin />
</div>
<!-- <div :style="{height: '400px',overflow: 'auto'}"> -->
<svg v-show="!loading" :id="flowChartId" class="flowChart" style="cursor: move;" />
<!-- </div> -->
</a-modal>
<a-modal
:visible="nodeDetail.show"
title="节点详情"
@ok="nodeDetail.show = !nodeDetail.show"
@cancel="nodeDetail.show = !nodeDetail.show"
:closable="false"
:maskClosable="false"
:centered="true"
:destroyOnClose="true"
:width="548"
>
<a-button slot="footer" @click="nodeDetail.show = !nodeDetail.show">关闭</a-button>
<ul class="detail-ul">
<li v-for="item of nodeDetail.content" :key="item.key">
<img :src="item.icon" />
<div>
<span class="label">{
{ item.label}}</span>
<!-- <a style="color: #4676EF;" v-if="item.key === 'docDumber'" @click="goOrderPage(item.content)">{
{ item.content}}</a> -->
<span v-if="item.key !== 'nodeStatus'">{
{ item.content}}</span>
<span v-if="item.key === 'nodeStatus' && item.content === 0">未开始</span>
<span v-if="item.key === 'nodeStatus' && item.content === 1" style="color:#F39000;font-weight: Bold;">执行中</span>
<span v-if="item.key === 'nodeStatus' && item.content === 2" sty