孙浩博，fixed：重构visi界面

config/index.js

@@ -33,7 +33,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+    host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8001, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,

package-lock.json

@@ -11,7 +11,6 @@
         "@antv/g2": "^4.1.47",
         "@antv/x6": "^1.25.1",
         "ajv": "^8.4.0",
-        "ant-design-vue": "^1.7.6",
         "axios": "0.17.1",
         "babel-plugin-component": "0.10.1",
         "babel-polyfill": "6.26.0",
@@ -97,33 +96,6 @@
         "npm": ">= 5.6.0"
       }
     },
-    "node_modules/@ant-design/colors": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-3.2.2.tgz",
-      "integrity": "sha512-YKgNbG2dlzqMhA9NtI3/pbY16m3Yl/EeWBRa+lB1X1YaYxHrxNexiQYCLTWO/uDvAjLFMEDU+zR901waBtMtjQ==",
-      "dependencies": {
-        "tinycolor2": "^1.4.1"
-      }
-    },
-    "node_modules/@ant-design/icons": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-2.1.1.tgz",
-      "integrity": "sha512-jCH+k2Vjlno4YWl6g535nHR09PwCEmTBKAG6VqF+rhkrSPRLfgpU2maagwbZPLjaHuU5Jd1DFQ2KJpQuI6uG8w=="
-    },
-    "node_modules/@ant-design/icons-vue": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/@ant-design/icons-vue/-/icons-vue-2.0.0.tgz",
-      "integrity": "sha512-2c0QQE5hL4N48k5NkPG5sdpMl9YnvyNhf0U7YkdZYDlLnspoRU7vIA0UK9eHBs6OpFLcJB6o8eJrIl2ajBskPg==",
-      "dependencies": {
-        "@ant-design/colors": "^3.1.0",
-        "babel-runtime": "^6.26.0"
-      },
-      "peerDependencies": {
-        "@ant-design/icons": "^2.0.0",
-        "vue": ">=2.5.0",
-        "vue-template-compiler": ">=2.5.0"
-      }
-    },
     "node_modules/@antv/adjust": {
       "version": "0.2.5",
       "resolved": "https://registry.npmmirror.com/@antv/adjust/-/adjust-0.2.5.tgz",
@@ -388,22 +360,6 @@
         "utility-types": "^3.10.0"
       }
     },
-    "node_modules/@simonwep/pickr": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmmirror.com/@simonwep/pickr/-/pickr-1.7.4.tgz",
-      "integrity": "sha512-fq7jgKJT21uWGC1mARBHvvd1JYlEf93o7SuVOB4Lr0x/2UPuNC9Oe9n/GzVeg4oVtqMDfh1wIEJpsdOJEZb+3g==",
-      "dependencies": {
-        "core-js": "^3.6.5",
-        "nanopop": "^2.1.0"
-      }
-    },
-    "node_modules/@simonwep/pickr/node_modules/core-js": {
-      "version": "3.21.1",
-      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.21.1.tgz",
-      "integrity": "sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig==",
-      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
-      "hasInstallScript": true
-    },
     "node_modules/@types/d3-timer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/@types/d3-timer/-/d3-timer-2.0.1.tgz",
@@ -524,14 +480,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/add-dom-event-listener": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz",
-      "integrity": "sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==",
-      "dependencies": {
-        "object-assign": "4.x"
-      }
-    },
     "node_modules/adm-zip": {
       "version": "0.4.16",
       "resolved": "https://registry.npm.taobao.org/adm-zip/download/adm-zip-0.4.16.tgz?cache=0&sync_timestamp=1617192302302&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fadm-zip%2Fdownload%2Fadm-zip-0.4.16.tgz",
@@ -688,53 +636,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/ant-design-vue": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-1.7.8.tgz",
-      "integrity": "sha512-F1hmiS9vwbyfuFvlamdW5l9bHKqRlj9wHaGDIE41NZMWXyWy8qL0UFa/+I0Wl8gQWZCqODW5pN6Yfoyn85At3A==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@ant-design/icons": "^2.1.1",
-        "@ant-design/icons-vue": "^2.0.0",
-        "@simonwep/pickr": "~1.7.0",
-        "add-dom-event-listener": "^1.0.2",
-        "array-tree-filter": "^2.1.0",
-        "async-validator": "^3.0.3",
-        "babel-helper-vue-jsx-merge-props": "^2.0.3",
-        "babel-runtime": "6.x",
-        "classnames": "^2.2.5",
-        "component-classes": "^1.2.6",
-        "dom-align": "^1.10.4",
-        "dom-closest": "^0.2.0",
-        "dom-scroll-into-view": "^2.0.0",
-        "enquire.js": "^2.1.6",
-        "intersperse": "^1.0.0",
-        "is-mobile": "^2.2.1",
-        "is-negative-zero": "^2.0.0",
-        "ismobilejs": "^1.0.0",
-        "json2mq": "^0.2.0",
-        "lodash": "^4.17.5",
-        "moment": "^2.21.0",
-        "mutationobserver-shim": "^0.3.2",
-        "node-emoji": "^1.10.0",
-        "omit.js": "^1.0.0",
-        "raf": "^3.4.0",
-        "resize-observer-polyfill": "^1.5.1",
-        "shallow-equal": "^1.0.0",
-        "shallowequal": "^1.0.2",
-        "vue-ref": "^2.0.0",
-        "warning": "^4.0.0"
-      },
-      "peerDependencies": {
-        "vue": "^2.6.0",
-        "vue-template-compiler": "^2.6.0"
-      }
-    },
-    "node_modules/ant-design-vue/node_modules/async-validator": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-3.5.2.tgz",
-      "integrity": "sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ=="
-    },
     "node_modules/anymatch": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
@@ -976,11 +877,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/array-tree-filter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
-      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
-    },
     "node_modules/array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -3315,11 +3211,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
-    },
     "node_modules/clean-css": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -3650,24 +3541,11 @@
         "node": "*"
       }
     },
-    "node_modules/component-classes": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmmirror.com/component-classes/-/component-classes-1.2.6.tgz",
-      "integrity": "sha512-hPFGULxdwugu1QWW3SvVOCUHLzO34+a2J6Wqy0c5ASQkfi9/8nZcBB0ZohaEbXOQlCflMAEMmEWk7u7BVs4koA==",
-      "dependencies": {
-        "component-indexof": "0.0.3"
-      }
-    },
     "node_modules/component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
       "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
     },
-    "node_modules/component-indexof": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmmirror.com/component-indexof/-/component-indexof-0.0.3.tgz",
-      "integrity": "sha512-puDQKvx/64HZXb4hBwIcvQLaLgux8o1CbWl39s41hrIIZDl1lJiD5jc22gj3RBeGK0ovxALDYpIbyjqDUUl0rw=="
-    },
     "node_modules/compressible": {
       "version": "2.0.17",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.17.tgz",
@@ -4474,7 +4352,8 @@
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
-      "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0="
+      "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
+      "dev": true
     },
     "node_modules/debug": {
       "version": "3.2.6",
@@ -4835,19 +4714,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/dom-align": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmmirror.com/dom-align/-/dom-align-1.12.2.tgz",
-      "integrity": "sha512-pHuazgqrsTFrGU2WLDdXxCFabkdQDx72ddkraZNih1KsMcN5qsRSTR9O4VJRlwTPCPb5COYg3LOfiMHHcPInHg=="
-    },
-    "node_modules/dom-closest": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmmirror.com/dom-closest/-/dom-closest-0.2.0.tgz",
-      "integrity": "sha512-6neTn1BtJlTSt+XSISXpnOsF1uni1CHsP/tmzZMGWxasYFHsBOqrHPnzmneqEgKhpagnfnfSfbvRRW0xFsBHAA==",
-      "dependencies": {
-        "dom-matches": ">=1.0.1"
-      }
-    },
     "node_modules/dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -4857,16 +4723,6 @@
         "utila": "~0.4"
       }
     },
-    "node_modules/dom-matches": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/dom-matches/-/dom-matches-2.0.0.tgz",
-      "integrity": "sha512-2VI856xEDCLXi19W+4BechR5/oIS6bKCKqcf16GR8Pg7dGLJ/eBOWVbCmQx2ISvYH6wTNx5Ef7JTOw1dRGRx6A=="
-    },
-    "node_modules/dom-scroll-into-view": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/dom-scroll-into-view/-/dom-scroll-into-view-2.0.1.tgz",
-      "integrity": "sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w=="
-    },
     "node_modules/dom-serializer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
@@ -5167,11 +5023,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/enquire.js": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmmirror.com/enquire.js/-/enquire.js-2.1.6.tgz",
-      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
-    },
     "node_modules/entities": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
@@ -9479,11 +9330,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/intersperse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/intersperse/-/intersperse-1.0.0.tgz",
-      "integrity": "sha512-LGcfug7OTeWkaQ8PEq8XbTy9Jl6uCNg8DrPnQUmwxSY8UETj1Y+LLmpdD0qHdEj6KVchuH3BE3ZzIXQ1t3oFUw=="
-    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -9751,11 +9597,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-mobile": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmmirror.com/is-mobile/-/is-mobile-2.2.2.tgz",
-      "integrity": "sha512-wW/SXnYJkTjs++tVK5b6kVITZpAZPtUrt9SF80vvxGiF/Oywal+COk1jlRkiVq15RFNEQKQY31TkV24/1T5cVg=="
-    },
     "node_modules/is-my-ip-valid": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz",
@@ -9783,14 +9624,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-negative-zero": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmmirror.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -10017,11 +9850,6 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
     },
-    "node_modules/ismobilejs": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmmirror.com/ismobilejs/-/ismobilejs-1.1.1.tgz",
-      "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw=="
-    },
     "node_modules/isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
@@ -11610,7 +11438,8 @@
     "node_modules/js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
+      "dev": true
     },
     "node_modules/js-yaml": {
       "version": "3.7.0",
@@ -11721,14 +11550,6 @@
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
     },
-    "node_modules/json2mq": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmmirror.com/json2mq/-/json2mq-0.2.0.tgz",
-      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
-      "dependencies": {
-        "string-convert": "^0.2.0"
-      }
-    },
     "node_modules/json3": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
@@ -12362,6 +12183,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       },
@@ -13013,14 +12835,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/moment": {
-      "version": "2.29.1",
-      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.1.tgz",
-      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/mousetrap": {
       "version": "1.6.5",
       "resolved": "https://registry.npmmirror.com/mousetrap/-/mousetrap-1.6.5.tgz",
@@ -13064,11 +12878,6 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
-    "node_modules/mutationobserver-shim": {
-      "version": "0.3.7",
-      "resolved": "https://registry.npmmirror.com/mutationobserver-shim/-/mutationobserver-shim-0.3.7.tgz",
-      "integrity": "sha512-oRIDTyZQU96nAiz2AQyngwx1e89iApl2hN5AOYwyxLUB47UYsU3Wv9lJWqH5y/QdiYkc5HQLi23ZNB3fELdHcQ=="
-    },
     "node_modules/mute-stdout": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/mute-stdout/download/mute-stdout-1.0.1.tgz",
@@ -13109,11 +12918,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/nanopop": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/nanopop/-/nanopop-2.1.0.tgz",
-      "integrity": "sha512-jGTwpFRexSH+fxappnGQtN9dspgE2ipa1aOjtR24igG0pv6JCxImIAmrLRHX+zUF5+1wtsFVbKyfP51kIGAVNw=="
-    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -13238,19 +13042,6 @@
         "node": "*"
       }
     },
-    "node_modules/node-emoji": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmmirror.com/node-emoji/-/node-emoji-1.11.0.tgz",
-      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
-      "dependencies": {
-        "lodash": "^4.17.21"
-      }
-    },
-    "node_modules/node-emoji/node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-    },
     "node_modules/node-forge": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
@@ -17993,14 +17784,6 @@
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
       "dev": true
     },
-    "node_modules/omit.js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/omit.js/-/omit.js-1.0.2.tgz",
-      "integrity": "sha512-/QPc6G2NS+8d4L/cQhbk6Yit1WTB6Us2g84A7A/1+w9d/eRGHyEqC5kkQtHVoHZ5NFWGG7tUGgrhVZwgZanKrQ==",
-      "dependencies": {
-        "babel-runtime": "^6.23.0"
-      }
-    },
     "node_modules/on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
@@ -20106,14 +19889,6 @@
       "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==",
       "dev": true
     },
-    "node_modules/raf": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmmirror.com/raf/-/raf-3.4.1.tgz",
-      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
-      "dependencies": {
-        "performance-now": "^2.1.0"
-      }
-    },
     "node_modules/randomatic": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz",
@@ -21572,16 +21347,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/shallow-equal": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmmirror.com/shallow-equal/-/shallow-equal-1.2.1.tgz",
-      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
-    },
-    "node_modules/shallowequal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
-    },
     "node_modules/shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -22374,11 +22139,6 @@
       "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
       "dev": true
     },
-    "node_modules/string-convert": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmmirror.com/string-convert/-/string-convert-0.2.1.tgz",
-      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
-    },
     "node_modules/string-length": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.1.tgz",
@@ -23073,14 +22833,6 @@
       "resolved": "https://registry.npmjs.org/tiny-cookie/-/tiny-cookie-1.0.1.tgz",
       "integrity": "sha1-dTeGB5xkKjw9CyrMrWAPjeEZrCo="
     },
-    "node_modules/tinycolor2": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmmirror.com/tinycolor2/-/tinycolor2-1.4.2.tgz",
-      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -23760,6 +23512,11 @@
         "envify": "^3.4.0"
       }
     },
+    "node_modules/v-fit-columns": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/v-fit-columns/-/v-fit-columns-0.2.0.tgz",
+      "integrity": "sha512-xR0jIFmTyJeg4VZgEx7z8BIijZnHQegtbwAhG3L3TmyAoq/TXk7H6vzFLNxAVzOj9pSpO/0B2mf7jmuO2nE4Ag=="
+    },
     "node_modules/v8flags": {
       "version": "3.2.0",
       "resolved": "https://registry.npm.taobao.org/v8flags/download/v8flags-3.2.0.tgz",
@@ -24157,11 +23914,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/vue-ref": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/vue-ref/-/vue-ref-2.0.0.tgz",
-      "integrity": "sha512-uKNKpFOVeWNqS2mrBZqnpLyXJo5Q+vnkex6JvpENvhXHFNBW/SJTP8vJywLuVT3DpxwXcF9N0dyIiZ4/NpTexQ=="
-    },
     "node_modules/vue-router": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
@@ -24181,6 +23933,7 @@
       "version": "2.5.16",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.5.16.tgz",
       "integrity": "sha512-ZbuhCcF/hTYmldoUOVcu2fcbeSAZnfzwDskGduOrnjBiIWHgELAd+R8nAtX80aZkceWDKGQ6N9/0/EUpt+l22A==",
+      "dev": true,
       "dependencies": {
         "de-indent": "^1.0.2",
         "he": "^1.1.0"
@@ -24206,14 +23959,6 @@
         "makeerror": "1.0.x"
       }
     },
-    "node_modules/warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/watch": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/watch/-/watch-0.18.0.tgz",
@@ -25279,28 +25024,6 @@
     }
   },
   "dependencies": {
-    "@ant-design/colors": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-3.2.2.tgz",
-      "integrity": "sha512-YKgNbG2dlzqMhA9NtI3/pbY16m3Yl/EeWBRa+lB1X1YaYxHrxNexiQYCLTWO/uDvAjLFMEDU+zR901waBtMtjQ==",
-      "requires": {
-        "tinycolor2": "^1.4.1"
-      }
-    },
-    "@ant-design/icons": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-2.1.1.tgz",
-      "integrity": "sha512-jCH+k2Vjlno4YWl6g535nHR09PwCEmTBKAG6VqF+rhkrSPRLfgpU2maagwbZPLjaHuU5Jd1DFQ2KJpQuI6uG8w=="
-    },
-    "@ant-design/icons-vue": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/@ant-design/icons-vue/-/icons-vue-2.0.0.tgz",
-      "integrity": "sha512-2c0QQE5hL4N48k5NkPG5sdpMl9YnvyNhf0U7YkdZYDlLnspoRU7vIA0UK9eHBs6OpFLcJB6o8eJrIl2ajBskPg==",
-      "requires": {
-        "@ant-design/colors": "^3.1.0",
-        "babel-runtime": "^6.26.0"
-      }
-    },
     "@antv/adjust": {
       "version": "0.2.5",
       "resolved": "https://registry.npmmirror.com/@antv/adjust/-/adjust-0.2.5.tgz",
@@ -25589,22 +25312,6 @@
         "utility-types": "^3.10.0"
       }
     },
-    "@simonwep/pickr": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmmirror.com/@simonwep/pickr/-/pickr-1.7.4.tgz",
-      "integrity": "sha512-fq7jgKJT21uWGC1mARBHvvd1JYlEf93o7SuVOB4Lr0x/2UPuNC9Oe9n/GzVeg4oVtqMDfh1wIEJpsdOJEZb+3g==",
-      "requires": {
-        "core-js": "^3.6.5",
-        "nanopop": "^2.1.0"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "3.21.1",
-          "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.21.1.tgz",
-          "integrity": "sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig=="
-        }
-      }
-    },
     "@types/d3-timer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/@types/d3-timer/-/d3-timer-2.0.1.tgz",
@@ -25704,14 +25411,6 @@
         }
       }
     },
-    "add-dom-event-listener": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz",
-      "integrity": "sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==",
-      "requires": {
-        "object-assign": "4.x"
-      }
-    },
     "adm-zip": {
       "version": "0.4.16",
       "resolved": "https://registry.npm.taobao.org/adm-zip/download/adm-zip-0.4.16.tgz?cache=0&sync_timestamp=1617192302302&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fadm-zip%2Fdownload%2Fadm-zip-0.4.16.tgz",
@@ -25828,50 +25527,6 @@
       "resolved": "https://registry.npm.taobao.org/ansi-wrap/download/ansi-wrap-0.1.0.tgz",
       "integrity": "sha1-qCJQ3bABXponyoLoLqYDu/pF768="
     },
-    "ant-design-vue": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-1.7.8.tgz",
-      "integrity": "sha512-F1hmiS9vwbyfuFvlamdW5l9bHKqRlj9wHaGDIE41NZMWXyWy8qL0UFa/+I0Wl8gQWZCqODW5pN6Yfoyn85At3A==",
-      "requires": {
-        "@ant-design/icons": "^2.1.1",
-        "@ant-design/icons-vue": "^2.0.0",
-        "@simonwep/pickr": "~1.7.0",
-        "add-dom-event-listener": "^1.0.2",
-        "array-tree-filter": "^2.1.0",
-        "async-validator": "^3.0.3",
-        "babel-helper-vue-jsx-merge-props": "^2.0.3",
-        "babel-runtime": "6.x",
-        "classnames": "^2.2.5",
-        "component-classes": "^1.2.6",
-        "dom-align": "^1.10.4",
-        "dom-closest": "^0.2.0",
-        "dom-scroll-into-view": "^2.0.0",
-        "enquire.js": "^2.1.6",
-        "intersperse": "^1.0.0",
-        "is-mobile": "^2.2.1",
-        "is-negative-zero": "^2.0.0",
-        "ismobilejs": "^1.0.0",
-        "json2mq": "^0.2.0",
-        "lodash": "^4.17.5",
-        "moment": "^2.21.0",
-        "mutationobserver-shim": "^0.3.2",
-        "node-emoji": "^1.10.0",
-        "omit.js": "^1.0.0",
-        "raf": "^3.4.0",
-        "resize-observer-polyfill": "^1.5.1",
-        "shallow-equal": "^1.0.0",
-        "shallowequal": "^1.0.2",
-        "vue-ref": "^2.0.0",
-        "warning": "^4.0.0"
-      },
-      "dependencies": {
-        "async-validator": {
-          "version": "3.5.2",
-          "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-3.5.2.tgz",
-          "integrity": "sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ=="
-        }
-      }
-    },
     "anymatch": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
@@ -26070,11 +25725,6 @@
         }
       }
     },
-    "array-tree-filter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
-      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
-    },
     "array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -28204,11 +27854,6 @@
         }
       }
     },
-    "classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
-    },
     "clean-css": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -28489,24 +28134,11 @@
         }
       }
     },
-    "component-classes": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmmirror.com/component-classes/-/component-classes-1.2.6.tgz",
-      "integrity": "sha512-hPFGULxdwugu1QWW3SvVOCUHLzO34+a2J6Wqy0c5ASQkfi9/8nZcBB0ZohaEbXOQlCflMAEMmEWk7u7BVs4koA==",
-      "requires": {
-        "component-indexof": "0.0.3"
-      }
-    },
     "component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
       "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
     },
-    "component-indexof": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmmirror.com/component-indexof/-/component-indexof-0.0.3.tgz",
-      "integrity": "sha512-puDQKvx/64HZXb4hBwIcvQLaLgux8o1CbWl39s41hrIIZDl1lJiD5jc22gj3RBeGK0ovxALDYpIbyjqDUUl0rw=="
-    },
     "compressible": {
       "version": "2.0.17",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.17.tgz",
@@ -29229,7 +28861,8 @@
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
-      "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0="
+      "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
+      "dev": true
     },
     "debug": {
       "version": "3.2.6",
@@ -29526,19 +29159,6 @@
         "esutils": "^2.0.2"
       }
     },
-    "dom-align": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmmirror.com/dom-align/-/dom-align-1.12.2.tgz",
-      "integrity": "sha512-pHuazgqrsTFrGU2WLDdXxCFabkdQDx72ddkraZNih1KsMcN5qsRSTR9O4VJRlwTPCPb5COYg3LOfiMHHcPInHg=="
-    },
-    "dom-closest": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmmirror.com/dom-closest/-/dom-closest-0.2.0.tgz",
-      "integrity": "sha512-6neTn1BtJlTSt+XSISXpnOsF1uni1CHsP/tmzZMGWxasYFHsBOqrHPnzmneqEgKhpagnfnfSfbvRRW0xFsBHAA==",
-      "requires": {
-        "dom-matches": ">=1.0.1"
-      }
-    },
     "dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -29548,16 +29168,6 @@
         "utila": "~0.4"
       }
     },
