From 397eba702649805640a6a740c6e8c7983f9791af Mon Sep 17 00:00:00 2001
From: ann <aannzee@gmail.com>
Date: Fri, 21 Jul 2023 17:36:50 +0800
Subject: [PATCH] fix

---
 package-lock.json                        | 421 +++++++++++++++++++++++
 package.json                             |   1 +
 src/router/modules/setting.js            |   4 +-
 src/views/setting/monitor/index copy.vue | 158 +++++++++
 src/views/setting/monitor/index.vue      | 375 ++++++++++++++------
 yarn.lock                                | 177 ++++++++++
 6 files changed, 1033 insertions(+), 103 deletions(-)
 create mode 100644 src/views/setting/monitor/index copy.vue

diff --git a/package-lock.json b/package-lock.json
index 9ff4b1dd..800bf334 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,6 +47,7 @@
         "vue-codemirror": "^4.0.6",
         "vue-count-to": "1.0.13",
         "vue-dplayer": "^0.0.10",
+        "vue-grid-layout": "^2.4.0",
         "vue-json-editor": "^1.4.3",
         "vue-router": "3.0.2",
         "vue-splitpane": "1.0.4",
@@ -1908,6 +1909,210 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "node_modules/@interactjs/actions": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/actions/-/actions-1.10.2.tgz",
+      "integrity": "sha512-BHJcW84WCMf/LsKmha/1Yog7aH3+QBXbLvowvZvwYvgjdUIb3xCa1a7FUYXuWAeKNMyKPVjFun+WPce75B+1tA==",
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.2"
+      },
+      "peerDependencies": {
+        "@interactjs/core": "1.10.2",
+        "@interactjs/utils": "1.10.2"
+      }
+    },
+    "node_modules/@interactjs/arrange": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/arrange/-/arrange-1.10.2.tgz",
+      "integrity": "sha512-pPLA9o4RWMFN0VfalklOFSRLL4WqqXcD9no4XEuqV00goZPCxLBbMTztaWwnutlRy7evtOhUjUH+pZVsS+dZ4Q=="
+    },
+    "node_modules/@interactjs/auto-scroll": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/auto-scroll/-/auto-scroll-1.10.2.tgz",
+      "integrity": "sha512-yYqzOawwvWd1NNnlqZdzrXoOMFafQ2/ws85erpJqdaNMQE221z2uP+QYhFRLQRgYUlTbHFfmjDpzhuJgq4uA8Q==",
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.2"
+      },
+      "peerDependencies": {
+        "@interactjs/utils": "1.10.2"
+      }
+    },
+    "node_modules/@interactjs/auto-start": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/auto-start/-/auto-start-1.10.2.tgz",
+      "integrity": "sha512-nZudj8VzJzz+uEyDHqXwtKpvUYr+Oj1+xBrJEu21CywroHQWM2J4fCIiCgeCo3d5/p/TrzFk5b+YfAWePKiLxA==",
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.2"
+      },
+      "peerDependencies": {
+        "@interactjs/core": "1.10.2",
+        "@interactjs/utils": "1.10.2"
+      }
+    },
+    "node_modules/@interactjs/clone": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/clone/-/clone-1.10.2.tgz",
+      "integrity": "sha512-XzA8BRHSCwvysOegZ1kopg+IJF3erh4qzY6DRoZsIJovKAXawoa176E58IAzDbgYPJ2yoaSGT+XyzT2C0wa3pQ=="
+    },
+    "node_modules/@interactjs/core": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/core/-/core-1.10.2.tgz",
+      "integrity": "sha512-SA5KRGo+gFJOhBj1Z2dLHhAf0/2nyHNd4SQ460aIQ3jj/QhqbJW6kGzmh7hBa2FzVGgxLhcQu7NZaP4rnDfUNw==",
+      "peerDependencies": {
+        "@interactjs/utils": "1.10.2"
+      }
+    },
+    "node_modules/@interactjs/dev-tools": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/dev-tools/-/dev-tools-1.10.2.tgz",
+      "integrity": "sha512-aAd9NgTAGA3yVdFCYcAAYrM4TYQFuVqEvsF+xj+g5SlGyrJ7+GTjPZ2rScOyAsABY4Tz64L2pXvWmXMG87dncA==",
+      "dependencies": {
+        "@interactjs/utils": "1.10.2"
+      },
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.2"
+      }
+    },
+    "node_modules/@interactjs/feedback": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/feedback/-/feedback-1.10.2.tgz",
+      "integrity": "sha512-XlcoICGrFeUwwRtDgOpstOOvlU42WZoEg7gJHK3LwF7j0IctPd1+3blXofFlBeVvodle8MvUMepm5CRXz741fA=="
+    },
+    "node_modules/@interactjs/inertia": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/inertia/-/inertia-1.10.2.tgz",
+      "integrity": "sha512-ZmN1joN6J36Q6SOp3V0iZOisXZOBMSAUj0STo8wbwCKy7K8IrC9vjUBbO2JM52cT6o7hg5ebHsp5c8FrebSHlg==",
+      "dependencies": {
+        "@interactjs/offset": "1.10.2"
+      },
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.2"
+      },
+      "peerDependencies": {
+        "@interactjs/core": "1.10.2",
+        "@interactjs/modifiers": "1.10.2",
+        "@interactjs/utils": "1.10.2"
+      }
+    },
+    "node_modules/@interactjs/interact": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/interact/-/interact-1.10.2.tgz",
+      "integrity": "sha512-Ms5uVCY9IobVYpQyBnBdkP6Bk6iDY7TkC7GupsdUPUxzAvYSQCTEAGr/1PwxSrSS6dN/8O8TuyUWPbCaylr/JA==",
+      "dependencies": {
+        "@interactjs/core": "1.10.2",
+        "@interactjs/types": "1.10.2",
+        "@interactjs/utils": "1.10.2"
+      }
+    },
+    "node_modules/@interactjs/interactjs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/interactjs/-/interactjs-1.10.2.tgz",
+      "integrity": "sha512-OwLl70af6lfZOOg/bvWKSNm1DS1nDI72QnzDYljSKfc2D8stqLIGDO1wPY2rhZudUG5q3t50EhmMUQF76yll/g==",
+      "dependencies": {
+        "@interactjs/actions": "1.10.2",
+        "@interactjs/arrange": "1.10.2",
+        "@interactjs/auto-scroll": "1.10.2",
+        "@interactjs/auto-start": "1.10.2",
+        "@interactjs/clone": "1.10.2",
+        "@interactjs/core": "1.10.2",
+        "@interactjs/dev-tools": "1.10.2",
+        "@interactjs/feedback": "1.10.2",
+        "@interactjs/inertia": "1.10.2",
+        "@interactjs/interact": "1.10.2",
+        "@interactjs/modifiers": "1.10.2",
+        "@interactjs/multi-target": "1.10.2",
+        "@interactjs/offset": "1.10.2",
+        "@interactjs/pointer-events": "1.10.2",
+        "@interactjs/react": "1.10.2",
+        "@interactjs/reflow": "1.10.2",
+        "@interactjs/utils": "1.10.2",
+        "@interactjs/vue": "1.10.2"
+      }
+    },
+    "node_modules/@interactjs/modifiers": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/modifiers/-/modifiers-1.10.2.tgz",
+      "integrity": "sha512-3wYEucvZF2NTIslnVIKw5MWhkn9LM42cGCQaC19o3LZeWnbps7NnHJCyQp6zylJrCbwt7f+CSt4Oj2/s0f6XEA==",
+      "dependencies": {
+        "@interactjs/snappers": "1.10.2"
+      },
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.2"
+      },
+      "peerDependencies": {
+        "@interactjs/core": "1.10.2",
+        "@interactjs/utils": "1.10.2"
+      }
+    },
+    "node_modules/@interactjs/multi-target": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/multi-target/-/multi-target-1.10.2.tgz",
+      "integrity": "sha512-O2GiIqgZBzjAVTOpL8doTnAcM9AtM3+H/Bb+An12wWKtNutVK7JbqUAO2nYueOk55/PP3yDLY9Qdr15RJns3lQ=="
+    },
+    "node_modules/@interactjs/offset": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/offset/-/offset-1.10.2.tgz",
+      "integrity": "sha512-xLgQqinFUY7ZqSX9d9on7XRcxvQdHNEAktj2QFwxMsEwrA6zbKROpPVwt8WQ1yBAeJSFjgYGcmCMPW5K41dT0w==",
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.2"
+      },
+      "peerDependencies": {
+        "@interactjs/core": "1.10.2",
+        "@interactjs/utils": "1.10.2"
+      }
+    },
+    "node_modules/@interactjs/pointer-events": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/pointer-events/-/pointer-events-1.10.2.tgz",
+      "integrity": "sha512-O8s3N399hkGIzWGlcJVy0LJyDn5YWDh6XKjyowh/QivtlZSWPY8eglmlN2uZX0lmiqUYghbKI4CpQYP/cE0ZDA==",
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.2"
+      },
+      "peerDependencies": {
+        "@interactjs/core": "1.10.2",
+        "@interactjs/utils": "1.10.2"
+      }
+    },
+    "node_modules/@interactjs/react": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/react/-/react-1.10.2.tgz",
+      "integrity": "sha512-JXzPdANft+W2vq3SCSzprCwom5UuC8TaiAAhVdt8R+/P6xHbOeAX93XLS5YmDwT8e0Zh9J9jYvz55tkTdwjFZQ=="
+    },
+    "node_modules/@interactjs/reflow": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/reflow/-/reflow-1.10.2.tgz",
+      "integrity": "sha512-pc6o6RRhSCYQC4auZexRb7z5FQkdSVev5HzlRfUAjfw4C076qgbcs63ESRKy4YXdSBtUTvARQZxpuWUNGquzJw==",
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.2"
+      },
+      "peerDependencies": {
+        "@interactjs/core": "1.10.2",
+        "@interactjs/utils": "1.10.2"
+      }
+    },
+    "node_modules/@interactjs/snappers": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/snappers/-/snappers-1.10.2.tgz",
+      "integrity": "sha512-wQ41Vn5GRn6VavjIEUtTkd9d5QgdKgC4+CPW0fjKkiQclLBmaic7VibNETO8twN0Jx5e73EoPj9K2nAVHIA0hA==",
+      "peerDependencies": {
+        "@interactjs/utils": "1.10.2"
+      }
+    },
+    "node_modules/@interactjs/types": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/types/-/types-1.10.2.tgz",
+      "integrity": "sha512-l0T1bU8OHRv716ztQOYwP+K7b/lA76C0T3r/cdabbUv6CKeAFdFRRFlmNxYOM36SxMGWAiq5VWrN3SeXlB7Fow=="
+    },
+    "node_modules/@interactjs/utils": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/utils/-/utils-1.10.2.tgz",
+      "integrity": "sha512-sOr+pu7XGAN4qv+ikajMo3RJygbkbMLegmx0Tv5Qf6e80sF42FjkmHeMGuV7fL98nwat0VmDiWerOFBnKctXow=="
+    },
+    "node_modules/@interactjs/vue": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/vue/-/vue-1.10.2.tgz",
+      "integrity": "sha512-msLdc42DFsCPQZt6YBGZrw8Ro23kQcNnj+iLz2OUQcOrp/lma7WjorUuAwwfyFna2DevLtiYlMLbT0dpO/cVhg=="
+    },
     "node_modules/@intervolga/optimize-cssnano-plugin": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz",
