scd可视化

package-lock.json

@@ -17,12 +17,14 @@
         "crypto": "^1.0.1",
         "crypto-browserify": "^3.12.0",
         "crypto-js": "^4.1.1",
-        "element-plus": "^2.3.14",
+        "element-plus": "^2.4.3",
         "js-md5": "^0.8.0",
         "jsplumb": "^2.15.6",
+        "leader-line": "^1.0.7",
         "less": "^4.2.0",
         "less-loader": "^11.1.3",
         "moment": "^2.29.4",
+        "pinia": "^2.1.7",
         "sass": "^1.69.5",
         "scss": "^0.2.4",
         "scss-loader": "^0.0.1",
@@ -499,7 +501,7 @@
     },
     "node_modules/@ctrl/tinycolor": {
       "version": "3.6.1",
-      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
       "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
       "engines": {
         "node": ">=10"
@@ -515,24 +517,24 @@
       }
     },
     "node_modules/@element-plus/icons-vue": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz",
-      "integrity": "sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
       "peerDependencies": {
         "vue": "^3.2.0"
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.5.0.tgz",
-      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.1.tgz",
+      "integrity": "sha512-QgcKYwzcc8vvZ4n/5uklchy8KVdjJwcOeI+HnnTNclJjs2nYsy23DOCf+sSV1kBwD9yDAoVKCkv/gEPzgQU3Pw==",
       "dependencies": {
         "@floating-ui/utils": "^0.1.3"
       }
     },
     "node_modules/@floating-ui/dom": {
       "version": "1.5.3",
-      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
       "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
       "dependencies": {
         "@floating-ui/core": "^1.4.2",
@@ -541,7 +543,7 @@
     },
     "node_modules/@floating-ui/utils": {
       "version": "0.1.6",
-      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
       "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
     },
     "node_modules/@hapi/hoek": {
@@ -1304,8 +1306,12 @@
     "node_modules/@popperjs/core": {
       "name": "@sxzz/popperjs-es",
       "version": "2.11.7",
-      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
-      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
     },
     "node_modules/@sideway/address": {
       "version": "4.1.4",
@@ -1627,14 +1633,14 @@
       "integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ=="
     },
     "node_modules/@types/lodash": {
-      "version": "4.14.199",
-      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.199.tgz",
-      "integrity": "sha512-Vrjz5N5Ia4SEzWWgIVwnHNEnb1UE1XMkvY5DGXrAeOGE9imk0hgTHh5GyDjLDJi9OTCn9oo9dXH1uToK1VRfrg=="
+      "version": "4.14.202",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
+      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ=="
     },
     "node_modules/@types/lodash-es": {
-      "version": "4.17.9",
-      "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.9.tgz",
-      "integrity": "sha512-ZTcmhiI3NNU7dEvWLZJkzG6ao49zOIjEgIE0RgV7wbPxU0f2xT3VSAHw2gmst8swH6V0YkLRGp4qPlX/6I90MQ==",
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -1742,7 +1748,7 @@
     },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.16",
-      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
       "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
     },
     "node_modules/@types/ws": {
@@ -2220,18 +2226,21 @@
     },
     "node_modules/@vueuse/core": {
       "version": "9.13.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
       "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.16",
         "@vueuse/metadata": "9.13.0",
         "@vueuse/shared": "9.13.0",
         "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/core/node_modules/vue-demi": {
       "version": "0.14.6",
-      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
       "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
       "hasInstallScript": true,
       "bin": {
@@ -2241,6 +2250,9 @@
       "engines": {
         "node": ">=12"
       },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
       "peerDependencies": {
         "@vue/composition-api": "^1.0.0-rc.1",
         "vue": "^3.0.0-0 || ^2.6.0"
@@ -2253,20 +2265,26 @@
     },
     "node_modules/@vueuse/metadata": {
       "version": "9.13.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
-      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ=="
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
     },
     "node_modules/@vueuse/shared": {
       "version": "9.13.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
       "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
       "dependencies": {
         "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/shared/node_modules/vue-demi": {
       "version": "0.14.6",
-      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
       "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
       "hasInstallScript": true,
       "bin": {
@@ -2276,6 +2294,9 @@
       "engines": {
         "node": ">=12"
       },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
       "peerDependencies": {
         "@vue/composition-api": "^1.0.0-rc.1",
         "vue": "^3.0.0-0 || ^2.6.0"
@@ -2689,7 +2710,7 @@
     },
     "node_modules/async-validator": {
       "version": "4.2.5",
-      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
     },
     "node_modules/asynckit": {
@@ -4221,7 +4242,7 @@
     },
     "node_modules/dayjs": {
       "version": "1.11.10",
-      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
       "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
     "node_modules/debug": {
@@ -4666,12 +4687,12 @@
       "integrity": "sha512-54z7squS1FyFRSUqq/knOFSptjjogLZXbKcYk3B0qkE1KZzvqASwRZnY2KzZQJqIYLVD38XZeoiMRflYSwyO4w=="
     },
     "node_modules/element-plus": {
-      "version": "2.3.14",
-      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.14.tgz",
-      "integrity": "sha512-9yvxUaU4jXf2ZNPdmIxoj/f8BG8CDcGM6oHa9JIqxLjQlfY4bpzR1E5CjNimnOX3rxO93w1TQ0jTVt0RSxh9kA==",
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.4.3.tgz",
+      "integrity": "sha512-b3q26j+lM4SBqiyzw8HybybGnP2pk4MWgrnzzzYW5qKQUgV6EG1Zg7nMCfgCVccI8tNvZoTiUHb2mFaiB9qT8w==",
       "dependencies": {
         "@ctrl/tinycolor": "^3.4.1",
-        "@element-plus/icons-vue": "^2.0.6",
+        "@element-plus/icons-vue": "^2.3.1",
         "@floating-ui/dom": "^1.0.1",
         "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
         "@types/lodash": "^4.14.182",
@@ -8251,6 +8272,11 @@
         "launch-editor": "^2.6.0"
       }
     },
+    "node_modules/leader-line": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/leader-line/-/leader-line-1.0.7.tgz",
+      "integrity": "sha512-PhJpQLV7XychSIuGPD0TEqR9PgRYBbrhReaOcmHFOVtTw4dWKfUMAtOb7UP7xTsoib6sFzq2giQeOUHy7LCuJQ=="
+    },
     "node_modules/less": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
@@ -8371,7 +8397,7 @@
     },
     "node_modules/lodash-unified": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
       "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
       "peerDependencies": {
         "@types/lodash-es": "*",
@@ -8729,7 +8755,7 @@
     },
     "node_modules/memoize-one": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
       "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
     },
     "node_modules/merge-descriptors": {
@@ -9217,7 +9243,7 @@
     },
     "node_modules/normalize-wheel-es": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
       "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
     },
     "node_modules/npm-run-path": {
@@ -9662,6 +9688,56 @@
         "node": ">=6"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
@@ -12973,7 +13049,7 @@
     },
     "@ctrl/tinycolor": {
       "version": "3.6.1",
-      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
       "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA=="
     },
     "@discoveryjs/json-ext": {
@@ -12983,22 +13059,22 @@
       "dev": true
     },
     "@element-plus/icons-vue": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz",
-      "integrity": "sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
       "requires": {}
     },
     "@floating-ui/core": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.5.0.tgz",
-      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.1.tgz",
+      "integrity": "sha512-QgcKYwzcc8vvZ4n/5uklchy8KVdjJwcOeI+HnnTNclJjs2nYsy23DOCf+sSV1kBwD9yDAoVKCkv/gEPzgQU3Pw==",
       "requires": {
         "@floating-ui/utils": "^0.1.3"
       }
     },
     "@floating-ui/dom": {
       "version": "1.5.3",
-      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
       "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
       "requires": {
         "@floating-ui/core": "^1.4.2",
@@ -13007,7 +13083,7 @@
     },
     "@floating-ui/utils": {
       "version": "0.1.6",
-      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
       "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
     },
     "@hapi/hoek": {
@@ -13585,7 +13661,7 @@
     },
     "@popperjs/core": {
       "version": "npm:@sxzz/popperjs-es@2.11.7",
-      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
       "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
     },
     "@sideway/address": {
@@ -13883,14 +13959,14 @@
       "integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ=="
     },
     "@types/lodash": {
-      "version": "4.14.199",
-      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.199.tgz",
-      "integrity": "sha512-Vrjz5N5Ia4SEzWWgIVwnHNEnb1UE1XMkvY5DGXrAeOGE9imk0hgTHh5GyDjLDJi9OTCn9oo9dXH1uToK1VRfrg=="
+      "version": "4.14.202",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
+      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ=="
     },
     "@types/lodash-es": {
-      "version": "4.17.9",
-      "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.9.tgz",
-      "integrity": "sha512-ZTcmhiI3NNU7dEvWLZJkzG6ao49zOIjEgIE0RgV7wbPxU0f2xT3VSAHw2gmst8swH6V0YkLRGp4qPlX/6I90MQ==",
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
       "requires": {
         "@types/lodash": "*"
       }
@@ -13998,7 +14074,7 @@
     },
     "@types/web-bluetooth": {
       "version": "0.0.16",
-      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
       "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
     },
     "@types/ws": {
@@ -14393,7 +14469,7 @@
     },
     "@vueuse/core": {
       "version": "9.13.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
       "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
       "requires": {
         "@types/web-bluetooth": "^0.0.16",
@@ -14404,7 +14480,7 @@
       "dependencies": {
         "vue-demi": {
           "version": "0.14.6",
-          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
           "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
           "requires": {}
         }
@@ -14412,12 +14488,12 @@
     },
     "@vueuse/metadata": {
       "version": "9.13.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
       "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ=="
     },
     "@vueuse/shared": {
       "version": "9.13.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
       "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
       "requires": {
         "vue-demi": "*"
@@ -14425,7 +14501,7 @@
       "dependencies": {
         "vue-demi": {
           "version": "0.14.6",
-          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
           "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
           "requires": {}
         }
@@ -14780,7 +14856,7 @@
     },
     "async-validator": {
       "version": "4.2.5",
-      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
     },
     "asynckit": {
@@ -16024,7 +16100,7 @@
     },
     "dayjs": {
       "version": "1.11.10",
-      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
       "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
     "debug": {
@@ -16382,12 +16458,12 @@
       "integrity": "sha512-54z7squS1FyFRSUqq/knOFSptjjogLZXbKcYk3B0qkE1KZzvqASwRZnY2KzZQJqIYLVD38XZeoiMRflYSwyO4w=="
     },
     "element-plus": {
-      "version": "2.3.14",
-      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.14.tgz",
-      "integrity": "sha512-9yvxUaU4jXf2ZNPdmIxoj/f8BG8CDcGM6oHa9JIqxLjQlfY4bpzR1E5CjNimnOX3rxO93w1TQ0jTVt0RSxh9kA==",
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.4.3.tgz",
+      "integrity": "sha512-b3q26j+lM4SBqiyzw8HybybGnP2pk4MWgrnzzzYW5qKQUgV6EG1Zg7nMCfgCVccI8tNvZoTiUHb2mFaiB9qT8w==",
       "requires": {
         "@ctrl/tinycolor": "^3.4.1",
-        "@element-plus/icons-vue": "^2.0.6",
+        "@element-plus/icons-vue": "^2.3.1",
         "@floating-ui/dom": "^1.0.1",
         "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
         "@types/lodash": "^4.14.182",
@@ -19071,6 +19147,11 @@
         "launch-editor": "^2.6.0"
       }
     },
+    "leader-line": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/leader-line/-/leader-line-1.0.7.tgz",
+      "integrity": "sha512-PhJpQLV7XychSIuGPD0TEqR9PgRYBbrhReaOcmHFOVtTw4dWKfUMAtOb7UP7xTsoib6sFzq2giQeOUHy7LCuJQ=="
+    },
     "less": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
@@ -19157,7 +19238,7 @@
     },
     "lodash-unified": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
       "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
       "requires": {}
     },
@@ -19454,7 +19535,7 @@
     },
     "memoize-one": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
       "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
     },
     "merge-descriptors": {
@@ -19851,7 +19932,7 @@
     },
     "normalize-wheel-es": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
       "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
     },
     "npm-run-path": {
@@ -20210,6 +20291,23 @@
       "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
       "optional": true
     },
+    "pinia": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+          "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+          "requires": {}
+        }
+      }
+    },
     "pirates": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",

package.json

@@ -17,12 +17,14 @@
     "crypto": "^1.0.1",
     "crypto-browserify": "^3.12.0",
     "crypto-js": "^4.1.1",
-    "element-plus": "^2.3.14",
+    "element-plus": "^2.4.3",
     "js-md5": "^0.8.0",
     "jsplumb": "^2.15.6",
+    "leader-line": "^1.0.7",
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
     "moment": "^2.29.4",
+    "pinia": "^2.1.7",
     "sass": "^1.69.5",
     "scss": "^0.2.4",
     "scss-loader": "^0.0.1",

src/api/iedNetwork/index.js

@@ -7,18 +7,51 @@ export function nodeList(query) {
     params: query
   })
 }
-  //获取SCD中配置的所有设备网络地址
-export function iedRelation(query) {
-  return request({
-    url: '/screen/scd/ied/relation',
-    method: 'get',
-    params: query
-  })
- }  //获取SCD中配置的所有设备网络地址
+//获取SCD中配置的所有设备网络地址
  export function iedNetaddr(query) {
    return request({
      url: '/screen/scd/ied/netaddr',
      method: 'get',
      params: query
    })
+}
+//scd可视化
+export function getGlobalCode(query) {
+  return request({
+    url: '/getGlobalCode',
+    method: 'get',
+    params: query
+  })
+}
+//获取类型信息
+export function iedTypelist(query) {
+  return request({
+    url: '/scd/ied/typelist',
+    method: 'get',
+    params: query
+  })
+}
+//间隔
+export function areaList(query) {
+  return request({
+    url: '/scd/area/list',
+    method: 'get',
+    params: query
+  })
+}
+//获取IED关联关系
+export function scdIedRelation(query) {
+  return request({
+    url: '/screen/scd/ied/relation',
+    method: 'get',
+    params: query
+  })
+}
+//电压搜索
+export function areaIedList(query) {
+  return request({
+    url: '/scd/area/ied/list',
+    method: 'get',
+    params: query
+  })
 }

