3

package.json

@@ -9,7 +9,10 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
+    "@logicflow/core": "^1.2.17",
+    "@logicflow/extension": "^1.2.18",
     "axios": "^1.5.1",
+    "bpmn-js": "^15.1.3",
     "core-js": "^3.8.3",
     "crypto": "^1.0.1",
     "crypto-browserify": "^3.12.0",

public/index.html

@@ -19,6 +19,7 @@
   <div id="app"></div>
   <!-- built files will be auto injected -->
   <script src="./SmCrypto.min.js"></script>
+  <script src="https://unpkg.com/bpmn-js@6.0.2/dist/bpmn-viewer.development.js"></script>
 </body>
 
 </html>

src/App.vue

@@ -5,7 +5,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'App',
   components: {
@@ -14,7 +13,7 @@ export default {
 </script>
 
 <style>
-body{
+body {
   margin: 0;
   background-color: #FFF;
 }

src/main.js

@@ -5,13 +5,26 @@ import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
 import zhCn from 'element-plus/es/locale/lang/zh-cn';//引入中文
+// bpmn 相关依赖
+import 'bpmn-js/dist/assets/diagram-js.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+//logicflow相关配置
+import LogicFlow from "@logicflow/core";
+import { BpmnElement, Control, MiniMap,Menu } from '@logicflow/extension';
+// 左边工具栏以及编辑节点的样式
+// import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'
 const app = createApp(App)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
 }
-app.use(ElementPlus, {locale:zhCn});//使element全局变为中文
+app.use(ElementPlus, { locale: zhCn });//使element全局变为中文
 app.use(router)
-
+LogicFlow.use(BpmnElement);
+LogicFlow.use(Control);
+LogicFlow.use(Menu);
+// LogicFlow.use(MiniMap);
 // 使用 app 实例来挂载应用
 app.mount('#app')
 

src/pages/feelLoad/FeelLoad.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <div id="canvas">
+
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+import BpmnViewer from 'bpmn-js';
+export default {
+    setup() {
+        onMounted(() => {
+        })
+        return {
+        }
+    }
+}
+</script>
+
+<style scoped></style>

src/pages/mapLoad/FatherMap.vue

@@ -1,9 +1,9 @@
 <template>
     <div>
-        <div style="width: 90vw;height: 90vh;" id="diagramContainer">
+        <div style="width: 95%;height: calc(100vh - 300px);" id="diagramContainer">
             <ul class="box">
                 <li class="leftMenu">
-                    <h3>选择节点</h3>
+                    <!-- <h3>装置列表</h3> -->
                     <el-collapse>
                         <el-collapse-item :title="item1.name" v-for="(item1, index) in leftMenuData" :key="index">
                             <draggable @start="moveStart" @end="moveEnd" v-model="item1.children" :options="options">
@@ -16,12 +16,15 @@
                     </el-collapse>
                 </li>
                 <li class="plumbBox" id="plumbBox">
+                    <!-- <div class="setBox">
+
+                    </div> -->
                     <div v-for="(item, index) in info" :key="index" :id="item.id" :style="getStyle(item)"
                         :class="item.id === activeNode.id ? 'activeNode' : 'normalNode'" @click="sendActive(item)">
                         <div class="plumbNode" :id="item.id + 'plumbNode'">
-                            <el-icon :size="20">
+                            <!-- <el-icon :size="20">
                                 <CirclePlusFilled />
-                            </el-icon>
+                            </el-icon> -->
                         </div>
                         {{ item.config[0].value }}
                         <el-icon class="is-loading" v-if="item.status === 'loading'" color="blue">
@@ -125,13 +128,13 @@ let globalConfig = {
 //左侧
 let leftMenuData = ref([
     {
-        name: "起始列表",
+        name: "装置列表",
         children: [
             {
                 to: [],
                 top: 0,
                 left: 0,
-                status: "loading",
+                // status: "loading",
                 isSource: true,
                 isTarget: false,
                 config: [
@@ -139,7 +142,7 @@ let leftMenuData = ref([
                         label: "名称",
                         name: "label",
                         type: "text",
-                        value: "起始节点1",
+                        value: "保护（高压制）",
                         require: true,
                     },
                     {
@@ -167,7 +170,7 @@ let leftMenuData = ref([
                 to: [],
                 top: 0,
                 left: 0,
-                status: "loading",
+                // status: "loading",
                 isSource: true,
                 isTarget: true,
                 config: [
@@ -175,7 +178,7 @@ let leftMenuData = ref([
                         label: "名称",
                         name: "label",
                         type: "text",
-                        value: "起始节点2",
+                        value: "合并单元（高压制）",
                         require: true,
                     },
                     {
@@ -199,39 +202,141 @@ let leftMenuData = ref([
                     },
                 ],
             },
-        ],
-    },
-    {
-        name: "完结列表",
-        children: [
             {
                 to: [],
                 top: 0,
                 left: 0,
-                status: "loading",
-                type: "target",
-                isSource: false,
+                // status: "loading",
+                isSource: true,
                 isTarget: false,
                 config: [
                     {
                         label: "名称",
                         name: "label",
                         type: "text",
-                        value: "完结节点1",
+                        value: "保护（低压制）",
                         require: true,
                     },
                     {
                         label: "描述",
                         name: "description",
                         type: "textarea",
+                        value: "",
+                        require: false,
+                    },
+                    {
+                        label: "归属",
+                        name: "affiliation",
+                        type: "select",
                         value: "check",
+                        require: true,
+                        options: [
+                            { label: "审核信息", value: "check" },
+                            { label: "生产经营", value: "manage" },
+                            { label: "结算报销", value: "account" },
+                        ],
+                    },
+                ],
+            },
+            {
+                to: [],
+                top: 0,
+                left: 0,
+                // status: "loading",
+                isSource: true,
+                isTarget: false,
+                config: [
+                    {
+                        label: "名称",
+                        name: "label",
+                        type: "text",
+                        value: "合并单元（低压制）",
+                        require: true,
+                    },
+                    {
+                        label: "描述",
+                        name: "description",
+                        type: "textarea",
+                        value: "",
+                        require: false,
+                    },
+                    {
+                        label: "归属",
+                        name: "affiliation",
+                        type: "select",
+                        value: "check",
+                        require: true,
+                        options: [
+                            { label: "审核信息", value: "check" },
+                            { label: "生产经营", value: "manage" },
+                            { label: "结算报销", value: "account" },
+                        ],
+                    },
+                ],
+            },
+            {
+                to: [],
+                top: 0,
+                left: 0,
+                // status: "loading",
+                isSource: true,
+                isTarget: false,
+                config: [
+                    {
+                        label: "名称",
+                        name: "label",
+                        type: "text",
+                        value: "本体测控",
+                        require: true,
+                    },
+                    {
+                        label: "描述",
+                        name: "description",
+                        type: "textarea",
+                        value: "",
                         require: false,
                     },
                     {
                         label: "归属",
                         name: "affiliation",
                         type: "select",
+                        value: "check",
+                        require: true,
+                        options: [
+                            { label: "审核信息", value: "check" },
+                            { label: "生产经营", value: "manage" },
+                            { label: "结算报销", value: "account" },
+                        ],
+                    },
+                ],
+            },
+            {
+                to: [],
+                top: 0,
+                left: 0,
+                // status: "loading",
+                isSource: true,
+                isTarget: false,
+                config: [
+                    {
+                        label: "名称",
+                        name: "label",
+                        type: "text",
+                        value: "母线保护",
+                        require: true,
+                    },
+                    {
+                        label: "描述",
+                        name: "description",
+                        type: "textarea",
                         value: "",
+                        require: false,
+                    },
+                    {
+                        label: "归属",
+                        name: "affiliation",
+                        type: "select",
+                        value: "check",
                         require: true,
                         options: [
                             { label: "审核信息", value: "check" },
@@ -245,15 +350,159 @@ let leftMenuData = ref([
                 to: [],
                 top: 0,
                 left: 0,
-                status: "loading",
-                isSource: false,
+                // status: "loading",
+                isSource: true,
                 isTarget: false,
                 config: [
                     {
                         label: "名称",
                         name: "label",
                         type: "text",
-                        value: "完结节点2",
+                        value: "高压侧测控",
+                        require: true,
+                    },
+                    {
+                        label: "描述",
+                        name: "description",
+                        type: "textarea",
+                        value: "",
+                        require: false,
+                    },
+                    {
+                        label: "归属",
+                        name: "affiliation",
+                        type: "select",
+                        value: "check",
+                        require: true,
+                        options: [
+                            { label: "审核信息", value: "check" },
+                            { label: "生产经营", value: "manage" },
+                            { label: "结算报销", value: "account" },
+                        ],
+                    },
+                ],
+            },
+            {
+                to: [],
+                top: 0,
+                left: 0,
+                // status: "loading",
+                isSource: true,
+                isTarget: false,
+                config: [
+                    {
+                        label: "名称",
+                        name: "label",
+                        type: "text",
+                        value: "母联智能终端",
+                        require: true,
+                    },
+                    {
+                        label: "描述",
+                        name: "description",
+                        type: "textarea",
+                        value: "",
+                        require: false,
+                    },
+                    {
+                        label: "归属",
+                        name: "affiliation",
+                        type: "select",
+                        value: "check",
+                        require: true,
+                        options: [
+                            { label: "审核信息", value: "check" },
+                            { label: "生产经营", value: "manage" },
+                            { label: "结算报销", value: "account" },
+                        ],
+                    },
+                ],
+            },
+            {
+                to: [],
+                top: 0,
+                left: 0,
+                // status: "loading",
+                isSource: true,
+                isTarget: false,
+                config: [
+                    {
+                        label: "名称",
+                        name: "label",
+                        type: "text",
+                        value: "智能终端（高压侧）",
+                        require: true,
+                    },
+                    {
+                        label: "描述",
+                        name: "description",
+                        type: "textarea",
+                        value: "",
+                        require: false,
+                    },
+                    {
+                        label: "归属",
+                        name: "affiliation",
+                        type: "select",
+                        value: "check",
+                        require: true,
+                        options: [
+                            { label: "审核信息", value: "check" },
+                            { label: "生产经营", value: "manage" },
+                            { label: "结算报销", value: "account" },
+                        ],
+                    },
+                ],
+            },
+            {
+                to: [],
+                top: 0,
+                left: 0,
+                // status: "loading",
+                isSource: true,
+                isTarget: false,
+                config: [
+                    {
+                        label: "名称",
+                        name: "label",
+                        type: "text",
+                        value: "智能终端（低压侧）",
+                        require: true,
+                    },
+                    {
+                        label: "描述",
+                        name: "description",
+                        type: "textarea",
+                        value: "",
+                        require: false,
+                    },
+                    {
+                        label: "归属",
+                        name: "affiliation",
+                        type: "select",
+                        value: "check",
+                        require: true,
+                        options: [
+                            { label: "审核信息", value: "check" },
+                            { label: "生产经营", value: "manage" },
+                            { label: "结算报销", value: "account" },
+                        ],
+                    },
+                ],
+            },
+            {
+                to: [],
+                top: 0,
+                left: 0,
+                // status: "loading",
+                isSource: true,
+                isTarget: false,
+                config: [
+                    {
+                        label: "名称",
+                        name: "label",
+                        type: "text",
+                        value: "母线合并单元",
                         require: true,
                     },
                     {
@@ -279,6 +528,84 @@ let leftMenuData = ref([
             },
         ],
     },
+    // {
+    //     name: "完结列表",
+    //     children: [
+    //         {
+    //             to: [],
+    //             top: 0,
+    //             left: 0,
+    //             status: "loading",
+    //             type: "target",
+    //             isSource: false,
+    //             isTarget: false,
+    //             config: [
+    //                 {
+    //                     label: "名称",
+    //                     name: "label",
+    //                     type: "text",
+    //                     value: "完结节点1",
+    //                     require: true,
+    //                 },
+    //                 {
+    //                     label: "描述",
+    //                     name: "description",
+    //                     type: "textarea",
+    //                     value: "check",
+    //                     require: false,
+    //                 },
+    //                 {
+    //                     label: "归属",
+    //                     name: "affiliation",
+    //                     type: "select",
+    //                     value: "",
+    //                     require: true,
+    //                     options: [
+    //                         { label: "审核信息", value: "check" },
+    //                         { label: "生产经营", value: "manage" },
+    //                         { label: "结算报销", value: "account" },
+    //                     ],
+    //                 },
+    //             ],
+    //         },
+    //         {
+    //             to: [],
+    //             top: 0,
+    //             left: 0,
+    //             status: "loading",
+    //             isSource: false,
+    //             isTarget: false,
+    //             config: [
+    //                 {
+    //                     label: "名称",
+    //                     name: "label",
+    //                     type: "text",
+    //                     value: "完结节点2",
+    //                     require: true,
+    //                 },
+    //                 {
+    //                     label: "描述",
+    //                     name: "description",
+    //                     type: "textarea",
+    //                     value: "",
+    //                     require: false,
+    //                 },
+    //                 {
+    //                     label: "归属",
+    //                     name: "affiliation",
+    //                     type: "select",
+    //                     value: "check",
+    //                     require: true,
+    //                     options: [
+    //                         { label: "审核信息", value: "check" },
+    //                         { label: "生产经营", value: "manage" },
+    //                         { label: "结算报销", value: "account" },
+    //                     ],
+    //                 },
+    //             ],
+    //         },
+    //     ],
+    // },
 ]);
 //渲染节点信息(默认是后台传过来的)
 let info = ref([]);
@@ -417,7 +744,7 @@ const makeFun = (item) => {
             ['Arrow', { width: 12, length: 12, location: 0.5 }],
             // ["Label", { location: 0.5, label: "标签", cssClass: "endpointTargetLabel", visible: true, id: "label" }]
         ],
-        anchor: ['Bottom'],
+        // anchor: ['Bottom'],
         // anchor: "Continuous"
     }
     plumbInit.addEndpoint(item.id + '', common)
@@ -468,25 +795,23 @@ const getStyle = function (item) {
         position: "absolute",
         left: item.left + "px",
         top: item.top + "px",
-        // color:item.color,
-        // border:'1px solid #',
-        width: "180px",
-        height: "36px",
-        lineHeight: "36px",
+        width: "calc(100% - 750px)",
+        height: "40px",
+        lineHeight: "40px",
         textAlign: "center",
-        borderLeft: "5px solid blue",
-        borderRadius: "4%",
-        boxShadow: "#eee 3px 3px 3px 3px",
+        color:' #255CE7',
+        backgroundColor: '#EDF2FF',
         cursor: "pointer",
+        border:' solid 1px #255CE7'
     };
 };
 //初始化jsplumb实例
 let plumbInit = jsPlumb.getInstance();
 //
 plumbInit.bind("click", (conn, originalEvent) => {
-    console.log(conn, "点击连线");
+    console.log(conn, "点击连线1");
     let lineInfo = {};
-    console.log(info.value, "整体信息");
+    // console.log(info.value, "整体信息");
     let sourceInfo = info.value.find((v) => v.id === conn.sourceId);
     let targetInfo = info.value.find((v) => v.id === conn.targetId);
     lineInfo = {
@@ -591,6 +916,12 @@ onMounted(() => {
             renderFlag.value = "render";
         });
     }, 2000);
+    jsPlumb.bind('click', function (conn, originalEvent) {
+        // console.log(conn,'comn');
+        // if (window.prompt('确定删除所点击的链接吗？ 输入1确定') === '1') {
+            // jsPlumb.detach(conn)
+        // }
+    })
 });
 //右侧保存值
 const changeActiveNodeInfo = (info) => {
@@ -640,14 +971,22 @@ defineExpose({
 });
 </script>
 <style lang="less" scoped>
+ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    margin-left: 5px;
+}
+
 .box {
     width: 100%;
-    height: 100%;
+    height: calc(100vh - 360px);
     display: flex;
+    margin-top: 10px;
 }
 
 .leftMenu {
-    width: 240px;
+    width: calc(100% - 1080px);
     border-right: 1px solid #d3d3d3;
     border-bottom: 1px solid #d3d3d3;
 
@@ -660,14 +999,17 @@ defineExpose({
     }
 
     .content {
-        width: 180px;
+        width: calc(100% - 20px);
         height: 40px;
-        border: dashed 1px #030303;
+        border: solid 1px #255CE7;
         text-align: center;
         line-height: 40px;
         margin-bottom: 10px;
-        margin-right: 10px;
-        cursor: pointer;
+        // margin-right: 10px;
+        cursor: pointer;    
+        color: #255CE7;
+        background-color: #EDF2FF;
+        overflow-y: auto;
     }
 }
 
@@ -709,6 +1051,14 @@ defineExpose({
 .activeNode {
     background-color: #80eaf8;
 }
+:deep(.el-collapse-item__content){
+    padding: 0;
+}
+.setBox{
+    width: 100%;
+    height: calc(100% - 500px);
+    border: 1px solid blue;
+}
 </style>
    
    

src/pages/mapLoad/SonMap.vue

@@ -40,7 +40,7 @@ const emit = defineEmits(["changeActiveNodeInfo", "deleteLine", "deleteNode"]);
 const rules = reactive({
     label: [
         { required: true, message: "节点名称为必输项", trigger: "blur" },
-        { min: 4, max: 8, message: "请输入4至8之间的字符", trigger: "blur" },
+        { min: 4, max: 15, message: "请输入4至15之间的字符", trigger: "blur" },
     ],
     affiliation: [
         {

src/pages/system/SystemPage.vue

@@ -15,7 +15,8 @@
 
                 <!-- 公共组件box -->
                 <div class="traBox">
-                    <LineTree  @listBack="listBack"></LineTree>
+                    <LineTree v-if="selectIndex == 0" @listBack="listBack"></LineTree>
+                    <ModuleTree v-if="selectIndex == 1"></ModuleTree>
                 </div>
                 <!-- 切换box -->
                 <div class="changeBox">
@@ -32,6 +33,7 @@ import { ref, onMounted } from 'vue';
 import LitLine from './components/LitLine.vue'
 import LineTree from './components/LineTree.vue'
 import InsideModule from './components/InsideModule.vue';
+import ModuleTree from './components/ModuleTree.vue';
 import blueBtn from '@/assets/image/btn_blue.png'
 import grayBtn from '@/assets/image/btn_gray.png'
 export default {
@@ -80,6 +82,7 @@ export default {
         LitLine,
         LineTree,
         InsideModule,
+        ModuleTree,
     }
 }
 </script>
@@ -106,7 +109,7 @@ export default {
 
 .setBox {
     width: 100%;
-    height: calc(100vh - 200px);
+    height: calc(100vh - 150px);
     /* border: 1px solid saddlebrown; */
     display: flex;
     justify-content: space-evenly;
@@ -115,15 +118,15 @@ export default {
 }
 
 .traBox {
-    width: 20%;
-    height: calc(100vh - 200px);
+    width: 15%;
+    height: calc(100vh - 150px);
     /* border: 1px solid green; */
     background-color: #F7F8FB;
 }
 
 .changeBox {
-    width: 70%;
-    height: calc(100vh - 200px);
+    width: 80%;
+    height: calc(100vh - 150px);
     /* border: 1px solid red; */
 }
 </style>

src/pages/system/components/InsideModule.vue

@@ -4,11 +4,21 @@
             <div style="text-align: center;">
                 <h2>间隔管理</h2>
             </div>
-            <div class="setBox">
-                <el-button type="primary" plain><el-icon><Plus /></el-icon>添加间隔</el-button>
-            </div>
-            <div class="tableBox">
+            <div style="display: flex;justify-content: flex-start;align-items: center;height: 89%;">
+                <!-- <div class="moduleBox">
+
+                </div> -->
+                <div style="height: 100%;width: 100%;position: relative;">
+                    <div class="setBox">
 
+                    </div>
+                    <div class="tableBox">
+                        <!-- <FeelLoad></FeelLoad> -->
+                        <!-- <FatherMap></FatherMap> -->
+                        <!-- 建议使用这个 -->
+                        <DrawDesigns></DrawDesigns>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -17,23 +27,73 @@
 <script>
 import { ref, onMounted, toRefs, watch } from 'vue';
 import { ElMessage } from 'element-plus';
+import FeelLoad from '@/pages/feelLoad/FeelLoad.vue'//bmnp
+import FatherMap from '@/pages/mapLoad/FatherMap.vue';//jsplumb
+import DrawDesigns from '@/pages/components/draw/DrawDesigns.vue';//原生js
 export default {
-    setup () {
+    setup() {
         let moduleList = ref([])
-        function searchModule(){
+        function searchModule() {
 
         }
-        onMounted(()=>{
+        onMounted(() => {
             searchModule()
         })
         return {
             moduleList,
             searchModule,
         }
+    },
+    components: {
+        FeelLoad,
+        FatherMap,
+        DrawDesigns
     }
 }
 </script>
 
 <style scoped>
+.bigBox {
+    width: 100%;
+    height: calc(100vh - 150px);
+    border: 1px solid blue;
+}
+
+.tableBox {
+    width: 100%;
+    height: calc(100% - 10%);
+}
 
+.setBox {
+    width: calc(100% - 11%);
+    height: calc(100% - 85%);
+    border: 1px solid red;
+    position: absolute;
+    top: 0px;
+    left: calc(100% - 1260px);
+    z-index: 1;
+    background-color: white;
+    /* margin-top: 1px; */
+}
+.moduleBox{
+    width: 10%;
+    height: 100%;
+    border: 1px solid green;
+}
+:deep(.lf-dndpanel){
+    height: calc(100%);
+    overflow-y: auto;
+}
+:deep(.lf-dnd-shape){
+    display: none;
+}
+:deep(.lf-dnd-text){
+    width: calc(100% - 8px);
+    height: 42px;
+    border: 1px solid #255CE7;
+    margin-left: 2px;
+    color: #255CE7;
+    text-align: center;
+    line-height: 22px;
+}
 </style>

src/pages/system/components/ModuleTree.vue

@@ -0,0 +1,74 @@
+<template>
+    <div>
+        <div class="bigBox">
+            <div class="loadBox">
+                <img style="display: block;width: 20px;height: 20px;" src="../../../assets/icon/module.png" alt="">
+                <span style="font-size: 16px;display: block;">
+                    间隔模型管理
+                </span>
+            </div>
+            <div class="treeBox">
+                <el-tree class="treeData" :data="moduleData" :props="defaultProps" @node-click="handleNodeClick" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+export default {
+    setup() {
+        let moduleData = ref([
+            {
+                label: "测试",
+                id: "1",
+                children: [
+                    {
+                        label: "测试1",
+                        id: '11'
+                    }
+                ]
+            }
+        ])//树形数据
+        let defaultProps = ref({//树形默认props
+            label: "label",
+            children: "children",
+            id: "id"
+        })
+        function handleNodeClick(e) {//树形点击方法
+            console.log(e, 'row');
+        }
+        return {
+            moduleData,//树形数据
+            defaultProps,//树形默认props
+            handleNodeClick,//树形点击方法
+        }
+    }
+}
+</script>
+
+<style scoped>
+.bigBox {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+}
+
+.loadBox {
+    width: 50%;
+    height: 30px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
+.treeBox{
+    width: 50%;
+    height: auto;
+    margin: 0 auto;
+}
+.treeData{
+    background-color: #F7F8FB;
+    width: calc(100% - 100px);
+}
+</style>

src/router/index.js

@@ -22,6 +22,10 @@ const routes = [
         component: () => import("@/pages/mapLoad/FatherMap.vue")
     },
     {
+        path:"/draw",
+        component:()=>import("@/pages/components/draw/DrawDesigns.vue")
+    },
+    {
         path: "/home",
         component: () => import("@/pages/home/HomePage.vue"),
         meta: {

src/utils/logicFlow.js

@@ -0,0 +1,55 @@
+import { PolylineEdge, PolylineEdgeModel } from "@logicflow/core";
+const graphData = {
+    nodes: [
+        {
+            id: '242b1b6c-1721-4b10-b4ad-c895094cf332',
+            type: 'rect',
+            x: 100,
+            y: 100
+        },
+        {
+            id: 'e59d6ecd-68f7-4d50-8e3f-29e67b6e5f16',
+            type: 'circle',
+            x: 300,
+            y: 200
+        }
+    ],
+    edges: [
+        {
+            sourceNodeId: '242b1b6c-1721-4b10-b4ad-c895094cf332',
+            targetNodeId: 'e59d6ecd-68f7-4d50-8e3f-29e67b6e5f16',
+            type: 'CustomEdge',
+        }
+    ]
+}
+class CustomEdgeModel extends PolylineEdgeModel {
+    getEdgeStyle() {
+        const style = super.getEdgeStyle();
+        const { properties } = this;
+        if (properties.isActived) {
+            style.strokeDasharray = "4 4";
+        }
+        style.stroke = "orange";
+        return style;
+    }
+
+    getTextStyle() {
+        const style = super.getTextStyle();
+        style.color = "#3451F1";
+        style.fontSize = 20;
+        style.background && (style.background.fill = "#F2F131");
+        return style;
+    }
+
+    getOutlineStyle() {
+        const style = super.getOutlineStyle();
+        style.stroke = "red";
+        style.hover && (style.hover.stroke = "red");
+        return style;
+    }
+}
+export default {
+    type: "CustomEdge",
+    // view: CustomEdgeNode,
+    model: CustomEdgeModel,
+}

src/utils/xmlStr.js

@@ -0,0 +1,29 @@
+export var xmlStr = `<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="sid-38422fae-e03e-43a3-bef4-bd33b32041b2" targetNamespace="http://bpmn.io/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="5.1.2">
+<process id="Process_1" isExecutable="false">
+    <startEvent id="StartEvent_1y45yut" name="开始">
+    <outgoing>SequenceFlow_0h21x7r</outgoing>
+    </startEvent>
+    <task id="Task_1hcentk">
+    <incoming>SequenceFlow_0h21x7r</incoming>
+    </task>
+    <sequenceFlow id="SequenceFlow_0h21x7r" sourceRef="StartEvent_1y45yut" targetRef="Task_1hcentk" />
+</process>
+<bpmndi:BPMNDiagram id="BpmnDiagram_1">
+    <bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_1">
+    <bpmndi:BPMNShape id="StartEvent_1y45yut_di" bpmnElement="StartEvent_1y45yut">
+        <omgdc:Bounds x="152" y="102" width="36" height="36" />
+        <bpmndi:BPMNLabel>
+        <omgdc:Bounds x="160" y="145" width="22" height="14" />
+        </bpmndi:BPMNLabel>
+    </bpmndi:BPMNShape>
+    <bpmndi:BPMNShape id="Task_1hcentk_di" bpmnElement="Task_1hcentk">
+        <omgdc:Bounds x="240" y="80" width="100" height="80" />
+    </bpmndi:BPMNShape>
+    <bpmndi:BPMNEdge id="SequenceFlow_0h21x7r_di" bpmnElement="SequenceFlow_0h21x7r">
+        <omgdi:waypoint x="188" y="120" />
+        <omgdi:waypoint x="240" y="120" />
+    </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+</bpmndi:BPMNDiagram>
+</definitions>`