From a59e7d02d2a70090ce4d3e58d7f5361a48466e6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=92=AC=E8=BD=AE=E7=8C=AB?= <10928033@qq.com> Date: Sat, 11 Dec 2021 16:04:34 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=B8=A4=E4=B8=AA=E5=8A=A8?= =?UTF-8?q?=E7=94=BB=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 +- public/InterfaceReturn.json | 337 +- public/Pipeline_H_Svg.png | Bin 0 -> 1709 bytes public/Pipeline_V_Svg.png | Bin 0 -> 1759 bytes public/ReservoirSvg.png | Bin 0 -> 2628 bytes public/example.json | 5221 +++++++++++++++---------- src/assets/css/svgAnimation/index.css | 68 + src/components/SvgEditor.vue | 1 + src/components/SvgPrview.vue | 2 +- 9 files changed, 3574 insertions(+), 2059 deletions(-) create mode 100644 public/Pipeline_H_Svg.png create mode 100644 public/Pipeline_V_Svg.png create mode 100644 public/ReservoirSvg.png create mode 100644 src/assets/css/svgAnimation/index.css diff --git a/README.md b/README.md index a358f20..b7566a7 100644 --- a/README.md +++ b/README.md @@ -245,7 +245,9 @@ Vue.use(Fragment.Plugin) ![修改组件属性](https://images.cnblogs.com/cnblogs_com/Hero-/1976969/o_211031114045_%E4%BF%AE%E6%94%B9%E7%BB%84%E4%BB%B6%E5%B1%9E%E6%80%A7.gif) -![预览界面](https://images.cnblogs.com/cnblogs_com/Hero-/1976969/o_211031114050_%E9%A2%84%E8%A7%88.gif) +![](https://images.cnblogs.com/cnblogs_com/Hero-/2077550/o_211211080131_%E5%8A%A8%E7%94%BB%E7%BB%98%E5%88%B6.gif) + +![预览界面](https://images.cnblogs.com/cnblogs_com/Hero-/2077550/o_211211075750_%E7%94%B5%E5%8A%9B%E9%A2%84%E8%A7%88.gif) ## License diff --git a/public/InterfaceReturn.json b/public/InterfaceReturn.json index ebe0438..df6bc6d 100644 --- a/public/InterfaceReturn.json +++ b/public/InterfaceReturn.json @@ -426,7 +426,7 @@ "type": "ConnLineSvg", "title": "连接线", "panel_class": "draw", - "template": "", + "template": "", "props": [ "prop_data" ], @@ -455,6 +455,31 @@ "title": "终点y相对坐标", "val": 0, "type": "numberinputbox" + }, + "svg_line_ani": { + "title": "电流效果", + "val": { + "selectval": "", + "selectgroup": [ + { + "value": "", + "label": "无" + }, + { + "value": "svg_ani_flow", + "label": "正向" + }, + { + "value": "svg_ani_flow_back", + "label": "反向" + }, + { + "value": "svg_ani_flow_stop", + "label": "停止" + } + ] + }, + "type": "select" } }, "create_type": "draw", @@ -464,7 +489,7 @@ "type": "ConnHorizontalLineSvg", "title": "连接线-横线", "panel_class": "draw", - "template": "", + "template": "", "props": [ "prop_data" ], @@ -483,6 +508,31 @@ "title": "终点x相对坐标", "val": 0, "type": "numberinputbox" + }, + "svg_line_ani": { + "title": "电流效果", + "val": { + "selectval": "", + "selectgroup": [ + { + "value": "", + "label": "无" + }, + { + "value": "svg_ani_flow", + "label": "正向" + }, + { + "value": "svg_ani_flow_back", + "label": "反向" + }, + { + "value": "svg_ani_flow_stop", + "label": "停止" + } + ] + }, + "type": "select" } }, "create_type": "click", @@ -492,7 +542,7 @@ "type": "ConnVerticalLineSvg", "title": "连接线-竖线", "panel_class": "draw", - "template": "", + "template": "", "props": [ "prop_data" ], @@ -511,6 +561,31 @@ "title": "终点y相对坐标", "val": 0, "type": "numberinputbox" + }, + "svg_line_ani": { + "title": "电流效果", + "val": { + "selectval": "", + "selectgroup": [ + { + "value": "", + "label": "无" + }, + { + "value": "svg_ani_flow", + "label": "正向" + }, + { + "value": "svg_ani_flow_back", + "label": "反向" + }, + { + "value": "svg_ani_flow_stop", + "label": "停止" + } + ] + }, + "type": "select" } }, "create_type": "click", @@ -568,6 +643,260 @@ } }, "create_type": "draggable", - "priview_img": "https://svg.yaolm.top/test.png" + "priview_img": "http://svg.yaolm.top/test.png" + }, + { + "type": "PipelineSvg", + "title": "管道", + "panel_class": "draw", + "template": "", + "props": [ + "prop_data" + ], + "extend_attr": { + "o_color": { + "title": "管道颜色", + "val": "#0a7ae2", + "type": "colorinputbox" + }, + "i_color": { + "title": "水流颜色", + "val": "#119bfa", + "type": "colorinputbox" + }, + "startpoint_x": { + "title": "起点x相对坐标", + "val": 0, + "type": "numberinputbox" + }, + "startpoint_y": { + "title": "起点y相对坐标", + "val": 0, + "type": "numberinputbox" + }, + "endpoint_x": { + "title": "终点x相对坐标", + "val": 0, + "type": "numberinputbox" + }, + "endpoint_y": { + "title": "终点y相对坐标", + "val": 0, + "type": "numberinputbox" + }, + "o_width": { + "title": "管道宽度", + "val": 10, + "type": "numberinputbox" + }, + "i_width": { + "title": "水流宽度", + "val": 5, + "type": "numberinputbox" + }, + "svg_line_ani": { + "title": "水流效果", + "val": { + "selectval": "svg_ani_flow", + "selectgroup": [ + { + "value": "", + "label": "无" + }, + { + "value": "svg_ani_flow", + "label": "正向" + }, + { + "value": "svg_ani_flow_back", + "label": "反向" + }, + { + "value": "svg_ani_flow_stop", + "label": "停止" + } + ] + }, + "type": "select" + } + }, + "create_type": "draw", + "priview_img": "/Pipeline_V_Svg.png" + }, + { + "type": "Pipeline_H_Svg", + "title": "管道-横向", + "panel_class": "draw", + "template": "", + "props": [ + "prop_data" + ], + "extend_attr": { + "o_color": { + "title": "管道颜色", + "val": "#0a7ae2", + "type": "colorinputbox" + }, + "i_color": { + "title": "水流颜色", + "val": "#119bfa", + "type": "colorinputbox" + }, + "startpoint_x": { + "title": "起点x相对坐标", + "val": 0, + "type": "numberinputbox" + }, + "endpoint_x": { + "title": "终点x相对坐标", + "val": 0, + "type": "numberinputbox" + }, + "o_width": { + "title": "管道宽度", + "val": 10, + "type": "numberinputbox" + }, + "i_width": { + "title": "水流宽度", + "val": 5, + "type": "numberinputbox" + }, + "svg_line_ani": { + "title": "水流效果", + "val": { + "selectval": "svg_ani_flow", + "selectgroup": [ + { + "value": "", + "label": "无" + }, + { + "value": "svg_ani_flow", + "label": "正向" + }, + { + "value": "svg_ani_flow_back", + "label": "反向" + }, + { + "value": "svg_ani_flow_stop", + "label": "停止" + } + ] + }, + "type": "select" + } + }, + "create_type": "draw", + "priview_img": "/Pipeline_H_Svg.png" + }, + { + "type": "Pipeline_V_Svg", + "title": "管道-纵向", + "panel_class": "draw", + "template": "", + "props": [ + "prop_data" + ], + "extend_attr": { + "o_color": { + "title": "管道颜色", + "val": "#0a7ae2", + "type": "colorinputbox" + }, + "i_color": { + "title": "水流颜色", + "val": "#119bfa", + "type": "colorinputbox" + }, + "startpoint_y": { + "title": "起点y相对坐标", + "val": 0, + "type": "numberinputbox" + }, + "endpoint_y": { + "title": "终点y相对坐标", + "val": 0, + "type": "numberinputbox" + }, + "o_width": { + "title": "管道宽度", + "val": 10, + "type": "numberinputbox" + }, + "i_width": { + "title": "水流宽度", + "val": 5, + "type": "numberinputbox" + }, + "svg_line_ani": { + "title": "水流效果", + "val": { + "selectval": "svg_ani_flow", + "selectgroup": [ + { + "value": "", + "label": "无" + }, + { + "value": "svg_ani_flow", + "label": "正向" + }, + { + "value": "svg_ani_flow_back", + "label": "反向" + }, + { + "value": "svg_ani_flow_stop", + "label": "停止" + } + ] + }, + "type": "select" + } + }, + "create_type": "draw", + "priview_img": "/Pipeline_V_Svg.png" + }, + { + "type": "ReservoirSvg", + "title": "蓄水池", + "panel_class": "common", + "template": "", + "props": [ + "prop_data" + ], + "extend_attr": { + "color": { + "title": "边框颜色", + "val": "#FFFFFF", + "type": "colorinputbox" + }, + "f_color": { + "title": "填充颜色", + "val": "#37cfe7", + "type": "colorinputbox" + }, + "svg_fill_ani": { + "title": "填充效果", + "val": { + "selectval": "svg_ani_fill_h40", + "selectgroup": [ + { + "value": "", + "label": "无" + }, + { + "value": "svg_ani_fill_h40", + "label": "正向" + } + ] + }, + "type": "select" + } + }, + "create_type": "draggable", + "priview_img": "/ReservoirSvg.png" } ] \ No newline at end of file diff --git a/public/Pipeline_H_Svg.png b/public/Pipeline_H_Svg.png new file mode 100644 index 0000000000000000000000000000000000000000..ca52c3904b84a68f0bdfc948658e1bdf88fe9df3 GIT binary patch literal 1709 zcmbVNe~1)S9G`!BA-f_UUHdo&Rvqbmtw z$>U1A$Lfh}79^xPfQ%B*kymw$CWv+Ic^ydo&>|BsrD!7c+t{ZRsmLPL?T)Y!-4D}B zXvl!uhPvX?P`~7psrL2cy1ak|sL%prUd?ExkQb?nTmi4`ZH6K%5UXFLI&4C+ClV$7 z$bh8B!O{}T@?@LO!FgOxH~%cjvpmbN9OGnZ&MmlE!RaMy4~5wbIVr>f8){tmOQh14 zr3(y`%jFz7rvn)&hV%J+49hb-Ph$ja7BmawY0X?+mk@xaWGK3&AdR#of&?10L<(zK zH9^%IVl}hoChRaK4|Ileu(nARpe!|T`k;}ikjoMSGf;(^WnwJX!0KsaAv2BcBf4>X z7Xfx{B+}rxr!K16pfIgq7MoFX$UV_!yr4rS22C_*NHCbiYOc1e(FMN&frX4XLYaD? zqIH!?9$P{_)2(PS%9(2xTz~;!L6O2y<7kejIWCT)=5z_HcP;A`Shfm{AX!Nk?gMr6 zcR_K=$iM=Nf@MiaB0~k(U_}Kf$mm*%A{%ZL{3wGAOpLX2F5D0M{ZRuYl?*;GV;eik zaM17Jd>#+YJGhFvk%$o1Obcid3|p zx!r9X&fNO_0Fnmn6sX^q|L6TJhJs5FWFA zao6FvW7x|^tHK|RW(PIg;SAi$E?!;QM-WY7IM5N#kKQbue*SzP5&ZG?(KUM}qN6ig zcP)SNi?)HUI*uLteEa2Vxv4|(ll~KD&(B?Wt@qrjRj+?^W&7bH#n~lKH2XhW!9Mh8 z)8f-B#><8AEjy;)EcY!t8;+GcU;kd5*k79cMfKARrnA|R z>(|mVlYfBy;PjtYHys!rx!kqkt*7Dbw?8PVW0~T?;dir}&U}31aFw|9)bTs}Cg%rc zLUTW@Ee_2OyT)Joc6WKYJoU+!Q>DE>>`-^#x^t4dvbX!v&eq-+{yH=E>w#~|D|XJM u58XWV;jLXQ55HHQJ(pYG`rk~cl73IXk>~d9aW_TnA4)jb6*$$|_v+u|0YrKL literal 0 HcmV?d00001 diff --git a/public/Pipeline_V_Svg.png b/public/Pipeline_V_Svg.png new file mode 100644 index 0000000000000000000000000000000000000000..2857cd8378355558610c1e42226d8cd5886797bb GIT binary patch literal 1759 zcmbVNZA=?w96w}Eh9hA@bQ0sv!$g!_@1?ZR8$Tms^yJVOXB0&fS3CHRhAE68-<+$F88)Dz$E>j$!u}m`@h=M*mt2 zyZe60-()m-pW*~4TX+!$fF&lY2#sNtRWX$pT7ZEEKuA)Y#I>;r0+&Q5vBT!2y{Zd@ zrMkEV8sk2{5N{D2B2o1uUK!&MfeZ{DkI4~5=VDGG!ONksxl9pw0%Ei{iE7gz-sG*v zT~GtK-9nQBO|y8p!@}6htTuK%&eAMR(F|p!Nyf(6XwF)Jr+x&orinqW!M!PE3(cHF z*f3O%qN35LC2F-mEkrR6hl8S7ie*WJAoX^|;A5ns7pEEAKo>MgH6*CuCLDF&5f%DFGCP3{Gv;A_?Q7K!FI5fnw+g%Ve->7#dIy!+)X9 zY~Nx4h1ToM*jQGJEN4vUMr|8%BNdQk(Yn7~1ylpjVXG#9+BPJ!*z`u_TpHjFsQDp` zq!U%2mW;E=6TD=Hq=+!8KfdGuaPtOm5-4j7$*?5D_)*rZcFyJ~r7Jj^PC~s7?dJt zLvPqzgL`UScE(}1ldOeF$n|r=hE?C;ZnOhGjvIyV@V?|M}v$Z;~#2`O@JJ zq<6lYK7VLySI54N@3*We$X@;G@lQSrwm;p~TN1dkYVx-Or=Hk#^2aT0L)+gj+%Wph zO+otQ;XmhJzd0kf9>2W$MDb%crVH=N&FVhG#y^dZpZ?>ynRV*u{I6@q`ww5wpIske z@&_L+Kf=5;vN8eNTeI-q0*Y)8|9_3?rBYR+|Z*J?Jo{{16ZC}s$&dnxa zJrl=HoPD?G>h8013!TD)1)ZS}ziS#E`^iat@m|M^2b;gzzZ`2;_r~9km3EHIj=$A) zXu&rS)E}DEPn~hv?^+jlq5-&1*H;@VK3e&4#mofqcf-*zjLQ}7Fjb6Pt**Dj?c=Yn6@Pc|^pshD0;!Neq2QGYGMXXrto?JWL doFnJ$$sRn~I5kFoRBC>LJheXe`!&z*`x^>@RYL#( literal 0 HcmV?d00001 diff --git a/public/ReservoirSvg.png b/public/ReservoirSvg.png new file mode 100644 index 0000000000000000000000000000000000000000..19ef64e232c704251b21c123b63b5ecc4597ec66 GIT binary patch literal 2628 zcmbVO30MGUBpFFEF%u;mT@ZnC zsi3Ho#fuuj$|W>gJU~SetqN+3x3pBKCtkQ!ETua^;In>i`)%j@-n=*O{oeoo`=8(B zgoiGgFmB2?3WYL38Z3?==OD|Vjv?Q7?LNUkm096D_XVu%;g11$<^(Xw!w z2-l-DKQ_RE0f0yI7qGd0K73yulg0yh00-c5_yCLR3;F^ee-3T}>;yg=*DE<(fk40kcpM&&MIu;4qSgQzSz5w|0nLDi@R)fxyA z%N@n)RJZ{rRQUf8J$n2b1*B_bvQZuH<)YDysvr!KwWJxt4tXz{kSFR;P6SHeYxFQG zSxeG%w^*YCMS2u6;CeZZt49JAK0=wsBQ2pZmSS22PatN$bpaJa22@BVqsC=%c`Pnh zPDYK-1p$FKFb4#HH&7XlV2Z@|LU|z1=QmI?We~^!{UI2EK?SbYK%~K#22!FNomNSw zjk*yO;c8q@Dkj!b7`NKXixk3djE+kOI@pyng;0KS~7vu06OA3tKNB+Sk~?59MvzfW94?(mboKB`jnRhE1%zNr83^gHCH^QvAKu3Pvchdg?fUb*ueZBthbfWrWS6nlND^8!nGOuYIOiol?5UU)ch$98C|*zRoZKXBtB@a@EPds*6bbA1_u99? z$CS@?fp=ObJ=P_=U#!cP?p`j=E~A$jje946+Uq)f7P<0ARDg} zs?S{LYd&SOu+Apv&Ys70AKPcm2(&-7dYU_(VFFGwJDVboU3pEXxVX6u?u|O|%SuW9 z)jST?b(rzj^NG_+FOBcHETsg8zi927#x5$Zlp6eDt6ITcX{c1?yia?CmIX;cF?qx^eS$J0xt?Pr7QFIl7T<+8N4hSOK4 zPVZiFHEC^(;KENi0k-DW%3Y0`TlNm(?uu;tR<5h7E9D%g*(I{Bs>?4UQyYG{`OulC z&njCBkDnatmmCxXJ314qGUCk5NK>9j6sG^@qlBG@U)z1ck6iLqPfpRGav(fpkJ)p) zD7S^)pVD+tmLE)9SP| zwWqMqPUYZf-sHF^>cB@;QTHD_C<~81Y zIpuJBb!J}t>ucY2w!B;~c;2+geil-HecN+?b6tL#mHScu?OnR>>svw^CQ)nsicOwR zFS{5uz1@9@^J+}W8x7em*LG*Z>$-X;?+V=V?TTn7KfUZK^}7vQum9ZoqOMyVoI!~% z0!kRMhdwh^%;wL5mGz%Va|sbA`tFRuAN?C;>RnG$Ag6~A?PIlFIQ zqh|LvHLM6pQtl4dkhRqc+dS3o&vVeYFX(RGb7g+%l%3jJ88?rbf2Tm-soK4cg&wwx zcWjE*FihEHs;=%3>%BMX$2X4ueCw3JudN|(>BP*+3km7iBa^OCWm9YBw{{pehStAM zjwtX@KZqTBW5H(1{mumyV5;`Wil5X^vW3ci;$U=2L#(>dd3Ev44@*1o(qJcfjbs3i k{$nWI>Xx0^1n!tN import SvgDynamic from "./SvgDynamic.vue"; import { ISvgDataLists, ISvgCanvas, IComponentInfo } from "../Model"; - +import "../assets/css/svgAnimation/index.css"; const props = defineProps({ //组件的json格式 component_infos: {