From f7238eaf63fae7fe4cdd71d38fc790cd51adfd19 Mon Sep 17 00:00:00 2001
From: limengnan <420004014@qq.com>
Date: Tue, 13 Jan 2026 15:11:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=88=86=E6=9E=90=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 business-css/frontend/package.json            |    3 +
 business-css/frontend/src/assets/x6/add.png   |  Bin 0 -> 544 bytes
 .../frontend/src/assets/x6/change.png         |  Bin 0 -> 708 bytes
 business-css/frontend/src/assets/x6/copy.png  |  Bin 0 -> 424 bytes
 business-css/frontend/src/assets/x6/del.png   |  Bin 0 -> 264 bytes
 .../frontend/src/assets/x6/display.png        |  Bin 0 -> 672 bytes
 business-css/frontend/src/assets/x6/hide.png  |  Bin 0 -> 732 bytes
 .../frontend/src/assets/x6/history.png        |  Bin 0 -> 643 bytes
 business-css/frontend/src/assets/x6/info.png  |  Bin 0 -> 619 bytes
 .../frontend/src/assets/x6/magnify.png        |  Bin 0 -> 715 bytes
 .../frontend/src/assets/x6/material.png       |  Bin 0 -> 738 bytes
 business-css/frontend/src/assets/x6/redo.png  |  Bin 0 -> 560 bytes
 .../frontend/src/assets/x6/reduce.png         |  Bin 0 -> 675 bytes
 .../frontend/src/assets/x6/return.png         |  Bin 0 -> 379 bytes
 .../frontend/src/assets/x6/revoke.png         |  Bin 0 -> 536 bytes
 business-css/frontend/src/assets/x6/save.png  |  Bin 0 -> 396 bytes
 .../src/components/antvg6/GraphCanvas.vue     |  244 ++++
 .../src/components/antvg6/LeftPanel.vue       |  101 ++
 .../frontend/src/components/antvg6/index.vue  |  414 +++++++
 .../frontend/src/components/antvx6/index.vue  | 1086 +++++++++++++++++
 business-css/frontend/src/types/graph.ts      |   15 +
 .../src/views/business/project/index.vue      |   24 +-
 business-css/frontend/types/graph.ts          |   15 +
 23 files changed, 1896 insertions(+), 6 deletions(-)
 create mode 100644 business-css/frontend/src/assets/x6/add.png
 create mode 100644 business-css/frontend/src/assets/x6/change.png
 create mode 100644 business-css/frontend/src/assets/x6/copy.png
 create mode 100644 business-css/frontend/src/assets/x6/del.png
 create mode 100644 business-css/frontend/src/assets/x6/display.png
 create mode 100644 business-css/frontend/src/assets/x6/hide.png
 create mode 100644 business-css/frontend/src/assets/x6/history.png
 create mode 100644 business-css/frontend/src/assets/x6/info.png
 create mode 100644 business-css/frontend/src/assets/x6/magnify.png
 create mode 100644 business-css/frontend/src/assets/x6/material.png
 create mode 100644 business-css/frontend/src/assets/x6/redo.png
 create mode 100644 business-css/frontend/src/assets/x6/reduce.png
 create mode 100644 business-css/frontend/src/assets/x6/return.png
 create mode 100644 business-css/frontend/src/assets/x6/revoke.png
 create mode 100644 business-css/frontend/src/assets/x6/save.png
 create mode 100644 business-css/frontend/src/components/antvg6/GraphCanvas.vue
 create mode 100644 business-css/frontend/src/components/antvg6/LeftPanel.vue
 create mode 100644 business-css/frontend/src/components/antvg6/index.vue
 create mode 100644 business-css/frontend/src/components/antvx6/index.vue
 create mode 100644 business-css/frontend/src/types/graph.ts
 create mode 100644 business-css/frontend/types/graph.ts

diff --git a/business-css/frontend/package.json b/business-css/frontend/package.json
index 7b20367..00fd84e 100644
--- a/business-css/frontend/package.json
+++ b/business-css/frontend/package.json
@@ -10,6 +10,8 @@
     "prettier": "prettier --write ."
   },
   "dependencies": {
+    "@antv/g6": "^5.0.51",
+    "@antv/x6": "^3.1.4",
     "@element-plus/icons-vue": "^2.0.10",
     "@types/js-cookie": "^3.0.2",
     "@vueuse/core": "^9.1.1",
@@ -20,6 +22,7 @@
     "default-passive-events": "^2.0.0",
     "echarts": "^5.2.2",
     "element-plus": "^2.2.27",
+    "insert-css": "^2.0.0",
     "js-base64": "^3.7.5",
     "js-cookie": "^3.0.1",
     "jsencrypt": "^3.3.2",
diff --git a/business-css/frontend/src/assets/x6/add.png b/business-css/frontend/src/assets/x6/add.png
new file mode 100644
index 0000000000000000000000000000000000000000..6de722dad9b9cb1bf6275914635a2ce17f2a6e95
GIT binary patch
literal 544
zcmV+*0^j|KP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0kug)K~y+TjZ?8p
z0&x_+J5OnFxS_$J!J#2&X=xPy0?~s6H>beHAc>}Ghz6Io2!eu!28BE2puj<-DF|w7
zXwbp2;Z7VvPp|L0`x#uB`oZIU@BQBUp1$Aj<a9c%YMOQ|%kqvSNgJ?b(1q2a(denH
z>-xFpc?S@<o=hgs!TEfkb`w1%_?ik*V6$Nud*Xa4<Z?L&y@x7za?#{svAAN}c7l97
z9uF+b`b2XNgX4-{u>feUptwU*RrN!peasZdX0u5ySA-IlT*gEl)Me-=1^x)+^Z5iO
zHPO@pk2BZr_g9g-1ifWUKyW}G5@5q<G%`TD{C~sY@FA1QtfROIyE0947yH^~t>ZW*
zc}M`wcW@f+SBIs*?MNi@4*yuM*H2i}Xf$5v+wHbX9uk1!nd`c#YPC9`VR<?xmoa&t
z=h%&g>wEQ!1%4JqOx3606u65Z^1%ge1vEfN;6HFOoQA!ui8x6Q*fX#3H_+IEbwHm)
z?7s=-`6N5A3J(^6lTqu5&<DQ-3%(@Yc8^I#QNFNHZr)}*4@xW+JHk()2tVl?8ielQ
i3qeT;6nqOPAxYoS^TBTpf6N5{0000<MNUMnLSTZmUGNM5

literal 0
HcmV?d00001

diff --git a/business-css/frontend/src/assets/x6/change.png b/business-css/frontend/src/assets/x6/change.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e9e23dc7014a410047ffdc1116dc31f6d84db08
GIT binary patch
literal 708
zcmV;#0z3VQP)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0$E8!K~y+Tt(8A$
zQ&AMg-%DP=p^yX=926orC^&SeTO|q=I^;hF6kReD6cH(OutPzxP7b<tG(pA48<LPg
zHw6o36fC%Obm(RhI!Jg){CzLCA<dsc#19VV-tXLV?m73Iyx6H!YRR_km&md;KfdF)
zS*cV$nZ0GF)9J5}=U9IkP;)^^c-3n4@?Z-xnM@yfZMJiPWS+|3Y<&cb{%@EoU_PH;
z&=Vm)3^jqN0TYSDX`D8Yn4zqAJnnQlo%d>9AP{(N=m|^&BuK<@95w0%@-3IkT~e@U
zG^${Ue!ss?SIg%31dauiBTg>M7>)&Ty<YEgBoa~6ZYfx;R(mCW1fJ18js-N1E65s-
zMM}FNo=ff#Y<oNym%W8wGg}|FX?qc;4;VkP-eRt{eJfBSJkN_!=ANN^WV6}ZsOIQU
z3&Vh+Q0NhlzC;!?2RxZfUgY9M-guAfenNR9aYk?3?RFdWdVPObvg^8sCj}FDf(qiA
zV1nNKH~LL57~Bytb!=t<=h5;GjQAkahV-!Ha5(&+-EL>N{gezxAfp4l6X%}bbeEu4
z(7QD7rtGa&tAbjE`-QFSh!hkIQnO~50pN-#W%dl4e;)m=R4V<^n&y-^vkIpV%*L=}
z4J(EV<3h7G&5;88T`kZL>Hb*>>&L#;vKp)l!;%>le~?cC+3etS-)#L1!O;_yiE+o#
zt)#n5;8~xrCRuK23OKtc0)2?jf?4bBRIdNK4?wJ=_mS(<1p5ku9bs*ulc;OWW;3d-
qgi$+BBd;3Uzk`ZY)!5&LW&H&)(kzX~ruKRO0000<MNUMnLSTZEk~kp%

literal 0
HcmV?d00001

diff --git a/business-css/frontend/src/assets/x6/copy.png b/business-css/frontend/src/assets/x6/copy.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7e2c46f8a782af83dc8ae665fa71f128eb8dd5c
GIT binary patch
literal 424
zcmV;Z0ayNsP)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0X<1XK~y+T?UXN1
z#4s4f*KPv0W$FZy4}u^8vp<3f+;Aiq3>t|cAqd<hAQ2}vO$b>6p916w+`d4Q@jPt_
zcPWJ4IC;P1N#DNNp1f_}R#a6rQA%A5!%zo7um$}IzMTspZu`E!>bg$Zv_@L96U1I-
z1ZLY9F4HtUG?{NATUpRFjnEkn@;u*@Qa<9}eM}!r)*vD8%DzB_OUqnDlw~<ESgbJ1
zvYjvtPZ1_2<1m2^pm*qn3Gfuh@ys!_W^ar~;2L6njo}QMVvk;#^8wp%he1VVx`bXP
z&DyrT*BK8`2n{11%39eN{vR5CFer**mqN&<9Ssd{7@&`yDTKTMqmg`qV046-JxB36
zjmCLlY=hQl?Bf+1Ti>{~ABs~U4yLyEa%Hfpxl>`1Bz!Pu(64XaPiQkK&p!d1sBLYb
ST!n=I0000<MNUMnLSTaY)T9Xj

literal 0
HcmV?d00001

diff --git a/business-css/frontend/src/assets/x6/del.png b/business-css/frontend/src/assets/x6/del.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce41118b4ee2070b443df13e5a3b12f2e1613d60
GIT binary patch
literal 264
zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE-VV{wqX6T`Z5GB1G~mUKs7M+SzC
z{oH>NS%G}c0*}aI1_r*vAk26?e?<yVaIU9|V~B<S)hV%D4GID+cl|E)ZmBMry-x6o
zGy6-oWtI^?r_XSy6?iSc_j-+o4#V>rg++2k$JV^qu+3zJxX~FCrmu2}Em!21xWB63
za9BMcEpBJeuEW>XtS+dy`&8`k-EiB(<-A`HTq#uZ@Nf5!O8WJUX}8sp^Ts-gnHo!D
zLLz%Vl?r`tdiLnu@4B{cNA)b<Nq((*AGgh!C60^j=nXax5lh{c<|+C>hcbA&`njxg
HN@xNA6j)>O