@@ -5066,6 +5271,11 @@
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
       "dev": true
     },
+    "node_modules/batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA=="
+    },
     "node_modules/bcrypt-pbkdf": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
@@ -8533,6 +8743,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/element-resize-detector": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
+      "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
+      "dependencies": {
+        "batch-processor": "1.0.0"
+      }
+    },
     "node_modules/element-ui": {
       "version": "2.13.2",
       "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.13.2.tgz",
@@ -22575,6 +22793,20 @@
       "resolved": "https://registry.npmjs.org/vue-github-badge/-/vue-github-badge-1.0.1.tgz",
       "integrity": "sha512-8X+FUWapnnDfs6cRUg3mCfHUf2r5arUfCSRdvbIn860oj9us3Rz3VOtioUgmfzh6EhaaYTs0Oh78EzJ+Z6uqAA=="
     },
+    "node_modules/vue-grid-layout": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/vue-grid-layout/-/vue-grid-layout-2.4.0.tgz",
+      "integrity": "sha512-MRQVt1BdWDaPN4gKGEKOVVwiTyucqJhrGEyjiY9Muor+dzFFq4Hm0geSpYJpLvC1GLlTL8KWUwy0suKrHm+mqg==",
+      "dependencies": {
+        "@interactjs/actions": "1.10.2",
+        "@interactjs/auto-scroll": "1.10.2",
+        "@interactjs/auto-start": "1.10.2",
+        "@interactjs/dev-tools": "1.10.2",
+        "@interactjs/interactjs": "1.10.2",
+        "@interactjs/modifiers": "1.10.2",
+        "element-resize-detector": "^1.2.1"
+      }
+    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -25352,6 +25584,168 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "@interactjs/actions": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/actions/-/actions-1.10.2.tgz",
+      "integrity": "sha512-BHJcW84WCMf/LsKmha/1Yog7aH3+QBXbLvowvZvwYvgjdUIb3xCa1a7FUYXuWAeKNMyKPVjFun+WPce75B+1tA==",
+      "requires": {
+        "@interactjs/interact": "1.10.2"
+      }
+    },
+    "@interactjs/arrange": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/arrange/-/arrange-1.10.2.tgz",
+      "integrity": "sha512-pPLA9o4RWMFN0VfalklOFSRLL4WqqXcD9no4XEuqV00goZPCxLBbMTztaWwnutlRy7evtOhUjUH+pZVsS+dZ4Q=="
+    },
+    "@interactjs/auto-scroll": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/auto-scroll/-/auto-scroll-1.10.2.tgz",
+      "integrity": "sha512-yYqzOawwvWd1NNnlqZdzrXoOMFafQ2/ws85erpJqdaNMQE221z2uP+QYhFRLQRgYUlTbHFfmjDpzhuJgq4uA8Q==",
+      "requires": {
+        "@interactjs/interact": "1.10.2"
+      }
+    },
+    "@interactjs/auto-start": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/auto-start/-/auto-start-1.10.2.tgz",
+      "integrity": "sha512-nZudj8VzJzz+uEyDHqXwtKpvUYr+Oj1+xBrJEu21CywroHQWM2J4fCIiCgeCo3d5/p/TrzFk5b+YfAWePKiLxA==",
+      "requires": {
+        "@interactjs/interact": "1.10.2"
+      }
+    },
+    "@interactjs/clone": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/clone/-/clone-1.10.2.tgz",
+      "integrity": "sha512-XzA8BRHSCwvysOegZ1kopg+IJF3erh4qzY6DRoZsIJovKAXawoa176E58IAzDbgYPJ2yoaSGT+XyzT2C0wa3pQ=="
+    },
+    "@interactjs/core": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/core/-/core-1.10.2.tgz",
+      "integrity": "sha512-SA5KRGo+gFJOhBj1Z2dLHhAf0/2nyHNd4SQ460aIQ3jj/QhqbJW6kGzmh7hBa2FzVGgxLhcQu7NZaP4rnDfUNw==",
+      "requires": {}
+    },
+    "@interactjs/dev-tools": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/dev-tools/-/dev-tools-1.10.2.tgz",
+      "integrity": "sha512-aAd9NgTAGA3yVdFCYcAAYrM4TYQFuVqEvsF+xj+g5SlGyrJ7+GTjPZ2rScOyAsABY4Tz64L2pXvWmXMG87dncA==",
+      "requires": {
+        "@interactjs/interact": "1.10.2",
+        "@interactjs/utils": "1.10.2"
+      }
+    },
+    "@interactjs/feedback": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/feedback/-/feedback-1.10.2.tgz",
+      "integrity": "sha512-XlcoICGrFeUwwRtDgOpstOOvlU42WZoEg7gJHK3LwF7j0IctPd1+3blXofFlBeVvodle8MvUMepm5CRXz741fA=="
+    },
+    "@interactjs/inertia": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/inertia/-/inertia-1.10.2.tgz",
+      "integrity": "sha512-ZmN1joN6J36Q6SOp3V0iZOisXZOBMSAUj0STo8wbwCKy7K8IrC9vjUBbO2JM52cT6o7hg5ebHsp5c8FrebSHlg==",
+      "requires": {
+        "@interactjs/interact": "1.10.2",
+        "@interactjs/offset": "1.10.2"
+      }
+    },
+    "@interactjs/interact": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/interact/-/interact-1.10.2.tgz",
+      "integrity": "sha512-Ms5uVCY9IobVYpQyBnBdkP6Bk6iDY7TkC7GupsdUPUxzAvYSQCTEAGr/1PwxSrSS6dN/8O8TuyUWPbCaylr/JA==",
+      "requires": {
+        "@interactjs/core": "1.10.2",
+        "@interactjs/types": "1.10.2",
+        "@interactjs/utils": "1.10.2"
+      }
+    },
+    "@interactjs/interactjs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/interactjs/-/interactjs-1.10.2.tgz",
+      "integrity": "sha512-OwLl70af6lfZOOg/bvWKSNm1DS1nDI72QnzDYljSKfc2D8stqLIGDO1wPY2rhZudUG5q3t50EhmMUQF76yll/g==",
+      "requires": {
+        "@interactjs/actions": "1.10.2",
+        "@interactjs/arrange": "1.10.2",
+        "@interactjs/auto-scroll": "1.10.2",
+        "@interactjs/auto-start": "1.10.2",
+        "@interactjs/clone": "1.10.2",
+        "@interactjs/core": "1.10.2",
+        "@interactjs/dev-tools": "1.10.2",
+        "@interactjs/feedback": "1.10.2",
+        "@interactjs/inertia": "1.10.2",
+        "@interactjs/interact": "1.10.2",
+        "@interactjs/modifiers": "1.10.2",
+        "@interactjs/multi-target": "1.10.2",
+        "@interactjs/offset": "1.10.2",
+        "@interactjs/pointer-events": "1.10.2",
+        "@interactjs/react": "1.10.2",
+        "@interactjs/reflow": "1.10.2",
+        "@interactjs/utils": "1.10.2",
+        "@interactjs/vue": "1.10.2"
+      }
+    },
+    "@interactjs/modifiers": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/modifiers/-/modifiers-1.10.2.tgz",
+      "integrity": "sha512-3wYEucvZF2NTIslnVIKw5MWhkn9LM42cGCQaC19o3LZeWnbps7NnHJCyQp6zylJrCbwt7f+CSt4Oj2/s0f6XEA==",
+      "requires": {
+        "@interactjs/interact": "1.10.2",
+        "@interactjs/snappers": "1.10.2"
+      }
+    },
+    "@interactjs/multi-target": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/multi-target/-/multi-target-1.10.2.tgz",
+      "integrity": "sha512-O2GiIqgZBzjAVTOpL8doTnAcM9AtM3+H/Bb+An12wWKtNutVK7JbqUAO2nYueOk55/PP3yDLY9Qdr15RJns3lQ=="
+    },
+    "@interactjs/offset": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/offset/-/offset-1.10.2.tgz",
+      "integrity": "sha512-xLgQqinFUY7ZqSX9d9on7XRcxvQdHNEAktj2QFwxMsEwrA6zbKROpPVwt8WQ1yBAeJSFjgYGcmCMPW5K41dT0w==",
+      "requires": {
+        "@interactjs/interact": "1.10.2"
+      }
+    },
+    "@interactjs/pointer-events": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/pointer-events/-/pointer-events-1.10.2.tgz",
+      "integrity": "sha512-O8s3N399hkGIzWGlcJVy0LJyDn5YWDh6XKjyowh/QivtlZSWPY8eglmlN2uZX0lmiqUYghbKI4CpQYP/cE0ZDA==",
+      "requires": {
+        "@interactjs/interact": "1.10.2"
+      }
+    },
+    "@interactjs/react": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/react/-/react-1.10.2.tgz",
+      "integrity": "sha512-JXzPdANft+W2vq3SCSzprCwom5UuC8TaiAAhVdt8R+/P6xHbOeAX93XLS5YmDwT8e0Zh9J9jYvz55tkTdwjFZQ=="
+    },
+    "@interactjs/reflow": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/reflow/-/reflow-1.10.2.tgz",
+      "integrity": "sha512-pc6o6RRhSCYQC4auZexRb7z5FQkdSVev5HzlRfUAjfw4C076qgbcs63ESRKy4YXdSBtUTvARQZxpuWUNGquzJw==",
+      "requires": {
+        "@interactjs/interact": "1.10.2"
+      }
+    },
+    "@interactjs/snappers": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/snappers/-/snappers-1.10.2.tgz",
+      "integrity": "sha512-wQ41Vn5GRn6VavjIEUtTkd9d5QgdKgC4+CPW0fjKkiQclLBmaic7VibNETO8twN0Jx5e73EoPj9K2nAVHIA0hA==",
+      "requires": {}
+    },
+    "@interactjs/types": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/types/-/types-1.10.2.tgz",
+      "integrity": "sha512-l0T1bU8OHRv716ztQOYwP+K7b/lA76C0T3r/cdabbUv6CKeAFdFRRFlmNxYOM36SxMGWAiq5VWrN3SeXlB7Fow=="
+    },
+    "@interactjs/utils": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/utils/-/utils-1.10.2.tgz",
+      "integrity": "sha512-sOr+pu7XGAN4qv+ikajMo3RJygbkbMLegmx0Tv5Qf6e80sF42FjkmHeMGuV7fL98nwat0VmDiWerOFBnKctXow=="
+    },
+    "@interactjs/vue": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@interactjs/vue/-/vue-1.10.2.tgz",
+      "integrity": "sha512-msLdc42DFsCPQZt6YBGZrw8Ro23kQcNnj+iLz2OUQcOrp/lma7WjorUuAwwfyFna2DevLtiYlMLbT0dpO/cVhg=="
+    },
     "@intervolga/optimize-cssnano-plugin": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz",