-    "dom-matches": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/dom-matches/-/dom-matches-2.0.0.tgz",
-      "integrity": "sha512-2VI856xEDCLXi19W+4BechR5/oIS6bKCKqcf16GR8Pg7dGLJ/eBOWVbCmQx2ISvYH6wTNx5Ef7JTOw1dRGRx6A=="
-    },
-    "dom-scroll-into-view": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/dom-scroll-into-view/-/dom-scroll-into-view-2.0.1.tgz",
-      "integrity": "sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w=="
-    },
     "dom-serializer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
@@ -29837,11 +29447,6 @@
         }
       }
     },
-    "enquire.js": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmmirror.com/enquire.js/-/enquire.js-2.1.6.tgz",
-      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
-    },
     "entities": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
@@ -33465,11 +33070,6 @@
       "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==",
       "dev": true
     },
-    "intersperse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/intersperse/-/intersperse-1.0.0.tgz",
-      "integrity": "sha512-LGcfug7OTeWkaQ8PEq8XbTy9Jl6uCNg8DrPnQUmwxSY8UETj1Y+LLmpdD0qHdEj6KVchuH3BE3ZzIXQ1t3oFUw=="
-    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -33674,11 +33274,6 @@
         "is-extglob": "^2.1.0"
       }
     },
-    "is-mobile": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmmirror.com/is-mobile/-/is-mobile-2.2.2.tgz",
-      "integrity": "sha512-wW/SXnYJkTjs++tVK5b6kVITZpAZPtUrt9SF80vvxGiF/Oywal+COk1jlRkiVq15RFNEQKQY31TkV24/1T5cVg=="
-    },
     "is-my-ip-valid": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz",
@@ -33703,11 +33298,6 @@
       "resolved": "https://registry.npm.taobao.org/is-negated-glob/download/is-negated-glob-1.0.0.tgz",
       "integrity": "sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI="
     },
-    "is-negative-zero": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmmirror.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA=="
-    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -33879,11 +33469,6 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
     },
-    "ismobilejs": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmmirror.com/ismobilejs/-/ismobilejs-1.1.1.tgz",
-      "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw=="
-    },
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
@@ -35225,7 +34810,8 @@
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
+      "dev": true
     },
     "js-yaml": {
       "version": "3.7.0",
@@ -35323,14 +34909,6 @@
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
     },
-    "json2mq": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmmirror.com/json2mq/-/json2mq-0.2.0.tgz",
-      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
-      "requires": {
-        "string-convert": "^0.2.0"
-      }
-    },
     "json3": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
@@ -35885,6 +35463,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -36426,11 +36005,6 @@
         }
       }
     },
-    "moment": {
-      "version": "2.29.1",
-      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.1.tgz",
-      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
-    },
     "mousetrap": {
       "version": "1.6.5",
       "resolved": "https://registry.npmmirror.com/mousetrap/-/mousetrap-1.6.5.tgz",
@@ -36471,11 +36045,6 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
-    "mutationobserver-shim": {
-      "version": "0.3.7",
-      "resolved": "https://registry.npmmirror.com/mutationobserver-shim/-/mutationobserver-shim-0.3.7.tgz",
-      "integrity": "sha512-oRIDTyZQU96nAiz2AQyngwx1e89iApl2hN5AOYwyxLUB47UYsU3Wv9lJWqH5y/QdiYkc5HQLi23ZNB3fELdHcQ=="
-    },
     "mute-stdout": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/mute-stdout/download/mute-stdout-1.0.1.tgz",
@@ -36510,11 +36079,6 @@
         "to-regex": "^3.0.1"
       }
     },
-    "nanopop": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/nanopop/-/nanopop-2.1.0.tgz",
-      "integrity": "sha512-jGTwpFRexSH+fxappnGQtN9dspgE2ipa1aOjtR24igG0pv6JCxImIAmrLRHX+zUF5+1wtsFVbKyfP51kIGAVNw=="
-    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -36620,21 +36184,6 @@
         }
       }
     },
-    "node-emoji": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmmirror.com/node-emoji/-/node-emoji-1.11.0.tgz",
-      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
-      "requires": {
-        "lodash": "^4.17.21"
-      },
-      "dependencies": {
-        "lodash": {
-          "version": "4.17.21",
-          "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-        }
-      }
-    },
     "node-forge": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
@@ -40234,14 +39783,6 @@
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
       "dev": true
     },
-    "omit.js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/omit.js/-/omit.js-1.0.2.tgz",
-      "integrity": "sha512-/QPc6G2NS+8d4L/cQhbk6Yit1WTB6Us2g84A7A/1+w9d/eRGHyEqC5kkQtHVoHZ5NFWGG7tUGgrhVZwgZanKrQ==",
-      "requires": {
-        "babel-runtime": "^6.23.0"
-      }
-    },
     "on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
@@ -42041,14 +41582,6 @@
       "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==",
       "dev": true
     },
-    "raf": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmmirror.com/raf/-/raf-3.4.1.tgz",
-      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
-      "requires": {
-        "performance-now": "^2.1.0"
-      }
-    },
     "randomatic": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz",
@@ -43270,16 +42803,6 @@
         }
       }
     },
-    "shallow-equal": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmmirror.com/shallow-equal/-/shallow-equal-1.2.1.tgz",
-      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
-    },
-    "shallowequal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
-    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -43984,11 +43507,6 @@
       "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
       "dev": true
     },
-    "string-convert": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmmirror.com/string-convert/-/string-convert-0.2.1.tgz",
-      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
-    },
     "string-length": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.1.tgz",
@@ -44560,11 +44078,6 @@
       "resolved": "https://registry.npmjs.org/tiny-cookie/-/tiny-cookie-1.0.1.tgz",
       "integrity": "sha1-dTeGB5xkKjw9CyrMrWAPjeEZrCo="
     },
-    "tinycolor2": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmmirror.com/tinycolor2/-/tinycolor2-1.4.2.tgz",
-      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA=="
-    },
     "tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -45135,6 +44648,11 @@
         }
       }
     },
+    "v-fit-columns": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/v-fit-columns/-/v-fit-columns-0.2.0.tgz",
+      "integrity": "sha512-xR0jIFmTyJeg4VZgEx7z8BIijZnHQegtbwAhG3L3TmyAoq/TXk7H6vzFLNxAVzOj9pSpO/0B2mf7jmuO2nE4Ag=="
+    },
     "v8flags": {
       "version": "3.2.0",
       "resolved": "https://registry.npm.taobao.org/v8flags/download/v8flags-3.2.0.tgz",
@@ -45480,11 +44998,6 @@
         }
       }
     },
-    "vue-ref": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/vue-ref/-/vue-ref-2.0.0.tgz",
-      "integrity": "sha512-uKNKpFOVeWNqS2mrBZqnpLyXJo5Q+vnkex6JvpENvhXHFNBW/SJTP8vJywLuVT3DpxwXcF9N0dyIiZ4/NpTexQ=="
-    },
     "vue-router": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
@@ -45504,6 +45017,7 @@
       "version": "2.5.16",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.5.16.tgz",
       "integrity": "sha512-ZbuhCcF/hTYmldoUOVcu2fcbeSAZnfzwDskGduOrnjBiIWHgELAd+R8nAtX80aZkceWDKGQ6N9/0/EUpt+l22A==",
+      "dev": true,
       "requires": {
         "de-indent": "^1.0.2",
         "he": "^1.1.0"
@@ -45529,14 +45043,6 @@
         "makeerror": "1.0.x"
       }
     },
-    "warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "requires": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "watch": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/watch/-/watch-0.18.0.tgz",

package.json

@@ -17,7 +17,6 @@
     "@antv/g2": "^4.1.47",
     "@antv/x6": "^1.25.1",
     "ajv": "^8.4.0",
-    "ant-design-vue": "^1.7.6",
     "axios": "0.17.1",
     "babel-plugin-component": "0.10.1",
     "babel-polyfill": "6.26.0",

src/ant-design-vue/index.js

@@ -1,29 +0,0 @@
-/**
- * 20210714 zhang 
- * Ant Design of view   组件库
- * Ant Design 的 Vue 实现
- * 
- * 
- * 
-//  * 没有用 
-//  * 可能是应用方式不对
- */
- import Vue from 'vue'
-
-
- import 'ant-design-vue/dist/antd.css';
- import 'ant-design-vue'
-
- import Antd from 'ant-design-vue'
-
-
- import { Icon } from 'ant-design-vue'
- import { Button,Form,Input,Radio } from 'ant-design-vue';
-
-
- Vue.use(Button);
- // import '@/ant-design-vue'
- Vue.use(Antd)
- Vue.use(Icon)
- Vue.use(Form,Input,Radio)
-

src/assets/img/visisvg/circle.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 20 20"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="database.svg"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     inkscape:document-rotation="0"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="21.25"
+     inkscape:cx="2.2248061"
+     inkscape:cy="9.240471"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <ellipse
+     ry="2.9999993"
+     rx="9.999999"
+     cy="3"
+     cx="10"
+     id="path830"
+     style="fill:#ffffff;stroke:#ffffff;stroke-width:0;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:3.8;paint-order:stroke markers fill;fill-opacity:1" />
+  <path
+     d="M 0.04705881,5.6500005 V 10.04496 a 10.249999,1.7255517 0 0 0 -0.25,0.378905 A 10.249999,1.7255517 0 0 0 10.047059,12.15 a 10.249999,1.7255517 0 0 0 10.25,-1.726135 10.249999,1.7255517 0 0 0 -0.25,-0.377075 V 5.6500005 h -0.01758 A 9.9999991,2.3430015 0 0 1 10.047059,7.8520563 9.9999991,2.3430015 0 0 1 0.06659006,5.6500005 Z"
+     style="fill:#ffffff;stroke:#ffffff;stroke-width:0;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:3.8;paint-order:stroke markers fill;fill-opacity:1"
+     id="rect832" />
+  <path
+     id="rect832-3"
+     style="fill:#ffffff;stroke:#ffffff;stroke-width:0;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:3.8;paint-order:stroke markers fill;fill-opacity:1"
+     d="m 0,12 v 4.287755 A 10.249999,1.6836245 0 0 0 -0.25,16.657456 10.249999,1.6836245 0 0 0 0.00195313,17.027155 9.999999,2.927107 0 0 0 0,17.072891 9.999999,2.927107 0 0 0 10,19.999999 9.999999,2.927107 0 0 0 20,17.072891 9.999999,2.927107 0 0 0 19.998,17.02716 10.249999,1.6836245 0 0 0 20.25,16.657456 10.249999,1.6836245 0 0 0 20,16.289662 V 12 h -0.01758 a 9.9999991,2.2860716 0 0 1 -9.76367,2.147689 9.999999,2.927107 0 0 0 -0.21875,-0.002 9.999999,2.927107 0 0 0 -0.234375,0 9.9999991,2.2860716 0 0 1 -0.078125,0 A 9.9999991,2.2860716 0 0 1 0.01953125,12 Z" />
+</svg>

src/assets/img/visisvg/cloud.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 20 20"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="cloudstorage.svg"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     inkscape:document-rotation="0"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="8"
+     inkscape:cx="-11.809667"
+     inkscape:cy="15.465371"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke-width:0.0459745"
+     d="m 16.3474,8.737028 c 0,-0.056802 0.0088,-0.1136045 0.0088,-0.1704068 C 16.3562,5.4898323 14.04319,3 11.189883,3 9.1314011,3 7.363154,4.2969848 6.5326136,6.1714593 6.1710038,5.9773849 5.7646641,5.8637804 5.3359982,5.8637804 c -1.3172548,0 -2.4157112,1.0366412 -2.625579,2.3904284 C 1.1297133,8.8316984 0,10.436363 0,12.325039 0,14.701266 1.7905733,16.62781 3.9964171,16.632544 H 16.351864 v 0 c 2.018302,-0.0094 3.648127,-1.775071 3.648127,-3.947757 0.0045,-2.177422 -1.634289,-3.9430255 -3.652591,-3.947759 z"
+     id="path843" />
+</svg>

src/assets/img/visisvg/computer.svg

@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+   sodipodi:docname="client.svg"
+   id="svg4"
+   version="1.1"
+   viewBox="0 0 20 20">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     inkscape:current-layer="svg4"
+     inkscape:window-maximized="1"
+     inkscape:window-y="-8"
+     inkscape:window-x="1912"
+     inkscape:cy="8.7841123"
+     inkscape:cx="-1.2085942"
+     inkscape:zoom="21.25"
+     showgrid="false"
+     id="namedview6"
+     inkscape:window-height="1017"
+     inkscape:window-width="1920"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     guidetolerance="10"
+     gridtolerance="10"
+     objecttolerance="10"
+     borderopacity="1"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     inkscape:document-rotation="0" />
+  <rect
+     style="fill:#ffffff;fill-opacity:0;fill-rule:evenodd;stroke:#fffff9;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect834"
+     width="4.9998708"
+     height="12.999866"
+     x="1"
+     y="2.500067" />
+  <rect
+     y="6.4177394"
+     x="8.9177389"
+     height="7.0224853"
+     width="10.164522"
+     id="rect834-6"
+     style="fill:#ffffff;fill-opacity:0;fill-rule:evenodd;stroke:#fffff9;stroke-width:1.83548;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     style="fill:#ffffff;fill-opacity:0;fill-rule:evenodd;stroke:#fffff9;stroke-width:1.279;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect859"
+     width="4.7210002"
+     height="0.22099392"
+     x="11.6395"
+     y="-15.360497"
+     transform="scale(1,-1)" />
+  <rect
+     transform="scale(1,-1)"
+     y="-12.643607"
+     x="1.056393"
+     height="0.28721368"
+     width="1.1282121"
+     id="rect859-4"
+     style="fill:#df9300;fill-opacity:0;fill-rule:evenodd;stroke:#ffffff;stroke-width:0.712786;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+</svg>

src/views/modules/visi/design-connode-config.vue

@@ -1,41 +1,28 @@
 <template>
   <div class="ant-tabs-tabpane">
-    <el-tabs default-active-key="1" @change="callback">
+    <el-tabs default-active-key="1" :stretch="true">
       <el-tab-pane key="1" label="条件节点设置">
-        <el-form :layout="formLayout">
-          <el-form-item name="nodeName" label=" 条件节点名称">
-            <el-input
-              placeholder="请输入节点名称"
-              v-model="nodeName"
-            ></el-input>
+        <el-form label-position="top" label-width="auto">
+          <el-form-item label="条件节点名称" class="form">
+            <el-input placeholder="请输入节点名称" v-model="nodeName"></el-input>
           </el-form-item>
-          <el-form-item label="参数列表" size="mini">
+          <el-form-item label="参数列表" class="form">
             <el-table :data="conditionForm.sourcedatalist" style="width: 100%" border>
-              <!-- 此处的sourcedatalist  为   下方this.sourcedatalist -->
-              <el-table-column prop="paraname" label="名称(参数)" width="100">
-              </el-table-column>
-              <el-table-column prop="from" label="来源及引用方式" width="180">
-              </el-table-column>
+              <el-table-column prop="paraname" label="名称(参数)" width="100"></el-table-column>
+              <el-table-column prop="from" label="来源及引用方式" width="180"></el-table-column>
             </el-table>
+          </el-form-item>
+          <el-form-item label="文件列表" class="form">
             <el-table :data="conditionForm.sourceartilist" style="width: 100%" border>
-              <el-table-column prop="paraname" label="名称(文件)" width="100">
-              </el-table-column>
-              <el-table-column prop="from" label="来源及引用方式" width="180">
-              </el-table-column>
+              <el-table-column prop="paraname" label="名称(文件)" width="100"></el-table-column>
+              <el-table-column prop="from" label="来源及引用方式" width="180"></el-table-column>
             </el-table>
           </el-form-item>
-          <el-form-item
-            label="输入条件"
-            :label-col="formItemLayout.labelCol"
-            :wrapper-col="formItemLayout.wrapperCol"
-          >
-            <el-input
-              placeholder="请输入条件"
-              v-model="conditionForm.inputcondition"
-            ></el-input>
+          <el-form-item label="输入条件" class="form">
+            <el-input placeholder="请输入条件" v-model="conditionForm.inputcondition"></el-input>
           </el-form-item>
-          <el-form-item :wrapper-col="buttonItemLayout.wrapperCol">
-            <el-button type="primary" @click="primary"> 保存 </el-button>
+          <el-form-item class="form" style="margin-top: 20px">
+            <el-button type="primary" @click="primary">保存</el-button>
           </el-form-item>
         </el-form>
       </el-tab-pane>
@@ -43,89 +30,58 @@
   </div>
 </template>
 <script>
+import { Message } from "element-ui";
 export default {
   data() {
     return {
-      visible: false,
       // 获取所有类别列表
-      categoryList: [],
       nodeName: "",
-      sourcedatalist: [],
-      sourceartilist: [],
-      //conditionForm  为了传参方便   传一个参数
       conditionForm: {
         inputcondition: "",
         sourcedatalist: [],
-        sourceartilist: [],
+        sourceartilist: []
       },
-      cell: null,
-
-      formLayout: "horizontal",
-      form: this.$form.createForm(this, { name: "coordinated" }),
+      cell: null
     };
   },
-  //   mounted(){
-  //     this.init([],"");
-  //   },
   methods: {
-    handleFormLayoutChange(e) {
-      this.formLayout = e.target.value;
-    },
-    callback(key) {
-      console.log(key);
-    },
-    init(sourcedatalist,sourceartilist, inputcondition, cell) {
-      this.visible = true;
-      // this.conditionForm.sourcedatalist =sourcedatalist;
-      this.conditionForm.sourcedatalist = sourcedatalist;
-      this.conditionForm.sourceartilist = sourceartilist;
-      this.conditionForm.inputcondition = inputcondition;
+    init(cell) {
       this.cell = cell;
-      console.log(sourcedatalist);
-      console.log("sourcedatalist");
-      console.log(this.conditionForm.sourcedatalist);
-      console.log("design-connode-config  init");
-      console.log(this.cell.getData());
-      this.nodeName = cell.getData().nodeName;
+      const data = cell.getData();
+      this.conditionForm.sourcedatalist = data.sourcedatalist || [];
+      this.conditionForm.sourceartilist = data.sourceartilist || [];
+      this.conditionForm.inputcondition = data.inputcondition || true;
+      this.nodeName = data.nodeName;
     },
     primary() {
-      //条件节点设置只会改变inputcondition
-      this.cell.setData({ inputcondition: this.conditionForm.inputcondition });
-      this.cell.setData({nodeName:this.nodeName});
-      this.$emit("primaryclick", this.conditionForm, this.cell);
-    },
-    changeSourcedata(celldata, cell) {
-
-      // this.sourcedatalist = celldata.sourcedatalist;
-      this.conditionForm.sourcedatalist = celldata.sourcedatalist;
-      this.conditionForm.sourceartilist = celldata.sourceartilist;
-      console.log("design-connode-config  sourcedatalist ");
-      this.cell.setData({ sourcedatalist: this.sourcedatalist });
-      this.cell.setData({ sourceartilist: this.sourceartilist });
-    },
-  },
-  computed: {
-    formItemLayout() {
-      const { formLayout } = this;
-      return formLayout === "horizontal"
-        ? {
-            labelCol: { span: 4 },
-            wrapperCol: { span: 14 },
-          }
-        : {};
-    },
-    buttonItemLayout() {
-      const { formLayout } = this;
-      return formLayout === "horizontal"
-        ? {
-            wrapperCol: { span: 14, offset: 4 },
-          }
-        : {};
-    },
-  },
+      // 条件节点设置只会改变inputcondition
+      if (["", null, undefined].includes(this.nodeName)) {
+        Message.error("条件节点名称不能为空");
+        this.nodeName = this.cell.getData().nodeName;
+        return;
+      }
+      if (["", null, undefined].includes(this.conditionForm.inputcondition)) {
+        Message.error("输入条件不能为空");
+        this.conditionForm.inputcondition = this.cell.getData().inputcondition || true;
+        return;
+      }
+      this.cell.setData({
+        nodeName: this.nodeName,
+        inputcondition: this.conditionForm.inputcondition
+      });
+      Message.success("保存成功");
+    }
+  }
 };
 </script>
