工作流程图、审核流程图前端实现

最新推荐文章于 2023-04-04 10:47:13 发布

麦兜_冰夕

最新推荐文章于 2023-04-04 10:47:13 发布

阅读量724

点赞数

分类专栏： d3.js 数据可视化文章标签：流程图前端实现工作流 d3实现流程图

本文链接：https://blog.csdn.net/lyn1772671980/article/details/129145274

版权

本文介绍如何利用d3和dagre-d3库在前端实现工作流程及审核流程图，通过引入这两个依赖，可以创建出清晰的流程图表。

摘要由CSDN通过智能技术生成

要实现以上工作流程图，需要用到"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