diff --git a/hs_err_pid14652.log b/hs_err_pid14652.log
new file mode 100644
index 00000000..73d9f554
--- /dev/null
+++ b/hs_err_pid14652.log
@@ -0,0 +1,197 @@
+#
+# There is insufficient memory for the Java Runtime Environment to continue.
+# Native memory allocation (mmap) failed to map 266338304 bytes for Failed to commit area from 0x0000000702400000 to 0x0000000712200000 of length 266338304.
+# Possible reasons:
+#   The system is out of physical RAM or swap space
+#   The process is running with CompressedOops enabled, and the Java Heap may be blocking the growth of the native heap
+# Possible solutions:
+#   Reduce memory load on the system
+#   Increase physical memory or swap space
+#   Check if swap backing store is full
+#   Decrease Java heap size (-Xmx/-Xms)
+#   Decrease number of Java threads
+#   Decrease Java thread stack sizes (-Xss)
+#   Set larger code cache with -XX:ReservedCodeCacheSize=
+# This output file may be truncated or incomplete.
+#
+#  Out of Memory Error (./src/hotspot/os/windows/os_windows.cpp:3303), pid=14652, tid=5900
+#
+# JRE version:  (11.0.8+10) (build )
+# Java VM: OpenJDK 64-Bit Server VM (11.0.8+10-b944.34, mixed mode, sharing, tiered, compressed oops, g1 gc, windows-amd64)
+# No core dump will be written. Minidumps are not enabled by default on client versions of Windows
+#
+
+---------------  S U M M A R Y ------------
+
+Command Line: org.jetbrains.git4idea.http.GitAskPassApp Username for 'http://121.40.234.130:8899': 
+
+Host: Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz, 8 cores, 15G,  Windows 10 , 64 bit Build 19041 (10.0.19041.1741)
+Time: Thu Jul 14 00:23:31 2022 中国标准时间 elapsed time: 0 seconds (0d 0h 0m 0s)
+
+---------------  T H R E A D  ---------------
+
+Current thread (0x00000299e7a70000):  JavaThread "Unknown thread" [_thread_in_vm, id=5900, stack(0x000000a5a6d00000,0x000000a5a6e00000)]
+
+Stack: [0x000000a5a6d00000,0x000000a5a6e00000]
+Native frames: (J=compiled Java code, j=interpreted, Vv=VM code, C=native code)
+V  [jvm.dll+0x5de35a]
+V  [jvm.dll+0x712355]
+V  [jvm.dll+0x7138ad]
+V  [jvm.dll+0x713f63]
+V  [jvm.dll+0x23e628]
+V  [jvm.dll+0x5db804]
+V  [jvm.dll+0x5d0925]
+V  [jvm.dll+0x2faf9b]
+V  [jvm.dll+0x2faf0a]
+V  [jvm.dll+0x2fade2]
+V  [jvm.dll+0x2ffcb6]
+V  [jvm.dll+0x3483a3]
+V  [jvm.dll+0x348aa6]
+V  [jvm.dll+0x3484a3]
+V  [jvm.dll+0x2d5be8]
+V  [jvm.dll+0x2d6d87]
+V  [jvm.dll+0x6f10e7]
+V  [jvm.dll+0x6f28dc]
+V  [jvm.dll+0x3558f9]
+V  [jvm.dll+0x6d492e]
+V  [jvm.dll+0x3bdad3]
+V  [jvm.dll+0x3bfd01]
+C  [jli.dll+0x5373]
+C  [ucrtbase.dll+0x21bb2]
+C  [KERNEL32.DLL+0x17034]
+C  [ntdll.dll+0x52651]
+
+
+---------------  P R O C E S S  ---------------
+
+Threads class SMR info:
+_java_thread_list=0x00000299e5863e30, length=0, elements={
+}
+
+Java Threads: ( => current thread )
+
+Other Threads:
+  0x00000299e7a88000 GCTaskThread "GC Thread#0" [stack: 0x000000a5a6e00000,0x000000a5a6f00000] [id=18384]
+  0x00000299e7ae5800 ConcurrentGCThread "G1 Main Marker" [stack: 0x000000a5a6f00000,0x000000a5a7000000] [id=28756]
+  0x00000299e7ae7000 ConcurrentGCThread "G1 Conc#0" [stack: 0x000000a5a7000000,0x000000a5a7100000] [id=28696]
+
+[error occurred during error reporting (printing all threads), id 0xc0000005, EXCEPTION_ACCESS_VIOLATION (0xc0000005) at pc=0x00007ffe280b60c7]
+
+VM state:not at safepoint (not fully initialized)
+
+VM Mutex/Monitor currently owned by a thread:  ([mutex/lock_event])
+[0x00000299e7a6c1c0] Heap_lock - owner thread: 0x00000299e7a70000
+
+Heap address: 0x0000000702400000, size: 4060 MB, Compressed Oops mode: Non-zero based: 0x0000000702400000
+Narrow klass base: 0x0000000000000000, Narrow klass shift: 0
+
+GC Heap History (0 events):
+No events
+
+Deoptimization events (0 events):
+No events
+
+Classes redefined (0 events):
+No events
+
+Internal exceptions (0 events):
+No events
+
+Events (1 events):
+Event: 0.008 Loaded shared library D:\Program Files\JetBrains\IntelliJ IDEA 2020.2.3\jbr\bin\zip.dll
+
+
+Dynamic libraries:
+0x00007ff70cf80000 - 0x00007ff70cf8a000 	D:\Program Files\JetBrains\IntelliJ IDEA 2020.2.3\jbr\bin\java.exe
+0x00007ffe6d090000 - 0x00007ffe6d287000 	C:\WINDOWS\SYSTEM32\ntdll.dll
+0x00007ffe6c480000 - 0x00007ffe6c53d000 	C:\WINDOWS\System32\KERNEL32.DLL
+0x00007ffe6aba0000 - 0x00007ffe6ae6d000 	C:\WINDOWS\System32\KERNELBASE.dll
+0x00007ffe6ae70000 - 0x00007ffe6af70000 	C:\WINDOWS\System32\ucrtbase.dll
+0x00007ffe63940000 - 0x00007ffe63959000 	D:\Program Files\JetBrains\IntelliJ IDEA 2020.2.3\jbr\bin\jli.dll
+0x00007ffe3f520000 - 0x00007ffe3f537000 	D:\Program Files\JetBrains\IntelliJ IDEA 2020.2.3\jbr\bin\VCRUNTIME140.dll
+0x00007ffe6b3b0000 - 0x00007ffe6b550000 	C:\WINDOWS\System32\USER32.dll
+0x00007ffe6aaa0000 - 0x00007ffe6aac2000 	C:\WINDOWS\System32\win32u.dll
+0x00007ffe51a50000 - 0x00007ffe51cea000 	C:\WINDOWS\WinSxS\amd64_microsoft.windows.common-controls_6595b64144ccf1df_6.0.19041.1110_none_60b5254171f9507e\COMCTL32.dll
+0x00007ffe6c440000 - 0x00007ffe6c46a000 	C:\WINDOWS\System32\GDI32.dll
+0x00007ffe6b550000 - 0x00007ffe6b5ee000 	C:\WINDOWS\System32\msvcrt.dll
+0x00007ffe6afe0000 - 0x00007ffe6b0eb000 	C:\WINDOWS\System32\gdi32full.dll
+0x00007ffe6aad0000 - 0x00007ffe6ab6d000 	C:\WINDOWS\System32\msvcp_win.dll
+0x00007ffe6d020000 - 0x00007ffe6d050000 	C:\WINDOWS\System32\IMM32.DLL
+0x00007ffe093b0000 - 0x00007ffe0944d000 	D:\Program Files\JetBrains\IntelliJ IDEA 2020.2.3\jbr\bin\msvcp140.dll
+0x00007ffe27dd0000 - 0x00007ffe2888d000 	D:\Program Files\JetBrains\IntelliJ IDEA 2020.2.3\jbr\bin\server\jvm.dll
+0x00007ffe6bf70000 - 0x00007ffe6c01e000 	C:\WINDOWS\System32\ADVAPI32.dll
+0x00007ffe6b1f0000 - 0x00007ffe6b28c000 	C:\WINDOWS\System32\sechost.dll
+0x00007ffe6be30000 - 0x00007ffe6bf55000 	C:\WINDOWS\System32\RPCRT4.dll
+0x00007ffe6c470000 - 0x00007ffe6c478000 	C:\WINDOWS\System32\PSAPI.DLL
+0x00007ffe51ea0000 - 0x00007ffe51ec7000 	C:\WINDOWS\SYSTEM32\WINMM.dll
+0x00007ffe4e440000 - 0x00007ffe4e449000 	C:\WINDOWS\SYSTEM32\WSOCK32.dll
+0x00007ffe625c0000 - 0x00007ffe625ca000 	C:\WINDOWS\SYSTEM32\VERSION.dll
+0x00007ffe6c540000 - 0x00007ffe6c5ab000 	C:\WINDOWS\System32\WS2_32.dll
+0x00007ffe69040000 - 0x00007ffe69052000 	C:\WINDOWS\SYSTEM32\kernel.appcore.dll
+0x00007ffe65a90000 - 0x00007ffe65aa1000 	D:\Program Files\JetBrains\IntelliJ IDEA 2020.2.3\jbr\bin\verify.dll
+0x00007ffe59cf0000 - 0x00007ffe59ed4000 	C:\WINDOWS\SYSTEM32\DBGHELP.DLL
+0x00007ffe4d460000 - 0x00007ffe4d48c000 	C:\WINDOWS\SYSTEM32\dbgcore.DLL
+0x00007ffe6a7b0000 - 0x00007ffe6a832000 	C:\WINDOWS\System32\bcryptPrimitives.dll
+0x00007ffe64470000 - 0x00007ffe64499000 	D:\Program Files\JetBrains\IntelliJ IDEA 2020.2.3\jbr\bin\java.dll
+0x00007ffe64640000 - 0x00007ffe6464b000 	D:\Program Files\JetBrains\IntelliJ IDEA 2020.2.3\jbr\bin\jimage.dll
+0x00007ffe63920000 - 0x00007ffe63938000 	D:\Program Files\JetBrains\IntelliJ IDEA 2020.2.3\jbr\bin\zip.dll
+
+dbghelp: loaded successfully - version: 4.0.5 - missing functions: none
+symbol engine: initialized successfully - sym options: 0x614 - pdb path: .;D:\Program Files\JetBrains\IntelliJ IDEA 2020.2.3\jbr\bin;C:\WINDOWS\SYSTEM32;C:\WINDOWS\WinSxS\amd64_microsoft.windows.common-controls_6595b64144ccf1df_6.0.19041.1110_none_60b5254171f9507e;D:\Program Files\JetBrains\IntelliJ IDEA 2020.2.3\jbr\bin\server
+
+VM Arguments:
+java_command: org.jetbrains.git4idea.http.GitAskPassApp Username for 'http://121.40.234.130:8899': 
+java_class_path (initial): D:/Program Files/JetBrains/IntelliJ IDEA 2020.2.3/plugins/git4idea/lib/git4idea-rt.jar;D:/Program Files/JetBrains/IntelliJ IDEA 2020.2.3/lib/xmlrpc-2.0.1.jar;D:/Program Files/JetBrains/IntelliJ IDEA 2020.2.3/lib/commons-codec-1.14.jar
+Launcher Type: SUN_STANDARD
+
+[Global flags]
+     intx CICompilerCount                          = 4                                         {product} {ergonomic}
+     uint ConcGCThreads                            = 2                                         {product} {ergonomic}
+     uint G1ConcRefinementThreads                  = 8                                         {product} {ergonomic}
+   size_t G1HeapRegionSize                         = 1048576                                   {product} {ergonomic}
+    uintx GCDrainStackTargetSize                   = 64                                        {product} {ergonomic}
+   size_t InitialHeapSize                          = 266338304                                 {product} {ergonomic}
+   size_t MarkStackSize                            = 4194304                                   {product} {ergonomic}
+   size_t MaxHeapSize                              = 4257218560                                {product} {ergonomic}
+   size_t MinHeapDeltaBytes                        = 1048576                                   {product} {ergonomic}
+    uintx NonNMethodCodeHeapSize                   = 5836300                                {pd product} {ergonomic}
+    uintx NonProfiledCodeHeapSize                  = 122910970                              {pd product} {ergonomic}
+    uintx ProfiledCodeHeapSize                     = 122910970                              {pd product} {ergonomic}
+    uintx ReservedCodeCacheSize                    = 251658240                              {pd product} {ergonomic}
+     bool SegmentedCodeCache                       = true                                      {product} {ergonomic}
+     bool UseCompressedClassPointers               = true                                 {lp64_product} {ergonomic}
+     bool UseCompressedOops                        = true                                 {lp64_product} {ergonomic}
+     bool UseG1GC                                  = true                                      {product} {ergonomic}
+     bool UseLargePagesIndividualAllocation        = false                                  {pd product} {ergonomic}
+
+Logging:
+Log output configuration:
+ #0: stdout all=warning uptime,level,tags
+ #1: stderr all=off uptime,level,tags
+
+Environment Variables:
+JAVA_HOME=C:\software\java\jdk8u131
+PATH=d:\Program Files\Git\mingw64/libexec/git-core;d:\Program Files\Git\mingw64\bin;d:\Program Files\Git\usr\bin;C:\Users\lenovo\bin;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\iCLS\;C:\Program Files\Intel\Intel(R) Management Engine Components\iCLS\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\software\java\jdk8u131\bin;C:\Program Files\TortoiseSVN\bin;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;D:\Program Files\Microsoft SQL Server\Client SDK\ODBC\110\Tools\Binn\;D:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn\;D:\Program Files\Microsoft SQL Server\120\Tools\Binn\;D:\Program Files\Microsoft SQL Server\120\DTS\Binn\;D:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn\ManagementStudio\;D:\Program Files (x86)\Microsoft SQL Server\120\DTS\Binn\;D:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn\;D:\Program Files\Microsoft SQL Server\140\Tools\Binn\;D:\Program Files (x86)\Microsoft SQL Server\140\DTS\Binn\;D:\Program Files\Microsoft SQL Server\140\DTS\Binn\;D:\Program Files\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;D:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;D:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn\ManagementStudio\;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;D:\software\gradle-4.9\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;D:\software\Redis\;C:\Program Files (x86)\MySQL\MySQL Fabric 1.5 & MySQL Utilities 1.5\;C:\Program Files (x86)\MySQL\MySQL Fabric 1.5 & MySQL Utilities 1.5\Doctrine extensions for PHP\;D:\software\apache-maven-3.6.1\bin;D:\Program Files (x86)\Bitvise SSH Client;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;D:\Program Files\MongoDB\Serve
+USERNAME=lenovo
+DISPLAY=:0.0
+LC_ALL=en_US.UTF-8
+OS=Windows_NT
+PROCESSOR_IDENTIFIER=Intel64 Family 6 Model 142 Stepping 10, GenuineIntel
+
+
+
+---------------  S Y S T E M  ---------------
+
+OS: Windows 10 , 64 bit Build 19041 (10.0.19041.1741)
+OS uptime: 1 days 9:09 hours
+
+CPU:total 8 (initial active 8) (4 cores per cpu, 2 threads per core) family 6 model 142 stepping 10, cmov, cx8, fxsr, mmx, sse, sse2, sse3, ssse3, sse4.1, sse4.2, popcnt, avx, avx2, aes, clmul, erms, 3dnowpref, lzcnt, ht, tsc, tscinvbit, bmi1, bmi2, adx, fma
+
+Memory: 4k page, system-wide physical 16238M (3942M free)
+TotalPageFile size 26655M (AvailPageFile size 261M)
+current process WorkingSet (physical memory assigned to process): 10M, peak: 10M
+current process commit charge ("private bytes"): 60M, peak: 314M
+
+vm_info: OpenJDK 64-Bit Server VM (11.0.8+10-b944.34) for windows-amd64 JRE (11.0.8+10-b944.34), built on Sep 11 2020 15:32:11 by "" with MS VC++ 14.0 (VS2015)
+
+END.
diff --git a/mes/hd/nladmin-system/src/main/java/org/nl/start/Test01.wql b/mes/hd/nladmin-system/src/main/java/org/nl/start/Test01.wql
new file mode 100644
index 00000000..e69de29b
diff --git a/wcs/hd/nladmin-system/src/main/resources/config/application-dev.yml b/wcs/hd/nladmin-system/src/main/resources/config/application-dev.yml
index baf4fc59..f110a815 100644
--- a/wcs/hd/nladmin-system/src/main/resources/config/application-dev.yml
+++ b/wcs/hd/nladmin-system/src/main/resources/config/application-dev.yml
@@ -8,11 +8,11 @@ spring:
     druid:
       db-type: com.alibaba.druid.pool.DruidDataSource
       driverClassName: net.sf.log4jdbc.sql.jdbcapi.DriverSpy
-      #url: jdbc:log4jdbc:mysql://${DB_HOST:192.168.81.252}:${DB_PORT:3306}/${DB_NAME:hl_acs}?serverTimezone=Asia/Shanghai&characterEncoding=utf8&useSSL=false&useOldAliasMetadataBehavior=true
-      url: jdbc:log4jdbc:mysql://${DB_HOST:192.168.46.225}:${DB_PORT:3306}/${DB_NAME:hl_acs_one}?serverTimezone=Asia/Shanghai&characterEncoding=utf8&useSSL=false&useOldAliasMetadataBehavior=true&allowPublicKeyRetrieval=true
+      url: jdbc:log4jdbc:mysql://${DB_HOST:192.168.81.252}:${DB_PORT:3306}/${DB_NAME:hl_one_acs}?serverTimezone=Asia/Shanghai&characterEncoding=utf8&useSSL=false&useOldAliasMetadataBehavior=true
+#      url: jdbc:log4jdbc:mysql://${DB_HOST:192.168.46.225}:${DB_PORT:3306}/${DB_NAME:hl_acs_one}?serverTimezone=Asia/Shanghai&characterEncoding=utf8&useSSL=false&useOldAliasMetadataBehavior=true&allowPublicKeyRetrieval=true
       username: ${DB_USER:root}