-<style>
+<style scope lang="scss">
+.form {
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+}
 .ant-tabs-tabpane {
   background: #fff;
   padding: 5px;
@@ -140,4 +96,4 @@ export default {
   width: 100%;
   height: 100%;
 }
-</style>
+</style>

src/views/modules/visi/design-csvselect-config.vue

@@ -1,180 +1,116 @@
 <template>
   <div class="ant-tabs-tabpane">
-    <el-tabs default-active-key="1" @change="callback" visible.sync="visible">
+    <el-tabs default-active-key="1">
       <el-tab-pane key="1" label="节点设置">
-        <el-form :layout="formLayout">
-          <el-form-item name="nodeName" label=" 节点名称">
+        <el-form label-position="top" label-width="auto">
+          <el-form-item label="节点名称" class="form">
             <el-input placeholder="请输入节点名称" v-model="nodeName" />
           </el-form-item>
-          <!-- <el-form-item name="userstyle" label="使用方法">
-            <el-descriptions >
-              选择输入文件数据集预览数据，获取表头信息，通过设置新的行列范围创建新数据集
-            </el-descriptions>
-    
-          </el-form-item> -->
-          <el-form-item name="userstyle" label=" 使用方法">
+          <el-form-item label="使用方法" class="form">
             <el-input
               placeholder="选择输入文件数据集预览数据，获取表头信息，通过设置新的行列范围创建新数据集"
-              :disabled="true"
               type="textarea"
+              :disabled="true"
               :autosize="{ minRows: 3 }"
             />
           </el-form-item>
-
-          <!-- <el-form-item :wrapper-col="buttonItemLayout.wrapperCol">
-            <el-button type="primary" @click="primary"> 保存 </el-button>
-          </el-form-item> -->
+          <el-form-item class="form" style="margin-top: 20px">
+            <el-button type="primary" @click="primary">保存</el-button>
+          </el-form-item>
         </el-form>
       </el-tab-pane>
       <el-tab-pane key="2" label="参数设置">
-        <el-form :layout="formLayout">
-          <el-form-item label="获取数据集">
-            <el-select
-              v-model="filename"
-              placeholder="请选择"
-              @change="changeslect"
-            >
-              <el-option
-                v-for="item in inputnodefilemap"
-                :key="item.name"
-                :label="item.name"
-                :value="item.name"
-              ></el-option>
+        <el-form label-position="top" label-width="auto">
+          <el-form-item label="获取数据集" class="form">
+            <el-select v-model="fileitem" placeholder="请选择" value-key="name" clearable>
+              <el-option v-for="item in inputnodefilemap" :key="item.name" :label="item.name" :value="item"></el-option>
             </el-select>
           </el-form-item>
-
-          <el-form-item
-            :wrapper-col="buttonItemLayout.wrapperCol"
-            label-width="50%"
-          >
+          <el-form-item class="form" style="margin-top: 20px">
             <el-button type="primary" @click="getCSVHeader">
               获取表头
             </el-button>
-            <el-button type="primary" @click="previewfile"> 预览 </el-button>
+            <el-button type="primary" @click="previewfile">预览</el-button>
           </el-form-item>
-        </el-form>
-        <el-divider></el-divider>
-        <!-- csv文件头信息 -->
-        <el-table
-          :data="allStringinfo"
-          style="width: 100%"
-          stripe
-          empty-text=" "
-          max-height="400"
-        >
-          <el-table-column type="index"></el-table-column>
-          <el-table-column
-            v-for="(item, index) in headerinfo"
-            :key="index"
-            :label="item"
-          >
-            <template slot-scope="scope">{{ scope.row[index] }}</template>
-          </el-table-column>
-        </el-table>
-        <span
-          >当前文件共有 {{ rownum == 0 ? 0 : rownum + 1 }} 行
-          {{ colnum == 0 ? colnum : colnum + 1 }} 列数据</span
-        >
-        <el-divider></el-divider>
-        <el-form>
-          <el-form-item label="行">
-            <el-input-number
-              v-model="rowminnum"
-              controls-position="right"
-              :min="0"
-              :max="rownum"
-            ></el-input-number>
+          <el-form-item class="form" style="margin-top: 20px">
+            <el-table :data="allStringinfo" style="width: 100%" border>
+              <el-table-column v-for="(item, index) in headerinfo" :key="index" :label="item">
+                <template slot-scope="scope">{{ scope.row[index] }}</template>
+              </el-table-column>
+            </el-table>
+          </el-form-item>
+          <el-form-item class="form" style="margin-top: 20px">
+            <span>
+              当前文件共有 {{ rownum == 0 ? 0 : rownum + 1 }} 行 {{ colnum == 0 ? colnum : colnum + 1 }} 列数据
+            </span>
+          </el-form-item>
+          <el-form-item label="行" class="form">
+            <el-input-number v-model="rowminnum" controls-position="right" :min="0" :max="rownum"></el-input-number>
             <el-input-number
               v-model="rowmaxnum"
               controls-position="right"
               :min="0"
               :max="rownum"
+              style="margin-top: 10px"
             ></el-input-number>
           </el-form-item>
-          <el-form-item label="列">
-            <el-input-number
-              v-model="colminnum"
-              controls-position="right"
-              :min="0"
-              :max="colnum"
-            ></el-input-number>
+          <el-form-item label="列" class="form">
+            <el-input-number v-model="colminnum" controls-position="right" :min="0" :max="colnum"></el-input-number>
             <el-input-number
               v-model="colmaxnum"
               controls-position="right"
               :min="0"
               :max="colnum"
+              style="margin-top: 10px"
             ></el-input-number>
           </el-form-item>
-          <el-button type="primary" @click="getnewfile">创建</el-button>
+          <el-form-item class="form" style="margin-top: 20px">
+            <el-button type="primary" @click="getnewfile">创建</el-button>
+          </el-form-item>
         </el-form>
       </el-tab-pane>
       <el-tab-pane key="3" label="新文件">
-        <el-form :layout="formLayout">
-          <el-form-item label="文件名">
-            <el-input placeholder="请输入节点名称" v-model="newfilename" />
+        <el-form label-position="top" label-width="auto">
+          <el-form-item label="文件名" class="form">
+            <el-input placeholder="暂无新文件" :disabled="true" v-model="newFileItem.newfilename" />
           </el-form-item>
-          <el-form-item
-            :wrapper-col="buttonItemLayout.wrapperCol"
-            label-width="50%"
-          >
+          <el-form-item class="form" style="margin-top: 20px">
             <el-button type="primary" @click="getnewCSVHeader">
               获取表头
             </el-button>
-            <el-button type="primary" @click="previewnewfile"> 预览 </el-button>
+            <el-button type="primary" @click="previewnewfile">预览</el-button>
+          </el-form-item>
+          <el-form-item class="form" style="margin-top: 20px">
+            <el-table :data="newallStringinfo" style="width: 100%" border>
+              <el-table-column width="100" v-for="(item, index) in newheaderinfo" :key="index" :label="item">
+                <template slot-scope="scope">{{ scope.row[index] }}</template>
+              </el-table-column>
+            </el-table>
+          </el-form-item>
+          <el-form-item class="form" style="margin-top: 20px">
+            <span>
+              当前文件共有 {{ newrownum == 0 ? 0 : newrownum + 1 }} 行 {{ newcolnum == 0 ? 0 : newcolnum + 1 }} 列数据
+            </span>
           </el-form-item>
         </el-form>
-        <el-divider></el-divider>
-        <!-- csv文件头信息 -->
-        <el-table
-          :data="newallStringinfo"
-          style="width: 100%"
-          stripe
-          empty-text=" "
-          max-height="400"
-        >
-          <el-table-column type="index"></el-table-column>
-          <el-table-column
-            v-for="(item, index) in newheaderinfo"
-            :key="index"
-            :label="item"
-          >
-            <template slot-scope="scope">{{ scope.row[index] }}</template>
-          </el-table-column>
-        </el-table>
-        <span
-          >当前文件共有 {{ newrownum == 0 ? 0 : newrownum + 1 }} 行
-          {{ newcolnum == 0 ? 0 : newcolnum + 1 }} 列数据</span
-        >
-        <el-divider></el-divider>
       </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 <script>
-// import { Tabs } from "antd";
-// import classNames from "classnames";
-import { MessageBox } from "element-ui";
 import { Message } from "element-ui";
-import templs from "../alg/templs.vue";
 export default {
-  components: { templs },
   data() {
     return {
-      visible: false,
       isMakenewfile: false,
-      inputnodefilemap: [], //输入节点输入的文件
-      inputnodefilevalue: [], //选中的文件信息
-      // inputnodefilevalue 每一个值包含以下三个部分
-      // bucketname: "visiarguartifact"
-      // fileurl: "http://150.158.138.99:9006/visiarguartifact/argoworkflow/DY_1019.csv?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20220724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20220724T102526Z&X-Amz-Expires=1000&X-Amz-SignedHeaders=host&X-Amz-Signature=e7d18bcc2b3e0352194cbeddf3b3c5e2696b09916d9cbb326f56ccd01c181718"
-      // name: "DY_1019.csv"
+      // 输入节点输入的文件
+      inputnodefilemap: [],
+      // 选中的文件信息
+      inputnodefilevalue: [],
       filename: null,
       bucketname: null,
       cell: null,
-      nodeName: "1",
-
-      formLayout: "horizontal", //:layout="formLayout"
-      form: this.$form.createForm(this, { name: "coordinated" }),
+      nodeName: "",
       rownum: 0,
       colnum: 0,
       headerinfo: null,
@@ -183,381 +119,169 @@ export default {
       rowmaxnum: null,
       colminnum: null,
       colmaxnum: null,
-
-      //包含所有文件
+      // 包含所有文件
       allfilemap: [{}],
-      fileitem: {}, //当前创建的文件
-
-      //新文件
-      tab3visi: false,
+      // 当前创建的文件
+      fileitem: {},
+      // 新文件
+      newFileItem: {},
       newrownum: 0,
       newcolnum: 0,
       newheaderinfo: null,
       newallStringinfo: null,
       newfilename: null,
       newbucketname: null,
-      newfileurl: null,
+      newfileurl: null
     };
   },
-  created() {},
-  mounted() {
-    // this.init();
-  },
   methods: {
-    handleFormLayoutChange(e) {
-      this.formLayout = e.target.value;
-    },
-    indexMethod(index) {
-      return index;
-    },
-    callback(key) {
-      console.log(key);
-    },
-    init() {
-      this.visible = true;
-    },
-    init1(celldata, cell) {
-      this.visible = true;
-      this.inputnodefilemap = celldata.inputnodefilemap;
-      this.inputnodefilevalue = celldata.inputnodefilevalue;
-      this.filename = celldata.inputnodefilevalue.name;
-      this.allfilemap = celldata.allfilemap;
-      this.nodeName = celldata.nodeName;
+    init(cell) {
       this.cell = cell;
+      const data = this.cell.getData();
+      this.nodeName = data.nodeName;
 
-      //新创建的文件初始化
-      if (celldata.isMakenewfile) {
-        //已经创建过
-        this.tab3visi = true;
-        this.newfilename =
-          celldata.allfilemap[celldata.allfilemap.length - 1].name;
-        this.newfileurl =
-          celldata.allfilemap[celldata.allfilemap.length - 1].fileurl;
-
-        this.newbucketname =
-          celldata.allfilemap[celldata.allfilemap.length - 1].bucketname;
-        this.fileitem = celldata.allfilemap[celldata.allfilemap.length - 1];
+      this.inputnodefilemap = data.inputnodefilemap || [];
+      this.inputnodefilevalue = data.inputnodefilevalue || [];
+      if (data.isMakenewfile) {
+        this.newFileItem = data.allfilemap[data.allfilemap.length - 1];
       }
     },
     primary() {
-      // console.log("design-csvselectnode-config   primary");
-      // this.cell.setData({ nodeName: this.nodeName });
-      this.cell.setData({ allfilemap: this.allfilemap });
-
-      this.cell.setData({ inputnodefilemap: this.inputnodefilemap });
-      this.cell.setData({ inputnodefilevalue: this.inputnodefilevalue });
-
-      // this.cell.setData({ outputsparameters: this.outputsparameters });
-      //20210922   zhang    是否需要保存 获取到的源数据
-
-      this.$emit("primaryCSVselectNodeclick", this.conditionForm, this.cell);
+      if (["", null, undefined].includes(this.nodeName)) {
+        Message.error("节点名称不能为空");
+        this.nodeName = this.cell.getData().nodeName;
+        return;
+      }
+      this.cell.setData({
+        nodeName: this.nodeName
+      });
+      Message.success("保存成功");
     },
-
-    //新建边时，源节点为输入节点，节点内部获取输入节点对应的文件 name及url
+    // 新建边时，源节点为输入节点，节点内部获取输入节点对应的文件 name及url
     changeinputnodemap(celldata, cell, sallfilemap) {
       celldata.inputnodefilemap = sallfilemap;
       cell.setData({ inputnodefilemap: sallfilemap });
       this.inputnodefilemap = sallfilemap;
     },
-
-    // 实现select选择框可下拉单选，也可输入赋值
-    handleSearch(value) {
-      this.handleChange(value);
-    },
-    handleChange(value) {
-      this.value = value != null && value != "" ? value : [];
-    },
-    handleBlur(value) {
-      this.value = value;
-      if (this.list.indexOf(value) == -1) {
-        this.list.push(value);
-      }
-    },
-
-    // selectBlur(e) {
-    //   // 意见类型
-    //   if (e.target.value !== "") {
-    //     this.value = e.target.value + "(其他)";
-    //     this.$forceUpdate(); // 强制更新
-    //   }
-    // },
-
-    selectBlur(e, row) {
-      // this.inputContent = e.target.value ;
-      // row.value = e.target.value;
-    },
-    selectClear() {
-      this.value = "";
-      this.$forceUpdate();
-    },
-    selectChange(val) {
-      this.value = val;
-      this.$forceUpdate();
-    },
-    cascadehandleChange(value) {},
-    cascadeparahandleChange(value) {
-      // console.log("多选参数");
-      // console.log(value);
-      // console.log(quotevalue)
-      // 是否与上次的类型相同
-      // let changeFlag = false;
-      // let changeItem = null;
-      // if (this.shareScopeEnd.length == 0) {
-      //   this.quotevalue = val
-      // } else {
-      //   // 与原数组比对
-      //   this.value.forEach((item) => {
-      //     if (item[0] !== this.shareScopeEnd[0][0]) { // 一级标签不同
-      //       changeFlag = true
-      //       changeItem = item
-      //     } else if (item[1] != this.shareScopeEnd[0][1]) { // 一级标签相同但是二级标签不同
-      //       changeFlag = true
-      //       changeItem = item
-      //     } else if ((!item[2] && this.shareScopeEnd[0][2]) || (item[2] && !this.shareScopeEnd[0][2])) {
-      //       changeFlag = true
-      //       changeItem = item
-      //     }
-      //   })
-      // }
-      // if (changeFlag) {
-      //   this.value = []
-      //   this.value.push(changeItem)
-      // }
-      // this.shareScopeEnd = this.value
-    },
-
-    // 以下4个函数是文件上传功能的
-    handleRemove(file, fileList) {
-      console.log(file, fileList);
-    },
-    handlePreview(file) {
-      console.log(file);
-    },
-    handleExceed(files, fileList) {
-      Message.warning(
-        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
-          files.length + fileList.length
-        } 个文件`
-      );
-    },
-    beforeRemove(file, fileList) {
-      return MessageBox.confirm(`确定移除 ${file.name}？`);
-    },
-
-    //
-    changeslect(item) {
-      console.log("输入文件数据集名称");
-      console.log(item);
-      // concole.log(item.target)
-      for (
-        var i = 0;
-        this.inputnodefilemap && i < this.inputnodefilemap.length;
-        i++
-      ) {
-        if (item == this.inputnodefilemap[i].name) {
-          this.inputnodefilevalue = this.inputnodefilemap[i];
-          this.bucketname = this.inputnodefilemap[i].bucketname;
-        }
-      }
-    },
-    //获取CSV文件表头信息
-    getCSVHeader() {
-      if (
-        this.inputnodefilevalue == null ||
-        this.inputnodefilevalue.name == null
-      ) {
+    // 获取CSV文件表头信息
+    async getCSVHeader() {
+      if (!Object.keys(this.fileitem).length) {
         Message.error("未选择文件");
-      } else {
-        // this.getWorkflowStatus();
-        // console.log("获取CSV文件表头信息");
-        this.$http({
-          url: this.$http.adornUrl("/visi/visiworkflow/getCSVHeader"),
-          method: "get",
-          params: this.$http.adornParams({
-            bucketname: this.inputnodefilevalue.bucketname,
-            filename: this.inputnodefilevalue.name,
-          }),
+        return;
+      }
+      const { data } = await this.$http({
+        url: this.$http.adornUrl("/visi/visiworkflow/getCSVHeader"),
+        method: "get",
+        params: this.$http.adornParams({
+          bucketname: this.fileitem.bucketname,
+          filename: this.fileitem.name
         })
-          .then(({ data }) => {
-            if (data && data.code === 0) {
-              this.$nextTick(() => {
-                this.rownum = Number(data.index) - 1;
-                this.colnum = Number(data.col) - 1;
-                this.headerinfo = data.headerinfo;
-                this.allStringinfo = data.allstring;
-              });
-            }
-          })
-          .then(() => {
-            // console.log("获取的表头信息");
-            // console.log(this.headerinfo);
-            // console.log(this.allStringinfo);
-            // console.log(this.rownum);
-            // console.log(this.colnum);
-          });
+      });
+      if (data && data.code === 0) {
+        this.rownum = Number(data.index) - 1;
+        this.colnum = Number(data.col) - 1;
+        this.headerinfo = data.headerinfo;
+        this.allStringinfo = data.allstring;
       }
     },
 
-    //预览  输入文件
-    previewfile(paraname, valuefrom) {
-      if (
-        this.inputnodefilevalue == null ||
-        this.inputnodefilevalue.name == null
-      ) {
+    // 预览输入文件
+    previewfile() {
+      if (!Object.keys(this.fileitem).length) {
         Message.error("未选择文件");
-      } else {
-        // if (artifiletype == "csv") {
-        // console.log("csv类型");
-        let routeData = this.$router.resolve({
-          path: "/visi-previewcsv",
-          query: {
-            csvurl: this.inputnodefilevalue.fileurl,
-          },
-        });
-        window.open(routeData.href, "_blank");
-        // } else {
-        //   console.log("其他");
-        //   window.open(this.inputnodefilevalue);
-        // }
+        return;
       }
+      let routeData = this.$router.resolve({
+        path: "/visi-previewcsv",
+        query: {
+          csvurl: this.fileitem.fileurl
+        }
+      });
+      window.open(routeData.href, "_blank");
     },
-    //创建新文件
-    getnewfile() {
-      if (
-        this.inputnodefilevalue == null ||
-        this.inputnodefilevalue.name == null ||
-        this.rowminnum == null ||
-        this.rowmaxnum == null ||
-        this.colminnum == null ||
-        this.colmaxnum == null
-      ) {
+    // 创建新文件
+    async getnewfile() {
+      if (!Object.keys(this.fileitem).length) {
+        Message.error("未选择文件");
+        return;
+      }
+      if (this.rowminnum == null || this.rowmaxnum == null || this.colminnum == null || this.colmaxnum == null) {
         Message.error("输入有误");
-      } else {
-        // this.getWorkflowStatus();
-        console.log("获取CSV文件表头信息");
-        this.$http({
-          url: this.$http.adornUrl("/visi/visiworkflow/getnewfile"),
-          method: "get",
-          params: this.$http.adornParams({
-            bucketname: this.inputnodefilevalue.bucketname,
-            filename: this.inputnodefilevalue.name,
-            rowminnum: this.rowminnum,
-            rowmaxnum: this.rowmaxnum,
-            colminnum: this.colminnum,
-            colmaxnum: this.colmaxnum,
-          }),
+        return;
+      }
+      const { data } = await this.$http({
+        url: this.$http.adornUrl("/visi/visiworkflow/getnewfile"),
+        method: "get",
+        params: this.$http.adornParams({
+          bucketname: this.fileitem.bucketname,
+          filename: this.fileitem.name,
+          rowminnum: this.rowminnum,
+          rowmaxnum: this.rowmaxnum,
+          colminnum: this.colminnum,
+          colmaxnum: this.colmaxnum
         })
-          .then(({ data }) => {
-            if (data && data.code === 0) {
-              this.$nextTick(() => {
-                this.newfilename = data.newfilename;
-                this.newfileurl = data.newfileurl;
-                this.newbucketname = "visiarguartifact";
-
-                // var fileitem = {};
-                this.fileitem["name"] = data.newfilename;
-                this.fileitem["bucketname"] = "visiarguartifact";
-                this.fileitem["fileurl"] = data.newfileurl;
-
-                // this.allfilemap.pop(0);
-
-                Message.success("创建新文件成功");
-                // this.primary();
-              });
-            }
-          })
-          .then(() => {
-            if(this.allfilemap==null){
-              this.allfilemap = [];
-            }
-          }).then(() => {
-            this.allfilemap.push(this.fileitem);
-          })
-          .then(() => {
-            // console.log("获取的表头信息");
-            // console.log(this.headerinfo);
-            // console.log(this.allStringinfo);
-            // console.log(this.rownum)
-            // console.log(this.colnum)
-            // Message.success("创建新文件成功")
-
-            this.primary();
-          });
+      });
+      if (data && data.code === 0) {
+        this.fileitem["name"] = data.newfilename;
+        this.fileitem["bucketname"] = "visiarguartifact";
+        this.fileitem["fileurl"] = data.newfileurl;
+        this.newFileItem = this.fileitem;
+        this.inputnodefilemap.push(this.fileitem);
+        this.cell.setData({
+          inputnodefilemap: this.inputnodefilemap
+        });
+        Message.success("创建新文件成功");
+      } else {
+        Message.error("创建失败");
       }
     },
-
-    //获取新创建的文件的CSV文件表头信息
-    getnewCSVHeader() {
-      if (this.newfilename == null) {
+    // 获取新创建的文件的CSV文件表头信息
+    async getnewCSVHeader() {
+      if (!Object.keys(this.newFileItem).length) {
         Message.error("未创建新文件");
-      } else {
-        // this.getWorkflowStatus();
-        console.log("获取CSV文件表头信息");
-        this.$http({
-          url: this.$http.adornUrl("/visi/visiworkflow/getCSVHeader"),
-          method: "get",
-          params: this.$http.adornParams({
-            bucketname: this.newbucketname,
-            filename: this.newfilename,
-          }),
+        return;
+      }
+      const { data } = await this.$http({
+        url: this.$http.adornUrl("/visi/visiworkflow/getCSVHeader"),
+        method: "get",
+        params: this.$http.adornParams({
+          bucketname: this.newFileItem.newbucketname,
+          filename: this.newFileItem.newfilename
         })
-          .then(({ data }) => {
-            if (data && data.code === 0) {
-              this.$nextTick(() => {
-                this.newrownum = Number(data.index) - 1;
-                this.newcolnum = Number(data.col) - 1;
-                this.newheaderinfo = data.headerinfo;
-                this.newallStringinfo = data.allstring;
-              });
-            }
-          })
-          .then(() => {});
+      });
+      if (data && data.code === 0) {
+        this.newrownum = Number(data.index) - 1;
+        this.newcolnum = Number(data.col) - 1;
+        this.newheaderinfo = data.headerinfo;
+        this.newallStringinfo = data.allstring;
       }
     },
 
-    //预览  新创建的文件
-    previewnewfile(paraname, valuefrom) {
-      if (this.newfilename == null) {
+    // 预览新创建的文件
+    previewnewfile() {
+      if (!Object.keys(this.newFileItem).length) {
         Message.error("未创建新文件");
-      } else {
-        // if (artifiletype == "csv") {
-        console.log("csv类型");
-        let routeData = this.$router.resolve({
-          path: "/visi-previewcsv",
-          query: {
-            csvurl: this.newfileurl,
-          },
-        });
-        window.open(routeData.href, "_blank");
-        // } else {
-        //   console.log("其他");
-        //   window.open(this.inputnodefilevalue);
-        // }
+        return;
       }
-    },
-  },
-  computed: {
-    formItemLayout() {
-      const { formLayout } = this;
-      return formLayout === "horizontal"
-        ? {
-            labelCol: { span: 4 },
-            wrapperCol: { span: 14 },
-          }
-        : {};
-    },
-    buttonItemLayout() {
-      const { formLayout } = this;
-      return formLayout === "horizontal"
-        ? {
-            wrapperCol: { span: 14, offset: 4 },
-          }
-        : {};
-    },
-  },
+      let routeData = this.$router.resolve({
+        path: "/visi-previewcsv",
+        query: {
+          csvurl: this.newFileItem.newfileurl
+        }
+      });
+      window.open(routeData.href, "_blank");
+    }
+  }
 };
 </script>
-<style>
+<style scope>
+.form {
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+}
 .ant-tabs-tabpane {
   background: #fff;
   padding: 5px;
@@ -583,17 +307,4 @@ export default {
 .el-form-item.el-input {
   width: 150px;
 }
-.logList-item {
-  padding: 8px 0;
-  margin: 0;
-  font: normal 13px/1.2 "Courier", sans-serif;
-}
-.log-box {
-  /* min-height: 500px; */
-  /* max-height: 800px; */
-  height: 100%;
-  padding: 10px;
-  margin: 10px;
-  background-color: #fff;
-}
-</style>
+</style>

src/views/modules/visi/design-experconfig.vue

@@ -1,89 +1,62 @@
 <template>
-  <div class="ant-tabs-tabpane">
-    <el-tabs default-active-key="1" @change="callback">
+  <div class="main">
+    <el-tabs default-active-key="1">
       <el-tab-pane key="1" label="实验设置">
-        <el-form :layout="formLayout">
-          <el-form-item name="nodeName" label=" 实验名称">
-            <el-input
-              placeholder="input placeholder"
-              v-model="experimentName"
-            ></el-input>
-          </el-form-item>
-
-          <el-form-item :wrapper-col="buttonItemLayout.wrapperCol">
-            <el-button type="primary" @click="primary"> 保存 </el-button>
-          </el-form-item>
-        </el-form>
+        <el-input class="my-input" placeholder="请输入实验名称" v-model="inputData"></el-input>
+        <el-button type="primary" @click="handleClick" class="button">保存</el-button>
       </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 <script>
+import { Message } from "element-ui";
 export default {
+  props: {
+    data: {
+      type: String,
+      require: true,
+      default: ""
+    }
+  },
   data() {
     return {
-      visible: false,
-
-      nodeName: "",
-      experimentName: "",
-
-      formLayout: "horizontal",
-      form: this.$form.createForm(this, { name: "coordinated" }),
+      inputData: this.data
     };
   },
-  //   mounted(){
-  //     this.init([],"");
-  //   },
-  methods: {
-    handleFormLayoutChange(e) {
-      this.formLayout = e.target.value;
-    },
-    callback(key) {
-      console.log(key);
-    },
-    init() {
-      this.visible = true;
-      // this.conditionForm.sourcedatalist =sourcedatalist;
-    },
-    primary() {
-      
-      this.$emit("primaryExperimentclick", this.experimentName);
-    },
-  },
-  computed: {
-    formItemLayout() {
-      const { formLayout } = this;
-      return formLayout === "horizontal"
-        ? {
-            labelCol: { span: 4 },
-            wrapperCol: { span: 14 },
-          }
-        : {};
-    },
-    buttonItemLayout() {
-      const { formLayout } = this;
-      return formLayout === "horizontal"
-        ? {
-            wrapperCol: { span: 14, offset: 4 },
-          }
-        : {};
-    },
+  watch: {
+    data: {
+      handler(newVal) {
+        this.inputData = newVal;
+      },
+      immediate: true,
+      deep: true
+    }
   },
+  methods: {
+    handleClick() {
+      if (["", null, undefined].includes(this.inputData)) {
+        Message.error("名称不能为空");
+        this.inputData = this.data;
+        return;
+      }
+      this.$emit("update:data", this.inputData);
+      Message.success("保存成功");
+    }
+  }
 };
 </script>
-<style>
-.ant-tabs-tabpane {
+<style scope>
+.main {
   background: #fff;
-  padding: 5px;
+  padding: 10px;
   width: 100%;
   height: 100%;
 }
-.ant-tabs-tab {
-  flex: 1 1 50px;
-  padding: 7px 16px;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
+.my-input {
+  margin: 40px 0;
+}
+.button {
+  display: block;
+  margin: 0 auto;
 }
-</style>
+</style>

src/views/modules/visi/design-inputnode-config.vue

@@ -0,0 +1,215 @@
+<template>
+  <el-dialog :title="'数据输入'" :close-on-click-modal="false" :visible.sync="visible">
+    <el-form label-width="160px">
+      <el-form-item label="静态数据集文件" prop="st_dataListurl">
+        <el-select value-key="datasetName" v-model="st_dataListvalue" multiple placeholder="请选择">
+          <el-option
+            v-for="item in st_dataList"
+            :key="item.datasetName"
+            :label="item.datasetName"
+            :value="item"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="动态数据集文件" prop="dy_dataListurl">
+        <!-- 选择  dataset -->
+        <el-select v-model="dy_dataListvalue" multiple placeholder="请选择">
+          <el-option
+            v-for="item in dy_dataList"
+            :key="item.datasetName"
+            :label="item.datasetName"
+            :value="item.datasetName"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="文件" size="mini">
+        <el-upload
+          class="upload-demo"
+          action="#"
+          multiple
+          :on-preview="handlePreview"
+          :on-remove="handleRemove"
+          :before-remove="beforeRemove"
+          :limit="10"
+          :on-exceed="handleExceed"
+          :on-change="fileChange"
+          :file-list="fileList"
+          :auto-upload="false"
+        >
+          <el-button size="small" type="primary">点击上传</el-button>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { Message, MessageBox } from "element-ui";
+export default {
+  data() {
+    return {
+      visible: false,
+      // 数据集文件选择
+      st_dataList: [],
+      dy_dataList: [],
+      // 选择器的值
+      st_dataListvalue: [],
+      dy_dataListvalue: [],
+      // 包含文件名与url
+      st_dataListmap: [],
+      dy_dataListmap: [],
+      // 外部上传文件最终包含文件名和url
+      externalfilemap: [],
+      // 外部文件上传
+      fileList: [],
+      // 包含所有文件
+      allfilemap: [],
+      cell: null,
+      // 用户编号
+      userID: this.$store.state.user.id,
+      // 类型
+      category: {}
+    };
+  },
+  methods: {
+    async init(cell) {
+      this.visible = true;
+      this.cell = cell;
+      this.st_dataListvalue = this.cell.getData().st_dataListvalue || [];
+      this.dy_dataListvalue = this.cell.getData().dy_dataListvalue || [];
+      this.fileList = this.cell.getData().fileList || [];
+      this.allfilemap = this.cell.getData().allfilemap || [];
+      this.fileList[0];
+
+
+      var link = document.createElement("a");
+      link.download = this.fileList[0].name;
+      link.href = window.URL.createObjectURL(this.fileList[0].raw);
+      link.click();
+      window.URL.revokeObjectURL(link.href);
+
+
+      const { data } = await this.$http({
+        url: this.$http.adornUrl("/dataset/listAll"),
+        method: "get"
+      });
+      this.st_dataList = data.list;
+      const {
+        data: { list }
+      } = await this.$http({
+        url: this.$http.adornUrl("/datasetdy/listAll"),
+        method: "get"
+      });
+      this.dy_dataList = list;
+
+      const res = await this.$http({
+        url: this.$http.adornUrl("/category/select"),
+        method: "get"
+      });
+      res.data.list.forEach((item) => {
+        this.category[item.categoryId] = item.categoryName;
+      });
+    },
+    // 表单提交
+    async dataFormSubmit() {
+      // 处理选择的 静态数据集或者动态数据集
+      this.st_dataListmap = [];
+      this.dy_dataListmap = [];
+      this.externalfilemap = [];
+      this.allfilemap = [];
+
+      for (let item of this.st_dataListvalue) {
+        const categoryName = this.category[item.categoryId];
+        const { data } = await this.$http({
+          url: this.$http.adornUrl("/dataset/downloadDataset"),
+          method: "get",
+          params: this.$http.adornParams({
+            datasetName: categoryName.includes("文件") ? item.datasetName : item.datasetName + ".csv",
+            categoryName
+          })
+        });
+        if (data && data.code === 0 && data.downloadUrl) {
+          let fileitem = {};
+          fileitem["name"] = item.datasetName;
+          fileitem["bucketname"] = "dataset";
+          fileitem["fileurl"] = data.downloadUrl;
+          this.st_dataListmap.push(fileitem);
+          this.allfilemap.push(fileitem);
+        }
+      }
+
+      for (let item of this.dy_dataListvalue) {
+        const { data } = await this.$http({
+          url: this.$http.adornUrl("/dataset/downloadDataset"),
+          method: "get",
+          params: this.$http.adornParams({
+            datasetName: item + ".csv"
+          })
+        });
+        if (data && data.code === 0) {
+          let fileitem = {};
+          fileitem["name"] = dydatasetname;
+          fileitem["bucketname"] = "dydataset";
+          fileitem["fileurl"] = data.downloadUrl;
+          this.dy_dataListmap.push(fileitem);
+          this.allfilemap.push(fileitem);
+        }
+      }
+      // 处理外部上传的数据
+      if (this.fileList.length > 0) {
+        let formData = new FormData();
+        this.fileList.forEach((file) => {
+          formData.append("file", file.raw);
+        });
+        const { data } = await this.$http({
+          url: this.$http.adornUrl("/visi/visiworkflow/saveinputfile"),
+          method: "post",
+          data: formData
+        });
+        if (data && data.code === 0) {
+          let jsonfileurl = data.jsonfileurl;
+          for (let val in jsonfileurl) {
+            let fileitem = {};
+            fileitem["name"] = val;
+            fileitem["bucketname"] = "visiarguartifact";
+            fileitem["fileurl"] = jsonfileurl[val];
+            this.externalfilemap.push(fileitem);
+            this.allfilemap.push(fileitem);
+          }
+        }
+      }
+      this.cell.setData({
+        st_dataListvalue: this.st_dataListvalue,
+        dy_dataListvalue: this.dy_dataListvalue,
+        fileList: this.fileList,
+        allfilemap: this.allfilemap
+      });
+      this.visible = false;
+      Message.success("保存成功");
+    },
+    // 以下4个函数是文件上传功能的
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
+      );
+    },
+    beforeRemove(file, fileList) {
+      return MessageBox.confirm(`确定移除 ${file.name}？`);
+    },
+    // 文件改变时
+    fileChange(file, fileList) {
+      this.fileList.push(file);
+    }
+  }
+};
+</script>

src/views/modules/visi/design-inputnode-config1.vue

@@ -1,372 +0,0 @@
-<template>
-  <el-dialog
-    :title="'数据输入'"
-    :close-on-click-modal="false"
-    :visible.sync="visible"
-  >
-    <el-form
-      :model="dataForm"
-      ref="dataForm"
-      @keyup.enter.native="dataFormSubmit()"
-      label-width="160px"
-    >
-      <el-form-item label="静态数据集文件" prop="st_dataListurl">
-        <el-select v-model="st_dataListvalue" multiple placeholder="请选择">
-          <el-option
-            v-for="item in st_dataList"
-            :key="item.datasetName"
-            :label="item.datasetName"
-            :value="item.datasetName"
-          >
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="动态数据集文件" prop="dy_dataListurl">
-        <!-- 选择  dataset -->
-        <el-select v-model="dy_dataListvalue" multiple placeholder="请选择">
-          <el-option
-            v-for="item in dy_dataList"
-            :key="item.datasetName"
-            :label="item.datasetName"
-            :value="item.datasetName"
-          >
-          </el-option>
-        </el-select>
-      </el-form-item>
-
-      <el-form-item label="文件" size="mini">
-        <el-upload
-          class="upload-demo"
-          action="#"
-          :on-preview="handlePreview"
-          :on-remove="handleRemove"
-          :before-remove="beforeRemove" multiple
-          :limit="10"
-          :on-exceed="handleExceed"
-          :on-change="fileChange"
-          :file-list="fileList"
-        >
-          <el-button size="small" type="primary">点击上传</el-button>
-        </el-upload>
-      </el-form-item>
-
-      <!-- <el-form-item label="形式">
-          <el-select v-model="dataForm.form" placeholder="选择算法形式">
-            <el-option v-for="data in forms" :key="data.value" :label="data.label" :value="data.value">
-            </el-option>
-          </el-select>
-      </el-form-item>
-
-      <el-form-item label="描述信息" prop="remark">
-        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" placeholder="请输入内容" v-model="dataForm.remark">
-        </el-input>
-
-      </el-form-item> -->
-    </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-    </span>
-  </el-dialog>
-</template>
-
-<script>
-import { MessageBox } from 'element-ui'
-import { Message } from "element-ui"
-export default {
-  data() {
-    return {
-      visible: false,
-      // 获取所有类别列表
-      categoryList: [],
-      dataForm: {
-        id: 0,
-        modelName: "",
-        // 本模板的类别
-        categoryId: 1,
-        form: null,
-        remark: "",
-        datasetName: "",
-        st_dataListurl: [{ datasetName: "" }],
-        dy_dataListurl: [{ datasetName: "" }],
-      },
-      textarea2: "",
-
-      forms: [
-        {
-          label: "传统算法",
-          value: 1,
-        },
-        {
-          label: "智能算法",
-          value: 2,
-        },
-      ],
-      dataRule: {
-        modelName: [
-          { required: true, message: "用户名不能为空", trigger: "blur" },
-        ],
-        // email: [
-        //   { required: true, message: "邮箱不能为空", trigger: "blur" },
-        //   { validator: validateEmail, trigger: "blur" },
-        // ],
-        // mobile: [
-        //   { required: true, message: "手机号不能为空", trigger: "blur" },
-        //   { validator: validateMobile, trigger: "blur" },
-        // ],
-        // codes: [
-        //   { required: true, message: "代码文件不能为空", trigger: "blur" },
-        // ],
-      },
-
-      // 数据集文件选择
-      st_dataList: [{ datasetName: "" }],
-      dy_dataList: [{ datasetName: "" }],
-
-      //选择器 值
-      st_dataListvalue: [],
-      dy_dataListvalue: [],
-
-      //  包含文件名与url
-      st_dataListmap: [],
-      dy_dataListmap: [],
-      externalfilemap: [], //外部上传文件最终   包含文件名和url
-
-      //外部文件  上传
-      fileList: [],
-
-      //包含所有文件
-      allfilemap: [{},],
-      cell: null,
-
-      pageIndex: 1,
-      pageSize: 100,
-      st_totalPage: 0,
-      dy_totalPage: 0,
-      datasetName: "",
-      userID: this.$store.state.user.id, // 用户编号
-    };
-  },
-  methods: {
-    init(cell) {
-      this.visible = true;
-
-      this.$http({
-        url: this.$http.adornUrl("/dataset/list"),
-        method: "get",
-        params: this.$http.adornParams({
-          currentUserId: this.userID,
-          page: this.pageIndex,
-          limit: this.pageSize,
-          datasetName: this.datasetName,
-        }),
-      }).then(({ data }) => {
-        if (data && data.code === 0) {
-          this.st_dataList = data.page.list;
-          this.st_totalPage = data.page.totalCount;
-          // this.statusunique = this.unique(data.page.list);
-        } else {
-          this.st_dataList = [];
-          this.totalPage = 0;
-        }
-        // this.dataListLoading = false;
-      });
-
-      this.$http({
-        url: this.$http.adornUrl("/datasetdy/list"),
-        method: "get",
-        params: this.$http.adornParams({
-          currentUserId: this.userID,
-          page: this.pageIndex,
-          limit: this.pageSize,
-          datasetName: this.datasetName,
-        }),
-      }).then(({ data }) => {
-        if (data && data.code === 0) {
-          this.dy_dataList = data.page.list;
-          this.dy_totalPage = data.page.totalCount;
-          // this.statusunique = this.unique(data.page.list);
-        } else {
-          this.dy_dataList = [];
-          this.totalPage = 0;
-        }
-        // this.dataListLoading = false;
-      });
-      this.cell = cell;
-      this.st_dataListvalue = cell.getData().st_dataListvalue;
-      this.dy_dataListvalue = cell.getData().dy_dataListvalue;
-      this.fileList = cell.getData().fileList;
-      this.allfilemap = cell.getData().allfilemap;
-    },
-    // 表单提交
-    dataFormSubmit() {
-      this.$refs["dataForm"].validate((valid) => {
-        if (valid) {
-          //处理选择的 静态数据集或者动态数据集
-
-          console.log(this.st_dataListvalue);
-          console.log(this.dy_dataListvalue);
-          this.st_dataListmap = [];
-          this.dy_dataListmap = [];
-          this.externalfilemap = [];
-          this.allfilemap = [];
-          // for (itemname of this.st_dataListvalue)
-          for (var i = 0; i < this.st_dataListvalue.length; i++) {
-            const stdatasetname = this.st_dataListvalue[i];
-            this.$http({
-              url: this.$http.adornUrl("/dataset/downloadDataset"),
-              method: "get",
-              params: this.$http.adornParams({
-                datasetName: this.st_dataListvalue[i] + ".csv",
-              }),
-            }).then(({ data }) => {
-              if (data && data.code === 0) {
-                // window.location.href = data.downloadUrl;
-                var fileitem = {};
-                fileitem["name"] = stdatasetname;
-                fileitem["bucketname"] = "dataset";
-                fileitem["fileurl"] = data.downloadUrl;
-                // console.log("data.downloadUrl")
-                // console.log(data.downloadUrl)
-
-                this.st_dataListmap.push(fileitem);
-                //this.st_dataListmap.push({"name":stdatasetname,"bucketname":"dataset","fileurl":data.downloadUrl});
-                this.allfilemap.push(fileitem);
-                //this.allfilemap.push({"name":stdatasetname,"bucketname":"dataset","fileurl":data.downloadUrl});
-                // celldata.allfilemap = this.allfilemap;
-              } else {
-                // this.$message.error("下载失败");
-              }
-            });
-          }
-
-          for (var j = 0; j < this.dy_dataListvalue.length; j++) {
-            const dydatasetname = this.dy_dataListvalue[j];
-            this.$http({
-              url: this.$http.adornUrl("/dataset/downloadDataset"),
-              method: "get",
-              params: this.$http.adornParams({
-                datasetName: this.dy_dataListvalue[j] + ".csv",
-              }),
-            }).then(({ data }) => {
-              if (data && data.code === 0) {
-                // window.location.href = data.downloadUrl;
-                var fileitem = {};
-                fileitem["name"] = dydatasetname;
-                fileitem["bucketname"] = "dydataset";
-                fileitem["fileurl"] = data.downloadUrl;
-
-                this.dy_dataListmap.push(fileitem);
-                //this.dy_dataListmap.push({"name":dydatasetname,"bucketname":"dydataset","fileurl":data.downloadUrl});
-                //this.allfilemap.push({"name":dydatasetname,"bucketname":"dydataset","fileurl":data.downloadUrl});
-                this.allfilemap.push(fileitem);
-                // celldata.allfilemap = this.allfilemap;
-              } else {
-                // this.$message.error("下载失败");
-              }
-            });
-          }
-          //处理外部上传的数据
-          let formData = new FormData();
-          this.fileList.forEach((file) => {
-            formData.append("file", file.raw);
-          });
-
-          if (formData != null) {
-            var jsonfileurl = {};
-            this.$http({
-              url: this.$http.adornUrl("/visi/visiworkflow/saveinputfile"),
-              method: "post",
-              data: formData,
-            }).then(({ data }) => {
-              if (data && data.code === 0) {
-                jsonfileurl = data.jsonfileurl;
-                // myJson = { name: "phpernote", password: "1111" };
-                for (var val in jsonfileurl) {
-                  // alert(val + " " + myJson[val]); //输出如:name
-                  var fileitem = {};
-                  fileitem["name"] = val;
-                  fileitem["bucketname"] = "visiarguartifact";
-                  fileitem["fileurl"] = jsonfileurl[val];
-                  this.externalfilemap.push(fileitem);
-                  this.allfilemap.push(fileitem);
-                  // celldata.allfilemap = this.allfilemap;
-                }
-
-                console.log();
-              } else {
-                this.$message.error(data.msg);
-              }
-            });
-            // .then(({ data }) => {
-            //   if (data && data.code === 0) {
-            //     this.$message({
-            //       message: "操作成功",
-            //       type: "success",
-            //       duration: 1500,
-            //       onClose: () => {
-            //         this.visible = false;
-            //         // this.$emit("refreshDataList");
-            //         console.log("filemap");
-            //         console.log(this.st_dataListmap);
-            //         console.log(this.dy_dataListmap);
-            //         console.log(this.externalfilemap)
-            //         console.log(this.allfilemap);
-            //       },
-            //     });
-            //   } else {
-            //     this.$message.error(data.msg);
-            //   }
-            // });
-          }
-
-          this.visible = false;
-          // this.$emit("refreshDataList");
-          // console.log("filemap");
-          // console.log(this.st_dataListmap);
-          // console.log(this.dy_dataListmap);
-          // console.log(this.externalfilemap);
-          // console.log(this.allfilemap);
-          var celldata = this.cell.getData();
-          celldata.st_dataListvalue = this.st_dataListvalue;
-          celldata.dy_dataListvalue = this.dy_dataListvalue;
-          celldata.fileList = this.fileList;
-          celldata.allfilemap = this.allfilemap;
-          // this.$emit("refreshinputnode",this.cell,this.st_dataListvalue,this.dy_dataListvalue,this.fileList,this.allfilemap);
-          this.$emit("refreshinputnode",this.cell,celldata);
-        }
-      });
-    },
-    // 以下4个函数是文件上传功能的
-    handleRemove(file, fileList) {
-      console.log(file, fileList);
-    },
-    handlePreview(file) {
-      console.log(file);
-    },
-    handleExceed(files, fileList) {
-      this.$message.warning(
-        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
-          files.length + fileList.length
-        } 个文件`
-      );
-    },
-    beforeRemove(file, fileList) {
-      return MessageBox.confirm(`确定移除 ${file.name}？`);
-    },
-    // 文件改变时
-    fileChange(file, fileList) {
-      this.fileList = fileList;
-      this.fileList.push(file);
-    },
-  },
-};
-</script>
-<style>
-.el-form-item .el-select {
-  width: 100%;
-}
-.el-form-item .el-input {
-  width: 100%;
-}
-</style>

src/views/modules/visi/design-outputnode-config.vue

@@ -1,109 +1,39 @@
 <template>
-  <el-dialog
-    :title="'输出节点'"
-    :close-on-click-modal="false"
-    :visible.sync="visible"
-  >
-    <el-form
-      :model="dataForm"
-      ref="dataForm"
-      label-width="160px"
-    >
-      <!-- <div class="sub-title"> 参数型输出</div> -->
+  <el-dialog :title="'输出节点'" :close-on-click-modal="false" :visible.sync="visible">
+    <el-form :model="dataForm" ref="dataForm" label-width="160px">
       <el-form-item name="paraoutput"></el-form-item>
       <el-table :data="outputsparameters" :key="outputparakey" border style="width: 100%">
         <el-table-column label="参数型输出" align="center">
-          <el-table-column
-            prop="paraname"
-            header-align="center"
-            align="center"
-            label="输出参数名称"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="paratype"
-            header-align="center"
-            align="center"
-            label="参数类型"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="paradesc"
-            header-align="center"
-            align="center"
-            label="描述"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="paravalue"
-            header-align="center"
-            align="center"
-            label="结果"
-          >
-          </el-table-column>
+          <el-table-column prop="paraname" header-align="center" align="center" label="输出参数名称"></el-table-column>
+          <el-table-column prop="paratype" header-align="center" align="center" label="参数类型"></el-table-column>
+          <el-table-column prop="paradesc" header-align="center" align="center" label="描述"></el-table-column>
+          <el-table-column prop="paravalue" header-align="center" align="center" label="结果"></el-table-column>
         </el-table-column>
       </el-table>
       <!-- <div class="sub-title"> 文件型输出</div> -->
       <el-form-item name="fileoutput" label="" label-width="50%"></el-form-item>
       <el-table :data="outputsartifacts" border style="width: 100%">
         <el-table-column label="文件型输出" align="center">
-          <el-table-column
-            prop="paraname"
-            header-align="center"
-            align="center"
-            label="输出文件名称"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="paratype"
-            header-align="center"
-            align="center"
-            label="参数类型"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="paradesc"
-            header-align="center"
-            align="center"
-            label="描述"
-          >
-          </el-table-column>
+          <el-table-column prop="paraname" header-align="center" align="center" label="输出文件名称"></el-table-column>
+          <el-table-column prop="paratype" header-align="center" align="center" label="参数类型"></el-table-column>
+          <el-table-column prop="paradesc" header-align="center" align="center" label="描述"></el-table-column>
         </el-table-column>
-        <el-table-column
-          fixed="right"
-          header-align="center"
-          align="center"
-          width="150"
-          label="操作"
-        >
+        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
           <template slot-scope="scope">
-            <el-button
-              type="text"
-              size="small"
-              @click="previewfile(scope.row.paraname, scope.row.valuefrom)"
-              >预览
+            <el-button type="text" size="small" @click="previewfile(scope.row.paraname, scope.row.valuefrom)">
+              预览
+            </el-button>
+            <el-button type="text" size="small" @click="downloadoutputresult(scope.row.paraname, scope.row.valuefrom)">
+              下载
             </el-button>
-            <el-button
-              type="text"
-              size="small"
-              @click="
-                downloadoutputresult(scope.row.paraname, scope.row.valuefrom)
-              "
-              >下载</el-button
-            >
           </template>
         </el-table-column>
       </el-table>
     </el-form>
-    <!-- <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-    </span> -->
   </el-dialog>
 </template>
 
 <script>
-
 export default {
   data() {
     return {
@@ -119,7 +49,7 @@ export default {
         st_dataListurl: [{ datasetName: "" }],
         dy_dataListurl: [{ datasetName: "" }],
         outputsparameters: null, //输出参数
-        outputsartifacts: null, //输出文件
+        outputsartifacts: null //输出文件
       },
 
       outputsparameters: [], //输出参数
@@ -130,44 +60,30 @@ export default {
       //包含所有文件
       cell: null,
       workflowStatus: "",
-      outputparakey: 1,//outputparameters table key 
-
+      outputparakey: 1 //outputparameters table key
     };
   },
   methods: {
-    init1(cell, celldata, workflowName) {
+    init(cell, workflowName, workflowStatus) {
       this.visible = true;
       this.workflowName = workflowName;
-      // this.wftemplateName = celldata.wftemplatename;
-      //此时celldata.sourcealgocell == null
-    },
-    init(cell, celldata, sourcealgocelldata, workflowName,workflowStatus) {
-      this.visible = true;
-      this.workflowName = workflowName;
-
-      if (celldata.sourcealgocell != null) {
+      this.cell = cell;
+      this.workflowStatus = workflowStatus;
+      const { sourcealgocell } = this.cell.getData();
+      if (sourcealgocell != null) {
+        const sourcealgocelldata = sourcealgocell.hasOwnProperty("getData") && sourcealgocell.getData instanceof Function
+          ? sourcealgocell.getData()
+          : sourcealgocell.data;
         this.outputsparameters = sourcealgocelldata.outputsparameters;
         this.outputsartifacts = sourcealgocelldata.outputsartifacts;
-        this.sourcealgocell = celldata.sourcealgocell;
-        // console.log("更新输出");
-        // console.log(this.outputsparameters);
-        // console.log(this.outputsartifacts);
-
+        this.sourcealgocell = sourcealgocell;
         this.wftemplateName = sourcealgocelldata.wftempname;
-        // console.log(this.wftemplateName);
       }
-      this.workflowStatus = workflowStatus;
-      this.getOutputparavalue();//获取输出参数结果
+      this.getOutputparavalue(); //获取输出参数结果
     },
 
-
     // 新建边是 输出节点获取 算法节点输出相关
-    changeoutputsourcealgo(
-      currentcell,
-      currentcelldata,
-      source,
-      sourcecelldata
-    ) {
+    changeoutputsourcealgo(currentcell, currentcelldata, source, sourcecelldata) {
       //
       currentcelldata.sourcealgocell = source;
       this.sourcealgocell = source;
@@ -191,15 +107,15 @@ export default {
           workflowName: this.workflowName,
           wftemplateName: this.wftemplateName,
           outputartiparaName: paraname,
-          outputartiparapath: valuefrom,
-        }),
+          outputartiparapath: valuefrom
+        })
       }).then(({ data }) => {
         if (data && data.code === 0) {
           // console.log("输出节点  下载数据集");
           // console.log(data.outputfileUrl);
           // window.location.href = data.outputfileUrl;
           // window.location.href=data.downloadUrl;
-          window.open(data.outputfileUrl)
+          window.open(data.outputfileUrl);
 
           // var a = document.createElement("a"); //创建a标签
           // a.download = data.artipath; //设置下载名称
@@ -239,8 +155,8 @@ export default {
           workflowName: this.workflowName,
           wftemplateName: this.wftemplateName,
           outputartiparaName: paraname,
-          outputartiparapath: valuefrom,
-        }),
+          outputartiparapath: valuefrom
+        })
       }).then(({ data }) => {
         if (data && data.code === 0) {
           // console.log("输出节点  下载数据集");
@@ -257,8 +173,8 @@ export default {
             let routeData = this.$router.resolve({
               path: "/visi-previewcsv",
               query: {
-                csvurl: artifileurl,
-              },
+                csvurl: artifileurl
+              }
             });
             window.open(routeData.href, "_blank");
           } else {
@@ -296,8 +212,8 @@ export default {
         path: "/visi-previewcsv",
         query: {
           csvurl:
-            "http://182.92.79.148:32206/my-bucket/algorithm-visual-whw9s/algorithm-visual-whw9s-205472464/demo.csv?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20220227%2F%2Fs3%2Faws4_request&X-Amz-Date=20220227T081114Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=a9241f12f28c3983d6148fc51c0e5f2820270826a9e0af08b20ef5cc42f1da25",
-        },
+            "http://182.92.79.148:32206/my-bucket/algorithm-visual-whw9s/algorithm-visual-whw9s-205472464/demo.csv?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20220227%2F%2Fs3%2Faws4_request&X-Amz-Date=20220227T081114Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=a9241f12f28c3983d6148fc51c0e5f2820270826a9e0af08b20ef5cc42f1da25"
+        }
       });
       window.open(routeData.href, "_blank");
     },
@@ -305,20 +221,14 @@ export default {
     // 输出参数页面tab 选中时，获取参数类型输出值-----已改为  节点 init处调用
     getOutputparavalue() {
       //如果工作流状态为 succeed 时，调用该方法获取值
-      if (
-        this.outputsparameters &&
-        this.outputsparameters.length != 0 &&
-        this.workflowStatus == "Succeeded"
-      ) {
+      if (this.outputsparameters && this.outputsparameters.length != 0 && this.workflowStatus == "Succeeded") {
         this.$http({
-          url: this.$http.adornUrl(
-            "/visi/visinodeidtemplatemap/getoutputparavalue"
-          ),
+          url: this.$http.adornUrl("/visi/visinodeidtemplatemap/getoutputparavalue"),
           method: "get",
           params: this.$http.adornParams({
             workflowName: this.workflowName,
-          wftemplateName: this.wftemplateName,
-          }),
+            wftemplateName: this.wftemplateName
+          })
         }).then(({ data }) => {
           if (data && data.code === 0) {
             var outparavalueJson = JSON.stringify(data.outparavalueJson);
@@ -326,8 +236,8 @@ export default {
             console.log(jsonObj);
             for (var i = 0; i < jsonObj.length; i++) {
               // alert(jsonObj[i].name); //取json中的值
-              for (var j = 0; j < this.outputsparameters.length;j++) {
-                if(jsonObj[i].name == this.outputsparameters[j].paraname){
+              for (var j = 0; j < this.outputsparameters.length; j++) {
+                if (jsonObj[i].name == this.outputsparameters[j].paraname) {
                   this.outputsparameters[j].paravalue = jsonObj[i].value;
                 }
               }
@@ -337,14 +247,12 @@ export default {
             Message.error("输出参数结果获取失败");
           }
         });
-
-        
       }
-    },
-  },
+    }
+  }
 };
 </script>
-<style>
+<style scope>
 .el-form-item .el-select {
   width: 100%;
 }

src/views/modules/visi/design-panel.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="ant-tabs-tabpane">
-    <a-tabs default-active-key="1" @change="callback">
-      <a-tab-pane key="1" tab="Tab 1">
-        <a-form :layout="formLayout">
-          <a-form-item name="experimentName" label=" 实 验 名 称 ">
-            <a-input placeholder="input placeholder" />
-          </a-form-item>
-          <a-form-item
-            label="Field A"
-            :label-col="formItemLayout.labelCol"
-            :wrapper-col="formItemLayout.wrapperCol"
-          >
-            <a-input placeholder="input placeholder" />
-          </a-form-item>
-          <a-form-item
-            label=" Field B"
-            :label-col="formItemLayout.labelCol"
-            :wrapper-col="formItemLayout.wrapperCol"
-          >
-            <a-input placeholder="input placeholder" />
-          </a-form-item>
-          <a-form-item
-            label="Field C"
-            :label-col="formItemLayout.labelCol"
-            :wrapper-col="formItemLayout.wrapperCol"
-          >
-            <a-input placeholder="input placeholder" />
-          </a-form-item>
-          <a-form-item
-            label="Field D"
-            :label-col="formItemLayout.labelCol"
-            :wrapper-col="formItemLayout.wrapperCol"
-          >
-            <a-input placeholder="input placeholder" />
-          </a-form-item>
-          <a-form-item :wrapper-col="buttonItemLayout.wrapperCol">
-            <a-button type="primary"> 保存 </a-button>
-          </a-form-item>
-        </a-form>
-      </a-tab-pane>
-    </a-tabs>
-  </div>
-</template>
-<script>
-// import { Tabs } from "antd";
-// import classNames from "classnames";
-export default {};
-</script>
-<style>
-.ant-tabs-tabpane {
-  background: #fff;
-  padding: 5px;
-}
-.ant-tabs-tab {
-  flex: 1 0 50px;
-  padding: 7px 16px;
-  display: flex;
-  justify-content: center;
-}
-</style>

src/views/modules/visi/design-para-temp.vue

@@ -1,57 +1,22 @@
 <template>
-  <el-dialog
-    :title="'查看模板'"
-    :close-on-click-modal="false"
-    :visible.sync="visible"
-  >
-    <div class="">
+  <el-dialog :title="'查看模板'" :close-on-click-modal="false" :visible.sync="visible">
+    <div>
       <div>
-        <!-- <div>获取实时数据模板</div>
-        <codemirror ref="cm" v-model="code" :options="cmOptions"></codemirror> -->
         <div>输入输出参数文件规范模板</div>
-        <codemirror
-          ref="cm"
-          v-model="paratempCode"
-          :options="cmOptions"
-        ></codemirror>
+        <codemirror ref="cm" v-model="paratempCode" :options="cmOptions"></codemirror>
       </div>
-
       <div>
         <div>输入输出参数文件模板示例</div>
-        <codemirror
-          ref="cm"
-          v-model="paratempExamCode"
-          :options="cmOptions"
-        ></codemirror>
+        <codemirror ref="cm" v-model="paratempExamCode" :options="cmOptions"></codemirror>
       </div>
-
       <div>
-        <!-- <div>获取实时数据模板</div>
-        <codemirror ref="cm" v-model="code" :options="cmOptions"></codemirror> -->
         <div>输出参数值文件规范模板</div>
-        <codemirror
-          ref="cm"
-          v-model="outputParatempCode"
-          :options="cmOptions"
-        ></codemirror>
+        <codemirror ref="cm" v-model="outputParatempCode" :options="cmOptions"></codemirror>
       </div>
-      
       <div>
         <div>输出参数值模板示例</div>
-        <codemirror
-          ref="cm"
-          v-model="outputParaExamCode"
-          :options="cmOptions"
-        ></codemirror>
+        <codemirror ref="cm" v-model="outputParaExamCode" :options="cmOptions"></codemirror>
       </div>
-      <!-- <div>
-        <div>算法结果入库模板</div>
-        <codemirror
-          ref="cm"
-          v-model="insertCode"
-          :options="cmOptions"
-        ></codemirror>
-      </div> -->
     </div>
   </el-dialog>
 </template>
@@ -141,17 +106,17 @@ window.DIFF_EQUAL = 0;
 export default {
   name: "Simple",
   components: {
-    codemirror,
+    codemirror
   },
   data() {
     return {
       visible: false,
       code: "",
       insertCode: "",
-      paratempCode: "", //20211112 输入输出参数文件 规范
-      paratempExamCode: "", //20211110  输入输出参数文件模板示例
-      outputParatempCode: "",//20211112  输出参数值文件规范模板
-      outputParaExamCode: "",//20211112 输出参数值模板示例
+      paratempCode: "", // 输入输出参数文件 规范
+      paratempExamCode: "", // 输入输出参数文件模板示例
+      outputParatempCode: "", // 输出参数值文件规范模板
+      outputParaExamCode: "", // 输出参数值模板示例
       cmOptions: {
         // 语言及语法模式
         mode: "text/x-python",
@@ -176,24 +141,23 @@ export default {
         gutters: [
           "CodeMirror-lint-markers", //代码错误检测
           "CodeMirror-linenumbers",
-          "CodeMirror-foldgutter", //展开收起
+          "CodeMirror-foldgutter" //展开收起
         ],
         hintOptions: {
           // 避免由于提示列表只有一个提示信息时，自动填充
           completeSingle: false,
           // 不同的语言支持从配置中读取自定义配置 sql语言允许配置表和字段信息，用于代码提示
           tables: {
-            table1: ["c1", "c2"],
-          },
+            table1: ["c1", "c2"]
+          }
         },
-
         // 高亮行功能
         styleActiveLine: true,
         // 调整scrollbar样式功能
         scrollbarStyle: "overlay",
         // 自动括号匹配功能
-        matchBrackets: true,
-      },
+        matchBrackets: true
+      }
     };
   },
   methods: {
@@ -203,8 +167,8 @@ export default {
         url: this.$http.adornUrl("/getTemplate/pythonKafka"),
         method: "get",
         params: this.$http.adornParams({
-          measurepoint: measurepoint,
-        }),
+          measurepoint: measurepoint
+        })
       }).then(({ data }) => {
         this.visible = true;
         this.code = data.code;
@@ -213,7 +177,7 @@ export default {
       this.$http({
         url: this.$http.adornUrl("/getTemplate/pythonHbase"),
         method: "get",
-        params: this.$http.adornParams({}),
+        params: this.$http.adornParams({})
       }).then(({ data }) => {
         this.visible = true;
         this.insertCode = data.code;
@@ -221,40 +185,32 @@ export default {
     },
 
     init() {
-      //   console.log("测点信息为" + measurepoint);
-      //20211112  输入输出参数文件  规范模板
+      this.visible = true;
       this.$http({
         url: this.$http.adornUrl("/getVisiTemplate/inoutputParaTemp"),
         method: "get",
-        params: this.$http.adornParams({}),
+        params: this.$http.adornParams({})
       }).then(({ data }) => {
-        this.visible = true;
         this.paratempCode = data.code;
         this.paratempExamCode = data.paratempExamCode;
       });
-
-      //   console.log("测点信息为" + measurepoint);
       this.$http({
         url: this.$http.adornUrl("/getVisiTemplate/pythonParaTemp"),
         method: "get",
-        params: this.$http.adornParams({}),
+        params: this.$http.adornParams({})
       }).then(({ data }) => {
-        this.visible = true;
         this.insertCode = data.code;
       });
-      //20211112   输出参数文件代码模板
+      // 输出参数文件代码模板
       this.$http({
         url: this.$http.adornUrl("/getVisiTemplate/pythonOutputParaTemp"),
         method: "get",
-        params: this.$http.adornParams({}),
+        params: this.$http.adornParams({})
       }).then(({ data }) => {
-        this.visible = true;
         this.outputParatempCode = data.code;
         this.outputParaExamCode = data.outputParaExamCode;
       });
-
-
-    },
-  },
+    }
+  }
 };
-</script>
+</script>

src/views/modules/visi/design-workflowlog.vue

@@ -1,58 +1,20 @@
 <template>
-  <el-dialog
-    :title="'工作流日志'"
-    :close-on-click-modal="false"
-    :visible.sync="visible"
-  >
-    <!-- <el-form :model="dataForm" ref="dataForm" label-width="160px">
-      <el-form-item class="boxformitem"> -->
+  <el-dialog :title="'工作流日志'" :close-on-click-modal="false" :visible.sync="visible">
     <div style="width:'10%',height:'100%'">
-      <el-radio-group
-        v-model="containertype"
-        default-value="main"
-        @change="workflowcontainerchange"
-      >
+      <el-radio-group v-model="containertype" default-value="main" @change="workflowcontainerchange">
         <el-radio label="main" value="main">main</el-radio>
         <el-radio label="init" value="init">init</el-radio>
         <el-radio label="wait" value="wait">wait</el-radio>
       </el-radio-group>
-      <!-- <div class="log-box"> -->
       <div class="log-box" style="position: relative; overflow: scroll">
-        <div
-          v-if="
-            this.workflowContentlogsplit && this.workflowContentlogsplit.length
-          "
-        >
-          <p
-            class="logList-item"
-            v-for="(item, index) in this.workflowContentlogsplit"
-            :key="index"
-          >
+        <div v-if="this.workflowContentlogsplit && this.workflowContentlogsplit.length">
+          <p class="logList-item" v-for="(item, index) in this.workflowContentlogsplit" :key="index">
             {{ item }}
           </p>
         </div>
         <p v-else>暂无数据</p>
       </div>
-      <!-- </div> -->
-
-      <!-- <a-descriptions
-        title=""
-        layout="vertical"
-        bordered
-        style="white-space: pre-wrap"
-      >
-        <a-descriptions-item>
-          {{ this.workflowContentlog }}
-        </a-descriptions-item>
-      </a-descriptions> -->
-      <!-- </a-layout-footer> -->
     </div>
-    <!-- </el-form-item>
-    </el-form> -->
-    <!-- <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-    </span> -->
   </el-dialog>
 </template>
 
@@ -63,7 +25,7 @@ export default {
       visible: false,
       dataForm: {
         id: 0,
-        modelName: "",
+        modelName: ""
       },
 
       workflowName: "", //提交后的工作流名称
@@ -77,16 +39,10 @@ export default {
       log: "", // 日志内容
       logCache: "",
       websocket: null,
-      socketTimer: null,
+      socketTimer: null
     };
   },
   methods: {
-    // init1(cell, celldata, workflowName) {
-    //   this.visible = true;
-    //   this.workflowName = workflowName;
-    //   // this.wftemplateName = celldata.wftemplatename;
-    //   //此时celldata.sourcealgocell == null
-    // },
     init(workflowName) {
       this.visible = true;
       this.workflowName = workflowName;
@@ -97,44 +53,41 @@ export default {
           url: this.$http.adornUrl("/visi/visiworkflow/getworkflowlog2"),
           method: "get",
           params: this.$http.adornParams({
-            workflowName: this.workflowName,
-          }),
+            workflowName: this.workflowName
+          })
         })
           .then(({ data }) => {
             if (data && data.code === 0) {
+              console.log(data);
               this.$nextTick(() => {
-              this.workflowContent = data.workflowContent;
-              if (this.containertype == "main") {
-                this.workflowContentlog = this.workflowContent.main;
-                this.workflowContentlogsplit =
-                  this.workflowContent.main.split(/[(\r\n)\r\n]+/);
-              }
-              if (this.containertype == "init") {
-                this.workflowContentlog = this.workflowContent.init;
-                this.workflowContentlogsplit =
-                  this.workflowContent.init.split(/[(\r\n)\r\n]+/);
-              }
-              if (this.containertype == "wait") {
-                this.workflowContentlog = this.workflowContent.wait;
-                this.workflowContentlogsplit =
-                  this.workflowContent.wait.split(/[(\r\n)\r\n]+/);
-              }
-              this.workflowStatus = data.workflowStatus;
-              // this.handleLog();
-              // this.podlogs = data.podlogs;
+                this.workflowContent = data.workflowContent;
+                if (this.containertype == "main") {
+                  this.workflowContentlog = this.workflowContent.main;
+                  this.workflowContentlogsplit = this.workflowContent.main.split(/[(\r\n)\r\n]+/);
+                }
+                if (this.containertype == "init") {
+                  this.workflowContentlog = this.workflowContent.init;
+                  this.workflowContentlogsplit = this.workflowContent.init.split(/[(\r\n)\r\n]+/);
+                }
+                if (this.containertype == "wait") {
+                  this.workflowContentlog = this.workflowContent.wait;
+                  this.workflowContentlogsplit = this.workflowContent.wait.split(/[(\r\n)\r\n]+/);
+                }
+                this.workflowStatus = data.workflowStatus;
+                // this.handleLog();
+                // this.podlogs = data.podlogs;
 
-              // console.log("workflowcontent");
-              // console.log(this.workflowContent);
-              // console.log(this.workflowContent.main);
-              // console.log(this.workflowContent.init);
-              // console.log(this.workflowContent.wait);
-              // console.log(this.workflowStatus);
+                // console.log("workflowcontent");
+                // console.log(this.workflowContent);
+                // console.log(this.workflowContent.main);
+                // console.log(this.workflowContent.init);
+                // console.log(this.workflowContent.wait);
+                // console.log(this.workflowStatus);
 
-              // console.log("podlogs")
-              // console.log(this.podlogs);
-            });
+                // console.log("podlogs")
+                // console.log(this.podlogs);
+              });
             }
-            
           })
           .then(() => {
             // this.visible = true
@@ -166,26 +119,22 @@ export default {
     init1() {
       this.visible = true;
       this.workflowContentlog = this.workflowContent.main;
-      this.workflowContentlogsplit =
-        this.workflowContent.main.split(/[(\r\n)\r\n]+/);
+      this.workflowContentlogsplit = this.workflowContent.main.split(/[(\r\n)\r\n]+/);
       //暂未生成workflowname
     },
     //单选控制 日志类型 main init wait
     workflowcontainerchange(e) {
       if (this.containertype == "main") {
         this.workflowContentlog = this.workflowContent.main;
-        this.workflowContentlogsplit =
-          this.workflowContent.main.split(/[(\r\n)\r\n]+/);
+        this.workflowContentlogsplit = this.workflowContent.main.split(/[(\r\n)\r\n]+/);
       }
       if (this.containertype == "init") {
         this.workflowContentlog = this.workflowContent.init;
-        this.workflowContentlogsplit =
-          this.workflowContent.init.split(/[(\r\n)\r\n]+/);
+        this.workflowContentlogsplit = this.workflowContent.init.split(/[(\r\n)\r\n]+/);
       }
       if (this.containertype == "wait") {
         this.workflowContentlog = this.workflowContent.wait;
-        this.workflowContentlogsplit =
-          this.workflowContent.wait.split(/[(\r\n)\r\n]+/);
+        this.workflowContentlogsplit = this.workflowContent.wait.split(/[(\r\n)\r\n]+/);
       }
     },
 
@@ -223,15 +172,11 @@ export default {
     initWebSocket() {
       // 连接错误
       this.websocket.onerror = () => {
-        console.log(
-          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
-        );
+        console.log("WebSocket连接发生错误   状态码：" + this.websocket.readyState);
       };
       // 连接成功
       this.websocket.onopen = () => {
-        console.log(
-          "WebSocket连接成功    状态码：" + this.websocket.readyState
-        );
+        console.log("WebSocket连接成功    状态码：" + this.websocket.readyState);
       };
       this.websocket.onclose = () => {
         console.log("WebSocket断开    状态码：" + this.websocket.readyState);
@@ -250,8 +195,7 @@ export default {
           this.workflowContent = JSON.parse(event.data);
           this.containertype = "main";
           this.workflowContentlog = this.workflowContent.main;
-          this.workflowContentlogsplit =
-            this.workflowContent.main.split(/[(\r\n)\r\n]+/);
+          this.workflowContentlogsplit = this.workflowContent.main.split(/[(\r\n)\r\n]+/);
           console.log("event.data" + event.data);
         }
 
@@ -266,9 +210,7 @@ export default {
       this.websocket = new WebSocket(url);
       this.websocket.onopen = () => {
         console.log("websocket.onopen...");
-        this.websocket.send(
-          JSON.stringify({ workflowName: this.workflowName })
-        );
+        this.websocket.send(JSON.stringify({ workflowName: this.workflowName }));
         this.openSocketTimer();
       };
       this.websocket.onmessage = (res) => {
@@ -303,8 +245,7 @@ export default {
               this.workflowContent = JSON.parse(res.data);
               this.containertype = "main";
               this.workflowContentlog = this.workflowContent.main;
-              this.workflowContentlogsplit =
-                this.workflowContent.main.split(/[(\r\n)\r\n]+/);
+              this.workflowContentlogsplit = this.workflowContent.main.split(/[(\r\n)\r\n]+/);
             });
           } else {
             // this.logCache = `${this.logCache}${lineRes}`;
@@ -312,7 +253,7 @@ export default {
           }
         }
       };
-      this.websocket.onclose = function (e) {
+      this.websocket.onclose = function(e) {
         console.log("websocket.onclose...");
         console.log(`连接已断开...>>>${e.code}`);
       };
@@ -343,15 +284,14 @@ export default {
         this.workflowContent = JSON.parse(this.log);
         this.containertype = "main";
         this.workflowContentlog = this.workflowContent.main;
-        this.workflowContentlogsplit =
-          this.workflowContent.main.split(/[(\r\n)\r\n]+/);
+        this.workflowContentlogsplit = this.workflowContent.main.split(/[(\r\n)\r\n]+/);
         this.logCache = ""; // 刷新完成之后，清空log缓存
       });
-    },
-  },
+    }
+  }
 };
 </script>