@@ -27935,6 +28329,11 @@
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
       "dev": true
     },
+    "batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA=="
+    },
     "bcrypt-pbkdf": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
@@ -30782,6 +31181,14 @@
       "integrity": "sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=",
       "dev": true
     },
+    "element-resize-detector": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
+      "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
+      "requires": {
+        "batch-processor": "1.0.0"
+      }
+    },
     "element-ui": {
       "version": "2.13.2",
       "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.13.2.tgz",
@@ -41998,6 +42405,20 @@
       "resolved": "https://registry.npmjs.org/vue-github-badge/-/vue-github-badge-1.0.1.tgz",
       "integrity": "sha512-8X+FUWapnnDfs6cRUg3mCfHUf2r5arUfCSRdvbIn860oj9us3Rz3VOtioUgmfzh6EhaaYTs0Oh78EzJ+Z6uqAA=="
     },
+    "vue-grid-layout": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/vue-grid-layout/-/vue-grid-layout-2.4.0.tgz",
+      "integrity": "sha512-MRQVt1BdWDaPN4gKGEKOVVwiTyucqJhrGEyjiY9Muor+dzFFq4Hm0geSpYJpLvC1GLlTL8KWUwy0suKrHm+mqg==",
+      "requires": {
+        "@interactjs/actions": "1.10.2",
+        "@interactjs/auto-scroll": "1.10.2",
+        "@interactjs/auto-start": "1.10.2",
+        "@interactjs/dev-tools": "1.10.2",
+        "@interactjs/interactjs": "1.10.2",
+        "@interactjs/modifiers": "1.10.2",
+        "element-resize-detector": "^1.2.1"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
diff --git a/package.json b/package.json
index 3ffc2939..b33a9034 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "vue-codemirror": "^4.0.6",
     "vue-count-to": "1.0.13",
     "vue-dplayer": "^0.0.10",
+    "vue-grid-layout": "^2.4.0",
     "vue-json-editor": "^1.4.3",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
diff --git a/src/router/modules/setting.js b/src/router/modules/setting.js
index 74b0c347..fe6bf842 100644
--- a/src/router/modules/setting.js
+++ b/src/router/modules/setting.js
@@ -1,8 +1,8 @@
-import Layout from '@/layout'
+// import Layout from '@/layout'
 import emptyLayout from '@/layout/emptyLayout'
 const permissionRouter = {
   path: '/setting',
-  component: Layout,
+  component: emptyLayout,
   name: '设置',
   meta: {
     title: '设置中心',
diff --git a/src/views/setting/monitor/index copy.vue b/src/views/setting/monitor/index copy.vue
new file mode 100644
index 00000000..f58a7a46
--- /dev/null
+++ b/src/views/setting/monitor/index copy.vue	
@@ -0,0 +1,158 @@
+<template>
+  <div class="">
+    <el-card class="basicInfo">
+      <el-form ref="monitorSettingForm" :model="monitorSettingForm">
+        <el-form-item label="标题" required="">
+          <el-input v-model="monitorSettingForm.title" />
+        </el-form-item>
+        <el-form-item label="标题颜色" required="">
+          <el-input v-model="monitorSettingForm.titleColor" />
+          <el-color-picker
+            v-model="monitorSettingForm.titleColor"
+            :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
+            class="theme-picker"
+            show-alpha
+            popper-class="theme-picker-dropdown"
+          />
+        </el-form-item>
+        <el-form-item label="主色调" required="">
+          <el-input v-model="monitorSettingForm.mainColor" />
+          <el-color-picker
+            v-model="monitorSettingForm.mainColor"
+            :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
+            class="theme-picker"
+            show-alpha
+            popper-class="theme-picker-dropdown"
+          />
+        </el-form-item>
+        <el-form-item label="次色调" required="">
+          <el-input v-model="monitorSettingForm.mainColor2" />
+          <el-color-picker
+            v-model="monitorSettingForm.mainColor2"
+            :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
+            class="theme-picker"
+            show-alpha
+            popper-class="theme-picker-dropdown"
+          />
+        </el-form-item>
+        <el-form-item label="文字颜色" required="">
+          <el-input v-model="monitorSettingForm.textColor" />
+          <el-color-picker
+            v-model="monitorSettingForm.textColor"
+            :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
+            class="theme-picker"
+            show-alpha
+            popper-class="theme-picker-dropdown"
+          />
+        </el-form-item>
+        <el-form-item label="背景颜色" required="">
+          <el-input v-model="monitorSettingForm.backgroundColor" />
+          <el-color-picker
+            v-model="monitorSettingForm.backgroundColor"
+            :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
+            class="theme-picker"
+            show-alpha
+            popper-class="theme-picker-dropdown"
+          />
+        </el-form-item>
+        <el-form-item label="中心点" required="">
+          <el-input v-model="monitorSettingForm.center" />
+        </el-form-item>
+        <el-form-item label="中心点坐标" required="">
+          <el-input v-model="monitorSettingForm.centerPosition" />
+        </el-form-item>
+        <el-form-item label="省份背景色" required="">
+          <el-input v-model="monitorSettingForm.provinceBgColor" />
+          <el-color-picker
+            v-model="monitorSettingForm.provinceBgColor"
+            :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
+            class="theme-picker"
+            show-alpha
+            popper-class="theme-picker-dropdown"
+          />
+        </el-form-item>
+        <el-form-item label="接入中状态svg" required>
+          <upload-image v-model="monitorSettingForm.statusIng" />
+        </el-form-item>
+        <el-form-item label="未接入状态svg" required>
+          <upload-image v-model="monitorSettingForm.statusUn" />
+        </el-form-item>
+        <el-form-item label="已接入状态svg" required>
+          <upload-image v-model="monitorSettingForm.statusEnd" />
+        </el-form-item>
+        <el-form-item label="数字底图" required="">
+          <upload-image v-model="monitorSettingForm.numberBg" />
+        </el-form-item>
+        <el-form-item label="标题Icon" required="">
+          <upload-image v-model="monitorSettingForm.titleIcon" />
+        </el-form-item>
+        <el-form-item label="副标题Icon" required="">
+          <upload-image v-model="monitorSettingForm.subTitleIcon" />
+        </el-form-item>
+        <el-form-item label="任务模块底图" required="">
+          <upload-image v-model="monitorSettingForm.taskBg" />
+        </el-form-item>
+      </el-form>
+      <el-button type="primary" @click="ok">更 新</el-button>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getMonitorSetting, putMonitorSetting } from '@/api/container/monitorSelect'
+import uploadImage from '@/components/Actions/uploadImage.vue'
+export default {
+  name: 'MonitorSetting',
+  components: { uploadImage },
+  data() {
+    return {
+      rules: {},
+      monitorSettingForm: {
+        'title': '广域协同智能计算系统面板',
+        'titleColor': '#409EFF',
+        'mainColor': 'blue',
+        'mainColor2': 'blue',
+        'textColor': 'blue',
+        'backgroundColor': 'blue',
+        'center': 'blue',
+        'centerPosition': 'blue',
+        'provinceBgColor': 'blue',
+        'statusIng': 'black',
+        'statusUn': '未接入',
+        'statusEnd': '已接入',
+        'titleIcon': 'blue',
+        'subTitleIcon': 'blue',
+        'numberBg': 'blue',
+        'taskBg': 'blue'
+      }
+    }
+  },
+  created() {
+    getMonitorSetting().then(e => {
+      this.monitorSettingForm = e.data
+    })
+  },
+  methods: {
+    ok() {
+      putMonitorSetting(this.monitorSettingForm).then(e => {
+        console.log('e')
+        if (e.code === 200) {
+          this.$message.success('修改成功')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.projectInfo{
+  text-align: left;
+}
+.basicInfo{
+  .el-form-item .el-input {
+    width: 200px;
+  }
+
+}
+</style>
diff --git a/src/views/setting/monitor/index.vue b/src/views/setting/monitor/index.vue
index f58a7a46..3bbc293f 100644
--- a/src/views/setting/monitor/index.vue
+++ b/src/views/setting/monitor/index.vue
@@ -1,112 +1,94 @@
 <template>
   <div class="">
     <el-card class="basicInfo">
-      <el-form ref="monitorSettingForm" :model="monitorSettingForm">
-        <el-form-item label="标题" required="">
-          <el-input v-model="monitorSettingForm.title" />
-        </el-form-item>
-        <el-form-item label="标题颜色" required="">
-          <el-input v-model="monitorSettingForm.titleColor" />
-          <el-color-picker
-            v-model="monitorSettingForm.titleColor"
-            :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
-            class="theme-picker"
-            show-alpha
-            popper-class="theme-picker-dropdown"
-          />
-        </el-form-item>
-        <el-form-item label="主色调" required="">
-          <el-input v-model="monitorSettingForm.mainColor" />
-          <el-color-picker
-            v-model="monitorSettingForm.mainColor"
-            :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
-            class="theme-picker"
-            show-alpha
-            popper-class="theme-picker-dropdown"
-          />
-        </el-form-item>
-        <el-form-item label="次色调" required="">
-          <el-input v-model="monitorSettingForm.mainColor2" />
-          <el-color-picker
-            v-model="monitorSettingForm.mainColor2"
-            :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
-            class="theme-picker"
-            show-alpha
-            popper-class="theme-picker-dropdown"
-          />
-        </el-form-item>
-        <el-form-item label="文字颜色" required="">
-          <el-input v-model="monitorSettingForm.textColor" />
-          <el-color-picker
-            v-model="monitorSettingForm.textColor"
-            :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
-            class="theme-picker"
-            show-alpha
-            popper-class="theme-picker-dropdown"
-          />
-        </el-form-item>
-        <el-form-item label="背景颜色" required="">
-          <el-input v-model="monitorSettingForm.backgroundColor" />
-          <el-color-picker
-            v-model="monitorSettingForm.backgroundColor"
-            :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
-            class="theme-picker"
-            show-alpha
-            popper-class="theme-picker-dropdown"
-          />
-        </el-form-item>
-        <el-form-item label="中心点" required="">
-          <el-input v-model="monitorSettingForm.center" />
-        </el-form-item>
-        <el-form-item label="中心点坐标" required="">
-          <el-input v-model="monitorSettingForm.centerPosition" />
-        </el-form-item>
-        <el-form-item label="省份背景色" required="">
-          <el-input v-model="monitorSettingForm.provinceBgColor" />
-          <el-color-picker
-            v-model="monitorSettingForm.provinceBgColor"
-            :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
-            class="theme-picker"
-            show-alpha
-            popper-class="theme-picker-dropdown"
-          />
-        </el-form-item>
-        <el-form-item label="接入中状态svg" required>
-          <upload-image v-model="monitorSettingForm.statusIng" />
-        </el-form-item>
-        <el-form-item label="未接入状态svg" required>
-          <upload-image v-model="monitorSettingForm.statusUn" />
-        </el-form-item>
-        <el-form-item label="已接入状态svg" required>
-          <upload-image v-model="monitorSettingForm.statusEnd" />
-        </el-form-item>
-        <el-form-item label="数字底图" required="">
-          <upload-image v-model="monitorSettingForm.numberBg" />
-        </el-form-item>
-        <el-form-item label="标题Icon" required="">
-          <upload-image v-model="monitorSettingForm.titleIcon" />
-        </el-form-item>
-        <el-form-item label="副标题Icon" required="">
-          <upload-image v-model="monitorSettingForm.subTitleIcon" />
-        </el-form-item>
-        <el-form-item label="任务模块底图" required="">
-          <upload-image v-model="monitorSettingForm.taskBg" />
-        </el-form-item>
-      </el-form>
+      <el-button @click="addItem">添加盒子</el-button>
+      <div
+        class="droppable-element"
+        draggable="true"
+        unselectable="on"
+        @drag="drag"
+        @dragend="dragend"
+      >折线图</div>
+      <div
+        class="droppable-element"
+        draggable="true"
+        unselectable="on"
+        @drag="drag"
+        @dragend="dragend"
+      >柱状图</div>
+      <div
+        class="droppable-element"
+        draggable="true"
+        unselectable="on"
+        @drag="drag"
+        @dragend="dragend"
+      >折线图</div>
+      <div id="content">
+        <grid-layout
+          ref="gridlayout"
+          :layout.sync="layout"
+          :col-num="colNum"
+          :row-height="50"
+          :vertical-compact="true"
+          :use-css-transforms="true"
+          :is-draggable="draggable"
+          :is-resizable="resizable"
+        >
+          <grid-item
+            v-for="item in layout"
+            :key="item.i"
+            :static="item.static"
+            :x="item.x"
+            :y="item.y"
+            :w="item.w"
+            :h="item.h"
+            :i="item.i"
+          >
+            <span class="text">{{ item.i }}</span>
+            <span class="edit" @click="editItem(item.i)">e</span>
+            <span class="remove" @click="removeItem(item.i)">x</span>
+          </grid-item>
+        </grid-layout>
+
+        <el-drawer
+          title="我是标题"
+          :visible.sync="drawer"
+          :direction="direction"
+          :before-close="handleClose"
+        >
+          <span>我来啦!</span>
+        </el-drawer>
+      </div>
       <el-button type="primary" @click="ok">更 新</el-button>
+      <el-button type="default" @click="$router.push(-1)">返 回</el-button>
     </el-card>
   </div>
 </template>
 
 <script>
-import { getMonitorSetting, putMonitorSetting } from '@/api/container/monitorSelect'
-import uploadImage from '@/components/Actions/uploadImage.vue'
+import { getMonitorSetting } from '@/api/container/monitorSelect'
+// import uploadImage from '@/components/Actions/uploadImage.vue'
+import { GridLayout, GridItem } from 'vue-grid-layout'
+const mouseXY = { 'x': null, 'y': null }
+const DragPos = { 'x': null, 'y': null, 'w': 1, 'h': 1, 'i': null }
+
 export default {
   name: 'MonitorSetting',
-  components: { uploadImage },
+  components: { GridLayout, GridItem },
   data() {
     return {
+      layout: [
+        { x: 0, y: 0, w: 4, h: 4, i: '0' },
+        { x: 4, y: 0, w: 4, h: 4, i: '1' },
+        { x: 8, y: 0, w: 4, h: 4, i: '2' }
+      ],
+      draggable: true,
+      resizable: true,
+      colNum: 12,
+      index: 0,
       rules: {},
+      drawer: false,
+      direction: 'rtl',
       monitorSettingForm: {
         'title': '广域协同智能计算系统面板',
         'titleColor': '#409EFF',
@@ -128,18 +110,114 @@ export default {
     }
   },
   created() {
+    this.index = this.layout.length
     getMonitorSetting().then(e => {
       this.monitorSettingForm = e.data
     })
+    document.addEventListener('dragover', function(e) {
+      mouseXY.x = e.clientX
+      mouseXY.y = e.clientY
+    }, false)
   },
   methods: {
-    ok() {
-      putMonitorSetting(this.monitorSettingForm).then(e => {
-        console.log('e')
-        if (e.code === 200) {
-          this.$message.success('修改成功')
-        }
+    addItem() {
+      // Add a new item. It must have a unique key!
+      this.layout.push({
+        x: (this.layout.length * 2) % (this.colNum || 12),
+        y: this.layout.length + (this.colNum || 12), // puts it at the bottom
+        w: 4,
+        h: 4,
+        i: this.index
       })
+      // Increment the counter to ensure key is always unique.
+      this.index++
+    },
+    editItem() {
+      this.drawer = true
+    },
+    removeItem(val) {
+      const index = this.layout.map(item => item.i).indexOf(val)
+      this.layout.splice(index, 1)
+    },
+    ok() {
+      // putMonitorSetting(this.monitorSettingForm).then(e => {
+      //   console.log('e')
+      //   if (e.code === 200) {
+      //     this.$message.success('修改成功')
+      //   }
+      // })
+    },
+    drag(e) {
+      const parentRect = document.getElementById('content').getBoundingClientRect()
+      let mouseInGrid = false
+      if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true
+      }
+      if (mouseInGrid === true && (this.layout.findIndex(item => item.i === 'drop')) === -1) {
+        this.layout.push({
+          x: (this.layout.length * 2) % (this.colNum || 12),
+          y: this.layout.length + (this.colNum || 12), // puts it at the bottom
+          w: 4,
+          h: 4,
+          i: 'drop'
+        })
+      }
+      const index = this.layout.findIndex(item => item.i === 'drop')
+      if (index !== -1) {
+        try {
+          this.$refs.gridlayout.$children[this.layout.length].$refs.item.style.display = 'none'
+        } catch {
+          console.log('error')
+        }
+        const el = this.$refs.gridlayout.$children[index]
+        el.dragging = { 'top': mouseXY.y - parentRect.top, 'left': mouseXY.x - parentRect.left }
+        const new_pos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left)
+
+        if (mouseInGrid === true) {
+          this.$refs.gridlayout.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 4, 4)
+          DragPos.i = String(index)
+          DragPos.x = this.layout[index].x
+          DragPos.y = this.layout[index].y
+        }
+        if (mouseInGrid === false) {
+          this.$refs.gridlayout.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 4, 4)
+          this.layout = this.layout.filter(obj => obj.i !== 'drop')
+        }
+      }
+    },
+    dragend: function(e) {
+      const parentRect = document.getElementById('content').getBoundingClientRect()
+      let mouseInGrid = false
+      if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true
+      }
+      if (mouseInGrid === true) {
+        alert(`Dropped element props:\n${JSON.stringify(DragPos, ['x', 'y', 'w', 'h'], 2)}`)
+        this.$refs.gridlayout.dragEvent('dragend', 'drop', DragPos.x, DragPos.y, 4, 4)
+        this.layout = this.layout.filter(obj => obj.i !== 'drop')
+
+        // UNCOMMENT below if you want to add a grid-item
+        this.layout.push({
+          x: DragPos.x,
+          y: DragPos.y,
+          w: 4,
+          h: 4,
+          i: DragPos.i
+        })
+        this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x, DragPos.y, 4, 4)
+        try {
+          this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display = 'block'
+        } catch {
+          console.log('error')
+        }
+      }
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done()
+        })
+        .catch(_ => {})
     }
   }
 }
@@ -155,4 +233,99 @@ export default {
   }
 
 }
+
+.droppable-element {
+    width: 150px;
+    text-align: center;
+    background: #fdd;
+    border: 1px solid black;
+    margin: 10px 0;
+    padding: 10px;
+}
+
+.layoutJSON {
+    background: #ddd;
+    border: 1px solid black;
+    margin-top: 10px;
+    padding: 10px;
+}
+
+.columns {
+    -moz-columns: 120px;
+    -webkit-columns: 120px;
+    columns: 120px;
+}
+
+/*************************************/
+.edit {
+    position: absolute;
+    right: 8px;
+    top: 0;
+    cursor: pointer;
+}
+.remove {
+    position: absolute;
+    right: 2px;
+    top: 0;
+    cursor: pointer;
+}
+
+.vue-grid-layout {
+    background: #eee;
+}
+
+.vue-grid-item:not(.vue-grid-placeholder) {
+    background: #ccc;
+    border: 1px solid black;
+}
+
+.vue-grid-item .resizing {
+    opacity: 0.9;
+}
+
+.vue-grid-item .static {
+    background: #cce;
+}
+
+.vue-grid-item .text {
+    font-size: 24px;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    height: 100%;
+    width: 100%;
+}
+
+.vue-grid-item .no-drag {
+    height: 100%;
+    width: 100%;
+}
+
+.vue-grid-item .minMax {
+    font-size: 12px;
+}
+
+.vue-grid-item .add {
+    cursor: pointer;
+}
+
+.vue-draggable-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: 0;
+    left: 0;
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
+    background-position: bottom right;
+    padding: 0 8px 8px 0;
+    background-repeat: no-repeat;
+    background-origin: content-box;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
 </style>
diff --git a/yarn.lock b/yarn.lock
index b371241d..57c142e3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -973,6 +973,158 @@
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
+"@interactjs/actions@1.10.2":
+  "integrity" "sha512-BHJcW84WCMf/LsKmha/1Yog7aH3+QBXbLvowvZvwYvgjdUIb3xCa1a7FUYXuWAeKNMyKPVjFun+WPce75B+1tA=="
+  "resolved" "https://registry.npmjs.org/@interactjs/actions/-/actions-1.10.2.tgz"
+  "version" "1.10.2"
+  optionalDependencies:
+    "@interactjs/interact" "1.10.2"
+
+"@interactjs/arrange@1.10.2":
+  "integrity" "sha512-pPLA9o4RWMFN0VfalklOFSRLL4WqqXcD9no4XEuqV00goZPCxLBbMTztaWwnutlRy7evtOhUjUH+pZVsS+dZ4Q=="
+  "resolved" "https://registry.npmjs.org/@interactjs/arrange/-/arrange-1.10.2.tgz"
+  "version" "1.10.2"
+
+"@interactjs/auto-scroll@1.10.2":
+  "integrity" "sha512-yYqzOawwvWd1NNnlqZdzrXoOMFafQ2/ws85erpJqdaNMQE221z2uP+QYhFRLQRgYUlTbHFfmjDpzhuJgq4uA8Q=="
+  "resolved" "https://registry.npmjs.org/@interactjs/auto-scroll/-/auto-scroll-1.10.2.tgz"
+  "version" "1.10.2"
+  optionalDependencies:
+    "@interactjs/interact" "1.10.2"
+
+"@interactjs/auto-start@1.10.2":
+  "integrity" "sha512-nZudj8VzJzz+uEyDHqXwtKpvUYr+Oj1+xBrJEu21CywroHQWM2J4fCIiCgeCo3d5/p/TrzFk5b+YfAWePKiLxA=="
+  "resolved" "https://registry.npmjs.org/@interactjs/auto-start/-/auto-start-1.10.2.tgz"
+  "version" "1.10.2"
+  optionalDependencies:
+    "@interactjs/interact" "1.10.2"
+
+"@interactjs/clone@1.10.2":
+  "integrity" "sha512-XzA8BRHSCwvysOegZ1kopg+IJF3erh4qzY6DRoZsIJovKAXawoa176E58IAzDbgYPJ2yoaSGT+XyzT2C0wa3pQ=="
+  "resolved" "https://registry.npmjs.org/@interactjs/clone/-/clone-1.10.2.tgz"
+  "version" "1.10.2"
+
+"@interactjs/core@1.10.2":
+  "integrity" "sha512-SA5KRGo+gFJOhBj1Z2dLHhAf0/2nyHNd4SQ460aIQ3jj/QhqbJW6kGzmh7hBa2FzVGgxLhcQu7NZaP4rnDfUNw=="
+  "resolved" "https://registry.npmjs.org/@interactjs/core/-/core-1.10.2.tgz"
+  "version" "1.10.2"
+
+"@interactjs/dev-tools@1.10.2":
+  "integrity" "sha512-aAd9NgTAGA3yVdFCYcAAYrM4TYQFuVqEvsF+xj+g5SlGyrJ7+GTjPZ2rScOyAsABY4Tz64L2pXvWmXMG87dncA=="
+  "resolved" "https://registry.npmjs.org/@interactjs/dev-tools/-/dev-tools-1.10.2.tgz"
+  "version" "1.10.2"
+  dependencies:
+    "@interactjs/utils" "1.10.2"
+  optionalDependencies:
+    "@interactjs/interact" "1.10.2"
+
+"@interactjs/feedback@1.10.2":
+  "integrity" "sha512-XlcoICGrFeUwwRtDgOpstOOvlU42WZoEg7gJHK3LwF7j0IctPd1+3blXofFlBeVvodle8MvUMepm5CRXz741fA=="
+  "resolved" "https://registry.npmjs.org/@interactjs/feedback/-/feedback-1.10.2.tgz"
+  "version" "1.10.2"
+
+"@interactjs/inertia@1.10.2":
+  "integrity" "sha512-ZmN1joN6J36Q6SOp3V0iZOisXZOBMSAUj0STo8wbwCKy7K8IrC9vjUBbO2JM52cT6o7hg5ebHsp5c8FrebSHlg=="
+  "resolved" "https://registry.npmjs.org/@interactjs/inertia/-/inertia-1.10.2.tgz"
+  "version" "1.10.2"
+  dependencies:
+    "@interactjs/offset" "1.10.2"
+  optionalDependencies:
+    "@interactjs/interact" "1.10.2"
+
+"@interactjs/interact@1.10.2":
+  "integrity" "sha512-Ms5uVCY9IobVYpQyBnBdkP6Bk6iDY7TkC7GupsdUPUxzAvYSQCTEAGr/1PwxSrSS6dN/8O8TuyUWPbCaylr/JA=="
+  "resolved" "https://registry.npmjs.org/@interactjs/interact/-/interact-1.10.2.tgz"
+  "version" "1.10.2"
+  dependencies:
+    "@interactjs/core" "1.10.2"
+    "@interactjs/types" "1.10.2"
+    "@interactjs/utils" "1.10.2"
+
+"@interactjs/interactjs@1.10.2":
+  "integrity" "sha512-OwLl70af6lfZOOg/bvWKSNm1DS1nDI72QnzDYljSKfc2D8stqLIGDO1wPY2rhZudUG5q3t50EhmMUQF76yll/g=="
+  "resolved" "https://registry.npmjs.org/@interactjs/interactjs/-/interactjs-1.10.2.tgz"
+  "version" "1.10.2"
+  dependencies:
+    "@interactjs/actions" "1.10.2"
+    "@interactjs/arrange" "1.10.2"
+    "@interactjs/auto-scroll" "1.10.2"
+    "@interactjs/auto-start" "1.10.2"
+    "@interactjs/clone" "1.10.2"
+    "@interactjs/core" "1.10.2"
+    "@interactjs/dev-tools" "1.10.2"
+    "@interactjs/feedback" "1.10.2"
+    "@interactjs/inertia" "1.10.2"
+    "@interactjs/interact" "1.10.2"
+    "@interactjs/modifiers" "1.10.2"
+    "@interactjs/multi-target" "1.10.2"
+    "@interactjs/offset" "1.10.2"
+    "@interactjs/pointer-events" "1.10.2"
+    "@interactjs/react" "1.10.2"
+    "@interactjs/reflow" "1.10.2"
+    "@interactjs/utils" "1.10.2"
+    "@interactjs/vue" "1.10.2"
+
+"@interactjs/modifiers@1.10.2":
+  "integrity" "sha512-3wYEucvZF2NTIslnVIKw5MWhkn9LM42cGCQaC19o3LZeWnbps7NnHJCyQp6zylJrCbwt7f+CSt4Oj2/s0f6XEA=="
+  "resolved" "https://registry.npmjs.org/@interactjs/modifiers/-/modifiers-1.10.2.tgz"
+  "version" "1.10.2"
+  dependencies:
+    "@interactjs/snappers" "1.10.2"
+  optionalDependencies:
+    "@interactjs/interact" "1.10.2"
+
+"@interactjs/multi-target@1.10.2":
+  "integrity" "sha512-O2GiIqgZBzjAVTOpL8doTnAcM9AtM3+H/Bb+An12wWKtNutVK7JbqUAO2nYueOk55/PP3yDLY9Qdr15RJns3lQ=="
+  "resolved" "https://registry.npmjs.org/@interactjs/multi-target/-/multi-target-1.10.2.tgz"
+  "version" "1.10.2"
+
+"@interactjs/offset@1.10.2":
+  "integrity" "sha512-xLgQqinFUY7ZqSX9d9on7XRcxvQdHNEAktj2QFwxMsEwrA6zbKROpPVwt8WQ1yBAeJSFjgYGcmCMPW5K41dT0w=="
+  "resolved" "https://registry.npmjs.org/@interactjs/offset/-/offset-1.10.2.tgz"
+  "version" "1.10.2"
+  optionalDependencies:
+    "@interactjs/interact" "1.10.2"
+
+"@interactjs/pointer-events@1.10.2":
+  "integrity" "sha512-O8s3N399hkGIzWGlcJVy0LJyDn5YWDh6XKjyowh/QivtlZSWPY8eglmlN2uZX0lmiqUYghbKI4CpQYP/cE0ZDA=="
+  "resolved" "https://registry.npmjs.org/@interactjs/pointer-events/-/pointer-events-1.10.2.tgz"
+  "version" "1.10.2"
+  optionalDependencies:
+    "@interactjs/interact" "1.10.2"
+
+"@interactjs/react@1.10.2":
+  "integrity" "sha512-JXzPdANft+W2vq3SCSzprCwom5UuC8TaiAAhVdt8R+/P6xHbOeAX93XLS5YmDwT8e0Zh9J9jYvz55tkTdwjFZQ=="
+  "resolved" "https://registry.npmjs.org/@interactjs/react/-/react-1.10.2.tgz"
+  "version" "1.10.2"
+
+"@interactjs/reflow@1.10.2":
+  "integrity" "sha512-pc6o6RRhSCYQC4auZexRb7z5FQkdSVev5HzlRfUAjfw4C076qgbcs63ESRKy4YXdSBtUTvARQZxpuWUNGquzJw=="
+  "resolved" "https://registry.npmjs.org/@interactjs/reflow/-/reflow-1.10.2.tgz"
+  "version" "1.10.2"
+  optionalDependencies:
+    "@interactjs/interact" "1.10.2"
+
+"@interactjs/snappers@1.10.2":
+  "integrity" "sha512-wQ41Vn5GRn6VavjIEUtTkd9d5QgdKgC4+CPW0fjKkiQclLBmaic7VibNETO8twN0Jx5e73EoPj9K2nAVHIA0hA=="
+  "resolved" "https://registry.npmjs.org/@interactjs/snappers/-/snappers-1.10.2.tgz"
+  "version" "1.10.2"
+
+"@interactjs/types@1.10.2":
+  "integrity" "sha512-l0T1bU8OHRv716ztQOYwP+K7b/lA76C0T3r/cdabbUv6CKeAFdFRRFlmNxYOM36SxMGWAiq5VWrN3SeXlB7Fow=="
+  "resolved" "https://registry.npmjs.org/@interactjs/types/-/types-1.10.2.tgz"
+  "version" "1.10.2"
+
+"@interactjs/utils@1.10.2":
+  "integrity" "sha512-sOr+pu7XGAN4qv+ikajMo3RJygbkbMLegmx0Tv5Qf6e80sF42FjkmHeMGuV7fL98nwat0VmDiWerOFBnKctXow=="
+  "resolved" "https://registry.npmjs.org/@interactjs/utils/-/utils-1.10.2.tgz"
+  "version" "1.10.2"
+
+"@interactjs/vue@1.10.2":
+  "integrity" "sha512-msLdc42DFsCPQZt6YBGZrw8Ro23kQcNnj+iLz2OUQcOrp/lma7WjorUuAwwfyFna2DevLtiYlMLbT0dpO/cVhg=="
+  "resolved" "https://registry.npmjs.org/@interactjs/vue/-/vue-1.10.2.tgz"
+  "version" "1.10.2"
+
 "@intervolga/optimize-cssnano-plugin@^1.0.5":
   "integrity" "sha512-zN69TnSr0viRSU6cEDIcuPcP67QcpQ6uHACg58FiN9PDrU6SLyGW3MR4tiISbYxy1kDWAVPwD+XwQTWE5cigAA=="
   "resolved" "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz"
@@ -2560,6 +2712,11 @@
   "resolved" "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
   "version" "1.5.1"
 
+"batch-processor@1.0.0":
+  "integrity" "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA=="
+  "resolved" "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz"
+  "version" "1.0.0"
+
 "batch@0.6.1":
   "integrity" "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY="
   "resolved" "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz"
@@ -4628,6 +4785,13 @@
   "resolved" "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-1.0.1.tgz"
   "version" "1.0.1"
 
+"element-resize-detector@^1.2.1":
+  "integrity" "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg=="
+  "resolved" "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz"
+  "version" "1.2.4"
+  dependencies:
+    "batch-processor" "1.0.0"
+
 "element-ui@2.13.2":
   "integrity" "sha512-r761DRPssMPKDiJZWFlG+4e4vr0cRG/atKr3Eqr8Xi0tQMNbtmYU1QXvFnKiFPFFGkgJ6zS6ASkG+sellcoHlQ=="
   "resolved" "https://registry.npmjs.org/element-ui/-/element-ui-2.13.2.tgz"
@@ -12797,6 +12961,19 @@
   "resolved" "https://registry.npmjs.org/vue-github-badge/-/vue-github-badge-1.0.1.tgz"
   "version" "1.0.1"
 
+"vue-grid-layout@^2.4.0":
+  "integrity" "sha512-MRQVt1BdWDaPN4gKGEKOVVwiTyucqJhrGEyjiY9Muor+dzFFq4Hm0geSpYJpLvC1GLlTL8KWUwy0suKrHm+mqg=="
+  "resolved" "https://registry.npmjs.org/vue-grid-layout/-/vue-grid-layout-2.4.0.tgz"
+  "version" "2.4.0"
+  dependencies:
+    "@interactjs/actions" "1.10.2"
+    "@interactjs/auto-scroll" "1.10.2"
+    "@interactjs/auto-start" "1.10.2"
+    "@interactjs/dev-tools" "1.10.2"
+    "@interactjs/interactjs" "1.10.2"
+    "@interactjs/modifiers" "1.10.2"
+    "element-resize-detector" "^1.2.1"
+
 "vue-hot-reload-api@^2.3.0":
   "integrity" "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
   "resolved" "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz"