diff --git a/package-lock.json b/package-lock.json
index fba3d06..5eccfb3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2733,6 +2733,530 @@
         }
       }
     },
+    "@pixi/accessibility": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/accessibility/download/@pixi/accessibility-5.3.3.tgz",
+      "integrity": "sha1-t7qxfjz1619RFHHflDFVpOrfDG4=",
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/app": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/app/download/@pixi/app-5.3.3.tgz",
+      "integrity": "sha1-Y1fi5azB7RGLf5TBF5zvVc5u1Zw=",
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3"
+      }
+    },
+    "@pixi/constants": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/constants/download/@pixi/constants-5.3.3.tgz",
+      "integrity": "sha1-+q7S0M42TWf+Pmmsl+nbH2rWwEE="
+    },
+    "@pixi/core": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/core/download/@pixi/core-5.3.3.tgz",
+      "integrity": "sha1-S5c+49GPYyTWMxHooApo7LGZZTI=",
+      "requires": {
+        "@pixi/constants": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/runner": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/ticker": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/display": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/display/download/@pixi/display-5.3.3.tgz",
+      "integrity": "sha1-FGRrNbgLhYYxa+NJXjwOf6YQ9Jk=",
+      "requires": {
+        "@pixi/math": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/extract": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/extract/download/@pixi/extract-5.3.3.tgz",
+      "integrity": "sha1-Wrjil3gj0Op12wA+RdbG1yvCtkI=",
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/filter-adjustment": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-adjustment/download/@pixi/filter-adjustment-3.1.1.tgz",
+      "integrity": "sha1-KqQQSBBvogBmSN6uWYE7+1XI/lQ="
+    },
+    "@pixi/filter-advanced-bloom": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-advanced-bloom/download/@pixi/filter-advanced-bloom-3.1.1.tgz",
+      "integrity": "sha1-5FuPqL0XqY5iQvqKlsGZSEqCyiI=",
+      "requires": {
+        "@pixi/filter-kawase-blur": "3.1.1"
+      }
+    },
+    "@pixi/filter-alpha": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-alpha/download/@pixi/filter-alpha-5.3.3.tgz",
+      "integrity": "sha1-LT4Q6PQveHpRFegbEyZYObIWJ5c=",
+      "requires": {
+        "@pixi/core": "5.3.3"
+      }
+    },
+    "@pixi/filter-ascii": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-ascii/download/@pixi/filter-ascii-3.1.1.tgz",
+      "integrity": "sha1-7cyOX9CLcplvhI0Yr0dh9Km5J2c="
+    },
+    "@pixi/filter-bevel": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-bevel/download/@pixi/filter-bevel-3.1.1.tgz",
+      "integrity": "sha1-3bc4oxh2hUtON8Pl2p1iLVegPas="
+    },
+    "@pixi/filter-bloom": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-bloom/download/@pixi/filter-bloom-3.1.1.tgz",
+      "integrity": "sha1-TAdwHnk47xtDV3qhSsOkiYML6wo=",
+      "requires": {
+        "@pixi/filter-alpha": "^5.0.0",
+        "@pixi/filter-blur": "^5.0.0"
+      }
+    },
+    "@pixi/filter-blur": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-blur/download/@pixi/filter-blur-5.3.3.tgz",
+      "integrity": "sha1-xTDkADjewXJaOZdTrJf6o0GFWc8=",
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/settings": "5.3.3"
+      }
+    },
+    "@pixi/filter-bulge-pinch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-bulge-pinch/download/@pixi/filter-bulge-pinch-3.1.1.tgz",
+      "integrity": "sha1-zSpE6YAOdBAcAcntnIhOiQ1Swi8="
+    },
+    "@pixi/filter-color-map": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-color-map/download/@pixi/filter-color-map-3.1.1.tgz",
+      "integrity": "sha1-ZpHE3sDhQkXxpSkE5PRiLvC2j78="
+    },
+    "@pixi/filter-color-matrix": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-color-matrix/download/@pixi/filter-color-matrix-5.3.3.tgz",
+      "integrity": "sha1-wez4OkT2jXi1Q2uSC0WcUiLzc6U=",
+      "requires": {
+        "@pixi/core": "5.3.3"
+      }
+    },
+    "@pixi/filter-color-overlay": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-color-overlay/download/@pixi/filter-color-overlay-3.1.1.tgz",
+      "integrity": "sha1-S/ss9Zq/jhkTohYhpc3juDmXLhs="
+    },
+    "@pixi/filter-color-replace": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-color-replace/download/@pixi/filter-color-replace-3.1.1.tgz",
+      "integrity": "sha1-ZsDd/5/FSOJO9xo6UrqqIHQ0aVw="
+    },
+    "@pixi/filter-convolution": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-convolution/download/@pixi/filter-convolution-3.1.1.tgz",
+      "integrity": "sha1-+AE3rtHgjisn0u9kHeaEfhVWQqk="
+    },
+    "@pixi/filter-cross-hatch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-cross-hatch/download/@pixi/filter-cross-hatch-3.1.1.tgz",
+      "integrity": "sha1-cuhH5t5pfGTh31uqquh53BAFRgk="
+    },
+    "@pixi/filter-crt": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-crt/download/@pixi/filter-crt-3.1.1.tgz",
+      "integrity": "sha1-P9dpqFPUOrMi3KEiJdiF+dvCrN4="
+    },
+    "@pixi/filter-displacement": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-displacement/download/@pixi/filter-displacement-5.3.3.tgz",
+      "integrity": "sha1-8lGT9zi5DMdc0Eu7zQrv6eoDevE=",
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/math": "5.3.3"
+      }
+    },
+    "@pixi/filter-dot": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-dot/download/@pixi/filter-dot-3.1.1.tgz",
+      "integrity": "sha1-hASRWOf8hhkrOi+9o1L45+Mfnqk="
+    },
+    "@pixi/filter-drop-shadow": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-drop-shadow/download/@pixi/filter-drop-shadow-3.1.1.tgz",
+      "integrity": "sha1-r0MTuk8/msmXAsQ4gzPG+/XHSiw=",
+      "requires": {
+        "@pixi/filter-kawase-blur": "3.1.1"
+      }
+    },
+    "@pixi/filter-emboss": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-emboss/download/@pixi/filter-emboss-3.1.1.tgz",
+      "integrity": "sha1-NlfDoagFDcaT2RQDPt1VTvHFfZk="
+    },
+    "@pixi/filter-fxaa": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-fxaa/download/@pixi/filter-fxaa-5.3.3.tgz",
+      "integrity": "sha1-x3AWMdYPSFtuwQUvca+wY3yl8Lg=",
+      "requires": {
+        "@pixi/core": "5.3.3"
+      }
+    },
+    "@pixi/filter-glitch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-glitch/download/@pixi/filter-glitch-3.1.1.tgz",
+      "integrity": "sha1-ldlzQ56eQYFJpbF+/6+X1D/vLlQ="
+    },
+    "@pixi/filter-glow": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-glow/download/@pixi/filter-glow-3.1.1.tgz",
+      "integrity": "sha1-yMQ0h8uoiW68JwhEpcag9PKV6H4=",
+      "requires": {
+        "@pixi/core": "^5.0.0",
+        "@pixi/utils": "^5.0.0"
+      }
+    },
+    "@pixi/filter-godray": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-godray/download/@pixi/filter-godray-3.1.1.tgz",
+      "integrity": "sha1-Tp9oysvEwzC3cn5h8dEIXVkz1Ig="
+    },
+    "@pixi/filter-kawase-blur": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-kawase-blur/download/@pixi/filter-kawase-blur-3.1.1.tgz",
+      "integrity": "sha1-nkGfF78X9G3qMjC6v/mwRJQ17hE="
+    },
+    "@pixi/filter-motion-blur": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-motion-blur/download/@pixi/filter-motion-blur-3.1.1.tgz",
+      "integrity": "sha1-VHJzisFo+Eui3G649LMpxP7o7JY="
+    },
+    "@pixi/filter-multi-color-replace": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-multi-color-replace/download/@pixi/filter-multi-color-replace-3.1.1.tgz",
+      "integrity": "sha1-yBNruGZYUKErxAy3qk3sFdENnME="
+    },
+    "@pixi/filter-noise": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-noise/download/@pixi/filter-noise-5.3.3.tgz",
+      "integrity": "sha1-XYIdn4P5fYPUvlLz7Mfi0G/xwIQ=",
+      "requires": {
+        "@pixi/core": "5.3.3"
+      }
+    },
+    "@pixi/filter-old-film": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-old-film/download/@pixi/filter-old-film-3.1.1.tgz",
+      "integrity": "sha1-iNa4o7pz9H7jit1cioTdRy0SE6A="
+    },
+    "@pixi/filter-outline": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-outline/download/@pixi/filter-outline-3.1.1.tgz",
+      "integrity": "sha1-4UYUMT5SrhraLal87qMiXulCn0E="
+    },
+    "@pixi/filter-pixelate": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-pixelate/download/@pixi/filter-pixelate-3.1.1.tgz",
+      "integrity": "sha1-iXYXH3mtRSY3ZRzVM0tKYIMj/fQ="
+    },
+    "@pixi/filter-radial-blur": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-radial-blur/download/@pixi/filter-radial-blur-3.1.1.tgz",
+      "integrity": "sha1-08bXdYP9UA8QJ0rfelui+8l5Ko4="
+    },
+    "@pixi/filter-reflection": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-reflection/download/@pixi/filter-reflection-3.1.1.tgz",
+      "integrity": "sha1-Nw/iR6iYEmvAjkKPaVRrhbF0qsQ="
+    },
+    "@pixi/filter-rgb-split": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-rgb-split/download/@pixi/filter-rgb-split-3.1.1.tgz",
+      "integrity": "sha1-C50fvn4ea47CRzP5tUcaZ049hnk="
+    },
+    "@pixi/filter-shockwave": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-shockwave/download/@pixi/filter-shockwave-3.1.1.tgz",
+      "integrity": "sha1-dX5/fVbd8bH2X/iy7uH6nMTHfsU="
+    },
+    "@pixi/filter-simple-lightmap": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-simple-lightmap/download/@pixi/filter-simple-lightmap-3.1.1.tgz",
+      "integrity": "sha1-T+Rjxo3dptW4SrXKYPaGTXkTPVc="
+    },
+    "@pixi/filter-tilt-shift": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-tilt-shift/download/@pixi/filter-tilt-shift-3.1.1.tgz",
+      "integrity": "sha1-J/0XVhjqzZWRgbOV1sRYFYYQIcg="
+    },
+    "@pixi/filter-twist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-twist/download/@pixi/filter-twist-3.1.1.tgz",
+      "integrity": "sha1-9ccHL4TstI+8h+yitDz7aUB0p6I="
+    },
+    "@pixi/filter-zoom-blur": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/@pixi/filter-zoom-blur/download/@pixi/filter-zoom-blur-3.1.1.tgz",
+      "integrity": "sha1-D6tdHAVi698VJKRUx41/EpvMjmQ="
+    },
+    "@pixi/graphics": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/graphics/download/@pixi/graphics-5.3.3.tgz",
+      "integrity": "sha1-z69aCpSoEfc1nCCHVUfBQJXx7Ow=",
+      "requires": {
+        "@pixi/constants": "5.3.3",
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/sprite": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/interaction": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/interaction/download/@pixi/interaction-5.3.3.tgz",
+      "integrity": "sha1-BzSOfSW45nRz7VT2eevoSrnuBAA=",
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/ticker": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/loaders": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/loaders/download/@pixi/loaders-5.3.3.tgz",
+      "integrity": "sha1-1BXyX5r2TZeBDkWcqiwKyktqG3w=",
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/utils": "5.3.3",
+        "resource-loader": "^3.0.1"
+      }
+    },
+    "@pixi/math": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/math/download/@pixi/math-5.3.3.tgz",
+      "integrity": "sha1-XUDTb6FwHhlQg624S93y9kIML0w="
+    },
+    "@pixi/mesh": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/mesh/download/@pixi/mesh-5.3.3.tgz",
+      "integrity": "sha1-8K3wNiwY5udka3q6zOxH0wTLtAU=",
+      "requires": {
+        "@pixi/constants": "5.3.3",
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/mesh-extras": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/mesh-extras/download/@pixi/mesh-extras-5.3.3.tgz",
+      "integrity": "sha1-mccS/bGwqdtm/ZWnbeJjYacFWrQ=",
+      "requires": {
+        "@pixi/constants": "5.3.3",
+        "@pixi/core": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/mesh": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/mixin-cache-as-bitmap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/mixin-cache-as-bitmap/download/@pixi/mixin-cache-as-bitmap-5.3.3.tgz",
+      "integrity": "sha1-ysai7PO3L7rlirNleZg2Ddvac4I=",
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/sprite": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/mixin-get-child-by-name": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/mixin-get-child-by-name/download/@pixi/mixin-get-child-by-name-5.3.3.tgz",
+      "integrity": "sha1-go3Jp76uYDZI6+LMtnUXxxN7/xk=",
+      "requires": {
+        "@pixi/display": "5.3.3"
+      }
+    },
+    "@pixi/mixin-get-global-position": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/mixin-get-global-position/download/@pixi/mixin-get-global-position-5.3.3.tgz",
+      "integrity": "sha1-VwCwN5Tlsh9hwBWu2nM8PLYl/HU=",
+      "requires": {
+        "@pixi/display": "5.3.3",
+        "@pixi/math": "5.3.3"
+      }
+    },
+    "@pixi/particles": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/particles/download/@pixi/particles-5.3.3.tgz",
+      "integrity": "sha1-Pp0tMX1s0Ro3NoMN+9TMDDoQgsg=",
+      "requires": {
+        "@pixi/constants": "5.3.3",
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/polyfill": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/polyfill/download/@pixi/polyfill-5.3.3.tgz",
+      "integrity": "sha1-TQBQsLt1p7UYQfe/7EwpJDpgW+c=",
+      "requires": {
+        "es6-promise-polyfill": "^1.2.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "@pixi/prepare": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/prepare/download/@pixi/prepare-5.3.3.tgz",
+      "integrity": "sha1-o0Zuz1JWpcP7m4alVdsXzHLVTIc=",
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/graphics": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/text": "5.3.3",
+        "@pixi/ticker": "5.3.3"
+      }
+    },
+    "@pixi/runner": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/runner/download/@pixi/runner-5.3.3.tgz",
+      "integrity": "sha1-efs1sSYg13JMZfSnqlBxkOqCWsA="
+    },
+    "@pixi/settings": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/settings/download/@pixi/settings-5.3.3.tgz",
+      "integrity": "sha1-P/X4r8g3bRLHYnvgQ+wxfroTnc0=",
+      "requires": {
+        "ismobilejs": "^1.1.0"
+      }
+    },
+    "@pixi/sprite": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/sprite/download/@pixi/sprite-5.3.3.tgz",
+      "integrity": "sha1-FoHV/QpyVYG/7jycLEkFN7+NIeo=",
+      "requires": {
+        "@pixi/constants": "5.3.3",
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/sprite-animated": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/sprite-animated/download/@pixi/sprite-animated-5.3.3.tgz",
+      "integrity": "sha1-8klJrgSu/5/0TiJUS8i38zbVIJ4=",
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/sprite": "5.3.3",
+        "@pixi/ticker": "5.3.3"
+      }
+    },
+    "@pixi/sprite-tiling": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/sprite-tiling/download/@pixi/sprite-tiling-5.3.3.tgz",
+      "integrity": "sha1-1zBiVre/bxPBgepKLZWQX1rmm50=",
+      "requires": {
+        "@pixi/constants": "5.3.3",
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/sprite": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/spritesheet": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/spritesheet/download/@pixi/spritesheet-5.3.3.tgz",
+      "integrity": "sha1-4wdADQr+Sqbh2NdWpRnjkXBrXzU=",
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/loaders": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/text": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/text/download/@pixi/text-5.3.3.tgz",
+      "integrity": "sha1-1vwAxSvAVEUK5D4tXG987c7p7NI=",
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/sprite": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/text-bitmap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/text-bitmap/download/@pixi/text-bitmap-5.3.3.tgz",
+      "integrity": "sha1-DWWEc9bgLOWY93nCB8QjM3QeFb0=",
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/loaders": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/mesh": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/text": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/ticker": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/ticker/download/@pixi/ticker-5.3.3.tgz",
+      "integrity": "sha1-qHZthBeHn//XUHF13oaYBa7iXrI=",
+      "requires": {
+        "@pixi/settings": "5.3.3"
+      }
+    },
+    "@pixi/utils": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/@pixi/utils/download/@pixi/utils-5.3.3.tgz",
+      "integrity": "sha1-UlMh87sA4+AB40ECCj7e6UzA0Ao=",
+      "requires": {
+        "@pixi/constants": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "earcut": "^2.1.5",
+        "eventemitter3": "^3.1.0",
+        "url": "^0.11.0"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-3.1.2.tgz",
+          "integrity": "sha1-LT1I+cNGaY/Og6hdfWZOmFNd9uc="
+        }
+      }
+    },
     "@protobufjs/aspromise": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/@protobufjs/aspromise/download/@protobufjs/aspromise-1.1.2.tgz",
@@ -5320,6 +5844,11 @@
         "https-proxy-agent": "^2.2.1"
       }
     },
+    "bson-objectid": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npm.taobao.org/bson-objectid/download/bson-objectid-1.3.1.tgz",
+      "integrity": "sha1-EeTOTDQZFh/TiBE3gbtiwd+840s="
+    },
     "buffer": {
       "version": "4.9.2",
       "resolved": "https://registry.npm.taobao.org/buffer/download/buffer-4.9.2.tgz?cache=0&sync_timestamp=1573257749794&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbuffer%2Fdownload%2Fbuffer-4.9.2.tgz",
@@ -6922,6 +7451,14 @@
       "resolved": "https://registry.npm.taobao.org/dom-storage/download/dom-storage-2.1.0.tgz",
       "integrity": "sha1-APuGi8kgE1fqJDx7z9MwTB406jk="
     },
+    "dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npm.taobao.org/dom7/download/dom7-2.1.5.tgz?cache=0&sync_timestamp=1604920902564&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdom7%2Fdownload%2Fdom7-2.1.5.tgz",
+      "integrity": "sha1-p5QRAXgAsx2EAAcM2uu/ySwfY3c=",
+      "requires": {
+        "ssr-window": "^2.0.0"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz",
@@ -7257,6 +7794,11 @@
       "integrity": "sha1-TrIVlMlyvEBVPSduUQU5FD21Pgo=",
       "dev": true
     },
+    "es6-promise-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npm.taobao.org/es6-promise-polyfill/download/es6-promise-polyfill-1.2.0.tgz",
+      "integrity": "sha1-84kl8jyz4+jObNqP93T867sJDN4="
+    },
     "es6-promisify": {
       "version": "5.0.0",
       "resolved": "https://registry.npm.taobao.org/es6-promisify/download/es6-promisify-5.0.0.tgz",
@@ -9505,6 +10047,11 @@
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
       "dev": true
     },
+    "ismobilejs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npm.taobao.org/ismobilejs/download/ismobilejs-1.1.1.tgz",
+      "integrity": "sha1-xWygro5Sskyg8iul7zIVot27qg4="
+    },
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npm.taobao.org/isobject/download/isobject-3.0.1.tgz",
@@ -11192,6 +11739,11 @@
         }
       }
     },
+    "mini-signals": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npm.taobao.org/mini-signals/download/mini-signals-1.2.0.tgz",
+      "integrity": "sha1-RbCAE8X65RokqhqTXNMXye1yHXQ="
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/minimalistic-assert/download/minimalistic-assert-1.0.1.tgz",
@@ -12212,6 +12764,11 @@
         "json-parse-better-errors": "^1.0.1"
       }
     },
+    "parse-uri": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npm.taobao.org/parse-uri/download/parse-uri-1.0.3.tgz",
+      "integrity": "sha1-88JKdJB6TjV8F0HpbKn6rez9bbU="
+    },
     "parse5": {
       "version": "4.0.0",
       "resolved": "https://registry.npm.taobao.org/parse5/download/parse5-4.0.0.tgz?cache=0&sync_timestamp=1573036762880&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fparse5%2Fdownload%2Fparse5-4.0.0.tgz",
@@ -12364,6 +12921,86 @@
         "pinkie": "^2.0.0"
       }
     },
+    "pixi-filters": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/pixi-filters/download/pixi-filters-3.1.1.tgz",
+      "integrity": "sha1-mvXDcCjze+MYLnyf65WZYLwBvj8=",
+      "requires": {
+        "@pixi/filter-adjustment": "3.1.1",
+        "@pixi/filter-advanced-bloom": "3.1.1",
+        "@pixi/filter-ascii": "3.1.1",
+        "@pixi/filter-bevel": "3.1.1",
+        "@pixi/filter-bloom": "3.1.1",
+        "@pixi/filter-bulge-pinch": "3.1.1",
+        "@pixi/filter-color-map": "3.1.1",
+        "@pixi/filter-color-overlay": "3.1.1",
+        "@pixi/filter-color-replace": "3.1.1",
+        "@pixi/filter-convolution": "3.1.1",
+        "@pixi/filter-cross-hatch": "3.1.1",
+        "@pixi/filter-crt": "3.1.1",
+        "@pixi/filter-dot": "3.1.1",
+        "@pixi/filter-drop-shadow": "3.1.1",
+        "@pixi/filter-emboss": "3.1.1",
+        "@pixi/filter-glitch": "3.1.1",
+        "@pixi/filter-glow": "3.1.1",
+        "@pixi/filter-godray": "3.1.1",
+        "@pixi/filter-kawase-blur": "3.1.1",
+        "@pixi/filter-motion-blur": "3.1.1",
+        "@pixi/filter-multi-color-replace": "3.1.1",
+        "@pixi/filter-old-film": "3.1.1",
+        "@pixi/filter-outline": "3.1.1",
+        "@pixi/filter-pixelate": "3.1.1",
+        "@pixi/filter-radial-blur": "3.1.1",
+        "@pixi/filter-reflection": "3.1.1",
+        "@pixi/filter-rgb-split": "3.1.1",
+        "@pixi/filter-shockwave": "3.1.1",
+        "@pixi/filter-simple-lightmap": "3.1.1",
+        "@pixi/filter-tilt-shift": "3.1.1",
+        "@pixi/filter-twist": "3.1.1",
+        "@pixi/filter-zoom-blur": "3.1.1"
+      }
+    },
+    "pixi.js": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npm.taobao.org/pixi.js/download/pixi.js-5.3.3.tgz",
+      "integrity": "sha1-bjJqUlQvSs2X6j+Fk8sK6uUC35o=",
+      "requires": {
+        "@pixi/accessibility": "5.3.3",
+        "@pixi/app": "5.3.3",
+        "@pixi/constants": "5.3.3",
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/extract": "5.3.3",
+        "@pixi/filter-alpha": "5.3.3",
+        "@pixi/filter-blur": "5.3.3",
+        "@pixi/filter-color-matrix": "5.3.3",
+        "@pixi/filter-displacement": "5.3.3",
+        "@pixi/filter-fxaa": "5.3.3",
+        "@pixi/filter-noise": "5.3.3",
+        "@pixi/graphics": "5.3.3",
+        "@pixi/interaction": "5.3.3",
+        "@pixi/loaders": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/mesh": "5.3.3",
+        "@pixi/mesh-extras": "5.3.3",
+        "@pixi/mixin-cache-as-bitmap": "5.3.3",
+        "@pixi/mixin-get-child-by-name": "5.3.3",
+        "@pixi/mixin-get-global-position": "5.3.3",
+        "@pixi/particles": "5.3.3",
+        "@pixi/polyfill": "5.3.3",
+        "@pixi/prepare": "5.3.3",
+        "@pixi/runner": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/sprite": "5.3.3",
+        "@pixi/sprite-animated": "5.3.3",
+        "@pixi/sprite-tiling": "5.3.3",
+        "@pixi/spritesheet": "5.3.3",
+        "@pixi/text": "5.3.3",
+        "@pixi/text-bitmap": "5.3.3",
+        "@pixi/ticker": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
     "pkg-dir": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/pkg-dir/download/pkg-dir-3.0.0.tgz",
@@ -13338,8 +13975,7 @@
     "querystring": {
       "version": "0.2.0",
       "resolved": "https://registry.npm.taobao.org/querystring/download/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
-      "dev": true
+      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA="
     },
     "querystring-es3": {
       "version": "0.2.1",
@@ -13701,6 +14337,15 @@
       "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
       "dev": true
     },
+    "resource-loader": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npm.taobao.org/resource-loader/download/resource-loader-3.0.1.tgz",
+      "integrity": "sha1-MzVbtUIeKZT1lFS7x/bb/43wbUc=",
+      "requires": {
+        "mini-signals": "^1.2.0",
+        "parse-uri": "^1.0.0"
+      }
+    },
     "restore-cursor": {
       "version": "3.1.0",
       "resolved": "https://registry.npm.taobao.org/restore-cursor/download/restore-cursor-3.1.0.tgz",
@@ -14737,6 +15382,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/ssr-window/download/ssr-window-2.0.0.tgz?cache=0&sync_timestamp=1604919709590&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fssr-window%2Fdownload%2Fssr-window-2.0.0.tgz",
+      "integrity": "sha1-mMMBrvmVIzF/jWlhjwAQeRCW78Q="
+    },
     "ssri": {
       "version": "7.1.0",
       "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-7.1.0.tgz?cache=0&sync_timestamp=1571961490394&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fssri%2Fdownload%2Fssri-7.1.0.tgz",
@@ -15043,6 +15693,15 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "swiper": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npm.taobao.org/swiper/download/swiper-5.4.5.tgz?cache=0&sync_timestamp=1607518868843&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fswiper%2Fdownload%2Fswiper-5.4.5.tgz",
+      "integrity": "sha1-o1D2VL9oQm27ZReTgkklUS0iPA8=",
+      "requires": {
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
+      }
+    },
     "symbol-observable": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/symbol-observable/download/symbol-observable-1.2.0.tgz",
@@ -15724,7 +16383,6 @@
       "version": "0.11.0",
       "resolved": "https://registry.npm.taobao.org/url/download/url-0.11.0.tgz",
       "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
-      "dev": true,
       "requires": {
         "punycode": "1.3.2",
         "querystring": "0.2.0"
@@ -15733,8 +16391,7 @@
         "punycode": {
           "version": "1.3.2",
           "resolved": "https://registry.npm.taobao.org/punycode/download/punycode-1.3.2.tgz",
-          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=",
-          "dev": true
+          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
         }
       }
     },
@@ -15901,6 +16558,11 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "viewerjs": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npm.taobao.org/viewerjs/download/viewerjs-1.9.0.tgz",
+      "integrity": "sha1-bfr1REDDsvdpG4Vma6bSdwjtlZI="
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz",
diff --git a/package.json b/package.json
index 7c23474..77587c1 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,11 @@
     "ngx-perfect-scrollbar": "^8.0.0",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
+    "viewerjs": "^1.6.2",
+    "swiper": "^5.3.7",
+    "pixi-filters": "^3.1.1",
+    "pixi.js": "^5.3.2",
+    "bson-objectid": "^1.3.1",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
diff --git a/proxy.config.json b/proxy.config.json
index fc28c34..b28a11f 100644
--- a/proxy.config.json
+++ b/proxy.config.json
@@ -1,6 +1,6 @@
 {
     "/api": {
-      "target": "http://121.37.20.190:8100/",
+      "target": "http://121.37.20.190:8000",
       "secure": false,
       "changeOrigin": true
     }
diff --git a/src/app/_theming.scss b/src/app/_theming.scss
index 4fba0ec..bcfb325 100644
--- a/src/app/_theming.scss
+++ b/src/app/_theming.scss
@@ -529,7 +529,7 @@ $dark-disabled-text: rgba(black, 0.38);
 $dark-dividers: rgba(black, 0.12);
 $dark-focused: rgba(black, 0.12);
 $light-primary-text: white;
-$light-secondary-text: rgba(white, 0.7);
+$light-secondary-text: rgba(black, 0.7);
 $light-disabled-text: rgba(white, 0.5);
 $light-dividers: rgba(white, 0.12);
 $light-focused: rgba(white, 0.12);
@@ -2135,7 +2135,7 @@ $_mat-button-ripple-opacity: 0.1;
     // ensure that the button is readable on custom background colors. It's wrong to always assume
     // that those buttons are always placed inside of containers with the default background
     // color of the theme (e.g. themed toolbars).
-    color: inherit;
+    color: black;
     background: transparent;
 
     @include _mat-button-theme-property($theme, 'color', text);
@@ -4190,7 +4190,7 @@ $mat-tooltip-handset-vertical-padding:
     // Use the primary text on the dark theme, even though the lighter one uses
     // a secondary, because the contrast on the light primary text is poor.
     color: if($is-dark-theme, $dark-primary-text, $light-secondary-text);
-    background: if($is-dark-theme, map-get($mat-grey, 50), #323232);
+    background: if($is-dark-theme, map-get($mat-grey, 50), #fff);
 
     @include _mat-theme-elevation(6, $theme);
   }
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 4f4acf6..0eac6ce 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -7,24 +7,21 @@ import { LockscreenComponent } from './pages/lockscreen/lockscreen.component';
 //路由守卫
 import {AuthGuard} from './auth.guard'
 import { CreateTestScoreComponent } from './examiner/create-test-score/create-test-score.component';
-import { ExaminerIndexComponent } from './examiner/examiner-index/examiner-index.component'
 
 
 
 const routes: Routes = [
   {path:'',redirectTo:'login',pathMatch:'full'},
   {
-    path:'home',
-    component:NavigationComponent,
-    canActivate: [AuthGuard],//守卫验证
+    path:'home',component:NavigationComponent,canActivate: [AuthGuard],//守卫验证
     children:[
-      {path:'',loadChildren:() => import('./examiner/examiner.module').then(m => m.ExaminerModule)}
+      {path:'',loadChildren:() => import('./examiner/examiner.module').then(m => m.ExaminerModule)},
+      {path:'',loadChildren:() => import('./ui/ui.module').then(m => m.UiModule)}
     ]
   },
+  { path:'examiner/create-test-score', component:CreateTestScoreComponent,canActivate: [AuthGuard],}, //创建试卷具体分数页面
   { path:'adminLogin', component:LoginComponent}, //管理员登录路由
   { path:'login', component:LockscreenComponent}, //教员学员登录路由
-  { path:'examiner/create-test-score', component:CreateTestScoreComponent}, //创建试卷具体分数页面
-  
 
 ];
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c998e2e..126f803 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -21,6 +21,7 @@ import { registerLocaleData } from '@angular/common';
 import zh from '@angular/common/locales/zh';
 import { ExaminerModule } from './examiner/examiner.module';
 registerLocaleData(zh);
+
 @NgModule({
   declarations: [
     AppComponent
@@ -32,7 +33,6 @@ registerLocaleData(zh);
     MatButtonModule,
     MatCheckboxModule,
     MatSidenavModule,
-    // NavigationModule,
     MatIconModule,
     PagesModule,
     FormsModule,
diff --git a/src/app/canvas-share-data.service.ts b/src/app/canvas-share-data.service.ts
new file mode 100644
index 0000000..6c915cf
--- /dev/null
+++ b/src/app/canvas-share-data.service.ts
@@ -0,0 +1,732 @@
+import { Injectable } from '@angular/core';
+import {ReplaySubject} from 'rxjs';
+import { Observable } from 'rxjs';
+import { GameMode } from './working-area/model/gameMode';
+@Injectable({
+  providedIn: 'root'
+})
+export class CanvasShareDataService {
+  constructor() { }
+  private _sendMessage: ReplaySubject<any> = new ReplaySubject<any>(1);
+  GameMode: any;
+
+  isChange = false; // 数据 是否改动
+
+  selectTemplateData: any; // 选择当前 模板数据
+
+  // 总平面图/建筑 楼层
+  selectStorey: any = {area: '', details: ''}; // 选择当前 楼层 数据
+  originalcompanyBuildingData: any; // 单位/建筑 数据
+  originaleveryStoreyData: any; // 总平面图/楼层/区域 楼层数据
+  // 总平面图/建筑 楼层
+
+  // 处置 节点
+  allDisposalNode: any = []; // 所有 处置节点
+  allNodeMarkers: any; // 灾情 标签信息
+  selectPanelPoint: DisposalNodeData = new DisposalNodeData();
+  selectPanelPointBaseData: any = {description: '', notes: '', weather: '', airTemperature: '', windDirection: '', windScale: ''}; // 当前 数据节点 所对应的 天气,详情 数据节点
+  // 处置 节点
+  /**
+  * 游戏模式
+  */
+  gameMode: GameMode = GameMode.BasicInformation;
+
+  facilityAssetsName = new Map<string, string>([
+    [ '消防水池', '消防水池'],
+    [ '疏散楼梯', '疏散楼梯'],
+    [ '消防电梯', '消防电梯'],
+    [ '避难区域', '避难区域'],
+    [ '安全出口', '安全出口'],
+    [ '地上消火栓', '室外消火栓' ],
+    [ '地下消火栓', '室外消火栓' ],
+    [ '室内消火栓', '室内消火栓' ],
+    [ '供水管网', '供水管网'],
+    [ '湿式自动喷淋系统', '湿式自动喷淋系统'],
+    [ '水幕系统', '水幕系统' ],
+    [ '消防泵房', '消防泵房'],
+    [ '水泵接合器（地上）', '水泵接合器'],
+    [ '水泵接合器（地下）', '水泵接合器'],
+    [ '水泵接合器（墙壁）', '水泵接合器'],
+    [ '消防水泵房', '消防水泵房'],
+    [ '箱式消火栓', '箱式消火栓'],
+    [ '固定水炮', '消防水炮' ],
+    [ '消防水罐', '储水罐'],
+    [ '消防水罐2', '储水罐'],
+    [ '卧式水罐', '储水罐'],
+    [ '消防泵', '水泵' ],
+    [ '泡沫泵', '水泵' ],
+    [ '泡沫泵房', '泡沫站'],
+    [ '泡沫栓', '泡沫栓' ],
+    [ '泡沫枪', '泡沫枪'],
+    [ '泡沫发生器', '泡沫发生器' ],
+    [ '消防管网', '消防管网'],
+    [ 'DCS控制室', 'DCS控制室']
+  ]);
+
+  /** * 向其他组件发送信息 *
+  * @param message 需要发送的信息 * @returns {Observavle<any>} */
+  public sendMessage(message: any) {
+    this._sendMessage.next(message);
+  }
+  public getMessage(): Observable <any> {
+    return this._sendMessage.asObservable();
+  }
+
+  // 处置节点 筛选出 匹配数据 匹配不到 return undefined
+  findDisposalNode(parentId: string= null, name: string= null) {
+    if (parentId && name) { // 匹配 父id, name
+      const returnData = this.allDisposalNode.find(item => item.parentId === parentId && item.name === name);
+      return returnData;
+    } else { // 匹配 id
+      const returnData = this.allDisposalNode.find(item => item.id === parentId);
+      return returnData;
+    }
+  }
+  /**
+   * 获取单位毗邻信息
+   */
+  public getCompanyAdjoinInfo(): CompanyAdjoinInfo[] {
+    const list: CompanyAdjoinInfo[] = [];
+    Object.keys(this.originalcompanyBuildingData.data).forEach((key) => {
+      const item = this.originalcompanyBuildingData.data[key];
+      if (item.Name === '毗邻') {
+        const adjoin = new CompanyAdjoinInfo();
+        adjoin.AssetId = item.Id;
+        adjoin.Id = '';
+        adjoin.ImageUrls = [];
+        adjoin.CompanyId = sessionStorage.getItem('companyId');
+        item.PropertyInfos.forEach(element => {
+          if (element.PropertyName === '方向') {
+            adjoin.Direction = Number(element.PropertyValue);
+          } else if (element.PropertyName === '名称/编号') {
+            adjoin.Name = element.PropertyValue;
+          } else if (element.PropertyType === PropertyType.Image) {
+            adjoin.ImageUrls.push(element.PropertyValue);
+          }
+        });
+        list.push(adjoin);
+      }
+    });
+    return list;
+  }
+  /**
+   * 获取建筑毗邻信息
+   */
+  public getBuildingAdjoinInfo(): BuildingAdjoinInfo[] {
+    const list: BuildingAdjoinInfo[] = [];
+    Object.keys(this.originalcompanyBuildingData.data).forEach((key) => {
+      const item = this.originalcompanyBuildingData.data[key];
+      if (item.Name === '毗邻') {
+        const adjoin = new BuildingAdjoinInfo();
+        adjoin.AssetId = item.Id;
+        adjoin.Id = '';
+        adjoin.BuildingId = this.selectStorey.buildingId;
+        adjoin.ImageUrls = [];
+        item.PropertyInfos.forEach(element => {
+          if (element.PropertyName === '方向') {
+            adjoin.Direction = Number(element.PropertyValue);
+          } else if (element.PropertyName === '名称/编号') {
+            adjoin.Name = element.PropertyValue;
+          } else if (element.PropertyType === PropertyType.Image) {
+            adjoin.ImageUrls.push(element.PropertyValue);
+          }
+        });
+        list.push(adjoin);
+      }
+    });
+    return list;
+  }
+  /**
+   * 获取单位重点部位
+   */
+  public getCompanyImportantLocations(): CompanyImportantLocationInfo[] {
+    const list: CompanyImportantLocationInfo[] = [];
+    Object.keys(this.originalcompanyBuildingData.data).forEach((key) => {
+      const item = this.originalcompanyBuildingData.data[key];
+      if (item.Name === '重点部位') {
+        const important = new CompanyImportantLocationInfo();
+        important.AssetId = item.Id;
+        important.Id = '';
+        important.ImageUrls = [];
+        important.CompanyId = sessionStorage.getItem('companyId');
+        item.PropertyInfos.forEach(element => {
+          if (element.PropertyName === '名称/编号') {
+            important.Name = element.PropertyValue;
+          } else if (element.PropertyType === PropertyType.Image) {
+            important.ImageUrls.push(element.PropertyValue);
+          } else if (element.PropertyName === '主要危险性') {
+            important.Hazards = element.PropertyValue;
+          } else if (element.PropertyName === '使用性质') {
+            important.Nature = element.PropertyValue;
+          } else if (element.PropertyName === '所在位置') {
+            important.Position = element.PropertyValue;
+          } else if (element.PropertyName === '建筑结构') {
+            important.Structure = element.PropertyValue;
+          }
+        });
+        list.push(important);
+      }
+    });
+    return list;
+  }
+  /**
+   * 获取建筑重点部位
+   */
+  public getBuildingImportantLocations(): BuildingImportantLocationInfo[] {
+    const list: BuildingImportantLocationInfo[] = [];
+    Object.keys(this.originalcompanyBuildingData.data).forEach((key) => {
+      const item = this.originalcompanyBuildingData.data[key];
+      if (item.Name === '重点部位') {
+        const important = new BuildingImportantLocationInfo();
+        important.AssetId = item.Id;
+        important.Id = '';
+        important.ImageUrls = [];
+        important.BuildingId = this.selectStorey.buildingId;
+        item.PropertyInfos.forEach(element => {
+          if (element.PropertyName === '名称/编号') {
+            important.Name = element.PropertyValue;
+          } else if (element.PropertyType === PropertyType.Image) {
+            important.ImageUrls.push(element.PropertyValue);
+          } else if (element.PropertyName === '主要危险性') {
+            important.Hazards = element.PropertyValue;
+          } else if (element.PropertyName === '使用性质') {
+            important.Nature = element.PropertyValue;
+          } else if (element.PropertyName === '所在位置') {
+            important.Position = element.PropertyValue;
+          } else if (element.PropertyName === '建筑结构') {
+            important.Structure = element.PropertyValue;
+          }
+        });
+        list.push(important);
+      }
+    });
+    return list;
+  }
+  /**
+   * 获取单位消防设施
+   */
+  public getAllCompanyFacilityAssetInfo(): CompanyFacilityAssetInfo[] {
+    const list: CompanyFacilityAssetInfo[] = [];
+    Object.keys(this.originalcompanyBuildingData.data).forEach((key) => {
+      const item = this.originalcompanyBuildingData.data[key];
+      if (this.facilityAssetsName.has(item.Name)) {
+        const facility = new CompanyFacilityAssetInfo();
+        facility.CompanyId = sessionStorage.getItem('companyId');
+        facility.AssetId = item.Id;
+        facility.Id = '';
+        facility.Name = this.facilityAssetsName.get(item.Name);
+        facility.AssetName = item.Name;
+        facility.PropertyInfos = item.PropertyInfos;
+        facility.SitePlanId = item.FloorId;
+        list.push(facility);
+      }
+    });
+    return list;
+  }
+  /**
+   * 获取建筑消防设施
+   */
+  public getAllBuildingFacilityAssetInfo(): BuildingFacilityAssetInfo[] {
+    const list: BuildingFacilityAssetInfo[] = [];
+    Object.keys(this.originalcompanyBuildingData.data).forEach((key) => {
+      const item = this.originalcompanyBuildingData.data[key];
+      if (this.facilityAssetsName.has(item.Name)) {
+        const facility = new BuildingFacilityAssetInfo();
+        facility.BuildingId = this.selectStorey.buildingId;
+        facility.AssetId = item.Id;
+        facility.Id = '';
+        facility.Name = this.facilityAssetsName.get(item.Name);
+        facility.AssetName = item.Name;
+        facility.PropertyInfos = item.PropertyInfos;
+        facility.BuildingAreaId = item.FloorId;
+        list.push(facility);
+      }
+    });
+    return list;
+  }
+  /**
+   * 反序列化对象
+   * @param json 字符串
+   */
+  public deserialize<T>(json: any): T {
+    const obj: T = JSON.parse(
+      json,
+      (_, val) => {
+        if (val === null) { return null; }
+        if (Array.isArray(val) || typeof val !== 'object') {
+          return val;
+        }
+        return Object.entries(val).reduce((a, [key, val]) => {
+          const count = key.length;
+          if (count > 1) {
+            a[key[0].toUpperCase() + key.substring(1, count)] = val;
+          } else {
+            a[key] = val;
+          }
+          return a;
+        }, {});
+      }
+    );
+    return obj;
+  }
+}
+
+/**
+ * 单位毗邻
+ */
+export class CompanyAdjoinInfo {
+  public CompanyId: string;
+  public Id: string;
+  public Name: string;
+  public Direction: number;
+  public ImageUrls: string[] = [];
+  public AssetId: string;
+}
+/**
+ * 建筑毗邻
+ */
+export class BuildingAdjoinInfo {
+  public  BuildingId: string;
+  public Id: string;
+  public Name: string;
+  public Direction: number;
+  public ImageUrls: string[];
+  public AssetId: string;
+}
+/**
+ * 建筑重点部位
+ */
+export class BuildingImportantLocationInfo {
+  public BuildingId: string;
+  public Id: string;
+  public Name: string;
+  public Position: string;
+  public Structure: string;
+  public Nature: string;
+  public Hazards: string;
+  public ImageUrls: string[];
+  public AssetId: string;
+}
+/**
+ * 单位重点部位
+ */
+export class CompanyImportantLocationInfo {
+  public CompanyId: string;
+  public Id: string;
+  public Name: string;
+  public Position: string;
+  public Structure: string;
+  public Nature: string;
+  public Hazards: string;
+  public ImageUrls: string[];
+  public AssetId: string;
+}
+/**
+ * 单位消防素材信息
+ */
+export class CompanyFacilityAssetInfo {
+  public Id: string;
+  public Name: string;
+  public AssetName: string;
+  public PropertyInfos: string;
+  public AssetId: string;
+  public CompanyId: string;
+  public SitePlanId: string;
+}
+/**
+ * 建筑消防素材信息
+ */
+export class BuildingFacilityAssetInfo {
+  public Id: string;
+  public Name: string;
+  public AssetName: string;
+  public PropertyInfos: string;
+  public AssetId: string;
+  public BuildingId: string;
+  public BuildingAreaId: string;
+}
+/**
+ * 属性
+ */
+export class PropertyInfo {
+  // 标记位
+  public Tag: string;
+  // 属性书序
+  public Order: number;
+  // 是否启用
+  public Enabled: boolean;
+  // 是否可见
+  public Visible: boolean;
+  // 必填
+  public Required: boolean;
+  // 验证规则名称
+  public RuleName: string;
+  // 验证规则值
+  public RuleValue: string;
+  // 物理单位
+  public PhysicalUnit: string;
+  // 属性名称
+  public PropertyName: string;
+  // 属性类型
+  public PropertyType: PropertyType;
+  // 属性值
+  public PropertyValue: string;
+}
+/**
+ * 属性类型。
+ */
+export enum PropertyType {
+  // 单行文本。
+  SingleText,
+  // 多行文本。
+  MultipleText,
+  // 数值。
+  Numeric,
+  // 图片。
+  Image,
+  // 图片数值，专用于描述图片数量。
+  ImageNumeric,
+  // 方向
+  Direction,
+  // 布尔类型。
+  Boolean,
+  // 供给区域
+  SupplyArea,
+  // 供给类型
+  SupplyType
+}
+/**
+ * 处置节点
+ */
+export class DisposalNode {
+  /**
+   * 编号
+   */
+  public Id: string;
+  /**
+   * 名称
+   */
+  public Name: string;
+  /**
+   * 等级
+   */
+  public Level: number;
+  /**
+   * 排序
+   */
+  public Order: number;
+  /**
+   * 详情
+   */
+  public Description: string;
+  /**
+   * 注意事项
+   */
+  public Notes: string;
+  /**
+   * 天气
+   */
+  public Weather: string;
+  /**
+   * 气温
+   */
+  public AirTemperature?: number;
+  /**
+   * 风向
+   */
+  public WindDirection: Direction;
+  /**
+   * 风力等级
+   */
+  public WindScale: WindScale;
+  /**
+   * 图片名称
+   */
+  public ImageNames: string[];
+  /**
+   * 图片地址
+   */
+  public ImageUrls: string[];
+  /**
+   * 父节点编号
+   */
+  public ParentId: string;
+  /**
+   * 灾情编号
+   */
+  public DisasterId: string;
+  /**
+   * 预案组件编号
+   */
+  public PlanComponentId: string;
+  /**
+   * 单位编号
+   */
+  public CompanyId: string;
+  /**
+   * 总平面图编号
+   */
+  public SitePlanId: string;
+  /**
+   * 建筑编号
+   */
+  public BuildingId: string;
+  /**
+   * 建筑区域编号
+   */
+  public BuildingAreaId: string;
+}
+/**
+ * 方向。
+ */
+export enum Direction {
+    /**
+     * 东
+     */
+    East,
+    /**
+     * 西
+     */
+    West,
+    /**
+     * 南
+     */
+    South,
+    /**
+     * 北
+     */
+    North,
+    /**
+     * 东南
+     */
+    Southeast,
+    /**
+     * 西南
+     */
+    Southwest,
+    /**
+     * 东北
+     */
+    Northeast,
+    /**
+     * 西北
+     */
+    Northwest
+}
+/**
+ * 风力等级
+ */
+export enum WindScale {
+    WS0,
+    WS1,
+    WS2,
+    WS3,
+    WS4,
+    WS5,
+    WS6,
+    WS7,
+    WS8,
+    WS9,
+    WS10,
+    WS11,
+    WS12,
+    WS13,
+    WS14,
+    WS15,
+    WS16,
+    WS17,
+    WS18
+}
+/**
+ * 处置节点数据
+ */
+export class DisposalNodeData {
+  /**
+   * 编号
+   */
+  public Id: string;
+  /**
+   * 数据
+   */
+  public Data: any;
+  /**
+   * 版本号
+   */
+  public Version: string;
+  /**
+   * 处置节点编号
+   */
+  public DisposalNodeId: string;
+  /**
+   * 预案组件编号
+   */
+  public PlanComponentId: string;
+}
+/**
+ * 楼层节点数据
+ */
+export class FloorNodeData {
+  /**
+   * 存量
+   */
+  public Stock: Map<string, AssetData> = new Map<string, AssetData>();
+  /**
+   * 增量
+   */
+  public Increment: Map<string, AssetData> = new Map<string, AssetData>();
+  /**
+   * 用户定义的增量。
+   */
+  public DefinedIncrement: Map<string, AssetData> = new Map<string, AssetData>();
+}
+/**
+ * 素材数据
+ */
+export class AssetData {
+      /// <summary>
+    /// 模板编号
+    /// </summary>
+  public TemplateId: string;
+    /// <summary>
+    /// 编号
+    /// </summary>
+  public Id: string;
+    /// <summary>
+    /// 名称
+    /// </summary>
+  public Name: string;
+    /// <summary>
+    /// 角度
+    /// </summary>
+  public Angle: number;
+    /// <summary>
+    /// 颜色
+    /// </summary>
+  public Color: string;
+    /// <summary>
+    /// 坐标
+    /// </summary>
+  public Point: PIXI.Point;
+    /// <summary>
+    /// 宽度
+    /// </summary>
+  public Width: number;
+    /// <summary>
+    /// 高度
+    /// </summary>
+  public Height: number;
+    /// <summary>
+    /// 是否启用
+    /// </summary>
+  public Enabled: boolean;
+    /// <summary>
+    /// 填充方式
+    /// </summary>
+  public FillMode: FillMode;
+    /// <summary>
+    /// 图片地址
+    /// </summary>
+  public ImageUrl: string;
+    /// <summary>
+    /// 是否固定大小
+    /// </summary>
+  public  FixedSize: boolean;
+    /// <summary>
+    /// 点路径
+    /// </summary>
+  public MultiPoint: PIXI.Point[];
+    /// <summary>
+    /// 建筑ID
+    /// </summary>
+  public BuildingId: string;
+    /// <summary>
+    /// 单位ID
+    /// </summary>
+  public CompanyId: string;
+    /// <summary>
+    /// 楼层编号
+    /// </summary>
+  public FloorId: string;
+    /// <summary>
+    /// 楼层名称
+    /// </summary>
+  public FloorName: string;
+    /// <summary>
+    /// 消防要素编号
+    /// </summary>
+  public FireElementId: string;
+    /// <summary>
+    /// 属性列表
+    /// </summary>
+  public PropertyInfos: PropertyInfo[];
+    /// <summary>
+    /// 交互方式
+    /// </summary>
+  public InteractiveMode: InteractiveMode;
+    /// <summary>
+    /// 是否来自建筑
+    /// </summary>
+    public IsFromBuilding: boolean;
+    /// <summary>
+    /// 渲染方式。
+    /// </summary>
+  public DrawMode: ImageType;
+    /// <summary>
+    /// 9宫格边框数值。
+    /// </summary>
+  public Border: Border;
+    /// <summary>
+    /// 厚度。
+    /// </summary>
+  public Thickness: number;
+    /// <summary>
+    /// 素材类型
+    /// </summary>
+  public GameMode: GameMode;
+}
+/**
+ * 填充模式
+ */
+export enum FillMode {
+  Color,
+  Image
+}
+/**
+ * 交互方式
+ */
+export enum InteractiveMode {
+  /**
+   * 单点。
+   */
+  Single,
+  /**
+   * 多点不闭合。
+   */
+  Multiple,
+  /**
+   * 多点闭合。
+   */
+  MultipleClosed
+}
+/**
+ * 图片显示类型
+ */
+export enum ImageType {
+  Simple = 0,
+  Sliced = 1,
+  Tiled = 2,
+  Filled = 3
+}
+/**
+ * 边框
+ */
+export class Border {
+
+  public  x: number;
+
+  public  y: number;
+
+  public z: number;
+
+  public w: number;
+}
diff --git a/src/app/examiner/create-test-score/addPlanTwo.html b/src/app/examiner/create-test-score/addPlanTwo.html
index 39c4545..d0b35ce 100644
--- a/src/app/examiner/create-test-score/addPlanTwo.html
+++ b/src/app/examiner/create-test-score/addPlanTwo.html
@@ -67,7 +67,7 @@
         </div>
     </div>
     <div class="btnbox">
-        <div class="btn">
+        <div class="btn" (click)="confirm()">
             确定
         </div>
         <div class="btn" (click)="close()">
diff --git a/src/app/examiner/create-test-score/addPlanTwo.scss b/src/app/examiner/create-test-score/addPlanTwo.scss
index cd1d240..633afa1 100644
--- a/src/app/examiner/create-test-score/addPlanTwo.scss
+++ b/src/app/examiner/create-test-score/addPlanTwo.scss
@@ -11,6 +11,7 @@
     }
     .tablebox{
         width: 600px;
+        margin: 3px 0;
         table{
             width: 100%;
         }
@@ -18,6 +19,7 @@
     .customPlanName{
         input{
             width: 260px;
+            height: 36px;
             border: 0;
             background-color: #F2F5F6;
             box-sizing: border-box;
diff --git a/src/app/examiner/create-test-score/create-test-score.component.html b/src/app/examiner/create-test-score/create-test-score.component.html
index edf5de0..78d2e7b 100644
--- a/src/app/examiner/create-test-score/create-test-score.component.html
+++ b/src/app/examiner/create-test-score/create-test-score.component.html
@@ -19,7 +19,7 @@
                             <td>单位名称</td>
                             <td>总分</td>
                         </tr>
-                        <tr *ngFor="let item of unitDatas">
+                        <tr *ngFor="let item of unitId">
                             <td>{{item.name}}</td>
                             <td class="colorspan">{{item.score}}</td>
                         </tr>
@@ -37,7 +37,7 @@
                 </div>
                 <div class="maincontantbox">
                     <div class="basicinfodiv" *ngIf="selectedTab == 1">
-                        <div *ngFor="let unit of unitDatas;let key = index" style="margin-bottom: 30px;">
+                        <div *ngFor="let unit of unitId;let key = index" style="margin-bottom: 30px;">
                             <!-- 选择的单位名称 -->
                             <p class="colorspan" style="margin: 0 0 12px 6px;">{{unit.name}}</p> 
                             <!-- 基本信息 -->
@@ -46,7 +46,15 @@
                                   <mat-expansion-panel-header  collapsedHeight ='40px' expandedHeight='40px' style="position: relative;padding-left:20px;background: #F5FDFE;">
                                     <mat-panel-title>
                                       基本信息
-                                      <span  class="colorspan" style="margin-left: 20px;">{{unit.basicInfoScore ? unit.basicInfoScore : 0}}分</span>
+                                      <!-- <span  class="colorspan" style="margin-left: 20px;">{{unit.basicInfoScore ? unit.basicInfoScore : 0}}分</span> -->
+                                      <span style="margin-left: 20px;">
+                                        总分值: <input class="scoreInput" type="number" (click)="stopPropagation($event)" 
+                                        [(ngModel)]="unit.basicInfoScore" (input)="sumScore('基本信息',key)"> 分,
+                                        单项 
+                                        <span style="color: #FF8678;">
+                                            {{unit.basicInfoItemScore ? unit.basicInfoItemScore : 0}}
+                                        </span>分
+                                      </span>
                                     </mat-panel-title>
                                   </mat-expansion-panel-header>
                                   
@@ -66,11 +74,9 @@
                                         </nz-tree>
                                         <ng-template #nzTreeTemplate let-node let-origin="origin">
                                             <div class="treeNodeTemplate">
-                                                <label title="{{node.title}}" class="overflowText textNode">{{node.title}}</label>
-                                                <div class="scoreDiv" *ngIf="node.origin.zIndex == '0'">
-                                                    <span class="colorspan lookitem">查看</span>
-                                                    <span class="item">单项<input type="number" [(ngModel)]="node.origin.itemScore" (input)="itemScore(node,key)">分</span>
-                                                    <span class="item">总共<input type="number" [(ngModel)]="node.origin.sumScore" (input)="sumScore(node,key)">分</span>
+                                                <label title="{{node.origin.name}}" class="overflowText textNode">{{node.origin.name}}</label>
+                                                <div class="scoreDiv" *ngIf="node.level == '0'">
+                                                    <span class="colorspan lookitem" (click)="lookTreeNode(node)">查看</span>
                                                 </div>
                                              
                                             </div>
@@ -79,12 +85,18 @@
                                 </mat-expansion-panel>
                             </mat-accordion>
                             <!-- 四周毗邻 -->
-                            <mat-accordion>
+                            <!-- <mat-accordion>
                                 <mat-expansion-panel style="box-shadow: 0 0 black;" expanded>
                                   <mat-expansion-panel-header  collapsedHeight ='40px' expandedHeight='40px' style="position: relative;padding-left:20px;background: #F5FDFE;">
                                     <mat-panel-title>
                                       四周毗邻
-                                      <span  class="colorspan" style="margin-left: 20px;">{{unit.aroundScore ? unit.aroundScore : 0}}分</span>
+                                      <span style="margin-left: 20px;">
+                                        总分值: <input class="scoreInput" type="number" (click)="stopPropagation($event)" 
+                                        [(ngModel)]="unit.aroundScore" (input)="sumScore('四周毗邻',key)"> 分,
+                                        单项 <span style="color: #FF8678;">
+                                            {{unit.aroundItemScore ? unit.aroundItemScore : 0}}
+                                        </span> 分
+                                      </span>
                                     </mat-panel-title>
                                   </mat-expansion-panel-header>
                                   
@@ -104,18 +116,16 @@
                                         </nz-tree>
                                         <ng-template #nzTreeTemplate let-node let-origin="origin">
                                             <div class="treeNodeTemplate">
-                                                <label title="{{node.title}}" class="overflowText textNode">{{node.title}}</label>
-                                                <div class="scoreDiv" *ngIf="node.origin.zIndex == '0'">
+                                                <label title="{{node.origin.name}}" class="overflowText textNode">{{node.origin.name}}</label>
+                                                <div class="scoreDiv" *ngIf="node.level == '0'">
                                                     <span class="colorspan lookitem">查看</span>
-                                                    <span class="item">单项<input type="number" [(ngModel)]="node.origin.itemScore" (input)="itemScore(node,key)">分</span>
-                                                    <span class="item">总共<input type="number" [(ngModel)]="node.origin.sumScore" (input)="sumScore(node,key)">分</span>
                                                 </div>
                                              
                                             </div>
                                         </ng-template>
                                   </div>
                                 </mat-expansion-panel>
-                            </mat-accordion>
+                            </mat-accordion> -->
                         </div>
                     </div>
                     <div class="fightdeploydiv" *ngIf="selectedTab == 2">
diff --git a/src/app/examiner/create-test-score/create-test-score.component.scss b/src/app/examiner/create-test-score/create-test-score.component.scss
index 7745752..2378a17 100644
--- a/src/app/examiner/create-test-score/create-test-score.component.scss
+++ b/src/app/examiner/create-test-score/create-test-score.component.scss
@@ -98,14 +98,15 @@ table { text-align: center; border-collapse: collapse; padding:2px;}
                   overflow-y: auto;  
                   padding: 18px;
                   .basicinfodiv{
+                      .scoreInput{
+                          text-align: center;
+                          width: 60px;
+                          color: #FF8678;
+                      }
                       .treeNodeTemplate{
                           .scoreDiv{
                               display: inline-block;
-                              input{
-                                text-align: center;
-                                width: 40px;
-                                margin: 0 3px;
-                              }
+                            
                               .lookitem{
                                 margin: 0 20px;
                               }
diff --git a/src/app/examiner/create-test-score/create-test-score.component.ts b/src/app/examiner/create-test-score/create-test-score.component.ts
index f2fcd8f..cc63096 100644
--- a/src/app/examiner/create-test-score/create-test-score.component.ts
+++ b/src/app/examiner/create-test-score/create-test-score.component.ts
@@ -1,4 +1,5 @@
 import { SelectionModel } from '@angular/cdk/collections';
+import { HttpClient } from '@angular/common/http';
 import { Component, Inject, OnInit } from '@angular/core';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatTableDataSource } from '@angular/material/table';
@@ -10,110 +11,249 @@ import { NzFormatEmitEvent } from 'ng-zorro-antd/tree';
 })
 export class CreateTestScoreComponent implements OnInit {
 
-  constructor(public dialog: MatDialog) { }
+  constructor(public dialog: MatDialog,private http: HttpClient) { }
   selectedTab:number = 1 //选中的选项卡
   selectTab(index){
     this.selectedTab = index
   }
   ngOnInit(): void {
+    console.log(12345,)
+    this.getUnitData()
   }
 
-  //模拟预案数据
-  planDatas:any = [
-    {name:'5楼电路故障灾情扑救',or:'上海总队',time:'2020-09-24',isOpen:'未公开',level:'总队',scroe:0},
-    {name:'6楼电路故障灾情扑救',or:'上海总队',time:'2020-09-24',isOpen:'未公开',level:'总队',scroe:0},
-    {name:'7楼电路故障灾情扑救',or:'上海总队',time:'2020-09-24',isOpen:'未公开',level:'总队',scroe:0}
-  ]
-
-  defaultCheckedKeys = []; //指定选中复选框的树节点 key值
-  defaultExpandedKeys = []; //展开指定的树节点 key值
-  defaultSelectedKeys = []; //指定选中的树节点 key值
-
-  examScore:any = 0//整个试卷的总分
-  
   //模拟单位数据
   unitDatas:any = [
-    {name:'富丽华大酒店1',score:0,basicInfoScore:0,basicInfoNodes : [
+    {name:'富丽华大酒店1',score:0,basicInfoScore:0,basicInfoItemScore:0,basicInfoNodes : [
       {
-        title: '单位信息',
+        name: '单位信息',
         key: '0-0',
+        type:'基本信息',
         expanded: true,
-        zIndex : '0',
-        itemScore: 0,
-        sumScore: 0,
         children: [
-          {title: '统一社会信用代码',key: '1',isLeaf:true},
-          {title: '单位类型',key: '2',isLeaf:true},
-          {title: '联系人',key: '3',isLeaf:true},
-          {title: '联系电话',key: '4',isLeaf:true},
-          {title: '辖区中队',key: '5',isLeaf:true},
-          {title: '单位地址',key: '6',isLeaf:true}
+          {name: '统一社会信用代码',key: '1',isLeaf:true},
+          {name: '单位类型',key: '2',isLeaf:true},
+          {name: '联系人',key: '3',isLeaf:true},
+          {name: '联系电话',key: '4',isLeaf:true},
+          {name: '辖区中队',key: '5',isLeaf:true},
+          {name: '单位地址',key: '6',isLeaf:true}
         ]
       },
       {
-        title: '建筑信息',
+        name: '建筑信息',
         key: '0-1',
+        type:'基本信息',
         expanded: true,
-        zIndex : '0',
-        itemScore: 0,
-        sumScore: 0,
         children: [
-          { title: '面积', key: '0-1-0-0',isLeaf:true},
-          { title: '高度', key: '0-1-0-1',isLeaf:true},
-          { title: '层数', key: '0-1-0-2',isLeaf:true}
+          { name: '面积', key: '0-1-0-0',isLeaf:true},
+          { name: '高度', key: '0-1-0-1',isLeaf:true},
+          { name: '层数', key: '0-1-0-2',isLeaf:true}
         ]
       },
-    ],aroundScore:0,aroundNodes :[
+    ],aroundScore:0,aroundItemScore:0,aroundNodes :[
       {
-        title: '单位四周毗邻',
+        name: '单位四周毗邻',
         key: '11',
         expanded: true,
-        zIndex : '0',
-        itemScore: 0,
-        sumScore: 0,
+        type:'四周毗邻',
         children: [
-          {title: '东方向',key: '55',isLeaf:true},
+          {name: '东方向',key: '55',isLeaf:true},
         ]
       },
       {
-        title: '建筑四周毗邻',
+        name: '建筑四周毗邻',
         key: '22',
         expanded: true,
-        zIndex : '0',
-        itemScore: 0,
-        sumScore: 0,
+        type:'四周毗邻',
         children: [
-          {title: '东方向',key: '55',isLeaf:true},
+          {name: '东方向',key: '55',isLeaf:true},
         ]
       },
     ]},
-    {name:'富丽华大酒店2',score:0,basicInfoScore:0}
+    // {name:'富丽华大酒店2',score:0,basicInfoScore:0}
   ]
 
 
-  calculateScore(key){//计算分数
-    //key代表第几个建筑
-    //计算当前建筑基本信息分数
-    var basicInfoScore = 0
-    this.unitDatas[key].basicInfoNodes.forEach(element => {
-      basicInfoScore += Number(element.sumScore) 
-    })
-    this.unitDatas[key].basicInfoScore = basicInfoScore
-    //计算当前建筑四周毗邻分数
-    var aroundScore = 0
-    this.unitDatas[key].aroundNodes.forEach(element => {
-      aroundScore += Number(element.sumScore) 
+  //上个页面传过来的单位数据
+  unitId:any = [{name:'最最最最最',id:'5fb76c42919f2b44e464016f'},
+                {name:'华南城集团有限公司',id:'5ee19fe06f91049f5e23e937'},
+                {name:'贵港油库',id:'5fa35d68f8eb762cb03c662e'}
+              ]
+
+
+
+  
+
+  //获取单位数据
+  getUnitData(){
+    this.unitId.forEach((element,index) => {
+      element.score = 0
+      element.basicInfoScore = 0
+      element.basicInfoItemScore = 0
+
+      this.http.get(`/api/Companies/${element.id}`).subscribe((data:any)=>{
+        console.log('单位信息',index,data)
+        let unitData = {
+          name: '单位信息',
+          type:'基本信息',
+          expanded: false,
+          key:(Math.random()*10000000).toString(16).substr(0,4)+(new Date()).getTime()+Math.random().toString().substr(2,5),
+          children:[]
+        }
+        data.usci ? unitData.children.push({
+          name: '统一社会信用代码',key: element.id+'统一社会信用代码',isLeaf:true,value:data.usci
+        }) : null
+        data.buildingTypes[0].name ? unitData.children.push({
+          name: '单位类型',key: element.id+'单位类型',isLeaf:true,value:data.buildingTypes[0].name
+        }) : null
+        data.contacts ? unitData.children.push({
+          name: '联系人',key: element.id+'联系人',isLeaf:true,value:data.contacts
+        }) : null
+        data.phone ? unitData.children.push({
+          name: '联系电话',key: element.id+'联系电话',isLeaf:true,value:data.phone
+        }) : null
+        data.organizationName ? unitData.children.push({
+          name: '辖区中队',key: element.id+'辖区中队',isLeaf:true,value:data.organizationName
+        }) : null
+        data.address ? unitData.children.push({
+          name: '单位地址',key: element.id+'单位地址',isLeaf:true,value:data.address
+        }) : null
+  
+        element.basicInfoNodes = []
+        element.basicInfoNodes.push(unitData)
+
+        var buildingsData:any
+        this.http.get("/api/Buildings",{
+          params:{
+            companyId:element.id
+          }
+        }).subscribe(async (data:any)=>{
+          buildingsData = data
+          for (let i = 0, length = data.length; i < length; i++){
+            const result = await new Promise((resolve) =>{
+              this.http.get("/api/BuildingBasicInfos",{ // 循环请求当前单位建筑每一个建筑的信息保存到数组中
+                params:{
+                  companyId :element.id,
+                  buildingId:data[i].id,
+                  buildingType:data[i].buildingTypes[0].id
+                }
+              }).subscribe((buildingsData:any)=>{
+                console.log(1234,buildingsData)
+                buildingsData.name = data[i].name
+                buildingsData.buildingType = data[i].buildingTypes[0].name
+                
+                buildingsData[0].buildingBasicGroups.forEach((y,m) => {
+                  let propertyInfosArr = []
+                  let tabledata
+                  if(y.type == 1){//如果是表格类
+                    var map = {},
+                    dest:any = [];
+                    for(var i = 0; i < y.propertyInfos.length; i++){
+                        var ai = y.propertyInfos[i];
+                        if(!map[ai.propertyName]){
+                            dest.push({
+                                propertyName: ai.propertyName,
+                                data: [ai]
+                            });
+                            map[ai.propertyName] = ai;
+                        }else{
+                            for(var j = 0; j < dest.length; j++){
+                                var dj = dest[j];
+                                if(dj.propertyName == ai.propertyName){
+                                    dj.data.push(ai);
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                    //根据行数确定在循环数组中的index
+                    dest.forEach(item => {
+                      item.data.sort(function(a,b){
+                        return Number(a.tag) - Number(b.tag) 
+                      })
+                    })
+                    y.tabledata = dest
+                    tabledata = dest
+                    console.log('pppp',y)
+                    y.tabledata[0].data.forEach((x,key) => {
+                      if(x.propertyValue){
+                        x.key = (Math.random()*10000000).toString(16).substr(0,4)+(new Date()).getTime()+Math.random().toString().substr(2,5)
+                        x.isLeaf = true
+                        x.name = x.propertyValue
+                        propertyInfosArr.push(x)
+                      }
+                    })
+                  }else{
+                    y.propertyInfos.forEach((x,key) => {
+                      if(x.propertyValue){
+                        x.key = (Math.random()*10000000).toString(16).substr(0,4)+(new Date()).getTime()+Math.random().toString().substr(2,5)
+                        x.isLeaf = true
+                        x.name = x.propertyName
+                        propertyInfosArr.push(x)
+                      }
+                    })
+                  }
+                 
+                  element.basicInfoNodes.push({
+                    name:y.name != '基本信息' ? buildingsData.name + '-' + y.name : buildingsData.name ,
+                    type:'基本信息',
+                    expanded: false,
+                    key:(Math.random()*10000000).toString(16).substr(0,4)+(new Date()).getTime()+Math.random().toString().substr(2,5),
+                    children:propertyInfosArr,
+                    tabledata:tabledata ? tabledata : null
+                  })
+  
+                  element.basicInfoNodes = [...element.basicInfoNodes]
+                })
+                
+                resolve(i)
+              })
+            })
+          }
+          console.log(987,this.unitId)
+        })
+
+      }) 
+     
     })
-    this.unitDatas[key].aroundScore = aroundScore
+  }
+
 
 
+  //查看树节点
+  lookTreeNode(node){
+    console.log(node.origin)
+  }
+
+
+  //阻止input事件冒泡
+  stopPropagation($event){
+    $event.stopPropagation()
+  }
+  //模拟预案数据
+  planDatas:any = [
+    {name:'5楼电路故障灾情扑救',or:'上海总队',time:'2020-09-24',isOpen:'未公开',level:'总队',scroe:0},
+    {name:'6楼电路故障灾情扑救',or:'上海总队',time:'2020-09-24',isOpen:'未公开',level:'总队',scroe:0},
+    {name:'7楼电路故障灾情扑救',or:'上海总队',time:'2020-09-24',isOpen:'未公开',level:'总队',scroe:0}
+  ]
+
+  defaultCheckedKeys = []; //指定选中复选框的树节点 key值
+  defaultExpandedKeys = []; //展开指定的树节点 key值
+  defaultSelectedKeys = []; //指定选中的树节点 key值
+
+  examScore:any = 0//整个试卷的总分
+  
+  
+
+  //计算分数
+  calculateScore(key){
+    //key代表第几个建筑
     //计算整个单位的总分
-    var unitScore = 0
-    this.unitDatas[key].score = basicInfoScore + aroundScore + 0
+
+    this.unitId[key].score = this.unitId[key].basicInfoScore + 0
     
     //计算整个试卷的总分
     let examScore = 0
-    this.unitDatas.forEach(element => {
+    this.unitId.forEach(element => {
       examScore += Number(element.score) 
     })
     this.examScore = examScore
@@ -121,51 +261,68 @@ export class CreateTestScoreComponent implements OnInit {
 
   //tree的选择事件
   nzEvent(event: NzFormatEmitEvent,key): void {
-    if(event.node.level == 0){//如果点击第一层
-      let itemTrue = []
-      event.node.origin.children.forEach(item => {
-        if(item.checked){
-          itemTrue.push(item)
+
+      if(event.node.origin.type == '基本信息' || (event.node.parentNode && event.node.parentNode.origin.type == '基本信息')){
+
+        let selectedNum = []
+        this.unitId[key].basicInfoNodes.forEach(item => {
+          item.children.forEach(i => {
+            i.checked ? selectedNum.push(i) : ''
+          })
+        })
+        if(selectedNum.length != 0 ){
+          this.unitId[key].basicInfoScore ? this.unitId[key].basicInfoItemScore = this.unitId[key].basicInfoScore / selectedNum.length : null
+        }else{
+          this.unitId[key].basicInfoItemScore = 0
         }
-      })
-      event.node.origin.sumScore = event.node.origin.itemScore * itemTrue.length
-     
-      this.calculateScore(key)//更新标题栏分数
-      
-    }else{
-      let itemTrue = []
-      event.node.parentNode.origin.children.forEach(item => {
-        if(item.checked){
-          itemTrue.push(item)
+      }
+      if(event.node.origin.type == '四周毗邻' || (event.node.parentNode && event.node.parentNode.origin.type == '四周毗邻')){
+        let selectedNum = []
+        this.unitId[key].aroundNodes.forEach(item => {
+          item.children.forEach(i => {
+            i.checked ? selectedNum.push(i) : ''
+          })
+        })
+        console.log(7894,selectedNum)
+        if(selectedNum.length != 0 ){
+          this.unitId[key].aroundScore ? this.unitId[key].aroundItemScore = this.unitId[key].aroundScore / selectedNum.length : null
+        }else{
+          this.unitId[key].aroundItemScore = 0
         }
-      })
-      event.node.parentNode.origin.sumScore = event.node.parentNode.origin.itemScore * itemTrue.length
-      this.calculateScore(key)//更新标题栏分数
-    }
-    
+      }
   }
 
-  //每项分数动态计算
-  itemScore(node,key){
-    let itemTrue = []
-    node.origin.children.forEach(item => {
-      if(item.checked){
-        itemTrue.push(item)
+  //单位各项总分数动态计算
+  sumScore(type,key){
+    //key代表第几个建筑 type代表哪个部分
+    if(type == '基本信息'){
+      let selectedNum = 0
+      this.unitId[key].basicInfoNodes.forEach(item => {
+        item.children.forEach(i => {
+          i.checked ? selectedNum++ : ''
+        })
+      })
+      if(selectedNum != 0){
+        this.unitId[key].basicInfoItemScore = this.unitId[key].basicInfoScore / selectedNum
+      }else{
+        this.unitId[key].basicInfoItemScore = 0
       }
-    })
-    node.origin.sumScore = node.origin.itemScore * itemTrue.length
-    this.calculateScore(key)//更新标题栏分数
-  }
-  //总分数动态计算
-  sumScore(node,key){
-    //key代表第几个建筑
-    let itemTrue = []
-    node.origin.children.forEach(item => {
-      if(item.checked){
-        itemTrue.push(item)
+      
+    }
+    if(type == '四周毗邻'){
+      let selectedNum = 0
+      this.unitId[key].aroundNodes.forEach(item => {
+        item.children.forEach(i => {
+          i.checked ? selectedNum++ : ''
+        })
+      })
+      if(selectedNum != 0){
+        this.unitId[key].aroundItemScore = this.unitId[key].aroundScore / selectedNum
+      }else{
+        this.unitId[key].aroundItemScore = 0
       }
-    })
-    node.origin.itemScore = node.origin.sumScore / itemTrue.length
+      
+    }
     this.calculateScore(key)//更新标题栏分数
     
   }
@@ -258,7 +415,15 @@ export class AddPlanTwoDialog {
   onNoClick(): void {
     this.dialogRef.close();
   }
+  //确定
+  confirm(){
+    if(this.planType == 1){
+      console.log(this.selection)
+    }else{
 
+    }
+  }
+  //取消
   close(){
     this.dialogRef.close();
   }
diff --git a/src/app/examiner/examiner-routing.ts b/src/app/examiner/examiner-routing.ts
index 3ac82b2..c2fcb4c 100644
--- a/src/app/examiner/examiner-routing.ts
+++ b/src/app/examiner/examiner-routing.ts
@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2020-12-10 12:11:26
  * @LastEditors: sueRimn
- * @LastEditTime: 2020-12-11 16:40:36
+ * @LastEditTime: 2020-12-12 09:16:04
  */
 import { Routes, RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
@@ -16,6 +16,7 @@ const routes: Routes = [
     { path: 'createexam-index', component:ExaminerIndexComponent },
     { path: 'examiner-new-one', component:ExaminerNewOneComponent }
 
+  //{ path: 'createexam-index', component:ExaminerIndexComponent },
 ]
 @NgModule({
     imports: [RouterModule.forChild(routes)],
diff --git a/src/app/examiner/examiner.module.ts b/src/app/examiner/examiner.module.ts
index dc39eda..ae38bc8 100644
--- a/src/app/examiner/examiner.module.ts
+++ b/src/app/examiner/examiner.module.ts
@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { examinerRoutingModule } from './examiner-routing';
-
 import {A11yModule} from '@angular/cdk/a11y';
 import {DragDropModule} from '@angular/cdk/drag-drop';
 import {PortalModule} from '@angular/cdk/portal';
@@ -18,7 +17,7 @@ import {MatCardModule} from '@angular/material/card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatChipsModule} from '@angular/material/chips';
 import {MatStepperModule} from '@angular/material/stepper';
-// import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatExpansionModule} from '@angular/material/expansion';
@@ -54,7 +53,6 @@ import { ExaminerIndexComponent } from './examiner-index/examiner-index.componen
 import { ExaminerNewOneComponent } from './examiner-new-one/examiner-new-one.component';
 
 
-
 @NgModule({
   declarations: [CreateTestScoreComponent,AddPlanDialog,AddPlanTwoDialog,ExaminerIndexComponent, ExaminerNewOneComponent],
   imports: [
@@ -74,7 +72,7 @@ import { ExaminerNewOneComponent } from './examiner-new-one/examiner-new-one.com
     MatCheckboxModule,
     MatChipsModule,
     MatStepperModule,
-    // MatDatepickerModule,
+    MatDatepickerModule,
     MatDialogModule,
     MatDividerModule,
     MatExpansionModule,
diff --git a/src/app/http-interceptors/cache-token.service.ts b/src/app/http-interceptors/cache-token.service.ts
index f5acaf9..5e0b65e 100644
--- a/src/app/http-interceptors/cache-token.service.ts
+++ b/src/app/http-interceptors/cache-token.service.ts
@@ -22,7 +22,6 @@ export class CacheTokenService {
           refreshToken: refreshToken,
         }).subscribe((data:any) => {
           sessionStorage.setItem('realName',data.realName)
-          sessionStorage.setItem('roleType',data.roleType)
           sessionStorage.setItem("token",data.token);
           sessionStorage.setItem("refreshToken",data.refreshToken);
         })
diff --git a/src/app/navigation/navigation.component.html b/src/app/navigation/navigation.component.html
index 3b148f1..c489a07 100644
--- a/src/app/navigation/navigation.component.html
+++ b/src/app/navigation/navigation.component.html
@@ -34,7 +34,7 @@
   </mat-sidenav>
 
   <div class="example-sidenav-content">
-    <div style="height: 64px; min-height: 64px;">
+    <div style="height: 60px; min-height: 60px;">
       <app-tabbar (toggleDarkTheme)="switchTheme($event)" (defaulttheme)="defaulttheme()" (redtheme)="redtheme()"></app-tabbar>
     </div>
     <div style="flex: 1; overflow: hidden;">
diff --git a/src/app/navigation/navigation.component.scss b/src/app/navigation/navigation.component.scss
index 45df1e2..b1bdf98 100644
--- a/src/app/navigation/navigation.component.scss
+++ b/src/app/navigation/navigation.component.scss
@@ -9,7 +9,6 @@ mat-accordion{
 mat-sidenav{
     box-shadow: 2px 0px 5px #888888;
     color: white;
-    //background: url(../../assets/images/main_bg.png) 100% 100%;
     background-color: #07CDCF;
     width: 216px;
     overflow-x: hidden;
@@ -34,9 +33,6 @@ mat-sidenav{
             text-overflow:ellipsis;
             white-space: nowrap;
         }
-        li:hover{
-            background-color: #5d9cf2;
-        }
     }
       
 }
diff --git a/src/app/navigation/navigation.component.ts b/src/app/navigation/navigation.component.ts
index b7c2586..e9b6bba 100644
--- a/src/app/navigation/navigation.component.ts
+++ b/src/app/navigation/navigation.component.ts
@@ -21,14 +21,13 @@ export class NavigationComponent implements OnInit {
 
   allDataBank:any //所有的资料库
   selectedDataBank:any //当前选中的资料库
-  hoverDataBank:any //当前鼠标移入的资料库
+  hoverDataBank:any//当前鼠标移入的资料库
   isOneClick:boolean //是否第一次进入网页
   leftMenuname=""
 
   //左侧菜单点击事件
   clickLeftmenu(name){
     this.leftMenuname=name
-    console.log(this.leftMenuname)
   }
 
   //支队级菜单
@@ -70,20 +69,12 @@ export class NavigationComponent implements OnInit {
     { id:"学员管理", name:"学员管理" },
     { id:"教员管理", name:"教员管理" }
   ]
-
   
   isAdmin:boolean = false
   ngOnInit() {
-    // this.http.get('/api/DataBanks').subscribe((data:any) => {
-    //   if(data && data.length != 0){
-    //     this.selectedDataBank = data[0].id
-    //   }
-    // })
-    // this.getAllDataBank()
-    this.selectedDataBank = "支队级-主官"
-    if(sessionStorage.getItem("roleType") == "0"){
-      this.isAdmin = true
-    }
+    // if(sessionStorage.getItem("roleType") == "0"){
+    //   this.isAdmin = true
+    // }
   }
 
 
@@ -99,135 +90,6 @@ export class NavigationComponent implements OnInit {
     this.darktheme = true
   }
 
-
-  //点击用户管理
-  clickUser(item){
-    this.selectedDataBank = item.id
-    if(item.name == "学员管理"){
-      this.router.navigate([`/home/userManagement`])
-    }else if(item.name == "教员管理"){
-      this.router.navigate([`/home/teacherManagement`])
-    }
-    
-  }
-
-  //新增资料库
-  // addDataBank(){
-  //   const dialogRef = this.dialog.open(AddDataBank, {//调用open方法打开对话框并且携带参数过去
-  //     width: '260px',
-  //     data: {}
-  //   });
-  //   dialogRef.afterClosed().subscribe(
-  //     (data:any)=>{
-  //       if(data){
-  //         let headers = new HttpHeaders({
-  //           'Content-Type': 'text/json'
-  //         });
-  //         let options = {
-  //           headers
-  //         };
-  //         let body = JSON.stringify(data.name);
-  //         this.http.post('/api/DataBanks',body,options).subscribe(data => {
-  //           this.getAllDataBank()
-  //           const config = new MatSnackBarConfig();
-  //           config.verticalPosition = 'top';
-  //           config.duration = 3000
-  //           this.snackBar.open('创建资料库成功','确定',config);
-  //         },
-  //         err => {
-  //           const config = new MatSnackBarConfig();
-  //           config.verticalPosition = 'top';
-  //           config.duration = 3000
-  //           this.snackBar.open(err,'确定',config);
-  //         })
-  //       }  
-  //     }
-  //   );
-  // }
-
-
-  //获得所有资料库
-  // getAllDataBank(){
-  //   this.http.get('/api/DataBanks').subscribe(data => {
-  //     this.allDataBank = data
-  //     // console.log(123,data)
-  //   }
-  //   ,
-  //   err=>{
-  //     // console.log(456,err)
-  //   })
-  // }
-
-
-  //点击资料库
-  clickLi(item){
-    this.selectedDataBank = item.id
-    //触发子组件的方法
-    // this.child.getALLFileList(item.id);
-    // this.child.selection.clear();
-    this.router.navigate([`/home`])
-    this.emitService.eventEmit.emit(item.id);
-  }
-
-
-  //鼠标移入资料库
-  liEnter(item){
-    this.hoverDataBank = item.id
-  }
-  //鼠标移出资料库
-  liLeave(item){
-    this.hoverDataBank = ""
-  }
-  //修改资料库名称
-  editDataBankName(e,item){
-    e.stopPropagation()
-    const dialogRef = this.dialog.open(EditDataBankName, {//调用open方法打开对话框并且携带参数过去
-      width: '260px',
-      data: {name:item.name}
-    });
-    dialogRef.afterClosed().subscribe(
-      (data:any)=>{
-        if(data){
-          if(data != item.name){
-            let headers = new HttpHeaders({
-              'Content-Type': 'text/json'
-            });
-            let options = {
-              headers
-            };
-            let body = JSON.stringify(data.name);
-            this.http.put(`/api/DataBanks/${item.id}`,body,options).subscribe(data => {
-              // this.getAllDataBank()
-              const config = new MatSnackBarConfig();
-              config.verticalPosition = 'top';
-              config.duration = 3000
-              this.snackBar.open('修改资料库名称成功','确定',config);
-            })
-          }
-        }  
-      }
-    );
-  }
-  //删除资料库
-  deleteDataBank(e,item){
-    e.stopPropagation()
-    var r = confirm(`您确定要删除 ${item.name} 资料库吗？`);
-    if (r == true) {
-      this.http.delete(`/api/DataBanks/${item.id}`).subscribe(data => {
-        // this.getAllDataBank()
-        let config = new MatSnackBarConfig();
-        config.verticalPosition = 'top';
-        config.duration = 3000
-        this.snackBar.open('删除成功','确定',config);
-      },
-      err=>{
-        let config = new MatSnackBarConfig();
-        config.verticalPosition = 'top';
-        config.duration = 3000
-        this.snackBar.open('删除失败，请联系管理员','确定',config);
-      })
-    }
-  }
 }
 
 //新增资料库
diff --git a/src/app/pages/lockscreen/lockscreen.component.html b/src/app/pages/lockscreen/lockscreen.component.html
index bd55be4..5a296cc 100644
--- a/src/app/pages/lockscreen/lockscreen.component.html
+++ b/src/app/pages/lockscreen/lockscreen.component.html
@@ -1,5 +1,7 @@
 <div class="content">
-  <div class="leftBox"></div>
+  <div class="leftBox">
+    <img src="../../../assets/images/loginCenter.png">
+  </div>
 
   <div class="loginBox">
     <div class="center">
@@ -28,7 +30,7 @@
         <div class="forget"><label (click)='forget()'>忘记密码?</label></div>
         <div *ngIf="errmsg" class="alert-danger">{{errmsg}}</div>
         <button type="submit" [disabled]="!form.form.valid" class="loginBtn" mat-raised-button>登录</button>
-        <label class="toAdmin" (click)='toAdminLogin()'>管理员登录</label>
+        <label class="toAdmin" (click)='toAdminLogin()'><mat-icon style="vertical-align: middle; font-size: 22px;">perm_identity</mat-icon>管理员登录</label>
 
       </form>
     </div>
diff --git a/src/app/pages/lockscreen/lockscreen.component.scss b/src/app/pages/lockscreen/lockscreen.component.scss
index de121e5..8466be9 100644
--- a/src/app/pages/lockscreen/lockscreen.component.scss
+++ b/src/app/pages/lockscreen/lockscreen.component.scss
@@ -1,6 +1,8 @@
 .content {
   width: 100%;
   height: 100%;
+  min-width: 1024px;
+  min-height: 768px;
   display: flex;
   overflow: hidden;
   box-sizing: border-box;
@@ -9,6 +11,9 @@
     flex: 70%;
     background: url('../../../assets/images/loginBackground.png');
     background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
   .loginBox {
     flex: 30%;
diff --git a/src/app/pages/lockscreen/lockscreen.component.ts b/src/app/pages/lockscreen/lockscreen.component.ts
index f83430d..5894d66 100644
--- a/src/app/pages/lockscreen/lockscreen.component.ts
+++ b/src/app/pages/lockscreen/lockscreen.component.ts
@@ -27,17 +27,14 @@ export class LockscreenComponent implements OnInit {
 
   //登录
   onSubmit(e){
-    let params = { roleType: this.roleType }
-    this.http.post('/api/Account/SignIn',e,{params}).subscribe((data:any)=>{
-      sessionStorage.setItem('username',e.name)
-      sessionStorage.setItem('expires',data.expires)
-      sessionStorage.setItem('realName',data.realName)
-      sessionStorage.setItem('roleType',data.roleType)
-      sessionStorage.setItem("token",data.token);
-      sessionStorage.setItem("refreshToken",data.refreshToken);
-      this.token.startUp(); //登陆成功启动定时器刷新token
-      this.router.navigate(['/home/createexam']) //登陆成功跳转页面
-    },(err) => {this.errmsg = err})
+    // let params = { roleType: this.roleType }
+    // this.http.post('/api/Account/SignIn',e,{params}).subscribe((data:any)=>{
+    //   sessionStorage.setItem("realName",data.realName);
+    //   sessionStorage.setItem("token",data.token);
+    //   sessionStorage.setItem("refreshToken",data.refreshToken);
+    //   this.token.startUp(); //登陆成功启动定时器刷新token
+    //   this.router.navigate(['/home/createexam']) //登陆成功跳转页面
+    // },(err) => {this.errmsg = err})
   }
 
   //切换登录角色
diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html
index 3b7b8fa..443f290 100644
--- a/src/app/pages/login/login.component.html
+++ b/src/app/pages/login/login.component.html
@@ -20,7 +20,7 @@
           <div class="forget"><label (click)='forget()'>忘记密码?</label></div>
           <div *ngIf="errmsg" class="alert-danger">{{errmsg}}</div>
           <button type="submit" [disabled]="!form.form.valid" class="loginBtn" mat-raised-button>登录</button>
-          <label class="toAdmin" (click)='toAdminLogin()'>返回</label>
+          <label class="toAdmin" (click)='toAdminLogin()'><mat-icon style="vertical-align: middle; font-size: 22px;">replay</mat-icon>返回</label>
 
         </form>
 
diff --git a/src/app/pages/login/login.component.scss b/src/app/pages/login/login.component.scss
index dd3e43a..504997a 100644
--- a/src/app/pages/login/login.component.scss
+++ b/src/app/pages/login/login.component.scss
@@ -1,6 +1,8 @@
 .login {
   width: 100%;
   height: 100%;
+  min-width: 1024px;
+  min-height: 768px;
   overflow: hidden;
   box-sizing: border-box;
   padding: 1px;
diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts
index f059bea..d15cdfd 100644
--- a/src/app/pages/login/login.component.ts
+++ b/src/app/pages/login/login.component.ts
@@ -27,12 +27,9 @@ export class LoginComponent implements OnInit {
 
   //登录
   onSubmit(e){
-    let params = { roleType: '0' }
-    this.http.post('/api/Account/SignIn',e,{params}).subscribe((data:any)=>{
-      sessionStorage.setItem('username',e.name)
-      sessionStorage.setItem('expires',data.expires)
-      sessionStorage.setItem('realName',data.realName)
-      sessionStorage.setItem('roleType',data.roleType)
+    // let params = { roleType: '0' },{params}
+    this.http.post('/api/Account/SignIn',e).subscribe((data:any)=>{
+      sessionStorage.setItem("realName",data.realName);
       sessionStorage.setItem("token",data.token);
       sessionStorage.setItem("refreshToken",data.refreshToken);
       this.token.startUp(); //登陆成功启动定时器刷新token
diff --git a/src/app/tabbar/tabbar.component.html b/src/app/tabbar/tabbar.component.html
index d6a537f..265f213 100644
--- a/src/app/tabbar/tabbar.component.html
+++ b/src/app/tabbar/tabbar.component.html
@@ -6,23 +6,22 @@
  * @LastEditors: sueRimn
  * @LastEditTime: 2020-12-11 10:01:47
 -->
-<mat-toolbar style="background-color:#FFFFFF;height: 60px;">
+<mat-toolbar style="background-color:#FFFFFF;height: 60px; box-shadow: inset 0px -3px 5px 0px rgb(165, 163, 163)">
 
   <!-- <mat-toolbar> -->
   <p>欢迎登录消防救援考核系统</p>
-
   
   <!-- 已登录状态 -->
-  <button mat-icon-button  class="login">
+  <!-- <button mat-icon-button  class="login">
       <mat-icon>account_circle</mat-icon>
-  </button>
-  <span  style="position: absolute;right:80px;color: #1E2323;font-size: 16px;">用户名：{{realName}}<mat-icon [matMenuTriggerFor]="appMenu" style="color: #1E2323;position: relative;top: 8px;cursor: pointer;">keyboard_arrow_down</mat-icon></span>
+  </button> -->
+  <span  style="position: absolute;right:80px;color: #1E2323;font-size: 16px;">{{realName}}<mat-icon [matMenuTriggerFor]="appMenu" style="color: #1E2323;position: relative;top: 8px;cursor: pointer;">keyboard_arrow_down</mat-icon></span>
   <mat-menu #appMenu="matMenu">
     <!-- <button mat-menu-item (click)='changeUserData()'>
       <mat-icon>perm_identity</mat-icon>
       <span>修改资料</span>
     </button> -->
-    <button mat-menu-item >
+    <button mat-menu-item (click)='changPassword()'>
       <img style="width: 16px;height: 18px;position: relative;top: 2px;" src="../../assets/images/uppsd.png">
       <span style="margin-left: 5px;">修改密码</span>
     </button>
diff --git a/src/app/ui/collection-tools/addDisposalNode.html b/src/app/ui/collection-tools/addDisposalNode.html
new file mode 100644
index 0000000..27654e8
--- /dev/null
+++ b/src/app/ui/collection-tools/addDisposalNode.html
@@ -0,0 +1,24 @@
+<div class="functionalDomainContent">
+  <div mat-dialog-title>
+    <label *ngIf="!data.parentId">新建处置节点</label>
+    <label *ngIf="data.parentId">新建节点</label>
+  </div>
+
+  <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+
+    <div class="keyMargin">
+      <mat-form-field>
+        <input matInput name="name" required ngModel placeholder="名称">
+      </mat-form-field>
+    </div>
+
+    <div class="submitBottom">
+      <button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid">
+          确定
+      </button>
+      <button mat-raised-button mat-dialog-close>取消</button>
+    </div>
+
+  </form>
+
+</div>
\ No newline at end of file
diff --git a/src/app/ui/collection-tools/addPlaneFigure.html b/src/app/ui/collection-tools/addPlaneFigure.html
new file mode 100644
index 0000000..930bf81
--- /dev/null
+++ b/src/app/ui/collection-tools/addPlaneFigure.html
@@ -0,0 +1,38 @@
+<div class="functionalDomainContent">
+  <div mat-dialog-title>
+    <label *ngIf="!data.isBuilding">新建平面图</label>
+    <label *ngIf="data.isBuilding">新建楼层/区域</label>
+  </div>
+
+  <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+
+    <div class="keyMargin">
+      <mat-form-field>
+        <input matInput name="name" required ngModel placeholder="名称">
+      </mat-form-field>
+    </div>
+
+    <div class="keyMargin" *ngIf="data.isBuilding">
+      <mat-checkbox name="isRefugeStorey"  [(ngModel)]="checked">是否为避难层</mat-checkbox>
+    </div>
+
+    <div class="keyMargin">
+      <mat-form-field>
+        <input matInput name="area" type="number" required ngModel placeholder="面积 (平方米)">
+      </mat-form-field>
+    </div>
+
+    <div class="keyMargin">
+      <textarea name="details" ngModel placeholder="详情"></textarea>
+    </div>
+
+    <div class="submitBottom">
+      <button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid">
+          确定
+      </button>
+      <button mat-raised-button mat-dialog-close>取消</button>
+    </div>
+
+  </form>
+
+</div>
\ No newline at end of file
diff --git a/src/app/ui/collection-tools/collection-tools.component.html b/src/app/ui/collection-tools/collection-tools.component.html
new file mode 100644
index 0000000..a7798e7
--- /dev/null
+++ b/src/app/ui/collection-tools/collection-tools.component.html
@@ -0,0 +1,453 @@
+<div class="content">
+  <!-- header头部 -->
+  <div class="header">
+    <button mat-button (click)="toggle()">
+      <mat-icon style="vertical-align: middle;">toc</mat-icon>
+    </button>
+    <button mat-button (click)="toggle2()">
+      <mat-icon style="vertical-align: middle;">list</mat-icon>
+    </button>
+    <span style="color: gray;margin-right: 10px;margin-left: 10px;">图标大小</span>
+    <mat-form-field style="margin-top: 3px;">
+      <mat-select (selectionChange)='iconScale()' [(ngModel)]="selected">
+        <mat-option value="1">正常</mat-option>
+        <mat-option value="2">放大2倍</mat-option>
+        <mat-option value="4">放大4倍</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <button (click)="copyAsset()" class="copytobutn" mat-button title="复制" style="margin:0 5px;" *ngIf="isEditPattern">
+      <mat-icon style="padding-bottom: 7px;">library_books</mat-icon>
+    </button>
+
+    <button (click)="pasteAsset()" class="copytobutn" mat-button title="粘贴" *ngIf="isEditPattern">
+      <mat-icon style="padding-bottom: 7px;">screen_share</mat-icon>
+    </button>
+
+    <span  [ngClass]="{'icongray': !basicInfo}" title="基本信息名称显示/隐藏" style="margin-right:20px;user-select: none;margin-left: 22px;" class="nameShow" (click)="basicInfoClick()">
+      基本信息名称
+      <mat-icon>visibility</mat-icon>
+    </span>
+    <span [ngClass]="{'icongray': !wantToWork}" *ngIf="!pattern" title="想定作业名称显示/隐藏" style="user-select: none;" class="nameShow" (click)="wantToWorkClick()">
+      想定作业名称
+      <mat-icon>visibility</mat-icon>
+    </span>
+    <div class="patternSwitch">
+      <span (click)="baseInfo()" [ngClass]="{'selectedPattern': pattern}">
+        基本信息编辑
+      </span>
+      <span *ngIf="isSixbtn" (click)="wantWork()" [ngClass]="{'selectedPattern': !pattern}">
+        想定作业编辑
+      </span>
+    </div>
+    <span style="position: absolute;right: 60px;cursor: pointer;">
+      <mat-icon title="查看/编辑模式" (click)="lookpat()" *ngIf="isEditPattern">tv</mat-icon>
+      <mat-icon title="查看/编辑模式" (click)="editpat()" *ngIf="!isEditPattern && isxxx">create</mat-icon>
+      <mat-icon *ngIf="isEditPattern " style="margin-left: 12px;" title="保存" (click)="saveSite()">description</mat-icon>
+    </span>
+  </div>
+
+  <!-- 头部操作栏 -->
+  <div class="headerOperate">
+    <button mat-button (click)="checkedBuilding({name:'总平面图'},-1)"
+      [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==-1}">
+      <span>总平面图</span>
+      <span *ngIf="isEditPattern && !pattern">
+        <img src="../../../assets/images/fire.png" *ngIf="sitePlanIcon.fire==2">
+        <img src="../../../assets/images/noFire.png" *ngIf="sitePlanIcon.fire==1">
+        <img src="../../../assets/images/force.png" *ngIf="sitePlanIcon.force==2">
+        <img src="../../../assets/images/noForce.png" *ngIf="sitePlanIcon.force==1">
+      </span>
+    </button>
+    <button mat-button *ngFor="let item of allBuildings;let key = index" (click)="checkedBuilding(item,key)" class="bigeditdeletebtn"
+      [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==key}">
+      <span>{{item.name}}</span>
+      <span *ngIf="isEditPattern && !pattern">
+        <img src="../../../assets/images/fire.png" *ngIf="item.fire && item.fire==2">
+        <img src="../../../assets/images/noFire.png" *ngIf="item.fire && item.fire==1">
+        <img src="../../../assets/images/force.png" *ngIf="item.force && item.force==2">
+        <img src="../../../assets/images/noForce.png" *ngIf="item.force && item.force==1">
+      </span>
+      <span class="editdeletebtn" *ngIf="isEditPattern && pattern">
+        <mat-icon (click)="editBuilding($event,item)"
+          style="font-size: 23px;vertical-align:sub;margin-left: 6px;color: rgb(26, 194, 26);">create</mat-icon>
+        <mat-icon (click)="deleteBuilding($event,item)"
+          style="font-size: 23px;vertical-align:sub;color: rgb(224, 51, 51);">delete</mat-icon>
+      </span>
+    </button>
+    <!-- <button (click)="yyy()">yyyyy</button> -->
+    <button mat-button (click)="createBuilding()" *ngIf="isEditPattern && pattern">
+      <span style="font-size: 24px;">+</span>
+    </button>
+    <div class="bigBox" *ngIf="!pattern">
+      <div class="weatherBox" [ngClass]="{'opened': weatherBtn,'close': !weatherBtn}">
+        <mat-icon class="openbtn" *ngIf="weatherBtn" (click)="weatherBtnHidden()">keyboard_arrow_right</mat-icon>
+        <mat-icon class="openbtn" *ngIf="!weatherBtn" (click)="weatherBtnShow()">keyboard_arrow_left</mat-icon>
+        <span class="name">天气</span>
+        <input [(ngModel)]="canvasData.selectPanelPointBaseData.weather" type="text" placeholder="最多输入10字节" maxlength="10">
+        <span class="name">气温</span>
+        <div style="display: inline-block;position: relative;">
+          <input [(ngModel)]="canvasData.selectPanelPointBaseData.airTemperature" style="width: 120px;" type="number" value="0" oninput="if(value.length>2)value=value.slice(0,2)">
+          <span style="position: absolute;right:17px;color: #9c9fa5;">℃</span>
+        </div>
+        <span class="name">风力</span>
+        <select [(ngModel)]="canvasData.selectPanelPointBaseData.windScale">
+          <option value ="0">0(无风)</option>
+          <option value ="1">1(软风)</option>
+          <option value ="2">2(轻风)</option>
+          <option value ="3">3(微风)</option>
+          <option value ="4">4(和风)</option>
+          <option value ="5">5(清风)</option>
+          <option value ="6">6(强风)</option>
+        </select>
+        <span class="name">风向</span>
+        <select [(ngModel)]="canvasData.selectPanelPointBaseData.windDirection">
+          <option value ="0">东</option>
+          <option value ="1">西</option>
+          <option value ="2">南</option>
+          <option value ="3">北</option>
+          <option value ="4">东南</option>
+          <option value ="5">西南</option>
+          <option value ="6">东北</option>
+          <option value ="7">西北</option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <!--功能区 -->
+  <div class="functionalDomain">
+    <div class='functionalDomainContent' id="functionalDomainContent">
+
+      <!-- H5Canvas -->
+      <app-working-area #canvas [init]='this'></app-working-area>
+      <!-- H5Canvas -->
+      <div id="leftDiv" class='functionalDomainLeft publicCss' [ngClass]="{'togglePanel': toggleExpandPanel==true,'scenarioAssignment': !pattern}" style="user-select: none;">
+        <div class="leftDragDiv"  (mousedown)="leftDivMouseDown($event)"></div>
+        <!-- 平面图 -->
+        <div class="planarGraph">
+          <div class="planarGraphHeader" (click)='togglePlanarGraph()'>
+            <mat-icon *ngIf="togglePlane">keyboard_arrow_up</mat-icon>
+            <mat-icon *ngIf="!togglePlane">keyboard_arrow_down</mat-icon>
+            <label class="overflowText" style="font-weight: 550;">平面图</label>
+            <label class="hover" *ngIf="isEditPattern && pattern">
+              <mat-icon (click)='foundPanel($event)'>add</mat-icon>
+            </label>
+          </div>
+          <div [hidden]="!togglePlane" >
+              <div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index" [ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)'>
+              <label class="overflowText" style="display:inline-block; max-width: 180px;"><mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>   {{item.name}}</label>
+              <a href="javascript:;" class="fireForce" *ngIf="isEditPattern && !pattern">
+                <img src="../../../assets/images/fire.png" *ngIf="item.fire && item.fire==2">
+                <img src="../../../assets/images/noFire.png" *ngIf="item.fire && item.fire==1">
+                <img src="../../../assets/images/force.png" *ngIf="item.force && item.force==2">
+                <img src="../../../assets/images/noForce.png" *ngIf="item.force && item.force==1">
+              </a>
+              <a href="javascript:;" class="a-upload" *ngIf="selectSitePlanIndex==key && isEditPattern && pattern" title="替换底图" >
+                <input type="file" (change)='replaceBaseMap($event,item)' accept="image/*">
+                <mat-icon class="matIcons">photo_size_select_actual</mat-icon>
+              </a>
+              <a href="javascript:;" id="a-uploadImg" *ngIf="selectSitePlanIndex==key && !item.imageUrl && isEditPattern" title="上传底图" >
+                <input type="file" (change)='replaceBaseMap($event,item)' accept="image/*">
+                <img src="../../../assets/images/upload.jpg">
+              </a>
+              <!-- 右边定位操作栏 -->
+              <div id="rightOperate" *ngIf="selectSitePlanIndex==key && item.imageUrl && isEditPattern" (click)="$event.stopPropagation();">
+                <p class="functionButton">
+                  <mat-icon class="functionIcon bigFunctionIcon" title="上移" (click)='moveUp(item,key)'>keyboard_arrow_up</mat-icon>
+                </p>
+                <p class="functionButton">
+                  <mat-icon class="functionIcon" title="编辑属性" (click)='editPlaneData(item)'>edit</mat-icon>
+                  <mat-icon class="functionIcon" title="删除" (click)="deletePlaneData(item)">delete</mat-icon>
+                </p>
+                <p class="functionButton">
+                  <mat-icon class="functionIcon" title="旋转底图" (click)='revolveImg(item)'>cached</mat-icon>
+                  <mat-icon class="functionIcon" title="复制" (click)="duplicateLayer(item)">library_books</mat-icon>
+                </p>
+                <p class="functionButton">
+                  <mat-icon class="functionIcon bigFunctionIcon" title="下移" (click)='moveDown(item,key)'>keyboard_arrow_down</mat-icon>
+                </p>
+              </div>
+              <!-- 右边定位操作栏 -->
+            </div>
+          </div>
+        </div>
+
+        <!-- 素材库 -->
+        <div id="materialBank" *ngIf="isEditPattern" [ngClass]="{'selectEditMode': pattern}">
+          <div class="planarGraphHeader" (click)='toggleMaterial()'>
+            <mat-icon *ngIf="toggleMaterialBank">keyboard_arrow_up</mat-icon>
+            <mat-icon *ngIf="!toggleMaterialBank">keyboard_arrow_down</mat-icon>
+            <label class="overflowText" style="font-weight: 550;">素材库</label>
+          </div>
+          <div [hidden]="!toggleMaterialBank" [ngClass]="{'materialBankDIV': pattern}">
+            <mat-accordion *ngFor="let item of allLibrary" id="panelLibrary">
+              <mat-expansion-panel (opened)='opened(item)'>
+                <mat-expansion-panel-header>
+                  <label class="text">{{item.name}}</label>
+                </mat-expansion-panel-header>
+
+                <div class="panelLibraryFlex">
+                  <div class="imgBox" *ngFor="let items of item.images;let key = index" [title]="items.name"
+                    (click)='selectImg(item,items,key)'
+                    [ngClass]="{'selectImg': selectLibrary==item.name && selectImageIndex==key}">
+                    <img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
+                    <p class="overflowText">{{items.name}}</p>
+                  </div>
+                </div>
+
+              </mat-expansion-panel>
+            </mat-accordion>
+          </div>
+        </div>
+        <!-- 素材库 -->
+        <!-- 处置预案 -->
+        <div class="handlePlan" *ngIf="!pattern">
+          <div class="planarGraphHeader" (click)='toggleHandlePlan()'>
+            <mat-icon *ngIf="toggleHandlePlans">keyboard_arrow_up</mat-icon>
+            <mat-icon *ngIf="!toggleHandlePlans">keyboard_arrow_down</mat-icon>
+            <label class="overflowText" style="font-weight: 550;">处置预案</label>
+            <label style="margin-left: 45px;" *ngIf="isEditPattern">
+              <mat-icon style="color: #c2a40ce8;" title="计算差异" (click)='countValue($event)'>flash_on</mat-icon>
+              <mat-icon style="margin-left: 3px;" title="新建空节点" (click)='addPanelPoint($event,null,treeData)'>add</mat-icon>
+            </label>
+          </div>
+          <div [hidden]="!toggleHandlePlans">
+            
+            <nz-tree #nzTreeComponent [nzData]="treeData" nzBlockNode nzDraggable (nzOnDrop)="nzEvent($event)" [nzTreeTemplate]="nzTreeTemplate" [nzBeforeDrop]="beforeDrop" [nzExpandedKeys]="defaultExpandedKeys"></nz-tree>
+            <ng-template #nzTreeTemplate let-node let-origin="origin">
+              <div id="terrNodePublic" (click)='selectanelPoint(node.origin)' [ngClass]="{'selectanelPoint': selectDisposalNode==node.origin.id}">
+                <label title="{{node.title}}" class="overflowText textNode">{{node.title}}</label>
+                <div class="planIconDiv" *ngIf="isEditPattern">
+                  <mat-icon  *ngIf="!node.origin.sitePlanId && !node.origin.buildingAreaId" (click)='editPanelPoint($event,node)'>edit</mat-icon>
+                  <mat-icon *ngIf="node.level===0" (click)='addPanelPoint($event,node.origin,null)'>add</mat-icon>
+                  <mat-icon  *ngIf="!node.origin.sitePlanId && !node.origin.buildingAreaId" (click)='copyPanelPoint($event,node,treeData)'>library_books</mat-icon>
+                  <mat-icon (click)='deletePanelPoint($event,node.origin)'>delete_forever</mat-icon>
+                </div>
+              </div>
+            </ng-template>
+
+          </div>
+        </div>
+        <!-- 处置预案 -->
+
+      </div>
+
+      <div id="rightDiv" class="functionalDomainRight publicCss " [ngClass]="{'togglePanel2': toggleExpandPanelRight==true}" style="user-select: none;">
+        <!-- 右侧div鼠标拖动div -->
+        <div style="width: 3px;height: 100%;position: absolute;left: 0;cursor: e-resize;z-index: 1000;" (mousedown)="rightDivMouseDown($event)"></div>
+        <!-- 属性 -->
+        <div [ngClass]="{'forbidden': !isEditPattern}" id="property" class="property" style="height: 50%;background-color: white;">
+          <div class="title">
+            <div>
+              <span style="user-select: none">属性</span>
+            </div>
+          </div>
+          <!-- 平面图属性 -->
+          <div class="siteproperty" style="user-select: none" *ngIf="isShowProperty && isShowAttribute">
+            <p>面积(平方米)</p>
+            <div class="siteproperty_size">{{canvasData.selectStorey.area}}</div>
+            <p>详情</p>
+            <div class="siteproperty_size">
+              {{canvasData.selectStorey.details}}
+            </div>
+          </div>
+          <!-- 素材属性 -->
+          <div class="assetsproperty" style="user-select: none"  *ngIf="isShowProperty && !isShowAttribute">
+            <h3 style="text-align: center;font-weight: 900;">{{assetName}}</h3>
+
+            <div *ngIf="canvasAssetObj.InteractiveMode == 0">
+              <p>宽度(像素)</p>
+              <input type="text" class="biginput" [(ngModel)]="assetWidth" (input)="assetWidthIunput()" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+              <p>高度(像素)</p>
+              <input type="text" class="biginput" [(ngModel)]="assetHeight" (input)="assetHeightIunput()" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+              <p>角度</p>
+              <div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
+                <input type="number" class="smallinput" [(ngModel)]="sliderValue"
+                  oninput="if(value>360)value=360;if(value<0)value=0;" (input)="assetAngleIunput()" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+                <mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;"
+                  [(ngModel)]="sliderValue" (change)="assetAngleIunput()"  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)"></mat-slider>
+              </div>
+            </div>
+            <!-- 如果是多点连线 -->
+            <div *ngIf="canvasAssetObj.InteractiveMode == 1">
+              <p>厚度</p>
+              <div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
+                <input type="number" class="smallinput" [(ngModel)]="sliderValueThickness"
+                  oninput="if(value>999)value=999;if(value<0)value=0;" (input)="assetThicknessIunput()" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+                <mat-slider color="primary" min="0" max="999" step="1" style="bottom: 12px;left: 2px;width: 70%;"
+                  [(ngModel)]="sliderValueThickness" (change)="assetThicknessIunput()"  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)"></mat-slider>
+              </div>
+            </div>
+
+            <p style="margin-top: 4px;margin-bottom: 0px;">是否高亮</p>
+            <div>
+              <input class="input" [(ngModel)]="isHighLight" type="checkbox"  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+              <span style="font-size: 14px;">选中高亮</span>
+            </div>
+            <div class="colorBigDiv" *ngIf="canvasAssetObj.FillMode == 0">
+              <div class="colorBigTemplateDiv">
+                <span>颜色</span>
+                <div class="colorTemplateDiv" [style]="{'background-color':selectedcolor}">
+
+                </div>
+              </div>
+              <div class="colorDiv" *ngIf="isEditPattern && pattern && canvasAssetObj.GameMode == 0"> 
+                <ul>
+                    <li (click)="selectcolor(item,key)" class="colorLi" *ngFor="let item of colors,let key=index" [style]="{'background-color':item}"></li>
+                </ul>
+              </div>
+              <span style="color: #9c9fa5;font-size: 14px;">透明度</span>
+              <mat-slider color="primary" min="0" max="100%" step="1" style="left: 1px; width: 55%;min-width: 90px;"
+                [(ngModel)]="colorDivSliderValue" (change)="colorDivSliderChange()"  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)"></mat-slider>
+              <span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span>
+            </div>
+            <div *ngFor="let item of PropertyInfos;index as key ">
+              <!-- 单行文本 -->
+              <div *ngIf="item.PropertyType == 0">
+                <p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
+                <input type="text" class="biginput" [value]="item.PropertyValue" (input)="assetInputChange(item,$event)"  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+              </div>
+              <!-- 多行文本 -->
+              <div *ngIf="item.PropertyType == 1">
+                <p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
+                <textarea class="textarea" name="" id=""  [value]="item.PropertyValue" (input)="assetInputChange(item,$event)"  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)"></textarea>
+              </div>
+              <!-- 数值 -->
+              <div *ngIf="item.PropertyType == 2">
+                <p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
+                <input type="number" class="biginput" [value]="item.PropertyValue" (input)="assetInputChange(item,$event)" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+              </div>
+              <!-- 图片数量 -->
+              <div *ngIf="item.PropertyType == 4" style="height: 140px;">
+                <div style="position: relative;width: 100%;height: 21px;margin: 1px 0;">
+                  <p style="width: 40%;display: inline-block;">{{item.PropertyName}}</p>
+                  <span style="width: 26%;text-align:right;font-size: 13px;">{{imagesArr.length ? imagesArr.length : 0}} / {{item.PropertyValue}}</span>
+                  <input  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)" *ngIf="isImgNumCss" accept="image/*" (change)="selectFile($event)" type="file" style="width: 33%;position: absolute;right: 10px;top: 1px;opacity: 0;z-index: 100;cursor: pointer;height: 21px;">
+                  <div style="width: 33%;height: 21px;line-height: 21px;text-align: center;position: absolute;right: 10px;top: 1px;z-index: 99;border: 1px solid rgb(208, 211, 214);border-radius: 2px;font-size: 13px;cursor: pointer;" (click)="imgNumBeyond()">添加</div>
+                  
+                  
+                  <div style="position: relative;;width: 89%;border:1px solid rgb(208, 211, 214);height: 100px;margin: 6px auto;" class="swiper-container">
+                    <div id="viewerjs" class="swiper-wrapper" [ngClass]="{'noImgCss': imagesArr.length == 0}">
+                      <div class="swiper-slide" style="text-align: center;" *ngFor="let img of imagesArr"><img [src]="img.PropertyValue + '?x-oss-process=image/resize,m_fixed,h_100,w_100'" alt="" [attr.data-original]="img.PropertyValue"></div>
+                    </div>
+                    <!-- 如果需要导航按钮 -->
+                    <div class="swiper-button-next"></div>
+                    <div class="swiper-button-prev"></div>
+                    <span style="position: absolute;right: 2px;top: 2px;cursor: pointer;z-index: 200;" *ngIf="isEditPattern">
+                      <mat-icon class="hoverred" (click)="deleteImg()">delete</mat-icon>
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <!-- 方向 -->
+              <div *ngIf="item.PropertyType == 5" class="selectDiv">
+                <p style="display: inline-block;">{{item.PropertyName}}</p>
+                <select (change)="direction(item,$event)"  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+                  <option value ="0" [selected]="item.PropertyValue ==0">东</option>
+                  <option value ="1" [selected]="item.PropertyValue ==1">西</option>
+                  <option value ="2" [selected]="item.PropertyValue ==2">南</option>
+                  <option value ="3" [selected]="item.PropertyValue ==3">北</option>
+                  <option value ="4" [selected]="item.PropertyValue ==4">东南</option>
+                  <option value ="5" [selected]="item.PropertyValue ==5">西南</option>
+                  <option value ="6" [selected]="item.PropertyValue ==6">东北</option>
+                  <option value ="7" [selected]="item.PropertyValue ==7">西北</option>
+                </select>
+              </div>
+              <!-- 布尔值 是1或否0 -->
+              <div *ngIf="item.PropertyType == 6">
+                <p>{{item.PropertyName}}</p>
+                <input  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)" [checked]="item.PropertyValue == 1" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'1')"><span>是</span>
+                <input  [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)" [checked]="item.PropertyValue == 0" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'0')"><span>否</span>
+              </div>
+              <!-- 供给区域 -->
+              <div *ngIf="item.PropertyType == 7" class="selectDiv">
+                <p style="display: inline-block;">{{item.PropertyName}}</p>
+                <select (change)="supplyArea(item,$event)" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+                  <option value ="0" [selected]="item.PropertyValue ==0">全部</option>
+                  <option value ="1" [selected]="item.PropertyValue ==1">高区</option>
+                  <option value ="2" [selected]="item.PropertyValue ==2">中区</option>
+                  <option value ="3" [selected]="item.PropertyValue ==3">低区</option>
+                  <option value ="4" [selected]="item.PropertyValue ==4">高中区</option>
+                  <option value ="5" [selected]="item.PropertyValue ==5">高低区</option>
+                  <option value ="6" [selected]="item.PropertyValue ==6">中低区</option>
+                </select>
+              </div>
+              <!-- 供给类型 -->
+              <div *ngIf="item.PropertyType == 8" class="selectDiv">
+                <p style="display: inline-block;">{{item.PropertyName}}</p>
+                <select (change)="supplyType(item,$event)" value="4" [disabled]="!isEditPattern || (canvasAssetObj.GameMode == 0 && !pattern)">
+                  <option value ="0" [selected]="item.PropertyValue ==0">消火栓</option>
+                  <option value ="1" [selected]="item.PropertyValue ==1">喷淋</option>
+                  <option value ="2" [selected]="item.PropertyValue ==2">水幕</option>
+                  <option value ="3" [selected]="item.PropertyValue ==3">泡沫</option>
+                  <option value ="4" [selected]="item.PropertyValue ==4">消防</option>
+                </select>
+              </div>
+          </div>
+        </div>
+        
+        </div>
+        <!-- 消防要素 -->
+        <div id="firecategories" class="firecategories" style="height: 50%;">
+          <!-- 素材属性div鼠标拖动div -->
+          <div style="height:3px;width: 100%;position: absolute;top: 0;cursor: n-resize;z-index: 1000;" (mousedown)="firecategoriesDivMouseDown($event)"></div>
+          
+          <div class="title">
+            <div>
+              <span style="user-select: none">消防要素</span>
+            </div>
+          </div>
+
+          <div class="firecategoriesTree">
+            <!-- 消防列表树写在这里 -->
+            <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" cdkDropList  [cdkDropListData]="dataSource" (cdkDropListDropped)="drop($event)">
+              
+              <mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}" *matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26' (click)="clickTreeNode(node)" class="treeNode">
+                <button mat-icon-button disabled></button>
+                <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
+                  {{node.name}}      
+                </span> 
+                <span  *ngIf="node.isTemplate">({{node.children.length}})</span>
+                <span class="isLookCss" (click)="clickLookItem(node)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
+              </mat-tree-node>
+            
+            
+              <mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="clickTreeNode(node)"class="treeNode" >
+                <button mat-icon-button 
+                        matTreeNodeToggle
+                        [attr.aria-label]="'toggle ' + node.name">
+                  <mat-icon class="mat-icon-rtl-mirror">
+                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+                  </mat-icon>
+                </button>
+                <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
+                  {{node.name}}      
+                </span>   
+                <span  *ngIf="node.isTemplate && node.isNewElement">({{node.children.length}})</span>
+                <span class="isLookCss" (click)="clickLookItem(node)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
+              </mat-tree-node>
+             
+            </mat-tree>
+          </div>
+        </div>
+      </div>
+
+      <div id="bottomDiv" class="bottomCss" *ngIf="!pattern">
+        <div class="dragDiv" (mousedown)="bottomDivMouseDown($event)"></div>
+        <div class="title">
+          <div (click)="details()" [ngClass]="{'detailsAndattentBtn': detailsAndattentBtn}">
+            节点详情
+          </div>
+          <div (click)="attent()" [ngClass]="{'detailsAndattentBtn': !detailsAndattentBtn}">
+            注意事项
+          </div>
+        </div>
+        <div class="body">
+          <textarea [disabled]="!isEditPattern" *ngIf="detailsAndattentBtn" name="" id="" rows="10" [(ngModel)]="canvasData.selectPanelPointBaseData.description"></textarea>
+          <textarea [disabled]="!isEditPattern" *ngIf="!detailsAndattentBtn" name="" id="" rows="10" [(ngModel)]="canvasData.selectPanelPointBaseData.nodes"></textarea>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/ui/collection-tools/collection-tools.component.scss b/src/app/ui/collection-tools/collection-tools.component.scss
new file mode 100644
index 0000000..19402a6
--- /dev/null
+++ b/src/app/ui/collection-tools/collection-tools.component.scss
@@ -0,0 +1,445 @@
+@import './panel.scss';
+.icongray{
+  color: #D9D0DC;
+}
+.content {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 1px;
+  display: flex;
+  flex-direction: column;
+
+  .buildingbtnchecked{
+    background-color: #34A6FD;
+    color: white;
+  }
+}
+
+//header头部
+.header {
+  position: relative;
+  flex: 5%;
+  display: flex;
+  align-items:center;
+  min-height: 40px;
+  background-color: #fff;
+  .nameShow{
+    cursor: pointer;
+    user-select: none;
+  }
+  .copytobutn{
+    width: 33px;
+    min-width: 33px;
+    display: flex;
+    justify-content: center;
+  }
+  font-size: 18px;
+  mat-icon{
+    font-size: 26px;
+    vertical-align: text-top;
+  }
+  span{
+    height: 24px;
+    line-height: 24px;
+  }
+  .patternSwitch{
+    position: absolute;
+    right: 140px;
+    span{
+      font-size: 18px;
+      cursor: pointer;
+      margin: 0 3px;
+      display: inline-block;
+      border: 1px solid gray;
+      border-radius: 3px;
+      padding: 0 5px;
+    }
+    .selectedPattern{
+      background-color: #2196f3;
+      color: white;
+    }
+  }
+}
+
+//头部操作栏
+.headerOperate {
+  img {
+    width: 24px; 
+    height: 24px;
+    vertical-align: middle;
+    margin-left: 1px;
+  }
+  span{
+    font-size: 18px;
+  }
+  flex: 5%;
+  display: flex;
+  align-items:center;
+  min-height: 40px;
+  box-sizing: border-box;
+  margin: 3px 0;
+  background-color: white;
+  button{
+    border: 0.5px solid rgb(208, 211, 214);
+    margin: 0 2px;
+  }
+  .editdeletebtn{
+    display: none;
+  }
+  .bigeditdeletebtn:hover{
+    .editdeletebtn{
+      display: inline-block;
+    }
+  }
+}
+
+//功能区
+// icon统一样式
+.mat-icon {
+  cursor:pointer;
+  vertical-align: middle;
+}
+//左右两侧功能栏 统一样式
+.publicCss {
+  border-radius: 5px;
+  position: absolute;
+  height: 100%;
+  top: 0;
+}
+.functionalDomain {
+  flex: 90%;
+  overflow: hidden;
+  .functionalDomainContent {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+  .functionalDomainLeft {
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    margin-left: 0px;
+    transition: margin-left 0.5s;
+    min-width: 235px;
+    border: 1px solid #E6EAEE;
+    width: 235px;
+    left: 0;
+    z-index: 111;
+    .leftDragDiv{
+      position: absolute;
+      right: 0;
+      height: 100%;
+      width: 3px;
+      z-index: 1000;
+      cursor: e-resize;
+    }
+  }
+  .functionalDomainRight {
+    z-index: 1001;
+    margin-right: 0px;
+    transition:  margin-right 0.5s;
+    border: 1px solid #464646;
+    width: 235px;
+    right: 0;
+    
+  }
+    //右边导航栏显示隐藏
+  .togglePanel2 {
+    margin-right: -2000px;
+    transition:  margin-right 1s;
+  }
+  //左侧导航栏显示隐藏
+  .togglePanel {
+    margin-left: -2000px;
+    transition: margin-left 1s;
+  }
+
+}
+
+//右边操作栏
+.title{
+  width: 100%;
+  height: 35px;
+  background-color: #464646;
+  div{
+    width: 50%;
+    height: 35px;
+    line-height: 35px;
+    background-color: #595959;
+    border-radius: 5px;
+    span{
+      color: white;
+      font-size: 14px;
+      font-weight: 400;
+      padding-left: 5px;
+    }
+  }
+}
+
+
+//右侧属性
+.property{
+  display: flex;
+  flex-flow: column;
+  .siteproperty{
+    height: 100%;
+    overflow-y: auto;
+    p{
+      color: #9c9fa5;
+      padding-left: 5px;
+    }
+    .siteproperty_size{
+      background-color: #e3e3e3;
+      width: 93%;
+      margin: 0 auto;
+      border-radius: 3px;
+      min-height: 21px;
+    }
+    .rightAttribute{
+      width: 12%;
+      height: 99.5%;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      border: 2px solid #464646;
+    }
+  }
+  .assetsproperty{
+    overflow-y: auto;
+    height: 100%;
+    p{
+      color: #9c9fa5;
+      margin:1px 0 3px 8px;
+      font-size: 14px;
+    }
+    span{
+      font-size: 15px;
+    }
+    input{
+      height: 18px;
+    }
+    .biginput{
+      display: block;
+      width: 88%;
+      margin: 0 auto;
+    }
+    .smallinput{
+      display: block;
+      width: 19%;
+      margin-left: 8px;
+    }
+    .textarea{
+      display: block;
+      width: 88%;
+      height: 50px;
+      margin: 0 auto;
+    }
+    .swiper-button-next{
+      right: 6px;
+    }
+    .swiper-button-prev{
+      left: 6px;
+    }
+    .swiper-container{
+      // --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
+      // --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
+      --swiper-navigation-size:20px;/* 设置按钮大小 */
+    }
+    .hoverred:hover{
+      color: rgb(187, 28, 28);
+    }
+    .selectDiv{
+      height: 21px;
+      position: relative;
+      margin-bottom: 5px;
+      select{
+        width: 98px;
+        height: 22px;
+        vertical-align: middle;
+        position: absolute;
+        right: 10px;
+        top: 1px;
+        border: 1px solid rgb(208, 211, 214);
+        border-radius: 2px;
+      }
+    }
+    .colorBigDiv{
+      width: 88%;
+      margin-left: 8px;
+      .colorBigTemplateDiv{
+        span{
+          color: #9c9fa5;
+          font-size: 14px;
+          height: 26px;
+          line-height: 26px;
+        }
+        .colorTemplateDiv{
+          width: 65%;
+          height: 22px;
+          display: inline-block;
+          vertical-align: middle;
+          margin-left: 26px;
+        }
+      }
+      
+      .colorDiv{
+        .colorLi{
+          width: 24px;
+          height: 24px;
+          list-style: none;
+          float: left;
+          border: 2px solid white;
+        }
+        .coloractive{
+          border: 2px solid black;
+        }
+      }
+    }
+      
+  }
+}
+//右侧消防要素
+.firecategories{
+  position: relative;
+  display: flex;
+  flex-flow: column;
+  .firecategoriesTree{
+    overflow-y: auto;
+    height: 100%;
+    mat-tree-node{
+      position: relative;
+    }
+    .isLookCss{
+      position: absolute;
+      right: 6px;
+    }
+  }
+}
+
+// 解决轮播图蓝框问题
+div:focus {
+  outline: none;
+}
+
+//没有图片时显示无图片背景图
+.noImgCss{
+  background: url(../../../assets/images/noImg.png) no-repeat center center;
+  background-size: 88% 100%;/*按比例缩放*/
+}
+.input{
+  width: 18px;
+  height: 18px;
+  vertical-align: middle;
+  margin-left: 9px;
+  margin-right: 3px;
+}
+
+
+// tree
+.mat-tree-node{
+  min-height: 0;
+  height: 32px;
+  line-height: 32px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.treeNode:hover{
+  background-color: #ccebf8;
+}
+.isLookPattern{
+  display: none;
+}
+.treeText{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline-block;
+  width: 65px;
+}
+
+.bigBox{
+  width: 700px;
+  height: 40px;
+  position: absolute;
+  overflow: hidden;
+  right: 0;
+}
+.weatherBox{
+  height: 40px;
+  width: 700px;
+  line-height: 40px;
+  position: absolute;
+  right: 0;
+  transition: right linear .5s;
+  .openbtn{
+    font-size: 45px;
+    height: 45px;
+    width: 40px;
+  }
+  .name{
+    font-size: 16px;
+    vertical-align: middle;
+    margin-left: 3px;
+  }
+  input{
+    width: 140px;
+    height: 22px;
+    margin-left: 3px;
+  }
+  select{
+    width: 96px;
+    height: 25px;
+    margin-left: 3px;
+    vertical-align: middle;
+  }
+}
+.open{
+  right: 0px;
+}
+.close{
+  right:-622px;
+}
+.bottomCss{
+  position: absolute;
+  left: 232px;
+  right: 0px;
+  bottom: 0;
+  height: 158px;
+  width: auto;
+  z-index: 100;
+  background-color: white;
+  border: 1px solid #464646;
+  .dragDiv{
+    width: 100%;
+    height: 3px;
+    position: absolute;
+    top: 0;
+    z-index: 1000;
+    cursor: n-resize;
+  }
+  .title{
+    height: 35px;
+    background-color: #464646;
+    div{
+      background-color: #464646;
+      float: left;
+      width: 80px;
+      color: white;
+      font-size: 13px;
+      padding-left: 5px;
+      cursor: pointer;
+    }
+    .detailsAndattentBtn{
+      background-color: #595959;
+    }
+  }
+  .body{
+    textarea{
+      width: 100%;
+      border-radius: 0px;
+   }   
+  }
+}
\ No newline at end of file
diff --git a/src/app/ui/collection-tools/collection-tools.component.spec.ts b/src/app/ui/collection-tools/collection-tools.component.spec.ts
new file mode 100644
index 0000000..acc7d5e
--- /dev/null
+++ b/src/app/ui/collection-tools/collection-tools.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CollectionToolsComponent } from './collection-tools.component';
+
+describe('CollectionToolsComponent', () => {
+  let component: CollectionToolsComponent;
+  let fixture: ComponentFixture<CollectionToolsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CollectionToolsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CollectionToolsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/ui/collection-tools/collection-tools.component.ts b/src/app/ui/collection-tools/collection-tools.component.ts
new file mode 100644
index 0000000..2b9a6b4
--- /dev/null
+++ b/src/app/ui/collection-tools/collection-tools.component.ts
@@ -0,0 +1,2348 @@
+import { Component, OnInit, Inject, ViewChild,ElementRef,Renderer2, ViewContainerRef } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+import {leftFunctionalDomainComponent,editPlaneFigureComponent,editDisposalNodeComponent,addDisposalNodeComponent} from './leftFunctionalDomain'
+import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
+import {FlatTreeControl} from '@angular/cdk/tree';
+import {WorkingAreaComponent} from '../../working-area/working-area.component'
+import {CanvasShareDataService, DisposalNodeData} from '../../canvas-share-data.service' //引入服务
+import Viewer from 'viewerjs';
+import Swiper from 'swiper';
+import { saveOneDialog } from './save';
+import { NzFormatBeforeDropEvent, NzFormatEmitEvent,NzTreeComponent } from 'ng-zorro-antd/tree';
+import { Observable, of } from 'rxjs';
+import { delay } from 'rxjs/operators';
+import { windows } from 'src/app/interface';
+import { GameMode } from 'src/app/working-area/model/gameMode';
+import { ActivatedRoute, Router } from '@angular/router';
+
+
+
+@Component({
+  selector: 'app-collection-tools',
+  templateUrl: './collection-tools.component.html',
+  styleUrls: ['./collection-tools.component.scss']
+})
+export class CollectionToolsComponent implements OnInit {
+
+  @ViewChild('canvas',{static: true}) canvas:WorkingAreaComponent; //父组件中获得子组件的引用
+
+  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private element: ElementRef,public canvasData: CanvasShareDataService,private router:Router,private route:ActivatedRoute) { }
+  @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
+  // tree配置
+  private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数
+    return {
+      expandable: !!node.children && node.children.length > 0,
+      name: node.name || node.Name,
+      level: level,
+      id: node.id || node.Id,
+      children:node.children,
+      isTemplate:node.isTemplate,
+      isNewElement:node.isNewElement,
+      isLook:node.isLook,
+      isLookPattern:node.isLookPattern || null
+    };
+  }
+  treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable);
+  
+  treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children);
+  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+  hasChild = (_: number, node: any) => node.expandable;
+
+  colors = ['#076eec','#4dd0e1','#00ee76','#ffff00','#eeb422',
+            '#FF6A6A','#ff0000','#ff6eb4','#00bfff','#54ff9f',
+            '#009688','#836fff','#ff8c00','#ee00ee','#ffa07a',
+            '#00C500','#00ffff','#6495ed','#ffdAb9','#AA00FF']
+  selected = "1" //图标大小选择框
+  
+  allBuildings //该单位所有建筑
+  beforeOneCheckedBuilding:any = {name:"总平面图"}; //当前点击选择的建筑
+  checkedBuildingIndex:number = -1 //当前点击选择的建筑index
+  isEditPat:boolean =  true //当前是否是编辑模式
+
+  assetName:String//素材名称
+  assetWidth:number//素材宽度
+  assetHeight:number//素材高度
+  sliderValue:number = 0//角度滑竿的值
+  sliderValueThickness:number = 0//厚度滑竿的值
+  isHighLight:boolean = false//是否高亮选择框
+  PropertyInfos = [] //去除图片链接真正用于循环的内容
+  imagesArrNum //素材属性图片数量上限
+  imagesArr = [] //属性中的图片链接集合
+  clickedIndex //点击图片时的索引值
+
+  //传入素材对象，设置右侧属性栏内容
+  canvasAssetObj //传入的素材属性对象
+  isImgNumCss = false //控制上传文件input显隐
+  mySwiper:any //轮播图实例
+
+  gallery//viewerJs实例
+  //设置属性框
+  setAssetsProperty(obj){
+    //初始化viewerJs实例
+    setTimeout(() => {
+      obj.PropertyInfos.forEach(item => {
+        if(item.PropertyType == 4){
+          this.gallery = new Viewer(document.getElementById('viewerjs'),{
+            url: 'data-original'
+          });
+        }
+      })
+    }, 0);
+    
+    //从颜色中取出透明度
+    let color = obj.Color
+    let strh = color.substring(color.length -2,color.length)
+    let opacity = Math.round(parseInt(strh,16)/255 * 100) 
+    this.colorDivSliderValue = opacity
+
+    this.isShowProperty = true
+    this.isShowAttribute = false
+    let _this = this
+    this.imagesArr = []
+    this.imagesArrNum = ""
+
+    this.canvasAssetObj = obj //将选中素材对象存到本地变量
+
+    this.assetName = obj.Name
+    this.assetWidth = obj.Width
+    this.assetHeight = obj.Height
+    this.sliderValue = obj.Angle
+    this.selectedcolor = obj.Color
+    this.PropertyInfos = obj.PropertyInfos
+    this.sliderValueThickness = obj.Thickness
+    this.PropertyInfos.forEach(item => {
+      if(item.PropertyType == 3){ //如果是图片链接类型
+        this.imagesArr.push(item)
+      }
+      if(item.PropertyType == 4){//图片数值上线
+        this.imagesArrNum = item.PropertyValue
+      }
+    })
+
+    //如果存在图片则加载轮播图
+    if(this.imagesArr.length){
+      setTimeout(() => {
+        this.mySwiper = new Swiper('.swiper-container',{
+          loop: false,
+          // grabCursor: true,
+          // 如果需要前进后退按钮
+          navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+          },
+          on:{
+            click: function(){
+              _this.clickedIndex = this.clickedIndex
+            },
+          }
+        });
+      }, 0);
+    }
+    //判断此时图片数量是否达到上限
+    if(this.imagesArr.length < this.imagesArrNum){//如果不超出
+      this.isImgNumCss = true
+    }else{
+      this.isImgNumCss = false
+    }
+  }
+  pattern:boolean = true//默认为基本信息编辑
+  
+
+  yyy(){
+    console.log(this.canvasData.selectPanelPoint)
+  }
+  //基本信息编辑模式
+  baseInfo(){
+    if (!this.pattern) {
+      this.basicInfo = true
+      this.canvas.setNameVisible(this.basicInfo,1)
+
+      this.pattern = true
+      this.canvasData.gameMode = GameMode.BasicInformation
+      this.canvasData.selectPanelPoint = new DisposalNodeData();
+      this.mateDeleteCustomize()
+      this.getAllLibrary()
+      this.checkedBuildingIndex = -1
+      this.getSitePlan() //总平面图一层
+    }
+  }
+
+  //想定作业编辑模式
+  wantWork(){
+    if (this.pattern) {
+      //让基本信息图标显示
+      this.basicInfo = false
+      this.canvas.setNameVisible(this.basicInfo,0)
+
+      this.pattern = false
+      this.canvasData.gameMode = GameMode.Assignment
+      this.getAllLibrary('plan')
+      this.getDisposalNode()
+    }
+  }
+
+  //ngzorro tree 拖拽
+  nzEvent(event: NzFormatEmitEvent): void {
+    if(this.isDrag){
+      let parentId 
+      if(this.pos == 0){
+        parentId = event.node.key
+      }else{
+        if(event.node.level == 0){
+          parentId = null
+        }else{
+          parentId = event.node.origin.parentId
+        }
+      }
+     
+
+      let orders = {}
+      let originalData = JSON.parse(JSON.stringify( this.canvasData.allDisposalNode || [] )) //tree原始数据
+      let targetNodeData = []//拖动移入节点的数据，用于遍历求出放在该数组的第几位
+
+      //找到需要重新排序的数组
+      if(this.pos == 0){
+        originalData.forEach(item => {
+          if(item.parentId == event.node.key){
+            targetNodeData.push(item)
+          }
+        })
+      }else{
+        if(event.node.origin.parentId){//如果拖动目标为非一级节点
+          originalData.forEach(item => {
+            if(item.parentId == event.node.origin.parentId){
+              targetNodeData.push(item)
+            }
+          })
+        }else{//如果拖动目标为一级节点
+          originalData.forEach(item => {
+            if(!item.parentId){
+              targetNodeData.push(item)
+            }
+          })
+        }
+      }
+      
+      
+      let idArr = []
+      targetNodeData.forEach(i => {
+        idArr.push(i.id)
+      })
+      console.log(6666666666666,event);
+      if(this.pos == 0 && event.node.origin.children.length == 1){
+        console.log("移入,没有兄弟")
+        let key  = event.dragNode.key
+        orders[key] = 0
+        parentId = event.node.key
+      }else{
+        console.log("移入,多个兄弟")
+        let array = []
+        targetNodeData.forEach(item => {
+          if(item.id != event.dragNode.key){ //将拖动项先移除掉
+            array.push(item)
+          }
+        })
+        if(event.dragNode.isEnd[event.dragNode.isEnd.length - 1]){ //如果移入到最后一个
+          console.log("最后")
+          array.push(event.dragNode.origin)
+        }else if(event.dragNode.isStart[event.dragNode.isStart.length - 1]){//如果移入到第一个   
+          console.log("第一")
+          array.unshift(event.dragNode.origin)
+        }else{//如果移入中间位置
+          console.log("中间")
+          array.splice(event.node.origin.order, 0, event.dragNode.origin)
+        }
+        array.forEach((item,key) => {
+          orders[item.id] = key
+        })
+      }
+      
+      let obj ={
+        id : event.dragNode.origin.id,
+        parentId : parentId,
+        orders : orders
+      }
+      
+      this.http.put("/api/DisposalNodes/Sort",obj).subscribe(data => {
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('排序成功','确定',config)
+        this.refurbishTreeData()
+      })
+    }
+  }
+    
+  isDrag //是否可以拖动
+  pos//放置位置
+  beforeDrop = (arg: NzFormatBeforeDropEvent) => {
+    if(arg.dragNode.origin.isDataNode && arg.node.level === 0){//如果为数据节点则不允许拖到一级节点
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('数据节点不允许拖拽到一级节点','确定',config)
+      this.isDrag = false
+      return of(false);
+    }else if(!arg.dragNode.origin.isDataNode && arg.node.level === 2){
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('处置节点不允许拖拽到三级节点','确定',config)
+      this.isDrag = false
+      return of(false);
+    }else{
+      this.isDrag = true
+      this.pos = arg.pos
+      return of(true)
+    }
+  }
+  //ngzorro tree 拖拽
+
+  //天气栏目
+  weatherBtn = true
+  weatherBtnShow(){
+    this.weatherBtn = !this.weatherBtn
+  }
+  weatherBtnHidden(){
+    this.weatherBtn = !this.weatherBtn
+  }
+
+  //底部切换按钮div
+  detailsAndattentBtn = true
+  //节点详情
+  details(){
+    this.detailsAndattentBtn = true
+  }
+  //注意事项
+  attent(){
+    this.detailsAndattentBtn = false
+  }
+
+  //消防要素div边框高度调节
+  firecategoriesDivMouseDown(e){
+    document.onmousemove = (ev) => {
+      let bodyHeight = document.body.clientHeight //网页宽度
+      let maxHeight = this.element.nativeElement.querySelector('#rightDiv').clientHeight - 35  //最大宽度
+      if(bodyHeight - ev.clientY >= maxHeight){
+        this.element.nativeElement.querySelector('#firecategories').style.height = maxHeight+ 'px' 
+        this.element.nativeElement.querySelector('#property').style.height = 35+ 'px' 
+      }else{
+        this.element.nativeElement.querySelector('#firecategories').style.height = (bodyHeight - ev.clientY) + 'px'  ;
+        this.element.nativeElement.querySelector('#property').style.height = (this.element.nativeElement.querySelector('#rightDiv').clientHeight - this.element.nativeElement.querySelector('#firecategories').clientHeight) + 'px' 
+      }
+    }
+    document.onmouseup = () => {
+      document.onmousemove = null;
+      document.onmouseup = null;
+    }
+  }
+
+  //左侧div边框宽度调节
+  leftDivMouseDown(e){
+    document.onmousemove = (ev) => {
+      let bodyWidth = document.body.clientWidth //网页宽度
+      let maxWidth = bodyWidth - 260 - this.element.nativeElement.querySelector('#rightDiv').clientWidth  //最大宽度
+      if(ev.clientX - 240 >= maxWidth){
+        this.element.nativeElement.querySelector('#leftDiv').style.width = maxWidth + 'px'
+      }else{
+        this.element.nativeElement.querySelector('#leftDiv').style.width = ev.clientX - 260 + 'px';
+      }
+    }
+    document.onmouseup = () => {
+      document.onmousemove = null;
+      document.onmouseup = null;
+    }
+  }
+
+  //底部div高度调节
+  bottomDivMouseDown(e){
+    document.onmousemove = (ev) => {
+      let bodyHeight = document.body.clientHeight //网页高度
+      let maxHeight = this.element.nativeElement.querySelector('#rightDiv').clientHeight  //最大高度
+      if(bodyHeight - ev.clientY >= maxHeight){
+        this.element.nativeElement.querySelector('#bottomDiv').style.height = maxHeight + 'px' 
+      }else{
+        this.element.nativeElement.querySelector('#bottomDiv').style.height = (bodyHeight - ev.clientY) + 'px'  ;
+      }
+    }
+    document.onmouseup = () => {
+      document.onmousemove = null;
+      document.onmouseup = null;
+    }
+  }
+
+  //右侧div边框宽度调节
+  rightDivMouseDown(e){
+    document.onmousemove = (ev) => {
+      let bodyWidth = document.body.clientWidth //网页宽度
+      let maxWidth = bodyWidth - 240 - this.element.nativeElement.querySelector('#leftDiv').clientWidth  //最大宽度
+      if(bodyWidth - ev.clientX >= maxWidth){
+        this.element.nativeElement.querySelector('#rightDiv').style.width = maxWidth + 'px'
+      }else{
+        this.element.nativeElement.querySelector('#rightDiv').style.width = bodyWidth - ev.clientX + 'px';
+      }
+    }
+    document.onmouseup = () => {
+      document.onmousemove = null;
+      document.onmouseup = null;
+    }
+  }
+
+  //放大图标
+  iconScale(){
+    let number = Number(this.selected)
+    this.canvas.setIconScale(number)
+  }
+
+  //素材宽度输入框改变
+  assetWidthIunput(){
+    this.canvasAssetObj.Width = this.assetWidth
+    this.canvasData.isChange = true
+    this.canvas.refreshIcon(this.canvasAssetObj.Id)
+  }
+
+  //素材高度输入框改变
+  assetHeightIunput(){
+    this.canvasAssetObj.Height = this.assetHeight
+    this.canvasData.isChange = true
+    this.canvas.refreshIcon(this.canvasAssetObj.Id)
+  }
+
+  //素材角度输入框改变
+  assetAngleIunput(){
+    this.canvasAssetObj.Angle = this.sliderValue
+    this.canvasData.isChange = true
+    this.canvas.refreshIcon(this.canvasAssetObj.Id)
+  }
+
+  //素材厚度输入框改变
+  assetThicknessIunput(){
+    this.canvasAssetObj.Thickness = this.sliderValueThickness
+    this.canvasData.isChange = true
+    this.canvas.refreshIcon(this.canvasAssetObj.Id)
+  }
+
+  //素材是否高亮改变----->本地操作行为
+  assetHighLightIunput(){
+
+  }
+
+  //动态属性素材input框值改变
+  assetInputChange(i,e){
+    let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
+      return i.PropertyName == item.PropertyName
+    })
+    this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value
+    this.canvasData.isChange = true
+    this.canvas.refreshIcon(this.canvasAssetObj.Id)
+  }
+
+  //动态属性素材布尔值框改变radio
+  assetRadioChange(i,boolean){
+    let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
+      return i.PropertyName == item.PropertyName
+    })
+    this.canvasAssetObj.PropertyInfos[index].PropertyValue = boolean
+    this.canvasData.isChange = true
+  }
+
+  colorIndex//默认素材颜色
+  selectedcolor//点击选择的颜色
+  //选择素材颜色
+  selectcolor(item,key){
+    //在当前透明度基础上改变颜色
+    this.selectedcolor = item + this.selectedcolor.substring(this.selectedcolor.length-2)
+    this.canvasAssetObj.Color = this.selectedcolor
+    this.canvasData.isChange = true
+    this.canvas.refreshIcon(this.canvasAssetObj.Id)
+  }
+  //颜色选择滑竿的值
+  colorDivSliderValue
+  colorDivSliderChange(){
+    let colorOpacity =  Math.round(255 * this.colorDivSliderValue * 0.01) 
+    //根据滑竿值改变16进制颜色后两位
+    function replacepos(text,start,stop,replacetext){
+   	 let mystr = text.substring(0,stop-1)+replacetext+text.substring(stop+1);
+   	 return mystr;
+    }
+    this.selectedcolor = replacepos(this.selectedcolor,7,8,colorOpacity.toString(16))
+    this.canvasAssetObj.Color = this.selectedcolor
+    this.canvasData.isChange = true
+    this.canvas.refreshIcon(this.canvasAssetObj.Id)
+  }
+
+  //查看图片详情
+  lookImg(){
+    const dialogRef = this.dialog.open(ViewDetailss, {//调用open方法打开对话框并且携带参数过去
+      data: {imagesArr:this.imagesArr,index:this.clickedIndex}
+    });
+    dialogRef.afterClosed().subscribe(data=>{ }); 
+  }
+
+  //上传素材图片
+  selectFile(e){
+    let imgFile = e.target.files[0] || null //上传的文件
+    this.startUploading(imgFile)
+  }
+  objectName:any //上传对象名
+  startUploading (imgFile) {
+    let _this = this
+    let file = imgFile || null //获取上传的文件
+    let fileSize = file.size || null //上传文件的总大小
+    let shardSize = 5 * 1024 * 1024 //5MB一个分片
+    let companyId = sessionStorage.getItem("companyId")
+    if (file && fileSize <= shardSize) { //上传文件<=5MB时
+      let formData = new FormData()
+      formData.append("file",file)
+      this.http.post(`api/Objects/WebPlan2D/${companyId}`,formData).subscribe((data:any)=>{
+        this.objectName = data.objectName
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('上传成功','确定',config)
+
+        //在原始素材对象和需要循环图片的对象中分别push最新上传的图片
+        let imgObj = {
+          "Tag": null,
+          "Order": 0,
+          "Enabled": false,
+          "Visible": false,
+          "Required": false,
+          "RuleName": null,
+          "RuleValue": null,
+          "PhysicalUnit": null,
+          "PropertyName": "图片",
+          "PropertyType": 3,
+          "PropertyValue": "/api/Objects/WebPlan2D/" + this.objectName
+        }
+        
+        this.imagesArr.push(imgObj)
+        this.canvasAssetObj.PropertyInfos.push(imgObj)
+
+        setTimeout(() => {
+          this.mySwiper = new Swiper('.swiper-container',{
+            loop: false,
+            // grabCursor: true,
+            // 如果需要前进后退按钮
+            navigation: {
+              nextEl: '.swiper-button-next',
+              prevEl: '.swiper-button-prev',
+            },
+            on:{
+              click: function(){
+                _this.clickedIndex = this.clickedIndex
+              },
+            }
+          });
+
+          this.mySwiper.slideTo(this.imagesArr.length - 1)
+          this.gallery.update()
+        }, 0);
+        
+        //判断上传素材属性图片是否超出数量  超出数量则隐藏input框
+        if(this.imagesArr.length < this.imagesArrNum){//不超出input才会显示
+          this.isImgNumCss = true
+        }else{
+          this.isImgNumCss = false
+        }
+        
+        this.canvasData.isChange = true
+      })
+    } else if (file && fileSize>shardSize) { //上传文件>5MB时,分块上传
+      let config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('上传图片文件不允许大于5mb','确定',config);
+    }
+
+  }
+
+  //不能上传图片提示
+  imgNumBeyond(){
+    const config = new MatSnackBarConfig();
+    config.verticalPosition = 'top';
+    config.duration = 3000
+    this.snackBar.open('图片数量已达上限','确定',config);
+  }
+
+  //删除素材属性图片
+  deleteImg(){
+    if(this.imagesArr.length == 0){
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('没有可删除的图片，请先上传','确定',config)
+    }else{
+      // 在素材原始对象中将删除的图片去掉
+      this.canvasAssetObj.PropertyInfos = [...this.canvasAssetObj.PropertyInfos.filter((item)=>{
+        return  item.PropertyValue != this.imagesArr[this.mySwiper.activeIndex].PropertyValue
+      })]
+      //在图片循环数组中将图片去掉
+      this.imagesArr.splice(this.mySwiper.activeIndex, 1);
+      //更新swiper视图
+      setTimeout(() => {
+        this.mySwiper.update();
+        this.gallery.update()
+      }, 0);
+
+      //将上传的input框显示出来
+      this.isImgNumCss = true;
+      //清除图片缓存
+      if((<HTMLInputElement>document.getElementById('inputimg'))){
+        (<HTMLInputElement>document.getElementById('inputimg')).value = null //清空input框缓存
+      }
+
+      this.canvasData.isChange = true
+    }
+  }
+
+  //动态属性方向select选择框
+  direction(i,e){
+    let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
+      return i.PropertyName == item.PropertyName
+    })
+    this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value
+    this.canvasData.isChange = true
+  }
+
+  //动态属性供给区域select选择框
+  supplyArea(i,e){
+    let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
+      return i.PropertyName == item.PropertyName
+    })
+    this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value
+    this.canvasData.isChange = true
+  }
+
+  //动态属性供给类型select选择框
+  supplyType(i,e){
+    let index = this.canvasAssetObj.PropertyInfos.findIndex((item)=>{
+      return i.PropertyName == item.PropertyName
+    })
+    this.canvasAssetObj.PropertyInfos[index].PropertyValue = e.target.value
+    this.canvasData.isChange = true
+  }
+
+  isSixShow = true  
+  isSixbtn = true //控制想定作业编辑按钮
+  isxxx = true //控制查看编辑模式的编辑模式按钮
+
+  ngOnInit(): void {
+    sessionStorage.setItem('companyId','5fa2512ef8eb762cb03c65fb')
+    sessionStorage.setItem('planId','5fa8b0b8f8eb762cb03c6c30')
+    sessionStorage.setItem('buildingTypeId','5e7c9018a3050b1a840ed4b7')
+
+    this.getAllLibrary() //获取素材库
+    this.getAllBuildings() //获取所有建筑
+    this.getAllFirePlan() //获取当前单位灾情
+
+    let that = this
+    window.setTimeout(()=>{
+      document.getElementById("functionalDomainContent").oncontextmenu = function (event) {
+        // that.canvas.cancelPaint()
+        that.selectImageIndex = -1
+        event.preventDefault();
+      };
+    })
+
+    this.canvasData.getMessage().subscribe((message: any)=>{
+      if(message == "send a message"){
+        this.refurbishTreeData()
+      }
+    })
+
+  }
+
+
+
+  ngAfterViewInit(): void {
+
+    this.getSitePlan()
+    // 监听canvas组件选中素材事件
+    this.canvas.on("select",obj=>{
+      //选中素材属性注入函数
+      this.setAssetsProperty(obj.assetData)
+    })
+    // 监听canvas组件取消选中素材事件
+    this.canvas.on("deselect",obj=>{
+      this.isShowProperty = false
+    })
+    // 监听canvas组件新增素材事件
+    this.canvas.on("createIcon",obj=>{
+      this.renovateTreeData(false)
+    })
+    // 监听canvas组件删除素材事件
+    this.canvas.on("deleteIcon",obj=>{
+      this.renovateTreeData(false)
+    })
+
+  }
+
+  copyAssetData:any //存储用于复制的素材
+  //复制素材
+  copyAsset(){
+    this.canvas.copy()
+  }
+  //粘贴素材
+  pasteAsset(){
+    let companyId = sessionStorage.getItem("companyId")
+    let buildingId = this.beforeOneCheckedBuilding.id
+    let floorId = this.selectingSitePlan.id
+    this.canvas.paste(companyId,buildingId,floorId)
+  }
+
+  basicInfo:boolean = true //基本信息名称显隐
+  wantToWork:boolean = true //想定作业名称显隐
+  //点击基本信息名称
+  basicInfoClick(){
+    this.basicInfo = !this.basicInfo
+    this.canvas.setNameVisible(this.basicInfo,0)
+  }
+
+  //点击想定作业名称
+  wantToWorkClick(){
+    this.wantToWork = !this.wantToWork
+    this.canvas.setNameVisible(this.wantToWork,1)
+  }
+
+  isEditPattern:boolean = true //是否为编辑模式
+  //进入编辑模式
+  editpat(){
+    let config = new MatSnackBarConfig();
+    config.verticalPosition = 'top';
+    config.duration = 3000
+    this.snackBar.open('进入编辑模式','确定',config);
+    this.isEditPattern = true
+  }
+
+  //进入查看模式
+  lookpat(){
+    let config = new MatSnackBarConfig();
+    config.verticalPosition = 'top';
+    config.duration = 3000
+    this.snackBar.open('进入查看模式','确定',config);
+    this.isEditPattern = false
+  }
+
+  //保存平面图
+  saveNum :any = []
+  saveSite(){
+    if (this.selectingSitePlan && this.selectingSitePlan.id) {
+      this.saveNum = []
+      let SitePlanData = JSON.parse(JSON.stringify(this.canvasData.originaleveryStoreyData));
+      SitePlanData.data = JSON.stringify(SitePlanData.data)
+      let CompanyData = JSON.parse(JSON.stringify(this.canvasData.originalcompanyBuildingData));
+      CompanyData.data = JSON.stringify(CompanyData.data)
+  
+      let object = this.canvasData.originalcompanyBuildingData.data
+      let adjoinArr = [] //毗邻数组
+  
+      if(this.pattern){//如果是基本信息编辑模式
+        for (const key in object) {
+          if (object[key].Name == "毗邻") {//如果是相同楼层，则筛选出毗邻
+            
+            object[key].PropertyInfos.forEach(element => {
+              if(element.PropertyName == "方向"){
+                adjoinArr.push(element.PropertyValue)
+              }
+            });
+          }
+        }
+        
+        if((new Set(adjoinArr)).size != adjoinArr.length){
+          let config = new MatSnackBarConfig();
+          config.verticalPosition = 'top';
+          config.duration = 3000
+          this.snackBar.open('保存失败，毗邻存在相同方向','确定',config);
+          return false
+        }else{
+          //如果是单位 总平面图
+          if(this.checkedBuildingIndex==-1){
+            //保存平面图数据
+            this.http.post("/api/SitePlanData",SitePlanData,{
+              params:{
+                companyId:this.params.companyId
+              }
+            }).subscribe(data => {
+              this.saveNum.push("1")
+              if(this.saveNum.length == 5){
+                this.canvasData.isChange = false
+                let config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存成功','确定',config);
+              }
+            },err=>{
+              let config = new MatSnackBarConfig();
+              config.verticalPosition = 'top';
+              config.duration = 3000
+              this.canvasData.isChange = true
+              this.snackBar.open('平面图数据保存失败','确定',config);
+            })
+    
+            //保存建筑数据
+            this.http.post("/api/CompanyData",CompanyData,{
+              params:{
+                companyId:this.params.companyId
+              }
+            }).subscribe(data => {
+              this.saveNum.push("1")
+              if(this.saveNum.length == 5){
+                this.canvasData.isChange = false
+                let config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存成功','确定',config);
+              }
+            },err=>{
+              let config = new MatSnackBarConfig();
+              config.verticalPosition = 'top';
+              config.duration = 3000
+              this.canvasData.isChange = true
+              this.snackBar.open('单位数据保存失败','确定',config);
+            })
+    
+            //批量保存单位毗邻
+            let CompanyAdjoins = this.canvasData.getCompanyAdjoinInfo()
+            this.http.post("/api/CompanyAdjoins/Batch",CompanyAdjoins,{
+              params:{
+                companyId:this.params.companyId
+              }
+            }).subscribe(data => {
+              this.saveNum.push("1")
+              if(this.saveNum.length == 5){
+                this.canvasData.isChange = false
+                let config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存成功','确定',config);
+              }
+            },err=>{
+              let config = new MatSnackBarConfig();
+              config.verticalPosition = 'top';
+              config.duration = 3000
+              this.canvasData.isChange = true
+              this.snackBar.open('单位毗邻保存失败','确定',config);
+            })
+    
+            //批量保存单位重点部位
+            let CompanyImportantLocations = this.canvasData.getCompanyImportantLocations()
+            this.http.post("/api/CompanyImportantLocations/Batch",CompanyImportantLocations,{
+              params:{
+                companyId:this.params.companyId
+              }
+            }).subscribe(data => {
+              this.saveNum.push("1")
+              if(this.saveNum.length == 5){
+                this.canvasData.isChange = false
+                let config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存成功','确定',config);
+              }
+            },err=>{
+              let config = new MatSnackBarConfig();
+              config.verticalPosition = 'top';
+              config.duration = 3000
+              this.canvasData.isChange = true
+              this.snackBar.open('单位重点部位保存失败','确定',config);
+            })
+    
+            //批量保存单位消防设施素材
+            let CompanyFacilityAssets = this.canvasData.getAllCompanyFacilityAssetInfo()
+            this.http.post("/api/CompanyFacilityAssets/Batch",CompanyFacilityAssets,{
+              params:{
+                companyId:this.params.companyId
+              }
+            }).subscribe(data => {
+              this.saveNum.push("1")
+              if(this.saveNum.length == 5){
+                this.canvasData.isChange = false
+                let config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存成功','确定',config);
+              }
+            },err=>{
+              let config = new MatSnackBarConfig();
+              config.verticalPosition = 'top';
+              config.duration = 3000
+              this.canvasData.isChange = true
+              this.snackBar.open('单位消防设施素材保存失败','确定',config);
+            })
+    
+          }else{ //如果是建筑
+    
+            //建筑平面图数据
+            this.http.post("/api/BuildingAreaData",SitePlanData,{
+              params:{
+                companyId:this.params.companyId
+              }
+            }).subscribe(data => {
+              this.saveNum.push("1")
+              if(this.saveNum.length == 5){
+                this.canvasData.isChange = false
+                let config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存成功','确定',config);
+              }
+            },err=>{
+              let config = new MatSnackBarConfig();
+              config.verticalPosition = 'top';
+              config.duration = 3000
+              this.canvasData.isChange = true
+              this.snackBar.open('平面图数据保存失败','确定',config);
+            })
+    
+            //建筑数据
+            this.http.post("/api/BuildingData",CompanyData,{
+              params:{
+                companyId:this.params.companyId
+              }
+            }).subscribe(data => {
+              this.saveNum.push("1")
+              if(this.saveNum.length == 5){
+                this.canvasData.isChange = false
+                let config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存成功','确定',config);
+              }
+            },err=>{
+              let config = new MatSnackBarConfig();
+              config.verticalPosition = 'top';
+              config.duration = 3000
+              this.canvasData.isChange = true
+              this.snackBar.open('单位数据保存失败','确定',config);
+            })
+    
+            //批量保存建筑毗邻
+            let buildingAdjoins = this.canvasData.getBuildingAdjoinInfo()
+            this.http.post(`/api/BuildingAdjoins/Batch?companyId=${this.params.companyId}&buildingId=${this.canvasData.selectStorey.buildingId}`,buildingAdjoins).subscribe(data => {
+              this.saveNum.push("1")
+              if(this.saveNum.length == 5){
+                this.canvasData.isChange = false
+                let config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存成功','确定',config);
+              }
+            },err=>{
+              let config = new MatSnackBarConfig();
+              config.verticalPosition = 'top';
+              config.duration = 3000
+              this.canvasData.isChange = true
+              this.snackBar.open('建筑毗邻保存失败','确定',config);
+            })
+    
+            //批量保存建筑重点部位
+            let buildingImportantLocations = this.canvasData.getBuildingImportantLocations()
+            this.http.post(`/api/BuildingImportantLocations/Batch?companyId=${this.params.companyId}&buildingId=${this.canvasData.selectStorey.buildingId}`,buildingImportantLocations).subscribe(data => {
+              this.saveNum.push("1")
+              if(this.saveNum.length == 5){
+                this.canvasData.isChange = false
+                let config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存成功','确定',config);
+              }
+            },err=>{
+              let config = new MatSnackBarConfig();
+              config.verticalPosition = 'top';
+              config.duration = 3000
+              this.canvasData.isChange = true
+              this.snackBar.open('建筑重点部位保存失败','确定',config);
+            })
+    
+            //批量保存建筑消防设施素材
+            let buildingFacilityAssets = this.canvasData.getAllBuildingFacilityAssetInfo()
+            this.http.post(`/api/BuildingFacilityAssets/Batch?companyId=${this.params.companyId}&buildingId=${this.canvasData.selectStorey.buildingId}`,buildingFacilityAssets).subscribe(data => {
+              this.saveNum.push("1")
+              if(this.saveNum.length == 5){
+                this.canvasData.isChange = false
+                let config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存成功','确定',config);
+              }
+            },err=>{
+              let config = new MatSnackBarConfig();
+              config.verticalPosition = 'top';
+              config.duration = 3000
+              this.canvasData.isChange = true
+              this.snackBar.open('建筑消防设施素材保存失败','确定',config);
+            })
+    
+          }
+        }
+      }else{//如果是想定作业编辑模式
+        const dialogRef = this.dialog.open(saveOneDialog, {
+          data: {allDisposalNode: this.canvasData.allDisposalNode,
+                selectedBuildingData:this.beforeOneCheckedBuilding,
+                selectedSiteData:this.selectingSitePlan,
+                siteOrbuilding:this.checkedBuildingIndex,
+                disasterId: this.allFirePlan[0].id || ''
+                }
+        });
+    
+        dialogRef.afterClosed().subscribe(result => {
+          console.log('The dialog was closed');
+        });
+      }
+
+    } else { //if
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('暂无楼层数据','确定',config);
+    }
+  }
+
+  //获得所有的建筑物
+  getAllBuildings(){
+    this.http.get("/api/Buildings",{
+      params:{
+        companyId : this.params.companyId
+      }
+    }).subscribe(data=>{
+      this.allBuildings = data
+    })
+  }
+
+  //拖拽tree
+  drop(e){
+    console.log(1111,e)
+  }
+  drop2(e){
+    console.log(222,e)
+  }
+
+  //创建建筑
+  createBuilding(){
+    let data = {
+      allBuildings:this.allBuildings,
+      companyId :this.params.companyId
+    }
+    let dialogRef = this.dialog.open(CreateBuilding,{data});
+    dialogRef.afterClosed().subscribe(data=>{
+      if (data == "创建成功") {
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('创建成功','确定',config);
+        this.getAllBuildings()
+      }else if (data == "创建失败") {
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('创建失败','确定',config);
+      }
+    });  
+  }
+
+  //选择建筑
+  checkedBuilding(item,index){
+    if (this.checkedBuildingIndex!=index) {
+
+      if (this.canvasData.isChange) { //true 数据被改动
+        let isTrue = confirm('是否保存当前编辑数据')
+        if (isTrue) { //先保存数据 在切换
+          let isSuccess = this.saveSite()//true的时候 先保存数据
+          if (isSuccess != false) {
+            this.beforeOneCheckedBuilding = item
+            this.checkedBuildingIndex = index
+            if (index==-1) { //总平面图数据
+              this.getSitePlan()
+            } else { //建筑楼层/区域数据
+              this.getBuildingSitePlan(item)
+            }
+          }
+        } else {
+          this.beforeOneCheckedBuilding = item
+          this.checkedBuildingIndex = index
+          if (index==-1) { //总平面图数据
+            this.getSitePlan()
+          } else { //建筑楼层/区域数据
+            this.getBuildingSitePlan(item)
+          }
+        }
+      } else { //flase 数据未被改动
+        this.beforeOneCheckedBuilding = item
+        this.checkedBuildingIndex = index
+        if (index==-1) { //总平面图数据
+          this.getSitePlan()
+        } else { //建筑楼层/区域数据
+          this.getBuildingSitePlan(item)
+        }
+      } //if
+
+    } //if
+  }
+
+  //编辑建筑
+  editBuilding(e,item){
+    e.stopPropagation();
+    let dialogRef = this.dialog.open(EditBuilding,{data: {item:item}});
+    dialogRef.afterClosed().subscribe(data=>{
+      if (data == "修改成功") {
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('修改成功','确定',config);
+        this.getAllBuildings()
+      }else if (data == "修改失败") {
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('修改失败','确定',config);
+      }
+    });  
+  }
+
+  //删除建筑
+  deleteBuilding(e,item){
+    e.stopPropagation();
+    if(confirm("是否删除该建筑") == true){
+      let isHave = this.canvasData.allDisposalNode.find(items=>{ return items.buildingId === item.id })
+      if (isHave == undefined) {
+        this.http.delete(`/api/Buildings/${item.id}`).subscribe(data=>{
+          const config = new MatSnackBarConfig();
+          config.verticalPosition = 'top';
+          config.duration = 3000
+          this.snackBar.open('删除成功','确定',config);
+          this.http.get("/api/Buildings",{
+            params:{
+              companyId :this.params.companyId
+            }
+          }).subscribe(data=>{
+            this.allBuildings = data
+            this.beforeOneCheckedBuilding = {name:"总平面图"}
+            this.checkedBuildingIndex = -1
+            this.getSitePlan()
+          })
+        },err=>{
+          const config = new MatSnackBarConfig();
+          config.verticalPosition = 'top';
+          config.duration = 3000
+          this.snackBar.open('删除失败','确定',config);
+          this.getAllBuildings()
+        })
+      } else { //建筑 含有数据节点时
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('含有数据节点的建筑不允许删除','确定',config);
+      }
+    }
+  }
+
+  storeyData //将建筑素材和当前楼层素材合二为一
+
+  //处理 tree 数据结构
+  handleTreeData (storeyData) {
+
+    this.storeyData = storeyData
+    let data = this.allFireElements //所有消防要素模板
+    let treeData = [] //tree型 处理完成后的数据
+    data.forEach(element => {
+      element.isTemplate = true //添加模板标识
+      element.isLook = true //添加是否可见标识
+      element.name!='其他'? element.children = [] : null
+
+      if(storeyData){
+        for(let key in storeyData.data){
+          storeyData.data[key].isLookPattern = true
+          if(element.id == storeyData.data[key].FireElementId){
+            storeyData.data[key].isTemplate = false
+            storeyData.data[key].isLook = true
+            
+            element.isNewElement = true //该节点children是否存在新添加的真实素材 标识
+
+            //定义查看模式下能看到的元素
+            element.isLookPattern = true
+            if(element.parentId){
+              data.forEach(i => {
+                if(i.id == element.parentId){
+                  i.isLookPattern = true
+                }
+              })
+            }
+            //
+
+            element.children.push(storeyData.data[key])
+          }
+        }
+      }
+      data.forEach(item => { if (item.parentId == element.id) {element.children.push(item)} });
+    });
+    data.forEach(element => {
+      if (!element.parentId) { treeData.push(element) }
+    });
+    this.dataSource.data = treeData
+    this.treeControl.expandAll()
+    
+  }
+
+  //点击树节点
+  clickTreeNode(node){
+    if(this.canvasData.originalcompanyBuildingData.data[node.id]){
+      this.setAssetsProperty(this.canvasData.originalcompanyBuildingData.data[node.id])
+    }else if(this.canvasData.originaleveryStoreyData.data[node.id]){
+      this.setAssetsProperty(this.canvasData.originaleveryStoreyData.data[node.id])
+    }
+
+    //canvas上的素材高亮
+    let iconHighLightArr:any = []
+    if(node.isTemplate){//如果是模板,则开始向下找
+      node.children.forEach(item => {
+        if(item.isTemplate){//如果子节点依旧是模板,则继续开始向下找
+          item.children.forEach(i => {
+            iconHighLightArr.push(i.Id)
+          })
+        }else{
+          iconHighLightArr.push(item.Id)
+        }
+      })
+    }else{
+      iconHighLightArr.push(node.id)
+    }
+    this.canvas.setHighlight(iconHighLightArr)
+  }
+
+  //点击数节点的显示隐藏icon
+  clickLookItem(node){
+
+    //修改真实素材islook属性
+    for(let key in this.storeyData.data){
+      if(key == node.id){
+        this.storeyData.data[key].isLook = !this.storeyData.data[key].isLook
+      }
+    }
+    
+    //所有消防要素模板变化islook值
+    if(node.isTemplate){
+      this.allFireElements.forEach(item=>{
+        if(item.id == node.id || item.name == "其他"){
+          item.isLook = !item.isLook
+        }
+      })
+    }
+    
+
+    //子节点跟随父节点的islook变化
+    if(node.children && node.children.length != 0){
+      node.children.forEach(item=>{
+        item.isLook = !node.isLook 
+        if(item.children && item.children.length != 0){
+          item.children.forEach(i=>{
+            i.isLook =  !node.isLook 
+          })
+        }
+      })
+     }
+
+
+    const nodes = this.treeControl.dataNodes;
+    const expandNodes = [];
+    nodes.forEach((item) => {
+      if(item.expandable && this.treeControl.isExpanded(item)){
+        expandNodes.push(item.id);
+      }
+    });
+    
+    this.dataSource.data = [...this.dataSource.data]
+    
+    let newNodes = this.treeControl.dataNodes;
+    newNodes = newNodes.filter(n => {
+      return expandNodes.indexOf(n.id) >= 0;
+    });
+    newNodes.forEach(item => {
+      this.treeControl.expand(item);
+    });
+
+    //canvas上的素材显隐
+    let iconVisibleArr:any = []
+    if(node.isTemplate){//如果是模板,则开始向下找
+      node.children.forEach(item => {
+        if(item.isTemplate){//如果子节点依旧是模板,则继续开始向下找
+          item.children.forEach(i => {
+            iconVisibleArr.push(i.Id)
+          })
+        }else{
+          iconVisibleArr.push(item.Id)
+        }
+      })
+    }else{
+      iconVisibleArr.push(node.id)
+    }
+    this.canvas.setIconVisible(iconVisibleArr,!node.isLook)
+  }
+
+  //计算 可视区域内宽度, 是否缩放背景图
+  backGroundScale () {
+    // let that = this
+    // let dad = this.element.nativeElement.querySelector('.functionalDomainContent').clientWidth
+    // let dadHeight = this.element.nativeElement.querySelector('.functionalDomainContent').clientHeight
+    // let left = this.element.nativeElement.querySelector('.functionalDomainLeft').clientWidth
+    // let right = this.element.nativeElement.querySelector('.functionalDomainRight').clientWidth
+    // let imgWidth = dad - left - right//可视区域内 宽度
+    // let img = new Image()
+    // img.src = this.selectingSitePlan.imageUrl;
+    // img.onload = function(){
+    //   if (img.height > dadHeight && img.width > imgWidth) {
+    //     let width = imgWidth/img.width
+    //     let height = dadHeight/img.height
+    //     that.canvas.setBackgroundScale((width>height? height : width)-0.005)
+    //     return
+    //   } else if (img.height > dadHeight) {
+    //     that.canvas.setBackgroundScale((dadHeight/img.height)-0.005)
+    //     return
+    //   } else if (img.width > imgWidth) {
+    //     that.canvas.setBackgroundScale((imgWidth/img.width)-0.005)
+    //     return
+    //   }
+    // };
+  }
+
+  //封装 刷新 tree 数据
+ async renovateTreeData (isRefresh:boolean = true) {
+    this.allFireElements[this.allFireElements.length-1].children = []
+    isRefresh? await this.canvas.refresh() : null
+    this.canvas.setNameVisible(this.basicInfo,0)
+    this.canvas.setNameVisible(this.wantToWork,1)
+    isRefresh? this.canvasData.isChange = false : null //服务中 数据是否改动 改为false
+    isRefresh? this.isShowProperty = true : null
+    isRefresh? this.isShowAttribute = true : null
+    !this.pattern? this.mateFireForce() : null //刷新 建筑楼层 火源/力量图标
+
+    let beforeOneId = this.selectingSitePlan.id || '' //当前 选中 平面图 楼层/区域 id
+    let companyBuildingData = JSON.parse(JSON.stringify( this.canvasData.originalcompanyBuildingData || {} )) // 当前 单位/建筑 数据 
+    let storeyData = JSON.parse(JSON.stringify( this.canvasData.originaleveryStoreyData || {} )) //当前 楼层 数据
+
+    for(let key in companyBuildingData.data){
+      if (companyBuildingData.data[key].FloorId === beforeOneId) { //处理 单位/建筑 数据是否归于当前楼层下
+        storeyData.data[key] = companyBuildingData.data[key]
+      }
+    }
+    for(let key in storeyData.data){ //筛选数据 没有匹配全部放入到   其他   数组
+      let noMatch = this.allFireElements.find( every=> every.id===storeyData.data[key].FireElementId )
+      if (!noMatch) {
+        this.allFireElements[this.allFireElements.length-1].children.push(storeyData.data[key])
+      }
+    }
+    this.handleTreeData(storeyData) //处理tree数据结构
+  }
+
+
+
+  //陈鹏飞↓↓↓
+  //陈鹏飞↓↓↓
+  //陈鹏飞↓↓↓
+  params = {companyId: sessionStorage.getItem('companyId')}
+  allFireElements:any = []; //当前 单位/建筑 下的消防要素
+
+  isShowAttribute:boolean = true; //属性栏 是否显示 默认数据
+  isShowProperty:boolean = false //属性栏 是否有东西
+
+  toggleExpandPanel:boolean = false; //左侧可展开面板展开或关闭
+  toggleExpandPanelRight:boolean = false; //右侧可展开面板展开或关闭
+  togglePlane:boolean = true; //可展开面板平面图 显隐
+  toggleMaterialBank:boolean = false; //可展开面板素材库 显隐
+  toggleHandlePlans:boolean = true; //可展开面板处置预案 显隐
+  //可展开面板展开或关闭
+  toggle () {
+    this.toggleExpandPanel = !this.toggleExpandPanel
+  }
+  //可展开面板展开或关闭
+  toggle2 () {
+    this.toggleExpandPanelRight = !this.toggleExpandPanelRight
+  }
+  //可展开面板 平面图 展开或关闭
+  togglePlanarGraph () {
+    this.togglePlane = !this.togglePlane
+  }
+  //可展开面板 素材库 展开或关闭
+  toggleMaterial () {
+    this.toggleMaterialBank = !this.toggleMaterialBank
+  }
+  //可展开面板 处置预案 展开或关闭
+  toggleHandlePlan () {
+    this.toggleHandlePlans = !this.toggleHandlePlans
+  }
+
+  sitePlanData:any = []; //总平面图 楼层/区域 数据
+  selectingSitePlan:any; //选中的 平面图 楼层/区域
+  selectSitePlanIndex:number; //选中的 平面图 楼层/区域 index
+
+  //获取总平面图
+  getSitePlan () {
+    let fireData = this.getFireElements(sessionStorage.getItem('buildingTypeId')) //获取单位下 消防要素
+    let planData = this.getSitePlanCompanyData() //获取 单位 数据
+    this.http.get('/api/SitePlans',{params:this.params}).subscribe(data=>{
+      this.sitePlanData = data
+      this.selectingSitePlan = this.sitePlanData[0] || {}
+      this.canvasData.selectStorey = this.sitePlanData[0] || {} //服务中 存一份数据
+      this.selectSitePlanIndex = 0
+
+      Promise.all([fireData,planData]).then((res)=>{
+        this.getSitePlanStorey(this.selectingSitePlan) //获取 平面图 楼层数据
+      })
+
+    })
+  }
+
+  //获取建筑 楼层/区域
+  getBuildingSitePlan (item) {
+    let params = { buildingId: item.id }
+    let fireData = this.getFireElements(item.buildingTypes[0].id || '') //获取建筑下 消防要素
+    let planData = this.getBuildingData(params) //获取 建筑 数据
+    this.http.get('/api/BuildingAreas',{params}).subscribe(data=>{
+      this.sitePlanData = data
+      this.selectingSitePlan = this.sitePlanData[0] || {}
+      this.canvasData.selectStorey = this.sitePlanData[0] || {} //服务中 存一份数据
+      this.selectSitePlanIndex = 0
+
+      Promise.all([fireData,planData]).then((res)=>{
+        this.getBuildingStorey(this.selectingSitePlan) //获取 建筑 楼层数据
+      })
+
+    })
+  }
+
+  //根据单位类型获得所有的消防要素
+   getFireElements (e) {
+    let params = {ids:e}
+    return new Promise ((resolve,reject)=>{
+      this.http.get('/api/Companies/FireElements',{params}).subscribe((data:any)=>{
+        this.allFireElements = data //所有消防要素
+        let other = {
+          children: [],
+          computed: true,
+          id: '',
+          name: '其他',
+          order: 999,
+          parentId: null,
+          tag: "INPUT",
+          isLookPattern : true
+        }
+        this.allFireElements.push(other)
+        resolve('success')
+      })
+    })
+  }
+
+  //获取 单位 数据
+  getSitePlanCompanyData () {
+    return new Promise ((resolve,reject)=>{
+      this.http.get('/api/CompanyData',{params:this.params}).subscribe((data:any)=>{
+        this.canvasData.originalcompanyBuildingData = data || {} // 单位原数据
+        this.canvasData.originalcompanyBuildingData.data? this.canvasData.originalcompanyBuildingData.data = JSON.parse(this.canvasData.originalcompanyBuildingData.data) : this.canvasData.originalcompanyBuildingData.data = {}
+        this.canvasData.originalcompanyBuildingData.version? null : this.canvasData.originalcompanyBuildingData.version = "2.0"
+        this.canvasData.originalcompanyBuildingData.companyId? null : this.canvasData.originalcompanyBuildingData.companyId = sessionStorage.getItem('companyId')
+        resolve('success')
+      })
+    })
+  }
+
+  //获取 平面图 楼层数据
+  getSitePlanStorey (e) {
+    let params = {sitePlanId: e.id}
+    this.http.get(`/api/SitePlanData`,{params}).subscribe((data:any)=>{
+      this.canvasData.originaleveryStoreyData = data || {} // 楼层原数据
+      this.canvasData.originaleveryStoreyData.data? this.canvasData.originaleveryStoreyData.data = JSON.parse(this.canvasData.originaleveryStoreyData.data) : this.canvasData.originaleveryStoreyData.data = {}
+      this.canvasData.originaleveryStoreyData.version? null : this.canvasData.originaleveryStoreyData.version = "2.0"
+      this.canvasData.originaleveryStoreyData.sitePlanId? null : this.canvasData.originaleveryStoreyData.sitePlanId = e.id || null
+      this.renovateTreeData()
+    })
+  }
+
+  //获取 建筑 数据
+  getBuildingData (e) {
+    return new Promise ((resolve,reject)=>{
+      this.http.get(`/api/BuildingData`,{params:e}).subscribe((data:any)=>{
+        this.canvasData.originalcompanyBuildingData = data || {} // 建筑原数据
+        this.canvasData.originalcompanyBuildingData.data? this.canvasData.originalcompanyBuildingData.data = JSON.parse(this.canvasData.originalcompanyBuildingData.data) : this.canvasData.originalcompanyBuildingData.data = {}
+        this.canvasData.originalcompanyBuildingData.version? null : this.canvasData.originalcompanyBuildingData.version = "2.0"
+        this.canvasData.originalcompanyBuildingData.buildingId? null : this.canvasData.originalcompanyBuildingData.buildingId = e.buildingId
+        resolve('success')
+      })
+    })
+  }
+
+  //获取 建筑 楼层数据
+  getBuildingStorey (e) {
+    let params = {buildingAreaId: e.id}
+    this.http.get(`/api/BuildingAreaData`,{params}).subscribe((data:any)=>{
+      this.canvasData.originaleveryStoreyData = data || {} // 楼层原数据
+      this.canvasData.originaleveryStoreyData.data? this.canvasData.originaleveryStoreyData.data = JSON.parse(this.canvasData.originaleveryStoreyData.data) : this.canvasData.originaleveryStoreyData.data = {}
+      this.canvasData.originaleveryStoreyData.version? null : this.canvasData.originaleveryStoreyData.version = "2.0"
+      this.canvasData.originaleveryStoreyData.buildingAreaId? null : this.canvasData.originaleveryStoreyData.buildingAreaId = e.id || null
+      this.renovateTreeData()
+    })
+  }
+
+  //点击选中 平面图 楼层/区域 时
+  selectSitePlan (item,index) {
+    
+    if (this.selectSitePlanIndex != index) {
+      this.canvasData.selectPanelPoint = new DisposalNodeData();
+      if (this.canvasData.isChange) { //true 数据被改动
+        let isTrue = confirm('是否保存当前编辑数据')
+        if (isTrue) { //先保存数据 在切换
+          let isSuccess = this.saveSite()//true的时候 先保存数据
+          if (isSuccess != false) {
+            this.selectingSitePlan = item
+            this.selectSitePlanIndex = index
+            this.canvasData.selectStorey = item //服务中 存一份数据
+            if (this.checkedBuildingIndex==-1) {  //总平面图时
+              this.getSitePlanStorey(item) //获取 平面图 楼层数据
+            } else {  //楼层/区域时
+              this.getBuildingStorey(item) //获取 建筑 楼层数据
+            }
+          }
+        } else { //不保存数据 直接切换
+          this.selectingSitePlan = item
+          this.selectSitePlanIndex = index
+          this.canvasData.selectStorey = item //服务中 存一份数据
+          if (this.checkedBuildingIndex==-1) {  //总平面图时
+            this.getSitePlanStorey(item) //获取 平面图 楼层数据
+            this.getSitePlanCompanyData()
+          } else {  //楼层/区域时
+            this.getBuildingStorey(item) //获取 建筑 楼层数据
+            let params = { buildingId: this.beforeOneCheckedBuilding.id }
+            this.getBuildingData(params)
+          }
+        }
+  
+      } else { //false 数据没被改动
+        this.selectingSitePlan = item
+        this.selectSitePlanIndex = index
+        this.canvasData.selectStorey = item //服务中 存一份数据
+        if (this.checkedBuildingIndex==-1) {  //总平面图时
+          this.getSitePlanStorey(item) //获取 平面图 楼层数据
+        } else {  //楼层/区域时
+          this.getBuildingStorey(item) //获取 建筑 楼层数据
+        }
+      } //if
+
+    }
+  }
+
+  //新增平面图 楼层/区域
+  foundPanel (e) {
+    e.stopPropagation()
+    let data = {
+      isBuilding: this.checkedBuildingIndex==-1? false:true,
+      Panel: this.beforeOneCheckedBuilding,
+      order: this.sitePlanData.length? this.sitePlanData[this.sitePlanData.length-1].order+1:0,
+    }
+    let dialogRef = this.dialog.open(leftFunctionalDomainComponent,{data});
+    dialogRef.afterClosed().subscribe(data=>{
+      if (data =='总平面图') {
+        this.renovateSitePlan()
+      } else if (data =='建筑') {
+        this.renovateBuilding()
+      }
+    })
+  }
+
+  //编辑平面图 楼层/区域
+  editPlaneData (e) {
+    let data = {
+      isBuilding: this.checkedBuildingIndex==-1? false:true,
+      Panel: this.beforeOneCheckedBuilding,
+      buildingData: e,
+    }
+    let dialogRef = this.dialog.open(editPlaneFigureComponent,{data});
+    dialogRef.afterClosed().subscribe(data=>{
+      if (data =='总平面图') {
+        this.renovateSitePlan()
+      } else if (data =='建筑') {
+        this.renovateBuilding()
+      }
+    })
+  }
+
+  //平面图 楼层/区域 上移
+  moveUp (item,index) {
+    if (index != 0) {
+      let replaceIndex = this.sitePlanData[index].order
+      this.sitePlanData[index].order = this.sitePlanData[index-1].order
+      this.sitePlanData[index-1].order = replaceIndex
+      if (this.checkedBuildingIndex==-1) { //总平面图
+        this.http.put(`/api/SitePlans/${this.sitePlanData[index-1].id}`,this.sitePlanData[index-1]).subscribe(data=>{
+          this.http.put(`/api/SitePlans/${this.sitePlanData[index].id}`,this.sitePlanData[index]).subscribe(data=>{
+            this.selectSitePlanIndex = this.selectSitePlanIndex-1
+            this.renovateSitePlan()
+          })
+        })
+      } else { //楼层/区域
+        this.http.put(`/api/BuildingAreas/${this.sitePlanData[index-1].id}`,this.sitePlanData[index-1],{params:this.params}).subscribe(data=>{
+          this.http.put(`/api/BuildingAreas/${this.sitePlanData[index].id}`,this.sitePlanData[index],{params:this.params}).subscribe(data=>{
+            this.selectSitePlanIndex = this.selectSitePlanIndex-1
+            this.renovateBuilding()
+          })
+        })
+      }
+
+    } //if index
+  }
+
+  //平面图 楼层/区域 下移
+  moveDown (item,index) {
+    if (index != this.sitePlanData.length-1) {
+      let replaceIndex = this.sitePlanData[index].order
+      this.sitePlanData[index].order = this.sitePlanData[index+1].order
+      this.sitePlanData[index+1].order = replaceIndex
+      if (this.checkedBuildingIndex==-1) { //总平面图
+        this.http.put(`/api/SitePlans/${this.sitePlanData[index+1].id}`,this.sitePlanData[index+1]).subscribe(data=>{
+          this.http.put(`/api/SitePlans/${this.sitePlanData[index].id}`,this.sitePlanData[index]).subscribe(data=>{
+            this.selectSitePlanIndex = this.selectSitePlanIndex+1
+            this.renovateSitePlan()
+          })
+        })
+      } else { //楼层/区域
+        this.http.put(`/api/BuildingAreas/${this.sitePlanData[index+1].id}`,this.sitePlanData[index+1],{params:this.params}).subscribe(data=>{
+          this.http.put(`/api/BuildingAreas/${this.sitePlanData[index].id}`,this.sitePlanData[index],{params:this.params}).subscribe(data=>{
+            this.selectSitePlanIndex = this.selectSitePlanIndex+1
+            this.renovateBuilding()
+          })
+        })
+      }
+
+    } //if index
+  }
+
+  //旋转底图
+  revolveImg (item) {
+    item.imageAngle==270? item.imageAngle = 0 : item.imageAngle = item.imageAngle+90
+    if (this.checkedBuildingIndex==-1) { //总平面图
+      this.http.put(`/api/SitePlans/${item.id}`,item).subscribe(data=>{
+        let isSuccess = this.renovateSitePlan()
+        isSuccess.then(res=>{
+          this.canvas.refreshBackgroundImage()
+        })
+      })
+    } else { //楼层/区域
+      this.http.put(`/api/BuildingAreas/${item.id}`,item,{params:this.params}).subscribe(data=>{
+        let isSuccess = this.renovateBuilding()
+        isSuccess.then(res=>{
+          this.canvas.refreshBackgroundImage()
+        })
+      })
+    }
+
+  }
+
+  //删除 平面图 楼层/区域
+  deletePlaneData (item) {
+    const isDelete = confirm('您确定要删除吗');
+    if (isDelete) {
+      if (this.checkedBuildingIndex==-1) { //总平面图
+        let isHave = this.canvasData.allDisposalNode.find(items=>{ return items.sitePlanId === item.id })
+        if (isHave == undefined) {
+          this.http.delete(`/api/SitePlans/${item.id}`).subscribe(data=>{
+            this.deleteShareData(item,-1)
+          })
+        } else {
+          const config = new MatSnackBarConfig();
+          config.verticalPosition = 'top';
+          config.duration = 3000
+          this.snackBar.open('含有数据节点的楼层不允许删除','确定',config);
+        }
+      } else { //楼层/区域
+        let isHave = this.canvasData.allDisposalNode.find(items=>{ return items.buildingAreaId === item.id })
+        if (isHave == undefined) {
+          this.http.delete(`/api/BuildingAreas/${item.id}`).subscribe(data=>{
+            this.deleteShareData(item,1)
+          })
+        } else {
+          const config = new MatSnackBarConfig();
+          config.verticalPosition = 'top';
+          config.duration = 3000
+          this.snackBar.open('含有数据节点的楼层不允许删除','确定',config);
+        }
+      }
+    }
+  }
+
+  //删除当前 单位/建筑的 共享数据中 已删除data
+  deleteShareData (e,isCompany) {
+    this.sitePlanData.forEach((element,index) => {
+      if (element.id===e.id) {
+        this.sitePlanData.splice(index,1)
+        return
+      }
+    });
+    let data = this.canvasData.originalcompanyBuildingData;
+    for(let key in data.data){
+      if (data.data[key].FloorId === e.id) { //处理 单位/建筑 数据是否归于当前楼层下
+        delete data.data[key]
+      }
+    }
+    let newData = JSON.parse(JSON.stringify(this.canvasData.originalcompanyBuildingData));
+    newData.data = JSON.stringify(newData.data) // 转换JSON 数据格式
+    this.selectingSitePlan = this.sitePlanData[0] || {}
+    this.canvasData.selectStorey = this.sitePlanData[0] || {} //服务中 存一份数据
+    this.selectSitePlanIndex = 0
+    this.canvasData.isChange = false
+    if (isCompany===-1) {
+      this.http.post("/api/CompanyData",newData).subscribe(data => {})
+      this.getSitePlanStorey(this.selectingSitePlan) //获取 平面图 楼层数据
+    } else {
+      this.http.post("/api/BuildingData",newData,{params:this.params}).subscribe(data => {})
+      this.getBuildingStorey(this.selectingSitePlan) //获取 建筑 楼层数据
+    }
+  }
+
+  //复制图层 平面图 楼层/区域
+  duplicateLayer (item) {
+    if (this.checkedBuildingIndex==-1) { //总平面图
+      item.id = ""
+      item.modifiedTime = new Date()
+      item.name = item.name + '(副本)'
+      item.order = this.sitePlanData[this.sitePlanData.length-1].order+1
+      this.http.post('/api/SitePlans',item).subscribe((data:any)=>{
+        let newData = {
+          version: this.canvasData.originaleveryStoreyData.version || "2.0",
+          id: "",
+          data: JSON.stringify( JSON.parse(JSON.stringify(this.canvasData.originaleveryStoreyData.data)) ) || null,
+          sitePlanId: data.id
+        }
+        this.http.post('/api/SitePlanData',newData,{params:this.params}).subscribe(data=>{
+          this.renovateSitePlan()
+        })
+
+      })
+    } else { //楼层/区域
+      item.id = ""
+      item.modifiedTime = new Date()
+      item.name = item.name + '(副本)'
+      item.order = this.sitePlanData[this.sitePlanData.length-1].order+1
+      this.http.post('/api/BuildingAreas',item,{params:this.params}).subscribe((data:any)=>{
+        let newData = {
+          version: this.canvasData.originaleveryStoreyData.version || "2.0",
+          id: "",
+          data: JSON.stringify( JSON.parse(JSON.stringify(this.canvasData.originaleveryStoreyData.data)) ) || null,
+          buildingAreaId: data.id
+        }
+        this.http.post('/api/BuildingAreaData',newData,{params:this.params}).subscribe(data=>{
+          this.renovateBuilding()
+        })
+
+      })
+    }
+  }
+
+  //平面图 楼层/区域  替换底图
+  replaceBaseMap (e,item) {
+    e.stopPropagation();
+    let file = e.target.files[0] || null //获取上传的文件
+    let fileSize = file.size || null //上传文件的总大小
+    let maxSize = 5 * 1024 * 1024 //5MB一个分片
+
+    if (file && fileSize<=maxSize) { //上传文件<=5MB时
+      let formData = new FormData()
+      formData.append("file",file)
+      this.http.post(`/api/Objects/WebPlan2D/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{
+        this.renovateBaseMap(data.objectName,item)
+      })
+    } else {
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('上传底图需小于5MB','确定',config);
+    }
+  }
+
+  //封装 替换底图 function
+  renovateBaseMap (e,item) {
+    item.imageUrl = '/api/Objects/WebPlan2D/' + e
+    if (this.checkedBuildingIndex ==-1) { //总平面图
+      this.http.put(`/api/SitePlans/${item.id}`,item).subscribe(data=>{
+        let isSuccess = this.renovateSitePlan()
+        isSuccess.then(res=>{
+          this.canvas.refreshBackgroundImage()
+        })
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('上传底图成功','确定',config);
+      })
+    } else { //楼层/区域
+      this.http.put(`/api/BuildingAreas/${item.id}`,item,{params:this.params}).subscribe(data=>{
+        let isSuccess = this.renovateBuilding()
+        isSuccess.then(res=>{
+          this.canvas.refreshBackgroundImage()
+        })
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('上传底图成功','确定',config);
+      })
+    }
+  }
+
+  //封装 刷新总平面图 数据
+  renovateSitePlan () {
+    return new Promise ((resolve,reject)=>{
+      this.http.get('/api/SitePlans',{params:this.params}).subscribe(data=>{
+        this.sitePlanData = data
+        this.selectingSitePlan = this.sitePlanData[this.selectSitePlanIndex]
+        this.canvasData.selectStorey = this.sitePlanData[this.selectSitePlanIndex] //服务中 存一份数据
+        this.canvasData.originaleveryStoreyData.sitePlanId? null : this.canvasData.originaleveryStoreyData.sitePlanId = this.selectingSitePlan.id || null
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('数据更新成功','确定',config);
+        resolve('success')
+      })
+    })
+  }
+
+  //封装 刷新 楼层/区域 数据
+  renovateBuilding () {
+    let params = {
+      buildingId: this.beforeOneCheckedBuilding.id
+    }
+    return new Promise ((resolve,reject)=>{
+      this.http.get('/api/BuildingAreas',{params}).subscribe(data=>{
+        this.sitePlanData = data
+        this.selectingSitePlan = this.sitePlanData[this.selectSitePlanIndex]
+        this.canvasData.selectStorey = this.sitePlanData[this.selectSitePlanIndex] //服务中 存一份数据
+        this.canvasData.originaleveryStoreyData.buildingAreaId? null : this.canvasData.originaleveryStoreyData.buildingAreaId = this.selectingSitePlan.id || null
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('数据更新成功','确定',config);
+        resolve('success')
+      })
+    })
+  }
+
+  allLibrary:any = []; //所有素材库 + 素材
+  selectLibrary:any; //选中的素材库
+  selectImage:any; //选中的素材库图片
+  selectImageIndex:number; //选中的素材库图片index
+
+  //获取素材库
+  getAllLibrary (type:string='input') {
+    this.http.get(`/api/AssetLibraries?tag=${type}`).subscribe((data:any)=>{
+      data.forEach(element => {
+        element.images = []
+      });
+      this.allLibrary = data
+      this.selectImageIndex = -1
+      // this.canvas.cancelPaint()
+    })
+  }
+
+  //素材库展开面板展开时
+  opened (e) {
+    if (!e.images.length) { //当前素材库没加载素材时
+      this.http.get(`/api/Assets?libraryId=${e.id}`).subscribe((data:any)=>{
+        e.images = data
+      })
+    }
+  }
+
+  //点击选中素材库图片时
+  selectImg (item,items,index) {
+    this.selectLibrary = item.name
+    this.selectImage = items
+    this.selectImageIndex = index
+    this.canvasData.selectTemplateData = items
+    this.canvas.beginPaint()
+  }
+
+
+
+  //处置预案
+  allFirePlan:any = []; //所有灾情
+  selectDisposalNode:string = ''; //当前点击tree节点 css选中样式
+
+  //获取所有灾情
+  getAllFirePlan () {
+    let params = {componentId: sessionStorage.getItem('planId')}
+    this.http.get('/api/Disasters',{params:params}).subscribe((data:any)=>{
+      if (!data.length) { //该 单位没有灾情时
+        let msg = {
+          name: '灾情',
+          modifiedTime: new Date(),
+          planComponentId: sessionStorage.getItem('planId')
+        }
+        this.http.post('/api/Disasters',msg).subscribe(data=>{ 
+          this.allFirePlan.push(data)
+          let params = {disasterId: this.allFirePlan[0].id || ''}
+          this.http.get('/api/DisposalNodes',{params:params}).subscribe(data=>{ //所有处置节点
+            this.canvasData.allDisposalNode = data
+          })
+        })
+      } else { //单位 有灾情时
+        this.allFirePlan = data
+        let params = {disasterId: this.allFirePlan[0].id || ''}
+        this.http.get('/api/DisposalNodes',{params:params}).subscribe(data=>{ //所有处置节点
+          this.canvasData.allDisposalNode = data
+        })
+      }
+    })
+  }
+
+  //获取所有处置节点
+  getDisposalNode () {
+    this.selectDisposalNode = ''
+    let params = {disasterId: this.allFirePlan[0].id || ''}
+    this.http.get('/api/DisasterData/Markers',{params:params}).subscribe(data=>{ //灾情标签信息
+      this.canvasData.allNodeMarkers = data
+      this.mateFireForce()
+    })
+    this.http.get('/api/DisposalNodes',{params:params}).subscribe(data=>{ //处置节点
+      this.canvasData.allDisposalNode = data
+      this.handleHybridTree()
+    })
+  }
+
+  treeData:any = []; //渲染tree处理完成数据
+  defaultExpandedKeys:any = []; //首次渲染 tree展开状态
+  //处理 节点 Tree数据
+  handleHybridTree () {
+    this.defaultExpandedKeys = []
+    let treeData = []
+    let data =  JSON.parse(JSON.stringify( this.canvasData.allDisposalNode || [] )) 
+    data.forEach(element => {
+      this.defaultExpandedKeys.push(element.id)
+      element.title = element.name //name
+      element.key = element.id //id
+      element.children = [] //children
+      if (element.sitePlanId || element.buildingAreaId) { //是数据节点
+        element.isLeaf = true
+        element.isDataNode = true
+      } else { //不是数据节点
+        element.isLeaf = false
+        element.isDataNode = false
+      }
+      data.forEach(item=>{
+        item.parentId === element.id? element.children.push(item) : null
+      })
+    });
+    data.forEach(element=>{
+      !element.parentId? treeData.push(element) : null
+    })
+    this.treeData = [...treeData]
+    this.defaultExpandedKeys = [...this.defaultExpandedKeys]
+  }
+
+  //刷新 treeData 保存已展开节点
+  refurbishTreeData () {
+    this.defaultExpandedKeys = []
+    let params = {disasterId: this.allFirePlan[0].id || ''}
+    this.http.get('/api/DisposalNodes',{params:params}).subscribe(nodeData=>{ //处置节点
+      this.canvasData.allDisposalNode = nodeData
+      let oldTreeData = this.nzTreeComponent.getExpandedNodeList()
+      oldTreeData.forEach(item=>{
+        this.defaultExpandedKeys.push(item.key)
+      })
+      let treeData = []
+      let data =  JSON.parse(JSON.stringify( this.canvasData.allDisposalNode || [] )) 
+      data.forEach(element => {
+        element.title = element.name //name
+        element.key = element.id //id
+        element.children = [] //children
+        if (element.sitePlanId || element.buildingAreaId) { //是数据节点
+          element.isLeaf = true
+          element.isDataNode = true
+        } else { //不是数据节点
+          element.isLeaf = false
+          element.isDataNode = false
+        }
+        data.forEach(item=>{
+          item.parentId === element.id? element.children.push(item) : null
+        })
+      });
+      data.forEach(element=>{
+        !element.parentId? treeData.push(element) : null
+      })
+      this.treeData = [...treeData]
+      this.defaultExpandedKeys = [...this.defaultExpandedKeys]
+    })
+  }
+
+  sitePlanIcon = {fire:0,force:0} // 总平面图 火源/力量 图标 是否展示
+
+  //刷新 建筑楼层 匹配 火源/力量   图标
+  mateFireForce () {
+    let data = this.canvasData.allNodeMarkers.markers || {}
+    for(let key in data){ //遍历 火/力量 图标
+      this.sitePlanData.forEach(element => { //楼层 
+        if (element.id==key) { // 相匹配时
+          data[key].fireCount != 0? element.fire=1 : element.fire=0
+          data[key].forceCount != 0? element.force=1 : element.force=0
+        }
+      });
+      this.allBuildings.forEach(element => { //建筑
+        if (element.id==key) { // 相匹配时
+          data[key].fireCount != 0? element.fire=1 : element.fire=0
+          data[key].forceCount != 0? element.force=1 : element.force=0
+        }
+      });
+      if (this.params.companyId==key) { //总平面图时
+        data[key].fireCount != 0? this.sitePlanIcon.fire=1 : this.sitePlanIcon.fire=0
+        data[key].forceCount != 0? this.sitePlanIcon.force=1 : this.sitePlanIcon.force=0
+      }
+    }
+
+    let buildingMSG = this.canvasData.allNodeMarkers.highlightMarkers || {}
+    for (let key in buildingMSG) {
+      if (key === this.canvasData.selectPanelPoint.DisposalNodeId) {
+        for (let keys in buildingMSG[key]) {
+          this.sitePlanData.forEach(element => { //楼层 
+            if (element.id === keys) {
+              buildingMSG[key][keys].fireCount != 0? element.fire=2 : null
+              buildingMSG[key][keys].forceCount != 0? element.force=2 : null
+            }
+          });
+          this.allBuildings.forEach(element => { //建筑
+            if (element.id === keys) { // 相匹配时
+              buildingMSG[key][keys].fireCount != 0? element.fire=2 : null
+              buildingMSG[key][keys].forceCount != 0? element.force=2 : null
+            }
+          });
+          if (this.params.companyId === keys) { //总平面图时
+            buildingMSG[key][keys].fireCount != 0? this.sitePlanIcon.fire=2 : null
+            buildingMSG[key][keys].forceCount != 0? this.sitePlanIcon.force=2 : null
+          }
+        }
+      }
+    }
+  }
+
+  // 切换 基本信息时  刷新  删除 建筑楼层 自定义属性
+  mateDeleteCustomize () {
+    this.defaultExpandedKeys = []
+    this.sitePlanIcon = {fire:0,force:0}
+    this.sitePlanData.forEach(element => { //楼层
+      delete element.fire
+      delete element.force
+    });
+    this.allBuildings.forEach(element => { //建筑
+      delete element.fire
+      delete element.force
+    });
+  }
+
+  //计算差异
+  countValue (e) {
+    e.stopPropagation()
+    let params = {disasterId: this.allFirePlan[0].id || ''}
+    this.http.get('/api/DisasterData/Diffs',{params:params}).subscribe(data=>{
+      this.canvasData.allNodeMarkers = data
+      this.mateFireForce()
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('计算差异完成','确定',config);
+    })
+  }
+
+  //新建 处置预案 节点
+  addPanelPoint (e,item,treeData) {
+    e.stopPropagation()
+    let order
+    if (item) {
+      item.children.length? order = item.children[item.children.length-1].order+1 : order = 0
+    } else {
+      treeData.length? order = treeData[treeData.length-1].order+1 : order = 0
+    }
+    let data = {
+      name: '',
+      level: item? 1 : 0,
+      order: order,
+      description: '',
+      disasterId: this.allFirePlan[0].id || '',
+      parentId: item? item.id : null,
+      planComponentId: sessionStorage.getItem('planId') || '',
+    }
+    let dialogRef = this.dialog.open(addDisposalNodeComponent,{data});
+    dialogRef.afterClosed().subscribe(data=>{
+      if (data) { this.refurbishTreeData() }
+    })
+  }
+
+  //编辑 处置预案 节点
+  editPanelPoint (e,item) {
+    e.stopPropagation()
+    let data = item.origin
+    let dialogRef = this.dialog.open(editDisposalNodeComponent,{data});
+    dialogRef.afterClosed().subscribe(data=>{
+      if (data) {
+        item.title = data
+        this.canvasData.allDisposalNode.forEach(element => { element.id === item.key? element.name=data : null });
+      }
+    })
+  }
+
+  //复制 处置预案 节点
+  copyPanelPoint (e,item,treeData) { 
+    e.stopPropagation()
+    if (confirm(`确定要复制 ${item.title} ?`)) {
+      let params = {id: item.origin.id}
+      let order
+      if (item.level==0) {
+        treeData.length? order = treeData[treeData.length-1].order+1 : order = 0
+      } else {
+        let parent = item.getParentNode() //获取父节点
+        parent.origin.children.length? order = parent.origin.children[parent.origin.children.length-1].order+1 : order = 0
+      }
+      let data = {
+        name: item.title + '(副本)',
+        level: item.level,
+        order: order,
+        description: '',
+        disasterId: item.origin.disasterId || '',
+        parentId: item.origin.parentId || null,
+        planComponentId: item.origin.planComponentId || '',
+      }
+      this.http.post('/api/DisposalNodes/Clone',data,{params:params}).subscribe(data=>{
+        this.refurbishTreeData()
+      })
+    } //isTrue
+  }
+
+  //删除 处置预案 节点
+  deletePanelPoint (e,item) { 
+    e.stopPropagation()
+    if (confirm(`确定要删除 ${item.name} ?`)) {
+      this.http.delete(`/api/DisposalNodes/${item.id}`).subscribe(data=>{
+        this.refurbishTreeData()
+      })
+    }
+  }
+
+  //点击 处置Tree节点
+  selectanelPoint (e) {
+    if (!e.buildingAreaId && !e.sitePlanId) { //当前节点 不是 数据节点 时
+      let msg = this.canvasData.findDisposalNode(e.id)
+      this.canvasData.selectPanelPointBaseData = msg
+      this.selectDisposalNode == msg.id? this.selectDisposalNode = '' : this.selectDisposalNode = msg.id //选中 节点
+
+    } else if (e.buildingAreaId || e.sitePlanId) { //当前节点 是 数据节点 时
+      let msg = this.canvasData.findDisposalNode(e.parentId)
+      this.canvasData.selectPanelPointBaseData = msg
+      this.selectDisposalNode = e.parentId //选中 节点
+      
+      if (this.canvasData.selectPanelPoint.DisposalNodeId != e.id) { //选择节点  不是当前节点时
+        let params = {nodeId: e.id}
+        let parameter = { //查询 节点 对应 建筑/楼层 index,id
+          buildingIndex: e.sitePlanId? -1 : this.allBuildings.findIndex(item=>{ return item.id===e.buildingId }), //总平面图/建筑 index
+          storeyId: e.sitePlanId? e.sitePlanId : e.buildingAreaId, //楼层id
+        }
+        this.http.get('/api/DisposalNodeData',{params:params}).subscribe(data=>{
+          this.canvasData.selectPanelPoint = this.canvasData.deserialize(JSON.stringify(data || new DisposalNodeData())) //选择 当前 节点
+          this.canvasData.selectPanelPoint.Data = this.canvasData.deserialize(this.canvasData.selectPanelPoint.Data)
+          this.seekPanelPoint(parameter)
+        })
+      } //if
+
+    } //else if
+  }
+
+  //查找 数据节点 对应 建筑/楼层
+  seekPanelPoint (paramsData) {
+    this.checkedBuildingIndex = paramsData.buildingIndex
+    if (paramsData.buildingIndex ==-1) { //总平面图时
+      this.beforeOneCheckedBuilding={name:"总平面图"}
+      let fireData = this.getFireElements(sessionStorage.getItem('buildingTypeId')) //获取单位下 消防要素
+      let planData = this.getSitePlanCompanyData() //获取 单位 数据
+      this.http.get('/api/SitePlans',{params:this.params}).subscribe(data=>{
+        this.sitePlanData = data
+        let index = this.sitePlanData.findIndex(item=>{ return item.id===paramsData.storeyId })
+        this.selectingSitePlan = this.sitePlanData[index] || {}
+        this.canvasData.selectStorey = this.sitePlanData[index] || {} //服务中 存一份数据
+        this.selectSitePlanIndex = index
+  
+        Promise.all([fireData,planData]).then((res)=>{
+          this.getSitePlanStorey(this.selectingSitePlan) //获取 平面图 楼层数据
+        })
+      }) //get
+    } else { //建筑时
+      this.beforeOneCheckedBuilding=this.allBuildings[paramsData.buildingIndex]
+      let params = { buildingId: this.beforeOneCheckedBuilding.id }
+      let fireData = this.getFireElements(this.beforeOneCheckedBuilding.buildingTypes[0].id || '') //获取建筑下 消防要素
+      let planData = this.getBuildingData(params) //获取 建筑 数据
+      this.http.get('/api/BuildingAreas',{params}).subscribe(data=>{
+        this.sitePlanData = data
+        let index = this.sitePlanData.findIndex(item=>{ return item.id===paramsData.storeyId })
+        this.selectingSitePlan = this.sitePlanData[index] || {}
+        this.canvasData.selectStorey = this.sitePlanData[index] || {} //服务中 存一份数据
+        this.selectSitePlanIndex = index
+  
+        Promise.all([fireData,planData]).then((res)=>{
+          this.getBuildingStorey(this.selectingSitePlan) //获取 建筑 楼层数据
+        })
+      }) //get
+    }
+  }
+
+
+
+}
+
+
+
+//创建建筑
+@Component({
+  selector: 'app-createBuilding',
+  templateUrl: './createBuilding.html',
+  styleUrls: ['./collection-tools.component.scss']
+})
+export class CreateBuilding {
+
+  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<CreateBuilding>,@Inject(MAT_DIALOG_DATA) public data) { }
+
+  allBuildingType:any//所有的建筑类型
+  selected:any; //选中的建筑
+  ngOnInit(): void {
+    this.getAllBuildingType()
+  }
+
+  //获得所有单位类型
+  getAllBuildingType(){
+    this.http.get("/api/BuildingTypes/Simple").subscribe(data=>{
+      this.allBuildingType = data
+    })
+  }
+
+  //创建建筑功能分区
+  onSubmit (e) {
+    let companyId = sessionStorage.getItem("companyId")
+    let lastBuildingOrder = this.data.allBuildings.length != 0 ? this.data.allBuildings[this.data.allBuildings.length - 1].order + 1 : 0
+    let data = 
+    {
+      id: "",
+      name: e.propertyName,
+      order: lastBuildingOrder ,
+      enabled: true,
+      companyId: companyId,
+      buildingTypes: [
+        {
+          id: e.buildingId,
+          name: ""
+        }
+      ]
+    }
+    this.http.post("/api/Buildings",data,{
+      params:{
+        companyId : this.data.companyId
+      }
+    }).subscribe(data=>{
+      this.dialogRef.close("创建成功");
+    },err=>{
+      this.dialogRef.close("创建失败");
+    })
+  }
+}
+
+//编辑建筑
+@Component({
+  selector: 'app-editBuilding',
+  templateUrl: './editBuilding.html',
+  styleUrls: ['./collection-tools.component.scss']
+})
+export class EditBuilding {
+
+  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<EditBuilding>,@Inject(MAT_DIALOG_DATA) public data) { }
+  
+  defaultName:String = this.data.item.name//默认建筑名称
+  defaultBuildingType:String = this.data.item.buildingTypes[0].id//默认建筑类型
+  allBuildingType:any//所有的建筑类型
+
+  ngOnInit(): void {
+    this.getAllBuildingType()
+  }
+
+  getAllBuildingType(){
+    this.http.get("/api/BuildingTypes/Simple").subscribe(data=>{
+      this.allBuildingType = data
+    })
+  }
+
+  //编辑建筑信息
+  onSubmit (e) {
+    let companyId = sessionStorage.getItem("companyId")
+    let data = 
+    {
+      id: this.data.item.id,
+      name: e.propertyName,
+      order: this.data.item.order,
+      enabled: true,
+      companyId: companyId,
+      buildingTypes: [
+        {
+          id: e.buildingId,
+          name: ""
+        }
+      ]
+    }
+    this.http.put(`/api/Buildings/${this.data.item.id}`,data,{
+      params:{
+        id:this.data.item.id,
+        companyId:companyId
+      }
+    }).subscribe(data=>{
+      this.dialogRef.close("修改成功");
+    },err=>{
+      this.dialogRef.close("修改失败");
+    })
+  }
+}
+
+//查看图片大图
+@Component({
+  selector: 'viewdetails',
+  templateUrl: './viewdetails.html',
+  styleUrls: ['./collection-tools.component.scss']
+})
+export class ViewDetailss {
+  // myControl = new FormControl();
+  //注入MatDialogRef，可以用来关闭对话框
+  //要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
+  constructor(private http: HttpClient,public dialogRef: MatDialogRef<ViewDetailss>,@Inject(MAT_DIALOG_DATA) public data,private element: ElementRef) {}
+  imagesArr = this.data.imagesArr
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+  ngOnInit(): void {
+    setTimeout(() => {
+      var mySwiper = new Swiper('.swiper-container',{
+        loop: false,
+        initialSlide :this.data.index,//默认索引
+        // 如果需要前进后退按钮
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+      } 
+        //其他设置
+      });  
+    }, 0);
+  }
+  closeDialog(){
+    this.dialogRef.close();
+  }
+  count = 10
+  zoomimg(e) {
+    if(this.count != 1 || e.wheelDelta >= 120){
+      if(e.wheelDelta >= 120){
+        this.count++
+      }else{
+        this.count--
+      }
+    }
+    e.srcElement.style.zoom = this.count + '0%'
+    e.srcElement.style.maxWidth = null
+    e.srcElement.style.maxHeight = null
+  }
+
+}
diff --git a/src/app/ui/collection-tools/createBuilding.html b/src/app/ui/collection-tools/createBuilding.html
new file mode 100644
index 0000000..16fdd7b
--- /dev/null
+++ b/src/app/ui/collection-tools/createBuilding.html
@@ -0,0 +1,28 @@
+<div mat-dialog-title>新增建筑</div>
+<div>
+    <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+
+        <div mat-dialog-content>
+            <mat-form-field>
+                  <input type="text" matInput ngModel
+                  required name="propertyName" placeholder="建筑名称" autocomplete="off">
+            </mat-form-field>
+        </div>
+        <div mat-dialog-content>
+            <mat-form-field>
+                <mat-select [(value)]="selected" required ngModel name="buildingId" placeholder="建筑类型">
+                    <mat-option *ngFor="let item of allBuildingType" [value]="item.id">
+                    {{item.name}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>  
+        <div mat-dialog-actions>
+            <button mat-raised-button color="primary" type="submit" 
+            [disabled]="!form.form.valid">
+                确定
+            </button>
+            <button mat-raised-button mat-dialog-close>取消</button>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/src/app/ui/collection-tools/editBuilding.html b/src/app/ui/collection-tools/editBuilding.html
new file mode 100644
index 0000000..433316d
--- /dev/null
+++ b/src/app/ui/collection-tools/editBuilding.html
@@ -0,0 +1,23 @@
+<div mat-dialog-title>编辑建筑</div>
+<div>
+    <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+        <div mat-dialog-content>
+            <mat-form-field>
+                <input type="text" matInput [(ngModel)]="defaultName" required name="propertyName" placeholder="建筑名称" autocomplete="off">
+            </mat-form-field>
+        </div>
+        <div mat-dialog-content>
+            <mat-form-field>
+                <mat-select required [(ngModel)]="defaultBuildingType" name="buildingId" placeholder="建筑类型">
+                    <mat-option *ngFor="let item of allBuildingType" [value]="item.id">
+                        {{item.name}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>  
+        <div mat-dialog-actions>
+            <button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid">确定</button>
+            <button mat-raised-button mat-dialog-close>取消</button>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/src/app/ui/collection-tools/editDisposalNode.html b/src/app/ui/collection-tools/editDisposalNode.html
new file mode 100644
index 0000000..40b2270
--- /dev/null
+++ b/src/app/ui/collection-tools/editDisposalNode.html
@@ -0,0 +1,23 @@
+<div class="functionalDomainContent">
+  <div mat-dialog-title>
+    <label>修改灾情节点名称</label>
+  </div>
+
+  <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+
+    <div class="keyMargin">
+      <mat-form-field>
+        <input matInput name="name" required [(ngModel)]="nodeName" placeholder="名称">
+      </mat-form-field>
+    </div>
+
+    <div class="submitBottom">
+      <button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid">
+          确定
+      </button>
+      <button mat-raised-button mat-dialog-close>取消</button>
+    </div>
+
+  </form>
+
+</div>
\ No newline at end of file
diff --git a/src/app/ui/collection-tools/editPlaneFigure.html b/src/app/ui/collection-tools/editPlaneFigure.html
new file mode 100644
index 0000000..a0f8016
--- /dev/null
+++ b/src/app/ui/collection-tools/editPlaneFigure.html
@@ -0,0 +1,39 @@
+<div class="functionalDomainContent">
+  
+  <div mat-dialog-title>
+    <label *ngIf="!data.isBuilding">编辑平面图</label>
+    <label *ngIf="data.isBuilding">编辑楼层/区域</label>
+  </div>
+
+  <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+
+    <div class="keyMargin">
+      <mat-form-field>
+        <input matInput name="name" required [(ngModel)]="name" placeholder="名称">
+      </mat-form-field>
+    </div>
+
+    <div class="keyMargin" *ngIf="data.isBuilding">
+      <mat-checkbox name="isRefugeStorey"  [(ngModel)]="checked">是否为避难层</mat-checkbox>
+    </div>
+
+    <div class="keyMargin">
+      <mat-form-field>
+        <input matInput name="area" type="number" required [(ngModel)]="area" placeholder="面积 (平方米)">
+      </mat-form-field>
+    </div>
+
+    <div class="keyMargin">
+      <textarea name="details" [(ngModel)]="details" placeholder="详情"></textarea>
+    </div>
+
+    <div class="submitBottom">
+      <button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid">
+          确定
+      </button>
+      <button mat-raised-button mat-dialog-close>取消</button>
+    </div>
+
+  </form>
+
+</div>
\ No newline at end of file
diff --git a/src/app/ui/collection-tools/leftFunctionalDomain.ts b/src/app/ui/collection-tools/leftFunctionalDomain.ts
new file mode 100644
index 0000000..519653d
--- /dev/null
+++ b/src/app/ui/collection-tools/leftFunctionalDomain.ts
@@ -0,0 +1,180 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-leftFunctionalDomain',
+  templateUrl: './addPlaneFigure.html',
+  styleUrls: ['./panel.scss']
+})
+export class leftFunctionalDomainComponent implements OnInit {
+
+  constructor(
+    private http:HttpClient,
+    public dialog: MatDialog,
+    public snackBar: MatSnackBar,
+    public dialogRef: MatDialogRef<any>,
+    @Inject(MAT_DIALOG_DATA) public data) { }
+
+  ngOnInit(): void {
+
+  }
+
+  params = {companyId: sessionStorage.getItem('companyId')}
+  checked:boolean = false;//是否为避难层
+  
+  //提交表单创建平面图
+  onSubmit (e) {
+    if (!this.data.isBuilding) { //总平面图 创建平面图
+      let data = {
+        companyId: sessionStorage.getItem('companyId'),
+        name: e.name,
+        order: this.data.order,
+        area:e.area,
+        details:e.details,
+        enabled: true,
+        modifiedTime: new Date(),
+      }
+      this.http.post('/api/SitePlans',data).subscribe(data=>{
+        this.dialogRef.close('总平面图');
+      })
+    } else { //建筑 创建楼层/区域
+      let data = {
+        isRefugeStorey: e.isRefugeStorey,
+        buildingId: this.data.Panel.id,
+        name: e.name,
+        order: this.data.order,
+        area:e.area,
+        details:e.details,
+        enabled: true,
+        modifiedTime: new Date(),
+      }
+      this.http.post('/api/BuildingAreas',data,{params:this.params}).subscribe(data=>{
+        this.dialogRef.close('建筑');
+      })
+    }
+  }
+
+
+
+}
+
+//编辑平面图 楼层/区域
+@Component({
+  selector: 'app-editPlaneFigure',
+  templateUrl: './editPlaneFigure.html',
+  styleUrls: ['./panel.scss']
+})
+export class editPlaneFigureComponent implements OnInit {
+
+  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<any>,@Inject(MAT_DIALOG_DATA) public data) { }
+
+  ngOnInit(): void {
+    this.name = this.data.buildingData.name || ''
+    this.checked = this.data.buildingData.isRefugeStorey || false
+    this.area = this.data.buildingData.area || 0
+    this.details = this.data.buildingData.details || ''
+  }
+
+  params = {companyId: sessionStorage.getItem('companyId')}
+  name:any; //name
+  checked:boolean = false;//是否为避难层
+  area:number; //面积
+  details:string; //详情
+
+  //提交表单修改平面图
+  onSubmit (e) {
+    if (!this.data.isBuilding) { //总平面图 修改平面图
+      let data = {
+        companyId: sessionStorage.getItem('companyId'),
+        id: this.data.buildingData.id,
+        name: e.name,
+        cadUrl: this.data.buildingData.cadUrl,
+        imageUrl: this.data.buildingData.imageUrl,
+        imageAngle: this.data.buildingData.imageAngle,
+        order: this.data.buildingData.order,
+        area:e.area,
+        details:e.details,
+        enabled: this.data.buildingData.enabled,
+        modifiedTime: new Date(),
+      }
+      this.http.put(`/api/SitePlans/${this.data.buildingData.id}`,data).subscribe(data=>{
+        this.dialogRef.close('总平面图');
+      })
+    } else { //建筑 修改楼层/区域
+      let data = {
+        isRefugeStorey: e.isRefugeStorey,
+        buildingId: this.data.Panel.id,
+        id: this.data.buildingData.id,
+        name: e.name,
+        cadUrl: this.data.buildingData.cadUrl,
+        imageUrl: this.data.buildingData.imageUrl,
+        imageAngle: this.data.buildingData.imageAngle,
+        order: this.data.buildingData.order,
+        area:e.area,
+        details:e.details,
+        enabled: this.data.buildingData.enabled,
+        modifiedTime: new Date(),
+      }
+      this.http.put(`/api/BuildingAreas/${this.data.buildingData.id}`,data,{params:this.params}).subscribe(data=>{
+        this.dialogRef.close('建筑');
+      })
+    }
+  }
+
+
+
+}
+
+
+
+//创建 处置预案 节点
+@Component({
+  selector: 'app-addDisposalNode',
+  templateUrl: './addDisposalNode.html',
+  styleUrls: ['./panel.scss']
+})
+export class addDisposalNodeComponent implements OnInit {
+
+  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<any>,@Inject(MAT_DIALOG_DATA) public data) { }
+
+  ngOnInit(): void {
+  }
+
+  //提交表单
+  onSubmit (e) {
+    this.data.name = e.name
+    this.http.post('/api/DisposalNodes',this.data).subscribe(data=>{
+      this.dialogRef.close('success');
+    })
+  }
+
+}
+
+
+
+//编辑 处置预案 节点
+@Component({
+  selector: 'app-editDisposalNode',
+  templateUrl: './editDisposalNode.html',
+  styleUrls: ['./panel.scss']
+})
+export class editDisposalNodeComponent implements OnInit {
+
+  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<any>,@Inject(MAT_DIALOG_DATA) public data) { }
+
+  ngOnInit(): void {
+    this.nodeName = JSON.parse(JSON.stringify( this.data.name || '' )) 
+  }
+  nodeName:string;
+  
+  //提交表单
+  onSubmit (e) {
+    this.data.name = e.name
+    this.http.put(`/api/DisposalNodes/${this.data.id}`,this.data).subscribe(data=>{
+      this.dialogRef.close(e.name);
+    })
+  }
+
+}
\ No newline at end of file
diff --git a/src/app/ui/collection-tools/panel.scss b/src/app/ui/collection-tools/panel.scss
new file mode 100644
index 0000000..f0ae073
--- /dev/null
+++ b/src/app/ui/collection-tools/panel.scss
@@ -0,0 +1,291 @@
+.matIcons {
+  color: #8E909F;
+}
+
+
+
+//平面图 素材库 公共样式 头部
+.planarGraphHeader{
+  height: 35px;
+  min-height: 35px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 24px;
+  border-radius: 5px;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-size: 15px;
+  font-weight: 400;
+  color: #000;
+  background: linear-gradient(to top,#cdced1,#FFF);
+}
+//平面图头部字体图标样式
+.hover {
+  width: 18px;
+  height: 18px;
+  margin-left: 90px;
+  border: 1px solid #999;
+  border-radius: 3px;
+  .mat-icon {font-size: 18px; color: #999;}
+}
+.hover:hover { 
+  background-color: #4DA5FA;
+  .mat-icon {color: #fff;}
+}
+
+//平面图
+.sitePlanContent {
+  position: relative;
+  width: 100%;
+  height: 35px;
+  line-height: 35px;
+  box-sizing: border-box;
+  padding: 0 10px 0 25px;
+  .mat-icon {
+    font-size: 20px;
+  }
+}
+
+//火源/力量 图标
+.fireForce {
+  display: block;
+  float: right;
+  margin: 8px 5px 0 0;
+  width: 40px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  img{
+    width: 20px; 
+    height: 20px;
+  }
+}
+//替换底图  inputfile
+.a-upload {
+  display: block;
+  float: right;
+  margin: 8px 18px 0 0;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  input {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    left: 0;
+    top: 0;
+    opacity: 0;
+  }
+}
+.a-upload:hover {
+  .mat-icon {
+    color: #fff;
+  }
+}
+//上传底图 inputfile
+#a-uploadImg {
+  display: block;
+  width: 300px;
+  height: 170px;
+  position: fixed;
+  top: 40%;
+  left: 48%;
+  overflow: hidden;
+  border-radius: 5px;
+  border: 1px solid #999;
+  z-index: 999;
+  input {
+    position: absolute;
+    width: 300px;
+    height: 170px;
+    left: 0;
+    top: 0;
+    opacity: 0;
+  }
+  img {
+    width: 100%;
+    height: auto;
+  }
+}
+#a-uploadImg:hover {
+  border: 5px solid skyblue;
+}
+
+//hover时显示右边操作栏
+.sitePlanContent:hover {
+  #rightOperate {
+    display: block;
+  }
+}
+//右边操作栏
+#rightOperate{
+  width: 50px;
+  height: 100px;
+  position: absolute;
+  top: -32px;
+  right: -48px;
+  z-index: 99999;
+  border-radius: 0 100px 100px 0;
+  background-color: #F0F4F7;
+  // #F0F4F7 cdced1
+  display: none;
+  .functionButton {
+    height: 25%;
+    line-height: 25px;
+  }
+  .bigFunctionIcon {
+    font-size: 24px;
+  }
+  .functionIcon {
+    color: #999;
+  }
+  .functionIcon:hover {
+    color: #4DA5FA;
+  }
+}
+
+//处置预案 素材库 公用div
+.publiclBankPlan {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding-bottom: 10px;
+  // border-top: 1px dashed #999;
+}
+
+
+
+//   基本信息/想定作业 切换
+.scenarioAssignment {
+  overflow-y: auto;
+}
+.selectEditMode {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.materialBankDIV{
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+//   基本信息/想定作业 切换
+//处置预案
+#terrNodePublic {
+  height: 35px;
+  line-height: 35px;
+  display: flex;
+  .textNode {flex: 1;}
+}
+//字体图标
+.planIconDiv {
+  display: inline-block;
+  .mat-icon{
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    color: #666;
+    margin-right: 3px;
+  }
+}
+
+
+
+.mat-expansion-panel-header {
+  height: 40px !important;
+}
+//素材库溢出隐藏
+#materialBank {
+  margin: 1px 0;
+}
+//素材库图片flex
+#panelLibrary .text{
+  box-sizing: border-box;
+  margin-left: 10px;
+}
+.panelLibraryFlex {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between; /* 水平居中 */
+  .imgBox {
+    width: 70px;
+    height: 100px;
+    display: inline-block;
+    text-align: center;
+    border-radius: 3px;
+    margin: 5px 0;
+    img {
+      width: 70px;
+      height: auto;
+      max-height: 70px;
+      cursor:pointer;
+    }
+    p {
+      font-size: 12px;
+      cursor:pointer;
+    }
+  }
+}
+
+//文本溢出
+.overflowText {
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+}
+// 楼层/区域 是避难层时
+.isRefugeStorey {
+  color: #fff;
+  background-color: rgb(238, 186, 186);
+}
+//选中平面图时
+.selectSitePlan {
+  color: #fff;
+  background-color: #6BC2FF;
+}
+//选中素材库图片时
+.selectImg {
+  color: #fff;
+  background-color: #4DA5FA;
+}
+//选中 处置节点时
+.selectanelPoint {
+  background-color: #F4C235;
+}
+
+
+
+//左侧功能区弹出框样式
+.keyMargin {
+  width: 100%;
+  margin: 5px 0;
+  .mat-form-field {
+    width: 100%;
+  }
+}
+.submitBottom {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between; /* 水平居中 */
+}
+.functionalDomainContent {
+  width: 300px;
+  height: 100%;
+  textarea {
+    border-radius: 5px;
+    border: 1px solid #999;
+    width: 100%;
+    height: 120px;
+    resize:none;
+  }
+}
diff --git a/src/app/ui/collection-tools/save.ts b/src/app/ui/collection-tools/save.ts
new file mode 100644
index 0000000..5dc3b6b
--- /dev/null
+++ b/src/app/ui/collection-tools/save.ts
@@ -0,0 +1,301 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+import {CanvasShareDataService,DisposalNodeData} from '../../canvas-share-data.service' //引入服务
+// 保存想定作业第一个弹窗
+@Component({
+    selector: 'dialog-overview-example-dialog',
+    templateUrl: 'saveOne.html',
+    styleUrls: ['./collection-tools.component.scss']
+})
+export class saveOneDialog {
+
+    constructor(
+        private http:HttpClient,
+        public dialog: MatDialog,
+        public snackBar: MatSnackBar,
+        public dialogRef: MatDialogRef<saveOneDialog>,
+        @Inject(MAT_DIALOG_DATA) public data) {}
+
+    onNoClick(): void {
+        this.dialogRef.close()
+    }
+    allDisposalNode = this.data.allDisposalNode
+
+    saveType(type){
+      this.dialogRef.close()
+      const dialogRef = this.dialog.open(saveTwoDialog, {
+        data: {type: type,
+          allDisposalNode: this.data.allDisposalNode,
+          selectedBuildingData:this.data.selectedBuildingData,
+          selectedSiteData:this.data.selectedSiteData,
+          siteOrbuilding:this.data.siteOrbuilding,
+          disasterId:this.data.disasterId}
+      });
+      dialogRef.afterClosed().subscribe(result => {
+      });
+    }
+
+}
+
+  // 保存想定作业第二个弹窗
+@Component({
+    selector: 'dialog-overview-example-dialog',
+    templateUrl: 'saveTwo.html',
+    styleUrls: ['./collection-tools.component.scss']
+})
+    export class saveTwoDialog {
+  
+    constructor(
+      private http:HttpClient,
+      public dialogRef: MatDialogRef<saveTwoDialog>,
+      public canvasData: CanvasShareDataService,
+      public snackBar: MatSnackBar,
+      @Inject(MAT_DIALOG_DATA) public data) {}
+      
+    type = this.data.type
+    allDisposalNode = this.data.allDisposalNode
+    allPlanDisposalNode = []
+    allRootDisposalNode =  [{name:"根节点",id:null}]
+    allDisposalNodeChild = []
+    ngOnInit(): void {
+      //所有非数据节点
+      this.allDisposalNode.forEach(item => {
+        if(!item.sitePlanId && !item.buildingAreaId){
+          this.allPlanDisposalNode.push(item)
+        }
+      })
+
+      //所有一级节点
+      this.allDisposalNode.forEach(item => {
+        if(!item.parentId){
+          this.allRootDisposalNode.push(item)
+        }
+      })
+      this.allDisposalNodeChild = JSON.parse(JSON.stringify(this.allDisposalNode))
+      this.allDisposalNodeChild.forEach(item => {
+        item.children = []
+        this.allDisposalNodeChild.forEach(i => {
+          if(i.parentId == item.id){
+            item.children.push(i)
+          }
+        })
+      })
+      // console.log(this.nodeItem.id)
+    }
+    onNoClick(): void {
+      this.dialogRef.close();
+    }
+    nodeItem
+    itemChildNum = 0 //点击处置节点子数据节点的数量
+    clickNode(item){
+      console.log(item)
+      this.nodeItem = item
+      this.allDisposalNodeChild.forEach(item => {
+        if(item.id ==  this.nodeItem.id){
+          this.itemChildNum = item.children.length
+        }
+      })
+    }
+
+    selectedBuildingData = this.data.selectedBuildingData
+    selectedSiteData = this.data.selectedSiteData
+    onSubmit(value,type){
+      // console.log(type)
+      let name = this.selectedBuildingData.name + '-' + this.selectedSiteData.name
+      //如果保存到已有节点
+      var postdata = {
+        id: "",
+        name: name,
+        level: 0,
+        order: this.itemChildNum,
+        description: "",
+        notes: "",
+        weather: null,
+        airTemperature: null,
+        windDirection: null,
+        windScale: null,
+        imageNames: null,
+        imageUrls: null,
+        parentId:  this.nodeItem ? this.nodeItem.id : null,
+        disasterId: this.data.disasterId,
+        planComponentId: sessionStorage.getItem('planId') || '',
+        companyId: this.data.siteOrbuilding == -1 ? sessionStorage.getItem('companyId') : null,
+        sitePlanId:  this.data.siteOrbuilding==-1 ? this.selectedSiteData.id : null,
+        buildingId: this.selectedBuildingData.id || null,
+        buildingAreaId: this.data.siteOrbuilding!=-1 ? this.selectedSiteData.id : null
+      }
+      if(type == 'old'){
+        let istrue = this.canvasData.findDisposalNode(this.nodeItem.id,name)
+        let putdata = this.nodeItem
+            putdata.weather = this.canvasData.selectPanelPointBaseData.weather
+            putdata.airTemperature = Number(this.canvasData.selectPanelPointBaseData.airTemperature)
+            putdata.windScale = Number(this.canvasData.selectPanelPointBaseData.windScale) 
+            putdata.windDirection = Number(this.canvasData.selectPanelPointBaseData.windDirection) 
+            putdata.description = this.canvasData.selectPanelPointBaseData.description
+            putdata.notes = this.canvasData.selectPanelPointBaseData.notes
+        
+        
+        if(istrue){//如果该处置节点下已有同名数据节点 则只修改 2个接口
+          new Promise((resolve,reject)=>{
+            this.http.put(`/api/DisposalNodes/${value.nodeId}`,putdata).subscribe(data => {
+              resolve("更新处置节点成功,将天气 节点详情等信息保存到点击的节点")
+            })
+          }).then((values)=>{
+            this.canvasData.sendMessage('send a message');//发布一条消息
+              // 保存平面图数据到当前节点
+              let postdata =JSON.parse(JSON.stringify(this.canvasData.selectPanelPoint)) 
+              postdata.Data = JSON.stringify(postdata.Data)
+              this.http.post(`/api/DisposalNodeData`,postdata).subscribe(data => {
+                const config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存成功','确定',config)
+              },err=>{
+                const config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存失败','确定',config)
+              })
+              this.dialogRef.close();
+              this.canvasData.sendMessage('send a message');//发布一条消息
+          })
+          
+        }else{//需要3个接口
+          new Promise((resolve,reject)=>{
+            this.http.put(`/api/DisposalNodes/${value.nodeId}`,putdata).subscribe(data => {
+              resolve("更新处置节点成功,将天气 节点详情等信息保存到点击的节点")
+            })
+          }).then((values)=>{
+            console.log(values)
+            postdata.level = putdata.level + 1 
+            new Promise((resolve,reject) => {
+              this.http.post(`/api/DisposalNodes`,postdata).subscribe(data => {
+                resolve(data)
+              })
+            }).then((data:any)=>{
+              console.log(7788,data)
+              let objData = {
+                id: "",
+                data: JSON.stringify(this.canvasData.selectPanelPoint.Data) || null,
+                version: this.canvasData.selectPanelPoint.Version || "2.0",
+                disposalNodeId: data.id,
+                planComponentId: sessionStorage.getItem("planId"),
+              }
+              this.http.post(`/api/DisposalNodeData`,objData).subscribe(data => {
+                const config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存成功','确定',config)
+              },err=>{
+                const config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存失败','确定',config)
+              })
+              this.dialogRef.close();
+              this.canvasData.sendMessage('send a message');//发布一条消息
+            })
+          })
+        }
+
+      }else{//如果保存到新建节点
+        let dispositionNodeData //处置节点data
+        let order
+        let oneLevelNum = []
+        //将order赋值为所有一级节点最后一个+1
+        this.allDisposalNode.forEach(item => {
+          if(!item.parentId){
+            oneLevelNum.push(item)
+          }
+        })
+        if(oneLevelNum.length == 0){
+          order = 0
+        }else{
+          order = oneLevelNum[oneLevelNum.length - 1].order + 1
+        }
+        
+        if(this.nodeItem){//如果点击了下拉选择框
+          if(this.nodeItem.id != null){
+            this.allDisposalNodeChild.forEach(item => {
+              if(item.id == this.nodeItem.id){
+                order = item.children.length
+              }
+            })
+          }
+        }
+        dispositionNodeData = {
+          id: "",
+          name: value.name,
+          level: this.nodeItem && this.nodeItem.id != null ? this.nodeItem.level + 1 : 0,
+          order: order,
+          description: "",
+          notes: "",
+          weather: null,
+          airTemperature: 0,
+          windDirection: 0,
+          windScale: 0,
+          imageNames: null,
+          imageUrls: null,
+          parentId: this.nodeItem ? this.nodeItem.id : null,
+          disasterId: this.data.disasterId,
+          planComponentId: sessionStorage.getItem('planId') || '',
+          companyId: null,
+          sitePlanId: null,
+          buildingId: null,
+          buildingAreaId: null
+        }
+
+        dispositionNodeData.weather = this.canvasData.selectPanelPointBaseData.weather
+        dispositionNodeData.airTemperature = Number(this.canvasData.selectPanelPointBaseData.airTemperature)
+        dispositionNodeData.windScale = Number(this.canvasData.selectPanelPointBaseData.windScale) 
+        dispositionNodeData.windDirection = Number(this.canvasData.selectPanelPointBaseData.windDirection) 
+        dispositionNodeData.description = this.canvasData.selectPanelPointBaseData.description
+        dispositionNodeData.notes = this.canvasData.selectPanelPointBaseData.notes
+        //1.先创建一个处置节点  然后 .then  2.创建数据节点到刚创建的处置节点  3.然后拿着创建好的数据节点的id  将平面图data保存
+        new Promise((resolve,reject) => {
+          this.http.post("/api/DisposalNodes",dispositionNodeData).subscribe((data:any) => {
+            resolve(data.id)
+          })
+        }).then((id) => {
+          let dataNodeData 
+          console.log("qnm",id)
+          new Promise((resolve,reject) => {
+            postdata.parentId = id
+            postdata.level = dispositionNodeData.level + 1
+            this.http.post("/api/DisposalNodes",postdata).subscribe((data:any) => {
+              resolve(data)
+            })
+          }).then((data:any) => {
+            // 保存平面图数据到当前节点
+              // console.log(6666,data)
+              // let postdata =JSON.parse(JSON.stringify(this.canvasData.selectPanelPoint)) 
+              // postdata.Data = JSON.stringify(postdata.Data)
+              let objData = {
+                id: "",
+                data: JSON.stringify(this.canvasData.selectPanelPoint.Data) || null,
+                version: this.canvasData.selectPanelPoint.Version || "2.0",
+                disposalNodeId: data.id,
+                planComponentId: sessionStorage.getItem("planId"),
+              }
+              
+              this.http.post(`/api/DisposalNodeData`,objData).subscribe(data => {
+                const config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存成功','确定',config)
+                
+              },err=>{
+                const config = new MatSnackBarConfig();
+                config.verticalPosition = 'top';
+                config.duration = 3000
+                this.snackBar.open('保存失败','确定',config)
+              })
+              this.dialogRef.close();
+              this.canvasData.sendMessage("send a message")
+          })
+        })
+      }
+    }
+}
\ No newline at end of file
diff --git a/src/app/ui/collection-tools/saveOne.html b/src/app/ui/collection-tools/saveOne.html
new file mode 100644
index 0000000..a6b0b32
--- /dev/null
+++ b/src/app/ui/collection-tools/saveOne.html
@@ -0,0 +1,5 @@
+<div mat-dialog-title>处置节点保存</div>
+<div style="display: flex;">
+    <button mat-stroked-button style="margin-right: 5px;" (click)="saveType('new')">新建节点并保存</button>
+    <button mat-stroked-button (click)="saveType('old')">保存到已有节点</button>
+</div>
\ No newline at end of file
diff --git a/src/app/ui/collection-tools/saveTwo.html b/src/app/ui/collection-tools/saveTwo.html
new file mode 100644
index 0000000..fec97ff
--- /dev/null
+++ b/src/app/ui/collection-tools/saveTwo.html
@@ -0,0 +1,53 @@
+<div *ngIf="type == 'new'">
+    <div mat-dialog-title>新增节点</div>
+    <div>
+        <form (ngSubmit)="onSubmit(form.value,'new')" #form="ngForm" class="example-container">
+
+            <div mat-dialog-content>
+                <mat-form-field>
+                    <input type="text" matInput ngModel
+                    required name="name" placeholder="节点名称" autocomplete="off">
+                </mat-form-field>
+            </div>
+            <div mat-dialog-content>
+                <mat-form-field>
+                    <mat-select [(value)]="allRootDisposalNode[0].name" required placeholder="父节点名称">
+                        <mat-option *ngFor="let item of allRootDisposalNode" [value]="item.name" (click)="clickNode(item)">
+                            {{item.name}}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>  
+            <div mat-dialog-actions>
+                <button mat-raised-button color="primary" type="submit" 
+                [disabled]="!form.form.valid">
+                    确定
+                </button>
+                <button mat-raised-button mat-dialog-close>取消</button>
+            </div>
+        </form>
+    </div>
+</div>
+<div *ngIf="type == 'old'">
+    <div mat-dialog-title>保存到已有节点</div>
+    <div>
+        <form (ngSubmit)="onSubmit(form.value,'old')" #form="ngForm" class="example-container">
+            <div mat-dialog-content>
+                <mat-form-field>
+                    <mat-select required ngModel placeholder="父节点名称" name="nodeId">
+                        <mat-option *ngFor="let item of allPlanDisposalNode" [value]="item.id"  (click)="clickNode(item)">
+                            {{item.name}}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>  
+            <div mat-dialog-actions>
+                <button mat-raised-button color="primary" type="submit" 
+                [disabled]="!form.form.valid">
+                    确定
+                </button>
+                <button mat-raised-button mat-dialog-close>取消</button>
+            </div>
+        </form>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/ui/collection-tools/viewdetails.html b/src/app/ui/collection-tools/viewdetails.html
new file mode 100644
index 0000000..76638c2
--- /dev/null
+++ b/src/app/ui/collection-tools/viewdetails.html
@@ -0,0 +1,24 @@
+<div style="position: relative;width: 1400px;height: 800px;line-height: 800px;" class="swiper-container">
+    <div style="position: absolute;right: -2px;top: -392px;cursor: pointer;z-index: 999;width: 24px;height: 24px;" (click)="closeDialog()">
+        <span><mat-icon>clear</mat-icon></span>
+    </div>
+    
+    <div class="swiper-wrapper">
+        <div class="swiper-slide" style="text-align: center;" *ngFor="let img of imagesArr">
+            <img id="bigimg" (mousewheel)="zoomimg($event)" style="
+            max-width: 96%;
+            max-height: 100%;
+            min-width: 1px;
+            min-height: 1px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            margin: auto;" [src]="img.PropertyValue" alt="">
+        </div>
+    </div>
+      <!-- 如果需要导航按钮 -->
+    <div class="swiper-button-next"></div>
+    <div class="swiper-button-prev"></div>
+</div>
\ No newline at end of file
diff --git a/src/app/ui/enterpriseuser/enterpriseuser.component.html b/src/app/ui/enterpriseuser/enterpriseuser.component.html
index f8e8e66..ca37553 100644
--- a/src/app/ui/enterpriseuser/enterpriseuser.component.html
+++ b/src/app/ui/enterpriseuser/enterpriseuser.component.html
@@ -41,12 +41,12 @@
   
     <ng-container matColumnDef="post">
       <th mat-header-cell *matHeaderCellDef>消防救援站</th>
-      <td mat-cell *matCellDef="let element">上海总队</td>
+      <td mat-cell *matCellDef="let element">{{element.organizationName}}</td>
     </ng-container>
 
     <ng-container matColumnDef="tel">
       <th mat-header-cell *matHeaderCellDef>手机号</th>
-      <td mat-cell *matCellDef="let element">13562321997</td>
+      <td mat-cell *matCellDef="let element">{{element.phone}}</td>
     </ng-container>
   
     <ng-container matColumnDef="time">
diff --git a/src/app/ui/teacherManagement/enterpriseuser.component.html b/src/app/ui/teacherManagement/enterpriseuser.component.html
index b2e9ba1..b2f662d 100644
--- a/src/app/ui/teacherManagement/enterpriseuser.component.html
+++ b/src/app/ui/teacherManagement/enterpriseuser.component.html
@@ -41,7 +41,7 @@
   
     <ng-container matColumnDef="post">
       <th mat-header-cell *matHeaderCellDef>消防救援站</th>
-      <td mat-cell *matCellDef="let element">上海总队</td>
+      <td mat-cell *matCellDef="let element">{{element.organizationName}}</td>
     </ng-container>
   
     <ng-container matColumnDef="time">
diff --git a/src/app/ui/ui-routing.module.ts b/src/app/ui/ui-routing.module.ts
index 987b642..3040846 100644
--- a/src/app/ui/ui-routing.module.ts
+++ b/src/app/ui/ui-routing.module.ts
@@ -4,13 +4,14 @@ import { AllFileComponent } from './all-file/all-file.component';
 import { EnterpriseuserComponent } from './enterpriseuser/enterpriseuser.component';
 import { TeacherManagementComponent } from './teacherManagement/enterpriseuser.component';
 import {EhartsStatisticsComponent} from './eharts-statistics/eharts-statistics.component'
-
 import { LearningRecordDetailsComponent } from './learning-record-details/learning-record-details.component';
 import { CreateExamComponent } from './create-exam/create-exam.component';
 import { LookOverTestComponent } from './look-over-test/look-over-test.component';
 import { StatisticAnalysisComponent } from './statistic-analysis/statistic-analysis.component';
 import { JoinExamComponent } from './join-exam/join-exam.component';
 import { TestRecordsComponent } from './test-records/test-records.component';
+import { CollectionToolsComponent } from './collection-tools/collection-tools.component'
+
 const routes: Routes = [
     { path: '', component:CreateExamComponent },
     { path: 'createexam', component:CreateExamComponent },
@@ -20,6 +21,7 @@ const routes: Routes = [
     { path: 'testRecords', component:TestRecordsComponent },
     { path: 'teachear', component:TeacherManagementComponent }, //管理员  教员页面
     { path: 'examinee', component:EnterpriseuserComponent }, //管理员  考生页面
+    { path: 'canvasTool', component:CollectionToolsComponent }, //编制工具
 ]
 @NgModule({
     imports: [RouterModule.forChild(routes)],
diff --git a/src/app/ui/ui.module.ts b/src/app/ui/ui.module.ts
index e911908..e0a90db 100644
--- a/src/app/ui/ui.module.ts
+++ b/src/app/ui/ui.module.ts
@@ -65,8 +65,13 @@ import { StatisticAnalysisComponent } from './statistic-analysis/statistic-analy
 import { JoinExamComponent } from './join-exam/join-exam.component';
 import { TestRecordsComponent } from './test-records/test-records.component'
 import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+import {CollectionToolsComponent,CreateBuilding,EditBuilding,ViewDetailss,} from './collection-tools/collection-tools.component'
+import {leftFunctionalDomainComponent,editPlaneFigureComponent,addDisposalNodeComponent,editDisposalNodeComponent} from './collection-tools/leftFunctionalDomain'
+import {saveOneDialog,saveTwoDialog} from './collection-tools/save'
+import {WorkingAreaComponent} from '../working-area/working-area.component'
+import { NzTreeModule } from 'ng-zorro-antd/tree';
 @NgModule({
-  declarations: [FolderDialog,ViewDetails,ChangepasswordComponent,SizePipe,NamePipe,NamePipe2,NamePipe3,ConfirmpswDirective, AllFileComponent, ChangeuserdataComponent, UploadFilesComponent,AddEnterpriserUser,EnterpriseuserComponent,editenterpriseuser,seeenterpriseuser,TeacherManagementComponent,editTeacher,AddTeacher,seeTeacher, LearningRecordDetailsComponent, EhartsStatisticsComponent, CreateExamComponent, LookOverTestComponent, StatisticAnalysisComponent, JoinExamComponent, TestRecordsComponent,testState,CreateDialog],
+  declarations: [FolderDialog,ViewDetails,ChangepasswordComponent,SizePipe,NamePipe,NamePipe2,NamePipe3,ConfirmpswDirective, AllFileComponent, ChangeuserdataComponent, UploadFilesComponent,AddEnterpriserUser,EnterpriseuserComponent,editenterpriseuser,seeenterpriseuser,TeacherManagementComponent,editTeacher,AddTeacher,seeTeacher, LearningRecordDetailsComponent, EhartsStatisticsComponent, CreateExamComponent, LookOverTestComponent, StatisticAnalysisComponent, JoinExamComponent, TestRecordsComponent,testState,CreateDialog,CollectionToolsComponent,CreateBuilding,EditBuilding,ViewDetailss,leftFunctionalDomainComponent,editPlaneFigureComponent,addDisposalNodeComponent,editDisposalNodeComponent,saveOneDialog,saveTwoDialog,WorkingAreaComponent],
 
   imports: [
     NzDatePickerModule,
@@ -115,7 +120,8 @@ import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
     ScrollingModule,
     ReactiveFormsModule,
     FormsModule,
-    FileUploadModule
+    FileUploadModule,
+    NzTreeModule
   ],
   exports: [
     AllFileComponent
diff --git a/src/app/working-area/charm.js b/src/app/working-area/charm.js
new file mode 100644
index 0000000..a87804d
--- /dev/null
+++ b/src/app/working-area/charm.js
@@ -0,0 +1,836 @@
+export class Charm {
+  constructor(renderingEngine = PIXI) {
+
+    if (renderingEngine === undefined) throw new Error("Please assign a rendering engine in the constructor before using charm.js");
+
+    //Find out which rendering engine is being used (the default is Pixi)
+    this.renderer = "";
+
+    //If the `renderingEngine` is Pixi, set up Pixi object aliases
+    if (renderingEngine.ParticleContainer && renderingEngine.Sprite) {
+      this.renderer = "pixi";
+    }
+
+
+    //An array to store the global tweens
+    this.globalTweens = [];
+
+    //An object that stores all the easing formulas
+    this.easingFormulas = {
+
+      //Linear
+      linear(x) {
+        return x;
+      },
+
+      //Smoothstep
+      smoothstep(x) {
+        return x * x * (3 - 2 * x);
+      },
+      smoothstepSquared(x) {
+        return Math.pow((x * x * (3 - 2 * x)), 2);
+      },
+      smoothstepCubed(x) {
+        return Math.pow((x * x * (3 - 2 * x)), 3);
+      },
+
+      //Acceleration
+      acceleration(x) {
+        return x * x;
+      },
+      accelerationCubed(x) {
+        return Math.pow(x * x, 3);
+      },
+
+      //Deceleration
+      deceleration(x) {
+        return 1 - Math.pow(1 - x, 2);
+      },
+      decelerationCubed(x) {
+        return 1 - Math.pow(1 - x, 3);
+      },
+
+      //Sine
+      sine(x) {
+        return Math.sin(x * Math.PI / 2);
+      },
+      sineSquared(x) {
+        return Math.pow(Math.sin(x * Math.PI / 2), 2);
+      },
+      sineCubed(x) {
+        return Math.pow(Math.sin(x * Math.PI / 2), 2);
+      },
+      inverseSine(x) {
+        return 1 - Math.sin((1 - x) * Math.PI / 2);
+      },
+      inverseSineSquared(x) {
+        return 1 - Math.pow(Math.sin((1 - x) * Math.PI / 2), 2);
+      },
+      inverseSineCubed(x) {
+        return 1 - Math.pow(Math.sin((1 - x) * Math.PI / 2), 3);
+      },
+
+      //Spline
+      spline(t, p0, p1, p2, p3) {
+        return 0.5 * (
+          (2 * p1) +
+          (-p0 + p2) * t +
+          (2 * p0 - 5 * p1 + 4 * p2 - p3) * t * t +
+          (-p0 + 3 * p1 - 3 * p2 + p3) * t * t * t
+        );
+      },
+
+      //Bezier curve
+      cubicBezier(t, a, b, c, d) {
+        let t2 = t * t;
+        let t3 = t2 * t;
+        return a + (-a * 3 + t * (3 * a - a * t)) * t + (3 * b + t * (-6 * b + b * 3 * t)) * t + (c * 3 - c * 3 * t) * t2 + d * t3;
+      }
+    };
+
+    //Add `scaleX` and `scaleY` properties to Pixi sprites
+    this._addScaleProperties = (sprite) => {
+      if (this.renderer === "pixi") {
+        if (!("scaleX" in sprite) && ("scale" in sprite) && ("x" in sprite.scale)) {
+          Object.defineProperty(
+            sprite,
+            "scaleX", {
+            get() {
+              return sprite.scale.x
+            },
+            set(value) {
+              sprite.scale.x = value
+            }
+          }
+          );
+        }
+        if (!("scaleY" in sprite) && ("scale" in sprite) && ("y" in sprite.scale)) {
+          Object.defineProperty(
+            sprite,
+            "scaleY", {
+            get() {
+              return sprite.scale.y
+            },
+            set(value) {
+              sprite.scale.y = value
+            }
+          }
+          );
+        }
+      }
+    };
+  }
+
+  //The low level `tweenProperty` function is used as the foundation
+  //for the the higher level tween methods.
+  tweenProperty(
+    sprite, //Sprite object
+    property, //String property
+    startValue, //Tween start value
+    endValue, //Tween end value
+    totalFrames, //Duration in frames
+    type = "smoothstep", //The easing type
+    yoyo = false, //Yoyo?
+    delayBeforeRepeat = 0 //Delay in frames before repeating
+  ) {
+
+    //Create the tween object
+    let o = {};
+
+    //If the tween is a bounce type (a spline), set the
+    //start and end magnitude values
+    let typeArray = type.split(" ");
+    if (typeArray[0] === "bounce") {
+      o.startMagnitude = parseInt(typeArray[1]);
+      o.endMagnitude = parseInt(typeArray[2]);
+    }
+
+    //Use `o.start` to make a new tween using the current
+    //end point values
+    o.start = (startValue, endValue) => {
+
+      //Clone the start and end values so that any possible references to sprite
+      //properties are converted to ordinary numbers 
+      o.startValue = JSON.parse(JSON.stringify(startValue));
+      o.endValue = JSON.parse(JSON.stringify(endValue));
+      o.playing = true;
+      o.totalFrames = totalFrames;
+      o.frameCounter = 0;
+
+      //Add the tween to the global `tweens` array. The `tweens` array is
+      //updated on each frame
+      this.globalTweens.push(o);
+    };
+
+    //Call `o.start` to start the tween
+    o.start(startValue, endValue);
+
+    //The `update` method will be called on each frame by the game loop.
+    //This is what makes the tween move
+    o.update = () => {
+
+      let time, curvedTime;
+
+      if (o.playing) {
+
+        //If the elapsed frames are less than the total frames,
+        //use the tweening formulas to move the sprite
+        if (o.frameCounter < o.totalFrames) {
+
+          //Find the normalized value
+          let normalizedTime = o.frameCounter / o.totalFrames;
+
+          //Select the correct easing function from the 
+          //`ease` object’s library of easing functions
+
+
+          //If it's not a spline, use one of the ordinary easing functions
+          if (typeArray[0] !== "bounce") {
+            curvedTime = this.easingFormulas[type](normalizedTime);
+          }
+
+          //If it's a spline, use the `spline` function and apply the
+          //2 additional `type` array values as the spline's start and
+          //end points
+          else {
+            curvedTime = this.easingFormulas.spline(normalizedTime, o.startMagnitude, 0, 1, o.endMagnitude);
+          }
+
+          //Interpolate the sprite's property based on the curve
+          sprite[property] = (o.endValue * curvedTime) + (o.startValue * (1 - curvedTime));
+
+          o.frameCounter += 1;
+        }
+
+        //When the tween has finished playing, run the end tasks
+        else {
+          sprite[property] = o.endValue;
+          o.end();
+        }
+      }
+    };
+
+    //The `end` method will be called when the tween is finished
+    o.end = () => {
+
+      //Set `playing` to `false`
+      o.playing = false;
+
+      //Call the tween's `onComplete` method, if it's been assigned
+      if (o.onComplete) o.onComplete();
+
+      //Remove the tween from the `tweens` array
+      this.globalTweens.splice(this.globalTweens.indexOf(o), 1);
+
+      //If the tween's `yoyo` property is `true`, create a new tween
+      //using the same values, but use the current tween's `startValue`
+      //as the next tween's `endValue` 
+      if (yoyo) {
+        this.wait(delayBeforeRepeat).then(() => {
+          o.start(o.endValue, o.startValue);
+        });
+      }
+    };
+
+    //Pause and play methods
+    o.play = () => o.playing = true;
+    o.pause = () => o.playing = false;
+
+    //Return the tween object
+    return o;
+  }
+
+  //`makeTween` is a general low-level method for making complex tweens
+  //out of multiple `tweenProperty` functions. Its one argument,
+  //`tweensToAdd` is an array containing multiple `tweenProperty` calls
+
+  makeTween(tweensToAdd) {
+
+    //Create an object to manage the tweens
+    let o = {};
+
+    //Create a `tweens` array to store the new tweens
+    o.tweens = [];
+
+    //Make a new tween for each array
+    tweensToAdd.forEach(tweenPropertyArguments => {
+
+      //Use the tween property arguments to make a new tween
+      let newTween = this.tweenProperty(...tweenPropertyArguments);
+
+      //Push the new tween into this object's internal `tweens` array
+      o.tweens.push(newTween);
+    });
+
+    //Add a counter to keep track of the
+    //number of tweens that have completed their actions
+    let completionCounter = 0;
+
+    //`o.completed` will be called each time one of the tweens
+    //finishes
+    o.completed = () => {
+
+      //Add 1 to the `completionCounter`
+      completionCounter += 1;
+
+      //If all tweens have finished, call the user-defined `onComplete`
+      //method, if it's been assigned. Reset the `completionCounter`
+      if (completionCounter === o.tweens.length) {
+        if (o.onComplete) o.onComplete();
+        completionCounter = 0;
+      }
+    };
+
+    //Add `onComplete` methods to all tweens
+    o.tweens.forEach(tween => {
+      tween.onComplete = () => o.completed();
+    });
+
+    //Add pause and play methods to control all the tweens
+    o.pause = () => {
+      o.tweens.forEach(tween => {
+        tween.playing = false;
+      });
+    };
+    o.play = () => {
+      o.tweens.forEach(tween => {
+        tween.playing = true;
+      });
+    };
+
+    //Return the tween object
+    return o;
+  }
+
+  /* High level tween methods */
+
+  //1. Simple tweens
+
+  //`fadeOut`
+  fadeOut(sprite, frames = 60) {
+    return this.tweenProperty(
+      sprite, "alpha", sprite.alpha, 0, frames, "sine"
+    );
+  }
+
+  //`fadeIn`
+  fadeIn(sprite, frames = 60) {
+    return this.tweenProperty(
+      sprite, "alpha", sprite.alpha, 1, frames, "sine"
+    );
+  }
+
+  //`pulse`
+  //Fades the sprite in and out at a steady rate.
+  //Set the `minAlpha` to something greater than 0 if you
+  //don't want the sprite to fade away completely
+  pulse(sprite, frames = 60, minAlpha = 0) {
+    return this.tweenProperty(
+      sprite, "alpha", sprite.alpha, minAlpha, frames, "smoothstep", true
+    );
+  }
+
+  //2. Complex tweens
+
+  slide(
+    sprite, endX, endY,
+    frames = 60, type = "smoothstep", yoyo = false, delayBeforeRepeat = 0
+  ) {
+    return this.makeTween([
+
+      //Create the x axis tween
+      [sprite, "x", sprite.x, endX, frames, type, yoyo, delayBeforeRepeat],
+
+      //Create the y axis tween
+      [sprite, "y", sprite.y, endY, frames, type, yoyo, delayBeforeRepeat]
+
+    ]);
+  }
+
+  breathe(
+    sprite, endScaleX = 0.8, endScaleY = 0.8,
+    frames = 60, yoyo = true, delayBeforeRepeat = 0
+  ) {
+
+    //Add `scaleX` and `scaleY` properties to Pixi sprites
+    this._addScaleProperties(sprite);
+
+    return this.makeTween([
+
+      //Create the scaleX tween
+      [
+        sprite, "scaleX", sprite.scaleX, endScaleX,
+        frames, "smoothstepSquared", yoyo, delayBeforeRepeat
+      ],
+
+      //Create the scaleY tween
+      [
+        sprite, "scaleY", sprite.scaleY, endScaleY,
+        frames, "smoothstepSquared", yoyo, delayBeforeRepeat
+      ]
+    ]);
+  }
+
+  scale(sprite, endScaleX = 0.5, endScaleY = 0.5, frames = 60) {
+
+    //Add `scaleX` and `scaleY` properties to Pixi sprites
+    this._addScaleProperties(sprite);
+
+    return this.makeTween([
+
+      //Create the scaleX tween
+      [
+        sprite, "scaleX", sprite.scaleX, endScaleX,
+        frames, "smoothstep", false
+      ],
+
+      //Create the scaleY tween
+      [
+        sprite, "scaleY", sprite.scaleY, endScaleY,
+        frames, "smoothstep", false
+      ]
+    ]);
+  }
+
+  strobe(
+    sprite, scaleFactor = 1.3, startMagnitude = 10, endMagnitude = 20,
+    frames = 10, yoyo = true, delayBeforeRepeat = 0
+  ) {
+
+    let bounce = "bounce " + startMagnitude + " " + endMagnitude;
+
+    //Add `scaleX` and `scaleY` properties to Pixi sprites
+    this._addScaleProperties(sprite);
+
+    return this.makeTween([
+
+      //Create the scaleX tween
+      [
+        sprite, "scaleX", sprite.scaleX, scaleFactor, frames,
+        bounce, yoyo, delayBeforeRepeat
+      ],
+
+      //Create the scaleY tween
+      [
+        sprite, "scaleY", sprite.scaleY, scaleFactor, frames,
+        bounce, yoyo, delayBeforeRepeat
+      ]
+    ]);
+  }
+
+  wobble(
+    sprite,
+    scaleFactorX = 1.2,
+    scaleFactorY = 1.2,
+    frames = 10,
+    xStartMagnitude = 10,
+    xEndMagnitude = 10,
+    yStartMagnitude = -10,
+    yEndMagnitude = -10,
+    friction = 0.98,
+    yoyo = true,
+    delayBeforeRepeat = 0
+  ) {
+
+    let bounceX = "bounce " + xStartMagnitude + " " + xEndMagnitude;
+    let bounceY = "bounce " + yStartMagnitude + " " + yEndMagnitude;
+
+    //Add `scaleX` and `scaleY` properties to Pixi sprites
+    this._addScaleProperties(sprite);
+
+    let o = this.makeTween([
+
+      //Create the scaleX tween
+      [
+        sprite, "scaleX", sprite.scaleX, scaleFactorX, frames,
+        bounceX, yoyo, delayBeforeRepeat
+      ],
+
+      //Create the scaleY tween
+      [
+        sprite, "scaleY", sprite.scaleY, scaleFactorY, frames,
+        bounceY, yoyo, delayBeforeRepeat
+      ]
+    ]);
+
+    //Add some friction to the `endValue` at the end of each tween 
+    o.tweens.forEach(tween => {
+      tween.onComplete = () => {
+
+        //Add friction if the `endValue` is greater than 1
+        if (tween.endValue > 1) {
+          tween.endValue *= friction;
+
+          //Set the `endValue` to 1 when the effect is finished and 
+          //remove the tween from the global `tweens` array
+          if (tween.endValue <= 1) {
+            tween.endValue = 1;
+            this.removeTween(tween);
+          }
+        }
+      };
+    });
+
+    return o;
+  }
+
+  //3. Motion path tweens
+
+  followCurve(
+    sprite,
+    pointsArray,
+    totalFrames,
+    type = "smoothstep",
+    yoyo = false,
+    delayBeforeRepeat = 0
+  ) {
+
+    //Create the tween object
+    let o = {};
+
+    //If the tween is a bounce type (a spline), set the
+    //start and end magnitude values
+    let typeArray = type.split(" ");
+    if (typeArray[0] === "bounce") {
+      o.startMagnitude = parseInt(typeArray[1]);
+      o.endMagnitude = parseInt(typeArray[2]);
+    }
+
+    //Use `tween.start` to make a new tween using the current
+    //end point values
+    o.start = (pointsArray) => {
+      o.playing = true;
+      o.totalFrames = totalFrames;
+      o.frameCounter = 0;
+
+      //Clone the points array
+      o.pointsArray = JSON.parse(JSON.stringify(pointsArray));
+
+      //Add the tween to the `globalTweens` array. The `globalTweens` array is
+      //updated on each frame
+      this.globalTweens.push(o);
+    };
+
+    //Call `tween.start` to start the first tween
+    o.start(pointsArray);
+
+    //The `update` method will be called on each frame by the game loop.
+    //This is what makes the tween move
+    o.update = () => {
+
+      let normalizedTime, curvedTime,
+        p = o.pointsArray;
+
+      if (o.playing) {
+
+        //If the elapsed frames are less than the total frames,
+        //use the tweening formulas to move the sprite
+        if (o.frameCounter < o.totalFrames) {
+
+          //Find the normalized value
+          normalizedTime = o.frameCounter / o.totalFrames;
+
+          //Select the correct easing function
+
+          //If it's not a spline, use one of the ordinary tween
+          //functions
+          if (typeArray[0] !== "bounce") {
+            curvedTime = this.easingFormulas[type](normalizedTime);
+          }
+
+          //If it's a spline, use the `spline` function and apply the
+          //2 additional `type` array values as the spline's start and
+          //end points
+          else {
+            //curve = tweenFunction.spline(n, type[1], 0, 1, type[2]);
+            curvedTime = this.easingFormulas.spline(normalizedTime, o.startMagnitude, 0, 1, o.endMagnitude);
+          }
+
+          //Apply the Bezier curve to the sprite's position 
+          sprite.x = this.easingFormulas.cubicBezier(curvedTime, p[0][0], p[1][0], p[2][0], p[3][0]);
+          sprite.y = this.easingFormulas.cubicBezier(curvedTime, p[0][1], p[1][1], p[2][1], p[3][1]);
+
+          //Add one to the `elapsedFrames`
+          o.frameCounter += 1;
+        }
+
+        //When the tween has finished playing, run the end tasks
+        else {
+          //sprite[property] = o.endValue;
+          o.end();
+        }
+      }
+    };
+
+    //The `end` method will be called when the tween is finished
+    o.end = () => {
+
+      //Set `playing` to `false`
+      o.playing = false;
+
+      //Call the tween's `onComplete` method, if it's been
+      //assigned
+      if (o.onComplete) o.onComplete();
+
+      //Remove the tween from the global `tweens` array
+      this.globalTweens.splice(this.globalTweens.indexOf(o), 1);
+
+      //If the tween's `yoyo` property is `true`, reverse the array and
+      //use it to create a new tween
+      if (yoyo) {
+        this.wait(delayBeforeRepeat).then(() => {
+          o.pointsArray = o.pointsArray.reverse();
+          o.start(o.pointsArray);
+        });
+      }
+    };
+
+    //Pause and play methods
+    o.pause = () => {
+      o.playing = false;
+    };
+    o.play = () => {
+      o.playing = true;
+    };
+
+    //Return the tween object
+    return o;
+  }
+
+  walkPath(
+    sprite, //The sprite
+    originalPathArray, //A 2D array of waypoints
+    totalFrames = 300, //The duration, in frames
+    type = "smoothstep", //The easing type
+    loop = false, //Should the animation loop?
+    yoyo = false, //Shoud the direction reverse?
+    delayBetweenSections = 0 //Delay, in milliseconds, between sections
+  ) {
+
+    //Clone the path array so that any possible references to sprite
+    //properties are converted into ordinary numbers 
+    let pathArray = JSON.parse(JSON.stringify(originalPathArray));
+
+    //Figure out the duration, in frames, of each path section by 
+    //dividing the `totalFrames` by the length of the `pathArray`
+    let frames = totalFrames / pathArray.length;
+
+    //Set the current point to 0, which will be the first waypoint
+    let currentPoint = 0;
+
+    //The `makePath` function creates a single tween between two points and
+    //then schedules the next path to be made after it
+    let makePath = (currentPoint) => {
+
+      //Use the `makeTween` function to tween the sprite's
+      //x and y position
+      let tween = this.makeTween([
+
+        //Create the x axis tween between the first x value in the
+        //current point and the x value in the following point
+        [
+          sprite,
+          "x",
+          pathArray[currentPoint][0],
+          pathArray[currentPoint + 1][0],
+          frames,
+          type
+        ],
+
+        //Create the y axis tween in the same way
+        [
+          sprite,
+          "y",
+          pathArray[currentPoint][1],
+          pathArray[currentPoint + 1][1],
+          frames,
+          type
+        ]
+      ]);
+
+      //When the tween is complete, advance the `currentPoint` by one.
+      //Add an optional delay between path segments, and then make the
+      //next connecting path
+      tween.onComplete = () => {
+
+        //Advance to the next point
+        currentPoint += 1;
+
+        //If the sprite hasn't reached the end of the
+        //path, tween the sprite to the next point
+        if (currentPoint < pathArray.length - 1) {
+          this.wait(delayBetweenSections).then(() => {
+            tween = makePath(currentPoint);
+          });
+        }
+
+        //If we've reached the end of the path, optionally
+        //loop and yoyo it
+        else {
+
+          //Reverse the path if `loop` is `true`
+          if (loop) {
+
+            //Reverse the array if `yoyo` is `true`
+            if (yoyo) pathArray.reverse();
+
+            //Optionally wait before restarting
+            this.wait(delayBetweenSections).then(() => {
+
+              //Reset the `currentPoint` to 0 so that we can
+              //restart at the first point
+              currentPoint = 0;
+
+              //Set the sprite to the first point
+              sprite.x = pathArray[0][0];
+              sprite.y = pathArray[0][1];
+
+              //Make the first new path
+              tween = makePath(currentPoint);
+
+              //... and so it continues!
+            });
+          }
+        }
+      };
+
+      //Return the path tween to the main function
+      return tween;
+    };
+
+    //Make the first path using the internal `makePath` function (below)
+    let tween = makePath(currentPoint);
+
+    //Pass the tween back to the main program
+    return tween;
+  }
+
+  walkCurve(
+    sprite, //The sprite
+    pathArray, //2D array of Bezier curves
+    totalFrames = 300, //The duration, in frames
+    type = "smoothstep", //The easing type
+    loop = false, //Should the animation loop?
+    yoyo = false, //Should the direction reverse?
+    delayBeforeContinue = 0 //Delay, in milliseconds, between sections
+  ) {
+
+    //Divide the `totalFrames` into sections for each part of the path
+    let frames = totalFrames / pathArray.length;
+
+    //Set the current curve to 0, which will be the first one
+    let currentCurve = 0;
+
+    //The `makePath` function
+    let makePath = (currentCurve) => {
+
+      //Use the custom `followCurve` function to make
+      //a sprite follow a curve
+      let tween = this.followCurve(
+        sprite,
+        pathArray[currentCurve],
+        frames,
+        type
+      );
+
+      //When the tween is complete, advance the `currentCurve` by one.
+      //Add an optional delay between path segments, and then make the
+      //next path
+      tween.onComplete = () => {
+        currentCurve += 1;
+        if (currentCurve < pathArray.length) {
+          this.wait(delayBeforeContinue).then(() => {
+            tween = makePath(currentCurve);
+          });
+        }
+
+        //If we've reached the end of the path, optionally
+        //loop and reverse it
+        else {
+          if (loop) {
+            if (yoyo) {
+
+              //Reverse order of the curves in the `pathArray` 
+              pathArray.reverse();
+
+              //Reverse the order of the points in each curve
+              pathArray.forEach(curveArray => curveArray.reverse());
+            }
+
+            //After an optional delay, reset the sprite to the
+            //beginning of the path and make the next new path
+            this.wait(delayBeforeContinue).then(() => {
+              currentCurve = 0;
+              sprite.x = pathArray[0][0];
+              sprite.y = pathArray[0][1];
+              tween = makePath(currentCurve);
+            });
+          }
+        }
+      };
+
+      //Return the path tween to the main function
+      return tween;
+    };
+
+    //Make the first path
+    let tween = makePath(currentCurve);
+
+    //Pass the tween back to the main program
+    return tween;
+  }
+
+  //4. Utilities
+
+  /*
+  The `wait` method lets you set up a timed sequence of events
+
+    wait(1000)
+      .then(() => console.log("One"))
+      .then(() => wait(1000))
+      .then(() => console.log("Two"))
+      .then(() => wait(1000))
+      .then(() => console.log("Three"))
+
+  */
+
+  wait(duration = 0) {
+    return new Promise((resolve, reject) => {
+      setTimeout(resolve, duration);
+    });
+  }
+
+  //A utility to remove tweens from the game
+  removeTween(tweenObject) {
+
+    //Remove the tween if `tweenObject` doesn't have any nested
+    //tween objects
+    if (!tweenObject.tweens) {
+      tweenObject.pause();
+
+      //array.splice(-1,1) will always remove last elemnt of array, so this
+      //extra check prevents that (Thank you, MCumic10! https://github.com/kittykatattack/charm/issues/5)
+      if (this.globalTweens.indexOf(tweenObject) != -1) {
+        this.globalTweens.splice(this.globalTweens.indexOf(tweenObject), 1);
+      }
+
+      //Otherwise, remove the nested tween objects
+    } else {
+      tweenObject.pause();
+      tweenObject.tweens.forEach(element => {
+        this.globalTweens.splice(this.globalTweens.indexOf(element), 1);
+      });
+    }
+  }
+
+  update() {
+
+    //Update all the tween objects in the `globalTweens` array
+    if (this.globalTweens.length > 0) {
+      for (let i = this.globalTweens.length - 1; i >= 0; i--) {
+        let tween = this.globalTweens[i];
+        if (tween) tween.update();
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/working-area/model/PropertyInfo.ts b/src/app/working-area/model/PropertyInfo.ts
new file mode 100644
index 0000000..4ae2c6a
--- /dev/null
+++ b/src/app/working-area/model/PropertyInfo.ts
@@ -0,0 +1,62 @@
+/**
+ * 属性
+ */
+export class PropertyInfo {
+  constructor(instanceData: any) {
+    this.Tag = instanceData.tag;
+    this.Order = instanceData.order;
+    this.Enabled = instanceData.enabled;
+    this.Visible = instanceData.visible;
+    this.Required = instanceData.required;
+    this.RuleName = instanceData.ruleName;
+    this.RuleValue = instanceData.ruleValue;
+    this.PhysicalUnit = instanceData.physicalUnit;
+    this.PropertyName = instanceData.propertyName;
+    this.PropertyType = instanceData.propertyType;
+    this.PropertyValue = instanceData.propertyValue;
+  }
+  /**
+   * 标记位,用于扩展
+   */
+  public Tag: string;
+  /**
+   * 属性排序
+   */
+  public Order: number;
+  /**
+   * 是否启用
+   */
+  public Enabled: boolean;
+  /**
+   * 是否可见
+   */
+  public Visible: boolean;
+  /**
+   * 必填
+   */
+  public Required: boolean;
+  /**
+   * 验证规则名称
+   */
+  public RuleName: string;
+  /**
+   * 验证规则值
+   */
+  public RuleValue: string;
+  /**
+   * 物理单位
+   */
+  public PhysicalUnit: string;
+  /**
+   * 属性名称
+   */
+  public PropertyName: string;
+  /**
+   * 属性类型
+   */
+  public PropertyType: number;
+  /**
+   * 属性值
+   */
+  public PropertyValue: string;
+}
diff --git a/src/app/working-area/model/arrows.ts b/src/app/working-area/model/arrows.ts
new file mode 100644
index 0000000..a553771
--- /dev/null
+++ b/src/app/working-area/model/arrows.ts
@@ -0,0 +1,41 @@
+import { WorkingAreaComponent } from '../working-area.component';
+import * as PIXI from 'pixi.js';
+
+/**
+ * 箭头
+ * 创建一个只有2个点组成的箭头
+ */
+export class Arrows extends PIXI.Container {
+    public line: PIXI.Graphics = new PIXI.Graphics();
+    public ready = false;
+    constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
+        super();
+        this.workingArea.backgroundImage.addChild(this);
+        this.name = this.assetData.Id;
+        this.addChild(this.line);
+        this.refresh();
+        this.interactive = true;
+        this.on('mousedown', event => {
+            if (!this.ready) { return; }
+            event.stopPropagation();
+            this.workingArea.selection.selectOne(this);
+        });
+    }
+    /**
+     * 刷新
+     */
+    public refresh() {
+        this.line.clear();
+        this.line.lineStyle(5, 0xff0000, 1);
+        this.line.moveTo(this.assetData.pointA.x, this.assetData.pointA.y);
+        this.line.lineTo(this.assetData.pointB.x, this.assetData.pointB.y);
+
+        const angle = Math.atan2((this.assetData.pointB.y - this.assetData.pointA.y), (this.assetData.pointB.x - this.assetData.pointA.x))
+            * (180 / Math.PI) + 90;
+
+        this.line.beginFill(0xff0000);
+        console.log(Math.PI / 180 / 1.6);
+        this.line.drawStar(this.assetData.pointB.x, this.assetData.pointB.y, 3, 10, 0, (Math.PI / 180 * angle));
+        this.line.endFill();
+    }
+}
diff --git a/src/app/working-area/model/axImageShape.ts b/src/app/working-area/model/axImageShape.ts
new file mode 100644
index 0000000..99fca6c
--- /dev/null
+++ b/src/app/working-area/model/axImageShape.ts
@@ -0,0 +1,24 @@
+import * as PIXI from 'pixi.js';
+
+
+/**
+ * 安信形状
+ */
+export class AxImageShape extends PIXI.Container {
+    image: PIXI.Sprite;
+
+    constructor() {
+        super();
+
+    }
+
+
+    paintVertexShape(rect: PIXI.Rectangle) {
+
+    }
+    paintBackground(rect: PIXI.Rectangle) { }
+
+    paintForeground(rect: PIXI.Rectangle) { }
+
+    paintEdgeShape(pts: Array<PIXI.Point>) { }
+}
diff --git a/src/app/working-area/model/axShape.ts b/src/app/working-area/model/axShape.ts
new file mode 100644
index 0000000..f285c24
--- /dev/null
+++ b/src/app/working-area/model/axShape.ts
@@ -0,0 +1,56 @@
+import * as PIXI from 'pixi.js';
+// import { Point, Rectangle, Graphics } from 'pixi.js';
+
+/**
+ * 安信形状
+ */
+export class AxShape extends PIXI.Container {
+
+    points: Array<PIXI.Point> = [];
+    title: string;
+    titleVisible: boolean;
+    g: PIXI.Graphics = new PIXI.Graphics();
+
+    constructor() {
+        super();
+        this.addChild(this.g);
+        // this.drawDashedLine(this.g, new Point(0, 0), new Point(0, 200), 0xff0000);
+    }
+    // /**
+    //  * 绘制虚线
+    //  * @param g
+    //  * @param p0
+    //  * @param pe
+    //  * @param color
+    //  * @param width
+    //  * @param dashLen
+    //  */
+    // drawDashedLine(g: Graphics, p0: Point, pe: Point, color: number, width: number = 1, dashLen: number = 5) {
+    //         g.lineStyle(width, color);
+    //         const len = Math.sqrt(Math.pow(pe.x - p0.x, 2) + Math.pow(pe.y - p0.y, 2));
+    //         // tslint:disable-next-line: no-bitwise
+    //         const num = ~~(len / dashLen);
+    //         for (let i = 0; i < num; i++) {
+    //             const x = p0.x + (pe.x - p0.x) / num * i;
+    //             const y = p0.y + (pe.y - p0.y) / num * i;
+    //             // tslint:disable-next-line: no-bitwise
+    //             i & 1 ? g.lineTo(x, y) : g.moveTo(x, y);
+    //         }
+    // }
+
+    paintVertexShape(rect: PIXI.Rectangle) {
+        // this.paintBackground(c, x, y, w, h);
+
+        // if (!this.outline || this.style == null || mxUtils.getValue(
+        // 	this.style, mxConstants.STYLE_BACKGROUND_OUTLINE, 0) == 0)
+        // {
+        // 	c.setShadow(false);
+        // 	this.paintForeground(c, x, y, w, h);
+        // }
+    }
+    paintBackground(rect: PIXI.Rectangle) { }
+
+    paintForeground(rect: PIXI.Rectangle) { }
+
+    paintEdgeShape(pts: Array<PIXI.Point>) { }
+}
diff --git a/src/app/working-area/model/gameMode.ts b/src/app/working-area/model/gameMode.ts
new file mode 100644
index 0000000..feabdbb
--- /dev/null
+++ b/src/app/working-area/model/gameMode.ts
@@ -0,0 +1,7 @@
+/**
+ * 游戏状态
+ */
+export enum GameMode {
+  BasicInformation,
+  Assignment
+}
\ No newline at end of file
diff --git a/src/app/working-area/model/multipointIcon.ts b/src/app/working-area/model/multipointIcon.ts
new file mode 100644
index 0000000..d5467a7
--- /dev/null
+++ b/src/app/working-area/model/multipointIcon.ts
@@ -0,0 +1,248 @@
+import { WorkingAreaComponent } from '../working-area.component';
+import { GameMode } from './gameMode';
+import * as PIXI from 'pixi.js';
+
+/**
+ * 多点连线
+ */
+export class MultipointIcon extends PIXI.Container {
+    public pointsData: PIXI.Point[];
+    public pointsGraphics: PIXI.Graphics[] = [];
+    public iconsTilingSprite: PIXI.TilingSprite[] = [];
+    style = new PIXI.TextStyle({
+        fontFamily: 'Arial',
+        fontSize: 18,
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        fill: ['#000000'],
+        stroke: '#ffffff',
+        strokeThickness: 3,
+        dropShadow: true,
+        dropShadowColor: '#000000',
+        dropShadowBlur: 3,
+        dropShadowAngle: Math.PI / 6,
+        dropShadowDistance: 1,
+        wordWrap: false,
+        wordWrapWidth: 100,
+    });
+
+    public text = new PIXI.Text(this.assetData.Name
+        + '\r\n'
+        + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
+    /**
+     *
+     * @param texture 图片素材
+     * @param points  点集合
+     */
+    constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
+        super();
+        this.name = this.assetData.Id;
+        this.pointsData = this.assetData.MultiPoint;
+        this.x = this.assetData.Point.x;
+        this.y = this.assetData.Point.y;
+        this.workingArea.backgroundImage.addChild(this);
+        // 画线图标
+        for (let i = 0, count = this.pointsData.length - 1; i < count; i++) {
+            const pointA = this.pointsData[i];
+            const pointB = this.pointsData[i + 1];
+
+            const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI);
+            const a = pointB.x - pointA.x;
+            const b = pointB.y - pointA.y;
+            const distance = Math.sqrt(a * a + b * b);
+
+            const icon = new PIXI.TilingSprite(PIXI.Texture.from(this.assetData.ImageUrl), distance, 64);
+            icon.anchor.set(0, 0.5);
+            icon.x = pointA.x;
+            icon.y = pointA.y;
+            icon.angle = angle;
+            icon.height = this.assetData.Thickness === 0 ? 32 : this.assetData.Thickness;
+            this.iconsTilingSprite.push(icon);
+            this.addChild(icon);
+            if (i === 0) {
+                this.text.anchor.set(0.5);
+                this.text.position = icon.position;
+                this.text.y -= this.assetData.Height;
+                this.addChild(this.text);
+            }
+        }
+        // 画点
+        this.pointsData.forEach((item, index, array) => {
+            const iconPoint = new PIXI.Graphics();
+            iconPoint.lineStyle(1, 0xFFBD01, 1);
+            iconPoint.beginFill(0xFFFFFF, 1);
+            iconPoint.drawCircle(0, 0, 15);
+            iconPoint.x = item.x;
+            iconPoint.y = item.y;
+            iconPoint.endFill();
+            iconPoint.visible = false;
+            this.pointsGraphics.push(iconPoint);
+            this.addChild(iconPoint);
+        });
+        // 添加圆点事件
+        this.pointsGraphics.forEach((item, index, array) => {
+            item.interactive = true;
+            item.on('mousedown', event => {
+                event.stopPropagation();
+                if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
+                    event.currentTarget.data = event.data;
+                    event.currentTarget.alpha = 0.5;
+                    event.currentTarget.dragging = true;
+                }
+            })
+                .on('mouseup', event => {
+                    if (event.currentTarget.dragging) {
+                        event.currentTarget.alpha = 1;
+                        event.currentTarget.dragging = false;
+                        event.currentTarget.data = null;
+                    }
+                })
+                .on('mouseupoutside', event => {
+                    if (event.currentTarget.dragging) {
+                        event.currentTarget.alpha = 1;
+                        event.currentTarget.dragging = false;
+                        event.currentTarget.data = null;
+                    }
+                })
+                .on('mousemove', event => {
+                    if (event.currentTarget.dragging) {
+                        const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
+                        event.currentTarget.x = newPosition.x;
+                        event.currentTarget.y = newPosition.y;
+
+                        this.assetData.MultiPoint[index].x = newPosition.x;
+                        this.assetData.MultiPoint[index].y = newPosition.y;
+                        this.workingArea.canvasData.isChange = true;
+
+                        if (index === 0) {// 第一个点
+                            this.iconsTilingSprite[index].x = newPosition.x;
+                            this.iconsTilingSprite[index].y = newPosition.y;
+
+                            const pointA = array[index];
+                            const pointB = array[index + 1];
+
+                            const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI);
+                            const a = pointB.x - pointA.x;
+                            const b = pointB.y - pointA.y;
+                            const distance = Math.sqrt(a * a + b * b);
+                            this.iconsTilingSprite[index].angle = angle;
+                            this.iconsTilingSprite[index].width = distance;
+
+                            this.text.position = this.iconsTilingSprite[index].position;
+                            this.text.y -= this.assetData.Height;
+                        } else if (index < array.length - 1) {// 不是第一个点，也不是最后一个点
+                            this.iconsTilingSprite[index].x = newPosition.x;
+                            this.iconsTilingSprite[index].y = newPosition.y;
+
+                            const pointA = array[index]; // 当前点
+                            const pointB = array[index + 1]; // 后一个点
+                            const pointC = array[index - 1]; // 前一个点
+
+                            const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI);
+                            const a = pointB.x - pointA.x;
+                            const b = pointB.y - pointA.y;
+                            const distance = Math.sqrt(a * a + b * b);
+                            this.iconsTilingSprite[index].angle = angle;
+                            this.iconsTilingSprite[index].width = distance;
+
+                            const angleC = Math.atan2((pointA.y - pointC.y), (pointA.x - pointC.x)) * (180 / Math.PI);
+                            const aC = pointA.x - pointC.x;
+                            const bC = pointA.y - pointC.y;
+                            const distanceC = Math.sqrt(aC * aC + bC * bC);
+                            this.iconsTilingSprite[index - 1].angle = angleC;
+                            this.iconsTilingSprite[index - 1].width = distanceC;
+                        } else if (index === array.length - 1) { // 最后一个点
+                            const pointA = array[index]; // 当前点
+                            const pointC = array[index - 1]; // 前一个点
+
+                            const angleC = Math.atan2((pointA.y - pointC.y), (pointA.x - pointC.x)) * (180 / Math.PI);
+                            const aC = pointA.x - pointC.x;
+                            const bC = pointA.y - pointC.y;
+                            const distanceC = Math.sqrt(aC * aC + bC * bC);
+                            this.iconsTilingSprite[index - 1].angle = angleC;
+                            this.iconsTilingSprite[index - 1].width = distanceC;
+                        }
+                    }
+                })
+                .on('rightclick', event => {
+                })
+                .on('mouseover', event => {
+
+                });
+        });
+        // // 缩放
+        // this.workingArea.on('backgroundScale', data => {
+        //   const scale = 1 / data;
+        //   this.text.scale.set(scale);
+        // });
+        // 添加选中事件
+        this.iconsTilingSprite.forEach((item, index, array) => {
+            item.interactive = true;
+            item.on('mousedown', event => {
+                event.stopPropagation();
+                this.workingArea.selection.selectOne(this);
+                if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
+                    event.currentTarget.parent.data = event.data;
+                    event.currentTarget.parent.alpha = 0.5;
+                    event.currentTarget.parent.dragging = true;
+
+                    event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent);
+                    event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x;
+                    event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y;
+                }
+            })
+                .on('mouseup', event => {
+                    if (event.currentTarget.parent.dragging) {
+                        event.currentTarget.parent.alpha = 1;
+                        event.currentTarget.parent.dragging = false;
+                        event.currentTarget.parent.data = null;
+                    }
+                })
+                .on('mouseupoutside', event => {
+                    if (event.currentTarget.parent.dragging) {
+                        event.currentTarget.parent.alpha = 1;
+                        event.currentTarget.parent.dragging = false;
+                        event.currentTarget.parent.data = null;
+                    }
+                })
+                .on('mousemove', event => {
+                    if (event.currentTarget.parent.dragging) {
+                        const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
+                        event.currentTarget.parent.x = newPosition.x - event.currentTarget.parent.dragPoint.x;
+                        event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y;
+
+                        this.assetData.Point = new PIXI.Point(this.x, this.y);
+                        this.workingArea.canvasData.isChange = true;
+                    }
+                })
+                .on('rightclick', event => {
+
+                });
+        });
+    }
+    /**
+     * 设置点显示状态
+     * @param value 显示状态
+     */
+    public setPointVisiable(value: boolean) {
+        this.pointsGraphics.forEach((item) => {
+            item.visible = value;
+        });
+    }
+    // 设置名称
+    public setNameVisible(value: boolean, mode: GameMode) {
+        if (this.assetData.GameMode === mode) {
+            this.text.visible = value;
+        }
+    }
+    // 刷新数据
+    public refresh() {
+        console.log(this.assetData);
+        this.iconsTilingSprite.forEach(element => {
+            element.height = this.assetData.Thickness === 0 ? 32 : this.assetData.Thickness;
+        });
+        this.text.text = this.assetData.Name
+            + '\r\n'
+            + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
+    }
+}
\ No newline at end of file
diff --git a/src/app/working-area/model/paintModel.ts b/src/app/working-area/model/paintModel.ts
new file mode 100644
index 0000000..dc0b031
--- /dev/null
+++ b/src/app/working-area/model/paintModel.ts
@@ -0,0 +1,33 @@
+/**
+ * 绘制模式
+ */
+export enum PaintMode {
+    /**
+     * 单点图标
+     */
+    singlePointIcon,
+    /**
+     * 线段图标
+     */
+    lineIcon,
+    /**
+     * 自定义多边形
+     */
+    polygonIcon,
+    /**
+     * 水带多边形
+     */
+    Pipeline,
+    /**
+     * 暂无
+     */
+    Arrows,
+    /**
+     * 暂无
+     */
+    Car,
+    /**
+     * 结束绘制
+     */
+    endPaint,
+}
diff --git a/src/app/working-area/model/pipeline.ts b/src/app/working-area/model/pipeline.ts
new file mode 100644
index 0000000..904732a
--- /dev/null
+++ b/src/app/working-area/model/pipeline.ts
@@ -0,0 +1,332 @@
+import { WorkingAreaComponent } from '../working-area.component';
+import * as PIXI from 'pixi.js';
+
+/**
+ * 管线
+ */
+export class Pipeline extends PIXI.Container {
+    public line: PIXI.Graphics = new PIXI.Graphics();
+    constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
+        super();
+        this.name = this.assetData.Id;
+        this.x = this.assetData.Point.x;
+        this.y = this.assetData.Point.y;
+        this.workingArea.backgroundImage.addChild(this);
+        this.addChild(this.line);
+        // 画线图标
+        this.refresh();
+        this.interactive = true;
+        this.on('mousedown', event => {
+            event.stopPropagation();
+            this.workingArea.selection.selectOne(this);
+        });
+    }
+    /**
+     * 刷新
+     */
+    public refresh() {
+
+        const strokeWidth = 1;
+        const startWidth = 30 + strokeWidth;
+        const endWidth = 30 + strokeWidth;
+        const edgeWidth = 10;
+        const openEnded = false;
+        const markerStart = false;
+        const markerEnd = true;
+        const spacing = (openEnded) ? 0 : 0 + strokeWidth / 2;
+        const startSize = 30 + strokeWidth;
+        const endSize = 30 + strokeWidth;
+        const isRounded = true;
+        const pts = this.assetData.MultiPoint;
+        const c = this.line;
+        if (pts.length < 2) { return; }
+            // Base vector (between first points)
+        const pe = pts[pts.length - 1];
+
+            // Finds first non-overlapping point
+        let i0 = 1;
+
+        while (i0 < pts.length - 1 && pts[i0].x === pts[0].x && pts[i0].y === pts[0].y) {
+            i0++;
+            }
+
+        const dx = pts[i0].x - pts[0].x;
+        const dy = pts[i0].y - pts[0].y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+
+        if (dist === 0) {
+            return;
+            }
+
+        // Computes the norm and the inverse norm
+        let nx = dx / dist;
+        let nx1 = nx;
+        let nx2 = nx;
+        let ny = dy / dist;
+        let ny2 = ny;
+        let ny1 = ny;
+        let orthx = edgeWidth * ny;
+        let orthy = -edgeWidth * nx;
+
+        // Stores the inbound function calls in reverse order in fns
+        const fns = [];
+
+        // if (isRounded) {
+        //     // c.setLineJoin('round');
+        //     c.lineTextureStyle({ join: PIXI.LINE_JOIN.ROUND });
+        // } else if (pts.length > 2) {
+        // // Only mitre if there are waypoints
+        //     // c.setMiterLimit(1.42);
+        //     c.lineTextureStyle({ miterLimit: 1.42 });
+        // }
+        // c.lineStyle(1, 0x000000, 1);
+        c.clear();
+        c.lineTextureStyle({ width: 1, color: 0x00000, join: PIXI.LINE_JOIN.ROUND });
+        // c.begin();
+        c.beginFill(0xffffff);
+        const startNx = nx;
+        const startNy = ny;
+
+        if (markerStart && !openEnded) {
+            this.paintMarker(c, pts[0].x, pts[0].y, nx, ny, startSize, startWidth, edgeWidth, spacing, true);
+        } else {
+            const outStartX = pts[0].x + orthx / 2 + spacing * nx;
+            const outStartY = pts[0].y + orthy / 2 + spacing * ny;
+            const inEndX = pts[0].x - orthx / 2 + spacing * nx;
+            const inEndY = pts[0].y - orthy / 2 + spacing * ny;
+
+            if (openEnded) {
+                c.moveTo(outStartX, outStartY);
+                fns.push( () => {
+                c.lineTo(inEndX, inEndY);
+                });
+            } else {
+                c.moveTo(inEndX, inEndY);
+                c.lineTo(outStartX, outStartY);
+            }
+        }
+        let dx1 = 0;
+        let dy1 = 0;
+        let dist1 = 0;
+
+        for (let i = 0; i < pts.length - 2; i++) {
+        // Work out in which direction the line is bending
+        const pos = this.relativeCcw(pts[i].x, pts[i].y, pts[i + 1].x, pts[i + 1].y, pts[i + 2].x, pts[i + 2].y);
+
+        dx1 = pts[i + 2].x - pts[i + 1].x;
+        dy1 = pts[i + 2].y - pts[i + 1].y;
+
+        dist1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+
+        if (dist1 !== 0) {
+            nx1 = dx1 / dist1;
+            ny1 = dy1 / dist1;
+
+            const tmp1 = nx * nx1 + ny * ny1;
+            const tmp = Math.max(Math.sqrt((tmp1 + 1) / 2), 0.04);
+
+            // Work out the normal orthogonal to the line through the control point and the edge sides intersection
+            nx2 = (nx + nx1);
+            ny2 = (ny + ny1);
+
+            const dist2 = Math.sqrt(nx2 * nx2 + ny2 * ny2);
+
+            if (dist2 !== 0) {
+                nx2 = nx2 / dist2;
+                ny2 = ny2 / dist2;
+
+                // Higher strokewidths require a larger minimum bend, 0.35 covers all but the most extreme cases
+                const strokeWidthFactor = Math.max(tmp, Math.min(1 / 200 + 0.04, 0.35));
+                const angleFactor = (pos !== 0 && isRounded) ? Math.max(0.1, strokeWidthFactor) : Math.max(tmp, 0.06);
+
+                const outX = pts[i + 1].x + ny2 * edgeWidth / 2 / angleFactor;
+                const outY = pts[i + 1].y - nx2 * edgeWidth / 2 / angleFactor;
+                const inX = pts[i + 1].x - ny2 * edgeWidth / 2 / angleFactor;
+                const inY = pts[i + 1].y + nx2 * edgeWidth / 2 / angleFactor;
+
+                if (pos === 0 || !isRounded) {
+                    // If the two segments are aligned, or if we're not drawing curved sections between segments
+                    // just draw straight to the intersection point
+                    c.lineTo(outX, outY);
+
+                    ((x, y) => {
+                        fns.push(() => {
+                            c.lineTo(x, y);
+                        });
+                    })(inX, inY);
+                } else if (pos === -1) {
+                    const c1x = inX + ny * edgeWidth;
+                    const c1y = inY - nx * edgeWidth;
+                    const c2x = inX + ny1 * edgeWidth;
+                    const c2y = inY - nx1 * edgeWidth;
+                    c.lineTo(c1x, c1y);
+                    if (isRounded) {
+                        c.quadraticCurveTo(outX, outY, c2x, c2y); // 圆角
+                    } else {
+                        c.lineTo(outX, outY);
+                    }
+                    ((x, y) => {
+                        fns.push(() => {
+                            c.lineTo(x, y);
+                        });
+                    })(inX, inY);
+                } else {
+                    c.lineTo(outX, outY);
+
+                    ((x, y) => {
+                        const c1x = outX - ny * edgeWidth;
+                        const c1y = outY + nx * edgeWidth;
+                        const c2x = outX - ny1 * edgeWidth;
+                        const c2y = outY + nx1 * edgeWidth;
+
+                        fns.push(() => {
+                            if (isRounded) {
+                                c.quadraticCurveTo(x, y, c1x, c1y);
+                            } else {
+                                c.lineTo(x, y);
+                            }
+                        });
+                        fns.push(() => {
+                            c.lineTo(c2x, c2y);
+                        });
+                            })(inX, inY);
+                }
+
+                nx = nx1;
+                ny = ny1;
+                }
+            }
+        }
+        orthx = edgeWidth * ny1;
+        orthy = - edgeWidth * nx1;
+
+        if (markerEnd && !openEnded) {
+            this.paintMarker(c, pe.x, pe.y, -nx, -ny, endSize, endWidth, edgeWidth, spacing, false);
+        } else {
+            c.lineTo(pe.x - spacing * nx1 + orthx / 2, pe.y - spacing * ny1 + orthy / 2);
+
+            const inStartX = pe.x - spacing * nx1 - orthx / 2;
+            const inStartY = pe.y - spacing * ny1 - orthy / 2;
+
+            if (!openEnded) {
+                c.lineTo(inStartX, inStartY);
+            } else {
+                c.moveTo(inStartX, inStartY);
+
+                fns.splice(0, 0, () => {
+                    c.moveTo(inStartX, inStartY);
+                });
+            }
+        }
+
+        for (let i = fns.length - 1; i >= 0; i--) {
+            fns[i]();
+        }
+        c.closePath();
+        c.endFill();
+        // if (openEnded)
+        // {
+        //     c.end();
+        //     c.stroke();
+        // }
+        // else
+        // {
+        //     c.close();
+        //     c.fillAndStroke();
+        // }
+
+        // Workaround for shadow on top of base arrow
+        // c.setShadow(false);
+
+        // Need to redraw the markers without the low miter limit
+        // c.setMiterLimit(4);
+
+        // if (isRounded)
+        // {
+        //     c.setLineJoin('flat');
+        // }
+
+        // if (pts.length > 2) {
+        //     // Only to repaint markers if no waypoints
+        //     // Need to redraw the markers without the low miter limit
+        //     // c.setMiterLimit(4);
+        //     c.lineTextureStyle({ width: 1, color: 0x00000, miterLimit: 4 });
+        //     if (markerStart && !openEnded) {
+        //         // c.begin();
+        //         this.paintMarker(c, pts[0].x, pts[0].y, startNx, startNy, startSize, startWidth, edgeWidth, spacing, true);
+        //         // c.stroke();
+        //         // c.end();
+        //         // c.closePath();
+        //     }
+
+        //     if (markerEnd && !openEnded) {
+        //         // c.begin();
+        //         this.paintMarker(c, pe.x, pe.y, -nx, -ny, endSize, endWidth, edgeWidth, spacing, true);
+        //         // c.stroke();
+        //         // c.end();
+        //         // c.closePath();
+        //     }
+        // }
+    }
+    /**
+     * Function: paintMarker
+     *
+     * Paints the marker.
+     */
+    paintMarker(c: PIXI.Graphics, ptX: number, ptY: number, nx: number, ny: number,
+                size: number, arrowWidth: number, edgeWidth: number, spacing: number, initialMove: boolean) {
+        const widthArrowRatio = edgeWidth / arrowWidth;
+        const orthx = edgeWidth * ny / 2;
+        const orthy = -edgeWidth * nx / 2;
+
+        const spaceX = (spacing + size) * nx;
+        const spaceY = (spacing + size) * ny;
+
+        if (initialMove) {
+            c.moveTo(ptX - orthx + spaceX, ptY - orthy + spaceY);
+        } else {
+            c.lineTo(ptX - orthx + spaceX, ptY - orthy + spaceY);
+        }
+        c.lineTo(ptX - orthx / widthArrowRatio + spaceX, ptY - orthy / widthArrowRatio + spaceY);
+        c.lineTo(ptX + spacing * nx, ptY + spacing * ny);
+        c.lineTo(ptX + orthx / widthArrowRatio + spaceX, ptY + orthy / widthArrowRatio + spaceY);
+        c.lineTo(ptX + orthx + spaceX, ptY + orthy + spaceY);
+    }
+    /**
+     * Function: relativeCcw
+     *
+     * Returns 1 if the given point on the right side of the segment, 0 if its
+     * on the segment, and -1 if the point is on the left side of the segment.
+     *
+     * Parameters:
+     *
+     * x1 - X-coordinate of the startpoint of the segment.
+     * y1 - Y-coordinate of the startpoint of the segment.
+     * x2 - X-coordinate of the endpoint of the segment.
+     * y2 - Y-coordinate of the endpoint of the segment.
+     * px - X-coordinate of the point.
+     * py - Y-coordinate of the point.
+     */
+    relativeCcw(x1: number, y1: number, x2: number, y2: number, px: number, py: number) {
+        x2 -= x1;
+        y2 -= y1;
+        px -= x1;
+        py -= y1;
+        let ccw = px * y2 - py * x2;
+
+        if (ccw === 0.0) {
+            ccw = px * x2 + py * y2;
+
+            if (ccw > 0.0) {
+                px -= x2;
+                py -= y2;
+                ccw = px * x2 + py * y2;
+
+                if (ccw < 0.0) {
+                    ccw = 0.0;
+                }
+            }
+        }
+        return (ccw < 0.0) ? -1 : ((ccw > 0.0) ? 1 : 0);
+    }
+}
diff --git a/src/app/working-area/model/polygonIcon.ts b/src/app/working-area/model/polygonIcon.ts
new file mode 100644
index 0000000..3c604df
--- /dev/null
+++ b/src/app/working-area/model/polygonIcon.ts
@@ -0,0 +1,244 @@
+import { WorkingAreaComponent } from '../working-area.component';
+import { GameMode } from './gameMode';
+import * as PIXI from 'pixi.js';
+
+/**
+ * 多边形
+ */
+export class PolygonIcon extends PIXI.Container {
+    public pointsData: PIXI.Point[];
+    public pointsGraphics: PIXI.Graphics[] = [];
+    public polygonGraphics: PIXI.Graphics = new PIXI.Graphics();
+    public polygonLineGraphics: PIXI.Graphics = new PIXI.Graphics();
+    style = new PIXI.TextStyle({
+        fontFamily: 'Arial',
+        fontSize: 18,
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        fill: ['#000000'],
+        stroke: '#ffffff',
+        strokeThickness: 3,
+        dropShadow: true,
+        dropShadowColor: '#000000',
+        dropShadowBlur: 3,
+        dropShadowAngle: Math.PI / 6,
+        dropShadowDistance: 1,
+        wordWrap: false,
+        wordWrapWidth: 100,
+    });
+
+    public text = new PIXI.Text(this.assetData.Name
+        + '\r\n'
+        + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
+    /**
+     *
+     * @param points  点集合
+     */
+    constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
+        super();
+        this.name = this.assetData.Id;
+        this.x = this.assetData.Point.x;
+        this.y = this.assetData.Point.y;
+        this.pointsData = this.assetData.MultiPoint;
+        this.workingArea.backgroundImage.addChild(this);
+        this.sortableChildren = true;
+        // 画点
+        this.pointsData.forEach((item, index, array) => {
+            const iconPoint = new PIXI.Graphics();
+            iconPoint.lineStyle(1, 0xFFBD01, 1);
+            iconPoint.beginFill(0xFFFFFF, 1);
+            iconPoint.drawCircle(0, 0, 15);
+            iconPoint.x = item.x;
+            iconPoint.y = item.y;
+            iconPoint.endFill();
+            iconPoint.visible = false;
+            this.pointsGraphics.push(iconPoint);
+            this.addChild(iconPoint);
+        });
+        // 填充多边形
+
+        const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x');
+        const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255;
+        this.polygonGraphics.beginFill(color, angle);
+        this.polygonGraphics.drawPolygon(this.getPoints());
+        this.polygonGraphics.endFill();
+        this.addChild(this.polygonGraphics);
+        // 画多边形
+        this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1);
+        this.polygonLineGraphics.drawPolygon(this.getPoints());
+        this.polygonLineGraphics.closePath();
+        this.addChild(this.polygonLineGraphics);
+
+        this.text.anchor.set(0.5);
+        this.text.position = this.calculatePolygonGravityCenter(this.pointsData);
+        // console.log(this.calculatePolygonGravityCenter(this.pointsData));
+        this.polygonGraphics.addChild(this.text);
+        // 添加圆点事件
+        this.pointsGraphics.forEach((item, index, array) => {
+            item.interactive = true;
+            item.zIndex = 1;
+            item.on('mousedown', event => {
+                event.stopPropagation();
+                if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
+                    event.currentTarget.data = event.data;
+                    event.currentTarget.alpha = 0.5;
+                    event.currentTarget.dragging = true;
+                }
+            })
+                .on('mouseup', event => {
+                    if (event.currentTarget.dragging) {
+                        event.currentTarget.alpha = 1;
+                        event.currentTarget.dragging = false;
+                        event.currentTarget.data = null;
+                    }
+                })
+                .on('mouseupoutside', event => {
+                    if (event.currentTarget.dragging) {
+                        event.currentTarget.alpha = 1;
+                        event.currentTarget.dragging = false;
+                        event.currentTarget.data = null;
+                    }
+                })
+                .on('mousemove', event => {
+                    if (event.currentTarget.dragging) {
+                        const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
+                        event.currentTarget.x = newPosition.x;
+                        event.currentTarget.y = newPosition.y;
+
+                        this.assetData.MultiPoint[index].x = newPosition.x;
+                        this.assetData.MultiPoint[index].y = newPosition.y;
+                        this.workingArea.canvasData.isChange = true;
+                        // 填充多边形
+                        this.polygonGraphics.clear();
+                        this.polygonGraphics.beginFill(color, angle);
+                        this.polygonGraphics.drawPolygon(this.getPoints());
+                        this.polygonGraphics.endFill();
+                        // 画多边形
+                        this.polygonLineGraphics.clear();
+                        this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1);
+                        this.polygonLineGraphics.drawPolygon(this.getPoints());
+                        this.polygonLineGraphics.closePath();
+
+                        this.text.position = this.calculatePolygonGravityCenter(this.pointsData);
+                    }
+                })
+                .on('rightclick', event => {
+                });
+        });
+        // 添加选中事件
+        this.polygonGraphics.interactive = true;
+        this.polygonGraphics
+            .on('mousedown', event => {
+                event.stopPropagation();
+                this.workingArea.selection.selectOne(this);
+                if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
+                    event.currentTarget.parent.data = event.data;
+                    event.currentTarget.parent.alpha = 0.5;
+                    event.currentTarget.parent.dragging = true;
+
+                    event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent);
+                    event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x;
+                    event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y;
+                }
+            })
+            .on('mouseup', event => {
+                if (event.currentTarget.parent.dragging) {
+                    event.currentTarget.parent.alpha = 1;
+                    event.currentTarget.parent.dragging = false;
+                    event.currentTarget.parent.data = null;
+                }
+            })
+            .on('mouseupoutside', event => {
+                if (event.currentTarget.parent.dragging) {
+                    event.currentTarget.parent.alpha = 1;
+                    event.currentTarget.parent.dragging = false;
+                    event.currentTarget.parent.data = null;
+                }
+            })
+            .on('mousemove', event => {
+                if (event.currentTarget.parent.dragging) {
+                    const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
+                    event.currentTarget.parent.x = newPosition.x - event.currentTarget.parent.dragPoint.x;
+                    event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y;
+
+                    this.assetData.Point = new PIXI.Point(this.x, this.y);
+                    this.workingArea.canvasData.isChange = true;
+                }
+            })
+            .on('rightclick', event => {
+                // this.workingArea.selection.deselectAll();
+            });
+        // // 缩放
+        // this.workingArea.on('backgroundScale', data => {
+        //   const scale = 1 / data;
+        //   this.text.scale.set(scale);
+        // });
+    }
+    /**
+     * 设置点显示状态
+     * @param value 显示状态
+     */
+    public setPointVisiable(value: boolean) {
+        this.pointsGraphics.forEach((item) => {
+            item.visible = value;
+        });
+    }
+
+    public calculatePolygonGravityCenter(points: PIXI.Point[]) {
+        let area = 0.0; // 多边形面积
+        let gravityLat = 0.0; // 重心点 latitude
+        let gravityLng = 0.0; // 重心点 longitude
+        points.forEach((item, index) => {
+            // 1
+            const lat = item.x;
+            const lng = item.y;
+            const nextLat = points[(index + 1) % points.length].x;
+            const nextLng = points[(index + 1) % points.length].y;
+            // 2
+            const tempArea = (nextLat * lng - nextLng * lat) / 2.0;
+            // 3
+            area += tempArea;
+            // 4
+            gravityLat += tempArea * (lat + nextLat) / 3;
+            gravityLng += tempArea * (lng + nextLng) / 3;
+        });
+        // 5
+        gravityLat = gravityLat / area;
+        gravityLng = gravityLng / area;
+
+        return new PIXI.Point(gravityLat, gravityLng);
+    }
+    /**
+     * 获取点集合
+     */
+    public getPoints(): PIXI.Point[] {
+        const points: PIXI.Point[] = [];
+        this.pointsGraphics.forEach(item => {
+            points.push(item.position);
+        });
+        return points;
+    }
+    /**
+     * 设置名称显示
+     * @param value true/false 显示/隐藏
+     * @param mode BasicInformation = 0 基本信息
+     *             Assignment想定作业 = 1 想定作业
+     */
+    public setNameVisible(value: boolean, mode: GameMode) {
+        if (this.assetData.GameMode === mode) {
+            this.text.visible = value;
+        }
+    }
+    public refresh() {
+        this.text.text = this.assetData.Name
+            + '\r\n'
+            + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
+        // 填充多边形
+        const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x');
+        const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255;
+        this.polygonGraphics.clear();
+        this.polygonGraphics.beginFill(color, angle);
+        this.polygonGraphics.drawPolygon(this.getPoints());
+        this.polygonGraphics.endFill();
+    }
+}
\ No newline at end of file
diff --git a/src/app/working-area/model/putCarArea.ts b/src/app/working-area/model/putCarArea.ts
new file mode 100644
index 0000000..7544d04
--- /dev/null
+++ b/src/app/working-area/model/putCarArea.ts
@@ -0,0 +1,59 @@
+import { OldFilmFilter } from 'pixi-filters';
+import { WorkingAreaComponent } from '../working-area.component';
+import { PaintMode } from './paintModel';
+import { SinglePointIcon } from './singlePointIcon';
+import * as PIXI from 'pixi.js';
+
+/**
+ * 汽车放置区域
+ */
+export class PutCarArea extends PIXI.Container {
+    public polygonGraphics: PIXI.Graphics = new PIXI.Graphics();
+    constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
+        super();
+        this.name = this.assetData.Id;
+        this.x = this.assetData.Point.x;
+        this.y = this.assetData.Point.y;
+        this.workingArea.backgroundImage.addChild(this);
+        this.sortableChildren = true;
+
+        // 填充多边形
+
+        const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x');
+        const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255;
+        this.polygonGraphics.beginFill(color, angle);
+        this.polygonGraphics.drawPolygon(this.assetData.MultiPoint);
+        this.polygonGraphics.endFill();
+        this.addChild(this.polygonGraphics);
+        // 添加选中事件
+        this.polygonGraphics.interactive = true;
+        this.polygonGraphics
+            .on('pointerdown', (event) => {
+                if (this.workingArea.getPaintMode() === PaintMode.Car) {
+                    this.workingArea.selectCar.Point =
+                        new PIXI.Point(this.workingArea.previewSinglePointIcon.x, this.workingArea.previewSinglePointIcon.y);
+                    this.workingArea.selectCar.Angle = this.assetData.Direction;
+                    const car = new SinglePointIcon(this.workingArea.selectCar, this.workingArea);
+                    this.workingArea.setPaintMode(PaintMode.endPaint);
+                }
+            })
+            .on('pointerup', (event) => {
+
+            })
+            .on('pointerupoutside', (event) => {
+
+            })
+            .on('pointerover', (event) => {
+                this.workingArea.previewSinglePointIcon.filters = null;
+                this.workingArea.previewSinglePointIcon.zIndex = this.zIndex + 1;
+                // 设置车辆方向
+                this.workingArea.previewSinglePointIcon.angle = this.assetData.Direction;
+                console.log(this.assetData.Name);
+            })
+            .on('pointerout', (event) => {
+                this.workingArea.previewSinglePointIcon.filters = [
+                    new OldFilmFilter()
+                ];
+            });
+    }
+}
\ No newline at end of file
diff --git a/src/app/working-area/model/singlePointIcon.ts b/src/app/working-area/model/singlePointIcon.ts
new file mode 100644
index 0000000..8574b9e
--- /dev/null
+++ b/src/app/working-area/model/singlePointIcon.ts
@@ -0,0 +1,373 @@
+import { WorkingAreaComponent } from '../working-area.component';
+import * as ObjectID from 'bson-objectid';
+import { GameMode } from './gameMode';
+import { Pipeline } from './pipeline';
+import { PaintMode } from './paintModel';
+import * as PIXI from 'pixi.js';
+import { PropertyInfo } from './PropertyInfo';
+import { AxShape } from './axShape';
+
+/**
+ * 单点图标
+ */
+export class SinglePointIcon extends AxShape {
+    style = new PIXI.TextStyle({
+        fontFamily: 'Arial',
+        fontSize: 18,
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        fill: ['#000000'],
+        stroke: '#ffffff',
+        strokeThickness: 3,
+        dropShadow: true,
+        dropShadowColor: '#000000',
+        dropShadowBlur: 3,
+        dropShadowAngle: Math.PI / 6,
+        dropShadowDistance: 1,
+        wordWrap: false,
+        wordWrapWidth: 100,
+    });
+
+    text = new PIXI.Text(this.assetData.Name
+        + '\r\n'
+        + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
+
+    /**
+     * 选中圆点
+     */
+    selectedPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png');
+    image = PIXI.Sprite.from(this.assetData.ImageUrl);
+    selectionBox = new PIXI.Graphics();
+    up: PIXI.Sprite;
+    down: PIXI.Sprite;
+    left: PIXI.Sprite;
+    right: PIXI.Sprite;
+    upLeft: PIXI.Sprite;
+    upRight: PIXI.Sprite;
+    downLeft: PIXI.Sprite;
+    downRight: PIXI.Sprite;
+    constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
+        super();
+        this.workingArea.backgroundImage.addChild(this);
+        this.x = this.assetData.Point.x;
+        this.y = this.assetData.Point.y;
+        this.name = this.assetData.Id;
+
+        this.image.angle = this.assetData.Angle;
+
+        this.image.x = 0;
+        this.image.y = 0;
+        this.image.width = this.assetData.Width;
+        this.image.height = this.assetData.Height;
+        console.log(this.getBounds());
+        this.image.alpha = 1;
+        this.image.anchor.set(0.5);
+        this.image.interactive = true;
+        this.image
+            .on('mousedown', event => {
+                event.stopPropagation();
+                this.workingArea.selection.selectOne(this);
+                this.paintingPipeline(this.x, this.y);
+                // 如果链接对象不为空,禁止移动
+                if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
+                    event.currentTarget.parent.data = event.data;
+                    event.currentTarget.parent.alpha = 0.5;
+                    event.currentTarget.parent.dragging = true;
+                }
+            })
+            .on('mouseup', event => {
+                if (event.currentTarget.parent.dragging) {
+                    event.currentTarget.parent.alpha = 1;
+                    event.currentTarget.parent.dragging = false;
+                    event.currentTarget.parent.data = null;
+                }
+            })
+            .on('mouseupoutside', event => {
+                if (event.currentTarget.parent.dragging) {
+                    event.currentTarget.parent.alpha = 1;
+                    event.currentTarget.parent.dragging = false;
+                    event.currentTarget.parent.data = null;
+                }
+            })
+            .on('mousemove', event => {
+                if (event.currentTarget.parent.dragging) {
+                    // 如果拖动过程中发现父对象不是背景图
+                    if (this.parent !== this.workingArea.backgroundImage) {
+                        this.setParent(this.workingArea.backgroundImage);
+                        if (this.assetData.FixedSize) {
+                            const scale = 1 / this.workingArea.backgroundImage.scale.x;
+                            this.scale.set(scale);
+                        }
+                    }
+                    const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
+                    event.currentTarget.parent.x = newPosition.x;
+                    event.currentTarget.parent.y = newPosition.y;
+                    this.assetData.Point = new PIXI.Point(this.x, this.y);
+                    this.workingArea.canvasData.isChange = true;
+                }
+            })
+            .on('rightclick', event => {
+
+            })
+            .on('mouseover', event => {
+                // if (this.assetData.CanConnect) {
+                //     this.setSelectionBox(true, this.image);
+                // }
+            })
+            .on('mouseout', event => {
+                // if (this.assetData.CanConnect) {
+                //     this.setSelectionBox(false);
+                // }
+            });
+        this.text.x = this.image.x;
+        this.text.y = this.image.y - this.image.height / 2;
+        this.text.anchor.set(0.5, 1);
+
+        if (this.assetData.GameMode === 2) {
+            this.text.visible = false;
+        }
+        this.addChild(this.text);
+        this.addChild(this.image);
+        this.addChild(this.selectionBox);
+
+        if (this.assetData.CanConnect) {
+            // up
+            this.up = new PIXI.Sprite(this.selectedPointTexture);
+            this.up.anchor.set(0.5);
+            this.up.x = this.image.x;
+            this.up.y = this.image.y - (this.image.height / 2);
+            this.addChild(this.up);
+            this.up.interactive = true;
+            this.up
+                .on('mousedown', event => {
+                    event.stopPropagation();
+                    const pt = this.toGlobal(new PIXI.Point(this.up.x, this.up.y));
+                    const pt2 = this.workingArea.backgroundImage.toLocal(pt);
+                    this.paintingPipeline(pt2.x, pt2.y);
+                })
+                .on('mouseover', event => {
+                    this.setSelectionBox(true, this.up);
+                })
+                .on('mouseout', event => {
+                    this.setSelectionBox(false);
+                });
+            // down
+            this.down = new PIXI.Sprite(this.selectedPointTexture);
+            this.down.anchor.set(0.5);
+            this.down.x = this.image.x;
+            this.down.y = this.image.y + (this.image.height / 2);
+            this.addChild(this.down);
+            this.down.interactive = true;
+            this.down
+                .on('mouseover', event => {
+                    this.setSelectionBox(true, this.down);
+                })
+                .on('mouseout', event => {
+                    this.setSelectionBox(false);
+                });
+            // left
+            this.left = new PIXI.Sprite(this.selectedPointTexture);
+            this.left.anchor.set(0.5);
+            this.left.x = this.image.x - (this.image.width / 2);
+            this.left.y = this.image.y;
+            this.addChild(this.left);
+            this.left.interactive = true;
+            this.left
+                .on('mouseover', event => {
+                    this.setSelectionBox(true, this.left);
+                })
+                .on('mouseout', event => {
+                    this.setSelectionBox(false);
+                });
+            // right
+            this.right = new PIXI.Sprite(this.selectedPointTexture);
+            this.right.anchor.set(0.5);
+            this.right.x = this.image.x + (this.image.width / 2);
+            this.right.y = this.image.y;
+            this.addChild(this.right);
+            this.right.interactive = true;
+            this.right
+                .on('mouseover', event => {
+                    this.setSelectionBox(true, this.right);
+                })
+                .on('mouseout', event => {
+                    this.setSelectionBox(false);
+                });
+            // up-left
+            this.upLeft = new PIXI.Sprite(this.selectedPointTexture);
+            this.upLeft.anchor.set(0.5);
+            this.upLeft.x = this.image.x - (this.image.width / 2);
+            this.upLeft.y = this.image.y - (this.image.height / 2);
+            this.addChild(this.upLeft);
+            this.upLeft.interactive = true;
+            this.upLeft
+                .on('mouseover', event => {
+                    this.setSelectionBox(true, this.upLeft);
+                })
+                .on('mouseout', event => {
+                    this.setSelectionBox(false);
+                });
+            // up-right
+            this.upRight = new PIXI.Sprite(this.selectedPointTexture);
+            this.upRight.anchor.set(0.5);
+            this.upRight.x = this.image.x + (this.image.width / 2);
+            this.upRight.y = this.image.y - (this.image.height / 2);
+            this.addChild(this.upRight);
+            this.upRight.interactive = true;
+            this.upRight
+                .on('mouseover', event => {
+                    this.setSelectionBox(true, this.upRight);
+                })
+                .on('mouseout', event => {
+                    this.setSelectionBox(false);
+                });
+
+            // down-left
+            this.downLeft = new PIXI.Sprite(this.selectedPointTexture);
+            this.downLeft.anchor.set(0.5);
+            this.downLeft.x = this.image.x - (this.image.width / 2);
+            this.downLeft.y = this.image.y + (this.image.height / 2);
+            this.addChild(this.downLeft);
+            this.downLeft.interactive = true;
+            this.downLeft
+                .on('mouseover', event => {
+                    this.setSelectionBox(true, this.downLeft);
+                })
+                .on('mouseout', event => {
+                    this.setSelectionBox(false);
+                });
+            // down-right
+            this.downRight = new PIXI.Sprite(this.selectedPointTexture);
+            this.downRight.anchor.set(0.5);
+            this.downRight.x = this.image.x + (this.image.width / 2);
+            this.downRight.y = this.image.y + (this.image.height / 2);
+            this.addChild(this.downRight);
+            this.downRight.interactive = true;
+            this.downRight
+                .on('mouseover', event => {
+                    this.setSelectionBox(true, this.downRight);
+                })
+                .on('mouseout', event => {
+                    this.setSelectionBox(false);
+                });
+
+            this.showConnectionPoint(false);
+        }
+    }
+    // 设置选择框
+    public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) {
+        if (b) {
+            this.selectionBox.lineStyle(2, 0x00EB00, 1);
+            this.selectionBox.position = sprite.position;
+            this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height);
+            // const p0 = new PIXI.Point(- sprite.width / 2, - sprite.height / 2);
+            // const pe = new PIXI.Point(sprite.width / 2, sprite.height / 2);
+            // const pw = new PIXI.Point(p0.x + sprite.width, p0.y);
+            // const ph = new PIXI.Point(p0.x, p0.y + sprite.height);
+            // this.drawDashedLine(this.selectionBox, p0, pw, 0x1234ff);
+            // this.drawDashedLine(this.selectionBox, p0, ph, 0x1234ff);
+            // this.drawDashedLine(this.selectionBox, pe, pw, 0x1234ff);
+            // this.drawDashedLine(this.selectionBox, pe, ph, 0x1234ff);
+        } else {
+            this.selectionBox.clear();
+        }
+    }
+    // 设置名称
+    public setNameVisible(value: boolean, mode: GameMode) {
+        if (this.assetData.GameMode === mode) {
+            this.text.visible = value;
+        }
+    }
+    // 显示连接点
+    public showConnectionPoint(b: boolean) {
+        this.up.visible = b;
+        this.down.visible = b;
+        this.left.visible = b;
+        this.right.visible = b;
+        this.upLeft.visible = b;
+        this.downLeft.visible = b;
+        this.upRight.visible = b;
+        this.downRight.visible = b;
+    }
+    paintingPipeline(x: number, y: number) {
+        if (this.assetData.CanConnect) {
+                    if (this.workingArea.getPaintMode() === PaintMode.Pipeline) {
+                        if (this.workingArea.paintingPipeline === null) {
+                            this.workingArea.previewLineSegment.visible = true;
+                            this.workingArea.currentClickPoint.position =
+                                new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y);
+                            this.workingArea.paintPoints.push(new PIXI.Point(x, y));
+                            // const tempData = {
+                            //     Id: ObjectID.default.generate(),
+                            //     MultiPoint: JSON.parse(JSON.stringify(this.workingArea.paintPoints)),
+                            //     Point: new PIXI.Point(0, 0),
+                            //     Name: '管线',
+                            //     LinkedObjects: new Array(),
+                            // };
+                            const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos));
+                            const list = [];
+                            json.forEach(element => {
+                                const property = new PropertyInfo(element);
+                                list.push(property);
+                            });
+                            const tempData =  {
+                                TemplateId: this.workingArea.canvasData.selectTemplateData.id,
+                                CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect,
+                                Pipelines: new Array(),
+                                FloorId: this.workingArea.canvasData.selectStorey.id,
+                                Angle: this.workingArea.canvasData.selectTemplateData.angle,
+                                Color: this.workingArea.canvasData.selectTemplateData.color,
+                                Enabled: this.workingArea.canvasData.selectTemplateData.enabled,
+                                FillMode: this.workingArea.canvasData.selectTemplateData.fillMode,
+                                FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId,
+                                FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize,
+                                Height : 32,
+                                Width : 32,
+                                Id: ObjectID.default.generate(),
+                                ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl,
+                                InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode,
+                                MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)),
+                                Point: new PIXI.Point(0, 0),
+                                Name : this.workingArea.canvasData.selectTemplateData.name,
+                                PropertyInfos: list,
+                                Border : this.workingArea.canvasData.selectTemplateData.border,
+                                DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode,
+                                Thickness : this.workingArea.canvasData.selectTemplateData.thickness,
+                                IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding,
+                                GameMode: this.workingArea.canvasData.gameMode,
+                                LinkedObjects: new Array(),
+                            };
+                            this.workingArea.paintingPipeline = new Pipeline(tempData, this.workingArea);
+                            // this.workingArea.paintingPipeline.assetData.LinkedObjects.push(this);
+                            // this.assetData.Pipelines.push(this.workingArea.paintingPipeline.Id);
+                            this.workingArea.emit('createIcon', this.workingArea.paintingPipeline);
+                        } else {
+                            this.workingArea.previewLineSegment.visible = false;
+                            this.workingArea.currentClickPoint.position =
+                                new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y);
+                            this.workingArea.paintPoints.push(new PIXI.Point(x, y));
+                            this.workingArea.paintingPipeline.assetData.MultiPoint =
+                                JSON.parse(JSON.stringify(this.workingArea.paintPoints));
+                            // this.workingArea.paintingPipeline.assetData.LinkedObjects.push(this);
+                            // this.assetData.Pipelines.push(this.workingArea.paintingPipeline);
+                            this.workingArea.paintingPipeline.refresh();
+                            this.workingArea.initPipelineData();
+                        }
+                    }
+                }
+    }
+    // 刷新
+    public refresh() {
+        if (this.assetData.CanConnect) {
+
+        }
+        this.image.width = this.assetData.Width;
+        this.image.height = this.assetData.Height;
+        this.image.angle = this.assetData.Angle;
+        this.text.text = this.assetData.Name
+            + '\r\n'
+            + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
+        this.text.x = this.image.x;
+        this.text.y = this.image.y - this.image.height / 2;
+    }
+}
diff --git a/src/app/working-area/model/wallSpace.ts b/src/app/working-area/model/wallSpace.ts
new file mode 100644
index 0000000..8cb8f1a
--- /dev/null
+++ b/src/app/working-area/model/wallSpace.ts
@@ -0,0 +1,347 @@
+import { WorkingAreaComponent } from '../working-area.component';
+import * as PIXI from 'pixi.js';
+
+/**
+ * 墙面
+ */
+export class WallSpace extends PIXI.Container {
+
+    line: PIXI.Graphics;
+    text: PIXI.Text;
+    style = new PIXI.TextStyle({
+        fontFamily: 'Arial',
+        fontSize: 18,
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        fill: ['#000000'],
+        stroke: '#ffffff',
+        strokeThickness: 3,
+        dropShadow: true,
+        dropShadowColor: '#000000',
+        dropShadowBlur: 3,
+        dropShadowAngle: Math.PI / 6,
+        dropShadowDistance: 1,
+        wordWrap: false,
+        wordWrapWidth: 100,
+    });
+    pts: PIXI.Point[];
+
+    constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
+        super();
+        this.text = new PIXI.Text(this.assetData.Name
+        + '\r\n'
+            + this.assetData.PropertyInfos?.find((item: { PropertyName: string; }) =>
+            item.PropertyName === '名称/编号')?.PropertyValue, this.style);
+        this.line = new PIXI.Graphics();
+        this.addChild(this.text);
+        this.addChild(this.line);
+        this.workingArea.backgroundImage.addChild(this);
+        this.refresh(this.line, this.assetData.MultiPoint);
+
+    }
+
+    /**
+     * 刷新形状
+     */
+    public refresh(c: PIXI.Graphics, pts: PIXI.Point[]): void {
+        const strokeWidth = 1;
+        const startWidth = 30 + strokeWidth;
+        const endWidth = 30 + strokeWidth;
+        const edgeWidth = 10;
+        const openEnded = false;
+        const markerStart = false;
+        const markerEnd = true;
+        const spacing = (openEnded) ? 0 : 0 + strokeWidth / 2;
+        const startSize = 30 + strokeWidth;
+        const endSize = 30 + strokeWidth;
+        const isRounded = true;
+
+            // Base vector (between first points)
+        const pe = pts[pts.length - 1];
+
+            // Finds first non-overlapping point
+        let i0 = 1;
+
+        while (i0 < pts.length - 1 && pts[i0].x === pts[0].x && pts[i0].y === pts[0].y) {
+            i0++;
+            }
+
+        const dx = pts[i0].x - pts[0].x;
+        const dy = pts[i0].y - pts[0].y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+
+        if (dist === 0) {
+            return;
+            }
+
+        // Computes the norm and the inverse norm
+        let nx = dx / dist;
+        let nx1 = nx;
+        let nx2 = nx;
+        let ny = dy / dist;
+        let ny2 = ny;
+        let ny1 = ny;
+        let orthx = edgeWidth * ny;
+        let orthy = -edgeWidth * nx;
+
+        // Stores the inbound function calls in reverse order in fns
+        const fns = [];
+
+        // if (isRounded) {
+        //     // c.setLineJoin('round');
+        //     c.lineTextureStyle({ join: PIXI.LINE_JOIN.ROUND });
+        // } else if (pts.length > 2) {
+        // // Only mitre if there are waypoints
+        //     // c.setMiterLimit(1.42);
+        //     c.lineTextureStyle({ miterLimit: 1.42 });
+        // }
+        // c.lineStyle(1, 0x000000, 1);
+        c.lineTextureStyle({ width: 1, color: 0x00000, join: PIXI.LINE_JOIN.ROUND });
+        // c.begin();
+        c.beginFill(0xffffff);
+        const startNx = nx;
+        const startNy = ny;
+
+        if (markerStart && !openEnded) {
+            this.paintMarker(c, pts[0].x, pts[0].y, nx, ny, startSize, startWidth, edgeWidth, spacing, true);
+        } else {
+            const outStartX = pts[0].x + orthx / 2 + spacing * nx;
+            const outStartY = pts[0].y + orthy / 2 + spacing * ny;
+            const inEndX = pts[0].x - orthx / 2 + spacing * nx;
+            const inEndY = pts[0].y - orthy / 2 + spacing * ny;
+
+            if (openEnded) {
+                c.moveTo(outStartX, outStartY);
+                fns.push( () => {
+                c.lineTo(inEndX, inEndY);
+                });
+            } else {
+                c.moveTo(inEndX, inEndY);
+                c.lineTo(outStartX, outStartY);
+            }
+        }
+        let dx1 = 0;
+        let dy1 = 0;
+        let dist1 = 0;
+
+        for (let i = 0; i < pts.length - 2; i++) {
+        // Work out in which direction the line is bending
+        const pos = this.relativeCcw(pts[i].x, pts[i].y, pts[i + 1].x, pts[i + 1].y, pts[i + 2].x, pts[i + 2].y);
+
+        dx1 = pts[i + 2].x - pts[i + 1].x;
+        dy1 = pts[i + 2].y - pts[i + 1].y;
+
+        dist1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+
+        if (dist1 !== 0) {
+            nx1 = dx1 / dist1;
+            ny1 = dy1 / dist1;
+
+            const tmp1 = nx * nx1 + ny * ny1;
+            const tmp = Math.max(Math.sqrt((tmp1 + 1) / 2), 0.04);
+
+            // Work out the normal orthogonal to the line through the control point and the edge sides intersection
+            nx2 = (nx + nx1);
+            ny2 = (ny + ny1);
+
+            const dist2 = Math.sqrt(nx2 * nx2 + ny2 * ny2);
+
+            if (dist2 !== 0) {
+                nx2 = nx2 / dist2;
+                ny2 = ny2 / dist2;
+
+                // Higher strokewidths require a larger minimum bend, 0.35 covers all but the most extreme cases
+                const strokeWidthFactor = Math.max(tmp, Math.min(1 / 200 + 0.04, 0.35));
+                const angleFactor = (pos !== 0 && isRounded) ? Math.max(0.1, strokeWidthFactor) : Math.max(tmp, 0.06);
+
+                const outX = pts[i + 1].x + ny2 * edgeWidth / 2 / angleFactor;
+                const outY = pts[i + 1].y - nx2 * edgeWidth / 2 / angleFactor;
+                const inX = pts[i + 1].x - ny2 * edgeWidth / 2 / angleFactor;
+                const inY = pts[i + 1].y + nx2 * edgeWidth / 2 / angleFactor;
+
+                if (pos === 0 || !isRounded) {
+                    // If the two segments are aligned, or if we're not drawing curved sections between segments
+                    // just draw straight to the intersection point
+                    c.lineTo(outX, outY);
+
+                    ((x, y) => {
+                        fns.push(() => {
+                            c.lineTo(x, y);
+                        });
+                    })(inX, inY);
+                } else if (pos === -1) {
+                    const c1x = inX + ny * edgeWidth;
+                    const c1y = inY - nx * edgeWidth;
+                    const c2x = inX + ny1 * edgeWidth;
+                    const c2y = inY - nx1 * edgeWidth;
+                    c.lineTo(c1x, c1y);
+                    if (isRounded) {
+                        c.quadraticCurveTo(outX, outY, c2x, c2y); // 圆角
+                    } else {
+                        c.lineTo(outX, outY);
+                    }
+                    ((x, y) => {
+                        fns.push(() => {
+                            c.lineTo(x, y);
+                        });
+                    })(inX, inY);
+                } else {
+                    c.lineTo(outX, outY);
+
+                    ((x, y) => {
+                        const c1x = outX - ny * edgeWidth;
+                        const c1y = outY + nx * edgeWidth;
+                        const c2x = outX - ny1 * edgeWidth;
+                        const c2y = outY + nx1 * edgeWidth;
+
+                        fns.push(() => {
+                            if (isRounded) {
+                                c.quadraticCurveTo(x, y, c1x, c1y);
+                            } else {
+                                c.lineTo(x, y);
+                            }
+                        });
+                        fns.push(() => {
+                            c.lineTo(c2x, c2y);
+                        });
+                            })(inX, inY);
+                }
+
+                nx = nx1;
+                ny = ny1;
+                }
+            }
+        }
+        orthx = edgeWidth * ny1;
+        orthy = - edgeWidth * nx1;
+
+        if (markerEnd && !openEnded) {
+            this.paintMarker(c, pe.x, pe.y, -nx, -ny, endSize, endWidth, edgeWidth, spacing, false);
+        } else {
+            c.lineTo(pe.x - spacing * nx1 + orthx / 2, pe.y - spacing * ny1 + orthy / 2);
+
+            const inStartX = pe.x - spacing * nx1 - orthx / 2;
+            const inStartY = pe.y - spacing * ny1 - orthy / 2;
+
+            if (!openEnded) {
+                c.lineTo(inStartX, inStartY);
+            } else {
+                c.moveTo(inStartX, inStartY);
+
+                fns.splice(0, 0, () => {
+                    c.moveTo(inStartX, inStartY);
+                });
+            }
+        }
+
+        for (let i = fns.length - 1; i >= 0; i--) {
+            fns[i]();
+        }
+        c.closePath();
+        c.endFill();
+        // if (openEnded)
+        // {
+        //     c.end();
+        //     c.stroke();
+        // }
+        // else
+        // {
+        //     c.close();
+        //     c.fillAndStroke();
+        // }
+
+        // Workaround for shadow on top of base arrow
+        // c.setShadow(false);
+
+        // Need to redraw the markers without the low miter limit
+        // c.setMiterLimit(4);
+
+        // if (isRounded)
+        // {
+        //     c.setLineJoin('flat');
+        // }
+
+        // if (pts.length > 2)
+        // {
+        //     // Only to repaint markers if no waypoints
+        //     // Need to redraw the markers without the low miter limit
+        //     c.setMiterLimit(4);
+        //     if (markerStart && !openEnded)
+        //     {
+        //         c.begin();
+        //         this.paintMarker(c, pts[0].x, pts[0].y, startNx, startNy, startSize, startWidth, edgeWidth, spacing, true);
+        //         c.stroke();
+        //         c.end();
+        //     }
+
+        //     if (markerEnd && !openEnded)
+        //     {
+        //         c.begin();
+        //         this.paintMarker(c, pe.x, pe.y, -nx, -ny, endSize, endWidth, edgeWidth, spacing, true);
+        //         c.stroke();
+        //         c.end();
+        //     }
+        // }
+    }
+    /**
+     * Function: paintMarker
+     *
+     * Paints the marker.
+     */
+    paintMarker(c: PIXI.Graphics, ptX: number, ptY: number, nx: number, ny: number,
+                size: number, arrowWidth: number, edgeWidth: number, spacing: number, initialMove: boolean) {
+        const widthArrowRatio = edgeWidth / arrowWidth;
+        const orthx = edgeWidth * ny / 2;
+        const orthy = -edgeWidth * nx / 2;
+
+        const spaceX = (spacing + size) * nx;
+        const spaceY = (spacing + size) * ny;
+
+        if (initialMove) {
+            c.moveTo(ptX - orthx + spaceX, ptY - orthy + spaceY);
+        } else {
+            c.lineTo(ptX - orthx + spaceX, ptY - orthy + spaceY);
+        }
+        c.lineTo(ptX - orthx / widthArrowRatio + spaceX, ptY - orthy / widthArrowRatio + spaceY);
+        c.lineTo(ptX + spacing * nx, ptY + spacing * ny);
+        c.lineTo(ptX + orthx / widthArrowRatio + spaceX, ptY + orthy / widthArrowRatio + spaceY);
+        c.lineTo(ptX + orthx + spaceX, ptY + orthy + spaceY);
+    }
+    /**
+     * Function: relativeCcw
+     *
+     * Returns 1 if the given point on the right side of the segment, 0 if its
+     * on the segment, and -1 if the point is on the left side of the segment.
+     *
+     * Parameters:
+     *
+     * x1 - X-coordinate of the startpoint of the segment.
+     * y1 - Y-coordinate of the startpoint of the segment.
+     * x2 - X-coordinate of the endpoint of the segment.
+     * y2 - Y-coordinate of the endpoint of the segment.
+     * px - X-coordinate of the point.
+     * py - Y-coordinate of the point.
+     */
+    relativeCcw(x1: number, y1: number, x2: number, y2: number, px: number, py: number) {
+        x2 -= x1;
+        y2 -= y1;
+        px -= x1;
+        py -= y1;
+        let ccw = px * y2 - py * x2;
+
+        if (ccw === 0.0) {
+            ccw = px * x2 + py * y2;
+
+            if (ccw > 0.0) {
+                px -= x2;
+                py -= y2;
+                ccw = px * x2 + py * y2;
+
+                if (ccw < 0.0) {
+                    ccw = 0.0;
+                }
+            }
+        }
+        return (ccw < 0.0) ? -1 : ((ccw > 0.0) ? 1 : 0);
+    }
+}
diff --git a/src/app/working-area/working-area.component.html b/src/app/working-area/working-area.component.html
new file mode 100644
index 0000000..ee66290
--- /dev/null
+++ b/src/app/working-area/working-area.component.html
@@ -0,0 +1,2 @@
+<div #content style="width:100%;height:100%;" (mousewheel)='this.mouseWheelHandel($event)'
+    (DOMMouseScroll)='this.mouseWheelHandel($event)'></div>
\ No newline at end of file
diff --git a/src/app/working-area/working-area.component.scss b/src/app/working-area/working-area.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/working-area/working-area.component.spec.ts b/src/app/working-area/working-area.component.spec.ts
new file mode 100644
index 0000000..bd23376
--- /dev/null
+++ b/src/app/working-area/working-area.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WorkingAreaComponent } from './working-area.component';
+
+describe('WorkingAreaComponent', () => {
+  let component: WorkingAreaComponent;
+  let fixture: ComponentFixture<WorkingAreaComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WorkingAreaComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WorkingAreaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts
new file mode 100644
index 0000000..de84fbb
--- /dev/null
+++ b/src/app/working-area/working-area.component.ts
@@ -0,0 +1,1291 @@
+import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input } from '@angular/core';
+import * as PIXI from 'pixi.js';
+import { EventEmitter } from 'events';
+import { EventManager } from '@angular/platform-browser';
+import { OutlineFilter, OldFilmFilter  } from 'pixi-filters';
+import { AssetData, CanvasShareDataService, DisposalNodeData, FloorNodeData } from '../canvas-share-data.service';
+import * as ObjectID from 'bson-objectid';
+import { Charm } from './charm';
+import { SinglePointIcon } from './model/singlePointIcon';
+import { GameMode } from './model/gameMode';
+import { MultipointIcon } from './model/multipointIcon';
+import { PolygonIcon } from './model/polygonIcon';
+import { PutCarArea } from './model/putCarArea';
+import { Arrows } from './model/arrows';
+import { Pipeline } from './model/pipeline';
+import { PaintMode } from './model/paintModel';
+import { WallSpace } from './model/wallSpace';
+import { AxShape } from './model/axShape';
+import { PropertyInfo } from './model/PropertyInfo';
+
+
+@Component({
+  selector: 'app-working-area',
+  templateUrl: './working-area.component.html',
+  styleUrls: ['./working-area.component.scss']
+})
+/**
+ * 工作区
+ */
+export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterViewInit {
+
+  constructor(private eventManager: EventManager, public canvasData: CanvasShareDataService) {
+    super();
+  }
+
+  @ViewChild('content')
+  content: ElementRef;
+  /**
+   * 父组件
+   */
+  @Input() init: any;
+  /**
+   * pixijs 程序
+   */
+  public app: PIXI.Application;
+  /**
+   * 资源加载器
+   */
+  public loader = PIXI.Loader.shared;
+  /**
+   * 背景图
+   */
+  public backgroundImage: PIXI.Sprite;
+  /**
+   * 预览单点图标
+   */
+  public previewSinglePointIcon = new PIXI.Sprite();
+  /**
+   * 预览线段
+   */
+  public previewLineSegment = new PIXI.Graphics();
+  /**
+   * 预览原点
+   */
+  public circleShadow = new PIXI.Graphics();
+  /**
+   * 鼠标位置
+   */
+  public mousePosition: PIXI.Point = new PIXI.Point(0, 0);
+  /**
+   * 绘画模式
+   */
+  private paintMode: PaintMode;
+  /**
+   * 选择器
+   */
+  public selection: Selection = new Selection(this);
+  /**
+   * 当前鼠标的点
+   */
+  public currentClickPoint: PIXI.Graphics = new PIXI.Graphics();
+  /**
+   * 绘制点集合
+   */
+  public paintPoints: PIXI.Point[];
+  /**
+   * 绘制中的管线
+   */
+  public paintingPipeline: Pipeline;
+  /**
+   * 绘制中的箭头
+   */
+  public paintingArrows: Arrows = null;
+  /**
+   * 绘制中的多点图标
+   */
+  public paintingIcon: MultipointIcon;
+  public paintingWall: AxShape;
+  /**
+   * 绘制中的连线
+   */
+  public paintingLine: PIXI.Graphics = new PIXI.Graphics();
+  /**
+   * 绿色描边
+   */
+  public outlineFilterGreen = new OutlineFilter(2, 0x00ff00);
+  /**
+   * 拷贝素材数据
+   */
+  public copyData: any[] = [];
+  /**
+   * 确认绘制按钮
+   */
+  private enterPaintEndButton = PIXI.Sprite.from('assets/images/enterPaintButton.png');
+  /**
+   * 框选工具图形
+   */
+  private rectToolGraphics = new PIXI.Graphics();
+  /**
+   * 初始鼠标位置
+   */
+  private initialScreenMousePos: PIXI.Point = new PIXI.Point();
+  /**
+   * 最终鼠标位置
+   */
+  private finalScreenMousePos: PIXI.Point = new PIXI.Point();
+  /**
+   * 允许编辑
+   */
+  public allowEdit = true;
+  /**
+   * 动画控制器
+   */
+  public animator;
+  public animation;
+  public animationIcon;
+  public animationTime;
+  // 车辆作业面
+  public carAreas: PolygonIcon[];
+  // 车辆数据
+  public carData: Map<string, any> = new Map<string, any>();
+  // 当前选择的车辆id
+  public selectCar: any = null;
+  /**
+   * 数据初始化
+   */
+  ngOnInit(): void {
+    this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => {
+      if (event.keyCode === 17) {
+        this.selection.isMultiselection = true;
+      }
+    });
+    this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => {
+      if (event.keyCode === 17) {
+        this.selection.isMultiselection = false;
+        this.rectToolGraphics.visible = false;
+        this.rectToolGraphics.clear();
+      }
+      // 按Del键删除选中的图标
+      if (event.keyCode === 46) {
+        this.selection.objects.forEach(item => {
+          delete this.canvasData.originaleveryStoreyData.data[item.assetData.Id];
+          this.backgroundImage.removeChild(this.backgroundImage.getChildByName(item.assetData.Id));
+          this.canvasData.isChange = true;
+        });
+        this.emit('deleteIcon');
+      }
+    });
+    // 打印当前工作区信息
+    this.eventManager.addGlobalEventListener('window', 'keypress', (event: any) => {
+      // console.log(event.keyCode);
+      if (event.keyCode === 32) {
+        switch (this.paintMode) {
+          case 0:
+            console.log(`当前的绘制模式是：单点图标`);
+            break;
+          case 1:
+            console.log(`当前的绘制模式是：线段图标`);
+            break;
+          case 2:
+            console.log(`当前的绘制模式是：自定义多边形`);
+            break;
+          case 3:
+            console.log(`当前的绘制模式是：水带多边形`);
+            break;
+          case 4:
+            console.log(`当前的绘制模式是：暂无`);
+            break;
+          case 5:
+            console.log(`当前的绘制模式是：暂无`);
+            break;
+          case 6:
+            console.log(`当前的绘制模式是：结束绘制`);
+            break;
+          default:
+            break;
+        }
+        console.log('当前楼层的数据：');
+        console.log(this.canvasData.originaleveryStoreyData.data);
+
+        console.log('绘制中的管线：');
+        console.log(this.paintingPipeline);
+
+        console.log('处置预案数据：');
+        console.log(this.canvasData.selectPanelPoint.Data);
+      }
+    });
+  }
+  /**
+   * 页面初始化
+   */
+  ngAfterViewInit(): void {
+    this.createCanvas();
+    window.onresize = () => {
+      this.resetCanvas();
+    };
+  }
+  /**
+   *
+   * @param event 鼠标滑动事件
+   */
+  public mouseWheelHandel(event) {
+    const delX = this.mousePosition.x - this.backgroundImage.position.x;
+    const delY = this.mousePosition.y - this.backgroundImage.position.y;
+    const pivot = this.backgroundImage.toLocal(this.mousePosition);
+    const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
+    if (delta > 0) {
+      if (this.backgroundImage.scale.x >= 32) {
+        this.backgroundImage.scale.x = 32;
+        this.backgroundImage.scale.y = 32;
+        this.emit('backgroundScale', this.backgroundImage.scale.x);
+        return;
+      }
+      this.backgroundImage.pivot.set(pivot.x, pivot.y);
+
+      this.backgroundImage.scale.x += this.backgroundImage.scale.x * 0.1;
+      this.backgroundImage.scale.y += this.backgroundImage.scale.y * 0.1;
+
+      this.backgroundImage.position.x += delX;
+      this.backgroundImage.position.y += delY;
+    } else if (delta < 0) {
+      if (this.backgroundImage.scale.x <= 0.1) {
+        this.backgroundImage.scale.x = 0.1;
+        this.backgroundImage.scale.y = 0.1;
+        this.emit('backgroundScale', this.backgroundImage.scale.x);
+        return;
+      }
+      this.backgroundImage.pivot.set(pivot.x, pivot.y);
+
+      this.backgroundImage.scale.x -= this.backgroundImage.scale.x * 0.1;
+      this.backgroundImage.scale.y -= this.backgroundImage.scale.y * 0.1;
+
+      this.backgroundImage.position.x += delX;
+      this.backgroundImage.position.y += delY;
+    }
+    this.emit('backgroundScale', this.backgroundImage.scale.x);
+  }
+  /**
+   *
+   * @param icon 移动到选中车辆到屏幕中心点
+   */
+  public moveIconToScreenCenter(icon) {
+    if (icon.parent === this.backgroundImage && (
+      icon.assetData.Type === 1 ||
+      icon.assetData.Type === 2 ||
+      icon.assetData.Type === 3 ||
+      icon.assetData.Type === 4
+    )) {
+      console.log(this.backgroundImage.position);
+      this.backgroundImage.pivot.set(icon.x, icon.y);
+      this.backgroundImage.position.set(771, 404);
+      clearTimeout(this.animationTime);
+      this.animation?.pause();
+      this.animationIcon?.scale.set(1);
+      this.animation = this.animator.breathe(icon, 10, 10, 30, true, 0);
+      this.animationIcon = icon;
+      this.animationTime = setTimeout(() => {
+        this.animation?.pause();
+        this.animationIcon?.scale.set(1);
+      }, 5000);
+    }
+  }
+  /**
+   * 创建画布
+   */
+  private createCanvas(): void {
+    this.app = new PIXI.Application({
+      width: this.content.nativeElement.clientWidth,
+      height: this.content.nativeElement.clientHeight,
+      antialias: true,
+      transparent: false,
+      resolution: 1,
+      backgroundColor: 0xE9FAFF
+    });
+    this.content.nativeElement.appendChild(this.app.view);
+    this.animator = new Charm(PIXI);
+
+    this.app.ticker.add((delta) => {
+      this.animator.update();
+      this.mousePosition = this.app.renderer.plugins.interaction.mouse.global;
+      if (this.backgroundImage !== undefined) {
+        this.previewSinglePointIcon.position = this.backgroundImage.toLocal(this.mousePosition);
+        this.circleShadow.position = this.backgroundImage.toLocal(this.mousePosition);
+        this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position);
+      }
+      if (this.rectToolGraphics.visible === true) {
+
+        const init = this.initialScreenMousePos;
+        const final = this.finalScreenMousePos;
+
+        this.rectToolGraphics.clear();
+        this.rectToolGraphics.lineStyle(2, 0x00ff00, 1);
+        this.rectToolGraphics.beginFill(0xccccf2, 0.25);
+        this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y);
+        this.rectToolGraphics.endFill();
+        this.rectToolGraphics.closePath();
+      }
+      if (this.paintingArrows !== null) {
+        this.paintingArrows.assetData.pointB = new PIXI.Point(this.circleShadow.position.x, this.circleShadow.position.y);
+        this.paintingArrows.refresh();
+      }
+    });
+    /**
+     * 选中事件
+     */
+    this.on('select', obj => {
+      // this.moveIconToScreenCenter(obj);
+      if (this.allowEdit) {
+        if (obj instanceof MultipointIcon) {
+          if (obj.assetData.GameMode === this.canvasData.gameMode) {
+            obj.setPointVisiable(true);
+          } else {
+            obj.filters = [this.outlineFilterGreen];
+          }
+        } else if (obj instanceof PolygonIcon) {
+          if (obj.assetData.GameMode === this.canvasData.gameMode) {
+            obj.setPointVisiable(true);
+          } else {
+            obj.filters = [this.outlineFilterGreen];
+          }
+        } else {
+          obj.filters = [this.outlineFilterGreen];
+        }
+      } else {
+        obj.filters = [this.outlineFilterGreen];
+      }
+    });
+    /**
+     * 取消选中事件
+     */
+    this.on('deselect', obj => {
+      if (this.allowEdit) {
+        if (obj instanceof MultipointIcon) {
+          obj.setPointVisiable(false);
+        } else if (obj instanceof PolygonIcon) {
+          obj.setPointVisiable(false);
+        } else {
+          obj.filters = [];
+        }
+      } else {
+        obj.filters = [];
+      }
+    });
+    this.on('backgroundScale', scale => {
+      this.previewSinglePointIcon.scale.set((0.5 / scale));
+      this.backgroundImage.children.forEach(item => {
+        if (item instanceof SinglePointIcon) {
+          if (item.assetData.FixedSize) {
+            const data = 1 / scale;
+            item.scale.set(data);
+          } else {
+            const data = 1 / scale;
+            item.text.scale.set(data);
+          }
+        } else if (item instanceof MultipointIcon) {
+          const data = 1 / scale;
+          item.text.scale.set(data);
+        } else if (item instanceof PolygonIcon) {
+          const data = 1 / scale;
+          item.text.scale.set(data);
+        }
+      });
+
+    });
+    this.on('createIcon', obj => {
+      if (obj.assetData.GameMode === GameMode.BasicInformation) {
+        // if (obj.assetData.IsFromBuilding) {
+        //   this.canvasData.originalcompanyBuildingData.data[obj.assetData.Id] = obj.assetData;
+        // } else {
+          this.canvasData.originaleveryStoreyData.data[obj.assetData.Id] = obj.assetData;
+        // }
+      } else {
+        // console.log();
+        if (this.canvasData.selectPanelPoint.Data === undefined
+        || this.canvasData.selectPanelPoint.Data === null) {
+          this.canvasData.selectPanelPoint.Data = new FloorNodeData();
+        }
+        this.canvasData.selectPanelPoint.Data.Stock[obj.assetData.Id] = obj.assetData;
+      }
+      this.canvasData.isChange = true;
+    });
+  }
+  /**
+   * 重置画布
+   */
+  public resetCanvas() {
+    this.app.renderer.resize(this.content.nativeElement.clientWidth, this.content.nativeElement.clientHeight);
+  }
+  /**
+   * 设置名称显示
+   * @param value true  显示 false 隐藏
+   * @param mode BasicInformation = 0 基本信息 Assignment想定作业 = 1 想定作业
+   */
+  public setNameVisible(value: boolean, mode: GameMode): void {
+    this.backgroundImage?.children.forEach(item => {
+      if (item instanceof SinglePointIcon) {
+        item.setNameVisible(value, mode);
+      } else if (item instanceof MultipointIcon) {
+        item.setNameVisible(value, mode);
+      } else if (item instanceof PolygonIcon) {
+        item.setNameVisible(value, mode);
+      }
+    });
+  }
+  /**
+   * 根据id刷新图标
+   * @param id 图标数据id
+   */
+  public refreshIcon(id: string): void {
+    const icon = this.backgroundImage.children.find(item => item.name === id);
+    if (icon instanceof SinglePointIcon) {
+      icon.refresh();
+    } else if (icon instanceof MultipointIcon) {
+      icon.refresh();
+    } else if (icon instanceof PolygonIcon) {
+      icon.refresh();
+    }
+  }
+  /**
+   *
+   * @param value 缩放倍数
+   */
+  public setIconScale(value: number): void {
+    this.backgroundImage.children.forEach(item => {
+      if (item instanceof SinglePointIcon) {
+        item.scale.set(value);
+      } else if (item instanceof MultipointIcon) {
+
+      } else if (item instanceof PolygonIcon) {
+
+      }
+    });
+  }
+  /**
+   * 设置高亮
+   */
+  public setHighlight(ids: string[]): void {
+    this.selection.deselectAll();
+    ids.forEach(item => {
+      let obj = this.backgroundImage.getChildByName(item);
+      if (obj === null) {
+        obj = this.app.stage.getChildByName(item);
+      }
+      this.selection.select(obj);
+    });
+  }
+  /**
+   * 刷新工作区
+   */
+  public async refresh() {
+    this.setPaintMode(PaintMode.endPaint);
+    this.resetCanvas();
+    this.destroyBackgroundImage();
+    await this.createBackgroundImage(this.canvasData.selectStorey.imageUrl);
+
+    // this.refreshBackgroundImage();
+    // this.versionChecking();
+
+
+    const floorData = this.canvasData.originaleveryStoreyData.data;
+    // const buildingData = this.canvasData.originalcompanyBuildingData.data;
+    // const floor = this.canvasData.selectStorey;
+    // // key=>属性名    data[key]=>属性值
+    Object.keys(floorData).forEach((key) => {
+      console.log(floorData[key]);
+      switch (floorData[key].InteractiveMode) {
+        case 0:
+          const singleIcon = new SinglePointIcon(floorData[key], this);
+          break;
+          case 1:
+          const icon = new MultipointIcon(floorData[key], this);
+          break;
+          case 2:
+          const polygonIcon = new PolygonIcon(floorData[key], this);
+          break;
+        }
+    });
+    // Object.keys(buildingData).forEach((key) => {
+    //   if (buildingData[key].FloorId === floor.id) {
+    //     switch (buildingData[key].InteractiveMode) {
+    //       case 0:
+    //         const singleIcon = new SinglePointIcon(buildingData[key], this);
+    //         break;
+    //       case 1:
+    //         const icon = new MultipointIcon(buildingData[key], this);
+    //         break;
+    //       case 2:
+    //         const polygonIcon = new PolygonIcon(buildingData[key], this);
+    //         break;
+    //     }
+    //   }
+    // });
+
+    // 加载处置节点数据
+    const nodeData = this.canvasData.selectPanelPoint.Data;
+    if (nodeData !== undefined && nodeData !== null) {
+      Object.keys(nodeData).forEach((key) => {
+        Object.keys(nodeData[key]).forEach((tempKey) => {
+          switch (nodeData[key][tempKey].InteractiveMode) {
+            case 0:
+              const singleIcon = new SinglePointIcon(nodeData[key][tempKey], this);
+              break;
+            case 1:
+              if (nodeData[key][tempKey].Name === '水带') {
+                const pipeline = new Pipeline(nodeData[key][tempKey], this);
+              } else {
+                const icon = new MultipointIcon(nodeData[key][tempKey], this);
+              }
+              break;
+          case 2:
+              const polygonIcon = new PolygonIcon(nodeData[key][tempKey], this);
+              break;
+        }
+        });
+      });
+    }
+    this.emit('backgroundScale', this.backgroundImage.scale.x);
+  }
+  /**
+   *
+   * @param id 图标ID
+   * @param b 显示/隐藏
+   */
+  public setIconVisible(ids: string[], b: boolean) {
+    ids.forEach(item => {
+      this.backgroundImage.getChildByName(item).visible = b;
+    });
+  }
+  // /**
+  //  * 版本检查
+  //  */
+  // public versionChecking(): void {
+  //   const floorData = this.canvasData.originaleveryStoreyData;
+  //   const buildingData = this.canvasData.originalcompanyBuildingData;
+  //   const nodeData = this.canvasData.selectPanelPoint;
+  //   if (floorData.version && floorData.version === '1.0') {
+  //     floorData.version = '2.0';
+  //     Object.keys(floorData.data).forEach(item => {
+  //       floorData.data[item].Point.y *= -1;
+  //       floorData.data[item].MultiPoint?.forEach(element => {
+  //         element.y *= -1;
+  //       });
+  //     });
+  //   }
+  //   if (buildingData.version && buildingData.version === '1.0') {
+  //     buildingData.version = '2.0';
+  //     Object.keys(buildingData.data).forEach(item => {
+  //       buildingData.data[item].Point.y *= -1;
+  //       buildingData.data[item].MultiPoint?.forEach(element => {
+  //         element.y *= -1;
+  //       });
+  //     });
+  //   }
+  //   if (nodeData.Version && nodeData.Version === '1.0') {
+  //     nodeData.Version = '2.0';
+  //     console.log(this.canvasData.selectPanelPoint.Version);
+  //     Object.keys(nodeData.Data).forEach((key) => {
+  //       Object.keys(nodeData.Data[key]).forEach((tempKey) => {
+  //         nodeData.Data[key][tempKey].Point.y *= -1;
+  //         nodeData.Data[key][tempKey].MultiPoint?.forEach(element => {
+  //           element.y *= -1;
+  //         });
+  //       });
+  //     });
+  //   }
+  // }
+  /**
+   * 创建确认绘制结束按钮
+   */
+  private createEnterPaintEndButton() {
+    this.enterPaintEndButton.width = 60;
+    this.enterPaintEndButton.height = 60;
+    this.enterPaintEndButton.anchor.set(0.5);
+    this.enterPaintEndButton.position =  new PIXI.Point(0, 0);
+    this.enterPaintEndButton.interactive = true;
+    this.enterPaintEndButton.buttonMode = true;
+    this.enterPaintEndButton
+      .on('mousedown', event => {
+        event.stopPropagation();
+        this.enterPaint();
+      });
+    this.backgroundImage.addChild(this.enterPaintEndButton);
+    this.enterPaintEndButton.zIndex = this.backgroundImage.children.length;
+    this.enterPaintEndButton.visible = false;
+  }
+  /**
+   * 创建背景图
+   */
+  private async createBackgroundImage(imageUrl: string): Promise<void> {
+    const image = await PIXI.Texture.fromURL(imageUrl);
+    this.backgroundImage = new PIXI.Sprite(image);
+    this.backgroundImage.anchor.set(0.5);
+    this.backgroundImage.x = this.app.view.width / 2;
+    this.backgroundImage.y = this.app.view.height / 2;
+    this.backgroundImage.interactive = true;
+    this.backgroundImage.name = 'background';
+
+    // const left = this.init.element.nativeElement.querySelector('.functionalDomainLeft').clientWidth;
+    // const right = this.init.element.nativeElement.querySelector('.functionalDomainRight').clientWidth;
+    const imageWidth = this.backgroundImage.texture.width;
+    const imageHeight = this.backgroundImage.texture.height;
+    const appWidth = this.app.view.width - 470;
+    const appHeight = this.app.view.height;
+
+    const wScale = appWidth / imageWidth;
+    const hScale = appHeight / imageHeight;
+
+    const scale = wScale < hScale
+      ? wScale
+      : hScale;
+    this.backgroundImage.scale.set(scale);
+    this.backgroundImage.sortableChildren = true;
+    this.backgroundImage
+      .on('mousedown', event => {
+        if (!event.currentTarget.dragging && this.selection.isMultiselection === false) {
+          event.currentTarget.data = event.data;
+          event.currentTarget.dragging = true;
+          event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
+          event.currentTarget.dragPoint.x -= event.currentTarget.x;
+          event.currentTarget.dragPoint.y -= event.currentTarget.y;
+          switch (this.paintMode) {
+            case PaintMode.endPaint:
+              console.log(this.backgroundImage.toLocal(this.mousePosition));
+              break;
+            case PaintMode.singlePointIcon:
+              const json = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos));
+              const list = [];
+              json.forEach(element => {
+                const property = new PropertyInfo(element);
+                list.push(property);
+              });
+
+              const assetData =  {
+                TemplateId: this.canvasData.selectTemplateData.id,
+                CanConnect: this.canvasData.selectTemplateData.canConnect,
+                Pipelines: new Array(),
+                FloorId: this.canvasData.selectStorey.id,
+                Angle: this.canvasData.selectTemplateData.angle,
+                Color: this.canvasData.selectTemplateData.color,
+                Enabled: this.canvasData.selectTemplateData.enabled,
+                FillMode: this.canvasData.selectTemplateData.fillMode,
+                FireElementId: this.canvasData.selectTemplateData.fireElementId,
+                FixedSize: this.canvasData.selectTemplateData.fixedSize,
+                Height : 32,
+                Width : 32,
+                Id: ObjectID.default.generate(),
+                ImageUrl: this.canvasData.selectTemplateData.imageUrl,
+                InteractiveMode: this.canvasData.selectTemplateData.interactiveMode,
+                MultiPoint : null,
+                Point: new PIXI.Point(this.previewSinglePointIcon.x, this.previewSinglePointIcon.y),
+                Name : this.canvasData.selectTemplateData.name,
+                PropertyInfos: list,
+                Border : this.canvasData.selectTemplateData.border,
+                DrawMode : this.canvasData.selectTemplateData.drawMode,
+                Thickness : this.canvasData.selectTemplateData.thickness,
+                IsFromBuilding : this.canvasData.selectTemplateData.isFromBuilding,
+                GameMode : this.canvasData.gameMode
+              };
+              const singleIcon = new SinglePointIcon(assetData, this);
+              this.emit('createIcon', singleIcon);
+              this.emit('backgroundScale', this.backgroundImage.scale.x);
+              break;
+            case PaintMode.lineIcon:
+              this.previewLineSegment.visible = true;
+              this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
+
+              if (this.paintPoints.length >= 2) {
+                this.enterPaintEndButton.position = this.circleShadow.position;
+                this.enterPaintEndButton.visible = true;
+              }
+
+              if (this.paintingIcon !== null) {
+                this.backgroundImage.removeChild(this.paintingIcon);
+              }
+              const jsonObject = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos));
+              const propertyList = [];
+              jsonObject.forEach(element => {
+                const property = new PropertyInfo(element);
+                propertyList.push(property);
+              });
+              const assetData1 = {
+                TemplateId: this.canvasData.selectTemplateData.id,
+                FloorId: this.canvasData.selectStorey.id,
+                Angle: this.canvasData.selectTemplateData.angle,
+                Color: this.canvasData.selectTemplateData.color,
+                Enabled: this.canvasData.selectTemplateData.enabled,
+                FillMode: this.canvasData.selectTemplateData.fillMode,
+                FireElementId: this.canvasData.selectTemplateData.fireElementId,
+                FixedSize: this.canvasData.selectTemplateData.fixedSize,
+                Height: 32,
+                Width: 32,
+                Id: ObjectID.default.generate(),
+                ImageUrl: this.canvasData.selectTemplateData.imageUrl,
+                InteractiveMode: this.canvasData.selectTemplateData.interactiveMode,
+                MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)),
+                Point: new PIXI.Point(0, 0),
+                Name: this.canvasData.selectTemplateData.name,
+                PropertyInfos: propertyList,
+                Border: this.canvasData.selectTemplateData.border,
+                DrawMode: this.canvasData.selectTemplateData.drawMode,
+                Thickness: this.canvasData.selectTemplateData.thickness,
+                IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding,
+                GameMode: this.canvasData.gameMode
+              };
+              // const assetData1 = {
+              //   ImageUrl: this.canvasData.selectTemplateData.imageUrl,
+              //   Point: new PIXI.Point(0, 0),
+              //   Width: 32,
+              //   Height: 32,
+              //   MultiPoint: this.paintPoints,
+              //   Name: this.canvasData.selectTemplateData.name
+              // };
+              this.paintingIcon = new MultipointIcon(assetData1, this);
+              // this.paintingIcon = new MultipointIcon(this.previewSinglePointIcon.texture, new PIXI.Point(0, 0), this.paintPoints, this,
+              //   this.canvasData.selectTemplateData.name);
+              this.emit('backgroundScale', this.backgroundImage.scale.x);
+              break;
+            case PaintMode.polygonIcon:
+              this.previewLineSegment.visible = true;
+              this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
+              if (this.paintPoints.length === 1) {
+                this.enterPaintEndButton.position = this.circleShadow.position;
+              } else if (this.paintPoints.length >= 3) {
+                this.enterPaintEndButton.visible = true;
+              }
+              this.paintPoints.forEach((value, index, array) => {
+                if (index === 0) {
+                  this.paintingLine.clear();
+                  this.paintingLine.lineStyle(1, 0xffd900, 1);
+                  this.paintingLine.moveTo(value.x, value.y);
+                } else {
+                  this.paintingLine.lineTo(value.x, value.y);
+                }
+              });
+
+              // if (this.paintingIcon !== null) {
+              //   this.backgroundImage.removeChild(this.paintingIcon);
+              // }
+              // this.paintingIcon = new PolygonIcon(this.paintPoints, this);
+              break;
+            case PaintMode.Pipeline:
+
+              if (this.paintingPipeline !== null) {
+                this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+                this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
+                this.paintingPipeline.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints));
+                this.paintingPipeline.refresh();
+              }
+              // this.emit('backgroundScale', this.backgroundImage.scale.x);
+              break;
+            case PaintMode.Arrows:
+              if (this.paintingArrows === null) {
+                const data = {
+                   Id: ObjectID.default.generate(),
+                   name: 'string',
+                   point: new PIXI.Point(this.circleShadow.x, this.circleShadow.y),
+                   pointA: new PIXI.Point(this.circleShadow.x, this.circleShadow.y),
+                   pointB: new PIXI.Point(this.circleShadow.x, this.circleShadow.y),
+                   source: 'assets/images/进攻方向.png',
+                };
+                this.paintingArrows = new Arrows(data, this);
+              } else {
+                this.paintingArrows.ready = true;
+                this.paintingArrows = null;
+                this.paintMode = PaintMode.endPaint;
+              }
+              break;
+            case PaintMode.Car:
+              // this.previewLineSegment.visible = true;
+              // this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              // this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
+
+              // if (this.paintPoints.length >= 2) {
+              //   this.enterPaintEndButton.position = this.circleShadow.position;
+              //   this.enterPaintEndButton.visible = true;
+              // }
+
+              // if (this.paintingWall !== null) {
+              //   this.backgroundImage.removeChild(this.paintingWall);
+              // }
+              // const jsonObject1 = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos));
+              // const propertyList1 = [];
+              // jsonObject1.forEach(element => {
+              //   const property = new PropertyInfo(element);
+              //   propertyList1.push(property);
+              // });
+              // const assetData11 = {
+              //   TemplateId: this.canvasData.selectTemplateData.id,
+              //   FloorId: this.canvasData.selectStorey.id,
+              //   Angle: this.canvasData.selectTemplateData.angle,
+              //   Color: this.canvasData.selectTemplateData.color,
+              //   Enabled: this.canvasData.selectTemplateData.enabled,
+              //   FillMode: this.canvasData.selectTemplateData.fillMode,
+              //   FireElementId: this.canvasData.selectTemplateData.fireElementId,
+              //   FixedSize: this.canvasData.selectTemplateData.fixedSize,
+              //   Height: 32,
+              //   Width: 32,
+              //   Id: ObjectID.default.generate(),
+              //   ImageUrl: this.canvasData.selectTemplateData.imageUrl,
+              //   InteractiveMode: this.canvasData.selectTemplateData.interactiveMode,
+              //   MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)),
+              //   Point: new PIXI.Point(0, 0),
+              //   Name: this.canvasData.selectTemplateData.name,
+              //   PropertyInfos: propertyList1,
+              //   Border: this.canvasData.selectTemplateData.border,
+              //   DrawMode: this.canvasData.selectTemplateData.drawMode,
+              //   Thickness: this.canvasData.selectTemplateData.thickness,
+              //   IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding,
+              //   GameMode: this.canvasData.gameMode
+              // };
+
+              // this.paintingWall = new WallSpace(assetData11, this);
+              // this.emit('backgroundScale', this.backgroundImage.scale.x);
+              break;
+          }
+        } else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) {
+          this.rectToolGraphics.visible = true;
+          event.currentTarget.dragging = true;
+          this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
+          this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
+        }
+      })
+      .on('mouseup', event => {
+        if (event.currentTarget.dragging) {
+          event.currentTarget.dragging = false;
+          event.currentTarget.data = null;
+        }
+        if (this.rectToolGraphics.visible === true) {
+          this.backgroundImage.children.forEach(item => {
+            if (item instanceof SinglePointIcon
+              || item instanceof MultipointIcon
+              || item instanceof PolygonIcon) {
+              if (this.rectToolGraphics.getLocalBounds().contains(item.x, item.y)) {
+                this.selection.select(item);
+              }
+            }
+          });
+          this.rectToolGraphics.clear();
+          this.rectToolGraphics.visible = false;
+        }
+      })
+      .on('mouseupoutside', event => {
+        if (event.currentTarget.dragging) {
+          event.currentTarget.dragging = false;
+          event.currentTarget.data = null;
+        }
+      })
+      .on('mousemove', event => {
+        if (event.currentTarget.dragging && this.selection.isMultiselection === false) {
+          const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
+          event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x;
+          event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y;
+        } else if (event.currentTarget.dragging && this.selection.isMultiselection === true) {
+          if (this.rectToolGraphics.visible === true) {
+            this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
+          }
+        }
+      })
+      .on('rightclick', event => {
+        event.stopPropagation();
+        this.selection.deselectAll();
+        this.setPaintMode(PaintMode.endPaint);
+      })
+      .on('pointerover', (event) => {
+        this.previewSinglePointIcon.filters = null;
+      })
+      .on('pointerout', (event) => {
+        this.previewSinglePointIcon.filters = null;
+      });
+    this.app.stage.addChild(this.backgroundImage);
+    this.createPreviewSinglePointIcon();
+    this.createPreviewLineSegment();
+    this.createCircleShadow();
+    this.createEnterPaintEndButton();
+    this.backgroundImage.addChild(this.paintingLine);
+
+  }
+
+  /**
+   * 刷新背景图
+   */
+  public refreshBackgroundImage(): void {
+    if (!this.canvasData.selectStorey.imageUrl) {
+      this.backgroundImage.visible = false;
+    } else {
+      this.backgroundImage.texture = PIXI.Texture.from(this.canvasData.selectStorey.imageUrl);
+      this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle;
+      this.backgroundImage.visible = true;
+    }
+  }
+  /**
+   * 清空画布
+   */
+  public destroyBackgroundImage(): void {
+    this.app.stage.removeChild(this.backgroundImage);
+  }
+  /**
+   * 设置背景图缩放
+   * @param scale 缩放系数
+   */
+  public setBackgroundScale(scale: number): void {
+    this.backgroundImage.scale.set(scale);
+    this.emit('backgroundScale', this.backgroundImage.scale.x);
+  }
+  /**
+   * 设置背景图角度
+   * @param imageAngle 角度值
+   */
+  public setBackgroundAngle(imageAngle: number) {
+    this.backgroundImage.angle = imageAngle;
+  }
+  /**
+   * 创建预览单点图标
+   */
+  private createPreviewSinglePointIcon(): void {
+    this.previewSinglePointIcon = PIXI.Sprite.from('assets/images/noImg.png');
+    this.previewSinglePointIcon.width = 32;
+    this.previewSinglePointIcon.height = 32;
+    this.previewSinglePointIcon.alpha = 1;
+    this.previewSinglePointIcon.anchor.set(0.5);
+    this.previewSinglePointIcon.visible = false;
+    this.backgroundImage.addChild(this.previewSinglePointIcon);
+  }
+  /**
+   * 改变预览单点图标
+   * @param uri 图片地址
+   */
+  private changePreviewSinglePointIcon(uri: string): void {
+    this.previewSinglePointIcon.texture = PIXI.Texture.from(uri);
+    this.previewSinglePointIcon.visible = true;
+  }
+  /**
+   * 创建预览线段
+   */
+  private createPreviewLineSegment() {
+    this.previewLineSegment.visible = false;
+    this.backgroundImage.addChild(this.currentClickPoint);
+    this.backgroundImage.addChild(this.previewLineSegment);
+
+    this.backgroundImage.addChild(this.rectToolGraphics);
+    this.rectToolGraphics.visible = false;
+  }
+  /**
+   * 刷新预览线段
+   * @param pointA 点A
+   * @param pointB 点B
+   */
+  private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) {
+    this.previewLineSegment.clear();
+    this.previewLineSegment.lineStyle(1, 0xffd900, 1);
+    this.previewLineSegment.moveTo(pointA.x, pointA.y);
+    this.previewLineSegment.lineTo(pointB.x, pointB.y );
+  }
+  /**
+   * 创建半径图标影子
+   * @param x 半径
+   */
+  private createCircleShadow(): void {
+    this.circleShadow.beginFill(0xFFCC5A);
+    this.circleShadow.drawCircle(0, 0, 10);
+    this.circleShadow.endFill();
+    this.circleShadow.visible = false;
+    this.backgroundImage.addChild(this.circleShadow);
+  }
+  showConnectionPoint(b: boolean) {
+    this.backgroundImage?.children.forEach(item => {
+        if (item instanceof SinglePointIcon) {
+          if (item.assetData.CanConnect) {
+            item.showConnectionPoint(b);
+         }
+      }
+    });
+  }
+  /**
+   * 开始绘制
+   */
+  public beginPaint() {
+    if (this.canvasData.selectTemplateData.name === '水带') {
+      this.showConnectionPoint(true);
+      this.setPaintMode(PaintMode.Pipeline);
+      return;
+    }
+    switch (this.canvasData.selectTemplateData.interactiveMode) {
+      case 0:
+        this.setPaintMode(PaintMode.singlePointIcon);
+        break;
+      case 1:
+        this.setPaintMode(PaintMode.lineIcon);
+        break;
+      case 2:
+        this.setPaintMode(PaintMode.polygonIcon);
+        break;
+      case 3:
+        if (this.canvasData.selectTemplateData.name) {
+          this.setPaintMode(PaintMode.Pipeline);
+        }
+        break;
+    }
+  }
+  /**
+   * 初始化管线数据
+   */
+  public initPipelineData(): void {
+    this.paintPoints = [];
+    this.paintingPipeline = null;
+  }
+  public beginPaintingArrows(): void {
+    this.paintMode = PaintMode.Arrows;
+  }
+  /**
+   * 设置绘制状态
+   * @param mode 状态
+   */
+  public setPaintMode(mode: PaintMode) {
+    if (this.paintMode === mode) { return; }
+    this.paintMode = mode;
+    if (this.paintMode !== PaintMode.Pipeline) {
+      this.showConnectionPoint(false);
+    }
+    switch (this.paintMode) {
+      case PaintMode.Pipeline:
+
+        break;
+      case PaintMode.singlePointIcon:
+        this.previewSinglePointIcon.visible = false;
+        this.changePreviewSinglePointIcon(this.canvasData.selectTemplateData.imageUrl);
+        break;
+      case PaintMode.lineIcon:
+        this.circleShadow.visible = false;
+        this.previewLineSegment.visible = false;
+        this.paintPoints.splice(0, this.paintPoints.length);
+        if (this.paintingIcon !== null) {
+          this.backgroundImage.removeChild(this.paintingIcon);
+        }
+        this.previewSinglePointIcon.texture = PIXI.Texture.from(this.canvasData.selectTemplateData.imageUrl);
+        this.circleShadow.visible = true;
+        break;
+      case PaintMode.polygonIcon:
+        this.circleShadow.visible = false;
+        this.previewLineSegment.visible = false;
+        this.paintingIcon = null;
+        this.paintPoints.splice(0, this.paintPoints.length);
+        this.paintingLine.clear();
+        this.circleShadow.visible = true;
+        break;
+      case PaintMode.endPaint:
+        // 重置组件状态
+        if ( this.paintingIcon !== undefined
+          && this.paintingIcon !== null) {
+          this.backgroundImage.removeChild(this.paintingIcon);
+        }
+
+        if (this.paintingPipeline !== undefined
+          && this.paintingPipeline !== null) {
+          this.backgroundImage.removeChild(this.paintingPipeline);
+        }
+        this.paintingLine.clear();
+        this.resetData();
+        break;
+      default:
+        break;
+    }
+  }
+  /**
+   * 获取绘制状态
+   */
+  public getPaintMode(): PaintMode {
+    return this.paintMode;
+  }
+  /**
+   * 重置
+   */
+  public resetData() {
+    this.previewSinglePointIcon.filters = null;
+    this.previewSinglePointIcon.visible = false;
+    this.previewSinglePointIcon.angle = 0;
+
+    this.initPipelineData();
+    //
+    this.circleShadow.visible = false;
+    this.previewLineSegment.visible = false;
+  }
+  /**
+   * 确认绘制
+   */
+  private enterPaint(): void {
+    this.previewLineSegment.visible = false;
+    this.enterPaintEndButton.visible = false;
+    switch (this.paintMode) {
+      case PaintMode.lineIcon:
+        if (this.paintPoints.length >= 2) {
+          this.emit('createIcon', this.paintingIcon);
+          this.paintingIcon = null;
+        }
+        break;
+      case PaintMode.polygonIcon:
+        this.paintingLine.clear();
+        if (this.paintPoints.length >= 3) {
+          const jsonList = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos));
+          const propertyList = [];
+          jsonList.forEach(element => {
+            const property = new PropertyInfo(element);
+            propertyList.push(property);
+          });
+          const assetData = {
+            TemplateId: this.canvasData.selectTemplateData.id,
+            FloorId: this.canvasData.selectStorey.id,
+            Angle: this.canvasData.selectTemplateData.angle,
+            Color: this.canvasData.selectTemplateData.color,
+            Enabled: this.canvasData.selectTemplateData.enabled,
+            FillMode: this.canvasData.selectTemplateData.fillMode,
+            FireElementId: this.canvasData.selectTemplateData.fireElementId,
+            FixedSize: this.canvasData.selectTemplateData.fixedSize,
+            Height: 32,
+            Width: 32,
+            Id: ObjectID.default.generate(),
+            ImageUrl: this.canvasData.selectTemplateData.imageUrl,
+            InteractiveMode: this.canvasData.selectTemplateData.interactiveMode,
+            MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)),
+            Point: new PIXI.Point(0, 0),
+            Name: this.canvasData.selectTemplateData.name,
+            PropertyInfos: propertyList,
+            Border: this.canvasData.selectTemplateData.border,
+            DrawMode: this.canvasData.selectTemplateData.drawMode,
+            Thickness: this.canvasData.selectTemplateData.thickness,
+            IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding,
+            GameMode: this.canvasData.gameMode
+          };
+          const polygonIcon = new PolygonIcon(assetData, this);
+          this.emit('createIcon', polygonIcon);
+        }
+        break;
+    }
+    this.paintPoints.splice(0, this.paintPoints.length);
+    this.emit('backgroundScale', this.backgroundImage.scale.x);
+  }
+  /**
+   * 复制
+   */
+  public copy(): void {
+    this.copyData = [];
+    this.selection.objects.forEach(item => {
+      const newData = JSON.parse(JSON.stringify(item.assetData));
+      this.copyData.push(newData);
+    });
+  }
+  /**
+   * 粘贴
+   */
+  public paste(companyId: string, buildingId: string, floorId: string): void {
+    this.copyData.forEach(item => {
+      item.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5);
+      const newData = JSON.parse(JSON.stringify(item));
+      newData.Id = ObjectID.default.generate(),
+      newData.CompanyId = companyId;
+      newData.BuildingId = buildingId;
+      newData.FloorId = floorId;
+      newData.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5);
+      // if (newData.IsFromBuilding) {
+      //   this.canvasData.originalcompanyBuildingData.data[newData.Id] = newData;
+      // } else {
+      this.canvasData.originaleveryStoreyData.data[newData.Id] = newData;
+      // }
+      switch (item.InteractiveMode) {
+        case PaintMode.singlePointIcon:
+          const singleIcon = new SinglePointIcon(newData, this);
+          break;
+        case PaintMode.lineIcon:
+          const lineIcon = new MultipointIcon(newData, this);
+          break;
+        case PaintMode.polygonIcon:
+          const polygonIcon = new PolygonIcon(newData, this);
+          break;
+      }
+      this.selection.select(this.backgroundImage.getChildByName(newData.Id));
+    });
+  }
+
+}
+
+/**
+ * 选择器
+ */
+export class Selection {
+  constructor(private workingArea: WorkingAreaComponent) {}
+  public objects: any[] = [];
+  public isMultiselection = false;
+  /**
+   * 返回选择器中是否包含对象
+   * @param obj 对象
+   */
+  public contains(obj: any): boolean {
+    return this.objects.includes(obj);
+  }
+  /**
+   * 选定对象
+   * @param obj 对象
+   */
+  public select(obj: any) {
+    if (!this.contains(obj)) {
+      this.workingArea.emit('select', obj);
+      this.objects.push(obj);
+    }
+  }
+  /**
+   * 取消选定对象
+   * @param obj 对象
+   */
+  public deselect(obj: any) {
+    if (this.contains(obj)) {
+      this.workingArea.emit('deselect', obj);
+      const idx = this.objects.findIndex(x => x === obj);
+      this.objects.splice(idx, 1);
+    }
+  }
+  /**
+   * 选定或取消选定对象
+   * @param obj 对象
+   */
+  public selectOrDeselect(obj: any) {
+    if (this.contains(obj)) {
+      this.deselect(obj);
+    } else {
+      this.select(obj);
+    }
+  }
+  /**
+   * 取消选定所有已选定对象
+   */
+  public deselectAll() {
+    this.objects.forEach(item => {
+      this.workingArea.emit('deselect', item);
+    });
+    this.objects.splice(0, this.objects.length);
+  }
+  /**
+   * 取消选定所有对象后选定一个对象
+   * @param obj 对象
+   */
+  public selectOne(obj: any) {
+    if (this.isMultiselection) {
+      this.selectOrDeselect(obj);
+    } else {
+      this.deselectAll();
+      this.select(obj);
+    }
+  }
+  /**
+   * 选定对象集合中所有对象
+   * @param objects 对象集合
+   */
+  public selectAll(objects: any[]) {
+    this.objects.forEach(item => {
+      this.select(item);
+    });
+  }
+}
+
+
+/**
+ * 车辆类型
+ */
+export enum Type {
+  水源 = 0,
+  举高喷射消防车 = 1,
+  泡沫消防车 = 2,
+  水罐消防车 = 3,
+  压缩空气泡沫消防车 = 4
+}
diff --git a/src/assets/images/enterPaintButton.png b/src/assets/images/enterPaintButton.png
new file mode 100644
index 0000000..e6b99b7
Binary files /dev/null and b/src/assets/images/enterPaintButton.png differ
diff --git a/src/assets/images/handle-fixed.png b/src/assets/images/handle-fixed.png
new file mode 100644
index 0000000..b4b600b
Binary files /dev/null and b/src/assets/images/handle-fixed.png differ
diff --git a/src/assets/images/handle-main.png b/src/assets/images/handle-main.png
new file mode 100644
index 0000000..ee067ff
Binary files /dev/null and b/src/assets/images/handle-main.png differ
diff --git a/src/assets/images/handle-secondary.png b/src/assets/images/handle-secondary.png
new file mode 100644
index 0000000..b4a3090
Binary files /dev/null and b/src/assets/images/handle-secondary.png differ
diff --git a/src/assets/images/handle-terminal.png b/src/assets/images/handle-terminal.png
new file mode 100644
index 0000000..ec03b31
Binary files /dev/null and b/src/assets/images/handle-terminal.png differ
diff --git a/src/assets/images/loginBackground.png b/src/assets/images/loginBackground.png
index ba9ab6d..6358699 100644
Binary files a/src/assets/images/loginBackground.png and b/src/assets/images/loginBackground.png differ
diff --git a/src/assets/images/loginCenter.png b/src/assets/images/loginCenter.png
new file mode 100644
index 0000000..53d89f7
Binary files /dev/null and b/src/assets/images/loginCenter.png differ
diff --git a/src/assets/images/logo1.png b/src/assets/images/logo1.png
deleted file mode 100644
index 4446bc9..0000000
Binary files a/src/assets/images/logo1.png and /dev/null differ
diff --git a/src/assets/images/main_bg.png b/src/assets/images/main_bg.png
deleted file mode 100644
index 8beb6c5..0000000
Binary files a/src/assets/images/main_bg.png and /dev/null differ
diff --git a/src/assets/images/noImg.png b/src/assets/images/noImg.png
new file mode 100644
index 0000000..f9e4db7
Binary files /dev/null and b/src/assets/images/noImg.png differ