-<style>
+<style scope>
 .el-form-item .el-select {
   width: 100%;
 }

src/views/modules/visi/design.vue

@@ -5,41 +5,28 @@
       <el-breadcrumb-item>可视化设计</el-breadcrumb-item>
     </el-breadcrumb>
     <el-divider class="divi"></el-divider>
-    <!-- <design-graph></design-graph> -->
-    <el-form
-      :inline="true"
-      :model="dataForm"
-      @keyup.enter.native="getDataList()"
-    >
-      <el-form-item>
-        <el-button type="primary" @click="addHandle()">新建实验</el-button>
-        <el-button
-          type="danger"
-          @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button
-        >
-      </el-form-item>
-      <el-form-item>
-        <el-input
-          v-model="dataForm.workflowName"
-          placeholder="请输入实验名称"
-          clearable
-          @keyup.enter.native="
-            pageIndex = 1;
-            getDataList();
-          "
-        ></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button
-          @click="
-            pageIndex = 1;
-            getDataList();
-          "
-          >查询</el-button
-        >
-      </el-form-item>
-
-    </el-form>
+    <div class="top-bar">
+      <el-button type="primary" @click="addHandle()">新建实验</el-button>
+      <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+      <el-input
+        v-model="workflowName"
+        placeholder="请输入实验名称"
+        clearable
+        class="input"
+        @keyup.enter.native="
+          pageIndex = 1;
+          getDataList();
+        "
+      ></el-input>
+      <el-button
+        @click="
+          pageIndex = 1;
+          getDataList();
+        "
+      >
+        查询
+      </el-button>
+    </div>
 
     <el-table
       :data="dataList"
@@ -48,16 +35,7 @@
       @selection-change="selectionChangeHandle"
       style="width: 100%"
     >
-      <el-table-column
-        type="selection"
-        header-align="center"
-        align="center"
-        width="50"
-      >
-      </el-table-column>
-      <!--      <el-table-column prop="datasetId" header-align="center" align="center" width="80" label="数据集ID">-->
-      <!--      </el-table-column>-->
-
+      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
       <el-table-column
         label="序号"
         header-align="center"
@@ -69,66 +47,17 @@
             return index + 1 + (this.pageIndex - 1) * this.pageSize;
           }
         "
-      >
-      </el-table-column>
-
-      <el-table-column
-        prop="experimentName"
-        header-align="center"
-        align="center"
-        label="实验名称"
-      >
-      </el-table-column>
-
-      <!-- <el-table-column
-        prop="username"
-        header-align="center"
-        align="center"
-        label="创建人"
-      >
-      </el-table-column> -->
-      <el-table-column
-        prop="workflowtempName"
-        header-align="center"
-        align="center"
-        label="模板名称"
-      >
-      </el-table-column>
-      <el-table-column
-        prop="workflowName"
-        header-align="center"
-        align="center"
-
-        label="工作流名称"
-      >
-      </el-table-column>
-      <el-table-column
-        fixed="right"
-        header-align="center"
-        align="center"
-
-        label="操作"
-      >
+      ></el-table-column>
+      <el-table-column prop="experimentName" header-align="center" align="center" label="实验名称"></el-table-column>
+      <el-table-column prop="workflowtempName" header-align="center" align="center" label="模板名称"></el-table-column>
+      <el-table-column prop="workflowName" header-align="center" align="center" label="工作流名称"></el-table-column>
+      <el-table-column fixed="right" header-align="center" align="center" label="操作">
         <template slot-scope="scope">
