完成任务流程工具插件的实现
16
package.json
|
@ -48,6 +48,7 @@
|
|||
"js-beautify": "1.13.0",
|
||||
"js-cookie": "3.0.1",
|
||||
"jsencrypt": "3.0.0-rc.1",
|
||||
"jsplumb": "^2.15.6",
|
||||
"nprogress": "0.2.0",
|
||||
"quill": "1.3.7",
|
||||
"screenfull": "5.0.2",
|
||||
|
@ -56,9 +57,14 @@
|
|||
"vue-count-to": "1.0.13",
|
||||
"vue-cropper": "0.5.5",
|
||||
"vue-meta": "2.4.0",
|
||||
"vue-router": "3.4.9",
|
||||
"vuedraggable": "2.24.3",
|
||||
"vuex": "3.6.0"
|
||||
"jquery": "^3.5.1",
|
||||
"panzoom": "^9.4.1",
|
||||
"view-design": "^4.5.0-beta.3",
|
||||
"vue-click-outside": "^1.1.0",
|
||||
"vue-contextmenujs": "^1.3.13",
|
||||
"vue-router": "^3.2.0",
|
||||
"vuex": "^3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "4.4.6",
|
||||
|
@ -77,7 +83,11 @@
|
|||
"sass-loader": "10.1.1",
|
||||
"script-ext-html-webpack-plugin": "2.1.5",
|
||||
"svg-sprite-loader": "5.1.1",
|
||||
"vue-template-compiler": "2.6.12"
|
||||
"vue-template-compiler": "2.6.12",
|
||||
"@vue/cli-plugin-router": "~4.5.0",
|
||||
"@vue/cli-plugin-vuex": "~4.5.0",
|
||||
"less": "^3.0.4",
|
||||
"less-loader": "^5.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.9",
|
||||
|
|
|
@ -25,4 +25,13 @@ export default {
|
|||
#app .theme-picker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: #2c3e50;
|
||||
}
|
||||
</style>
|
||||
|
|
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 26 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>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 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 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:url(#未命名的渐变_6);}.cls-5{fill:url(#未命名的渐变_59);}.cls-6{fill:url(#未命名的渐变_19);}</style><linearGradient id="未命名的渐变_6" x1="63.76" y1="57.45" x2="127.58" y2="132.24" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e6edff"/><stop offset="1" stop-color="#abc2ff"/></linearGradient><linearGradient id="未命名的渐变_59" x1="93.93" y1="50.02" x2="118.21" y2="78.47" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9eb9ff"/><stop offset="1" stop-color="#849ff5"/></linearGradient><linearGradient id="未命名的渐变_19" x1="100.5" y1="81.87" x2="154.17" y2="81.87" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#7094ff"/><stop offset="1" stop-color="#4874f0"/></linearGradient></defs><title>侧边栏notebook</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="100.5" r="55.57"/><path class="cls-5" d="M141.72,63.24a55.42,55.42,0,0,0-41.22-18.3V100.5Z"/><path class="cls-6" d="M154.17,86.07a55.45,55.45,0,0,0-12.45-22.83L100.5,100.5Z"/></g></g></svg>
|
After Width: | Height: | Size: 1.6 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 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:url(#未命名的渐变_59);}.cls-5{fill:url(#未命名的渐变_62);}.cls-6{fill:url(#未命名的渐变_6);}</style><linearGradient id="未命名的渐变_59" x1="44.93" y1="100.5" x2="156.07" y2="100.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9eb9ff"/><stop offset="1" stop-color="#849ff5"/></linearGradient><linearGradient id="未命名的渐变_62" x1="61.6" y1="133.84" x2="139.4" y2="133.84" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4a78ff"/><stop offset="1" stop-color="#3f71ff"/></linearGradient><linearGradient id="未命名的渐变_6" x1="61.6" y1="67.16" x2="139.4" y2="67.16" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e6edff"/><stop offset="1" stop-color="#abc2ff"/></linearGradient></defs><title>侧边栏数据分析</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="72.72" width="111.13" height="55.56" rx="1" ry="1"/><rect class="cls-5" x="61.6" y="111.61" width="77.79" height="44.45" rx="4" ry="4"/><path class="cls-6" d="M98.12,88.77,62.8,69.15a2.25,2.25,0,0,1,0-4L98.12,45.55a4.93,4.93,0,0,1,4.77,0L138.2,65.17a2.25,2.25,0,0,1,0,4L102.88,88.77A4.93,4.93,0,0,1,98.12,88.77Z"/></g></g></svg>
|
After Width: | Height: | Size: 1.7 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 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:url(#未命名的渐变_6);}.cls-5{fill:url(#未命名的渐变_59);}.cls-6{fill:url(#未命名的渐变_6-2);}</style><linearGradient id="未命名的渐变_6" x1="52.07" y1="128.01" x2="148.93" y2="128.01" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e6edff"/><stop offset="1" stop-color="#abc2ff"/></linearGradient><linearGradient id="未命名的渐变_59" x1="52.07" y1="100.5" x2="148.93" y2="100.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9eb9ff"/><stop offset="1" stop-color="#849ff5"/></linearGradient><linearGradient id="未命名的渐变_6-2" x1="52.07" y1="72.99" x2="148.93" y2="72.99" xlink:href="#未命名的渐变_6"/></defs><title>侧边栏数据集</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="52.07 128.01 100.34 99.96 148.93 128.01 100.66 156.06 52.07 128.01"/><polygon class="cls-5" points="52.07 100.5 100.34 72.45 148.93 100.5 100.66 128.55 52.07 100.5"/><polygon class="cls-6" points="52.07 72.99 100.34 44.94 148.93 72.99 100.66 101.04 52.07 72.99"/></g></g></svg>
|
After Width: | Height: | Size: 1.6 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 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:url(#未命名的渐变_6);}.cls-5{fill:url(#未命名的渐变_59);}.cls-6{fill:url(#未命名的渐变_19);}</style><linearGradient id="未命名的渐变_6" x1="44.94" y1="80.03" x2="150.22" y2="80.03" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e6edff"/><stop offset="1" stop-color="#abc2ff"/></linearGradient><linearGradient id="未命名的渐变_59" x1="44.93" y1="132.67" x2="74.18" y2="132.67" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9eb9ff"/><stop offset="1" stop-color="#849ff5"/></linearGradient><linearGradient id="未命名的渐变_19" x1="85.88" y1="135.59" x2="156.07" y2="135.59" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#7094ff"/><stop offset="1" stop-color="#4874f0"/></linearGradient></defs><title>侧边栏模型跑批</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="M73.18,74.18H45.94a1,1,0,0,1-1-1V51.78a1,1,0,0,1,1-1H73.18a1,1,0,0,1,1,1v21.4A1,1,0,0,1,73.18,74.18Zm77-1V51.78a1,1,0,0,0-1-1H86.88a1,1,0,0,0-1,1v21.4a1,1,0,0,0,1,1h62.34A1,1,0,0,0,150.22,73.18Zm-76,35.09V86.88a1,1,0,0,0-1-1H45.94a1,1,0,0,0-1,1v21.4a1,1,0,0,0,1,1H73.18A1,1,0,0,0,74.18,108.27Zm76,0V86.88a1,1,0,0,0-1-1H86.88a1,1,0,0,0-1,1v21.4a1,1,0,0,0,1,1h62.34A1,1,0,0,0,150.22,108.27Z"/><rect class="cls-5" x="44.93" y="120.97" width="29.24" height="23.4" rx="1" ry="1"/><path class="cls-6" d="M144.37,135.81v-9a5.85,5.85,0,0,0-5.85-5.85H91.73a5.85,5.85,0,0,0-5.85,5.85v11.7a5.85,5.85,0,0,0,5.85,5.85h37c19.43,0,27.36,5.85,27.36,5.85S152.91,140.85,144.37,135.81Z"/></g></g></svg>
|
After Width: | Height: | Size: 2.1 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 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:url(#未命名的渐变_59);}.cls-5{fill:url(#未命名的渐变_6);}.cls-6{fill:url(#未命名的渐变_6-2);}.cls-7{fill:url(#未命名的渐变_62);}.cls-8{fill:url(#未命名的渐变_62-2);}.cls-9{fill:url(#未命名的渐变_62-3);}.cls-10{fill:url(#未命名的渐变_62-4);}.cls-11{fill:url(#未命名的渐变_6-3);}</style><linearGradient id="未命名的渐变_59" x1="44.93" y1="87" x2="144.9" y2="87" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9eb9ff"/><stop offset="1" stop-color="#849ff5"/></linearGradient><linearGradient id="未命名的渐变_6" x1="44.93" y1="59.23" x2="144.9" y2="59.23" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e6edff"/><stop offset="1" stop-color="#abc2ff"/></linearGradient><linearGradient id="未命名的渐变_6-2" x1="44.93" y1="114.77" x2="144.9" y2="114.77" gradientTransform="translate(-19.85 209.68) rotate(-90)" xlink:href="#未命名的渐变_6"/><linearGradient id="未命名的渐变_62" x1="56.04" y1="59.23" x2="78.26" y2="59.23" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4a78ff"/><stop offset="1" stop-color="#3f71ff"/></linearGradient><linearGradient id="未命名的渐变_62-2" x1="56.04" y1="87" x2="78.26" y2="87" xlink:href="#未命名的渐变_62"/><linearGradient id="未命名的渐变_62-3" x1="56.04" y1="114.77" x2="78.26" y2="114.77" xlink:href="#未命名的渐变_62"/><linearGradient id="未命名的渐变_62-4" x1="2414.35" y1="-550.36" x2="2484.55" y2="-550.36" gradientTransform="translate(-424.82 -2328.9) rotate(90)" xlink:href="#未命名的渐变_62"/><linearGradient id="未命名的渐变_6-3" x1="125.53" y1="103.43" x2="125.53" y2="137.68" xlink:href="#未命名的渐变_6"/></defs><title>侧边栏测试任务</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="73.11" width="99.97" height="27.77"/><path class="cls-5" d="M45.93,45.34h98a1,1,0,0,1,1,1V73.11a0,0,0,0,1,0,0h-100a0,0,0,0,1,0,0V46.34A1,1,0,0,1,45.93,45.34Z"/><path class="cls-6" d="M81,64.78H107.8a1,1,0,0,1,1,1v98a1,1,0,0,1-1,1H81a0,0,0,0,1,0,0v-100A0,0,0,0,1,81,64.78Z" transform="translate(209.68 19.85) rotate(90)"/><rect class="cls-7" x="56.04" y="53.68" width="22.21" height="11.11" rx="1" ry="1"/><rect class="cls-8" x="56.04" y="81.44" width="22.21" height="11.11" rx="1" ry="1"/><rect class="cls-9" x="56.04" y="109.21" width="22.21" height="11.11" rx="1" ry="1"/><path class="cls-10" d="M156.07,137.61V103.5a1,1,0,0,0-.5-.87L126,85.59a1,1,0,0,0-1,0L95.5,102.64a1,1,0,0,0-.5.87v34.1a1,1,0,0,0,.5.87L125,155.52a1,1,0,0,0,1,0l29.53-17.05A1,1,0,0,0,156.07,137.61Z"/><path class="cls-11" d="M132.11,104.24h0a2.53,2.53,0,0,1,4.26,2.46h0A9,9,0,0,0,143,118.09h0a2.53,2.53,0,0,1,0,4.92h0a9,9,0,0,0-6.58,11.39h0a2.53,2.53,0,0,1-4.26,2.46h0a9,9,0,0,0-13.15,0h0a2.53,2.53,0,0,1-4.26-2.46h0A9,9,0,0,0,108.12,123h0a2.53,2.53,0,0,1,0-4.92h0a9,9,0,0,0,6.58-11.39h0a2.53,2.53,0,0,1,4.26-2.46h0A9,9,0,0,0,132.11,104.24Zm-6.58,8.24a8.07,8.07,0,1,0,8.07,8.07A8.07,8.07,0,0,0,125.53,112.48Z"/></g></g></svg>
|
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 55 KiB |
After Width: | Height: | Size: 95 KiB |
|
@ -0,0 +1,8 @@
|
|||
//生成指定长度的唯一ID
|
||||
export function GenNonDuplicateID(randomLength) {
|
||||
return Number(
|
||||
Math.random()
|
||||
.toString()
|
||||
.substr(3, randomLength) + Date.now()
|
||||
).toString(36);
|
||||
}
|
|
@ -52,13 +52,17 @@
|
|||
<el-radio-button label="1">通知</el-radio-button>
|
||||
</el-radio-group>
|
||||
<br>
|
||||
<div style="padding: 10px;margin: 10px; border: 2px" v-for="notice in noticeList">
|
||||
<div style="padding: 10px;margin: 10px; border: 2px"
|
||||
v-for="notice in noticeList"
|
||||
v-show="
|
||||
(messType === '' || notice.noticeType === messType) &&
|
||||
(readingStatu === '' || notice.sta == readingStatu)"
|
||||
>
|
||||
<el-descriptions
|
||||
class="margin-top"
|
||||
:title="notice.noticeTitle"
|
||||
size="small"
|
||||
:column="2"
|
||||
v-show="(messType === '' || notice.noticeType === messType) && (readingStatu === '' || notice.sta == readingStatu)"
|
||||
border>
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="small" @click="findNoticeByNoticeIdAndSta(notice.noticeId,notice.sta)">阅读</el-button>
|
||||
|
@ -156,7 +160,7 @@ import Hamburger from '@/components/Hamburger'
|
|||
import Screenfull from '@/components/Screenfull'
|
||||
import SizeSelect from '@/components/SizeSelect'
|
||||
import Search from '@/components/HeaderSearch'
|
||||
import { findNoticeByNoticeId, findNoticeByNoticeIdAndUserId, listNoticeByUserId } from '../../api/system/notice'
|
||||
import { findNoticeByNoticeId, findNoticeByNoticeIdAndUserId, listNoticeByUserId } from '@/api/system/notice'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
|
@ -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'
|
||||
|
||||
|
@ -58,6 +61,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 +88,4 @@ new Vue({
|
|||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
})
|
||||
}).$mount('#app')
|
||||
|
|
|
@ -73,7 +73,7 @@ service.interceptors.request.use(config => {
|
|||
|
||||
// 响应拦截器
|
||||
service.interceptors.response.use(res => {
|
||||
debugger
|
||||
|
||||
// 未设置状态码则默认成功状态
|
||||
const code = res.data.code || 200;
|
||||
// 获取错误信息
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
const elementIcons = ['platform-eleme', 'eleme', 'delete-solid', 'delete', 's-tools', 'setting', 'user-solid', 'user', 'phone', 'phone-outline', 'more', 'more-outline', 'star-on', 'star-off', 's-goods', 'goods', 'warning', 'warning-outline', 'question', 'info', 'remove', 'circle-plus', 'success', 'error', 'zoom-in', 'zoom-out', 'remove-outline', 'circle-plus-outline', 'circle-check', 'circle-close', 's-help', 'help', 'minus', 'plus', 'check', 'close', 'picture', 'picture-outline', 'picture-outline-round', 'upload', 'upload2', 'download', 'camera-solid', 'camera', 'video-camera-solid', 'video-camera', 'message-solid', 'bell', 's-cooperation', 's-order', 's-platform', 's-fold', 's-unfold', 's-operation', 's-promotion', 's-home', 's-release', 's-ticket', 's-management', 's-open', 's-shop', 's-marketing', 's-flag', 's-comment', 's-finance', 's-claim', 's-custom', 's-opportunity', 's-data', 's-check', 's-grid', 'menu', 'share', 'd-caret', 'caret-left', 'caret-right', 'caret-bottom', 'caret-top', 'bottom-left', 'bottom-right', 'back', 'right', 'bottom', 'top', 'top-left', 'top-right', 'arrow-left', 'arrow-right', 'arrow-down', 'arrow-up', 'd-arrow-left', 'd-arrow-right', 'video-pause', 'video-play', 'refresh', 'refresh-right', 'refresh-left', 'finished', 'sort', 'sort-up', 'sort-down', 'rank', 'loading', 'view', 'c-scale-to-original', 'date', 'edit', 'edit-outline', 'folder', 'folder-opened', 'folder-add', 'folder-remove', 'folder-delete', 'folder-checked', 'tickets', 'document-remove', 'document-delete', 'document-copy', 'document-checked', 'document', 'document-add', 'printer', 'paperclip', 'takeaway-box', 'search', 'monitor', 'attract', 'mobile', 'scissors', 'umbrella', 'headset', 'brush', 'mouse', 'coordinate', 'magic-stick', 'reading', 'data-line', 'data-board', 'pie-chart', 'data-analysis', 'collection-tag', 'film', 'suitcase', 'suitcase-1', 'receiving', 'collection', 'files', 'notebook-1', 'notebook-2', 'toilet-paper', 'office-building', 'school', 'table-lamp', 'house', 'no-smoking', 'smoking', 'shopping-cart-full', 'shopping-cart-1', 'shopping-cart-2', 'shopping-bag-1', 'shopping-bag-2', 'sold-out', 'sell', 'present', 'box', 'bank-card', 'money', 'coin', 'wallet', 'discount', 'price-tag', 'news', 'guide', 'male', 'female', 'thumb', 'cpu', 'link', 'connection', 'open', 'turn-off', 'set-up', 'chat-round', 'chat-line-round', 'chat-square', 'chat-dot-round', 'chat-dot-square', 'chat-line-square', 'message', 'postcard', 'position', 'turn-off-microphone', 'microphone', 'close-notification', 'bangzhu', 'time', 'odometer', 'crop', 'aim', 'switch-button', 'full-screen', 'copy-document', 'mic', 'stopwatch', 'medal-1', 'medal', 'trophy', 'trophy-1', 'first-aid-kit', 'discover', 'place', 'location', 'location-outline', 'location-information', 'add-location', 'delete-location', 'map-location', 'alarm-clock', 'timer', 'watch-1', 'watch', 'lock', 'unlock', 'key', 'service', 'mobile-phone', 'bicycle', 'truck', 'ship', 'basketball', 'football', 'soccer', 'baseball', 'wind-power', 'light-rain', 'lightning', 'heavy-rain', 'sunrise', 'sunrise-1', 'sunset', 'sunny', 'cloudy', 'partly-cloudy', 'cloudy-and-sunny', 'moon', 'moon-night', 'dish', 'dish-1', 'food', 'chicken', 'fork-spoon', 'knife-fork', 'burger', 'tableware', 'sugar', 'dessert', 'ice-cream', 'hot-water', 'water-cup', 'coffee-cup', 'cold-drink', 'goblet', 'goblet-full', 'goblet-square', 'goblet-square-full', 'refrigerator', 'grape', 'watermelon', 'cherry', 'apple', 'pear', 'orange', 'coffee', 'ice-tea', 'ice-drink', 'milk-tea', 'potato-strips', 'lollipop', 'ice-cream-square', 'ice-cream-round']
|
||||
|
||||
export default elementIcons
|
|
@ -1,87 +0,0 @@
|
|||
<template>
|
||||
<div class="icons-container">
|
||||
<aside>
|
||||
<a href="#" target="_blank">Add and use
|
||||
</a>
|
||||
</aside>
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="Icons">
|
||||
<div v-for="item of svgIcons" :key="item">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
{{ generateIconCode(item) }}
|
||||
</div>
|
||||
<div class="icon-item">
|
||||
<svg-icon :icon-class="item" class-name="disabled"/>
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Element-UI Icons">
|
||||
<div v-for="item of elementIcons" :key="item">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
{{ generateElementIconCode(item) }}
|
||||
</div>
|
||||
<div class="icon-item">
|
||||
<i :class="'el-icon-' + item"/>
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import svgIcons from './svg-icons'
|
||||
import elementIcons from './element-icons'
|
||||
|
||||
export default {
|
||||
name: 'Icons',
|
||||
data() {
|
||||
return {
|
||||
svgIcons,
|
||||
elementIcons
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateIconCode(symbol) {
|
||||
return `<svg-icon icon-class="${symbol}" />`
|
||||
},
|
||||
generateElementIconCode(symbol) {
|
||||
return `<i class="el-icon-${symbol}" />`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icons-container {
|
||||
margin: 10px 20px 0;
|
||||
overflow: hidden;
|
||||
|
||||
.icon-item {
|
||||
margin: 20px;
|
||||
height: 85px;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
float: left;
|
||||
font-size: 30px;
|
||||
color: #24292e;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,10 +0,0 @@
|
|||
const req = require.context('../../../assets/icons/svg', false, /\.svg$/)
|
||||
const requireAll = requireContext => requireContext.keys()
|
||||
|
||||
const re = /\.\/(.*)\.svg/
|
||||
|
||||
const svgIcons = requireAll(req).map(i => {
|
||||
return i.match(re)[1]
|
||||
})
|
||||
|
||||
export default svgIcons
|
|
@ -0,0 +1,177 @@
|
|||
<template>
|
||||
<div class="flow_region">
|
||||
<div class="nodes-wrap">
|
||||
<div v-for="item in nodeTypeList" :key="item.type" class="node" draggable="true" @dragstart="drag($event, item)">
|
||||
<div class="log">
|
||||
<img :src="item.logImg" alt="">
|
||||
</div>
|
||||
<div class="name">{{item.typeName}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="flowWrap" ref="flowWrap" class="flow-wrap" @drop="drop($event)" @dragover="allowDrop($event)"
|
||||
style="width: 98%;height: 790px;margin-left: 10px;margin-right: 10px;">
|
||||
<div id="flow">
|
||||
<div v-show="auxiliaryLine.isShowXLine" class="auxiliary-line-x" :style="{width: auxiliaryLinePos.width, top:auxiliaryLinePos.y + 'px', left: auxiliaryLinePos.offsetX + 'px'}"></div>
|
||||
<div v-show="auxiliaryLine.isShowYLine" class="auxiliary-line-y" :style="{height: auxiliaryLinePos.height, left:auxiliaryLinePos.x + 'px', top: auxiliaryLinePos.offsetY + 'px'}"></div>
|
||||
<flowNode v-for="item in data.nodeList" :id="item.id" :key="item.id" :node="item" @setNodeName="setNodeName" @deleteNode = "deleteNode" @changeLineState="changeLineState"></flowNode>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { jsPlumb } from "jsplumb"
|
||||
import { nodeTypeList } from './config/init'
|
||||
import { jsplumbSetting, jsplumbConnectOptions, jsplumbSourceOptions, jsplumbTargetOptions } from './config/commonConfig'
|
||||
import methods from "./config/methods"
|
||||
import data from './config/data.json'
|
||||
import flowNode from "./components/node-item"
|
||||
export default {
|
||||
name: "FlowEdit",
|
||||
components: {
|
||||
flowNode
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
jsPlumb: null,
|
||||
currentItem: null,
|
||||
nodeTypeList: nodeTypeList,
|
||||
nodeTypeObj: {},
|
||||
data: {
|
||||
nodeList:[],
|
||||
lineList:[]
|
||||
},
|
||||
selectedList: [],
|
||||
jsplumbSetting: jsplumbSetting,
|
||||
jsplumbConnectOptions: jsplumbConnectOptions,
|
||||
jsplumbSourceOptions: jsplumbSourceOptions,
|
||||
jsplumbTargetOptions: jsplumbTargetOptions,
|
||||
auxiliaryLine: { isShowXLine: false, isShowYLine: false}, //对齐辅助线是否显示
|
||||
auxiliaryLinePos: { width: '100%', height: '100%', offsetX: 0, offsetY: 0, x: 20, y: 20 },
|
||||
commonGrid: [5, 5], //节点移动最小距离
|
||||
selectModuleFlag: false, //多选标识
|
||||
rectAngle: {
|
||||
px: '', //多选框绘制时的起始点横坐标
|
||||
py: '', //多选框绘制时的起始点纵坐标
|
||||
left: 0,
|
||||
top: 0,
|
||||
height: 0,
|
||||
width: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.jsPlumb = jsPlumb.getInstance();
|
||||
this.initNodeTypeObj()
|
||||
this.initNode()
|
||||
this.fixNodesPosition()
|
||||
this.$nextTick(() => {
|
||||
this.init();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...methods,
|
||||
initNodeTypeObj() {
|
||||
nodeTypeList.map(v => {
|
||||
this.nodeTypeObj[v.type] = v
|
||||
})
|
||||
},
|
||||
initNode() {
|
||||
this.data.lineList = data.lineList
|
||||
data.nodeList.map(v => {
|
||||
v.logImg = this.nodeTypeObj[v.type].logImg
|
||||
v.log_bg_color = this.nodeTypeObj[v.type].log_bg_color
|
||||
this.data.nodeList.push(v)
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
console.log(data)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.flow_region {
|
||||
display: flex;
|
||||
width: 98%;
|
||||
height: 90%;
|
||||
margin: 20px auto;
|
||||
border: 1px solid #ccc;
|
||||
.nodes-wrap {
|
||||
width: 150px;
|
||||
height: 790px;
|
||||
border-right: 1px solid #ccc;
|
||||
.node {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
width: 80%;
|
||||
margin: 5px auto;
|
||||
border: 1px solid #ccc;
|
||||
line-height: 40px;
|
||||
&:hover{
|
||||
cursor: grab;
|
||||
}
|
||||
&:active{
|
||||
cursor: grabbing;
|
||||
}
|
||||
.log {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.name {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flow-wrap {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
outline: none !important;
|
||||
flex-grow: 1;
|
||||
background-image: url("../../../assets/point.png");
|
||||
#flow {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.auxiliary-line-x {
|
||||
position: absolute;
|
||||
border: .5px dashed #2ab1e8;
|
||||
z-index: 9999;
|
||||
}
|
||||
.auxiliary-line-y {
|
||||
position: absolute;
|
||||
border: .5px dashed #2ab1e8;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.jtk-connector.active{
|
||||
z-index: 9999;
|
||||
path {
|
||||
stroke: #150042;
|
||||
stroke-width: 1.5;
|
||||
animation: ring;
|
||||
animation-duration: 3s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
stroke-dasharray: 5;
|
||||
}
|
||||
}
|
||||
@keyframes ring {
|
||||
from {
|
||||
stroke-dashoffset: 50;
|
||||
}
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,195 @@
|
|||
<template>
|
||||
<div class="node-item" ref="node"
|
||||
:class="[(isActive || isSelected) ? 'active' : '']"
|
||||
:style="flowNodeContainer"
|
||||
v-click-outside="setNotActive"
|
||||
@click="setActive"
|
||||
@mouseenter="showAnchor"
|
||||
@mouseleave="hideAnchor"
|
||||
@dblclick.prevent="editNode"
|
||||
@contextmenu.prevent="onContextmenu">
|
||||
<div class="log-wrap">
|
||||
<img :src="node.logImg" alt="">
|
||||
</div>
|
||||
<div class="nodeName">{{node.nodeName}}</div>
|
||||
<!--连线用--//触发连线的区域-->
|
||||
<div class="node-anchor anchor-top" v-show="mouseEnter"></div>
|
||||
<div class="node-anchor anchor-right" v-show="mouseEnter"></div>
|
||||
<div class="node-anchor anchor-bottom" v-show="mouseEnter"></div>
|
||||
<div class="node-anchor anchor-left" v-show="mouseEnter"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ClickOutside from 'vue-click-outside'
|
||||
export default {
|
||||
name: "nodeItem",
|
||||
props: {
|
||||
node: Object
|
||||
},
|
||||
directives: {
|
||||
ClickOutside
|
||||
},
|
||||
computed: {
|
||||
// 节点容器样式
|
||||
flowNodeContainer: {
|
||||
get() {
|
||||
return {
|
||||
top: this.node.top,
|
||||
left: this.node.left
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mouseEnter: false,
|
||||
isActive: false,
|
||||
isSelected: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showAnchor() {
|
||||
this.mouseEnter = true
|
||||
},
|
||||
hideAnchor() {
|
||||
this.mouseEnter = false
|
||||
},
|
||||
onContextmenu() {
|
||||
this.$contextmenu({
|
||||
items: [{
|
||||
label: '删除',
|
||||
disabled: false,
|
||||
icon: "",
|
||||
onClick: () => {
|
||||
this.deleteNode()
|
||||
}
|
||||
}],
|
||||
event,
|
||||
customClass: 'custom-class',
|
||||
zIndex: 9999,
|
||||
minWidth: 180
|
||||
})
|
||||
},
|
||||
setActive() {
|
||||
if (window.event.ctrlKey) {
|
||||
this.isSelected = !this.isSelected
|
||||
return false
|
||||
}
|
||||
this.isActive = true
|
||||
this.isSelected = false
|
||||
setTimeout(() => {
|
||||
this.$emit("changeLineState", this.node.id, true)
|
||||
}, 0)
|
||||
},
|
||||
setNotActive() {
|
||||
if (!window.event.ctrlKey) {
|
||||
this.isSelected = false
|
||||
}
|
||||
if (!this.isActive) {
|
||||
return
|
||||
}
|
||||
this.$emit("changeLineState", this.node.id, false)
|
||||
this.isActive = false
|
||||
},
|
||||
editNode() {
|
||||
this.newNodeName = this.node.nodeName
|
||||
this.$Modal.confirm({
|
||||
render: (h) => {
|
||||
return h('Input', {
|
||||
props: {
|
||||
value: this.newNodeName,
|
||||
autofocus: true
|
||||
},
|
||||
on: {
|
||||
input: (val) => {
|
||||
this.newNodeName = val;
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
onOk: () => {
|
||||
console.log(this.newNodeName)
|
||||
this.$emit('setNodeName', this.node.id, this.newNodeName)
|
||||
}
|
||||
})
|
||||
},
|
||||
deleteNode() {
|
||||
this.$emit("deleteNode", this.node)
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@labelColor: #409eff;
|
||||
@nodeSize: 20px;
|
||||
@viewSize: 10px;
|
||||
.node-item {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
width: 120px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #b7b6b6;
|
||||
border-radius: 4px;
|
||||
cursor: move;
|
||||
box-sizing: content-box;
|
||||
z-index: 9995;
|
||||
&:hover {
|
||||
z-index: 9998;
|
||||
.delete-btn{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.log-wrap{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-right: 1px solid #b7b6b6;
|
||||
}
|
||||
.nodeName {
|
||||
flex-grow: 1;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.node-anchor {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
width: @nodeSize;
|
||||
height: @nodeSize;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
cursor: crosshair;
|
||||
z-index: 9999;
|
||||
background: -webkit-radial-gradient(sandybrown 10%, white 30%, #9a54ff 60%);
|
||||
}
|
||||
.anchor-top{
|
||||
top: calc((@nodeSize / 2)*-1);
|
||||
left: 50%;
|
||||
margin-left: calc((@nodeSize/2)*-1);
|
||||
}
|
||||
.anchor-right{
|
||||
top: 50%;
|
||||
right: calc((@nodeSize / 2)*-1);
|
||||
margin-top: calc((@nodeSize / 2)*-1);
|
||||
}
|
||||
.anchor-bottom{
|
||||
bottom: calc((@nodeSize / 2)*-1);
|
||||
left: 50%;
|
||||
margin-left: calc((@nodeSize / 2)*-1);
|
||||
}
|
||||
.anchor-left{
|
||||
top: 50%;
|
||||
left: calc((@nodeSize / 2)*-1);
|
||||
margin-top: calc((@nodeSize / 2)*-1);
|
||||
}
|
||||
}
|
||||
.active{
|
||||
border: 1px dashed @labelColor;
|
||||
box-shadow: 0px 5px 9px 0px rgba(0,0,0,0.5);
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,89 @@
|
|||
export const jsplumbSetting = {
|
||||
grid: [10, 10],
|
||||
// 动态锚点、位置自适应
|
||||
Anchors: [
|
||||
"TopCenter",
|
||||
"RightMiddle",
|
||||
"BottomCenter",
|
||||
"LeftMiddle"
|
||||
],
|
||||
Container: "flow",
|
||||
// 连线的样式 StateMachine、Flowchart,有四种默认类型:Bezier(贝塞尔曲线),Straight(直线),Flowchart(流程图),State machine(状态机)
|
||||
Connector: ["Flowchart", { cornerRadius: 5, alwaysRespectStubs: true, stub: 5 }],
|
||||
// 鼠标不能拖动删除线
|
||||
ConnectionsDetachable: false,
|
||||
// 删除线的时候节点不删除
|
||||
DeleteEndpointsOnDetach: false,
|
||||
// 连线的端点
|
||||
// Endpoint: ["Dot", {radius: 5}],
|
||||
Endpoint: [
|
||||
"Rectangle",
|
||||
{
|
||||
height: 10,
|
||||
width: 10
|
||||
}
|
||||
],
|
||||
// 线端点的样式
|
||||
EndpointStyle: {
|
||||
fill: "rgba(255,255,255,0)",
|
||||
outlineWidth: 1
|
||||
},
|
||||
LogEnabled: false, //是否打开jsPlumb的内部日志记录
|
||||
// 绘制线
|
||||
PaintStyle: {
|
||||
stroke: "#409eff",
|
||||
strokeWidth: 2
|
||||
},
|
||||
HoverPaintStyle: { stroke: "#ff00cc", strokeWidth: 2 },
|
||||
// 绘制箭头
|
||||
Overlays: [
|
||||
[
|
||||
"Arrow",
|
||||
{
|
||||
width: 8,
|
||||
length: 8,
|
||||
location: 1
|
||||
}
|
||||
]
|
||||
],
|
||||
RenderMode: "svg"
|
||||
}
|
||||
|
||||
// jsplumb连接参数
|
||||
export const jsplumbConnectOptions = {
|
||||
isSource: true,
|
||||
isTarget: true,
|
||||
// 动态锚点、提供了4个方向 Continuous、AutoDefault
|
||||
anchor: [
|
||||
"TopCenter",
|
||||
"RightMiddle",
|
||||
"BottomCenter",
|
||||
"LeftMiddle"
|
||||
]
|
||||
}
|
||||
|
||||
export const jsplumbSourceOptions = {
|
||||
filter: ".node-anchor", //触发连线的区域
|
||||
/*"span"表示标签,".className"表示类,"#id"表示元素id*/
|
||||
filterExclude: false,
|
||||
anchor: [
|
||||
"TopCenter",
|
||||
"RightMiddle",
|
||||
"BottomCenter",
|
||||
"LeftMiddle"
|
||||
],
|
||||
allowLoopback: false
|
||||
}
|
||||
|
||||
export const jsplumbTargetOptions = {
|
||||
filter: ".node-anchor",
|
||||
/*"span"表示标签,".className"表示类,"#id"表示元素id*/
|
||||
filterExclude: false,
|
||||
anchor: [
|
||||
"TopCenter",
|
||||
"RightMiddle",
|
||||
"BottomCenter",
|
||||
"LeftMiddle"
|
||||
],
|
||||
allowLoopback: false
|
||||
}
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"nodeList": [{"type":"start","typeName":"开始","nodeName":"开始","id":"34v56ha2l9c000","top":"160px","left":"100px"},{"type":"dataSet","typeName":"文件","nodeName":"文件","id":"5sdjugrcqhc000","top":"160px","left":"315px"},{"type":"encode","typeName":"加密","nodeName":"加密","id":"3atqi5p6oa4000","top":"80px","left":"600px"},{"type":"personService","typeName":"个人服务","nodeName":"个人服务","id":"49vcu89p5q0000","top":"245px","left":"600px"},{"type":"arrange","typeName":"清洗","nodeName":"清洗","id":"1jhiilb0t2tc00","top":"180px","left":"880px"},{"type":"end","typeName":"结束","nodeName":"结束","id":"1ogr3wzy6zhc00","top":"180px","left":"1160px"}],
|
||||
"lineList": [{"from":"34v56ha2l9c000","to":"5sdjugrcqhc000","label":"连线名称","id":"5n6pp5xqd6s000","Remark":""},{"from":"5sdjugrcqhc000","to":"3atqi5p6oa4000","label":"连线名称","id":"2a0ya9j1kev400","Remark":""},{"from":"5sdjugrcqhc000","to":"49vcu89p5q0000","label":"连线名称","id":"zoisvo5gpvk00","Remark":""},{"from":"3atqi5p6oa4000","to":"1jhiilb0t2tc00","label":"连线名称","id":"4xkb3dju1g0000","Remark":""},{"from":"49vcu89p5q0000","to":"1jhiilb0t2tc00","label":"连线名称","id":"ldc917l47w000","Remark":""},{"from":"1jhiilb0t2tc00","to":"1ogr3wzy6zhc00","label":"连线名称","id":"478galw3u34000","Remark":""}]
|
||||
}
|
|
@ -0,0 +1,41 @@
|
|||
const nodeTypeList = [{
|
||||
type: 'start',
|
||||
typeName: '开始',
|
||||
nodeName: '开始',
|
||||
logImg: require('@/assets/svg/1开始.svg'),
|
||||
log_bg_color: 'rgba(0, 128, 0, 0.2)'
|
||||
},{
|
||||
type: 'end',
|
||||
typeName: '结束',
|
||||
nodeName: '结束',
|
||||
logImg: require('@/assets/svg/2结束.svg'),
|
||||
log_bg_color: 'rgba(255, 0, 0, 0.2)'
|
||||
},{
|
||||
type: 'dataSet',
|
||||
typeName: '文件',
|
||||
nodeName: '文件',
|
||||
logImg: require('@/assets/svg/5文件数据.svg'),
|
||||
log_bg_color: 'rgba(0, 128, 0, 0.2)'
|
||||
},{
|
||||
type: 'encode',
|
||||
typeName: '加密',
|
||||
nodeName: '加密',
|
||||
logImg: require('@/assets/svg/6数据校验.svg'),
|
||||
log_bg_color: 'rgba(163, 117, 233, 0.2)'
|
||||
},{
|
||||
type: 'personService',
|
||||
typeName: '个人服务',
|
||||
nodeName: '个人服务',
|
||||
logImg: require('@/assets/svg/8个人服务.svg'),
|
||||
log_bg_color: 'rgba(132, 166, 251, 0.2)'
|
||||
},{
|
||||
type: 'arrange',
|
||||
typeName: '清洗',
|
||||
nodeName: '清洗',
|
||||
logImg: require('@/assets/svg/15清洗.svg'),
|
||||
log_bg_color: 'rgba(250, 205, 81, 0.2)'
|
||||
}]
|
||||
|
||||
console.log(nodeTypeList)
|
||||
|
||||
export {nodeTypeList};
|
|
@ -0,0 +1,316 @@
|
|||
import panzoom from "panzoom";
|
||||
import { GenNonDuplicateID } from "@/common/until";
|
||||
|
||||
const methods = {
|
||||
init() {
|
||||
this.jsPlumb.ready(() => {
|
||||
// 导入默认配置
|
||||
this.jsPlumb.importDefaults(this.jsplumbSetting);
|
||||
//完成连线前的校验
|
||||
this.jsPlumb.bind("beforeDrop", evt => {
|
||||
let res = () => { } //此处可以添加是否创建连接的校验, 返回 false 则不添加;
|
||||
return res
|
||||
})
|
||||
// 连线创建成功后,维护本地数据
|
||||
this.jsPlumb.bind("connection", evt => {
|
||||
this.addLine(evt)
|
||||
});
|
||||
//连线双击删除事件
|
||||
this.jsPlumb.bind("dblclick",(conn, originalEvent) => {
|
||||
this.confirmDelLine(conn)
|
||||
})
|
||||
//断开连线后,维护本地数据
|
||||
this.jsPlumb.bind("connectionDetached", evt => {
|
||||
this.deleLine(evt)
|
||||
})
|
||||
this.loadEasyFlow();
|
||||
// 会使整个jsPlumb立即重绘。
|
||||
this.jsPlumb.setSuspendDrawing(false, true);
|
||||
});
|
||||
this.initPanZoom();
|
||||
},
|
||||
// 加载流程图
|
||||
loadEasyFlow() {
|
||||
// 初始化节点
|
||||
for (let i = 0; i < this.data.nodeList.length; i++) {
|
||||
let node = this.data.nodeList[i];
|
||||
// 设置源点,可以拖出线连接其他节点
|
||||
this.jsPlumb.makeSource(node.id, this.jsplumbSourceOptions);
|
||||
// // 设置目标点,其他源点拖出的线可以连接该节点
|
||||
this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions);
|
||||
// this.jsPlumb.draggable(node.id);
|
||||
this.draggableNode(node.id)
|
||||
}
|
||||
|
||||
// 初始化连线
|
||||
this.jsPlumb.unbind("connection"); //取消连接事件
|
||||
for (let i = 0; i < this.data.lineList.length; i++) {
|
||||
let line = this.data.lineList[i];
|
||||
this.jsPlumb.connect(
|
||||
{
|
||||
source: line.from,
|
||||
target: line.to
|
||||
},
|
||||
this.jsplumbConnectOptions
|
||||
);
|
||||
}
|
||||
this.jsPlumb.bind("connection", evt => {
|
||||
let from = evt.source.id;
|
||||
let to = evt.target.id;
|
||||
this.data.lineList.push({
|
||||
from: from,
|
||||
to: to,
|
||||
label: "连线名称",
|
||||
id: GenNonDuplicateID(8),
|
||||
Remark: ""
|
||||
});
|
||||
});
|
||||
},
|
||||
draggableNode(nodeId) {
|
||||
this.jsPlumb.draggable(nodeId, {
|
||||
grid: this.commonGrid,
|
||||
drag: (params) => {
|
||||
this.alignForLine(nodeId, params.pos)
|
||||
},
|
||||
start: () => {
|
||||
|
||||
},
|
||||
stop: (params) => {
|
||||
this.auxiliaryLine.isShowXLine = false
|
||||
this.auxiliaryLine.isShowYLine = false
|
||||
this.changeNodePosition(nodeId, params.pos)
|
||||
}
|
||||
})
|
||||
},
|
||||
//移动节点时,动态显示对齐线
|
||||
alignForLine(nodeId, position) {
|
||||
let showXLine = false, showYLine = false
|
||||
this.data.nodeList.some(el => {
|
||||
if(el.id !== nodeId && el.left == position[0]+'px') {
|
||||
this.auxiliaryLinePos.x = position[0] + 60;
|
||||
showYLine = true
|
||||
}
|
||||
if(el.id !== nodeId && el.top == position[1]+'px') {
|
||||
this.auxiliaryLinePos.y = position[1] + 20;
|
||||
showXLine = true
|
||||
}
|
||||
})
|
||||
this.auxiliaryLine.isShowYLine = showYLine
|
||||
this.auxiliaryLine.isShowXLine = showXLine
|
||||
},
|
||||
changeNodePosition(nodeId, pos) {
|
||||
this.data.nodeList.some(v => {
|
||||
if(nodeId == v.id) {
|
||||
v.left = pos[0] +'px'
|
||||
v.top = pos[1] + 'px'
|
||||
return true
|
||||
}else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
drag(ele, item) {
|
||||
this.currentItem = item;
|
||||
},
|
||||
drop(event) {
|
||||
const containerRect = this.jsPlumb.getContainer().getBoundingClientRect();
|
||||
const scale = this.getScale();
|
||||
let left = (event.pageX - containerRect.left -60) / scale;
|
||||
let top = (event.pageY - containerRect.top -20) / scale;
|
||||
|
||||
var temp = {
|
||||
...this.currentItem,
|
||||
id: GenNonDuplicateID(8),
|
||||
top: (Math.round(top/20))*20 + "px",
|
||||
left: (Math.round(left/20))*20 + "px"
|
||||
};
|
||||
this.addNode(temp);
|
||||
},
|
||||
addLine(line) {
|
||||
let from = line.source.id;
|
||||
let to = line.target.id;
|
||||
this.data.lineList.push({
|
||||
from: from,
|
||||
to: to,
|
||||
label: "连线名称",
|
||||
id: GenNonDuplicateID(8),
|
||||
Remark: ""
|
||||
});
|
||||
},
|
||||
confirmDelLine(line) {
|
||||
this.$Modal.confirm({
|
||||
title: '删除连线',
|
||||
content: "<p>确认删除该连线?</p>",
|
||||
onOk: () => {
|
||||
this.jsPlumb.deleteConnection(line)
|
||||
}
|
||||
})
|
||||
},
|
||||
deleLine(line) {
|
||||
this.data.lineList.forEach((item, index) => {
|
||||
if(item.from === line.sourceId && item.to === line.targetId) {
|
||||
this.data.lineList.splice(index, 1)
|
||||
}
|
||||
})
|
||||
},
|
||||
// dragover默认事件就是不触发drag事件,取消默认事件后,才会触发drag事件
|
||||
allowDrop(event) {
|
||||
event.preventDefault();
|
||||
},
|
||||
getScale() {
|
||||
let scale1;
|
||||
if (this.jsPlumb.pan) {
|
||||
const { scale } = this.jsPlumb.pan.getTransform();
|
||||
scale1 = scale;
|
||||
} else {
|
||||
const matrix = window.getComputedStyle(this.jsPlumb.getContainer()).transform;
|
||||
scale1 = matrix.split(", ")[3] * 1;
|
||||
}
|
||||
this.jsPlumb.setZoom(scale1);
|
||||
return scale1;
|
||||
},
|
||||
// 添加新的节点
|
||||
addNode(temp) {
|
||||
this.data.nodeList.push(temp);
|
||||
this.$nextTick(() => {
|
||||
this.jsPlumb.makeSource(temp.id, this.jsplumbSourceOptions);
|
||||
this.jsPlumb.makeTarget(temp.id, this.jsplumbTargetOptions);
|
||||
this.draggableNode(temp.id)
|
||||
});
|
||||
},
|
||||
|
||||
initPanZoom() {
|
||||
const mainContainer = this.jsPlumb.getContainer();
|
||||
const mainContainerWrap = mainContainer.parentNode;
|
||||
const pan = panzoom(mainContainer, {
|
||||
smoothScroll: false,
|
||||
bounds: true,
|
||||
// autocenter: true,
|
||||
zoomDoubleClickSpeed: 1,
|
||||
minZoom: 0.5,
|
||||
maxZoom: 2,
|
||||
//设置滚动缩放的组合键,默认不需要组合键
|
||||
beforeWheel: (e) => {
|
||||
console.log(e)
|
||||
// let shouldIgnore = !e.ctrlKey
|
||||
// return shouldIgnore
|
||||
},
|
||||
beforeMouseDown: function(e) {
|
||||
// allow mouse-down panning only if altKey is down. Otherwise - ignore
|
||||
var shouldIgnore = e.ctrlKey;
|
||||
return shouldIgnore;
|
||||
}
|
||||
});
|
||||
this.jsPlumb.mainContainerWrap = mainContainerWrap;
|
||||
this.jsPlumb.pan = pan;
|
||||
// 缩放时设置jsPlumb的缩放比率
|
||||
pan.on("zoom", e => {
|
||||
const { x, y, scale } = e.getTransform();
|
||||
this.jsPlumb.setZoom(scale);
|
||||
//根据缩放比例,缩放对齐辅助线长度和位置
|
||||
this.auxiliaryLinePos.width = (1/scale) * 100 + '%'
|
||||
this.auxiliaryLinePos.height = (1/scale) * 100 + '%'
|
||||
this.auxiliaryLinePos.offsetX = -(x/scale)
|
||||
this.auxiliaryLinePos.offsetY = -(y/scale)
|
||||
});
|
||||
pan.on("panend", (e) => {
|
||||
const {x, y, scale} = e.getTransform();
|
||||
this.auxiliaryLinePos.width = (1/scale) * 100 + '%'
|
||||
this.auxiliaryLinePos.height = (1/scale) * 100 + '%'
|
||||
this.auxiliaryLinePos.offsetX = -(x/scale)
|
||||
this.auxiliaryLinePos.offsetY = -(y/scale)
|
||||
})
|
||||
|
||||
// 平移时设置鼠标样式
|
||||
mainContainerWrap.style.cursor = "grab";
|
||||
mainContainerWrap.addEventListener("mousedown", function wrapMousedown() {
|
||||
this.style.cursor = "grabbing";
|
||||
mainContainerWrap.addEventListener("mouseout", function wrapMouseout() {
|
||||
this.style.cursor = "grab";
|
||||
});
|
||||
});
|
||||
mainContainerWrap.addEventListener("mouseup", function wrapMouseup() {
|
||||
this.style.cursor = "grab";
|
||||
});
|
||||
},
|
||||
|
||||
setNodeName(nodeId, name) {
|
||||
this.data.nodeList.some((v) => {
|
||||
if(v.id === nodeId) {
|
||||
v.nodeName = name
|
||||
return true
|
||||
}else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//删除节点
|
||||
deleteNode(node) {
|
||||
this.data.nodeList.some((v,index) => {
|
||||
if(v.id === node.id) {
|
||||
this.data.nodeList.splice(index, 1)
|
||||
this.jsPlumb.remove(v.id)
|
||||
return true
|
||||
}else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//更改连线状态
|
||||
changeLineState(nodeId, val) {
|
||||
console.log(val)
|
||||
let lines = this.jsPlumb.getAllConnections()
|
||||
lines.forEach(line => {
|
||||
if(line.targetId === nodeId || line.sourceId === nodeId) {
|
||||
if(val) {
|
||||
line.canvas.classList.add('active')
|
||||
}else {
|
||||
line.canvas.classList.remove('active')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//初始化节点位置 (以便对齐,居中)
|
||||
fixNodesPosition() {
|
||||
if(this.data.nodeList && this.$refs.flowWrap) {
|
||||
const nodeWidth = 120
|
||||
const nodeHeight = 40
|
||||
let wrapInfo = this.$refs.flowWrap.getBoundingClientRect()
|
||||
let maxLeft = 0, minLeft = wrapInfo.width, maxTop = 0, minTop = wrapInfo.height;
|
||||
let nodePoint = {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0
|
||||
}
|
||||
let fixTop = 0, fixLeft = 0;
|
||||
this.data.nodeList.forEach(el => {
|
||||
let top = Number(el.top.substring(0, el.top.length -2))
|
||||
let left = Number(el.left.substring(0, el.left.length -2))
|
||||
maxLeft = left > maxLeft ? left : maxLeft
|
||||
minLeft = left < minLeft ? left : minLeft
|
||||
maxTop = top > maxTop ? top : maxTop
|
||||
minTop = top < minTop ? top : minTop
|
||||
})
|
||||
nodePoint.left = minLeft
|
||||
nodePoint.right = wrapInfo.width - maxLeft - nodeWidth
|
||||
nodePoint.top = minTop
|
||||
nodePoint.bottom = wrapInfo.height - maxTop - nodeHeight;
|
||||
|
||||
fixTop = nodePoint.top !== nodePoint.bottom ? (nodePoint.bottom - nodePoint.top) / 2 : 0;
|
||||
fixLeft = nodePoint.left !== nodePoint.right ? (nodePoint.right - nodePoint.left) / 2 : 0;
|
||||
|
||||
this.data.nodeList.map(el => {
|
||||
let top = Number(el.top.substring(0, el.top.length - 2)) + fixTop;
|
||||
let left = Number(el.left.substring(0, el.left.length - 2)) + fixLeft;
|
||||
el.top = (Math.round(top/20))* 20 + 'px'
|
||||
el.left = (Math.round(left/20))*20 + 'px'
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
export default methods;
|
|
@ -1,308 +0,0 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="节点名称" prop="nodeName">
|
||||
<el-input
|
||||
v-model="queryParams.nodeName"
|
||||
placeholder="请输入节点名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="启用状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="请选择启用状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.sys_enable_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['quest:node:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['quest:node:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['quest:node:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['quest:node:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="nodeList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="自增主键" align="center" prop="id" />
|
||||
<el-table-column label="节点编码" align="center" prop="nodeCode" />
|
||||
<el-table-column label="节点名称" align="center" prop="nodeName" />
|
||||
<el-table-column label="节点入参" align="center" prop="nodeReq" />
|
||||
<el-table-column label="节点出参" align="center" prop="nodeResp" />
|
||||
<el-table-column label="上一级节点" align="center" prop="nodePreCode" />
|
||||
<el-table-column label="下一级节点" align="center" prop="nodeNextCode" />
|
||||
<el-table-column label="启用状态" align="center" prop="state">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.sys_enable_status" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['quest:node:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['quest:node:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改节点管理对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="节点编码" prop="nodeCode">
|
||||
<el-input v-model="form.nodeCode" placeholder="请输入节点编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="节点名称" prop="nodeName">
|
||||
<el-input v-model="form.nodeName" placeholder="请输入节点名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="节点入参" prop="nodeReq">
|
||||
<el-input v-model="form.nodeReq" placeholder="请输入节点入参" />
|
||||
</el-form-item>
|
||||
<el-form-item label="节点出参" prop="nodeResp">
|
||||
<el-input v-model="form.nodeResp" placeholder="请输入节点出参" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上一级节点" prop="nodePreCode">
|
||||
<el-input v-model="form.nodePreCode" placeholder="请输入上一级节点" />
|
||||
</el-form-item>
|
||||
<el-form-item label="下一级节点" prop="nodeNextCode">
|
||||
<el-input v-model="form.nodeNextCode" placeholder="请输入下一级节点" />
|
||||
</el-form-item>
|
||||
<el-form-item label="启用状态" prop="state">
|
||||
<el-radio-group v-model="form.state">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.sys_enable_status"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listNode, getNode, delNode, addNode, updateNode } from "/src/api/quest/node";
|
||||
|
||||
export default {
|
||||
name: "Node",
|
||||
dicts: ['sys_enable_status'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 节点管理表格数据
|
||||
nodeList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
nodeName: null,
|
||||
state: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
nodeCode: [
|
||||
{ required: true, message: "节点编码不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询节点管理列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listNode(this.queryParams).then(response => {
|
||||
this.nodeList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
nodeCode: null,
|
||||
nodeName: null,
|
||||
nodeReq: null,
|
||||
nodeResp: null,
|
||||
nodePreCode: null,
|
||||
nodeNextCode: null,
|
||||
state: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
updateTime: null,
|
||||
remark: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加节点管理";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getNode(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改节点管理";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateNode(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addNode(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认删除节点管理编号为"' + ids + '"的数据项?').then(function() {
|
||||
return delNode(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('quest/node/export', {
|
||||
...this.queryParams
|
||||
}, `node_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
|
@ -149,7 +149,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {listQuest, getQuest, delQuest, addQuest, updateQuest} from "../../../api/quest/quest";
|
||||
import {listQuest, getQuest, delQuest, addQuest, updateQuest} from "@/api/quest/quest";
|
||||
|
||||
export default {
|
||||
name: "Quest",
|
||||
|
|
|
@ -280,10 +280,10 @@
|
|||
|
||||
<script>
|
||||
import {addNotice, delNotice, getNotice, listNotice, updateNotice} from "/src/api/system/notice";
|
||||
import { findNoticeByNoticeId } from '../../../api/system/notice'
|
||||
import { listDept } from '../../../api/system/dept'
|
||||
import { findNoticeByNoticeId } from '@/api/system/notice'
|
||||
import { listDept } from '@/api/system/dept'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import { selUserAll } from '../../../api/system/user'
|
||||
import { selUserAll } from '@/api/system/user'
|
||||
|
||||
export default {
|
||||
name: "Notice",
|
||||
|
|
|
@ -53,7 +53,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {importTable, listDbTable, selDbNameAll} from "../../../api/tool/gen";
|
||||
import {importTable, listDbTable, selDbNameAll} from "@/api/tool/gen";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
|
@ -76,12 +76,12 @@ module.exports = {
|
|||
// set svg-sprite-loader
|
||||
config.module
|
||||
.rule('svg')
|
||||
.exclude.add(resolve('src/assets/icons'))
|
||||
.exclude.add(resolve('@/assets/icons'))
|
||||
.end()
|
||||
config.module
|
||||
.rule('icons')
|
||||
.test(/\.svg$/)
|
||||
.include.add(resolve('src/assets/icons'))
|
||||
.include.add(resolve('@/assets/icons'))
|
||||
.end()
|
||||
.use('svg-sprite-loader')
|
||||
.loader('svg-sprite-loader')
|
||||
|
@ -116,7 +116,7 @@ module.exports = {
|
|||
},
|
||||
commons: {
|
||||
name: 'chunk-commons',
|
||||
test: resolve('src/components'), // can customize your rules
|
||||
test: resolve('@/components'), // can customize your rules
|
||||
minChunks: 3, // minimum common number
|
||||
priority: 5,
|
||||
reuseExistingChunk: true
|
||||
|
|