literal 0
HcmV?d00001

diff --git a/business-css/frontend/src/assets/x6/display.png b/business-css/frontend/src/assets/x6/display.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3aac246021a3f1613606b0e8277c106a8848a89
GIT binary patch
literal 672
zcmV;R0$=@!P)<h;3K|Lk000e1NJLTq000sI000jN1^@s6>4u*Y00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0yRlQK~y+TjgvoU
z6LA#B?=DB^5Xc1_D=4@WJ4CFI4iX244uM>TgBC1lu^kF#a4fnzIH(wi(4hn?4iWNq
zaFfubLyJOni<qH<gTn<oNODR1yx-l$L@fA)ckj>d{l4%0-tTw1_7CK8xyA8#d>?ZK
znNvYc`-Qw8jYe-8jmEJb`hyvwbUJNXmi1WI^+&iJ<TG*tsYmQ4dJ!!}iqU9vw^FH`
z%Ra$`DCpuf<~&t*sQS)dnMF36y#v|4*yy!twR)s%`LJja{D|4{Ja4VlYW<M-MQ|J^
z*6;UA?8#94M!jC|Dk9sq-=gk9vJjF;GX7J#yC*)ITKI)<J)h6d^?E%i?$&CxWkXuU
zS(W2VcQP0ZUQ*45U>CQ5Bu&$-s6|jNmu2|dND7V(oo=c)9;}We2!d)qF$=_BNi3Mn
z2jntyIg^-x*_J4nGO%OFWI^D%u3Wjvrmi2+v`8fKJut06D{zvpsF<$W()B&$c6b8<
z;)kLQ!`LDDob_k8NjkhLaRJ@T)6FUJ!l3#Au`W(Y-jSc8Ds8ekCW+{8gp$N2#~0w2
zP#*H!Xt&!Q$qsTYkw`pI8KBv0cH;5)GRe0@uotFZG_!p`ffZz(>vyLgq}-ew@fgxg
zc^kpf3^JL_C2mhTv5|)ywJ7lkk$|~efoLD1C1!Jg{vyP~;n2fh!oQBcO6plq?32Iq
zFQO0-ZlUsQN}<EKseccGHghe?Nc`}BLT*N0dEj0EP5TXI=N}n0S$`A&0000<MNUMn
GLSTZEqB9-<

literal 0
HcmV?d00001

diff --git a/business-css/frontend/src/assets/x6/hide.png b/business-css/frontend/src/assets/x6/hide.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb4d6dfe5175a1ace32e67444f99d3f7cc6cb3e2
GIT binary patch
literal 732
zcmV<20wev2P)<h;3K|Lk000e1NJLTq000sI000jN1^@s6>4u*Y00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0&z)1K~y+TZIe4_
zlTj4M{qiD%gaj%$bO_j?L%L;fP*V52F<_@u&>^UkNXg*fAPOP|Y*BEqp#_CNz62r)
z7HTFH0#?kBL9l~EhvqSK2zmPZe`!h|{^5N8^PPL{Ip>~xt`Ut!gEpJ(&3HV%SuU4%
z&Vf`ab+O;?FQZ;U{Kx=l;PcaNw|^@Ziw*uyz(}Xl?oOvuKwmTrBZKoCyu$w;QbYb?
zb6^X?0oaW#*KW77)oN7<EExKPLLrCG=i5NNfppoBA^7HT$0=g5*fPOhpzd;#rD=6G
zef)mELxk)iZX83h{|_90o%IFO{n2P->O`_z6~*K6w^VT*bpfXU`a8G=f4~+)ykxI<
zJf27Se7>taROW?#;rG5&Dm^d~iNs|#e8qSV!>XLHDcCmZ46=^wBe#$(d{VFl3J60c
z!LAzoY_sWrk|UGl39z?iNA<!9F;x`?gTaMLrJ}$VbQ&n29{Gv*-Lf7c91g1zZM@Ce
z7W@&O)f(4t@f7q)$Dgs0Z4FuB%xbm;WyDs;>5kLs)JQxfkZ!8WZPq7V*1Vl3$urb1
zHWqR?)e)6=gu`mCFqnVfyO^vdd%a#$0i^eOy(iG@a5#Ky-C8o4oG1GaGH2;kPBuXk
zj&qnmT`DWlA6<gUl7{s;qS?!E0k5q<0!>rampHDvT&`@PP*9`KKuM|KGr`p>UHy{m
zM}Y+Tv<PkBq#$c>&Eas=6*Llw%%SU<+-EI-)Y0c@LCQ4EPbUHi8Z-i^v3f4n)E<ML
z%qHs(Tdmd}&*~NbdfeB}1e!t(r9VL(fy@V7d!yNG{yzQwG?a#6?EC|p04Ms+{7O{-
O0000<MNUMnLSTX&TusUV

literal 0
HcmV?d00001

diff --git a/business-css/frontend/src/assets/x6/history.png b/business-css/frontend/src/assets/x6/history.png
new file mode 100644
index 0000000000000000000000000000000000000000..58e7ab69134b0daaf4d4e0a3f9860ec67bdb5014
GIT binary patch
literal 643
zcmV-}0(||6P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0vJg|K~y+TjgmiT
zQ&AMg-+OsU8ZhJqVsL1|!NEX=2nHO4RB&*~KT1Gx)lEl{A{_#XI4P7;og_o)kRdS%
zbP2SXDhigMLk2;G3=Tq4?C{86f9K{|+P(;Wa5(3ld+v9?bMDo(e;}93UB|6s-^b(e
zqk6smRc)Ms;dmFO)9G_u0?T<ko+m0f2d4<K*=&NFUrMa&dPgMzWJluj`TQm|7gf^1
zF#(&mIJ8f3MAlxfca69xMhivBO(v5#H3ykY=Blg(Y6j_a`Vulf5;l9i-knyfHIn>U
z6bglNgTY`2l1L~Nx>72YY(;?Vw{mm8-_HkwLCZ8v>ED#SlR&|S-|z1Xhr?Y+nw3gr
z)u1Pfz1!HD+#Co5Y~mjf&a-~GTt31-!|n;GPCqvd!`QA?tLG*0Kaf^X@f#IOCWjYb
z+i><|n2W4;3FozNzgDX?MFnlYBDLuHNU2oH42Q$lAaM~`mi1l+=PVU;`Ee9)BB#UC
zJ%s%y5-%|A1*hg147nSPMkC1ImJ2wusx!pT1aT=K`IMI4;J>kSDIk9Xw?h2`XZ=N3
z<i{xjaLChi@!r|e4HW;amEYR+#A301f&pyrd_LdnWHM>A+wHj@NuC^hux<MgrJp!c
zJT*iqfb2k|QLx3-JH(<gf!(DfJ{pZ;jYi|w?1b}`PeKOBkRB5*W0zG@)1=KkhWtW?
dJWB~Q?GOH10p+nd6D9xv002ovPDHLkV1jd58CU=S

literal 0
HcmV?d00001

diff --git a/business-css/frontend/src/assets/x6/info.png b/business-css/frontend/src/assets/x6/info.png
new file mode 100644
index 0000000000000000000000000000000000000000..6167cd1d9273699f406a06145dc0378b9111eacf
GIT binary patch
literal 619
zcmV-x0+juUP)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0su)wK~y+T&5}Jx
zTTv9p-+NIKqC*lC$1aKvwz{~*MsToDF-b#)3bu48bkIQuG2ki%!KH&BxMVVsVv;3-
zONbN{aS#Woh@v2fLz9;T)KK%Dzmt#$cJXWJfj{T_+;ji;s)0b@hiRH$RaI?Jo+k!K
ztA4-#njtovvugP1@(QT3(O-<yWHQ-N4L?!nKSH%@HTUIG-^c_nxmsg=&~u5l<iFx*
z9b8%)@t1z`4Q8sT8fO*JNF<d?E%<yshuiI*r{;I1QrRN+#p!g;#bU8bX|M)K0xSdh
zQzZrzX}SdwP1Bla-XJbqsz44BZIGWxBod1j$#C=w)m8KE3!gSkgK4wbdduZ<E4l@2
zGkl-)Bv`aIqHvTgz5^Lv(sezY&1P>xq0k!|c8UF=W`z6_wv#QVh)-jCvF9wZ4a4|=
z8l>0<-g`Wr*Ak~VgDTnWb}vKLfNb4L{i@653Q&7NY}UFOgho(;f2Eniop?Nc%=T?G
zZW22H<C4VRA|HOt^Jggb!c&xn75qUkfxTHQ7KM&5{^5gzc!YNhIsn6L{TY&b2=`+T
zaJ`S%dOn};6|&1X@|1f_ze3lg1P5c$XjBgdgR62fxR3-xTTmyU6L3~CsF9Ta(Fpn|
z5TXTd!BC-4=q9e@a=A~^KukE2o^$*Tbk^Z;d{Y!fxdUNn@&RLTO4a}X002ovPDHLk
FV1g~v3{U_7

literal 0
HcmV?d00001

diff --git a/business-css/frontend/src/assets/x6/magnify.png b/business-css/frontend/src/assets/x6/magnify.png
new file mode 100644
index 0000000000000000000000000000000000000000..b80818913348e97968a3f756317c642d39cf3a1d
GIT binary patch
literal 715
zcmV;+0yO=JP)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0$@o*K~y+Tm6SVZ
zQ&AYldv6|e=#W8h=}<w)Ed-1pG=n8|>k#q)GdM^VMG6WQItVISy1F<yIOt{}n)l#n
zsGvfj5h^AiC|J;;LkJm4p8o##-n1q}ihnryp67qQ^PTU;n3;lPG8r2VhfAno!!Rsl
zlT~AV?)7@xl}hCheGFqnsZ?ryFc>^z^D5>pvIgN7)>-rr@)B~EoV8M^^xE0w;Ft)K
zRT5vJ){$$)Vo?>0AsUT(1A)K;$nKM~P0n>U<PfP60(%NJo6YrVwc4|z|3D&<2qSh_
zn~*(`&!Zp9vfdz$AW5G_A~YI}-|YECWlw{_U|F`QD-m1i_xsl-Nz&=`9F5<L#bRe%
z*D<K%C8EOGl5Nts2y(w%E`O8bZ*)2x5rjP+&z$2K2dyYl)n(}>$`X$EcEp7$p$`kh
z=4DIDmfucr!2ur;0d5sCAqkP#a6%5K<O9C%sA{ONBfHz}{&Z~{xm>O;Nn0#cw2OX0
zju8l4;ed0f%Z_JeS+>vTTXbz3?(3<tx)=G0m62lvcXAI&)V0)$1DgB8iJpL1gjl;!
zDD11Eclaz`$8OpL^l3Exe*ckUo<PHiPyyQS3?w8k5G$}><Ya9=6;!)L5gY7TRJEp@
z-2ILuf$X%InFJ&^$h`;2!_k#(qHH$XW}ech3tq4HYdjvmD*q((DM3<(<T<9-G|dAi
z;$CfpOeQniYPBA5(gtRmr5Dx5yTH;5otI5~6S64!ZS<R(@-d<jbTT6lAz5Rg|0KO)
x16j-G^Kb1WKy{Dt>EQLLME?WG?iz-1>kr{36AF^i4p;yH002ovPDHLkV1m>fJ|O@A

literal 0
HcmV?d00001

diff --git a/business-css/frontend/src/assets/x6/material.png b/business-css/frontend/src/assets/x6/material.png
new file mode 100644
index 0000000000000000000000000000000000000000..143f81763f33db2f8ff4c0ed2fa3ed9c6842098d
GIT binary patch
literal 738
zcmV<80v-K{P)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0(VJ7K~y+TrIk%+
z6JZdBvzt(&2lL~lo}?lk)q+2G&>)HkM)P;@81+&qMf4zAD0mU-LGT9=J%|PoESO{y
zf;Yi<DhdWY*h@h@iiafPp_pXj^KP>tDKSm)h2fj|X6D^*=9}F$JVTI9r-QXx?K$dk
z*@j`fs8*{p<#KsN_8<%-6j8lie~NkrG289-S5`lS+gNR+7zhN;XEK=@dLQ}-lgZ@v
zR;!gE@i3-|EH|6Yi=|TOjr_4#>@3TjVZ;t$57Cj%ULVm~bcpAPpJ27A;I-H5oyp~L
z-;G2fG0nyU9P1LTMKl^c=JWX;q3%R%(=<=3KesU)GUU{#WP)NTc|RPVF-@vmFyire
z8{-c$rXWz^_~)|Otb+cDR4TO_g2$)_5cT^9Etqo%L7AgpBH$U0Nkpg+FqO~eKXhyd
z>L2?zQB|g}OsQAtpCzM9$h@5l27@t(mpV^AD8CZ$&#~@BrXkzHsvCY!B~xxCkx0ZJ
z4u>!3s17h@34Y0?EJE;>r%vcWxOQkCxsGhYw&>ed%d!sjwj~q_S;XJ#5>na?Hm;yH
zl*}oY)CMKX&)yeE#*oCIfhO0lwM!@z3Wd8!0Ou_Tel;46U2d{%+drM4b<juX0@7Jd
zGF~heUv;)d#z4aVfe3$7-agIM>ej}gR~L>ws4FJQHI&U<!Y4-P<3@-Ts~r0K4KpAv
zliPjBJZZ)%$mA%*E|Fp}mAfboaXDWb7YZauZ;OKDb6!IwY9={>2K+vvw~4LxJN#*V
zWw0Ie5xP)MDB}t0QN+18l3NgZQJwD~gMYb~$i+ZH7w#_rq7#_<fGiCE1$aDv0hZ-M
Up8cO?asU7T07*qoM6N<$f?7*M=Kufz