-          <el-button
-            type="text"
-            size="small"
-            @click="addOrUpdateHandle(scope.row)"
-            >查看
+          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">查看</el-button>
+          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
+          <el-button type="text" size="small" @click="deleteHandle(scope.row)">
+            删除
           </el-button>
-          <el-button
-            type="text"
-            size="small"
-            @click="addOrUpdateHandle(scope.row)"
-            >修改</el-button
-          >
-          <el-button
-            type="text"
-            size="small"
-            @click="deleteHandle(scope.row)"
-          >
-            删除</el-button
-          >
         </template>
       </el-table-column>
     </el-table>
@@ -140,27 +69,21 @@
       :page-size="pageSize"
       :total="totalPage"
       layout="total, sizes, prev, pager, next, jumper"
-    >
-    </el-pagination>
+    ></el-pagination>
   </div>
 </template>
 
 <script>
-import { info } from '../../../mock/modules/sys-menu';
-// import DesignGraph from "./design-graph.vue"
 import DesignGraph1 from "./design-graph1.vue";
-import { Message } from "element-ui";
 import { MessageBox } from "element-ui";
 export default {
   components: {
     // DesignGraph,
-    DesignGraph1,
+    DesignGraph1
   },
   data() {
     return {
-      dataForm: {
-        workflowName: "",
-      },
+      workflowName: "",
       username: this.$store.state.user.name,
       dataList: [],
       pageIndex: 1,
@@ -168,22 +91,20 @@ export default {
       totalPage: 0,
       dataListLoading: false,
       dataListSelections: [],
-      addOrUpdateVisible: false,
+      addOrUpdateVisible: false
     };
   },
-  mounted() {},
-  activated() {
-    // if (location.href.indexOf("#reloaded") == -1) {
-    //   location.href = location.href + "#reloaded";
-    //   location.reload();
-    // }
+  mounted() {
     this.getDataList();
   },
   methods: {
     addHandle() {
-      this.$router.replace({ path: "/design-create"  ,query: {
-                update: false
-              }});
+      this.$router.replace({
+        path: "/design-create",
+        query: {
+          update: false
+        }
+      });
     },
     getDataList() {
       this.dataListLoading = true;
@@ -193,8 +114,8 @@ export default {
         params: this.$http.adornParams({
           page: this.pageIndex,
           limit: this.pageSize,
-          key: this.dataForm.workflowName,
-        }),
+          key: this.workflowName
+        })
       }).then(({ data }) => {
         if (data && data.code === 0) {
           this.dataList = data.page.list;
@@ -206,62 +127,6 @@ export default {
         this.dataListLoading = false;
       });
     },
-    // 筛选查询
-    getDataList2 () {
-      this.dataListLoading = true
-
-      if (this.status === '1') {
-        // 获取静态数据集
-        this.st_dataList = []
-        this.$http({
-          url: this.$http.adornUrl('/dataset/list'),
-          method: 'get',
-          params: this.$http.adornParams({
-            page: this.pageIndex,
-            limit: this.pageSize,
-            modelName: this.dataForm.modelName,
-            // 增加status参数用于筛选查询
-            classificationtag: this.classificationtag,
-            status: this.status
-          })
-        }).then(({ data }) => {
-          if (data && data.code === 0) {
-            this.st_dataList = data.page.list.reverse()
-            this.totalPage = data.page.totalCount
-          } else {
-            this.st_dataList = []
-            this.totalPage = 0
-          }
-          this.dataListLoading = false
-        })
-      } else {
-        this.dy_dataList = []
-        // 获取动态数据集
-        this.$http({
-          url: this.$http.adornUrl('/datasetdy/list'),
-          method: 'get',
-          params: this.$http.adornParams({
-            page: this.pageIndex,
-            limit: this.pageSize,
-            modelName: this.dataForm.modelName,
-            // 增加status参数用于筛选查询
-            classificationtag: this.classificationtag,
-            status: this.status
-          })
-        }).then(({ data }) => {
-          if (data && data.code === 0) {
-            this.dy_dataList = data.page.list.reverse()
-            this.totalPage = data.page.totalCount
-          } else {
-            this.dy_dataList = []
-            this.totalPage = 0
-          }
-          this.dataListLoading = false
-        })
-        this.dataListLoading = false
-      }
-    },
-
     // 每页数
     sizeChangeHandle(val) {
       this.pageSize = val;
@@ -279,59 +144,14 @@ export default {
     },
     // 新增 / 修改
     addOrUpdateHandle(info) {
-      // this.addOrUpdateVisible = true;
-      // this.$nextTick(() => {
-      //   this.$refs.addOrUpdate.init(info);
-      // });
-
-      this.$router.replace({ path: '/design-create' ,query: {
-                winfo: info,update: true
-              },})
+      this.$router.replace({
+        path: "/design-create",
+        query: {
+          winfo: info,
+          update: true
+        }
+      });
     },
-    // // 删除
-    // deleteHandle (info) {
-    //   var datasetId = info.datasetId
-    //     ? [info.datasetId] : this.dataListSelections.map((item) => {
-    //       return item.datasetId
-    //     })
-    //   var datasetName = info.datasetName ? [info.datasetName] : this.dataListSelections.map(item => {
-    //     return item.datasetName
-    //   })
-
-    //   MessageBox.confirm(
-    //     `确定对[数据集=${datasetName.join(' , ')}]进行[${info.datasetId ? '删除' : '批量删除'}]操作?`,
-    //     '提示',
-    //     {
-    //       confirmButtonText: '确定',
-    //       cancelButtonText: '取消',
-    //       type: 'warning'
-    //     }
-    //   )
-    //     .then(() => {
-    //       this.dataListLoading = true
-    //       this.$http({
-    //         url: this.$http.adornUrl('/dataset/delete'),
-    //         method: 'post',
-    //         data: this.$http.adornData(datasetId, false)
-    //       }).then(({ data }) => {
-    //         if (data && data.code === 0) {
-    //           this.dataListLoading = false
-    //           Message({
-    //             message: '操作成功',
-    //             type: 'success',
-    //             duration: 1500,
-    //             onClose: () => {
-    //               this.getDataList()
-    //             }
-    //           })
-    //           this.pageIndex = 1
-    //         } else {
-    //           Message.error(data.msg)
-    //         }
-    //       })
-    //     })
-    //     .catch(() => {})
-    // },
     // 删除
     deleteHandle(info) {
       var ids = info.workflowId
@@ -339,22 +159,24 @@ export default {
         : this.dataListSelections.map((item) => {
             return item.workflowId;
           });
-      var experimentName = info.experimentName ? [info.experimentName] : this.dataListSelections.map(item => {
-        return item.experimentName
-      })
+      var experimentName = info.experimentName
+        ? [info.experimentName]
+        : this.dataListSelections.map((item) => {
+            return item.experimentName;
+          });
       MessageBox.confirm(
-        `确定对[实验=${experimentName.join(' , ')}]进行[${info.workflowId ? "删除" : "批量删除"}]操作?`,
+        `确定对[实验=${experimentName.join(" , ")}]进行[${info.workflowId ? "删除" : "批量删除"}]操作?`,
         "提示",
         {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
-          type: "warning",
+          type: "warning"
         }
       ).then(() => {
         this.$http({
           url: this.$http.adornUrl("/visi/visiworkflow/delete"),
           method: "post",
-          data: this.$http.adornData(ids, false),
+          data: this.$http.adornData(ids, false)
         }).then(({ data }) => {
           if (data && data.code === 0) {
             this.$message({
@@ -363,19 +185,28 @@ export default {
               duration: 1500,
               onClose: () => {
                 this.getDataList();
-              },
+              }
             });
           } else {
             this.$message.error(data.msg);
           }
         });
       });
-    },
-  },
+    }
+  }
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scope>
+.top-bar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  .input {
+    width: 200px;
+    margin: 0 20px;
+  }
+}
 .mod-demo-echarts {
   > .el-alert {
     margin-bottom: 10px;
@@ -407,4 +238,3 @@ export default {
   position: relative;
 }
 </style>
-

src/views/modules/visi/exampleCode.js

@@ -0,0 +1,1695 @@
+export default [
+  {
+    position: { x: 60, y: 280 },
+    size: { width: 90, height: 80 },
+    attrs: {
+      image: {
+        "xlink:href": require("@/assets/img/visisvg/circle.svg")
+      },
+      label: { text: "contourTask1" }
+    },
+    shape: "template-node",
+    data: {
+      nodeName: "contourTask1",
+      templateName: "contourTask1",
+      templateImage: "zvinjodocker/contous_task1:20211014",
+      templateCommand: {},
+      templateArgs: {},
+      algoparaInput: { userInput: [], getInput: [] },
+      algoparaOutput: [],
+      algoparaInputargu: { userInput: [], getInput: [] },
+      algonodeSource: [],
+      inputsparameters: [],
+      inputsartifacts: [],
+      argumentsparameters: [],
+      argumentsartifacts: [],
+      outputsparameters: [],
+      outputsartifacts: [
+        {
+          paraname: "thresh",
+          paradesc: "",
+          paratype: "",
+          valuefrom: "/myapps/thresh1.png"
+        },
+        {
+          paraname: "contours",
+          paradesc: "",
+          paratype: "",
+          valuefrom: "/myapps/contours.png"
+        }
+      ],
+      sourcedatalist: [],
+      sourceartilist: [],
+      inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
+      inputnodefilevalue: [] //用户选择的输入节点的文件，存储文件url,后端调用
+    },
+    ports: {
+      groups: {
+        in: {
+          position: "left",
+          attrs: {
+            circle: {
+              r: 2.5,
+              magnet: true,
+              stroke: "black",
+              strokeWidth: 1,
+              fill: "#fff",
+              style: { visibility: true }
+            }
+          }
+        },
+        out: {
+          position: "right",
+          attrs: {
+            circle: {
+              r: 2.5,
+              magnet: true,
+              stroke: "black",
+              strokeWidth: 1,
+              fill: "#fff"
+            }
+          }
+        }
+      },
+      items: [
+        { id: "inport1", group: "in" },
+        { id: "inport2", group: "in" },
+        { id: "outport1", group: "out" },
+        { id: "outport2", group: "out" }
+      ]
+    },
+    id: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
+    zIndex: 1
+  },
+  {
+    position: { x: 370, y: 140 },
+    size: { width: 90, height: 80 },
+    attrs: {
+      image: {
+        "xlink:href": require("@/assets/img/visisvg/circle.svg")
+      },
+      label: { text: "contourTask2" }
+    },
+    shape: "template-node",
+    data: {
+      nodeName: "contourTask2",
+      templateName: "contourTask2",
+      templateImage: "zvinjodocker/contours_task2:20211014",
+      templateCommand: {},
+      templateArgs: {},
+      algoparaInput: { userInput: [], getInput: [] },
+      algoparaOutput: [],
+      algoparaInputargu: { userInput: [], getInput: [] },
+      algonodeSource: [
+        {
+          position: { x: 60, y: 280 },
+          size: { width: 90, height: 80 },
+          attrs: {
+            image: {
+              "xlink:href": require("@/assets/img/visisvg/circle.svg")
+            },
+            label: { text: "contourTask1" }
+          },
+          shape: "template-node",
+          data: {
+            nodeName: "contourTask1",
+            templateName: "contourTask1",
+            templateImage: "zvinjodocker/contous_task1:20211014",
+            templateCommand: {},
+            templateArgs: {},
+            algoparaInput: { userInput: [], getInput: [] },
+            algoparaOutput: [],
+            algoparaInputargu: { userInput: [], getInput: [] },
+            algonodeSource: [],
+            inputsparameters: [],
+            inputsartifacts: [],
+            argumentsparameters: [],
+            argumentsartifacts: [],
+            outputsparameters: [],
+            outputsartifacts: [
+              {
+                paraname: "thresh",
+                paradesc: "",
+                paratype: "",
+                valuefrom: "/myapps/thresh1.png"
+              },
+              {
+                paraname: "contours",
+                paradesc: "",
+                paratype: "",
+                valuefrom: "/myapps/contours.png"
+              }
+            ],
+            sourcedatalist: [],
+            sourceartilist: []
+          },
+          ports: {
+            groups: {
+              in: {
+                position: "left",
+                attrs: {
+                  circle: {
+                    r: 2.5,
+                    magnet: true,
+                    stroke: "black",
+                    strokeWidth: 1,
+                    fill: "#fff",
+                    style: { visibility: true }
+                  }
+                }
+              },
+              out: {
+                position: "right",
+                attrs: {
+                  circle: {
+                    r: 2.5,
+                    magnet: true,
+                    stroke: "black",
+                    strokeWidth: 1,
+                    fill: "#fff"
+                  }
+                }
+              }
+            },
+            items: [
+              { id: "inport1", group: "in" },
+              { id: "inport2", group: "in" },
+              { id: "outport1", group: "out" },
+              { id: "outport2", group: "out" }
+            ]
+          },
+          id: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
+          zIndex: 1
+        }
+      ],
+      inputsparameters: [],
+      inputsartifacts: [
+        {
+          paraname: "thresh",
+          parapath: "/myapps/thresh1.png",
+          paradesc: ""
+        },
+        {
+          paraname: "contours",
+          parapath: "/myapps/contours.png",
+          paradesc: ""
+        }
+      ],
+      argumentsparameters: [],
+      argumentsartifacts: [
+        {
+          paraname: "thresh",
+          valuefrom: "{{tasks.contourTask1.outputs.artifacts.thresh}}",
+          fileurls: [],
+          filelist: [],
+          value: ["contourTask1", "thresh"]
+        },
+        {
+          paraname: "contours",
+          valuefrom: "{{tasks.contourTask1.outputs.artifacts.contours}}",
+          fileurls: [],
+          filelist: [],
+          value: ["contourTask1", "contours"]
+        }
+      ],
+      outputsparameters: [],
+      outputsartifacts: [
+        {
+          paraname: "contours0",
+          valuefrom: "/myapps/contours[0].npy",
+          paradesc: "",
+          paratype: ""
+        },
+        {
+          paraname: "res",
+          valuefrom: "/myapps/res1.png",
+          paradesc: "",
+          paratype: ""
+        }
+      ],
+      sourcedatalist: [],
+      sourceartilist: [],
+      inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
+      inputnodefilevalue: [] //用户选择的输入节点的文件，存储文件url,后端调用
+    },
+    ports: {
+      groups: {
+        in: {
+          position: "left",
+          attrs: {
+            circle: {
+              r: 2.5,
+              magnet: true,
+              stroke: "black",
+              strokeWidth: 1,
+              fill: "#fff",
+              style: { visibility: true }
+            }
+          }
+        },
+        out: {
+          position: "right",
+          attrs: {
+            circle: {
+              r: 2.5,
+              magnet: true,
+              stroke: "black",
+              strokeWidth: 1,
+              fill: "#fff"
+            }
+          }
+        }
+      },
+      items: [
+        { id: "inport1", group: "in" },
+        { id: "inport2", group: "in" },
+        { id: "outport1", group: "out" },
+        { id: "outport2", group: "out" }
+      ]
+    },
+    id: "7d572837-a22b-4dab-a196-8ea411ba868e",
+    zIndex: 2
+  },
+  {
+    shape: "edge",
+    attrs: {
+      line: {
+        stroke: "#808080",
+        strokeWidth: 1,
+        targetMarker: { name: "block", args: { size: "6" } }
+      }
+    },
+    id: "3b752ac7-2c5f-4596-adf3-ad10dd3718b0",
+    router: { name: "er", args: { offset: "center" } },
+    tools: {
+      items: [{ name: "button-remove", args: { distance: -40 } }]
+    },
+    source: {
+      cell: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
+      port: "outport1"
+    },
+    target: {
+      cell: "7d572837-a22b-4dab-a196-8ea411ba868e",
+      port: "inport1"
+    },
+    zIndex: 3
+  },
+  {
+    position: { x: 650, y: 140 },
+    size: { width: 90, height: 80 },
+    attrs: {
+      image: {
+        "xlink:href": require("@/assets/img/visisvg/circle.svg")
+      },
+      label: { text: "contourTask3" }
+    },
+    shape: "template-node",
+    data: {
+      nodeName: "contourTask3",
+      templateName: "contourTask3",
+      templateImage: "zvinjodocker/contours_task3:20211015",
+      templateCommand: {},
+      templateArgs: {},
+      algoparaInput: { userInput: [], getInput: [] },
+      algoparaOutput: [],
+      algoparaInputargu: { userInput: [], getInput: [] },
+      algonodeSource: [
+        {
+          position: { x: 370, y: 140 },
+          size: { width: 90, height: 80 },
+          attrs: {
+            image: {
+              "xlink:href": require("@/assets/img/visisvg/circle.svg")
+            },
+            label: { text: "contourTask2" }
+          },
+          shape: "template-node",
+          data: {
+            nodeName: "contourTask2",
+            templateName: "contourTask2",
+            templateImage: "zvinjodocker/contours_task2:20211014",
+            templateCommand: {},
+            templateArgs: {},
+            algoparaInput: { userInput: [], getInput: [] },
+            algoparaOutput: [],
+            algoparaInputargu: { userInput: [], getInput: [] },
+            algonodeSource: [
+              {
+                position: { x: 60, y: 280 },
+                size: { width: 90, height: 80 },
+                attrs: {
+                  image: {
+                    "xlink:href": require("@/assets/img/visisvg/circle.svg")
+                  },
+                  label: { text: "contourTask1" }
+                },
+                shape: "template-node",
+                data: {
+                  nodeName: "contourTask1",
+                  templateName: "contourTask1",
+                  templateImage: "zvinjodocker/contous_task1:20211014",
+                  templateCommand: {},
+                  templateArgs: {},
+                  algoparaInput: { userInput: [], getInput: [] },
+                  algoparaOutput: [],
+                  algoparaInputargu: { userInput: [], getInput: [] },
+                  algonodeSource: [],
+                  inputsparameters: [],
+                  inputsartifacts: [],
+                  argumentsparameters: [],
+                  argumentsartifacts: [],
+                  outputsparameters: [],
+                  outputsartifacts: [
+                    {
+                      paraname: "thresh",
+                      paradesc: "",
+                      paratype: "",
+                      valuefrom: "/myapps/thresh1.png"
+                    },
+                    {
+                      paraname: "contours",
+                      paradesc: "",
+                      paratype: "",
+                      valuefrom: "/myapps/contours.png"
+                    }
+                  ],
+                  sourcedatalist: [],
+                  sourceartilist: []
+                },
+                ports: {
+                  groups: {
+                    in: {
+                      position: "left",
+                      attrs: {
+                        circle: {
+                          r: 2.5,
+                          magnet: true,
+                          stroke: "black",
+                          strokeWidth: 1,
+                          fill: "#fff",
+                          style: { visibility: true }
+                        }
+                      }
+                    },
+                    out: {
+                      position: "right",
+                      attrs: {
+                        circle: {
+                          r: 2.5,
+                          magnet: true,
+                          stroke: "black",
+                          strokeWidth: 1,
+                          fill: "#fff"
+                        }
+                      }
+                    }
+                  },
+                  items: [
+                    { id: "inport1", group: "in" },
+                    { id: "inport2", group: "in" },
+                    { id: "outport1", group: "out" },
+                    { id: "outport2", group: "out" }
+                  ]
+                },
+                id: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
+                zIndex: 1
+              }
+            ],
+            inputsparameters: [],
+            inputsartifacts: [
+              {
+                paraname: "thresh",
+                parapath: "/myapps/thresh1.png",
+                paradesc: ""
+              },
+              {
+                paraname: "contours",
+                parapath: "/myapps/contours.png",
+                paradesc: ""
+              }
+            ],
+            argumentsparameters: [],
+            argumentsartifacts: [
+              {
+                paraname: "thresh",
+                valuefrom: "{{tasks.contourTask1.outputs.artifacts.thresh}}",
+                fileurls: [],
+                filelist: [],
+                value: ["contourTask1", "thresh"]
+              },
+              {
+                paraname: "contours",
+                valuefrom: "{{tasks.contourTask1.outputs.artifacts.contours}}",
+                fileurls: [],
+                filelist: [],
+                value: ["contourTask1", "contours"]
+              }
+            ],
+            outputsparameters: [],
+            outputsartifacts: [
+              {
+                paraname: "contours0",
+                valuefrom: "/myapps/contours[0].npy",
+                paradesc: "",
+                paratype: ""
+              },
+              {
+                paraname: "res",
+                valuefrom: "/myapps/res1.png",
+                paradesc: "",
+                paratype: ""
+              }
+            ],
+            sourcedatalist: [],
+            sourceartilist: []
+          },
+          ports: {
+            groups: {
+              in: {
+                position: "left",
+                attrs: {
+                  circle: {
+                    r: 2.5,
+                    magnet: true,
+                    stroke: "black",
+                    strokeWidth: 1,
+                    fill: "#fff",
+                    style: { visibility: true }
+                  }
+                }
+              },
+              out: {
+                position: "right",
+                attrs: {
+                  circle: {
+                    r: 2.5,
+                    magnet: true,
+                    stroke: "black",
+                    strokeWidth: 1,
+                    fill: "#fff"
+                  }
+                }
+              }
+            },
+            items: [
+              { id: "inport1", group: "in" },
+              { id: "inport2", group: "in" },
+              { id: "outport1", group: "out" },
+              { id: "outport2", group: "out" }
+            ]
+          },
+          id: "7d572837-a22b-4dab-a196-8ea411ba868e",
+          zIndex: 2
+        }
+      ],
+      inputsparameters: [],
+      inputsartifacts: [
+        {
+          paraname: "contours0",
+          parapath: "/myapps/contours[0].npy",
+          paradesc: ""
+        }
+      ],
+      argumentsparameters: [],
+      argumentsartifacts: [
+        {
+          paraname: "contours0",
+          valuefrom: "{{tasks.contourTask2.outputs.artifacts.contours0}}",
+          fileurls: [],
+          filelist: [],
+          value: ["contourTask2", "contours0"]
+        }
+      ],
+      outputsparameters: [],
+      outputsartifacts: [],
+      sourcedatalist: [],
+      sourceartilist: [],
+      inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
+      inputnodefilevalue: [] //用户选择的输入节点的文件，存储文件url,后端调用
+    },
+    ports: {
+      groups: {
+        in: {
+          position: "left",
+          attrs: {
+            circle: {
+              r: 2.5,
+              magnet: true,
+              stroke: "black",
+              strokeWidth: 1,
+              fill: "#fff",
+              style: { visibility: true }
+            }
+          }
+        },
+        out: {
+          position: "right",
+          attrs: {
+            circle: {
+              r: 2.5,
+              magnet: true,
+              stroke: "black",
+              strokeWidth: 1,
+              fill: "#fff"
+            }
+          }
+        }
+      },
+      items: [
+        { id: "inport1", group: "in" },
+        { id: "inport2", group: "in" },
+        { id: "outport1", group: "out" },
+        { id: "outport2", group: "out" }
+      ]
+    },
+    id: "a40a3ff3-da4c-463c-ab58-bd9735fb57fe",
+    zIndex: 4
+  },
+  {
+    shape: "edge",
+    attrs: {
+      line: {
+        stroke: "#808080",
+        strokeWidth: 1,
+        targetMarker: { name: "block", args: { size: "6" } }
+      }
+    },
+    id: "e30fefd7-b50a-4152-96a5-a6403f990cf7",
+    router: { name: "er", args: { offset: "center" } },
+    tools: {
+      items: [{ name: "button-remove", args: { distance: -40 } }]
+    },
+    source: {
+      cell: "7d572837-a22b-4dab-a196-8ea411ba868e",
+      port: "outport1"
+    },
+    target: {
+      cell: "a40a3ff3-da4c-463c-ab58-bd9735fb57fe",
+      port: "inport1"
+    },
+    zIndex: 5
+  },
+  {
+    position: { x: 360, y: 390 },
+    size: { width: 90, height: 80 },
+    attrs: {
+      image: {
+        "xlink:href": require("@/assets/img/visisvg/cloud.svg")
+      },
+      label: { text: "contourApproximate1" }
+    },
+    shape: "template-node",
+    data: {
+      nodeName: "contourApproximate1",
+      templateName: "contourApproximate1",
+      templateImage: "zvinjodocker/contour_approximate1:20211015",
+      templateCommand: {},
+      templateArgs: {},
+      algoparaInput: { userInput: [], getInput: [] },
+      algoparaOutput: [],
+      algoparaInputargu: { userInput: [], getInput: [] },
+      algonodeSource: [
+        {
+          position: { x: 60, y: 280 },
+          size: { width: 90, height: 80 },
+          attrs: {
+            image: {
+              "xlink:href": require("@/assets/img/visisvg/circle.svg")
+            },
+            label: { text: "contourTask1" }
+          },
+          shape: "template-node",
+          data: {
+            nodeName: "contourTask1",
+            templateName: "contourTask1",
+            templateImage: "zvinjodocker/contous_task1:20211014",
+            templateCommand: {},
+            templateArgs: {},
+            algoparaInput: { userInput: [], getInput: [] },
+            algoparaOutput: [],
+            algoparaInputargu: { userInput: [], getInput: [] },
+            algonodeSource: [],
+            inputsparameters: [],
+            inputsartifacts: [],
+            argumentsparameters: [],
+            argumentsartifacts: [],
+            outputsparameters: [],
+            outputsartifacts: [
+              {
+                paraname: "thresh",
+                paradesc: "",
+                paratype: "",
+                valuefrom: "/myapps/thresh1.png"
+              },
+              {
+                paraname: "contours",
+                paradesc: "",
+                paratype: "",
+                valuefrom: "/myapps/contours.png"
+              }
+            ],
+            sourcedatalist: [],
+            sourceartilist: []
+          },
+          ports: {
+            groups: {
+              in: {
+                position: "left",
+                attrs: {
+                  circle: {
+                    r: 2.5,
+                    magnet: true,
+                    stroke: "black",
+                    strokeWidth: 1,
+                    fill: "#fff",
+                    style: { visibility: true }
+                  }
+                }
+              },
+              out: {
+                position: "right",
+                attrs: {
+                  circle: {
+                    r: 2.5,
+                    magnet: true,
+                    stroke: "black",
+                    strokeWidth: 1,
+                    fill: "#fff"
+                  }
+                }
+              }
+            },
+            items: [
+              { id: "inport1", group: "in" },
+              { id: "inport2", group: "in" },
+              { id: "outport1", group: "out" },
+              { id: "outport2", group: "out" }
+            ]
+          },
+          id: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
+          zIndex: 1
+        }
+      ],
+      inputsparameters: [],
+      inputsartifacts: [],
+      argumentsparameters: [],
+      argumentsartifacts: [],
+      outputsparameters: [],
+      outputsartifacts: [
+        {
+          paraname: "approxCnt",
+          valuefrom: "/myapps/approx_cnt.npy",
+          paradesc: "",
+          paratype: ""
+        },
+        {
+          paraname: "approxRes",
+          valuefrom: "/myapps/approx_res.png",
+          paradesc: "",
+          paratype: ""
+        }
+      ],
+      sourcedatalist: [],
+      sourceartilist: [],
+      inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
+      inputnodefilevalue: [] //用户选择的输入节点的文件，存储文件url,后端调用
+    },
+    ports: {
+      groups: {
+        in: {
+          position: "left",
+          attrs: {
+            circle: {
+              r: 2.5,
+              magnet: true,
+              stroke: "black",
+              strokeWidth: 1,
+              fill: "#fff",
+              style: { visibility: true }
+            }
+          }
+        },
+        out: {
+          position: "right",
+          attrs: {
+            circle: {
+              r: 2.5,
+              magnet: true,
+              stroke: "black",
+              strokeWidth: 1,
+              fill: "#fff"
+            }
+          }
+        }
+      },
+      items: [
+        { id: "inport1", group: "in" },
+        { id: "inport2", group: "in" },
+        { id: "outport1", group: "out" },
+        { id: "outport2", group: "out" }
+      ]
+    },
+    id: "2d3ccc77-be7c-4fa0-ae37-a9af4fdf6730",
+    zIndex: 6
+  },
+  {
+    position: { x: 660, y: 390 },
+    size: { width: 90, height: 80 },
+    attrs: {
+      image: {
+        "xlink:href": require("@/assets/img/visisvg/api.svg")
+      },
+      label: { text: "contourApproximate2" }
+    },
+    shape: "template-node",
+    data: {
+      nodeName: "contourApproximate2",
+      templateName: "contourApproximate2",
+      templateImage: "zvinjodocker/contour_approximate2:20211015",
+      templateCommand: {},
+      templateArgs: {},
+      algoparaInput: { userInput: [], getInput: [] },
+      algoparaOutput: [],
+      algoparaInputargu: { userInput: [], getInput: [] },
+      algonodeSource: [
+        {
+          position: { x: 360, y: 390 },
+          size: { width: 90, height: 80 },
+          attrs: {
+            image: {
+              "xlink:href": require("@/assets/img/visisvg/cloud.svg")
+            },
+            label: { text: "contourApproximate1" }
+          },
+          shape: "template-node",
+          data: {
+            nodeName: "contourApproximate1",
+            templateName: "contourApproximate1",
+            templateImage: "zvinjodocker/contour_approximate1:20211015",
+            templateCommand: {},
+            templateArgs: {},
+            algoparaInput: { userInput: [], getInput: [] },
+            algoparaOutput: [],
+            algoparaInputargu: { userInput: [], getInput: [] },
+            algonodeSource: [
+              {
+                position: { x: 60, y: 280 },
+                size: { width: 90, height: 80 },
+                attrs: {
+                  image: {
+                    "xlink:href": require("@/assets/img/visisvg/circle.svg")
+                  },
+                  label: { text: "contourTask1" }
+                },
+                shape: "template-node",
+                data: {
+                  nodeName: "contourTask1",
+                  templateName: "contourTask1",
+                  templateImage: "zvinjodocker/contous_task1:20211014",
+                  templateCommand: {},
+                  templateArgs: {},
+                  algoparaInput: { userInput: [], getInput: [] },
+                  algoparaOutput: [],
+                  algoparaInputargu: { userInput: [], getInput: [] },
+                  algonodeSource: [],
+                  inputsparameters: [],
+                  inputsartifacts: [],
+                  argumentsparameters: [],
+                  argumentsartifacts: [],
+                  outputsparameters: [],
+                  outputsartifacts: [
+                    {
+                      paraname: "thresh",
+                      paradesc: "",
+                      paratype: "",
+                      valuefrom: "/myapps/thresh1.png"
+                    },
+                    {
+                      paraname: "contours",
+                      paradesc: "",
+                      paratype: "",
+                      valuefrom: "/myapps/contours.png"
+                    }
+                  ],
+                  sourcedatalist: [],
+                  sourceartilist: []
+                },
+                ports: {
+                  groups: {
+                    in: {
+                      position: "left",
+                      attrs: {
+                        circle: {
+                          r: 2.5,
+                          magnet: true,
+                          stroke: "black",
+                          strokeWidth: 1,
+                          fill: "#fff",
+                          style: { visibility: true }
+                        }
+                      }
+                    },
+                    out: {
+                      position: "right",
+                      attrs: {
+                        circle: {
+                          r: 2.5,
+                          magnet: true,
+                          stroke: "black",
+                          strokeWidth: 1,
+                          fill: "#fff"
+                        }
+                      }
+                    }
+                  },
+                  items: [
+                    { id: "inport1", group: "in" },
+                    { id: "inport2", group: "in" },
+                    { id: "outport1", group: "out" },
+                    { id: "outport2", group: "out" }
+                  ]
+                },
+                id: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
+                zIndex: 1
+              }
+            ],
+            inputsparameters: [],
+            inputsartifacts: [],
+            argumentsparameters: [],
+            argumentsartifacts: [],
+            outputsparameters: [],
+            outputsartifacts: [
+              {
+                paraname: "approxCnt",
+                valuefrom: "/myapps/approx_cnt.npy",
+                paradesc: "",
+                paratype: ""
+              },
+              {
+                paraname: "approxRes",
+                valuefrom: "/myapps/approx_res.png",
+                paradesc: "",
+                paratype: ""
+              }
+            ],
+            sourcedatalist: [],
+            sourceartilist: []
+          },
+          ports: {
+            groups: {
+              in: {
+                position: "left",
+                attrs: {
+                  circle: {
+                    r: 2.5,
+                    magnet: true,
+                    stroke: "black",
+                    strokeWidth: 1,
+                    fill: "#fff",
+                    style: { visibility: true }
+                  }
+                }
+              },
+              out: {
+                position: "right",
+                attrs: {
+                  circle: {
+                    r: 2.5,
+                    magnet: true,
+                    stroke: "black",
+                    strokeWidth: 1,
+                    fill: "#fff"
+                  }
+                }
+              }
+            },
+            items: [
+              { id: "inport1", group: "in" },
+              { id: "inport2", group: "in" },
+              { id: "outport1", group: "out" },
+              { id: "outport2", group: "out" }
+            ]
+          },
+          id: "2d3ccc77-be7c-4fa0-ae37-a9af4fdf6730",
+          zIndex: 6
+        }
+      ],
+      inputsparameters: [],
+      inputsartifacts: [
+        {
+          paraname: "approxCnt",
+          parapath: "/myapps/approx_cnt.npy",
+          paradesc: ""
+        }
+      ],
+      argumentsparameters: [],
+      argumentsartifacts: [
+        {
+          paraname: "approxCnt",
+          valuefrom: "{{tasks.contourApproximate1.outputs.artifacts.approxCnt}}",
+          fileurls: [],
+          filelist: [],
+          value: ["contourApproximate1", "approxCnt"]
+        }
+      ],
+      outputsparameters: [],
+      outputsartifacts: [
+        {
+          paraname: "approxRes2",
+          valuefrom: "/myapps/approx_res2.png",
+          paradesc: "",
+          paratype: ""
+        }
+      ],
+      sourcedatalist: [],
+      sourceartilist: [],
+      inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
+      inputnodefilevalue: [] //用户选择的输入节点的文件，存储文件url,后端调用
+    },
+    ports: {
+      groups: {
+        in: {
+          position: "left",
+          attrs: {
+            circle: {
+              r: 2.5,
+              magnet: true,
+              stroke: "black",
+              strokeWidth: 1,
+              fill: "#fff",
+              style: { visibility: true }
+            }
+          }
+        },
+        out: {
+          position: "right",
+          attrs: {
+            circle: {
+              r: 2.5,
+              magnet: true,
+              stroke: "black",
+              strokeWidth: 1,
+              fill: "#fff"
+            }
+          }
+        }
+      },
+      items: [
+        { id: "inport1", group: "in" },
+        { id: "inport2", group: "in" },
+        { id: "outport1", group: "out" },
+        { id: "outport2", group: "out" }
+      ]
+    },
+    id: "1e868699-e31f-4daf-a07b-7e903c861fba",
+    zIndex: 7
+  },
+  {
+    shape: "edge",
+    attrs: {
+      line: {
+        stroke: "#808080",
+        strokeWidth: 1,
+        targetMarker: { name: "block", args: { size: "6" } }
+      }
+    },
+    id: "77d0d40f-d287-4223-abfc-0fd17651bb69",
+    router: { name: "er", args: { offset: "center" } },
+    tools: {
+      items: [{ name: "button-remove", args: { distance: -40 } }]
+    },
+    source: {
+      cell: "2d3ccc77-be7c-4fa0-ae37-a9af4fdf6730",
+      port: "outport1"
+    },
+    target: {
+      cell: "1e868699-e31f-4daf-a07b-7e903c861fba",
+      port: "inport1"
+    },
+    zIndex: 8
+  },
+  {
+    shape: "edge",
+    attrs: {
+      line: {
+        stroke: "#808080",
+        strokeWidth: 1,
+        targetMarker: { name: "block", args: { size: "6" } }
+      }
+    },
+    id: "f46b0a77-d34c-4ec8-8bfd-7b48e412669e",
+    router: { name: "er", args: { offset: "center" } },
+    tools: {
+      items: [{ name: "button-remove", args: { distance: -40 } }]
+    },
+    source: {
+      cell: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
+      port: "outport2"
+    },
+    target: {
+      cell: "2d3ccc77-be7c-4fa0-ae37-a9af4fdf6730",
+      port: "inport1"
+    },
+    zIndex: 9
+  },
+  {
+    position: { x: 660, y: 600 },
+    size: { width: 90, height: 80 },
+    attrs: {
+      image: {
+        "xlink:href": require("@/assets/img/visisvg/bookshelf.svg")
+      },
+      label: { text: "contourRect1" }
+    },
+    shape: "template-node",
+    data: {
+      nodeName: "contourRect1",
+      templateName: "contourRect1",
+      templateImage: "zvinjodocker/contours_rect1:20211015",
+      templateCommand: {},
+      templateArgs: {},
+      algoparaInput: { userInput: [], getInput: [] },
+      algoparaOutput: [],
+      algoparaInputargu: { userInput: [], getInput: [] },
+      algonodeSource: [
+        {
+          position: { x: 360, y: 390 },
+          size: { width: 90, height: 80 },
+          attrs: {
+            image: {
+              "xlink:href": require("@/assets/img/visisvg/cloud.svg")
+            },
+            label: { text: "contourApproximate1" }
+          },
+          shape: "template-node",
+          data: {
+            nodeName: "contourApproximate1",
+            templateName: "contourApproximate1",
+            templateImage: "zvinjodocker/contour_approximate1:20211015",
+            templateCommand: {},
+            templateArgs: {},
+            algoparaInput: { userInput: [], getInput: [] },
+            algoparaOutput: [],
+            algoparaInputargu: { userInput: [], getInput: [] },
+            algonodeSource: [
+              {
+                position: { x: 60, y: 280 },
+                size: { width: 90, height: 80 },
+                attrs: {
+                  image: {
+                    "xlink:href": require("@/assets/img/visisvg/circle.svg")
+                  },
+                  label: { text: "contourTask1" }
+                },
+                shape: "template-node",
+                data: {
+                  nodeName: "contourTask1",
+                  templateName: "contourTask1",
+                  templateImage: "zvinjodocker/contous_task1:20211014",
+                  templateCommand: {},
+                  templateArgs: {},
+                  algoparaInput: { userInput: [], getInput: [] },
+                  algoparaOutput: [],
+                  algoparaInputargu: { userInput: [], getInput: [] },
+                  algonodeSource: [],
+                  inputsparameters: [],
+                  inputsartifacts: [],
+                  argumentsparameters: [],
+                  argumentsartifacts: [],
+                  outputsparameters: [],
+                  outputsartifacts: [
+                    {
+                      paraname: "thresh",
+                      paradesc: "",
+                      paratype: "",
+                      valuefrom: "/myapps/thresh1.png"
+                    },
+                    {
+                      paraname: "contours",
+                      paradesc: "",
+                      paratype: "",
+                      valuefrom: "/myapps/contours.png"
+                    }
+                  ],
+                  sourcedatalist: [],
+                  sourceartilist: []
+                },
+                ports: {
+                  groups: {
+                    in: {
+                      position: "left",
+                      attrs: {
+                        circle: {
+                          r: 2.5,
+                          magnet: true,
+                          stroke: "black",
+                          strokeWidth: 1,
+                          fill: "#fff",
+                          style: { visibility: true }
+                        }
+                      }
+                    },
+                    out: {
+                      position: "right",
+                      attrs: {
+                        circle: {
+                          r: 2.5,
+                          magnet: true,
+                          stroke: "black",
+                          strokeWidth: 1,
+                          fill: "#fff"
+                        }
+                      }
+                    }
+                  },
+                  items: [
+                    { id: "inport1", group: "in" },
+                    { id: "inport2", group: "in" },
+                    { id: "outport1", group: "out" },
+                    { id: "outport2", group: "out" }
+                  ]
+                },
+                id: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
+                zIndex: 1
+              }
+            ],
+            inputsparameters: [],
+            inputsartifacts: [],
+            argumentsparameters: [],
+            argumentsartifacts: [],
+            outputsparameters: [],
+            outputsartifacts: [
+              {
+                paraname: "approxCnt",
+                valuefrom: "/myapps/approx_cnt.npy",
+                paradesc: "",
+                paratype: ""
+              },
+              {
+                paraname: "approxRes",
+                valuefrom: "/myapps/approx_res.png",
+                paradesc: "",
+                paratype: ""
+              }
+            ],
+            sourcedatalist: [],
+            sourceartilist: []
+          },
+          ports: {
+            groups: {
+              in: {
+                position: "left",
+                attrs: {
+                  circle: {
+                    r: 2.5,
+                    magnet: true,
+                    stroke: "black",
+                    strokeWidth: 1,
+                    fill: "#fff",
+                    style: { visibility: true }
+                  }
+                }
+              },
+              out: {
+                position: "right",
+                attrs: {
+                  circle: {
+                    r: 2.5,
+                    magnet: true,
+                    stroke: "black",
+                    strokeWidth: 1,
+                    fill: "#fff"
+                  }
+                }
+              }
+            },
+            items: [
+              { id: "inport1", group: "in" },
+              { id: "inport2", group: "in" },
+              { id: "outport1", group: "out" },
+              { id: "outport2", group: "out" }
+            ]
+          },
+          id: "2d3ccc77-be7c-4fa0-ae37-a9af4fdf6730",
+          zIndex: 6
+        }
+      ],
+      inputsparameters: [],
+      inputsartifacts: [],
+      argumentsparameters: [],
+      argumentsartifacts: [],
+      outputsparameters: [],
+      outputsartifacts: [
+        {
+          paraname: "cnt",
+          valuefrom: "/myapps/contour_rect_cnt.npy",
+          paradesc: "",
+          paratype: ""
+        },
+        {
+          paraname: "contourRect",
+          valuefrom: "/myapps/contour_rect.png",
+          paradesc: "",
+          paratype: ""
+        }
+      ],
+      sourcedatalist: [],
+      sourceartilist: [],
+      inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
+      inputnodefilevalue: [] //用户选择的输入节点的文件，存储文件url,后端调用
+    },
+    ports: {
+      groups: {
+        in: {
+          position: "left",
+          attrs: {
+            circle: {
+              r: 2.5,
+              magnet: true,
+              stroke: "black",
+              strokeWidth: 1,
+              fill: "#fff",
+              style: { visibility: true }
+            }
+          }
+        },
+        out: {
+          position: "right",
+          attrs: {
+            circle: {
+              r: 2.5,
+              magnet: true,
+              stroke: "black",
+              strokeWidth: 1,
+              fill: "#fff"
+            }
+          }
+        }
+      },
+      items: [
+        { id: "inport1", group: "in" },
+        { id: "inport2", group: "in" },
+        { id: "outport1", group: "out" },
+        { id: "outport2", group: "out" }
+      ]
+    },
+    id: "6d787d4a-a68d-4a8c-a3b9-559eb5d4e231",
+    zIndex: 10
+  },
+  {
+    position: { x: 910, y: 600 },
+    size: { width: 90, height: 80 },
+    attrs: {
+      image: {
+        "xlink:href": require("@/assets/img/visisvg/computer.svg")
+      },
+      label: { text: "contourCircle2" }
+    },
+    shape: "template-node",
+    data: {
+      nodeName: "contourCircle2",
+      templateName: "contourCircle2",
+      templateImage: "zvinjodocker/contours_circle2:20211015",
+      templateCommand: {},
+      templateArgs: {},
+      algoparaInput: { userInput: [], getInput: [] },
+      algoparaOutput: [],
+      algoparaInputargu: { userInput: [], getInput: [] },
+      algonodeSource: [
+        {
+          position: { x: 660, y: 600 },
+          size: { width: 90, height: 80 },
+          attrs: {
+            image: {
+              "xlink:href": require("@/assets/img/visisvg/bookshelf.svg")
+            },
+            label: { text: "contourRect1" }
+          },
+          shape: "template-node",
+          data: {
+            nodeName: "contourRect1",
+            templateName: "contourRect1",
+            templateImage: "zvinjodocker/contours_rect1:20211015",
+            templateCommand: {},
+            templateArgs: {},
+            algoparaInput: { userInput: [], getInput: [] },
+            algoparaOutput: [],
+            algoparaInputargu: { userInput: [], getInput: [] },
+            algonodeSource: [
+              {
+                position: { x: 360, y: 390 },
+                size: { width: 90, height: 80 },
+                attrs: {
+                  image: {
+                    "xlink:href": require("@/assets/img/visisvg/cloud.svg")
+                  },
+                  label: { text: "contourApproximate1" }
+                },
+                shape: "template-node",
+                data: {
+                  nodeName: "contourApproximate1",
+                  templateName: "contourApproximate1",
+                  templateImage: "zvinjodocker/contour_approximate1:20211015",
+                  templateCommand: {},
+                  templateArgs: {},
+                  algoparaInput: { userInput: [], getInput: [] },
+                  algoparaOutput: [],
+                  algoparaInputargu: { userInput: [], getInput: [] },
+                  algonodeSource: [
+                    {
+                      position: { x: 60, y: 280 },
+                      size: { width: 90, height: 80 },
+                      attrs: {
+                        image: {
+                          "xlink:href": require("@/assets/img/visisvg/circle.svg")
+                        },
+                        label: { text: "contourTask1" }
+                      },
+                      shape: "template-node",
+                      data: {
+                        nodeName: "contourTask1",
+                        templateName: "contourTask1",
+                        templateImage: "zvinjodocker/contous_task1:20211014",
+                        templateCommand: {},
+                        templateArgs: {},
+                        algoparaInput: { userInput: [], getInput: [] },
+                        algoparaOutput: [],
+                        algoparaInputargu: {
+                          userInput: [],
+                          getInput: []
+                        },
+                        algonodeSource: [],
+                        inputsparameters: [],
+                        inputsartifacts: [],
+                        argumentsparameters: [],
+                        argumentsartifacts: [],
+                        outputsparameters: [],
+                        outputsartifacts: [
+                          {
+                            paraname: "thresh",
+                            paradesc: "",
+                            paratype: "",
+                            valuefrom: "/myapps/thresh1.png"
+                          },
+                          {
+                            paraname: "contours",
+                            paradesc: "",
+                            paratype: "",
+                            valuefrom: "/myapps/contours.png"
+                          }
+                        ],
+                        sourcedatalist: [],
+                        sourceartilist: []
+                      },
+                      ports: {
+                        groups: {
+                          in: {
+                            position: "left",
+                            attrs: {
+                              circle: {
+                                r: 2.5,
+                                magnet: true,
+                                stroke: "black",
+                                strokeWidth: 1,
+                                fill: "#fff",
+                                style: { visibility: true }
+                              }
+                            }
+                          },
+                          out: {
+                            position: "right",
+                            attrs: {
+                              circle: {
+                                r: 2.5,
+                                magnet: true,
+                                stroke: "black",
+                                strokeWidth: 1,
+                                fill: "#fff"
+                              }
+                            }
+                          }
+                        },
+                        items: [
+                          { id: "inport1", group: "in" },
+                          { id: "inport2", group: "in" },
+                          { id: "outport1", group: "out" },
+                          { id: "outport2", group: "out" }
+                        ]
+                      },
+                      id: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
+                      zIndex: 1
+                    }
+                  ],
+                  inputsparameters: [],
+                  inputsartifacts: [],
+                  argumentsparameters: [],
+                  argumentsartifacts: [],
+                  outputsparameters: [],
+                  outputsartifacts: [
+                    {
+                      paraname: "approxCnt",
+                      valuefrom: "/myapps/approx_cnt.npy",
+                      paradesc: "",
+                      paratype: ""
+                    },
+                    {
+                      paraname: "approxRes",
+                      valuefrom: "/myapps/approx_res.png",
+                      paradesc: "",
+                      paratype: ""
+                    }
+                  ],
+                  sourcedatalist: [],
+                  sourceartilist: []
+                },
+                ports: {
+                  groups: {
+                    in: {
+                      position: "left",
+                      attrs: {
+                        circle: {
+                          r: 2.5,
+                          magnet: true,
+                          stroke: "black",
+                          strokeWidth: 1,
+                          fill: "#fff",
+                          style: { visibility: true }
+                        }
+                      }
+                    },
+                    out: {
+                      position: "right",
+                      attrs: {
+                        circle: {
+                          r: 2.5,
+                          magnet: true,
+                          stroke: "black",
+                          strokeWidth: 1,
+                          fill: "#fff"
+                        }
+                      }
+                    }
+                  },
+                  items: [
+                    { id: "inport1", group: "in" },
+                    { id: "inport2", group: "in" },
+                    { id: "outport1", group: "out" },
+                    { id: "outport2", group: "out" }
+                  ]
+                },
+                id: "2d3ccc77-be7c-4fa0-ae37-a9af4fdf6730",
+                zIndex: 6
+              }
+            ],
+            inputsparameters: [],
+            inputsartifacts: [],
+            argumentsparameters: [],
+            argumentsartifacts: [],
+            outputsparameters: [],
+            outputsartifacts: [
+              {
+                paraname: "cnt",
+                valuefrom: "/myapps/contour_rect_cnt.npy",
+                paradesc: "",
+                paratype: ""
+              },
+              {
+                paraname: "contourRect",
+                valuefrom: "/myapps/contour_rect.png",
+                paradesc: "",
+                paratype: ""
+              }
+            ],
+            sourcedatalist: [],
+            sourceartilist: []
+          },
+          ports: {
+            groups: {
+              in: {
+                position: "left",
+                attrs: {
+                  circle: {
+                    r: 2.5,
+                    magnet: true,
+                    stroke: "black",
+                    strokeWidth: 1,
+                    fill: "#fff",
+                    style: { visibility: true }
+                  }
+                }
+              },
+              out: {
+                position: "right",
+                attrs: {
+                  circle: {
+                    r: 2.5,
+                    magnet: true,
+                    stroke: "black",
+                    strokeWidth: 1,
+                    fill: "#fff"
+                  }
+                }
+              }
+            },
+            items: [
+              { id: "inport1", group: "in" },
+              { id: "inport2", group: "in" },
+              { id: "outport1", group: "out" },
+              { id: "outport2", group: "out" }
+            ]
+          },
+          id: "6d787d4a-a68d-4a8c-a3b9-559eb5d4e231",
+          zIndex: 10
+        }
+      ],
+      inputsparameters: [],
+      inputsartifacts: [
+        {
+          paraname: "contourRect",
+          parapath: "/myapps/contour_rect.png",
+          paradesc: ""
+        },
+        {
+          paraname: "cnt",
+          parapath: "/myapps/contour_rect_cnt.npy",
+          paradesc: ""
+        }
+      ],
+      argumentsparameters: [],
+      argumentsartifacts: [
+        {
+          paraname: "contourRect",
+          valuefrom: "{{tasks.contourRect1.outputs.artifacts.contourRect}}",
+          fileurls: [],
+          filelist: [],
+          value: ["contourRect1", "contourRect"]
+        },
+        {
+          paraname: "cnt",
+          valuefrom: "{{tasks.contourRect1.outputs.artifacts.cnt}}",
+          fileurls: [],
+          filelist: [],
+          value: ["contourRect1", "cnt"]
+        }
+      ],
+      outputsparameters: [],
+      outputsartifacts: [
+        {
+          paraname: "contourCircle",
+          valuefrom: "contour_circle.png",
+          paradesc: "",
+          paratype: ""
+        }
+      ],
+      sourcedatalist: [],
+      sourceartilist: [],
+      inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
+      inputnodefilevalue: [] //用户选择的输入节点的文件，存储文件url,后端调用
+    },
+    ports: {
+      groups: {
+        in: {
+          position: "left",
+          attrs: {
+            circle: {
+              r: 2.5,
+              magnet: true,
+              stroke: "black",
+              strokeWidth: 1,
+              fill: "#fff",
+              style: { visibility: true }
+            }
+          }
+        },
+        out: {
+          position: "right",
+          attrs: {
+            circle: {
+              r: 2.5,
+              magnet: true,
+              stroke: "black",
+              strokeWidth: 1,
+              fill: "#fff"
+            }
+          }
+        }
+      },
+      items: [
+        { id: "inport1", group: "in" },
+        { id: "inport2", group: "in" },
+        { id: "outport1", group: "out" },
+        { id: "outport2", group: "out" }
+      ]
+    },
+    id: "283ddff1-40c9-43aa-b581-b99706e65fb3",
+    zIndex: 11
+  },
+  {
+    shape: "edge",
+    attrs: {
+      line: {
+        stroke: "#808080",
+        strokeWidth: 1,
+        targetMarker: { name: "block", args: { size: "6" } }
+      }
+    },
+    id: "5f83bef7-8f4c-4b6a-ac51-b076c1e03042",
+    router: { name: "er", args: { offset: "center" } },
+    tools: {
+      items: [{ name: "button-remove", args: { distance: -40 } }]
+    },
+    source: {
+      cell: "2d3ccc77-be7c-4fa0-ae37-a9af4fdf6730",
+      port: "outport2"
+    },
+    target: {
+      cell: "6d787d4a-a68d-4a8c-a3b9-559eb5d4e231",
+      port: "inport1"
+    },
+    zIndex: 12
+  },
+  {
+    shape: "edge",
+    attrs: {
+      line: {
+        stroke: "#808080",
+        strokeWidth: 1,
+        targetMarker: { name: "block", args: { size: "6" } }
+      }
+    },
+    id: "9017467c-167e-4f01-97dd-37d2d42bd0ed",
+    router: { name: "er", args: { offset: "center" } },
+    tools: {
+      items: [{ name: "button-remove", args: { distance: -40 } }]
+    },
+    source: {
+      cell: "6d787d4a-a68d-4a8c-a3b9-559eb5d4e231",
+      port: "outport1"
+    },
+    target: {
+      cell: "283ddff1-40c9-43aa-b581-b99706e65fb3",
+      port: "inport1"
+    },
+    zIndex: 13
+  }
+];