测试：前台任务设计雏形
parent
f9784e07df
commit
3d91e39aa8
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#c5a9f1;}.cls-5{fill:#a375e9;}</style></defs><title>10大数据服务</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M149.93,44.94H67.61a4.41,4.41,0,0,0,0,8.81h78v78.78a4.36,4.36,0,1,0,8.72,0V49.34A4.34,4.34,0,0,0,149.93,44.94Z"/><path class="cls-5" d="M133.57,64.06H51.07a4.34,4.34,0,0,0-4.36,4.41v83.19a4.34,4.34,0,0,0,4.36,4.41h82.32a4.34,4.34,0,0,0,4.36-4.41V68.47A4.1,4.1,0,0,0,133.57,64.06Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 965 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#a375e9;}.cls-5{fill:#c5a9f1;}</style></defs><title>11个人源服务</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><rect class="cls-4" x="45.47" y="54.12" width="43.86" height="44.33"/><rect class="cls-4" x="45.47" y="111.74" width="43.86" height="44.33"/><polygon class="cls-5" points="124.52 44.94 93.5 76.28 124.52 107.62 155.53 76.28 124.52 44.94"/><rect class="cls-4" x="102.59" y="111.74" width="43.86" height="44.33"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 970 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#dce6fe;}.cls-5{fill:#4f80f9;}</style></defs><title>12Python</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><rect class="cls-4" x="44.93" y="54.56" width="111.13" height="91.88" rx="0.87" ry="0.87"/><path class="cls-5" d="M121,81.2l6,.73c0,.52.1,1,.1,1.44q0,11.59,0,23.18c0,4.07-.91,7.82-3.81,10.86a16.52,16.52,0,0,1-12.59,4.65l-1.94-5.83c9.78-1.48,13.11-4,12.39-9.38-2.53.57-5,1.27-7.59,1.68-4.42.7-8.28-.88-10-4.1a8.84,8.84,0,0,1-1-3.78c-.11-5.33,0-10.66-.07-16a2.14,2.14,0,0,1,1.06-2.11c1.63-1,3.19-2.12,5-3.31,0,.52.08.9.08,1.28,0,5.49-.14,11,.12,16.45.21,4.58,2.73,6.14,7.16,4.94l.3-.11c4.79-1.54,4.79-1.54,4.78-6.56C121,90.64,121,86,121,81.2Z"/><path class="cls-5" d="M80.09,122.26c-2.14-1.41-4-2.57-5.74-3.83a1.71,1.71,0,0,1-.45-1.24q0-16.46,0-32.93a1.8,1.8,0,0,1,.57-1.33,23.79,23.79,0,0,1,9.46-4c4.73-.69,8.53.93,10.93,4.94,3.81,6.38,5.41,13.11,1.51,20.11-1.91,3.42-4.68,5.87-8.77,6.12a15.06,15.06,0,0,1-4.51-.66,18,18,0,0,1-3-1.39Zm-.34-27.38q0,1.6,0,3.19c0,4.54.56,5.24,5.07,6.36,3.57.89,6.14-.45,7.16-4a18.72,18.72,0,0,0-.36-11.91c-1-2.78-2.94-4-5.84-3.46a22.12,22.12,0,0,0-5.46,2.39c-.36.18-.53,1-.55,1.51C79.71,90.94,79.75,92.91,79.75,94.88Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#dce6fe;}.cls-5{fill:#4f80f9;}</style></defs><title>13测试报告</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><rect class="cls-4" x="44.93" y="54.56" width="111.13" height="91.88" rx="2" ry="2"/><path class="cls-5" d="M82.54,115.79,69.84,100.5a2,2,0,0,1,0-2.56L82.52,82.68a2,2,0,0,0-.25-2.81L81.22,79a2,2,0,0,0-2.83.25l-16.6,20,0,0,16.6,20a2,2,0,0,0,2.83.25l1-.89A2,2,0,0,0,82.54,115.79Z"/><path class="cls-5" d="M122.61,79.24a2,2,0,0,0-2.83-.25l-1,.89a2,2,0,0,0-.25,2.8l12.68,15.26a2,2,0,0,1,0,2.56l-12.7,15.29a2,2,0,0,0,.25,2.8l1,.89a2,2,0,0,0,2.83-.25l16.6-20,0,0Z"/><path class="cls-5" d="M109.12,79l-1.27-.47a2,2,0,0,0-2.58,1.19L90.69,119.58a2,2,0,0,0,1.18,2.56l1.27.47a2,2,0,0,0,2.58-1.19L110.3,81.55A2,2,0,0,0,109.12,79Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#dce6fe;}.cls-5{fill:#4f80f9;}</style></defs><title>14描述统计</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><rect class="cls-4" x="44.93" y="54.56" width="111.13" height="91.88" rx="0.87" ry="0.87"/><rect class="cls-5" x="74.4" y="82.72" width="5.65" height="41.01" rx="2" ry="2"/><rect class="cls-5" x="121.45" y="86.31" width="5.15" height="37.42" rx="2" ry="2"/><rect class="cls-5" x="97.8" y="77.27" width="5.65" height="46.47" rx="2" ry="2"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 996 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#facd51;}</style></defs><title>15清洗</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M112.41,81.61V48a3,3,0,0,0-3-3H91.61a3,3,0,0,0-3,3V81.61a3,3,0,0,1-3,3H51.92a3,3,0,0,0-3,3v9.84a3,3,0,0,0,3,3h1.91a3,3,0,0,1,3,3V153a3,3,0,0,0,3,3H69.7a3,3,0,0,0,3-3V127.33a3,3,0,0,1,3-3h1.91a3,3,0,0,1,3,3V153a3,3,0,0,0,3,3h9.84a3,3,0,0,0,3-3V127.33a3,3,0,0,1,3-3h1.91a3,3,0,0,1,3,3V153a3,3,0,0,0,3,3h9.84a3,3,0,0,0,3-3V127.33a3,3,0,0,1,3-3h1.91a3,3,0,0,1,3,3V153a3,3,0,0,0,3,3h9.84a3,3,0,0,0,3-3V103.52a3,3,0,0,1,3-3h1.91a3,3,0,0,0,3-3V87.64a3,3,0,0,0-3-3H115.42A3,3,0,0,1,112.41,81.61Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3,.cls-6{fill:none;}.cls-2,.cls-3{stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#facd51;}.cls-5{fill:#fce5a7;}.cls-6{stroke:#facd51;stroke-linecap:round;stroke-linejoin:round;stroke-width:10.96px;}</style></defs><title>16连接</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><circle class="cls-4" cx="102.42" cy="61.04" r="15.33"/><circle class="cls-5" cx="60.26" cy="130.01" r="15.33"/><circle class="cls-5" cx="140.74" cy="130.01" r="15.33"/><path class="cls-6" d="M51.91,103.62A48.44,48.44,0,0,1,74.41,65.84"/><path class="cls-6" d="M126,147.92a48.51,48.51,0,0,1-50.56.53"/><path class="cls-6" d="M130,68.61a48.38,48.38,0,0,1,18.61,35.83"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#fce5a7;}.cls-5{fill:#facd51;}</style></defs><title>17工作包</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M156.07,73.41c0-10.19-4.54-17.36-13.43-17.36H59.75c-8.88,0-14.82,7.18-14.82,17.36v16H156.07Z"/><path class="cls-5" d="M44.94,89.39v41.52c0,10.19,5,14,13.89,14h82.88c8.88,0,14.35-3.86,14.35-14V89.39Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 878 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#9198b3;}</style></defs><title>18存储</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M119.72,76.67a3.48,3.48,0,0,0,3.47-3.47v-7a3.47,3.47,0,1,0-6.95,0v7A3.48,3.48,0,0,0,119.72,76.67Z"/><path class="cls-4" d="M140.61,44.94H60.39A15.47,15.47,0,0,0,44.94,60.39v80.23a15.47,15.47,0,0,0,15.45,15.45h80.23a15.47,15.47,0,0,0,15.45-15.45V60.39A15.47,15.47,0,0,0,140.61,44.94Zm-11.9,7.75V80a3.32,3.32,0,0,1-3.31,3.31H75.6A3.32,3.32,0,0,1,72.29,80V52.69Zm19.6,87.92a7.71,7.71,0,0,1-7.7,7.7H60.39a7.71,7.71,0,0,1-7.7-7.7V60.39a7.71,7.71,0,0,1,7.7-7.7h4.15V80A11.08,11.08,0,0,0,75.6,91H125.4A11.08,11.08,0,0,0,136.47,80V52.69h4.15a7.71,7.71,0,0,1,7.7,7.7Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#9198b3;}</style></defs><title>19导出</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M138.79,69.74c-.11-7-4.94-10.87-12.88-11-2.6,0-5.21,0-8,0,0-1.41.06-2.27,0-3.14-.54-6.67-5-10.5-12.45-10.53q-24.13-.1-48.26,0C49.71,45.1,45,49.17,45,55.72q-.12,35.46,0,70.92c0,6.28,4.67,10.47,11.68,11,1.22.08,2.44.15,4.13.25,0,2.9-.13,5.62,0,8.32a10.09,10.09,0,0,0,9.85,9.56c8.58.25,17.16.3,25.75.25h13.35a3.62,3.62,0,0,0,3.8-3.38v-.19a3.62,3.62,0,0,0-3.8-3.38H96.48q-10.74,0-21.47,0c-5.66,0-6.53-.81-6.53-5.87q0-35.83,0-71.66c0-5.15.74-5.82,6.51-5.83q24.54,0,49.09,0c6.25,0,6.89.58,6.9,6.26q0,17.92,0,35.83c0,2.38.92,4.43,3.88,4.4s4-1.94,4-4.37C138.85,95.12,139,82.43,138.79,69.74Zm-29-11h-4.37c-10.49,0-21,0-31.48,0q-13.11.08-13.13,11.8c0,18.54,0,37.08,0,55.62v3.94c-6.23,1.07-8-.14-8-5.17q0-33.78,0-67.57c0-4.58,1-5.48,6.09-5.48q22.46,0,44.91,0C109.37,51.88,110.4,52.95,109.75,58.72Z"/><path class="cls-4" d="M118.33,100.39c-6.14.05-12.28,0-18.41,0s-12.56,0-18.83,0c-2.65,0-4.52.91-4.71,3.23-.2,2.59,1.82,3.82,4.54,3.83q18.83.08,37.66,0c2.66,0,4.68-1.15,4.45-3.87C122.82,101.1,120.91,100.37,118.33,100.39Z"/><path class="cls-4" d="M91.4,121c-4,0-8,0-12,0-1.69,0-2.89.91-3,3.23-.13,2.59,1.16,3.82,2.9,3.83,8,.06,16,.07,24,0,1.7,0,3-1.15,2.84-3.87-.14-2.47-1.35-3.21-3-3.18C99.24,121.05,95.32,121,91.4,121Z"/><path class="cls-4" d="M81.36,86.57q18.41,0,36.83,0c2.59,0,4.89-.81,4.82-3.55s-2.24-3.41-4.93-3.4c-6.14,0-12.28,0-18.41,0s-12,0-18,0c-2.86,0-5.25.66-5.27,3.49C76.39,85.72,78.73,86.57,81.36,86.57Z"/><path class="cls-4" d="M137.31,128.39v3.7c-5.05,0-9.56,0-14.31,0-2.78,0-5.5.37-5.53,3.82s2.74,3.82,5.5,3.8c5.23,0,10.46,0,14.3,0l0,.15v4.39c0,2.64,2.44,4.3,4.39,3l13.4-9.09a2.19,2.19,0,0,0,0-3.62l-13.4-9.09C139.75,124.09,137.31,125.74,137.31,128.39Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{fill:#d8f4e9;}.cls-2{fill:#3ec791;}.cls-3{opacity:0;}.cls-4,.cls-5{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-5{stroke-width:0.83px;}</style></defs><title>1.开始</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><rect class="cls-1" x="44.97" y="55.64" width="111.13" height="91.88" rx="0.87" ry="0.87"/><polygon class="cls-2" points="85.38 78 85.38 125.16 125.79 101.58 85.38 78"/><g class="cls-3"><path class="cls-4" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-4" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-5" x="44.93" y="44.93" width="111.13" height="111.13"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 820 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#9198b3;}</style></defs><title>20执行</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M49.12,97.56q0-19.34,0-38.69C49.13,50.62,54.65,45,62.89,45Q91.45,44.9,120,45c8.07,0,13.73,5.57,13.83,13.64.12,9.07,0,18.13,0,27.2,0,3.1-1.42,4.78-3.83,4.76s-3.72-1.67-3.73-4.86c0-8.46,0-16.93,0-25.39,0-6.07-1.72-7.8-7.69-7.8H64.19c-5.75,0-7.6,1.85-7.6,7.61q0,37.78,0,75.56c0,5.81,1.74,7.53,7.57,7.53H83.5c.71,0,1.41,0,2.11,0,2.39.15,3.8,1.47,3.8,3.83a3.37,3.37,0,0,1-3.65,3.61c-8.56,0-17.14.28-25.68-.15-6.21-.31-10.88-6.09-10.92-12.77-.09-13.4,0-26.8,0-40.2Z"/><path class="cls-4" d="M151.88,129.77a26.42,26.42,0,1,1-26.34-26.61A26.44,26.44,0,0,1,151.88,129.77Zm-26.56,18.74a18.89,18.89,0,1,0,.13-37.78,18.89,18.89,0,0,0-.13,37.78Z"/><path class="cls-4" d="M91.26,63.9c6.84,0,13.68,0,20.53,0,3.23,0,4.78,1.24,4.75,3.7s-1.63,3.73-4.8,3.74q-20.22,0-40.45,0c-3.18,0-5.11-1.6-5-3.95s1.82-3.48,5-3.49Q81.3,63.89,91.26,63.9Z"/><path class="cls-4" d="M85.51,92.32c-4.84,0-9.67,0-14.51,0-2.57,0-4.35-1-4.66-3.68-.27-2.25,1.74-4,4.67-4q14.66-.07,29.32,0c2.47,0,4.41.86,4.6,3.69.16,2.46-1.52,3.91-4.61,3.94C95.38,92.36,90.44,92.32,85.51,92.32Z"/><path class="cls-4" d="M75.31,113.37c-1.91-.09-3.83-.09-5.72-.29a3.4,3.4,0,0,1-3.24-3.7A3.46,3.46,0,0,1,70,105.75c3.62-.08,7.24-.07,10.86,0a3.4,3.4,0,0,1,3.64,3.6,3.32,3.32,0,0,1-3.17,3.72C79.34,113.28,77.32,113.28,75.31,113.37Z"/><path class="cls-4" d="M121.35,129.65c0-1.91-.09-3.82,0-5.72.16-2.67,1.88-3.58,4.06-2.08,2.56,1.76,5,3.68,7.47,5.57,1.85,1.42,1.94,3,.05,4.44-2.46,1.9-4.94,3.79-7.51,5.54-2.22,1.52-3.84.65-4.1-2,0-.2,0-.4,0-.6q0-2.56,0-5.12Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#9198b3;}</style></defs><title>21封装包</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M140.61,65H127.67c-1.18-11.15-10.37-19.86-21.51-19.86H95.7c-11.13,0-20.32,8.71-21.51,19.86H60.39A15.71,15.71,0,0,0,44.94,80.89V140a15.71,15.71,0,0,0,15.45,15.92h80.23A15.71,15.71,0,0,0,156.07,140V80.89A15.71,15.71,0,0,0,140.61,65ZM95.7,53.1h10.46A14,14,0,0,1,119.81,65H82A14,14,0,0,1,95.7,53.1ZM72.29,73h56.43V90.4a3.37,3.37,0,0,1-3.31,3.41H75.6a3.37,3.37,0,0,1-3.31-3.41Zm76,67a7.83,7.83,0,0,1-7.7,7.93H60.39a7.83,7.83,0,0,1-7.7-7.93V80.89A7.83,7.83,0,0,1,60.39,73h4.15V90.4A11.25,11.25,0,0,0,75.6,101.8H125.4a11.25,11.25,0,0,0,11.06-11.4V73h4.15a7.83,7.83,0,0,1,7.7,7.93Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#ffdce0;}.cls-5{fill:#ff4f63;}</style></defs><title>2.结束</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><rect class="cls-4" x="44.93" y="54.56" width="111.13" height="91.88" rx="0.87" ry="0.87"/><ellipse class="cls-5" cx="100.5" cy="100.5" rx="23.15" ry="23.4"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 809 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#4f80f9;}.cls-5{fill:#95b3fb;}</style></defs><title>3.横向分割</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M44.93,54.2h65c.09,1.11.23,2,.23,2.91,0,28.84,0,57.68.06,86.53,0,2.2-.57,3-3.42,3-12.91,0-25.82.13-38.74.19-7.6,0-15.2,0-23.09,0Zm25.79,5.24v81.78H83.9V59.44ZM51,59.45v81.78H64V59.45Zm39.4,81.76h13.19V59.55H90.38Z"/><path class="cls-5" d="M117.34,72.61h29l.46-.67-9.16-9.34,4.65-3.87c4,4,8.8,8,12.58,12.8,1.38,1.75,1.63,6.27.34,7.91-3.89,4.94-8.79,9.08-13.33,13.57l-5-4.69,10.2-8.5-.63-1H117.34Z"/><path class="cls-5" d="M146.35,128.81h-29v-6h29l.5-.78-9.16-9.4,4.22-4.43c4.56,4.56,9.36,8.66,13.16,13.54,1.34,1.72,1.37,6.22,0,7.93-3.81,4.88-8.63,9-13.28,13.61L138,139.06l-.84-.78,10.22-8Z"/><rect class="cls-4" x="47.82" y="58.72" width="60.6" height="82.49"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#4f80f9;}.cls-5{fill:#95b3fb;}</style></defs><title>4.纵向分割</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M146.8,44.94v65c-1.11.09-2,.23-2.91.23-28.84,0-57.68,0-86.53.06-2.2,0-3-.57-3-3.42,0-12.91-.13-25.82-.19-38.74,0-7.6,0-15.2,0-23.09Zm-5.24,25.79H59.78V83.91h81.78Zm0-19.74H59.77V64.05h81.78ZM59.79,90.38v13.19h81.66V90.38Z"/><path class="cls-5" d="M128.39,117.34v29l.67.46,9.34-9.16,3.87,4.65c-4,4-8,8.8-12.8,12.58-1.75,1.38-6.27,1.63-7.91.34-4.94-3.89-9.08-8.79-13.57-13.33l4.69-5,8.5,10.2,1-.63V117.34Z"/><path class="cls-5" d="M72.19,146.35v-29h6v29l.78.5,9.4-9.16,4.43,4.22c-4.56,4.56-8.66,9.36-13.54,13.16-1.72,1.34-6.22,1.37-7.93,0-4.88-3.81-9-8.63-13.61-13.28L61.94,138l.78-.84,8,10.22Z"/><rect class="cls-4" x="70.53" y="33.32" width="60.6" height="86.49" transform="translate(177.4 -24.26) rotate(90)"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#c5a9f1;}.cls-5{fill:#a375e9;}</style></defs><title>5文件数据</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><polygon class="cls-4" points="109.15 44.94 50.33 44.94 50.33 117.63 88.76 117.63 88.76 82.77 109.16 82.77 109.16 44.94 109.15 44.94"/><polygon class="cls-5" points="150.66 88.1 115.07 88.1 94.69 88.1 94.67 122.95 94.67 156.06 150.67 156.06 150.67 88.1 150.66 88.1"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 923 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#a375e9;}.cls-5{fill:#fff;}</style></defs><title>6数据校验</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M150.42,44.93H50.77a5.24,5.24,0,0,0-5.27,5.32V150.74a5.24,5.24,0,0,0,5.27,5.32h99.44a5.24,5.24,0,0,0,5.27-5.32V50.26A5,5,0,0,0,150.42,44.93Z"/><path class="cls-5" d="M136.29,77.79a5.36,5.36,0,0,0-7.54.44L99,111.73l-16.9-15a5.36,5.36,0,0,0-7.54.44h0a5.36,5.36,0,0,0,.44,7.54l20.83,18.53a5.36,5.36,0,0,0,6.75.28,5.29,5.29,0,0,0,1.05-.9l33.13-37.25A5.36,5.36,0,0,0,136.29,77.79Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#a375e9;}.cls-5{fill:#c5a9f1;}</style></defs><title>7单键查询</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M105.32,125.61,85.67,145.47,56,115.49,75.66,95.63a5.34,5.34,0,0,0,0-7.49,5.21,5.21,0,0,0-7.42,0L48.59,108a10.68,10.68,0,0,0,0,15l29.66,30a10.41,10.41,0,0,0,14.83,0l19.65-19.86a5.34,5.34,0,0,0,0-7.49A5.21,5.21,0,0,0,105.32,125.61ZM152.41,78,122.75,48a10.41,10.41,0,0,0-14.83,0L88.26,67.9A5.34,5.34,0,0,0,86.91,73a5.27,5.27,0,0,0,3.71,3.75,5.21,5.21,0,0,0,5.07-1.37l19.65-19.86,29.66,30-19.65,19.86a5.34,5.34,0,0,0,0,7.49,5.21,5.21,0,0,0,7.42,0L152.41,93a10.68,10.68,0,0,0,0-15Z"/><path class="cls-5" d="M111.62,89.26a5.2,5.2,0,0,0-7.42,0l-14.83,15a5.34,5.34,0,0,0,0,7.49,5.21,5.21,0,0,0,7.42,0l14.83-15A5.34,5.34,0,0,0,111.62,89.26Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#c5a9f1;}.cls-5{fill:#a375e9;}</style></defs><title>8个人服务</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><circle class="cls-4" cx="100.5" cy="78.54" r="28.71"/><path class="cls-5" d="M100.5,106.1c-27.34,0-50.16,13.23-55.56,45.06H156.07C150.66,119.33,127.84,106.1,100.5,106.1Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 829 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{opacity:0;}.cls-2,.cls-3{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-3{stroke-width:0.83px;}.cls-4{fill:#c5a9f1;}.cls-5{fill:#a375e9;}</style></defs><title>9外部服务</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-1"><path class="cls-2" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-2" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-3" x="44.93" y="44.93" width="111.13" height="111.13"/></g><path class="cls-4" d="M100.5,61C78.76,45.72,58.13,40.34,49.23,49.24S45.72,78.77,61,100.5A168.25,168.25,0,0,1,100.5,61Z"/><path class="cls-4" d="M121.9,121.9A163.41,163.41,0,0,1,100.5,140c21.74,15.28,42.37,20.66,51.27,11.76s3.51-29.53-11.77-51.26A163.45,163.45,0,0,1,121.9,121.9Z"/><path class="cls-5" d="M140,100.5c15.28-21.73,20.66-42.37,11.77-51.27S122.24,45.72,100.5,61a163.41,163.41,0,0,1,21.4,18.1A163.45,163.45,0,0,1,140,100.5Z"/><path class="cls-5" d="M61,100.5c-15.28,21.73-20.66,42.37-11.77,51.26S78.76,155.28,100.5,140a163.49,163.49,0,0,1-21.4-18.1A163.45,163.45,0,0,1,61,100.5Z"/><path class="cls-5" d="M140,100.5a163.45,163.45,0,0,0-18.1-21.4A163.41,163.41,0,0,0,100.5,61,168.25,168.25,0,0,0,61,100.5a163.45,163.45,0,0,0,18.1,21.4A163.49,163.49,0,0,0,100.5,140a163.41,163.41,0,0,0,21.4-18.1A163.45,163.45,0,0,0,140,100.5Zm-40.28,8a8,8,0,1,1,8-8A8,8,0,0,1,99.72,108.46Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,40 @@
|
|||
let dataA = {
|
||||
name: '流程A',
|
||||
nodeList: [
|
||||
{
|
||||
id: 'nodeA',
|
||||
name: '流程A-节点A',
|
||||
type: 'task',
|
||||
left: '26px',
|
||||
top: '161px',
|
||||
ico: 'el-icon-user-solid'
|
||||
},
|
||||
{
|
||||
id: 'nodeB',
|
||||
name: '流程A-节点B',
|
||||
type: 'task',
|
||||
left: '340px',
|
||||
top: '161px',
|
||||
ico: 'el-icon-goods'
|
||||
},
|
||||
{
|
||||
id: 'nodeC',
|
||||
name: '流程A-节点C',
|
||||
type: 'task',
|
||||
left: '739px',
|
||||
top: '161px',
|
||||
ico: 'el-icon-present'
|
||||
}
|
||||
],
|
||||
lineList: [{
|
||||
from: 'nodeA',
|
||||
to: 'nodeB'
|
||||
}, {
|
||||
from: 'nodeB',
|
||||
to: 'nodeC'
|
||||
}]
|
||||
}
|
||||
|
||||
export function getDataA () {
|
||||
return dataA
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
let dataB = {
|
||||
name: '流程B',
|
||||
nodeList: [
|
||||
{
|
||||
id: 'nodeA',
|
||||
name: '节点A-不可拖拽',
|
||||
type: 'task',
|
||||
left: '18px',
|
||||
top: '223px',
|
||||
ico: 'el-icon-user-solid',
|
||||
state: 'success',
|
||||
viewOnly: true
|
||||
},
|
||||
{
|
||||
id: 'nodeB',
|
||||
type: 'task',
|
||||
name: '流程B-节点B',
|
||||
left: '351px',
|
||||
top: '96px',
|
||||
ico: 'el-icon-goods',
|
||||
state: 'error'
|
||||
},
|
||||
{
|
||||
id: 'nodeC',
|
||||
name: '流程B-节点C',
|
||||
type: 'task',
|
||||
left: '354px',
|
||||
top: '351px',
|
||||
ico: 'el-icon-present',
|
||||
state: 'warning'
|
||||
}, {
|
||||
id: 'nodeD',
|
||||
name: '流程B-节点D',
|
||||
type: 'task',
|
||||
left: '723px',
|
||||
top: '215px',
|
||||
ico: 'el-icon-present',
|
||||
state: 'running'
|
||||
}
|
||||
],
|
||||
lineList: [{
|
||||
from: 'nodeA',
|
||||
to: 'nodeB',
|
||||
label: '条件A'
|
||||
}, {
|
||||
from: 'nodeA',
|
||||
to: 'nodeC',
|
||||
label: '条件B'
|
||||
}, {
|
||||
from: 'nodeB',
|
||||
to: 'nodeD'
|
||||
}, {
|
||||
from: 'nodeC',
|
||||
to: 'nodeD'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export function getDataB () {
|
||||
return dataB
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
let dataC = {
|
||||
name: '流程C',
|
||||
nodeList: [
|
||||
{
|
||||
id: 'nodeA',
|
||||
name: '流程C-节点A',
|
||||
type: 'task',
|
||||
left: '400px',
|
||||
top: '15px',
|
||||
ico: 'el-icon-user-solid'
|
||||
},
|
||||
{
|
||||
id: 'nodeB',
|
||||
name: '流程C-节点B',
|
||||
type: 'task',
|
||||
left: '400px',
|
||||
top: '200px',
|
||||
ico: 'el-icon-goods'
|
||||
},
|
||||
{
|
||||
id: 'nodeC',
|
||||
name: '流程C-节点C',
|
||||
type: 'task',
|
||||
left: '400px',
|
||||
top: '378px',
|
||||
ico: 'el-icon-present'
|
||||
}
|
||||
],
|
||||
lineList: [
|
||||
{
|
||||
from: 'nodeA',
|
||||
to: 'nodeB'
|
||||
}, {
|
||||
from: 'nodeB',
|
||||
to: 'nodeC'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export function getDataC () {
|
||||
return dataC
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
var dataD = {
|
||||
name: '流程D',
|
||||
nodeList: [
|
||||
{
|
||||
id: 'nodeA',
|
||||
name: '流程D-节点A',
|
||||
type: 'task',
|
||||
left: '18px',
|
||||
top: '223px',
|
||||
ico: 'el-icon-user-solid',
|
||||
state: 'success'
|
||||
},
|
||||
{
|
||||
id: 'nodeB',
|
||||
type: 'task',
|
||||
name: '流程D-节点B',
|
||||
left: '351px',
|
||||
top: '96px',
|
||||
ico: 'el-icon-goods',
|
||||
state: 'error'
|
||||
},
|
||||
{
|
||||
id: 'nodeC',
|
||||
name: '流程D-节点C',
|
||||
type: 'task',
|
||||
left: '354px',
|
||||
top: '351px',
|
||||
ico: 'el-icon-present',
|
||||
state: 'warning'
|
||||
}, {
|
||||
id: 'nodeD',
|
||||
name: '流程D-节点D',
|
||||
type: 'task',
|
||||
left: '723px',
|
||||
top: '215px',
|
||||
ico: 'el-icon-present',
|
||||
state: 'running'
|
||||
}
|
||||
],
|
||||
lineList: [{
|
||||
from: 'nodeA',
|
||||
to: 'nodeB',
|
||||
label: '直线,自定义线样式,固定锚点',
|
||||
connector: 'Straight',
|
||||
anchors: ['Top', 'Bottom'],
|
||||
paintStyle: {strokeWidth: 2, stroke: '#1879FF'}
|
||||
}, {
|
||||
from: 'nodeA',
|
||||
to: 'nodeC',
|
||||
label: '贝塞尔曲线,固定锚点',
|
||||
connector: 'Bezier',
|
||||
anchors: ['Bottom', 'Left']
|
||||
}, {
|
||||
from: 'nodeB',
|
||||
to: 'nodeD',
|
||||
label: '默认连线样式,动态锚点'
|
||||
}, {
|
||||
from: 'nodeC',
|
||||
to: 'nodeD',
|
||||
label: '默认连线样式,动态锚点'
|
||||
}, {
|
||||
from: 'nodeC',
|
||||
to: 'nodeC',
|
||||
label: '自连接'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export function getDataD() {
|
||||
return dataD
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
var dataE = {
|
||||
name: '流程E，力导图',
|
||||
nodeList: [
|
||||
{
|
||||
id: 'nodeA',
|
||||
name: '流程D-节点A',
|
||||
type: 'task',
|
||||
ico: 'el-icon-user-solid',
|
||||
state: 'success'
|
||||
},
|
||||
{
|
||||
id: 'nodeB',
|
||||
type: 'task',
|
||||
name: '流程D-节点B',
|
||||
ico: 'el-icon-goods',
|
||||
state: 'error'
|
||||
},
|
||||
{
|
||||
id: 'nodeC',
|
||||
name: '流程D-节点C',
|
||||
type: 'task',
|
||||
ico: 'el-icon-present',
|
||||
state: 'warning'
|
||||
}, {
|
||||
id: 'nodeD',
|
||||
name: '流程D-节点D',
|
||||
type: 'task',
|
||||
ico: 'el-icon-present',
|
||||
state: 'running'
|
||||
}
|
||||
],
|
||||
lineList: [{
|
||||
from: 'nodeA',
|
||||
to: 'nodeB'
|
||||
}, {
|
||||
from: 'nodeA',
|
||||
to: 'nodeC',
|
||||
label: 'hello'
|
||||
}, {
|
||||
from: 'nodeB',
|
||||
to: 'nodeD'
|
||||
}, {
|
||||
from: 'nodeC',
|
||||
to: 'nodeD'
|
||||
}, {
|
||||
from: 'nodeC',
|
||||
to: 'nodeC'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export function getDataE() {
|
||||
return dataE
|
||||
}
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
/**
|
||||
* 感谢 https://github.com/chaangliu/ForceDirectedLayout/blob/master/javascript/force-directed.js
|
||||
* A force directed graph layout implementation by liuchang on 2018/05/10.
|
||||
*/
|
||||
const CANVAS_WIDTH = 1000
|
||||
const CANVAS_HEIGHT = 1000
|
||||
let k
|
||||
let mNodeList = []
|
||||
let mEdgeList = []
|
||||
let mDxMap = {}
|
||||
let mDyMap = {}
|
||||
let mNodeMap = {}
|
||||
|
||||
export function ForceDirected(data = {}) {
|
||||
// generate nodes and edges
|
||||
// for (let i = 0; i < 20; i++) {
|
||||
// mNodeList.push(new Node(i))
|
||||
// }
|
||||
k = 0
|
||||
mNodeList = []
|
||||
mEdgeList = []
|
||||
mDxMap = {}
|
||||
mDyMap = {}
|
||||
mNodeMap = {}
|
||||
|
||||
let nodeList = data.nodeList
|
||||
for (let i = 0; i < nodeList.length; i++) {
|
||||
let node = nodeList[i]
|
||||
mNodeList.push(node)
|
||||
}
|
||||
|
||||
// for (let i = 0; i < 20; i++) {
|
||||
// let edgeCount = Math.random() * 8 + 1
|
||||
// for (let j = 0; j < edgeCount; j++) {
|
||||
// let targetId = Math.floor(Math.random() * 20)
|
||||
// let edge = new Edge(i, targetId)
|
||||
// mEdgeList.push(edge)
|
||||
// }
|
||||
// }
|
||||
// line 转 edge
|
||||
let lineList = data.lineList
|
||||
for (let i = 0; i < lineList.length; i++) {
|
||||
let line = lineList[i]
|
||||
let edge = new Edge(line.from, line.to)
|
||||
mEdgeList.push(edge)
|
||||
}
|
||||
|
||||
if (mNodeList && mEdgeList) {
|
||||
k = Math.sqrt(CANVAS_WIDTH * CANVAS_HEIGHT / mNodeList.length)
|
||||
}
|
||||
for (let i = 0; i < mNodeList.length; i++) {
|
||||
let node = mNodeList[i]
|
||||
if (node) {
|
||||
mNodeMap[node.id] = node
|
||||
}
|
||||
}
|
||||
|
||||
// 随机生成坐标. Generate coordinates randomly.
|
||||
let initialX, initialY, initialSize = 40.0
|
||||
for (let i in mNodeList) {
|
||||
initialX = CANVAS_WIDTH * 0.5
|
||||
initialY = CANVAS_HEIGHT * 0.5
|
||||
mNodeList[i].x = initialX + initialSize * (Math.random() - 0.5)
|
||||
mNodeList[i].y = initialY + initialSize * (Math.random() - 0.5)
|
||||
}
|
||||
|
||||
// 迭代200次. Iterate 200 times.
|
||||
for (let i = 0; i < 200; i++) {
|
||||
calculateRepulsive()
|
||||
calculateTraction()
|
||||
updateCoordinates()
|
||||
}
|
||||
// console.log(JSON.stringify(new Result(mNodeList, mEdgeList)))
|
||||
// 坐标添加px
|
||||
for (let i = 0; i < mNodeList.length; i++) {
|
||||
let node = mNodeList[i]
|
||||
node.left = node.x + 'px'
|
||||
node.top = node.y + 'px'
|
||||
node.x = undefined
|
||||
node.y = undefined
|
||||
}
|
||||
|
||||
data.nodeList = mNodeList
|
||||
|
||||
// console.log(data)
|
||||
return data
|
||||
}
|
||||
|
||||
function Node(id = null) {
|
||||
this.id = id
|
||||
this.x = 22
|
||||
this.y = null
|
||||
}
|
||||
|
||||
function Edge(source = null, target = null) {
|
||||
this.source = source
|
||||
this.target = target
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算两个Node的斥力产生的单位位移。
|
||||
* Calculate the displacement generated by the repulsive force between two nodes.*
|
||||
*/
|
||||
function calculateRepulsive() {
|
||||
let ejectFactor = 6
|
||||
let distX, distY, dist
|
||||
for (let i = 0; i < mNodeList.length; i++) {
|
||||
mDxMap[mNodeList[i].id] = 0.0
|
||||
mDyMap[mNodeList[i].id] = 0.0
|
||||
for (let j = 0; j < mNodeList.length; j++) {
|
||||
if (i !== j) {
|
||||
distX = mNodeList[i].x - mNodeList[j].x
|
||||
distY = mNodeList[i].y - mNodeList[j].y
|
||||
dist = Math.sqrt(distX * distX + distY * distY)
|
||||
}
|
||||
if (dist < 30) {
|
||||
ejectFactor = 5
|
||||
}
|
||||
if (dist > 0 && dist < 250) {
|
||||
let id = mNodeList[i].id
|
||||
mDxMap[id] = mDxMap[id] + distX / dist * k * k / dist * ejectFactor
|
||||
mDyMap[id] = mDyMap[id] + distY / dist * k * k / dist * ejectFactor
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算Edge的引力对两端Node产生的引力。
|
||||
* Calculate the traction force generated by the edge acted on the two nodes of its two ends.
|
||||
*/
|
||||
function calculateTraction() {
|
||||
let condenseFactor = 3
|
||||
let startNode, endNode
|
||||
for (let e = 0; e < mEdgeList.length; e++) {
|
||||
let eStartID = mEdgeList[e].source
|
||||
let eEndID = mEdgeList[e].target
|
||||
startNode = mNodeMap[eStartID]
|
||||
endNode = mNodeMap[eEndID]
|
||||
if (!startNode) {
|
||||
console.log('Cannot find start node id: ' + eStartID + ', please check it out.')
|
||||
return
|
||||
}
|
||||
if (!endNode) {
|
||||
console.log('Cannot find end node id: ' + eEndID + ', please check it out.')
|
||||
return
|
||||
}
|
||||
let distX, distY, dist
|
||||
distX = startNode.x - endNode.x
|
||||
distY = startNode.y - endNode.y
|
||||
dist = Math.sqrt(distX * distX + distY * distY)
|
||||
mDxMap[eStartID] = mDxMap[eStartID] - distX * dist / k * condenseFactor
|
||||
mDyMap[eStartID] = mDyMap[eStartID] - distY * dist / k * condenseFactor
|
||||
mDxMap[eEndID] = mDxMap[eEndID] + distX * dist / k * condenseFactor
|
||||
mDyMap[eEndID] = mDyMap[eEndID] + distY * dist / k * condenseFactor
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新坐标。
|
||||
* update the coordinates.
|
||||
*/
|
||||
function updateCoordinates() {
|
||||
let maxt = 4, maxty = 3 // Additional coefficients.
|
||||
for (let v = 0; v < mNodeList.length; v++) {
|
||||
let node = mNodeList[v]
|
||||
let dx = Math.floor(mDxMap[node.id])
|
||||
let dy = Math.floor(mDyMap[node.id])
|
||||
|
||||
if (dx < -maxt) dx = -maxt
|
||||
if (dx > maxt) dx = maxt
|
||||
if (dy < -maxty) dy = -maxty
|
||||
if (dy > maxty) dy = maxty
|
||||
node.x = node.x + dx >= CANVAS_WIDTH || node.x + dx <= 0 ? node.x - dx : node.x + dx
|
||||
node.y = node.y + dy >= CANVAS_HEIGHT || node.y + dy <= 0 ? node.y - dy : node.y + dy
|
||||
}
|
||||
}
|
||||
|
||||
function Result(nodes = null, links = null) {
|
||||
this.nodes = nodes
|
||||
this.links = links
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
title="帮助"
|
||||
:visible.sync="dialogVisible"
|
||||
width="70%"
|
||||
customClass="flowHelp"
|
||||
>
|
||||
<el-tabs tab-position="left">
|
||||
<el-tab-pane label="如何新增">
|
||||
<el-divider content-position="left">如何新增</el-divider>
|
||||
<div>按住鼠标拖拽左侧组件到中间画布中松开鼠标即可</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="如何删除">
|
||||
<el-divider content-position="left">页面删除</el-divider>
|
||||
<div>
|
||||
鼠标点中需要删除的节点，点击左上角的删除图标
|
||||
</div>
|
||||
<el-divider content-position="left">通过代码删除</el-divider>
|
||||
<pre>this.deleteNode(nodeId)</pre>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="如何移动">
|
||||
<el-divider content-position="left">如何移动</el-divider>
|
||||
<div>鼠标移动到节点中，当鼠标变为可拖拽的图标时按下鼠标移动到新的位置松开鼠标</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="如何连线">
|
||||
<el-divider content-position="left">如何连线</el-divider>
|
||||
<div>鼠标移动到节点中左侧的图标上，当鼠标变为+时按下鼠标移动到另一个节点中松开鼠标</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="如何添加条件">
|
||||
<el-divider content-position="left">如何添加条件</el-divider>
|
||||
<div>点击画布中的连线，在页面右侧会出现一个表单，输入新的条件，点击【保存】</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="如何进行后端交互存储">
|
||||
<el-divider content-position="left">如何进行后端交互存储</el-divider>
|
||||
<div>参考: https://gitee.com/xiaoka2017/easy-flow-sdk</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
init() {
|
||||
this.dialogVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.flowHelp {
|
||||
height: 80%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
/*画布容器*/
|
||||
#efContainer {
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/*顶部工具栏*/
|
||||
.ef-tooltar {
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
z-index: 3;
|
||||
border-bottom: 1px solid #DADCE0;
|
||||
}
|
||||
|
||||
.jtk-overlay {
|
||||
cursor: pointer;
|
||||
color: #4A4A4A;
|
||||
}
|
||||
|
||||
|
||||
/*节点菜单*/
|
||||
.ef-node-pmenu {
|
||||
cursor: pointer;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
width: 225px;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
color: #4A4A4A;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.ef-node-pmenu:hover {
|
||||
background-color: #E0E0E0;
|
||||
}
|
||||
|
||||
.ef-node-menu-li {
|
||||
color: #565758;
|
||||
width: 150px;
|
||||
border: 1px dashed #E0E3E7;
|
||||
margin: 5px 0 5px 0;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.ef-node-menu-li:hover {
|
||||
/* 设置移动样式*/
|
||||
cursor: move;
|
||||
background-color: #F0F7FF;
|
||||
border: 1px dashed #1879FF;
|
||||
border-left: 4px solid #1879FF;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.ef-node-menu-ul {
|
||||
list-style: none;
|
||||
padding-left: 20px
|
||||
}
|
||||
|
||||
/*节点的最外层容器*/
|
||||
.ef-node-container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 170px;
|
||||
height: 32px;
|
||||
border: 1px solid #E0E3E7;
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ef-node-container:hover {
|
||||
/* 设置移动样式*/
|
||||
cursor: move;
|
||||
background-color: #F0F7FF;
|
||||
/*box-shadow: #1879FF 0px 0px 12px 0px;*/
|
||||
background-color: #F0F7FF;
|
||||
border: 1px dashed #1879FF;
|
||||
}
|
||||
|
||||
/*节点激活样式*/
|
||||
.ef-node-active {
|
||||
background-color: #F0F7FF;
|
||||
/*box-shadow: #1879FF 0px 0px 12px 0px;*/
|
||||
background-color: #F0F7FF;
|
||||
border: 1px solid #1879FF;
|
||||
}
|
||||
|
||||
/*节点左侧的竖线*/
|
||||
.ef-node-left {
|
||||
width: 4px;
|
||||
background-color: #1879FF;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
/*节点左侧的图标*/
|
||||
.ef-node-left-ico {
|
||||
line-height: 32px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.ef-node-left-ico:hover {
|
||||
/* 设置拖拽的样式 */
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
/*节点显示的文字*/
|
||||
.ef-node-text {
|
||||
color: #565758;
|
||||
font-size: 12px;
|
||||
line-height: 32px;
|
||||
margin-left: 8px;
|
||||
width: 100px;
|
||||
/* 设置超出宽度文本显示方式*/
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*节点右侧的图标*/
|
||||
.ef-node-right-ico {
|
||||
line-height: 32px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
color: #84CF65;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*节点的几种状态样式*/
|
||||
.el-node-state-success {
|
||||
line-height: 32px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
color: #84CF65;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.el-node-state-error {
|
||||
line-height: 32px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
color: #F56C6C;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.el-node-state-warning {
|
||||
line-height: 32px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
color: #E6A23C;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.el-node-state-running {
|
||||
line-height: 32px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
color: #84CF65;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
/*node-form*/
|
||||
.ef-node-form-header {
|
||||
height: 32px;
|
||||
border-top: 1px solid #dce3e8;
|
||||
border-bottom: 1px solid #dce3e8;
|
||||
background: #F1F3F4;
|
||||
color: #000;
|
||||
line-height: 32px;
|
||||
padding-left: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ef-node-form-body {
|
||||
margin-top: 10px;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 连线中的label 样式*/
|
||||
.jtk-overlay.flowLabel:not(.aLabel) {
|
||||
padding: 4px 10px;
|
||||
background-color: white;
|
||||
color: #565758 !important;
|
||||
border: 1px solid #E0E3E7;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* label 为空的样式 */
|
||||
.emptyFlowLabel {
|
||||
}
|
||||
|
||||
|
||||
.ef-dot {
|
||||
background-color: #1879FF;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.ef-dot-hover {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.ef-rectangle {
|
||||
background-color: #1879FF;
|
||||
}
|
||||
|
||||
.ef-rectangle-hover {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.ef-img {
|
||||
}
|
||||
|
||||
.ef-img-hover {
|
||||
}
|
||||
|
||||
|
||||
.ef-drop-hover{
|
||||
border: 1px dashed #1879FF;
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
title="流程数据信息"
|
||||
:visible.sync="dialogVisible"
|
||||
width="70%"
|
||||
>
|
||||
<el-alert
|
||||
title="使用说明"
|
||||
type="warning"
|
||||
description="以下流程信息可以被存储起来，方便下一次流程加载"
|
||||
show-icon
|
||||
close-text="知道了"
|
||||
>
|
||||
</el-alert>
|
||||
<br/>
|
||||
<!--一个高亮显示的插件-->
|
||||
<codemirror
|
||||
:value="flowJsonData"
|
||||
:options="options"
|
||||
class="code"
|
||||
></codemirror>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'codemirror/lib/codemirror.css';
|
||||
import { codemirror } from 'vue-codemirror';
|
||||
//codemirror/mode/javascript/javascript.js
|
||||
require("codemirror/mode/javascript/javascript.js")
|
||||
|
||||
export default {
|
||||
props: {
|
||||
data: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
flowJsonData: {},
|
||||
options: {
|
||||
mode: {name: "javascript", json: true},
|
||||
lineNumbers: true
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
codemirror
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.dialogVisible = true
|
||||
this.flowJsonData = JSON.stringify(this.data, null, 4).toString()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,157 @@
|
|||
export const easyFlowMixin = {
|
||||
data() {
|
||||
return {
|
||||
jsplumbSetting: {
|
||||
// 动态锚点、位置自适应
|
||||
Anchors: ['Top', 'TopCenter', 'TopRight', 'TopLeft', 'Right', 'RightMiddle', 'Bottom', 'BottomCenter', 'BottomRight', 'BottomLeft', 'Left', 'LeftMiddle'],
|
||||
// 容器ID
|
||||
Container: 'efContainer',
|
||||
// 连线的样式，直线或者曲线等，可选值: StateMachine、Flowchart，Bezier、Straight
|
||||
Connector: ['Bezier', {curviness: 100}],
|
||||
// Connector: ['Straight', {stub: 20, gap: 1}],
|
||||
// Connector: ['Flowchart', {stub: 30, gap: 1, alwaysRespectStubs: false, midpoint: 0.5, cornerRadius: 10}],
|
||||
// Connector: ['StateMachine', {margin: 5, curviness: 10, proximityLimit: 80}],
|
||||
// 鼠标不能拖动删除线
|
||||
ConnectionsDetachable: false,
|
||||
// 删除线的时候节点不删除
|
||||
DeleteEndpointsOnDetach: false,
|
||||
/**
|
||||
* 连线的两端端点类型：圆形
|
||||
* radius: 圆的半径，越大圆越大
|
||||
*/
|
||||
// Endpoint: ['Dot', {radius: 5, cssClass: 'ef-dot', hoverClass: 'ef-dot-hover'}],
|
||||
/**
|
||||
* 连线的两端端点类型：矩形
|
||||
* height: 矩形的高
|
||||
* width: 矩形的宽
|
||||
*/
|
||||
// Endpoint: ['Rectangle', {height: 20, width: 20, cssClass: 'ef-rectangle', hoverClass: 'ef-rectangle-hover'}],
|
||||
/**
|
||||
* 图像端点
|
||||
*/
|
||||
// Endpoint: ['Image', {src: 'https://www.easyicon.net/api/resizeApi.php?id=1181776&size=32', cssClass: 'ef-img', hoverClass: 'ef-img-hover'}],
|
||||
/**
|
||||
* 空白端点
|
||||
*/
|
||||
Endpoint: ['Blank', {Overlays: ''}],
|
||||
// Endpoints: [['Dot', {radius: 5, cssClass: 'ef-dot', hoverClass: 'ef-dot-hover'}], ['Rectangle', {height: 20, width: 20, cssClass: 'ef-rectangle', hoverClass: 'ef-rectangle-hover'}]],
|
||||
/**
|
||||
* 连线的两端端点样式
|
||||
* fill: 颜色值，如：#12aabb，为空不显示
|
||||
* outlineWidth: 外边线宽度
|
||||
*/
|
||||
EndpointStyle: {fill: '#1879ffa1', outlineWidth: 1},
|
||||
// 是否打开jsPlumb的内部日志记录
|
||||
LogEnabled: true,
|
||||
/**
|
||||
* 连线的样式
|
||||
*/
|
||||
PaintStyle: {
|
||||
// 线的颜色
|
||||
stroke: '#E0E3E7',
|
||||
// 线的粗细，值越大线越粗
|
||||
strokeWidth: 1,
|
||||
// 设置外边线的颜色，默认设置透明，这样别人就看不见了，点击线的时候可以不用精确点击，参考 https://blog.csdn.net/roymno2/article/details/72717101
|
||||
outlineStroke: 'transparent',
|
||||
// 线外边的宽，值越大，线的点击范围越大
|
||||
outlineWidth: 10
|
||||
},
|
||||
DragOptions: {cursor: 'pointer', zIndex: 2000},
|
||||
/**
|
||||
* 叠加 参考： https://www.jianshu.com/p/d9e9918fd928
|
||||
*/
|
||||
Overlays: [
|
||||
// 箭头叠加
|
||||
['Arrow', {
|
||||
width: 10, // 箭头尾部的宽度
|
||||
length: 8, // 从箭头的尾部到头部的距离
|
||||
location: 1, // 位置，建议使用0～1之间
|
||||
direction: 1, // 方向，默认值为1（表示向前），可选-1（表示向后）
|
||||
foldback: 0.623 // 折回，也就是尾翼的角度，默认0.623，当为1时，为正三角
|
||||
}],
|
||||
// ['Diamond', {
|
||||
// events: {
|
||||
// dblclick: function (diamondOverlay, originalEvent) {
|
||||
// console.log('double click on diamond overlay for : ' + diamondOverlay.component)
|
||||
// }
|
||||
// }
|
||||
// }],
|
||||
['Label', {
|
||||
label: '',
|
||||
location: 0.1,
|
||||
cssClass: 'aLabel'
|
||||
}]
|
||||
],
|
||||
// 绘制图的模式 svg、canvas
|
||||
RenderMode: 'svg',
|
||||
// 鼠标滑过线的样式
|
||||
HoverPaintStyle: {stroke: '#b0b2b5', strokeWidth: 1},
|
||||
// 滑过锚点效果
|
||||
// EndpointHoverStyle: {fill: 'red'}
|
||||
Scope: 'jsPlumb_DefaultScope' // 范围，具有相同scope的点才可连接
|
||||
},
|
||||
/**
|
||||
* 连线参数
|
||||
*/
|
||||
jsplumbConnectOptions: {
|
||||
isSource: true,
|
||||
isTarget: true,
|
||||
// 动态锚点、提供了4个方向 Continuous、AutoDefault
|
||||
anchor: 'Continuous',
|
||||
// 设置连线上面的label样式
|
||||
labelStyle: {
|
||||
cssClass: 'flowLabel'
|
||||
},
|
||||
// 修改了jsplumb 源码，支持label 为空传入自定义style
|
||||
emptyLabelStyle: {
|
||||
cssClass: 'emptyFlowLabel'
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 源点配置参数
|
||||
*/
|
||||
jsplumbSourceOptions: {
|
||||
// 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
|
||||
filter: '.flow-node-drag',
|
||||
filterExclude: false,
|
||||
anchor: 'Continuous',
|
||||
// 是否允许自己连接自己
|
||||
allowLoopback: true,
|
||||
maxConnections: -1,
|
||||
onMaxConnections: function (info, e) {
|
||||
console.log(`超过了最大值连线: ${info.maxConnections}`)
|
||||
}
|
||||
},
|
||||
// 参考 https://www.cnblogs.com/mq0036/p/7942139.html
|
||||
jsplumbSourceOptions2: {
|
||||
// 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
|
||||
filter: '.flow-node-drag',
|
||||
filterExclude: false,
|
||||
// anchor: 'Continuous',
|
||||
// 是否允许自己连接自己
|
||||
allowLoopback: true,
|
||||
connector: ['Flowchart', {curviness: 50}],
|
||||
connectorStyle: {
|
||||
// 线的颜色
|
||||
stroke: 'red',
|
||||
// 线的粗细，值越大线越粗
|
||||
strokeWidth: 1,
|
||||
// 设置外边线的颜色，默认设置透明，这样别人就看不见了，点击线的时候可以不用精确点击，参考 https://blog.csdn.net/roymno2/article/details/72717101
|
||||
outlineStroke: 'transparent',
|
||||
// 线外边的宽，值越大，线的点击范围越大
|
||||
outlineWidth: 10
|
||||
},
|
||||
connectorHoverStyle: {stroke: 'red', strokeWidth: 2}
|
||||
},
|
||||
jsplumbTargetOptions: {
|
||||
// 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
|
||||
filter: '.flow-node-drag',
|
||||
filterExclude: false,
|
||||
// 是否允许自己连接自己
|
||||
anchor: 'Continuous',
|
||||
allowLoopback: true,
|
||||
dropOptions: {hoverClass: 'ef-drop-hover'}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<template>
|
||||
<div
|
||||
ref="node"
|
||||
:style="nodeContainerStyle"
|
||||
@click="clickNode"
|
||||
@mouseup="changeNodeSite"
|
||||
:class="nodeContainerClass"
|
||||
>
|
||||
<!-- 最左侧的那条竖线 -->
|
||||
<div class="ef-node-left"></div>
|
||||
<!-- 节点类型的图标 -->
|
||||
<div class="ef-node-left-ico flow-node-drag">
|
||||
<i :class="nodeIcoClass"></i>
|
||||
</div>
|
||||
<!-- 节点名称 -->
|
||||
<div class="ef-node-text" :show-overflow-tooltip="true">
|
||||
{{node.name}}
|
||||
</div>
|
||||
<!-- 节点状态图标 -->
|
||||
<div class="ef-node-right-ico">
|
||||
<i class="el-icon-circle-check el-node-state-success" v-show="node.state === 'success'"></i>
|
||||
<i class="el-icon-circle-close el-node-state-error" v-show="node.state === 'error'"></i>
|
||||
<i class="el-icon-warning-outline el-node-state-warning" v-show="node.state === 'warning'"></i>
|
||||
<i class="el-icon-loading el-node-state-running" v-show="node.state === 'running'"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
node: Object,
|
||||
activeElement: Object
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
nodeContainerClass() {
|
||||
return {
|
||||
'ef-node-container': true,
|
||||
'ef-node-active': this.activeElement.type == 'node' ? this.activeElement.nodeId === this.node.id : false
|
||||
}
|
||||
},
|
||||
// 节点容器样式
|
||||
nodeContainerStyle() {
|
||||
return {
|
||||
top: this.node.top,
|
||||
left: this.node.left
|
||||
}
|
||||
},
|
||||
nodeIcoClass() {
|
||||
var nodeIcoClass = {}
|
||||
nodeIcoClass[this.node.ico] = true
|
||||
// 添加该class可以推拽连线出来，viewOnly 可以控制节点是否运行编辑
|
||||
nodeIcoClass['flow-node-drag'] = this.node.viewOnly ? false : true
|
||||
return nodeIcoClass
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击节点
|
||||
clickNode() {
|
||||
this.$emit('clickNode', this.node.id)
|
||||
},
|
||||
// 鼠标移动后抬起
|
||||
changeNodeSite() {
|
||||
// 避免抖动
|
||||
if (this.node.left == this.$refs.node.style.left && this.node.top == this.$refs.node.style.top) {
|
||||
return;
|
||||
}
|
||||
this.$emit('changeNodeSite', {
|
||||
nodeId: this.node.id,
|
||||
left: this.$refs.node.style.left,
|
||||
top: this.$refs.node.style.top,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="ef-node-form">
|
||||
<div class="ef-node-form-header">
|
||||
编辑
|
||||
</div>
|
||||
<div class="ef-node-form-body">
|
||||
<el-form :model="node" ref="dataForm" label-width="80px" v-show="type === 'node'">
|
||||
<el-form-item label="类型">
|
||||
<el-input v-model="node.type" :disabled="true"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="node.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="left坐标">
|
||||
<el-input v-model="node.left" :disabled="true"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="top坐标">
|
||||
<el-input v-model="node.top" :disabled="true"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="ico图标">
|
||||
<el-input v-model="node.ico"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="node.state" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in stateList"
|
||||
:key="item.state"
|
||||
:label="item.label"
|
||||
:value="item.state">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="el-icon-close">重置</el-button>
|
||||
<el-button type="primary" icon="el-icon-check" @click="save">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form :model="line" ref="dataForm" label-width="80px" v-show="type === 'line'">
|
||||
<el-form-item label="条件">
|
||||
<el-input v-model="line.label"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="el-icon-close">重置</el-button>
|
||||
<el-button type="primary" icon="el-icon-check" @click="saveLine">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- <div class="el-node-form-tag"></div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: true,
|
||||
// node 或 line
|
||||
type: 'node',
|
||||
node: {},
|
||||
line: {},
|
||||
data: {},
|
||||
stateList: [{
|
||||
state: 'success',
|
||||
label: '成功'
|
||||
}, {
|
||||
state: 'warning',
|
||||
label: '警告'
|
||||
}, {
|
||||
state: 'error',
|
||||
label: '错误'
|
||||
}, {
|
||||
state: 'running',
|
||||
label: '运行中'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 表单修改，这里可以根据传入的ID进行业务信息获取
|
||||
* @param data
|
||||
* @param id
|
||||
*/
|
||||
nodeInit(data, id) {
|
||||
this.type = 'node'
|
||||
this.data = data
|
||||
data.nodeList.filter((node) => {
|
||||
if (node.id === id) {
|
||||
this.node = cloneDeep(node)
|
||||
}
|
||||
})
|
||||
},
|
||||
lineInit(line) {
|
||||
this.type = 'line'
|
||||
this.line = line
|
||||
},
|
||||
// 修改连线
|
||||
saveLine() {
|
||||
this.$emit('setLineLabel', this.line.from, this.line.to, this.line.label)
|
||||
},
|
||||
save() {
|
||||
this.data.nodeList.filter((node) => {
|
||||
if (node.id === this.node.id) {
|
||||
node.name = this.node.name
|
||||
node.left = this.node.left
|
||||
node.top = this.node.top
|
||||
node.ico = this.node.ico
|
||||
node.state = this.node.state
|
||||
this.$emit('repaintEverything')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-node-form-tag {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-left: -15px;
|
||||
height: 40px;
|
||||
width: 15px;
|
||||
background-color: #fbfbfb;
|
||||
border: 1px solid rgb(220, 227, 232);
|
||||
border-right: none;
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<div class="flow-menu" ref="tool">
|
||||
<div v-for="menu in menuList" :key="menu.id">
|
||||
<span class="ef-node-pmenu" @click="menu.open = !menu.open"><i :class="{'el-icon-caret-bottom': menu.open,'el-icon-caret-right': !menu.open}"></i> {{menu.name}}</span>
|
||||
<ul v-show="menu.open" class="ef-node-menu-ul">
|
||||
<draggable @end="end" @start="move" v-model="menu.children" :options="draggableOptions">
|
||||
<li v-for="subMenu in menu.children" class="ef-node-menu-li" :key="subMenu.id" :type="subMenu.type">
|
||||
<i :class="subMenu.ico"></i> {{subMenu.name}}
|
||||
</li>
|
||||
</draggable>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
var mousePosition = {
|
||||
left: -1,
|
||||
top: -1
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeNames: '1',
|
||||
// draggable配置参数参考 https://www.cnblogs.com/weixin186/p/10108679.html
|
||||
draggableOptions: {
|
||||
preventOnFilter: false,
|
||||
sort: false,
|
||||
disabled: false,
|
||||
ghostClass: 'tt',
|
||||
// 不使用H5原生的配置
|
||||
forceFallback: true,
|
||||
// 拖拽的时候样式
|
||||
// fallbackClass: 'flow-node-draggable'
|
||||
},
|
||||
// 默认打开的左侧菜单的id
|
||||
defaultOpeneds: ['1', '2'],
|
||||
menuList: [
|
||||
{
|
||||
id: '1',
|
||||
type: 'group',
|
||||
name: '开始节点',
|
||||
ico: 'el-icon-video-play',
|
||||
open: true,
|
||||
children: [
|
||||
{
|
||||
id: '11',
|
||||
type: 'timer',
|
||||
name: '数据接入',
|
||||
ico: 'el-icon-time',
|
||||
// 自定义覆盖样式
|
||||
style: {}
|
||||
}, {
|
||||
id: '12',
|
||||
type: 'task',
|
||||
name: '接口调用',
|
||||
ico: 'el-icon-odometer',
|
||||
// 自定义覆盖样式
|
||||
style: {}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
type: 'group',
|
||||
name: '结束节点',
|
||||
ico: 'el-icon-video-pause',
|
||||
open: true,
|
||||
children: [
|
||||
{
|
||||
id: '21',
|
||||
type: 'end',
|
||||
name: '流程结束',
|
||||
ico: 'el-icon-caret-right',
|
||||
// 自定义覆盖样式
|
||||
style: {}
|
||||
}, {
|
||||
id: '22',
|
||||
type: 'over',
|
||||
name: '数据清理',
|
||||
ico: 'el-icon-shopping-cart-full',
|
||||
// 自定义覆盖样式
|
||||
style: {}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
nodeMenu: {}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
created() {
|
||||
/**
|
||||
* 以下是为了解决在火狐浏览器上推拽时弹出tab页到搜索问题
|
||||
* @param event
|
||||
*/
|
||||
if (this.isFirefox()) {
|
||||
document.body.ondrop = function (event) {
|
||||
// 解决火狐浏览器无法获取鼠标拖拽结束的坐标问题
|
||||
mousePosition.left = event.layerX
|
||||
mousePosition.top = event.clientY - 50
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 根据类型获取左侧菜单对象
|
||||
getMenuByType(type) {
|
||||
for (let i = 0; i < this.menuList.length; i++) {
|
||||
let children = this.menuList[i].children;
|
||||
for (let j = 0; j < children.length; j++) {
|
||||
if (children[j].type === type) {
|
||||
return children[j]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 拖拽开始时触发
|
||||
move(evt, a, b, c) {
|
||||
var type = evt.item.attributes.type.nodeValue
|
||||
this.nodeMenu = this.getMenuByType(type)
|
||||
},
|
||||
// 拖拽结束时触发
|
||||
end(evt, e) {
|
||||
this.$emit('addNode', evt, this.nodeMenu, mousePosition)
|
||||
},
|
||||
// 是否是火狐浏览器
|
||||
isFirefox() {
|
||||
var userAgent = navigator.userAgent
|
||||
if (userAgent.indexOf("Firefox") > -1) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,546 @@
|
|||
<template>
|
||||
<div v-if="easyFlowVisible" style="height: calc(100vh);">
|
||||
<el-row>
|
||||
<!--顶部工具菜单-->
|
||||
<el-col :span="24">
|
||||
<div class="ef-tooltar">
|
||||
<el-link type="primary" :underline="false">{{data.name}}</el-link>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button type="text" icon="el-icon-delete" size="large" @click="deleteElement" :disabled="!this.activeElement.type"></el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button type="text" icon="el-icon-download" size="large" @click="downloadData"></el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button type="text" icon="el-icon-plus" size="large" @click="zoomAdd"></el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button type="text" icon="el-icon-minus" size="large" @click="zoomSub"></el-button>
|
||||
<div style="float: right;margin-right: 5px">
|
||||
<el-button type="info" plain round icon="el-icon-document" @click="dataInfo" size="mini">流程信息</el-button>
|
||||
<el-button type="primary" plain round @click="dataReloadA" icon="el-icon-refresh" size="mini">切换流程A</el-button>
|
||||
<el-button type="primary" plain round @click="dataReloadB" icon="el-icon-refresh" size="mini">切换流程B</el-button>
|
||||
<el-button type="primary" plain round @click="dataReloadC" icon="el-icon-refresh" size="mini">切换流程C</el-button>
|
||||
<el-button type="primary" plain round @click="dataReloadD" icon="el-icon-refresh" size="mini">自定义样式</el-button>
|
||||
<el-button type="primary" plain round @click="dataReloadE" icon="el-icon-refresh" size="mini">力导图</el-button>
|
||||
<el-button type="info" plain round icon="el-icon-document" @click="openHelp" size="mini">帮助</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="display: flex;height: calc(100% - 47px);">
|
||||
<div style="width: 230px;border-right: 1px solid #dce3e8;">
|
||||
<node-menu @addNode="addNode" ref="nodeMenu"></node-menu>
|
||||
</div>
|
||||
<div id="efContainer" ref="efContainer" class="container" v-flowDrag>
|
||||
<template v-for="node in data.nodeList">
|
||||
<flow-node
|
||||
:id="node.id"
|
||||
:key="node.id"
|
||||
:node="node"
|
||||
:activeElement="activeElement"
|
||||
@changeNodeSite="changeNodeSite"
|
||||
@nodeRightMenu="nodeRightMenu"
|
||||
@clickNode="clickNode"
|
||||
>
|
||||
</flow-node>
|
||||
</template>
|
||||
<!-- 给画布一个默认的宽度和高度 -->
|
||||
<div style="position:absolute;top: 2000px;left: 2000px;"> </div>
|
||||
</div>
|
||||
<!-- 右侧表单 -->
|
||||
<div style="width: 300px;border-left: 1px solid #dce3e8;background-color: #FBFBFB">
|
||||
<flow-node-form ref="nodeForm" @setLineLabel="setLineLabel" @repaintEverything="repaintEverything"></flow-node-form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 流程数据详情 -->
|
||||
<flow-info v-if="flowInfoVisible" ref="flowInfo" :data="data"></flow-info>
|
||||
<flow-help v-if="flowHelpVisible" ref="flowHelp"></flow-help>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
// import { jsPlumb } from 'jsplumb'
|
||||
// 使用修改后的jsplumb
|
||||
import './jsplumb'
|
||||
import { easyFlowMixin } from '@/components/ef/mixins'
|
||||
import flowNode from '@/components/ef/node'
|
||||
import nodeMenu from '@/components/ef/node_menu'
|
||||
import FlowInfo from '@/components/ef/info'
|
||||
import FlowHelp from '@/components/ef/help'
|
||||
import FlowNodeForm from './node_form'
|
||||
import lodash from 'lodash'
|
||||
import { getDataA } from './data_A'
|
||||
import { getDataB } from './data_B'
|
||||
import { getDataC } from './data_C'
|
||||
import { getDataD } from './data_D'
|
||||
import { getDataE } from './data_E'
|
||||
import { ForceDirected } from './force-directed'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// jsPlumb 实例
|
||||
jsPlumb: null,
|
||||
// 控制画布销毁
|
||||
easyFlowVisible: true,
|
||||
// 控制流程数据显示与隐藏
|
||||
flowInfoVisible: false,
|
||||
// 是否加载完毕标志位
|
||||
loadEasyFlowFinish: false,
|
||||
flowHelpVisible: false,
|
||||
// 数据
|
||||
data: {},
|
||||
// 激活的元素、可能是节点、可能是连线
|
||||
activeElement: {
|
||||
// 可选值 node 、line
|
||||
type: undefined,
|
||||
// 节点ID
|
||||
nodeId: undefined,
|
||||
// 连线ID
|
||||
sourceId: undefined,
|
||||
targetId: undefined
|
||||
},
|
||||
zoom: 0.5
|
||||
}
|
||||
},
|
||||
// 一些基础配置移动该文件中
|
||||
mixins: [easyFlowMixin],
|
||||
components: {
|
||||
draggable, flowNode, nodeMenu, FlowInfo, FlowNodeForm, FlowHelp
|
||||
},
|
||||
directives: {
|
||||
'flowDrag': {
|
||||
bind(el, binding, vnode, oldNode) {
|
||||
if (!binding) {
|
||||
return
|
||||
}
|
||||
el.onmousedown = (e) => {
|
||||
if (e.button == 2) {
|
||||
// 右键不管
|
||||
return
|
||||
}
|
||||
// 鼠标按下，计算当前原始距离可视区的高度
|
||||
let disX = e.clientX
|
||||
let disY = e.clientY
|
||||
el.style.cursor = 'move'
|
||||
|
||||
document.onmousemove = function (e) {
|
||||
// 移动时禁止默认事件
|
||||
e.preventDefault()
|
||||
const left = e.clientX - disX
|
||||
disX = e.clientX
|
||||
el.scrollLeft += -left
|
||||
|
||||
const top = e.clientY - disY
|
||||
disY = e.clientY
|
||||
el.scrollTop += -top
|
||||
}
|
||||
|
||||
document.onmouseup = function (e) {
|
||||
el.style.cursor = 'auto'
|
||||
document.onmousemove = null
|
||||
document.onmouseup = null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.jsPlumb = jsPlumb.getInstance()
|
||||
this.$nextTick(() => {
|
||||
// 默认加载流程A的数据、在这里可以根据具体的业务返回符合流程数据格式的数据即可
|
||||
this.dataReload(getDataB())
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 返回唯一标识
|
||||
getUUID() {
|
||||
return Math.random().toString(36).substr(3, 10)
|
||||
},
|
||||
jsPlumbInit() {
|
||||
this.jsPlumb.ready(() => {
|
||||
// 导入默认配置
|
||||
this.jsPlumb.importDefaults(this.jsplumbSetting)
|
||||
// 会使整个jsPlumb立即重绘。
|
||||
this.jsPlumb.setSuspendDrawing(false, true);
|
||||
// 初始化节点
|
||||
this.loadEasyFlow()
|
||||
// 单点击了连接线, https://www.cnblogs.com/ysx215/p/7615677.html
|
||||
this.jsPlumb.bind('click', (conn, originalEvent) => {
|
||||
this.activeElement.type = 'line'
|
||||
this.activeElement.sourceId = conn.sourceId
|
||||
this.activeElement.targetId = conn.targetId
|
||||
this.$refs.nodeForm.lineInit({
|
||||
from: conn.sourceId,
|
||||
to: conn.targetId,
|
||||
label: conn.getLabel()
|
||||
})
|
||||
})
|
||||
// 连线
|
||||
this.jsPlumb.bind("connection", (evt) => {
|
||||
let from = evt.source.id
|
||||
let to = evt.target.id
|
||||
if (this.loadEasyFlowFinish) {
|
||||
this.data.lineList.push({from: from, to: to})
|
||||
}
|
||||
})
|
||||
|
||||
// 删除连线回调
|
||||
this.jsPlumb.bind("connectionDetached", (evt) => {
|
||||
this.deleteLine(evt.sourceId, evt.targetId)
|
||||
})
|
||||
|
||||
// 改变线的连接节点
|
||||
this.jsPlumb.bind("connectionMoved", (evt) => {
|
||||
this.changeLine(evt.originalSourceId, evt.originalTargetId)
|
||||
})
|
||||
|
||||
// 连线右击
|
||||
this.jsPlumb.bind("contextmenu", (evt) => {
|
||||
console.log('contextmenu', evt)
|
||||
})
|
||||
|
||||
// 连线
|
||||
this.jsPlumb.bind("beforeDrop", (evt) => {
|
||||
let from = evt.sourceId
|
||||
let to = evt.targetId
|
||||
if (from === to) {
|
||||
this.$message.error('节点不支持连接自己')
|
||||
return false
|
||||
}
|
||||
if (this.hasLine(from, to)) {
|
||||
this.$message.error('该关系已存在,不允许重复创建')
|
||||
return false
|
||||
}
|
||||
if (this.hashOppositeLine(from, to)) {
|
||||
this.$message.error('不支持两个节点之间连线回环');
|
||||
return false
|
||||
}
|
||||
this.$message.success('连接成功')
|
||||
return true
|
||||
})
|
||||
|
||||
// beforeDetach
|
||||
this.jsPlumb.bind("beforeDetach", (evt) => {
|
||||
console.log('beforeDetach', evt)
|
||||
})
|
||||
this.jsPlumb.setContainer(this.$refs.efContainer)
|
||||
})
|
||||
},
|
||||
// 加载流程图
|
||||
loadEasyFlow() {
|
||||
// 初始化节点
|
||||
for (var i = 0; i < this.data.nodeList.length; i++) {
|
||||
let node = this.data.nodeList[i]
|
||||
// 设置源点，可以拖出线连接其他节点
|
||||
this.jsPlumb.makeSource(node.id, lodash.merge(this.jsplumbSourceOptions, {}))
|
||||
// // 设置目标点，其他源点拖出的线可以连接该节点
|
||||
this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions)
|
||||
if (!node.viewOnly) {
|
||||
this.jsPlumb.draggable(node.id, {
|
||||
containment: 'parent',
|
||||
stop: function (el) {
|
||||
// 拖拽节点结束后的对调
|
||||
console.log('拖拽结束: ', el)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
// 初始化连线
|
||||
for (var i = 0; i < this.data.lineList.length; i++) {
|
||||
let line = this.data.lineList[i]
|
||||
var connParam = {
|
||||
source: line.from,
|
||||
target: line.to,
|
||||
label: line.label ? line.label : '',
|
||||
connector: line.connector ? line.connector : '',
|
||||
anchors: line.anchors ? line.anchors : undefined,
|
||||
paintStyle: line.paintStyle ? line.paintStyle : undefined,
|
||||
}
|
||||
this.jsPlumb.connect(connParam, this.jsplumbConnectOptions)
|
||||
}
|
||||
this.$nextTick(function () {
|
||||
this.loadEasyFlowFinish = true
|
||||
})
|
||||
},
|
||||
// 设置连线条件
|
||||
setLineLabel(from, to, label) {
|
||||
var conn = this.jsPlumb.getConnections({
|
||||
source: from,
|
||||
target: to
|
||||
})[0]
|
||||
if (!label || label === '') {
|
||||
conn.removeClass('flowLabel')
|
||||
conn.addClass('emptyFlowLabel')
|
||||
} else {
|
||||
conn.addClass('flowLabel')
|
||||
}
|
||||
conn.setLabel({
|
||||
label: label,
|
||||
})
|
||||
this.data.lineList.forEach(function (line) {
|
||||
if (line.from == from && line.to == to) {
|
||||
line.label = label
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 删除激活的元素
|
||||
deleteElement() {
|
||||
if (this.activeElement.type === 'node') {
|
||||
this.deleteNode(this.activeElement.nodeId)
|
||||
} else if (this.activeElement.type === 'line') {
|
||||
this.$confirm('确定删除所点击的线吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
var conn = this.jsPlumb.getConnections({
|
||||
source: this.activeElement.sourceId,
|
||||
target: this.activeElement.targetId
|
||||
})[0]
|
||||
this.jsPlumb.deleteConnection(conn)
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
},
|
||||
// 删除线
|
||||
deleteLine(from, to) {
|
||||
this.data.lineList = this.data.lineList.filter(function (line) {
|
||||
if (line.from == from && line.to == to) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
},
|
||||
// 改变连线
|
||||
changeLine(oldFrom, oldTo) {
|
||||
this.deleteLine(oldFrom, oldTo)
|
||||
},
|
||||
// 改变节点的位置
|
||||
changeNodeSite(data) {
|
||||
for (var i = 0; i < this.data.nodeList.length; i++) {
|
||||
let node = this.data.nodeList[i]
|
||||
if (node.id === data.nodeId) {
|
||||
node.left = data.left
|
||||
node.top = data.top
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 拖拽结束后添加新的节点
|
||||
* @param evt
|
||||
* @param nodeMenu 被添加的节点对象
|
||||
* @param mousePosition 鼠标拖拽结束的坐标
|
||||
*/
|
||||
addNode(evt, nodeMenu, mousePosition) {
|
||||
var screenX = evt.originalEvent.clientX, screenY = evt.originalEvent.clientY
|
||||
let efContainer = this.$refs.efContainer
|
||||
var containerRect = efContainer.getBoundingClientRect()
|
||||
var left = screenX, top = screenY
|
||||
// 计算是否拖入到容器中
|
||||
if (left < containerRect.x || left > containerRect.width + containerRect.x || top < containerRect.y || containerRect.y > containerRect.y + containerRect.height) {
|
||||
this.$message.error("请把节点拖入到画布中")
|
||||
return
|
||||
}
|
||||
left = left - containerRect.x + efContainer.scrollLeft
|
||||
top = top - containerRect.y + efContainer.scrollTop
|
||||
// 居中
|
||||
left -= 85
|
||||
top -= 16
|
||||
var nodeId = this.getUUID()
|
||||
// 动态生成名字
|
||||
var origName = nodeMenu.name
|
||||
var nodeName = origName
|
||||
var index = 1
|
||||
while (index < 10000) {
|
||||
var repeat = false
|
||||
for (var i = 0; i < this.data.nodeList.length; i++) {
|
||||
let node = this.data.nodeList[i]
|
||||
if (node.name === nodeName) {
|
||||
nodeName = origName + index
|
||||
repeat = true
|
||||
}
|
||||
}
|
||||
if (repeat) {
|
||||
index++
|
||||
continue
|
||||
}
|
||||
break
|
||||
}
|
||||
var node = {
|
||||
id: nodeId,
|
||||
name: nodeName,
|
||||
type: nodeMenu.type,
|
||||
left: left + 'px',
|
||||
top: top + 'px',
|
||||
ico: nodeMenu.ico,
|
||||
state: 'success'
|
||||
}
|
||||
/**
|
||||
* 这里可以进行业务判断、是否能够添加该节点
|
||||
*/
|
||||
this.data.nodeList.push(node)
|
||||
this.$nextTick(function () {
|
||||
this.jsPlumb.makeSource(nodeId, this.jsplumbSourceOptions)
|
||||
this.jsPlumb.makeTarget(nodeId, this.jsplumbTargetOptions)
|
||||
this.jsPlumb.draggable(nodeId, {
|
||||
containment: 'parent',
|
||||
stop: function (el) {
|
||||
// 拖拽节点结束后的对调
|
||||
console.log('拖拽结束: ', el)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 删除节点
|
||||
* @param nodeId 被删除节点的ID
|
||||
*/
|
||||
deleteNode(nodeId) {
|
||||
this.$confirm('确定要删除节点' + nodeId + '?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
closeOnClickModal: false
|
||||
}).then(() => {
|
||||
/**
|
||||
* 这里需要进行业务判断，是否可以删除
|
||||
*/
|
||||
this.data.nodeList = this.data.nodeList.filter(function (node) {
|
||||
if (node.id === nodeId) {
|
||||
// 伪删除，将节点隐藏，否则会导致位置错位
|
||||
// node.show = false
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
this.$nextTick(function () {
|
||||
this.jsPlumb.removeAllEndpoints(nodeId);
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
return true
|
||||
},
|
||||
clickNode(nodeId) {
|
||||
this.activeElement.type = 'node'
|
||||
this.activeElement.nodeId = nodeId
|
||||
this.$refs.nodeForm.nodeInit(this.data, nodeId)
|
||||
},
|
||||
// 是否具有该线
|
||||
hasLine(from, to) {
|
||||
for (var i = 0; i < this.data.lineList.length; i++) {
|
||||
var line = this.data.lineList[i]
|
||||
if (line.from === from && line.to === to) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
},
|
||||
// 是否含有相反的线
|
||||
hashOppositeLine(from, to) {
|
||||
return this.hasLine(to, from)
|
||||
},
|
||||
nodeRightMenu(nodeId, evt) {
|
||||
this.menu.show = true
|
||||
this.menu.curNodeId = nodeId
|
||||
this.menu.left = evt.x + 'px'
|
||||
this.menu.top = evt.y + 'px'
|
||||
},
|
||||
repaintEverything() {
|
||||
this.jsPlumb.repaint()
|
||||
},
|
||||
// 流程数据信息
|
||||
dataInfo() {
|
||||
this.flowInfoVisible = true
|
||||
this.$nextTick(function () {
|
||||
this.$refs.flowInfo.init()
|
||||
})
|
||||
},
|
||||
// 加载流程图
|
||||
dataReload(data) {
|
||||
this.easyFlowVisible = false
|
||||
this.data.nodeList = []
|
||||
this.data.lineList = []
|
||||
this.$nextTick(() => {
|
||||
data = lodash.cloneDeep(data)
|
||||
this.easyFlowVisible = true
|
||||
this.data = data
|
||||
this.$nextTick(() => {
|
||||
this.jsPlumb = jsPlumb.getInstance()
|
||||
this.$nextTick(() => {
|
||||
this.jsPlumbInit()
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
// 模拟载入数据dataA
|
||||
dataReloadA() {
|
||||
this.dataReload(getDataA())
|
||||
},
|
||||
// 模拟载入数据dataB
|
||||
dataReloadB() {
|
||||
this.dataReload(getDataB())
|
||||
},
|
||||
// 模拟载入数据dataC
|
||||
dataReloadC() {
|
||||
this.dataReload(getDataC())
|
||||
},
|
||||
// 模拟载入数据dataD
|
||||
dataReloadD() {
|
||||
this.dataReload(getDataD())
|
||||
},
|
||||
// 模拟加载数据dataE，自适应创建坐标
|
||||
dataReloadE() {
|
||||
let dataE = getDataE()
|
||||
let tempData = lodash.cloneDeep(dataE)
|
||||
let data = ForceDirected(tempData)
|
||||
this.dataReload(data)
|
||||
this.$message({
|
||||
message: '力导图每次产生的布局是不一样的',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
zoomAdd() {
|
||||
if (this.zoom >= 1) {
|
||||
return
|
||||
}
|
||||
this.zoom = this.zoom + 0.1
|
||||
this.$refs.efContainer.style.transform = `scale(${this.zoom})`
|
||||
this.jsPlumb.setZoom(this.zoom)
|
||||
},
|
||||
zoomSub() {
|
||||
if (this.zoom <= 0) {
|
||||
return
|
||||
}
|
||||
this.zoom = this.zoom - 0.1
|
||||
this.$refs.efContainer.style.transform = `scale(${this.zoom})`
|
||||
this.jsPlumb.setZoom(this.zoom)
|
||||
},
|
||||
// 下载数据
|
||||
downloadData() {
|
||||
this.$confirm('确定要下载该流程数据吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
closeOnClickModal: false
|
||||
}).then(() => {
|
||||
var datastr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(this.data, null, '\t'));
|
||||
var downloadAnchorNode = document.createElement('a')
|
||||
downloadAnchorNode.setAttribute("href", datastr);
|
||||
downloadAnchorNode.setAttribute("download", 'data.json')
|
||||
downloadAnchorNode.click();
|
||||
downloadAnchorNode.remove();
|
||||
this.$message.success("正在下载中,请稍后...")
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
openHelp() {
|
||||
this.flowHelpVisible = true
|
||||
this.$nextTick(function () {
|
||||
this.$refs.flowHelp.init()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
// 是否具有该线
|
||||
export function hasLine(data, from, to) {
|
||||
for (let i = 0; i < data.lineList.length; i++) {
|
||||
let line = data.lineList[i]
|
||||
if (line.from === from && line.to === to) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 是否含有相反的线
|
||||
export function hashOppositeLine(data, from, to) {
|
||||
return hasLine(data, to, from)
|
||||
}
|
||||
|
||||
// 获取连线
|
||||
export function getConnector(jsp, from, to) {
|
||||
let connection = jsp.getConnections({
|
||||
source: from,
|
||||
target: to
|
||||
})[0]
|
||||
return connection
|
||||
}
|
||||
|
||||
// 获取唯一标识
|
||||
export function uuid() {
|
||||
return Math.random().toString(36).substr(3, 10)
|
||||
}
|
||||
17
src/main.js
17
src/main.js
|
|
@ -2,6 +2,9 @@ import Vue from 'vue'
|
|||
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
import Contextmenu from 'vue-contextmenujs'
|
||||
import ViewUI from 'view-design';
|
||||
|
||||
import Element from 'element-ui'
|
||||
import './assets/styles/element-variables.scss'
|
||||
|
||||
|
|
@ -16,8 +19,8 @@ import {download} from '@/utils/request'
|
|||
|
||||
import './assets/icons' // icon
|
||||
import './permission' // permission control
|
||||
import {getDicts} from "@/api/system/dict/data";
|
||||
import {getConfigKey} from "@/api/system/config";
|
||||
import {getDicts} from "/src/api/system/dict/data";
|
||||
import {getConfigKey} from "/src/api/system/config";
|
||||
import {addDateRange, handleTree, parseTime, resetForm, selectDictLabel, selectDictLabels} from "@/utils/muyu";
|
||||
// 分页组件
|
||||
import Pagination from "@/components/Pagination";
|
||||
|
|
@ -37,6 +40,10 @@ import DictTag from '@/components/DictTag'
|
|||
import VueMeta from 'vue-meta'
|
||||
// 字典数据组件
|
||||
import DictData from '@/components/DictData'
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import '@/components/ef/index.css'
|
||||
Vue.use(ElementUI, {size: 'small'})
|
||||
|
||||
// 全局方法挂载
|
||||
Vue.prototype.getDicts = getDicts
|
||||
|
|
@ -58,6 +65,8 @@ Vue.component('FileUpload', FileUpload)
|
|||
Vue.component('ImageUpload', ImageUpload)
|
||||
Vue.component('ImagePreview', ImagePreview)
|
||||
|
||||
Vue.use(Contextmenu);
|
||||
Vue.use(ViewUI);
|
||||
Vue.use(directive)
|
||||
Vue.use(plugins)
|
||||
Vue.use(VueMeta)
|
||||
|
|
@ -83,4 +92,6 @@ new Vue({
|
|||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
})
|
||||
}).$mount('#app')
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -40,6 +40,19 @@ export const constantRoutes = [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/easyFlow',// 这里的/serviceUse就是父级路由
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [// 父级路由下面还有子路由
|
||||
{
|
||||
path: 'index/:id',// 这个index可以自己定义
|
||||
component: () => import('@/components/ef/panel.vue'),
|
||||
name: "easyFlow",
|
||||
meta: { title: '设计', icon: 'dashboard', activeMenu: '/task/info' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: () => import('@/views/login'),
|
||||
|
|
@ -86,7 +99,7 @@ export const constantRoutes = [
|
|||
meta: {title: '个人中心', icon: 'user'}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
// 动态路由，基于用户权限动态去加载
|
||||
|
|
|
|||
|
|
@ -139,6 +139,12 @@
|
|||
type="text"
|
||||
@click="executeTask(scope.row)">执行</el-button>
|
||||
|
||||
<el-button
|
||||
icon="el-icon-pear"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="toDesign(scope.row)">任务设计</el-button>
|
||||
|
||||
<el-button
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
|
|
@ -187,30 +193,30 @@
|
|||
<!-- 添加任务详情设计-->
|
||||
<el-dialog title="添加表" :visible.sync="taskInputAdd">
|
||||
|
||||
<el-form label-width="80px" :model="taskInput" ref="queryForm" :inline="true" class="demo-form-inline" size="small">
|
||||
<el-form label-width="80px" :model="tableInfo" ref="queryForm" :inline="true" class="demo-form-inline" size="small">
|
||||
<el-form-item label="任务id">
|
||||
<el-input v-model="taskInput.taskId"></el-input>
|
||||
<el-input v-model="tableInfo.id"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="数据库id">
|
||||
<el-input v-model="taskInput.databaseId"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="数据库id">-->
|
||||
<!-- <el-input v-model="tableInfo.databaseId"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="数据表">
|
||||
<el-select @change="changeTableName(taskInput.tableName)" v-model="taskInput.tableName" placeholder="请选择等级">
|
||||
<el-select @change="changeTableName(tableInfo.tableName)" v-model="tableInfo.tableName" placeholder="请选择等级">
|
||||
<el-option label="请选择" value="0"></el-option>
|
||||
<span v-for="table in taskInfoList">
|
||||
<span v-for="table in tableList">
|
||||
<el-option :label=table.tableName :value=table.id :key=table.id></el-option>
|
||||
</span>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="表别名">
|
||||
<el-input v-model="taskInput.tableAsName"></el-input>
|
||||
<el-input v-model="tableInfo.tableRemark"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="taskInputAdd = false">取 消</el-button>
|
||||
<el-button type="primary" @click="addTaskInput(taskInput)">下一步</el-button>
|
||||
<el-button type="primary" @click="addTaskInput(tableInfo.id)">下一步</el-button>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -237,25 +243,7 @@
|
|||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="类型/长度"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="非空"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.name }}</span>
|
||||
<span style="margin-left: 10px">{{ scope.row.columnName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
|
@ -264,28 +252,91 @@
|
|||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.name }}</span>
|
||||
<span style="margin-left: 10px">{{ scope.row.columnRemark }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="处理规则"
|
||||
label="是否主键"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px" v-if="scope.row.weigh ==1 ">非空规则</span>
|
||||
<span style="margin-left: 10px" v-if="scope.row.weigh ==2 ">aa规则</span>
|
||||
<span style="margin-left: 10px" v-if="scope.row.weigh ==3 ">我啊规则</span>
|
||||
<span style="margin-left: 10px" v-if="scope.row.weigh ==4 ">收到规则</span>
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.isPrimary }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="表别名"
|
||||
label="字段类型"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.fieldAsEngineId"></el-input>
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.columnType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="字段长度"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.columnLength }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="小数"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.columnDecimals }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="非空"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.isNull }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="默认值"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.defaultValue }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="是否字典"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span style="margin-left: 10px">{{ scope.row.isDictionary }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- <el-table-column-->
|
||||
<!-- label="处理规则"-->
|
||||
<!-- width="180">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <span style="margin-left: 10px" v-if="scope.row.weigh ==1 ">非空规则</span>-->
|
||||
<!-- <span style="margin-left: 10px" v-if="scope.row.weigh ==2 ">aa规则</span>-->
|
||||
<!-- <span style="margin-left: 10px" v-if="scope.row.weigh ==3 ">我啊规则</span>-->
|
||||
<!-- <span style="margin-left: 10px" v-if="scope.row.weigh ==4 ">收到规则</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
|
||||
<!-- <el-table-column-->
|
||||
<!-- label="表别名"-->
|
||||
<!-- width="180">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <el-input v-model="scope.row.fieldAsEngineId"></el-input>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
</el-table>
|
||||
|
||||
|
||||
|
|
@ -312,12 +363,8 @@ import {insertAdd} from "@/api/etl/switch";
|
|||
import {getInfo} from "@/api/etl/switch";
|
||||
import {
|
||||
addTask,
|
||||
deleteById,
|
||||
deleteByTaskId,
|
||||
findByInputId,
|
||||
selectTaskList,
|
||||
taskInputList,
|
||||
updateById
|
||||
deleteByTaskId, findByTableId, findStructureList,
|
||||
selectTaskList, tableInfoList
|
||||
} from '@/api/task/task'
|
||||
|
||||
export default {
|
||||
|
|
@ -339,9 +386,8 @@ export default {
|
|||
taskAddReq:{},
|
||||
taskInputReq:{},
|
||||
taskList:[],
|
||||
taskInfoList:[],
|
||||
taskInput:{},
|
||||
tableList:[],
|
||||
tableInfo:{},
|
||||
structureList:[],
|
||||
};
|
||||
},
|
||||
|
|
@ -351,38 +397,43 @@ export default {
|
|||
watch: {},
|
||||
//方法集合",
|
||||
methods: {
|
||||
//跳转到任务设计界面
|
||||
toDesign(row){
|
||||
this.$router.push({path:'/easyFlow'});
|
||||
},
|
||||
|
||||
//选择数据表改变数据
|
||||
changeTableName(row){
|
||||
alert(row)
|
||||
findByInputId(row).then(res=>{
|
||||
this.taskInput = res.data;
|
||||
findByTableId(row).then(res=>{
|
||||
this.tableInfo = res.data;
|
||||
})
|
||||
},
|
||||
|
||||
//查询字段
|
||||
findByInputId(taskInfo){
|
||||
findByInputId(taskInfo.id).then(res=>{
|
||||
findStructureList(tableId){
|
||||
findStructureList(tableId).then(res=>{
|
||||
this.structureList = res.data;
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
//数据结构列表
|
||||
taskInputList(){
|
||||
taskInputList().then(res=>{
|
||||
this.taskInfoList = res.data;
|
||||
tableInfoList(){
|
||||
tableInfoList().then(res=>{
|
||||
this.tableList = res.data;
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
executeTask(){
|
||||
this.taskInputAdd = true;
|
||||
this.taskInputList();
|
||||
this.tableInfoList();
|
||||
},
|
||||
|
||||
|
||||
addTaskInput(taskInfo){
|
||||
this.taskInputAdd = false;
|
||||
this.findByInputId(taskInfo);
|
||||
this.findStructureList(taskInfo);
|
||||
this.taskInputFieldAdd = true;
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue