diff --git a/package-lock.json b/package-lock.json
index 194a73a..5b0cf78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "cesium": "^1.117.0",
         "echarts": "^5.2.2",
         "esbuild-windows-64": "^0.14.11",
+        "gsap": "^3.9.1",
         "highcharts": "^9.3.2",
         "hls.js": "^1.5.13",
         "import-three-examples": "^2.2.4",
@@ -1080,12 +1081,14 @@
     "node_modules/@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -2731,6 +2734,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "node_modules/gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5401,15 +5409,13 @@
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz",
       "integrity": "sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@css-render/vue3-ssr": {
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz",
       "integrity": "sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@emotion/hash": {
       "version": "0.8.0",
@@ -5841,12 +5847,14 @@
     "@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "requires": {
         "@types/lodash": "*"
       }
@@ -5963,8 +5971,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz",
       "integrity": "sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "1.3.10",
@@ -6167,32 +6174,27 @@
     "@wangeditor/editor-for-vue": {
       "version": "5.1.12",
       "resolved": "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-5.1.12.tgz",
-      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==",
-      "requires": {}
+      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ=="
     },
     "@wangeditor/list-module": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.2.tgz",
-      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg==",
-      "requires": {}
+      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg=="
     },
     "@wangeditor/table-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.1.tgz",
-      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA==",
-      "requires": {}
+      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA=="
     },
     "@wangeditor/upload-image-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz",
-      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w==",
-      "requires": {}
+      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w=="
     },
     "@wangeditor/video-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.1.tgz",
-      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg==",
-      "requires": {}
+      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg=="
     },
     "@xmldom/xmldom": {
       "version": "0.8.10",
@@ -6523,8 +6525,7 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.4.tgz",
       "integrity": "sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "debug": {
       "version": "4.3.4",
@@ -7034,6 +7035,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -7451,8 +7457,7 @@
     "lodash-unified": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-      "requires": {}
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7894,8 +7899,7 @@
         "vue-demi": {
           "version": "0.13.5",
           "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.5.tgz",
-          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==",
-          "requires": {}
+          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
         }
       }
     },

diff --git a/package-lock.json b/package-lock.json
index 194a73a..5b0cf78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "cesium": "^1.117.0",
         "echarts": "^5.2.2",
         "esbuild-windows-64": "^0.14.11",
+        "gsap": "^3.9.1",
         "highcharts": "^9.3.2",
         "hls.js": "^1.5.13",
         "import-three-examples": "^2.2.4",
@@ -1080,12 +1081,14 @@
     "node_modules/@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -2731,6 +2734,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "node_modules/gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5401,15 +5409,13 @@
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz",
       "integrity": "sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@css-render/vue3-ssr": {
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz",
       "integrity": "sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@emotion/hash": {
       "version": "0.8.0",
@@ -5841,12 +5847,14 @@
     "@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "requires": {
         "@types/lodash": "*"
       }
@@ -5963,8 +5971,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz",
       "integrity": "sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "1.3.10",
@@ -6167,32 +6174,27 @@
     "@wangeditor/editor-for-vue": {
       "version": "5.1.12",
       "resolved": "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-5.1.12.tgz",
-      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==",
-      "requires": {}
+      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ=="
     },
     "@wangeditor/list-module": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.2.tgz",
-      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg==",
-      "requires": {}
+      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg=="
     },
     "@wangeditor/table-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.1.tgz",
-      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA==",
-      "requires": {}
+      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA=="
     },
     "@wangeditor/upload-image-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz",
-      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w==",
-      "requires": {}
+      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w=="
     },
     "@wangeditor/video-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.1.tgz",
-      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg==",
-      "requires": {}
+      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg=="
     },
     "@xmldom/xmldom": {
       "version": "0.8.10",
@@ -6523,8 +6525,7 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.4.tgz",
       "integrity": "sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "debug": {
       "version": "4.3.4",
@@ -7034,6 +7035,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -7451,8 +7457,7 @@
     "lodash-unified": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-      "requires": {}
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7894,8 +7899,7 @@
         "vue-demi": {
           "version": "0.13.5",
           "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.5.tgz",
-          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==",
-          "requires": {}
+          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
         }
       }
     },
diff --git a/package.json b/package.json
index a096642..0f3893d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "cesium": "^1.117.0",
     "echarts": "^5.2.2",
     "esbuild-windows-64": "^0.14.11",
+    "gsap": "^3.9.1",
     "highcharts": "^9.3.2",
     "hls.js": "^1.5.13",
     "import-three-examples": "^2.2.4",

diff --git a/package-lock.json b/package-lock.json
index 194a73a..5b0cf78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "cesium": "^1.117.0",
         "echarts": "^5.2.2",
         "esbuild-windows-64": "^0.14.11",
+        "gsap": "^3.9.1",
         "highcharts": "^9.3.2",
         "hls.js": "^1.5.13",
         "import-three-examples": "^2.2.4",
@@ -1080,12 +1081,14 @@
     "node_modules/@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -2731,6 +2734,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "node_modules/gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5401,15 +5409,13 @@
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz",
       "integrity": "sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@css-render/vue3-ssr": {
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz",
       "integrity": "sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@emotion/hash": {
       "version": "0.8.0",
@@ -5841,12 +5847,14 @@
     "@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "requires": {
         "@types/lodash": "*"
       }
@@ -5963,8 +5971,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz",
       "integrity": "sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "1.3.10",
@@ -6167,32 +6174,27 @@
     "@wangeditor/editor-for-vue": {
       "version": "5.1.12",
       "resolved": "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-5.1.12.tgz",
-      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==",
-      "requires": {}
+      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ=="
     },
     "@wangeditor/list-module": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.2.tgz",
-      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg==",
-      "requires": {}
+      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg=="
     },
     "@wangeditor/table-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.1.tgz",
-      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA==",
-      "requires": {}
+      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA=="
     },
     "@wangeditor/upload-image-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz",
-      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w==",
-      "requires": {}
+      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w=="
     },
     "@wangeditor/video-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.1.tgz",
-      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg==",
-      "requires": {}
+      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg=="
     },
     "@xmldom/xmldom": {
       "version": "0.8.10",
@@ -6523,8 +6525,7 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.4.tgz",
       "integrity": "sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "debug": {
       "version": "4.3.4",
@@ -7034,6 +7035,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -7451,8 +7457,7 @@
     "lodash-unified": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-      "requires": {}
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7894,8 +7899,7 @@
         "vue-demi": {
           "version": "0.13.5",
           "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.5.tgz",
-          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==",
-          "requires": {}
+          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
         }
       }
     },
diff --git a/package.json b/package.json
index a096642..0f3893d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "cesium": "^1.117.0",
     "echarts": "^5.2.2",
     "esbuild-windows-64": "^0.14.11",
+    "gsap": "^3.9.1",
     "highcharts": "^9.3.2",
     "hls.js": "^1.5.13",
     "import-three-examples": "^2.2.4",
diff --git a/src/pages/views/WatershedOneMap/OneMapModal.vue b/src/pages/views/WatershedOneMap/OneMapModal.vue
index b4f4e48..861db2b 100644
--- a/src/pages/views/WatershedOneMap/OneMapModal.vue
+++ b/src/pages/views/WatershedOneMap/OneMapModal.vue
@@ -94,13 +94,41 @@
     <n-modal v-model:show="showModalBZ" :show-icon="false" :mask-closable="false" preset="dialog" :title="BZtitle" style="width: 680px">
       <BengZModal :valueModalbz="valueModalbz" />
     </n-modal>
+
+    <div class="mask" v-if="maskcbwsc">
+      <div id="ShowBox">
+        <div class="ShowBoxname">后湖泵站模型</div>
+        <n-icon @click.stop="ShowInfo" size="40">
+          <Close />
+        </n-icon>
+      </div>
+      <cbwsc> </cbwsc>
+      <div class="bengji">
+        <div id="lableBox" class="lableBox">
+          <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id">
+            <div class="outer">
+              <div class="title">{{ item.name }}</div>
+              <ul>
+                <li v-for="(v, j) in item.data" :key="j">
+                  <span class="pointName">{{ v.pointName }}</span>
+                  <span class="value">{{ v.value }}</span>
+                </li>
+              </ul>
+              <div class="triangle"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Hls from 'hls.js';
 import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
+import { Close } from '@vicons/ionicons5';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import cbwsc from './modalPart/cbwsc.vue'; //三维
 import BengZModal from './modalPart/modal/BengZModal.vue'; //湖泊监测弹窗
 import MapBox from './modalPart/Mapbox.vue';
 import OnePart from './modalPart/natureNet.vue'; //全域感知
@@ -128,11 +156,178 @@
     Legend,
     Vue3SeamlessScroll,
     BengZModal,
+    cbwsc,
+    Close,
   },
   setup() {
     let hls = null;
     let hls1 = null;
     const allData = reactive({
+      labelData: [
+        {
+          name: '1#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '开',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '2#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '3#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '4#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '5#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '6#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '--HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '--A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '--V',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      maskcbwsc: false,
       indexCode: '',
       indexCode1: '',
       videoname: '',
@@ -158,7 +353,7 @@
       dateNumber: 0,
       timer: null,
       ifPlay: false,
-      currentVal: '全域感知',
+      currentVal: '规划引领',
       datearry: [],
       dateTime: [],
       dateLine: formatDate(Date.now() - 24 * 30 * 60 * 60 * 1000, 'YYYY-MM-DD'),
@@ -545,6 +740,9 @@
         hls1.destroy();
       }
     };
+    const ShowInfo = () => {
+      allData.maskcbwsc = false;
+    };
     onMounted(() => {
       // getFooterList();
       // 设置视频监控默认显示的code
@@ -558,6 +756,9 @@
       bus.on('datelist', (e) => {
         allData.datearry = e;
       });
+      bus.on('weather', (e) => {
+        allData.maskcbwsc = true;
+      });
       // 控制播放雨量图例显示
       bus.on('ifQixiang', (e) => {
         if (e) {
@@ -618,6 +819,8 @@
         hls1.destroy();
       }
       clearTimer();
+
+      bus.off('weather');
       bus.off('getGongYt');
       bus.off('ifQixiang');
       bus.off('ifStationWarn');
@@ -639,12 +842,13 @@
       bfvideo,
       bfvideo1,
       handleModalChange,
+      ShowInfo,
     };
   },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .dialogGYT {
   display: flex;
   .imgs {
@@ -840,4 +1044,88 @@
   left: 10px;
   bottom: 5px;
 }
+.mask {
+  position: fixed;
+  width: calc(100% - 100px);
+  margin: 0 50px;
+  height: calc(92vh - 10px);
+  background-color: rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: 20px;
+  z-index: 999999999;
+  // position: fixed;
+  // width: 200px;
+  // height: 200px;
+  // background-color: rgba(0, 0, 0, 0.5);
+  // right: 400px;
+  // bottom: 0;
+  // z-index: 999999999;
+  .bengji {
+    position: relative;
+    bottom: 145px;
+    width: 60%;
+    left: 20%;
+    right: 20%;
+    .lableBox {
+      display: flex;
+      height: 100%;
+    }
+    .label {
+      display: flex;
+      padding: 10px;
+      z-index: 9999 !important;
+      width: 200px;
+
+      .title {
+        line-height: 30px;
+        font-size: 14px;
+        padding: 0 10px;
+        border-bottom: 1px solid #e7f1ff;
+        color: turquoise;
+      }
+
+      ul {
+        li {
+          padding: 0 10px;
+          line-height: 26px;
+          display: flex;
+          justify-content: space-between;
+
+          &:nth-child(2n) {
+            background: #e7f1ff;
+          }
+
+          .pointName {
+            color: #888;
+          }
+
+          .value {
+            color: #0066ff;
+          }
+        }
+      }
+
+      .outer {
+        top: 0;
+        left: 0;
+        width: 140px;
+        border-radius: 10px;
+        box-shadow: -2px 0 20px #0060ff;
+        background: rgba(255, 255, 255, 0.712);
+      }
+    }
+  }
+  #ShowBox {
+    display: flex;
+    justify-content: space-between;
+    color: #ffffff;
+    margin-left: 20px;
+    cursor: pointer;
+    .ShowBoxname {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
 </style>

diff --git a/package-lock.json b/package-lock.json
index 194a73a..5b0cf78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "cesium": "^1.117.0",
         "echarts": "^5.2.2",
         "esbuild-windows-64": "^0.14.11",
+        "gsap": "^3.9.1",
         "highcharts": "^9.3.2",
         "hls.js": "^1.5.13",
         "import-three-examples": "^2.2.4",
@@ -1080,12 +1081,14 @@
     "node_modules/@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -2731,6 +2734,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "node_modules/gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5401,15 +5409,13 @@
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz",
       "integrity": "sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@css-render/vue3-ssr": {
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz",
       "integrity": "sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@emotion/hash": {
       "version": "0.8.0",
@@ -5841,12 +5847,14 @@
     "@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "requires": {
         "@types/lodash": "*"
       }
@@ -5963,8 +5971,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz",
       "integrity": "sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "1.3.10",
@@ -6167,32 +6174,27 @@
     "@wangeditor/editor-for-vue": {
       "version": "5.1.12",
       "resolved": "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-5.1.12.tgz",
-      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==",
-      "requires": {}
+      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ=="
     },
     "@wangeditor/list-module": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.2.tgz",
-      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg==",
-      "requires": {}
+      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg=="
     },
     "@wangeditor/table-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.1.tgz",
-      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA==",
-      "requires": {}
+      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA=="
     },
     "@wangeditor/upload-image-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz",
-      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w==",
-      "requires": {}
+      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w=="
     },
     "@wangeditor/video-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.1.tgz",
-      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg==",
-      "requires": {}
+      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg=="
     },
     "@xmldom/xmldom": {
       "version": "0.8.10",
@@ -6523,8 +6525,7 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.4.tgz",
       "integrity": "sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "debug": {
       "version": "4.3.4",
@@ -7034,6 +7035,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -7451,8 +7457,7 @@
     "lodash-unified": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-      "requires": {}
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7894,8 +7899,7 @@
         "vue-demi": {
           "version": "0.13.5",
           "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.5.tgz",
-          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==",
-          "requires": {}
+          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
         }
       }
     },
diff --git a/package.json b/package.json
index a096642..0f3893d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "cesium": "^1.117.0",
     "echarts": "^5.2.2",
     "esbuild-windows-64": "^0.14.11",
+    "gsap": "^3.9.1",
     "highcharts": "^9.3.2",
     "hls.js": "^1.5.13",
     "import-three-examples": "^2.2.4",
diff --git a/src/pages/views/WatershedOneMap/OneMapModal.vue b/src/pages/views/WatershedOneMap/OneMapModal.vue
index b4f4e48..861db2b 100644
--- a/src/pages/views/WatershedOneMap/OneMapModal.vue
+++ b/src/pages/views/WatershedOneMap/OneMapModal.vue
@@ -94,13 +94,41 @@
     <n-modal v-model:show="showModalBZ" :show-icon="false" :mask-closable="false" preset="dialog" :title="BZtitle" style="width: 680px">
       <BengZModal :valueModalbz="valueModalbz" />
     </n-modal>
+
+    <div class="mask" v-if="maskcbwsc">
+      <div id="ShowBox">
+        <div class="ShowBoxname">后湖泵站模型</div>
+        <n-icon @click.stop="ShowInfo" size="40">
+          <Close />
+        </n-icon>
+      </div>
+      <cbwsc> </cbwsc>
+      <div class="bengji">
+        <div id="lableBox" class="lableBox">
+          <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id">
+            <div class="outer">
+              <div class="title">{{ item.name }}</div>
+              <ul>
+                <li v-for="(v, j) in item.data" :key="j">
+                  <span class="pointName">{{ v.pointName }}</span>
+                  <span class="value">{{ v.value }}</span>
+                </li>
+              </ul>
+              <div class="triangle"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Hls from 'hls.js';
 import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
+import { Close } from '@vicons/ionicons5';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import cbwsc from './modalPart/cbwsc.vue'; //三维
 import BengZModal from './modalPart/modal/BengZModal.vue'; //湖泊监测弹窗
 import MapBox from './modalPart/Mapbox.vue';
 import OnePart from './modalPart/natureNet.vue'; //全域感知
@@ -128,11 +156,178 @@
     Legend,
     Vue3SeamlessScroll,
     BengZModal,
+    cbwsc,
+    Close,
   },
   setup() {
     let hls = null;
     let hls1 = null;
     const allData = reactive({
+      labelData: [
+        {
+          name: '1#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '开',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '2#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '3#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '4#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '5#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '6#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '--HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '--A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '--V',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      maskcbwsc: false,
       indexCode: '',
       indexCode1: '',
       videoname: '',
@@ -158,7 +353,7 @@
       dateNumber: 0,
       timer: null,
       ifPlay: false,
-      currentVal: '全域感知',
+      currentVal: '规划引领',
       datearry: [],
       dateTime: [],
       dateLine: formatDate(Date.now() - 24 * 30 * 60 * 60 * 1000, 'YYYY-MM-DD'),
@@ -545,6 +740,9 @@
         hls1.destroy();
       }
     };
+    const ShowInfo = () => {
+      allData.maskcbwsc = false;
+    };
     onMounted(() => {
       // getFooterList();
       // 设置视频监控默认显示的code
@@ -558,6 +756,9 @@
       bus.on('datelist', (e) => {
         allData.datearry = e;
       });
+      bus.on('weather', (e) => {
+        allData.maskcbwsc = true;
+      });
       // 控制播放雨量图例显示
       bus.on('ifQixiang', (e) => {
         if (e) {
@@ -618,6 +819,8 @@
         hls1.destroy();
       }
       clearTimer();
+
+      bus.off('weather');
       bus.off('getGongYt');
       bus.off('ifQixiang');
       bus.off('ifStationWarn');
@@ -639,12 +842,13 @@
       bfvideo,
       bfvideo1,
       handleModalChange,
+      ShowInfo,
     };
   },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .dialogGYT {
   display: flex;
   .imgs {
@@ -840,4 +1044,88 @@
   left: 10px;
   bottom: 5px;
 }
+.mask {
+  position: fixed;
+  width: calc(100% - 100px);
+  margin: 0 50px;
+  height: calc(92vh - 10px);
+  background-color: rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: 20px;
+  z-index: 999999999;
+  // position: fixed;
+  // width: 200px;
+  // height: 200px;
+  // background-color: rgba(0, 0, 0, 0.5);
+  // right: 400px;
+  // bottom: 0;
+  // z-index: 999999999;
+  .bengji {
+    position: relative;
+    bottom: 145px;
+    width: 60%;
+    left: 20%;
+    right: 20%;
+    .lableBox {
+      display: flex;
+      height: 100%;
+    }
+    .label {
+      display: flex;
+      padding: 10px;
+      z-index: 9999 !important;
+      width: 200px;
+
+      .title {
+        line-height: 30px;
+        font-size: 14px;
+        padding: 0 10px;
+        border-bottom: 1px solid #e7f1ff;
+        color: turquoise;
+      }
+
+      ul {
+        li {
+          padding: 0 10px;
+          line-height: 26px;
+          display: flex;
+          justify-content: space-between;
+
+          &:nth-child(2n) {
+            background: #e7f1ff;
+          }
+
+          .pointName {
+            color: #888;
+          }
+
+          .value {
+            color: #0066ff;
+          }
+        }
+      }
+
+      .outer {
+        top: 0;
+        left: 0;
+        width: 140px;
+        border-radius: 10px;
+        box-shadow: -2px 0 20px #0060ff;
+        background: rgba(255, 255, 255, 0.712);
+      }
+    }
+  }
+  #ShowBox {
+    display: flex;
+    justify-content: space-between;
+    color: #ffffff;
+    margin-left: 20px;
+    cursor: pointer;
+    .ShowBoxname {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/Popup.vue b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
index 77eea0d..46a5863 100644
--- a/src/pages/views/WatershedOneMap/modalPart/Popup.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
@@ -102,6 +102,9 @@
         <div class="part gongyt" v-if="popupInfo.url">
           <div class="value" @click.stop="checkGyt(popupInfo)">查看工艺图</div>
         </div>
+        <div class="part" style="cursor: pointer" v-if="popupInfo.name.includes('后湖泵站')">
+          <div class="name" @click.stop="handlesweath()">查看模型</div>
+        </div>
         <!-- 雨量站、雨量计历史数据 -->
         <div class="part" v-show="popupInfo.name.includes('雨量站')">
           <div class="name" style="width: 100%">降雨历史数据:</div>
@@ -220,6 +223,10 @@
     async function checkGyt(popupInfo) {
       bus.emit('getGongYt', popupInfo);
     }
+
+    const handlesweath = (data) => {
+      bus.emit('weather', data);
+    };
     // 降雨历史数据
     const echartRain = async () => {
       let chart = document.getElementById('echartHistory');
@@ -297,6 +304,7 @@
       ...toRefs(allData),
       closepopupdefect,
       checkGyt,
+      handlesweath,
     };
   },
 });

diff --git a/package-lock.json b/package-lock.json
index 194a73a..5b0cf78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "cesium": "^1.117.0",
         "echarts": "^5.2.2",
         "esbuild-windows-64": "^0.14.11",
+        "gsap": "^3.9.1",
         "highcharts": "^9.3.2",
         "hls.js": "^1.5.13",
         "import-three-examples": "^2.2.4",
@@ -1080,12 +1081,14 @@
     "node_modules/@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -2731,6 +2734,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "node_modules/gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5401,15 +5409,13 @@
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz",
       "integrity": "sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@css-render/vue3-ssr": {
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz",
       "integrity": "sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@emotion/hash": {
       "version": "0.8.0",
@@ -5841,12 +5847,14 @@
     "@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "requires": {
         "@types/lodash": "*"
       }
@@ -5963,8 +5971,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz",
       "integrity": "sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "1.3.10",
@@ -6167,32 +6174,27 @@
     "@wangeditor/editor-for-vue": {
       "version": "5.1.12",
       "resolved": "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-5.1.12.tgz",
-      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==",
-      "requires": {}
+      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ=="
     },
     "@wangeditor/list-module": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.2.tgz",
-      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg==",
-      "requires": {}
+      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg=="
     },
     "@wangeditor/table-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.1.tgz",
-      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA==",
-      "requires": {}
+      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA=="
     },
     "@wangeditor/upload-image-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz",
-      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w==",
-      "requires": {}
+      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w=="
     },
     "@wangeditor/video-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.1.tgz",
-      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg==",
-      "requires": {}
+      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg=="
     },
     "@xmldom/xmldom": {
       "version": "0.8.10",
@@ -6523,8 +6525,7 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.4.tgz",
       "integrity": "sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "debug": {
       "version": "4.3.4",
@@ -7034,6 +7035,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -7451,8 +7457,7 @@
     "lodash-unified": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-      "requires": {}
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7894,8 +7899,7 @@
         "vue-demi": {
           "version": "0.13.5",
           "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.5.tgz",
-          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==",
-          "requires": {}
+          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
         }
       }
     },
diff --git a/package.json b/package.json
index a096642..0f3893d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "cesium": "^1.117.0",
     "echarts": "^5.2.2",
     "esbuild-windows-64": "^0.14.11",
+    "gsap": "^3.9.1",
     "highcharts": "^9.3.2",
     "hls.js": "^1.5.13",
     "import-three-examples": "^2.2.4",
diff --git a/src/pages/views/WatershedOneMap/OneMapModal.vue b/src/pages/views/WatershedOneMap/OneMapModal.vue
index b4f4e48..861db2b 100644
--- a/src/pages/views/WatershedOneMap/OneMapModal.vue
+++ b/src/pages/views/WatershedOneMap/OneMapModal.vue
@@ -94,13 +94,41 @@
     <n-modal v-model:show="showModalBZ" :show-icon="false" :mask-closable="false" preset="dialog" :title="BZtitle" style="width: 680px">
       <BengZModal :valueModalbz="valueModalbz" />
     </n-modal>
+
+    <div class="mask" v-if="maskcbwsc">
+      <div id="ShowBox">
+        <div class="ShowBoxname">后湖泵站模型</div>
+        <n-icon @click.stop="ShowInfo" size="40">
+          <Close />
+        </n-icon>
+      </div>
+      <cbwsc> </cbwsc>
+      <div class="bengji">
+        <div id="lableBox" class="lableBox">
+          <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id">
+            <div class="outer">
+              <div class="title">{{ item.name }}</div>
+              <ul>
+                <li v-for="(v, j) in item.data" :key="j">
+                  <span class="pointName">{{ v.pointName }}</span>
+                  <span class="value">{{ v.value }}</span>
+                </li>
+              </ul>
+              <div class="triangle"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Hls from 'hls.js';
 import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
+import { Close } from '@vicons/ionicons5';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import cbwsc from './modalPart/cbwsc.vue'; //三维
 import BengZModal from './modalPart/modal/BengZModal.vue'; //湖泊监测弹窗
 import MapBox from './modalPart/Mapbox.vue';
 import OnePart from './modalPart/natureNet.vue'; //全域感知
@@ -128,11 +156,178 @@
     Legend,
     Vue3SeamlessScroll,
     BengZModal,
+    cbwsc,
+    Close,
   },
   setup() {
     let hls = null;
     let hls1 = null;
     const allData = reactive({
+      labelData: [
+        {
+          name: '1#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '开',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '2#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '3#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '4#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '5#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '6#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '--HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '--A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '--V',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      maskcbwsc: false,
       indexCode: '',
       indexCode1: '',
       videoname: '',
@@ -158,7 +353,7 @@
       dateNumber: 0,
       timer: null,
       ifPlay: false,
-      currentVal: '全域感知',
+      currentVal: '规划引领',
       datearry: [],
       dateTime: [],
       dateLine: formatDate(Date.now() - 24 * 30 * 60 * 60 * 1000, 'YYYY-MM-DD'),
@@ -545,6 +740,9 @@
         hls1.destroy();
       }
     };
+    const ShowInfo = () => {
+      allData.maskcbwsc = false;
+    };
     onMounted(() => {
       // getFooterList();
       // 设置视频监控默认显示的code
@@ -558,6 +756,9 @@
       bus.on('datelist', (e) => {
         allData.datearry = e;
       });
+      bus.on('weather', (e) => {
+        allData.maskcbwsc = true;
+      });
       // 控制播放雨量图例显示
       bus.on('ifQixiang', (e) => {
         if (e) {
@@ -618,6 +819,8 @@
         hls1.destroy();
       }
       clearTimer();
+
+      bus.off('weather');
       bus.off('getGongYt');
       bus.off('ifQixiang');
       bus.off('ifStationWarn');
@@ -639,12 +842,13 @@
       bfvideo,
       bfvideo1,
       handleModalChange,
+      ShowInfo,
     };
   },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .dialogGYT {
   display: flex;
   .imgs {
@@ -840,4 +1044,88 @@
   left: 10px;
   bottom: 5px;
 }
+.mask {
+  position: fixed;
+  width: calc(100% - 100px);
+  margin: 0 50px;
+  height: calc(92vh - 10px);
+  background-color: rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: 20px;
+  z-index: 999999999;
+  // position: fixed;
+  // width: 200px;
+  // height: 200px;
+  // background-color: rgba(0, 0, 0, 0.5);
+  // right: 400px;
+  // bottom: 0;
+  // z-index: 999999999;
+  .bengji {
+    position: relative;
+    bottom: 145px;
+    width: 60%;
+    left: 20%;
+    right: 20%;
+    .lableBox {
+      display: flex;
+      height: 100%;
+    }
+    .label {
+      display: flex;
+      padding: 10px;
+      z-index: 9999 !important;
+      width: 200px;
+
+      .title {
+        line-height: 30px;
+        font-size: 14px;
+        padding: 0 10px;
+        border-bottom: 1px solid #e7f1ff;
+        color: turquoise;
+      }
+
+      ul {
+        li {
+          padding: 0 10px;
+          line-height: 26px;
+          display: flex;
+          justify-content: space-between;
+
+          &:nth-child(2n) {
+            background: #e7f1ff;
+          }
+
+          .pointName {
+            color: #888;
+          }
+
+          .value {
+            color: #0066ff;
+          }
+        }
+      }
+
+      .outer {
+        top: 0;
+        left: 0;
+        width: 140px;
+        border-radius: 10px;
+        box-shadow: -2px 0 20px #0060ff;
+        background: rgba(255, 255, 255, 0.712);
+      }
+    }
+  }
+  #ShowBox {
+    display: flex;
+    justify-content: space-between;
+    color: #ffffff;
+    margin-left: 20px;
+    cursor: pointer;
+    .ShowBoxname {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/Popup.vue b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
index 77eea0d..46a5863 100644
--- a/src/pages/views/WatershedOneMap/modalPart/Popup.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
@@ -102,6 +102,9 @@
         <div class="part gongyt" v-if="popupInfo.url">
           <div class="value" @click.stop="checkGyt(popupInfo)">查看工艺图</div>
         </div>
+        <div class="part" style="cursor: pointer" v-if="popupInfo.name.includes('后湖泵站')">
+          <div class="name" @click.stop="handlesweath()">查看模型</div>
+        </div>
         <!-- 雨量站、雨量计历史数据 -->
         <div class="part" v-show="popupInfo.name.includes('雨量站')">
           <div class="name" style="width: 100%">降雨历史数据:</div>
@@ -220,6 +223,10 @@
     async function checkGyt(popupInfo) {
       bus.emit('getGongYt', popupInfo);
     }
+
+    const handlesweath = (data) => {
+      bus.emit('weather', data);
+    };
     // 降雨历史数据
     const echartRain = async () => {
       let chart = document.getElementById('echartHistory');
@@ -297,6 +304,7 @@
       ...toRefs(allData),
       closepopupdefect,
       checkGyt,
+      handlesweath,
     };
   },
 });
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
new file mode 100644
index 0000000..993d0af
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
@@ -0,0 +1,599 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('/modelFilesJson/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    // const hdr = '/modelFilesJson/three_glb/kloppenheim_061_4k.hdr';
+    const hdr = './static/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+
+    // 标注水位
+
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      // initModal('wushuichang', '/modelFiles/three_glb/3.gltf');
+      // initModal('wushuichang', 'public/static/three_glb/3.gltf');
+    });
+    onMounted(() => {
+      initModal('wushuichang', './static/three_glb/3.gltf');
+      // initModal('wushuichang', '/modelFilesJson/three_glb/3.gltf');
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+        }
+        // document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>

diff --git a/package-lock.json b/package-lock.json
index 194a73a..5b0cf78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "cesium": "^1.117.0",
         "echarts": "^5.2.2",
         "esbuild-windows-64": "^0.14.11",
+        "gsap": "^3.9.1",
         "highcharts": "^9.3.2",
         "hls.js": "^1.5.13",
         "import-three-examples": "^2.2.4",
@@ -1080,12 +1081,14 @@
     "node_modules/@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -2731,6 +2734,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "node_modules/gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5401,15 +5409,13 @@
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz",
       "integrity": "sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@css-render/vue3-ssr": {
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz",
       "integrity": "sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@emotion/hash": {
       "version": "0.8.0",
@@ -5841,12 +5847,14 @@
     "@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "requires": {
         "@types/lodash": "*"
       }
@@ -5963,8 +5971,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz",
       "integrity": "sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "1.3.10",
@@ -6167,32 +6174,27 @@
     "@wangeditor/editor-for-vue": {
       "version": "5.1.12",
       "resolved": "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-5.1.12.tgz",
-      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==",
-      "requires": {}
+      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ=="
     },
     "@wangeditor/list-module": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.2.tgz",
-      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg==",
-      "requires": {}
+      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg=="
     },
     "@wangeditor/table-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.1.tgz",
-      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA==",
-      "requires": {}
+      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA=="
     },
     "@wangeditor/upload-image-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz",
-      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w==",
-      "requires": {}
+      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w=="
     },
     "@wangeditor/video-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.1.tgz",
-      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg==",
-      "requires": {}
+      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg=="
     },
     "@xmldom/xmldom": {
       "version": "0.8.10",
@@ -6523,8 +6525,7 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.4.tgz",
       "integrity": "sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "debug": {
       "version": "4.3.4",
@@ -7034,6 +7035,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -7451,8 +7457,7 @@
     "lodash-unified": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-      "requires": {}
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7894,8 +7899,7 @@
         "vue-demi": {
           "version": "0.13.5",
           "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.5.tgz",
-          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==",
-          "requires": {}
+          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
         }
       }
     },
diff --git a/package.json b/package.json
index a096642..0f3893d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "cesium": "^1.117.0",
     "echarts": "^5.2.2",
     "esbuild-windows-64": "^0.14.11",
+    "gsap": "^3.9.1",
     "highcharts": "^9.3.2",
     "hls.js": "^1.5.13",
     "import-three-examples": "^2.2.4",
diff --git a/src/pages/views/WatershedOneMap/OneMapModal.vue b/src/pages/views/WatershedOneMap/OneMapModal.vue
index b4f4e48..861db2b 100644
--- a/src/pages/views/WatershedOneMap/OneMapModal.vue
+++ b/src/pages/views/WatershedOneMap/OneMapModal.vue
@@ -94,13 +94,41 @@
     <n-modal v-model:show="showModalBZ" :show-icon="false" :mask-closable="false" preset="dialog" :title="BZtitle" style="width: 680px">
       <BengZModal :valueModalbz="valueModalbz" />
     </n-modal>
+
+    <div class="mask" v-if="maskcbwsc">
+      <div id="ShowBox">
+        <div class="ShowBoxname">后湖泵站模型</div>
+        <n-icon @click.stop="ShowInfo" size="40">
+          <Close />
+        </n-icon>
+      </div>
+      <cbwsc> </cbwsc>
+      <div class="bengji">
+        <div id="lableBox" class="lableBox">
+          <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id">
+            <div class="outer">
+              <div class="title">{{ item.name }}</div>
+              <ul>
+                <li v-for="(v, j) in item.data" :key="j">
+                  <span class="pointName">{{ v.pointName }}</span>
+                  <span class="value">{{ v.value }}</span>
+                </li>
+              </ul>
+              <div class="triangle"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Hls from 'hls.js';
 import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
+import { Close } from '@vicons/ionicons5';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import cbwsc from './modalPart/cbwsc.vue'; //三维
 import BengZModal from './modalPart/modal/BengZModal.vue'; //湖泊监测弹窗
 import MapBox from './modalPart/Mapbox.vue';
 import OnePart from './modalPart/natureNet.vue'; //全域感知
@@ -128,11 +156,178 @@
     Legend,
     Vue3SeamlessScroll,
     BengZModal,
+    cbwsc,
+    Close,
   },
   setup() {
     let hls = null;
     let hls1 = null;
     const allData = reactive({
+      labelData: [
+        {
+          name: '1#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '开',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '2#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '3#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '4#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '5#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '6#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '--HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '--A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '--V',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      maskcbwsc: false,
       indexCode: '',
       indexCode1: '',
       videoname: '',
@@ -158,7 +353,7 @@
       dateNumber: 0,
       timer: null,
       ifPlay: false,
-      currentVal: '全域感知',
+      currentVal: '规划引领',
       datearry: [],
       dateTime: [],
       dateLine: formatDate(Date.now() - 24 * 30 * 60 * 60 * 1000, 'YYYY-MM-DD'),
@@ -545,6 +740,9 @@
         hls1.destroy();
       }
     };
+    const ShowInfo = () => {
+      allData.maskcbwsc = false;
+    };
     onMounted(() => {
       // getFooterList();
       // 设置视频监控默认显示的code
@@ -558,6 +756,9 @@
       bus.on('datelist', (e) => {
         allData.datearry = e;
       });
+      bus.on('weather', (e) => {
+        allData.maskcbwsc = true;
+      });
       // 控制播放雨量图例显示
       bus.on('ifQixiang', (e) => {
         if (e) {
@@ -618,6 +819,8 @@
         hls1.destroy();
       }
       clearTimer();
+
+      bus.off('weather');
       bus.off('getGongYt');
       bus.off('ifQixiang');
       bus.off('ifStationWarn');
@@ -639,12 +842,13 @@
       bfvideo,
       bfvideo1,
       handleModalChange,
+      ShowInfo,
     };
   },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .dialogGYT {
   display: flex;
   .imgs {
@@ -840,4 +1044,88 @@
   left: 10px;
   bottom: 5px;
 }
+.mask {
+  position: fixed;
+  width: calc(100% - 100px);
+  margin: 0 50px;
+  height: calc(92vh - 10px);
+  background-color: rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: 20px;
+  z-index: 999999999;
+  // position: fixed;
+  // width: 200px;
+  // height: 200px;
+  // background-color: rgba(0, 0, 0, 0.5);
+  // right: 400px;
+  // bottom: 0;
+  // z-index: 999999999;
+  .bengji {
+    position: relative;
+    bottom: 145px;
+    width: 60%;
+    left: 20%;
+    right: 20%;
+    .lableBox {
+      display: flex;
+      height: 100%;
+    }
+    .label {
+      display: flex;
+      padding: 10px;
+      z-index: 9999 !important;
+      width: 200px;
+
+      .title {
+        line-height: 30px;
+        font-size: 14px;
+        padding: 0 10px;
+        border-bottom: 1px solid #e7f1ff;
+        color: turquoise;
+      }
+
+      ul {
+        li {
+          padding: 0 10px;
+          line-height: 26px;
+          display: flex;
+          justify-content: space-between;
+
+          &:nth-child(2n) {
+            background: #e7f1ff;
+          }
+
+          .pointName {
+            color: #888;
+          }
+
+          .value {
+            color: #0066ff;
+          }
+        }
+      }
+
+      .outer {
+        top: 0;
+        left: 0;
+        width: 140px;
+        border-radius: 10px;
+        box-shadow: -2px 0 20px #0060ff;
+        background: rgba(255, 255, 255, 0.712);
+      }
+    }
+  }
+  #ShowBox {
+    display: flex;
+    justify-content: space-between;
+    color: #ffffff;
+    margin-left: 20px;
+    cursor: pointer;
+    .ShowBoxname {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/Popup.vue b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
index 77eea0d..46a5863 100644
--- a/src/pages/views/WatershedOneMap/modalPart/Popup.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
@@ -102,6 +102,9 @@
         <div class="part gongyt" v-if="popupInfo.url">
           <div class="value" @click.stop="checkGyt(popupInfo)">查看工艺图</div>
         </div>
+        <div class="part" style="cursor: pointer" v-if="popupInfo.name.includes('后湖泵站')">
+          <div class="name" @click.stop="handlesweath()">查看模型</div>
+        </div>
         <!-- 雨量站、雨量计历史数据 -->
         <div class="part" v-show="popupInfo.name.includes('雨量站')">
           <div class="name" style="width: 100%">降雨历史数据:</div>
@@ -220,6 +223,10 @@
     async function checkGyt(popupInfo) {
       bus.emit('getGongYt', popupInfo);
     }
+
+    const handlesweath = (data) => {
+      bus.emit('weather', data);
+    };
     // 降雨历史数据
     const echartRain = async () => {
       let chart = document.getElementById('echartHistory');
@@ -297,6 +304,7 @@
       ...toRefs(allData),
       closepopupdefect,
       checkGyt,
+      handlesweath,
     };
   },
 });
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
new file mode 100644
index 0000000..993d0af
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
@@ -0,0 +1,599 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('/modelFilesJson/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    // const hdr = '/modelFilesJson/three_glb/kloppenheim_061_4k.hdr';
+    const hdr = './static/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+
+    // 标注水位
+
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      // initModal('wushuichang', '/modelFiles/three_glb/3.gltf');
+      // initModal('wushuichang', 'public/static/three_glb/3.gltf');
+    });
+    onMounted(() => {
+      initModal('wushuichang', './static/three_glb/3.gltf');
+      // initModal('wushuichang', '/modelFilesJson/three_glb/3.gltf');
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+        }
+        // document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
new file mode 100644
index 0000000..8b4cac2
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
@@ -0,0 +1,652 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('modelFiles/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    const hdr = 'modelFiles/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+    const meshOnClick = (event) => {
+      let raycaster = new THREE.Raycaster();
+      const pointer = new THREE.Vector2();
+      console.log(event.clientX, event.clientY);
+      let Top = 60,
+        Left = 60;
+      pointer.x = ((event.clientX - Left) / state.width) * 2 - 1;
+      pointer.y = -((event.clientY - Top) / state.height) * 2 + 1;
+      raycaster.setFromCamera(pointer, state.Camera);
+      let intersects = raycaster.intersectObjects(state.granaryArr, true);
+      console.log(intersects);
+      console.log('------', state.Camera.position);
+      if (intersects.length > 0) {
+        console.log(intersects[0].object);
+      } else {
+        console.log('NoNoNo');
+      }
+    };
+    // 标注水位
+    const createWaterLevel = () => {
+      let info = {
+        name: 'text',
+        text: ' 水位: 0.5M ',
+        fontsize: 30,
+        Color: 'green',
+        backgroundColor: 'rgba(0,0,0,0)',
+        position: { x: 2, y: 10, z: 0 },
+        fillRect: { x: 0, y: 0, w: 300, h: 60 },
+        // rotateY: -180,
+      };
+      let canvas = document.createElement('canvas');
+      let ctx = canvas.getContext('2d');
+      //制作矩形
+      ctx.fillStyle = info.backgroundColor;
+      ctx.fillRect(info.fillRect.x, info.fillRect.y, info.fillRect.w, info.fillRect.h);
+      //设置文字
+      ctx.fillStyle = info.Color;
+      ctx.font = `normal ${info.fontsize}px "楷体"`;
+      let textWord = info.text;
+      ctx.fillText(textWord, 10, 40);
+      //生成图片
+      let url = canvas.toDataURL('image/png');
+      //将图片构建到纹理中
+      let geometry1 = new THREE.PlaneGeometry(20, 10);
+      let texture = THREE.ImageUtils.loadTexture(url, null, function (t) {});
+
+      let material1 = new THREE.MeshBasicMaterial({
+        map: texture,
+        side: THREE.DoubleSide,
+        opacity: 1,
+        transparent: true,
+      });
+      let rect = new THREE.Mesh(geometry1, material1);
+      rect.name = info.name;
+      rect.position.set(info.position.x, info.position.y, info.position.z);
+      // rect.rotateY(info.rotateY);
+      Scene.add(rect);
+    };
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+      document.addEventListener('click', meshOnClick);
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      //   initModal('wushuichang', 'modelFiles/three_glb/3.gltf');
+      initModal('wushuichang', 'public/static/three_glb/ChangJing-comp.gltf');
+    });
+    onMounted(() => {
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+          // createWaterLevel();
+        }
+        document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+      document.removeEventListener('click', meshOnClick);
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+      meshOnClick,
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>

diff --git a/package-lock.json b/package-lock.json
index 194a73a..5b0cf78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "cesium": "^1.117.0",
         "echarts": "^5.2.2",
         "esbuild-windows-64": "^0.14.11",
+        "gsap": "^3.9.1",
         "highcharts": "^9.3.2",
         "hls.js": "^1.5.13",
         "import-three-examples": "^2.2.4",
@@ -1080,12 +1081,14 @@
     "node_modules/@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -2731,6 +2734,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "node_modules/gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5401,15 +5409,13 @@
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz",
       "integrity": "sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@css-render/vue3-ssr": {
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz",
       "integrity": "sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@emotion/hash": {
       "version": "0.8.0",
@@ -5841,12 +5847,14 @@
     "@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "requires": {
         "@types/lodash": "*"
       }
@@ -5963,8 +5971,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz",
       "integrity": "sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "1.3.10",
@@ -6167,32 +6174,27 @@
     "@wangeditor/editor-for-vue": {
       "version": "5.1.12",
       "resolved": "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-5.1.12.tgz",
-      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==",
-      "requires": {}
+      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ=="
     },
     "@wangeditor/list-module": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.2.tgz",
-      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg==",
-      "requires": {}
+      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg=="
     },
     "@wangeditor/table-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.1.tgz",
-      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA==",
-      "requires": {}
+      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA=="
     },
     "@wangeditor/upload-image-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz",
-      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w==",
-      "requires": {}
+      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w=="
     },
     "@wangeditor/video-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.1.tgz",
-      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg==",
-      "requires": {}
+      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg=="
     },
     "@xmldom/xmldom": {
       "version": "0.8.10",
@@ -6523,8 +6525,7 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.4.tgz",
       "integrity": "sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "debug": {
       "version": "4.3.4",
@@ -7034,6 +7035,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -7451,8 +7457,7 @@
     "lodash-unified": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-      "requires": {}
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7894,8 +7899,7 @@
         "vue-demi": {
           "version": "0.13.5",
           "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.5.tgz",
-          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==",
-          "requires": {}
+          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
         }
       }
     },
diff --git a/package.json b/package.json
index a096642..0f3893d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "cesium": "^1.117.0",
     "echarts": "^5.2.2",
     "esbuild-windows-64": "^0.14.11",
+    "gsap": "^3.9.1",
     "highcharts": "^9.3.2",
     "hls.js": "^1.5.13",
     "import-three-examples": "^2.2.4",
diff --git a/src/pages/views/WatershedOneMap/OneMapModal.vue b/src/pages/views/WatershedOneMap/OneMapModal.vue
index b4f4e48..861db2b 100644
--- a/src/pages/views/WatershedOneMap/OneMapModal.vue
+++ b/src/pages/views/WatershedOneMap/OneMapModal.vue
@@ -94,13 +94,41 @@
     <n-modal v-model:show="showModalBZ" :show-icon="false" :mask-closable="false" preset="dialog" :title="BZtitle" style="width: 680px">
       <BengZModal :valueModalbz="valueModalbz" />
     </n-modal>
+
+    <div class="mask" v-if="maskcbwsc">
+      <div id="ShowBox">
+        <div class="ShowBoxname">后湖泵站模型</div>
+        <n-icon @click.stop="ShowInfo" size="40">
+          <Close />
+        </n-icon>
+      </div>
+      <cbwsc> </cbwsc>
+      <div class="bengji">
+        <div id="lableBox" class="lableBox">
+          <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id">
+            <div class="outer">
+              <div class="title">{{ item.name }}</div>
+              <ul>
+                <li v-for="(v, j) in item.data" :key="j">
+                  <span class="pointName">{{ v.pointName }}</span>
+                  <span class="value">{{ v.value }}</span>
+                </li>
+              </ul>
+              <div class="triangle"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Hls from 'hls.js';
 import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
+import { Close } from '@vicons/ionicons5';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import cbwsc from './modalPart/cbwsc.vue'; //三维
 import BengZModal from './modalPart/modal/BengZModal.vue'; //湖泊监测弹窗
 import MapBox from './modalPart/Mapbox.vue';
 import OnePart from './modalPart/natureNet.vue'; //全域感知
@@ -128,11 +156,178 @@
     Legend,
     Vue3SeamlessScroll,
     BengZModal,
+    cbwsc,
+    Close,
   },
   setup() {
     let hls = null;
     let hls1 = null;
     const allData = reactive({
+      labelData: [
+        {
+          name: '1#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '开',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '2#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '3#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '4#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '5#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '6#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '--HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '--A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '--V',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      maskcbwsc: false,
       indexCode: '',
       indexCode1: '',
       videoname: '',
@@ -158,7 +353,7 @@
       dateNumber: 0,
       timer: null,
       ifPlay: false,
-      currentVal: '全域感知',
+      currentVal: '规划引领',
       datearry: [],
       dateTime: [],
       dateLine: formatDate(Date.now() - 24 * 30 * 60 * 60 * 1000, 'YYYY-MM-DD'),
@@ -545,6 +740,9 @@
         hls1.destroy();
       }
     };
+    const ShowInfo = () => {
+      allData.maskcbwsc = false;
+    };
     onMounted(() => {
       // getFooterList();
       // 设置视频监控默认显示的code
@@ -558,6 +756,9 @@
       bus.on('datelist', (e) => {
         allData.datearry = e;
       });
+      bus.on('weather', (e) => {
+        allData.maskcbwsc = true;
+      });
       // 控制播放雨量图例显示
       bus.on('ifQixiang', (e) => {
         if (e) {
@@ -618,6 +819,8 @@
         hls1.destroy();
       }
       clearTimer();
+
+      bus.off('weather');
       bus.off('getGongYt');
       bus.off('ifQixiang');
       bus.off('ifStationWarn');
@@ -639,12 +842,13 @@
       bfvideo,
       bfvideo1,
       handleModalChange,
+      ShowInfo,
     };
   },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .dialogGYT {
   display: flex;
   .imgs {
@@ -840,4 +1044,88 @@
   left: 10px;
   bottom: 5px;
 }
+.mask {
+  position: fixed;
+  width: calc(100% - 100px);
+  margin: 0 50px;
+  height: calc(92vh - 10px);
+  background-color: rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: 20px;
+  z-index: 999999999;
+  // position: fixed;
+  // width: 200px;
+  // height: 200px;
+  // background-color: rgba(0, 0, 0, 0.5);
+  // right: 400px;
+  // bottom: 0;
+  // z-index: 999999999;
+  .bengji {
+    position: relative;
+    bottom: 145px;
+    width: 60%;
+    left: 20%;
+    right: 20%;
+    .lableBox {
+      display: flex;
+      height: 100%;
+    }
+    .label {
+      display: flex;
+      padding: 10px;
+      z-index: 9999 !important;
+      width: 200px;
+
+      .title {
+        line-height: 30px;
+        font-size: 14px;
+        padding: 0 10px;
+        border-bottom: 1px solid #e7f1ff;
+        color: turquoise;
+      }
+
+      ul {
+        li {
+          padding: 0 10px;
+          line-height: 26px;
+          display: flex;
+          justify-content: space-between;
+
+          &:nth-child(2n) {
+            background: #e7f1ff;
+          }
+
+          .pointName {
+            color: #888;
+          }
+
+          .value {
+            color: #0066ff;
+          }
+        }
+      }
+
+      .outer {
+        top: 0;
+        left: 0;
+        width: 140px;
+        border-radius: 10px;
+        box-shadow: -2px 0 20px #0060ff;
+        background: rgba(255, 255, 255, 0.712);
+      }
+    }
+  }
+  #ShowBox {
+    display: flex;
+    justify-content: space-between;
+    color: #ffffff;
+    margin-left: 20px;
+    cursor: pointer;
+    .ShowBoxname {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/Popup.vue b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
index 77eea0d..46a5863 100644
--- a/src/pages/views/WatershedOneMap/modalPart/Popup.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
@@ -102,6 +102,9 @@
         <div class="part gongyt" v-if="popupInfo.url">
           <div class="value" @click.stop="checkGyt(popupInfo)">查看工艺图</div>
         </div>
+        <div class="part" style="cursor: pointer" v-if="popupInfo.name.includes('后湖泵站')">
+          <div class="name" @click.stop="handlesweath()">查看模型</div>
+        </div>
         <!-- 雨量站、雨量计历史数据 -->
         <div class="part" v-show="popupInfo.name.includes('雨量站')">
           <div class="name" style="width: 100%">降雨历史数据:</div>
@@ -220,6 +223,10 @@
     async function checkGyt(popupInfo) {
       bus.emit('getGongYt', popupInfo);
     }
+
+    const handlesweath = (data) => {
+      bus.emit('weather', data);
+    };
     // 降雨历史数据
     const echartRain = async () => {
       let chart = document.getElementById('echartHistory');
@@ -297,6 +304,7 @@
       ...toRefs(allData),
       closepopupdefect,
       checkGyt,
+      handlesweath,
     };
   },
 });
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
new file mode 100644
index 0000000..993d0af
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
@@ -0,0 +1,599 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('/modelFilesJson/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    // const hdr = '/modelFilesJson/three_glb/kloppenheim_061_4k.hdr';
+    const hdr = './static/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+
+    // 标注水位
+
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      // initModal('wushuichang', '/modelFiles/three_glb/3.gltf');
+      // initModal('wushuichang', 'public/static/three_glb/3.gltf');
+    });
+    onMounted(() => {
+      initModal('wushuichang', './static/three_glb/3.gltf');
+      // initModal('wushuichang', '/modelFilesJson/three_glb/3.gltf');
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+        }
+        // document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
new file mode 100644
index 0000000..8b4cac2
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
@@ -0,0 +1,652 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('modelFiles/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    const hdr = 'modelFiles/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+    const meshOnClick = (event) => {
+      let raycaster = new THREE.Raycaster();
+      const pointer = new THREE.Vector2();
+      console.log(event.clientX, event.clientY);
+      let Top = 60,
+        Left = 60;
+      pointer.x = ((event.clientX - Left) / state.width) * 2 - 1;
+      pointer.y = -((event.clientY - Top) / state.height) * 2 + 1;
+      raycaster.setFromCamera(pointer, state.Camera);
+      let intersects = raycaster.intersectObjects(state.granaryArr, true);
+      console.log(intersects);
+      console.log('------', state.Camera.position);
+      if (intersects.length > 0) {
+        console.log(intersects[0].object);
+      } else {
+        console.log('NoNoNo');
+      }
+    };
+    // 标注水位
+    const createWaterLevel = () => {
+      let info = {
+        name: 'text',
+        text: ' 水位: 0.5M ',
+        fontsize: 30,
+        Color: 'green',
+        backgroundColor: 'rgba(0,0,0,0)',
+        position: { x: 2, y: 10, z: 0 },
+        fillRect: { x: 0, y: 0, w: 300, h: 60 },
+        // rotateY: -180,
+      };
+      let canvas = document.createElement('canvas');
+      let ctx = canvas.getContext('2d');
+      //制作矩形
+      ctx.fillStyle = info.backgroundColor;
+      ctx.fillRect(info.fillRect.x, info.fillRect.y, info.fillRect.w, info.fillRect.h);
+      //设置文字
+      ctx.fillStyle = info.Color;
+      ctx.font = `normal ${info.fontsize}px "楷体"`;
+      let textWord = info.text;
+      ctx.fillText(textWord, 10, 40);
+      //生成图片
+      let url = canvas.toDataURL('image/png');
+      //将图片构建到纹理中
+      let geometry1 = new THREE.PlaneGeometry(20, 10);
+      let texture = THREE.ImageUtils.loadTexture(url, null, function (t) {});
+
+      let material1 = new THREE.MeshBasicMaterial({
+        map: texture,
+        side: THREE.DoubleSide,
+        opacity: 1,
+        transparent: true,
+      });
+      let rect = new THREE.Mesh(geometry1, material1);
+      rect.name = info.name;
+      rect.position.set(info.position.x, info.position.y, info.position.z);
+      // rect.rotateY(info.rotateY);
+      Scene.add(rect);
+    };
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+      document.addEventListener('click', meshOnClick);
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      //   initModal('wushuichang', 'modelFiles/three_glb/3.gltf');
+      initModal('wushuichang', 'public/static/three_glb/ChangJing-comp.gltf');
+    });
+    onMounted(() => {
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+          // createWaterLevel();
+        }
+        document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+      document.removeEventListener('click', meshOnClick);
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+      meshOnClick,
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
index 4383d0d..dd36bc9 100644
--- a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
@@ -1,304 +1,374 @@
 <template>
-  <div id="emergency_video">
-    <div id="videoBox">
-      <!-- <div id="left_listBox" >
-        <div class="videoTable">
-          <n-tree
-            :data="treesData"
-            v-if="treesData.length"
-            :node-props="checkCamera"
-            block-line
-            :default-expanded-keys="defaultExpandedKeys"
-          />
-        </div>
-      </div> -->
-      <div id="right_videoWindow" v-if="showVideo">
-        <!-- 视频盒子 -->
-        <div id="playVideoNow" v-if="showVideo" class="videobox2"></div>
-      </div>
-    </div>
+  <div id="index">
+    <div ref="playWnd" :id="containerId" class="playWnd" v-html="AllData.oWebControl === null ? AllData.playText : ''"></div>
   </div>
 </template>
 
-<script>
-import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import { getCameraTree } from '@/services';
+<script setup name="index">
+import { ref, reactive, toRefs, onMounted } from 'vue';
+const props = defineProps({
+  // 内网、公网 4个配置
+  appkey: {
+    type: String,
+    default: () => '25124952',
+  },
+  secret: {
+    type: String,
+    default: () => 'aJOYWAt8CJabjjA1Ekeq',
+  },
+  ip: {
+    type: String,
+    default: () => '113.57.101.104',
+  },
+  port: {
+    type: Number,
+    default: () => 8888,
+  },
+  // 视频布局
+  layout: {
+    type: String,
+    default: () => '1x1',
+  },
+  // 初始播放模式：0-预览，1-回放
+  playMode: {
+    type: Number,
+    default: () => 0,
+  },
+  // 是否显示工具栏，0-不显示，非0-显示
+  showToolbar: {
+    type: Number,
+    default: () => 1,
+  },
+  // 工具栏按钮
+  toolBarButtonIDs: {
+    type: String,
+    default: () => '4098,4097',
+  },
+  // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
+  showSmart: {
+    type: Number,
+    default: () => 1,
+  },
+  // 自定义工具条按钮
+  buttonIDs: {
+    type: String,
+    default: () => '0,16,256,257,258,259,512,260,515,516,517,768,769',
+  },
+  // 相机编号
+  cameraIndexCode: {
+    type: [String, Number],
+  },
+  // 视频播放容器id
+  containerId: {
+    type: String,
+    default: () => 'playWnd',
+  },
+  // 默认打开的视频
+  defaultList: {
+    type: Array,
+    default: () => [],
+  },
+});
 
-export default {
-  name: 'emergency_video',
-  components: {},
-  setup() {
-    const allData = reactive({
-      showVideo: true,
-      constIndex: 1,
-      oWebControl: null,
-      plugKey: '',
-      Count: 0,
-      ifFirstTime: true,
-      videoWidth: 1400,
-      videoHeight: 750,
-      defaultExpandedKeys: ['root000000'], //默认展开节点
-      defaultCode: '', //默认监控点
-      showVideos: {
-        cameraIndexCode: 'e4a8bcca3393494bbdc9f2da087875bb', // 默认监控点编号
-        streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-        transMode: 1, // 传输协议：0-UDP，1-TCP
-        gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-        wndId: 1, // 播放窗口序号
-      },
-      treesData: [
-        {
-          label: '0',
-          key: '0',
-          click: false,
-          children: [
-            {
-              label: '组1',
-              key: '1-0',
-              click: false,
-              children: [
-                {
-                  label: '铁路桥',
-                  key: 'cf99e49a50f641ba83832dd5ebff3fa5',
-                  click: true,
-                },
-                {
-                  label: '王家墩',
-                  key: '4097ade6e64142d7ac7adff80b4617f0',
-                  click: true,
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    });
-    // 获取摄像头列表
-    const getVideoList = async () => {
-      allData.treesData = [];
-      let res = await getCameraTree();
-      if (res && res.code == 200) {
-        let datas = res.data;
-        // allData.defaultExpandedKeys.push(datas[0].key);
-        allData.treesData = datas;
+const AllData = reactive({
+  oWebControl: null,
+  plugKey: '',
+  // 视频相关参数
+  videoParams: {
+    cameraIndexCode: '', //监控点编号
+    streamMode: 0, //主子码流标识：0-主码流，1-子码流
+    transMode: 1, //传输协议：0-UDP，1-TCP
+    gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
+    wndId: 1, //播放窗口序号
+  },
+  videoWidth: null,
+  videoHeight: null,
+  playText: '启动中...',
+  initCount: 0, // 启动次数
+  href: '',
+});
+// 视频容器的ref对象
+const playWnd = ref(null);
+
+// 监听视频编码的改变(单个视频编码)
+watch(
+  () => props.cameraIndexCode,
+  (val) => {
+    if (props.cameraIndexCode) {
+      AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+      AllData.videoParams.wndId = -1;
+      if (AllData.oWebControl) {
+        previewVideo();
+      } else {
+        createdVideo();
       }
-    };
-    // 选择树结构的摄像头
-    const checkCamera = ({ option }) => {
-      return {
-        onClick() {
-          if (allData.showVideo != true) {
-            allData.showVideo = true;
-            allData.constIndex = 1;
-          } else {
-            allData.constIndex = -1;
-          }
-          console.log('option---', option);
-          // 只有子节点点击才能查看视频
-          if (option.click) {
-            allData.ifFirstTime = false;
-            allData.showVideos = {
-              cameraIndexCode: option.key, // 监控点编号
-              streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-              transMode: 1, // 传输协议：0-UDP，1-TCP
-              gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-              wndId: allData.constIndex, // 播放窗口序号
-            };
-            initVideo(allData.oWebControl);
-          }
-        },
-      };
-    };
-    /* 创建插件实例 */
-    function initPlugin() {
-      const dll = { dllPath: './VideoPluginConnect.dll' };
-      allData.oWebControl = new WebControl({
-        szPluginContainer: 'playVideoNow', // 指定容器id
-        iServicePortStart: 15900,
-        iServicePortEnd: 15909,
-        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    }
+  }
+);
+// 监听视频编码数组的改变(批量视频编码)
+watch(
+  () => props.defaultList,
+  (val) => {
+    if (props.defaultList.length > 0) {
+      PiLiangpreviewVideo();
+    }
+  }
+);
+// 监听布局修改
+watch(
+  () => props.layout,
+  (val) => {
+    setLayoutFunc();
+  }
+);
 
-        cbConnectSuccess: () => {
-          allData.oWebControl.JS_StartService('window', dll).then(() => {
-            // 设置视频 web 插件消息回调
-            allData.oWebControl.JS_SetWindowControlCallback({
-              cbIntegrationCallBack: (msg) => {
-                //注：不能使用外部函数调用，无效
-                if (msg?.responseMsg?.msg?.result) {
-                  const { result } = msg.responseMsg.msg;
-                  if (result == 1024) {
-                    allData.oWebControl.JS_HideWnd(); //放大隐藏其它视频窗口
-                  } else if (result == 1025) {
-                    allData.oWebControl.JS_ShowWnd(); //缩小显示全部窗口
-                  }
-                }
-              },
-            });
-            // 启动插件服务成功
-            allData.oWebControl.JS_CreateWnd('playVideoNow', allData.videoWidth, allData.videoHeight).then(() => {
-              // JS_CreateWnd创建视频播放窗口，宽高可设定
-              initVideo(allData.oWebControl); // 创建播放实例成功后初始化
-              console.log('启动插件成功！');
-            });
+// 创建播放实例
+const initPlugin = (callback) => {
+  AllData.oWebControl = new WebControl({
+    szPluginContainer: props.containerId, // 指定容器id
+    iServicePortStart: 15900,
+    iServicePortEnd: 15909,
+    szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    // 创建WebControl实例成功
+    cbConnectSuccess: () => {
+      AllData.oWebControl
+        .JS_StartService('window', {
+          // WebControl实例创建成功后需要启动服务
+          dllPath: './VideoPluginConnect.dll',
+        })
+        .then(() => {
+          // 启动插件服务成功
+          AllData.oWebControl.JS_SetWindowControlCallback({
+            // 设置消息回调
+            cbIntegrationCallBack: cbIntegrationCallBack,
           });
-        },
-        // 插件服务启动失败，弹框提示
-        cbConnectError: () => {
-          allData.oWebControl = null;
+          AllData.oWebControl.JS_CreateWnd(props.containerId, AllData.videoWidth, AllData.videoHeight).then(() => {
+            getVersion(callback);
+          });
+        });
+    },
+    cbConnectError: () => {
+      // 创建WebControl实例失败
+      AllData.oWebControl = null;
+      AllData.playText = '插件未启动，正在尝试启动，请稍候...';
+      WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
+      AllData.initCount++;
+      if (AllData.initCount < 3) {
+        setTimeout(() => {
+          initPlugin();
+        }, 3000);
+      } else {
+        AllData.playText = `
+              插件启动失败，请检查插件是否安装！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+      }
+    },
+    cbConnectClose: () => {
+      AllData.oWebControl = null;
+    },
+  });
+};
 
-          allData.Count++;
-          if (allData.Count < 2) {
-            WebControl.JS_WakeUp('VideoWebPlugin://');
-            setTimeout(() => {
-              initPlugin();
-            }, 8000);
-          } else {
-          }
-          console.log('创建插件失败');
-        },
-      });
-    }
-    /* 获取公钥 */
-    function initVideo(oWebControl) {
-      const params = {
-        funcName: 'getRSAPubKey',
-        argument: JSON.stringify({ keyLength: 1024 }),
-      };
-      oWebControl.JS_RequestInterface(params).then((res) => {
-        if (res.responseMsg.data) {
-          allData.plugKey = res.responseMsg.data;
-          getVideoConfig(oWebControl);
-        }
-      });
-    }
-    /* 视频插件配置  插件初始化 */
-    function getVideoConfig(oWebControl) {
-      const configObj = {
+// HK插件控制监听的消息回调
+const cbIntegrationCallBack = (oData) => {
+  console.log(oData);
+  if (oData.responseMsg.type == 6) {
+    // 此时是当前画幅的数据
+    console.log(`当前画面的画幅是` + oData.responseMsg.msg.layout, oData.responseMsg.msg.wndNum);
+    localStorage.setItem('HKlayout', oData.responseMsg.msg.layout);
+    localStorage.setItem('HKwndNum', oData.responseMsg.msg.wndNum);
+  }
+};
+
+// 初始化
+const init = (callback) => {
+  getPubKey(() => {
+    AllData.oWebControl
+      .JS_RequestInterface({
         funcName: 'init',
         argument: JSON.stringify({
-          appkey: '26265267', // API网关提供的appkey 26265267
-          secret: setEncrypt('CHtVgUwdLsJjE6CWYLMy'), // API网关提供的secret  CHtVgUwdLsJjE6CWYLMy
-          ip: '192.168.10.49', // API网关IP地址 192.168.10.49
-          port: 443, // 端口
-          playMode: 0, // 播放模式 0-预览，1-回放
-          snapDir: 'D:\\SnapDir', // 抓图存储路径
-          videoDir: 'D:\\VideoDir', // 紧急录像或录像剪辑存储路径
-          layout: '1x1', // 布局
-          enableHTTPS: 1, // 是否启用HTTPS协议 0https 1http
-          encryptedFields: 'secret', // 加密字段
-          showToolbar: 1, // 是否显示工具栏
-          showSmart: 1, // 是否显示智能信息
-          buttonIDs: '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769', // 自定义工具条按钮 新的
+          appkey: props.appkey, //API网关提供的appkey
+          secret: setEncrypt(props.secret), //API网关提供的secret
+          ip: props.ip, //API网关IP地址z
+          playMode: props.playMode, //播放模式（决定显示预览还是回放界面）
+          port: props.port, //端口
+          snapDir: 'C:\\SnapDir', //抓图存储路径
+          videoDir: 'C:\\VideoDir', //紧急录像或录像剪辑存储路径
+          layout: props.layout, //布局
+          enableHTTPS: 1, //是否启用HTTPS协议
+          encryptedFields: 'secret', //加密字段
+          showToolbar: props.showToolbar, //是否显示工具栏
+          toolBarButtonIDs: props.toolBarButtonIDs,
+          showSmart: props.showSmart, //是否显示智能信息
+          buttonIDs: props.buttonIDs, //自定义工具条按钮
+          protocol: 'hls',
         }),
-      };
-      oWebControl.JS_RequestInterface(configObj).then(() => {
-        oWebControl.JS_Resize(allData.videoWidth, allData.videoHeight);
-        // 初次加载时，显示默认多个，点击时单个加载
-        if (allData.ifFirstTime) {
-          getClickMoreAction();
-        } else {
-          allData.constIndex = -1;
-          getClickAction();
+      })
+      .then(() => {
+        AllData.videoWidth = playWnd.value.offsetWidth;
+        AllData.videoHeight = playWnd.value.offsetHeight;
+        // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+        AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+        // 判断当前cameraIndexCode中是否有数据 有数据的话就直接进行播放
+        if (props.defaultList.length > 0) {
+          // 批量渲染
+          PiLiangpreviewVideo();
+        } else if (props.cameraIndexCode.length > 0) {
+          // 单独渲染
+          AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+          previewVideo();
+        }
+        if (callback) {
+          callback();
         }
       });
-    }
-    /* 视频流RSA加密 */
-    function setEncrypt(value) {
-      const encrypt = new JSEncrypt();
-      encrypt.setPublicKey(allData.plugKey);
-      return encrypt.encrypt(value);
-    }
-    /* 视频预览 */
-    function getClickAction() {
-      console.log(allData.showVideos, 'showVideos');
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startPreview',
-        argument: JSON.stringify(allData.showVideos),
-      });
-    }
-    // 默认打开多个视频预览
-    function getClickMoreAction() {
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startMultiPreviewByCameraIndexCode',
-        argument: {
-          list: [
-            {
-              cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-              ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-              gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-              streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-              transMode: 1, // 传输协议 0-UDP 1-TCP
-              wndId: 1, // 播放窗口序号
-            },
-            // {
-            //   cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-            //   ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-            //   gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-            //   streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-            //   transMode: 1, // 传输协议 0-UDP 1-TCP
-            //   wndId: 2, // 播放窗口序号
-            // },
-          ],
-        },
-      });
-    }
-    onMounted(() => {
-      // getVideoList();
-      // 获取默认的监控点编号
-      let codes = localStorage.getItem('defaultVideoCode');
-      allData.defaultCode = codes ? codes : 'edaea623e40f45df8b1f3676aa283a79';
-      // 动态获取宽度
-
-      // 批量视频预览
-      allData.ifFirstTime = true;
-      allData.videoWidth = 620;
-      allData.videoHeight = 410;
-      initPlugin();
-    });
-    onBeforeUnmount(() => {
-      if (allData.oWebControl) {
-        allData.oWebControl.JS_HideWnd();
-        allData.oWebControl.JS_DestroyWnd();
-        allData.oWebControl = null;
-        allData.showVideo = false;
-      }
-    });
-
-    return {
-      ...toRefs(allData),
-      checkCamera,
-      initPlugin,
-      initVideo,
-      setEncrypt,
-      getVideoConfig,
-      getVideoList,
-    };
-  },
+  });
 };
-</script>
-<style lang="less">
-#emergency_video {
-  width: 620px;
-  height: 440px;
-  overflow: hidden;
+// 获取公钥
+const getPubKey = (callback) => {
+  const params = {
+    funcName: 'getRSAPubKey',
+    argument: JSON.stringify({ keyLength: 1024 }),
+  };
+  AllData.oWebControl.JS_RequestInterface(params).then((res) => {
+    if (res.responseMsg.data) {
+      AllData.plugKey = res.responseMsg.data;
+      callback();
+    }
+  });
+};
+// 视频流RSA加密
+const setEncrypt = (value) => {
+  const encrypt = new JSEncrypt();
+  encrypt.setPublicKey(AllData.plugKey);
+  return encrypt.encrypt(value);
+};
 
-  #videoBox {
+// 视频预览
+const previewVideo = () => {
+  console.log(AllData.videoParams, '单个视频播放');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startPreview',
+    argument: JSON.stringify(AllData.videoParams),
+  });
+};
+// 批量预览
+const PiLiangpreviewVideo = () => {
+  console.log(props.defaultList, '批量批量批量');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startMultiPreviewByCameraIndexCode',
+    argument: {
+      list: props.defaultList,
+    },
+  });
+};
+// 显示全屏
+const showFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setFullScreen',
+  });
+};
+// 退出全屏
+const exitFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'exitFullScreen',
+  });
+};
+const windowScroll = () => {
+  if (AllData.oWebControl != null) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 获取HK父节点的宽高
+const windowResize = () => {
+  AllData.videoWidth = playWnd.value.offsetWidth;
+  AllData.videoHeight = playWnd.value.offsetHeight;
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 销毁海康插件
+const destroyeWnd = () => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl.JS_Disconnect().then(() => {});
+  }
+};
+// 获取海康插件版本号
+const getVersion = (callback) => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl
+      .JS_RequestInterface({
+        funcName: 'getVersion',
+      })
+      .then((res) => {
+        if (res.responseMsg.code === 0 && res.responseMsg.data === 'V1.5.1') {
+          //JS_CreateWnd创建视频播放窗口，宽高可设定
+          init(callback); // 创建播放实例成功后初始化
+          console.log('启动插件成功！');
+        } else {
+          destroyeWnd();
+          AllData.playText = `
+              插件版本不正确，请重新下载版本安装覆盖！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+        }
+      });
+  }
+};
+// 切换布局
+const setLayoutFunc = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setLayout',
+    argument: {
+      layout: props.layout, // 窗口布局
+    },
+  });
+  if (props.layout != '1x1') {
+    // 先清除所有画面
+    clearShiPing();
+  }
+};
+// 销毁当前正在播放的所有画面
+const clearShiPing = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'stopAllPreview',
+  });
+  AllData.videoParams.wndId = 0;
+};
+// 初始化
+const createdVideo = () => {
+  initPlugin(() => {});
+};
+onMounted(() => {
+  // 创建实例
+  initPlugin();
+
+  // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
+  window.addEventListener('resize', windowResize());
+  // // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
+  window.addEventListener('scroll', windowResize());
+});
+onBeforeUnmount(() => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl
+      .JS_DestroyWnd({
+        funcName: 'destroyeWnd',
+      })
+      .then(() => {});
+  }
+  document.removeEventListener('resize', windowResize());
+  document.removeEventListener('scroll', windowScroll());
+});
+</script>
+
+<style lang="less" scoped>
+#index {
+  width: 100%;
+  height: 100%;
+  .playWnd {
     width: 100%;
     height: 100%;
-
-    #right_videoWindow {
-      width: 100%;
-      height: 100%;
-      .videobox2 {
-        width: 100%;
-        height: 100%;
-      }
-      #playVideoNow {
-        img {
-          display: none;
-        }
-      }
-    }
   }
 }
 </style>

diff --git a/package-lock.json b/package-lock.json
index 194a73a..5b0cf78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "cesium": "^1.117.0",
         "echarts": "^5.2.2",
         "esbuild-windows-64": "^0.14.11",
+        "gsap": "^3.9.1",
         "highcharts": "^9.3.2",
         "hls.js": "^1.5.13",
         "import-three-examples": "^2.2.4",
@@ -1080,12 +1081,14 @@
     "node_modules/@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -2731,6 +2734,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "node_modules/gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5401,15 +5409,13 @@
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz",
       "integrity": "sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@css-render/vue3-ssr": {
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz",
       "integrity": "sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@emotion/hash": {
       "version": "0.8.0",
@@ -5841,12 +5847,14 @@
     "@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "requires": {
         "@types/lodash": "*"
       }
@@ -5963,8 +5971,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz",
       "integrity": "sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "1.3.10",
@@ -6167,32 +6174,27 @@
     "@wangeditor/editor-for-vue": {
       "version": "5.1.12",
       "resolved": "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-5.1.12.tgz",
-      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==",
-      "requires": {}
+      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ=="
     },
     "@wangeditor/list-module": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.2.tgz",
-      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg==",
-      "requires": {}
+      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg=="
     },
     "@wangeditor/table-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.1.tgz",
-      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA==",
-      "requires": {}
+      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA=="
     },
     "@wangeditor/upload-image-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz",
-      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w==",
-      "requires": {}
+      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w=="
     },
     "@wangeditor/video-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.1.tgz",
-      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg==",
-      "requires": {}
+      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg=="
     },
     "@xmldom/xmldom": {
       "version": "0.8.10",
@@ -6523,8 +6525,7 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.4.tgz",
       "integrity": "sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "debug": {
       "version": "4.3.4",
@@ -7034,6 +7035,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -7451,8 +7457,7 @@
     "lodash-unified": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-      "requires": {}
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7894,8 +7899,7 @@
         "vue-demi": {
           "version": "0.13.5",
           "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.5.tgz",
-          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==",
-          "requires": {}
+          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
         }
       }
     },
diff --git a/package.json b/package.json
index a096642..0f3893d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "cesium": "^1.117.0",
     "echarts": "^5.2.2",
     "esbuild-windows-64": "^0.14.11",
+    "gsap": "^3.9.1",
     "highcharts": "^9.3.2",
     "hls.js": "^1.5.13",
     "import-three-examples": "^2.2.4",
diff --git a/src/pages/views/WatershedOneMap/OneMapModal.vue b/src/pages/views/WatershedOneMap/OneMapModal.vue
index b4f4e48..861db2b 100644
--- a/src/pages/views/WatershedOneMap/OneMapModal.vue
+++ b/src/pages/views/WatershedOneMap/OneMapModal.vue
@@ -94,13 +94,41 @@
     <n-modal v-model:show="showModalBZ" :show-icon="false" :mask-closable="false" preset="dialog" :title="BZtitle" style="width: 680px">
       <BengZModal :valueModalbz="valueModalbz" />
     </n-modal>
+
+    <div class="mask" v-if="maskcbwsc">
+      <div id="ShowBox">
+        <div class="ShowBoxname">后湖泵站模型</div>
+        <n-icon @click.stop="ShowInfo" size="40">
+          <Close />
+        </n-icon>
+      </div>
+      <cbwsc> </cbwsc>
+      <div class="bengji">
+        <div id="lableBox" class="lableBox">
+          <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id">
+            <div class="outer">
+              <div class="title">{{ item.name }}</div>
+              <ul>
+                <li v-for="(v, j) in item.data" :key="j">
+                  <span class="pointName">{{ v.pointName }}</span>
+                  <span class="value">{{ v.value }}</span>
+                </li>
+              </ul>
+              <div class="triangle"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Hls from 'hls.js';
 import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
+import { Close } from '@vicons/ionicons5';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import cbwsc from './modalPart/cbwsc.vue'; //三维
 import BengZModal from './modalPart/modal/BengZModal.vue'; //湖泊监测弹窗
 import MapBox from './modalPart/Mapbox.vue';
 import OnePart from './modalPart/natureNet.vue'; //全域感知
@@ -128,11 +156,178 @@
     Legend,
     Vue3SeamlessScroll,
     BengZModal,
+    cbwsc,
+    Close,
   },
   setup() {
     let hls = null;
     let hls1 = null;
     const allData = reactive({
+      labelData: [
+        {
+          name: '1#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '开',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '2#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '3#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '4#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '5#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '6#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '--HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '--A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '--V',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      maskcbwsc: false,
       indexCode: '',
       indexCode1: '',
       videoname: '',
@@ -158,7 +353,7 @@
       dateNumber: 0,
       timer: null,
       ifPlay: false,
-      currentVal: '全域感知',
+      currentVal: '规划引领',
       datearry: [],
       dateTime: [],
       dateLine: formatDate(Date.now() - 24 * 30 * 60 * 60 * 1000, 'YYYY-MM-DD'),
@@ -545,6 +740,9 @@
         hls1.destroy();
       }
     };
+    const ShowInfo = () => {
+      allData.maskcbwsc = false;
+    };
     onMounted(() => {
       // getFooterList();
       // 设置视频监控默认显示的code
@@ -558,6 +756,9 @@
       bus.on('datelist', (e) => {
         allData.datearry = e;
       });
+      bus.on('weather', (e) => {
+        allData.maskcbwsc = true;
+      });
       // 控制播放雨量图例显示
       bus.on('ifQixiang', (e) => {
         if (e) {
@@ -618,6 +819,8 @@
         hls1.destroy();
       }
       clearTimer();
+
+      bus.off('weather');
       bus.off('getGongYt');
       bus.off('ifQixiang');
       bus.off('ifStationWarn');
@@ -639,12 +842,13 @@
       bfvideo,
       bfvideo1,
       handleModalChange,
+      ShowInfo,
     };
   },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .dialogGYT {
   display: flex;
   .imgs {
@@ -840,4 +1044,88 @@
   left: 10px;
   bottom: 5px;
 }
+.mask {
+  position: fixed;
+  width: calc(100% - 100px);
+  margin: 0 50px;
+  height: calc(92vh - 10px);
+  background-color: rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: 20px;
+  z-index: 999999999;
+  // position: fixed;
+  // width: 200px;
+  // height: 200px;
+  // background-color: rgba(0, 0, 0, 0.5);
+  // right: 400px;
+  // bottom: 0;
+  // z-index: 999999999;
+  .bengji {
+    position: relative;
+    bottom: 145px;
+    width: 60%;
+    left: 20%;
+    right: 20%;
+    .lableBox {
+      display: flex;
+      height: 100%;
+    }
+    .label {
+      display: flex;
+      padding: 10px;
+      z-index: 9999 !important;
+      width: 200px;
+
+      .title {
+        line-height: 30px;
+        font-size: 14px;
+        padding: 0 10px;
+        border-bottom: 1px solid #e7f1ff;
+        color: turquoise;
+      }
+
+      ul {
+        li {
+          padding: 0 10px;
+          line-height: 26px;
+          display: flex;
+          justify-content: space-between;
+
+          &:nth-child(2n) {
+            background: #e7f1ff;
+          }
+
+          .pointName {
+            color: #888;
+          }
+
+          .value {
+            color: #0066ff;
+          }
+        }
+      }
+
+      .outer {
+        top: 0;
+        left: 0;
+        width: 140px;
+        border-radius: 10px;
+        box-shadow: -2px 0 20px #0060ff;
+        background: rgba(255, 255, 255, 0.712);
+      }
+    }
+  }
+  #ShowBox {
+    display: flex;
+    justify-content: space-between;
+    color: #ffffff;
+    margin-left: 20px;
+    cursor: pointer;
+    .ShowBoxname {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/Popup.vue b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
index 77eea0d..46a5863 100644
--- a/src/pages/views/WatershedOneMap/modalPart/Popup.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
@@ -102,6 +102,9 @@
         <div class="part gongyt" v-if="popupInfo.url">
           <div class="value" @click.stop="checkGyt(popupInfo)">查看工艺图</div>
         </div>
+        <div class="part" style="cursor: pointer" v-if="popupInfo.name.includes('后湖泵站')">
+          <div class="name" @click.stop="handlesweath()">查看模型</div>
+        </div>
         <!-- 雨量站、雨量计历史数据 -->
         <div class="part" v-show="popupInfo.name.includes('雨量站')">
           <div class="name" style="width: 100%">降雨历史数据:</div>
@@ -220,6 +223,10 @@
     async function checkGyt(popupInfo) {
       bus.emit('getGongYt', popupInfo);
     }
+
+    const handlesweath = (data) => {
+      bus.emit('weather', data);
+    };
     // 降雨历史数据
     const echartRain = async () => {
       let chart = document.getElementById('echartHistory');
@@ -297,6 +304,7 @@
       ...toRefs(allData),
       closepopupdefect,
       checkGyt,
+      handlesweath,
     };
   },
 });
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
new file mode 100644
index 0000000..993d0af
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
@@ -0,0 +1,599 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('/modelFilesJson/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    // const hdr = '/modelFilesJson/three_glb/kloppenheim_061_4k.hdr';
+    const hdr = './static/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+
+    // 标注水位
+
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      // initModal('wushuichang', '/modelFiles/three_glb/3.gltf');
+      // initModal('wushuichang', 'public/static/three_glb/3.gltf');
+    });
+    onMounted(() => {
+      initModal('wushuichang', './static/three_glb/3.gltf');
+      // initModal('wushuichang', '/modelFilesJson/three_glb/3.gltf');
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+        }
+        // document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
new file mode 100644
index 0000000..8b4cac2
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
@@ -0,0 +1,652 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('modelFiles/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    const hdr = 'modelFiles/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+    const meshOnClick = (event) => {
+      let raycaster = new THREE.Raycaster();
+      const pointer = new THREE.Vector2();
+      console.log(event.clientX, event.clientY);
+      let Top = 60,
+        Left = 60;
+      pointer.x = ((event.clientX - Left) / state.width) * 2 - 1;
+      pointer.y = -((event.clientY - Top) / state.height) * 2 + 1;
+      raycaster.setFromCamera(pointer, state.Camera);
+      let intersects = raycaster.intersectObjects(state.granaryArr, true);
+      console.log(intersects);
+      console.log('------', state.Camera.position);
+      if (intersects.length > 0) {
+        console.log(intersects[0].object);
+      } else {
+        console.log('NoNoNo');
+      }
+    };
+    // 标注水位
+    const createWaterLevel = () => {
+      let info = {
+        name: 'text',
+        text: ' 水位: 0.5M ',
+        fontsize: 30,
+        Color: 'green',
+        backgroundColor: 'rgba(0,0,0,0)',
+        position: { x: 2, y: 10, z: 0 },
+        fillRect: { x: 0, y: 0, w: 300, h: 60 },
+        // rotateY: -180,
+      };
+      let canvas = document.createElement('canvas');
+      let ctx = canvas.getContext('2d');
+      //制作矩形
+      ctx.fillStyle = info.backgroundColor;
+      ctx.fillRect(info.fillRect.x, info.fillRect.y, info.fillRect.w, info.fillRect.h);
+      //设置文字
+      ctx.fillStyle = info.Color;
+      ctx.font = `normal ${info.fontsize}px "楷体"`;
+      let textWord = info.text;
+      ctx.fillText(textWord, 10, 40);
+      //生成图片
+      let url = canvas.toDataURL('image/png');
+      //将图片构建到纹理中
+      let geometry1 = new THREE.PlaneGeometry(20, 10);
+      let texture = THREE.ImageUtils.loadTexture(url, null, function (t) {});
+
+      let material1 = new THREE.MeshBasicMaterial({
+        map: texture,
+        side: THREE.DoubleSide,
+        opacity: 1,
+        transparent: true,
+      });
+      let rect = new THREE.Mesh(geometry1, material1);
+      rect.name = info.name;
+      rect.position.set(info.position.x, info.position.y, info.position.z);
+      // rect.rotateY(info.rotateY);
+      Scene.add(rect);
+    };
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+      document.addEventListener('click', meshOnClick);
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      //   initModal('wushuichang', 'modelFiles/three_glb/3.gltf');
+      initModal('wushuichang', 'public/static/three_glb/ChangJing-comp.gltf');
+    });
+    onMounted(() => {
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+          // createWaterLevel();
+        }
+        document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+      document.removeEventListener('click', meshOnClick);
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+      meshOnClick,
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
index 4383d0d..dd36bc9 100644
--- a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
@@ -1,304 +1,374 @@
 <template>
-  <div id="emergency_video">
-    <div id="videoBox">
-      <!-- <div id="left_listBox" >
-        <div class="videoTable">
-          <n-tree
-            :data="treesData"
-            v-if="treesData.length"
-            :node-props="checkCamera"
-            block-line
-            :default-expanded-keys="defaultExpandedKeys"
-          />
-        </div>
-      </div> -->
-      <div id="right_videoWindow" v-if="showVideo">
-        <!-- 视频盒子 -->
-        <div id="playVideoNow" v-if="showVideo" class="videobox2"></div>
-      </div>
-    </div>
+  <div id="index">
+    <div ref="playWnd" :id="containerId" class="playWnd" v-html="AllData.oWebControl === null ? AllData.playText : ''"></div>
   </div>
 </template>
 
-<script>
-import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import { getCameraTree } from '@/services';
+<script setup name="index">
+import { ref, reactive, toRefs, onMounted } from 'vue';
+const props = defineProps({
+  // 内网、公网 4个配置
+  appkey: {
+    type: String,
+    default: () => '25124952',
+  },
+  secret: {
+    type: String,
+    default: () => 'aJOYWAt8CJabjjA1Ekeq',
+  },
+  ip: {
+    type: String,
+    default: () => '113.57.101.104',
+  },
+  port: {
+    type: Number,
+    default: () => 8888,
+  },
+  // 视频布局
+  layout: {
+    type: String,
+    default: () => '1x1',
+  },
+  // 初始播放模式：0-预览，1-回放
+  playMode: {
+    type: Number,
+    default: () => 0,
+  },
+  // 是否显示工具栏，0-不显示，非0-显示
+  showToolbar: {
+    type: Number,
+    default: () => 1,
+  },
+  // 工具栏按钮
+  toolBarButtonIDs: {
+    type: String,
+    default: () => '4098,4097',
+  },
+  // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
+  showSmart: {
+    type: Number,
+    default: () => 1,
+  },
+  // 自定义工具条按钮
+  buttonIDs: {
+    type: String,
+    default: () => '0,16,256,257,258,259,512,260,515,516,517,768,769',
+  },
+  // 相机编号
+  cameraIndexCode: {
+    type: [String, Number],
+  },
+  // 视频播放容器id
+  containerId: {
+    type: String,
+    default: () => 'playWnd',
+  },
+  // 默认打开的视频
+  defaultList: {
+    type: Array,
+    default: () => [],
+  },
+});
 
-export default {
-  name: 'emergency_video',
-  components: {},
-  setup() {
-    const allData = reactive({
-      showVideo: true,
-      constIndex: 1,
-      oWebControl: null,
-      plugKey: '',
-      Count: 0,
-      ifFirstTime: true,
-      videoWidth: 1400,
-      videoHeight: 750,
-      defaultExpandedKeys: ['root000000'], //默认展开节点
-      defaultCode: '', //默认监控点
-      showVideos: {
-        cameraIndexCode: 'e4a8bcca3393494bbdc9f2da087875bb', // 默认监控点编号
-        streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-        transMode: 1, // 传输协议：0-UDP，1-TCP
-        gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-        wndId: 1, // 播放窗口序号
-      },
-      treesData: [
-        {
-          label: '0',
-          key: '0',
-          click: false,
-          children: [
-            {
-              label: '组1',
-              key: '1-0',
-              click: false,
-              children: [
-                {
-                  label: '铁路桥',
-                  key: 'cf99e49a50f641ba83832dd5ebff3fa5',
-                  click: true,
-                },
-                {
-                  label: '王家墩',
-                  key: '4097ade6e64142d7ac7adff80b4617f0',
-                  click: true,
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    });
-    // 获取摄像头列表
-    const getVideoList = async () => {
-      allData.treesData = [];
-      let res = await getCameraTree();
-      if (res && res.code == 200) {
-        let datas = res.data;
-        // allData.defaultExpandedKeys.push(datas[0].key);
-        allData.treesData = datas;
+const AllData = reactive({
+  oWebControl: null,
+  plugKey: '',
+  // 视频相关参数
+  videoParams: {
+    cameraIndexCode: '', //监控点编号
+    streamMode: 0, //主子码流标识：0-主码流，1-子码流
+    transMode: 1, //传输协议：0-UDP，1-TCP
+    gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
+    wndId: 1, //播放窗口序号
+  },
+  videoWidth: null,
+  videoHeight: null,
+  playText: '启动中...',
+  initCount: 0, // 启动次数
+  href: '',
+});
+// 视频容器的ref对象
+const playWnd = ref(null);
+
+// 监听视频编码的改变(单个视频编码)
+watch(
+  () => props.cameraIndexCode,
+  (val) => {
+    if (props.cameraIndexCode) {
+      AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+      AllData.videoParams.wndId = -1;
+      if (AllData.oWebControl) {
+        previewVideo();
+      } else {
+        createdVideo();
       }
-    };
-    // 选择树结构的摄像头
-    const checkCamera = ({ option }) => {
-      return {
-        onClick() {
-          if (allData.showVideo != true) {
-            allData.showVideo = true;
-            allData.constIndex = 1;
-          } else {
-            allData.constIndex = -1;
-          }
-          console.log('option---', option);
-          // 只有子节点点击才能查看视频
-          if (option.click) {
-            allData.ifFirstTime = false;
-            allData.showVideos = {
-              cameraIndexCode: option.key, // 监控点编号
-              streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-              transMode: 1, // 传输协议：0-UDP，1-TCP
-              gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-              wndId: allData.constIndex, // 播放窗口序号
-            };
-            initVideo(allData.oWebControl);
-          }
-        },
-      };
-    };
-    /* 创建插件实例 */
-    function initPlugin() {
-      const dll = { dllPath: './VideoPluginConnect.dll' };
-      allData.oWebControl = new WebControl({
-        szPluginContainer: 'playVideoNow', // 指定容器id
-        iServicePortStart: 15900,
-        iServicePortEnd: 15909,
-        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    }
+  }
+);
+// 监听视频编码数组的改变(批量视频编码)
+watch(
+  () => props.defaultList,
+  (val) => {
+    if (props.defaultList.length > 0) {
+      PiLiangpreviewVideo();
+    }
+  }
+);
+// 监听布局修改
+watch(
+  () => props.layout,
+  (val) => {
+    setLayoutFunc();
+  }
+);
 
-        cbConnectSuccess: () => {
-          allData.oWebControl.JS_StartService('window', dll).then(() => {
-            // 设置视频 web 插件消息回调
-            allData.oWebControl.JS_SetWindowControlCallback({
-              cbIntegrationCallBack: (msg) => {
-                //注：不能使用外部函数调用，无效
-                if (msg?.responseMsg?.msg?.result) {
-                  const { result } = msg.responseMsg.msg;
-                  if (result == 1024) {
-                    allData.oWebControl.JS_HideWnd(); //放大隐藏其它视频窗口
-                  } else if (result == 1025) {
-                    allData.oWebControl.JS_ShowWnd(); //缩小显示全部窗口
-                  }
-                }
-              },
-            });
-            // 启动插件服务成功
-            allData.oWebControl.JS_CreateWnd('playVideoNow', allData.videoWidth, allData.videoHeight).then(() => {
-              // JS_CreateWnd创建视频播放窗口，宽高可设定
-              initVideo(allData.oWebControl); // 创建播放实例成功后初始化
-              console.log('启动插件成功！');
-            });
+// 创建播放实例
+const initPlugin = (callback) => {
+  AllData.oWebControl = new WebControl({
+    szPluginContainer: props.containerId, // 指定容器id
+    iServicePortStart: 15900,
+    iServicePortEnd: 15909,
+    szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    // 创建WebControl实例成功
+    cbConnectSuccess: () => {
+      AllData.oWebControl
+        .JS_StartService('window', {
+          // WebControl实例创建成功后需要启动服务
+          dllPath: './VideoPluginConnect.dll',
+        })
+        .then(() => {
+          // 启动插件服务成功
+          AllData.oWebControl.JS_SetWindowControlCallback({
+            // 设置消息回调
+            cbIntegrationCallBack: cbIntegrationCallBack,
           });
-        },
-        // 插件服务启动失败，弹框提示
-        cbConnectError: () => {
-          allData.oWebControl = null;
+          AllData.oWebControl.JS_CreateWnd(props.containerId, AllData.videoWidth, AllData.videoHeight).then(() => {
+            getVersion(callback);
+          });
+        });
+    },
+    cbConnectError: () => {
+      // 创建WebControl实例失败
+      AllData.oWebControl = null;
+      AllData.playText = '插件未启动，正在尝试启动，请稍候...';
+      WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
+      AllData.initCount++;
+      if (AllData.initCount < 3) {
+        setTimeout(() => {
+          initPlugin();
+        }, 3000);
+      } else {
+        AllData.playText = `
+              插件启动失败，请检查插件是否安装！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+      }
+    },
+    cbConnectClose: () => {
+      AllData.oWebControl = null;
+    },
+  });
+};
 
-          allData.Count++;
-          if (allData.Count < 2) {
-            WebControl.JS_WakeUp('VideoWebPlugin://');
-            setTimeout(() => {
-              initPlugin();
-            }, 8000);
-          } else {
-          }
-          console.log('创建插件失败');
-        },
-      });
-    }
-    /* 获取公钥 */
-    function initVideo(oWebControl) {
-      const params = {
-        funcName: 'getRSAPubKey',
-        argument: JSON.stringify({ keyLength: 1024 }),
-      };
-      oWebControl.JS_RequestInterface(params).then((res) => {
-        if (res.responseMsg.data) {
-          allData.plugKey = res.responseMsg.data;
-          getVideoConfig(oWebControl);
-        }
-      });
-    }
-    /* 视频插件配置  插件初始化 */
-    function getVideoConfig(oWebControl) {
-      const configObj = {
+// HK插件控制监听的消息回调
+const cbIntegrationCallBack = (oData) => {
+  console.log(oData);
+  if (oData.responseMsg.type == 6) {
+    // 此时是当前画幅的数据
+    console.log(`当前画面的画幅是` + oData.responseMsg.msg.layout, oData.responseMsg.msg.wndNum);
+    localStorage.setItem('HKlayout', oData.responseMsg.msg.layout);
+    localStorage.setItem('HKwndNum', oData.responseMsg.msg.wndNum);
+  }
+};
+
+// 初始化
+const init = (callback) => {
+  getPubKey(() => {
+    AllData.oWebControl
+      .JS_RequestInterface({
         funcName: 'init',
         argument: JSON.stringify({
-          appkey: '26265267', // API网关提供的appkey 26265267
-          secret: setEncrypt('CHtVgUwdLsJjE6CWYLMy'), // API网关提供的secret  CHtVgUwdLsJjE6CWYLMy
-          ip: '192.168.10.49', // API网关IP地址 192.168.10.49
-          port: 443, // 端口
-          playMode: 0, // 播放模式 0-预览，1-回放
-          snapDir: 'D:\\SnapDir', // 抓图存储路径
-          videoDir: 'D:\\VideoDir', // 紧急录像或录像剪辑存储路径
-          layout: '1x1', // 布局
-          enableHTTPS: 1, // 是否启用HTTPS协议 0https 1http
-          encryptedFields: 'secret', // 加密字段
-          showToolbar: 1, // 是否显示工具栏
-          showSmart: 1, // 是否显示智能信息
-          buttonIDs: '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769', // 自定义工具条按钮 新的
+          appkey: props.appkey, //API网关提供的appkey
+          secret: setEncrypt(props.secret), //API网关提供的secret
+          ip: props.ip, //API网关IP地址z
+          playMode: props.playMode, //播放模式（决定显示预览还是回放界面）
+          port: props.port, //端口
+          snapDir: 'C:\\SnapDir', //抓图存储路径
+          videoDir: 'C:\\VideoDir', //紧急录像或录像剪辑存储路径
+          layout: props.layout, //布局
+          enableHTTPS: 1, //是否启用HTTPS协议
+          encryptedFields: 'secret', //加密字段
+          showToolbar: props.showToolbar, //是否显示工具栏
+          toolBarButtonIDs: props.toolBarButtonIDs,
+          showSmart: props.showSmart, //是否显示智能信息
+          buttonIDs: props.buttonIDs, //自定义工具条按钮
+          protocol: 'hls',
         }),
-      };
-      oWebControl.JS_RequestInterface(configObj).then(() => {
-        oWebControl.JS_Resize(allData.videoWidth, allData.videoHeight);
-        // 初次加载时，显示默认多个，点击时单个加载
-        if (allData.ifFirstTime) {
-          getClickMoreAction();
-        } else {
-          allData.constIndex = -1;
-          getClickAction();
+      })
+      .then(() => {
+        AllData.videoWidth = playWnd.value.offsetWidth;
+        AllData.videoHeight = playWnd.value.offsetHeight;
+        // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+        AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+        // 判断当前cameraIndexCode中是否有数据 有数据的话就直接进行播放
+        if (props.defaultList.length > 0) {
+          // 批量渲染
+          PiLiangpreviewVideo();
+        } else if (props.cameraIndexCode.length > 0) {
+          // 单独渲染
+          AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+          previewVideo();
+        }
+        if (callback) {
+          callback();
         }
       });
-    }
-    /* 视频流RSA加密 */
-    function setEncrypt(value) {
-      const encrypt = new JSEncrypt();
-      encrypt.setPublicKey(allData.plugKey);
-      return encrypt.encrypt(value);
-    }
-    /* 视频预览 */
-    function getClickAction() {
-      console.log(allData.showVideos, 'showVideos');
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startPreview',
-        argument: JSON.stringify(allData.showVideos),
-      });
-    }
-    // 默认打开多个视频预览
-    function getClickMoreAction() {
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startMultiPreviewByCameraIndexCode',
-        argument: {
-          list: [
-            {
-              cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-              ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-              gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-              streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-              transMode: 1, // 传输协议 0-UDP 1-TCP
-              wndId: 1, // 播放窗口序号
-            },
-            // {
-            //   cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-            //   ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-            //   gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-            //   streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-            //   transMode: 1, // 传输协议 0-UDP 1-TCP
-            //   wndId: 2, // 播放窗口序号
-            // },
-          ],
-        },
-      });
-    }
-    onMounted(() => {
-      // getVideoList();
-      // 获取默认的监控点编号
-      let codes = localStorage.getItem('defaultVideoCode');
-      allData.defaultCode = codes ? codes : 'edaea623e40f45df8b1f3676aa283a79';
-      // 动态获取宽度
-
-      // 批量视频预览
-      allData.ifFirstTime = true;
-      allData.videoWidth = 620;
-      allData.videoHeight = 410;
-      initPlugin();
-    });
-    onBeforeUnmount(() => {
-      if (allData.oWebControl) {
-        allData.oWebControl.JS_HideWnd();
-        allData.oWebControl.JS_DestroyWnd();
-        allData.oWebControl = null;
-        allData.showVideo = false;
-      }
-    });
-
-    return {
-      ...toRefs(allData),
-      checkCamera,
-      initPlugin,
-      initVideo,
-      setEncrypt,
-      getVideoConfig,
-      getVideoList,
-    };
-  },
+  });
 };
-</script>
-<style lang="less">
-#emergency_video {
-  width: 620px;
-  height: 440px;
-  overflow: hidden;
+// 获取公钥
+const getPubKey = (callback) => {
+  const params = {
+    funcName: 'getRSAPubKey',
+    argument: JSON.stringify({ keyLength: 1024 }),
+  };
+  AllData.oWebControl.JS_RequestInterface(params).then((res) => {
+    if (res.responseMsg.data) {
+      AllData.plugKey = res.responseMsg.data;
+      callback();
+    }
+  });
+};
+// 视频流RSA加密
+const setEncrypt = (value) => {
+  const encrypt = new JSEncrypt();
+  encrypt.setPublicKey(AllData.plugKey);
+  return encrypt.encrypt(value);
+};
 
-  #videoBox {
+// 视频预览
+const previewVideo = () => {
+  console.log(AllData.videoParams, '单个视频播放');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startPreview',
+    argument: JSON.stringify(AllData.videoParams),
+  });
+};
+// 批量预览
+const PiLiangpreviewVideo = () => {
+  console.log(props.defaultList, '批量批量批量');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startMultiPreviewByCameraIndexCode',
+    argument: {
+      list: props.defaultList,
+    },
+  });
+};
+// 显示全屏
+const showFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setFullScreen',
+  });
+};
+// 退出全屏
+const exitFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'exitFullScreen',
+  });
+};
+const windowScroll = () => {
+  if (AllData.oWebControl != null) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 获取HK父节点的宽高
+const windowResize = () => {
+  AllData.videoWidth = playWnd.value.offsetWidth;
+  AllData.videoHeight = playWnd.value.offsetHeight;
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 销毁海康插件
+const destroyeWnd = () => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl.JS_Disconnect().then(() => {});
+  }
+};
+// 获取海康插件版本号
+const getVersion = (callback) => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl
+      .JS_RequestInterface({
+        funcName: 'getVersion',
+      })
+      .then((res) => {
+        if (res.responseMsg.code === 0 && res.responseMsg.data === 'V1.5.1') {
+          //JS_CreateWnd创建视频播放窗口，宽高可设定
+          init(callback); // 创建播放实例成功后初始化
+          console.log('启动插件成功！');
+        } else {
+          destroyeWnd();
+          AllData.playText = `
+              插件版本不正确，请重新下载版本安装覆盖！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+        }
+      });
+  }
+};
+// 切换布局
+const setLayoutFunc = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setLayout',
+    argument: {
+      layout: props.layout, // 窗口布局
+    },
+  });
+  if (props.layout != '1x1') {
+    // 先清除所有画面
+    clearShiPing();
+  }
+};
+// 销毁当前正在播放的所有画面
+const clearShiPing = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'stopAllPreview',
+  });
+  AllData.videoParams.wndId = 0;
+};
+// 初始化
+const createdVideo = () => {
+  initPlugin(() => {});
+};
+onMounted(() => {
+  // 创建实例
+  initPlugin();
+
+  // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
+  window.addEventListener('resize', windowResize());
+  // // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
+  window.addEventListener('scroll', windowResize());
+});
+onBeforeUnmount(() => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl
+      .JS_DestroyWnd({
+        funcName: 'destroyeWnd',
+      })
+      .then(() => {});
+  }
+  document.removeEventListener('resize', windowResize());
+  document.removeEventListener('scroll', windowScroll());
+});
+</script>
+
+<style lang="less" scoped>
+#index {
+  width: 100%;
+  height: 100%;
+  .playWnd {
     width: 100%;
     height: 100%;
-
-    #right_videoWindow {
-      width: 100%;
-      height: 100%;
-      .videobox2 {
-        width: 100%;
-        height: 100%;
-      }
-      #playVideoNow {
-        img {
-          display: none;
-        }
-      }
-    }
   }
 }
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/HPModal b/src/pages/views/WatershedOneMap/modalPart/modal/HPModal
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/HPModal

diff --git a/package-lock.json b/package-lock.json
index 194a73a..5b0cf78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "cesium": "^1.117.0",
         "echarts": "^5.2.2",
         "esbuild-windows-64": "^0.14.11",
+        "gsap": "^3.9.1",
         "highcharts": "^9.3.2",
         "hls.js": "^1.5.13",
         "import-three-examples": "^2.2.4",
@@ -1080,12 +1081,14 @@
     "node_modules/@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -2731,6 +2734,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "node_modules/gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5401,15 +5409,13 @@
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz",
       "integrity": "sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@css-render/vue3-ssr": {
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz",
       "integrity": "sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@emotion/hash": {
       "version": "0.8.0",
@@ -5841,12 +5847,14 @@
     "@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "requires": {
         "@types/lodash": "*"
       }
@@ -5963,8 +5971,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz",
       "integrity": "sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "1.3.10",
@@ -6167,32 +6174,27 @@
     "@wangeditor/editor-for-vue": {
       "version": "5.1.12",
       "resolved": "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-5.1.12.tgz",
-      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==",
-      "requires": {}
+      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ=="
     },
     "@wangeditor/list-module": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.2.tgz",
-      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg==",
-      "requires": {}
+      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg=="
     },
     "@wangeditor/table-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.1.tgz",
-      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA==",
-      "requires": {}
+      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA=="
     },
     "@wangeditor/upload-image-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz",
-      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w==",
-      "requires": {}
+      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w=="
     },
     "@wangeditor/video-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.1.tgz",
-      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg==",
-      "requires": {}
+      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg=="
     },
     "@xmldom/xmldom": {
       "version": "0.8.10",
@@ -6523,8 +6525,7 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.4.tgz",
       "integrity": "sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "debug": {
       "version": "4.3.4",
@@ -7034,6 +7035,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -7451,8 +7457,7 @@
     "lodash-unified": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-      "requires": {}
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7894,8 +7899,7 @@
         "vue-demi": {
           "version": "0.13.5",
           "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.5.tgz",
-          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==",
-          "requires": {}
+          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
         }
       }
     },
diff --git a/package.json b/package.json
index a096642..0f3893d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "cesium": "^1.117.0",
     "echarts": "^5.2.2",
     "esbuild-windows-64": "^0.14.11",
+    "gsap": "^3.9.1",
     "highcharts": "^9.3.2",
     "hls.js": "^1.5.13",
     "import-three-examples": "^2.2.4",
diff --git a/src/pages/views/WatershedOneMap/OneMapModal.vue b/src/pages/views/WatershedOneMap/OneMapModal.vue
index b4f4e48..861db2b 100644
--- a/src/pages/views/WatershedOneMap/OneMapModal.vue
+++ b/src/pages/views/WatershedOneMap/OneMapModal.vue
@@ -94,13 +94,41 @@
     <n-modal v-model:show="showModalBZ" :show-icon="false" :mask-closable="false" preset="dialog" :title="BZtitle" style="width: 680px">
       <BengZModal :valueModalbz="valueModalbz" />
     </n-modal>
+
+    <div class="mask" v-if="maskcbwsc">
+      <div id="ShowBox">
+        <div class="ShowBoxname">后湖泵站模型</div>
+        <n-icon @click.stop="ShowInfo" size="40">
+          <Close />
+        </n-icon>
+      </div>
+      <cbwsc> </cbwsc>
+      <div class="bengji">
+        <div id="lableBox" class="lableBox">
+          <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id">
+            <div class="outer">
+              <div class="title">{{ item.name }}</div>
+              <ul>
+                <li v-for="(v, j) in item.data" :key="j">
+                  <span class="pointName">{{ v.pointName }}</span>
+                  <span class="value">{{ v.value }}</span>
+                </li>
+              </ul>
+              <div class="triangle"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Hls from 'hls.js';
 import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
+import { Close } from '@vicons/ionicons5';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import cbwsc from './modalPart/cbwsc.vue'; //三维
 import BengZModal from './modalPart/modal/BengZModal.vue'; //湖泊监测弹窗
 import MapBox from './modalPart/Mapbox.vue';
 import OnePart from './modalPart/natureNet.vue'; //全域感知
@@ -128,11 +156,178 @@
     Legend,
     Vue3SeamlessScroll,
     BengZModal,
+    cbwsc,
+    Close,
   },
   setup() {
     let hls = null;
     let hls1 = null;
     const allData = reactive({
+      labelData: [
+        {
+          name: '1#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '开',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '2#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '3#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '4#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '5#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '6#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '--HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '--A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '--V',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      maskcbwsc: false,
       indexCode: '',
       indexCode1: '',
       videoname: '',
@@ -158,7 +353,7 @@
       dateNumber: 0,
       timer: null,
       ifPlay: false,
-      currentVal: '全域感知',
+      currentVal: '规划引领',
       datearry: [],
       dateTime: [],
       dateLine: formatDate(Date.now() - 24 * 30 * 60 * 60 * 1000, 'YYYY-MM-DD'),
@@ -545,6 +740,9 @@
         hls1.destroy();
       }
     };
+    const ShowInfo = () => {
+      allData.maskcbwsc = false;
+    };
     onMounted(() => {
       // getFooterList();
       // 设置视频监控默认显示的code
@@ -558,6 +756,9 @@
       bus.on('datelist', (e) => {
         allData.datearry = e;
       });
+      bus.on('weather', (e) => {
+        allData.maskcbwsc = true;
+      });
       // 控制播放雨量图例显示
       bus.on('ifQixiang', (e) => {
         if (e) {
@@ -618,6 +819,8 @@
         hls1.destroy();
       }
       clearTimer();
+
+      bus.off('weather');
       bus.off('getGongYt');
       bus.off('ifQixiang');
       bus.off('ifStationWarn');
@@ -639,12 +842,13 @@
       bfvideo,
       bfvideo1,
       handleModalChange,
+      ShowInfo,
     };
   },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .dialogGYT {
   display: flex;
   .imgs {
@@ -840,4 +1044,88 @@
   left: 10px;
   bottom: 5px;
 }
+.mask {
+  position: fixed;
+  width: calc(100% - 100px);
+  margin: 0 50px;
+  height: calc(92vh - 10px);
+  background-color: rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: 20px;
+  z-index: 999999999;
+  // position: fixed;
+  // width: 200px;
+  // height: 200px;
+  // background-color: rgba(0, 0, 0, 0.5);
+  // right: 400px;
+  // bottom: 0;
+  // z-index: 999999999;
+  .bengji {
+    position: relative;
+    bottom: 145px;
+    width: 60%;
+    left: 20%;
+    right: 20%;
+    .lableBox {
+      display: flex;
+      height: 100%;
+    }
+    .label {
+      display: flex;
+      padding: 10px;
+      z-index: 9999 !important;
+      width: 200px;
+
+      .title {
+        line-height: 30px;
+        font-size: 14px;
+        padding: 0 10px;
+        border-bottom: 1px solid #e7f1ff;
+        color: turquoise;
+      }
+
+      ul {
+        li {
+          padding: 0 10px;
+          line-height: 26px;
+          display: flex;
+          justify-content: space-between;
+
+          &:nth-child(2n) {
+            background: #e7f1ff;
+          }
+
+          .pointName {
+            color: #888;
+          }
+
+          .value {
+            color: #0066ff;
+          }
+        }
+      }
+
+      .outer {
+        top: 0;
+        left: 0;
+        width: 140px;
+        border-radius: 10px;
+        box-shadow: -2px 0 20px #0060ff;
+        background: rgba(255, 255, 255, 0.712);
+      }
+    }
+  }
+  #ShowBox {
+    display: flex;
+    justify-content: space-between;
+    color: #ffffff;
+    margin-left: 20px;
+    cursor: pointer;
+    .ShowBoxname {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/Popup.vue b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
index 77eea0d..46a5863 100644
--- a/src/pages/views/WatershedOneMap/modalPart/Popup.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
@@ -102,6 +102,9 @@
         <div class="part gongyt" v-if="popupInfo.url">
           <div class="value" @click.stop="checkGyt(popupInfo)">查看工艺图</div>
         </div>
+        <div class="part" style="cursor: pointer" v-if="popupInfo.name.includes('后湖泵站')">
+          <div class="name" @click.stop="handlesweath()">查看模型</div>
+        </div>
         <!-- 雨量站、雨量计历史数据 -->
         <div class="part" v-show="popupInfo.name.includes('雨量站')">
           <div class="name" style="width: 100%">降雨历史数据:</div>
@@ -220,6 +223,10 @@
     async function checkGyt(popupInfo) {
       bus.emit('getGongYt', popupInfo);
     }
+
+    const handlesweath = (data) => {
+      bus.emit('weather', data);
+    };
     // 降雨历史数据
     const echartRain = async () => {
       let chart = document.getElementById('echartHistory');
@@ -297,6 +304,7 @@
       ...toRefs(allData),
       closepopupdefect,
       checkGyt,
+      handlesweath,
     };
   },
 });
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
new file mode 100644
index 0000000..993d0af
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
@@ -0,0 +1,599 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('/modelFilesJson/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    // const hdr = '/modelFilesJson/three_glb/kloppenheim_061_4k.hdr';
+    const hdr = './static/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+
+    // 标注水位
+
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      // initModal('wushuichang', '/modelFiles/three_glb/3.gltf');
+      // initModal('wushuichang', 'public/static/three_glb/3.gltf');
+    });
+    onMounted(() => {
+      initModal('wushuichang', './static/three_glb/3.gltf');
+      // initModal('wushuichang', '/modelFilesJson/three_glb/3.gltf');
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+        }
+        // document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
new file mode 100644
index 0000000..8b4cac2
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
@@ -0,0 +1,652 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('modelFiles/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    const hdr = 'modelFiles/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+    const meshOnClick = (event) => {
+      let raycaster = new THREE.Raycaster();
+      const pointer = new THREE.Vector2();
+      console.log(event.clientX, event.clientY);
+      let Top = 60,
+        Left = 60;
+      pointer.x = ((event.clientX - Left) / state.width) * 2 - 1;
+      pointer.y = -((event.clientY - Top) / state.height) * 2 + 1;
+      raycaster.setFromCamera(pointer, state.Camera);
+      let intersects = raycaster.intersectObjects(state.granaryArr, true);
+      console.log(intersects);
+      console.log('------', state.Camera.position);
+      if (intersects.length > 0) {
+        console.log(intersects[0].object);
+      } else {
+        console.log('NoNoNo');
+      }
+    };
+    // 标注水位
+    const createWaterLevel = () => {
+      let info = {
+        name: 'text',
+        text: ' 水位: 0.5M ',
+        fontsize: 30,
+        Color: 'green',
+        backgroundColor: 'rgba(0,0,0,0)',
+        position: { x: 2, y: 10, z: 0 },
+        fillRect: { x: 0, y: 0, w: 300, h: 60 },
+        // rotateY: -180,
+      };
+      let canvas = document.createElement('canvas');
+      let ctx = canvas.getContext('2d');
+      //制作矩形
+      ctx.fillStyle = info.backgroundColor;
+      ctx.fillRect(info.fillRect.x, info.fillRect.y, info.fillRect.w, info.fillRect.h);
+      //设置文字
+      ctx.fillStyle = info.Color;
+      ctx.font = `normal ${info.fontsize}px "楷体"`;
+      let textWord = info.text;
+      ctx.fillText(textWord, 10, 40);
+      //生成图片
+      let url = canvas.toDataURL('image/png');
+      //将图片构建到纹理中
+      let geometry1 = new THREE.PlaneGeometry(20, 10);
+      let texture = THREE.ImageUtils.loadTexture(url, null, function (t) {});
+
+      let material1 = new THREE.MeshBasicMaterial({
+        map: texture,
+        side: THREE.DoubleSide,
+        opacity: 1,
+        transparent: true,
+      });
+      let rect = new THREE.Mesh(geometry1, material1);
+      rect.name = info.name;
+      rect.position.set(info.position.x, info.position.y, info.position.z);
+      // rect.rotateY(info.rotateY);
+      Scene.add(rect);
+    };
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+      document.addEventListener('click', meshOnClick);
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      //   initModal('wushuichang', 'modelFiles/three_glb/3.gltf');
+      initModal('wushuichang', 'public/static/three_glb/ChangJing-comp.gltf');
+    });
+    onMounted(() => {
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+          // createWaterLevel();
+        }
+        document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+      document.removeEventListener('click', meshOnClick);
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+      meshOnClick,
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
index 4383d0d..dd36bc9 100644
--- a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
@@ -1,304 +1,374 @@
 <template>
-  <div id="emergency_video">
-    <div id="videoBox">
-      <!-- <div id="left_listBox" >
-        <div class="videoTable">
-          <n-tree
-            :data="treesData"
-            v-if="treesData.length"
-            :node-props="checkCamera"
-            block-line
-            :default-expanded-keys="defaultExpandedKeys"
-          />
-        </div>
-      </div> -->
-      <div id="right_videoWindow" v-if="showVideo">
-        <!-- 视频盒子 -->
-        <div id="playVideoNow" v-if="showVideo" class="videobox2"></div>
-      </div>
-    </div>
+  <div id="index">
+    <div ref="playWnd" :id="containerId" class="playWnd" v-html="AllData.oWebControl === null ? AllData.playText : ''"></div>
   </div>
 </template>
 
-<script>
-import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import { getCameraTree } from '@/services';
+<script setup name="index">
+import { ref, reactive, toRefs, onMounted } from 'vue';
+const props = defineProps({
+  // 内网、公网 4个配置
+  appkey: {
+    type: String,
+    default: () => '25124952',
+  },
+  secret: {
+    type: String,
+    default: () => 'aJOYWAt8CJabjjA1Ekeq',
+  },
+  ip: {
+    type: String,
+    default: () => '113.57.101.104',
+  },
+  port: {
+    type: Number,
+    default: () => 8888,
+  },
+  // 视频布局
+  layout: {
+    type: String,
+    default: () => '1x1',
+  },
+  // 初始播放模式：0-预览，1-回放
+  playMode: {
+    type: Number,
+    default: () => 0,
+  },
+  // 是否显示工具栏，0-不显示，非0-显示
+  showToolbar: {
+    type: Number,
+    default: () => 1,
+  },
+  // 工具栏按钮
+  toolBarButtonIDs: {
+    type: String,
+    default: () => '4098,4097',
+  },
+  // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
+  showSmart: {
+    type: Number,
+    default: () => 1,
+  },
+  // 自定义工具条按钮
+  buttonIDs: {
+    type: String,
+    default: () => '0,16,256,257,258,259,512,260,515,516,517,768,769',
+  },
+  // 相机编号
+  cameraIndexCode: {
+    type: [String, Number],
+  },
+  // 视频播放容器id
+  containerId: {
+    type: String,
+    default: () => 'playWnd',
+  },
+  // 默认打开的视频
+  defaultList: {
+    type: Array,
+    default: () => [],
+  },
+});
 
-export default {
-  name: 'emergency_video',
-  components: {},
-  setup() {
-    const allData = reactive({
-      showVideo: true,
-      constIndex: 1,
-      oWebControl: null,
-      plugKey: '',
-      Count: 0,
-      ifFirstTime: true,
-      videoWidth: 1400,
-      videoHeight: 750,
-      defaultExpandedKeys: ['root000000'], //默认展开节点
-      defaultCode: '', //默认监控点
-      showVideos: {
-        cameraIndexCode: 'e4a8bcca3393494bbdc9f2da087875bb', // 默认监控点编号
-        streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-        transMode: 1, // 传输协议：0-UDP，1-TCP
-        gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-        wndId: 1, // 播放窗口序号
-      },
-      treesData: [
-        {
-          label: '0',
-          key: '0',
-          click: false,
-          children: [
-            {
-              label: '组1',
-              key: '1-0',
-              click: false,
-              children: [
-                {
-                  label: '铁路桥',
-                  key: 'cf99e49a50f641ba83832dd5ebff3fa5',
-                  click: true,
-                },
-                {
-                  label: '王家墩',
-                  key: '4097ade6e64142d7ac7adff80b4617f0',
-                  click: true,
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    });
-    // 获取摄像头列表
-    const getVideoList = async () => {
-      allData.treesData = [];
-      let res = await getCameraTree();
-      if (res && res.code == 200) {
-        let datas = res.data;
-        // allData.defaultExpandedKeys.push(datas[0].key);
-        allData.treesData = datas;
+const AllData = reactive({
+  oWebControl: null,
+  plugKey: '',
+  // 视频相关参数
+  videoParams: {
+    cameraIndexCode: '', //监控点编号
+    streamMode: 0, //主子码流标识：0-主码流，1-子码流
+    transMode: 1, //传输协议：0-UDP，1-TCP
+    gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
+    wndId: 1, //播放窗口序号
+  },
+  videoWidth: null,
+  videoHeight: null,
+  playText: '启动中...',
+  initCount: 0, // 启动次数
+  href: '',
+});
+// 视频容器的ref对象
+const playWnd = ref(null);
+
+// 监听视频编码的改变(单个视频编码)
+watch(
+  () => props.cameraIndexCode,
+  (val) => {
+    if (props.cameraIndexCode) {
+      AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+      AllData.videoParams.wndId = -1;
+      if (AllData.oWebControl) {
+        previewVideo();
+      } else {
+        createdVideo();
       }
-    };
-    // 选择树结构的摄像头
-    const checkCamera = ({ option }) => {
-      return {
-        onClick() {
-          if (allData.showVideo != true) {
-            allData.showVideo = true;
-            allData.constIndex = 1;
-          } else {
-            allData.constIndex = -1;
-          }
-          console.log('option---', option);
-          // 只有子节点点击才能查看视频
-          if (option.click) {
-            allData.ifFirstTime = false;
-            allData.showVideos = {
-              cameraIndexCode: option.key, // 监控点编号
-              streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-              transMode: 1, // 传输协议：0-UDP，1-TCP
-              gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-              wndId: allData.constIndex, // 播放窗口序号
-            };
-            initVideo(allData.oWebControl);
-          }
-        },
-      };
-    };
-    /* 创建插件实例 */
-    function initPlugin() {
-      const dll = { dllPath: './VideoPluginConnect.dll' };
-      allData.oWebControl = new WebControl({
-        szPluginContainer: 'playVideoNow', // 指定容器id
-        iServicePortStart: 15900,
-        iServicePortEnd: 15909,
-        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    }
+  }
+);
+// 监听视频编码数组的改变(批量视频编码)
+watch(
+  () => props.defaultList,
+  (val) => {
+    if (props.defaultList.length > 0) {
+      PiLiangpreviewVideo();
+    }
+  }
+);
+// 监听布局修改
+watch(
+  () => props.layout,
+  (val) => {
+    setLayoutFunc();
+  }
+);
 
-        cbConnectSuccess: () => {
-          allData.oWebControl.JS_StartService('window', dll).then(() => {
-            // 设置视频 web 插件消息回调
-            allData.oWebControl.JS_SetWindowControlCallback({
-              cbIntegrationCallBack: (msg) => {
-                //注：不能使用外部函数调用，无效
-                if (msg?.responseMsg?.msg?.result) {
-                  const { result } = msg.responseMsg.msg;
-                  if (result == 1024) {
-                    allData.oWebControl.JS_HideWnd(); //放大隐藏其它视频窗口
-                  } else if (result == 1025) {
-                    allData.oWebControl.JS_ShowWnd(); //缩小显示全部窗口
-                  }
-                }
-              },
-            });
-            // 启动插件服务成功
-            allData.oWebControl.JS_CreateWnd('playVideoNow', allData.videoWidth, allData.videoHeight).then(() => {
-              // JS_CreateWnd创建视频播放窗口，宽高可设定
-              initVideo(allData.oWebControl); // 创建播放实例成功后初始化
-              console.log('启动插件成功！');
-            });
+// 创建播放实例
+const initPlugin = (callback) => {
+  AllData.oWebControl = new WebControl({
+    szPluginContainer: props.containerId, // 指定容器id
+    iServicePortStart: 15900,
+    iServicePortEnd: 15909,
+    szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    // 创建WebControl实例成功
+    cbConnectSuccess: () => {
+      AllData.oWebControl
+        .JS_StartService('window', {
+          // WebControl实例创建成功后需要启动服务
+          dllPath: './VideoPluginConnect.dll',
+        })
+        .then(() => {
+          // 启动插件服务成功
+          AllData.oWebControl.JS_SetWindowControlCallback({
+            // 设置消息回调
+            cbIntegrationCallBack: cbIntegrationCallBack,
           });
-        },
-        // 插件服务启动失败，弹框提示
-        cbConnectError: () => {
-          allData.oWebControl = null;
+          AllData.oWebControl.JS_CreateWnd(props.containerId, AllData.videoWidth, AllData.videoHeight).then(() => {
+            getVersion(callback);
+          });
+        });
+    },
+    cbConnectError: () => {
+      // 创建WebControl实例失败
+      AllData.oWebControl = null;
+      AllData.playText = '插件未启动，正在尝试启动，请稍候...';
+      WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
+      AllData.initCount++;
+      if (AllData.initCount < 3) {
+        setTimeout(() => {
+          initPlugin();
+        }, 3000);
+      } else {
+        AllData.playText = `
+              插件启动失败，请检查插件是否安装！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+      }
+    },
+    cbConnectClose: () => {
+      AllData.oWebControl = null;
+    },
+  });
+};
 
-          allData.Count++;
-          if (allData.Count < 2) {
-            WebControl.JS_WakeUp('VideoWebPlugin://');
-            setTimeout(() => {
-              initPlugin();
-            }, 8000);
-          } else {
-          }
-          console.log('创建插件失败');
-        },
-      });
-    }
-    /* 获取公钥 */
-    function initVideo(oWebControl) {
-      const params = {
-        funcName: 'getRSAPubKey',
-        argument: JSON.stringify({ keyLength: 1024 }),
-      };
-      oWebControl.JS_RequestInterface(params).then((res) => {
-        if (res.responseMsg.data) {
-          allData.plugKey = res.responseMsg.data;
-          getVideoConfig(oWebControl);
-        }
-      });
-    }
-    /* 视频插件配置  插件初始化 */
-    function getVideoConfig(oWebControl) {
-      const configObj = {
+// HK插件控制监听的消息回调
+const cbIntegrationCallBack = (oData) => {
+  console.log(oData);
+  if (oData.responseMsg.type == 6) {
+    // 此时是当前画幅的数据
+    console.log(`当前画面的画幅是` + oData.responseMsg.msg.layout, oData.responseMsg.msg.wndNum);
+    localStorage.setItem('HKlayout', oData.responseMsg.msg.layout);
+    localStorage.setItem('HKwndNum', oData.responseMsg.msg.wndNum);
+  }
+};
+
+// 初始化
+const init = (callback) => {
+  getPubKey(() => {
+    AllData.oWebControl
+      .JS_RequestInterface({
         funcName: 'init',
         argument: JSON.stringify({
-          appkey: '26265267', // API网关提供的appkey 26265267
-          secret: setEncrypt('CHtVgUwdLsJjE6CWYLMy'), // API网关提供的secret  CHtVgUwdLsJjE6CWYLMy
-          ip: '192.168.10.49', // API网关IP地址 192.168.10.49
-          port: 443, // 端口
-          playMode: 0, // 播放模式 0-预览，1-回放
-          snapDir: 'D:\\SnapDir', // 抓图存储路径
-          videoDir: 'D:\\VideoDir', // 紧急录像或录像剪辑存储路径
-          layout: '1x1', // 布局
-          enableHTTPS: 1, // 是否启用HTTPS协议 0https 1http
-          encryptedFields: 'secret', // 加密字段
-          showToolbar: 1, // 是否显示工具栏
-          showSmart: 1, // 是否显示智能信息
-          buttonIDs: '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769', // 自定义工具条按钮 新的
+          appkey: props.appkey, //API网关提供的appkey
+          secret: setEncrypt(props.secret), //API网关提供的secret
+          ip: props.ip, //API网关IP地址z
+          playMode: props.playMode, //播放模式（决定显示预览还是回放界面）
+          port: props.port, //端口
+          snapDir: 'C:\\SnapDir', //抓图存储路径
+          videoDir: 'C:\\VideoDir', //紧急录像或录像剪辑存储路径
+          layout: props.layout, //布局
+          enableHTTPS: 1, //是否启用HTTPS协议
+          encryptedFields: 'secret', //加密字段
+          showToolbar: props.showToolbar, //是否显示工具栏
+          toolBarButtonIDs: props.toolBarButtonIDs,
+          showSmart: props.showSmart, //是否显示智能信息
+          buttonIDs: props.buttonIDs, //自定义工具条按钮
+          protocol: 'hls',
         }),
-      };
-      oWebControl.JS_RequestInterface(configObj).then(() => {
-        oWebControl.JS_Resize(allData.videoWidth, allData.videoHeight);
-        // 初次加载时，显示默认多个，点击时单个加载
-        if (allData.ifFirstTime) {
-          getClickMoreAction();
-        } else {
-          allData.constIndex = -1;
-          getClickAction();
+      })
+      .then(() => {
+        AllData.videoWidth = playWnd.value.offsetWidth;
+        AllData.videoHeight = playWnd.value.offsetHeight;
+        // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+        AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+        // 判断当前cameraIndexCode中是否有数据 有数据的话就直接进行播放
+        if (props.defaultList.length > 0) {
+          // 批量渲染
+          PiLiangpreviewVideo();
+        } else if (props.cameraIndexCode.length > 0) {
+          // 单独渲染
+          AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+          previewVideo();
+        }
+        if (callback) {
+          callback();
         }
       });
-    }
-    /* 视频流RSA加密 */
-    function setEncrypt(value) {
-      const encrypt = new JSEncrypt();
-      encrypt.setPublicKey(allData.plugKey);
-      return encrypt.encrypt(value);
-    }
-    /* 视频预览 */
-    function getClickAction() {
-      console.log(allData.showVideos, 'showVideos');
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startPreview',
-        argument: JSON.stringify(allData.showVideos),
-      });
-    }
-    // 默认打开多个视频预览
-    function getClickMoreAction() {
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startMultiPreviewByCameraIndexCode',
-        argument: {
-          list: [
-            {
-              cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-              ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-              gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-              streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-              transMode: 1, // 传输协议 0-UDP 1-TCP
-              wndId: 1, // 播放窗口序号
-            },
-            // {
-            //   cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-            //   ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-            //   gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-            //   streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-            //   transMode: 1, // 传输协议 0-UDP 1-TCP
-            //   wndId: 2, // 播放窗口序号
-            // },
-          ],
-        },
-      });
-    }
-    onMounted(() => {
-      // getVideoList();
-      // 获取默认的监控点编号
-      let codes = localStorage.getItem('defaultVideoCode');
-      allData.defaultCode = codes ? codes : 'edaea623e40f45df8b1f3676aa283a79';
-      // 动态获取宽度
-
-      // 批量视频预览
-      allData.ifFirstTime = true;
-      allData.videoWidth = 620;
-      allData.videoHeight = 410;
-      initPlugin();
-    });
-    onBeforeUnmount(() => {
-      if (allData.oWebControl) {
-        allData.oWebControl.JS_HideWnd();
-        allData.oWebControl.JS_DestroyWnd();
-        allData.oWebControl = null;
-        allData.showVideo = false;
-      }
-    });
-
-    return {
-      ...toRefs(allData),
-      checkCamera,
-      initPlugin,
-      initVideo,
-      setEncrypt,
-      getVideoConfig,
-      getVideoList,
-    };
-  },
+  });
 };
-</script>
-<style lang="less">
-#emergency_video {
-  width: 620px;
-  height: 440px;
-  overflow: hidden;
+// 获取公钥
+const getPubKey = (callback) => {
+  const params = {
+    funcName: 'getRSAPubKey',
+    argument: JSON.stringify({ keyLength: 1024 }),
+  };
+  AllData.oWebControl.JS_RequestInterface(params).then((res) => {
+    if (res.responseMsg.data) {
+      AllData.plugKey = res.responseMsg.data;
+      callback();
+    }
+  });
+};
+// 视频流RSA加密
+const setEncrypt = (value) => {
+  const encrypt = new JSEncrypt();
+  encrypt.setPublicKey(AllData.plugKey);
+  return encrypt.encrypt(value);
+};
 
-  #videoBox {
+// 视频预览
+const previewVideo = () => {
+  console.log(AllData.videoParams, '单个视频播放');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startPreview',
+    argument: JSON.stringify(AllData.videoParams),
+  });
+};
+// 批量预览
+const PiLiangpreviewVideo = () => {
+  console.log(props.defaultList, '批量批量批量');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startMultiPreviewByCameraIndexCode',
+    argument: {
+      list: props.defaultList,
+    },
+  });
+};
+// 显示全屏
+const showFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setFullScreen',
+  });
+};
+// 退出全屏
+const exitFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'exitFullScreen',
+  });
+};
+const windowScroll = () => {
+  if (AllData.oWebControl != null) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 获取HK父节点的宽高
+const windowResize = () => {
+  AllData.videoWidth = playWnd.value.offsetWidth;
+  AllData.videoHeight = playWnd.value.offsetHeight;
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 销毁海康插件
+const destroyeWnd = () => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl.JS_Disconnect().then(() => {});
+  }
+};
+// 获取海康插件版本号
+const getVersion = (callback) => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl
+      .JS_RequestInterface({
+        funcName: 'getVersion',
+      })
+      .then((res) => {
+        if (res.responseMsg.code === 0 && res.responseMsg.data === 'V1.5.1') {
+          //JS_CreateWnd创建视频播放窗口，宽高可设定
+          init(callback); // 创建播放实例成功后初始化
+          console.log('启动插件成功！');
+        } else {
+          destroyeWnd();
+          AllData.playText = `
+              插件版本不正确，请重新下载版本安装覆盖！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+        }
+      });
+  }
+};
+// 切换布局
+const setLayoutFunc = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setLayout',
+    argument: {
+      layout: props.layout, // 窗口布局
+    },
+  });
+  if (props.layout != '1x1') {
+    // 先清除所有画面
+    clearShiPing();
+  }
+};
+// 销毁当前正在播放的所有画面
+const clearShiPing = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'stopAllPreview',
+  });
+  AllData.videoParams.wndId = 0;
+};
+// 初始化
+const createdVideo = () => {
+  initPlugin(() => {});
+};
+onMounted(() => {
+  // 创建实例
+  initPlugin();
+
+  // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
+  window.addEventListener('resize', windowResize());
+  // // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
+  window.addEventListener('scroll', windowResize());
+});
+onBeforeUnmount(() => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl
+      .JS_DestroyWnd({
+        funcName: 'destroyeWnd',
+      })
+      .then(() => {});
+  }
+  document.removeEventListener('resize', windowResize());
+  document.removeEventListener('scroll', windowScroll());
+});
+</script>
+
+<style lang="less" scoped>
+#index {
+  width: 100%;
+  height: 100%;
+  .playWnd {
     width: 100%;
     height: 100%;
-
-    #right_videoWindow {
-      width: 100%;
-      height: 100%;
-      .videobox2 {
-        width: 100%;
-        height: 100%;
-      }
-      #playVideoNow {
-        img {
-          display: none;
-        }
-      }
-    }
   }
 }
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/HPModal b/src/pages/views/WatershedOneMap/modalPart/modal/HPModal
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/HPModal
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE b/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE

diff --git a/package-lock.json b/package-lock.json
index 194a73a..5b0cf78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "cesium": "^1.117.0",
         "echarts": "^5.2.2",
         "esbuild-windows-64": "^0.14.11",
+        "gsap": "^3.9.1",
         "highcharts": "^9.3.2",
         "hls.js": "^1.5.13",
         "import-three-examples": "^2.2.4",
@@ -1080,12 +1081,14 @@
     "node_modules/@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -2731,6 +2734,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "node_modules/gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5401,15 +5409,13 @@
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz",
       "integrity": "sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@css-render/vue3-ssr": {
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz",
       "integrity": "sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@emotion/hash": {
       "version": "0.8.0",
@@ -5841,12 +5847,14 @@
     "@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "requires": {
         "@types/lodash": "*"
       }
@@ -5963,8 +5971,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz",
       "integrity": "sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "1.3.10",
@@ -6167,32 +6174,27 @@
     "@wangeditor/editor-for-vue": {
       "version": "5.1.12",
       "resolved": "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-5.1.12.tgz",
-      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==",
-      "requires": {}
+      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ=="
     },
     "@wangeditor/list-module": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.2.tgz",
-      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg==",
-      "requires": {}
+      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg=="
     },
     "@wangeditor/table-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.1.tgz",
-      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA==",
-      "requires": {}
+      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA=="
     },
     "@wangeditor/upload-image-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz",
-      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w==",
-      "requires": {}
+      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w=="
     },
     "@wangeditor/video-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.1.tgz",
-      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg==",
-      "requires": {}
+      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg=="
     },
     "@xmldom/xmldom": {
       "version": "0.8.10",
@@ -6523,8 +6525,7 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.4.tgz",
       "integrity": "sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "debug": {
       "version": "4.3.4",
@@ -7034,6 +7035,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -7451,8 +7457,7 @@
     "lodash-unified": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-      "requires": {}
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7894,8 +7899,7 @@
         "vue-demi": {
           "version": "0.13.5",
           "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.5.tgz",
-          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==",
-          "requires": {}
+          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
         }
       }
     },
diff --git a/package.json b/package.json
index a096642..0f3893d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "cesium": "^1.117.0",
     "echarts": "^5.2.2",
     "esbuild-windows-64": "^0.14.11",
+    "gsap": "^3.9.1",
     "highcharts": "^9.3.2",
     "hls.js": "^1.5.13",
     "import-three-examples": "^2.2.4",
diff --git a/src/pages/views/WatershedOneMap/OneMapModal.vue b/src/pages/views/WatershedOneMap/OneMapModal.vue
index b4f4e48..861db2b 100644
--- a/src/pages/views/WatershedOneMap/OneMapModal.vue
+++ b/src/pages/views/WatershedOneMap/OneMapModal.vue
@@ -94,13 +94,41 @@
     <n-modal v-model:show="showModalBZ" :show-icon="false" :mask-closable="false" preset="dialog" :title="BZtitle" style="width: 680px">
       <BengZModal :valueModalbz="valueModalbz" />
     </n-modal>
+
+    <div class="mask" v-if="maskcbwsc">
+      <div id="ShowBox">
+        <div class="ShowBoxname">后湖泵站模型</div>
+        <n-icon @click.stop="ShowInfo" size="40">
+          <Close />
+        </n-icon>
+      </div>
+      <cbwsc> </cbwsc>
+      <div class="bengji">
+        <div id="lableBox" class="lableBox">
+          <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id">
+            <div class="outer">
+              <div class="title">{{ item.name }}</div>
+              <ul>
+                <li v-for="(v, j) in item.data" :key="j">
+                  <span class="pointName">{{ v.pointName }}</span>
+                  <span class="value">{{ v.value }}</span>
+                </li>
+              </ul>
+              <div class="triangle"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Hls from 'hls.js';
 import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
+import { Close } from '@vicons/ionicons5';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import cbwsc from './modalPart/cbwsc.vue'; //三维
 import BengZModal from './modalPart/modal/BengZModal.vue'; //湖泊监测弹窗
 import MapBox from './modalPart/Mapbox.vue';
 import OnePart from './modalPart/natureNet.vue'; //全域感知
@@ -128,11 +156,178 @@
     Legend,
     Vue3SeamlessScroll,
     BengZModal,
+    cbwsc,
+    Close,
   },
   setup() {
     let hls = null;
     let hls1 = null;
     const allData = reactive({
+      labelData: [
+        {
+          name: '1#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '开',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '2#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '3#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '4#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '5#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '6#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '--HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '--A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '--V',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      maskcbwsc: false,
       indexCode: '',
       indexCode1: '',
       videoname: '',
@@ -158,7 +353,7 @@
       dateNumber: 0,
       timer: null,
       ifPlay: false,
-      currentVal: '全域感知',
+      currentVal: '规划引领',
       datearry: [],
       dateTime: [],
       dateLine: formatDate(Date.now() - 24 * 30 * 60 * 60 * 1000, 'YYYY-MM-DD'),
@@ -545,6 +740,9 @@
         hls1.destroy();
       }
     };
+    const ShowInfo = () => {
+      allData.maskcbwsc = false;
+    };
     onMounted(() => {
       // getFooterList();
       // 设置视频监控默认显示的code
@@ -558,6 +756,9 @@
       bus.on('datelist', (e) => {
         allData.datearry = e;
       });
+      bus.on('weather', (e) => {
+        allData.maskcbwsc = true;
+      });
       // 控制播放雨量图例显示
       bus.on('ifQixiang', (e) => {
         if (e) {
@@ -618,6 +819,8 @@
         hls1.destroy();
       }
       clearTimer();
+
+      bus.off('weather');
       bus.off('getGongYt');
       bus.off('ifQixiang');
       bus.off('ifStationWarn');
@@ -639,12 +842,13 @@
       bfvideo,
       bfvideo1,
       handleModalChange,
+      ShowInfo,
     };
   },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .dialogGYT {
   display: flex;
   .imgs {
@@ -840,4 +1044,88 @@
   left: 10px;
   bottom: 5px;
 }
+.mask {
+  position: fixed;
+  width: calc(100% - 100px);
+  margin: 0 50px;
+  height: calc(92vh - 10px);
+  background-color: rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: 20px;
+  z-index: 999999999;
+  // position: fixed;
+  // width: 200px;
+  // height: 200px;
+  // background-color: rgba(0, 0, 0, 0.5);
+  // right: 400px;
+  // bottom: 0;
+  // z-index: 999999999;
+  .bengji {
+    position: relative;
+    bottom: 145px;
+    width: 60%;
+    left: 20%;
+    right: 20%;
+    .lableBox {
+      display: flex;
+      height: 100%;
+    }
+    .label {
+      display: flex;
+      padding: 10px;
+      z-index: 9999 !important;
+      width: 200px;
+
+      .title {
+        line-height: 30px;
+        font-size: 14px;
+        padding: 0 10px;
+        border-bottom: 1px solid #e7f1ff;
+        color: turquoise;
+      }
+
+      ul {
+        li {
+          padding: 0 10px;
+          line-height: 26px;
+          display: flex;
+          justify-content: space-between;
+
+          &:nth-child(2n) {
+            background: #e7f1ff;
+          }
+
+          .pointName {
+            color: #888;
+          }
+
+          .value {
+            color: #0066ff;
+          }
+        }
+      }
+
+      .outer {
+        top: 0;
+        left: 0;
+        width: 140px;
+        border-radius: 10px;
+        box-shadow: -2px 0 20px #0060ff;
+        background: rgba(255, 255, 255, 0.712);
+      }
+    }
+  }
+  #ShowBox {
+    display: flex;
+    justify-content: space-between;
+    color: #ffffff;
+    margin-left: 20px;
+    cursor: pointer;
+    .ShowBoxname {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/Popup.vue b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
index 77eea0d..46a5863 100644
--- a/src/pages/views/WatershedOneMap/modalPart/Popup.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
@@ -102,6 +102,9 @@
         <div class="part gongyt" v-if="popupInfo.url">
           <div class="value" @click.stop="checkGyt(popupInfo)">查看工艺图</div>
         </div>
+        <div class="part" style="cursor: pointer" v-if="popupInfo.name.includes('后湖泵站')">
+          <div class="name" @click.stop="handlesweath()">查看模型</div>
+        </div>
         <!-- 雨量站、雨量计历史数据 -->
         <div class="part" v-show="popupInfo.name.includes('雨量站')">
           <div class="name" style="width: 100%">降雨历史数据:</div>
@@ -220,6 +223,10 @@
     async function checkGyt(popupInfo) {
       bus.emit('getGongYt', popupInfo);
     }
+
+    const handlesweath = (data) => {
+      bus.emit('weather', data);
+    };
     // 降雨历史数据
     const echartRain = async () => {
       let chart = document.getElementById('echartHistory');
@@ -297,6 +304,7 @@
       ...toRefs(allData),
       closepopupdefect,
       checkGyt,
+      handlesweath,
     };
   },
 });
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
new file mode 100644
index 0000000..993d0af
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
@@ -0,0 +1,599 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('/modelFilesJson/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    // const hdr = '/modelFilesJson/three_glb/kloppenheim_061_4k.hdr';
+    const hdr = './static/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+
+    // 标注水位
+
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      // initModal('wushuichang', '/modelFiles/three_glb/3.gltf');
+      // initModal('wushuichang', 'public/static/three_glb/3.gltf');
+    });
+    onMounted(() => {
+      initModal('wushuichang', './static/three_glb/3.gltf');
+      // initModal('wushuichang', '/modelFilesJson/three_glb/3.gltf');
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+        }
+        // document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
new file mode 100644
index 0000000..8b4cac2
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
@@ -0,0 +1,652 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('modelFiles/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    const hdr = 'modelFiles/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+    const meshOnClick = (event) => {
+      let raycaster = new THREE.Raycaster();
+      const pointer = new THREE.Vector2();
+      console.log(event.clientX, event.clientY);
+      let Top = 60,
+        Left = 60;
+      pointer.x = ((event.clientX - Left) / state.width) * 2 - 1;
+      pointer.y = -((event.clientY - Top) / state.height) * 2 + 1;
+      raycaster.setFromCamera(pointer, state.Camera);
+      let intersects = raycaster.intersectObjects(state.granaryArr, true);
+      console.log(intersects);
+      console.log('------', state.Camera.position);
+      if (intersects.length > 0) {
+        console.log(intersects[0].object);
+      } else {
+        console.log('NoNoNo');
+      }
+    };
+    // 标注水位
+    const createWaterLevel = () => {
+      let info = {
+        name: 'text',
+        text: ' 水位: 0.5M ',
+        fontsize: 30,
+        Color: 'green',
+        backgroundColor: 'rgba(0,0,0,0)',
+        position: { x: 2, y: 10, z: 0 },
+        fillRect: { x: 0, y: 0, w: 300, h: 60 },
+        // rotateY: -180,
+      };
+      let canvas = document.createElement('canvas');
+      let ctx = canvas.getContext('2d');
+      //制作矩形
+      ctx.fillStyle = info.backgroundColor;
+      ctx.fillRect(info.fillRect.x, info.fillRect.y, info.fillRect.w, info.fillRect.h);
+      //设置文字
+      ctx.fillStyle = info.Color;
+      ctx.font = `normal ${info.fontsize}px "楷体"`;
+      let textWord = info.text;
+      ctx.fillText(textWord, 10, 40);
+      //生成图片
+      let url = canvas.toDataURL('image/png');
+      //将图片构建到纹理中
+      let geometry1 = new THREE.PlaneGeometry(20, 10);
+      let texture = THREE.ImageUtils.loadTexture(url, null, function (t) {});
+
+      let material1 = new THREE.MeshBasicMaterial({
+        map: texture,
+        side: THREE.DoubleSide,
+        opacity: 1,
+        transparent: true,
+      });
+      let rect = new THREE.Mesh(geometry1, material1);
+      rect.name = info.name;
+      rect.position.set(info.position.x, info.position.y, info.position.z);
+      // rect.rotateY(info.rotateY);
+      Scene.add(rect);
+    };
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+      document.addEventListener('click', meshOnClick);
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      //   initModal('wushuichang', 'modelFiles/three_glb/3.gltf');
+      initModal('wushuichang', 'public/static/three_glb/ChangJing-comp.gltf');
+    });
+    onMounted(() => {
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+          // createWaterLevel();
+        }
+        document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+      document.removeEventListener('click', meshOnClick);
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+      meshOnClick,
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
index 4383d0d..dd36bc9 100644
--- a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
@@ -1,304 +1,374 @@
 <template>
-  <div id="emergency_video">
-    <div id="videoBox">
-      <!-- <div id="left_listBox" >
-        <div class="videoTable">
-          <n-tree
-            :data="treesData"
-            v-if="treesData.length"
-            :node-props="checkCamera"
-            block-line
-            :default-expanded-keys="defaultExpandedKeys"
-          />
-        </div>
-      </div> -->
-      <div id="right_videoWindow" v-if="showVideo">
-        <!-- 视频盒子 -->
-        <div id="playVideoNow" v-if="showVideo" class="videobox2"></div>
-      </div>
-    </div>
+  <div id="index">
+    <div ref="playWnd" :id="containerId" class="playWnd" v-html="AllData.oWebControl === null ? AllData.playText : ''"></div>
   </div>
 </template>
 
-<script>
-import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import { getCameraTree } from '@/services';
+<script setup name="index">
+import { ref, reactive, toRefs, onMounted } from 'vue';
+const props = defineProps({
+  // 内网、公网 4个配置
+  appkey: {
+    type: String,
+    default: () => '25124952',
+  },
+  secret: {
+    type: String,
+    default: () => 'aJOYWAt8CJabjjA1Ekeq',
+  },
+  ip: {
+    type: String,
+    default: () => '113.57.101.104',
+  },
+  port: {
+    type: Number,
+    default: () => 8888,
+  },
+  // 视频布局
+  layout: {
+    type: String,
+    default: () => '1x1',
+  },
+  // 初始播放模式：0-预览，1-回放
+  playMode: {
+    type: Number,
+    default: () => 0,
+  },
+  // 是否显示工具栏，0-不显示，非0-显示
+  showToolbar: {
+    type: Number,
+    default: () => 1,
+  },
+  // 工具栏按钮
+  toolBarButtonIDs: {
+    type: String,
+    default: () => '4098,4097',
+  },
+  // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
+  showSmart: {
+    type: Number,
+    default: () => 1,
+  },
+  // 自定义工具条按钮
+  buttonIDs: {
+    type: String,
+    default: () => '0,16,256,257,258,259,512,260,515,516,517,768,769',
+  },
+  // 相机编号
+  cameraIndexCode: {
+    type: [String, Number],
+  },
+  // 视频播放容器id
+  containerId: {
+    type: String,
+    default: () => 'playWnd',
+  },
+  // 默认打开的视频
+  defaultList: {
+    type: Array,
+    default: () => [],
+  },
+});
 
-export default {
-  name: 'emergency_video',
-  components: {},
-  setup() {
-    const allData = reactive({
-      showVideo: true,
-      constIndex: 1,
-      oWebControl: null,
-      plugKey: '',
-      Count: 0,
-      ifFirstTime: true,
-      videoWidth: 1400,
-      videoHeight: 750,
-      defaultExpandedKeys: ['root000000'], //默认展开节点
-      defaultCode: '', //默认监控点
-      showVideos: {
-        cameraIndexCode: 'e4a8bcca3393494bbdc9f2da087875bb', // 默认监控点编号
-        streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-        transMode: 1, // 传输协议：0-UDP，1-TCP
-        gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-        wndId: 1, // 播放窗口序号
-      },
-      treesData: [
-        {
-          label: '0',
-          key: '0',
-          click: false,
-          children: [
-            {
-              label: '组1',
-              key: '1-0',
-              click: false,
-              children: [
-                {
-                  label: '铁路桥',
-                  key: 'cf99e49a50f641ba83832dd5ebff3fa5',
-                  click: true,
-                },
-                {
-                  label: '王家墩',
-                  key: '4097ade6e64142d7ac7adff80b4617f0',
-                  click: true,
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    });
-    // 获取摄像头列表
-    const getVideoList = async () => {
-      allData.treesData = [];
-      let res = await getCameraTree();
-      if (res && res.code == 200) {
-        let datas = res.data;
-        // allData.defaultExpandedKeys.push(datas[0].key);
-        allData.treesData = datas;
+const AllData = reactive({
+  oWebControl: null,
+  plugKey: '',
+  // 视频相关参数
+  videoParams: {
+    cameraIndexCode: '', //监控点编号
+    streamMode: 0, //主子码流标识：0-主码流，1-子码流
+    transMode: 1, //传输协议：0-UDP，1-TCP
+    gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
+    wndId: 1, //播放窗口序号
+  },
+  videoWidth: null,
+  videoHeight: null,
+  playText: '启动中...',
+  initCount: 0, // 启动次数
+  href: '',
+});
+// 视频容器的ref对象
+const playWnd = ref(null);
+
+// 监听视频编码的改变(单个视频编码)
+watch(
+  () => props.cameraIndexCode,
+  (val) => {
+    if (props.cameraIndexCode) {
+      AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+      AllData.videoParams.wndId = -1;
+      if (AllData.oWebControl) {
+        previewVideo();
+      } else {
+        createdVideo();
       }
-    };
-    // 选择树结构的摄像头
-    const checkCamera = ({ option }) => {
-      return {
-        onClick() {
-          if (allData.showVideo != true) {
-            allData.showVideo = true;
-            allData.constIndex = 1;
-          } else {
-            allData.constIndex = -1;
-          }
-          console.log('option---', option);
-          // 只有子节点点击才能查看视频
-          if (option.click) {
-            allData.ifFirstTime = false;
-            allData.showVideos = {
-              cameraIndexCode: option.key, // 监控点编号
-              streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-              transMode: 1, // 传输协议：0-UDP，1-TCP
-              gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-              wndId: allData.constIndex, // 播放窗口序号
-            };
-            initVideo(allData.oWebControl);
-          }
-        },
-      };
-    };
-    /* 创建插件实例 */
-    function initPlugin() {
-      const dll = { dllPath: './VideoPluginConnect.dll' };
-      allData.oWebControl = new WebControl({
-        szPluginContainer: 'playVideoNow', // 指定容器id
-        iServicePortStart: 15900,
-        iServicePortEnd: 15909,
-        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    }
+  }
+);
+// 监听视频编码数组的改变(批量视频编码)
+watch(
+  () => props.defaultList,
+  (val) => {
+    if (props.defaultList.length > 0) {
+      PiLiangpreviewVideo();
+    }
+  }
+);
+// 监听布局修改
+watch(
+  () => props.layout,
+  (val) => {
+    setLayoutFunc();
+  }
+);
 
-        cbConnectSuccess: () => {
-          allData.oWebControl.JS_StartService('window', dll).then(() => {
-            // 设置视频 web 插件消息回调
-            allData.oWebControl.JS_SetWindowControlCallback({
-              cbIntegrationCallBack: (msg) => {
-                //注：不能使用外部函数调用，无效
-                if (msg?.responseMsg?.msg?.result) {
-                  const { result } = msg.responseMsg.msg;
-                  if (result == 1024) {
-                    allData.oWebControl.JS_HideWnd(); //放大隐藏其它视频窗口
-                  } else if (result == 1025) {
-                    allData.oWebControl.JS_ShowWnd(); //缩小显示全部窗口
-                  }
-                }
-              },
-            });
-            // 启动插件服务成功
-            allData.oWebControl.JS_CreateWnd('playVideoNow', allData.videoWidth, allData.videoHeight).then(() => {
-              // JS_CreateWnd创建视频播放窗口，宽高可设定
-              initVideo(allData.oWebControl); // 创建播放实例成功后初始化
-              console.log('启动插件成功！');
-            });
+// 创建播放实例
+const initPlugin = (callback) => {
+  AllData.oWebControl = new WebControl({
+    szPluginContainer: props.containerId, // 指定容器id
+    iServicePortStart: 15900,
+    iServicePortEnd: 15909,
+    szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    // 创建WebControl实例成功
+    cbConnectSuccess: () => {
+      AllData.oWebControl
+        .JS_StartService('window', {
+          // WebControl实例创建成功后需要启动服务
+          dllPath: './VideoPluginConnect.dll',
+        })
+        .then(() => {
+          // 启动插件服务成功
+          AllData.oWebControl.JS_SetWindowControlCallback({
+            // 设置消息回调
+            cbIntegrationCallBack: cbIntegrationCallBack,
           });
-        },
-        // 插件服务启动失败，弹框提示
-        cbConnectError: () => {
-          allData.oWebControl = null;
+          AllData.oWebControl.JS_CreateWnd(props.containerId, AllData.videoWidth, AllData.videoHeight).then(() => {
+            getVersion(callback);
+          });
+        });
+    },
+    cbConnectError: () => {
+      // 创建WebControl实例失败
+      AllData.oWebControl = null;
+      AllData.playText = '插件未启动，正在尝试启动，请稍候...';
+      WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
+      AllData.initCount++;
+      if (AllData.initCount < 3) {
+        setTimeout(() => {
+          initPlugin();
+        }, 3000);
+      } else {
+        AllData.playText = `
+              插件启动失败，请检查插件是否安装！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+      }
+    },
+    cbConnectClose: () => {
+      AllData.oWebControl = null;
+    },
+  });
+};
 
-          allData.Count++;
-          if (allData.Count < 2) {
-            WebControl.JS_WakeUp('VideoWebPlugin://');
-            setTimeout(() => {
-              initPlugin();
-            }, 8000);
-          } else {
-          }
-          console.log('创建插件失败');
-        },
-      });
-    }
-    /* 获取公钥 */
-    function initVideo(oWebControl) {
-      const params = {
-        funcName: 'getRSAPubKey',
-        argument: JSON.stringify({ keyLength: 1024 }),
-      };
-      oWebControl.JS_RequestInterface(params).then((res) => {
-        if (res.responseMsg.data) {
-          allData.plugKey = res.responseMsg.data;
-          getVideoConfig(oWebControl);
-        }
-      });
-    }
-    /* 视频插件配置  插件初始化 */
-    function getVideoConfig(oWebControl) {
-      const configObj = {
+// HK插件控制监听的消息回调
+const cbIntegrationCallBack = (oData) => {
+  console.log(oData);
+  if (oData.responseMsg.type == 6) {
+    // 此时是当前画幅的数据
+    console.log(`当前画面的画幅是` + oData.responseMsg.msg.layout, oData.responseMsg.msg.wndNum);
+    localStorage.setItem('HKlayout', oData.responseMsg.msg.layout);
+    localStorage.setItem('HKwndNum', oData.responseMsg.msg.wndNum);
+  }
+};
+
+// 初始化
+const init = (callback) => {
+  getPubKey(() => {
+    AllData.oWebControl
+      .JS_RequestInterface({
         funcName: 'init',
         argument: JSON.stringify({
-          appkey: '26265267', // API网关提供的appkey 26265267
-          secret: setEncrypt('CHtVgUwdLsJjE6CWYLMy'), // API网关提供的secret  CHtVgUwdLsJjE6CWYLMy
-          ip: '192.168.10.49', // API网关IP地址 192.168.10.49
-          port: 443, // 端口
-          playMode: 0, // 播放模式 0-预览，1-回放
-          snapDir: 'D:\\SnapDir', // 抓图存储路径
-          videoDir: 'D:\\VideoDir', // 紧急录像或录像剪辑存储路径
-          layout: '1x1', // 布局
-          enableHTTPS: 1, // 是否启用HTTPS协议 0https 1http
-          encryptedFields: 'secret', // 加密字段
-          showToolbar: 1, // 是否显示工具栏
-          showSmart: 1, // 是否显示智能信息
-          buttonIDs: '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769', // 自定义工具条按钮 新的
+          appkey: props.appkey, //API网关提供的appkey
+          secret: setEncrypt(props.secret), //API网关提供的secret
+          ip: props.ip, //API网关IP地址z
+          playMode: props.playMode, //播放模式（决定显示预览还是回放界面）
+          port: props.port, //端口
+          snapDir: 'C:\\SnapDir', //抓图存储路径
+          videoDir: 'C:\\VideoDir', //紧急录像或录像剪辑存储路径
+          layout: props.layout, //布局
+          enableHTTPS: 1, //是否启用HTTPS协议
+          encryptedFields: 'secret', //加密字段
+          showToolbar: props.showToolbar, //是否显示工具栏
+          toolBarButtonIDs: props.toolBarButtonIDs,
+          showSmart: props.showSmart, //是否显示智能信息
+          buttonIDs: props.buttonIDs, //自定义工具条按钮
+          protocol: 'hls',
         }),
-      };
-      oWebControl.JS_RequestInterface(configObj).then(() => {
-        oWebControl.JS_Resize(allData.videoWidth, allData.videoHeight);
-        // 初次加载时，显示默认多个，点击时单个加载
-        if (allData.ifFirstTime) {
-          getClickMoreAction();
-        } else {
-          allData.constIndex = -1;
-          getClickAction();
+      })
+      .then(() => {
+        AllData.videoWidth = playWnd.value.offsetWidth;
+        AllData.videoHeight = playWnd.value.offsetHeight;
+        // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+        AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+        // 判断当前cameraIndexCode中是否有数据 有数据的话就直接进行播放
+        if (props.defaultList.length > 0) {
+          // 批量渲染
+          PiLiangpreviewVideo();
+        } else if (props.cameraIndexCode.length > 0) {
+          // 单独渲染
+          AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+          previewVideo();
+        }
+        if (callback) {
+          callback();
         }
       });
-    }
-    /* 视频流RSA加密 */
-    function setEncrypt(value) {
-      const encrypt = new JSEncrypt();
-      encrypt.setPublicKey(allData.plugKey);
-      return encrypt.encrypt(value);
-    }
-    /* 视频预览 */
-    function getClickAction() {
-      console.log(allData.showVideos, 'showVideos');
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startPreview',
-        argument: JSON.stringify(allData.showVideos),
-      });
-    }
-    // 默认打开多个视频预览
-    function getClickMoreAction() {
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startMultiPreviewByCameraIndexCode',
-        argument: {
-          list: [
-            {
-              cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-              ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-              gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-              streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-              transMode: 1, // 传输协议 0-UDP 1-TCP
-              wndId: 1, // 播放窗口序号
-            },
-            // {
-            //   cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-            //   ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-            //   gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-            //   streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-            //   transMode: 1, // 传输协议 0-UDP 1-TCP
-            //   wndId: 2, // 播放窗口序号
-            // },
-          ],
-        },
-      });
-    }
-    onMounted(() => {
-      // getVideoList();
-      // 获取默认的监控点编号
-      let codes = localStorage.getItem('defaultVideoCode');
-      allData.defaultCode = codes ? codes : 'edaea623e40f45df8b1f3676aa283a79';
-      // 动态获取宽度
-
-      // 批量视频预览
-      allData.ifFirstTime = true;
-      allData.videoWidth = 620;
-      allData.videoHeight = 410;
-      initPlugin();
-    });
-    onBeforeUnmount(() => {
-      if (allData.oWebControl) {
-        allData.oWebControl.JS_HideWnd();
-        allData.oWebControl.JS_DestroyWnd();
-        allData.oWebControl = null;
-        allData.showVideo = false;
-      }
-    });
-
-    return {
-      ...toRefs(allData),
-      checkCamera,
-      initPlugin,
-      initVideo,
-      setEncrypt,
-      getVideoConfig,
-      getVideoList,
-    };
-  },
+  });
 };
-</script>
-<style lang="less">
-#emergency_video {
-  width: 620px;
-  height: 440px;
-  overflow: hidden;
+// 获取公钥
+const getPubKey = (callback) => {
+  const params = {
+    funcName: 'getRSAPubKey',
+    argument: JSON.stringify({ keyLength: 1024 }),
+  };
+  AllData.oWebControl.JS_RequestInterface(params).then((res) => {
+    if (res.responseMsg.data) {
+      AllData.plugKey = res.responseMsg.data;
+      callback();
+    }
+  });
+};
+// 视频流RSA加密
+const setEncrypt = (value) => {
+  const encrypt = new JSEncrypt();
+  encrypt.setPublicKey(AllData.plugKey);
+  return encrypt.encrypt(value);
+};
 
-  #videoBox {
+// 视频预览
+const previewVideo = () => {
+  console.log(AllData.videoParams, '单个视频播放');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startPreview',
+    argument: JSON.stringify(AllData.videoParams),
+  });
+};
+// 批量预览
+const PiLiangpreviewVideo = () => {
+  console.log(props.defaultList, '批量批量批量');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startMultiPreviewByCameraIndexCode',
+    argument: {
+      list: props.defaultList,
+    },
+  });
+};
+// 显示全屏
+const showFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setFullScreen',
+  });
+};
+// 退出全屏
+const exitFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'exitFullScreen',
+  });
+};
+const windowScroll = () => {
+  if (AllData.oWebControl != null) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 获取HK父节点的宽高
+const windowResize = () => {
+  AllData.videoWidth = playWnd.value.offsetWidth;
+  AllData.videoHeight = playWnd.value.offsetHeight;
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 销毁海康插件
+const destroyeWnd = () => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl.JS_Disconnect().then(() => {});
+  }
+};
+// 获取海康插件版本号
+const getVersion = (callback) => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl
+      .JS_RequestInterface({
+        funcName: 'getVersion',
+      })
+      .then((res) => {
+        if (res.responseMsg.code === 0 && res.responseMsg.data === 'V1.5.1') {
+          //JS_CreateWnd创建视频播放窗口，宽高可设定
+          init(callback); // 创建播放实例成功后初始化
+          console.log('启动插件成功！');
+        } else {
+          destroyeWnd();
+          AllData.playText = `
+              插件版本不正确，请重新下载版本安装覆盖！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+        }
+      });
+  }
+};
+// 切换布局
+const setLayoutFunc = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setLayout',
+    argument: {
+      layout: props.layout, // 窗口布局
+    },
+  });
+  if (props.layout != '1x1') {
+    // 先清除所有画面
+    clearShiPing();
+  }
+};
+// 销毁当前正在播放的所有画面
+const clearShiPing = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'stopAllPreview',
+  });
+  AllData.videoParams.wndId = 0;
+};
+// 初始化
+const createdVideo = () => {
+  initPlugin(() => {});
+};
+onMounted(() => {
+  // 创建实例
+  initPlugin();
+
+  // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
+  window.addEventListener('resize', windowResize());
+  // // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
+  window.addEventListener('scroll', windowResize());
+});
+onBeforeUnmount(() => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl
+      .JS_DestroyWnd({
+        funcName: 'destroyeWnd',
+      })
+      .then(() => {});
+  }
+  document.removeEventListener('resize', windowResize());
+  document.removeEventListener('scroll', windowScroll());
+});
+</script>
+
+<style lang="less" scoped>
+#index {
+  width: 100%;
+  height: 100%;
+  .playWnd {
     width: 100%;
     height: 100%;
-
-    #right_videoWindow {
-      width: 100%;
-      height: 100%;
-      .videobox2 {
-        width: 100%;
-        height: 100%;
-      }
-      #playVideoNow {
-        img {
-          display: none;
-        }
-      }
-    }
   }
 }
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/HPModal b/src/pages/views/WatershedOneMap/modalPart/modal/HPModal
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/HPModal
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE b/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/video.vue b/src/pages/views/WatershedOneMap/modalPart/modal/video.vue
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/video.vue

diff --git a/package-lock.json b/package-lock.json
index 194a73a..5b0cf78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "cesium": "^1.117.0",
         "echarts": "^5.2.2",
         "esbuild-windows-64": "^0.14.11",
+        "gsap": "^3.9.1",
         "highcharts": "^9.3.2",
         "hls.js": "^1.5.13",
         "import-three-examples": "^2.2.4",
@@ -1080,12 +1081,14 @@
     "node_modules/@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -2731,6 +2734,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "node_modules/gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5401,15 +5409,13 @@
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz",
       "integrity": "sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@css-render/vue3-ssr": {
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz",
       "integrity": "sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@emotion/hash": {
       "version": "0.8.0",
@@ -5841,12 +5847,14 @@
     "@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "requires": {
         "@types/lodash": "*"
       }
@@ -5963,8 +5971,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz",
       "integrity": "sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "1.3.10",
@@ -6167,32 +6174,27 @@
     "@wangeditor/editor-for-vue": {
       "version": "5.1.12",
       "resolved": "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-5.1.12.tgz",
-      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==",
-      "requires": {}
+      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ=="
     },
     "@wangeditor/list-module": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.2.tgz",
-      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg==",
-      "requires": {}
+      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg=="
     },
     "@wangeditor/table-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.1.tgz",
-      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA==",
-      "requires": {}
+      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA=="
     },
     "@wangeditor/upload-image-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz",
-      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w==",
-      "requires": {}
+      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w=="
     },
     "@wangeditor/video-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.1.tgz",
-      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg==",
-      "requires": {}
+      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg=="
     },
     "@xmldom/xmldom": {
       "version": "0.8.10",
@@ -6523,8 +6525,7 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.4.tgz",
       "integrity": "sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "debug": {
       "version": "4.3.4",
@@ -7034,6 +7035,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -7451,8 +7457,7 @@
     "lodash-unified": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-      "requires": {}
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7894,8 +7899,7 @@
         "vue-demi": {
           "version": "0.13.5",
           "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.5.tgz",
-          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==",
-          "requires": {}
+          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
         }
       }
     },
diff --git a/package.json b/package.json
index a096642..0f3893d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "cesium": "^1.117.0",
     "echarts": "^5.2.2",
     "esbuild-windows-64": "^0.14.11",
+    "gsap": "^3.9.1",
     "highcharts": "^9.3.2",
     "hls.js": "^1.5.13",
     "import-three-examples": "^2.2.4",
diff --git a/src/pages/views/WatershedOneMap/OneMapModal.vue b/src/pages/views/WatershedOneMap/OneMapModal.vue
index b4f4e48..861db2b 100644
--- a/src/pages/views/WatershedOneMap/OneMapModal.vue
+++ b/src/pages/views/WatershedOneMap/OneMapModal.vue
@@ -94,13 +94,41 @@
     <n-modal v-model:show="showModalBZ" :show-icon="false" :mask-closable="false" preset="dialog" :title="BZtitle" style="width: 680px">
       <BengZModal :valueModalbz="valueModalbz" />
     </n-modal>
+
+    <div class="mask" v-if="maskcbwsc">
+      <div id="ShowBox">
+        <div class="ShowBoxname">后湖泵站模型</div>
+        <n-icon @click.stop="ShowInfo" size="40">
+          <Close />
+        </n-icon>
+      </div>
+      <cbwsc> </cbwsc>
+      <div class="bengji">
+        <div id="lableBox" class="lableBox">
+          <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id">
+            <div class="outer">
+              <div class="title">{{ item.name }}</div>
+              <ul>
+                <li v-for="(v, j) in item.data" :key="j">
+                  <span class="pointName">{{ v.pointName }}</span>
+                  <span class="value">{{ v.value }}</span>
+                </li>
+              </ul>
+              <div class="triangle"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Hls from 'hls.js';
 import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
+import { Close } from '@vicons/ionicons5';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import cbwsc from './modalPart/cbwsc.vue'; //三维
 import BengZModal from './modalPart/modal/BengZModal.vue'; //湖泊监测弹窗
 import MapBox from './modalPart/Mapbox.vue';
 import OnePart from './modalPart/natureNet.vue'; //全域感知
@@ -128,11 +156,178 @@
     Legend,
     Vue3SeamlessScroll,
     BengZModal,
+    cbwsc,
+    Close,
   },
   setup() {
     let hls = null;
     let hls1 = null;
     const allData = reactive({
+      labelData: [
+        {
+          name: '1#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '开',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '2#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '3#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '4#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '5#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '6#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '--HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '--A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '--V',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      maskcbwsc: false,
       indexCode: '',
       indexCode1: '',
       videoname: '',
@@ -158,7 +353,7 @@
       dateNumber: 0,
       timer: null,
       ifPlay: false,
-      currentVal: '全域感知',
+      currentVal: '规划引领',
       datearry: [],
       dateTime: [],
       dateLine: formatDate(Date.now() - 24 * 30 * 60 * 60 * 1000, 'YYYY-MM-DD'),
@@ -545,6 +740,9 @@
         hls1.destroy();
       }
     };
+    const ShowInfo = () => {
+      allData.maskcbwsc = false;
+    };
     onMounted(() => {
       // getFooterList();
       // 设置视频监控默认显示的code
@@ -558,6 +756,9 @@
       bus.on('datelist', (e) => {
         allData.datearry = e;
       });
+      bus.on('weather', (e) => {
+        allData.maskcbwsc = true;
+      });
       // 控制播放雨量图例显示
       bus.on('ifQixiang', (e) => {
         if (e) {
@@ -618,6 +819,8 @@
         hls1.destroy();
       }
       clearTimer();
+
+      bus.off('weather');
       bus.off('getGongYt');
       bus.off('ifQixiang');
       bus.off('ifStationWarn');
@@ -639,12 +842,13 @@
       bfvideo,
       bfvideo1,
       handleModalChange,
+      ShowInfo,
     };
   },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .dialogGYT {
   display: flex;
   .imgs {
@@ -840,4 +1044,88 @@
   left: 10px;
   bottom: 5px;
 }
+.mask {
+  position: fixed;
+  width: calc(100% - 100px);
+  margin: 0 50px;
+  height: calc(92vh - 10px);
+  background-color: rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: 20px;
+  z-index: 999999999;
+  // position: fixed;
+  // width: 200px;
+  // height: 200px;
+  // background-color: rgba(0, 0, 0, 0.5);
+  // right: 400px;
+  // bottom: 0;
+  // z-index: 999999999;
+  .bengji {
+    position: relative;
+    bottom: 145px;
+    width: 60%;
+    left: 20%;
+    right: 20%;
+    .lableBox {
+      display: flex;
+      height: 100%;
+    }
+    .label {
+      display: flex;
+      padding: 10px;
+      z-index: 9999 !important;
+      width: 200px;
+
+      .title {
+        line-height: 30px;
+        font-size: 14px;
+        padding: 0 10px;
+        border-bottom: 1px solid #e7f1ff;
+        color: turquoise;
+      }
+
+      ul {
+        li {
+          padding: 0 10px;
+          line-height: 26px;
+          display: flex;
+          justify-content: space-between;
+
+          &:nth-child(2n) {
+            background: #e7f1ff;
+          }
+
+          .pointName {
+            color: #888;
+          }
+
+          .value {
+            color: #0066ff;
+          }
+        }
+      }
+
+      .outer {
+        top: 0;
+        left: 0;
+        width: 140px;
+        border-radius: 10px;
+        box-shadow: -2px 0 20px #0060ff;
+        background: rgba(255, 255, 255, 0.712);
+      }
+    }
+  }
+  #ShowBox {
+    display: flex;
+    justify-content: space-between;
+    color: #ffffff;
+    margin-left: 20px;
+    cursor: pointer;
+    .ShowBoxname {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/Popup.vue b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
index 77eea0d..46a5863 100644
--- a/src/pages/views/WatershedOneMap/modalPart/Popup.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
@@ -102,6 +102,9 @@
         <div class="part gongyt" v-if="popupInfo.url">
           <div class="value" @click.stop="checkGyt(popupInfo)">查看工艺图</div>
         </div>
+        <div class="part" style="cursor: pointer" v-if="popupInfo.name.includes('后湖泵站')">
+          <div class="name" @click.stop="handlesweath()">查看模型</div>
+        </div>
         <!-- 雨量站、雨量计历史数据 -->
         <div class="part" v-show="popupInfo.name.includes('雨量站')">
           <div class="name" style="width: 100%">降雨历史数据:</div>
@@ -220,6 +223,10 @@
     async function checkGyt(popupInfo) {
       bus.emit('getGongYt', popupInfo);
     }
+
+    const handlesweath = (data) => {
+      bus.emit('weather', data);
+    };
     // 降雨历史数据
     const echartRain = async () => {
       let chart = document.getElementById('echartHistory');
@@ -297,6 +304,7 @@
       ...toRefs(allData),
       closepopupdefect,
       checkGyt,
+      handlesweath,
     };
   },
 });
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
new file mode 100644
index 0000000..993d0af
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
@@ -0,0 +1,599 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('/modelFilesJson/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    // const hdr = '/modelFilesJson/three_glb/kloppenheim_061_4k.hdr';
+    const hdr = './static/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+
+    // 标注水位
+
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      // initModal('wushuichang', '/modelFiles/three_glb/3.gltf');
+      // initModal('wushuichang', 'public/static/three_glb/3.gltf');
+    });
+    onMounted(() => {
+      initModal('wushuichang', './static/three_glb/3.gltf');
+      // initModal('wushuichang', '/modelFilesJson/three_glb/3.gltf');
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+        }
+        // document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
new file mode 100644
index 0000000..8b4cac2
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
@@ -0,0 +1,652 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('modelFiles/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    const hdr = 'modelFiles/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+    const meshOnClick = (event) => {
+      let raycaster = new THREE.Raycaster();
+      const pointer = new THREE.Vector2();
+      console.log(event.clientX, event.clientY);
+      let Top = 60,
+        Left = 60;
+      pointer.x = ((event.clientX - Left) / state.width) * 2 - 1;
+      pointer.y = -((event.clientY - Top) / state.height) * 2 + 1;
+      raycaster.setFromCamera(pointer, state.Camera);
+      let intersects = raycaster.intersectObjects(state.granaryArr, true);
+      console.log(intersects);
+      console.log('------', state.Camera.position);
+      if (intersects.length > 0) {
+        console.log(intersects[0].object);
+      } else {
+        console.log('NoNoNo');
+      }
+    };
+    // 标注水位
+    const createWaterLevel = () => {
+      let info = {
+        name: 'text',
+        text: ' 水位: 0.5M ',
+        fontsize: 30,
+        Color: 'green',
+        backgroundColor: 'rgba(0,0,0,0)',
+        position: { x: 2, y: 10, z: 0 },
+        fillRect: { x: 0, y: 0, w: 300, h: 60 },
+        // rotateY: -180,
+      };
+      let canvas = document.createElement('canvas');
+      let ctx = canvas.getContext('2d');
+      //制作矩形
+      ctx.fillStyle = info.backgroundColor;
+      ctx.fillRect(info.fillRect.x, info.fillRect.y, info.fillRect.w, info.fillRect.h);
+      //设置文字
+      ctx.fillStyle = info.Color;
+      ctx.font = `normal ${info.fontsize}px "楷体"`;
+      let textWord = info.text;
+      ctx.fillText(textWord, 10, 40);
+      //生成图片
+      let url = canvas.toDataURL('image/png');
+      //将图片构建到纹理中
+      let geometry1 = new THREE.PlaneGeometry(20, 10);
+      let texture = THREE.ImageUtils.loadTexture(url, null, function (t) {});
+
+      let material1 = new THREE.MeshBasicMaterial({
+        map: texture,
+        side: THREE.DoubleSide,
+        opacity: 1,
+        transparent: true,
+      });
+      let rect = new THREE.Mesh(geometry1, material1);
+      rect.name = info.name;
+      rect.position.set(info.position.x, info.position.y, info.position.z);
+      // rect.rotateY(info.rotateY);
+      Scene.add(rect);
+    };
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+      document.addEventListener('click', meshOnClick);
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      //   initModal('wushuichang', 'modelFiles/three_glb/3.gltf');
+      initModal('wushuichang', 'public/static/three_glb/ChangJing-comp.gltf');
+    });
+    onMounted(() => {
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+          // createWaterLevel();
+        }
+        document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+      document.removeEventListener('click', meshOnClick);
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+      meshOnClick,
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
index 4383d0d..dd36bc9 100644
--- a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
@@ -1,304 +1,374 @@
 <template>
-  <div id="emergency_video">
-    <div id="videoBox">
-      <!-- <div id="left_listBox" >
-        <div class="videoTable">
-          <n-tree
-            :data="treesData"
-            v-if="treesData.length"
-            :node-props="checkCamera"
-            block-line
-            :default-expanded-keys="defaultExpandedKeys"
-          />
-        </div>
-      </div> -->
-      <div id="right_videoWindow" v-if="showVideo">
-        <!-- 视频盒子 -->
-        <div id="playVideoNow" v-if="showVideo" class="videobox2"></div>
-      </div>
-    </div>
+  <div id="index">
+    <div ref="playWnd" :id="containerId" class="playWnd" v-html="AllData.oWebControl === null ? AllData.playText : ''"></div>
   </div>
 </template>
 
-<script>
-import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import { getCameraTree } from '@/services';
+<script setup name="index">
+import { ref, reactive, toRefs, onMounted } from 'vue';
+const props = defineProps({
+  // 内网、公网 4个配置
+  appkey: {
+    type: String,
+    default: () => '25124952',
+  },
+  secret: {
+    type: String,
+    default: () => 'aJOYWAt8CJabjjA1Ekeq',
+  },
+  ip: {
+    type: String,
+    default: () => '113.57.101.104',
+  },
+  port: {
+    type: Number,
+    default: () => 8888,
+  },
+  // 视频布局
+  layout: {
+    type: String,
+    default: () => '1x1',
+  },
+  // 初始播放模式：0-预览，1-回放
+  playMode: {
+    type: Number,
+    default: () => 0,
+  },
+  // 是否显示工具栏，0-不显示，非0-显示
+  showToolbar: {
+    type: Number,
+    default: () => 1,
+  },
+  // 工具栏按钮
+  toolBarButtonIDs: {
+    type: String,
+    default: () => '4098,4097',
+  },
+  // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
+  showSmart: {
+    type: Number,
+    default: () => 1,
+  },
+  // 自定义工具条按钮
+  buttonIDs: {
+    type: String,
+    default: () => '0,16,256,257,258,259,512,260,515,516,517,768,769',
+  },
+  // 相机编号
+  cameraIndexCode: {
+    type: [String, Number],
+  },
+  // 视频播放容器id
+  containerId: {
+    type: String,
+    default: () => 'playWnd',
+  },
+  // 默认打开的视频
+  defaultList: {
+    type: Array,
+    default: () => [],
+  },
+});
 
-export default {
-  name: 'emergency_video',
-  components: {},
-  setup() {
-    const allData = reactive({
-      showVideo: true,
-      constIndex: 1,
-      oWebControl: null,
-      plugKey: '',
-      Count: 0,
-      ifFirstTime: true,
-      videoWidth: 1400,
-      videoHeight: 750,
-      defaultExpandedKeys: ['root000000'], //默认展开节点
-      defaultCode: '', //默认监控点
-      showVideos: {
-        cameraIndexCode: 'e4a8bcca3393494bbdc9f2da087875bb', // 默认监控点编号
-        streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-        transMode: 1, // 传输协议：0-UDP，1-TCP
-        gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-        wndId: 1, // 播放窗口序号
-      },
-      treesData: [
-        {
-          label: '0',
-          key: '0',
-          click: false,
-          children: [
-            {
-              label: '组1',
-              key: '1-0',
-              click: false,
-              children: [
-                {
-                  label: '铁路桥',
-                  key: 'cf99e49a50f641ba83832dd5ebff3fa5',
-                  click: true,
-                },
-                {
-                  label: '王家墩',
-                  key: '4097ade6e64142d7ac7adff80b4617f0',
-                  click: true,
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    });
-    // 获取摄像头列表
-    const getVideoList = async () => {
-      allData.treesData = [];
-      let res = await getCameraTree();
-      if (res && res.code == 200) {
-        let datas = res.data;
-        // allData.defaultExpandedKeys.push(datas[0].key);
-        allData.treesData = datas;
+const AllData = reactive({
+  oWebControl: null,
+  plugKey: '',
+  // 视频相关参数
+  videoParams: {
+    cameraIndexCode: '', //监控点编号
+    streamMode: 0, //主子码流标识：0-主码流，1-子码流
+    transMode: 1, //传输协议：0-UDP，1-TCP
+    gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
+    wndId: 1, //播放窗口序号
+  },
+  videoWidth: null,
+  videoHeight: null,
+  playText: '启动中...',
+  initCount: 0, // 启动次数
+  href: '',
+});
+// 视频容器的ref对象
+const playWnd = ref(null);
+
+// 监听视频编码的改变(单个视频编码)
+watch(
+  () => props.cameraIndexCode,
+  (val) => {
+    if (props.cameraIndexCode) {
+      AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+      AllData.videoParams.wndId = -1;
+      if (AllData.oWebControl) {
+        previewVideo();
+      } else {
+        createdVideo();
       }
-    };
-    // 选择树结构的摄像头
-    const checkCamera = ({ option }) => {
-      return {
-        onClick() {
-          if (allData.showVideo != true) {
-            allData.showVideo = true;
-            allData.constIndex = 1;
-          } else {
-            allData.constIndex = -1;
-          }
-          console.log('option---', option);
-          // 只有子节点点击才能查看视频
-          if (option.click) {
-            allData.ifFirstTime = false;
-            allData.showVideos = {
-              cameraIndexCode: option.key, // 监控点编号
-              streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-              transMode: 1, // 传输协议：0-UDP，1-TCP
-              gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-              wndId: allData.constIndex, // 播放窗口序号
-            };
-            initVideo(allData.oWebControl);
-          }
-        },
-      };
-    };
-    /* 创建插件实例 */
-    function initPlugin() {
-      const dll = { dllPath: './VideoPluginConnect.dll' };
-      allData.oWebControl = new WebControl({
-        szPluginContainer: 'playVideoNow', // 指定容器id
-        iServicePortStart: 15900,
-        iServicePortEnd: 15909,
-        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    }
+  }
+);
+// 监听视频编码数组的改变(批量视频编码)
+watch(
+  () => props.defaultList,
+  (val) => {
+    if (props.defaultList.length > 0) {
+      PiLiangpreviewVideo();
+    }
+  }
+);
+// 监听布局修改
+watch(
+  () => props.layout,
+  (val) => {
+    setLayoutFunc();
+  }
+);
 
-        cbConnectSuccess: () => {
-          allData.oWebControl.JS_StartService('window', dll).then(() => {
-            // 设置视频 web 插件消息回调
-            allData.oWebControl.JS_SetWindowControlCallback({
-              cbIntegrationCallBack: (msg) => {
-                //注：不能使用外部函数调用，无效
-                if (msg?.responseMsg?.msg?.result) {
-                  const { result } = msg.responseMsg.msg;
-                  if (result == 1024) {
-                    allData.oWebControl.JS_HideWnd(); //放大隐藏其它视频窗口
-                  } else if (result == 1025) {
-                    allData.oWebControl.JS_ShowWnd(); //缩小显示全部窗口
-                  }
-                }
-              },
-            });
-            // 启动插件服务成功
-            allData.oWebControl.JS_CreateWnd('playVideoNow', allData.videoWidth, allData.videoHeight).then(() => {
-              // JS_CreateWnd创建视频播放窗口，宽高可设定
-              initVideo(allData.oWebControl); // 创建播放实例成功后初始化
-              console.log('启动插件成功！');
-            });
+// 创建播放实例
+const initPlugin = (callback) => {
+  AllData.oWebControl = new WebControl({
+    szPluginContainer: props.containerId, // 指定容器id
+    iServicePortStart: 15900,
+    iServicePortEnd: 15909,
+    szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    // 创建WebControl实例成功
+    cbConnectSuccess: () => {
+      AllData.oWebControl
+        .JS_StartService('window', {
+          // WebControl实例创建成功后需要启动服务
+          dllPath: './VideoPluginConnect.dll',
+        })
+        .then(() => {
+          // 启动插件服务成功
+          AllData.oWebControl.JS_SetWindowControlCallback({
+            // 设置消息回调
+            cbIntegrationCallBack: cbIntegrationCallBack,
           });
-        },
-        // 插件服务启动失败，弹框提示
-        cbConnectError: () => {
-          allData.oWebControl = null;
+          AllData.oWebControl.JS_CreateWnd(props.containerId, AllData.videoWidth, AllData.videoHeight).then(() => {
+            getVersion(callback);
+          });
+        });
+    },
+    cbConnectError: () => {
+      // 创建WebControl实例失败
+      AllData.oWebControl = null;
+      AllData.playText = '插件未启动，正在尝试启动，请稍候...';
+      WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
+      AllData.initCount++;
+      if (AllData.initCount < 3) {
+        setTimeout(() => {
+          initPlugin();
+        }, 3000);
+      } else {
+        AllData.playText = `
+              插件启动失败，请检查插件是否安装！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+      }
+    },
+    cbConnectClose: () => {
+      AllData.oWebControl = null;
+    },
+  });
+};
 
-          allData.Count++;
-          if (allData.Count < 2) {
-            WebControl.JS_WakeUp('VideoWebPlugin://');
-            setTimeout(() => {
-              initPlugin();
-            }, 8000);
-          } else {
-          }
-          console.log('创建插件失败');
-        },
-      });
-    }
-    /* 获取公钥 */
-    function initVideo(oWebControl) {
-      const params = {
-        funcName: 'getRSAPubKey',
-        argument: JSON.stringify({ keyLength: 1024 }),
-      };
-      oWebControl.JS_RequestInterface(params).then((res) => {
-        if (res.responseMsg.data) {
-          allData.plugKey = res.responseMsg.data;
-          getVideoConfig(oWebControl);
-        }
-      });
-    }
-    /* 视频插件配置  插件初始化 */
-    function getVideoConfig(oWebControl) {
-      const configObj = {
+// HK插件控制监听的消息回调
+const cbIntegrationCallBack = (oData) => {
+  console.log(oData);
+  if (oData.responseMsg.type == 6) {
+    // 此时是当前画幅的数据
+    console.log(`当前画面的画幅是` + oData.responseMsg.msg.layout, oData.responseMsg.msg.wndNum);
+    localStorage.setItem('HKlayout', oData.responseMsg.msg.layout);
+    localStorage.setItem('HKwndNum', oData.responseMsg.msg.wndNum);
+  }
+};
+
+// 初始化
+const init = (callback) => {
+  getPubKey(() => {
+    AllData.oWebControl
+      .JS_RequestInterface({
         funcName: 'init',
         argument: JSON.stringify({
-          appkey: '26265267', // API网关提供的appkey 26265267
-          secret: setEncrypt('CHtVgUwdLsJjE6CWYLMy'), // API网关提供的secret  CHtVgUwdLsJjE6CWYLMy
-          ip: '192.168.10.49', // API网关IP地址 192.168.10.49
-          port: 443, // 端口
-          playMode: 0, // 播放模式 0-预览，1-回放
-          snapDir: 'D:\\SnapDir', // 抓图存储路径
-          videoDir: 'D:\\VideoDir', // 紧急录像或录像剪辑存储路径
-          layout: '1x1', // 布局
-          enableHTTPS: 1, // 是否启用HTTPS协议 0https 1http
-          encryptedFields: 'secret', // 加密字段
-          showToolbar: 1, // 是否显示工具栏
-          showSmart: 1, // 是否显示智能信息
-          buttonIDs: '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769', // 自定义工具条按钮 新的
+          appkey: props.appkey, //API网关提供的appkey
+          secret: setEncrypt(props.secret), //API网关提供的secret
+          ip: props.ip, //API网关IP地址z
+          playMode: props.playMode, //播放模式（决定显示预览还是回放界面）
+          port: props.port, //端口
+          snapDir: 'C:\\SnapDir', //抓图存储路径
+          videoDir: 'C:\\VideoDir', //紧急录像或录像剪辑存储路径
+          layout: props.layout, //布局
+          enableHTTPS: 1, //是否启用HTTPS协议
+          encryptedFields: 'secret', //加密字段
+          showToolbar: props.showToolbar, //是否显示工具栏
+          toolBarButtonIDs: props.toolBarButtonIDs,
+          showSmart: props.showSmart, //是否显示智能信息
+          buttonIDs: props.buttonIDs, //自定义工具条按钮
+          protocol: 'hls',
         }),
-      };
-      oWebControl.JS_RequestInterface(configObj).then(() => {
-        oWebControl.JS_Resize(allData.videoWidth, allData.videoHeight);
-        // 初次加载时，显示默认多个，点击时单个加载
-        if (allData.ifFirstTime) {
-          getClickMoreAction();
-        } else {
-          allData.constIndex = -1;
-          getClickAction();
+      })
+      .then(() => {
+        AllData.videoWidth = playWnd.value.offsetWidth;
+        AllData.videoHeight = playWnd.value.offsetHeight;
+        // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+        AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+        // 判断当前cameraIndexCode中是否有数据 有数据的话就直接进行播放
+        if (props.defaultList.length > 0) {
+          // 批量渲染
+          PiLiangpreviewVideo();
+        } else if (props.cameraIndexCode.length > 0) {
+          // 单独渲染
+          AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+          previewVideo();
+        }
+        if (callback) {
+          callback();
         }
       });
-    }
-    /* 视频流RSA加密 */
-    function setEncrypt(value) {
-      const encrypt = new JSEncrypt();
-      encrypt.setPublicKey(allData.plugKey);
-      return encrypt.encrypt(value);
-    }
-    /* 视频预览 */
-    function getClickAction() {
-      console.log(allData.showVideos, 'showVideos');
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startPreview',
-        argument: JSON.stringify(allData.showVideos),
-      });
-    }
-    // 默认打开多个视频预览
-    function getClickMoreAction() {
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startMultiPreviewByCameraIndexCode',
-        argument: {
-          list: [
-            {
-              cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-              ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-              gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-              streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-              transMode: 1, // 传输协议 0-UDP 1-TCP
-              wndId: 1, // 播放窗口序号
-            },
-            // {
-            //   cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-            //   ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-            //   gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-            //   streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-            //   transMode: 1, // 传输协议 0-UDP 1-TCP
-            //   wndId: 2, // 播放窗口序号
-            // },
-          ],
-        },
-      });
-    }
-    onMounted(() => {
-      // getVideoList();
-      // 获取默认的监控点编号
-      let codes = localStorage.getItem('defaultVideoCode');
-      allData.defaultCode = codes ? codes : 'edaea623e40f45df8b1f3676aa283a79';
-      // 动态获取宽度
-
-      // 批量视频预览
-      allData.ifFirstTime = true;
-      allData.videoWidth = 620;
-      allData.videoHeight = 410;
-      initPlugin();
-    });
-    onBeforeUnmount(() => {
-      if (allData.oWebControl) {
-        allData.oWebControl.JS_HideWnd();
-        allData.oWebControl.JS_DestroyWnd();
-        allData.oWebControl = null;
-        allData.showVideo = false;
-      }
-    });
-
-    return {
-      ...toRefs(allData),
-      checkCamera,
-      initPlugin,
-      initVideo,
-      setEncrypt,
-      getVideoConfig,
-      getVideoList,
-    };
-  },
+  });
 };
-</script>
-<style lang="less">
-#emergency_video {
-  width: 620px;
-  height: 440px;
-  overflow: hidden;
+// 获取公钥
+const getPubKey = (callback) => {
+  const params = {
+    funcName: 'getRSAPubKey',
+    argument: JSON.stringify({ keyLength: 1024 }),
+  };
+  AllData.oWebControl.JS_RequestInterface(params).then((res) => {
+    if (res.responseMsg.data) {
+      AllData.plugKey = res.responseMsg.data;
+      callback();
+    }
+  });
+};
+// 视频流RSA加密
+const setEncrypt = (value) => {
+  const encrypt = new JSEncrypt();
+  encrypt.setPublicKey(AllData.plugKey);
+  return encrypt.encrypt(value);
+};
 
-  #videoBox {
+// 视频预览
+const previewVideo = () => {
+  console.log(AllData.videoParams, '单个视频播放');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startPreview',
+    argument: JSON.stringify(AllData.videoParams),
+  });
+};
+// 批量预览
+const PiLiangpreviewVideo = () => {
+  console.log(props.defaultList, '批量批量批量');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startMultiPreviewByCameraIndexCode',
+    argument: {
+      list: props.defaultList,
+    },
+  });
+};
+// 显示全屏
+const showFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setFullScreen',
+  });
+};
+// 退出全屏
+const exitFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'exitFullScreen',
+  });
+};
+const windowScroll = () => {
+  if (AllData.oWebControl != null) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 获取HK父节点的宽高
+const windowResize = () => {
+  AllData.videoWidth = playWnd.value.offsetWidth;
+  AllData.videoHeight = playWnd.value.offsetHeight;
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 销毁海康插件
+const destroyeWnd = () => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl.JS_Disconnect().then(() => {});
+  }
+};
+// 获取海康插件版本号
+const getVersion = (callback) => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl
+      .JS_RequestInterface({
+        funcName: 'getVersion',
+      })
+      .then((res) => {
+        if (res.responseMsg.code === 0 && res.responseMsg.data === 'V1.5.1') {
+          //JS_CreateWnd创建视频播放窗口，宽高可设定
+          init(callback); // 创建播放实例成功后初始化
+          console.log('启动插件成功！');
+        } else {
+          destroyeWnd();
+          AllData.playText = `
+              插件版本不正确，请重新下载版本安装覆盖！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+        }
+      });
+  }
+};
+// 切换布局
+const setLayoutFunc = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setLayout',
+    argument: {
+      layout: props.layout, // 窗口布局
+    },
+  });
+  if (props.layout != '1x1') {
+    // 先清除所有画面
+    clearShiPing();
+  }
+};
+// 销毁当前正在播放的所有画面
+const clearShiPing = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'stopAllPreview',
+  });
+  AllData.videoParams.wndId = 0;
+};
+// 初始化
+const createdVideo = () => {
+  initPlugin(() => {});
+};
+onMounted(() => {
+  // 创建实例
+  initPlugin();
+
+  // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
+  window.addEventListener('resize', windowResize());
+  // // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
+  window.addEventListener('scroll', windowResize());
+});
+onBeforeUnmount(() => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl
+      .JS_DestroyWnd({
+        funcName: 'destroyeWnd',
+      })
+      .then(() => {});
+  }
+  document.removeEventListener('resize', windowResize());
+  document.removeEventListener('scroll', windowScroll());
+});
+</script>
+
+<style lang="less" scoped>
+#index {
+  width: 100%;
+  height: 100%;
+  .playWnd {
     width: 100%;
     height: 100%;
-
-    #right_videoWindow {
-      width: 100%;
-      height: 100%;
-      .videobox2 {
-        width: 100%;
-        height: 100%;
-      }
-      #playVideoNow {
-        img {
-          display: none;
-        }
-      }
-    }
   }
 }
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/HPModal b/src/pages/views/WatershedOneMap/modalPart/modal/HPModal
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/HPModal
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE b/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/video.vue b/src/pages/views/WatershedOneMap/modalPart/modal/video.vue
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/video.vue
diff --git a/src/pages/views/WatershedOneMap/modalPart/rainTz.vue b/src/pages/views/WatershedOneMap/modalPart/rainTz.vue
index 96c9f9e..80d3880 100644
--- a/src/pages/views/WatershedOneMap/modalPart/rainTz.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/rainTz.vue
@@ -3,6 +3,7 @@
   <div class="natureOne">
     <!-- 气象信息 -->
     <div class="weatherPart">
+      <!-- <div class="publicTitle" @click="handlesweath()">气象信息</div> -->
       <div class="publicTitle">气象信息</div>
       <div class="content">
         <div class="part" v-for="(item, index) in weatherArr" :key="'a' + index">
@@ -335,7 +336,9 @@
         destination: Cesium.Cartesian3.fromDegrees(row.LNG, row.LAT, 3000.0),
       });
     };
-
+    const handlesweath = (data) => {
+      bus.emit('weather', data);
+    };
     onMounted(() => {
       getRainList(); //获取雨量站列表
       getWaterLoging(); //积水点
@@ -380,6 +383,7 @@
       getNowImage,
       getWaterLoging,
       handleRowClick,
+      handlesweath,
     };
   },
 };

diff --git a/package-lock.json b/package-lock.json
index 194a73a..5b0cf78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "cesium": "^1.117.0",
         "echarts": "^5.2.2",
         "esbuild-windows-64": "^0.14.11",
+        "gsap": "^3.9.1",
         "highcharts": "^9.3.2",
         "hls.js": "^1.5.13",
         "import-three-examples": "^2.2.4",
@@ -1080,12 +1081,14 @@
     "node_modules/@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -2731,6 +2734,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "node_modules/gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5401,15 +5409,13 @@
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz",
       "integrity": "sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@css-render/vue3-ssr": {
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz",
       "integrity": "sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@emotion/hash": {
       "version": "0.8.0",
@@ -5841,12 +5847,14 @@
     "@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "requires": {
         "@types/lodash": "*"
       }
@@ -5963,8 +5971,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz",
       "integrity": "sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "1.3.10",
@@ -6167,32 +6174,27 @@
     "@wangeditor/editor-for-vue": {
       "version": "5.1.12",
       "resolved": "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-5.1.12.tgz",
-      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==",
-      "requires": {}
+      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ=="
     },
     "@wangeditor/list-module": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.2.tgz",
-      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg==",
-      "requires": {}
+      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg=="
     },
     "@wangeditor/table-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.1.tgz",
-      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA==",
-      "requires": {}
+      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA=="
     },
     "@wangeditor/upload-image-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz",
-      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w==",
-      "requires": {}
+      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w=="
     },
     "@wangeditor/video-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.1.tgz",
-      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg==",
-      "requires": {}
+      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg=="
     },
     "@xmldom/xmldom": {
       "version": "0.8.10",
@@ -6523,8 +6525,7 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.4.tgz",
       "integrity": "sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "debug": {
       "version": "4.3.4",
@@ -7034,6 +7035,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -7451,8 +7457,7 @@
     "lodash-unified": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-      "requires": {}
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7894,8 +7899,7 @@
         "vue-demi": {
           "version": "0.13.5",
           "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.5.tgz",
-          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==",
-          "requires": {}
+          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
         }
       }
     },
diff --git a/package.json b/package.json
index a096642..0f3893d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "cesium": "^1.117.0",
     "echarts": "^5.2.2",
     "esbuild-windows-64": "^0.14.11",
+    "gsap": "^3.9.1",
     "highcharts": "^9.3.2",
     "hls.js": "^1.5.13",
     "import-three-examples": "^2.2.4",
diff --git a/src/pages/views/WatershedOneMap/OneMapModal.vue b/src/pages/views/WatershedOneMap/OneMapModal.vue
index b4f4e48..861db2b 100644
--- a/src/pages/views/WatershedOneMap/OneMapModal.vue
+++ b/src/pages/views/WatershedOneMap/OneMapModal.vue
@@ -94,13 +94,41 @@
     <n-modal v-model:show="showModalBZ" :show-icon="false" :mask-closable="false" preset="dialog" :title="BZtitle" style="width: 680px">
       <BengZModal :valueModalbz="valueModalbz" />
     </n-modal>
+
+    <div class="mask" v-if="maskcbwsc">
+      <div id="ShowBox">
+        <div class="ShowBoxname">后湖泵站模型</div>
+        <n-icon @click.stop="ShowInfo" size="40">
+          <Close />
+        </n-icon>
+      </div>
+      <cbwsc> </cbwsc>
+      <div class="bengji">
+        <div id="lableBox" class="lableBox">
+          <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id">
+            <div class="outer">
+              <div class="title">{{ item.name }}</div>
+              <ul>
+                <li v-for="(v, j) in item.data" :key="j">
+                  <span class="pointName">{{ v.pointName }}</span>
+                  <span class="value">{{ v.value }}</span>
+                </li>
+              </ul>
+              <div class="triangle"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Hls from 'hls.js';
 import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
+import { Close } from '@vicons/ionicons5';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import cbwsc from './modalPart/cbwsc.vue'; //三维
 import BengZModal from './modalPart/modal/BengZModal.vue'; //湖泊监测弹窗
 import MapBox from './modalPart/Mapbox.vue';
 import OnePart from './modalPart/natureNet.vue'; //全域感知
@@ -128,11 +156,178 @@
     Legend,
     Vue3SeamlessScroll,
     BengZModal,
+    cbwsc,
+    Close,
   },
   setup() {
     let hls = null;
     let hls1 = null;
     const allData = reactive({
+      labelData: [
+        {
+          name: '1#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '开',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '2#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '3#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '4#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '5#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '6#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '--HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '--A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '--V',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      maskcbwsc: false,
       indexCode: '',
       indexCode1: '',
       videoname: '',
@@ -158,7 +353,7 @@
       dateNumber: 0,
       timer: null,
       ifPlay: false,
-      currentVal: '全域感知',
+      currentVal: '规划引领',
       datearry: [],
       dateTime: [],
       dateLine: formatDate(Date.now() - 24 * 30 * 60 * 60 * 1000, 'YYYY-MM-DD'),
@@ -545,6 +740,9 @@
         hls1.destroy();
       }
     };
+    const ShowInfo = () => {
+      allData.maskcbwsc = false;
+    };
     onMounted(() => {
       // getFooterList();
       // 设置视频监控默认显示的code
@@ -558,6 +756,9 @@
       bus.on('datelist', (e) => {
         allData.datearry = e;
       });
+      bus.on('weather', (e) => {
+        allData.maskcbwsc = true;
+      });
       // 控制播放雨量图例显示
       bus.on('ifQixiang', (e) => {
         if (e) {
@@ -618,6 +819,8 @@
         hls1.destroy();
       }
       clearTimer();
+
+      bus.off('weather');
       bus.off('getGongYt');
       bus.off('ifQixiang');
       bus.off('ifStationWarn');
@@ -639,12 +842,13 @@
       bfvideo,
       bfvideo1,
       handleModalChange,
+      ShowInfo,
     };
   },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .dialogGYT {
   display: flex;
   .imgs {
@@ -840,4 +1044,88 @@
   left: 10px;
   bottom: 5px;
 }
+.mask {
+  position: fixed;
+  width: calc(100% - 100px);
+  margin: 0 50px;
+  height: calc(92vh - 10px);
+  background-color: rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: 20px;
+  z-index: 999999999;
+  // position: fixed;
+  // width: 200px;
+  // height: 200px;
+  // background-color: rgba(0, 0, 0, 0.5);
+  // right: 400px;
+  // bottom: 0;
+  // z-index: 999999999;
+  .bengji {
+    position: relative;
+    bottom: 145px;
+    width: 60%;
+    left: 20%;
+    right: 20%;
+    .lableBox {
+      display: flex;
+      height: 100%;
+    }
+    .label {
+      display: flex;
+      padding: 10px;
+      z-index: 9999 !important;
+      width: 200px;
+
+      .title {
+        line-height: 30px;
+        font-size: 14px;
+        padding: 0 10px;
+        border-bottom: 1px solid #e7f1ff;
+        color: turquoise;
+      }
+
+      ul {
+        li {
+          padding: 0 10px;
+          line-height: 26px;
+          display: flex;
+          justify-content: space-between;
+
+          &:nth-child(2n) {
+            background: #e7f1ff;
+          }
+
+          .pointName {
+            color: #888;
+          }
+
+          .value {
+            color: #0066ff;
+          }
+        }
+      }
+
+      .outer {
+        top: 0;
+        left: 0;
+        width: 140px;
+        border-radius: 10px;
+        box-shadow: -2px 0 20px #0060ff;
+        background: rgba(255, 255, 255, 0.712);
+      }
+    }
+  }
+  #ShowBox {
+    display: flex;
+    justify-content: space-between;
+    color: #ffffff;
+    margin-left: 20px;
+    cursor: pointer;
+    .ShowBoxname {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/Popup.vue b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
index 77eea0d..46a5863 100644
--- a/src/pages/views/WatershedOneMap/modalPart/Popup.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
@@ -102,6 +102,9 @@
         <div class="part gongyt" v-if="popupInfo.url">
           <div class="value" @click.stop="checkGyt(popupInfo)">查看工艺图</div>
         </div>
+        <div class="part" style="cursor: pointer" v-if="popupInfo.name.includes('后湖泵站')">
+          <div class="name" @click.stop="handlesweath()">查看模型</div>
+        </div>
         <!-- 雨量站、雨量计历史数据 -->
         <div class="part" v-show="popupInfo.name.includes('雨量站')">
           <div class="name" style="width: 100%">降雨历史数据:</div>
@@ -220,6 +223,10 @@
     async function checkGyt(popupInfo) {
       bus.emit('getGongYt', popupInfo);
     }
+
+    const handlesweath = (data) => {
+      bus.emit('weather', data);
+    };
     // 降雨历史数据
     const echartRain = async () => {
       let chart = document.getElementById('echartHistory');
@@ -297,6 +304,7 @@
       ...toRefs(allData),
       closepopupdefect,
       checkGyt,
+      handlesweath,
     };
   },
 });
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
new file mode 100644
index 0000000..993d0af
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
@@ -0,0 +1,599 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('/modelFilesJson/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    // const hdr = '/modelFilesJson/three_glb/kloppenheim_061_4k.hdr';
+    const hdr = './static/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+
+    // 标注水位
+
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      // initModal('wushuichang', '/modelFiles/three_glb/3.gltf');
+      // initModal('wushuichang', 'public/static/three_glb/3.gltf');
+    });
+    onMounted(() => {
+      initModal('wushuichang', './static/three_glb/3.gltf');
+      // initModal('wushuichang', '/modelFilesJson/three_glb/3.gltf');
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+        }
+        // document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
new file mode 100644
index 0000000..8b4cac2
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
@@ -0,0 +1,652 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('modelFiles/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    const hdr = 'modelFiles/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+    const meshOnClick = (event) => {
+      let raycaster = new THREE.Raycaster();
+      const pointer = new THREE.Vector2();
+      console.log(event.clientX, event.clientY);
+      let Top = 60,
+        Left = 60;
+      pointer.x = ((event.clientX - Left) / state.width) * 2 - 1;
+      pointer.y = -((event.clientY - Top) / state.height) * 2 + 1;
+      raycaster.setFromCamera(pointer, state.Camera);
+      let intersects = raycaster.intersectObjects(state.granaryArr, true);
+      console.log(intersects);
+      console.log('------', state.Camera.position);
+      if (intersects.length > 0) {
+        console.log(intersects[0].object);
+      } else {
+        console.log('NoNoNo');
+      }
+    };
+    // 标注水位
+    const createWaterLevel = () => {
+      let info = {
+        name: 'text',
+        text: ' 水位: 0.5M ',
+        fontsize: 30,
+        Color: 'green',
+        backgroundColor: 'rgba(0,0,0,0)',
+        position: { x: 2, y: 10, z: 0 },
+        fillRect: { x: 0, y: 0, w: 300, h: 60 },
+        // rotateY: -180,
+      };
+      let canvas = document.createElement('canvas');
+      let ctx = canvas.getContext('2d');
+      //制作矩形
+      ctx.fillStyle = info.backgroundColor;
+      ctx.fillRect(info.fillRect.x, info.fillRect.y, info.fillRect.w, info.fillRect.h);
+      //设置文字
+      ctx.fillStyle = info.Color;
+      ctx.font = `normal ${info.fontsize}px "楷体"`;
+      let textWord = info.text;
+      ctx.fillText(textWord, 10, 40);
+      //生成图片
+      let url = canvas.toDataURL('image/png');
+      //将图片构建到纹理中
+      let geometry1 = new THREE.PlaneGeometry(20, 10);
+      let texture = THREE.ImageUtils.loadTexture(url, null, function (t) {});
+
+      let material1 = new THREE.MeshBasicMaterial({
+        map: texture,
+        side: THREE.DoubleSide,
+        opacity: 1,
+        transparent: true,
+      });
+      let rect = new THREE.Mesh(geometry1, material1);
+      rect.name = info.name;
+      rect.position.set(info.position.x, info.position.y, info.position.z);
+      // rect.rotateY(info.rotateY);
+      Scene.add(rect);
+    };
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+      document.addEventListener('click', meshOnClick);
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      //   initModal('wushuichang', 'modelFiles/three_glb/3.gltf');
+      initModal('wushuichang', 'public/static/three_glb/ChangJing-comp.gltf');
+    });
+    onMounted(() => {
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+          // createWaterLevel();
+        }
+        document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+      document.removeEventListener('click', meshOnClick);
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+      meshOnClick,
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
index 4383d0d..dd36bc9 100644
--- a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
@@ -1,304 +1,374 @@
 <template>
-  <div id="emergency_video">
-    <div id="videoBox">
-      <!-- <div id="left_listBox" >
-        <div class="videoTable">
-          <n-tree
-            :data="treesData"
-            v-if="treesData.length"
-            :node-props="checkCamera"
-            block-line
-            :default-expanded-keys="defaultExpandedKeys"
-          />
-        </div>
-      </div> -->
-      <div id="right_videoWindow" v-if="showVideo">
-        <!-- 视频盒子 -->
-        <div id="playVideoNow" v-if="showVideo" class="videobox2"></div>
-      </div>
-    </div>
+  <div id="index">
+    <div ref="playWnd" :id="containerId" class="playWnd" v-html="AllData.oWebControl === null ? AllData.playText : ''"></div>
   </div>
 </template>
 
-<script>
-import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import { getCameraTree } from '@/services';
+<script setup name="index">
+import { ref, reactive, toRefs, onMounted } from 'vue';
+const props = defineProps({
+  // 内网、公网 4个配置
+  appkey: {
+    type: String,
+    default: () => '25124952',
+  },
+  secret: {
+    type: String,
+    default: () => 'aJOYWAt8CJabjjA1Ekeq',
+  },
+  ip: {
+    type: String,
+    default: () => '113.57.101.104',
+  },
+  port: {
+    type: Number,
+    default: () => 8888,
+  },
+  // 视频布局
+  layout: {
+    type: String,
+    default: () => '1x1',
+  },
+  // 初始播放模式：0-预览，1-回放
+  playMode: {
+    type: Number,
+    default: () => 0,
+  },
+  // 是否显示工具栏，0-不显示，非0-显示
+  showToolbar: {
+    type: Number,
+    default: () => 1,
+  },
+  // 工具栏按钮
+  toolBarButtonIDs: {
+    type: String,
+    default: () => '4098,4097',
+  },
+  // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
+  showSmart: {
+    type: Number,
+    default: () => 1,
+  },
+  // 自定义工具条按钮
+  buttonIDs: {
+    type: String,
+    default: () => '0,16,256,257,258,259,512,260,515,516,517,768,769',
+  },
+  // 相机编号
+  cameraIndexCode: {
+    type: [String, Number],
+  },
+  // 视频播放容器id
+  containerId: {
+    type: String,
+    default: () => 'playWnd',
+  },
+  // 默认打开的视频
+  defaultList: {
+    type: Array,
+    default: () => [],
+  },
+});
 
-export default {
-  name: 'emergency_video',
-  components: {},
-  setup() {
-    const allData = reactive({
-      showVideo: true,
-      constIndex: 1,
-      oWebControl: null,
-      plugKey: '',
-      Count: 0,
-      ifFirstTime: true,
-      videoWidth: 1400,
-      videoHeight: 750,
-      defaultExpandedKeys: ['root000000'], //默认展开节点
-      defaultCode: '', //默认监控点
-      showVideos: {
-        cameraIndexCode: 'e4a8bcca3393494bbdc9f2da087875bb', // 默认监控点编号
-        streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-        transMode: 1, // 传输协议：0-UDP，1-TCP
-        gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-        wndId: 1, // 播放窗口序号
-      },
-      treesData: [
-        {
-          label: '0',
-          key: '0',
-          click: false,
-          children: [
-            {
-              label: '组1',
-              key: '1-0',
-              click: false,
-              children: [
-                {
-                  label: '铁路桥',
-                  key: 'cf99e49a50f641ba83832dd5ebff3fa5',
-                  click: true,
-                },
-                {
-                  label: '王家墩',
-                  key: '4097ade6e64142d7ac7adff80b4617f0',
-                  click: true,
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    });
-    // 获取摄像头列表
-    const getVideoList = async () => {
-      allData.treesData = [];
-      let res = await getCameraTree();
-      if (res && res.code == 200) {
-        let datas = res.data;
-        // allData.defaultExpandedKeys.push(datas[0].key);
-        allData.treesData = datas;
+const AllData = reactive({
+  oWebControl: null,
+  plugKey: '',
+  // 视频相关参数
+  videoParams: {
+    cameraIndexCode: '', //监控点编号
+    streamMode: 0, //主子码流标识：0-主码流，1-子码流
+    transMode: 1, //传输协议：0-UDP，1-TCP
+    gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
+    wndId: 1, //播放窗口序号
+  },
+  videoWidth: null,
+  videoHeight: null,
+  playText: '启动中...',
+  initCount: 0, // 启动次数
+  href: '',
+});
+// 视频容器的ref对象
+const playWnd = ref(null);
+
+// 监听视频编码的改变(单个视频编码)
+watch(
+  () => props.cameraIndexCode,
+  (val) => {
+    if (props.cameraIndexCode) {
+      AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+      AllData.videoParams.wndId = -1;
+      if (AllData.oWebControl) {
+        previewVideo();
+      } else {
+        createdVideo();
       }
-    };
-    // 选择树结构的摄像头
-    const checkCamera = ({ option }) => {
-      return {
-        onClick() {
-          if (allData.showVideo != true) {
-            allData.showVideo = true;
-            allData.constIndex = 1;
-          } else {
-            allData.constIndex = -1;
-          }
-          console.log('option---', option);
-          // 只有子节点点击才能查看视频
-          if (option.click) {
-            allData.ifFirstTime = false;
-            allData.showVideos = {
-              cameraIndexCode: option.key, // 监控点编号
-              streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-              transMode: 1, // 传输协议：0-UDP，1-TCP
-              gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-              wndId: allData.constIndex, // 播放窗口序号
-            };
-            initVideo(allData.oWebControl);
-          }
-        },
-      };
-    };
-    /* 创建插件实例 */
-    function initPlugin() {
-      const dll = { dllPath: './VideoPluginConnect.dll' };
-      allData.oWebControl = new WebControl({
-        szPluginContainer: 'playVideoNow', // 指定容器id
-        iServicePortStart: 15900,
-        iServicePortEnd: 15909,
-        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    }
+  }
+);
+// 监听视频编码数组的改变(批量视频编码)
+watch(
+  () => props.defaultList,
+  (val) => {
+    if (props.defaultList.length > 0) {
+      PiLiangpreviewVideo();
+    }
+  }
+);
+// 监听布局修改
+watch(
+  () => props.layout,
+  (val) => {
+    setLayoutFunc();
+  }
+);
 
-        cbConnectSuccess: () => {
-          allData.oWebControl.JS_StartService('window', dll).then(() => {
-            // 设置视频 web 插件消息回调
-            allData.oWebControl.JS_SetWindowControlCallback({
-              cbIntegrationCallBack: (msg) => {
-                //注：不能使用外部函数调用，无效
-                if (msg?.responseMsg?.msg?.result) {
-                  const { result } = msg.responseMsg.msg;
-                  if (result == 1024) {
-                    allData.oWebControl.JS_HideWnd(); //放大隐藏其它视频窗口
-                  } else if (result == 1025) {
-                    allData.oWebControl.JS_ShowWnd(); //缩小显示全部窗口
-                  }
-                }
-              },
-            });
-            // 启动插件服务成功
-            allData.oWebControl.JS_CreateWnd('playVideoNow', allData.videoWidth, allData.videoHeight).then(() => {
-              // JS_CreateWnd创建视频播放窗口，宽高可设定
-              initVideo(allData.oWebControl); // 创建播放实例成功后初始化
-              console.log('启动插件成功！');
-            });
+// 创建播放实例
+const initPlugin = (callback) => {
+  AllData.oWebControl = new WebControl({
+    szPluginContainer: props.containerId, // 指定容器id
+    iServicePortStart: 15900,
+    iServicePortEnd: 15909,
+    szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    // 创建WebControl实例成功
+    cbConnectSuccess: () => {
+      AllData.oWebControl
+        .JS_StartService('window', {
+          // WebControl实例创建成功后需要启动服务
+          dllPath: './VideoPluginConnect.dll',
+        })
+        .then(() => {
+          // 启动插件服务成功
+          AllData.oWebControl.JS_SetWindowControlCallback({
+            // 设置消息回调
+            cbIntegrationCallBack: cbIntegrationCallBack,
           });
-        },
-        // 插件服务启动失败，弹框提示
-        cbConnectError: () => {
-          allData.oWebControl = null;
+          AllData.oWebControl.JS_CreateWnd(props.containerId, AllData.videoWidth, AllData.videoHeight).then(() => {
+            getVersion(callback);
+          });
+        });
+    },
+    cbConnectError: () => {
+      // 创建WebControl实例失败
+      AllData.oWebControl = null;
+      AllData.playText = '插件未启动，正在尝试启动，请稍候...';
+      WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
+      AllData.initCount++;
+      if (AllData.initCount < 3) {
+        setTimeout(() => {
+          initPlugin();
+        }, 3000);
+      } else {
+        AllData.playText = `
+              插件启动失败，请检查插件是否安装！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+      }
+    },
+    cbConnectClose: () => {
+      AllData.oWebControl = null;
+    },
+  });
+};
 
-          allData.Count++;
-          if (allData.Count < 2) {
-            WebControl.JS_WakeUp('VideoWebPlugin://');
-            setTimeout(() => {
-              initPlugin();
-            }, 8000);
-          } else {
-          }
-          console.log('创建插件失败');
-        },
-      });
-    }
-    /* 获取公钥 */
-    function initVideo(oWebControl) {
-      const params = {
-        funcName: 'getRSAPubKey',
-        argument: JSON.stringify({ keyLength: 1024 }),
-      };
-      oWebControl.JS_RequestInterface(params).then((res) => {
-        if (res.responseMsg.data) {
-          allData.plugKey = res.responseMsg.data;
-          getVideoConfig(oWebControl);
-        }
-      });
-    }
-    /* 视频插件配置  插件初始化 */
-    function getVideoConfig(oWebControl) {
-      const configObj = {
+// HK插件控制监听的消息回调
+const cbIntegrationCallBack = (oData) => {
+  console.log(oData);
+  if (oData.responseMsg.type == 6) {
+    // 此时是当前画幅的数据
+    console.log(`当前画面的画幅是` + oData.responseMsg.msg.layout, oData.responseMsg.msg.wndNum);
+    localStorage.setItem('HKlayout', oData.responseMsg.msg.layout);
+    localStorage.setItem('HKwndNum', oData.responseMsg.msg.wndNum);
+  }
+};
+
+// 初始化
+const init = (callback) => {
+  getPubKey(() => {
+    AllData.oWebControl
+      .JS_RequestInterface({
         funcName: 'init',
         argument: JSON.stringify({
-          appkey: '26265267', // API网关提供的appkey 26265267
-          secret: setEncrypt('CHtVgUwdLsJjE6CWYLMy'), // API网关提供的secret  CHtVgUwdLsJjE6CWYLMy
-          ip: '192.168.10.49', // API网关IP地址 192.168.10.49
-          port: 443, // 端口
-          playMode: 0, // 播放模式 0-预览，1-回放
-          snapDir: 'D:\\SnapDir', // 抓图存储路径
-          videoDir: 'D:\\VideoDir', // 紧急录像或录像剪辑存储路径
-          layout: '1x1', // 布局
-          enableHTTPS: 1, // 是否启用HTTPS协议 0https 1http
-          encryptedFields: 'secret', // 加密字段
-          showToolbar: 1, // 是否显示工具栏
-          showSmart: 1, // 是否显示智能信息
-          buttonIDs: '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769', // 自定义工具条按钮 新的
+          appkey: props.appkey, //API网关提供的appkey
+          secret: setEncrypt(props.secret), //API网关提供的secret
+          ip: props.ip, //API网关IP地址z
+          playMode: props.playMode, //播放模式（决定显示预览还是回放界面）
+          port: props.port, //端口
+          snapDir: 'C:\\SnapDir', //抓图存储路径
+          videoDir: 'C:\\VideoDir', //紧急录像或录像剪辑存储路径
+          layout: props.layout, //布局
+          enableHTTPS: 1, //是否启用HTTPS协议
+          encryptedFields: 'secret', //加密字段
+          showToolbar: props.showToolbar, //是否显示工具栏
+          toolBarButtonIDs: props.toolBarButtonIDs,
+          showSmart: props.showSmart, //是否显示智能信息
+          buttonIDs: props.buttonIDs, //自定义工具条按钮
+          protocol: 'hls',
         }),
-      };
-      oWebControl.JS_RequestInterface(configObj).then(() => {
-        oWebControl.JS_Resize(allData.videoWidth, allData.videoHeight);
-        // 初次加载时，显示默认多个，点击时单个加载
-        if (allData.ifFirstTime) {
-          getClickMoreAction();
-        } else {
-          allData.constIndex = -1;
-          getClickAction();
+      })
+      .then(() => {
+        AllData.videoWidth = playWnd.value.offsetWidth;
+        AllData.videoHeight = playWnd.value.offsetHeight;
+        // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+        AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+        // 判断当前cameraIndexCode中是否有数据 有数据的话就直接进行播放
+        if (props.defaultList.length > 0) {
+          // 批量渲染
+          PiLiangpreviewVideo();
+        } else if (props.cameraIndexCode.length > 0) {
+          // 单独渲染
+          AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+          previewVideo();
+        }
+        if (callback) {
+          callback();
         }
       });
-    }
-    /* 视频流RSA加密 */
-    function setEncrypt(value) {
-      const encrypt = new JSEncrypt();
-      encrypt.setPublicKey(allData.plugKey);
-      return encrypt.encrypt(value);
-    }
-    /* 视频预览 */
-    function getClickAction() {
-      console.log(allData.showVideos, 'showVideos');
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startPreview',
-        argument: JSON.stringify(allData.showVideos),
-      });
-    }
-    // 默认打开多个视频预览
-    function getClickMoreAction() {
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startMultiPreviewByCameraIndexCode',
-        argument: {
-          list: [
-            {
-              cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-              ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-              gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-              streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-              transMode: 1, // 传输协议 0-UDP 1-TCP
-              wndId: 1, // 播放窗口序号
-            },
-            // {
-            //   cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-            //   ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-            //   gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-            //   streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-            //   transMode: 1, // 传输协议 0-UDP 1-TCP
-            //   wndId: 2, // 播放窗口序号
-            // },
-          ],
-        },
-      });
-    }
-    onMounted(() => {
-      // getVideoList();
-      // 获取默认的监控点编号
-      let codes = localStorage.getItem('defaultVideoCode');
-      allData.defaultCode = codes ? codes : 'edaea623e40f45df8b1f3676aa283a79';
-      // 动态获取宽度
-
-      // 批量视频预览
-      allData.ifFirstTime = true;
-      allData.videoWidth = 620;
-      allData.videoHeight = 410;
-      initPlugin();
-    });
-    onBeforeUnmount(() => {
-      if (allData.oWebControl) {
-        allData.oWebControl.JS_HideWnd();
-        allData.oWebControl.JS_DestroyWnd();
-        allData.oWebControl = null;
-        allData.showVideo = false;
-      }
-    });
-
-    return {
-      ...toRefs(allData),
-      checkCamera,
-      initPlugin,
-      initVideo,
-      setEncrypt,
-      getVideoConfig,
-      getVideoList,
-    };
-  },
+  });
 };
-</script>
-<style lang="less">
-#emergency_video {
-  width: 620px;
-  height: 440px;
-  overflow: hidden;
+// 获取公钥
+const getPubKey = (callback) => {
+  const params = {
+    funcName: 'getRSAPubKey',
+    argument: JSON.stringify({ keyLength: 1024 }),
+  };
+  AllData.oWebControl.JS_RequestInterface(params).then((res) => {
+    if (res.responseMsg.data) {
+      AllData.plugKey = res.responseMsg.data;
+      callback();
+    }
+  });
+};
+// 视频流RSA加密
+const setEncrypt = (value) => {
+  const encrypt = new JSEncrypt();
+  encrypt.setPublicKey(AllData.plugKey);
+  return encrypt.encrypt(value);
+};
 
-  #videoBox {
+// 视频预览
+const previewVideo = () => {
+  console.log(AllData.videoParams, '单个视频播放');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startPreview',
+    argument: JSON.stringify(AllData.videoParams),
+  });
+};
+// 批量预览
+const PiLiangpreviewVideo = () => {
+  console.log(props.defaultList, '批量批量批量');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startMultiPreviewByCameraIndexCode',
+    argument: {
+      list: props.defaultList,
+    },
+  });
+};
+// 显示全屏
+const showFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setFullScreen',
+  });
+};
+// 退出全屏
+const exitFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'exitFullScreen',
+  });
+};
+const windowScroll = () => {
+  if (AllData.oWebControl != null) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 获取HK父节点的宽高
+const windowResize = () => {
+  AllData.videoWidth = playWnd.value.offsetWidth;
+  AllData.videoHeight = playWnd.value.offsetHeight;
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 销毁海康插件
+const destroyeWnd = () => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl.JS_Disconnect().then(() => {});
+  }
+};
+// 获取海康插件版本号
+const getVersion = (callback) => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl
+      .JS_RequestInterface({
+        funcName: 'getVersion',
+      })
+      .then((res) => {
+        if (res.responseMsg.code === 0 && res.responseMsg.data === 'V1.5.1') {
+          //JS_CreateWnd创建视频播放窗口，宽高可设定
+          init(callback); // 创建播放实例成功后初始化
+          console.log('启动插件成功！');
+        } else {
+          destroyeWnd();
+          AllData.playText = `
+              插件版本不正确，请重新下载版本安装覆盖！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+        }
+      });
+  }
+};
+// 切换布局
+const setLayoutFunc = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setLayout',
+    argument: {
+      layout: props.layout, // 窗口布局
+    },
+  });
+  if (props.layout != '1x1') {
+    // 先清除所有画面
+    clearShiPing();
+  }
+};
+// 销毁当前正在播放的所有画面
+const clearShiPing = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'stopAllPreview',
+  });
+  AllData.videoParams.wndId = 0;
+};
+// 初始化
+const createdVideo = () => {
+  initPlugin(() => {});
+};
+onMounted(() => {
+  // 创建实例
+  initPlugin();
+
+  // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
+  window.addEventListener('resize', windowResize());
+  // // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
+  window.addEventListener('scroll', windowResize());
+});
+onBeforeUnmount(() => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl
+      .JS_DestroyWnd({
+        funcName: 'destroyeWnd',
+      })
+      .then(() => {});
+  }
+  document.removeEventListener('resize', windowResize());
+  document.removeEventListener('scroll', windowScroll());
+});
+</script>
+
+<style lang="less" scoped>
+#index {
+  width: 100%;
+  height: 100%;
+  .playWnd {
     width: 100%;
     height: 100%;
-
-    #right_videoWindow {
-      width: 100%;
-      height: 100%;
-      .videobox2 {
-        width: 100%;
-        height: 100%;
-      }
-      #playVideoNow {
-        img {
-          display: none;
-        }
-      }
-    }
   }
 }
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/HPModal b/src/pages/views/WatershedOneMap/modalPart/modal/HPModal
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/HPModal
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE b/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/video.vue b/src/pages/views/WatershedOneMap/modalPart/modal/video.vue
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/video.vue
diff --git a/src/pages/views/WatershedOneMap/modalPart/rainTz.vue b/src/pages/views/WatershedOneMap/modalPart/rainTz.vue
index 96c9f9e..80d3880 100644
--- a/src/pages/views/WatershedOneMap/modalPart/rainTz.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/rainTz.vue
@@ -3,6 +3,7 @@
   <div class="natureOne">
     <!-- 气象信息 -->
     <div class="weatherPart">
+      <!-- <div class="publicTitle" @click="handlesweath()">气象信息</div> -->
       <div class="publicTitle">气象信息</div>
       <div class="content">
         <div class="part" v-for="(item, index) in weatherArr" :key="'a' + index">
@@ -335,7 +336,9 @@
         destination: Cesium.Cartesian3.fromDegrees(row.LNG, row.LAT, 3000.0),
       });
     };
-
+    const handlesweath = (data) => {
+      bus.emit('weather', data);
+    };
     onMounted(() => {
       getRainList(); //获取雨量站列表
       getWaterLoging(); //积水点
@@ -380,6 +383,7 @@
       getNowImage,
       getWaterLoging,
       handleRowClick,
+      handlesweath,
     };
   },
 };
diff --git a/src/pages/views/WatershedOneMap/newPart/Popup.vue b/src/pages/views/WatershedOneMap/newPart/Popup.vue
index 6604c45..0dad787 100644
--- a/src/pages/views/WatershedOneMap/newPart/Popup.vue
+++ b/src/pages/views/WatershedOneMap/newPart/Popup.vue
@@ -73,7 +73,7 @@
         </div>
         <!-- 查看工艺图 -->
         <div class="part gongyt" v-if="params.url">
-          <div class="value" @click.stop="checkGyt(params)">查看工艺图</div>
+          <div class="name" @click.stop="checkGyt(params)">查看工艺图</div>
         </div>
         <!-- 雨量站、雨量计历史数据 -->
         <div class="part" v-show="params.name.includes('雨量站')">

diff --git a/package-lock.json b/package-lock.json
index 194a73a..5b0cf78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "cesium": "^1.117.0",
         "echarts": "^5.2.2",
         "esbuild-windows-64": "^0.14.11",
+        "gsap": "^3.9.1",
         "highcharts": "^9.3.2",
         "hls.js": "^1.5.13",
         "import-three-examples": "^2.2.4",
@@ -1080,12 +1081,14 @@
     "node_modules/@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -2731,6 +2734,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "node_modules/gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5401,15 +5409,13 @@
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz",
       "integrity": "sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@css-render/vue3-ssr": {
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz",
       "integrity": "sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@emotion/hash": {
       "version": "0.8.0",
@@ -5841,12 +5847,14 @@
     "@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "requires": {
         "@types/lodash": "*"
       }
@@ -5963,8 +5971,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz",
       "integrity": "sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "1.3.10",
@@ -6167,32 +6174,27 @@
     "@wangeditor/editor-for-vue": {
       "version": "5.1.12",
       "resolved": "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-5.1.12.tgz",
-      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==",
-      "requires": {}
+      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ=="
     },
     "@wangeditor/list-module": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.2.tgz",
-      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg==",
-      "requires": {}
+      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg=="
     },
     "@wangeditor/table-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.1.tgz",
-      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA==",
-      "requires": {}
+      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA=="
     },
     "@wangeditor/upload-image-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz",
-      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w==",
-      "requires": {}
+      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w=="
     },
     "@wangeditor/video-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.1.tgz",
-      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg==",
-      "requires": {}
+      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg=="
     },
     "@xmldom/xmldom": {
       "version": "0.8.10",
@@ -6523,8 +6525,7 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.4.tgz",
       "integrity": "sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "debug": {
       "version": "4.3.4",
@@ -7034,6 +7035,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -7451,8 +7457,7 @@
     "lodash-unified": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-      "requires": {}
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7894,8 +7899,7 @@
         "vue-demi": {
           "version": "0.13.5",
           "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.5.tgz",
-          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==",
-          "requires": {}
+          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
         }
       }
     },
diff --git a/package.json b/package.json
index a096642..0f3893d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "cesium": "^1.117.0",
     "echarts": "^5.2.2",
     "esbuild-windows-64": "^0.14.11",
+    "gsap": "^3.9.1",
     "highcharts": "^9.3.2",
     "hls.js": "^1.5.13",
     "import-three-examples": "^2.2.4",
diff --git a/src/pages/views/WatershedOneMap/OneMapModal.vue b/src/pages/views/WatershedOneMap/OneMapModal.vue
index b4f4e48..861db2b 100644
--- a/src/pages/views/WatershedOneMap/OneMapModal.vue
+++ b/src/pages/views/WatershedOneMap/OneMapModal.vue
@@ -94,13 +94,41 @@
     <n-modal v-model:show="showModalBZ" :show-icon="false" :mask-closable="false" preset="dialog" :title="BZtitle" style="width: 680px">
       <BengZModal :valueModalbz="valueModalbz" />
     </n-modal>
+
+    <div class="mask" v-if="maskcbwsc">
+      <div id="ShowBox">
+        <div class="ShowBoxname">后湖泵站模型</div>
+        <n-icon @click.stop="ShowInfo" size="40">
+          <Close />
+        </n-icon>
+      </div>
+      <cbwsc> </cbwsc>
+      <div class="bengji">
+        <div id="lableBox" class="lableBox">
+          <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id">
+            <div class="outer">
+              <div class="title">{{ item.name }}</div>
+              <ul>
+                <li v-for="(v, j) in item.data" :key="j">
+                  <span class="pointName">{{ v.pointName }}</span>
+                  <span class="value">{{ v.value }}</span>
+                </li>
+              </ul>
+              <div class="triangle"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Hls from 'hls.js';
 import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
+import { Close } from '@vicons/ionicons5';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import cbwsc from './modalPart/cbwsc.vue'; //三维
 import BengZModal from './modalPart/modal/BengZModal.vue'; //湖泊监测弹窗
 import MapBox from './modalPart/Mapbox.vue';
 import OnePart from './modalPart/natureNet.vue'; //全域感知
@@ -128,11 +156,178 @@
     Legend,
     Vue3SeamlessScroll,
     BengZModal,
+    cbwsc,
+    Close,
   },
   setup() {
     let hls = null;
     let hls1 = null;
     const allData = reactive({
+      labelData: [
+        {
+          name: '1#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '开',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '2#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '3#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '4#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '5#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '6#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '--HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '--A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '--V',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      maskcbwsc: false,
       indexCode: '',
       indexCode1: '',
       videoname: '',
@@ -158,7 +353,7 @@
       dateNumber: 0,
       timer: null,
       ifPlay: false,
-      currentVal: '全域感知',
+      currentVal: '规划引领',
       datearry: [],
       dateTime: [],
       dateLine: formatDate(Date.now() - 24 * 30 * 60 * 60 * 1000, 'YYYY-MM-DD'),
@@ -545,6 +740,9 @@
         hls1.destroy();
       }
     };
+    const ShowInfo = () => {
+      allData.maskcbwsc = false;
+    };
     onMounted(() => {
       // getFooterList();
       // 设置视频监控默认显示的code
@@ -558,6 +756,9 @@
       bus.on('datelist', (e) => {
         allData.datearry = e;
       });
+      bus.on('weather', (e) => {
+        allData.maskcbwsc = true;
+      });
       // 控制播放雨量图例显示
       bus.on('ifQixiang', (e) => {
         if (e) {
@@ -618,6 +819,8 @@
         hls1.destroy();
       }
       clearTimer();
+
+      bus.off('weather');
       bus.off('getGongYt');
       bus.off('ifQixiang');
       bus.off('ifStationWarn');
@@ -639,12 +842,13 @@
       bfvideo,
       bfvideo1,
       handleModalChange,
+      ShowInfo,
     };
   },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .dialogGYT {
   display: flex;
   .imgs {
@@ -840,4 +1044,88 @@
   left: 10px;
   bottom: 5px;
 }
+.mask {
+  position: fixed;
+  width: calc(100% - 100px);
+  margin: 0 50px;
+  height: calc(92vh - 10px);
+  background-color: rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: 20px;
+  z-index: 999999999;
+  // position: fixed;
+  // width: 200px;
+  // height: 200px;
+  // background-color: rgba(0, 0, 0, 0.5);
+  // right: 400px;
+  // bottom: 0;
+  // z-index: 999999999;
+  .bengji {
+    position: relative;
+    bottom: 145px;
+    width: 60%;
+    left: 20%;
+    right: 20%;
+    .lableBox {
+      display: flex;
+      height: 100%;
+    }
+    .label {
+      display: flex;
+      padding: 10px;
+      z-index: 9999 !important;
+      width: 200px;
+
+      .title {
+        line-height: 30px;
+        font-size: 14px;
+        padding: 0 10px;
+        border-bottom: 1px solid #e7f1ff;
+        color: turquoise;
+      }
+
+      ul {
+        li {
+          padding: 0 10px;
+          line-height: 26px;
+          display: flex;
+          justify-content: space-between;
+
+          &:nth-child(2n) {
+            background: #e7f1ff;
+          }
+
+          .pointName {
+            color: #888;
+          }
+
+          .value {
+            color: #0066ff;
+          }
+        }
+      }
+
+      .outer {
+        top: 0;
+        left: 0;
+        width: 140px;
+        border-radius: 10px;
+        box-shadow: -2px 0 20px #0060ff;
+        background: rgba(255, 255, 255, 0.712);
+      }
+    }
+  }
+  #ShowBox {
+    display: flex;
+    justify-content: space-between;
+    color: #ffffff;
+    margin-left: 20px;
+    cursor: pointer;
+    .ShowBoxname {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/Popup.vue b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
index 77eea0d..46a5863 100644
--- a/src/pages/views/WatershedOneMap/modalPart/Popup.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
@@ -102,6 +102,9 @@
         <div class="part gongyt" v-if="popupInfo.url">
           <div class="value" @click.stop="checkGyt(popupInfo)">查看工艺图</div>
         </div>
+        <div class="part" style="cursor: pointer" v-if="popupInfo.name.includes('后湖泵站')">
+          <div class="name" @click.stop="handlesweath()">查看模型</div>
+        </div>
         <!-- 雨量站、雨量计历史数据 -->
         <div class="part" v-show="popupInfo.name.includes('雨量站')">
           <div class="name" style="width: 100%">降雨历史数据:</div>
@@ -220,6 +223,10 @@
     async function checkGyt(popupInfo) {
       bus.emit('getGongYt', popupInfo);
     }
+
+    const handlesweath = (data) => {
+      bus.emit('weather', data);
+    };
     // 降雨历史数据
     const echartRain = async () => {
       let chart = document.getElementById('echartHistory');
@@ -297,6 +304,7 @@
       ...toRefs(allData),
       closepopupdefect,
       checkGyt,
+      handlesweath,
     };
   },
 });
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
new file mode 100644
index 0000000..993d0af
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
@@ -0,0 +1,599 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('/modelFilesJson/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    // const hdr = '/modelFilesJson/three_glb/kloppenheim_061_4k.hdr';
+    const hdr = './static/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+
+    // 标注水位
+
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      // initModal('wushuichang', '/modelFiles/three_glb/3.gltf');
+      // initModal('wushuichang', 'public/static/three_glb/3.gltf');
+    });
+    onMounted(() => {
+      initModal('wushuichang', './static/three_glb/3.gltf');
+      // initModal('wushuichang', '/modelFilesJson/three_glb/3.gltf');
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+        }
+        // document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
new file mode 100644
index 0000000..8b4cac2
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
@@ -0,0 +1,652 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('modelFiles/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    const hdr = 'modelFiles/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+    const meshOnClick = (event) => {
+      let raycaster = new THREE.Raycaster();
+      const pointer = new THREE.Vector2();
+      console.log(event.clientX, event.clientY);
+      let Top = 60,
+        Left = 60;
+      pointer.x = ((event.clientX - Left) / state.width) * 2 - 1;
+      pointer.y = -((event.clientY - Top) / state.height) * 2 + 1;
+      raycaster.setFromCamera(pointer, state.Camera);
+      let intersects = raycaster.intersectObjects(state.granaryArr, true);
+      console.log(intersects);
+      console.log('------', state.Camera.position);
+      if (intersects.length > 0) {
+        console.log(intersects[0].object);
+      } else {
+        console.log('NoNoNo');
+      }
+    };
+    // 标注水位
+    const createWaterLevel = () => {
+      let info = {
+        name: 'text',
+        text: ' 水位: 0.5M ',
+        fontsize: 30,
+        Color: 'green',
+        backgroundColor: 'rgba(0,0,0,0)',
+        position: { x: 2, y: 10, z: 0 },
+        fillRect: { x: 0, y: 0, w: 300, h: 60 },
+        // rotateY: -180,
+      };
+      let canvas = document.createElement('canvas');
+      let ctx = canvas.getContext('2d');
+      //制作矩形
+      ctx.fillStyle = info.backgroundColor;
+      ctx.fillRect(info.fillRect.x, info.fillRect.y, info.fillRect.w, info.fillRect.h);
+      //设置文字
+      ctx.fillStyle = info.Color;
+      ctx.font = `normal ${info.fontsize}px "楷体"`;
+      let textWord = info.text;
+      ctx.fillText(textWord, 10, 40);
+      //生成图片
+      let url = canvas.toDataURL('image/png');
+      //将图片构建到纹理中
+      let geometry1 = new THREE.PlaneGeometry(20, 10);
+      let texture = THREE.ImageUtils.loadTexture(url, null, function (t) {});
+
+      let material1 = new THREE.MeshBasicMaterial({
+        map: texture,
+        side: THREE.DoubleSide,
+        opacity: 1,
+        transparent: true,
+      });
+      let rect = new THREE.Mesh(geometry1, material1);
+      rect.name = info.name;
+      rect.position.set(info.position.x, info.position.y, info.position.z);
+      // rect.rotateY(info.rotateY);
+      Scene.add(rect);
+    };
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+      document.addEventListener('click', meshOnClick);
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      //   initModal('wushuichang', 'modelFiles/three_glb/3.gltf');
+      initModal('wushuichang', 'public/static/three_glb/ChangJing-comp.gltf');
+    });
+    onMounted(() => {
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+          // createWaterLevel();
+        }
+        document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+      document.removeEventListener('click', meshOnClick);
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+      meshOnClick,
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
index 4383d0d..dd36bc9 100644
--- a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
@@ -1,304 +1,374 @@
 <template>
-  <div id="emergency_video">
-    <div id="videoBox">
-      <!-- <div id="left_listBox" >
-        <div class="videoTable">
-          <n-tree
-            :data="treesData"
-            v-if="treesData.length"
-            :node-props="checkCamera"
-            block-line
-            :default-expanded-keys="defaultExpandedKeys"
-          />
-        </div>
-      </div> -->
-      <div id="right_videoWindow" v-if="showVideo">
-        <!-- 视频盒子 -->
-        <div id="playVideoNow" v-if="showVideo" class="videobox2"></div>
-      </div>
-    </div>
+  <div id="index">
+    <div ref="playWnd" :id="containerId" class="playWnd" v-html="AllData.oWebControl === null ? AllData.playText : ''"></div>
   </div>
 </template>
 
-<script>
-import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import { getCameraTree } from '@/services';
+<script setup name="index">
+import { ref, reactive, toRefs, onMounted } from 'vue';
+const props = defineProps({
+  // 内网、公网 4个配置
+  appkey: {
+    type: String,
+    default: () => '25124952',
+  },
+  secret: {
+    type: String,
+    default: () => 'aJOYWAt8CJabjjA1Ekeq',
+  },
+  ip: {
+    type: String,
+    default: () => '113.57.101.104',
+  },
+  port: {
+    type: Number,
+    default: () => 8888,
+  },
+  // 视频布局
+  layout: {
+    type: String,
+    default: () => '1x1',
+  },
+  // 初始播放模式：0-预览，1-回放
+  playMode: {
+    type: Number,
+    default: () => 0,
+  },
+  // 是否显示工具栏，0-不显示，非0-显示
+  showToolbar: {
+    type: Number,
+    default: () => 1,
+  },
+  // 工具栏按钮
+  toolBarButtonIDs: {
+    type: String,
+    default: () => '4098,4097',
+  },
+  // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
+  showSmart: {
+    type: Number,
+    default: () => 1,
+  },
+  // 自定义工具条按钮
+  buttonIDs: {
+    type: String,
+    default: () => '0,16,256,257,258,259,512,260,515,516,517,768,769',
+  },
+  // 相机编号
+  cameraIndexCode: {
+    type: [String, Number],
+  },
+  // 视频播放容器id
+  containerId: {
+    type: String,
+    default: () => 'playWnd',
+  },
+  // 默认打开的视频
+  defaultList: {
+    type: Array,
+    default: () => [],
+  },
+});
 
-export default {
-  name: 'emergency_video',
-  components: {},
-  setup() {
-    const allData = reactive({
-      showVideo: true,
-      constIndex: 1,
-      oWebControl: null,
-      plugKey: '',
-      Count: 0,
-      ifFirstTime: true,
-      videoWidth: 1400,
-      videoHeight: 750,
-      defaultExpandedKeys: ['root000000'], //默认展开节点
-      defaultCode: '', //默认监控点
-      showVideos: {
-        cameraIndexCode: 'e4a8bcca3393494bbdc9f2da087875bb', // 默认监控点编号
-        streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-        transMode: 1, // 传输协议：0-UDP，1-TCP
-        gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-        wndId: 1, // 播放窗口序号
-      },
-      treesData: [
-        {
-          label: '0',
-          key: '0',
-          click: false,
-          children: [
-            {
-              label: '组1',
-              key: '1-0',
-              click: false,
-              children: [
-                {
-                  label: '铁路桥',
-                  key: 'cf99e49a50f641ba83832dd5ebff3fa5',
-                  click: true,
-                },
-                {
-                  label: '王家墩',
-                  key: '4097ade6e64142d7ac7adff80b4617f0',
-                  click: true,
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    });
-    // 获取摄像头列表
-    const getVideoList = async () => {
-      allData.treesData = [];
-      let res = await getCameraTree();
-      if (res && res.code == 200) {
-        let datas = res.data;
-        // allData.defaultExpandedKeys.push(datas[0].key);
-        allData.treesData = datas;
+const AllData = reactive({
+  oWebControl: null,
+  plugKey: '',
+  // 视频相关参数
+  videoParams: {
+    cameraIndexCode: '', //监控点编号
+    streamMode: 0, //主子码流标识：0-主码流，1-子码流
+    transMode: 1, //传输协议：0-UDP，1-TCP
+    gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
+    wndId: 1, //播放窗口序号
+  },
+  videoWidth: null,
+  videoHeight: null,
+  playText: '启动中...',
+  initCount: 0, // 启动次数
+  href: '',
+});
+// 视频容器的ref对象
+const playWnd = ref(null);
+
+// 监听视频编码的改变(单个视频编码)
+watch(
+  () => props.cameraIndexCode,
+  (val) => {
+    if (props.cameraIndexCode) {
+      AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+      AllData.videoParams.wndId = -1;
+      if (AllData.oWebControl) {
+        previewVideo();
+      } else {
+        createdVideo();
       }
-    };
-    // 选择树结构的摄像头
-    const checkCamera = ({ option }) => {
-      return {
-        onClick() {
-          if (allData.showVideo != true) {
-            allData.showVideo = true;
-            allData.constIndex = 1;
-          } else {
-            allData.constIndex = -1;
-          }
-          console.log('option---', option);
-          // 只有子节点点击才能查看视频
-          if (option.click) {
-            allData.ifFirstTime = false;
-            allData.showVideos = {
-              cameraIndexCode: option.key, // 监控点编号
-              streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-              transMode: 1, // 传输协议：0-UDP，1-TCP
-              gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-              wndId: allData.constIndex, // 播放窗口序号
-            };
-            initVideo(allData.oWebControl);
-          }
-        },
-      };
-    };
-    /* 创建插件实例 */
-    function initPlugin() {
-      const dll = { dllPath: './VideoPluginConnect.dll' };
-      allData.oWebControl = new WebControl({
-        szPluginContainer: 'playVideoNow', // 指定容器id
-        iServicePortStart: 15900,
-        iServicePortEnd: 15909,
-        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    }
+  }
+);
+// 监听视频编码数组的改变(批量视频编码)
+watch(
+  () => props.defaultList,
+  (val) => {
+    if (props.defaultList.length > 0) {
+      PiLiangpreviewVideo();
+    }
+  }
+);
+// 监听布局修改
+watch(
+  () => props.layout,
+  (val) => {
+    setLayoutFunc();
+  }
+);
 
-        cbConnectSuccess: () => {
-          allData.oWebControl.JS_StartService('window', dll).then(() => {
-            // 设置视频 web 插件消息回调
-            allData.oWebControl.JS_SetWindowControlCallback({
-              cbIntegrationCallBack: (msg) => {
-                //注：不能使用外部函数调用，无效
-                if (msg?.responseMsg?.msg?.result) {
-                  const { result } = msg.responseMsg.msg;
-                  if (result == 1024) {
-                    allData.oWebControl.JS_HideWnd(); //放大隐藏其它视频窗口
-                  } else if (result == 1025) {
-                    allData.oWebControl.JS_ShowWnd(); //缩小显示全部窗口
-                  }
-                }
-              },
-            });
-            // 启动插件服务成功
-            allData.oWebControl.JS_CreateWnd('playVideoNow', allData.videoWidth, allData.videoHeight).then(() => {
-              // JS_CreateWnd创建视频播放窗口，宽高可设定
-              initVideo(allData.oWebControl); // 创建播放实例成功后初始化
-              console.log('启动插件成功！');
-            });
+// 创建播放实例
+const initPlugin = (callback) => {
+  AllData.oWebControl = new WebControl({
+    szPluginContainer: props.containerId, // 指定容器id
+    iServicePortStart: 15900,
+    iServicePortEnd: 15909,
+    szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    // 创建WebControl实例成功
+    cbConnectSuccess: () => {
+      AllData.oWebControl
+        .JS_StartService('window', {
+          // WebControl实例创建成功后需要启动服务
+          dllPath: './VideoPluginConnect.dll',
+        })
+        .then(() => {
+          // 启动插件服务成功
+          AllData.oWebControl.JS_SetWindowControlCallback({
+            // 设置消息回调
+            cbIntegrationCallBack: cbIntegrationCallBack,
           });
-        },
-        // 插件服务启动失败，弹框提示
-        cbConnectError: () => {
-          allData.oWebControl = null;
+          AllData.oWebControl.JS_CreateWnd(props.containerId, AllData.videoWidth, AllData.videoHeight).then(() => {
+            getVersion(callback);
+          });
+        });
+    },
+    cbConnectError: () => {
+      // 创建WebControl实例失败
+      AllData.oWebControl = null;
+      AllData.playText = '插件未启动，正在尝试启动，请稍候...';
+      WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
+      AllData.initCount++;
+      if (AllData.initCount < 3) {
+        setTimeout(() => {
+          initPlugin();
+        }, 3000);
+      } else {
+        AllData.playText = `
+              插件启动失败，请检查插件是否安装！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+      }
+    },
+    cbConnectClose: () => {
+      AllData.oWebControl = null;
+    },
+  });
+};
 
-          allData.Count++;
-          if (allData.Count < 2) {
-            WebControl.JS_WakeUp('VideoWebPlugin://');
-            setTimeout(() => {
-              initPlugin();
-            }, 8000);
-          } else {
-          }
-          console.log('创建插件失败');
-        },
-      });
-    }
-    /* 获取公钥 */
-    function initVideo(oWebControl) {
-      const params = {
-        funcName: 'getRSAPubKey',
-        argument: JSON.stringify({ keyLength: 1024 }),
-      };
-      oWebControl.JS_RequestInterface(params).then((res) => {
-        if (res.responseMsg.data) {
-          allData.plugKey = res.responseMsg.data;
-          getVideoConfig(oWebControl);
-        }
-      });
-    }
-    /* 视频插件配置  插件初始化 */
-    function getVideoConfig(oWebControl) {
-      const configObj = {
+// HK插件控制监听的消息回调
+const cbIntegrationCallBack = (oData) => {
+  console.log(oData);
+  if (oData.responseMsg.type == 6) {
+    // 此时是当前画幅的数据
+    console.log(`当前画面的画幅是` + oData.responseMsg.msg.layout, oData.responseMsg.msg.wndNum);
+    localStorage.setItem('HKlayout', oData.responseMsg.msg.layout);
+    localStorage.setItem('HKwndNum', oData.responseMsg.msg.wndNum);
+  }
+};
+
+// 初始化
+const init = (callback) => {
+  getPubKey(() => {
+    AllData.oWebControl
+      .JS_RequestInterface({
         funcName: 'init',
         argument: JSON.stringify({
-          appkey: '26265267', // API网关提供的appkey 26265267
-          secret: setEncrypt('CHtVgUwdLsJjE6CWYLMy'), // API网关提供的secret  CHtVgUwdLsJjE6CWYLMy
-          ip: '192.168.10.49', // API网关IP地址 192.168.10.49
-          port: 443, // 端口
-          playMode: 0, // 播放模式 0-预览，1-回放
-          snapDir: 'D:\\SnapDir', // 抓图存储路径
-          videoDir: 'D:\\VideoDir', // 紧急录像或录像剪辑存储路径
-          layout: '1x1', // 布局
-          enableHTTPS: 1, // 是否启用HTTPS协议 0https 1http
-          encryptedFields: 'secret', // 加密字段
-          showToolbar: 1, // 是否显示工具栏
-          showSmart: 1, // 是否显示智能信息
-          buttonIDs: '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769', // 自定义工具条按钮 新的
+          appkey: props.appkey, //API网关提供的appkey
+          secret: setEncrypt(props.secret), //API网关提供的secret
+          ip: props.ip, //API网关IP地址z
+          playMode: props.playMode, //播放模式（决定显示预览还是回放界面）
+          port: props.port, //端口
+          snapDir: 'C:\\SnapDir', //抓图存储路径
+          videoDir: 'C:\\VideoDir', //紧急录像或录像剪辑存储路径
+          layout: props.layout, //布局
+          enableHTTPS: 1, //是否启用HTTPS协议
+          encryptedFields: 'secret', //加密字段
+          showToolbar: props.showToolbar, //是否显示工具栏
+          toolBarButtonIDs: props.toolBarButtonIDs,
+          showSmart: props.showSmart, //是否显示智能信息
+          buttonIDs: props.buttonIDs, //自定义工具条按钮
+          protocol: 'hls',
         }),
-      };
-      oWebControl.JS_RequestInterface(configObj).then(() => {
-        oWebControl.JS_Resize(allData.videoWidth, allData.videoHeight);
-        // 初次加载时，显示默认多个，点击时单个加载
-        if (allData.ifFirstTime) {
-          getClickMoreAction();
-        } else {
-          allData.constIndex = -1;
-          getClickAction();
+      })
+      .then(() => {
+        AllData.videoWidth = playWnd.value.offsetWidth;
+        AllData.videoHeight = playWnd.value.offsetHeight;
+        // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+        AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+        // 判断当前cameraIndexCode中是否有数据 有数据的话就直接进行播放
+        if (props.defaultList.length > 0) {
+          // 批量渲染
+          PiLiangpreviewVideo();
+        } else if (props.cameraIndexCode.length > 0) {
+          // 单独渲染
+          AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+          previewVideo();
+        }
+        if (callback) {
+          callback();
         }
       });
-    }
-    /* 视频流RSA加密 */
-    function setEncrypt(value) {
-      const encrypt = new JSEncrypt();
-      encrypt.setPublicKey(allData.plugKey);
-      return encrypt.encrypt(value);
-    }
-    /* 视频预览 */
-    function getClickAction() {
-      console.log(allData.showVideos, 'showVideos');
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startPreview',
-        argument: JSON.stringify(allData.showVideos),
-      });
-    }
-    // 默认打开多个视频预览
-    function getClickMoreAction() {
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startMultiPreviewByCameraIndexCode',
-        argument: {
-          list: [
-            {
-              cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-              ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-              gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-              streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-              transMode: 1, // 传输协议 0-UDP 1-TCP
-              wndId: 1, // 播放窗口序号
-            },
-            // {
-            //   cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-            //   ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-            //   gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-            //   streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-            //   transMode: 1, // 传输协议 0-UDP 1-TCP
-            //   wndId: 2, // 播放窗口序号
-            // },
-          ],
-        },
-      });
-    }
-    onMounted(() => {
-      // getVideoList();
-      // 获取默认的监控点编号
-      let codes = localStorage.getItem('defaultVideoCode');
-      allData.defaultCode = codes ? codes : 'edaea623e40f45df8b1f3676aa283a79';
-      // 动态获取宽度
-
-      // 批量视频预览
-      allData.ifFirstTime = true;
-      allData.videoWidth = 620;
-      allData.videoHeight = 410;
-      initPlugin();
-    });
-    onBeforeUnmount(() => {
-      if (allData.oWebControl) {
-        allData.oWebControl.JS_HideWnd();
-        allData.oWebControl.JS_DestroyWnd();
-        allData.oWebControl = null;
-        allData.showVideo = false;
-      }
-    });
-
-    return {
-      ...toRefs(allData),
-      checkCamera,
-      initPlugin,
-      initVideo,
-      setEncrypt,
-      getVideoConfig,
-      getVideoList,
-    };
-  },
+  });
 };
-</script>
-<style lang="less">
-#emergency_video {
-  width: 620px;
-  height: 440px;
-  overflow: hidden;
+// 获取公钥
+const getPubKey = (callback) => {
+  const params = {
+    funcName: 'getRSAPubKey',
+    argument: JSON.stringify({ keyLength: 1024 }),
+  };
+  AllData.oWebControl.JS_RequestInterface(params).then((res) => {
+    if (res.responseMsg.data) {
+      AllData.plugKey = res.responseMsg.data;
+      callback();
+    }
+  });
+};
+// 视频流RSA加密
+const setEncrypt = (value) => {
+  const encrypt = new JSEncrypt();
+  encrypt.setPublicKey(AllData.plugKey);
+  return encrypt.encrypt(value);
+};
 
-  #videoBox {
+// 视频预览
+const previewVideo = () => {
+  console.log(AllData.videoParams, '单个视频播放');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startPreview',
+    argument: JSON.stringify(AllData.videoParams),
+  });
+};
+// 批量预览
+const PiLiangpreviewVideo = () => {
+  console.log(props.defaultList, '批量批量批量');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startMultiPreviewByCameraIndexCode',
+    argument: {
+      list: props.defaultList,
+    },
+  });
+};
+// 显示全屏
+const showFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setFullScreen',
+  });
+};
+// 退出全屏
+const exitFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'exitFullScreen',
+  });
+};
+const windowScroll = () => {
+  if (AllData.oWebControl != null) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 获取HK父节点的宽高
+const windowResize = () => {
+  AllData.videoWidth = playWnd.value.offsetWidth;
+  AllData.videoHeight = playWnd.value.offsetHeight;
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 销毁海康插件
+const destroyeWnd = () => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl.JS_Disconnect().then(() => {});
+  }
+};
+// 获取海康插件版本号
+const getVersion = (callback) => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl
+      .JS_RequestInterface({
+        funcName: 'getVersion',
+      })
+      .then((res) => {
+        if (res.responseMsg.code === 0 && res.responseMsg.data === 'V1.5.1') {
+          //JS_CreateWnd创建视频播放窗口，宽高可设定
+          init(callback); // 创建播放实例成功后初始化
+          console.log('启动插件成功！');
+        } else {
+          destroyeWnd();
+          AllData.playText = `
+              插件版本不正确，请重新下载版本安装覆盖！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+        }
+      });
+  }
+};
+// 切换布局
+const setLayoutFunc = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setLayout',
+    argument: {
+      layout: props.layout, // 窗口布局
+    },
+  });
+  if (props.layout != '1x1') {
+    // 先清除所有画面
+    clearShiPing();
+  }
+};
+// 销毁当前正在播放的所有画面
+const clearShiPing = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'stopAllPreview',
+  });
+  AllData.videoParams.wndId = 0;
+};
+// 初始化
+const createdVideo = () => {
+  initPlugin(() => {});
+};
+onMounted(() => {
+  // 创建实例
+  initPlugin();
+
+  // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
+  window.addEventListener('resize', windowResize());
+  // // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
+  window.addEventListener('scroll', windowResize());
+});
+onBeforeUnmount(() => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl
+      .JS_DestroyWnd({
+        funcName: 'destroyeWnd',
+      })
+      .then(() => {});
+  }
+  document.removeEventListener('resize', windowResize());
+  document.removeEventListener('scroll', windowScroll());
+});
+</script>
+
+<style lang="less" scoped>
+#index {
+  width: 100%;
+  height: 100%;
+  .playWnd {
     width: 100%;
     height: 100%;
-
-    #right_videoWindow {
-      width: 100%;
-      height: 100%;
-      .videobox2 {
-        width: 100%;
-        height: 100%;
-      }
-      #playVideoNow {
-        img {
-          display: none;
-        }
-      }
-    }
   }
 }
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/HPModal b/src/pages/views/WatershedOneMap/modalPart/modal/HPModal
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/HPModal
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE b/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/video.vue b/src/pages/views/WatershedOneMap/modalPart/modal/video.vue
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/video.vue
diff --git a/src/pages/views/WatershedOneMap/modalPart/rainTz.vue b/src/pages/views/WatershedOneMap/modalPart/rainTz.vue
index 96c9f9e..80d3880 100644
--- a/src/pages/views/WatershedOneMap/modalPart/rainTz.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/rainTz.vue
@@ -3,6 +3,7 @@
   <div class="natureOne">
     <!-- 气象信息 -->
     <div class="weatherPart">
+      <!-- <div class="publicTitle" @click="handlesweath()">气象信息</div> -->
       <div class="publicTitle">气象信息</div>
       <div class="content">
         <div class="part" v-for="(item, index) in weatherArr" :key="'a' + index">
@@ -335,7 +336,9 @@
         destination: Cesium.Cartesian3.fromDegrees(row.LNG, row.LAT, 3000.0),
       });
     };
-
+    const handlesweath = (data) => {
+      bus.emit('weather', data);
+    };
     onMounted(() => {
       getRainList(); //获取雨量站列表
       getWaterLoging(); //积水点
@@ -380,6 +383,7 @@
       getNowImage,
       getWaterLoging,
       handleRowClick,
+      handlesweath,
     };
   },
 };
diff --git a/src/pages/views/WatershedOneMap/newPart/Popup.vue b/src/pages/views/WatershedOneMap/newPart/Popup.vue
index 6604c45..0dad787 100644
--- a/src/pages/views/WatershedOneMap/newPart/Popup.vue
+++ b/src/pages/views/WatershedOneMap/newPart/Popup.vue
@@ -73,7 +73,7 @@
         </div>
         <!-- 查看工艺图 -->
         <div class="part gongyt" v-if="params.url">
-          <div class="value" @click.stop="checkGyt(params)">查看工艺图</div>
+          <div class="name" @click.stop="checkGyt(params)">查看工艺图</div>
         </div>
         <!-- 雨量站、雨量计历史数据 -->
         <div class="part" v-show="params.name.includes('雨量站')">
diff --git a/src/router/index.js b/src/router/index.js
index be06e0f..9d6f55a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -42,7 +42,7 @@
           path: '/ShugjOneMap',
           name: 'ShugjOneMap',
           component: () => import('@/pages/views/WatershedOneMap/OneMapModal.vue'),
-        },{
+        }, {
           path: '/test',
           name: 'tileset',
           component: () => import('@/pages/views/Mapbox.vue'),

diff --git a/package-lock.json b/package-lock.json
index 194a73a..5b0cf78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "cesium": "^1.117.0",
         "echarts": "^5.2.2",
         "esbuild-windows-64": "^0.14.11",
+        "gsap": "^3.9.1",
         "highcharts": "^9.3.2",
         "hls.js": "^1.5.13",
         "import-three-examples": "^2.2.4",
@@ -1080,12 +1081,14 @@
     "node_modules/@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -2731,6 +2734,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "node_modules/gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5401,15 +5409,13 @@
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz",
       "integrity": "sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@css-render/vue3-ssr": {
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz",
       "integrity": "sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@emotion/hash": {
       "version": "0.8.0",
@@ -5841,12 +5847,14 @@
     "@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "requires": {
         "@types/lodash": "*"
       }
@@ -5963,8 +5971,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz",
       "integrity": "sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "1.3.10",
@@ -6167,32 +6174,27 @@
     "@wangeditor/editor-for-vue": {
       "version": "5.1.12",
       "resolved": "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-5.1.12.tgz",
-      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==",
-      "requires": {}
+      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ=="
     },
     "@wangeditor/list-module": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.2.tgz",
-      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg==",
-      "requires": {}
+      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg=="
     },
     "@wangeditor/table-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.1.tgz",
-      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA==",
-      "requires": {}
+      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA=="
     },
     "@wangeditor/upload-image-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz",
-      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w==",
-      "requires": {}
+      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w=="
     },
     "@wangeditor/video-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.1.tgz",
-      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg==",
-      "requires": {}
+      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg=="
     },
     "@xmldom/xmldom": {
       "version": "0.8.10",
@@ -6523,8 +6525,7 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.4.tgz",
       "integrity": "sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "debug": {
       "version": "4.3.4",
@@ -7034,6 +7035,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -7451,8 +7457,7 @@
     "lodash-unified": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-      "requires": {}
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7894,8 +7899,7 @@
         "vue-demi": {
           "version": "0.13.5",
           "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.5.tgz",
-          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==",
-          "requires": {}
+          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
         }
       }
     },
diff --git a/package.json b/package.json
index a096642..0f3893d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "cesium": "^1.117.0",
     "echarts": "^5.2.2",
     "esbuild-windows-64": "^0.14.11",
+    "gsap": "^3.9.1",
     "highcharts": "^9.3.2",
     "hls.js": "^1.5.13",
     "import-three-examples": "^2.2.4",
diff --git a/src/pages/views/WatershedOneMap/OneMapModal.vue b/src/pages/views/WatershedOneMap/OneMapModal.vue
index b4f4e48..861db2b 100644
--- a/src/pages/views/WatershedOneMap/OneMapModal.vue
+++ b/src/pages/views/WatershedOneMap/OneMapModal.vue
@@ -94,13 +94,41 @@
     <n-modal v-model:show="showModalBZ" :show-icon="false" :mask-closable="false" preset="dialog" :title="BZtitle" style="width: 680px">
       <BengZModal :valueModalbz="valueModalbz" />
     </n-modal>
+
+    <div class="mask" v-if="maskcbwsc">
+      <div id="ShowBox">
+        <div class="ShowBoxname">后湖泵站模型</div>
+        <n-icon @click.stop="ShowInfo" size="40">
+          <Close />
+        </n-icon>
+      </div>
+      <cbwsc> </cbwsc>
+      <div class="bengji">
+        <div id="lableBox" class="lableBox">
+          <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id">
+            <div class="outer">
+              <div class="title">{{ item.name }}</div>
+              <ul>
+                <li v-for="(v, j) in item.data" :key="j">
+                  <span class="pointName">{{ v.pointName }}</span>
+                  <span class="value">{{ v.value }}</span>
+                </li>
+              </ul>
+              <div class="triangle"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Hls from 'hls.js';
 import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
+import { Close } from '@vicons/ionicons5';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import cbwsc from './modalPart/cbwsc.vue'; //三维
 import BengZModal from './modalPart/modal/BengZModal.vue'; //湖泊监测弹窗
 import MapBox from './modalPart/Mapbox.vue';
 import OnePart from './modalPart/natureNet.vue'; //全域感知
@@ -128,11 +156,178 @@
     Legend,
     Vue3SeamlessScroll,
     BengZModal,
+    cbwsc,
+    Close,
   },
   setup() {
     let hls = null;
     let hls1 = null;
     const allData = reactive({
+      labelData: [
+        {
+          name: '1#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '开',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '2#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '3#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '4#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '5#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '6#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '--HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '--A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '--V',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      maskcbwsc: false,
       indexCode: '',
       indexCode1: '',
       videoname: '',
@@ -158,7 +353,7 @@
       dateNumber: 0,
       timer: null,
       ifPlay: false,
-      currentVal: '全域感知',
+      currentVal: '规划引领',
       datearry: [],
       dateTime: [],
       dateLine: formatDate(Date.now() - 24 * 30 * 60 * 60 * 1000, 'YYYY-MM-DD'),
@@ -545,6 +740,9 @@
         hls1.destroy();
       }
     };
+    const ShowInfo = () => {
+      allData.maskcbwsc = false;
+    };
     onMounted(() => {
       // getFooterList();
       // 设置视频监控默认显示的code
@@ -558,6 +756,9 @@
       bus.on('datelist', (e) => {
         allData.datearry = e;
       });
+      bus.on('weather', (e) => {
+        allData.maskcbwsc = true;
+      });
       // 控制播放雨量图例显示
       bus.on('ifQixiang', (e) => {
         if (e) {
@@ -618,6 +819,8 @@
         hls1.destroy();
       }
       clearTimer();
+
+      bus.off('weather');
       bus.off('getGongYt');
       bus.off('ifQixiang');
       bus.off('ifStationWarn');
@@ -639,12 +842,13 @@
       bfvideo,
       bfvideo1,
       handleModalChange,
+      ShowInfo,
     };
   },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .dialogGYT {
   display: flex;
   .imgs {
@@ -840,4 +1044,88 @@
   left: 10px;
   bottom: 5px;
 }
+.mask {
+  position: fixed;
+  width: calc(100% - 100px);
+  margin: 0 50px;
+  height: calc(92vh - 10px);
+  background-color: rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: 20px;
+  z-index: 999999999;
+  // position: fixed;
+  // width: 200px;
+  // height: 200px;
+  // background-color: rgba(0, 0, 0, 0.5);
+  // right: 400px;
+  // bottom: 0;
+  // z-index: 999999999;
+  .bengji {
+    position: relative;
+    bottom: 145px;
+    width: 60%;
+    left: 20%;
+    right: 20%;
+    .lableBox {
+      display: flex;
+      height: 100%;
+    }
+    .label {
+      display: flex;
+      padding: 10px;
+      z-index: 9999 !important;
+      width: 200px;
+
+      .title {
+        line-height: 30px;
+        font-size: 14px;
+        padding: 0 10px;
+        border-bottom: 1px solid #e7f1ff;
+        color: turquoise;
+      }
+
+      ul {
+        li {
+          padding: 0 10px;
+          line-height: 26px;
+          display: flex;
+          justify-content: space-between;
+
+          &:nth-child(2n) {
+            background: #e7f1ff;
+          }
+
+          .pointName {
+            color: #888;
+          }
+
+          .value {
+            color: #0066ff;
+          }
+        }
+      }
+
+      .outer {
+        top: 0;
+        left: 0;
+        width: 140px;
+        border-radius: 10px;
+        box-shadow: -2px 0 20px #0060ff;
+        background: rgba(255, 255, 255, 0.712);
+      }
+    }
+  }
+  #ShowBox {
+    display: flex;
+    justify-content: space-between;
+    color: #ffffff;
+    margin-left: 20px;
+    cursor: pointer;
+    .ShowBoxname {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/Popup.vue b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
index 77eea0d..46a5863 100644
--- a/src/pages/views/WatershedOneMap/modalPart/Popup.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
@@ -102,6 +102,9 @@
         <div class="part gongyt" v-if="popupInfo.url">
           <div class="value" @click.stop="checkGyt(popupInfo)">查看工艺图</div>
         </div>
+        <div class="part" style="cursor: pointer" v-if="popupInfo.name.includes('后湖泵站')">
+          <div class="name" @click.stop="handlesweath()">查看模型</div>
+        </div>
         <!-- 雨量站、雨量计历史数据 -->
         <div class="part" v-show="popupInfo.name.includes('雨量站')">
           <div class="name" style="width: 100%">降雨历史数据:</div>
@@ -220,6 +223,10 @@
     async function checkGyt(popupInfo) {
       bus.emit('getGongYt', popupInfo);
     }
+
+    const handlesweath = (data) => {
+      bus.emit('weather', data);
+    };
     // 降雨历史数据
     const echartRain = async () => {
       let chart = document.getElementById('echartHistory');
@@ -297,6 +304,7 @@
       ...toRefs(allData),
       closepopupdefect,
       checkGyt,
+      handlesweath,
     };
   },
 });
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
new file mode 100644
index 0000000..993d0af
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
@@ -0,0 +1,599 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('/modelFilesJson/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    // const hdr = '/modelFilesJson/three_glb/kloppenheim_061_4k.hdr';
+    const hdr = './static/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+
+    // 标注水位
+
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      // initModal('wushuichang', '/modelFiles/three_glb/3.gltf');
+      // initModal('wushuichang', 'public/static/three_glb/3.gltf');
+    });
+    onMounted(() => {
+      initModal('wushuichang', './static/three_glb/3.gltf');
+      // initModal('wushuichang', '/modelFilesJson/three_glb/3.gltf');
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+        }
+        // document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
new file mode 100644
index 0000000..8b4cac2
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
@@ -0,0 +1,652 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('modelFiles/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    const hdr = 'modelFiles/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+    const meshOnClick = (event) => {
+      let raycaster = new THREE.Raycaster();
+      const pointer = new THREE.Vector2();
+      console.log(event.clientX, event.clientY);
+      let Top = 60,
+        Left = 60;
+      pointer.x = ((event.clientX - Left) / state.width) * 2 - 1;
+      pointer.y = -((event.clientY - Top) / state.height) * 2 + 1;
+      raycaster.setFromCamera(pointer, state.Camera);
+      let intersects = raycaster.intersectObjects(state.granaryArr, true);
+      console.log(intersects);
+      console.log('------', state.Camera.position);
+      if (intersects.length > 0) {
+        console.log(intersects[0].object);
+      } else {
+        console.log('NoNoNo');
+      }
+    };
+    // 标注水位
+    const createWaterLevel = () => {
+      let info = {
+        name: 'text',
+        text: ' 水位: 0.5M ',
+        fontsize: 30,
+        Color: 'green',
+        backgroundColor: 'rgba(0,0,0,0)',
+        position: { x: 2, y: 10, z: 0 },
+        fillRect: { x: 0, y: 0, w: 300, h: 60 },
+        // rotateY: -180,
+      };
+      let canvas = document.createElement('canvas');
+      let ctx = canvas.getContext('2d');
+      //制作矩形
+      ctx.fillStyle = info.backgroundColor;
+      ctx.fillRect(info.fillRect.x, info.fillRect.y, info.fillRect.w, info.fillRect.h);
+      //设置文字
+      ctx.fillStyle = info.Color;
+      ctx.font = `normal ${info.fontsize}px "楷体"`;
+      let textWord = info.text;
+      ctx.fillText(textWord, 10, 40);
+      //生成图片
+      let url = canvas.toDataURL('image/png');
+      //将图片构建到纹理中
+      let geometry1 = new THREE.PlaneGeometry(20, 10);
+      let texture = THREE.ImageUtils.loadTexture(url, null, function (t) {});
+
+      let material1 = new THREE.MeshBasicMaterial({
+        map: texture,
+        side: THREE.DoubleSide,
+        opacity: 1,
+        transparent: true,
+      });
+      let rect = new THREE.Mesh(geometry1, material1);
+      rect.name = info.name;
+      rect.position.set(info.position.x, info.position.y, info.position.z);
+      // rect.rotateY(info.rotateY);
+      Scene.add(rect);
+    };
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+      document.addEventListener('click', meshOnClick);
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      //   initModal('wushuichang', 'modelFiles/three_glb/3.gltf');
+      initModal('wushuichang', 'public/static/three_glb/ChangJing-comp.gltf');
+    });
+    onMounted(() => {
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+          // createWaterLevel();
+        }
+        document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+      document.removeEventListener('click', meshOnClick);
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+      meshOnClick,
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
index 4383d0d..dd36bc9 100644
--- a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
@@ -1,304 +1,374 @@
 <template>
-  <div id="emergency_video">
-    <div id="videoBox">
-      <!-- <div id="left_listBox" >
-        <div class="videoTable">
-          <n-tree
-            :data="treesData"
-            v-if="treesData.length"
-            :node-props="checkCamera"
-            block-line
-            :default-expanded-keys="defaultExpandedKeys"
-          />
-        </div>
-      </div> -->
-      <div id="right_videoWindow" v-if="showVideo">
-        <!-- 视频盒子 -->
-        <div id="playVideoNow" v-if="showVideo" class="videobox2"></div>
-      </div>
-    </div>
+  <div id="index">
+    <div ref="playWnd" :id="containerId" class="playWnd" v-html="AllData.oWebControl === null ? AllData.playText : ''"></div>
   </div>
 </template>
 
-<script>
-import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import { getCameraTree } from '@/services';
+<script setup name="index">
+import { ref, reactive, toRefs, onMounted } from 'vue';
+const props = defineProps({
+  // 内网、公网 4个配置
+  appkey: {
+    type: String,
+    default: () => '25124952',
+  },
+  secret: {
+    type: String,
+    default: () => 'aJOYWAt8CJabjjA1Ekeq',
+  },
+  ip: {
+    type: String,
+    default: () => '113.57.101.104',
+  },
+  port: {
+    type: Number,
+    default: () => 8888,
+  },
+  // 视频布局
+  layout: {
+    type: String,
+    default: () => '1x1',
+  },
+  // 初始播放模式：0-预览，1-回放
+  playMode: {
+    type: Number,
+    default: () => 0,
+  },
+  // 是否显示工具栏，0-不显示，非0-显示
+  showToolbar: {
+    type: Number,
+    default: () => 1,
+  },
+  // 工具栏按钮
+  toolBarButtonIDs: {
+    type: String,
+    default: () => '4098,4097',
+  },
+  // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
+  showSmart: {
+    type: Number,
+    default: () => 1,
+  },
+  // 自定义工具条按钮
+  buttonIDs: {
+    type: String,
+    default: () => '0,16,256,257,258,259,512,260,515,516,517,768,769',
+  },
+  // 相机编号
+  cameraIndexCode: {
+    type: [String, Number],
+  },
+  // 视频播放容器id
+  containerId: {
+    type: String,
+    default: () => 'playWnd',
+  },
+  // 默认打开的视频
+  defaultList: {
+    type: Array,
+    default: () => [],
+  },
+});
 
-export default {
-  name: 'emergency_video',
-  components: {},
-  setup() {
-    const allData = reactive({
-      showVideo: true,
-      constIndex: 1,
-      oWebControl: null,
-      plugKey: '',
-      Count: 0,
-      ifFirstTime: true,
-      videoWidth: 1400,
-      videoHeight: 750,
-      defaultExpandedKeys: ['root000000'], //默认展开节点
-      defaultCode: '', //默认监控点
-      showVideos: {
-        cameraIndexCode: 'e4a8bcca3393494bbdc9f2da087875bb', // 默认监控点编号
-        streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-        transMode: 1, // 传输协议：0-UDP，1-TCP
-        gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-        wndId: 1, // 播放窗口序号
-      },
-      treesData: [
-        {
-          label: '0',
-          key: '0',
-          click: false,
-          children: [
-            {
-              label: '组1',
-              key: '1-0',
-              click: false,
-              children: [
-                {
-                  label: '铁路桥',
-                  key: 'cf99e49a50f641ba83832dd5ebff3fa5',
-                  click: true,
-                },
-                {
-                  label: '王家墩',
-                  key: '4097ade6e64142d7ac7adff80b4617f0',
-                  click: true,
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    });
-    // 获取摄像头列表
-    const getVideoList = async () => {
-      allData.treesData = [];
-      let res = await getCameraTree();
-      if (res && res.code == 200) {
-        let datas = res.data;
-        // allData.defaultExpandedKeys.push(datas[0].key);
-        allData.treesData = datas;
+const AllData = reactive({
+  oWebControl: null,
+  plugKey: '',
+  // 视频相关参数
+  videoParams: {
+    cameraIndexCode: '', //监控点编号
+    streamMode: 0, //主子码流标识：0-主码流，1-子码流
+    transMode: 1, //传输协议：0-UDP，1-TCP
+    gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
+    wndId: 1, //播放窗口序号
+  },
+  videoWidth: null,
+  videoHeight: null,
+  playText: '启动中...',
+  initCount: 0, // 启动次数
+  href: '',
+});
+// 视频容器的ref对象
+const playWnd = ref(null);
+
+// 监听视频编码的改变(单个视频编码)
+watch(
+  () => props.cameraIndexCode,
+  (val) => {
+    if (props.cameraIndexCode) {
+      AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+      AllData.videoParams.wndId = -1;
+      if (AllData.oWebControl) {
+        previewVideo();
+      } else {
+        createdVideo();
       }
-    };
-    // 选择树结构的摄像头
-    const checkCamera = ({ option }) => {
-      return {
-        onClick() {
-          if (allData.showVideo != true) {
-            allData.showVideo = true;
-            allData.constIndex = 1;
-          } else {
-            allData.constIndex = -1;
-          }
-          console.log('option---', option);
-          // 只有子节点点击才能查看视频
-          if (option.click) {
-            allData.ifFirstTime = false;
-            allData.showVideos = {
-              cameraIndexCode: option.key, // 监控点编号
-              streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-              transMode: 1, // 传输协议：0-UDP，1-TCP
-              gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-              wndId: allData.constIndex, // 播放窗口序号
-            };
-            initVideo(allData.oWebControl);
-          }
-        },
-      };
-    };
-    /* 创建插件实例 */
-    function initPlugin() {
-      const dll = { dllPath: './VideoPluginConnect.dll' };
-      allData.oWebControl = new WebControl({
-        szPluginContainer: 'playVideoNow', // 指定容器id
-        iServicePortStart: 15900,
-        iServicePortEnd: 15909,
-        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    }
+  }
+);
+// 监听视频编码数组的改变(批量视频编码)
+watch(
+  () => props.defaultList,
+  (val) => {
+    if (props.defaultList.length > 0) {
+      PiLiangpreviewVideo();
+    }
+  }
+);
+// 监听布局修改
+watch(
+  () => props.layout,
+  (val) => {
+    setLayoutFunc();
+  }
+);
 
-        cbConnectSuccess: () => {
-          allData.oWebControl.JS_StartService('window', dll).then(() => {
-            // 设置视频 web 插件消息回调
-            allData.oWebControl.JS_SetWindowControlCallback({
-              cbIntegrationCallBack: (msg) => {
-                //注：不能使用外部函数调用，无效
-                if (msg?.responseMsg?.msg?.result) {
-                  const { result } = msg.responseMsg.msg;
-                  if (result == 1024) {
-                    allData.oWebControl.JS_HideWnd(); //放大隐藏其它视频窗口
-                  } else if (result == 1025) {
-                    allData.oWebControl.JS_ShowWnd(); //缩小显示全部窗口
-                  }
-                }
-              },
-            });
-            // 启动插件服务成功
-            allData.oWebControl.JS_CreateWnd('playVideoNow', allData.videoWidth, allData.videoHeight).then(() => {
-              // JS_CreateWnd创建视频播放窗口，宽高可设定
-              initVideo(allData.oWebControl); // 创建播放实例成功后初始化
-              console.log('启动插件成功！');
-            });
+// 创建播放实例
+const initPlugin = (callback) => {
+  AllData.oWebControl = new WebControl({
+    szPluginContainer: props.containerId, // 指定容器id
+    iServicePortStart: 15900,
+    iServicePortEnd: 15909,
+    szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    // 创建WebControl实例成功
+    cbConnectSuccess: () => {
+      AllData.oWebControl
+        .JS_StartService('window', {
+          // WebControl实例创建成功后需要启动服务
+          dllPath: './VideoPluginConnect.dll',
+        })
+        .then(() => {
+          // 启动插件服务成功
+          AllData.oWebControl.JS_SetWindowControlCallback({
+            // 设置消息回调
+            cbIntegrationCallBack: cbIntegrationCallBack,
           });
-        },
-        // 插件服务启动失败，弹框提示
-        cbConnectError: () => {
-          allData.oWebControl = null;
+          AllData.oWebControl.JS_CreateWnd(props.containerId, AllData.videoWidth, AllData.videoHeight).then(() => {
+            getVersion(callback);
+          });
+        });
+    },
+    cbConnectError: () => {
+      // 创建WebControl实例失败
+      AllData.oWebControl = null;
+      AllData.playText = '插件未启动，正在尝试启动，请稍候...';
+      WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
+      AllData.initCount++;
+      if (AllData.initCount < 3) {
+        setTimeout(() => {
+          initPlugin();
+        }, 3000);
+      } else {
+        AllData.playText = `
+              插件启动失败，请检查插件是否安装！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+      }
+    },
+    cbConnectClose: () => {
+      AllData.oWebControl = null;
+    },
+  });
+};
 
-          allData.Count++;
-          if (allData.Count < 2) {
-            WebControl.JS_WakeUp('VideoWebPlugin://');
-            setTimeout(() => {
-              initPlugin();
-            }, 8000);
-          } else {
-          }
-          console.log('创建插件失败');
-        },
-      });
-    }
-    /* 获取公钥 */
-    function initVideo(oWebControl) {
-      const params = {
-        funcName: 'getRSAPubKey',
-        argument: JSON.stringify({ keyLength: 1024 }),
-      };
-      oWebControl.JS_RequestInterface(params).then((res) => {
-        if (res.responseMsg.data) {
-          allData.plugKey = res.responseMsg.data;
-          getVideoConfig(oWebControl);
-        }
-      });
-    }
-    /* 视频插件配置  插件初始化 */
-    function getVideoConfig(oWebControl) {
-      const configObj = {
+// HK插件控制监听的消息回调
+const cbIntegrationCallBack = (oData) => {
+  console.log(oData);
+  if (oData.responseMsg.type == 6) {
+    // 此时是当前画幅的数据
+    console.log(`当前画面的画幅是` + oData.responseMsg.msg.layout, oData.responseMsg.msg.wndNum);
+    localStorage.setItem('HKlayout', oData.responseMsg.msg.layout);
+    localStorage.setItem('HKwndNum', oData.responseMsg.msg.wndNum);
+  }
+};
+
+// 初始化
+const init = (callback) => {
+  getPubKey(() => {
+    AllData.oWebControl
+      .JS_RequestInterface({
         funcName: 'init',
         argument: JSON.stringify({
-          appkey: '26265267', // API网关提供的appkey 26265267
-          secret: setEncrypt('CHtVgUwdLsJjE6CWYLMy'), // API网关提供的secret  CHtVgUwdLsJjE6CWYLMy
-          ip: '192.168.10.49', // API网关IP地址 192.168.10.49
-          port: 443, // 端口
-          playMode: 0, // 播放模式 0-预览，1-回放
-          snapDir: 'D:\\SnapDir', // 抓图存储路径
-          videoDir: 'D:\\VideoDir', // 紧急录像或录像剪辑存储路径
-          layout: '1x1', // 布局
-          enableHTTPS: 1, // 是否启用HTTPS协议 0https 1http
-          encryptedFields: 'secret', // 加密字段
-          showToolbar: 1, // 是否显示工具栏
-          showSmart: 1, // 是否显示智能信息
-          buttonIDs: '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769', // 自定义工具条按钮 新的
+          appkey: props.appkey, //API网关提供的appkey
+          secret: setEncrypt(props.secret), //API网关提供的secret
+          ip: props.ip, //API网关IP地址z
+          playMode: props.playMode, //播放模式（决定显示预览还是回放界面）
+          port: props.port, //端口
+          snapDir: 'C:\\SnapDir', //抓图存储路径
+          videoDir: 'C:\\VideoDir', //紧急录像或录像剪辑存储路径
+          layout: props.layout, //布局
+          enableHTTPS: 1, //是否启用HTTPS协议
+          encryptedFields: 'secret', //加密字段
+          showToolbar: props.showToolbar, //是否显示工具栏
+          toolBarButtonIDs: props.toolBarButtonIDs,
+          showSmart: props.showSmart, //是否显示智能信息
+          buttonIDs: props.buttonIDs, //自定义工具条按钮
+          protocol: 'hls',
         }),
-      };
-      oWebControl.JS_RequestInterface(configObj).then(() => {
-        oWebControl.JS_Resize(allData.videoWidth, allData.videoHeight);
-        // 初次加载时，显示默认多个，点击时单个加载
-        if (allData.ifFirstTime) {
-          getClickMoreAction();
-        } else {
-          allData.constIndex = -1;
-          getClickAction();
+      })
+      .then(() => {
+        AllData.videoWidth = playWnd.value.offsetWidth;
+        AllData.videoHeight = playWnd.value.offsetHeight;
+        // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+        AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+        // 判断当前cameraIndexCode中是否有数据 有数据的话就直接进行播放
+        if (props.defaultList.length > 0) {
+          // 批量渲染
+          PiLiangpreviewVideo();
+        } else if (props.cameraIndexCode.length > 0) {
+          // 单独渲染
+          AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+          previewVideo();
+        }
+        if (callback) {
+          callback();
         }
       });
-    }
-    /* 视频流RSA加密 */
-    function setEncrypt(value) {
-      const encrypt = new JSEncrypt();
-      encrypt.setPublicKey(allData.plugKey);
-      return encrypt.encrypt(value);
-    }
-    /* 视频预览 */
-    function getClickAction() {
-      console.log(allData.showVideos, 'showVideos');
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startPreview',
-        argument: JSON.stringify(allData.showVideos),
-      });
-    }
-    // 默认打开多个视频预览
-    function getClickMoreAction() {
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startMultiPreviewByCameraIndexCode',
-        argument: {
-          list: [
-            {
-              cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-              ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-              gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-              streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-              transMode: 1, // 传输协议 0-UDP 1-TCP
-              wndId: 1, // 播放窗口序号
-            },
-            // {
-            //   cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-            //   ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-            //   gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-            //   streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-            //   transMode: 1, // 传输协议 0-UDP 1-TCP
-            //   wndId: 2, // 播放窗口序号
-            // },
-          ],
-        },
-      });
-    }
-    onMounted(() => {
-      // getVideoList();
-      // 获取默认的监控点编号
-      let codes = localStorage.getItem('defaultVideoCode');
-      allData.defaultCode = codes ? codes : 'edaea623e40f45df8b1f3676aa283a79';
-      // 动态获取宽度
-
-      // 批量视频预览
-      allData.ifFirstTime = true;
-      allData.videoWidth = 620;
-      allData.videoHeight = 410;
-      initPlugin();
-    });
-    onBeforeUnmount(() => {
-      if (allData.oWebControl) {
-        allData.oWebControl.JS_HideWnd();
-        allData.oWebControl.JS_DestroyWnd();
-        allData.oWebControl = null;
-        allData.showVideo = false;
-      }
-    });
-
-    return {
-      ...toRefs(allData),
-      checkCamera,
-      initPlugin,
-      initVideo,
-      setEncrypt,
-      getVideoConfig,
-      getVideoList,
-    };
-  },
+  });
 };
-</script>
-<style lang="less">
-#emergency_video {
-  width: 620px;
-  height: 440px;
-  overflow: hidden;
+// 获取公钥
+const getPubKey = (callback) => {
+  const params = {
+    funcName: 'getRSAPubKey',
+    argument: JSON.stringify({ keyLength: 1024 }),
+  };
+  AllData.oWebControl.JS_RequestInterface(params).then((res) => {
+    if (res.responseMsg.data) {
+      AllData.plugKey = res.responseMsg.data;
+      callback();
+    }
+  });
+};
+// 视频流RSA加密
+const setEncrypt = (value) => {
+  const encrypt = new JSEncrypt();
+  encrypt.setPublicKey(AllData.plugKey);
+  return encrypt.encrypt(value);
+};
 
-  #videoBox {
+// 视频预览
+const previewVideo = () => {
+  console.log(AllData.videoParams, '单个视频播放');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startPreview',
+    argument: JSON.stringify(AllData.videoParams),
+  });
+};
+// 批量预览
+const PiLiangpreviewVideo = () => {
+  console.log(props.defaultList, '批量批量批量');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startMultiPreviewByCameraIndexCode',
+    argument: {
+      list: props.defaultList,
+    },
+  });
+};
+// 显示全屏
+const showFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setFullScreen',
+  });
+};
+// 退出全屏
+const exitFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'exitFullScreen',
+  });
+};
+const windowScroll = () => {
+  if (AllData.oWebControl != null) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 获取HK父节点的宽高
+const windowResize = () => {
+  AllData.videoWidth = playWnd.value.offsetWidth;
+  AllData.videoHeight = playWnd.value.offsetHeight;
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 销毁海康插件
+const destroyeWnd = () => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl.JS_Disconnect().then(() => {});
+  }
+};
+// 获取海康插件版本号
+const getVersion = (callback) => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl
+      .JS_RequestInterface({
+        funcName: 'getVersion',
+      })
+      .then((res) => {
+        if (res.responseMsg.code === 0 && res.responseMsg.data === 'V1.5.1') {
+          //JS_CreateWnd创建视频播放窗口，宽高可设定
+          init(callback); // 创建播放实例成功后初始化
+          console.log('启动插件成功！');
+        } else {
+          destroyeWnd();
+          AllData.playText = `
+              插件版本不正确，请重新下载版本安装覆盖！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+        }
+      });
+  }
+};
+// 切换布局
+const setLayoutFunc = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setLayout',
+    argument: {
+      layout: props.layout, // 窗口布局
+    },
+  });
+  if (props.layout != '1x1') {
+    // 先清除所有画面
+    clearShiPing();
+  }
+};
+// 销毁当前正在播放的所有画面
+const clearShiPing = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'stopAllPreview',
+  });
+  AllData.videoParams.wndId = 0;
+};
+// 初始化
+const createdVideo = () => {
+  initPlugin(() => {});
+};
+onMounted(() => {
+  // 创建实例
+  initPlugin();
+
+  // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
+  window.addEventListener('resize', windowResize());
+  // // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
+  window.addEventListener('scroll', windowResize());
+});
+onBeforeUnmount(() => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl
+      .JS_DestroyWnd({
+        funcName: 'destroyeWnd',
+      })
+      .then(() => {});
+  }
+  document.removeEventListener('resize', windowResize());
+  document.removeEventListener('scroll', windowScroll());
+});
+</script>
+
+<style lang="less" scoped>
+#index {
+  width: 100%;
+  height: 100%;
+  .playWnd {
     width: 100%;
     height: 100%;
-
-    #right_videoWindow {
-      width: 100%;
-      height: 100%;
-      .videobox2 {
-        width: 100%;
-        height: 100%;
-      }
-      #playVideoNow {
-        img {
-          display: none;
-        }
-      }
-    }
   }
 }
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/HPModal b/src/pages/views/WatershedOneMap/modalPart/modal/HPModal
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/HPModal
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE b/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/video.vue b/src/pages/views/WatershedOneMap/modalPart/modal/video.vue
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/video.vue
diff --git a/src/pages/views/WatershedOneMap/modalPart/rainTz.vue b/src/pages/views/WatershedOneMap/modalPart/rainTz.vue
index 96c9f9e..80d3880 100644
--- a/src/pages/views/WatershedOneMap/modalPart/rainTz.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/rainTz.vue
@@ -3,6 +3,7 @@
   <div class="natureOne">
     <!-- 气象信息 -->
     <div class="weatherPart">
+      <!-- <div class="publicTitle" @click="handlesweath()">气象信息</div> -->
       <div class="publicTitle">气象信息</div>
       <div class="content">
         <div class="part" v-for="(item, index) in weatherArr" :key="'a' + index">
@@ -335,7 +336,9 @@
         destination: Cesium.Cartesian3.fromDegrees(row.LNG, row.LAT, 3000.0),
       });
     };
-
+    const handlesweath = (data) => {
+      bus.emit('weather', data);
+    };
     onMounted(() => {
       getRainList(); //获取雨量站列表
       getWaterLoging(); //积水点
@@ -380,6 +383,7 @@
       getNowImage,
       getWaterLoging,
       handleRowClick,
+      handlesweath,
     };
   },
 };
diff --git a/src/pages/views/WatershedOneMap/newPart/Popup.vue b/src/pages/views/WatershedOneMap/newPart/Popup.vue
index 6604c45..0dad787 100644
--- a/src/pages/views/WatershedOneMap/newPart/Popup.vue
+++ b/src/pages/views/WatershedOneMap/newPart/Popup.vue
@@ -73,7 +73,7 @@
         </div>
         <!-- 查看工艺图 -->
         <div class="part gongyt" v-if="params.url">
-          <div class="value" @click.stop="checkGyt(params)">查看工艺图</div>
+          <div class="name" @click.stop="checkGyt(params)">查看工艺图</div>
         </div>
         <!-- 雨量站、雨量计历史数据 -->
         <div class="part" v-show="params.name.includes('雨量站')">
diff --git a/src/router/index.js b/src/router/index.js
index be06e0f..9d6f55a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -42,7 +42,7 @@
           path: '/ShugjOneMap',
           name: 'ShugjOneMap',
           component: () => import('@/pages/views/WatershedOneMap/OneMapModal.vue'),
-        },{
+        }, {
           path: '/test',
           name: 'tileset',
           component: () => import('@/pages/views/Mapbox.vue'),
diff --git a/vite.config.js b/vite.config.js
index 9182c91..0a120c4 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -44,6 +44,16 @@
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ''),
       },
+      '/modelFiles': {
+        target: 'http://192.168.10.48:8869/modelFiles', //陈迁 16.100
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/modelFiles/, ''),
+      },
+      '/modelFilesJson': {
+        target: 'http://192.168.10.48:8869/modelFilesJson', //陈迁 16.100
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/modelFilesJson/, ''),
+      },
       '/huangji_v1': {
         // target: 'http://192.168.16.100:6068/huangji_v1/', //陈迁 16.100
         target: 'http://192.168.10.48:8869/huangji_v1', //陈迁 16.100

diff --git a/package-lock.json b/package-lock.json
index 194a73a..5b0cf78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "cesium": "^1.117.0",
         "echarts": "^5.2.2",
         "esbuild-windows-64": "^0.14.11",
+        "gsap": "^3.9.1",
         "highcharts": "^9.3.2",
         "hls.js": "^1.5.13",
         "import-three-examples": "^2.2.4",
@@ -1080,12 +1081,14 @@
     "node_modules/@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -2731,6 +2734,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "node_modules/gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5401,15 +5409,13 @@
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz",
       "integrity": "sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@css-render/vue3-ssr": {
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz",
       "integrity": "sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@emotion/hash": {
       "version": "0.8.0",
@@ -5841,12 +5847,14 @@
     "@types/lodash": {
       "version": "4.14.182",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
-      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
     },
     "@types/lodash-es": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
       "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
       "requires": {
         "@types/lodash": "*"
       }
@@ -5963,8 +5971,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz",
       "integrity": "sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "1.3.10",
@@ -6167,32 +6174,27 @@
     "@wangeditor/editor-for-vue": {
       "version": "5.1.12",
       "resolved": "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-5.1.12.tgz",
-      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==",
-      "requires": {}
+      "integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ=="
     },
     "@wangeditor/list-module": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.2.tgz",
-      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg==",
-      "requires": {}
+      "integrity": "sha512-VfENZEFvsLTiLxN/cj8cibFGy9NVV+/cfATTiLiH9ef+8lgKv8apttXYVlqIAfnlJLLuCk0cIm8c/zH+hbtrZg=="
     },
     "@wangeditor/table-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.1.tgz",
-      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA==",
-      "requires": {}
+      "integrity": "sha512-VPjEWQtncS2DsXYXiHUxPSxn2Xhc8GdhG3la7N5YhvxQde1+4N0SZLXeWsYvbGzOq4um5XToq5pktLLbE8G+EA=="
     },
     "@wangeditor/upload-image-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz",
-      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w==",
-      "requires": {}
+      "integrity": "sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w=="
     },
     "@wangeditor/video-module": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.1.tgz",
-      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg==",
-      "requires": {}
+      "integrity": "sha512-6gzpS5cnJihW2T0HFjqmbv6v8ouyaeMUjdM2X8BPohwD74p1ov00dCmRt5QekNTyYSmRHK0ASkUMOvRGqaDxMg=="
     },
     "@xmldom/xmldom": {
       "version": "0.8.10",
@@ -6523,8 +6525,7 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.4.tgz",
       "integrity": "sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "debug": {
       "version": "4.3.4",
@@ -7034,6 +7035,11 @@
       "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
       "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
     },
+    "gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -7451,8 +7457,7 @@
     "lodash-unified": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-      "requires": {}
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7894,8 +7899,7 @@
         "vue-demi": {
           "version": "0.13.5",
           "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.5.tgz",
-          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==",
-          "requires": {}
+          "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
         }
       }
     },
diff --git a/package.json b/package.json
index a096642..0f3893d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "cesium": "^1.117.0",
     "echarts": "^5.2.2",
     "esbuild-windows-64": "^0.14.11",
+    "gsap": "^3.9.1",
     "highcharts": "^9.3.2",
     "hls.js": "^1.5.13",
     "import-three-examples": "^2.2.4",
diff --git a/src/pages/views/WatershedOneMap/OneMapModal.vue b/src/pages/views/WatershedOneMap/OneMapModal.vue
index b4f4e48..861db2b 100644
--- a/src/pages/views/WatershedOneMap/OneMapModal.vue
+++ b/src/pages/views/WatershedOneMap/OneMapModal.vue
@@ -94,13 +94,41 @@
     <n-modal v-model:show="showModalBZ" :show-icon="false" :mask-closable="false" preset="dialog" :title="BZtitle" style="width: 680px">
       <BengZModal :valueModalbz="valueModalbz" />
     </n-modal>
+
+    <div class="mask" v-if="maskcbwsc">
+      <div id="ShowBox">
+        <div class="ShowBoxname">后湖泵站模型</div>
+        <n-icon @click.stop="ShowInfo" size="40">
+          <Close />
+        </n-icon>
+      </div>
+      <cbwsc> </cbwsc>
+      <div class="bengji">
+        <div id="lableBox" class="lableBox">
+          <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id">
+            <div class="outer">
+              <div class="title">{{ item.name }}</div>
+              <ul>
+                <li v-for="(v, j) in item.data" :key="j">
+                  <span class="pointName">{{ v.pointName }}</span>
+                  <span class="value">{{ v.value }}</span>
+                </li>
+              </ul>
+              <div class="triangle"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Hls from 'hls.js';
 import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
+import { Close } from '@vicons/ionicons5';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import cbwsc from './modalPart/cbwsc.vue'; //三维
 import BengZModal from './modalPart/modal/BengZModal.vue'; //湖泊监测弹窗
 import MapBox from './modalPart/Mapbox.vue';
 import OnePart from './modalPart/natureNet.vue'; //全域感知
@@ -128,11 +156,178 @@
     Legend,
     Vue3SeamlessScroll,
     BengZModal,
+    cbwsc,
+    Close,
   },
   setup() {
     let hls = null;
     let hls1 = null;
     const allData = reactive({
+      labelData: [
+        {
+          name: '1#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '开',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '2#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '3#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '4#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '5#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '130HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '130A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '130V',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '6#泵机运行情况',
+          data: [
+            {
+              pointName: '泵机状态',
+              value: '关',
+            },
+            {
+              pointName: '运行频率',
+              value: '--HZ',
+            },
+            {
+              pointName: 'A相电流',
+              value: '--A',
+            },
+            {
+              pointName: 'A相电压',
+              value: '--V',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      maskcbwsc: false,
       indexCode: '',
       indexCode1: '',
       videoname: '',
@@ -158,7 +353,7 @@
       dateNumber: 0,
       timer: null,
       ifPlay: false,
-      currentVal: '全域感知',
+      currentVal: '规划引领',
       datearry: [],
       dateTime: [],
       dateLine: formatDate(Date.now() - 24 * 30 * 60 * 60 * 1000, 'YYYY-MM-DD'),
@@ -545,6 +740,9 @@
         hls1.destroy();
       }
     };
+    const ShowInfo = () => {
+      allData.maskcbwsc = false;
+    };
     onMounted(() => {
       // getFooterList();
       // 设置视频监控默认显示的code
@@ -558,6 +756,9 @@
       bus.on('datelist', (e) => {
         allData.datearry = e;
       });
+      bus.on('weather', (e) => {
+        allData.maskcbwsc = true;
+      });
       // 控制播放雨量图例显示
       bus.on('ifQixiang', (e) => {
         if (e) {
@@ -618,6 +819,8 @@
         hls1.destroy();
       }
       clearTimer();
+
+      bus.off('weather');
       bus.off('getGongYt');
       bus.off('ifQixiang');
       bus.off('ifStationWarn');
@@ -639,12 +842,13 @@
       bfvideo,
       bfvideo1,
       handleModalChange,
+      ShowInfo,
     };
   },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .dialogGYT {
   display: flex;
   .imgs {
@@ -840,4 +1044,88 @@
   left: 10px;
   bottom: 5px;
 }
+.mask {
+  position: fixed;
+  width: calc(100% - 100px);
+  margin: 0 50px;
+  height: calc(92vh - 10px);
+  background-color: rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: 20px;
+  z-index: 999999999;
+  // position: fixed;
+  // width: 200px;
+  // height: 200px;
+  // background-color: rgba(0, 0, 0, 0.5);
+  // right: 400px;
+  // bottom: 0;
+  // z-index: 999999999;
+  .bengji {
+    position: relative;
+    bottom: 145px;
+    width: 60%;
+    left: 20%;
+    right: 20%;
+    .lableBox {
+      display: flex;
+      height: 100%;
+    }
+    .label {
+      display: flex;
+      padding: 10px;
+      z-index: 9999 !important;
+      width: 200px;
+
+      .title {
+        line-height: 30px;
+        font-size: 14px;
+        padding: 0 10px;
+        border-bottom: 1px solid #e7f1ff;
+        color: turquoise;
+      }
+
+      ul {
+        li {
+          padding: 0 10px;
+          line-height: 26px;
+          display: flex;
+          justify-content: space-between;
+
+          &:nth-child(2n) {
+            background: #e7f1ff;
+          }
+
+          .pointName {
+            color: #888;
+          }
+
+          .value {
+            color: #0066ff;
+          }
+        }
+      }
+
+      .outer {
+        top: 0;
+        left: 0;
+        width: 140px;
+        border-radius: 10px;
+        box-shadow: -2px 0 20px #0060ff;
+        background: rgba(255, 255, 255, 0.712);
+      }
+    }
+  }
+  #ShowBox {
+    display: flex;
+    justify-content: space-between;
+    color: #ffffff;
+    margin-left: 20px;
+    cursor: pointer;
+    .ShowBoxname {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/Popup.vue b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
index 77eea0d..46a5863 100644
--- a/src/pages/views/WatershedOneMap/modalPart/Popup.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/Popup.vue
@@ -102,6 +102,9 @@
         <div class="part gongyt" v-if="popupInfo.url">
           <div class="value" @click.stop="checkGyt(popupInfo)">查看工艺图</div>
         </div>
+        <div class="part" style="cursor: pointer" v-if="popupInfo.name.includes('后湖泵站')">
+          <div class="name" @click.stop="handlesweath()">查看模型</div>
+        </div>
         <!-- 雨量站、雨量计历史数据 -->
         <div class="part" v-show="popupInfo.name.includes('雨量站')">
           <div class="name" style="width: 100%">降雨历史数据:</div>
@@ -220,6 +223,10 @@
     async function checkGyt(popupInfo) {
       bus.emit('getGongYt', popupInfo);
     }
+
+    const handlesweath = (data) => {
+      bus.emit('weather', data);
+    };
     // 降雨历史数据
     const echartRain = async () => {
       let chart = document.getElementById('echartHistory');
@@ -297,6 +304,7 @@
       ...toRefs(allData),
       closepopupdefect,
       checkGyt,
+      handlesweath,
     };
   },
 });
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
new file mode 100644
index 0000000..993d0af
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc.vue
@@ -0,0 +1,599 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('/modelFilesJson/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    // const hdr = '/modelFilesJson/three_glb/kloppenheim_061_4k.hdr';
+    const hdr = './static/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+
+    // 标注水位
+
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      // initModal('wushuichang', '/modelFiles/three_glb/3.gltf');
+      // initModal('wushuichang', 'public/static/three_glb/3.gltf');
+    });
+    onMounted(() => {
+      initModal('wushuichang', './static/three_glb/3.gltf');
+      // initModal('wushuichang', '/modelFilesJson/three_glb/3.gltf');
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+        }
+        // document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
new file mode 100644
index 0000000..8b4cac2
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/cbwsc1.vue
@@ -0,0 +1,652 @@
+<template>
+  <div class="cantainer">
+    <div id="bengzhan" ref="threeDom">
+      <div id="lableBox" class="lableBox">
+        <div class="label" v-for="(item, i) in labelData" :key="i" :id="item.id" style="display: none">
+          <div class="outer">
+            <div class="title">{{ item.name }}</div>
+            <ul>
+              <li v-for="(v, j) in item.data" :key="j">
+                <span class="pointName">{{ v.pointName }}</span>
+                <span class="value">{{ v.value }}</span>
+              </li>
+            </ul>
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, onBeforeMount } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+gsap.registerPlugin(CSSRulePlugin); // 引入css插件,完成某些css动画
+import { Move, CameraReverseOutline, ReturnDownForward, EyeSharp, Eye } from '@vicons/ionicons5';
+
+export default {
+  name: 'dqtxc',
+  components: {
+    Move,
+    CameraReverseOutline,
+    ReturnDownForward,
+    EyeSharp,
+    Eye,
+  },
+  props: {
+    bzInfo: Object,
+  },
+  setup(props) {
+    const state = reactive({
+      width: null,
+      height: null,
+      Scene: null,
+      Camera: null,
+      Renderer: null,
+      Controls: null,
+      granaryArr: [],
+      texture: null,
+      LabelRenderer: null,
+      cnt: 0,
+      mixer4: null,
+      // labelData: [],
+      labelData: [
+        {
+          name: '一号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label1`,
+          position: {
+            x: 46,
+            y: -5,
+            z: -6,
+          },
+        },
+        {
+          name: '二号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label2`,
+          position: {
+            x: 50,
+            y: -5,
+            z: -16,
+          },
+        },
+        {
+          name: '三号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label3`,
+          position: {
+            x: 55,
+            y: -5,
+            z: -22,
+          },
+        },
+        {
+          name: '四号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label4`,
+          position: {
+            x: 60,
+            y: -5,
+            z: -28,
+          },
+        },
+        {
+          name: '五号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label5`,
+          position: {
+            x: 65,
+            y: -5,
+            z: -34,
+          },
+        },
+        {
+          name: '六号泵机',
+          data: [
+            {
+              pointName: '开关状态:',
+              value: '关',
+            },
+            {
+              pointName: '电压:',
+              value: '0V',
+            },
+            {
+              pointName: '电流:',
+              value: '0A',
+            },
+          ],
+          id: `label6`,
+          position: {
+            x: 70,
+            y: -5,
+            z: -40,
+          },
+        },
+      ],
+      timer: null,
+      BZData: [],
+    });
+    const Scene = new THREE.Scene();
+    // const axesHelper = new THREE.AxesHelper(10000);
+    // Scene.add(axesHelper);
+    const clock = new THREE.Clock();
+    const threeDom = ref(null);
+    const cameraPosition = {
+      // x: 65,
+      // y: -5,
+      // z: -34,
+      x: 0.6684777522359171,
+      y: 73.34509967795945,
+      z: -75.51598392913485,
+    };
+    const cameraLookat = {
+      x: 0,
+      y: 0,
+      z: 0,
+    };
+    const cameraReset = (position, lookAt, time = 3) => {
+      gsap.to(state.Camera.position, {
+        x: position.x,
+        y: position.y,
+        z: position.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Camera.lookAt, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+      gsap.to(state.Controls.target, {
+        x: lookAt.x,
+        y: lookAt.y,
+        z: lookAt.z,
+        duration: time,
+        ease: 'power4.out',
+      });
+    };
+
+    const initLabelRenderer = () => {
+      state.LabelRenderer = new CSS3DRenderer();
+      state.LabelRenderer.setSize(state.width, state.height);
+      state.LabelRenderer.domElement.style.position = 'absolute';
+      state.LabelRenderer.domElement.style.top = '0px';
+      threeDom.value.appendChild(state.LabelRenderer.domElement);
+    };
+    const initRenderer = () => {
+      state.width = document.getElementById('bengzhan').clientWidth;
+      state.height = document.getElementById('bengzhan').clientHeight;
+      state.Renderer = new THREE.WebGLRenderer({
+        antialias: true, //抗锯齿
+        alpha: true, //开启alpha
+      });
+      state.Renderer.shadowMap.enabled = true;
+      // state.Renderer.setClearColor("skyblue");
+      state.Renderer.setPixelRatio(window.devicePixelRatio);
+      state.Renderer.setSize(state.width, state.height);
+      state.Renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      state.Renderer.toneMappingExposure = 2.3; // 曝光系数
+      state.Renderer.setClearColor(0xffffff);
+
+      threeDom.value.appendChild(state.Renderer.domElement);
+    };
+
+    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
+    const initCamera = () => {
+      state.Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
+      //将相机放到x:1000 , y:1000 , z:1000的位置
+      // state.Camera.position.set(30, 0, 10);
+      state.Camera.position.set(1000, 1000, 1000);
+    };
+    const initControls = () => {
+      //调试模型光线位置代码
+      //   const axesHelper = new THREE.AxesHelper(10000);
+      //   Scene.add(axesHelper);
+
+      state.Controls = new OrbitControls(state.Camera, state.LabelRenderer.domElement);
+      //上下翻转的最大角度
+      state.Controls.maxPolarAngle = 5;
+      // //上下翻转的最小角度
+      state.Controls.minPolarAngle = 0.8;
+      //是否允许缩放
+      state.Controls.enableZoom = true;
+      // 使动画循环使用时阻尼或自转 意思是否有惯性
+      state.Controls.enableDamping = false;
+      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
+      state.Controls.dampingFactor = 0.04;
+      // 是否可以旋转
+      state.Controls.enableRotate = true;
+      // 是否可以缩放与速度
+      state.Controls.enableZoom = true;
+      // 设置相机距离原点的最远距离
+      state.Controls.minDistance = 100;
+      // 设置相机距离原点的最远距离
+      state.Controls.maxDistance = 12000;
+      // 是否开启右键拖拽
+      state.Controls.enablePan = true;
+    };
+    const initModal = (name, url) => {
+      const Gltfloader = new GLTFLoader();
+      var dracoLoader = new DRACOLoader();
+      // dracoLoader.setDecoderPath('https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/'); //设置解压库文件路径
+      dracoLoader.setDecoderPath('modelFiles/Three_Gltf/'); //设置解压库文件路径
+
+      Gltfloader.setDRACOLoader(dracoLoader);
+      Gltfloader.load(
+        url,
+        (gltf) => {
+          gltf.scene.name = name;
+          gltf.scene.scale.set(0.35, 0.35, 0.35);
+          gltf.scene.position.set(10, 10, 10);
+          //   gltf.scene.position.z = 10;
+
+          cameraReset(cameraPosition, cameraLookat);
+          state.mixer = new THREE.AnimationMixer(gltf.scene);
+          // state.mixer.clipAction(gltf.animations[0]).play(); //渲染glb文件自带的动画效果
+
+          Scene.add(gltf.scene);
+          // Scene.add(cube);
+          Scene.traverse(function (child) {
+            if (child.isMesh) {
+              child.frustumCulled = false;
+              child.material.side = THREE.DoubleSide;
+              state.granaryArr.push(child);
+            }
+          });
+        },
+        (function (xhr) {
+          console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+        })``
+      );
+    };
+    const initLight = () => {
+      let ambientLight = new THREE.AmbientLight(0x0557d7, 2); // 创建环境光
+      Scene.add(ambientLight);
+    };
+    const initSpotLight = () => {
+      let spotLight = new THREE.SpotLight(0x2e3d46, 0.9);
+      spotLight.position.set(20, 500, 100);
+      const SpotLightHelper = new THREE.SpotLightHelper(spotLight, 1);
+      // 光源开启阴影效果
+      // spotLight.castShadow = true;
+      // Scene.add(SpotLightHelper);
+      Scene.add(spotLight); // 将聚光灯添加到场景中
+    };
+    const initDirectionalLight = () => {
+      // 平行光设置
+      var directionalLight = new THREE.DirectionalLight(0x0557d7, 1);
+      // 两点确定一条直线，我们要找两个点，一个是我们设置的点(position)，一个是物体(target)
+      directionalLight.position.set(120, 100, 50);
+      // directionalLight.target = mesh;
+      Scene.add(directionalLight);
+    };
+
+    const hdr = 'modelFiles/three_glb/kloppenheim_061_4k.hdr';
+    // const hdr = 'public/static/three_glb/kloppenheim_061_4k.hdr';
+    const initSky = () => {
+      var pmremGenerator = new THREE.PMREMGenerator(state.Renderer); // 使用hdr作为背景色
+      pmremGenerator.compileEquirectangularShader();
+      new RGBELoader().load(hdr, function (texture) {
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        // envMap.mapping = THREE.EquirectangularReflectionMapping;
+        // state.Renderer.outputEncoding = THREE.sRGBEncoding;
+        envMap.isPmremTexture = true;
+        pmremGenerator.dispose();
+        Scene.environment = envMap;
+        Scene.background = envMap;
+      });
+    };
+    // 创建气泡窗
+    function createLable() {
+      state.labelData.forEach((item, index) => {
+        let labelCSS3D = Scene.getObjectByName(`label${index + 1}`);
+        if (labelCSS3D === undefined) {
+          let lableDiv = document.getElementById(`label${index + 1}`);
+          lableDiv.style.display = 'block';
+          labelCSS3D = new CSS3DObject(lableDiv);
+          labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
+          labelCSS3D.scale.set(0.03, 0.03, 0.03);
+          labelCSS3D.name = 'Zha';
+          Scene.add(labelCSS3D);
+          console.log('labelCSS3D.position', labelCSS3D.position);
+        } else {
+          labelCSS3D.visible = true;
+        }
+      });
+    }
+    const meshOnClick = (event) => {
+      let raycaster = new THREE.Raycaster();
+      const pointer = new THREE.Vector2();
+      console.log(event.clientX, event.clientY);
+      let Top = 60,
+        Left = 60;
+      pointer.x = ((event.clientX - Left) / state.width) * 2 - 1;
+      pointer.y = -((event.clientY - Top) / state.height) * 2 + 1;
+      raycaster.setFromCamera(pointer, state.Camera);
+      let intersects = raycaster.intersectObjects(state.granaryArr, true);
+      console.log(intersects);
+      console.log('------', state.Camera.position);
+      if (intersects.length > 0) {
+        console.log(intersects[0].object);
+      } else {
+        console.log('NoNoNo');
+      }
+    };
+    // 标注水位
+    const createWaterLevel = () => {
+      let info = {
+        name: 'text',
+        text: ' 水位: 0.5M ',
+        fontsize: 30,
+        Color: 'green',
+        backgroundColor: 'rgba(0,0,0,0)',
+        position: { x: 2, y: 10, z: 0 },
+        fillRect: { x: 0, y: 0, w: 300, h: 60 },
+        // rotateY: -180,
+      };
+      let canvas = document.createElement('canvas');
+      let ctx = canvas.getContext('2d');
+      //制作矩形
+      ctx.fillStyle = info.backgroundColor;
+      ctx.fillRect(info.fillRect.x, info.fillRect.y, info.fillRect.w, info.fillRect.h);
+      //设置文字
+      ctx.fillStyle = info.Color;
+      ctx.font = `normal ${info.fontsize}px "楷体"`;
+      let textWord = info.text;
+      ctx.fillText(textWord, 10, 40);
+      //生成图片
+      let url = canvas.toDataURL('image/png');
+      //将图片构建到纹理中
+      let geometry1 = new THREE.PlaneGeometry(20, 10);
+      let texture = THREE.ImageUtils.loadTexture(url, null, function (t) {});
+
+      let material1 = new THREE.MeshBasicMaterial({
+        map: texture,
+        side: THREE.DoubleSide,
+        opacity: 1,
+        transparent: true,
+      });
+      let rect = new THREE.Mesh(geometry1, material1);
+      rect.name = info.name;
+      rect.position.set(info.position.x, info.position.y, info.position.z);
+      // rect.rotateY(info.rotateY);
+      Scene.add(rect);
+    };
+    const onWindowResize = () => {
+      state.Camera.aspect = window.innerWidth / window.innerHeight;
+      state.Camera.updateProjectionMatrix();
+      state.Renderer.setSize(state.width, state.height);
+      state.LabelRenderer.setSize(state.width, state.height);
+      document.addEventListener('click', meshOnClick);
+      Render();
+    };
+    const initPointLight = () => {
+      const pointLight = new THREE.PointLight(0xffffff, 1, 200);
+      pointLight.intensity = 100;
+      pointLight.position.set(0, 200, 0);
+      Scene.add(pointLight);
+
+      const sphereSize = 1;
+      //点光源辅助线
+      // const pointLightHelper = new THREE.PointLightHelper(
+      //     pointLight,
+      //     sphereSize
+      // );
+      // Scene.add(pointLightHelper);
+    };
+    const Render = () => {
+      requestAnimationFrame(Render);
+
+      if (state.mixer) state.mixer.update(clock.getDelta()); //渲染glb文件自带的动画效果
+
+      state.Controls.update(); // 轨道控制器的更新
+      state.Renderer.clear(); // 清除画布
+      state.Renderer.render(Scene, state.Camera);
+
+      state.LabelRenderer.render(Scene, state.Camera);
+      const delta = clock.getDelta();
+      //调试打印相机XYZ的方向位置
+      // console.log(2222, state.Camera);
+    };
+
+    onBeforeMount(() => {
+      //   initGltfFloor();
+      //   initModal('wushuichang', 'modelFiles/three_glb/3.gltf');
+      initModal('wushuichang', 'public/static/three_glb/ChangJing-comp.gltf');
+    });
+    onMounted(() => {
+      nextTick(() => {
+        if (document.readyState === 'complete') {
+          // createLable();
+          // createWaterLevel();
+        }
+        document.addEventListener('click', meshOnClick);
+        window.addEventListener('resize', onWindowResize, false);
+      });
+      initLight(); //环境光
+      initPointLight(); //点光
+      initSpotLight(); //聚光灯
+      initDirectionalLight(); //平行光
+      initRenderer();
+      initLabelRenderer();
+      initCamera();
+      initControls();
+
+      initSky();
+      Render();
+    });
+    onUnmounted(() => {
+      Scene.traverse((e) => {
+        if (e.BufferGeometry) e.BufferGeometry.dispose();
+        if (e.material) {
+          if (Array.isArray(e.material)) {
+            e.material.forEach((m) => {
+              m.dispose();
+            });
+          } else {
+            e.material.dispose();
+          }
+        }
+        if (e.isMesh) {
+          e.remove();
+        }
+      });
+      Scene.remove();
+      state.Renderer.dispose();
+      state.Renderer.content = null;
+      document.removeEventListener('click', meshOnClick);
+      window.removeEventListener('resize', onWindowResize, false);
+      cancelAnimationFrame(Render);
+      clearInterval(state.timer);
+    });
+
+    return {
+      threeDom,
+      ...toRefs(state),
+      initRenderer,
+      initLabelRenderer,
+      initCamera,
+      initControls,
+      initDirectionalLight,
+      initSky,
+      initLight,
+      Render,
+      meshOnClick,
+      createLable,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+.mt15 {
+  margin-top: 15px;
+}
+
+.cantainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #ShowBox {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 9999;
+    font-size: 18px;
+    color: aqua;
+    cursor: pointer;
+  }
+
+  #bengzhan {
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle, #8594b4, #c0c8d8);
+  }
+
+  .label {
+    padding: 10px;
+    z-index: 9999 !important;
+    width: 200px;
+
+    .title {
+      line-height: 40px;
+      font-size: 18px;
+      padding: 0 10px;
+      border-bottom: 1px solid #e7f1ff;
+      color: turquoise;
+    }
+
+    ul {
+      li {
+        padding: 0 10px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(2n) {
+          background: #e7f1ff;
+        }
+
+        .pointName {
+          color: #888;
+        }
+
+        .value {
+          color: #0066ff;
+        }
+      }
+    }
+
+    .outer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 140px;
+      border-radius: 10px;
+      box-shadow: -2px 0 20px #0060ff;
+      background: rgba(255, 255, 255, 0.712);
+    }
+
+    .inner {
+      position: absolute;
+      top: -7px;
+      left: -7px;
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #0060ff;
+      box-shadow: -2px 0 9px #0060ff;
+      background: rgba(255, 255, 255, 0.685);
+    }
+
+    .triangle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-right: 5px solid #0060ff;
+      border-bottom: 5px solid #0060ff;
+      border-left: 5px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
index 4383d0d..dd36bc9 100644
--- a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue
@@ -1,304 +1,374 @@
 <template>
-  <div id="emergency_video">
-    <div id="videoBox">
-      <!-- <div id="left_listBox" >
-        <div class="videoTable">
-          <n-tree
-            :data="treesData"
-            v-if="treesData.length"
-            :node-props="checkCamera"
-            block-line
-            :default-expanded-keys="defaultExpandedKeys"
-          />
-        </div>
-      </div> -->
-      <div id="right_videoWindow" v-if="showVideo">
-        <!-- 视频盒子 -->
-        <div id="playVideoNow" v-if="showVideo" class="videobox2"></div>
-      </div>
-    </div>
+  <div id="index">
+    <div ref="playWnd" :id="containerId" class="playWnd" v-html="AllData.oWebControl === null ? AllData.playText : ''"></div>
   </div>
 </template>
 
-<script>
-import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import { getCameraTree } from '@/services';
+<script setup name="index">
+import { ref, reactive, toRefs, onMounted } from 'vue';
+const props = defineProps({
+  // 内网、公网 4个配置
+  appkey: {
+    type: String,
+    default: () => '25124952',
+  },
+  secret: {
+    type: String,
+    default: () => 'aJOYWAt8CJabjjA1Ekeq',
+  },
+  ip: {
+    type: String,
+    default: () => '113.57.101.104',
+  },
+  port: {
+    type: Number,
+    default: () => 8888,
+  },
+  // 视频布局
+  layout: {
+    type: String,
+    default: () => '1x1',
+  },
+  // 初始播放模式：0-预览，1-回放
+  playMode: {
+    type: Number,
+    default: () => 0,
+  },
+  // 是否显示工具栏，0-不显示，非0-显示
+  showToolbar: {
+    type: Number,
+    default: () => 1,
+  },
+  // 工具栏按钮
+  toolBarButtonIDs: {
+    type: String,
+    default: () => '4098,4097',
+  },
+  // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
+  showSmart: {
+    type: Number,
+    default: () => 1,
+  },
+  // 自定义工具条按钮
+  buttonIDs: {
+    type: String,
+    default: () => '0,16,256,257,258,259,512,260,515,516,517,768,769',
+  },
+  // 相机编号
+  cameraIndexCode: {
+    type: [String, Number],
+  },
+  // 视频播放容器id
+  containerId: {
+    type: String,
+    default: () => 'playWnd',
+  },
+  // 默认打开的视频
+  defaultList: {
+    type: Array,
+    default: () => [],
+  },
+});
 
-export default {
-  name: 'emergency_video',
-  components: {},
-  setup() {
-    const allData = reactive({
-      showVideo: true,
-      constIndex: 1,
-      oWebControl: null,
-      plugKey: '',
-      Count: 0,
-      ifFirstTime: true,
-      videoWidth: 1400,
-      videoHeight: 750,
-      defaultExpandedKeys: ['root000000'], //默认展开节点
-      defaultCode: '', //默认监控点
-      showVideos: {
-        cameraIndexCode: 'e4a8bcca3393494bbdc9f2da087875bb', // 默认监控点编号
-        streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-        transMode: 1, // 传输协议：0-UDP，1-TCP
-        gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-        wndId: 1, // 播放窗口序号
-      },
-      treesData: [
-        {
-          label: '0',
-          key: '0',
-          click: false,
-          children: [
-            {
-              label: '组1',
-              key: '1-0',
-              click: false,
-              children: [
-                {
-                  label: '铁路桥',
-                  key: 'cf99e49a50f641ba83832dd5ebff3fa5',
-                  click: true,
-                },
-                {
-                  label: '王家墩',
-                  key: '4097ade6e64142d7ac7adff80b4617f0',
-                  click: true,
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    });
-    // 获取摄像头列表
-    const getVideoList = async () => {
-      allData.treesData = [];
-      let res = await getCameraTree();
-      if (res && res.code == 200) {
-        let datas = res.data;
-        // allData.defaultExpandedKeys.push(datas[0].key);
-        allData.treesData = datas;
+const AllData = reactive({
+  oWebControl: null,
+  plugKey: '',
+  // 视频相关参数
+  videoParams: {
+    cameraIndexCode: '', //监控点编号
+    streamMode: 0, //主子码流标识：0-主码流，1-子码流
+    transMode: 1, //传输协议：0-UDP，1-TCP
+    gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
+    wndId: 1, //播放窗口序号
+  },
+  videoWidth: null,
+  videoHeight: null,
+  playText: '启动中...',
+  initCount: 0, // 启动次数
+  href: '',
+});
+// 视频容器的ref对象
+const playWnd = ref(null);
+
+// 监听视频编码的改变(单个视频编码)
+watch(
+  () => props.cameraIndexCode,
+  (val) => {
+    if (props.cameraIndexCode) {
+      AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+      AllData.videoParams.wndId = -1;
+      if (AllData.oWebControl) {
+        previewVideo();
+      } else {
+        createdVideo();
       }
-    };
-    // 选择树结构的摄像头
-    const checkCamera = ({ option }) => {
-      return {
-        onClick() {
-          if (allData.showVideo != true) {
-            allData.showVideo = true;
-            allData.constIndex = 1;
-          } else {
-            allData.constIndex = -1;
-          }
-          console.log('option---', option);
-          // 只有子节点点击才能查看视频
-          if (option.click) {
-            allData.ifFirstTime = false;
-            allData.showVideos = {
-              cameraIndexCode: option.key, // 监控点编号
-              streamMode: 0, // 主子码流标识：0-主码流，1-子码流
-              transMode: 1, // 传输协议：0-UDP，1-TCP
-              gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
-              wndId: allData.constIndex, // 播放窗口序号
-            };
-            initVideo(allData.oWebControl);
-          }
-        },
-      };
-    };
-    /* 创建插件实例 */
-    function initPlugin() {
-      const dll = { dllPath: './VideoPluginConnect.dll' };
-      allData.oWebControl = new WebControl({
-        szPluginContainer: 'playVideoNow', // 指定容器id
-        iServicePortStart: 15900,
-        iServicePortEnd: 15909,
-        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    }
+  }
+);
+// 监听视频编码数组的改变(批量视频编码)
+watch(
+  () => props.defaultList,
+  (val) => {
+    if (props.defaultList.length > 0) {
+      PiLiangpreviewVideo();
+    }
+  }
+);
+// 监听布局修改
+watch(
+  () => props.layout,
+  (val) => {
+    setLayoutFunc();
+  }
+);
 
-        cbConnectSuccess: () => {
-          allData.oWebControl.JS_StartService('window', dll).then(() => {
-            // 设置视频 web 插件消息回调
-            allData.oWebControl.JS_SetWindowControlCallback({
-              cbIntegrationCallBack: (msg) => {
-                //注：不能使用外部函数调用，无效
-                if (msg?.responseMsg?.msg?.result) {
-                  const { result } = msg.responseMsg.msg;
-                  if (result == 1024) {
-                    allData.oWebControl.JS_HideWnd(); //放大隐藏其它视频窗口
-                  } else if (result == 1025) {
-                    allData.oWebControl.JS_ShowWnd(); //缩小显示全部窗口
-                  }
-                }
-              },
-            });
-            // 启动插件服务成功
-            allData.oWebControl.JS_CreateWnd('playVideoNow', allData.videoWidth, allData.videoHeight).then(() => {
-              // JS_CreateWnd创建视频播放窗口，宽高可设定
-              initVideo(allData.oWebControl); // 创建播放实例成功后初始化
-              console.log('启动插件成功！');
-            });
+// 创建播放实例
+const initPlugin = (callback) => {
+  AllData.oWebControl = new WebControl({
+    szPluginContainer: props.containerId, // 指定容器id
+    iServicePortStart: 15900,
+    iServicePortEnd: 15909,
+    szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+    // 创建WebControl实例成功
+    cbConnectSuccess: () => {
+      AllData.oWebControl
+        .JS_StartService('window', {
+          // WebControl实例创建成功后需要启动服务
+          dllPath: './VideoPluginConnect.dll',
+        })
+        .then(() => {
+          // 启动插件服务成功
+          AllData.oWebControl.JS_SetWindowControlCallback({
+            // 设置消息回调
+            cbIntegrationCallBack: cbIntegrationCallBack,
           });
-        },
-        // 插件服务启动失败，弹框提示
-        cbConnectError: () => {
-          allData.oWebControl = null;
+          AllData.oWebControl.JS_CreateWnd(props.containerId, AllData.videoWidth, AllData.videoHeight).then(() => {
+            getVersion(callback);
+          });
+        });
+    },
+    cbConnectError: () => {
+      // 创建WebControl实例失败
+      AllData.oWebControl = null;
+      AllData.playText = '插件未启动，正在尝试启动，请稍候...';
+      WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
+      AllData.initCount++;
+      if (AllData.initCount < 3) {
+        setTimeout(() => {
+          initPlugin();
+        }, 3000);
+      } else {
+        AllData.playText = `
+              插件启动失败，请检查插件是否安装！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+      }
+    },
+    cbConnectClose: () => {
+      AllData.oWebControl = null;
+    },
+  });
+};
 
-          allData.Count++;
-          if (allData.Count < 2) {
-            WebControl.JS_WakeUp('VideoWebPlugin://');
-            setTimeout(() => {
-              initPlugin();
-            }, 8000);
-          } else {
-          }
-          console.log('创建插件失败');
-        },
-      });
-    }
-    /* 获取公钥 */
-    function initVideo(oWebControl) {
-      const params = {
-        funcName: 'getRSAPubKey',
-        argument: JSON.stringify({ keyLength: 1024 }),
-      };
-      oWebControl.JS_RequestInterface(params).then((res) => {
-        if (res.responseMsg.data) {
-          allData.plugKey = res.responseMsg.data;
-          getVideoConfig(oWebControl);
-        }
-      });
-    }
-    /* 视频插件配置  插件初始化 */
-    function getVideoConfig(oWebControl) {
-      const configObj = {
+// HK插件控制监听的消息回调
+const cbIntegrationCallBack = (oData) => {
+  console.log(oData);
+  if (oData.responseMsg.type == 6) {
+    // 此时是当前画幅的数据
+    console.log(`当前画面的画幅是` + oData.responseMsg.msg.layout, oData.responseMsg.msg.wndNum);
+    localStorage.setItem('HKlayout', oData.responseMsg.msg.layout);
+    localStorage.setItem('HKwndNum', oData.responseMsg.msg.wndNum);
+  }
+};
+
+// 初始化
+const init = (callback) => {
+  getPubKey(() => {
+    AllData.oWebControl
+      .JS_RequestInterface({
         funcName: 'init',
         argument: JSON.stringify({
-          appkey: '26265267', // API网关提供的appkey 26265267
-          secret: setEncrypt('CHtVgUwdLsJjE6CWYLMy'), // API网关提供的secret  CHtVgUwdLsJjE6CWYLMy
-          ip: '192.168.10.49', // API网关IP地址 192.168.10.49
-          port: 443, // 端口
-          playMode: 0, // 播放模式 0-预览，1-回放
-          snapDir: 'D:\\SnapDir', // 抓图存储路径
-          videoDir: 'D:\\VideoDir', // 紧急录像或录像剪辑存储路径
-          layout: '1x1', // 布局
-          enableHTTPS: 1, // 是否启用HTTPS协议 0https 1http
-          encryptedFields: 'secret', // 加密字段
-          showToolbar: 1, // 是否显示工具栏
-          showSmart: 1, // 是否显示智能信息
-          buttonIDs: '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769', // 自定义工具条按钮 新的
+          appkey: props.appkey, //API网关提供的appkey
+          secret: setEncrypt(props.secret), //API网关提供的secret
+          ip: props.ip, //API网关IP地址z
+          playMode: props.playMode, //播放模式（决定显示预览还是回放界面）
+          port: props.port, //端口
+          snapDir: 'C:\\SnapDir', //抓图存储路径
+          videoDir: 'C:\\VideoDir', //紧急录像或录像剪辑存储路径
+          layout: props.layout, //布局
+          enableHTTPS: 1, //是否启用HTTPS协议
+          encryptedFields: 'secret', //加密字段
+          showToolbar: props.showToolbar, //是否显示工具栏
+          toolBarButtonIDs: props.toolBarButtonIDs,
+          showSmart: props.showSmart, //是否显示智能信息
+          buttonIDs: props.buttonIDs, //自定义工具条按钮
+          protocol: 'hls',
         }),
-      };
-      oWebControl.JS_RequestInterface(configObj).then(() => {
-        oWebControl.JS_Resize(allData.videoWidth, allData.videoHeight);
-        // 初次加载时，显示默认多个，点击时单个加载
-        if (allData.ifFirstTime) {
-          getClickMoreAction();
-        } else {
-          allData.constIndex = -1;
-          getClickAction();
+      })
+      .then(() => {
+        AllData.videoWidth = playWnd.value.offsetWidth;
+        AllData.videoHeight = playWnd.value.offsetHeight;
+        // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+        AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+        // 判断当前cameraIndexCode中是否有数据 有数据的话就直接进行播放
+        if (props.defaultList.length > 0) {
+          // 批量渲染
+          PiLiangpreviewVideo();
+        } else if (props.cameraIndexCode.length > 0) {
+          // 单独渲染
+          AllData.videoParams.cameraIndexCode = props.cameraIndexCode.trim();
+          previewVideo();
+        }
+        if (callback) {
+          callback();
         }
       });
-    }
-    /* 视频流RSA加密 */
-    function setEncrypt(value) {
-      const encrypt = new JSEncrypt();
-      encrypt.setPublicKey(allData.plugKey);
-      return encrypt.encrypt(value);
-    }
-    /* 视频预览 */
-    function getClickAction() {
-      console.log(allData.showVideos, 'showVideos');
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startPreview',
-        argument: JSON.stringify(allData.showVideos),
-      });
-    }
-    // 默认打开多个视频预览
-    function getClickMoreAction() {
-      allData.oWebControl.JS_RequestInterface({
-        funcName: 'startMultiPreviewByCameraIndexCode',
-        argument: {
-          list: [
-            {
-              cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-              ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-              gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-              streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-              transMode: 1, // 传输协议 0-UDP 1-TCP
-              wndId: 1, // 播放窗口序号
-            },
-            // {
-            //   cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
-            //   ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
-            //   gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
-            //   streamMode: 0, // 主子码流标识  0-主码流 1-子码流
-            //   transMode: 1, // 传输协议 0-UDP 1-TCP
-            //   wndId: 2, // 播放窗口序号
-            // },
-          ],
-        },
-      });
-    }
-    onMounted(() => {
-      // getVideoList();
-      // 获取默认的监控点编号
-      let codes = localStorage.getItem('defaultVideoCode');
-      allData.defaultCode = codes ? codes : 'edaea623e40f45df8b1f3676aa283a79';
-      // 动态获取宽度
-
-      // 批量视频预览
-      allData.ifFirstTime = true;
-      allData.videoWidth = 620;
-      allData.videoHeight = 410;
-      initPlugin();
-    });
-    onBeforeUnmount(() => {
-      if (allData.oWebControl) {
-        allData.oWebControl.JS_HideWnd();
-        allData.oWebControl.JS_DestroyWnd();
-        allData.oWebControl = null;
-        allData.showVideo = false;
-      }
-    });
-
-    return {
-      ...toRefs(allData),
-      checkCamera,
-      initPlugin,
-      initVideo,
-      setEncrypt,
-      getVideoConfig,
-      getVideoList,
-    };
-  },
+  });
 };
-</script>
-<style lang="less">
-#emergency_video {
-  width: 620px;
-  height: 440px;
-  overflow: hidden;
+// 获取公钥
+const getPubKey = (callback) => {
+  const params = {
+    funcName: 'getRSAPubKey',
+    argument: JSON.stringify({ keyLength: 1024 }),
+  };
+  AllData.oWebControl.JS_RequestInterface(params).then((res) => {
+    if (res.responseMsg.data) {
+      AllData.plugKey = res.responseMsg.data;
+      callback();
+    }
+  });
+};
+// 视频流RSA加密
+const setEncrypt = (value) => {
+  const encrypt = new JSEncrypt();
+  encrypt.setPublicKey(AllData.plugKey);
+  return encrypt.encrypt(value);
+};
 
-  #videoBox {
+// 视频预览
+const previewVideo = () => {
+  console.log(AllData.videoParams, '单个视频播放');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startPreview',
+    argument: JSON.stringify(AllData.videoParams),
+  });
+};
+// 批量预览
+const PiLiangpreviewVideo = () => {
+  console.log(props.defaultList, '批量批量批量');
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'startMultiPreviewByCameraIndexCode',
+    argument: {
+      list: props.defaultList,
+    },
+  });
+};
+// 显示全屏
+const showFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setFullScreen',
+  });
+};
+// 退出全屏
+const exitFullScreen = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'exitFullScreen',
+  });
+};
+const windowScroll = () => {
+  if (AllData.oWebControl != null) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 获取HK父节点的宽高
+const windowResize = () => {
+  AllData.videoWidth = playWnd.value.offsetWidth;
+  AllData.videoHeight = playWnd.value.offsetHeight;
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_Resize(AllData.videoWidth, AllData.videoHeight);
+  }
+};
+// 销毁海康插件
+const destroyeWnd = () => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl.JS_Disconnect().then(() => {});
+  }
+};
+// 获取海康插件版本号
+const getVersion = (callback) => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl
+      .JS_RequestInterface({
+        funcName: 'getVersion',
+      })
+      .then((res) => {
+        if (res.responseMsg.code === 0 && res.responseMsg.data === 'V1.5.1') {
+          //JS_CreateWnd创建视频播放窗口，宽高可设定
+          init(callback); // 创建播放实例成功后初始化
+          console.log('启动插件成功！');
+        } else {
+          destroyeWnd();
+          AllData.playText = `
+              插件版本不正确，请重新下载版本安装覆盖！
+              <a href=${AllData.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
+        }
+      });
+  }
+};
+// 切换布局
+const setLayoutFunc = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'setLayout',
+    argument: {
+      layout: props.layout, // 窗口布局
+    },
+  });
+  if (props.layout != '1x1') {
+    // 先清除所有画面
+    clearShiPing();
+  }
+};
+// 销毁当前正在播放的所有画面
+const clearShiPing = () => {
+  AllData.oWebControl.JS_RequestInterface({
+    funcName: 'stopAllPreview',
+  });
+  AllData.videoParams.wndId = 0;
+};
+// 初始化
+const createdVideo = () => {
+  initPlugin(() => {});
+};
+onMounted(() => {
+  // 创建实例
+  initPlugin();
+
+  // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
+  window.addEventListener('resize', windowResize());
+  // // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
+  window.addEventListener('scroll', windowResize());
+});
+onBeforeUnmount(() => {
+  if (AllData.oWebControl) {
+    AllData.oWebControl.JS_HideWnd();
+    AllData.oWebControl
+      .JS_DestroyWnd({
+        funcName: 'destroyeWnd',
+      })
+      .then(() => {});
+  }
+  document.removeEventListener('resize', windowResize());
+  document.removeEventListener('scroll', windowScroll());
+});
+</script>
+
+<style lang="less" scoped>
+#index {
+  width: 100%;
+  height: 100%;
+  .playWnd {
     width: 100%;
     height: 100%;
-
-    #right_videoWindow {
-      width: 100%;
-      height: 100%;
-      .videobox2 {
-        width: 100%;
-        height: 100%;
-      }
-      #playVideoNow {
-        img {
-          display: none;
-        }
-      }
-    }
   }
 }
 </style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/HPModal b/src/pages/views/WatershedOneMap/modalPart/modal/HPModal
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/HPModal
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE b/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/nldModal/HPModal.VUE
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/video.vue b/src/pages/views/WatershedOneMap/modalPart/modal/video.vue
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/video.vue
diff --git a/src/pages/views/WatershedOneMap/modalPart/rainTz.vue b/src/pages/views/WatershedOneMap/modalPart/rainTz.vue
index 96c9f9e..80d3880 100644
--- a/src/pages/views/WatershedOneMap/modalPart/rainTz.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/rainTz.vue
@@ -3,6 +3,7 @@
   <div class="natureOne">
     <!-- 气象信息 -->
     <div class="weatherPart">
+      <!-- <div class="publicTitle" @click="handlesweath()">气象信息</div> -->
       <div class="publicTitle">气象信息</div>
       <div class="content">
         <div class="part" v-for="(item, index) in weatherArr" :key="'a' + index">
@@ -335,7 +336,9 @@
         destination: Cesium.Cartesian3.fromDegrees(row.LNG, row.LAT, 3000.0),
       });
     };
-
+    const handlesweath = (data) => {
+      bus.emit('weather', data);
+    };
     onMounted(() => {
       getRainList(); //获取雨量站列表
       getWaterLoging(); //积水点
@@ -380,6 +383,7 @@
       getNowImage,
       getWaterLoging,
       handleRowClick,
+      handlesweath,
     };
   },
 };
diff --git a/src/pages/views/WatershedOneMap/newPart/Popup.vue b/src/pages/views/WatershedOneMap/newPart/Popup.vue
index 6604c45..0dad787 100644
--- a/src/pages/views/WatershedOneMap/newPart/Popup.vue
+++ b/src/pages/views/WatershedOneMap/newPart/Popup.vue
@@ -73,7 +73,7 @@
         </div>
         <!-- 查看工艺图 -->
         <div class="part gongyt" v-if="params.url">
-          <div class="value" @click.stop="checkGyt(params)">查看工艺图</div>
+          <div class="name" @click.stop="checkGyt(params)">查看工艺图</div>
         </div>
         <!-- 雨量站、雨量计历史数据 -->
         <div class="part" v-show="params.name.includes('雨量站')">
diff --git a/src/router/index.js b/src/router/index.js
index be06e0f..9d6f55a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -42,7 +42,7 @@
           path: '/ShugjOneMap',
           name: 'ShugjOneMap',
           component: () => import('@/pages/views/WatershedOneMap/OneMapModal.vue'),
-        },{
+        }, {
           path: '/test',
           name: 'tileset',
           component: () => import('@/pages/views/Mapbox.vue'),
diff --git a/vite.config.js b/vite.config.js
index 9182c91..0a120c4 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -44,6 +44,16 @@
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ''),
       },
+      '/modelFiles': {
+        target: 'http://192.168.10.48:8869/modelFiles', //陈迁 16.100
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/modelFiles/, ''),
+      },
+      '/modelFilesJson': {
+        target: 'http://192.168.10.48:8869/modelFilesJson', //陈迁 16.100
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/modelFilesJson/, ''),
+      },
       '/huangji_v1': {
         // target: 'http://192.168.16.100:6068/huangji_v1/', //陈迁 16.100
         target: 'http://192.168.10.48:8869/huangji_v1', //陈迁 16.100
diff --git a/yarn.lock b/yarn.lock
index 2cc9fca..716e8c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -27,7 +27,7 @@
   "resolved" "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.10.tgz"
   "version" "7.17.10"
 
-"@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.17.9":
+"@babel/core@^7.17.9":
   "integrity" "sha512-44ODe6O1IVz9s2oJE3rZ4trNNKTX9O7KpQpfAP4t8QII/zwrVRHL7i2pxhqtcY7tqMLrrKfMlBKnm1QlrRFs5w=="
   "resolved" "https://registry.npmjs.org/@babel/core/-/core-7.17.12.tgz"
   "version" "7.17.12"
@@ -708,7 +708,7 @@
     "jest-matcher-utils" "^27.0.0"
     "pretty-format" "^27.0.0"
 
-"@types/lodash-es@*", "@types/lodash-es@^4.17.6":
+"@types/lodash-es@^4.17.6":
   "integrity" "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg=="
   "resolved" "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz"
   "version" "4.17.6"
@@ -745,7 +745,7 @@
     "@uppy/utils" "^4.1.0"
     "namespace-emitter" "^2.0.1"
 
-"@uppy/core@^2.0.3", "@uppy/core@^2.1.1", "@uppy/core@^2.1.4", "@uppy/core@^2.3.1":
+"@uppy/core@^2.1.1":
   "integrity" "sha512-CHNWn5B9trBw28SWO/BQnQzhKne/U5npSnfK9SZfnAL4A/nTFX9jrznBkmS8wulVarDpavfj8+BA9kjzExFBfg=="
   "resolved" "https://registry.npmmirror.com/@uppy/core/-/core-2.3.2.tgz"
   "version" "2.3.2"
@@ -771,7 +771,7 @@
   dependencies:
     "lodash.throttle" "^4.1.1"
 
-"@uppy/xhr-upload@^2.0.3", "@uppy/xhr-upload@^2.0.7":
+"@uppy/xhr-upload@^2.0.3":
   "integrity" "sha512-VCsb7J5yHsof49nnUa+Y1n27UMtqHPttQmmoCa5hmjqa9R7ZISpBkXKOQmZo526eopKNuAKSAdkHWfCm8efJTA=="
   "resolved" "https://registry.npmmirror.com/@uppy/xhr-upload/-/xhr-upload-2.1.2.tgz"
   "version" "2.1.2"
@@ -963,7 +963,7 @@
   "resolved" "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz"
   "version" "3.2.33"
 
-"@wangeditor/basic-modules@^1.1.3", "@wangeditor/basic-modules@1.x":
+"@wangeditor/basic-modules@^1.1.3":
   "integrity" "sha512-TGJix4UelO46yAgwI946ctx4lSIJbYBwNvjSJ9Tf8mKr0WMCeLVBV+MV85rXPsfcmWtR4wBNwSg648Z+RbqRUg=="
   "resolved" "https://registry.npmmirror.com/@wangeditor/basic-modules/-/basic-modules-1.1.3.tgz"
   "version" "1.1.3"
@@ -977,7 +977,7 @@
   dependencies:
     "prismjs" "^1.23.0"
 
-"@wangeditor/core@^1.1.11", "@wangeditor/core@1.x":
+"@wangeditor/core@^1.1.11":
   "integrity" "sha512-BwHVRJzESnkjKikTc2U2zsbd06l1pSo7qKy5+SpZLudYWrFxmd85VN+5GxM57FodogkNw/k04DFHcFSUfXcaKA=="
   "resolved" "https://registry.npmmirror.com/@wangeditor/core/-/core-1.1.11.tgz"
   "version" "1.1.11"
@@ -994,7 +994,7 @@
   "resolved" "https://registry.npmmirror.com/@wangeditor/editor-for-vue/-/editor-for-vue-5.1.12.tgz"
   "version" "5.1.12"
 
-"@wangeditor/editor@^5.1.7", "@wangeditor/editor@>=5.1.0":
+"@wangeditor/editor@^5.1.7":
   "integrity" "sha512-erILPAkpKldyGi4cEwrOW65v12GhZy2qj2A8kPlypU46lE72Y3XowZxWogN1TI/mqMDR84AHr0QWOvygOV1xwQ=="
   "resolved" "https://registry.npmmirror.com/@wangeditor/editor/-/editor-5.1.14.tgz"
   "version" "5.1.14"
@@ -1302,7 +1302,7 @@
     "shebang-command" "^2.0.0"
     "which" "^2.0.1"
 
-"css-render@^0.15.7", "css-render@^0.15.9", "css-render@~0.15.10":
+"css-render@^0.15.7", "css-render@^0.15.9":
   "integrity" "sha512-6j5acvm81sXTHJiF47FNNICtDpF74YoWk1xEK3qQvdqgW6vc+OXrPqflL6m8f5GE6XuFYrbACNEd17kraCSBAQ=="
   "resolved" "https://registry.npmjs.org/css-render/-/css-render-0.15.10.tgz"
   "version" "0.15.10"
@@ -1339,7 +1339,7 @@
   "resolved" "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.4.tgz"
   "version" "1.3.4"
 
-"date-fns@^2.28.0", "date-fns@>=2.0.0":
+"date-fns@^2.28.0":
   "integrity" "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
   "resolved" "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz"
   "version" "2.28.0"
@@ -1669,6 +1669,11 @@
   "resolved" "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz"
   "version" "1.1.0"
 
+"gsap@^3.9.1":
+  "integrity" "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+  "resolved" "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz"
+  "version" "3.9.1"
+
 "has-flag@^3.0.0":
   "integrity" "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
   "resolved" "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz"
@@ -1924,7 +1929,7 @@
   dependencies:
     "klona" "^2.0.4"
 
-"less@*", "less@^3.5.0 || ^4.0.0", "less@^4.1.1":
+"less@^4.1.1":
   "integrity" "sha512-EoQp/Et7OSOVu0aJknJOtlXZsnr8XE8KwuzTHOLeVSEx8pVWUICc8Q0VYRHgzyjX78nMEyC/oztWFbgyhtNfDA=="
   "resolved" "https://registry.npmjs.org/less/-/less-4.1.2.tgz"
   "version" "4.1.2"
@@ -1941,7 +1946,7 @@
     "needle" "^2.5.2"
     "source-map" "~0.6.0"
 
-"lodash-es@*", "lodash-es@^4.17.21":
+"lodash-es@^4.17.21":
   "integrity" "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
   "resolved" "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
   "version" "4.17.21"
@@ -1986,7 +1991,7 @@
   "resolved" "https://registry.npmmirror.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz"
   "version" "4.4.0"
 
-"lodash@*", "lodash@^4.17.21":
+"lodash@^4.17.21":
   "integrity" "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
   "resolved" "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   "version" "4.17.21"
@@ -2116,7 +2121,7 @@
   "resolved" "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz"
   "version" "3.0.1"
 
-"mockjs@^1.1.0", "mockjs@>=1.1.0":
+"mockjs@^1.1.0":
   "integrity" "sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ=="
   "resolved" "https://registry.npmjs.org/mockjs/-/mockjs-1.1.0.tgz"
   "version" "1.1.0"
@@ -2456,7 +2461,7 @@
   "resolved" "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
   "version" "1.0.4"
 
-"rollup@^1.20.0||^2.0.0", "rollup@^2.42.0", "rollup@^2.59.0":
+"rollup@^2.59.0":
   "integrity" "sha512-h/UngC3S4Zt28mB3g0+2YCMegT5yoftnQplwzPqGZcKvlld5e+kT/QRmJiL+qxGyZKOYpgirWGdLyEO1b0dpLQ=="
   "resolved" "https://registry.npmjs.org/rollup/-/rollup-2.73.0.tgz"
   "version" "2.73.0"
@@ -2552,7 +2557,7 @@
   dependencies:
     "is-plain-object" "^5.0.0"
 
-"slate@^0.72.0", "slate@>=0.65.3":
+"slate@^0.72.0":
   "integrity" "sha512-/nJwTswQgnRurpK+bGJFH1oM7naD5qDmHd89JyiKNT2oOKD8marW0QSBtuFnwEbL5aGCS8AmrhXQgNOsn4osAw=="
   "resolved" "https://registry.npmmirror.com/slate/-/slate-0.72.8.tgz"
   "version" "0.72.8"
@@ -2771,7 +2776,7 @@
   "resolved" "https://registry.npmjs.org/vfonts/-/vfonts-0.1.0.tgz"
   "version" "0.1.0"
 
-"video.js@^7 || ^8", "video.js@^8", "video.js@^8.12.0":
+"video.js@^7 || ^8", "video.js@^8.12.0":
   "integrity" "sha512-bLjfg3y09CAed1xZ4FujdTW7G9kgL0CJHaBnDKwBUgYuutijCutYPP5yQGCdN6VOi76uEuOpINwmTJSJia6zww=="
   "resolved" "https://registry.npmmirror.com/video.js/-/video.js-8.12.0.tgz"
   "version" "8.12.0"
@@ -2834,7 +2839,7 @@
     "fast-glob" "^3.2.7"
     "path-to-regexp" "^6.2.0"
 
-"vite@^2.4.4", "vite@^2.5.10", "vite@>=2.0.0":
+"vite@^2.4.4":
   "integrity" "sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew=="
   "resolved" "https://registry.npmjs.org/vite/-/vite-2.9.9.tgz"
   "version" "2.9.9"
@@ -2893,7 +2898,7 @@
   dependencies:
     "@vue/devtools-api" "^6.0.0"
 
-"vue@^2.6.12", "vue@^2.6.14 || ^3.2.0", "vue@^3.0.0", "vue@^3.0.0-0 || ^2.6.0", "vue@^3.0.11", "vue@^3.0.2", "vue@^3.0.5", "vue@^3.2.0", "vue@^3.2.2", "vue@^3.2.47", "vue@3.2.33":
+"vue@^3.0.5", "vue@^3.2.2":
   "integrity" "sha512-si1ExAlDUrLSIg/V7D/GgA4twJwfsfgG+t9w10z38HhL/HA07132pUQ2KuwAo8qbCyMJ9e6OqrmWrOCr+jW7ZQ=="
   "resolved" "https://registry.npmjs.org/vue/-/vue-3.2.33.tgz"
   "version" "3.2.33"