-      password: ${DB_PWD:123456}
-      #password: ${DB_PWD:Root.123456}
+#      password: ${DB_PWD:123456}
+      password: ${DB_PWD:Root.123456}
       #password: ${DB_PWD:password}
       # 鍒濆杩炴帴鏁�
       initial-size: 5
@@ -59,13 +59,13 @@ spring:
             multi-statement-alagvslow: true
   data:
     mongodb:
-      host: 192.168.46.225
+      host: 47.111.78.178
       port: 27017
       database: nlacs
   redis:
     #鏁版嵁搴撶储寮�
     database: ${REDIS_DB:10}
-    host: ${REDIS_HOST:192.168.46.225}
+    host: ${REDIS_HOST:47.111.78.178}
     port: ${REDIS_PORT:6379}
     password: ${REDIS_PWD:}
     #杩炴帴瓒呮椂鏃堕棿
@@ -162,5 +162,5 @@ jetcache:
         maxIdle: 200
         maxTotal: 1000
       uri:
-        - redis://127.0.0.1:6379
+        - redis://47.111.78.178:6379
 
diff --git a/wcs/qd/package.json b/wcs/qd/package.json
index 6d2b7c5b..7fa2168e 100644
--- a/wcs/qd/package.json
+++ b/wcs/qd/package.json
@@ -33,6 +33,8 @@
     "url": "https://github.com/elunez/eladmin/issues"
   },
   "dependencies": {
+    "@logicflow/core": "^1.1.22",
+    "@logicflow/extension": "^1.1.22",
     "@riophae/vue-treeselect": "0.4.0",
     "af-table-column": "^1.0.3",
     "axios": "0.18.1",
@@ -73,7 +75,8 @@
     "wangeditor": "^3.1.1",
     "xe-ajax": "^4.0.5",
     "xe-utils": "^3.3.1",
-    "xlsx": "^0.14.5"
+    "xlsx": "^0.14.5",
+    "vue-color": "^2.8.1"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",
diff --git a/wcs/qd/src/views/acs/monitor/device/index2.vue b/wcs/qd/src/views/acs/monitor/device/index2.vue
new file mode 100644
index 00000000..b9483971
--- /dev/null
+++ b/wcs/qd/src/views/acs/monitor/device/index2.vue
@@ -0,0 +1,616 @@
+<template>
+  <div class="monitor-wrap">
+    <el-row style="margin-top: 20px;margin-left: 20px;margin-bottom: 20px">
+      <el-col :span="6" />
+      <el-col :span="18">
+        <!-- 鑸炲彴:
+         <el-select v-model="stage_code" placeholder="璇烽�夋嫨" @change="changeStage">
+           <el-option
+             v-for="item in stageSelectList"
+             :key="item.stage_code"
+             :label="item.stage_name"
+             :value="item.stage_code">
+           </el-option>
+         </el-select>
+         <el-button type="primary" @click="saveAll" :loading="saveLoading">淇濆瓨</el-button>
+         <el-button type="success" @click="cleanArr2">娓呯┖</el-button>-->
+        <!-- <el-button type="info">鎿嶄綔</el-button>-->
+      </el-col>
+    </el-row>
+
+    <el-row>
+      <el-col :span="1" style="margin-left: 10px">
+        <div>
+          <!-- <draggable :list="arr1" animation="300"
+                      dragClass="dragClass"
+                      ghostClass="ghostClass"
+                      chosenClass="chosenClass"
+                      @start="onStart"
+                      @end="onEnd"
+                      :move="onMove"
+                      :group="{ name:'group', pull:'clone', put:false}"
+           >
+
+             &lt;!&ndash;vue涓紩鍏ュ浘鐗噃ttps://blog.csdn.net/qq_35393869/article/details/80333564&ndash;&gt;
+             <div v-for="(item,index) in arr1" :key="index"
+                  style="position: relative; width: 34px;height: 34px;display: inline-block;margin: 0 0 0 0 ;vertical-align:bottom;outline: 1px solid #f0f0f0;">
+               <img :src="require('../../../../assets/acs/' +item.img1+'.png')" alt="" width="34px" height="34px;"
+                    style="margin: 0 0 0 0;vertical-align:bottom;transform: rotate(0deg);"/>
+
+             </div>
+
+           </draggable>-->
+        </div>
+      </el-col>
+
+      <el-col :span="22" style="margin-left: 30px">
+        <el-scrollbar style="width:1850px;height: 1050px;">
+          <!--浣跨敤draggable缁勪欢-->
+          <draggable
+            :list="arr2"
+            group="group"
+            animation="300"
+            filter=".forbid"
+            :style="'width:'+ grid_width +'px;'"
+          >
+
+            <div
+              v-for="(item) in arr2"
+              :key="item.index"
+              class="forbid"
+              style="position: relative; width: 34px;height: 34px;display: inline-block;margin: 0 0 0 0 ;vertical-align:bottom;"
+              @click="clickDevice(item)"
+            >
+
+              <el-popover
+                v-if="currentItem == item.index"
+                :ref="'pop_'+item.index"
+                placement="bottom"
+                effect="dark"
+                trigger="manual"
+                :value="currentItem == item.index"
+                :disabled="item.device_code == ''"
+                :popper-class="isErrorColor(item)"
+              >
+                <div v-if="item.device_code !== ''" style="height: 390px;overflow-y: auto">
+                  <div style="padding: 3px;">
+                    璁惧淇℃伅
+                  </div>
+                  <el-table
+                    :data="moveShow(item)"
+                    style="width: 100%"
+                  >
+                    <af-table-column
+                      prop="name"
+                      label="鐩戞帶椤�"
+                    />
+                    <af-table-column
+                      prop="value"
+                      label="褰撳墠鍊�"
+                    />
+                  </el-table>
+                </div>
+              </el-popover>
+
+              <div v-popover="'pop_'+item.index" class="content" @mouseover="changeCurrentTime(item)">
+                <img
+                  :src="require('../../../../assets/acs/' +item.img2+'.png')"
+                  alt=""
+                  width="34px"
+                  height="34px;"
+                  :style="{ transform:' rotate('+item.angle+'deg)' }"
+                  style="outline: 1px solid #f0f0f0;"
+                >
+                <img
+                  v-if="hasGoods(item) && item.img2!='1' "
+                  :src="require('../../../../assets/acs/' +'鎵樼洏'+'.png')"
+                  style="position: absolute; top: 5px;right: 5px;width: 24px;height: 24px;"
+                >
+                <img
+                  v-if="statusPic(item) && item.img2!='1'"
+                  :src="require('../../../../assets/acs/' +'status0'+'.png')"
+                  style="position: absolute; top: 0;left: 0;"
+                >
+                <img
+                  v-if="!statusPic(item) && item.img2!='1' && item.device_code"
+                  :src="require('../../../../assets/acs/' +'status1'+'.png')"
+                  style="position: absolute; top: 0;left: 0;"
+                >
+                <img
+                  v-if="isError(item)"
+                  :src="require('../../../../assets/acs/' +'icon_alert'+'.png')"
+                  style="position: absolute; top: 5px;right: 5px;width: 23px;height: 23px;"
+                >
+              </div>
+            </div>
+          </draggable>
+        </el-scrollbar>
+      </el-col>
+    </el-row>
+
+    <!--寮圭獥璁剧疆璁惧涓庡浘鏍囩粦瀹氫笌瑙掑害-->
+    <el-dialog title="璁惧璁剧疆" :visible.sync="dialogFormVisible" width="35%">
+      <el-form :model="form" size="small">
+        <el-form-item label="璁惧缂栧彿" prop="device_code" label-width="80px">
+          <el-input v-model="form.device_code" :disabled="true" />
+        </el-form-item>
+
+        <el-form-item label="璁惧鐘舵��" label-width="80px">
+          <el-radio-group v-model="form.hasGoodStatus">
+            <el-radio-button :label="0">鏃犺揣</el-radio-button>
+            <el-radio-button :label="1">鏈夋墭鐩�</el-radio-button>
+            <el-radio-button :label="2">鏈夋墭鐩樻湁璐�</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">鍙� 娑�</el-button>
+        <el-button type="primary" @click="dialogSave">纭� 瀹�</el-button>
+      </div>
+    </el-dialog>
+
+    <!--寮圭獥璁剧疆璁惧涓庡浘鏍囩粦瀹氫笌瑙掑害-->
+    <el-dialog title="璁惧璁剧疆" :visible.sync="dialogFormVisible3" width="35%">
+      <el-form :model="form" size="small">
+        <el-form-item label="璁惧缂栧彿" prop="device_code" label-width="80px">
+          <el-input v-model="form.device_code" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="璁惧鐘舵��" label-width="80px">
+          <el-radio-group v-model="form.hasGoodStatus">
+            <el-radio-button :label="0">鏃犺揣</el-radio-button>
+            <el-radio-button :label="1">绌烘枡鏂�</el-radio-button>
+            <el-radio-button :label="2">婊℃枡鏂�</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="鐗╂枡缂栫爜" prop="material_type" label-width="80px">
+          <el-input v-model="form.material_type" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible3 = false">鍙� 娑�</el-button>
+        <el-button type="primary" @click="dialogSave">纭� 瀹�</el-button>
+      </div>
+    </el-dialog>
+
+    <!--寮圭獥璁剧疆璁惧涓庡浘鏍囩粦瀹氫笌瑙掑害-->
+    <el-dialog title="璁惧璁剧疆" :visible.sync="dialogFormVisible4" width="35%">
+      <el-form :model="form" size="small">
+        <el-form-item label="璁惧缂栧彿" prop="device_code" label-width="120px">
+          <el-input v-model="form.device_code" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="缂烘枡璇锋眰鎴愬姛" prop="requireSucess" label-width="120px">
+          <el-radio-group v-model="form.requireSucess">
+            <el-radio-button :label="0">鍚�</el-radio-button>
+            <el-radio-button :label="1">鏄�</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="绌烘兂璇锋眰鎴愬姛" prop="fullrequireSucess" label-width="120px">
+          <el-radio-group v-model="form.fullrequireSucess">
+            <el-radio-button :label="0">鍚�</el-radio-button>
+            <el-radio-button :label="1">鏄�</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible4 = false">鍙� 娑�</el-button>
+        <el-button type="primary" @click="dialogSave">纭� 瀹�</el-button>
+      </div>
+    </el-dialog>
+
+    <!--寮圭獥璁剧疆璁惧涓庡浘鏍囩粦瀹氫笌瑙掑害-->
+    <el-dialog title="璁惧璁剧疆" :visible.sync="dialogFormVisible1" width="35%">
+      <el-form :model="form" size="small">
+        <el-form-item label="璁惧缂栧彿" prop="device_code" label-width="80px">
+          <el-input v-model="form.device_code" :disabled="true" />
+        </el-form-item>
+
+        <el-form-item label="鏉＄爜" label-width="80px">
+          <el-input v-model="form.barcode" :disabled="false" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible1 = false">鍙� 娑�</el-button>
+        <el-button type="primary" @click="saveBarcode">纭� 瀹�</el-button>
+      </div>
+    </el-dialog>
+    <XJDeviceMonitor ref="child1" />
+  </div>
+</template>
+
+<script>
+// 瀵煎叆draggable缁勪欢
+import deviceCrud from '@/api/acs/device/device'
+import draggable from 'vuedraggable'
+import crud from '@/mixins/crud'
+import actorCrud from '@/api/acs/stage/actor'
+import XJDeviceMonitor from '@/views/acs/monitor/device/XJDeviceMonitor'
+
+export default {
+  name: 'MonitorDevice',
+  // 娉ㄥ唽draggable缁勪欢
+  components: {
+    draggable, XJDeviceMonitor
+  },
+  mixins: [crud],
+  data() {
+    return {
+      stage_code: '',
+      dialogFormVisible: false,
+      dialogFormVisible1: false,
+      dialogFormVisible2: false,
+      dialogFormVisible3: false,
+      dialogFormVisible4: false,
+      arr2: [],
+      currentItem: '',
+      stageSelectList: [],
+      deviceList: [],
+      form: {
+        index: 0,
+        device_code: '',
+        angle: 0,
+        hasGoodStatus: null,
+        barcode: '',
+        suspended: null,
+        material_type: '',
+        requireSucess: '',
+        fullrequireSucess: ''
+      },
+      grid_width: 1000
+    }
+  },
+  created() {
+    this.initArr2()
+    this.webSocket()
+  },
+  methods: {
+    clickDevice(item) {
+      // debugger
+      const index = item.index
+      const clickObj = this.arr2[index]
+      console.log(clickObj.data)
+      if (!clickObj.img2 || clickObj.img2 === '1' || !item.data) {
+        return
+      }
+      if (clickObj.data.is_click !== true) {
+        return
+      }
+      if (clickObj.data.device_type === 'scanner') {
+        this.dialogFormVisible1 = true
+      } else {
+        if (clickObj.data.driver_type === 'hailiang_engraving_cache') {
+          this.dialogFormVisible3 = true
+        } else if (clickObj.data.driver_type === 'hailiang_packer_station') {
+          this.dialogFormVisible4 = true
+        } else if (clickObj.data.driver_type === 'hailiang_xj_plc_test') {
+          this.$refs.child1.setForm(clickObj)
+        } else {
+          this.dialogFormVisible = true
+        }
+      }
+      this.form.angle = clickObj.angle
+      this.form.index = clickObj.index
+      this.form.device_code = clickObj.device_code
+      this.form.hasGoodStatus = clickObj.data.hasGoods
+      this.form.material_type = clickObj.data.material_type
+      this.form.requireSucess = clickObj.data.requireSucess
+      this.form.fullrequireSucess = clickObj.data.fullrequireSucess
+    },
+    hasGoods(item) {
+      if (item.data && item.data.hasGoods > 0) {
+        return true
+      }
+      return false
+    },
+    statusPic(item) {
+      if (item.data && item.data.isOnline === true) {
+        return true
+      }
+      return false
+    },
+    isError(item) {
+      if (item.data && item.data.isError === true) {
+        return true
+      }
+      return false
+    },
+    isErrorColor(item) {
+      if (item.data && item.data.isError === true) {
+        return 'error'
+      }
+      return 'normal'
+    },
+    changeCurrentTime(item) {
+      this.currentItem = item.index
+    },
+    moveShow(item) {
+      // debugger
+      if (item.device_code && item.data) {
+        const arr = [
+          { name: '璁惧缂栧彿', value: item.device_code },
+          { name: '璁惧鍚嶇О', value: item.device_name }
+        ]
+        const data = item.data
+        for (const val in data) {
+          if (val === 'isOnline' || val === 'isError' || val === 'hasGoods') {
+            continue
+          }
+          if (val === 'message' && data.isError === true) {
+            const obj = { name: '璁惧淇℃伅', value: data[val] }
+            arr.push(obj)
+          }
+
+          if (val === 'message' && data.isError === 'false') {
+            const obj = { name: '寮傚父淇℃伅', value: data[val] }
+            arr.push(obj)
+          }
+
+          if (val === 'move') {
+            const obj = { name: '鍏夌數淇″彿', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'mode') {
+            const obj = { name: '妯″紡', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'error') {
+            const obj = { name: '鎶ヨ', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'ip') {
+            const obj = { name: 'IP鍦板潃', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'number') {
+            const obj = { name: '鎵樼洏鏁伴噺', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'qty') {
+            const obj = { name: '鏁伴噺', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'weight') {
+            const obj = { name: '閲嶉噺', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'instruction_message') {
+            const obj = { name: '鎸囦护淇℃伅', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'last_instruction_message') {
+            const obj = { name: '涓婃鎸囦护淇℃伅', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'container') {
+            const obj = { name: '杞藉叿鍙�', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'last_container') {
+            const obj = { name: '涓婃杞藉叿鍙�', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'instruction_code') {
+            const obj = { name: '鎸囦护鍙�', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'last_instruction_code') {
+            const obj = { name: '涓婃鎸囦护鍙�', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'action') {
+            const obj = { name: '鍔ㄤ綔淇″彿', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'io_action') {
+            const obj = { name: '鍏佽杩涘嚭淇″彿', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'material') {
+            const obj = { name: '鐗╂枡', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'batch') {
+            const obj = { name: '鎵规', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'requestSucess') {
+            const obj = { name: '缂烘枡璇锋眰鎴愬姛', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'fullrequestSucess') {
+            const obj = { name: '绌虹璇锋眰鎴愬姛', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'applySucess') {
+            const obj = { name: '鏄惁鐢宠鎸囦护', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'message') {
+            const obj = { name: '璇存槑', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'empty_is_lack') {
+            const obj = { name: '绌虹浣嶇己绠�', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'empty_is_finish') {
+            const obj = { name: '绌轰綅瀹屾垚', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'full_ready_req_agv') {
+            const obj = { name: '婊＄浣嶅氨缁紝璇锋眰AGV', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'full_out') {
+            const obj = { name: '婊＄宸茶繍鍑烘弧绠变綅', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'finish') {
+            const obj = { name: '璁㈠崟瀹屾垚', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'order_compel_finish') {
+            const obj = { name: '璁㈠崟寮哄埗瀹屾垚', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'now_order_prod_num') {
+            const obj = { name: '褰撳墠鐢熶骇鎬婚噺', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'now_one_prod_num') {
+            const obj = { name: '褰撳墠绠辩敓浜ч噺', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'task') {
+            const obj = { name: '浠诲姟鍙�', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'full_number') {
+            const obj = { name: '鍑烘枡鍙ｆ弧妗嗘暟閲�', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'storage_stock_num') {
+            const obj = { name: '鍌ㄦ枡浠撳簱瀛樻暟閲�', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'line_stock_num') {
+            const obj = { name: '绾夸綋搴撳瓨鏁伴噺', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'order_prod_allnum') {
+            const obj = { name: '璁㈠崟鐢熶骇鎬婚噺', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'order') {
+            const obj = { name: '宸ュ崟鍙�', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'storage_stock_num') {
+            const obj = { name: '鍌ㄦ枡浠撳簱瀛樻暟閲�', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'line_stock_num') {
+            const obj = { name: '绾夸綋搴撳瓨鏁伴噺', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'material_type') {
+            const obj = { name: '浜у搧缂栧彿', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'lack_req') {
+            const obj = { name: '缂烘枡璇锋眰', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'empty_req') {
+            const obj = { name: '绌虹璇锋眰', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'address') {
+            const obj = { name: 'agv浣嶇疆', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'phaseName') {
+            const obj = { name: 'phase', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'full_req') {
+            const obj = { name: '婊＄璇锋眰', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'open_time') {
+            const obj = { name: '寮�鏈烘椂闂�', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'close_time') {
+            const obj = { name: '鍏虫満鏃堕棿', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'feeding_qty') {
+            const obj = { name: '涓婃枡鏁伴噺', value: data[val] }
+            arr.push(obj)
+          } else if (val === 'error_num') {
+            const obj = { name: '鏁呴殰娆℃暟', value: data[val] }
+            arr.push(obj)
+          }
+        }
+        return arr
+      }
+    },
+    dialogSave() {
+      deviceCrud.changeDeviceStatus(this.form).then(res => {
+        this.notify('鎿嶄綔鎴愬姛', 'success')
+        this.dialogFormVisible = false
+        this.dialogFormVisible3 = false
+        this.dialogFormVisible4 = false
+        this.initArr2()
+      }).catch(err => {
+        this.dialogFormVisible = false
+        this.dialogFormVisible3 = false
+        this.dialogFormVisible4 = false
+        console.log(err.response.data.message)
+      })
+    },
+    statusSave() {
+      deviceCrud.changeFenceStatus(this.form).then(res => {
+        this.notify('鎿嶄綔鎴愬姛', 'success')
+        this.dialogFormVisible2 = false
+        this.initArr2()
+      }).catch(err => {
+        this.dialogFormVisible2 = false
+        console.log(err.response.data.message)
+      })
+    },
+    saveBarcode() {
+      deviceCrud.saveBarcode(this.form).then(res => {
+        this.notify('鎿嶄綔鎴愬姛', 'success')
+        this.dialogFormVisible1 = false
+        this.initArr2()
+      }).catch(err => {
+        this.dialogFormVisible1 = false
+        console.log(err.response.data.message)
+      })
+    },
+    initArr2() {
+      actorCrud.queryStageActor('SHDP').then(data => {
+        if (data.detail.length > 0) {
+          this.grid_width = data.form.grid_width
+          this.arr2 = []
+          for (let i = 0; i < data.form.grid_length; i++) {
+            const a = { 'id': i, 'name': '', device_code: '', img: '', index: i, img2: '1', angle: '0' }
+            this.arr2.push(a)
+          }
+          for (const i of data.detail) {
+            const index = i.index
+            this.arr2.splice(index, 1, i)
+          }
+        }
+      }).catch(err => {
+        console.log(err.response.data.message)
+      })
+    },
+    webSocket() {
+      const that = this
+      if (typeof (WebSocket) === 'undefined') {
+        this.$notify({
+          title: '鎻愮ず',
+          message: '褰撳墠娴忚鍣ㄦ棤娉曟帴鏀跺疄鏃舵姤璀︿俊鎭紝璇蜂娇鐢ㄨ胺姝屾祻瑙堝櫒锛�',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const id = 'device_monitor'
+        // 鑾峰彇token淇濆瓨鍒皏uex涓殑鐢ㄦ埛淇℃伅锛屾澶勪粎閫傜敤浜庢湰椤圭洰锛屾敞鎰忓垹闄ゆ垨淇敼
+        // 瀹炰緥鍖杝ocket锛岃繖閲屾垜鎶婄敤鎴峰悕浼犵粰浜嗗悗鍙帮紝浣垮悗鍙拌兘鍒ゆ柇瑕佹妸娑堟伅鍙戠粰鍝釜鐢ㄦ埛锛屽叾瀹炰篃鍙互鍚庡彴鐩存帴鑾峰彇鐢ㄦ埛IP鏉ュ垽鏂苟鎺ㄩ��
+
+        // const wsUri = process.env.VUE_APP_WS_API + '/webSocket/' + id
+        const wsUri = window.g.prod.VUE_APP_BASE_API.replace('http', 'ws') + '/webSocket/' + id
+        this.socket = new WebSocket(wsUri)
+        // 鐩戝惉socket鎵撳紑
+        this.socket.onopen = function() {
+          console.log('娴忚鍣╓ebSocket宸叉墦寮�')
+          // that.socket.send('娴嬭瘯瀹㈡埛绔彂閫佹秷鎭�')
+        }
+
+        // 鐩戝惉socket娑堟伅鎺ユ敹
+        this.socket.onmessage = function(msg) {
+          const list = JSON.parse(msg.data).msg.detail
+          // console.log(list)
+
+          for (const item of list) {
+            const index = item.index
+            // that.arr2.splice(index, 1, item)
+
+            if (item.data) {
+              Object.assign(that.arr2[index].data, item.data)
+            }
+          }
+        }
+
+        // 鐩戝惉socket閿欒
+        this.socket.onerror = function() {
+          that.$notify({
+            title: '閿欒',
+            message: '鏈嶅姟鍣ㄩ敊璇紝鏃犳硶鎺ユ敹瀹炴椂鎶ヨ淇℃伅',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 鐩戝惉socket鍏抽棴
+        this.socket.onclose = function() {
+          console.log('WebSocket宸插叧闂�')
+        }
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.normal {
+  background: #4a659c !important;
+}
+
+.error {
+  background: #95341c !important;
+}
+
+</style>
+<style>
+
+.monitor-wrap .el-popover {
+  margin-left: 35px;
+}
+</style>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/Diagram.vue b/wcs/qd/src/views/acs/stage/editor/components/Diagram.vue
new file mode 100644
index 00000000..f08ed588
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/Diagram.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="diagram">
+    <diagram-toolbar
+      v-if="lf"
+      class="diagram-toolbar"
+      :lf="lf"
+      :active-edges="activeEdges"
+      @changeNodeFillColor="$_changeNodeFill"
+      @saveGraph="$_saveGraph"
+    />
+    <div class="diagram-main">
+      <diagram-sidebar class="diagram-sidebar" @dragInNode="$_dragInNode" />
+      <div ref="container" class="diagram-container">
+        <div class="diagram-wrapper">
+          <div ref="diagram" class="lf-diagram" />
+        </div>
+      </div>
+    </div>
+    <!-- 鍙充晶灞炴�ч潰鏉� -->
+    <PropertyPanel
+      v-if="activeNodes.length>0 || activeEdges.length > 0"
+      class="diagram-panel"
+      :only-edge="activeNodes.length === 0"
+      :elements-style="properties"
+      @setStyle="$_setStyle"
+      @setZIndex="$_setZIndex"
+    />
+  </div>
+</template>
+
+<script>
+import LogicFlow from '@logicflow/core'
+import { SelectionSelect } from '@logicflow/extension'
+import '@logicflow/core/dist/style/index.css'
+import '@logicflow/extension/lib/style/index.css'
+import DiagramToolbar from './DiagramToolbar.vue'
+import DiagramSidebar from './DiagramSidebar.vue'
+import PropertyPanel from './PropertyPanel.vue'
+import { registerCustomElement } from './node'
+
+export default {
+  name: 'Diagram',
+  components: {
+    DiagramToolbar,
+    DiagramSidebar,
+    PropertyPanel
+  },
+  data() {
+    return {
+      sidebarWidth: 200,
+      diagramWidth: 0,
+      diagramHeight: 0,
+      lf: '',
+      filename: '',
+      activeNodes: [],
+      activeEdges: [],
+      properties: {}
+    }
+  },
+  mounted() {
+    let data = ''
+    if (window.location.search) {
+      const query = window.location.search.substring(1).split('&').reduce((map, kv) => {
+        const [key, value] = kv.split('=')
+        map[key] = value
+        return map
+      }, {})
+      this.filename = query.filename
+      const d = window.sessionStorage.getItem(this.filename)
+      if (d) {
+        data = JSON.parse(d)
+      }
+    }
+    this.initLogicFlow(data)
+  },
+  methods: {
+    initLogicFlow(data) {
+      // 寮曞叆妗嗛�夋彃浠�
+      LogicFlow.use(SelectionSelect)
+      const lf = new LogicFlow({
+        container: this.$refs.diagram,
+        overlapMode: 1,
+        autoWrap: true,
+        metaKeyMultipleSelected: true,
+        keyboard: {
+          enabled: true
+        },
+        grid: {
+          visible: false,
+          size: 5
+        },
+        background: {
+          backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=")',
+          backgroundRepeat: 'repeat'
+        }
+      })
+      lf.setTheme(
+        {
+          baseEdge: { strokeWidth: 1 },
+          baseNode: { strokeWidth: 1 },
+          nodeText: { overflowMode: 'autoWrap', lineHeight: 1.5 },
+          edgeText: { overflowMode: 'autoWrap', lineHeight: 1.5 }
+        }
+      )
+      // 娉ㄥ唽鑷畾涔夊厓绱�
+      registerCustomElement(lf)
+      lf.setDefaultEdgeType('pro-polyline')
+      lf.render(data)
+      this.lf = lf
+      this.lf.on('selection:selected,node:click,blank:click,edge:click', () => {
+        this.$nextTick(() => {
+          const { nodes, edges } = this.lf.getSelectElements()
+          this.$set(this, 'activeNodes', nodes)
+          this.activeNodes = nodes
+          this.activeEdges = edges
+          this.$_getProperty()
+        })
+      })
+    },
+    // 鑾峰彇鍙互杩涜璁剧疆鐨勫睘鎬�
+    $_getProperty() {
+      let properties = {}
+      const { nodes, edges } = this.lf.getSelectElements()
+      nodes.forEach(node => {
+        properties = { ...properties, ...node.properties }
+      })
+      edges.forEach(edge => {
+        properties = { ...properties, ...edge.properties }
+      })
+      this.properties = properties
+      return properties
+    },
+    $_dragInNode(type) {
+      this.lf.dnd.startDrag({
+        type
+      })
+    },
+    $_changeNodeFill(color) {
+      const { nodes } = this.lf.graphModel.getSelectElements()
+      nodes.forEach(({ id }) => {
+        this.lf.setProperties(id, {
+          fill: color
+        })
+      })
+    },
+    $_setStyle(item) {
+      this.activeNodes.forEach(({ id }) => {
+        this.lf.setProperties(id, item)
+      })
+      this.activeEdges.forEach(({ id }) => {
+        this.lf.setProperties(id, item)
+      })
+      this.$_getProperty()
+    },
+    $_setZIndex(type) {
+      this.activeNodes.forEach(({ id }) => {
+        this.lf.setElementZIndex(id, type)
+      })
+      this.activeEdges.forEach(({ id }) => {
+        this.lf.setElementZIndex(id, type)
+      })
+    },
+    $_saveGraph() {
+      const data = this.lf.getGraphData()
+      this.download(this.filename, JSON.stringify(data))
+    },
+    download(filename, text) {
+      window.sessionStorage.setItem(filename, text)
+      const element = document.createElement('a')
+      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
+      element.setAttribute('download', filename)
+      element.style.display = 'none'
+      document.body.appendChild(element)
+      element.click()
+      document.body.removeChild(element)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.diagram {
+  width: 100%;
+  height: 100%;
+}
+.diagram * {
+  box-sizing: border-box;
+}
+.diagram-toolbar {
+  position: absolute;
+  top: 0;
+  left: 200px;
+  height: 40px;
+  width: 310px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #e5e5e5;
+  z-index: 10;
+  background: #e5e5e5;
+}
+.diagram-main {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+.diagram-sidebar {
+  width: 185px;
+  height: calc(100% - 40px);
+  border-right: 1px solid #dadce0;
+  padding: 10px;
+}
+.diagram-panel {
+  width: 300px;
+  background: #fff;
+  height: calc(100% - 40px);
+  position: absolute;
+  right: 0px;
+  top: 40px;
+  border-left: 1px solid #dadce0;
+}
+.diagram-container {
+  flex: 1;
+}
+/* 鐢变簬鑳屾櫙鍥惧拰gird涓嶅榻愶紝闇�瑕乧ss澶勭悊涓�涓� */
+.diagram /deep/ .lf-background {
+  left: -9px;
+}
+.diagram-wrapper {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
+.lf-diagram {
+  box-shadow: 0px 0px 4px #838284;
+  width: 100%;
+  height: 100%;
+}
+::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+  background: white;
+  border-left: 1px solid #e8e8e8;
+}
+::-webkit-scrollbar-thumb {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #fff;
+  border-radius: 6px;
+  background: #c9c9c9;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #b5b5b5;
+}
+</style>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/DiagramSidebar.vue b/wcs/qd/src/views/acs/stage/editor/components/DiagramSidebar.vue
new file mode 100644
index 00000000..6fed18eb
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/DiagramSidebar.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="diagram-sidebar">
+    <div>
+      <h1 class="node-category-title">General</h1>
+      <div class="node-category">
+        <div class="node-item" @mousedown="dragInNode('pro-circle')">
+          <icon-circle class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('pro-rect')">
+          <icon-rect class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('rect-radius')">
+          <icon-rect-radius class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('triangle')">
+          <icon-triangle class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('pro-ellipse')">
+          <icon-ellipse class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('pro-diamond')">
+          <icon-diamond class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('cylinde')">
+          <icon-cylinde class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('actor')">
+          <icon-actor class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('parallelogram')">
+          <icon-parallelogram class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('pro-text')">
+          <icon-text class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('left-arrow')">
+          <icon-left-arrow class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('right-arrow')">
+          <icon-right-arrow class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('horizontal-arrow')">
+          <icon-horizontal-arrow class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('up-arrow')">
+          <icon-up-arrow class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('down-arrow')">
+          <icon-down-arrow class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('vertical-arrow')">
+          <icon-vertical-arrow class="svg-node" />
+        </div>
+        <!-- <div class="node-item" @mousedown="dragInNode('star')">
+          star
+        </div> -->
+        <div class="node-item" @mousedown="dragInNode('pentagon')">
+          <icon-pentagon class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('hexagon')">
+          <icon-hexagon class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('septagon')">
+          <icon-septagon class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('heptagon')">
+          <icon-heptagon class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('trapezoid')">
+          <icon-trapezoid class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('cross')">
+          <icon-cross class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('minus')">
+          <icon-minus class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('times')">
+          <icon-times class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('divide')">
+          <icon-divide class="svg-node" />
+        </div>
+      </div>
+    </div>
+    <div>
+      <h1 class="node-category-title">鍥剧墖</h1>
+      <div class="image-node image-setting" @mousedown="dragInNode('image-setting')" />
+      <div class="image-node image-user" @mousedown="dragInNode('image-user')" />
+      <div class="image-node image-cloud" @mousedown="dragInNode('image-cloud')" />
+    </div>
+    <div>
+      <h1 class="node-category-title">ICON</h1>
+      <div class="icon-node icon-message" @mousedown="dragInNode('icon-message')" />
+    </div>
+  </div>
+</template>
+
+<script>
+import IconCircle from './icon/Circle.vue'
+import IconRect from './icon/Rect.vue'
+import IconRectRadius from './icon/RectRadius.vue'
+import IconActor from './icon/Actor.vue'
+import IconCylinde from './icon/Cylinde.vue'
+import IconDiamond from './icon/Diamond.vue'
+import IconEllipse from './icon/Ellipse.vue'
+import IconParallelogram from './icon/Parallelogram.vue'
+import IconText from './icon/Text.vue'
+import IconTriangle from './icon/Triangle.vue'
+import IconLeftArrow from './icon/LeftArrow.vue'
+import IconRightArrow from './icon/RightArrow.vue'
+import IconHorizontalArrow from './icon/HorizontalArrow.vue'
+import IconUpArrow from './icon/UpArrow.vue'
+import IconDownArrow from './icon/DownArrow.vue'
+import IconVerticalArrow from './icon/VerticalArrow.vue'
+import IconPentagon from './icon/Pentagon.vue'
+import IconHexagon from './icon/Hexagon.vue'
+import IconSeptagon from './icon/Septagon.vue'
+import IconHeptagon from './icon/Heptagon.vue'
+import IconTrapezoid from './icon/Trapezoid.vue'
+import IconCross from './icon/Cross.vue'
+import IconMinus from './icon/Minus.vue'
+import IconTimes from './icon/Times.vue'
+import IconDivide from './icon/Divide.vue'
+
+export default {
+  name: 'DiagramSidebar',
+  components: {
+    IconCircle,
+    IconRect,
+    IconRectRadius,
+    IconActor,
+    IconCylinde,
+    IconDiamond,
+    IconEllipse,
+    IconParallelogram,
+    IconText,
+    IconTriangle,
+    IconRightArrow,
+    IconLeftArrow,
+    IconHorizontalArrow,
+    IconUpArrow,
+    IconDownArrow,
+    IconVerticalArrow,
+    IconPentagon,
+    IconHexagon,
+    IconSeptagon,
+    IconHeptagon,
+    IconTrapezoid,
+    IconCross,
+    IconMinus,
+    IconTimes,
+    IconDivide
+  },
+  methods: {
+    dragInNode(type) {
+      this.$emit('dragInNode', type)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.diagram-sidebar {
+  user-select: none;
+}
+.node-category-title {
+  margin: 0;
+  font-size: 14px;
+  display: block;
+  border-bottom: 1px solid #e5e5e5;
+  line-height: 30px;
+  margin-bottom: 10px;
+}
+.node-item {
+  width: 35px;
+  height: 35px;
+  margin-right: 5px;
+  display: inline-block;
+}
+.node-category {
+  border-bottom: 1px solid #e5e5e5;
+}
+.svg-node {
+  left: 1px;
+  top: 1px;
+  width: 32px;
+  height: 30px;
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+.image-node, .icon-node {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  margin: 10px;
+  cursor: pointer;
+}
+.image-setting {
+  background: url('https://dpubstatic.udache.com/static/dpubimg/UzI4AFUcfO/setting.png');
+  background-size: cover;
+}
+.image-user {
+  width: 40px;
+  background: url('https://dpubstatic.udache.com/static/dpubimg/-6Fd2uIoJ-/user.png');
+  background-size: cover;
+}
+.image-cloud {
+  width: 40px;
+  background: url('https://dpubstatic.udache.com/static/dpubimg/0oqFX1nvbD/cloud.png');
+  background-size: cover;
+}
+.icon-message {
+  height: 20px;
+  background: url('https://dpubstatic.udache.com/static/dpubimg/1TZgBoaq8G/message.png');
+  background-size: cover;
+}
+</style>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/DiagramToolbar.vue b/wcs/qd/src/views/acs/stage/editor/components/DiagramToolbar.vue
new file mode 100644
index 00000000..8850245e
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/DiagramToolbar.vue
@@ -0,0 +1,190 @@
+<template>
+  <div>
+    <div class="toolbar-item" :class="{'selection-active': selectionOpened}" @click="$_selectionSelect()">
+      <area-select size="18" />
+    </div>
+    <!-- <div class="toolbar-item toolbar-color-picker">
+      <el-popover
+        placement="top-start"
+        title="濉厖鏍峰紡"
+        width="220"
+        trigger="click"
+      >
+        <sketch-picker :value="fillColor"  @input="$_changeFillColor"/>
+        <color-fill size="24" slot="reference" />
+      </el-popover>
+    </div> -->
+    <!-- <div class="toolbar-item">
+      <color-text size="20" />
+    </div>
+    <div class="toolbar-item">
+      <icon-font size="18" />
+    </div>
+    <div class="toolbar-item">
+      <icon-blod size="18" />
+    </div>
+    <div class="toolbar-item">
+      <icon-line size="18" />
+    </div> -->
+    <div class="toolbar-item" @click="$_zoomIn()">
+      <zoom-in size="18" />
+    </div>
+    <div class="toolbar-item" @click="$_zoomOut()">
+      <zoom-out size="18" />
+    </div>
+    <div
+      class="toolbar-item"
+      :class="{'disabled': !undoAble}"
+      @click="$_undo()"
+    >
+      <step-back size="18" />
+    </div>
+    <div
+      class="toolbar-item"
+      :class="{'disabled': !redoAble}"
+      @click="$_redo()"
+    >
+      <step-foward size="18" />
+    </div>
+    <!-- <div>
+      <button @click="$_saveGraph">淇濆瓨</button>
+    </div> -->
+    <div>
+      <el-select v-model="linetype" size="mini" @change="$_changeLineType">
+        <el-option
+          v-for="item in lineOptions"
+          :key="item.value"
+          :value="item.value"
+          :label="item.label"
+        />
+      </el-select>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { Sketch } from 'vue-color'
+// import ColorFill from './icon/ColorFill.vue'
+// import ColorText from './icon/ColorText.vue'
+// import IconFont from './icon/Font.vue'
+// import IconBlod from './icon/Blod.vue'
+// import IconLine from './icon/Line.vue'
+import ZoomIn from './icon/ZoomIn.vue'
+import ZoomOut from './icon/ZoomOut.vue'
+import StepBack from './icon/StepBack.vue'
+import StepFoward from './icon/StepFoward.vue'
+import AreaSelect from './icon/AreaSelect.vue'
+
+export default {
+  components: {
+    // ColorFill,
+    // ColorText,
+    // IconFont,
+    // IconBlod,
+    // IconLine,
+    ZoomIn,
+    ZoomOut,
+    StepBack,
+    StepFoward,
+    AreaSelect
+    // SketchPicker: Sketch
+  },
+  props: {
+    lf: Object,
+    activeEdges: Array,
+    fillColor: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      selectionOpened: false,
+      undoAble: false,
+      redoAble: false,
+      colors: '#345678',
+      linetype: 'pro-polyline',
+      lineOptions: [
+        {
+          value: 'pro-polyline',
+          label: '鎶樼嚎'
+        },
+        {
+          value: 'pro-line',
+          label: '鐩寸嚎'
+        },
+        {
+          value: 'pro-bezier',
+          label: '鏇茬嚎'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.$props.lf.on('history:change', ({ data: { undoAble, redoAble }}) => {
+      this.$data.redoAble = redoAble
+      this.$data.undoAble = undoAble
+    })
+  },
+  methods: {
+    $_changeFillColor(val) {
+      this.$emit('changeNodeFillColor', val.hex)
+    },
+    $_saveGraph() {
+      this.$emit('saveGraph')
+    },
+    $_zoomIn() {
+      this.$props.lf.zoom(true)
+    },
+    $_zoomOut() {
+      this.$props.lf.zoom(false)
+    },
+    $_undo() {
+      if (this.$data.undoAble) {
+        this.$props.lf.undo()
+      }
+    },
+    $_redo() {
+      if (this.$data.redoAble) {
+        this.$props.lf.redo()
+      }
+    },
+    $_selectionSelect() {
+      this.selectionOpened = !this.selectionOpened
+      if (this.selectionOpened) {
+        this.lf.extension.selectionSelect.openSelectionSelect()
+      } else {
+        this.lf.extension.selectionSelect.closeSelectionSelect()
+      }
+    },
+    $_changeLineType(value) {
+      const { lf, activeEdges } = this.$props
+      const { graphModel } = lf
+      lf.setDefaultEdgeType(value)
+      if (activeEdges && activeEdges.length > 0) {
+        activeEdges.forEach(edge => {
+          graphModel.changeEdgeType(edge.id, value)
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.toolbar-item {
+  width: 18px;
+  height: 18px;
+  float: left;
+  margin: 12px 4px;
+  cursor: pointer;
+}
+.toolbar-color-picker {
+  width: 24px;
+  height: 24px;
+  margin: 8px 4px;
+}
+.selection-active {
+  background: #33a3dc;
+}
+</style>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/PropertyPanel.vue b/wcs/qd/src/views/acs/stage/editor/components/PropertyPanel.vue
new file mode 100644
index 00000000..92b811a2
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/PropertyPanel.vue
@@ -0,0 +1,311 @@
+<template>
+  <div class="diagram-panel">
+    <div class="setting-block">
+      <div>蹇嵎鏍峰紡</div>
+      <div class="short-styles">
+        <div
+          v-for="(item, index) in shortStyles"
+          :key="index"
+          :style="{ 'backgroundColor': item.backgroundColor, 'borderColor': item.borderColor, 'borderWidth': item.borderWidth }"
+          @click="setStyle(item)"
+        />
+      </div>
+    </div>
+    <div class="setting-block">
+      <div class="setting-item">
+        <span>鑳屾櫙鑹�</span>
+        <el-popover
+          placement="top-start"
+          title="濉厖鏍峰紡"
+          width="220"
+          trigger="click"
+        >
+          <sketch-picker :value="style.backgroundColor" @input="(c) => $_changeColorProperty(c, 'backgroundColor')" />
+          <div slot="reference" class="border-color" :style="{&quot;backgroundColor&quot;: style.backgroundColor}" />
+        </el-popover>
+        <span>鑳屾櫙娓愬彉鑹�</span>
+        <el-popover
+          placement="top-start"
+          title="濉厖鏍峰紡"
+          width="220"
+          trigger="click"
+        >
+          <sketch-picker :value="style.gradientColor" @input="(c) => $_changeColorProperty(c, 'gradientColor')" />
+          <div slot="reference" class="border-color" :style="{&quot;backgroundColor&quot;: style.gradientColor}" />
+        </el-popover>
+      </div>
+      <div class="setting-item">
+        <span>绾挎潯鏍峰紡</span>
+        <el-select v-model="style.borderStyle" size="small" @change="$_selectBorder">
+          <el-option value="hidden" label="涓嶆樉绀�" />
+          <el-option
+            v-for="(border, index) in borderStyles"
+            :key="index"
+            :value="border.value"
+          >
+            <div class="border-style" :style="{ 'borderBottomStyle': border.value}" />
+          </el-option>
+        </el-select>
+      </div>
+      <div class="setting-item">
+        <span>绾挎潯棰滆壊</span>
+        <el-popover
+          placement="top-start"
+          title="濉厖鏍峰紡"
+          width="220"
+          trigger="click"
+        >
+          <sketch-picker :value="style.borderColor" @input="(c) => $_changeColorProperty(c, 'borderColor')" />
+          <div slot="reference" class="border-color" :style="{&quot;backgroundColor&quot;: style.borderColor}" />
+        </el-popover>
+      </div>
+      <div class="setting-item">
+        <span>绾挎潯瀹藉害</span>
+        <el-select v-model="style.borderWidth" @change="$_changeBorderWidth">
+          <el-option
+            v-for="item in borderWidthOptions"
+            :key="item"
+            :label="`${item}px`"
+            :value="item"
+          />
+        </el-select>
+      </div>
+      <div class="setting-item">
+        <span>鏂囨湰棰滆壊</span>
+        <el-popover
+          placement="top-start"
+          title="濉厖鏍峰紡"
+          width="220"
+          trigger="click"
+        >
+          <sketch-picker :value="style.fontColor" @input="(c) => $_changeColorProperty(c, 'fontColor')" />
+          <div slot="reference" class="border-color" :style="{&quot;backgroundColor&quot;: style.fontColor}" />
+        </el-popover>
+      </div>
+      <div class="setting-item">
+        <span>鏂囨湰澶у皬</span>
+        <el-input-number
+          v-model="style.fontSize"
+          controls-position="right"
+          size="mini"
+          :min="12"
+          :max="30"
+          @change="$_changeFontSize"
+        />
+        <span>px</span>
+      </div>
+      <div class="setting-item">
+        <span>鏂囨湰瀛椾綋</span>
+        <el-select v-model="style.fontFamily" size="small" @change="$_changeFontFamily">
+          <el-option
+            v-for="(fontFamily, index) in fontFamilies"
+            :key="index"
+            :value="fontFamily.value"
+          />
+        </el-select>
+      </div>
+      <div class="setting-item">
+        <span>琛岄珮</span>
+        <el-select v-model="style.lineHeight" size="small" @change="$_changeLineHeight">
+          <el-option
+            v-for="(item, index) in lineHeightOptions"
+            :key="index"
+            :label="`${item}`"
+            :value="item"
+          />
+        </el-select>
+      </div>
+      <div class="setting-item">
+        <span>瀵归綈</span>
+        <el-radio-group v-model="style.textAlign" size="small" @change="$_changeTextAlign">
+          <el-radio-button label="left">宸﹀榻�</el-radio-button>
+          <el-radio-button label="center">灞呬腑</el-radio-button>
+          <el-radio-button label="right">鍙冲榻�</el-radio-button>
+        </el-radio-group>
+      </div>
+      <div class="setting-item">
+        <span>鏂囨湰鏍峰紡</span>
+        <el-button size="small" @click="$_changeFontWeight">B</el-button>
+        <el-button size="small" @click="$_changeTextDecoration">U</el-button>
+        <el-button size="small" @click="$_changeFontStyle">I</el-button>
+      </div>
+      <div>
+        <el-button @click="$emit('setZIndex', 'top')">缃负椤堕儴</el-button>
+        <el-button @click="$emit('setZIndex', 'bottom')">缃负搴曢儴</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Sketch } from 'vue-color'
+import { shortStyles, borderStyles, fontFamilies } from '../constant'
+
+export default {
+  components: {
+    SketchPicker: Sketch
+  },
+  props: {
+    elementsStyle: Object,
+    onlyEdge: Boolean // 鏄惁鏄彧璁剧疆杈圭殑灞炴�э紝褰撳彧璁剧疆杈圭殑灞炴�ф椂锛岄殣钘忓揩鎹锋牱寮忓拰鑳屾櫙鑹茶缃�
+  },
+  data() {
+    return {
+      shortStyles,
+      borderStyles,
+      fontFamilies,
+      style: {
+        backgroundColor: '', // 濉厖鑹�
+        gradientColor: '', // 娓愬彉鑹�
+        borderType: 0, // 绾挎潯绫诲瀷
+        borderColor: '', // 濉厖棰滆壊
+        borderWidth: 1, // 绾挎潯瀹藉害
+        borderStyle: '', // 绾挎潯绫诲瀷
+        fontSize: 12, // 鏂囨湰澶у皬
+        fontColor: '', // 鏂囨湰棰滆壊
+        fontWeight: '', // 鏂囨湰鍔犵矖
+        fontFamily: '', // 鏂囨湰鏍峰紡
+        lineHeight: '', // 琛岄珮
+        textAlign: '' // 瀵归綈
+      },
+      borderWidthOptions: Array(11).fill().map((_, i) => i),
+      SketchPicker: Sketch,
+      fontWeight: '', // 鏂囨湰鍔犵矖
+      lineHeightOptions: Array(5).fill(1).map((_, i) => _ + i * 0.5)
+    }
+  },
+  watch: {
+    elementsStyle: {
+      handler(val) {
+        this.style = { ...this.style, ...val }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    setStyle(item) {
+      this.$emit('setStyle', item)
+    },
+    $_selectBorder(val) {
+      this.$emit('setStyle', {
+        borderStyle: val
+      })
+    },
+    $_changeColorProperty({ rgba: { r, g, b, a }}, type) {
+      const color = `rgba(${r},${g},${b},${a})`
+      this[type] = color
+      this.$emit('setStyle', {
+        [type]: color
+      })
+    },
+    $_changeFontSize(val) {
+      this.$emit('setStyle', {
+        fontSize: val
+      })
+    },
+    $_changeBorderWidth(val) {
+      this.$emit('setStyle', {
+        borderWidth: val
+      })
+    },
+    $_changeFontFamily(val) {
+      this.$emit('setStyle', {
+        fontFamily: val
+      })
+    },
+    $_changeLineHeight(val) {
+      this.$emit('setStyle', {
+        lineHeight: val
+      })
+    },
+    $_changeFontWeight() {
+      if (this.style.fontWeight === 'bold') {
+        this.$emit('setStyle', {
+          fontWeight: 'normal'
+        })
+      } else {
+        this.$emit('setStyle', {
+          fontWeight: 'bold'
+        })
+      }
+    },
+    $_changeTextDecoration() {
+      if (this.style.textDecoration === 'underline') {
+        this.$emit('setStyle', {
+          textDecoration: 'none'
+        })
+      } else {
+        this.$emit('setStyle', {
+          textDecoration: 'underline'
+        })
+      }
+    },
+    $_changeFontStyle() {
+      if (this.style.fontStyle === 'italic') {
+        this.$emit('setStyle', {
+          fontStyle: 'normal'
+        })
+      } else {
+        this.$emit('setStyle', {
+          fontStyle: 'italic'
+        })
+      }
+    },
+    $_changeTextAlign(val) {
+      this.$emit('setStyle', {
+        textAlign: val
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.diagram-panel {
+  padding: 20px;
+}
+.short-styles {
+  width: 240px;
+}
+.short-styles > div {
+  width: 20px;
+  height: 20px;
+  margin: 0 10px 5px 0;
+  box-sizing: border-box;
+  float: left;
+  border: 1px solid #fff;
+  cursor: pointer;
+}
+.border-style {
+  width: 150px;
+  height: 0px;
+  margin-top: 18px;
+  border-bottom-width: 1px;
+  border-bottom-color: black;
+}
+.setting-block {
+  overflow: hidden;
+}
+.setting-item {
+  line-height: 12px;
+  font-size: 12px;
+  display: flex;
+  vertical-align: middle;
+  align-items: center;
+  margin-top: 10px;
+}
+.setting-item > span {
+  width: 50px;
+  margin-right: 10px;
+  text-align: right;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+.border-color {
+  width: 40px;
+  height: 30px;
+  display: inline-block;
+  border: 1px solid #eaeaeb;
+}
+
+</style>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/config.js b/wcs/qd/src/views/acs/stage/editor/components/config.js
new file mode 100644
index 00000000..c36ba603
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/config.js
@@ -0,0 +1,12 @@
+// 鍏冪礌灞炴�у彸渚ч潰鏉块粯璁ゅ睘鎬�
+export const defatuleStyle = {
+  backgroundColor: '', // 濉厖鑹�
+  gradientColor: '', // 娓愬彉鑹�
+  borderType: 0, // 杈规绫诲瀷
+  borderColor: '', // 濉厖棰滆壊
+  borderWidth: 1, // 杈规瀹藉害
+  borderStyle: '', // 杈规绫诲瀷
+  fontSize: 12, // 鏂囨湰澶у皬
+  fontColor: '', // 鏂囨湰棰滆壊
+  fontWeight: '' // 鏂囨湰鍔犵矖
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Actor.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Actor.vue
new file mode 100644
index 00000000..dc3818d8
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Actor.vue
@@ -0,0 +1,38 @@
+<template>
+  <svg>
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <ellipse
+        cx="15.75"
+        cy="4.73"
+        rx="3.375"
+        ry="3.375"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+      <path
+        d="M 15.75 8.1 L 15.75 19.35 M 15.75 10.35 L 9 10.35 M 15.75 10.35 L 22.5 10.35 M 15.75 19.35 L 9 28.35 M 15.75 19.35 L 22.5 28.35"
+        fill="none"
+        stroke="white"
+        stroke-width="9.3"
+        stroke-miterlimit="10"
+        pointer-events="stroke"
+        visibility="hidden"
+      />
+      <path
+        d="M 15.75 8.1 L 15.75 19.35 M 15.75 10.35 L 9 10.35 M 15.75 10.35 L 22.5 10.35 M 15.75 19.35 L 9 28.35 M 15.75 19.35 L 22.5 28.35"
+        fill="none"
+        stroke="#000000"
+        stroke-width="1.3"
+        stroke-miterlimit="10"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/AreaSelect.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/AreaSelect.vue
new file mode 100644
index 00000000..edb8929f
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/AreaSelect.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M933.647059 0h-210.82353v90.352941h180.705883a30.117647 30.117647 0 0 1 30.117647 30.117647v180.705883h90.352941V90.352941a90.352941 90.352941 0 0 0-90.352941-90.352941zM361.411765 0h301.17647v90.352941H361.411765zM933.647059 361.411765h90.352941v301.17647h-90.352941zM361.411765 933.647059h301.17647v90.352941H361.411765zM0 361.411765h90.352941v301.17647H0zM90.352941 903.529412v-180.705883H0v210.82353a90.352941 90.352941 0 0 0 90.352941 90.352941h210.82353v-90.352941H120.470588a30.117647 30.117647 0 0 1-30.117647-30.117647zM933.647059 903.529412a30.117647 30.117647 0 0 1-30.117647 30.117647h-180.705883v90.352941h210.82353a90.352941 90.352941 0 0 0 90.352941-90.352941v-210.82353h-90.352941zM0 90.352941v210.82353h90.352941V120.470588a30.117647 30.117647 0 0 1 30.117647-30.117647h180.705883V0H90.352941a90.352941 90.352941 0 0 0-90.352941 90.352941z" p-id="1890" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Blod.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Blod.vue
new file mode 100644
index 00000000..3444a373
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Blod.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M426.857143 869.142857q42.285714 18.285714 80 18.285714 214.857143 0 214.857143-191.428571 0-65.142857-23.428572-102.857143-15.428571-25.142857-35.142857-42.285714t-38.571428-26.571429-46-14.285714-48-6-54-1.142857q-41.714286 0-57.714286 5.714286 0 30.285714-0.285714 90.857142t-0.285715 90.285715q0 4.571429-0.571428 38.571428t-0.285715 55.142857 2.571429 47.714286 6.857143 38z m-8-426.285714q24 4 62.285714 4 46.857143 0 81.714286-7.428572t62.857143-25.428571 42.571428-51.142857 14.571429-81.142857q0-40-16.571429-70t-45.142857-46.857143T559.428571 140t-70.857142-8q-28.571429 0-74.285715 7.428571 0 28.571429 2.285715 86.285715t2.285714 86.857143q0 15.428571-0.285714 45.714285t-0.285715 45.142857q0 26.285714 0.571429 39.428572z m-309.142857 508l1.142857-53.714286q8.571429-2.285714 48.571428-9.142857t60.571429-15.428571q4-6.857143 7.142857-15.428572t4.857143-19.142857 3.142857-18.571429 1.714286-21.428571 0.285714-19.428571V741.142857q0-561.142857-12.571428-585.714286-2.285714-4.571429-12.571429-8.285714t-25.428571-6.285714-28.285715-4-27.714285-2.571429-17.428572-1.714285l-2.285714-47.428572q56-1.142857 194.285714-6.571428t213.142857-5.428572q13.142857 0 39.142857 0.285714t38.571429 0.285715q40 0 78 7.428571t73.428571 24 61.714286 40.571429 42.285714 59.714285 16 78.571429q0 29.714286-9.428571 54.571429t-22.285714 41.142857T798.857143 412.571429t-41.714286 25.714285-48 22.857143q88 20 146.571429 76.571429t58.571428 141.714285q0 57.142857-20 102.571429t-53.428571 74.571429-78.857143 48.857142T668.571429 933.142857t-100.571429 8q-25.142857 0-75.428571-1.714286t-75.428572-1.714285q-60.571429 0-175.428571 6.285714t-132 6.857143z" p-id="8191" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Circle.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Circle.vue
new file mode 100644
index 00000000..b8355a4a
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Circle.vue
@@ -0,0 +1,31 @@
+<template>
+  <svg>
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <ellipse
+        cx="15.98"
+        cy="14.96"
+        rx="13.600000000000001"
+        ry="13.600000000000001"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+<script>
+export default {
+}
+</script>
+<style scoped>
+.svg-node {
+  left: 1px;
+  top: 1px;
+  width: 32px;
+  height: 30px;
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/ColorFill.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/ColorFill.vue
new file mode 100644
index 00000000..1c12d2a9
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/ColorFill.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path fill="currentColor" d="M810.666667 618.666667s-85.333333 93.866667-85.333334 149.333333c0 46.933333 38.4 85.333333 85.333334 85.333333s85.333333-38.4 85.333333-85.333333c0-55.466667-85.333333-149.333333-85.333333-149.333333M221.866667 554.666667L426.666667 349.866667l204.8 204.8m76.8-46.933334L324.266667 128 264.533333 187.733333l102.4 102.4-221.866666 217.6c-25.6 25.6-25.6 64 0 89.6l234.666666 234.666667c25.6 25.6 64 25.6 89.6 0l234.666667-234.666667c25.6-21.333333 29.866667-64 4.266667-89.6z" p-id="4284" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/ColorText.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/ColorText.vue
new file mode 100644
index 00000000..8aa7da1b
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/ColorText.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M512 725.333333a128 128 0 1 1 0 256 128 128 0 0 1 0-256zM469.333333 85.333333L234.666667 682.666667h96l47.786666-128h266.666667l47.786667 128h96L554.666667 85.333333h-85.333334z m-58.88 384L512 199.253333 613.546667 469.333333H410.453333z" p-id="4479" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Cross.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Cross.vue
new file mode 100644
index 00000000..ba015272
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Cross.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 鍔犲彿 -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,9 9,9 9,0 18,0 18,9 27,9 27,18 18,18 18,27 9,27 9,18 0,18"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Cylinde.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Cylinde.vue
new file mode 100644
index 00000000..c32f508c
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Cylinde.vue
@@ -0,0 +1,27 @@
+<template>
+  <svg>
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <path
+        d="M 5.78 6.46 C 5.78 3.64 10.35 1.36 15.98 1.36 C 18.69 1.36 21.28 1.9 23.19 2.85 C 25.11 3.81 26.18 5.11 26.18 6.46 L 26.18 23.46 C 26.18 26.28 21.61 28.56 15.98 28.56 C 10.35 28.56 5.78 26.28 5.78 23.46 Z"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        stroke-miterlimit="10"
+        pointer-events="all"
+      />
+      <path
+        d="M 26.18 6.46 C 26.18 9.28 21.61 11.56 15.98 11.56 C 10.35 11.56 5.78 9.28 5.78 6.46"
+        fill="none"
+        stroke="#000000"
+        stroke-width="1.3"
+        stroke-miterlimit="10"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Diamond.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Diamond.vue
new file mode 100644
index 00000000..ae6e48a3
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Diamond.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg>
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <path
+        d="M 15.98 1.36 L 29.58 14.96 L 15.98 28.56 L 2.38 14.96 Z"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        stroke-miterlimit="10"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Divide.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Divide.vue
new file mode 100644
index 00000000..32bbd4fb
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Divide.vue
@@ -0,0 +1,37 @@
+<template>
+  <!-- 闄ゅ彿 -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <circle
+        cx="13.5"
+        cy="4.5"
+        r="3.375"
+        fill="#fff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+      <polygon
+        points="0,10 27,10 27,17 0,17"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+      <circle
+        cx="13.5"
+        cy="22.5"
+        r="3.375"
+        fill="#fff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/DownArrow.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/DownArrow.vue
new file mode 100644
index 00000000..01de6a0e
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/DownArrow.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="10,0 20,0 20,18 30,18 15,28 0,18 10,18"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Ellipse.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Ellipse.vue
new file mode 100644
index 00000000..e006feee
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Ellipse.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <ellipse
+        cx="15.84"
+        cy="14.88"
+        rx="14.399999999999999"
+        ry="9.6"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Font.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Font.vue
new file mode 100644
index 00000000..e9a1bb21
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Font.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M450.857143 319.428571l-97.142857 257.142858q18.857143 0 78 1.142857t91.714285 1.142857q10.857143 0 32.571429-1.142857-49.714286-144.571429-105.142857-258.285715zM36.571429 950.857143l1.142857-45.142857q13.142857-4 32-7.142857t32.571428-6 28.285715-8.285715 25.428571-16.571428 17.714286-28.857143l135.428571-352 160-413.714286h73.142857q4.571429 8 6.285715 12l117.142857 274.285714q18.857143 44.571429 60.571428 147.142858t65.142857 156.857142q8.571429 19.428571 33.142858 82.571429t41.142857 96.285714q11.428571 25.714286 20 32.571429 10.857143 8.571429 50.285714 16.857143t48 11.714285q3.428571 21.714286 3.428571 32.571429 0 2.285714-0.285714 7.428571t-0.285714 7.428572q-36 0-108.571429-4.571429t-109.142857-4.571428q-43.428571 0-122.857143 4t-101.714285 4.571428q0-24.571429 2.285714-44.571428l74.857143-16q0.571429 0 7.142857-1.428572t8.857143-2 8.285714-2.571428 8.571429-3.714286 6.285714-4.571429 5.142857-6.285714 1.428571-8q0-9.142857-17.714285-55.142857t-41.142857-101.428571-24-57.142858l-257.142858-1.142857q-14.857143 33.142857-43.714285 111.714286T254.857143 850.857143q0 12.571429 8 21.428571t24.857143 14 27.714285 7.714286 32.571429 4.857143 23.428571 2.285714q0.571429 10.857143 0.571429 33.142857 0 5.142857-1.142857 15.428572-33.142857 0-99.714286-5.714286T171.428571 938.285714q-4.571429 0-15.142857 2.285715t-12.285714 2.285714q-45.714286 8-107.428571 8z" p-id="8338" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Heptagon.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Heptagon.vue
new file mode 100644
index 00000000..1f10cb23
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Heptagon.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 鍏竟褰� -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="19.74,0 28,8.26 28,19.74 19.74,28 8.26,28 0,19.74 0,8.26 8.26,0"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Hexagon.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Hexagon.vue
new file mode 100644
index 00000000..1a9c5136
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Hexagon.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 鍏竟褰� -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="6.16,0 21.84,0 28,14 21.84,28 6.16,28 0,14"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/HorizontalArrow.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/HorizontalArrow.vue
new file mode 100644
index 00000000..640f85cd
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/HorizontalArrow.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,13.6 9,2.2 9,11.2 18,11.2 18,2.2 27,13.6 18,27.2 18,18.2 9,18.2 9,27.2"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/LeftArrow.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/LeftArrow.vue
new file mode 100644
index 00000000..c62689e2
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/LeftArrow.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,15 10,0 10,10 30,10 30,20 10,20 10,30"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Line.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Line.vue
new file mode 100644
index 00000000..d4b7141f
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Line.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M127.389 851.634l724.21-724.21 45.198 45.196-724.211 724.212z" p-id="11226" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Minus.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Minus.vue
new file mode 100644
index 00000000..e8a5c19c
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Minus.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 鍑忓彿 -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,9 27,9 27,18 0,18"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Parallelogram.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Parallelogram.vue
new file mode 100644
index 00000000..1929f729
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Parallelogram.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <path
+        d="M 1.44 22.08 L 6.24 7.68 L 30.24 7.68 L 25.44 22.08 Z"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        stroke-miterlimit="10"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Pentagon.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Pentagon.vue
new file mode 100644
index 00000000..1f41d424
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Pentagon.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 浜旇竟褰� -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,10.6 14,0 28,10.6 22.4,28 5.6,28"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Rect.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Rect.vue
new file mode 100644
index 00000000..5a62bb46
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Rect.vue
@@ -0,0 +1,31 @@
+<template>
+  <svg>
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <rect
+        x="2.38"
+        y="1.36"
+        width="27.2"
+        height="27.2"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+<script>
+export default {
+}
+</script>
+<style scoped>
+.svg-node {
+  left: 1px;
+  top: 1px;
+  width: 32px;
+  height: 30px;
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/RectRadius.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/RectRadius.vue
new file mode 100644
index 00000000..ee233aa6
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/RectRadius.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <rect
+        x="2.38"
+        y="1.36"
+        width="27.2"
+        height="27.2"
+        rx="3.16"
+        ry="3.16"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/RightArrow.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/RightArrow.vue
new file mode 100644
index 00000000..50991412
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/RightArrow.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,10 20,10 20,0 30,15 20,30 20,20 0,20"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Septagon.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Septagon.vue
new file mode 100644
index 00000000..af702420
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Septagon.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 涓冭竟褰� -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="14,0 25.06,5.6 28,18.06 20.02,28 7.7,28 0,18.06 2.94,5.6"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/StepBack.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/StepBack.vue
new file mode 100644
index 00000000..254da46d
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/StepBack.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M967.111111 967.111111h-113.777778v-113.777778c0-221.866667-176.355556-398.222222-398.222222-398.222222H113.777778V341.333333h341.333333c284.444444 0 512 227.555556 512 512v113.777778z" fill="#0D1733" p-id="1011" />
+    <path d="M409.6 762.311111L51.2 398.222222 409.6 39.822222l85.333333 79.644445-284.444444 278.755555 284.444444 284.444445z" fill="#0D1733" p-id="1012" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/StepFoward.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/StepFoward.vue
new file mode 100644
index 00000000..cd96b6bf
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/StepFoward.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M170.666667 967.111111H56.888889v-113.777778c0-284.444444 227.555556-512 512-512h341.333333v113.777778h-341.333333c-221.866667 0-398.222222 176.355556-398.222222 398.222222v113.777778z" fill="#0D1733" p-id="1167" />
+    <path d="M614.4 762.311111L529.066667 682.666667l284.444444-284.444445-284.444444-278.755555L614.4 39.822222 972.8 398.222222z" fill="#0D1733" p-id="1168" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Table.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Table.vue
new file mode 100644
index 00000000..50bdceda
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Table.vue
@@ -0,0 +1,158 @@
+<template>
+  <svg class="svg-node">
+    <g>
+      <g transform="translate(0.5,0.5)" style="visibility: visible">
+        <path
+          d="M 1.26 9.24 L 1.26 3.78 L 30.66 3.78 L 30.66 9.24"
+          fill="#ffffff"
+          stroke="#000000"
+          stroke-width="1.3"
+          stroke-miterlimit="10"
+          pointer-events="all"
+        />
+        <path
+          d="M 1.26 9.24 L 1.26 25.62 L 30.66 25.62 L 30.66 9.24"
+          fill="none"
+          stroke="white"
+          stroke-width="9.3"
+          stroke-miterlimit="10"
+          pointer-events="stroke"
+          visibility="hidden"
+        />
+        <path
+          d="M 1.26 9.24 L 1.26 25.62 L 30.66 25.62 L 30.66 9.24"
+          fill="none"
+          stroke="#000000"
+          stroke-width="1.3"
+          stroke-miterlimit="10"
+          pointer-events="none"
+        />
+        <path
+          d="M 1.26 9.24 L 30.66 9.24"
+          fill="none"
+          stroke="white"
+          stroke-width="9.3"
+          stroke-miterlimit="10"
+          pointer-events="stroke"
+          visibility="hidden"
+        />
+        <path
+          d="M 1.26 9.24 L 30.66 9.24"
+          fill="none"
+          stroke="#000000"
+          stroke-width="1.3"
+          stroke-miterlimit="10"
+          pointer-events="none"
+        />
+      </g>
+      <g
+        fill="#000000"
+        font-family="Helvetica"
+        text-anchor="middle"
+        font-size="2.52px"
+      >
+        <text x="15.96" y="7.56">List</text>
+      </g>
+      <g transform="translate(0.5,0.5)" style="visibility: visible">
+        <rect
+          x="1.26"
+          y="9.24"
+          width="29.4"
+          height="5.46"
+          fill="none"
+          stroke="white"
+          pointer-events="stroke"
+          visibility="hidden"
+          stroke-width="9"
+        />
+        <rect
+          x="1.26"
+          y="9.24"
+          width="29.4"
+          height="5.46"
+          fill="none"
+          stroke="none"
+          pointer-events="all"
+        />
+      </g>
+      <g style="">
+        <clipPath id="mx-clip-1-9-31-9-0">
+          <rect x="1" y="9" width="31" height="9" />
+        </clipPath>
+        <g
+          fill="#000000"
+          font-family="Helvetica"
+          clip-path="url(https://app.diagrams.net/#mx-clip-1-9-31-9-0)"
+          font-size="2.52px"
+        >
+          <text x="2.52" y="13.02">Item 1</text>
+        </g>
+      </g>
+      <g transform="translate(0.5,0.5)" style="visibility: visible">
+        <rect
+          x="1.26"
+          y="14.7"
+          width="29.4"
+          height="5.46"
+          fill="none"
+          stroke="white"
+          pointer-events="stroke"
+          visibility="hidden"
+          stroke-width="9"
+        />
+        <rect
+          x="1.26"
+          y="14.7"
+          width="29.4"
+          height="5.46"
+          fill="none"
+          stroke="none"
+          pointer-events="all"
+        />
+      </g>
+      <g style="">
+        <clipPath id="mx-clip-1-14-31-9-0">
+          <rect x="1" y="14" width="31" height="9" />
+        </clipPath>
+        <g fill="#000000" font-family="Helvetica" font-size="2.52px">
+          <text x="2.52" y="18.48">Item 2</text>
+        </g>
+      </g>
+      <g transform="translate(0.5,0.5)" style="visibility: visible">
+        <rect
+          x="1.26"
+          y="20.16"
+          width="29.4"
+          height="5.46"
+          fill="none"
+          stroke="white"
+          pointer-events="stroke"
+          visibility="hidden"
+          stroke-width="9"
+        />
+        <rect
+          x="1.26"
+          y="20.16"
+          width="29.4"
+          height="5.46"
+          fill="none"
+          stroke="none"
+          pointer-events="all"
+        />
+      </g>
+      <g style="">
+        <clipPath id="mx-clip-1-20-31-9-0">
+          <rect x="1" y="20" width="31" height="9" />
+        </clipPath>
+        <g fill="#000000" font-family="Helvetica" font-size="2.52px">
+          <text x="2.52" y="23.94">Item 3</text>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Text.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Text.vue
new file mode 100644
index 00000000..c1af1cd5
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Text.vue
@@ -0,0 +1,46 @@
+<template>
+  <svg>
+    <g>
+      <g transform="translate(0.5,0.5)" style="visibility: visible">
+        <rect
+          x="0.98"
+          y="7.84"
+          width="29.4"
+          height="12.74"
+          fill="none"
+          stroke="white"
+          pointer-events="stroke"
+          visibility="hidden"
+          stroke-width="9"
+        />
+        <rect
+          x="0.98"
+          y="7.84"
+          width="29.4"
+          height="12.74"
+          fill="none"
+          stroke="none"
+          pointer-events="all"
+        />
+      </g>
+      <g style="">
+        <clipPath id="mx-clip-2-9-28-15-0">
+          <rect x="2" y="9" width="28" height="15" />
+        </clipPath>
+        <g
+          fill="#000000"
+          font-family="Helvetica"
+          clip-path="url(https://app.diagrams.net/#mx-clip-2-9-28-15-0)"
+          font-size="5.88px"
+        >
+          <text x="3.92" y="16.66">Text Node</text>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Times.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Times.vue
new file mode 100644
index 00000000..cbe890cc
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Times.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 涔樺彿 -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,4.5 4.5,0 13.5,9 22.5,0 27,4.5 18,13.5 27,22.5 22.5,27 13.5,18 4.5,27 0,22.5 9,13.5"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Trapezoid.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Trapezoid.vue
new file mode 100644
index 00000000..5d23b928
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Trapezoid.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 浜旇竟褰� -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="5.32,0 22.68,0 28,28 0,28"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/Triangle.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/Triangle.vue
new file mode 100644
index 00000000..e40db568
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/Triangle.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg>
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <path
+        d="M 5.78 1.36 L 26.18 14.96 L 5.78 28.56 Z"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        stroke-miterlimit="10"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/UpArrow.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/UpArrow.vue
new file mode 100644
index 00000000..2ce28d72
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/UpArrow.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg>
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,10 15,0 30,10 20,10 20,28 10,28 10,10"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        stroke-miterlimit="10"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/VerticalArrow.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/VerticalArrow.vue
new file mode 100644
index 00000000..360d21bc
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/VerticalArrow.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,9 13.6,0 27.2,9 18.2,9 18.2,18 27.2,18 13.6,27 0,18 9,18 9,9"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/ZoomIn.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/ZoomIn.vue
new file mode 100644
index 00000000..a5257169
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/ZoomIn.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M943.8 892.5l-201.4-201c24.2-29 43.9-61.3 58.7-96.3 20-47.3 30.1-97.6 30.1-149.4s-10.1-102-30.1-149.4c-19.3-45.7-47-86.7-82.1-122-35.2-35.2-76.2-62.9-121.9-82.2-47.3-20-97.5-30.2-149.3-30.2-51.8 0-102 10.2-149.3 30.2-45.7 19.3-86.7 47-121.9 82.2s-62.8 76.3-82.1 122c-20 47.3-30.1 97.6-30.1 149.4s10.1 102 30.1 149.4c19.3 45.7 47 86.7 82.1 122 35.2 35.2 76.2 62.9 121.9 82.2 47.3 20 97.5 30.2 149.3 30.2 51.7 0 102-10.2 149.3-30.2 34.6-14.7 66.6-34.1 95.3-58l201.5 201c6.9 6.9 15.9 10.3 24.9 10.3 9.1 0 18.1-3.5 25-10.4 13.8-13.7 13.8-36.1 0-49.8zM669.7 666.6c-0.4 0.4-0.8 0.7-1.2 1.1-0.3 0.3-0.6 0.6-0.8 0.9-59 58.3-137 90.4-219.9 90.4-83.5 0-162.1-32.6-221.2-91.7-59.1-59.1-91.6-137.8-91.6-221.4s32.5-162.3 91.6-221.4c59.1-59.1 137.6-91.7 221.2-91.7s162.1 32.6 221.2 91.7c59.1 59.1 91.6 137.8 91.6 221.4 0 83.3-32.3 161.6-90.9 220.7z" p-id="813" />
+    <path d="M573.7 419H473v-98c0-19.5-13-35.3-32.5-35.3S408 301.5 408 321v98H305.3c-19.5 0-35.3 13-35.3 32.5s15.8 32.5 35.3 32.5H408v105.4c0 19.5 13 35.3 32.5 35.3s32.5-15.8 32.5-35.3V484h100.7c19.5 0 35.3-13 35.3-32.5S593.2 419 573.7 419z" p-id="814" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/icon/ZoomOut.vue b/wcs/qd/src/views/acs/stage/editor/components/icon/ZoomOut.vue
new file mode 100644
index 00000000..c30a25f2
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/icon/ZoomOut.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M946.9 897.7L744 695.2c24.4-29.2 44.2-61.7 59.1-97 20.2-47.7 30.4-98.3 30.4-150.5s-10.2-102.8-30.4-150.5c-19.5-46-47.3-87.4-82.8-122.9s-76.8-63.4-122.8-82.8c-47.7-20.2-98.3-30.4-150.4-30.4S344.4 71.3 296.8 91.5c-46 19.5-87.3 47.4-122.8 82.8-35.5 35.5-63.3 76.8-82.8 122.9-20.2 47.7-30.4 98.3-30.4 150.5S71 550.5 91.2 598.2c19.5 46 47.3 87.4 82.8 122.9s76.8 63.4 122.8 82.8c47.7 20.2 98.3 30.4 150.4 30.4s102.7-10.2 150.4-30.4c34.9-14.8 67.1-34.4 96.1-58.5l203 202.6c6.9 6.9 16 10.4 25.1 10.4 9.1 0 18.2-3.5 25.2-10.5 13.8-13.8 13.8-36.3-0.1-50.2zM447.2 763.2c-84.2 0-163.3-32.8-222.8-92.4C164.8 611.2 132 532 132 447.7c0-84.3 32.8-163.5 92.3-223.1 59.5-59.6 138.7-92.4 222.8-92.4s163.3 32.8 222.8 92.4c59.5 59.6 92.3 138.8 92.3 223.1 0 83.9-32.5 162.8-91.6 222.3-0.4 0.4-0.8 0.8-1.2 1.1-0.3 0.3-0.6 0.6-0.8 0.9-59.3 58.9-137.9 91.2-221.4 91.2z" p-id="967" />
+    <path d="M574 416H303.7c-19.7 0-35.6 12.8-35.6 32.5S284 481 303.7 481H574c19.7 0 35.6-12.8 35.6-32.5S593.7 416 574 416z" p-id="968" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/arrow/DownArrowNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/arrow/DownArrowNode.js
new file mode 100644
index 00000000..e32d3c96
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/arrow/DownArrowNode.js
@@ -0,0 +1,49 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+
+// 涓嬬澶�
+
+class DownArrowModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 50
+    this.height = 80
+  }
+}
+class DownArrowView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const ArrowWidth = 1 / 3 * width
+    const upY = y - 1 / 2 * height
+    const downY = y + 1 / 2 * height
+    const downY2 = y + 1 / 5 * height
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: [
+        [x - 1 / 2 * ArrowWidth, downY2],
+        [x - 1 / 2 * width, downY2],
+        [x, downY],
+        [x + 1 / 2 * width, downY2],
+        [x + 1 / 2 * ArrowWidth, downY2],
+        [x + 1 / 2 * ArrowWidth, upY],
+        [x - 1 / 2 * ArrowWidth, upY]
+      ]
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'down-arrow',
+  view: DownArrowView,
+  model: DownArrowModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/arrow/HorizontalArrowNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/arrow/HorizontalArrowNode.js
new file mode 100644
index 00000000..0a8bf809
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/arrow/HorizontalArrowNode.js
@@ -0,0 +1,56 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+
+// 姘村钩鍙岀澶�
+
+class HorizontalArrowModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 40
+  }
+}
+
+class HorizontalArrowView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const ArrowHeight = 1 / 3 * height
+    const leftX = x - 1 / 2 * width
+    const leftX2 = x - 1 / 5 * width
+    const rightX = x + 1 / 2 * width
+    const rightX2 = x + 1 / 5 * width
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: [
+        // 鍙崇澶�
+        [rightX2, y - 1 / 2 * ArrowHeight],
+        [rightX2, y - 1 / 2 * height],
+        [rightX, y],
+        [rightX2, y + 1 / 2 * height],
+        [rightX2, y + 1 / 2 * ArrowHeight],
+        // 宸︾澶�
+        [leftX2, y + 1 / 2 * ArrowHeight],
+        [leftX2, y + 1 / 2 * height],
+        [leftX, y],
+        [leftX2, y - 1 / 2 * height],
+        [leftX2, y - 1 / 2 * ArrowHeight]
+      ]
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'horizontal-arrow',
+  view: HorizontalArrowView,
+  model: HorizontalArrowModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/arrow/LeftArrow.js b/wcs/qd/src/views/acs/stage/editor/components/node/arrow/LeftArrow.js
new file mode 100644
index 00000000..0405e10f
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/arrow/LeftArrow.js
@@ -0,0 +1,48 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+
+// 宸︾澶�
+class LeftArrowModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 50
+  }
+}
+class LeftArrowView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const ArrowHeight = 1 / 3 * height
+    const leftX = x - 1 / 2 * width
+    const leftX2 = x - 1 / 5 * width
+    const rightX = x + 1 / 2 * width
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: [
+        [leftX2, y - 1 / 2 * ArrowHeight],
+        [leftX2, y - 1 / 2 * height],
+        [leftX, y],
+        [leftX2, y + 1 / 2 * height],
+        [leftX2, y + 1 / 2 * ArrowHeight],
+        [rightX, y + 1 / 2 * ArrowHeight],
+        [rightX, y - 1 / 2 * ArrowHeight]
+      ]
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'left-arrow',
+  view: LeftArrowView,
+  model: LeftArrowModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/arrow/RightArrow.js b/wcs/qd/src/views/acs/stage/editor/components/node/arrow/RightArrow.js
new file mode 100644
index 00000000..f963d0e3
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/arrow/RightArrow.js
@@ -0,0 +1,50 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+
+// 鍙崇澶�
+
+class RightArrowModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 50
+  }
+}
+
+class RightArrowView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const ArrowHeight = 1 / 3 * height
+    const leftX = x - 1 / 2 * width
+    const rightX = x + 1 / 2 * width
+    const rightX2 = x + 1 / 5 * width
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: [
+        [rightX2, y - 1 / 2 * ArrowHeight],
+        [rightX2, y - 1 / 2 * height],
+        [rightX, y],
+        [rightX2, y + 1 / 2 * height],
+        [rightX2, y + 1 / 2 * ArrowHeight],
+        [leftX, y + 1 / 2 * ArrowHeight],
+        [leftX, y - 1 / 2 * ArrowHeight]
+      ]
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'right-arrow',
+  view: RightArrowView,
+  model: RightArrowModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/arrow/UpArrowNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/arrow/UpArrowNode.js
new file mode 100644
index 00000000..ae9b5386
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/arrow/UpArrowNode.js
@@ -0,0 +1,49 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+
+// 涓婄澶�
+class UpArrowModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 50
+    this.height = 80
+  }
+}
+
+class UpArrowView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const ArrowWidth = 1 / 3 * width
+    const upY = y - 1 / 2 * height
+    const upY2 = y - 1 / 5 * height
+    const downY = y + 1 / 2 * height
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: [
+        [x - 1 / 2 * ArrowWidth, upY2],
+        [x - 1 / 2 * width, upY2],
+        [x, upY],
+        [x + 1 / 2 * width, upY2],
+        [x + 1 / 2 * ArrowWidth, upY2],
+        [x + 1 / 2 * ArrowWidth, downY],
+        [x - 1 / 2 * ArrowWidth, downY]
+      ]
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'up-arrow',
+  view: UpArrowView,
+  model: UpArrowModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/arrow/VerticalArrowNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/arrow/VerticalArrowNode.js
new file mode 100644
index 00000000..0a0fa261
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/arrow/VerticalArrowNode.js
@@ -0,0 +1,56 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+
+// 绔栫洿绠ご
+
+class VerticalArrowModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 40
+    this.height = 80
+  }
+}
+
+class VerticalArrowView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const ArrowWidth = 1 / 3 * width
+    const upY = y - 1 / 2 * height
+    const upY2 = y - 1 / 5 * height
+    const downY = y + 1 / 2 * height
+    const downY2 = y + 1 / 5 * height
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: [
+        // 涓婄澶�
+        [x - 1 / 2 * ArrowWidth, upY2],
+        [x - 1 / 2 * width, upY2],
+        [x, upY],
+        [x + 1 / 2 * width, upY2],
+        [x + 1 / 2 * ArrowWidth, upY2],
+        // 涓嬬澶�
+        [x + 1 / 2 * ArrowWidth, downY2],
+        [x + 1 / 2 * width, downY2],
+        [x, downY],
+        [x - 1 / 2 * width, downY2],
+        [x - 1 / 2 * ArrowWidth, downY2]
+      ]
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'vertical-arrow',
+  view: VerticalArrowView,
+  model: VerticalArrowModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/basic/BaseNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/basic/BaseNode.js
new file mode 100644
index 00000000..6c297ce8
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/basic/BaseNode.js
@@ -0,0 +1,16 @@
+import { BaseNode, BaseNodeModel } from '@logicflow/core'
+
+class BaseNewNode extends BaseNode {
+}
+
+class BaseNewModel extends BaseNodeModel {
+  setAttributes() {
+    this.fill = 'red'
+  }
+}
+
+export default {
+  type: 'BaseNode',
+  view: BaseNewNode,
+  model: BaseNewModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/basic/CircleNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/basic/CircleNode.js
new file mode 100644
index 00000000..cc37250e
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/basic/CircleNode.js
@@ -0,0 +1,33 @@
+import { EllipseResize } from '@logicflow/extension'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 鍦嗗舰
+class CircleNewModel extends EllipseResize.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.rx = 35
+    this.ry = 35
+  }
+
+  setToBottom() {
+    this.zIndex = 0
+  }
+
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+export default {
+  type: 'pro-circle',
+  view: EllipseResize.view,
+  model: CircleNewModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/basic/DiamondNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/basic/DiamondNode.js
new file mode 100644
index 00000000..38dc3152
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/basic/DiamondNode.js
@@ -0,0 +1,35 @@
+import { DiamondResize } from '@logicflow/extension'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 鑿卞舰
+/**
+ * model鎺у埗鍒濆鍖栫殑鍊�
+ */
+class DiamondModel extends DiamondResize.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.rx = 35
+    this.ry = 35
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+
+  setToBottom() {
+    this.zIndex = 0
+  }
+}
+
+export default {
+  type: 'pro-diamond',
+  view: DiamondResize.view,
+  model: DiamondModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/basic/EllipseNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/basic/EllipseNode.js
new file mode 100644
index 00000000..c2976389
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/basic/EllipseNode.js
@@ -0,0 +1,19 @@
+import CircleNode from './CircleNode'
+
+// 妞渾
+class EllipseNewModel extends CircleNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.rx = 60
+    this.ry = 30
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    return { ...style }
+  }
+}
+export default {
+  type: 'pro-ellipse',
+  view: CircleNode.view,
+  model: EllipseNewModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/basic/RectNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/basic/RectNode.js
new file mode 100644
index 00000000..ee242e26
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/basic/RectNode.js
@@ -0,0 +1,27 @@
+import { RectResize } from '@logicflow/extension'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 鐭╁舰
+class RectNewModel extends RectResize.model {
+  setToBottom() {
+    this.zIndex = 0
+  }
+
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+export default {
+  type: 'pro-rect',
+  view: RectResize.view,
+  model: RectNewModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/basic/RectRadiusNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/basic/RectRadiusNode.js
new file mode 100644
index 00000000..9a336d63
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/basic/RectRadiusNode.js
@@ -0,0 +1,14 @@
+import RectNode from './RectNode'
+
+// 甯﹀渾瑙掔殑鐭╁舰
+class RectRadiusModel extends RectNode.model {
+  setAttributes() {
+    super.setAttributes()
+    this.radius = 20
+  }
+}
+export default {
+  type: 'rect-radius',
+  view: RectNode.view,
+  model: RectRadiusModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/basic/TextNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/basic/TextNode.js
new file mode 100644
index 00000000..b3a09117
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/basic/TextNode.js
@@ -0,0 +1,37 @@
+import { TextNodeModel, TextNode } from '@logicflow/core'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 鏂囨湰鑺傜偣
+class TextNewNode extends TextNode {
+}
+class TextNewModel extends TextNodeModel {
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    if (properties.backgroundColor) {
+      style.backgroundStyle = {
+        fill: properties.backgroundColor
+      }
+    }
+    return getTextStyleFunction(style, properties)
+  }
+
+  setAttributes() {
+    super.setAttributes()
+    if (!this.text.value) {
+      this.text.value = 'text'
+    }
+  }
+}
+
+export default {
+  type: 'pro-text',
+  view: TextNewNode,
+  model: TextNewModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/edge/Bezier.js b/wcs/qd/src/views/acs/stage/editor/components/node/edge/Bezier.js
new file mode 100644
index 00000000..ecfc48eb
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/edge/Bezier.js
@@ -0,0 +1,26 @@
+import { BezierEdge, BezierEdgeModel } from '@logicflow/core'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 璐濆灏旀洸绾�
+class Model extends BezierEdgeModel {
+  constructor(data, graphModel) {
+    super(data, graphModel)
+    this.strokeWidth = 1
+  }
+  getTextStyle() {
+    const style = super.getTextStyle()
+    return getTextStyleFunction(style, this.properties)
+  }
+
+  getEdgeStyle() {
+    const attributes = super.getEdgeStyle()
+    const properties = this.properties
+    const style = getShapeStyleFuction(attributes, properties)
+    return { ...style, fill: 'none' }
+  }
+}
+export default {
+  type: 'pro-bezier',
+  view: BezierEdge,
+  model: Model
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/edge/Line.js b/wcs/qd/src/views/acs/stage/editor/components/node/edge/Line.js
new file mode 100644
index 00000000..c5ef06e0
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/edge/Line.js
@@ -0,0 +1,26 @@
+import { LineEdge, LineEdgeModel } from '@logicflow/core'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 鐩寸嚎
+class Model extends LineEdgeModel {
+  constructor(data, graphModel) {
+    super(data, graphModel)
+    this.strokeWidth = 1
+  }
+  getTextStyle() {
+    const style = super.getTextStyle()
+    return getTextStyleFunction(style, this.properties)
+  }
+
+  getEdgeStyle() {
+    const attributes = super.getEdgeStyle()
+    const properties = this.properties
+    const style = getShapeStyleFuction(attributes, properties)
+    return { ...style, fill: 'none' }
+  }
+}
+export default {
+  type: 'pro-line',
+  view: LineEdge,
+  model: Model
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/edge/Polyline.js b/wcs/qd/src/views/acs/stage/editor/components/node/edge/Polyline.js
new file mode 100644
index 00000000..86d53c29
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/edge/Polyline.js
@@ -0,0 +1,26 @@
+import { PolylineEdge, PolylineEdgeModel } from '@logicflow/core'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 鎶樼嚎
+class Model extends PolylineEdgeModel {
+  constructor(data, graphModel) {
+    super(data, graphModel)
+    this.strokeWidth = 1
+  }
+  getTextStyle() {
+    const style = super.getTextStyle()
+    return getTextStyleFunction(style, this.properties)
+  }
+
+  getEdgeStyle() {
+    const attributes = super.getEdgeStyle()
+    const properties = this.properties
+    const style = getShapeStyleFuction(attributes, properties)
+    return { ...style, fill: 'none' }
+  }
+}
+export default {
+  type: 'pro-polyline',
+  view: PolylineEdge,
+  model: Model
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/getShapeStyleUtil.js b/wcs/qd/src/views/acs/stage/editor/components/node/getShapeStyleUtil.js
new file mode 100644
index 00000000..9df81757
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/getShapeStyleUtil.js
@@ -0,0 +1,61 @@
+export const getShapeStyleFuction = (style, properties) => {
+  if (properties.backgroundColor) {
+    style.fill = properties.backgroundColor
+  }
+  if (properties.gradientColor && style.fill !== properties.gradientColor) {
+    style.fillGradient = properties.gradientColor
+  }
+  if (properties.borderColor) {
+    style.stroke = properties.borderColor
+  }
+  if (properties.borderWidth) {
+    style.strokeWidth = properties.borderWidth
+  }
+  if (properties.borderStyle) {
+    if (properties.borderStyle === 'solid') {
+      style.strokeDashArray = '0'
+      // nodeResize閲岀殑bug瀵艰嚧鐨�,array灏忓啓浜�
+      style.strokeDasharray = '0'
+    }
+    if (properties.borderStyle === 'dashed') {
+      style.strokeDashArray = '3 3'
+      style.strokeDasharray = '3 3'
+    }
+    if (properties.borderStyle === 'dotted') {
+      style.strokeDashArray = '1 1'
+      style.strokeDasharray = '1 1'
+    }
+    if (properties.borderStyle === 'hidden') {
+      style.stroke = style.fill
+    }
+  }
+  return style
+}
+
+export const getTextStyleFunction = (style = {}, properties) => {
+  if (properties.fontColor) {
+    style.color = properties.fontColor
+  }
+  if (properties.fontSize) {
+    style.fontSize = properties.fontSize
+  }
+  if (properties.fontFamily) {
+    style.fontFamily = properties.fontFamily
+  }
+  if (properties.lineHeight) {
+    style.lineHeight = properties.lineHeight
+  }
+  if (properties.textAlign) {
+    style.textAlign = properties.textAlign
+  }
+  if (properties.fontWeight) {
+    style.fontWeight = properties.fontWeight
+  }
+  if (properties.textDecoration) {
+    style.textDecoration = properties.textDecoration
+  }
+  if (properties.fontStyle) {
+    style.fontStyle = properties.fontStyle
+  }
+  return style
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/icon/IconNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/icon/IconNode.js
new file mode 100644
index 00000000..5a6efd3d
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/icon/IconNode.js
@@ -0,0 +1,44 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+
+// 宸︿笂瑙掑甫ICON鐨勮妭鐐�
+class IconNode extends RectNode.view {
+  getImageHref() {
+    return
+  }
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const href = this.getImageHref()
+    const iconAttrs = {
+      x: x - 1 / 2 * width + 5,
+      y: y - 1 / 2 * height + 5, // icon鍦ㄥ乏涓婅
+      width: 25,
+      height: 18,
+      href,
+      // 鏍规嵁瀹介珮缂╂斁
+      preserveAspectRatio: 'none meet'
+    }
+    const rectAttrs = {
+      ...style,
+      strokeWidth: 1,
+      rx: 5,
+      ry: 5,
+      x: x - 1 / 2 * width,
+      y: y - 1 / 2 * height,
+      width,
+      height
+    }
+    return h('g', {}, [
+      h('rect', { ...rectAttrs }),
+      h('image', { ...iconAttrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'image-node',
+  view: IconNode,
+  model: RectNode.model
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/icon/Message.js b/wcs/qd/src/views/acs/stage/editor/components/node/icon/Message.js
new file mode 100644
index 00000000..a4f00e78
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/icon/Message.js
@@ -0,0 +1,14 @@
+import IconNode from './IconNode'
+
+// 宸︿笂瑙扞CON涓烘秷鎭殑鑺傜偣
+class MessageNode extends IconNode.view {
+  getImageHref() {
+    return 'https://dpubstatic.udache.com/static/dpubimg/1TZgBoaq8G/message.png'
+  }
+}
+
+export default {
+  type: 'icon-message',
+  view: MessageNode,
+  model: IconNode.model
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/image/Cloud.js b/wcs/qd/src/views/acs/stage/editor/components/node/image/Cloud.js
new file mode 100644
index 00000000..027ab027
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/image/Cloud.js
@@ -0,0 +1,14 @@
+import ImageNode from './ImageNode'
+
+// 浜戝舰鐘剁殑鍥剧墖鑺傜偣
+class CloudNode extends ImageNode.view {
+  getImageHref() {
+    return 'https://dpubstatic.udache.com/static/dpubimg/0oqFX1nvbD/cloud.png'
+  }
+}
+
+export default {
+  type: 'image-cloud',
+  view: CloudNode,
+  model: ImageNode.model
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/image/ImageNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/image/ImageNode.js
new file mode 100644
index 00000000..2ba9f9be
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/image/ImageNode.js
@@ -0,0 +1,40 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+
+// 鍥剧墖-鍩虹鑺傜偣
+class ImageModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 60
+  }
+}
+
+class ImageNode extends RectNode.view {
+  getImageHref() {
+    return
+  }
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const href = this.getImageHref()
+    const attrs = {
+      x: x - 1 / 2 * width,
+      y: y - 1 / 2 * height,
+      width,
+      height,
+      href,
+      // 鏍规嵁瀹介珮缂╂斁
+      preserveAspectRatio: 'none meet'
+    }
+    return h('g', {}, [
+      h('image', { ...attrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'image-node',
+  view: ImageNode,
+  model: ImageModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/image/Setting.js b/wcs/qd/src/views/acs/stage/editor/components/node/image/Setting.js
new file mode 100644
index 00000000..c1a8a492
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/image/Setting.js
@@ -0,0 +1,21 @@
+import ImageNode from './ImageNode'
+
+// 鍥剧墖-璁剧疆鑺傜偣
+class SettingModel extends ImageNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 60
+    this.height = 60
+  }
+}
+class SettingNode extends ImageNode.view {
+  getImageHref() {
+    return 'https://dpubstatic.udache.com/static/dpubimg/UzI4AFUcfO/setting.png'
+  }
+}
+
+export default {
+  type: 'image-setting',
+  view: SettingNode,
+  model: SettingModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/image/Star.js b/wcs/qd/src/views/acs/stage/editor/components/node/image/Star.js
new file mode 100644
index 00000000..b87da97b
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/image/Star.js
@@ -0,0 +1,14 @@
+import ImageNode from './ImageNode'
+
+// 鍥剧墖-鐢ㄦ埛鑺傜偣
+class UserNode extends ImageNode.view {
+  getImageHref() {
+    return 'https://dpubstatic.udache.com/static/dpubimg/-6Fd2uIoJ-/user.png'
+  }
+}
+
+export default {
+  type: 'image-user',
+  view: UserNode,
+  model: ImageNode.model
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/image/User.js b/wcs/qd/src/views/acs/stage/editor/components/node/image/User.js
new file mode 100644
index 00000000..b87da97b
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/image/User.js
@@ -0,0 +1,14 @@
+import ImageNode from './ImageNode'
+
+// 鍥剧墖-鐢ㄦ埛鑺傜偣
+class UserNode extends ImageNode.view {
+  getImageHref() {
+    return 'https://dpubstatic.udache.com/static/dpubimg/-6Fd2uIoJ-/user.png'
+  }
+}
+
+export default {
+  type: 'image-user',
+  view: UserNode,
+  model: ImageNode.model
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/index.js b/wcs/qd/src/views/acs/stage/editor/components/node/index.js
new file mode 100644
index 00000000..9ce798d1
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/index.js
@@ -0,0 +1,82 @@
+// 鍩虹鍥惧舰
+import CircleNode from './basic/CircleNode'
+import RectNode from './basic/RectNode'
+import RectRadiusNode from './basic/RectRadiusNode'
+import EllipseNode from './basic/EllipseNode'
+import TextNode from './basic/TextNode'
+import DiamondNode from './basic/DiamondNode'
+// path缁樺埗鐨勪釜鎬у寲鍥惧舰
+import CylindeNode from './path/CylindeNode'
+import TriangleNode from './path/TriangleNode'
+import ParallelogramNode from './path/ParallelogramNode'
+import ActorNode from './path/ActorNode'
+import StarNode from './path/Star'
+import PentagonNode from './path/PentagonNode'
+import HexagonNode from './path/HexagonNode'
+import SeptagonNode from './path/SeptagonNode'
+import HeptagonNode from './path/HeptagonNode'
+import TrapezoidNode from './path/TrapezoidNode'
+import CrossNode from './path/CrossNode'
+import MinusNode from './path/MinusNode'
+import TimesNode from './path/TimesNode'
+import DivideNode from './path/DivideNode'
+// 澶氳竟褰㈢粯鍒剁殑绠ご
+import LeftArrow from './arrow/LeftArrow'
+import RightArrow from './arrow/RightArrow'
+import HorizontalArrow from './arrow/HorizontalArrowNode'
+import UpArrow from './arrow/UpArrowNode'
+import DownArrow from './arrow/DownArrowNode'
+import VerticalArrow from './arrow/VerticalArrowNode'
+// image缁樺埗鍥剧墖鑺傜偣
+import ImageSetting from './image/Setting'
+import ImageUser from './image/User'
+import ImageCloud from './image/Cloud'
+// image缁樺埗宸︿笂瑙抜con鑺傜偣
+import IconMessage from './icon/Message'
+// 娉ㄥ唽杈�
+import Ployline from './edge/Polyline'
+import Line from './edge/Line'
+import Bezier from './edge/Bezier'
+
+export const registerCustomElement = (lf) => {
+  // 娉ㄥ唽鍩虹鍥惧舰
+  lf.register(CircleNode)
+  lf.register(RectNode)
+  lf.register(RectRadiusNode)
+  lf.register(EllipseNode)
+  lf.register(DiamondNode)
+  lf.register(TextNode)
+  // 娉ㄥ唽path缁樺埗鐨勪釜鎬у寲鍥惧舰
+  lf.register(CylindeNode)
+  lf.register(TriangleNode)
+  lf.register(ParallelogramNode)
+  lf.register(ActorNode)
+  lf.register(StarNode)
+  lf.register(PentagonNode)
+  lf.register(HexagonNode)
+  lf.register(SeptagonNode)
+  lf.register(HeptagonNode)
+  lf.register(TrapezoidNode)
+  lf.register(CrossNode)
+  lf.register(MinusNode)
+  lf.register(TimesNode)
+  lf.register(DivideNode)
+  // 娉ㄥ唽澶氳竟褰㈢粯鍒剁殑绠ご
+  lf.register(LeftArrow)
+  lf.register(RightArrow)
+  lf.register(HorizontalArrow)
+  lf.register(UpArrow)
+  lf.register(DownArrow)
+  lf.register(VerticalArrow)
+  // 娉ㄥ唽image缁樺埗鍥剧墖鑺傜偣
+  lf.register(ImageSetting)
+  lf.register(ImageUser)
+  lf.register(ImageCloud)
+  // 娉ㄥ唽image缁樺埗宸︿笂瑙抜con鑺傜偣
+  lf.register(IconMessage)
+  // 娉ㄥ唽杈�
+  lf.register(Ployline)
+  lf.register(Line)
+  lf.register(Bezier)
+}
+
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/path/ActorNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/path/ActorNode.js
new file mode 100644
index 00000000..718e5117
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/path/ActorNode.js
@@ -0,0 +1,95 @@
+import { h } from '@logicflow/core'
+import { RectResize } from '@logicflow/extension'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+// 浜虹墿
+class ActorModel extends RectResize.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 40
+    this.height = 80
+  }
+
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class ActorView extends RectResize.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    // 浜虹墿澶撮儴鍦嗗舰
+    const ellipseAttrs = {
+      ...style,
+      cx: x,
+      cy: y - 3 / 8 * height,
+      rx: 1 / 4 * width,
+      ry: 1 / 8 * height,
+      width,
+      height
+    }
+    // 浜虹墿鑲╄唨妯嚎
+    const pathAAttrs = {
+      ...style,
+      d: `M ${x - 1 / 2 * width} ${y - 1 / 8 * height} L ${x + 1 / 2 * width} ${y - 1 / 8 * height}`
+    }
+    // 浜虹墿韬綋韬共绔栫嚎
+    const pathBAttrs = {
+      ...style,
+      d: `M ${x} ${y - 1 / 4 * height} L ${x} ${y + 1 / 5 * height}`
+    }
+    // 浜虹墿宸﹁吙鏂滅嚎
+    const pathCAttrs = {
+      ...style,
+      d: `M ${x} ${y + 1 / 5 * height} L ${x - 1 / 2 * width} ${y + 1 / 2 * height}`
+    }
+    // 浜虹墿鍙宠吙鏂滅嚎
+    const pathDAttrs = {
+      ...style,
+      d: `M ${x} ${y + 1 / 5 * height} L ${x + 1 / 2 * width} ${y + 1 / 2 * height}`
+    }
+    // 浜虹墿閫忔槑鑳屾櫙鏉�
+    const bgAttrs = {
+      x: x - 1 / 5 * width,
+      y: y - 1 / 2 * height,
+      width: 2 / 5 * width,
+      height,
+      style: 'fill: transparent'
+    }
+    return h('g', {}, [
+      h('ellipse', {
+        ...ellipseAttrs
+      }),
+      h('path', {
+        ...pathAAttrs
+      }),
+      h('path', {
+        ...pathBAttrs
+      }),
+      h('path', {
+        ...pathCAttrs
+      }),
+      h('path', {
+        ...pathDAttrs
+      }),
+      h('rect', {
+        ...bgAttrs
+      })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'actor',
+  view: ActorView,
+  model: ActorModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/path/CrossNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/path/CrossNode.js
new file mode 100644
index 00000000..a9b4bbc7
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/path/CrossNode.js
@@ -0,0 +1,65 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 鍔犲彿
+class CrossModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class CrossView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - 1 / 2 * width, y - 1 / 6 * height],
+      [x - 1 / 6 * width, y - 1 / 6 * height],
+      [x - 1 / 6 * width, y - 1 / 2 * height],
+      [x + 1 / 6 * width, y - 1 / 2 * height],
+      [x + 1 / 6 * width, y - 1 / 6 * height],
+      [x + 1 / 2 * width, y - 1 / 6 * height],
+      [x + 1 / 2 * width, y + 1 / 6 * height],
+      [x + 1 / 6 * width, y + 1 / 6 * height],
+      [x + 1 / 6 * width, y + 1 / 2 * height],
+      [x - 1 / 6 * width, y + 1 / 2 * height],
+      [x - 1 / 6 * width, y + 1 / 6 * height],
+      [x - 1 / 2 * width, y + 1 / 6 * height]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ])
+  }
+}
+
+export default {
+  type: 'cross',
+  view: CrossView,
+  model: CrossModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/path/CylindeNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/path/CylindeNode.js
new file mode 100644
index 00000000..a719c7e3
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/path/CylindeNode.js
@@ -0,0 +1,92 @@
+import { h } from '@logicflow/core'
+import { RectResize } from '@logicflow/extension'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 鍦嗘煴浣�
+class CylindeModel extends RectResize.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 60
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class CylindeView extends RectResize.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    // 鍦嗘煴浣撻《閮ㄦき鍦�
+    const ellipseAAttrs = {
+      ...style,
+      cx: x,
+      cy: y - 1 / 3 * height,
+      rx: 1 / 2 * width,
+      ry: 1 / 6 * height,
+      width,
+      height
+    }
+    // 鍦嗘煴浣撳乏鐩寸嚎
+    const pathAAttrs = {
+      ...style,
+      d: `M ${x - 1 / 2 * width} ${y - 1 / 3 * height} L ${x - 1 / 2 * width} ${y + 1 / 3 * height}`
+    }
+    // 鍦嗘煴浣撳彸鐩寸嚎
+    const pathBAttrs = {
+      ...style,
+      d: `M ${x + 1 / 2 * width} ${y - 1 / 3 * height} L ${x + 1 / 2 * width} ${y + 1 / 3 * height}`
+    }
+    // 鍦嗘煴浣撲笅妞渾
+    const ellipseBAttrs = {
+      ...style,
+      cx: x,
+      cy: y + 1 / 3 * height,
+      rx: 1 / 2 * width,
+      ry: 1 / 6 * height,
+      width,
+      height
+    }
+    // 鍦嗘煴浣撲腑闂村～鍏呴儴鍒�
+    const rectAttrs = {
+      ...style,
+      x: x - 1 / 2 * width,
+      y: y - 1 / 3 * height,
+      width,
+      height: 2 / 3 * height,
+      stroke: 'transparent'
+    }
+    return h('g', {}, [
+      h('ellipse', {
+        ...ellipseBAttrs
+      }),
+      h('rect', {
+        ...rectAttrs
+      }),
+      h('path', {
+        ...pathAAttrs
+      }),
+      h('path', {
+        ...pathBAttrs
+      }),
+      h('ellipse', {
+        ...ellipseAAttrs
+      })
+    ])
+  }
+}
+
+export default {
+  type: 'cylinde',
+  model: CylindeModel,
+  view: CylindeView
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/path/DivideNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/path/DivideNode.js
new file mode 100644
index 00000000..1fa2d989
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/path/DivideNode.js
@@ -0,0 +1,83 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 闄ゅ彿
+class DivideModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class DivideView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - 1 / 2 * width, y - 1 / 8 * height],
+      [x + 1 / 2 * width, y - 1 / 8 * height],
+      [x + 1 / 2 * width, y + 1 / 8 * height],
+      [x - 1 / 2 * width, y + 1 / 8 * height]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height
+    }
+
+    // 闄ゅ彿涓棿妯嚎
+    const lineAttrs = {
+      ...attrs,
+      points: points.join(' ')
+    }
+
+    // 闄ゅ彿涓婂渾鐐�
+    const upEllipseAttrs = {
+      ...attrs,
+      cy: y - 3 / 8 * height,
+      cx: x,
+      rx: 1 / 8 * width,
+      ry: 1 / 8 * height
+    }
+
+    // 闄ゅ彿涓嬪渾鐐�
+    const downEllipseAttrs = {
+      ...attrs,
+      cy: y + 3 / 8 * height,
+      cx: x,
+      rx: 1 / 8 * width,
+      ry: 1 / 8 * height
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...lineAttrs }),
+      h('ellipse', { ...upEllipseAttrs }),
+      h('ellipse', { ...downEllipseAttrs })
+    ])
+  }
+}
+
+export default {
+  type: 'divide',
+  view: DivideView,
+  model: DivideModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/path/HeptagonNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/path/HeptagonNode.js
new file mode 100644
index 00000000..b28d42b1
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/path/HeptagonNode.js
@@ -0,0 +1,61 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 浜旇竟褰�
+class HeptagonModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class HeptagonView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - 0.205 * width, y - 0.5 * height],
+      [x + 0.205 * width, y - 0.5 * height],
+      [x + 0.5 * width, y - 0.205 * height],
+      [x + 0.5 * width, y + 0.205 * height],
+      [x + 0.205 * width, y + 0.5 * height],
+      [x - 0.205 * width, y + 0.5 * height],
+      [x - 0.5 * width, y + 0.205 * height],
+      [x - 0.5 * width, y - 0.205 * height]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ])
+  }
+}
+
+export default {
+  type: 'heptagon',
+  view: HeptagonView,
+  model: HeptagonModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/path/HexagonNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/path/HexagonNode.js
new file mode 100644
index 00000000..a0e281fb
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/path/HexagonNode.js
@@ -0,0 +1,59 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 鍏竟褰�
+class HexagonModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class HexagonView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - 0.28 * width, y - 0.5 * height],
+      [x + 0.28 * width, y - 0.5 * height],
+      [x + 0.5 * width, y],
+      [x + 0.28 * width, y + 0.5 * height],
+      [x - 0.28 * width, y + 0.5 * height],
+      [x - 0.5 * width, y]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ])
+  }
+}
+
+export default {
+  type: 'hexagon',
+  view: HexagonView,
+  model: HexagonModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/path/MinusNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/path/MinusNode.js
new file mode 100644
index 00000000..5f29f1e2
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/path/MinusNode.js
@@ -0,0 +1,57 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 鍑忓彿
+class MinusModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 20
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class MinusView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - 1 / 2 * width, y - 1 / 2 * height],
+      [x + 1 / 2 * width, y - 1 / 2 * height],
+      [x + 1 / 2 * width, y + 1 / 2 * height],
+      [x - 1 / 2 * width, y + 1 / 2 * height]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ])
+  }
+}
+
+export default {
+  type: 'minus',
+  view: MinusView,
+  model: MinusModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/path/ParallelogramNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/path/ParallelogramNode.js
new file mode 100644
index 00000000..96b07f88
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/path/ParallelogramNode.js
@@ -0,0 +1,57 @@
+import { h } from '@logicflow/core'
+import { RectResize } from '@logicflow/extension'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 骞宠鍥涜竟褰�
+class ParallelogramModel extends RectResize.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 100
+    this.height = 60
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class ParallelogramView extends RectResize.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - width / 2, y + height / 2],
+      [x - width / 5, y - height / 2],
+      [x + width / 2, y - height / 2],
+      [x + width / 5, y + height / 2]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'parallelogram',
+  view: ParallelogramView,
+  model: ParallelogramModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/path/PentagonNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/path/PentagonNode.js
new file mode 100644
index 00000000..0bf20aad
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/path/PentagonNode.js
@@ -0,0 +1,58 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 鍏竟褰�
+class PentagonModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class PentagonView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - 0.5 * width, y],
+      [x, y - 0.5 * height],
+      [x + 0.5 * width, y],
+      [x + 0.3 * width, y + 0.5 * height],
+      [x - 0.3 * width, y + 0.5 * height]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ])
+  }
+}
+
+export default {
+  type: 'pentagon',
+  view: PentagonView,
+  model: PentagonModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/path/SeptagonNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/path/SeptagonNode.js
new file mode 100644
index 00000000..9ea030a4
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/path/SeptagonNode.js
@@ -0,0 +1,60 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 涓冭竟褰�
+class SeptagonModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class SeptagonView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x, y - 0.5 * height],
+      [x + 0.395 * width, y - 0.3 * height],
+      [x + 0.5 * width, y + 0.145 * height],
+      [x + 0.225 * width, y + 0.5 * height],
+      [x - 0.225 * width, y + 0.5 * height],
+      [x - 0.5 * width, y + 0.145 * height],
+      [x - 0.395 * width, y - 0.3 * height]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ])
+  }
+}
+
+export default {
+  type: 'septagon',
+  view: SeptagonView,
+  model: SeptagonModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/path/Star.js b/wcs/qd/src/views/acs/stage/editor/components/node/path/Star.js
new file mode 100644
index 00000000..28eaeded
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/path/Star.js
@@ -0,0 +1,40 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+
+// 浜旇鏄�
+class StarModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+}
+
+class StarView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const svgAttr = {
+      x: x - 1 / 2 * width,
+      y: y - 1 / 2 * height,
+      width,
+      height
+    }
+    const pathAAttrs = {
+      ...style,
+      d: 'm0.36922,13.46587l12.98695,0l4.01307,-13.36885l4.01307,13.36885l12.98694,0l-10.50664,8.26231l4.01327,13.36885l-10.50665,-8.26253l-10.50664,8.26253l4.01327,-13.36885l-10.50665,-8.26231l0,0z'
+    }
+
+    return h('svg', { ...svgAttr, viewBox: '0 0 37 37' }, [
+      h('path', {
+        ...pathAAttrs
+      })
+    ])
+  }
+}
+
+export default {
+  type: 'star',
+  view: StarView,
+  model: StarModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/path/TimesNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/path/TimesNode.js
new file mode 100644
index 00000000..6d67a2fc
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/path/TimesNode.js
@@ -0,0 +1,65 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 涔樺彿
+class TimesModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class TimesView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - 1 / 2 * width, y - 1 / 3 * height],
+      [x - 1 / 3 * width, y - 1 / 2 * height],
+      [x, y - 1 / 6 * height],
+      [x + 1 / 3 * width, y - 1 / 2 * height],
+      [x + 1 / 2 * width, y - 1 / 3 * height],
+      [x + 1 / 6 * width, y],
+      [x + 1 / 2 * width, y + 1 / 3 * height],
+      [x + 1 / 3 * width, y + 1 / 2 * height],
+      [x, y + 1 / 6 * height],
+      [x - 1 / 3 * width, y + 1 / 2 * height],
+      [x - 1 / 2 * width, y + 1 / 3 * height],
+      [x - 1 / 6 * width, y]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ])
+  }
+}
+
+export default {
+  type: 'times',
+  view: TimesView,
+  model: TimesModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/path/TrapezoidNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/path/TrapezoidNode.js
new file mode 100644
index 00000000..3ffe197b
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/path/TrapezoidNode.js
@@ -0,0 +1,57 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 浜旇竟褰�
+class TrapezoidModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class TrapezoidView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - 0.31 * width, y - 0.5 * height],
+      [x + 0.31 * width, y - 0.5 * height],
+      [x + 0.5 * width, y + 0.5 * height],
+      [x - 0.5 * width, y + 0.5 * height]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ])
+  }
+}
+
+export default {
+  type: 'trapezoid',
+  view: TrapezoidView,
+  model: TrapezoidModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/components/node/path/TriangleNode.js b/wcs/qd/src/views/acs/stage/editor/components/node/path/TriangleNode.js
new file mode 100644
index 00000000..67ff9e36
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/components/node/path/TriangleNode.js
@@ -0,0 +1,47 @@
+import { h } from '@logicflow/core'
+import { RectResize } from '@logicflow/extension'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 涓夎褰�
+class TriangleModel extends RectResize.model {
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class TriangleView extends RectResize.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: [
+        [x - width / 2, y + height / 2],
+        [x - width / 2, y - height / 2],
+        [x + width / 2, y]
+      ]
+    }
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'triangle',
+  view: TriangleView,
+  model: TriangleModel
+}
diff --git a/wcs/qd/src/views/acs/stage/editor/constant/index.js b/wcs/qd/src/views/acs/stage/editor/constant/index.js
new file mode 100644
index 00000000..710a725b
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/constant/index.js
@@ -0,0 +1,69 @@
+export const shortStyles = [
+  {
+    backgroundColor: 'rgb(255, 255, 255)',
+    borderWidth: '1px',
+    borderColor: 'rgb(42, 42, 42)'
+  },
+  {
+    backgroundColor: 'rgb(245, 245, 245)',
+    borderWidth: '1px',
+    borderColor: 'rgb(102, 102, 102)'
+  },
+  {
+    backgroundColor: 'rgb(218, 232, 252)',
+    borderWidth: '1px',
+    borderColor: 'rgb(108, 142, 191)'
+  },
+  {
+    backgroundColor: 'rgb(213, 232, 212)',
+    borderWidth: '1px',
+    borderColor: 'rgb(130, 179, 102)'
+  },
+  {
+    backgroundColor: 'rgb(255, 230, 204)',
+    borderWidth: '1px',
+    borderColor: 'rgb(215, 155, 0)'
+  },
+  {
+    backgroundColor: 'rgb(255, 242, 204)',
+    borderWidth: '1px',
+    borderColor: 'rgb(214, 182, 86)'
+  },
+  {
+    backgroundColor: 'rgb(248, 206, 204)',
+    borderWidth: '1px',
+    borderColor: 'rgb(184, 84, 80)'
+  },
+  {
+    backgroundColor: 'rgb(220, 210, 230)',
+    borderWidth: '1px',
+    borderColor: 'rgb(150, 115, 166)'
+  }
+]
+
+export const borderStyles = [
+  {
+    value: 'solid'
+  },
+  {
+    value: 'dashed'
+  },
+  {
+    value: 'dotted'
+  }
+]
+
+export const fontFamilies = [
+  {
+    value: 'Arial'
+  },
+  {
+    value: 'Verdana'
+  },
+  {
+    value: 'Georgia'
+  },
+  {
+    value: 'Times New Roman'
+  }
+]
diff --git a/wcs/qd/src/views/acs/stage/editor/index2.vue b/wcs/qd/src/views/acs/stage/editor/index2.vue
new file mode 100644
index 00000000..36004f5b
--- /dev/null
+++ b/wcs/qd/src/views/acs/stage/editor/index2.vue
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div id="container" class="container" />
+
+    <Diagram />
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import crudStage from '@/api/acs/stage/stage'
+import actorCrud from '@/api/acs/stage/actor'
+import deviceCrud from '@/api/acs/device/device'
+import del from '@/assets/acs/del_new.png'
+import crud from '@/mixins/crud'
+
+import '@logicflow/core/dist/style/index.css'
+import '@logicflow/extension/lib/style/index.css'
+
+import { LogicFlow } from '@logicflow/core'
+import Diagram from './components/Diagram.vue'
+
+export default {
+  name: 'HelloWorld',
+  components: {
+    Diagram
+  },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+    // this.init()
+  },
+  methods: {
+    // 娴佺▼鍥惧垵濮嬪寲
+    init() {
+      const data = {
+        // 鑺傜偣
+        nodes: [
+          {
+            id: 50, // 鑺傜偣id
+            type: 'rect', // 鑺傜偣绫诲瀷锛氱煩褰�
+            x: 100, // x杞村潗鏍�
+            y: 150, // y杞村潗鏍�
+            text: '浣犲ソ' // 鑺傜偣鏂囨湰
+          },
+          {
+            id: 21, // 鑺傜偣id
+            type: 'circle', // 鑺傜偣绫诲瀷:鍦嗗舰
+            text: '绗簩',
+            x: 300, // x杞村潗鏍�
+            y: 150 // y杞村潗鏍�
+          }
+        ],
+        // 杈�
+        edges: [
+          {
+            type: 'line', // 鍐呯疆杩炵嚎鏂瑰紡锛氱洿绾�(line);鐩磋鎶樼嚎(polyline);璐濆灏旀洸绾�(bezier)
+            sourceNodeId: 50, // 鍘熷鑺傜偣id
+            targetNodeId: 21 // 鐩爣鑺傜偣id
+          }
+        ]
+      }
+      // 鍒濆鍖栭厤缃�
+      const lf = new LogicFlow({
+        container: document.querySelector('#container'), // 瀹瑰櫒
+        // 鐢诲竷閰嶇疆
+        // width: window.innerWidth, // 瀹藉害
+        height: window.innerHeight, // 楂樺害
+        background: {
+          color: '#2b364a' // 鑳屾櫙棰滆壊
+        },
+        grid: {
+          type: 'mesh',
+          size: 20
+        },
+        isSilentMode: true // 浠呬粎鍙互娴忚锛屼笉鍙繘琛岃妭鐐瑰拰鏂囨湰缂栬緫
+      })
+      // 寮�濮嬫覆鏌�
+      lf.render(data)
+    }
+  }
+}
+</script>
+
+<style>
+html, body {
+  height: 100%;
+}
+body {
+  padding: 0;
+  margin: 0;
+}
+</style>
+<style scoped>
+.container {
+  background-color: #f8f9fa;
+  height: 100%;
+}
+</style>