src/main.js

@@ -6,6 +6,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
 import zhCn from 'element-plus/es/locale/lang/zh-cn';//引入中文
 import '@/styles/index.scss'
+import store from './store' //pinia
 // bpmn 相关依赖
 import 'bpmn-js/dist/assets/diagram-js.css'
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
@@ -22,6 +23,7 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 }
 app.use(ElementPlus, { locale: zhCn });//使element全局变为中文
 app.use(router)
+app.use(store);
 LogicFlow.use(BpmnElement);
 LogicFlow.use(Control);
 LogicFlow.use(Menu);

src/pages/login/LoginNow.vue

@@ -32,6 +32,8 @@ import { ref, onMounted } from "vue"
 import { useRouter } from 'vue-router'
 import { ElMessage } from "element-plus"
 import login from "@/api/login"
+import { useDataStore } from '@/store/modules/golbal-data';
+const userStoreCode = useDataStore();
 export default {
     setup() {
         let less = ref("")
@@ -75,11 +77,13 @@ export default {
                         windowEx.Position('center')
                     }
                     router.push('/home/mission')
+                    userStoreCode.GlobalCodes();
                     ElMessage({
                         message: '登陆成功！',
                         type: "success"
                     })
                     windowEx.Size(1920, 1080)
+
                     // windowEx.Position('center')
                 } else {
                     ElMessage({

src/pages/netStructPicture/components/basicInfo.vue

@@ -0,0 +1,15 @@
+<!-- 基础信息 -->
+<template>
+  <div>4</div>
+</template>
+<script setup>
+import { onMounted, watch, ref,nextTick,defineEmits } from "vue";
+const props = defineProps({
+  checkDialogData: {
+    type: Object,
+    default: () => {},
+  },
+});
+</script>
+<style scoped lang="scss">
+</style>

src/pages/netStructPicture/components/dialogIndex.vue

@@ -0,0 +1,202 @@
+<!-- 整个装置大的弹窗 -->
+<template>
+  <el-dialog
+    @close="cancelClick"
+    v-model="isOpen"
+    width="93vw"
+    append-to-body
+    draggable
+    top="5vh"
+    style="height: 92vh"
+  >
+    <template #header>
+      <div class="my-header">
+        <div class="title" v-if="checkDialogData">
+          {{ checkDialogData.desc }}
+        </div>
+      </div>
+    </template>
+    <div class="main">
+      <div class="main-left">
+        <el-input
+          v-model="input1"
+          class="w-50 m-2"
+          size="large"
+          placeholder="快捷搜索"
+          :suffix-icon="Search"
+          style="width: 90%; margin-left: 5%; margin-top: 10px"
+        />
+        <el-scrollbar height="72vh">
+          <p
+            v-for="(item, index) in iedRelationData"
+            :key="index"
+            class="scrollbar-demo-item"
+            @click="clickLeft(index)"
+            :class="{ 'left-item-active': activeLeft == index }"
+          >
+            <span class="ied-name">{{ item.ied_name }}</span
+            ><span class="desc">{{ item.desc }}</span>
+          </p>
+        </el-scrollbar>
+      </div>
+      <!-- 右侧版块 -->
+      <div class="main-right">
+        <div class="nav">
+          <div
+            v-for="(item, index) in navtopData"
+            :key="index"
+            :class="{ 'nav-item-active': activeNav == index }"
+            @click="clickNav(index, item.code)"
+            class="nav-item"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+        <div class="main-right-item">
+          <component
+            :is="activeNavName"
+            :checkDialogData="checkDialogData"
+          ></component>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+  <script setup>
+import { onMounted, watch, ref, computed,nextTick } from "vue";
+import { defineEmits } from "vue";
+import devicePng from "@/assets/image/instruct/device.png";
+import { Search } from "@element-plus/icons-vue";
+import relationShip from "./relationShip.vue";
+import inoutControl from "./inoutControl.vue";
+import virtualRelation from "./virtualRelation.vue";
+import basicInfo from "./basicInfo.vue";
+import fixedEntry from "./fixedEntry.vue";
+import infoTable from "./infoTable.vue";
+import soureFile from "./soureFile.vue";
+const props = defineProps({
+  openBig: {
+    type: Boolean,
+    default: false,
+  },
+  iedRelationData: {
+    type: Object,
+    default: () => {},
+  },
+  checkDialogData: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const isOpen = ref(props.openBig);
+watch(
+  () => props.openBig,
+  (newValue) => {
+    isOpen.value = newValue;
+  }
+);
+//头部
+const navtopData = ref([
+  { name: "装置关联关系", code: relationShip },
+  { name: "输入输出控制块", code: inoutControl },
+  { name: "虚端子关系", code: virtualRelation },
+  { name: "基础信息", code: basicInfo },
+  { name: "定值条目", code: fixedEntry },
+  { name: "信息点表", code: infoTable },
+  { name: "源文件", code: soureFile },
+]);
+const emit = defineEmits(["done"]);
+const cancelClick = () => {
+  isOpen.value = false;
+  activeLeft.value = null;
+  emit("done", false);
+};
+const activeNav = ref(0);
+const activeNavName = ref(relationShip);
+const clickNav = (navIndex, name) => {
+  //点击导航栏事件
+  activeNavName.value = name;
+  activeNav.value = navIndex;
+};
+const activeLeft = ref(null);
+const clickLeft = (navIndex) => {
+  //点击导航栏事件
+  activeLeft.value = navIndex;
+};
+onMounted(() => {
+  // const height = ref(0);
+  // height.value = document.documentElement.clientHeight - 400 + "px;";
+});
+</script>
+  <style scoped lang="scss">
+@mixin mid-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+$height: 40px;
+:deep(.el-dialog__header) {
+  border-bottom: 1px solid #a3ade0;
+}
+.my-header {
+  border-bottom: 1px solid #a3ade0;
+  font-size: 16px;
+  color: #1a2447;
+  .title {
+    padding-bottom: 15px;
+  }
+}
+.main {
+  display: flex;
+}
+:deep(.el-scrollbar) {
+  --el-scrollbar-bg-color: #7484ab;
+}
+.main-left {
+  width: 23%;
+  background-color: #f7f8fb;
+  .scrollbar-demo-item {
+    cursor: pointer;
+    width: 90%;
+    margin-left: 5%;
+    display: flex;
+    .ied-name {
+      width: 25%;
+    }
+  }
+}
+.main-right {
+  width: 75%;
+  display: flex;
+  flex-direction: column;
+}
+.main-right-item {
+  margin-top: 60px;
+  height: 65vh;
+  overflow-y: auto;
+}
+//设置导航栏样式
+.nav {
+  height: 40px;
+  @include mid-center;
+  .nav-item {
+    width: 144px;
+    height: $height;
+    @include mid-center;
+    margin-right: 8px;
+    cursor: pointer;
+    background: #fff url("~@/assets/image/instruct/navtop.png") no-repeat center;
+    background-size: 144px $height;
+  }
+  .nav-item-active {
+    background: #fff url("~@/assets/image/instruct/navtop_active.png") no-repeat
+      center;
+    color: #fff;
+    background-size: 144px $height;
+  }
+}
+.left-item-active {
+  color: #255ce7;
+}
+</style>

src/pages/netStructPicture/components/fixedEntry.vue

@@ -0,0 +1,15 @@
+<!-- 定值条目 -->
+<template>
+  <div>5</div>
+</template>
+<script setup>
+import { onMounted, watch, ref,nextTick,defineEmits } from "vue";
+const props = defineProps({
+  checkDialogData: {
+    type: Object,
+    default: () => {},
+  },
+});
+</script>
+<style scoped lang="scss">
+</style>

src/pages/netStructPicture/components/infoTable.vue

@@ -0,0 +1,15 @@
+<!-- 信息点表 -->
+<template>
+  <div>6</div>
+</template>
+<script setup>
+import { onMounted, watch, ref,nextTick,defineEmits } from "vue";
+const props = defineProps({
+  checkDialogData: {
+    type: Object,
+    default: () => {},
+  },
+});
+</script>
+<style scoped lang="scss">
+</style>

src/pages/netStructPicture/components/inoutControl.vue

@@ -0,0 +1,15 @@
+<!-- 输入输出控制块 -->
+<template>
+  <div>2</div>
+</template>
+<script setup>
+import { onMounted, watch, ref,nextTick,defineEmits } from "vue";
+const props = defineProps({
+  checkDialogData: {
+    type: Object,
+    default: () => {},
+  },
+});
+</script>
+<style scoped lang="scss">
+</style>

src/pages/netStructPicture/components/netWork.vue

@@ -7,8 +7,13 @@
             <!-- 父网络列表   上方的大类图标及小竖线 -->
             <section class="layout">
               <div class="mainNetwork">
-                <div class="networkItem" v-for="(item, index) in nodeInfoData" :key="index"
-                  :class="{ active: current == index }" @click="() => onChangeMain(index, item)">
+                <div
+                  class="networkItem"
+                  v-for="(item, index) in nodeInfoData"
+                  :key="index"
+                  :class="{ active: current == index }"
+                  @click="() => onChangeMain(index, item)"
+                >
                   <!-- 图片及图片上的名字 -->
                   <div class="topCont">
                     <div class="title">{{ item.attr_desc }}</div>
@@ -59,7 +64,10 @@
                       class="subNetworkMask"
                     ></span>
                   </span>
-                  <div class="subNetworkInfo">
+                  <div
+                    class="subNetworkInfo"
+                    @click="clickNetworkInfo(item.attr_ied_name)"
+                  >
                     <div class="subNetworkImg">
                       <img :src="tupian" alt="" />
                     </div>
@@ -67,7 +75,11 @@
                       {{ item.attr_desc }}
                     </div>
                     <div class="subNetworkName">{{ item.attr_ied_name }}</div>
-                    <div class="subNetworkID" v-for="(value, key) in item" :key="key">
+                    <div
+                      class="subNetworkID"
+                      v-for="(value, key) in item"
+                      :key="key"
+                    >
                       <span v-if="key.startsWith('node_value')">{{
                         value
                       }}</span>
@@ -103,17 +115,24 @@
       </el-container>
     </el-container>
   </div>
-  <div class="container-none" v-if="!loading&&!loadDating">
+  <div class="container-none" v-if="!loading && !loadDating">
     <img src="../../../assets/image/create.png" alt="" />
     无效的SCD 该SCD可能已被清理,需要重新分析!
   </div>
+  <dialog-index
+    :openBig="openBig"
+    @done="done"
+    :checkDialogData="checkDialogData"
+    :iedRelationData="iedRelationData"
+  ></dialog-index>
 </template>
     
   
 <script setup>
-import { computed, nextTick, onMounted, reactive, ref } from "vue";
-import { nodeList, iedNetaddr } from "@/api/iedNetwork";
+import { computed, nextTick, onMounted, reactive, ref} from "vue";
+import { nodeList, iedNetaddr, scdIedRelation } from "@/api/iedNetwork";
 import { useRoute } from "vue-router";
+import dialogIndex from "./dialogIndex.vue";
 const route = useRoute();
 const current = ref(0); //点击的大类
 const nodeInfoData = ref(null); //获取网络图的顶部列表
@@ -122,6 +141,7 @@ const flog = ref(false); //是否点击长横线
 const listCat = ref([]); //长横线的类型名称
 const ipNetaddrData = ref([]); //ip数据
 const loadDating = ref(false);
+const openBig = ref(false);
 //线条背景颜色
 const backColorList = ref([
   {
@@ -163,9 +183,8 @@ let nodeTreeInfo = null;
 const loading = ref(true);
 //获取网络图的顶部列表
 const getNetWork = async () => {
-  loading.value = false;
   const infoRes = await nodeList({
-    scd_id:216000060,
+    scd_id: 356000096,
     pagesize: 10000,
     name: "SubNetwork",
   });
@@ -175,7 +194,7 @@ const getNetWork = async () => {
     return;
   }
   nodeInfoData.value = infoRes.data;
-  if(nodeInfoData.value!=null) {
+  if (nodeInfoData.value != null) {
     getlist();
   }
   loading.value = false;
@@ -184,7 +203,7 @@ const allApData = ref({});
 const initLoad = async () => {
   allApData.value = {};
   const allAP = await nodeList({
-    scd_id: 216000060,
+    scd_id: 356000096,
     pagesize: 10000,
     name: "ConnectedAP",
   });
@@ -207,12 +226,12 @@ const initLoad = async () => {
     }
   }
   getNetWork();
-  ipNetaddr()
+  ipNetaddr();
   loadDating.value = true;
 };
 //处理重复的ip
 const ipNetaddr = async () => {
-  const ipRes = await iedNetaddr({ scd_id: 216000060 });
+  const ipRes = await iedNetaddr({ scd_id: 356000096 });
   if (ipRes.code == 1) {
     return;
   }
@@ -289,7 +308,7 @@ const getlist = () => {
     });
     //去重
     showAllAp.value = removeRepeat(handleAllAp.value);
-    ipShow()
+    ipShow();
   }
   var index = 0;
   handleAllAp.value.forEach((item, subindex) => {
@@ -360,7 +379,7 @@ publicRepeat.value = computed(() => {
 });
 onMounted(() => {
   initLoad();
-  ipNetaddr();
+  iedRelation();
 });
 
 const setinlineStyle = (data, dataCat) => {
@@ -497,10 +516,30 @@ const onChangeline = (val) => {
     });
   });
 };
+//弹窗=============
+const checkDialogData = ref(null);
+const done = (emits) => {
+  openBig.value = emits;
+  checkDialogData.value = []
+};
+const clickNetworkInfo = (value) => {
+  openBig.value = true;
+  Object.values(iedRelationData.value).find((item) => {
+    if (item.ied_name == value) {
+      checkDialogData.value = item;
+    }
+  });
+};
+
+const iedRelationData = ref([]);
+const iedRelation = async () => {
+  const iedRes = await scdIedRelation({ scd_id: 356000096 });
+  iedRelationData.value = iedRes.data;
+};
+//弹窗=============
 </script>
   
 <style scoped lang="scss">
-@import "~@/styles/home.scss";
 @import "~@/styles/struct.scss";
 .container-none {
   font-size: 18px;

src/pages/netStructPicture/components/relationShip.vue

@@ -0,0 +1,89 @@
+<template>
+  <!-- <div class="main-cont" ref="myElement">
+    <div class="main-left">
+      <img :src="devicePng" alt="" id="start" />
+      <img :src="devicePng" alt="" />
+      <img :src="devicePng" alt="" />
+    </div>
+    <div class="main-middle" ref="middleElement">
+      <img :src="devicePng" alt="" id="end" />
+    </div>
+    <div class="main-right">
+      <img :src="devicePng" alt="" /> <img :src="devicePng" alt="" /><img
+        :src="devicePng"
+        alt=""
+      />
+    </div>
+  </div> -->
+<div>
+  <div id="start">start</div>
+<div id="end" style="margin-left:200px">end</div>
+</div>
+</template>
+<script setup>
+import { onMounted, watch, ref, nextTick, defineEmits } from "vue";
+import devicePng from "@/assets/image/instruct/device.png";
+import LeaderLine from "../../../../public/leader-line.min.js"
+const props = defineProps({
+  checkDialogData: {
+    type: Object,
+    default: () => {},
+  },
+});
+const middleElement = ref(null);
+const myElement = ref(null);
+onMounted(() => {
+  const startElement = document.getElementById('start');  
+  const endElement = document.getElementById('end');  
+  // new LeaderLine(startElement, endElement);  
+  new LeaderLine(startElement, endElement, { color: 'gray', size: 2, path: "grid" })
+
+  nextTick(() => {
+  
+
+
+    // setTimeout(() => {
+    //   const heights = myElement.value.scrollHeight;
+    //   const eysHeigth = myElement.value.clientHeight;
+    //   if (heights > 550) {
+    //     console.log("heights", heights);
+    //     middleElement.value.style.marginTop = `${(heights - 160) / 2}px`; // 设置元素的垂直位置
+    //   } else {
+    //     middleElement.value.style.marginTop = `${heights / 3}px`; // 设置元素的垂直位置
+    //   }
+    // }, 0);
+  });
+});
+</script>
+<style scoped lang="scss">
+@mixin img-size {
+  width: 150px;
+  height: 90px;
+  margin-bottom: 40px;
+}
+@mixin left-and-right {
+  display: flex;
+  flex-direction: column;
+}
+.main-cont {
+  display: flex;
+  justify-content: space-evenly;
+}
+.main-left {
+  display: flex;
+  @include left-and-right;
+  & > img {
+    @include img-size;
+  }
+}
+.main-middle {
+  box-sizing: border-box;
+}
+.main-right {
+  display: flex;
+  @include left-and-right;
+  & > img {
+    @include img-size;
+  }
+}
+</style>

src/pages/netStructPicture/components/scdDialogIndex.vue

@@ -0,0 +1,104 @@
+<!-- 整个弹窗 -->
+<template>
+  <el-dialog
+    @close="cancelClick"
+    v-model="isOpen"
+    width="70vw"
+    append-to-body
+    draggable
+  >
+    <template #header>
+      <div class="my-header">
+        <div class="title">{{ props.checkLabel }}</div>
+      </div>
+    </template>
+    <el-scrollbar height="470px">
+      <div class="container">
+        <div
+          class="cont-item"
+          v-for="(item, index) in props.dialogData"
+          :key="index"
+        >
+          <img :src="devicePng" alt="" />
+          <div class="name">{{ item.ied_name }}</div>
+          <div class="desc">{{ item.desc }}</div>
+        </div>
+      </div>
+    </el-scrollbar>
+  </el-dialog>
+</template>
+<script setup>
+import {
+  getCurrentInstance,
+  onMounted,
+  reactive,
+  watch,
+  ref,
+  toRefs,
+  nextTick,
+} from "vue";
+import { defineEmits } from "vue";
+import devicePng from "@/assets/image/instruct/device.png";
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false,
+  },
+  dialogData: {
+    type: Object,
+    default: () => {},
+  },
+  checkLabel: {
+    type: String,
+    default: "",
+  },
+});
+const isOpen = ref(props.open);
+watch(
+  () => props.open,
+  (newValue) => {
+    isOpen.value = newValue;
+  }
+);
+const emit = defineEmits(["done", "update:visible"]);
+const cancelClick = () => {
+  isOpen.value = false;
+  emit("done", false);
+};
+
+// emit('done', data.id);
+// emit('update:visible', value);
+</script>
+<style scoped lang="scss">
+:deep(.el-dialog__header) {
+  border-bottom: 1px solid #a3ade0;
+}
+.my-header {
+  border-bottom: 1px solid #a3ade0;
+  font-size: 16px;
+  color: #1a2447;
+  .title {
+    padding-bottom: 15px;
+  }
+}
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  .cont-item {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    flex-wrap: wrap;
+    flex-basis: 20%;
+    margin-bottom: 15px;
+    cursor: pointer;
+  }
+  img {
+    widows: 65px;
+    height: 65px;
+  }
+  .desc {
+    color: #255ce7;
+  }
+}
+</style>

src/pages/netStructPicture/components/scdVisual.vue

@@ -0,0 +1,424 @@
+<template>
+  <div class="main">
+    <!-- 统计和搜索栏 -->
+    <div class="search-nav">
+      <el-form
+        :model="queryParams"
+        ref="queryRef"
+        :inline="true"
+        label-width="68px"
+      >
+        <el-form-item
+          ><div class="nav-item">
+            总计 <span>{{ count }}</span> 个设备
+          </div></el-form-item
+        >
+        <el-form-item label="电压等级" prop="voltage_level_id">
+          <el-select
+            ref="levelRef"
+            v-model="queryParams.voltage_level_id"
+            placeholder="请选择电压等级"
+            clearable
+            @change="changeLevel"
+          >
+            <el-option
+              v-for="dict in voltageLevel"
+              :key="dict.id"
+              :label="dict.name"
+              :value="dict.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="间隔" prop="area_id">
+          <el-select
+            ref="levelRef"
+            v-model="queryParams.area_id"
+            placeholder="请选择间隔"
+            @change="changeLevel"
+            clearable
+          >
+            <el-option
+              v-for="dict in areaData"
+              :key="dict.id"
+              :label="dict.name"
+              :value="dict.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备类型" prop="device_type_id">
+          <el-select
+            ref="levelRef"
+            v-model="queryParams.device_type_id"
+            placeholder="请选择设备类型"
+            @change="changeLevel"
+            clearable
+          >
+            <el-option
+              v-for="dict in iedTypeData"
+              :key="dict.code"
+              :label="dict.name"
+              :value="dict.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="快捷搜索" prop="iedrela">
+          <el-select
+            v-model="queryParams.iedrela"
+            placeholder="请输入IED编码或名称"
+            clearable
+            ref="selectRef"
+            @clear="showIedList = false"
+            v-if="showIedList"
+          >
+            <template #header>
+              <span class="search-header" v-if="searchIedList.length > 0">
+                为您找到 <span>{{ searchIedList.length }}</span> 个相关结果
+              </span>
+            </template>
+            <el-option
+              v-for="dict in searchIedList"
+              :key="dict.node_id"
+              :label="dict.desc"
+              :value="dict.node_id"
+            ></el-option>
+          </el-select>
+          <el-input
+            ref="selectInputRef"
+            v-model="queryParams.iedrela"
+            placeholder="请输入IED编码或名称"
+            clearable
+            @change="searchInput"
+            v-else
+          />
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-scrollbar height="54vh"  v-loading="loading" v-if="loadDating">
+      <div
+        v-for="(item, index) in voltageLevel"
+        :key="index"
+        style="padding-right: 10px"
+      >
+        <el-row class="contanier" v-if="item.id != 'alls'">
+          <el-col :span="3">
+            <div
+              :class="
+                item.levelData.length > 7 ? 'file_img' : 'file_img file_lim'
+              "
+            >
+              {{ item.name }}
+            </div>
+          </el-col>
+          <el-col :span="20" class="ied_item">
+            <div
+              class="ied_item_child"
+              v-for="(itemChild, indexChild) in item.levelData"
+              :key="indexChild"
+              @click="changeLevel(itemChild.id, itemChild.name)"
+            >
+              <el-tooltip
+                :content="itemChild.name"
+                effect="light"
+                placement="top"
+                ><div>{{ itemChild.name }}</div></el-tooltip
+              >
+              <img :src="scdIed" alt="" />
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-scrollbar>
+  </div>
+  <div class="container-none" v-if="!loading && !loadDating">
+    <img src="../../../assets/image/create.png" alt="" />
+    该变电站还未签入任何SCD文件!
+  </div>
+  <scd-dialog-index
+    :open="open"
+    @done="done"
+    :dialogData="dialogData"
+    :checkLabel="checkLabel"
+  ></scd-dialog-index>
+</template>
+<script setup>
+import {
+  getCurrentInstance,
+  onMounted,
+  reactive,
+  ref,
+  toRefs,
+  nextTick,
+} from "vue";
+import scdIed from "@/assets/image/instruct/scdIed.png";
+import {
+  iedTypelist,
+  areaList,
+  scdIedRelation,
+  areaIedList,
+} from "@/api/iedNetwork";
+import { useDataStore } from "@/store/modules/golbal-data";
+import scdDialogIndex from "./scdDialogIndex";
+const userStoreCode = useDataStore();
+const data = reactive({
+  queryParams: {
+    scd_id: 356000096,
+  },
+});
+const loading = ref(true);
+const loadDating = ref(false);
+const open = ref(false);
+const { queryParams } = toRefs(data);
+// 表单重置
+const reset = () => {
+  queryParams.value = {
+    scd_id: 356000096,
+    voltage_level_id: null, //电压等级
+    area_id: null, //间隔
+    device_type_id: null, //装置类型
+  };
+};
+
+const areaData = ref([]); //获取间隔
+const allLevel = ref([]); // 获取所有电压
+const all = [{ name: "全部", id: "alls" }];
+const allIedType = [{ name: "全部", code: "alls" }];
+const voltageLevel = ref([{ name: "全部", id: "alls" }]); //电压等级
+const areaType = ref([]);
+const getArea = async () => {
+  const areaRes = await areaList({ scd_id: 356000096 });
+  if (!areaRes.data) {
+    voltageLevel.value = [];
+    loading.value = false;
+    loadDating.value = false;
+    return;
+  }
+  loading.value = false;
+  areaData.value = [...all, ...areaRes.data]; //搜索处的间隔
+  //处理电压等级的搜索展示数据
+  const levelData = [
+    ...new Set(areaRes.data.map((itemlevel) => itemlevel.voltage_level)),
+  ];
+  levelData.forEach((myLevelItem) => {
+    const findData = allLevel.value.find((allItem) => {
+      return allItem.id == myLevelItem;
+    });
+    if (findData) {
+      voltageLevel.value.push(findData);
+    }
+  });
+  //处理主界面的数据展示
+  voltageLevel.value.forEach((item) => {
+    if (item.id == "alls") return;
+    item.levelData = [];
+    const findType = areaRes.data.filter((itemType) => {
+      return itemType.voltage_level == item.id;
+    });
+    if (findType) {
+      item.levelData.push(...findType);
+    }
+  });
+  loadDating.value = true;
+};
+
+//设备类型
+const iedTypeData = ref([]);
+const getTypelist = async () => {
+  const typeRes = await iedTypelist({ scd_id: 356000096 });
+  iedTypeData.value = typeRes.data ? [...allIedType, ...typeRes.data] : [];
+};
+const iedName = ref([]);
+const showIedList = ref(false);
+//搜索ied编码或名称
+const searchIedList = ref([]);
+const selectRef = ref(null);
+const searchInput = (value) => {
+  if (value && iedName.value) {
+    showIedList.value = true;
+    searchIedList.value = Object.values(iedName.value).filter((item) => {
+      const lowercaseValue = value.toLowerCase(); //不区分大小写
+      const iedNameLower = item.ied_name ? item.ied_name.toLowerCase() : null;
+      const descLower = item.desc ? item.desc.toLowerCase() : null;
+      return (
+        (iedNameLower !== null && iedNameLower.includes(lowercaseValue)) ||
+        (descLower !== null && descLower.includes(lowercaseValue))
+      );
+    });
+    // 选择框自动展开
+    nextTick(() => {
+      selectRef.value.toggleMenu();
+    });
+  } else {
+    showIedList.value = false;
+  }
+};
+const count = ref(0);
+const iedNameData = async () => {
+  //IED编码或名称
+  const iedRes = await scdIedRelation({ scd_id: 356000096 });
+  iedName.value = iedRes.data;
+  count.value = iedRes.count;
+};
+const done = (emits) => {
+  open.value = emits;
+  reset()
+  dialogData.value = [];
+};
+//选择电压
+const dialogData = ref([]);
+const levelRef = ref(null); //为了得到选中的label值
+const checkLabel = ref("");
+const changeLevel = async (value, mainValue) => {
+  nextTick(() => {
+    checkLabel.value = mainValue ? mainValue : levelRef.value.selectedLabel;
+  });
+  //如果选中的是当前选项,那么其他搜索框的内容应置为空
+  Object.keys(queryParams.value).forEach((item) => {
+    if (queryParams.value[item] !== value && item != "scd_id") {
+      queryParams.value[item] = null;
+    }
+  });
+  if (value == "alls") {
+    //全部
+    open.value = true;
+    dialogData.value = iedName.value;
+  } else if (value) {
+    const mainClick = { scd_id: 356000096, area_id: value };
+    const forms = mainValue ? mainClick : queryParams.value;
+    open.value = true;
+    dialogData.value = [];
+    //搜索的弹框内容
+    const searchLevel = await areaIedList(forms);
+    if (!searchLevel.data) return;
+    dialogData.value = Object.values(iedName.value).filter((item) => {
+      return searchLevel.data.some((levelItem) => {
+        return item.node_id == levelItem.ied_id;
+      });
+    });
+  }
+};
+onMounted(async () => {
+  iedNameData();
+  allLevel.value = await userStoreCode.GlobalCodes();
+  getArea();
+  getTypelist();
+});
+</script>
+<style scoped lang="scss">
+@mixin mid-center {
+  display: flex;
+  align-items: center;
+}
+.main {
+  margin: 40px;
+}
+.search-nav {
+  @include mid-center;
+  justify-content: center;
+  .nav-item {
+    color: #134bea;
+    font-size: 16px;
+    span {
+      color: #ffcb11;
+      font-size: 20px;
+    }
+  }
+  :deep(.el-form-item__label) {
+    color: #1a2447;
+    line-height: 40px;
+  }
+  :deep(.el-input) {
+    height: 40px;
+  }
+}
+.search-header {
+  display: flex;
+  justify-content: center;
+  span {
+    color: #134bea;
+    padding: 0 2px;
+  }
+}
+//主要内容版块
+.contanier {
+  background: #f6faff;
+  box-shadow: inset 0px 0px 11px 1px rgba(188, 207, 255, 0.78);
+  border-radius: 8px;
+  margin-bottom: 24px;
+  //   max-height: 320px;
+  @include mid-center;
+  overflow-y: auto;
+  .file_img {
+    @include mid-center;
+    justify-content: center;
+    background: url("~@/assets/image/instruct/file_back.png") no-repeat;
+    background-size: 144px;
+    width: 144px;
+    height: 144px;
+    margin: 24px;
+    font-size: 20px;
+    color: #1a2447;
+    font-weight: bold;
+    padding-top: 8px;
+  }
+  .file_lim {
+    background-size: 144px 80px;
+    width: 144px;
+    height: 80px;
+    font-size: 16px;
+  }
+  @media (max-width: 1220px) {
+    .file_img {
+      background-size: 100px;
+      width: 100px;
+      height: 100px;
+    }
+  }
+  .ied_item {
+    // margin: 0px 24px 10px 0;
+    margin: 24px;
+    margin-left: 0;
+    display: flex;
+    align-items: start;
+    flex-wrap: wrap;
+    .ied_item_child {
+      display: flex;
+      flex-basis: 14%;
+      flex-direction: column;
+      align-items: center;
+      font-size: 16px;
+      cursor: pointer;
+      div {
+        position: relative;
+        top: 10px;
+        display: -webkit-box;
+        /*弹性伸缩盒子模型显示*/
+        -webkit-box-orient: vertical;
+        /*排列方式*/
+        -webkit-line-clamp: 1;
+        /*显示文本行数*/
+        overflow: hidden;
+        /*溢出隐藏*/
+      }
+    }
+    .ied_item_child:hover div {
+      color: #255ce7;
+      font-weight: 600;
+    }
+    img {
+      width: 64px;
+      height: 64px;
+    }
+  }
+}
+.container-none {
+  font-size: 18px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  & > img {
+    width: 220px;
+    height: 220px;
+  }
+}
+</style>

src/pages/netStructPicture/components/soureFile.vue

@@ -0,0 +1,15 @@
+<!-- 源文件 -->
+<template>
+  <div>7</div>
+</template>
+<script setup>
+import { onMounted, watch, ref,nextTick,defineEmits } from "vue";
+const props = defineProps({
+  checkDialogData: {
+    type: Object,
+    default: () => {},
+  },
+});
+</script>
+<style scoped lang="scss">
+</style>

src/pages/netStructPicture/components/virtualRelation.vue

@@ -0,0 +1,15 @@
+<!-- 虚端子关系 -->
+<template>
+  <div>3</div>
+</template>
+<script setup>
+import { onMounted, watch, ref,nextTick,defineEmits } from "vue";
+const props = defineProps({
+  checkDialogData: {
+    type: Object,
+    default: () => {},
+  },
+});
+</script>
+<style scoped lang="scss">
+</style>

src/pages/netStructPicture/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tabs v-model="activeName" class="demo-tabs">
       <div class="nav">
         <div v-for="(item, index) in navtopData" :key="index" :class="{'nav-item-active':activeNav==index}" @click="clickNav(index)" class="nav-item">
           {{ item.name }}
@@ -9,7 +9,9 @@
       <el-tab-pane label="网络结构图" name="first">
         <net-work></net-work>
       </el-tab-pane>
-      <el-tab-pane label="SCD可视化" name="second">Config</el-tab-pane>
+      <el-tab-pane label="SCD可视化" name="second">
+        <scd-visual></scd-visual>
+      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
@@ -18,6 +20,7 @@
 <script setup>
 import { ref } from "vue";
 import netWork from "./components/netWork";
+import scdVisual from "./components/scdVisual";
 import { useRoute } from 'vue-router';
 const activeName = ref("first");//默认展示网络结构图
 const navtopData = ref([
@@ -72,6 +75,7 @@ $height:40px;
   .nav-item-active{
     background: #fff url("~@/assets/image/instruct/navtop_active.png") no-repeat center;
     background-size: 144px $height;
+    color: #fff;
   }
 }
 //最外层的滚动条不要

src/store/index.js

@@ -0,0 +1,6 @@
+/**
+ * pinia
+ */
+import { createPinia } from 'pinia';
+
+export default createPinia();

src/store/modules/golbal-data.js

@@ -0,0 +1,29 @@
+import { defineStore } from 'pinia';
+import { getGlobalCode ,scdIedRelation} from "@/api/iedNetwork";
+export const useDataStore = defineStore({
+  id: 'gobal',
+  state: () => ({
+    globalCode:[],
+    IeNameData:[]
+  }),
+  getters: {},
+  actions: {
+    //查询系统字典列表
+    async GlobalCodes() {
+        const result = await getGlobalCode({pcode:'voltage_level'}).catch(() => {});
+        if (!result) {
+          return {};
+        }
+        return result.data
+        // this.globalCode = result.data
+    },
+    //IE编码或名称
+    async scdIedRelation(id) {
+        const result = await scdIedRelation({scd_id:id})
+        if (!result) {
+            return {};
+        }
+        return result
+    }
+  }
+});

src/styles/index.scss

@@ -17,4 +17,4 @@
   }
   ::-webkit-scrollbar-corner {
     background: transparent;
-  }
+  }

src/styles/struct.scss

@@ -1,3 +1,4 @@
+//网络结构图所有的css
 .network-wrap .layout {
 	padding: 2px 50px;
 }

src/utils/request.js

@@ -68,7 +68,6 @@ service.interceptors.request.use(
 // 响应拦截
 service.interceptors.response.use(
     response => {
-        console.log(response,'响应拦截器res');
         let res = response.data
         return res
     },