literal 0
HcmV?d00001

diff --git a/business-css/frontend/src/assets/x6/redo.png b/business-css/frontend/src/assets/x6/redo.png
new file mode 100644
index 0000000000000000000000000000000000000000..efda01e3ee1288beed01e72391d9a2a15841c17e
GIT binary patch
literal 560
zcmV-00?+-4P)<h;3K|Lk000e1NJLTq000sI000jN1^@s6>4u*Y00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0mVr~K~y+Tm6AP6
zLSYogy;l)8uXm}@A#`nMXh_T{qEd&1f<TG_p@xEl8u|nU1rgGeP6mc=Ek%QigG2PP
zRMONp5NZ$+?RV^ISQh$+!+HNd=NulhsZRuh!KBOOQp)A>lM(8IYUqBjpsH#T!ieE_
zVGtrg7KsG{fz2=X8v_wFo6VC(qY+XRW&bCcV(4E8hr_l?r815=NuyUZ;>l*SMZe!a
zFKa>^&E;}OQs48~++ns_tzKiUK%&!dhaICSFL^mQhku6b)a`b^<CnT7VqA^JL(C=Q
z$ZogqB@&5hE7=3>$uPG%L|(7g;&3=_Foz*q&SWyBugu?&9!=8<n3c}4A=yDW>-D;)
z9}<DC>&HAgVm6zjt%<nF1nQDo__)IZD~?K-v4@D+qz3(AwOV&msnmz~^vDV1Z~4;c
z^h<l9GbB#XMnQpB?vW{)HA$l1@Hc9;+L-u4LTnW?BqS13c-=|SD{??`n^=**63yrH
zw^Gms&7_+?>SoXp^t5~hBW<!E@;@v>f~>Jxyp`zzn%7aX@*H>UkO)+g^4aQ4vG^Z}
yfuPhua%K1(s7&#QgjnUmi2a3gA?aObGJOKTD8{lT+b{?K0000<MNUMnLSTYNbo$W%

literal 0
HcmV?d00001

diff --git a/business-css/frontend/src/assets/x6/reduce.png b/business-css/frontend/src/assets/x6/reduce.png
new file mode 100644
index 0000000000000000000000000000000000000000..ddf1681a122161021fae9bbe53e1806810c9af1a
GIT binary patch
literal 675
zcmV;U0$lxxP)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0ys%TK~y+Tm6Sbb
z6JZ#~bC*l#;E+LZai}2Vgn%7{W)PxVhma5G4Gxk;k%EE+2SKG4R~IJ-7s0_oG~Yu<
zgMt+bMyQy8prD{bhY&hQKK=bKmqM-)(?2}-eBS?k-uHd(jKB<JGMVIPG+M@7G7Q5;
zw~+?&so(E!)oQhU>?uqUWwY7S!{P8LFR$S4q8ku?MowYJ&==4P)T~u1l~?1p#yBK`
zWQD?)m`(Irxm;EUQ%EEdRwNR+57|9xwy3%4rN%_+gv3WB+wJyxy<YFT*?%CNPA{R}
zBAbvsRxGH8ZQHL=e;{%GM<TRZt>3)!i_V@zqtU8-Q(Gc;X)qXEnTKQoI(d$&A&=yn
z99$f|SFKjRDsUWd6lJ=)DBHqVCh*S9cyJu&M7P^L>A8mphr|2%eEz_51HoW$hejgo
zDrQ0wgRJG{TtM=k*f+oQdc7ZBiHky^(3Iv_Y?Fdr?DGmtK;kkBobgL26guaXxbSXI
zoi#1=2PCJ!1m5HxnO;9=BF+K_rBZ269larD^I5ouHZL@sC^ew>17@*U+(GLqU(jkq
z!Fj-hZ=kfbTk=gk*t_e{T|Svi9=R<)SnwLPciGkh=IOg)E|IR3YjiLdEzA0nN~Km6
z_d}l&BvnYB;aa9?{v2m~Uw<x_Tj+E;8?1B(SM#D9)yKPtXd7qcli!3afqfJEx~6>Q
z|41t{0&$8p7WyaY23zO`XS(ec0lIrgObf5iBsvZtyKNZ8jlV1?2t(;E_)q`<002ov
JPDHLkV1oZNDz^Xt

literal 0
HcmV?d00001

diff --git a/business-css/frontend/src/assets/x6/return.png b/business-css/frontend/src/assets/x6/return.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba35be41045ddb8f44c97f23c42610ad3fd1ffe6
GIT binary patch
literal 379
zcmeAS@N?(olHy`uVBq!ia0vp^oIuRS!3HG%PBB{nq!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>a~60+76UaL24TkI`72U@8U#FD978mMlT!{b{`vctSwd3sIrGfDJ_3p%
z3?UO3LN-X9_;cXMku7Y_fesE1tXEo$*Q{AH?e(>_yBW8iyLWG%tA|I%r~m)|8#mlB
zbztpW9lrh_(<EkXE?(ZJKfk`dUbKMI&f#4Pue6y+(~-mm!Bq*?0gb#9;<-aEFimt~
zSayGZy*!&HL)7FBUq+4wnL74EDF$pixlg$<o_X}>(d(T%b{uJVqvPl2XB!)PckT6c
zvA<a-wlVB@-;j8jVaqnT6D*Z?#b0a|7m!qORbU92!4zU4d!mMk$HhNDqVb5~B32Pu
zhb+T@kNgU<9AC}|@&Fa_lm-;6VgEIQIU`BK*hND0&W^&z6Q@nPmZlK=9_Wwxj1zB#
W$GqBgXbUjF7(8A5T-G@yGywpr0FWpE

literal 0
HcmV?d00001

diff --git a/business-css/frontend/src/assets/x6/revoke.png b/business-css/frontend/src/assets/x6/revoke.png
new file mode 100644
index 0000000000000000000000000000000000000000..875c11993121d779da72e69a28e910213faa3ef5
GIT binary patch
literal 536
zcmV+z0_XjSP)<h;3K|Lk000e1NJLTq000sI000jN1^@s6>4u*Y00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0j)_yK~y+Tjgvh{
z0%07+y)(rjP@%!7p`oFnp`f8bINA#GlN_2_YOA54p(z@o!J&rS8j^+r!4GN(66{DQ
zXsE%Vu_b786&0`F>%Cg)9s0n_^Z$6>=e_&CcMdy*!{LocByuOyp-?6FK$xhidZQ@H
zx-1RFfKkVUFmF~yLyu9%#4wBlR!Wvff+D%cq);fFlP{6K(R!k$3-<YZujzEU*51&E
zwo$)Hy8{?@lsRdH3vxNo?4!97@qZ|GCRT_>qq|TNZPD#^?_@HWAG5=ZIB^U9qH$@K
z?2*ssFF16OJ%M_?{+LK4#%0T)3TL?4Xf&=hO&c@I_Q+<lpDvec1+yA^&Scq~5zYaM
zCBjOzTHVxjy(vune*Y=8384W^Ug;ZyB2QM1#bVRs@8o;AT<*4eYyD>2P!LfG@i9CF
zd+5y&FT)?LR_l;>o^|B)dMCR^0-;c7*6DOU6PDSS5=NYErAZQsuU=fvHriN^NFW}M
z&vDud%?d`rexnX}wN-Q(G#<1k1HXtECKO_|zZ*L+mj_JNFsZ?s<xeYyDMk0PWQjkW
aq5lGKM9SPfK+He@0000<MNUMnLSTZWn(LVW

literal 0
HcmV?d00001

diff --git a/business-css/frontend/src/assets/x6/save.png b/business-css/frontend/src/assets/x6/save.png
new file mode 100644
index 0000000000000000000000000000000000000000..40a3bc1ec50318e2132d181712746e2562eb9e0c
GIT binary patch
literal 396
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCij$3p^r=85sBugD~Uq{1quc4T_#Fjv*HQ$vnKgQ-A#ZU2e(D?93#<&0uKw
zfL%cU=kM?N>d6ic4)zlkA3Slw;^Y7S{~tPRW1OJJveJp&!Bn9;?hjCjrm%3Z(S)-H
zSyY4^W?f$&zn^)<N5u*M6CWSzWlxyV+xwO+U>^GswoJB_H@9S7mRrEs>#&di1OwxO
zP6hQu*8O#VKQROy6_8_Mn9G0ZFq093KEtjA_6e_AKNv7_Phn$T5bU^&>&Nfk)($QQ
z^cVu;7bFQe@O)B}S+IlQ#Truusf-IXIT9L68NOJba4lfyVolibr@Vzt=pw@lCDsKC
zzjL-RDjH-l9BGh05aHm-e}p0773*t8*T;1Ve;FnAPrdNOQ=q}b*w{Fod8Sp*f*&kd
ndhENHrabdxRG%?ph7{x7W2FXjru8fah9HBdtDnm{r-UW|2bquX

literal 0
HcmV?d00001

diff --git a/business-css/frontend/src/components/antvg6/GraphCanvas.vue b/business-css/frontend/src/components/antvg6/GraphCanvas.vue
new file mode 100644
index 0000000..200c4b9
--- /dev/null
+++ b/business-css/frontend/src/components/antvg6/GraphCanvas.vue
@@ -0,0 +1,244 @@
+<!-- components/GraphCanvas.vue -->
+<script setup lang="ts">
+import { onMounted, ref, onBeforeUnmount } from 'vue';
+import { Graph, registerNode, Brush } from '@antv/g6';
+import { NodeItem, NodeType } from '@/types/graph';
+ 
+// 定义图形映射名称
+const NODE_LABEL_MAP: Record<NodeType, string> = {
+  cylinder_slot: '圆柱槽',
+  flat_slot: '扁平槽',
+  ring_slot: '环形槽',
+  tube_slot: '管形槽',
+  bar_stock: '棒料',
+  tapered_head: '锥形头',
+  monk_ring_slot: '僧帽环形槽',
+};
+ 
+// 自定义 G6 节点：根据 type 渲染不同形状和颜色
+const registerCustomNode = () => {
+  registerNode(
+    'custom-mechanical-node',
+    {
+      draw: (cfg, group) => {
+        const type = cfg?.type as NodeType;
+        let shape, color;
+ 
+        // 根据类型设置外观
+        switch (type) {
+          case 'cylinder_slot':
+            shape = group!.addShape('ellipse', {
+              attrs: {
+                x: 0,
+                y: 0,
+                rx: 40,
+                ry: 20,
+                fill: '#ffeaa7',
+                stroke: '#fab1a0',
+                lineWidth: 1.5,
+              },
+            });
+            break;
+          case 'flat_slot':
+            shape = group!.addShape('rect', {
+              attrs: {
+                x: -50,
+                y: -15,
+                width: 100,
+                height: 30,
+                fill: '#fdcb6e',
+                stroke: '#e17055',
+                radius: 4,
+                lineWidth: 1.5,
+              },
+            });
+            break;
+          case 'ring_slot':
+            shape = group!.addShape('circle', {
+              attrs: {
+                x: 0,
+                y: 0,
+                r: 30,
+                fill: '#a29bfe',
+                stroke: '#6c5ce7',
+                lineWidth: 2,
+                shadowBlur: 4,
+                shadowColor: 'rgba(108, 92, 231, 0.3)',
+              },
+            });
+            break;
+          case 'tube_slot':
+            shape = group!.addShape('path', {
+              attrs: {
+                path:
+                  'M -40 -20 L 40 -20 C 50 -20 50 20 40 20 L -40 20 C -50 20 -50 -20 -40 -20 Z M -30 -10 L 30 -10 L 30 10 L -30 10 Z',
+                fill: '#7bed9f',
+                stroke: '#00b894',
+                lineWidth: 1,
+              },
+            });
+            break;
+          case 'bar_stock':
+            shape = group!.addShape('rect', {
+              attrs: {
+                x: -45,
+                y: -10,
+                width: 90,
+                height: 20,
+                fill: '#fab1a0',
+                stroke: '#d63031',
+                lineWidth: 1.2,
+              },
+            });
+            break;
+          case 'tapered_head':
+            shape = group!.addShape('path', {
+              attrs: {
+                path: 'M -40 20 L 0 -25 L 40 20 L 20 20 L 0 -5 L -20 20 Z',
+                fill: '#fd79a8',
+                stroke: '#e84393',
+                lineWidth: 1.5,
+              },
+            });
+            break;
+          case 'monk_ring_slot':
+            shape = group!.addShape('path', {
+              attrs: {
+                path:
+                  'M -35 20 C -35 10, -25 -25, 0 -25 C 25 -25, 35 10, 35 20 C 35 20, 25 -10, 0 -10 C -25 -10, -35 20, -35 20 Z',
+                fill: '#6c5ce7',
+                stroke: '#55efc4',
+                lineWidth: 2,
+              },
+            });
+            break;
+          default:
+            shape = group!.addShape('circle', {
+              attrs: {
+                x: 0,
+                y: 0,
+                r: 20,
+                fill: '#ccc',
+                stroke: '#999',
+              },
+            });
+        }
+ 
+        // 添加文字标签
+        group!.addShape('text', {
+          attrs: {
+            text: NODE_LABEL_MAP[type] || '未知',
+            x: 0,
+            y: 40,
+            fontSize: 12,
+            textAlign: 'center',
+            textBaseline: 'middle',
+            fill: '#555',
+          },
+        });
+ 
+        return shape!;
+      },
+    },
+    'single-shape'
+  );
+};
+ 
+let graph: Graph | null = null;
+const container = ref<HTMLDivElement>();
+ 
+onMounted(() => {
+  if (!container.value) return;
+ 
+  // 注册自定义节点
+  registerCustomNode();
+ 
+  // 初始化 G6 图实例
+  graph = new Graph({
+    container: container.value!,
+    width: container.value.offsetWidth,
+    height: container.value.offsetHeight,
+    fitView: true,
+    fitViewPadding: 40,
+ 
+    // 默认节点配置
+    defaultNode: {
+      shape: 'custom-mechanical-node',
+      size: [80, 40],
+    },
+ 
+    // 交互模式
+    modes: {
+      default: [
+        'drag-canvas',   // 拖动画布
+        'zoom-canvas',   // 缩放 
+        'drag-node',     // 拖动节点
+      ],
+    },
+ 
+    // 启用 Brush 插件实现框选
+    plugins: [
+      new Brush({
+        brushType: 'rect', // 矩形框选
+        onSelect: (items) => {
+          console.log('Selected items:', items.map((i) => i.getModel()));
+        },
+        onDeselect: () => {
+          console.log('Deselected all');
+        },
+      })
+        brushType: 'rect', // 矩形框选
+        onSelect: (items) => {
+          console.log('Selected items:', items.map((i) => i.getModel()));
+        },
+        onDeselect: () => {
+          console.log('Deselected all');
+        },
+      }),
+    ],
+  });
+ 
+  // 初始空图
+  graph.data({ nodes: [], edges: [] });
+  graph.render();
+});
+ 
+onBeforeUnmount(() => {
+  if (graph) {
+    graph.destroy();
+    graph = null;
+  }
+});
+ 
+// 接收拖入事件
+defineExpose({
+  addNodeAtPosition(type: NodeType, x: number, y: number) {
+    if (!graph) return;
+ 
+    const modelId = `${type}_${Date.now()}`;
+    const nodeModel = {
+      id: modelId,
+      shape: 'custom-mechanical-node',
+      x,
+      y,
+      type: type,
+    };
+ 
+    graph.addItem('node', nodeModel);
+  },
+});
+</script>
+ 
+<template>
+  <div class="graph-container" ref="container"></div>
+</template>
+ 
+<style scoped>
+.graph-container {
+  flex: 1;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #f0f2f5;
+  position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/business-css/frontend/src/components/antvg6/LeftPanel.vue b/business-css/frontend/src/components/antvg6/LeftPanel.vue
new file mode 100644
index 0000000..ea26b44
--- /dev/null
+++ b/business-css/frontend/src/components/antvg6/LeftPanel.vue
@@ -0,0 +1,101 @@
+<!-- components/LeftPanel.vue -->
+<script setup lang="ts">
+import { ref } from 'vue';
+import { NodeItem, NodeType } from '@/types/graph';
+ 
+const emit = defineEmits<{
+  (e: 'drag-start', nodeType: NodeType): void;
+  (e: 'drag-end'): void;
+}>();
+ 
+const nodes: NodeItem[] = [
+  { type: 'cylinder_slot', label: '圆柱槽' },
+  { type: 'flat_slot', label: '扁平槽' },
+  { type: 'ring_slot', label: '环形槽' },
+  { type: 'tube_slot', label: '管形槽' },
+  { type: 'bar_stock', label: '棒料' },
+  { type: 'tapered_head', label: '锥形头' },
+  { type: 'monk_ring_slot', label: '僧帽环形槽' },
+];
+ 
+const handleDragStart = (e: DragEvent, type: NodeType) => {
+  if (!e.dataTransfer) return;
+  e.dataTransfer.setData('text/plain', type);
+  emit('drag-start', type);
+};
+</script>
+ 
+<template>
+  <div class="left-panel">
+    <h3 class="panel-title">图形元件库</h3>
+    <div class="node-list">
+      <div
+        v-for="node in nodes"
+        :key="node.type"
+        class="node-item"
+        draggable 
+        @dragstart="handleDragStart($event, node.type)"
+      >
+        <span class="icon">⚙️</span>
+        <span class="label">{{ node.label }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+ 
+<style scoped>
+.left-panel {
+  width: 200px;
+  height: 100vh;
+  background-color: #f7f9fc;
+  border-right: 1px solid #ddd;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+ 
+.panel-title {
+  padding: 16px;
+  font-size: 18px;
+  color: #1a1a1a;
+  border-bottom: 1px solid #eee;
+  margin: 0;
+  background-color: #ffffff;
+}
+ 
+.node-list {
+  padding: 8px;
+  flex: 1;
+}
+ 
+.node-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  margin-bottom: 6px;
+  background-color: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  cursor: grab;
+  user-select: none;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+ 
+.node-item:hover {
+  background-color: #e6f7ff;
+  border-color: #91d5ff;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+ 
+.icon {
+  font-size: 16px;
+}
+ 
+.label {
+  font-size: 14px;
+  color: #333;
+}
+</style>
\ No newline at end of file
diff --git a/business-css/frontend/src/components/antvg6/index.vue b/business-css/frontend/src/components/antvg6/index.vue
new file mode 100644
index 0000000..19c6fb6
--- /dev/null
+++ b/business-css/frontend/src/components/antvg6/index.vue
@@ -0,0 +1,414 @@
+<!-- AntV G6 Graph Component -->
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Graph,NodeEvent  } from '@antv/g6';
+
+const container = ref<HTMLElement | null>(null);
+let graph: Graph | null = null;
+// Device types data
+const deviceTypes = [
+  { id: 'device1', name: '圆柱槽', icon: '🟢',
+    img: 'http://localhost:3000/dev-api/avatar/1.png'
+   },
+  { id: 'device2', name: '扁平槽', icon: '🔵',
+    img: 'http://localhost:3000/dev-api/avatar/2.png'
+   },
+  { id: 'device3', name: '环形槽', icon: '🟢',
+    img: 'http://localhost:3000/dev-api/avatar/3.png'
+   }, 
+  { id: 'device4', name: '管束槽', icon: '🟢',
+    img: 'http://localhost:3000/dev-api/avatar/4.png'
+   }, 
+  { id: 'device5', name: '萃取柱', icon: '🟦',
+    img: 'http://localhost:3000/dev-api/avatar/5.png'
+   },
+  { id: 'device6', name: '流化床', icon: '🟦',
+    img: 'http://localhost:3000/dev-api/avatar/6.png'
+   },
+  { id: 'device7', name: '锥底环形槽', icon: '🟦',
+    img: 'http://localhost:3000/dev-api/avatar/7.png'
+   },
+];
+const data = {
+  nodes: [
+  ],
+  edges: [
+  ],
+};
+
+// Drag and drop functions
+const handleDragStart = (event: DragEvent, device: any) => {
+  if (event.dataTransfer) {
+    event.dataTransfer.setData('application/json', JSON.stringify(device));
+    event.dataTransfer.effectAllowed = 'copy';
+  }
+};
+
+const handleDragOver = (event: DragEvent) => {
+  event.preventDefault();
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'copy';
+  }
+};
+
+const handleDrop = (event: DragEvent) => {
+  event.preventDefault();
+  if (!graph || !event.dataTransfer || !container.value) return;
+  
+  let newNode = null;
+  
+  try {
+    const deviceData = JSON.parse(event.dataTransfer.getData('application/json'));
+    let imgUrl = deviceData.img;
+ 
+    // Calculate coordinates relative to graph container
+    const rect = container.value.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    // const point = graph.getPointByClient(event.clientX, event.clientY);
+    // const x = point.x;
+    // const y = point.y;
+     const nodeId = 'node1-' + Date.now();
+    graph.addNodeData([
+      {
+        type: 'image',
+        id: nodeId,
+        img: imgUrl, // 图片地址
+         data: { label: '自定义图片1', status: 'online' },
+          style: {
+            x: x,
+            y: y,
+            size: 60,
+            src: imgUrl, // 图片地址
+            labelText: '111111111111',
+          },
+        },
+    ]);
+    graph.draw();
+  } catch (error) {
+    console.error('Error handling drop:', error);
+    console.error('Graph instance:', graph);
+    if (newNode) {
+      console.error('New node:', JSON.stringify(newNode, null, 2));
+    }
+  }
+};
+const dragelement = ref('');
+function setDragElement(type: string) {
+  dragelement.value = type;
+}
+const dragLineData = ref([{
+    stroke: '#333',
+    lineWidth: 2,
+    endArrow: false,
+    endArrowType: '',
+    endArrowSize: 10,
+  },{
+    stroke: '#333',
+    lineWidth: 2,
+    endArrow: true,
+    endArrowType: 'vee',
+    endArrowSize: 10,
+  },{
+    startArrow: true,
+    startArrowType: 'vee',
+    startArrowSize: 10,
+    endArrow: true,
+    endArrowType: 'vee',
+    endArrowSize: 10,
+    stroke: '#333',
+    lineWidth: 2
+  },{
+      stroke: '#333',
+      lineWidth: 2,
+      lineDash: [5, 5],
+  },{
+    stroke: '#333',
+    lineWidth: 2,
+    lineDash: [5, 5],
+    endArrow: true,
+    endArrowType: 'vee',
+    endArrowSize: 10,
+  },{
+    startArrow: true,
+    startArrowType: 'vee',
+    startArrowSize: 10,
+    lineDash: [5, 5],
+    endArrow: true,
+    endArrowType: 'vee',
+    endArrowSize: 10,
+    stroke: '#333',
+    lineWidth: 2
+  }]);
+const dragLine:any = ref({
+stroke: '#333',
+lineWidth: 2,
+lineDash: [5, 5],
+});
+const dragLineType = ref('实线');
+function setDragLineStyle(index: any, type: string) {
+  dragLine.value = dragLineData.value[index];
+  dragLineType.value = type;
+  //  graph.updateBehavior({
+  //   key: 'create-edge',
+  //   style: (edgeData:any) => {
+  //   debugger
+  //       return {
+  //         ...dragLine.value
+  //       };
+     
+  //   }
+  // });
+}
+onMounted(() => {
+  if (container.value) {
+    // Create G6 graph instance with data in constructor - G6 v4 compatible
+    graph = new Graph({
+      container: container.value,
+      width: container.value.offsetWidth,
+      height: container.value.offsetHeight,
+      node: {
+        type: 'image',
+        style: {
+          size: 80,
+          labelText: (d) => '',
+          src: (d: any) => d.img
+        },
+      },
+      edge: {
+        type: 'line',
+         style: (datum) => {
+      // 正确的动态样式配置方式
+          return dragLine.value
+        },
+        // style: {
+        //   lineDash: function (datum) {
+        //     if (dragLineType.value === '虚线' || dragLineType.value === '单箭头虚线' || dragLineType.value === '双箭头虚线') {
+        //       return [5, 5];
+        //     }
+        //     return [];
+        //   },
+        // }
+      },
+      behaviors: [
+        // 'drag-canvas',     // 允许拖拽画布
+        // 'zoom-canvas',     // 允许缩放画布
+        {
+          type: 'drag-element',
+          enable: (event:any) => {
+            // 只有当拖拽目标是节点且其id不为'fixedNode'时才允许拖拽
+            return dragelement.value === 'drag-element' ;
+          },
+        },    // 允许拖拽节点
+        {
+          type: 'create-edge',
+          trigger: 'drag',
+          enable: (event:any) => {
+            // 动态判断是否允许创建边
+            // 例如：只有按住 Shift 键时才允许连线
+            return dragelement.value === '' ;
+          },
+          // style:  dragLine.value,
+          style: (edgeData:any) => {
+            debugger
+        // 动态设置虚线还是实线
+        const baseStyle = dragLine.value;
+        if (edgeData.data && edgeData.data.isDashed) {
+          return {
+            ...baseStyle,
+            lineDash: [5, 5], // 虚线
+          };
+        } else {
+          return {
+            ...baseStyle,
+            lineDash: [], // 实线
+          };
+        }
+      },
+        },
+      ],
+      
+      data: data // Pass data directly in constructor
+    });
+
+    graph.on(NodeEvent.CLICK, (evt) => {
+      debugger
+        const { target } = evt;
+        const nodeId = target.id;
+        
+        // 在控制台输出点击的节点信息
+        console.log(`节点 ${nodeId} 被点击了`);
+        
+        // 获取节点数据
+        const nodeData = graph.getNodeData(nodeId);
+        console.log('节点数据:', nodeData);
+        
+        // 设置节点选中状态
+        graph.setElementState(nodeId, 'selected', true);
+      });
+    // Just render, no need for separate data() call
+  }
+});
+
+</script>
+ 
+<template>
+  <div class="app-layout">
+    <!-- Left Sidebar -->
+    <div class="sidebar">
+      <div class="sidebar-section">
+        <h3>设备</h3>
+        <div 
+          v-for="device in deviceTypes" 
+          :key="device.id"
+          class="device-item"
+          draggable="true"
+          @dragstart="handleDragStart($event, device)"
+        >
+          <div class="device-icon">
+            <img :src="device.img" alt="设备图标" style="width: 40px; height: 40px;">
+          </div>
+          <div class="device-name">{{ device.name }}</div>
+        </div>
+      </div>
+      
+      <div class="sidebar-section">
+        <h3>链接</h3>
+       
+         <div class="device-item" @click="setDragElement('drag-element')">
+            <div class="device-icon">↔️</div>
+            <div class="device-name">移动</div>
+          </div>
+        <div class="device-item" @click="setDragElement('')">
+          <div class="device-icon">↔️</div>
+          <div class="device-name">不移动</div>
+        </div>
+        <div class="device-item" @click="setDragLineStyle(0,'实线')">
+          <div class="device-icon">↔️</div>
+          <div class="device-name">实线</div>
+        </div>
+        <div class="device-item"  @click="setDragLineStyle(1,'单箭头实线')">
+          <div class="device-icon">↔️</div>
+          <div class="device-name">单箭头实线</div>
+        </div>
+        <div class="device-item" @click="setDragLineStyle(2,'双箭头实线')">
+          <div class="device-icon">⇄</div>
+          <div class="device-name">双箭头实线</div>
+        </div>
+        <div class="device-item" @click="setDragLineStyle(3,'虚线')">
+          <div class="device-icon">↔️</div>
+          <div class="device-name">虚线</div>
+        </div>
+         <div class="device-item"  @click="setDragLineStyle(4,'单箭头虚线')">
+          <div class="device-icon">↔️</div>
+          <div class="device-name">单箭头虚线</div>
+        </div>
+        <div class="device-item" @click="setDragLineStyle(5,'双箭头虚线')">
+          <div class="device-icon">⇄</div>
+          <div class="device-name">双箭头虚线</div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Graph Container -->
+    <div 
+      class="graph-container" 
+      ref="container"
+      @dragover="handleDragOver"
+      @drop="handleDrop"
+    ></div>
+  </div>
+</template>
+ 
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+ 
+.app-layout {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  font-family: 'Segoe UI', sans-serif;
+}
+ 
+/* Sidebar Styles */
+.sidebar {
+  width: 200px;
+  background-color: #ffffff;
+  border-right: 1px solid #e0e0e0;
+  overflow-y: auto;
+  padding: 16px;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+}
+ 
+.sidebar-section {
+  margin-bottom: 24px;
+}
+ 
+.sidebar-section h3 {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+ 
+.device-item {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  margin-bottom: 8px;
+  background-color: #fafafa;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  cursor: grab;
+  transition: all 0.2s ease;
+}
+ 
+.device-item:hover {
+  background-color: #f0f5ff;
+  border-color: #1890ff;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
+}
+ 
+.device-item:active {
+  cursor: grabbing;
+}
+ 
+.device-icon {
+  font-size: 24px;
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+ 
+.device-name {
+  font-size: 13px;
+  color: #333;
+  font-weight: 500;
+}
+ 
+/* Graph Container Styles */
+.graph-container {
+  flex: 1;
+  position: relative;
+  background-color: #fafafa;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+ 
+/* Drag and drop visual feedback */
+.graph-container.drag-over {
+  background-color: #e6f7ff;
+  border: 2px dashed #1890ff;
+}
+</style>
\ No newline at end of file
diff --git a/business-css/frontend/src/components/antvx6/index.vue b/business-css/frontend/src/components/antvx6/index.vue
new file mode 100644
index 0000000..9196d6e
--- /dev/null
+++ b/business-css/frontend/src/components/antvx6/index.vue
@@ -0,0 +1,1086 @@
+<!-- AntV G6 Graph Component -->
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import {  ElMessage } from "element-plus";
+import {
+  Clipboard,
+  Graph,
+  History,
+  Keyboard,
+  Selection,
+  Shape,
+  Snapline,
+  Stencil,
+  Transform
+} from '@antv/x6'
+// @ts-ignore
+import insertCss from 'insert-css'
+import { updateProjects} from "@/api/business/project";
+
+const emit = defineEmits([ 'closeAntvx6']);
+const props = defineProps({
+  projectInfo: {
+    required: false,
+    type: Object,
+    default: {}
+  },
+})
+const projectInfo:any = ref(props.projectInfo)
+const isDisplay = ref(true) // 是否显示
+// 为了协助代码演示
+let graph: Graph
+let currentArrowStyle = 'single' // 默认单箭头
+let currentLineStyle = 'solid' // 默认实线
+
+// 设置箭头样式
+// function setArrowStyle(style: 'single' | 'double' | 'none', lineStyle: 'solid' | 'dashed' = 'solid') {
+//   currentArrowStyle = style
+//   currentLineStyle = lineStyle
+//   // 重新配置连接线
+//   graph.options.connecting.createEdge = () => {
+//     const edge = new Shape.Edge({
+//       attrs: {
+//         line: {
+//           stroke: '#A2B1C3',
+//           strokeWidth: 2,
+//           strokeDasharray: lineStyle === 'dashed' ? 5 : 0,
+//           targetMarker: style === 'none' ? null : {
+//             name: 'block',
+//             width: 12,
+//             height: 8,
+//           },
+//           sourceMarker: style === 'double' ? {
+//             name: 'block',
+//             width: 12,
+//             height: 8,
+//           } : null,
+//         },
+//       },
+//       zIndex: 0,
+//     })
+//     return edge
+//   }
+// }
+
+onMounted(() => {
+  preWork()
+  // #region 初始化画布 
+  graph = new Graph({
+    container: document.getElementById('graph-container') as HTMLElement,
+    grid: true,
+    mousewheel: {
+      enabled: true,
+      zoomAtMousePosition: true,
+      modifiers: 'ctrl',
+      minScale: 0.5,
+      maxScale: 3,
+    },
+    connecting: {
+      router: 'manhattan',
+      connector: {
+        name: 'rounded',
+        args: {
+          radius: 8,
+        },
+      },
+      anchor: 'center',
+      connectionPoint: 'anchor',
+      allowBlank: false,
+      snap: {
+        radius: 20,
+      },
+      createEdge() {
+        return new Shape.Edge({
+          attrs: {
+            line: {
+              stroke: '#A2B1C3',
+              strokeWidth: 2,
+              strokeDasharray: 0,
+              targetMarker: {
+                name: 'block',
+                width: 12,
+                height: 8,
+              },
+              sourceMarker: null,
+            },
+          },
+          zIndex: 0,
+        })
+      },
+      validateConnection({ targetMagnet }) {
+        return !!targetMagnet
+      },
+    },
+    highlighting: {
+      magnetAdsorbed: {
+        name: 'stroke',
+        args: {
+          attrs: {
+            fill: '#5F95FF',
+            stroke: '#5F95FF',
+          },
+        },
+      },
+    },
+  })
+  // #endregion
+
+  // #region 使用插件
+  graph
+    .use(
+      new Transform({
+        resizing: false, // 通过拖拽边缘调整节点大小
+        rotating: true, // 允许旋转节点
+        // scaling 不是 Transform 插件的有效配置项，已移除
+      }),
+    )
+    .use(
+      new Selection({
+        rubberband: true,
+        showNodeSelectionBox: true,
+      }),
+    )
+    .use(new Snapline())
+    .use(new Keyboard())
+    .use(new Clipboard())
+    .use(new History())
+  // #endregion
+
+  // #region 初始化 stencil
+  const stencil = new Stencil({
+    title: '',
+    target: graph,
+    stencilGraphWidth: 300,
+    stencilGraphHeight: 180,
+    stencilGraphOptions: { panning: false },
+    collapsable: false,
+    groups: [
+    //    {
+    //   title: '基础流程图',
+    //   name: 'group1',
+    // },
+      {
+        collapsable: false,
+        title: '设备',
+        name: 'group2',
+        graphHeight: 550,
+        layoutOptions: {
+          rowHeight: 120,
+        },
+      },
+      {
+        collapsable: false,
+        title: '管线',
+        name: 'group3',
+        graphHeight: 400,
+        layoutOptions: {
+          rowHeight: 80,
+        },
+      },
+    ],
+    layoutOptions: {
+      columns: 2,
+      columnWidth: 140,
+      rowHeight: 100,
+    },
+  })
+graph.on('node:contextmenu', ({ e, node }) => {
+    selectedNode.value = node
+  e.preventDefault()
+  // 显示自定义上下文菜单，包含箭头样式选项
+  const pos = node.position?.() || { x: 0, y: 0 }
+  showContextMenu(pos.x, pos.y)
+})
+function showContextMenu(x: number, y: number) {
+left.value = x + 260
+top.value = y - 50
+
+isMenuShow.value = true
+  // 创建并显示上下文菜单
+  // 包含箭头样式选项
+}
+  // 监听Stencil内部的Dnd事件
+  stencil.on('dnd:start', (args:any) => {
+    console.log('Stencil节点开始拖拽', args)
+  })
+
+  stencil.on('dnd:drag', (args:any) => {
+    console.log('Stencil节点拖拽中', args)
+  })
+
+  stencil.on('dnd:end', (args:any) => {
+    console.log('Stencil节点结束拖拽', args)
+  })
+  document
+    .getElementById('stencil')
+    ?.appendChild(stencil.container as HTMLElement)
+
+    // 监听Graph中节点创建事件
+graph.on('node:added', (args) => {
+  console.log('节点已添加到画布', args)
+  const { node } = args
+  
+  // 检查是否是管线节点
+  if (node.data && node.data.lineStyle) {
+    // 应用管线样式到连接线
+    const lineStyle = node.data.lineStyle
+    graph.options.connecting.createEdge = () => {
+      return new Shape.Edge({
+        attrs: {
+          line: {
+            stroke: '#A2B1C3',
+            strokeWidth: 2,
+            strokeDasharray: lineStyle.strokeDasharray,
+            targetMarker: lineStyle.targetMarker,
+            sourceMarker: lineStyle.sourceMarker
+          }
+        },
+        zIndex: 0
+      })
+    }
+    // 移除管线节点，因为它只是一个样式选择器
+    setTimeout(() => {
+      graph.removeNode(node)
+    }, 100)
+  } else {
+    // 设置固定大小
+    node.size(160, 160)
+    // 去掉背景节点
+    node.attr('body/fill', 'none')
+    // 图片居中
+    node.attr('image/refX', 0)
+    node.attr('image/refY', 0)
+    node.attr('image/width', 160)      // 修改宽度
+    node.attr('image/height', 160)     // 修改高度
+    // 删除节点上的文字
+    node.attr('text/text', '')
+    node.attr('label/text', '')
+  }
+
+})
+  // #endregion
+
+  // #region 快捷键与事件
+  graph.bindKey(['meta+c', 'ctrl+c'], () => { 
+    const cells = graph.getSelectedCells()
+    if (cells.length) {
+      graph.copy(cells)
+    }
+    return false
+  })
+  graph.bindKey(['meta+x', 'ctrl+x'], () => {
+    const cells = graph.getSelectedCells()
+    if (cells.length) {
+      graph.cut(cells)
+    }
+    return false
+  })
+  graph.bindKey(['meta+v', 'ctrl+v'], () => {
+    if (!graph.isClipboardEmpty()) {
+      const cells = graph.paste({ offset: 32 })
+      graph.cleanSelection()
+      graph.select(cells)
+    }
+    return false
+  })
+
+  // undo redo
+  graph.bindKey(['meta+z', 'ctrl+z'], () => {
+    if (graph.canUndo()) {
+      graph.undo()
+    }
+    return false
+  })
+  graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
+    if (graph.canRedo()) {
+      graph.redo()
+    }
+    return false
+  })
+
+  // select all
+  graph.bindKey(['meta+a', 'ctrl+a'], () => {
+    const nodes = graph.getNodes()
+    if (nodes) {
+      graph.select(nodes)
+    }
+  })
+
+  // delete
+  graph.bindKey('backspace', () => {
+    debugger
+    const cells = graph.getSelectedCells()
+    if (cells.length) {
+      graph.removeCells(cells)
+    }
+  })
+
+  // zoom
+  graph.bindKey(['ctrl+1', 'meta+1'], () => {
+    const zoom = graph.zoom()
+    if (zoom < 1.5) {
+      graph.zoom(0.1)
+    }
+  })
+  graph.bindKey(['ctrl+2', 'meta+2'], () => {
+    const zoom = graph.zoom()
+    if (zoom > 0.5) {
+      graph.zoom(-0.1)
+    }
+  })
+
+  // 控制连接桩显示/隐藏
+  const showPorts = (ports: NodeListOf<SVGElement>, show: boolean) => {
+    for (let i = 0, len = ports.length; i < len; i += 1) {
+      ports[i].style.visibility = show ? 'visible' : 'hidden'
+    }
+  }
+  graph.on('node:mouseenter', () => {
+    const container = document.getElementById('graph-container') as HTMLElement
+    const ports = container.querySelectorAll(
+      '.x6-port-body',
+    ) as NodeListOf<SVGElement>
+    showPorts(ports, true)
+  })
+  graph.on('node:mouseleave', () => {
+    const container = document.getElementById('graph-container') as HTMLElement
+    const ports = container.querySelectorAll(
+      '.x6-port-body',
+    ) as NodeListOf<SVGElement>
+    showPorts(ports, false)
+  })
+  // #endregion
+
+  // #region 初始化图形
+  const ports = {
+    groups: {
+      top: {
+        position: 'top',
+        attrs: {
+          circle: {
+            r: 4,
+            magnet: true,
+            stroke: '#5F95FF',
+            strokeWidth: 1,
+            fill: '#fff',
+            style: {
+              visibility: 'hidden',
+            },
+          },
+        },
+      },
+      right: {
+        position: 'right',
+        attrs: {
+          circle: {
+            r: 4,
+            magnet: true,
+            stroke: '#5F95FF',
+            strokeWidth: 1,
+            fill: '#fff',
+            style: {
+              visibility: 'hidden',
+            },
+          },
+        },
+      },
+      bottom: {
+        position: 'bottom',
+        attrs: {
+          circle: {
+            r: 4,
+            magnet: true,
+            stroke: '#5F95FF',
+            strokeWidth: 1,
+            fill: '#fff',
+            style: {
+              visibility: 'hidden',
+            },
+          },
+        },
+      },
+      left: {
+        position: 'left',
+        attrs: {
+          circle: {
+            r: 4,
+            magnet: true,
+            stroke: '#5F95FF',
+            strokeWidth: 1,
+            fill: '#fff',
+            style: {
+              visibility: 'hidden',
+            },
+          },
+        },
+      },
+    },
+    items: [
+      {
+        group: 'top',
+      },
+      {
+        group: 'right',
+      },
+      {
+        group: 'bottom',
+      },
+      {
+        group: 'left',
+      },
+    ],
+  }
+  Graph.registerNode(
+    'custom-image',
+    {
+      inherit: 'rect',
+      width: 130,
+      height: 100,
+      markup: [
+        {
+          tagName: 'rect',
+          selector: 'body',
+        },
+        {
+          tagName: 'image',
+        },
+        {
+          tagName: 'text',
+          selector: 'label',
+        },
+      ],
+      attrs: {
+        body: {
+          stroke: 'transparent',
+          fill: '#f8f8f8',
+        },
+        image: {
+          width: 62,
+          height:84,
+          refX: 35,
+          refY: 0,
+        },
+        label: {
+          refX: 45,
+          refY: 80,
+          textAnchor: 'start',
+          textVerticalAnchor: 'top',
+          fontSize: 14,
+          fill: '#000',
+        },
+      },
+      ports: { ...ports },
+    },
+    true,
+  )
+
+// stencil.load([r1, r2, r3, r4, r5, r6], 'group1')
+
+   const imageShapes = [
+    {
+      label: '圆柱槽',
+      image:
+        'http://localhost:3000/dev-api/avatar/1.png',
+    },
+    {
+      label: '扁平槽',
+      image:
+        'http://localhost:3000/dev-api/avatar/2.png',
+    },
+    {
+      label: '环形槽',
+      image:
+        'http://localhost:3000/dev-api/avatar/3.png',
+    },
+    {
+      label: '管束槽',
+      image:
+        'http://localhost:3000/dev-api/avatar/4.png',
+    },
+    {
+      label: '萃取柱',
+      image:
+        'http://localhost:3000/dev-api/avatar/5.png',
+    },
+    {
+      label: '流化床',
+      image:
+        'http://localhost:3000/dev-api/avatar/6.png',
+    },{
+      label: '锥底环形槽',
+      image:
+        'http://localhost:3000/dev-api/avatar/7.png',
+    },
+  ]
+  const imageNodes = imageShapes.map((item) =>
+    graph.createNode({
+      shape: 'custom-image',
+      label: item.label,
+      attrs: {
+        image: {
+          'xlink:href': item.image,
+        },
+      },
+    }),
+  )
+  stencil.load(imageNodes, 'group2')
+  
+  // 创建管线节点
+  const lineShapes = [
+    {
+      label: '实线',
+      image:
+        'http://localhost:3000/dev-api/avatar/21.png',
+      targetMarker: null,
+      sourceMarker: null,
+      strokeDasharray: 0
+    },
+    {
+      label: '单箭头实线',
+      image:
+        'http://localhost:3000/dev-api/avatar/22.png',
+      targetMarker: {
+        name: 'block',
+        width: 12,
+        height: 8
+      },
+      sourceMarker: null,
+      strokeDasharray: 0
+    },
+    {
+      label: '双箭头实线',
+      image:
+        'http://localhost:3000/dev-api/avatar/23.png',
+      targetMarker: {
+        name: 'block',
+        width: 12,
+        height: 8
+      },
+      sourceMarker: {
+        name: 'block',
+        width: 12,
+        height: 8
+      },
+      strokeDasharray: 0
+    },
+    {
+      label: '虚线',
+      image:
+        'http://localhost:3000/dev-api/avatar/24.png',
+      targetMarker: null,
+      sourceMarker: null,
+      strokeDasharray: 5
+    },
+    {
+      label: '单箭头虚线',
+      image:
+        'http://localhost:3000/dev-api/avatar/25.png',
+      targetMarker: {
+        name: 'block',
+        width: 12,
+        height: 8
+      },
+      sourceMarker: null,
+      strokeDasharray: 5
+    },
+    {
+      label: '双箭头虚线',
+      image:
+        'http://localhost:3000/dev-api/avatar/26.png',
+      targetMarker: {
+        name: 'block',
+        width: 12,
+        height: 8
+      },
+      sourceMarker: {
+        name: 'block',
+        width: 12,
+        height: 8
+      },
+      strokeDasharray: 5
+    }
+  ]
+  
+  const lineNodes = lineShapes.map((item) => {
+    // 创建一个临时的边作为管线节点的视觉表示
+//  shape: 'custom-image',
+//       label: item.label,
+//       attrs: {
+//         image: {
+//           'xlink:href': item.image,
+//         },
+//       },
+    // 创建一个节点来显示管线样式
+    const node = graph.createNode({
+      shape: 'custom-image',
+      label: item.label,
+      width: 120,
+      height: 60,
+      attrs: {
+        image: {
+          'xlink:href': item.image,
+        },
+        body: {
+          stroke: 'transparent',
+          fill: 'transparent'
+        },
+        label: {
+          text: item.label,
+          refX: 60,
+          refY: 50,
+          textAnchor: 'middle',
+          fontSize: 12,
+          fill: '#666'
+        }
+      },
+      data: {
+        lineStyle: {
+          strokeDasharray: item.strokeDasharray,
+          targetMarker: item.targetMarker,
+          sourceMarker: item.sourceMarker
+        }
+      }
+    })
+    
+    return node
+  })
+  
+  stencil.load(lineNodes, 'group3')
+  // #endregion
+})
+
+function preWork() {
+  // 这里协助演示的代码，在实际项目中根据实际情况进行调整
+  const container = document.getElementById('container') as HTMLElement
+  const stencilContainer = document.createElement('div')
+  stencilContainer.id = 'stencil'
+  const graphContainer = document.createElement('div')
+  graphContainer.id = 'graph-container'
+  container.appendChild(stencilContainer)
+  container.appendChild(graphContainer)
+
+  insertCss(`
+    #container {
+      display: flex;
+      border: 1px solid #dfe3e8;
+      width: 100vw;
+      height: calc(100vh - 60px);
+    }
+    #stencil {
+      width: 300px;
+      height: 100%;
+      position: relative;
+      border-right: 1px solid #dfe3e8;
+    }
+    .x6-widget-stencil-content{
+      top:0px !important;
+    }
+      .x6-widget-stencil-title{
+      display: none;
+      }
+    #graph-container {
+      width: calc(100% - 180px);
+      height: 100%;
+    }
+    .x6-widget-stencil  {
+      background-color: #fff;
+    }
+    .x6-widget-stencil-title {
+      background-color: #fff;
+    }
+    .x6-widget-stencil-group-title {
+      background-color: #fff !important;
+    }
+    .x6-widget-transform {
+      margin: -1px 0 0 -1px;
+      padding: 0px;
+      border: 1px solid #239edd;
+    }
+    .x6-widget-transform > div {
+      border: 1px solid #239edd;
+    }
+    .x6-widget-transform > div:hover {
+      background-color: #3dafe4;
+    }
+    .x6-widget-transform-active-handle {
+      background-color: #3dafe4;
+    }
+    .x6-widget-transform-resize {
+      border-radius: 0;
+    }
+    .x6-widget-selection-inner {
+      border: 1px solid #239edd;
+    }
+    .x6-widget-selection-box {
+      opacity: 0;
+    }
+  `)
+}
+const left = ref(0) 
+const top = ref(0) 
+const isMenuShow = ref(false)
+const selectedNode:any = ref(null)
+function deleteNode() { // 删除节点
+  graph.removeNode(selectedNode.value)
+   isMenuShow.value = false
+}
+function copyNode() { // 复制节点
+  if (selectedNode.value) {
+    try {
+      // 获取当前节点的位置
+      const position = selectedNode.value.position()
+      // 创建新节点，使用节点的原始数据
+      const newNode = selectedNode.value.clone()
+      // 设置新位置（偏移50px）
+      newNode.position(position.x + 50, position.y + 50)
+      // 添加到画布
+      graph.addNode(newNode)
+       isMenuShow.value = false 
+    } catch (error) {
+      console.error('节点复制失败:', error)
+    }
+  }
+}
+
+
+function closeAntvx6() {
+  emit('closeAntvx6')
+}
+function saveDesign() { // 保存设计
+  try {
+    // 获取画布内容并转换为JSON
+    const designData = graph.toJSON()
+    console.log('designData', designData)
+    const topology = {
+      projectId: projectInfo.value.projectId,
+      name: projectInfo.value.name,
+      devices:[],
+      pipelines:[],
+      systemboundaries:[],
+      globalDisplay:{
+        device:{
+          showProperties:[]
+        },
+        material:{
+          showProperties:[]
+        },
+        designData:designData
+      }
+    }
+    // 添加保存信息
+    const saveData = {
+      id: projectInfo.value.projectId,
+      topology: JSON.stringify(topology)
+    }
+    updateProjects(saveData).then((res:any) => {
+      if(res.code === 200 || res.code === 200){
+        ElMessage.success('保存成功')
+      }
+    });
+    // 打印到控制台
+    console.log('保存的设计数据:', saveData)
+    
+    // 返回保存的数据
+    return saveData
+  } catch (error) {
+    console.error('保存设计失败:', error)
+    return null
+  }
+}
+</script>
+ 
+<template>
+  <div class="app-layout" @click="isMenuShow = false">
+    <!-- <div class="toolbar">
+      <div class="style-group">
+        <h4>实线</h4>
+        <button @click="setArrowStyle('single', 'solid')">单箭头</button>
+        <button @click="setArrowStyle('double', 'solid')">双箭头</button>
+        <button @click="setArrowStyle('none', 'solid')">无箭头</button>
+      </div>
+      <div class="style-group">
+        <h4>虚线</h4>
+        <button @click="setArrowStyle('single', 'dashed')">单箭头虚线</button>
+        <button @click="setArrowStyle('double', 'dashed')">双箭头虚线</button>
+        <button @click="setArrowStyle('none', 'dashed')">无箭头虚线</button>
+      </div>
+    </div> -->
+    <div class="antvx6-header">
+      <div class="header-left-box">
+        <div class="return-icon-box" @click="closeAntvx6">
+          <img src="@/assets/x6/return.png" alt="图标" title="返回工作台" style="cursor: pointer;">
+        </div>
+        <div class="project-name">{{ projectInfo.name }}</div>
+        <div class="return-icon-box">
+          <img src="@/assets/x6/add.png" alt="图标" title="新增模拟分析" style="cursor: pointer;">
+        </div>
+        <div class="return-icon-box">
+          <img src="@/assets/x6/history.png" alt="图标" title="历史模拟分析" style="cursor: pointer;">
+        </div>
+      </div>
+      <div class="header-content-box">
+        <div class="operation-icon-box">
+          <img src="@/assets/x6/revoke.png">
+          <div class="operation-icon-text">撤销</div>
+        </div>
+        <div class="operation-icon-box">
+          <img src="@/assets/x6/redo.png">
+          <div class="operation-icon-text">重做</div>
+        </div>
+        <div class="operation-icon-box">
+          <img src="@/assets/x6/magnify.png">
+          <div class="operation-icon-text">放大</div>
+        </div>
+        <div class="operation-icon-box">
+          <img src="@/assets/x6/reduce.png">
+          <div class="operation-icon-text">缩小</div>
+        </div>
+        <div class="operation-icon-box" @click="isDisplay = !isDisplay">
+          <img v-if="isDisplay" src="@/assets/x6/display.png">
+          <img v-else src="@/assets/x6/hide.png">
+          <div class="operation-icon-text">显示</div>
+        </div>
+        <div class="operation-icon-box" @click="saveDesign">
+          <img src="@/assets/x6/save.png">
+          <div class="operation-icon-text">保存</div>
+        </div>
+      </div>
+      <div class="header-left-box"></div>
+    </div>
+    <div id="container" style="position: relative;">
+        <div class="context-menu" v-if="isMenuShow"
+    :style="{left: left +'px', top: top+'px'}">
+      <img src="@/assets/x6/info.png" alt="图标" title="设备信息" style="cursor: pointer;">
+      <img src="@/assets/x6/material.png" alt="图标" title="物料信息"  style="cursor: pointer;">
+      <img src="@/assets/x6/change.png" alt="图标" title="变动设置"  style="cursor: pointer;">
+      <img src="@/assets/x6/copy.png" alt="图标" title="复制"  style="cursor: pointer;" @click="copyNode">
+      <img src="@/assets/x6/del.png" alt="图标" title="删除"  style="cursor: pointer;"
+      @click="deleteNode">
+  </div>
+    </div>
+  
+  </div>
+</template>
+ 
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+ 
+.app-layout {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+  font-family: 'Segoe UI', sans-serif;
+}
+
+.toolbar {
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #e0e0e0;
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.style-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-right: 20px;
+}
+
+.style-group h4 {
+  margin: 0 0 5px 0;
+  font-size: 14px;
+  color: #333;
+  font-weight: 600;
+}
+
+.toolbar button {
+  padding: 8px 16px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background-color: #fff;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s;
+  white-space: nowrap;
+}
+
+.toolbar button:hover {
+  border-color: #1890ff;
+  color: #1890ff;
+}
+
+.toolbar button:active {
+  background-color: #f0f0f0;
+}
+ 
+/* Sidebar Styles */
+.sidebar {
+  width: 200px;
+  background-color: #ffffff;
+  border-right: 1px solid #e0e0e0;
+  overflow-y: auto;
+  padding: 16px;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+}
+ 
+.sidebar-section {
+  margin-bottom: 24px;
+}
+ 
+.sidebar-section h3 {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+ 
+.device-item {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  margin-bottom: 8px;
+  background-color: #fafafa;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  cursor: grab;
+  transition: all 0.2s ease;
+}
+ 
+.device-item:hover {
+  background-color: #f0f5ff;
+  border-color: #1890ff;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
+}
+ 
+.device-item:active {
+  cursor: grabbing;
+}
+ 
+.device-icon {
+  font-size: 24px;
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+ 
+.device-name {
+  font-size: 13px;
+  color: #333;
+  font-weight: 500;
+}
+ 
+/* Graph Container Styles */
+.graph-container {
+  flex: 1;
+  position: relative;
+  background-color: #fafafa;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+ 
+/* Drag and drop visual feedback */
+.graph-container.drag-over {
+  background-color: #e6f7ff;
+  border: 2px dashed #1890ff;
+}
+.context-menu{
+  position: absolute;
+  z-index: 9999;
+  background-color: #fff;
+  border: 1px solid #dfe3e8;
+  border-radius: 4px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
+  width: 240px;
+  height: 40px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+</style>
+<style>
+  .x6-widget-stencil-content{
+    top:0px !important;
+  }
+  .antvx6-header{
+    width: 100%;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    background-color: #ffffff;
+    border-bottom: 1px solid #e0e0e0;
+  }
+  .header-left-box{
+    width: 400px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+  }
+  .header-content-box{
+     display: flex;
+    align-items: center;
+  }
+  .return-icon-box {
+    width: 30px;
+    height: 30px;
+    display:flex;
+    align-items:center;
+    justify-content: center;
+    cursor: pointer;
+    margin-right: 10px;
+  }
+  .return-icon-box:hover{
+    background-color: #eeeeee;
+    border-radius: 4px;
+  }
+  .antvx6-header .project-name{
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+    font-weight: 700;
+    font-style: normal;
+    font-size: 16px;
+    color: #333333;
+    margin-right: 10px;
+  }
+ .antvx6-header .operation-icon-box{
+    width: 46px;
+    height: 46px;
+    display:flex;
+    align-content:center;
+    justify-content: center;
+    flex-wrap: wrap; 
+    cursor: pointer;
+    margin-right: 20px;
+    font-family: '微软雅黑';
+    font-weight: 400;
+    font-style: normal;
+    font-size: 12px;
+    color: #4B4B4B;
+    padding-top: 5px;
+  }
+ .antvx6-header .operation-icon-box:hover{
+    background-color: #eeeeee;
+    border-radius: 4px;
+  }
+  .operation-icon-text{
+    width: 100%;
+    text-align: center;
+    padding-top: 5px;
+  }
+</style>
\ No newline at end of file
diff --git a/business-css/frontend/src/types/graph.ts b/business-css/frontend/src/types/graph.ts
new file mode 100644
index 0000000..2eecf41
--- /dev/null
+++ b/business-css/frontend/src/types/graph.ts
@@ -0,0 +1,15 @@
+// types/graph.ts
+export type NodeType =
+  | 'cylinder_slot'
+  | 'flat_slot'
+  | 'ring_slot'
+  | 'tube_slot'
+  | 'bar_stock'
+  | 'tapered_head'
+  | 'monk_ring_slot';
+ 
+export interface NodeItem {
+  type: NodeType;
+  label: string;
+  icon?: string; // 可选图标字符或SVG路径
+}
\ No newline at end of file
diff --git a/business-css/frontend/src/views/business/project/index.vue b/business-css/frontend/src/views/business/project/index.vue
index 7f0291e..cb7350f 100644
--- a/business-css/frontend/src/views/business/project/index.vue
+++ b/business-css/frontend/src/views/business/project/index.vue
@@ -10,6 +10,8 @@ import { ElForm, ElMessage, ElMessageBox } from "element-plus";
 import { searchProjectsLsit,addProjects,updateProjects,deleteProjects,deleteBatchProjects} from "@/api/business/project";
 import Page from '@/components/Pagination/page.vue'
 import ScenarioModel from '@/views/component/scenario/index.vue'
+import Antvx6 from '@/components/antvx6/index.vue'
+const isShowAntvx6 = ref(false); // 是否展示分析设计弹窗
 const isScenario = ref(false) //是否展示历史模拟场景
 // 搜索框
 const queryParams = ref({
@@ -111,12 +113,16 @@ const rules = ref({
   code: [{ required: true, message: "请输入项目编码", trigger: "blur" }],
 });
 //修改项目
-function editClick(row: any) {
+function editClick(row: any) { // 打开修改项目弹窗
   title.value = "修改项目";
   info.value = JSON.parse(JSON.stringify(row));
   dialogVisible.value = true;
 }
-function simulationClick(row: any) {
+function designClick(row: any) { // 打开分析设计
+  info.value = JSON.parse(JSON.stringify(row));
+  isShowAntvx6.value = true;
+}
+function simulationClick(row: any) { // 打开模拟分析
   info.value = JSON.parse(JSON.stringify(row));
   isScenario.value = true;
 }
@@ -185,6 +191,12 @@ function dateFormat(row: any) {
 onMounted(() => {
   gettableData();
 });
+
+// 关闭分析设计弹窗
+function closeAntvx6() {
+  gettableData();
+  isShowAntvx6.value = false;
+}
 </script>
 
 <template>
@@ -224,7 +236,7 @@ onMounted(() => {
               <img  src="@/assets/table/edit.png" alt="" title="修改"
                 @click="editClick(scope.row)" style="cursor: pointer; ">
               <img  src="@/assets/table/design.png" alt="" title="分析设计"
-               style="cursor: pointer; ">
+               style="cursor: pointer; " @click="designClick(scope.row)">
               <img  src="@/assets/table/simulation.png" alt="" title="模拟分析"
               @click="simulationClick(scope.row)"
                 style="cursor: pointer; ">
@@ -237,9 +249,7 @@ onMounted(() => {
         </el-table-column>
       </el-table>
       <Page :total="total" v-model:size="queryParams.size" v-model:current="queryParams.current" @pagination="gettableData()" ></Page>
-
     </div>
-
     <el-dialog v-model="dialogVisible" :close-on-click-modal="false"
     :modal="false" draggable :before-close="handleClose" :title="title"
       append-to-body width="620px" height="600px">
@@ -267,7 +277,9 @@ onMounted(() => {
       <ScenarioModel v-if="isScenario"  :projectInfo="info" ref="Scenario" />
     </el-dialog>
 
-   
+    <div v-if="isShowAntvx6" style="position: fixed;top: 0px;left: 10px; width: 100vw;height: 100vh;background-color: #fff;z-index: 9999;">
+      <Antvx6 ref="antvx6" v-if="isShowAntvx6" :projectInfo="info"   @closeAntvx6="closeAntvx6"/>
+    </div>
   </div>
 </template>
 
diff --git a/business-css/frontend/types/graph.ts b/business-css/frontend/types/graph.ts
new file mode 100644
index 0000000..2eecf41
--- /dev/null
+++ b/business-css/frontend/types/graph.ts
@@ -0,0 +1,15 @@
+// types/graph.ts
+export type NodeType =
+  | 'cylinder_slot'
+  | 'flat_slot'
+  | 'ring_slot'
+  | 'tube_slot'
+  | 'bar_stock'
+  | 'tapered_head'
+  | 'monk_ring_slot';
+ 
+export interface NodeItem {
+  type: NodeType;
+  label: string;
+  icon?: string; // 可选图标字符或SVG路径
+}
\ No newline at end of file