diff --git a/.env.development b/.env.development
index 5431a9bc..2ad1156b 100644
--- a/.env.development
+++ b/.env.development
@@ -1,6 +1,6 @@
 NODE_ENV=development
-# VUE_APP_API_SERVER =  http://118.190.150.119:41080/api
-VUE_APP_API_SERVER =  http://192.168.1.140/api
+VUE_APP_API_SERVER =  https://epmet-test.elinkservice.cn/api
+# VUE_APP_API_SERVER =  http://192.168.1.140/api
 # VUE_APP_API_SERVER =  http://192.168.51.36:8080/api
 # VUE_APP_API_SERVER =  https://epmet-dev.elinkservice.cn/api
 VUE_APP_NODE_ENV=dev 
diff --git a/.env.production.sit b/.env.production.sit
index 6e5b4e9b..de86de77 100644
--- a/.env.production.sit
+++ b/.env.production.sit
@@ -1,5 +1,5 @@
 NODE_ENV=production
-# VUE_APP_API_SERVER =  http://118.190.150.119:41080/api
-VUE_APP_API_SERVER =  http://192.168.1.140/api
+VUE_APP_API_SERVER =  https://epmet-test.elinkservice.cn/api
+# VUE_APP_API_SERVER =  http://192.168.1.140/api
 VUE_APP_NODE_ENV=prod:sit
 VUE_APP_PUBLIC_PATH=epmet-oper
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 3f8baa2d..bf071c79 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1421,14 +1421,12 @@
     "@mapbox/jsonlint-lines-primitives": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
-      "integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ=",
-      "dev": true
+      "integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ="
     },
     "@mapbox/mapbox-gl-style-spec": {
       "version": "13.22.0",
       "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.22.0.tgz",
       "integrity": "sha512-35skPiyM1reMRHA+X+DgbT3WG8hXMpqy1Ncs66ZvtVWUvvA9CtERSx5kq+o5S1ZrvDISuyBzrVzyty7PkuStkQ==",
-      "dev": true,
       "requires": {
         "@mapbox/jsonlint-lines-primitives": "~2.0.2",
         "@mapbox/point-geometry": "^0.1.0",
@@ -1443,22 +1441,19 @@
         "minimist": {
           "version": "1.2.5",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-          "dev": true
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
         }
       }
     },
     "@mapbox/point-geometry": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
-      "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=",
-      "dev": true
+      "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
     },
     "@mapbox/unitbezier": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
-      "integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4=",
-      "dev": true
+      "integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4="
     },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
@@ -1479,8 +1474,7 @@
     "@petamoriken/float16": {
       "version": "3.5.4",
       "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.5.4.tgz",
-      "integrity": "sha512-RWVPoDJ3q0vOinFEjEOFP+GPSL9cMZNwD9iSafIRXOOUKCQW0j+RAPH0CojMbaHkWlVBRJ40L9RFuSL/oLd+vg==",
-      "dev": true
+      "integrity": "sha512-RWVPoDJ3q0vOinFEjEOFP+GPSL9cMZNwD9iSafIRXOOUKCQW0j+RAPH0CojMbaHkWlVBRJ40L9RFuSL/oLd+vg=="
     },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
@@ -5228,8 +5222,7 @@
     "csscolorparser": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
-      "integrity": "sha1-s085HupNqPPpgjHizNjfnAQfFxs=",
-      "dev": true
+      "integrity": "sha1-s085HupNqPPpgjHizNjfnAQfFxs="
     },
     "cssesc": {
       "version": "2.0.0",
@@ -6163,6 +6156,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.2.2.tgz",
+      "integrity": "sha512-yxuBfeIH5c+0FsoRP60w4De6omXhA06c7eUYBsC1ykB6Ys2yK5fSteIYWvkJ4xJVLQgCvAdO8C4mN6MLeJpBaw==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.2.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -6898,7 +6907,6 @@
       "version": "3.2.25",
       "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
       "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==",
-      "dev": true,
       "optional": true
     },
     "espree": {
@@ -8327,7 +8335,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-1.0.8.tgz",
       "integrity": "sha512-3YA6NpGuuXF+WwwgA7moSHIw1U0XHxBY8W5bjjoSGBCVuw6s+DOgt7Z95Y3bf5k19RHixv6zW8KpW/yrRno43Q==",
-      "dev": true,
       "requires": {
         "@petamoriken/float16": "^3.4.7",
         "lerc": "^3.0.0",
@@ -8342,7 +8349,6 @@
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
           "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-          "dev": true,
           "requires": {
             "yallist": "^4.0.0"
           }
@@ -8350,14 +8356,12 @@
         "pako": {
           "version": "2.0.4",
           "resolved": "https://registry.npmjs.org/pako/-/pako-2.0.4.tgz",
-          "integrity": "sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg==",
-          "dev": true
+          "integrity": "sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg=="
         },
         "yallist": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-          "dev": true
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
         }
       }
     },
@@ -9906,8 +9910,7 @@
     "ieee754": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
-      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==",
-      "dev": true
+      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
     },
     "iferr": {
       "version": "0.1.5",
@@ -10422,8 +10425,7 @@
     "is-observable": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-observable/-/is-observable-2.1.0.tgz",
-      "integrity": "sha512-DailKdLb0WU+xX8K5w7VsJhapwHLZ9jjmazqCJq4X12CTgqq73TKnbRcnSLuXYPOoLQgV5IrD7ePiX/h1vnkBw==",
-      "dev": true
+      "integrity": "sha512-DailKdLb0WU+xX8K5w7VsJhapwHLZ9jjmazqCJq4X12CTgqq73TKnbRcnSLuXYPOoLQgV5IrD7ePiX/h1vnkBw=="
     },
     "is-path-cwd": {
       "version": "2.2.0",
@@ -10732,8 +10734,7 @@
     "json-stringify-pretty-compact": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
-      "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ==",
-      "dev": true
+      "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
     },
     "json-stringify-safe": {
       "version": "5.0.1",
@@ -10855,8 +10856,7 @@
     "lerc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
-      "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww==",
-      "dev": true
+      "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
     },
     "levn": {
       "version": "0.3.0",
@@ -11349,8 +11349,7 @@
     "mapbox-to-css-font": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.0.tgz",
-      "integrity": "sha512-v674D0WtpxCXlA6E+sBlG1QJWdUkz/s9qAD91bJSXBGuBL5lL4tJXpoJEftecphCh2SVQCjWMS2vhylc3AIQTg==",
-      "dev": true
+      "integrity": "sha512-v674D0WtpxCXlA6E+sBlG1QJWdUkz/s9qAD91bJSXBGuBL5lL4tJXpoJEftecphCh2SVQCjWMS2vhylc3AIQTg=="
     },
     "md5.js": {
       "version": "1.3.5",
@@ -12311,8 +12310,7 @@
     "observable-fns": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/observable-fns/-/observable-fns-0.6.1.tgz",
-      "integrity": "sha512-9gRK4+sRWzeN6AOewNBTLXir7Zl/i3GB6Yl26gK4flxz8BXVpD3kt8amREmWNb0mxYOGDotvE5a4N+PtGGKdkg==",
-      "dev": true
+      "integrity": "sha512-9gRK4+sRWzeN6AOewNBTLXir7Zl/i3GB6Yl26gK4flxz8BXVpD3kt8amREmWNb0mxYOGDotvE5a4N+PtGGKdkg=="
     },
     "obuf": {
       "version": "1.1.2",
@@ -12324,7 +12322,6 @@
       "version": "6.9.0",
       "resolved": "https://registry.npmjs.org/ol/-/ol-6.9.0.tgz",
       "integrity": "sha512-VmU5HKHwO2O1uGgmBcng/dL1PouVB1jKiYUbiXPR5l1i/3B3qatexl4rapZAnsGx0vsOC7lI1GLx7jEZro8C8Q==",
-      "dev": true,
       "requires": {
         "geotiff": "^1.0.8",
         "ol-mapbox-style": "^6.5.1",
@@ -12336,7 +12333,6 @@
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.5.1.tgz",
       "integrity": "sha512-diGjCUlYjCA855vJjQjPzxXLn/skm0iQLD2/yDsXaKdNxFd35hNfRm5Li+Vxh/FxraCodxRvd8IplhrhvXoqbQ==",
-      "dev": true,
       "requires": {
         "@mapbox/mapbox-gl-style-spec": "^13.20.1",
         "mapbox-to-css-font": "^2.4.0",
@@ -12622,8 +12618,7 @@
     "parse-headers": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.4.tgz",
-      "integrity": "sha512-psZ9iZoCNFLrgRjZ1d8mn0h9WRqJwFxM9q3x7iUjN/YT2OksthDJ5TiPCu2F38kS4zutqfW+YdVVkBZZx3/1aw==",
-      "dev": true
+      "integrity": "sha512-psZ9iZoCNFLrgRjZ1d8mn0h9WRqJwFxM9q3x7iUjN/YT2OksthDJ5TiPCu2F38kS4zutqfW+YdVVkBZZx3/1aw=="
     },
     "parse-json": {
       "version": "2.2.0",
@@ -12742,7 +12737,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
       "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
-      "dev": true,
       "requires": {
         "ieee754": "^1.1.12",
         "resolve-protobuf-schema": "^2.1.0"
@@ -15431,8 +15425,7 @@
     "protocol-buffers-schema": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
-      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==",
-      "dev": true
+      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
     },
     "proxy-addr": {
       "version": "2.0.5",
@@ -15602,8 +15595,7 @@
     "quickselect": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
-      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
-      "dev": true
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
     },
     "quill": {
       "version": "1.3.6",
@@ -15682,7 +15674,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
       "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
-      "dev": true,
       "requires": {
         "quickselect": "^2.0.0"
       }
@@ -16059,7 +16050,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
       "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
-      "dev": true,
       "requires": {
         "protocol-buffers-schema": "^3.3.1"
       }
@@ -16173,8 +16163,7 @@
     "rw": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
-      "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=",
-      "dev": true
+      "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
     },
     "rx-lite": {
       "version": "4.0.8",
@@ -16781,14 +16770,12 @@
     "sort-asc": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
-      "integrity": "sha1-q3md9h/HPqCVbHnEtTHtHp53J+k=",
-      "dev": true
+      "integrity": "sha1-q3md9h/HPqCVbHnEtTHtHp53J+k="
     },
     "sort-desc": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
-      "integrity": "sha1-GYuMDN6wlcRjNBhh45JdTuNZqe4=",
-      "dev": true
+      "integrity": "sha1-GYuMDN6wlcRjNBhh45JdTuNZqe4="
     },
     "sort-keys": {
       "version": "2.0.0",
@@ -16803,7 +16790,6 @@
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
       "integrity": "sha1-mODRme3kDgfGGoRAPGHWw7KQ+eI=",
-      "dev": true,
       "requires": {
         "sort-asc": "^0.1.0",
         "sort-desc": "^0.1.1"
@@ -17961,7 +17947,6 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/threads/-/threads-1.7.0.tgz",
       "integrity": "sha512-Mx5NBSHX3sQYR6iI9VYbgHKBLisyB+xROCBGjjWm1O9wb9vfLxdaGtmT/KCjUqMsSNW6nERzCW3T6H43LqjDZQ==",
-      "dev": true,
       "requires": {
         "callsites": "^3.1.0",
         "debug": "^4.2.0",
@@ -17973,14 +17958,12 @@
         "callsites": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-          "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-          "dev": true
+          "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
         },
         "debug": {
           "version": "4.3.2",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
           "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
-          "dev": true,
           "requires": {
             "ms": "2.1.2"
           }
@@ -17988,8 +17971,7 @@
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
         }
       }
     },
@@ -18079,7 +18061,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/tiny-worker/-/tiny-worker-2.3.0.tgz",
       "integrity": "sha512-pJ70wq5EAqTAEl9IkGzA+fN0836rycEuz2Cn6yeZ6FRzlVS5IDOkFHpIoEsksPRQV34GDqXm65+OlnZqUSyK2g==",
-      "dev": true,
       "optional": true,
       "requires": {
         "esm": "^3.2.25"
@@ -18989,8 +18970,7 @@
     "webfont-matcher": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/webfont-matcher/-/webfont-matcher-1.1.0.tgz",
-      "integrity": "sha1-mM6VCXsp4x++czBT4Q5XFkLRxsc=",
-      "dev": true
+      "integrity": "sha1-mM6VCXsp4x++czBT4Q5XFkLRxsc="
     },
     "webidl-conversions": {
       "version": "6.1.0",
@@ -19582,8 +19562,7 @@
     "xml-utils": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.0.2.tgz",
-      "integrity": "sha512-rEn0FvKi+YGjv9omf22oAf+0d6Ly/sgJ/CUufU/nOzS7SRLmgwSujrewc03KojXxt+aPaTRpm593TgehtUBMSQ==",
-      "dev": true
+      "integrity": "sha512-rEn0FvKi+YGjv9omf22oAf+0d6Ly/sgJ/CUufU/nOzS7SRLmgwSujrewc03KojXxt+aPaTRpm593TgehtUBMSQ=="
     },
     "xmlchars": {
       "version": "2.2.0",
@@ -19714,6 +19693,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.2.1.tgz",
+      "integrity": "sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index e2449fc8..3f52cd7e 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "axios": "^0.19.0",
     "babel-eslint": "^8.0.1",
     "babel-plugin-component": "^1.1.1",
+    "echarts": "^5.2.2",
     "element-theme": "^2.0.1",
     "element-ui": "^2.13.0",
     "file-saver": "^2.0.5",
diff --git a/public/index.html b/public/index.html
index e4e6978e..259b3351 100644
--- a/public/index.html
+++ b/public/index.html
@@ -36,7 +36,8 @@
   <!-- 开发环境 -->
   <% if (process.env.VUE_APP_NODE_ENV==='dev' ) { %>
     <script>
-     window.SITE_CONFIG['apiURL'] = 'http://192.168.1.140/api'
+    //  window.SITE_CONFIG['apiURL'] = 'http://192.168.1.140/api'
+     window.SITE_CONFIG['apiURL'] = 'https://epmet-test.elinkservice.cn/api'
        // window.SITE_CONFIG['apiURL'] = 'http://118.190.150.119:41080/api'
       // window.SITE_CONFIG['apiURL'] = 'https://epmet-dev.elinkservice.cn/api'
     </script>
diff --git a/src/assets/img/shuju/measure/bg-left.png b/src/assets/img/shuju/measure/bg-left.png
new file mode 100644
index 00000000..e35c9bc8
Binary files /dev/null and b/src/assets/img/shuju/measure/bg-left.png differ
diff --git a/src/assets/img/shuju/measure/dangyuan.png b/src/assets/img/shuju/measure/dangyuan.png
new file mode 100644
index 00000000..74ac72ae
Binary files /dev/null and b/src/assets/img/shuju/measure/dangyuan.png differ
diff --git a/src/assets/img/shuju/measure/huang@2x.png b/src/assets/img/shuju/measure/huang@2x.png
new file mode 100644
index 00000000..b40cd4c0
Binary files /dev/null and b/src/assets/img/shuju/measure/huang@2x.png differ
diff --git a/src/assets/img/shuju/measure/jgzs@2x.png b/src/assets/img/shuju/measure/jgzs@2x.png
new file mode 100644
index 00000000..fd3e53c8
Binary files /dev/null and b/src/assets/img/shuju/measure/jgzs@2x.png differ
diff --git a/src/assets/img/shuju/measure/jumin.png b/src/assets/img/shuju/measure/jumin.png
new file mode 100644
index 00000000..74003ab8
Binary files /dev/null and b/src/assets/img/shuju/measure/jumin.png differ
diff --git a/src/assets/img/shuju/measure/lan@2x.png b/src/assets/img/shuju/measure/lan@2x.png
new file mode 100644
index 00000000..9a078223
Binary files /dev/null and b/src/assets/img/shuju/measure/lan@2x.png differ
diff --git a/src/assets/img/shuju/measure/lanlv@2x.png b/src/assets/img/shuju/measure/lanlv@2x.png
new file mode 100644
index 00000000..190ea272
Binary files /dev/null and b/src/assets/img/shuju/measure/lanlv@2x.png differ
diff --git a/src/assets/img/shuju/measure/lv@2x.png b/src/assets/img/shuju/measure/lv@2x.png
new file mode 100644
index 00000000..6b09fde3
Binary files /dev/null and b/src/assets/img/shuju/measure/lv@2x.png differ
diff --git a/src/assets/img/shuju/measure/lxdj@2x.png b/src/assets/img/shuju/measure/lxdj@2x.png
new file mode 100644
index 00000000..2db1aea0
Binary files /dev/null and b/src/assets/img/shuju/measure/lxdj@2x.png differ
diff --git a/src/assets/img/shuju/measure/ly@2x.png b/src/assets/img/shuju/measure/ly@2x.png
new file mode 100644
index 00000000..76303b9c
Binary files /dev/null and b/src/assets/img/shuju/measure/ly@2x.png differ
diff --git a/src/assets/img/shuju/measure/qita.png b/src/assets/img/shuju/measure/qita.png
new file mode 100644
index 00000000..82b583cd
Binary files /dev/null and b/src/assets/img/shuju/measure/qita.png differ
diff --git a/src/assets/img/shuju/measure/xq@2x.png b/src/assets/img/shuju/measure/xq@2x.png
new file mode 100644
index 00000000..bb4674f9
Binary files /dev/null and b/src/assets/img/shuju/measure/xq@2x.png differ
diff --git a/src/assets/img/shuju/measure/zi@2x.png b/src/assets/img/shuju/measure/zi@2x.png
new file mode 100644
index 00000000..6bd33116
Binary files /dev/null and b/src/assets/img/shuju/measure/zi@2x.png differ
diff --git a/src/assets/img/shuju/top/1.png b/src/assets/img/shuju/top/1.png
new file mode 100644
index 00000000..1f4ddc87
Binary files /dev/null and b/src/assets/img/shuju/top/1.png differ
diff --git a/src/assets/img/shuju/top/2.png b/src/assets/img/shuju/top/2.png
new file mode 100644
index 00000000..fc2e96ca
Binary files /dev/null and b/src/assets/img/shuju/top/2.png differ
diff --git a/src/assets/img/shuju/top/3.png b/src/assets/img/shuju/top/3.png
new file mode 100644
index 00000000..7e89e215
Binary files /dev/null and b/src/assets/img/shuju/top/3.png differ
diff --git a/src/assets/scss/main-shuju.scss b/src/assets/scss/main-shuju.scss
index ce4ca79d..190f8aef 100644
--- a/src/assets/scss/main-shuju.scss
+++ b/src/assets/scss/main-shuju.scss
@@ -1,5 +1,5 @@
-@import '~@/element-ui/theme-variables.scss';
-@import './variables.scss';
+@import "~@/element-ui/theme-variables.scss";
+@import "./variables.scss";
 
 // $navbar--height: 60px;
 body {
@@ -72,8 +72,8 @@ body {
     background-color: transparent;
   }
   &-add {
-    > span > *[class*='el-icon-'],
-    > span > *[class*='icon'] {
+    > span > *[class*="el-icon-"],
+    > span > *[class*="icon"] {
       vertical-align: middle;
       font-size: 18px;
       margin-right: 5px;
@@ -233,17 +233,13 @@ body {
     font-family: FZZCHJW;
     font-weight: normal;
     color: #ffffff;
-    background: linear-gradient(
-      0deg,
-      #03c7ff 24.609375%,
-      #ffffff 81.0791015625%
-    );
+    background: linear-gradient(0deg, #03c7ff 24.609375%, #ffffff 81.0791015625%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: rgba(#fff, 0.7);
 
     &::before {
       position: absolute;
-      content: '';
+      content: "";
       z-index: 100000;
       display: block;
       bottom: -10px;
@@ -289,13 +285,15 @@ body {
       text-decoration: none;
     }
     &.z-div {
-      .el-menu-item {
+      .el-menu-item,
+      .sub-menu {
         position: relative;
 
-        &.is-active {
+        &.is-active,
+        &.z-on {
           &::before {
             position: absolute;
-            content: '';
+            content: "";
             display: block;
             bottom: -6px;
             left: 0;
@@ -317,7 +315,7 @@ body {
 
         &::after {
           position: absolute;
-          content: '';
+          content: "";
           right: 0;
           top: 0;
           bottom: 0;
@@ -328,8 +326,41 @@ body {
         }
       }
     }
+
+    .sub-menu {
+      position: relative;
+      float: left;
+      cursor: pointer;
+      &:hover {
+        .sub-menu-list {
+          display: block;
+        }
+      }
+
+      .sub-menu-list {
+        position: absolute;
+        display: none;
+        padding: 0 10px;
+        width: 120px;
+        left: -100px;
+        right: -100px;
+        margin: 0 auto;
+        background-color: rgba(#176dec, 0.9);
+        text-align: center;
+        cursor: pointer;
+        > div {
+          border-top: 1px dashed rgba(#fff, 0.4);
+          color: rgba(#fff, 0.7);
+          transition: all ease 0.5s;
+          &:hover {
+            color: #fff;
+          }
+        }
+      }
+    }
+
     .el-menu-item,
-    .el-submenu > .el-submenu__title {
+    .sub-menu {
       height: $navbar--height;
       padding: 0 15px;
       line-height: $navbar--height;
@@ -337,14 +368,12 @@ body {
       color: #fff;
     }
     .el-menu-item.is-active,
-    .el-submenu.is-active > .el-submenu__title {
+    .sub-menu.z-on {
       color: #fff;
       font-weight: bold;
-      &:focus,
-      &:hover {
-      }
     }
-    .el-menu-item {
+    .el-menu-item,
+    .sub-menu {
       i {
         color: #fff;
       }
@@ -388,9 +417,10 @@ body {
       }
     }
   }
+
   .navbar__search {
-    > *[class*='el-icon-'],
-    > *[class*='icon'] {
+    > *[class*="el-icon-"],
+    > *[class*="icon"] {
       display: inline-block;
       vertical-align: middle;
     }
@@ -446,9 +476,7 @@ body {
     min-height: calc(#{$content--fill-height} - 2px);
   }
   > .aui-card--fill > .el-card__header + .el-card__body {
-    min-height: calc(
-      #{$content--fill-height} - #{$content--card-header-height} - 2px
-    );
+    min-height: calc(#{$content--fill-height} - #{$content--card-header-height} - 2px);
   }
   &--tabs {
     padding: $content--tabs-header-height 0 0;
@@ -520,7 +548,7 @@ body {
               position: absolute;
               bottom: 0;
               left: 0;
-              content: '';
+              content: "";
               width: 100%;
               height: 2px;
               background-color: $--color-primary;
@@ -553,15 +581,10 @@ body {
           min-height: calc(#{$content--fill-height-tabs} - 2px);
         }
         > .aui-card--fill > .el-card__header + .el-card__body {
-          min-height: calc(
-            #{$content--fill-height-tabs} - #{$content--card-header-height} -
-              2px
-          );
+          min-height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
         }
         &.is-iframe {
-          height: calc(
-            #{$content--fill-height-tabs} + #{$content--padding * 2}
-          );
+          height: calc(#{$content--fill-height-tabs} + #{$content--padding * 2});
           margin: -$content--padding;
           min-height: auto;
           > .aui-card--fill {
@@ -580,10 +603,7 @@ body {
             background-color: #fff;
           }
           > .aui-card--fill > .el-card__header + .el-card__body {
-            height: calc(
-              #{$content--fill-height-tabs} - #{$content--card-header-height} -
-                2px
-            );
+            height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
           }
         }
       }
@@ -613,7 +633,7 @@ body {
 
 /* Page
 ------------------------------ */
-*[class*='aui-page__'] {
+*[class*="aui-page__"] {
   padding-top: 0;
   .aui-content {
     min-height: auto;
@@ -625,9 +645,7 @@ body {
       min-height: calc(100vh - #{$content--padding * 2} - 2px);
     }
     > .aui-card--fill > .el-card__header + .el-card__body {
-      min-height: calc(
-        100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px
-      );
+      min-height: calc(100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px);
     }
   }
 }
diff --git a/src/assets/scss/modules/visual/c/common.scss b/src/assets/scss/modules/visual/c/common.scss
new file mode 100644
index 00000000..0f86e52d
--- /dev/null
+++ b/src/assets/scss/modules/visual/c/common.scss
@@ -0,0 +1,19 @@
+@mixin scrollBar {
+    &::-webkit-scrollbar {
+        /*滚动条整体样式*/
+        width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
+        height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+        /*滚动条里面小方块*/
+        border-radius: 8px;
+        box-shadow: inset 0 0 5px rgba(#00023f, 0.2);
+        background: linear-gradient(270deg, #0063fe, #0095ff);
+    }
+    &::-webkit-scrollbar-track {
+        /*滚动条里面轨道*/
+        box-shadow: inset 0 0 5px rgba(#00023f, 0.2);
+        border-radius: 8px;
+        background: darken(#0c81fe, 20);
+    }
+}
diff --git a/src/assets/scss/people.scss b/src/assets/scss/modules/visual/people.scss
similarity index 63%
rename from src/assets/scss/people.scss
rename to src/assets/scss/modules/visual/people.scss
index ea88d05f..f382abc1 100644
--- a/src/assets/scss/people.scss
+++ b/src/assets/scss/modules/visual/people.scss
@@ -1,22 +1,27 @@
-@import "c/config";
-@import "c/function";
+@import "../../c/config";
+@import "../../c/function";
+@import "./c/common";
 
 .g-cpt {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    // justify-content: space-around;
-    // .g-l {
-    //     margin-right: auto;
-    // }
-    // .g-r {
-    //     margin-left: auto;
-    // }
+    margin-top: 5px;
+
+    .g-l {
+        width: 850px;
+        margin-bottom: 20px;
+    }
+
+    .g-r {
+        margin-left: 6px;
+        width: calc(100% - 850px - 6px);
+        min-width: 850px;
+    }
 }
 
 .m-people {
     position: relative;
-    width: 850px;
 
     .title {
         padding: 10px;
@@ -174,7 +179,7 @@
 .m-pop {
     @include shield;
     background-color: rgba(#000, 0.9);
-    overflow-y: scroll;
+    overflow-y: auto;
 
     .wrap {
         position: relative;
@@ -285,8 +290,7 @@
 
 .m-relation {
     position: relative;
-    margin-top: 20px;
-    width: 850px;
+    margin-top: 10px;
 
     .title {
         padding: 10px;
@@ -432,3 +436,200 @@
         }
     }
 }
+
+.m-tb {
+    .title {
+        padding: 10px;
+        font-size: 22px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        color: #ffffff;
+        display: flex;
+        align-items: center;
+
+        img {
+            display: block;
+            margin-right: 5px;
+        }
+        span {
+            display: block;
+        }
+    }
+    .tb {
+        height: 300px;
+        overflow-y: auto;
+        @include scrollBar;
+    }
+}
+
+.m-row {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+
+    .m-list {
+        width: calc(50% - 3px);
+
+        .title {
+            padding: 10px;
+            font-size: 22px;
+            font-family: PingFang SC;
+            font-weight: 800;
+            color: #ffffff;
+            display: flex;
+            align-items: center;
+
+            img {
+                display: block;
+                margin-right: 5px;
+            }
+            span {
+                display: block;
+            }
+
+            a {
+                display: block;
+                color: rgba(#fff, 0.5);
+                font-size: 22px;
+                font-family: PingFang SC;
+                font-weight: 800;
+                margin-right: 10px;
+                cursor: pointer;
+
+                &.z-on {
+                    color: #fff;
+                    cursor: default;
+
+                    &:hover {
+                        color: #fff;
+                        text-decoration: none;
+                    }
+                }
+
+                &:hover {
+                    color: rgba(#fff, 0.5);
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        .list-wrap {
+            height: 480px;
+            overflow-y: auto;
+            @include scrollBar;
+
+            .list {
+                .item {
+                    position: relative;
+                    background-color: #104ba4;
+                    padding: 10px 20px;
+                    margin-bottom: 4px;
+                    cursor: pointer;
+                    transition: all ease 0.1s;
+
+                    .item-row {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+
+                        .item-l {
+                            width: 25%;
+                        }
+                        .item-r {
+                            width: 75%;
+                        }
+
+                        &:hover {
+                            &::before {
+                                content: "";
+                                position: absolute;
+                                display: block;
+                                left: 0;
+                                top: 0;
+                                bottom: 0;
+                                width: 6px;
+                                background: linear-gradient(270deg, #0336ff, #01b4ff);
+                                border-radius: 2px;
+                            }
+
+                            &::after {
+                                content: "";
+                                position: absolute;
+                                display: block;
+                                left: 15px;
+                                top: 0;
+                                bottom: 0;
+                                margin: auto 0;
+                                width: 0;
+                                height: 0;
+                                border-width: 10px;
+                                border-style: solid;
+                                border-color: transparent transparent transparent #20edff;
+                            }
+                        }
+                    }
+
+                    .item-point {
+                        text-align: center;
+                        padding-left: 10%;
+                        height: 16px;
+                        font-size: 22px;
+                        font-family: PingFang SC;
+                        font-weight: bold;
+                        color: #ffffff;
+                        line-height: 12px;
+                    }
+
+                    .item-title {
+                        padding: 10px 0;
+                        font-size: 18px;
+                        font-family: PingFang SC;
+                        font-weight: 400;
+                        color: #ffffff;
+                        line-height: 24px;
+                    }
+
+                    .item-date {
+                        padding: 10px 0;
+                        border-top: 1px dashed #8398d9;
+                        font-size: 14px;
+                        font-family: PingFang SC;
+                        font-weight: 400;
+                        color: #ffffff;
+                        opacity: 0.67;
+                    }
+                    &:hover {
+                        box-shadow: 0 0 30px 5px inset #22f;
+                        background-color: darken(#104ba4, 12);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.m-pagination {
+    box-sizing: border-box;
+    margin-top: 20px;
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: flex-end;
+
+    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+        background: #0266d1;
+        color: #000d3f;
+    }
+
+    /deep/ .el-pagination .el-pager li {
+        background: #002e74;
+    }
+
+    /deep/ .el-pagination .btn-prev {
+        background: #002e74;
+    }
+
+    /deep/ .el-pagination .btn-next {
+        background: #002e74;
+    }
+}
diff --git a/src/assets/scss/modules/visual/processAnalyze.scss b/src/assets/scss/modules/visual/processAnalyze.scss
new file mode 100644
index 00000000..3a3a0f23
--- /dev/null
+++ b/src/assets/scss/modules/visual/processAnalyze.scss
@@ -0,0 +1,224 @@
+@import '../../c/config';
+@import '../../c/function';
+@import './c/common';
+
+.title {
+  padding: 10px;
+  font-size: 22px;
+  font-family: PingFang SC;
+  font-weight: 800;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  img {
+    display: block;
+    margin-right: 5px;
+  }
+  span {
+    display: block;
+  }
+
+  .second-title {
+    display: flex;
+    align-items: center;
+
+    .second-select {
+      margin: 0 10px 0 40px;
+
+      ::v-deep .el-input {
+        width: 140px;
+        height: 36px;
+        .el-input__inner {
+          height: 100%;
+          padding: 0 10px;
+          color: #fff;
+          line-height: 36px;
+          background: #06186d;
+          border: 1px solid #1a64cc;
+        }
+        .el-icon-arrow-up:before {
+          content: '\e78f';
+        }
+      }
+      ::v-deep .el-date-editor {
+        .el-input__prefix {
+          left: unset;
+          right: 5px;
+        }
+      }
+    }
+    .cascader {
+      ::v-deep .el-input {
+        width: 220px;
+      }
+    }
+    .second-select:last-child {
+      margin-left: 0;
+    }
+  }
+}
+
+.g-cpt-resi {
+  display: flex;
+  flex-direction: row;
+  height: calc(100vh - 170px);
+
+  .g-l {
+    flex-shrink: 0;
+    width: 700px;
+    height: calc(100vh - 230px);
+
+    .l_top {
+      height: 385px;
+      display: flex;
+      .g-count {
+        width: 100px;
+      }
+      .g-pie {
+      }
+    }
+    .l_bottom {
+      height: calc(100vh - 230px - 385px);
+      margin-top: 20px;
+    }
+  }
+
+  .g-r {
+    text-align: center;
+    margin: 40px 19px 20px;
+    width: calc(100vw - 60px - 800px);
+    height: calc(100vh - 160px - 20px);
+  }
+}
+
+.l_bottom {
+  .bottom_label {
+    position: relative;
+    padding-left: 40px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+  }
+  .bottom_label::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 20px;
+    width: 12px;
+    height: 12px;
+    box-sizing: border-box;
+    margin-top: -6px;
+    background: #2865fa;
+    border-radius: 50%;
+  }
+  > span {
+    font-size: 18px;
+    font-family: PingFang SC;
+    font-weight: 800;
+    color: #ffffff;
+  }
+  .echart-line {
+    margin-top: 10px;
+  }
+}
+.g-count {
+  margin-top: 104px;
+  margin-left: 52px;
+  .t_count {
+    font-size: 16px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+    opacity: 0.76;
+  }
+  .c_count {
+    font-size: 48px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #ffffff;
+  }
+  .t_yestoday {
+    margin-top: 59px;
+    font-size: 14px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+    opacity: 0.76;
+    > span {
+      margin-left: 18px;
+      font-size: 16px;
+      font-family: PingFang SC;
+      font-weight: 500;
+      color: #f42800;
+    }
+  }
+  .t_today {
+    margin-top: 12px;
+    font-size: 14px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+    opacity: 0.76;
+    > span {
+      margin-left: 18px;
+      font-size: 16px;
+      font-family: PingFang SC;
+      font-weight: 500;
+      color: #3edd7f;
+    }
+  }
+}
+
+.g-r {
+  .tb {
+    position: relative;
+    height: calc(100vh - 220px);
+    overflow-y: auto;
+    @include scrollBar;
+
+    .m-pagination {
+      position: absolute;
+      box-sizing: border-box;
+      right: 0;
+      bottom: 0;
+
+      width: 100%;
+      height: 40px;
+      display: flex;
+      justify-content: flex-end;
+
+      /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+        background: #0266d1;
+        color: #000d3f;
+      }
+
+      /deep/ .el-pagination .el-pager li {
+        background: #002e74;
+      }
+
+      /deep/ .el-pagination .btn-prev {
+        background: #002e74;
+      }
+
+      /deep/ .el-pagination .btn-next {
+        background: #002e74;
+      }
+    }
+  }
+}
+
+.echart-wr {
+  margin-left: 30px;
+  // margin-top: 100px;
+  text-align: center;
+  position: relative;
+  width: 500px;
+  height: 100%;
+  box-sizing: border-box;
+  .echart-org {
+    width: 100%;
+    height: 90%;
+  }
+}
diff --git a/src/assets/scss/modules/visual/resibuzz.scss b/src/assets/scss/modules/visual/resibuzz.scss
new file mode 100644
index 00000000..a5c3918e
--- /dev/null
+++ b/src/assets/scss/modules/visual/resibuzz.scss
@@ -0,0 +1,135 @@
+@import '../../c/config';
+@import '../../c/function';
+@import './c/common';
+
+.title {
+  padding: 10px;
+  font-size: 22px;
+  font-family: PingFang SC;
+  font-weight: 800;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  img {
+    display: block;
+    margin-right: 5px;
+  }
+  span {
+    display: block;
+  }
+
+  .second-select {
+    margin: 0 10px 0 40px;
+
+    ::v-deep .el-input {
+      width: 140px;
+      height: 36px;
+      .el-input__inner {
+        height: 100%;
+        padding: 0 10px;
+        color: #fff;
+        line-height: 36px;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+      }
+      .el-icon-arrow-up:before {
+        content: '\e78f';
+      }
+    }
+    ::v-deep .el-date-editor {
+      .el-input__prefix {
+        left: unset;
+        right: 5px;
+      }
+    }
+  }
+
+  .cascader {
+    ::v-deep .el-input {
+      width: 220px;
+    }
+  }
+  .status-select {
+    position: absolute;
+    top: 20px;
+    right: 10px;
+  }
+  .second-select:last-child {
+    margin-left: 0;
+  }
+}
+
+.g-cpt-resi {
+  display: flex;
+  flex-direction: row;
+  // flex-wrap: wrap;
+  // justify-content: center;
+  height: calc(100vh - 130px);
+
+  .g-l {
+    flex-shrink: 0;
+    width: 600px;
+    height: calc(100vh - 190px);
+  }
+
+  .g-r {
+    text-align: center;
+    margin: 40px 19px 20px;
+    width: calc(100vw - 60px - 600px);
+    height: calc(100vh - 140px - 20px);
+  }
+}
+
+.g-r {
+  .tb {
+    position: relative;
+    height: calc(100vh - 220px);
+    overflow-y: auto;
+    @include scrollBar;
+
+    .m-pagination {
+      position: absolute;
+      box-sizing: border-box;
+      right: 0;
+      bottom: 0;
+
+      width: 100%;
+      height: 40px;
+      display: flex;
+      justify-content: flex-end;
+
+      /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+        background: #0266d1;
+        color: #000d3f;
+      }
+
+      /deep/ .el-pagination .el-pager li {
+        background: #002e74;
+      }
+
+      /deep/ .el-pagination .btn-prev {
+        background: #002e74;
+      }
+
+      /deep/ .el-pagination .btn-next {
+        background: #002e74;
+      }
+    }
+  }
+}
+
+.echart-wr {
+  margin-left: 30px;
+  // margin-top: 100px;
+  text-align: center;
+  position: relative;
+  width: 500px;
+  height: 100%;
+  box-sizing: border-box;
+  .echart-org {
+    width: 100%;
+    height: 90%;
+  }
+}
diff --git a/src/router/index.js b/src/router/index.js
index dbf8448e..bc43c78a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -98,7 +98,8 @@ export const moduleShujuRoutes = {
       },
     },
     {
-      path: "/main-shuju/visual-basicinfo-people",
+      path: "/main-shuju/visual-basicinfo-people/:uid",
+      props: true,
       component: () => import("@/views/modules/visual/basicinfo/people"),
       name: "visual-basicinfo-people",
       meta: {
@@ -229,9 +230,21 @@ router.beforeEach((to, from, next) => {
       window.SITE_CONFIG["menuShujuList"] = [
         {
           icon: "icon-setting",
-          id: "2",
+          id: "22213213",
           name: "基础信息",
           url: "visual/basicinfo/basicInfoMain",
+          children: [
+            {
+              url: "/visual/basicinfo/basicInfoMain",
+              name: "基础信息",
+              id: "5feawfwaefwa5",
+            },
+            {
+              url: "/visual/basicinfo/basicInfoMain",
+              name: "人员类别分析",
+              id: "5fwaefwaefawef5",
+            },
+          ],
         },
         {
           icon: "icon-setting",
@@ -239,6 +252,70 @@ router.beforeEach((to, from, next) => {
           name: "人员预警",
           url: "visual/warning/index",
         },
+        {
+          icon: "icon-setting",
+          id: "6",
+          name: "社区治理",
+          children: [
+            {
+              url: "visual/communityGovern/processAnalyze",
+              name: "项目处理分析",
+              id: "processAnalyze",
+            },
+            {
+              url: "/visual/communityGovern/typeAnalyze",
+              name: "项目分类分析",
+              id: "typeAnalyze",
+            },
+            {
+              url: "/visual/communityGovern/resibuzz",
+              name: "居民热议",
+              id: "resibuzz",
+            },
+            {
+              url: "/visual/communityGovern/distributionAnalyze",
+              name: "项目分布分析",
+              id: "distributionAnalyze",
+            },
+          ],
+         
+        },
+        {
+          icon: "icon-setting",
+          id: "2221321001",
+          name: "社区党建",
+          // url: "visual/basicinfo/basicInfoMain",
+          children: [
+            {
+              url: "/visual/communityParty/party",
+              name: "党员信息统计",
+              id: "5feawfwaefwa578",
+            },
+            {
+              url: "/visual/communityParty/community",
+              name: "区域化党建",
+              id: "5fwaefwaefawef588",
+            },
+          ], 
+        },
+        {
+          icon: "icon-setting",
+          id: "2221321123",
+          name: "措施清单",
+          // url: "visual/basicinfo/basicInfoMain",
+          children: [
+            {
+              url: "/visual/measure/service",
+              name: "服务措施分析",
+              id: "5feawfwaefwa57",
+            },
+            {
+              url: "/visual/measure/volunteer",
+              name: "志愿者服务分析",
+              id: "5fwaefwaefawef58",
+            },
+          ],
+        },
       ];
       fnAddDynamicMenuRoutes2(window.SITE_CONFIG["menuShujuList"]);
       // next({ ...to, replace: true })
diff --git a/src/views/main-shuju/main-navbar.vue b/src/views/main-shuju/main-navbar.vue
index 181e7d51..19c148a4 100644
--- a/src/views/main-shuju/main-navbar.vue
+++ b/src/views/main-shuju/main-navbar.vue
@@ -1,13 +1,10 @@
 <template>
   <div>
-    <nav
-      v-if="showHeader"
-      class="m-navbar"
-    >
+    <nav v-if="showHeader" class="m-navbar">
       <div class="navbar__header">
         <h1 class="navbar__brand" @click="$router.push({ name: 'home' })">
           <a class="navbar__brand-lg" href="javascript:;">{{
-            userType === 'work' ? customerName : $t('brand.lg')
+            userType === "work" ? customerName : $t("brand.lg")
           }}</a>
           <a class="navbar__brand-mini" href="javascript:;">{{
             customerName.slice(0, 2)
@@ -21,10 +18,7 @@
             @click="$store.state.sidebarFold = !$store.state.sidebarFold"
           >
             <svg
-              class="
-                icon-svg
-                navbar__icon-menu navbar__icon-menu--switch
-              "
+              class="icon-svg navbar__icon-menu navbar__icon-menu--switch"
               aria-hidden="true"
             >
               <use xlink:href="#icon-outdent"></use>
@@ -45,21 +39,39 @@
           mode="horizontal"
           class="navbar__menu mr-auto z-div"
         >
-          <el-menu-item
-            @click="toIndexPage"
-          >
+          <el-menu-item index="index" @click="toIndexPage">
             <span>首页</span>
           </el-menu-item>
 
-          <el-menu-item
-            v-for="(menu, idx) in $store.state.mainShuju.menuList"
-            :key="menu.id"
-            :menu="menu"
-            :index="menu.id"
-            @click="gotoRouteHandle(menu.id, idx)"
-          >
-            <span>{{ menu.name }}</span>
-          </el-menu-item>
+          <template v-for="(menu, idx) in $store.state.mainShuju.menuList">
+            <li
+              class="sub-menu"
+              :class="$store.state.mainShuju.activeName==menu.name ? 'z-on':''"
+              v-if="menu.children"
+              :key="menu.id"
+              @click="gotoRouteHandle(menu.id, idx)"
+            >
+              <span>{{ menu.name }}</span>
+              <div class="sub-menu-list">
+                <div
+                  :key="subMenu.id"
+                  @click="gotoRouteHandle(subMenu.id, subIndex)"
+                  v-for="(subMenu, subIndex) in menu.children"
+                >
+                  {{ subMenu.name }}
+                </div>
+              </div>
+            </li>
+            <el-menu-item
+              v-else
+              :key="menu.id"
+              :menu="menu"
+              :index="menu.id"
+              @click="gotoRouteHandle(menu.id, idx)"
+            >
+              <span>{{ menu.name }}</span>
+            </el-menu-item>
+          </template>
         </el-menu>
 
         <el-menu class="navbar__menu" mode="horizontal">
@@ -83,10 +95,8 @@
               </svg>
             </a>
           </el-menu-item> -->
-          <el-menu-item index="3"
-                        @click="fullscreenHandle()">
-            <svg class="icon-svg navbar__icon-menu"
-                 aria-hidden="true">
+          <el-menu-item index="3" @click="fullscreenHandle()">
+            <svg class="icon-svg navbar__icon-menu" aria-hidden="true">
               <use xlink:href="#icon-fullscreen"></use>
             </svg>
           </el-menu-item>
@@ -99,12 +109,11 @@
                 <i class="el-icon-arrow-down"></i>
               </span>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item
-                  @click.native="updatePasswordHandle()"
-                  >{{ $t('updatePassword.title') }}</el-dropdown-item
-                >
+                <el-dropdown-item @click.native="updatePasswordHandle()">{{
+                  $t("updatePassword.title")
+                }}</el-dropdown-item>
                 <el-dropdown-item @click.native="logoutHandle()">{{
-                  $t('logout')
+                  $t("logout")
                 }}</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
@@ -122,114 +131,114 @@
 </template>
 
 <script>
-import { messages } from '@/i18n'
-import { mapGetters } from 'vuex'
-import screenfull from 'screenfull'
-import UpdatePasswordWork from './main-navbar-update-password-work'
-import { clearLoginInfo } from '@/utils'
+import { messages } from "@/i18n";
+import { mapGetters } from "vuex";
+import screenfull from "screenfull";
+import UpdatePasswordWork from "./main-navbar-update-password-work";
+import { clearLoginInfo } from "@/utils";
 export default {
-  inject: ['refresh'],
+  inject: ["refresh"],
   data() {
     return {
       showHeader: true,
       i18nMessages: messages,
       updatePassowrdVisible: false,
-      customerName: localStorage.getItem('customerName')
-    }
+      customerName: localStorage.getItem("customerName"),
+    };
   },
   components: {
-    UpdatePasswordWork
+    UpdatePasswordWork,
   },
   created() {
-    let platformToken = localStorage.getItem('showHeader') || ''
+    let platformToken = localStorage.getItem("showHeader") || "";
     if (
-      typeof platformToken !== 'undefined' &&
-      platformToken !== 'undefined' &&
-      platformToken !== ''
+      typeof platformToken !== "undefined" &&
+      platformToken !== "undefined" &&
+      platformToken !== ""
     ) {
-      this.showHeader = false
+      this.showHeader = false;
     }
-    console.log('=============================', this.userType)
-    this.$store.state.mainShuju.menuList = window.SITE_CONFIG['menuShujuList']
+    console.log("=============================", this.userType);
+    this.$store.state.mainShuju.menuList = window.SITE_CONFIG["menuShujuList"];
   },
   computed: {
     userType() {
-      return localStorage.getItem('userType')
-    }
+      return localStorage.getItem("userType");
+    },
   },
   methods: {
-    toIndexPage(){
-      this.$router.replace('/indexWork')
+    toIndexPage() {
+      this.$router.replace("/indexWork");
     },
     // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
     gotoRouteHandle(menuId, idx) {
-      var route = window.SITE_CONFIG['dynamicMenuRoutesShuju'].filter(
+      var route = window.SITE_CONFIG["dynamicMenuRoutesShuju"].filter(
         (item) => item.meta.menuId === menuId
-      )[0]
+      )[0];
       if (route) {
-        this.$router.push({ name: route.name })
+        this.$router.push({ name: route.name });
       }
-      this.$store.state.mainShuju.activeName = menuId
+      this.$store.state.mainShuju.activeName = menuId;
     },
     changeCustomerName(customerName) {
-      this.customerName = localStorage.getItem('customerName')
+      this.customerName = localStorage.getItem("customerName");
     },
     // 全屏
     fullscreenHandle() {
       if (!screenfull.enabled) {
         return this.$message({
-          message: this.$t('fullscreen.prompt'),
-          type: 'warning',
-          duration: 500
-        })
+          message: this.$t("fullscreen.prompt"),
+          type: "warning",
+          duration: 500,
+        });
       }
-      screenfull.toggle()
+      screenfull.toggle();
     },
     // 修改密码
     updatePasswordHandle() {
-      this.updatePassowrdVisible = true
+      this.updatePassowrdVisible = true;
       this.$nextTick(() => {
-        this.$refs.updatePassowrd.init()
-      })
+        this.$refs.updatePassowrd.init();
+      });
     },
     // 退出
     logoutHandle() {
       this.$confirm(
-        this.$t('prompt.info', { handle: this.$t('logout') }),
-        this.$t('prompt.title'),
+        this.$t("prompt.info", { handle: this.$t("logout") }),
+        this.$t("prompt.title"),
         {
-          confirmButtonText: this.$t('confirm'),
-          cancelButtonText: this.$t('cancel'),
-          type: 'warning'
+          confirmButtonText: this.$t("confirm"),
+          cancelButtonText: this.$t("cancel"),
+          type: "warning",
         }
       )
         .then(() => {
           //关闭所有标签页
           // tabs, 关闭全部
           this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
-            (item) => item.name === 'home2'
-          )
+            (item) => item.name === "home2"
+          );
 
           this.$http
-            .post('/auth/login/logout')
+            .post("/auth/login/logout")
             .then(({ data: res }) => {
               if (res.code !== 0) {
                 //别处登陆时 退出不提示 直接跳登陆页即可
                 if (res.code !== 10007) {
-                  this.$message.error(res.msg)
+                  this.$message.error(res.msg);
                 }
               }
 
-              clearLoginInfo()
+              clearLoginInfo();
 
-              this.$router.push({ name: 'login' })
+              this.$router.push({ name: "login" });
             })
-            .catch(() => {})
+            .catch(() => {});
         })
-        .catch(() => {})
-    }
-  }
-}
+        .catch(() => {});
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -240,4 +249,3 @@ export default {
 </style>
 
 <style lang="scss" src="@/assets/scss/main-shuju.scss" scoped></style>
-
diff --git a/src/views/modules/communityService/ninePlaces/team/team.vue b/src/views/modules/communityService/ninePlaces/team/team.vue
index a828b7ae..9f93a0a0 100644
--- a/src/views/modules/communityService/ninePlaces/team/team.vue
+++ b/src/views/modules/communityService/ninePlaces/team/team.vue
@@ -304,8 +304,11 @@ export default {
         this.tableData = data.list
 
         this.tableData.forEach(item => {
-          let timeArray = item.time.split(' ')
-          item.time = timeArray[0]
+          if (item.time) {
+            let timeArray = item.time.split(' ')
+            item.time = timeArray[0]
+          }
+
         });
       } else {
         this.$message.error(msg)
diff --git a/src/views/modules/visual/basicinfo/cpts/demand-info.vue b/src/views/modules/visual/basicinfo/cpts/demand-info.vue
new file mode 100644
index 00000000..31ed33e1
--- /dev/null
+++ b/src/views/modules/visual/basicinfo/cpts/demand-info.vue
@@ -0,0 +1,503 @@
+<template>
+  <div class="m-pop">
+    <div class="wrap">
+      <cpt-card>
+        <div class="title">
+          <img src="@/assets/img/shuju/title-tip.png" />
+          <span>更多信息</span>
+        </div>
+
+        <div class="btn-close" @click="handleClose">
+          <img src="@/assets/img/shuju/people/close.png" />
+        </div>
+
+        <div
+          :key="'fieldSubList' + index"
+          v-for="(fieldSubList, index) in fieldList"
+        >
+          <div class="list">
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属网格：</span>
+              <span>{{ gridName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属小区：</span>
+              <span>{{ xiaoquName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属楼宇：</span>
+              <span>{{ louName }}-{{ danyuanName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属家庭：</span>
+              <span>{{ homeName }}</span>
+            </div>
+            <div class="item" :key="field.itemId" v-for="field in fieldSubList">
+              <span class="item-field">{{ field.label }}：</span>
+
+              <span
+                v-if="
+                  field.itemType == 'select' ||
+                  field.itemType == 'radio' ||
+                  field.itemType == 'checkbox' ||
+                  field.itemType == 'cascader'
+                "
+                >{{
+                  info[field.columnName] == null
+                    ? "--"
+                    : getOptionLabel(
+                        field.options,
+                        info[field.columnName],
+                        field.itemType
+                      )
+                }}</span
+              >
+
+              <span v-else>{{
+                info[field.columnName] == null ? "--" : info[field.columnName]
+              }}</span>
+            </div>
+          </div>
+
+          <div class="line"></div>
+        </div>
+
+        <div class="tabs">
+          <div
+            class="tab-btn"
+            @click="subStartGroupIndex"
+            v-if="groupList.length > 9"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-left.png" />
+          </div>
+          <div
+            v-show="index >= startGroupIndex && index < startGroupIndex + 9"
+            class="tab"
+            :class="groupIndex % groupList.length == index ? 'z-on' : ''"
+            :key="'tab' + index"
+            @click="groupIndex = index"
+            v-for="(item, index) in groupList"
+          >
+            {{ item.label }}
+          </div>
+          <div
+            class="tab-btn"
+            @click="addStartGroupIndex"
+            v-if="groupList.length > 9"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-right.png" />
+          </div>
+        </div>
+
+        <div
+          :key="'group' + index"
+          v-show="groupIndex % groupList.length == index"
+          v-for="(group, index) in groupList"
+        >
+          <div v-if="group.tableName == 'ic_resi_demand' && Array.isArray(allInfo.ic_resi_demand) && allInfo.ic_resi_demand.length>0">
+            <div
+              class="list"
+              :key="'ic_resi_demand' + infoIndex"
+              v-for="(infoItem, infoIndex) in allInfo.ic_resi_demand"
+            >
+              <div
+                class="item"
+                :key="field.itemId"
+                v-for="field in group.itemList"
+              >
+                <span class="item-field">{{ field.label }}：</span>
+                <span
+                  v-if="
+                    field.itemType == 'select' ||
+                    field.itemType == 'radio' ||
+                    field.itemType == 'checkbox' ||
+                    field.itemType == 'cascader'
+                  "
+                  >{{
+                    infoItem[field.columnName] == null
+                      ? "--"
+                      : getOptionLabel(
+                          field.options,
+                          infoItem[field.columnName],
+                          field.itemType
+                        )
+                  }}</span
+                >
+
+                <span v-else>{{
+                  infoItem[field.columnName] == null
+                    ? "--"
+                    : infoItem[field.columnName]
+                }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="list" v-else>
+            <div
+              class="item"
+              :key="field.itemId"
+              v-for="field in group.itemList"
+            >
+              <span class="item-field">{{ field.label }}：</span>
+              <span
+                v-if="
+                  field.itemType == 'select' ||
+                  field.itemType == 'radio' ||
+                  field.itemType == 'checkbox' ||
+                  field.itemType == 'cascader'
+                "
+                >{{
+                  !allInfo[group.tableName] ||
+                  allInfo[group.tableName][0][field.columnName] == null
+                    ? "--"
+                    : getOptionLabel(
+                        field.options,
+                        allInfo[group.tableName][0][field.columnName],
+                        field.itemType
+                      )
+                }}</span
+              >
+
+              <span v-else>{{
+                !allInfo[group.tableName] ||
+                allInfo[group.tableName][0][field.columnName] == null
+                  ? "--"
+                  : allInfo[group.tableName][0][field.columnName]
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </cpt-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import cptCard from "@/views/modules/visual/cpts/card";
+import { requestPost } from "@/js/dai/request";
+
+export default {
+  name: "demandInfo",
+  props: {
+    userId: {
+      type: String,
+      default: "",
+    },
+    gridName: {
+      type: String,
+      default: "",
+    },
+  },
+
+  components: {
+    cptCard,
+  },
+
+  data() {
+    return {
+      fieldList: [],
+      groupList: [],
+      groupIndex: 0,
+      startGroupIndex: 0,
+      info: {},
+      allInfo: {},
+
+      xiaoquList: [],
+      louList: [],
+      danyuanList: [],
+      homeList: [],
+    };
+  },
+
+  computed: {
+    xiaoquName() {
+      const {
+        xiaoquList,
+        info: { VILLAGE_ID },
+      } = this;
+      if (Array.isArray(xiaoquList) && xiaoquList.length > 0 && VILLAGE_ID) {
+        let item = xiaoquList.find((item) => item.value == VILLAGE_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+    louName() {
+      const {
+        louList,
+        info: { BUILD_ID },
+      } = this;
+      if (Array.isArray(louList) && louList.length > 0 && BUILD_ID) {
+        let item = louList.find((item) => item.value == BUILD_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+    danyuanName() {
+      const {
+        danyuanList,
+        info: { UNIT_ID },
+      } = this;
+      if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) {
+        let item = danyuanList.find((item) => item.value == UNIT_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+    danyuanName() {
+      const {
+        danyuanList,
+        info: { UNIT_ID },
+      } = this;
+      if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) {
+        let item = danyuanList.find((item) => item.value == UNIT_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+    homeName() {
+      const {
+        homeList,
+        info: { HOME_ID },
+      } = this;
+      if (Array.isArray(homeList) && homeList.length > 0 && HOME_ID) {
+        let item = homeList.find((item) => item.value == HOME_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+  },
+
+  watch: {
+    userId() {
+      this.getApiData();
+    },
+  },
+
+  mounted() {
+    this.getApiData();
+  },
+
+  methods: {
+    addStartGroupIndex() {
+      const { startGroupIndex, groupList } = this;
+      if (startGroupIndex < groupList.length - 9) {
+        this.startGroupIndex = startGroupIndex + 1;
+      } else {
+        this.startGroupIndex = groupList.length - 9;
+      }
+    },
+    subStartGroupIndex() {
+      const { startGroupIndex, groupList } = this;
+      if (startGroupIndex > 0) {
+        this.startGroupIndex = startGroupIndex - 1;
+      } else {
+        this.startGroupIndex = 0;
+      }
+    },
+    handleClose() {
+      this.$emit("close");
+    },
+
+    async getApiData() {
+      await this.getField();
+      await this.getInfo();
+      this.getXiaoquList();
+      this.getLouList();
+      this.getDanyuanList();
+      this.getHomeList();
+    },
+
+    getOptionLabel(options, value, type = "") {
+      if (Array.isArray(options)) {
+        let valueArr = value.split(",");
+        if (type == "cascader") {
+          if (valueArr.length > 0) {
+            let level1 = options.find((item) => item.value == valueArr[0]);
+            if (level1) {
+              if (valueArr.length > 1 && level1.children) {
+                let level2 = level1.children.find(
+                  (item) => item.value == valueArr[1]
+                );
+                if (level2) {
+                  return level1.label + "-" + level2.label;
+                }
+              }
+              return level1.label;
+            }
+          }
+        } else {
+          return valueArr
+            .map((val) => {
+              let item = options.find((item) => item.value == val);
+              if (item && item.label) {
+                return item.label;
+              }
+              return "--";
+            })
+            .join("、");
+        }
+      }
+      return "--";
+    },
+
+    //加载组织数据
+    async getField() {
+      const url = "/oper/customize/icform/getcustomerform";
+
+      const { data, code, msg } = await requestPost(url, {
+        dynamic: true,
+        formCode: "resi_base_info",
+      });
+
+      if (code === 0) {
+        this.groupList = data.groupList;
+        this.fieldList = (function (arr) {
+          let col = [];
+          let ele = [];
+          for (let i = 0; i < arr.length; i++) {
+            let item = arr[i];
+            if (item.itemType == "divider" || i == arr.length - 1) {
+              col.push([...ele]);
+              ele = [];
+            } else {
+              ele.push(item);
+            }
+          }
+          return col;
+        })(data.itemList);
+
+        this.fieldList.forEach((subList, index) => {
+          subList.forEach(async (item, subIndex) => {
+            if (item.optionSourceType == "remote" && item.optionSourceValue) {
+              this.fieldList[index][subIndex].options = await this.getOptions(
+                item.optionSourceValue
+              );
+            }
+          });
+        });
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载组织数据
+    async getInfo() {
+      const url = "/epmetuser/icresiuser/detail";
+
+      const { data, code, msg } = await requestPost(url, {
+        icResiUserId: this.userId,
+        formCode: "resi_base_info",
+      });
+
+      if (code === 0) {
+        this.info = data.ic_resi_user[0];
+        this.allInfo = data;
+
+        this.fieldList.forEach((subList, index) => {
+          subList.forEach((item, subIndex) => {
+            if (
+              item.itemType == "radio" &&
+              item.childGroup &&
+              this.allInfo[item.tableName] &&
+              this.allInfo[item.tableName][0][item.columnName] == "1"
+            ) {
+              this.groupList = [...this.groupList, item.childGroup];
+            }
+          });
+        });
+        console.log("1111111111111111111111111", this.groupList);
+
+        this.groupList.forEach((subList, index) => {
+          subList.itemList.forEach(async (item, subIndex) => {
+            if (item.optionSourceType == "remote" && item.optionSourceValue) {
+              this.groupList[index].itemList[subIndex].options =
+                await this.getOptions(item.optionSourceValue);
+            }
+          });
+        });
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载组织数据
+    async getOptions(url) {
+      if (!url) return [];
+
+      const { data, code, msg } = await requestPost(url, {});
+
+      if (code === 0) {
+        return data;
+      } else {
+        return [];
+      }
+    },
+
+    async getXiaoquList() {
+      const url = "/gov/org/icneighborhood/neighborhoodoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        agencyId: this.info.AGENCY_ID,
+        gridId: this.info.GRID_ID,
+      });
+
+      if (code === 0) {
+        this.xiaoquList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getLouList() {
+      const url = "/gov/org/icbuilding/buildingoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        neighborHoodId: this.info.VILLAGE_ID,
+      });
+
+      if (code === 0) {
+        this.louList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getDanyuanList() {
+      const url = "/gov/org/icbuildingunit/unitoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        buildingId: this.info.BUILD_ID,
+      });
+
+      if (code === 0) {
+        this.danyuanList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getHomeList() {
+      const url = "/gov/org/ichouse/houseoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        unitId: this.info.UNIT_ID,
+      });
+
+      if (code === 0) {
+        this.homeList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>
diff --git a/src/views/modules/visual/basicinfo/cpts/incident-info.vue b/src/views/modules/visual/basicinfo/cpts/incident-info.vue
new file mode 100644
index 00000000..31ed33e1
--- /dev/null
+++ b/src/views/modules/visual/basicinfo/cpts/incident-info.vue
@@ -0,0 +1,503 @@
+<template>
+  <div class="m-pop">
+    <div class="wrap">
+      <cpt-card>
+        <div class="title">
+          <img src="@/assets/img/shuju/title-tip.png" />
+          <span>更多信息</span>
+        </div>
+
+        <div class="btn-close" @click="handleClose">
+          <img src="@/assets/img/shuju/people/close.png" />
+        </div>
+
+        <div
+          :key="'fieldSubList' + index"
+          v-for="(fieldSubList, index) in fieldList"
+        >
+          <div class="list">
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属网格：</span>
+              <span>{{ gridName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属小区：</span>
+              <span>{{ xiaoquName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属楼宇：</span>
+              <span>{{ louName }}-{{ danyuanName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属家庭：</span>
+              <span>{{ homeName }}</span>
+            </div>
+            <div class="item" :key="field.itemId" v-for="field in fieldSubList">
+              <span class="item-field">{{ field.label }}：</span>
+
+              <span
+                v-if="
+                  field.itemType == 'select' ||
+                  field.itemType == 'radio' ||
+                  field.itemType == 'checkbox' ||
+                  field.itemType == 'cascader'
+                "
+                >{{
+                  info[field.columnName] == null
+                    ? "--"
+                    : getOptionLabel(
+                        field.options,
+                        info[field.columnName],
+                        field.itemType
+                      )
+                }}</span
+              >
+
+              <span v-else>{{
+                info[field.columnName] == null ? "--" : info[field.columnName]
+              }}</span>
+            </div>
+          </div>
+
+          <div class="line"></div>
+        </div>
+
+        <div class="tabs">
+          <div
+            class="tab-btn"
+            @click="subStartGroupIndex"
+            v-if="groupList.length > 9"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-left.png" />
+          </div>
+          <div
+            v-show="index >= startGroupIndex && index < startGroupIndex + 9"
+            class="tab"
+            :class="groupIndex % groupList.length == index ? 'z-on' : ''"
+            :key="'tab' + index"
+            @click="groupIndex = index"
+            v-for="(item, index) in groupList"
+          >
+            {{ item.label }}
+          </div>
+          <div
+            class="tab-btn"
+            @click="addStartGroupIndex"
+            v-if="groupList.length > 9"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-right.png" />
+          </div>
+        </div>
+
+        <div
+          :key="'group' + index"
+          v-show="groupIndex % groupList.length == index"
+          v-for="(group, index) in groupList"
+        >
+          <div v-if="group.tableName == 'ic_resi_demand' && Array.isArray(allInfo.ic_resi_demand) && allInfo.ic_resi_demand.length>0">
+            <div
+              class="list"
+              :key="'ic_resi_demand' + infoIndex"
+              v-for="(infoItem, infoIndex) in allInfo.ic_resi_demand"
+            >
+              <div
+                class="item"
+                :key="field.itemId"
+                v-for="field in group.itemList"
+              >
+                <span class="item-field">{{ field.label }}：</span>
+                <span
+                  v-if="
+                    field.itemType == 'select' ||
+                    field.itemType == 'radio' ||
+                    field.itemType == 'checkbox' ||
+                    field.itemType == 'cascader'
+                  "
+                  >{{
+                    infoItem[field.columnName] == null
+                      ? "--"
+                      : getOptionLabel(
+                          field.options,
+                          infoItem[field.columnName],
+                          field.itemType
+                        )
+                  }}</span
+                >
+
+                <span v-else>{{
+                  infoItem[field.columnName] == null
+                    ? "--"
+                    : infoItem[field.columnName]
+                }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="list" v-else>
+            <div
+              class="item"
+              :key="field.itemId"
+              v-for="field in group.itemList"
+            >
+              <span class="item-field">{{ field.label }}：</span>
+              <span
+                v-if="
+                  field.itemType == 'select' ||
+                  field.itemType == 'radio' ||
+                  field.itemType == 'checkbox' ||
+                  field.itemType == 'cascader'
+                "
+                >{{
+                  !allInfo[group.tableName] ||
+                  allInfo[group.tableName][0][field.columnName] == null
+                    ? "--"
+                    : getOptionLabel(
+                        field.options,
+                        allInfo[group.tableName][0][field.columnName],
+                        field.itemType
+                      )
+                }}</span
+              >
+
+              <span v-else>{{
+                !allInfo[group.tableName] ||
+                allInfo[group.tableName][0][field.columnName] == null
+                  ? "--"
+                  : allInfo[group.tableName][0][field.columnName]
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </cpt-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import cptCard from "@/views/modules/visual/cpts/card";
+import { requestPost } from "@/js/dai/request";
+
+export default {
+  name: "demandInfo",
+  props: {
+    userId: {
+      type: String,
+      default: "",
+    },
+    gridName: {
+      type: String,
+      default: "",
+    },
+  },
+
+  components: {
+    cptCard,
+  },
+
+  data() {
+    return {
+      fieldList: [],
+      groupList: [],
+      groupIndex: 0,
+      startGroupIndex: 0,
+      info: {},
+      allInfo: {},
+
+      xiaoquList: [],
+      louList: [],
+      danyuanList: [],
+      homeList: [],
+    };
+  },
+
+  computed: {
+    xiaoquName() {
+      const {
+        xiaoquList,
+        info: { VILLAGE_ID },
+      } = this;
+      if (Array.isArray(xiaoquList) && xiaoquList.length > 0 && VILLAGE_ID) {
+        let item = xiaoquList.find((item) => item.value == VILLAGE_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+    louName() {
+      const {
+        louList,
+        info: { BUILD_ID },
+      } = this;
+      if (Array.isArray(louList) && louList.length > 0 && BUILD_ID) {
+        let item = louList.find((item) => item.value == BUILD_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+    danyuanName() {
+      const {
+        danyuanList,
+        info: { UNIT_ID },
+      } = this;
+      if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) {
+        let item = danyuanList.find((item) => item.value == UNIT_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+    danyuanName() {
+      const {
+        danyuanList,
+        info: { UNIT_ID },
+      } = this;
+      if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) {
+        let item = danyuanList.find((item) => item.value == UNIT_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+    homeName() {
+      const {
+        homeList,
+        info: { HOME_ID },
+      } = this;
+      if (Array.isArray(homeList) && homeList.length > 0 && HOME_ID) {
+        let item = homeList.find((item) => item.value == HOME_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+  },
+
+  watch: {
+    userId() {
+      this.getApiData();
+    },
+  },
+
+  mounted() {
+    this.getApiData();
+  },
+
+  methods: {
+    addStartGroupIndex() {
+      const { startGroupIndex, groupList } = this;
+      if (startGroupIndex < groupList.length - 9) {
+        this.startGroupIndex = startGroupIndex + 1;
+      } else {
+        this.startGroupIndex = groupList.length - 9;
+      }
+    },
+    subStartGroupIndex() {
+      const { startGroupIndex, groupList } = this;
+      if (startGroupIndex > 0) {
+        this.startGroupIndex = startGroupIndex - 1;
+      } else {
+        this.startGroupIndex = 0;
+      }
+    },
+    handleClose() {
+      this.$emit("close");
+    },
+
+    async getApiData() {
+      await this.getField();
+      await this.getInfo();
+      this.getXiaoquList();
+      this.getLouList();
+      this.getDanyuanList();
+      this.getHomeList();
+    },
+
+    getOptionLabel(options, value, type = "") {
+      if (Array.isArray(options)) {
+        let valueArr = value.split(",");
+        if (type == "cascader") {
+          if (valueArr.length > 0) {
+            let level1 = options.find((item) => item.value == valueArr[0]);
+            if (level1) {
+              if (valueArr.length > 1 && level1.children) {
+                let level2 = level1.children.find(
+                  (item) => item.value == valueArr[1]
+                );
+                if (level2) {
+                  return level1.label + "-" + level2.label;
+                }
+              }
+              return level1.label;
+            }
+          }
+        } else {
+          return valueArr
+            .map((val) => {
+              let item = options.find((item) => item.value == val);
+              if (item && item.label) {
+                return item.label;
+              }
+              return "--";
+            })
+            .join("、");
+        }
+      }
+      return "--";
+    },
+
+    //加载组织数据
+    async getField() {
+      const url = "/oper/customize/icform/getcustomerform";
+
+      const { data, code, msg } = await requestPost(url, {
+        dynamic: true,
+        formCode: "resi_base_info",
+      });
+
+      if (code === 0) {
+        this.groupList = data.groupList;
+        this.fieldList = (function (arr) {
+          let col = [];
+          let ele = [];
+          for (let i = 0; i < arr.length; i++) {
+            let item = arr[i];
+            if (item.itemType == "divider" || i == arr.length - 1) {
+              col.push([...ele]);
+              ele = [];
+            } else {
+              ele.push(item);
+            }
+          }
+          return col;
+        })(data.itemList);
+
+        this.fieldList.forEach((subList, index) => {
+          subList.forEach(async (item, subIndex) => {
+            if (item.optionSourceType == "remote" && item.optionSourceValue) {
+              this.fieldList[index][subIndex].options = await this.getOptions(
+                item.optionSourceValue
+              );
+            }
+          });
+        });
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载组织数据
+    async getInfo() {
+      const url = "/epmetuser/icresiuser/detail";
+
+      const { data, code, msg } = await requestPost(url, {
+        icResiUserId: this.userId,
+        formCode: "resi_base_info",
+      });
+
+      if (code === 0) {
+        this.info = data.ic_resi_user[0];
+        this.allInfo = data;
+
+        this.fieldList.forEach((subList, index) => {
+          subList.forEach((item, subIndex) => {
+            if (
+              item.itemType == "radio" &&
+              item.childGroup &&
+              this.allInfo[item.tableName] &&
+              this.allInfo[item.tableName][0][item.columnName] == "1"
+            ) {
+              this.groupList = [...this.groupList, item.childGroup];
+            }
+          });
+        });
+        console.log("1111111111111111111111111", this.groupList);
+
+        this.groupList.forEach((subList, index) => {
+          subList.itemList.forEach(async (item, subIndex) => {
+            if (item.optionSourceType == "remote" && item.optionSourceValue) {
+              this.groupList[index].itemList[subIndex].options =
+                await this.getOptions(item.optionSourceValue);
+            }
+          });
+        });
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载组织数据
+    async getOptions(url) {
+      if (!url) return [];
+
+      const { data, code, msg } = await requestPost(url, {});
+
+      if (code === 0) {
+        return data;
+      } else {
+        return [];
+      }
+    },
+
+    async getXiaoquList() {
+      const url = "/gov/org/icneighborhood/neighborhoodoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        agencyId: this.info.AGENCY_ID,
+        gridId: this.info.GRID_ID,
+      });
+
+      if (code === 0) {
+        this.xiaoquList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getLouList() {
+      const url = "/gov/org/icbuilding/buildingoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        neighborHoodId: this.info.VILLAGE_ID,
+      });
+
+      if (code === 0) {
+        this.louList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getDanyuanList() {
+      const url = "/gov/org/icbuildingunit/unitoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        buildingId: this.info.BUILD_ID,
+      });
+
+      if (code === 0) {
+        this.danyuanList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getHomeList() {
+      const url = "/gov/org/ichouse/houseoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        unitId: this.info.UNIT_ID,
+      });
+
+      if (code === 0) {
+        this.homeList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>
diff --git a/src/views/modules/visual/basicinfo/cpts/people-more.vue b/src/views/modules/visual/basicinfo/cpts/people-more.vue
index a634aade..6198cc91 100644
--- a/src/views/modules/visual/basicinfo/cpts/people-more.vue
+++ b/src/views/modules/visual/basicinfo/cpts/people-more.vue
@@ -500,4 +500,4 @@ export default {
 };
 </script>
 
-<style lang="scss" src="@/assets/scss/people.scss" scoped></style>
+<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>
diff --git a/src/views/modules/visual/basicinfo/cpts/topic-info.vue b/src/views/modules/visual/basicinfo/cpts/topic-info.vue
new file mode 100644
index 00000000..31ed33e1
--- /dev/null
+++ b/src/views/modules/visual/basicinfo/cpts/topic-info.vue
@@ -0,0 +1,503 @@
+<template>
+  <div class="m-pop">
+    <div class="wrap">
+      <cpt-card>
+        <div class="title">
+          <img src="@/assets/img/shuju/title-tip.png" />
+          <span>更多信息</span>
+        </div>
+
+        <div class="btn-close" @click="handleClose">
+          <img src="@/assets/img/shuju/people/close.png" />
+        </div>
+
+        <div
+          :key="'fieldSubList' + index"
+          v-for="(fieldSubList, index) in fieldList"
+        >
+          <div class="list">
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属网格：</span>
+              <span>{{ gridName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属小区：</span>
+              <span>{{ xiaoquName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属楼宇：</span>
+              <span>{{ louName }}-{{ danyuanName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属家庭：</span>
+              <span>{{ homeName }}</span>
+            </div>
+            <div class="item" :key="field.itemId" v-for="field in fieldSubList">
+              <span class="item-field">{{ field.label }}：</span>
+
+              <span
+                v-if="
+                  field.itemType == 'select' ||
+                  field.itemType == 'radio' ||
+                  field.itemType == 'checkbox' ||
+                  field.itemType == 'cascader'
+                "
+                >{{
+                  info[field.columnName] == null
+                    ? "--"
+                    : getOptionLabel(
+                        field.options,
+                        info[field.columnName],
+                        field.itemType
+                      )
+                }}</span
+              >
+
+              <span v-else>{{
+                info[field.columnName] == null ? "--" : info[field.columnName]
+              }}</span>
+            </div>
+          </div>
+
+          <div class="line"></div>
+        </div>
+
+        <div class="tabs">
+          <div
+            class="tab-btn"
+            @click="subStartGroupIndex"
+            v-if="groupList.length > 9"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-left.png" />
+          </div>
+          <div
+            v-show="index >= startGroupIndex && index < startGroupIndex + 9"
+            class="tab"
+            :class="groupIndex % groupList.length == index ? 'z-on' : ''"
+            :key="'tab' + index"
+            @click="groupIndex = index"
+            v-for="(item, index) in groupList"
+          >
+            {{ item.label }}
+          </div>
+          <div
+            class="tab-btn"
+            @click="addStartGroupIndex"
+            v-if="groupList.length > 9"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-right.png" />
+          </div>
+        </div>
+
+        <div
+          :key="'group' + index"
+          v-show="groupIndex % groupList.length == index"
+          v-for="(group, index) in groupList"
+        >
+          <div v-if="group.tableName == 'ic_resi_demand' && Array.isArray(allInfo.ic_resi_demand) && allInfo.ic_resi_demand.length>0">
+            <div
+              class="list"
+              :key="'ic_resi_demand' + infoIndex"
+              v-for="(infoItem, infoIndex) in allInfo.ic_resi_demand"
+            >
+              <div
+                class="item"
+                :key="field.itemId"
+                v-for="field in group.itemList"
+              >
+                <span class="item-field">{{ field.label }}：</span>
+                <span
+                  v-if="
+                    field.itemType == 'select' ||
+                    field.itemType == 'radio' ||
+                    field.itemType == 'checkbox' ||
+                    field.itemType == 'cascader'
+                  "
+                  >{{
+                    infoItem[field.columnName] == null
+                      ? "--"
+                      : getOptionLabel(
+                          field.options,
+                          infoItem[field.columnName],
+                          field.itemType
+                        )
+                  }}</span
+                >
+
+                <span v-else>{{
+                  infoItem[field.columnName] == null
+                    ? "--"
+                    : infoItem[field.columnName]
+                }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="list" v-else>
+            <div
+              class="item"
+              :key="field.itemId"
+              v-for="field in group.itemList"
+            >
+              <span class="item-field">{{ field.label }}：</span>
+              <span
+                v-if="
+                  field.itemType == 'select' ||
+                  field.itemType == 'radio' ||
+                  field.itemType == 'checkbox' ||
+                  field.itemType == 'cascader'
+                "
+                >{{
+                  !allInfo[group.tableName] ||
+                  allInfo[group.tableName][0][field.columnName] == null
+                    ? "--"
+                    : getOptionLabel(
+                        field.options,
+                        allInfo[group.tableName][0][field.columnName],
+                        field.itemType
+                      )
+                }}</span
+              >
+
+              <span v-else>{{
+                !allInfo[group.tableName] ||
+                allInfo[group.tableName][0][field.columnName] == null
+                  ? "--"
+                  : allInfo[group.tableName][0][field.columnName]
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </cpt-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import cptCard from "@/views/modules/visual/cpts/card";
+import { requestPost } from "@/js/dai/request";
+
+export default {
+  name: "demandInfo",
+  props: {
+    userId: {
+      type: String,
+      default: "",
+    },
+    gridName: {
+      type: String,
+      default: "",
+    },
+  },
+
+  components: {
+    cptCard,
+  },
+
+  data() {
+    return {
+      fieldList: [],
+      groupList: [],
+      groupIndex: 0,
+      startGroupIndex: 0,
+      info: {},
+      allInfo: {},
+
+      xiaoquList: [],
+      louList: [],
+      danyuanList: [],
+      homeList: [],
+    };
+  },
+
+  computed: {
+    xiaoquName() {
+      const {
+        xiaoquList,
+        info: { VILLAGE_ID },
+      } = this;
+      if (Array.isArray(xiaoquList) && xiaoquList.length > 0 && VILLAGE_ID) {
+        let item = xiaoquList.find((item) => item.value == VILLAGE_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+    louName() {
+      const {
+        louList,
+        info: { BUILD_ID },
+      } = this;
+      if (Array.isArray(louList) && louList.length > 0 && BUILD_ID) {
+        let item = louList.find((item) => item.value == BUILD_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+    danyuanName() {
+      const {
+        danyuanList,
+        info: { UNIT_ID },
+      } = this;
+      if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) {
+        let item = danyuanList.find((item) => item.value == UNIT_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+    danyuanName() {
+      const {
+        danyuanList,
+        info: { UNIT_ID },
+      } = this;
+      if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) {
+        let item = danyuanList.find((item) => item.value == UNIT_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+    homeName() {
+      const {
+        homeList,
+        info: { HOME_ID },
+      } = this;
+      if (Array.isArray(homeList) && homeList.length > 0 && HOME_ID) {
+        let item = homeList.find((item) => item.value == HOME_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+  },
+
+  watch: {
+    userId() {
+      this.getApiData();
+    },
+  },
+
+  mounted() {
+    this.getApiData();
+  },
+
+  methods: {
+    addStartGroupIndex() {
+      const { startGroupIndex, groupList } = this;
+      if (startGroupIndex < groupList.length - 9) {
+        this.startGroupIndex = startGroupIndex + 1;
+      } else {
+        this.startGroupIndex = groupList.length - 9;
+      }
+    },
+    subStartGroupIndex() {
+      const { startGroupIndex, groupList } = this;
+      if (startGroupIndex > 0) {
+        this.startGroupIndex = startGroupIndex - 1;
+      } else {
+        this.startGroupIndex = 0;
+      }
+    },
+    handleClose() {
+      this.$emit("close");
+    },
+
+    async getApiData() {
+      await this.getField();
+      await this.getInfo();
+      this.getXiaoquList();
+      this.getLouList();
+      this.getDanyuanList();
+      this.getHomeList();
+    },
+
+    getOptionLabel(options, value, type = "") {
+      if (Array.isArray(options)) {
+        let valueArr = value.split(",");
+        if (type == "cascader") {
+          if (valueArr.length > 0) {
+            let level1 = options.find((item) => item.value == valueArr[0]);
+            if (level1) {
+              if (valueArr.length > 1 && level1.children) {
+                let level2 = level1.children.find(
+                  (item) => item.value == valueArr[1]
+                );
+                if (level2) {
+                  return level1.label + "-" + level2.label;
+                }
+              }
+              return level1.label;
+            }
+          }
+        } else {
+          return valueArr
+            .map((val) => {
+              let item = options.find((item) => item.value == val);
+              if (item && item.label) {
+                return item.label;
+              }
+              return "--";
+            })
+            .join("、");
+        }
+      }
+      return "--";
+    },
+
+    //加载组织数据
+    async getField() {
+      const url = "/oper/customize/icform/getcustomerform";
+
+      const { data, code, msg } = await requestPost(url, {
+        dynamic: true,
+        formCode: "resi_base_info",
+      });
+
+      if (code === 0) {
+        this.groupList = data.groupList;
+        this.fieldList = (function (arr) {
+          let col = [];
+          let ele = [];
+          for (let i = 0; i < arr.length; i++) {
+            let item = arr[i];
+            if (item.itemType == "divider" || i == arr.length - 1) {
+              col.push([...ele]);
+              ele = [];
+            } else {
+              ele.push(item);
+            }
+          }
+          return col;
+        })(data.itemList);
+
+        this.fieldList.forEach((subList, index) => {
+          subList.forEach(async (item, subIndex) => {
+            if (item.optionSourceType == "remote" && item.optionSourceValue) {
+              this.fieldList[index][subIndex].options = await this.getOptions(
+                item.optionSourceValue
+              );
+            }
+          });
+        });
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载组织数据
+    async getInfo() {
+      const url = "/epmetuser/icresiuser/detail";
+
+      const { data, code, msg } = await requestPost(url, {
+        icResiUserId: this.userId,
+        formCode: "resi_base_info",
+      });
+
+      if (code === 0) {
+        this.info = data.ic_resi_user[0];
+        this.allInfo = data;
+
+        this.fieldList.forEach((subList, index) => {
+          subList.forEach((item, subIndex) => {
+            if (
+              item.itemType == "radio" &&
+              item.childGroup &&
+              this.allInfo[item.tableName] &&
+              this.allInfo[item.tableName][0][item.columnName] == "1"
+            ) {
+              this.groupList = [...this.groupList, item.childGroup];
+            }
+          });
+        });
+        console.log("1111111111111111111111111", this.groupList);
+
+        this.groupList.forEach((subList, index) => {
+          subList.itemList.forEach(async (item, subIndex) => {
+            if (item.optionSourceType == "remote" && item.optionSourceValue) {
+              this.groupList[index].itemList[subIndex].options =
+                await this.getOptions(item.optionSourceValue);
+            }
+          });
+        });
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载组织数据
+    async getOptions(url) {
+      if (!url) return [];
+
+      const { data, code, msg } = await requestPost(url, {});
+
+      if (code === 0) {
+        return data;
+      } else {
+        return [];
+      }
+    },
+
+    async getXiaoquList() {
+      const url = "/gov/org/icneighborhood/neighborhoodoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        agencyId: this.info.AGENCY_ID,
+        gridId: this.info.GRID_ID,
+      });
+
+      if (code === 0) {
+        this.xiaoquList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getLouList() {
+      const url = "/gov/org/icbuilding/buildingoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        neighborHoodId: this.info.VILLAGE_ID,
+      });
+
+      if (code === 0) {
+        this.louList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getDanyuanList() {
+      const url = "/gov/org/icbuildingunit/unitoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        buildingId: this.info.BUILD_ID,
+      });
+
+      if (code === 0) {
+        this.danyuanList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getHomeList() {
+      const url = "/gov/org/ichouse/houseoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        unitId: this.info.UNIT_ID,
+      });
+
+      if (code === 0) {
+        this.homeList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>
diff --git a/src/views/modules/visual/basicinfo/people.vue b/src/views/modules/visual/basicinfo/people.vue
index a75bebad..4335105f 100644
--- a/src/views/modules/visual/basicinfo/people.vue
+++ b/src/views/modules/visual/basicinfo/people.vue
@@ -133,7 +133,7 @@
 
             <div
               class="rel z-zuo-2"
-              @click="userId = houseInfo.userList[0].userId"
+              @click="toUserInfo(houseInfo.userList[0].userId)"
               v-if="houseInfo.userList[0]"
             >
               <img
@@ -159,7 +159,7 @@
 
             <div
               class="rel z-you-2"
-              @click="userId = houseInfo.userList[1].userId"
+              @click="toUserInfo(houseInfo.userList[1].userId)"
               v-if="houseInfo.userList[1]"
             >
               <img
@@ -185,7 +185,7 @@
 
             <div
               class="rel z-zuo-1"
-              @click="userId = houseInfo.userList[2].userId"
+              @click="toUserInfo(houseInfo.userList[2].userId)"
               v-if="houseInfo.userList[2]"
             >
               <img
@@ -211,7 +211,7 @@
 
             <div
               class="rel z-you-1"
-              @click="userId = houseInfo.userList[3].userId"
+              @click="toUserInfo(houseInfo.userList[3].userId)"
               v-if="houseInfo.userList[3]"
             >
               <img
@@ -237,7 +237,7 @@
 
             <div
               class="rel z-zuo-3"
-              @click="userId = houseInfo.userList[4].userId"
+              @click="toUserInfo(houseInfo.userList[4].userId)"
               v-if="houseInfo.userList[4]"
             >
               <img
@@ -263,7 +263,7 @@
 
             <div
               class="rel z-you-3"
-              @click="userId = houseInfo.userList[5].userId"
+              @click="toUserInfo(houseInfo.userList[5].userId)"
               v-if="houseInfo.userList[5]"
             >
               <img
@@ -290,7 +290,178 @@
         </cpt-card>
       </div>
     </div>
-    <div class="g-r"></div>
+    <div class="g-r">
+      <div class="m-tb">
+        <cpt-card>
+          <div class="title">
+            <img src="@/assets/img/shuju/title-tip.png" />
+            <span>居民需求</span>
+          </div>
+
+          <div class="tb">
+            <cpt-tb
+              :col-list="demand.colList"
+              :loading="demand.loading"
+              :header="demand.header"
+              :list="demand.list"
+              @operate="handleOperateDemandList"
+            ></cpt-tb>
+
+            <div class="m-pagination" v-if="demand.total > demand.pageSize">
+              <el-pagination
+                :current-page="demand.pageNo"
+                :page-size="demand.pageSize"
+                :total="demand.total"
+                background
+                layout="prev, pager, next"
+                @current-change="handlePageNoChangeDemand"
+              >
+              </el-pagination>
+            </div>
+          </div>
+        </cpt-card>
+      </div>
+
+      <div class="m-row">
+        <div class="m-list">
+          <cpt-card>
+            <div class="title">
+              <img src="@/assets/img/shuju/title-tip.png" />
+              <a
+                :class="{ 'z-on': showedIncidentOrTopic == 'incident' }"
+                @click="showedIncidentOrTopic = 'incident'"
+                >上报事件</a
+              >
+              <a
+                :class="{ 'z-on': showedIncidentOrTopic == 'topic' }"
+                @click="showedIncidentOrTopic = 'topic'"
+                >发布话题</a
+              >
+            </div>
+            <div class="list-wrap" v-show="showedIncidentOrTopic == 'incident'">
+              <div class="list">
+                <div
+                  class="item"
+                  :key="'incident' + index"
+                  v-for="(item, index) in incident.list"
+                  @click="handleClickIncident(index)"
+                >
+                  <div class="item-title">{{ item.eventContent }}</div>
+                  <div class="item-date">{{ item.reportTime }}</div>
+                </div>
+              </div>
+
+              <div
+                class="m-pagination"
+                v-if="incident.total > incident.pageSize"
+              >
+                <el-pagination
+                  :current-page="incident.pageNo"
+                  :page-size="incident.pageSize"
+                  :total="incident.total"
+                  background
+                  layout="prev, pager, next"
+                  @current-change="handlePageNoChangeIncident"
+                >
+                </el-pagination>
+              </div>
+            </div>
+
+            <div class="list-wrap" v-show="showedIncidentOrTopic == 'topic'">
+              <div class="list">
+                <div
+                  class="item"
+                  :key="'topic' + index"
+                  v-for="(item, index) in topic.list"
+                  @click="handleClickTopic(index)"
+                >
+                  <div class="item-title">{{ item.eventContent }}</div>
+                  <div class="item-date">{{ item.reportTime }}</div>
+                </div>
+              </div>
+
+              <div class="m-pagination" v-if="topic.total > topic.pageSize">
+                <el-pagination
+                  :current-page="topic.pageNo"
+                  :page-size="topic.pageSize"
+                  :total="topic.total"
+                  background
+                  layout="prev, pager, next"
+                  @current-change="handlePageNoChangeTopic"
+                >
+                </el-pagination>
+              </div>
+            </div>
+          </cpt-card>
+        </div>
+
+        <div class="m-list">
+          <cpt-card>
+            <div class="title">
+              <img src="@/assets/img/shuju/title-tip.png" />
+              <span>积分记录</span>
+            </div>
+
+            <div class="list-wrap">
+              <div class="list">
+                <div
+                  class="item"
+                  :key="'point' + index"
+                  v-for="(item, index) in point.list"
+                  @click="handleClickPoint(index)"
+                >
+                  <div class="item-row">
+                    <div class="item-l">
+                      <div class="item-point">{{ item.point }}</div>
+                    </div>
+                    <div class="item-r">
+                      <div class="item-title">{{ item.title }}</div>
+                      <div class="item-date">{{ item.dateTime }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="m-pagination" v-if="point.total > point.pageSize">
+                <el-pagination
+                  :current-page="point.pageNo"
+                  :page-size="point.pageSize"
+                  :total="point.total"
+                  background
+                  layout="prev, pager, next"
+                  @current-change="handlePageNoChangePoint"
+                >
+                </el-pagination>
+              </div>
+            </div>
+          </cpt-card>
+        </div>
+      </div>
+    </div>
+
+    <demand-info
+      v-show="showedDemandInfo"
+      v-if="userId"
+      :userId="userId"
+      :gridName="info.gridName"
+      @close="showedDemandInfo = false"
+    />
+
+    <incident-info
+      v-show="incident.showedInfo"
+      v-if="userId"
+      :userId="userId"
+      :gridName="info.gridName"
+      @close="incident.showedInfo = false"
+    />
+
+    <topic-info
+      v-show="topic.showedInfo"
+      v-if="userId"
+      :userId="userId"
+      :gridName="info.gridName"
+      @close="topic.showedInfo = false"
+    />
   </div>
 </template>
 
@@ -299,16 +470,22 @@ import { Loading } from "element-ui"; //引入Loading服务
 import { requestPost } from "@/js/dai/request";
 import cptCard from "@/views/modules/visual/cpts/card";
 import peopleMore from "@/views/modules/visual/basicinfo/cpts/people-more";
+import demandInfo from "@/views/modules/visual/basicinfo/cpts/demand-info";
+import incidentInfo from "@/views/modules/visual/basicinfo/cpts/incident-info";
+import topicInfo from "@/views/modules/visual/basicinfo/cpts/topic-info";
+import cptTb from "@/views/modules/visual/cpts/tb";
 
 export default {
   name: "HomeMap",
   data() {
     return {
       showedMoreInfo: false,
+      showedDemandInfo: false,
 
       userId: "",
 
       info: {
+        epmetUserId: "",
         financialSituation: { monthlyIncome: "", retirementAmount: "" },
         gridName: "",
         houseInfo: [],
@@ -329,6 +506,75 @@ export default {
           // },
         ],
       },
+
+      demand: {
+        loading: true,
+        colList: [
+          {
+            align: "center",
+            width: "10%",
+          },
+          {
+            align: "center",
+            width: "15%",
+          },
+          {
+            align: "center",
+            width: "15%",
+          },
+          {
+            align: "center",
+            width: "40%",
+          },
+          {
+            align: "center",
+            width: "10%",
+          },
+          {
+            align: "center",
+            width: "10%",
+          },
+        ],
+        header: ["序号", "服务时间", "需求类型", "需求内容", "状态", "操作"],
+        list: [],
+        srcList: [],
+        currentIndex: 0,
+        pageSize: 5,
+        pageNo: 1,
+        total: 0,
+      },
+
+      showedIncidentOrTopic: "incident",
+
+      incident: {
+        loading: false,
+        list: [],
+        pageSize: 10,
+        pageNo: 1,
+        total: 0,
+        showedInfo: false,
+        currentIndex: 0,
+      },
+
+      topic: {
+        loading: false,
+        list: [],
+        pageSize: 10,
+        pageNo: 1,
+        total: 0,
+        showedInfo: false,
+        currentIndex: 0,
+      },
+
+      point: {
+        loading: false,
+        list: [],
+        pageSize: 10,
+        pageNo: 1,
+        total: 0,
+        showedInfo: false,
+        currentIndex: 0,
+      },
     };
   },
 
@@ -345,6 +591,10 @@ export default {
   components: {
     cptCard,
     peopleMore,
+    cptTb,
+    demandInfo,
+    incidentInfo,
+    topicInfo
   },
 
   watch: {
@@ -365,9 +615,17 @@ export default {
   methods: {
     handleSearch() {},
 
-    getApiData() {
-      this.getInfo();
+    async getApiData() {
+      await this.getInfo();
       this.getHouseInfo();
+      this.getDemandData();
+      this.getIncidentData();
+      this.getTopicData();
+      this.getPointData();
+    },
+
+    toUserInfo(uid) {
+      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
     },
 
     //加载组织数据
@@ -401,8 +659,151 @@ export default {
         this.$message.error(msg);
       }
     },
+
+    handlePageNoChangeDemand(val) {
+      this.demand.pageNo = val;
+      this.getDemandData();
+    },
+
+    handleOperateDemandList(index, type) {
+      if (type == "查看") {
+        this.showedDemandInfo = true;
+        this.demand.currentIndex = index;
+      }
+    },
+
+    //加载组织数据
+    async getDemandData() {
+      const url = "/heart/userdemand/mydemand";
+      let params = {
+        epmetUserId: this.info.epmetUserId,
+        userId: this.userId,
+        pageNo: this.demand.pageNo,
+        pageSize: this.demand.pageSize,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+      this.demand.loading = false;
+
+      if (code === 0) {
+        this.demand.total = data.total;
+        this.demand.list = data.list.map((item) => {
+          return [
+            { type: "index" },
+            item.wantServiceTime,
+            item.categoryName,
+            item.content,
+            item.statusName,
+            { type: "operate", list: ["查看"] },
+          ];
+        });
+        this.demand.srcList = data.list;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    handlePageNoChangeIncident(val) {
+      this.incident.pageNo = val;
+      this.getIncidentData();
+    },
+
+    handleClickIncident(index) {
+      this.incident.showedInfo = true;
+      this.incident.currentIndex = index;
+    },
+
+    //加载组织数据
+    async getIncidentData() {
+      const url =
+        "http://yapi.elinkservice.cn/mock/245/gov/project/resievent/pageuserreported";
+      let params = {
+        epmetUserId: this.info.epmetUserId,
+        userId: this.userId,
+        pageNo: this.incident.pageNo,
+        pageSize: this.incident.pageSize,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+      this.incident.loading = false;
+
+      if (code === 0) {
+        this.incident.total = data.total;
+        this.incident.list = data.list;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    handlePageNoChangeTopic(val) {
+      this.topic.pageNo = val;
+      this.getTopicData();
+    },
+
+    handleClickTopic(index) {
+      this.topic.showedInfo = true;
+      this.topic.currentIndex = index;
+    },
+
+    //加载组织数据
+    async getTopicData() {
+      const url =
+        "http://yapi.elinkservice.cn/mock/245/gov/project/resievent/pageuserreported";
+      let params = {
+        epmetUserId: this.info.epmetUserId,
+        userId: this.userId,
+        pageNo: this.topic.pageNo,
+        pageSize: this.topic.pageSize,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+      this.topic.loading = false;
+
+      if (code === 0) {
+        this.topic.total = data.total;
+        this.topic.list = data.list;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    handlePageNoChangePoint(val) {
+      this.point.pageNo = val;
+      this.getPointData();
+    },
+
+    handleClickPoint(index) {
+      this.point.showedInfo = true;
+      this.point.currentIndex = index;
+    },
+
+    //加载组织数据
+    async getPointData() {
+      const url =
+        "http://yapi.elinkservice.cn/mock/245/point/resi/point/pageuserpoint";
+      let params = {
+        epmetUserId: this.info.epmetUserId,
+        userId: this.userId,
+        pageNo: this.point.pageNo,
+        pageSize: this.point.pageSize,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+      this.point.loading = false;
+
+      if (code === 0) {
+        this.point.total = data.total;
+        this.point.list = data.list;
+      } else {
+        this.$message.error(msg);
+      }
+    },
   },
 };
 </script>
 
-<style lang="scss" src="@/assets/scss/people.scss" scoped></style>
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/people.scss"
+  scoped
+></style>
diff --git a/src/views/modules/visual/communityGovern/components/screen-loading/index.vue b/src/views/modules/visual/communityGovern/components/screen-loading/index.vue
new file mode 100644
index 00000000..cc8bda6f
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/components/screen-loading/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="screen-loading">
+    <svg width="50px"
+         height="50px">
+      <circle cx="25"
+              cy="25"
+              r="20"
+              fill="transparent"
+              stroke-width="3"
+              stroke-dasharray="31.415, 31.415"
+              stroke="#29cdff"
+              stroke-linecap="round">
+        <animateTransform attributeName="transform"
+                          type="rotate"
+                          values="0, 25 25;360, 25 25"
+                          dur="1.5s"
+                          repeatCount="indefinite" />
+        <animate attributeName="stroke"
+                 values="#02bcfe;#3be6cb;#02bcfe"
+                 dur="3s"
+                 repeatCount="indefinite" />
+      </circle>
+
+      <circle cx="25"
+              cy="25"
+              r="10"
+              fill="transparent"
+              stroke-width="3"
+              stroke-dasharray="15.7, 15.7"
+              stroke="#29cdff"
+              stroke-linecap="round">
+        <animateTransform attributeName="transform"
+                          type="rotate"
+                          values="360, 25 25;0, 25 25"
+                          dur="1.5s"
+                          repeatCount="indefinite" />
+        <animate attributeName="stroke"
+                 values="#3be6cb;#02bcfe;#3be6cb"
+                 dur="3s"
+                 repeatCount="indefinite" />
+      </circle>
+    </svg>
+    <div class="loading-tip">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DvLoading'
+}
+</script>
+
+<style lang="scss" scoped>
+.screen-loading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .loading-tip {
+    font-size: 14px;
+    color: #fff;
+  }
+}
+</style>
diff --git a/src/views/modules/visual/communityGovern/components/screen-table/index.vue b/src/views/modules/visual/communityGovern/components/screen-table/index.vue
new file mode 100644
index 00000000..41c80f97
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/components/screen-table/index.vue
@@ -0,0 +1,310 @@
+<template>
+  <div class="warning-table">
+    <div class="table">
+      <div class="table-header">
+        <div
+          class="table-header-th"
+          v-for="(item, index) in headerList"
+          :key="item.title"
+          :style="headerStyle[index]"
+        >
+          {{ item.title }}
+        </div>
+      </div>
+      <div class="table-body">
+        <div
+          class="table-body-tr"
+          v-for="(value, index) in tableData"
+          :key="index"
+        >
+          <div
+            class="td"
+            v-for="(item, indexs) in value"
+            :key="indexs"
+            :style="tableContentStyle[indexs]"
+          >
+            {{ item }}
+            <span
+              v-if="indexs + 1 == value.length && item.length > 8"
+              class="more"
+              @click.stop="onClickMorePop(index)"
+              ref="morePop"
+            >
+              更多>
+              <span class="more-pop" v-if="visiblePopList[index]">
+                <!-- 李佳琪、刘阳、赵欣、丁一、嘉敏、李岩、何嘉慧
+                  李易峰、赵敏、何军、曲树惠 -->
+                {{ item }}
+              </span>
+            </span>
+          </div>
+        </div>
+        <screen-loading v-if="visibleLoading">加载中</screen-loading>
+        <div class="no-data" v-if="tableData.length == 0 && !visibleLoading">
+          <img
+            src="../../../../../../assets/img/modules/visual/noData.png"
+            alt=""
+            srcset=""
+            class="no-data-img"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ScreenLoading from "../screen-loading/index";
+import Vue from "vue";
+export default {
+  name: "warning-table",
+  components: {
+    ScreenLoading,
+  },
+  props: {
+    headerList: {
+      type: Array,
+      required: false,
+      default: () => {
+        return [
+          { title: "序号" },
+          { title: "所属网格" },
+          { title: "所属小区" },
+          { title: "楼号" },
+          { title: "姓名" },
+        ];
+      },
+    },
+    tableData: {
+      type: Array,
+      required: false,
+      default: () => {
+        return [
+          // [
+          //   1,
+          //   "商丘路社区第一网格",
+          //   "商丘路小区",
+          //   "2号楼",
+          //   "杨颖、王平、刘佳敏、丁辉、杨萍",
+          // ],
+          // [
+          //   2,
+          //   "商丘路社区第一网格",
+          //   "商丘路小区",
+          //   "2号楼",
+          //   "杨颖、王平、刘佳敏、丁辉、杨萍",
+          // ],
+        ];
+      },
+    },
+    // 单独给头部设置样式
+    headerStyle: {
+      type: Array,
+      default: () => {
+        return [
+          // {
+          //   width:'200px',
+          //   border:'1px solid red'
+          // },
+          // {
+          //   width:'200px'
+          // }
+        ];
+      },
+    },
+    // 单独给内容设置样式
+    tableContentStyle: {
+      type: Array,
+      default: () => {
+        return [
+          // {
+          //   width:'200px',
+          //   border:'1px solid red'
+          // },
+          // {
+          //   width:'200px'
+          // }
+        ];
+      },
+    },
+    visibleLoading: {
+      type: Boolean,
+      default: true,
+    },
+    // // 表格平均分的份数
+    // ava: {
+    //   type: Number,
+    //   default: 8
+    // },
+    // // 表头高度--默认占比10%
+    // headerHeightAva: {
+    //   type: String,
+    //   default: '10%'
+    // },
+    // // 表格主体平均分成的份数
+    // tableContentAva: {
+    //   type: Number,
+    //   default: 5
+    // },
+  },
+  data() {
+    return {
+      visiblePopList: [
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+      ],
+    };
+  },
+  watch: {
+    tableData(arr) {
+      if (Array.isArray(arr)) {
+        this.visiblePopList = new Array(arr.length).fill(false);
+      }
+    },
+  },
+
+  mounted() {
+    window.addEventListener("click", (e) => {
+      this.visiblePopList = new Array(this.visiblePopList.length).fill(false);
+    });
+  },
+
+  created() {},
+
+  methods: {
+    onClickMorePop(index) {
+      this.visiblePopList.forEach((item, indexs) => {
+        if (index == indexs) {
+          Vue.set(this.visiblePopList, index, true);
+        } else {
+          Vue.set(this.visiblePopList, indexs, false);
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.warning-table {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  .table {
+    width: 100%;
+    height: 100%;
+    &-header {
+      width: 100%;
+      height: 50px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      background: rgba(8, 37, 134, 0.85);
+      font-size: 16px;
+      font-weight: 400;
+      color: #ffffff;
+
+      &-th {
+        text-align: center;
+        width: calc(100% / 5);
+      }
+    }
+
+    &-body {
+      box-sizing: border-box;
+      width: 100%;
+      height: calc(100% - 50px);
+      font-size: 18px;
+      font-weight: 400;
+      color: #ffffff;
+
+      &-tr {
+        width: 100%;
+        height: 50px;
+        // height: calc(100% / 10);
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .td {
+          text-align: center;
+          width: calc(100% / 5);
+          .more {
+            font-size: 18px;
+            font-weight: 400;
+            color: #e4dc00;
+            position: relative;
+            cursor: pointer;
+
+            &-pop {
+              box-sizing: border-box;
+              display: block;
+              box-sizing: border-box;
+              width: 215px;
+              height: auto;
+              line-height: 20px;
+              border: 1px solid red;
+              position: absolute;
+              right: -100%;
+              top: 150%;
+              background: #06186d;
+              border: 1px solid #1a64cc;
+              border-radius: 5px;
+              font-size: 9px;
+              font-weight: 400;
+              color: #ffffff;
+              padding: 16px 8px 10px 9px;
+              z-index: 1;
+              cursor: default;
+              // &::after{
+              //   position: absolute;
+              //   left: 30%;
+              //   top: -30%;
+              //   display: flex;
+              //   content:'';
+              //   width: 0;
+              //   height: 0;
+              //   border-width: 13px;
+              //   border-style: solid;
+              //   border-color: transparent transparent rgba(26, 100, 204,0.5) transparent;
+              //   // border-color: transparent transparent red transparent;
+              //   transform: translate(-50%,0);
+              // }
+            }
+          }
+        }
+      }
+
+      &-tr:nth-child(2n) {
+        background: rgba(16, 75, 164, 0.24);
+      }
+
+      &-tr:hover {
+        background: url("../../../../../../assets/img/modules/visual/hover-bac.png")
+          no-repeat center;
+        background-size: 100% 100%;
+      }
+      // 暂无数据
+      .no-data {
+        width: 100%;
+        height: calc(100% - 50px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &-img {
+          width: 249px;
+          height: 172px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/modules/visual/communityGovern/distributionAnalyze.vue b/src/views/modules/visual/communityGovern/distributionAnalyze.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/modules/visual/communityGovern/processAnalyze.vue b/src/views/modules/visual/communityGovern/processAnalyze.vue
new file mode 100644
index 00000000..10f8da5d
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/processAnalyze.vue
@@ -0,0 +1,500 @@
+<template>
+  <cpt-card>
+    <div class="title">
+      <img src="@/assets/img/shuju/title-tip.png" />
+      <span>项目处理分析</span>
+
+      <div class="second-title">
+        <div class="second-select cascader">
+          <el-cascader class="customer_cascader"
+                       ref="myCascader"
+                       v-model="agencyIdArray"
+                       :key="iscascaderShow"
+                       :options="casOptions"
+                       :props="optionProps"
+                       @change="handleChangeAgency"
+                       clearable></el-cascader>
+        </div>
+        <div class="second-select">
+          <el-date-picker v-model="dateId"
+                          type="date"
+                          :clearable="false"
+                          prefix-icon="el-icon-caret-bottom"
+                          placeholder="选择日期"
+                          value-format="yyyyMMdd">
+          </el-date-picker>
+        </div>
+      </div>
+
+    </div>
+    <div class="g-cpt-resi">
+      <div class="g-l">
+        <div class="l_top">
+          <div class="g-count">
+            <div class="t_count">项目总数</div>
+            <div class="c_count">{{projectTotal}}</div>
+            <div class="t_yestoday">昨日
+              <span class="c_yestoday">{{dateIncr}}</span>
+            </div>
+            <div class="t_today">上月
+              <span class="c_today">{{monthIncr}}</span>
+            </div>
+          </div>
+          <div class="g-pie">
+            <screen-echarts-frame class="echart-wr"
+                                  @myChartMethod="pieInitOk"
+                                  ref="pieChart"></screen-echarts-frame>
+          </div>
+        </div>
+        <div class="l_bottom">
+          <div class="bottom_label">党建单位分类统计</div>
+          <screen-echarts-frame class="echart-line"
+                                @myChartMethod="lineInitOk"
+                                ref="lineChart"></screen-echarts-frame>
+        </div>
+      </div>
+      <div class="g-r">
+        <div class="m-tb">
+
+          <div class="tb">
+
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+  </cpt-card>
+</template>
+
+<script>
+import { Loading } from "element-ui"; //引入Loading服务
+import { requestPost } from "@/js/dai/request";
+import cptCard from "@/views/modules/visual/cpts/card";
+import cptTb from "@/views/modules/visual/cpts/tb";
+import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame";
+import screenMap from "@/views/modules/visual/components/screen-map";
+
+import { pieOption } from './processPieOption.js'
+import { lineOption } from './processLineOption.js'
+
+
+export default {
+  name: "HomeMap",
+  data () {
+    return {
+      showNoData: false,
+      timer: null,
+
+      projectTotal: 0,
+      dateIncr: 0,
+      monthIncr: 0,
+
+      lineChart: '',
+      lineOption: {},
+      lineInitState: false,
+      lineColorArray: [],
+      lineData: [820, 932, 901, 934, 1290, 1330, 1320],
+
+      pieChartS: null,
+      pieChart: '',
+      pieOption: {},
+      pieInitState: false,
+      pieTotal: 0,
+      colorArray: [],
+      pieData: [
+        { value: 1048, name: '未结案', color: '#FAC126', selected: true },
+        { value: 735, name: '已结案', color: '#3DDA83' },
+
+      ],
+      //voting 已转项目：shift_project 已关闭：closed，全部：all
+      stateArray: [
+        {
+          label: '全部',
+          value: 'all'
+        },
+        {
+          label: '表决中',
+          value: 'voting'
+        },
+        {
+          label: '已转项目',
+          value: 'shift_project'
+        },
+        {
+          label: '已关闭',
+          value: 'closed'
+        },
+      ],
+
+      dateId: '',
+      agencyId: '',
+
+      casOptions: [],
+      agencyIdArray: [],
+      customerList: [],
+      iscascaderShow: 0,
+
+      optionProps: {
+        multiple: false,
+        value: 'agencyId',
+        label: 'agencyName',
+        children: 'subAgencyList',
+        checkStrictly: true
+      },
+
+    };
+  },
+  // mixins: [animate]
+  beforeDestroy () {
+    this.timer && clearInterval(this.timer)
+  },
+
+  async mounted () {
+    this.userId = this.uid;
+    this.initData()
+    this.getApiData();
+  },
+
+  methods: {
+    initData () {
+      var time = (new Date).getTime() - 24 * 60 * 60 * 1000;
+      this.dateId = new Date(time); // 获取的是前一天日期
+
+    },
+    async getApiData () {
+      await this.getAgencylist()//获取组织级别
+      await this.getProjectTotal()
+      await this.getLine()
+      // await this.getTable();
+    },
+
+    async getAgencylist () {
+      const url = '/gov/org/customeragency/agencylist'
+      // const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist'
+
+      const params = {
+        customerId: '613cc61a6b8ce4c70d21bd413dac72cc'
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        ++this.iscascaderShow
+        this.casOptions = []
+        this.agencyIdArray.length = []
+
+        if (data) {
+          this.casOptions.push(data)
+        }
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    //加载项目
+    async getProjectTotal () {
+      // const url = "/data/aggregator/project/projecttotal";
+      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projecttotal";
+      let params = {
+        agencyId: '',
+        dateId: this.dateId,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+
+      if (code === 0) {
+        this.projectTotal = data.projectTotal
+        this.dateIncr = data.dateIncr
+        this.monthIncr = data.monthIncr
+
+        this.pieData = [
+          {
+            name: "未结案",
+            value: data.pendingTotal,
+            selected: true,
+
+          },
+          {
+            name: "已结案",
+            value: data.pendingTotal
+          }
+        ]
+
+        this.getPie()
+
+
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    pieInitOk (dom) {
+      console.log('pie准备好了')
+      this.pieChartS = dom
+      this.pieInitState = true
+
+    },
+    lineInitOk () {
+      console.log('pie准备好了')
+      this.lineInitState = true
+
+    },
+    getLine () {
+      if (this.lineInitState) {
+        this.getLineChart()
+      } else {
+        setTimeout(() => {
+          this.getLine()
+        }, 500)
+      }
+    },
+    // 获取折线图
+    async getLineChart () {
+      this.$refs.lineChart.clear()
+
+      const _that = this
+      // this.$refs.pieChart.showLoading()
+      //  const url ="/data/aggregator/project/projectmonthincr";
+      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projectmonthincr";
+      let params = {
+        agencyId: this.agencyId,
+        dateId: this.dateId,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        // 获取pieChart配置
+        this.lineOption = lineOption()
+        let xaxis = []
+        let totalIndexData = []
+        if (data && data.length > 0) {
+          data.forEach(item => {
+            xaxis.push(item.type)
+            totalIndexData.push(item.value)
+          });
+          // this.lineData = data
+
+        } else {
+
+        }
+        this.$refs.lineChart.setOption(this.lineOption, true)
+        this.$refs.lineChart.setOption({
+          xAxis: { data: xaxis },
+          series: [
+            { data: totalIndexData },
+
+          ]
+        }, true)
+
+
+      } else {
+        this.$message.error(msg);
+      }
+
+
+    },
+
+    getPie () {
+      if (this.pieInitState) {
+        this.getPieChart()
+      } else {
+        setTimeout(() => {
+          this.getPie()
+        }, 500)
+      }
+    },
+    // 获取饼状图
+    async getPieChart () {
+      this.$refs.pieChart.clear()
+      this.pieTotal = 0
+      const _that = this
+      // this.$refs.pieChart.showLoading()
+
+      // 获取pieChart配置
+      this.pieOption = pieOption(this.pieChartS)
+
+      this.pieData.forEach(item => {
+        this.pieTotal = this.pieTotal + item.value
+
+      });
+
+
+      this.pieOption.title.text = this.pieTotal
+
+      this.clickPie(0)
+
+      let fun = function (params) {
+        _that.clickPie(params.dataIndex)
+      }
+      this.$refs.pieChart.handleClick(fun)
+
+
+    },
+
+    clickPie (seriesIndex) {
+      this.pieData.forEach((element, index) => {
+        if (index === seriesIndex) {
+          element.label = {
+            show: true,
+
+          };
+          element.labelLine = {
+            show: true,
+            lineStyle: {
+              opacity: 1,
+            }
+
+          };
+
+        } else {
+          element.label = {
+            show: false,
+
+          };
+          element.labelLine = {
+            show: false,
+            lineStyle: {
+              opacity: 0,
+              color: 'rgba(255,255,255,0)'
+            }
+          };
+        }
+      });
+      this.pieOption.series[1].data = this.pieData
+      // this.$refs.pieChart.hideLoading()
+      this.$refs.pieChart.setOption(this.pieOption)
+    },
+
+    handleChangeState (index) {
+      // this.getTable()
+    },
+
+    handleChangeAgency (value) {
+      console.log(value)
+      this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
+      this.agencyId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
+      console.log(this.agencyIdArray)
+    },
+
+
+
+    toUserInfo (uid) {
+      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
+    },
+  },
+  props: {
+    uid: {
+      type: String,
+      default: "",
+      // default: "8ada68cb6f1e4b9a8333348a39ef3aee",
+    },
+  },
+
+  computed: {},
+
+  components: {
+    cptCard,
+    cptTb,
+    screenEchartsFrame,
+    screenMap,
+  },
+
+  watch: {
+    uid (id) {
+      this.userId = id;
+    },
+    userId () {
+      this.getApiData();
+      window.scrollTo(0, 0);
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/processAnalyze.scss"
+  scoped
+></style>
+
+<style lang=scss >
+.customer_select {
+  /* 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重 */
+  /deep/ input::-webkit-input-placeholder {
+    color: #fff;
+  }
+  /deep/ input::-moz-input-placeholder {
+    color: #fff;
+  }
+  /deep/ input::-ms-input-placeholder {
+    color: #fff;
+  }
+
+  /* 修改的是el-input的样式 */
+  /* 一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色 */
+  /* 另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色 */
+  /deep/ .el-select,
+  /deep/ .el-input,
+  /deep/ .el-input__inner {
+    background-color: #08164d00;
+    color: #fff;
+    border: 0px;
+    border-radius: 0px;
+    text-align: left;
+    font-size: 22px;
+    font-family: PingFang SC;
+    font-weight: 800;
+    color: #ffffff;
+    display: flex;
+  }
+
+  /* el-input聚焦的时候 外层的border会有一个样式 */
+  /deep/ .el-select .el-input.is-focus .el-input__inner {
+    border: 0px;
+  }
+
+  /* 修改的是el-input上下的小图标的颜色 */
+  /deep/ .el-select .el-input .el-select__caret::before {
+    color: #fff;
+    content: "";
+    background: url("../../../../assets/img/xiala.png") center center no-repeat;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  /* 修改总体选项的样式 最外层 */
+  /deep/ .el-select-dropdown {
+    background-color: #08164d;
+    margin: 0px;
+    border: 0px;
+    border-radius: 0px;
+  }
+
+  /* 修改选项整体的样式 */
+  /deep/ .el-select-dropdown__list {
+    padding: 6px 0 20px 0;
+  }
+  /* 修改单个的选项的样式 */
+  /deep/ .el-select-dropdown__item {
+    background-color: transparent;
+    color: #fff;
+  }
+
+  /* item选项的hover样式 */
+  /deep/ .el-select-dropdown__item.hover,
+  /deep/ .el-select-dropdown__item:hover {
+    color: #409eff;
+  }
+
+  /* 修改的是下拉框选项内容上方的尖角 */
+  /deep/ .el-popper .popper__arrow,
+  .el-popper .popper__arrow::after {
+    display: none;
+  }
+}
diff --git a/src/views/modules/visual/communityGovern/processLineOption.js b/src/views/modules/visual/communityGovern/processLineOption.js
new file mode 100644
index 00000000..ef7dec01
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/processLineOption.js
@@ -0,0 +1,77 @@
+import * as echarts from 'echarts'
+export function lineOption () {
+
+  return {
+   
+    xAxis: {
+      type: 'category',
+      // boundaryGap: false,
+      axisLabel: {
+        color: '#8ec7dc',
+        fontSize: 16
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#0c4b59'
+        }
+      }
+    },
+    yAxis: {
+      nameTextStyle: {
+        color: '#8ec7dc',
+        fontSize: 18
+      },
+      splitNumber: 4,
+      minInterval: 1,
+      show: true,
+      type: 'value',
+      axisLabel: {
+        color: '#8ec7dc',
+        fontSize: 18
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        lineStyle: {
+          color: ['#145968'],
+          type: 'dotted'
+        }
+      },
+      axisLine: {
+        show: true,
+        symbol: ['none', 'arrow'],
+        symbolOffset: [0, 15],
+        lineStyle: {
+          color: '#0c4b59'
+        }
+      }
+    },
+    series: [
+      {
+        name: '项目数',
+        type: 'line',
+        barWidth: 15,
+        areaStyle: {},
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0, 1, 0, 0,
+            [
+              { offset: 0, color: 'rgba(121, 55, 255, 0)' },
+              { offset: 1, color: '#6339FF' }
+            ]
+          )
+        }
+      },
+      // {
+      //   data: [820, 932, 901, 934, 1290, 1330, 1320],
+      //   type: 'line',
+      //   areaStyle: {}
+      // }
+    ]
+
+  }
+}
diff --git a/src/views/modules/visual/communityGovern/processPieOption.js b/src/views/modules/visual/communityGovern/processPieOption.js
new file mode 100644
index 00000000..84062915
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/processPieOption.js
@@ -0,0 +1,183 @@
+
+export function pieOption (_charts) {
+const center= ['50%', '200px']
+  return {
+    title: {
+      text: '0',
+      top: 170,
+      left: 'center',
+      textStyle: {
+        width: '100%',
+        fontSize: 32,
+        color: '#FFFFFF',
+        fontWeight: 400
+      },
+      itemGap: 5,
+      subtext: '总数',
+      subtextStyle: {
+        fontSize: 20,
+        color: '#fff',
+        fontWeight: 400
+      }
+    },
+    tooltip: {
+      show: false
+    },
+    legend: {
+      top: 350,
+      bottom: 0,
+      itemWidth: 20,
+      itemHeight: 10,
+      textStyle: {
+        color: '#D2E7FF',
+        fontSize: 16,
+        lineHeight: 20,
+      },
+    
+    },
+    series: [
+      // 外侧圆环
+      {
+        type: 'pie',
+        // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+        startAngle: 0,
+        hoverAnimation: false,
+        // tooltip: {
+        // },
+        center: center,
+        radius: ['58%', '58.3%'],
+        label: {
+          normal: {
+            show: false
+          }
+        },
+        labelLine: {
+          normal: {
+            show: false
+          }
+        },
+        data: [{
+          value: 360,
+          itemStyle: {
+            normal: {
+              color: 'rgba(40, 101, 250, 0)',
+              width:0,
+              borderColor: 'rgba(40, 101, 250, 0.5)',
+              borderWidth: 1,
+              borderType: 'dotted'
+            }
+          }
+        }
+        ]
+      },
+
+      // 突出的
+      {
+        hoverAnimation: false,
+        // name: 'Access From',
+        type: 'pie',
+        center: center,
+        radius: ['35%', '48%'],
+        avoidLabelOverlap: false,
+        // top: top + '%',
+        // height: '80%',
+        // selectedMode: 'single',
+        left: 'center',
+        width: 400,
+        label: {
+          // show: false,
+          position: 'outside',
+          alignTo: 'edge',
+          // formatter: '{a|{c}}\n\n{name|{b}}',
+          formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+          minMargin: 5,
+          edgeDistance: 1,
+          lineHeight: 15,
+          color: '#fff',
+          fontSize: 12,
+          // distanceToLabelLine: -60,
+          rich: {
+            name: {
+              padding: [0, 6, 0, 6]
+            },
+            a: {
+              fontSize: 30,
+              color: '#fff',
+              padding: [0, 6, 6, 6]
+            },
+            r: {
+              backgroundColor: 'auto',
+              borderRadius: 6,
+              width: 6,
+              height: 6,
+              // padding: [3, 3, 0, -12]
+            }
+          }
+        },
+        labelLine: {
+          show: false,
+          smooth: 0.2,
+          length: 30,
+          length2: 0,
+          maxSurfaceAngle: 80
+        },
+        labelLayout: function (params) {
+          
+          const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+          const points = params.labelLinePoints;
+          // Update the end point.
+          if (points) {
+            points[2][0] = isLeft
+            ? params.labelRect.x
+            : params.labelRect.x + params.labelRect.width;
+          }
+          
+          return {
+            labelLinePoints: points
+          };
+        },
+        itemStyle: {
+           color:function(params) {
+          //自定义颜色
+          var colorList = [ '#FAC126', '#3DDA83'];
+            return colorList[params.dataIndex]
+          }
+        },
+        data: [],
+
+      },
+         // 中间圆环
+         {
+          type: 'pie',
+          // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+          startAngle: 0,
+          hoverAnimation: false,
+          center: center,
+          // tooltip: {
+          // },
+          radius: ['0%', '25%'],
+          label: {
+          
+              show: false
+           
+          },
+          labelLine: {
+           
+              show: false
+          
+          },
+          data: [{
+            value: 360,
+            itemStyle: {
+              normal: {
+                color: 'rgba(8, 37, 134, 1)',
+            
+              }
+            }
+          }
+          ]
+        },
+    ]
+
+  }
+}
diff --git a/src/views/modules/visual/communityGovern/resiPieOption.js b/src/views/modules/visual/communityGovern/resiPieOption.js
new file mode 100644
index 00000000..64b6ad98
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/resiPieOption.js
@@ -0,0 +1,179 @@
+
+export function pieOption (_charts) {
+const center= ['50%', '250px']
+  return {
+    title: {
+      text: '0',
+      top: 220,
+      left: 'center',
+      textStyle: {
+        width: '100%',
+        fontSize: 32,
+        color: '#FFFFFF',
+        fontWeight: 400
+      },
+      itemGap: 5,
+      subtext: '总数',
+      subtextStyle: {
+        fontSize: 20,
+        color: '#fff',
+        fontWeight: 400
+      }
+    },
+    tooltip: {
+      show: false
+    },
+    legend: {
+      top: 500,
+      bottom: 0,
+      itemWidth: 20,
+      itemHeight: 10,
+      textStyle: {
+        color: '#D2E7FF',
+        fontSize: 16,
+        lineHeight: 20,
+      },
+    
+    },
+    series: [
+      // 外侧圆环
+      {
+        type: 'pie',
+        // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+        startAngle: 0,
+        hoverAnimation: false,
+        // tooltip: {
+        // },
+        center: center,
+        radius: ['55%', '55.3%'],
+        label: {
+          show: false
+        },
+        labelLine: {
+          show: false
+        },
+        data: [{
+          value: 360,
+          itemStyle: {
+            color: 'rgba(40, 101, 250, 0)',
+            width:0,
+            borderColor: 'rgba(40, 101, 250, 0.5)',
+            borderWidth: 1,
+            borderType: 'dotted'
+          }
+        }
+        ]
+      },
+
+      // 突出的
+      {
+        hoverAnimation: false,
+        // name: 'Access From',
+        type: 'pie',
+        center: center,
+        radius: ['40%', '60%'],
+        avoidLabelOverlap: false,
+        // top: top + '%',
+        // height: '80%',
+        selectedMode: 'single',
+        left: 'center',
+        width: 400,
+        label: {
+          // show: false,
+          position: 'outside',
+          alignTo: 'edge',
+          // formatter: '{a|{c}}\n\n{name|{b}}',
+          formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+          minMargin: 5,
+          edgeDistance: 1,
+          lineHeight: 15,
+          color: '#fff',
+          fontSize: 12,
+          // distanceToLabelLine: -60,
+          rich: {
+            name: {
+              padding: [0, 6, 0, 6]
+            },
+            a: {
+              fontSize: 30,
+              color: '#fff',
+              padding: [0, 6, 6, 6]
+            },
+            r: {
+              backgroundColor: 'auto',
+              borderRadius: 6,
+              width: 6,
+              height: 6,
+              // padding: [3, 3, 0, -12]
+            }
+          }
+        },
+        labelLine: {
+          show: false,
+          smooth: 0.2,
+          length: 30,
+          length2: 0,
+          maxSurfaceAngle: 80
+        },
+        labelLayout: function (params) {
+          
+          const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+          const points = params.labelLinePoints;
+          // Update the end point.
+          if (points) {
+            points[2][0] = isLeft
+            ? params.labelRect.x
+            : params.labelRect.x + params.labelRect.width;
+          }
+          
+          return {
+            labelLinePoints: points
+          };
+        },
+        itemStyle: {
+          // color:function(params) {
+          // //自定义颜色
+          // var colorList = [          
+          //       '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
+          //   ];
+          //   return colorList[params.dataIndex]
+          // }
+        },
+        data: [],
+
+      },
+         // 中间圆环
+         {
+          type: 'pie',
+          // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+          startAngle: 0,
+          hoverAnimation: false,
+          center: center,
+          // tooltip: {
+          // },
+          radius: ['0%', '25%'],
+          label: {
+          
+              show: false
+           
+          },
+          labelLine: {
+           
+              show: false
+          
+          },
+          data: [{
+            value: 360,
+            itemStyle: {
+              normal: {
+                color: 'rgba(8, 37, 134, 1)',
+            
+              }
+            }
+          }
+          ]
+        },
+    ]
+
+  }
+}
diff --git a/src/views/modules/visual/communityGovern/resibuzz.vue b/src/views/modules/visual/communityGovern/resibuzz.vue
new file mode 100644
index 00000000..8b7406b6
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/resibuzz.vue
@@ -0,0 +1,434 @@
+<template>
+  <cpt-card>
+    <div class="title">
+      <img src="@/assets/img/shuju/title-tip.png" />
+      <span>居民热议</span>
+
+      <div class="second-select cascader">
+
+        <el-cascader class="customer_cascader"
+                     ref="myCascader"
+                     v-model="agencyIdArray"
+                     :key="iscascaderShow"
+                     :options="casOptions"
+                     :props="optionProps"
+                     @change="handleChangeAgency"
+                     clearable></el-cascader>
+      </div>
+      <div class="second-select status-select">
+        <el-select v-model="status"
+                   :popper-append-to-body="false"
+                   placeholder="请选择">
+          <el-option v-for="(item,index) in stateArray"
+                     :key="item.value"
+                     :label="item.label"
+                     :value="item.value"
+                     @click.native="handleChangeState(index)">
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+
+    <div class="g-cpt-resi">
+      <div class="g-l">
+        <screen-echarts-frame class="echart-wr"
+                              @myChartMethod="pieInitOk"
+                              ref="pieChart"></screen-echarts-frame>
+
+      </div>
+      <div class="g-r">
+        <div class="m-tb">
+
+          <div class="tb">
+            <cpt-tb :col-list="demand.colList"
+                    :loading="demand.loading"
+                    :header="demand.header"
+                    :list="demand.list"></cpt-tb>
+
+            <div class="m-pagination">
+              <el-pagination :current-page="demand.pageNo"
+                             :page-size="demand.pageSize"
+                             :total="demand.total"
+                             background
+                             layout="prev, pager, next"
+                             @current-change="handlePageNoChange_demand">
+              </el-pagination>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+  </cpt-card>
+</template>
+
+<script>
+import { Loading } from "element-ui"; //引入Loading服务
+import { requestPost } from "@/js/dai/request";
+import cptCard from "@/views/modules/visual/cpts/card";
+import cptTb from "@/views/modules/visual/cpts/tb";
+import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame";
+
+import { pieOption } from './resiPieOption.js'
+
+
+export default {
+  name: "HomeMap",
+  data () {
+    return {
+      showNoData: false,
+      timer: null,
+      pieChartS: null,
+      pieChart: '',
+      pieOption: {},
+      pieInitState: false,
+      pieTotal: 0,
+      colorArray: [],
+      pieData: [
+        { count: 1048, categoryName: '城市管理', color: '#1B51FF', selected: true },
+        { count: 735, categoryName: '为民服务', color: '#00E5ED' },
+        { count: 580, categoryName: '安全监管', color: '#7800FF' },
+        { count: 484, categoryName: '民政', color: '#16D783' },
+        { count: 300, categoryName: '环境保护', color: '#FF7800' },
+        { count: 1048, categoryName: '建设管理', color: '#FFBA00' },
+        { count: 735, categoryName: '街道吹哨部门报到', color: '#FFD685' },
+        { count: 580, categoryName: '社会治安综合', color: '#2A00FF' },
+        { count: 484, categoryName: '公安交通管理', color: '#C600FF' },
+        { count: 300, categoryName: '卫生计生监管执法', color: '#FF2A00' },
+        { count: 484, categoryName: '民生', color: '#3DDA83' },
+        { count: 300, categoryName: '街道安全', color: '#FAC126' }
+      ],
+      //voting 已转项目：shift_project 已关闭：closed，全部：all
+      stateArray: [
+        {
+          label: '全部',
+          value: 'all'
+        },
+        {
+          label: '表决中',
+          value: 'voting'
+        },
+        {
+          label: '已转项目',
+          value: 'shift_project'
+        },
+        {
+          label: '已关闭',
+          value: 'closed'
+        },
+      ],
+
+      status: 'all',
+      orgId: '',
+      demand: {
+        loading: true,
+        colList: [
+          {
+            align: "center",
+            width: "5%",
+          },
+          {
+            align: "center",
+            width: "10%",
+          },
+          {
+            align: "center",
+            width: "20%",
+          },
+          {
+            align: "center",
+            width: "10%",
+          },
+          {
+            align: "center",
+            width: "5%",
+          },
+          {
+            align: "center",
+            width: "10%",
+          },
+          {
+            align: "center",
+            width: "10%",
+          },
+          {
+            align: "center",
+            width: "15%",
+          },
+          {
+            align: "center",
+            width: "5%",
+          },
+          {
+            align: "center",
+            width: "5%",
+          },
+          {
+            align: "center",
+            width: "10%",
+          },
+        ],
+        header: ["序号", "议题标题", "处理意见", "分类", "状态", "创建时间", "发起人", "已表态/应表态", "支持", "反对", "操作"],
+        list: [],
+        pageSize: 10,
+        pageNo: 1,
+        total: 0,
+
+      },
+
+      casOptions: [],
+      agencyIdArray: [],
+      customerList: [],
+      iscascaderShow: 0,
+
+      optionProps: {
+        multiple: false,
+        value: 'agencyId',
+        label: 'agencyName',
+        children: 'subAgencyList',
+        checkStrictly: true
+      },
+
+    };
+  },
+  // mixins: [animate]
+  beforeDestroy () {
+    this.timer && clearInterval(this.timer)
+  },
+
+  async mounted () {
+    this.userId = this.uid;
+    this.getApiData();
+  },
+
+  methods: {
+
+    async getApiData () {
+      await this.getAgencylist()//获取组织级别
+      await this.getPie()
+      await this.getTable();
+    },
+
+    async getAgencylist () {
+      const url = '/gov/org/customeragency/agencylist'
+      // const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist'
+
+      const params = {
+        customerId: '613cc61a6b8ce4c70d21bd413dac72cc'
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        ++this.iscascaderShow
+        this.casOptions = []
+        this.agencyIdArray.length = []
+
+        if (data) {
+          this.casOptions.push(data)
+        }
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+
+    pieInitOk (dom) {
+      console.log('pie准备好了', dom)
+      this.pieChartS = dom
+      this.pieInitState = true
+
+    },
+    getPie () {
+      if (this.pieInitState) {
+        this.getPieChart()
+      } else {
+        setTimeout(() => {
+          this.getPie()
+        }, 500)
+      }
+    },
+    // 获取饼状图
+    async getPieChart () {
+      this.$refs.pieChart.clear()
+      this.pieTotal = 0
+      const _that = this
+      // this.$refs.pieChart.showLoading()
+      //  const url ="/gov/issue/issue/resibuzz-leftpiechart";
+      const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz-leftpiechart";
+      let params = {
+        orgId: this.orgId,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+      // 获取pieChart配置
+
+
+
+      if (code === 0) {
+        // 获取pieChart配置
+        this.pieOption = pieOption(this.pieChartS)
+        if (data && data.length > 0) {
+          // this.pieData = data
+
+        } else {
+          this.pieData = [{ count: 0, categoryName: '无分类', color: '#00E5ED' }]
+        }
+
+        this.pieData.forEach(item => {
+          item.name = item.categoryName
+          item.value = item.count
+          this.colorArray.push(item.color)
+          this.pieTotal = this.pieTotal + item.value
+
+        });
+
+
+        this.pieOption.title.text = this.pieTotal
+        this.pieOption.series[1].itemStyle = {
+          color: function (params) {
+            return _that.colorArray[params.dataIndex]
+          }
+        }
+        this.clickPie(0)
+
+        let fun = function (params) {
+          _that.clickPie(params.dataIndex)
+        }
+        this.$refs.pieChart.handleClick(fun)
+      } else {
+        this.$message.error(msg);
+      }
+
+
+    },
+
+    clickPie (seriesIndex) {
+      this.pieData.forEach((element, index) => {
+        if (index === seriesIndex) {
+          element.label = {
+            show: true,
+
+          };
+          element.labelLine = {
+            show: true,
+            lineStyle: {
+              opacity: 1,
+            }
+
+          };
+          console.log('zhilma')
+
+        } else {
+          element.label = {
+            show: false,
+
+          };
+          element.labelLine = {
+            show: false,
+            lineStyle: {
+              opacity: 0,
+              color: 'rgba(255,255,255,0)'
+            }
+
+          };
+
+        }
+      });
+      this.pieOption.series[1].data = this.pieData
+      // this.$refs.pieChart.hideLoading()
+      this.$refs.pieChart.setOption(this.pieOption)
+
+    },
+
+    handleChangeState (index) {
+      this.getTable()
+    },
+
+    handleChangeAgency (value) {
+      console.log(value)
+      this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
+      this.orgId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
+      console.log(this.agencyIdArray)
+    },
+
+    //加载组织数据
+    async getTable () {
+      // const url = "/gov/issue/issue/resibuzz";
+      const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz";
+      let params = {
+        status: this.status,
+        orgId: this.orgId,
+        pageNo: this.demand.pageNo,
+        pageSize: this.demand.pageSize,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+      this.demand.loading = false;
+
+      if (code === 0) {
+        this.demand.total = data.total;
+        this.demand.list = data.list.map((item) => {
+          return [
+            { type: "index" },
+            item.issueTitle,
+            item.suggestion,
+            item.categoryName,
+            item.status,
+            item.createdTime,
+            item.issueOriginator,
+            item.voteAccount,
+            item.supportCount,
+            item.oppositionCount,
+            { type: "operate", list: ["查看"] },
+          ];
+        });
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    handlePageNoChange_demand (val) {
+      this.demand.pageNo = val;
+      this.getTable();
+    },
+    toUserInfo (uid) {
+      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
+    },
+  },
+  props: {
+    uid: {
+      type: String,
+      default: "",
+      // default: "8ada68cb6f1e4b9a8333348a39ef3aee",
+    },
+  },
+
+  computed: {},
+
+  components: {
+    cptCard,
+    cptTb,
+    screenEchartsFrame,
+  },
+
+  watch: {
+    uid (id) {
+      this.userId = id;
+    },
+    userId () {
+      this.getApiData();
+      window.scrollTo(0, 0);
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/resibuzz.scss"
+  scoped
+></style>
+
+<style lang=scss scoped>
+</style>
diff --git a/src/views/modules/visual/communityGovern/typeAnalyze.vue b/src/views/modules/visual/communityGovern/typeAnalyze.vue
new file mode 100644
index 00000000..3c5de2f2
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/typeAnalyze.vue
@@ -0,0 +1,476 @@
+<template>
+  <div class="g-cpt">
+    <div class="g-l">
+      <div class="m-people">
+        <cpt-card>
+          <div class="title">
+            <img src="@/assets/img/shuju/title-tip.png" />
+            <span>人员情况</span>
+          </div>
+          <div class="more"
+               @click="showedMoreInfo = true">查看更多</div>
+          <div class="ren">
+            <img class="pic-ren"
+                 src="@/assets/img/shuju/people/ren.png" />
+            <div class="ren-name">
+              <span>{{ info.name }}</span>
+              <img src="@/assets/img/shuju/people/arrow.png" />
+            </div>
+            <div class="ren-prop z-1">
+              <img src="@/assets/img/shuju/people/ren-prop-1.png" />
+              <span>所属网格</span>
+
+              <div class="ren-cnt">
+                <h5>所属网格：</h5>
+                <p>
+                  {{ info.gridName }}
+                </p>
+              </div>
+            </div>
+
+            <div class="ren-prop z-2">
+              <img src="@/assets/img/shuju/people/ren-prop-2.png" />
+              <span>人员类别</span>
+
+              <div class="ren-cnt">
+                <h5>人员类别：</h5>
+                <p>
+                  {{
+                    info.personCategory.length == 0
+                      ? "--"
+                      : info.personCategory.join("、")
+                  }}
+                </p>
+              </div>
+            </div>
+
+            <div class="ren-prop z-3">
+              <img src="@/assets/img/shuju/people/ren-prop-3.png" />
+              <span>工作单位</span>
+
+              <div class="ren-cnt">
+                <h5>工作单位：</h5>
+                <p>
+                  {{ info.workUnit || "--" }}
+                </p>
+              </div>
+            </div>
+
+            <div class="ren-prop z-4">
+              <img src="@/assets/img/shuju/people/ren-prop-4.png" />
+              <span>志愿者类别</span>
+
+              <div class="ren-cnt">
+                <h5>志愿者类别：</h5>
+                <p>
+                  {{
+                    info.volunteerCategory.length == 0
+                      ? "--"
+                      : info.volunteerCategory.join("、")
+                  }}
+                </p>
+              </div>
+            </div>
+
+            <div class="ren-prop z-5">
+              <img src="@/assets/img/shuju/people/ren-prop-5.png" />
+              <span>房屋信息</span>
+
+              <div class="ren-cnt">
+                <h5>房屋信息：</h5>
+                <p>
+                  {{
+                    info.houseInfo.length == 0
+                      ? "--"
+                      : info.houseInfo.join("、")
+                  }}
+                </p>
+              </div>
+            </div>
+
+            <div class="ren-prop z-6">
+              <img src="@/assets/img/shuju/people/ren-prop-6.png" />
+              <span>经济状况</span>
+
+              <div class="ren-cnt">
+                <h5>经济状况：</h5>
+                <p>
+                  月薪:
+                  {{
+                    info.financialSituation.monthlyIncome || "--"
+                  }}，退休金：{{
+                    info.financialSituation.retirementAmount || "--"
+                  }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </cpt-card>
+      </div>
+
+      <people-more v-show="showedMoreInfo"
+                   v-if="userId"
+                   :userId="userId"
+                   :gridName="info.gridName"
+                   @close="showedMoreInfo = false" />
+
+      <div class="m-relation">
+        <cpt-card>
+          <div class="title">
+            <img src="@/assets/img/shuju/title-tip.png" />
+            <span>家庭关系</span>
+          </div>
+          <div class="info">
+            <div class="huzhu">
+              <img class="huzhu-bg"
+                   src="@/assets/img/shuju/people/huzhu.png" />
+              <img class="huzhu-ico"
+                   src="@/assets/img/shuju/people/huzhu-home.png" />
+              <div class="huzhu-name">{{ houseInfo.ownerName }}</div>
+              <p>（户主）</p>
+            </div>
+
+            <div class="rel z-zuo-2"
+                 @click="toUserInfo(houseInfo.userList[0].userId)"
+                 v-if="houseInfo.userList[0]">
+              <img class="rel-bg"
+                   src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
+              <img class="rel-line"
+                   src="@/assets/img/shuju/people/huzhu-line/zuo2.png" />
+              <div class="rel-text"
+                   :class="houseInfo.userList[0].isSelf == '1' ? 'z-on' : ''">
+                <span class="rel-call">{{
+                  houseInfo.userList[0].relation
+                }}</span>
+                <span class="rel-name">（{{ houseInfo.userList[0].userName }}）</span>
+              </div>
+            </div>
+
+            <div class="rel z-you-2"
+                 @click="toUserInfo(houseInfo.userList[1].userId)"
+                 v-if="houseInfo.userList[1]">
+              <img class="rel-bg"
+                   src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
+              <img class="rel-line"
+                   src="@/assets/img/shuju/people/huzhu-line/you2.png" />
+              <div class="rel-text"
+                   :class="houseInfo.userList[1].isSelf == '1' ? 'z-on' : ''">
+                <span class="rel-call">{{
+                  houseInfo.userList[1].relation
+                }}</span>
+                <span class="rel-name">（{{ houseInfo.userList[1].userName }}）</span>
+              </div>
+            </div>
+
+            <div class="rel z-zuo-1"
+                 @click="toUserInfo(houseInfo.userList[2].userId)"
+                 v-if="houseInfo.userList[2]">
+              <img class="rel-bg"
+                   src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
+              <img class="rel-line"
+                   src="@/assets/img/shuju/people/huzhu-line/zuo1.png" />
+              <div class="rel-text"
+                   :class="houseInfo.userList[2].isSelf == '1' ? 'z-on' : ''">
+                <span class="rel-call">{{
+                  houseInfo.userList[2].relation
+                }}</span>
+                <span class="rel-name">（{{ houseInfo.userList[2].userName }}）</span>
+              </div>
+            </div>
+
+            <div class="rel z-you-1"
+                 @click="toUserInfo(houseInfo.userList[3].userId)"
+                 v-if="houseInfo.userList[3]">
+              <img class="rel-bg"
+                   src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
+              <img class="rel-line"
+                   src="@/assets/img/shuju/people/huzhu-line/you1.png" />
+              <div class="rel-text"
+                   :class="houseInfo.userList[3].isSelf == '1' ? 'z-on' : ''">
+                <span class="rel-call">{{
+                  houseInfo.userList[3].relation
+                }}</span>
+                <span class="rel-name">（{{ houseInfo.userList[3].userName }}）</span>
+              </div>
+            </div>
+
+            <div class="rel z-zuo-3"
+                 @click="toUserInfo(houseInfo.userList[4].userId)"
+                 v-if="houseInfo.userList[4]">
+              <img class="rel-bg"
+                   src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
+              <img class="rel-line"
+                   src="@/assets/img/shuju/people/huzhu-line/zuo3.png" />
+              <div class="rel-text"
+                   :class="houseInfo.userList[4].isSelf == '1' ? 'z-on' : ''">
+                <span class="rel-call">{{
+                  houseInfo.userList[4].relation
+                }}</span>
+                <span class="rel-name">（{{ houseInfo.userList[4].userName }}）</span>
+              </div>
+            </div>
+
+            <div class="rel z-you-3"
+                 @click="toUserInfo(houseInfo.userList[5].userId)"
+                 v-if="houseInfo.userList[5]">
+              <img class="rel-bg"
+                   src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
+              <img class="rel-line"
+                   src="@/assets/img/shuju/people/huzhu-line/you3.png" />
+              <div class="rel-text"
+                   :class="houseInfo.userList[5].isSelf == '1' ? 'z-on' : ''">
+                <span class="rel-call">{{
+                  houseInfo.userList[5].relation
+                }}</span>
+                <span class="rel-name">（{{ houseInfo.userList[5].userName }}）</span>
+              </div>
+            </div>
+          </div>
+        </cpt-card>
+      </div>
+    </div>
+    <div class="g-r">
+      <div class="m-tb">
+        <cpt-card>
+          <div class="title">
+            <img src="@/assets/img/shuju/title-tip.png" />
+            <span>居民需求</span>
+          </div>
+
+          <div class="tb">
+            <cpt-tb :col-list="demand.colList"
+                    :loading="demand.loading"
+                    :header="demand.header"
+                    :list="demand.list"></cpt-tb>
+
+            <div class="m-pagination">
+              <el-pagination :current-page="demand.pageNo"
+                             :page-size="demand.pageSize"
+                             :total="demand.total"
+                             background
+                             layout="prev, pager, next"
+                             @current-change="handlePageNoChange_demand">
+              </el-pagination>
+            </div>
+          </div>
+        </cpt-card>
+      </div>
+
+      <div class="m-row">
+        <div class="m-list">
+          <cpt-card>
+            <div class="title">
+              <img src="@/assets/img/shuju/title-tip.png" />
+              <span>上报事件</span>
+            </div>
+            <div class="list"></div>
+          </cpt-card>
+        </div>
+
+        <div class="m-list">
+          <cpt-card>
+            <div class="title">
+              <img src="@/assets/img/shuju/title-tip.png" />
+              <span>积分记录</span>
+            </div>
+            <div class="list"></div>
+          </cpt-card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Loading } from "element-ui"; //引入Loading服务
+import { requestPost } from "@/js/dai/request";
+import cptCard from "@/views/modules/visual/cpts/card";
+import peopleMore from "@/views/modules/visual/basicinfo/cpts/people-more";
+import cptTb from "@/views/modules/visual/cpts/tb";
+
+export default {
+  name: "HomeMap",
+  data () {
+    return {
+      showedMoreInfo: false,
+
+      userId: "",
+
+      info: {
+        financialSituation: { monthlyIncome: "", retirementAmount: "" },
+        gridName: "",
+        houseInfo: [],
+        name: "",
+        personCategory: [],
+        volunteerCategory: [],
+        workUnit: "",
+      },
+
+      houseInfo: {
+        ownerName: "",
+        userList: [
+          // {
+          //   userId: "",
+          //   userName: "",
+          //   isSelf: "",
+          //   relation: "",
+          // },
+        ],
+      },
+
+      demand: {
+        loading: true,
+        colList: [
+          {
+            align: "center",
+            width: "10%",
+          },
+          {
+            align: "center",
+            width: "15%",
+          },
+          {
+            align: "center",
+            width: "15%",
+          },
+          {
+            align: "center",
+            width: "40%",
+          },
+          {
+            align: "center",
+            width: "10%",
+          },
+          {
+            align: "center",
+            width: "10%",
+          },
+        ],
+        header: ["序号", "服务时间", "需求类型", "需求内容", "状态", "操作"],
+        list: [],
+        pageSize: 5,
+        pageNo: 1,
+        total: 0,
+      },
+    };
+  },
+
+  props: {
+    uid: {
+      type: String,
+      default: "",
+      // default: "8ada68cb6f1e4b9a8333348a39ef3aee",
+    },
+  },
+
+  computed: {},
+
+  components: {
+    cptCard,
+    peopleMore,
+    cptTb,
+  },
+
+  watch: {
+    uid (id) {
+      this.userId = id;
+    },
+    userId () {
+      this.getApiData();
+      window.scrollTo(0, 0);
+    },
+  },
+
+  async mounted () {
+    this.userId = this.uid;
+    this.getApiData();
+  },
+
+  methods: {
+    handleSearch () { },
+
+    getApiData () {
+      this.getInfo();
+      this.getHouseInfo();
+      this.getDemandData();
+    },
+
+    toUserInfo (uid) {
+      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
+    },
+
+    //加载组织数据
+    async getInfo () {
+      const url = "/epmetuser/icresiuser/persondata";
+      let params = {
+        userId: this.userId,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        this.info = { ...this.info, ...data };
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载组织数据
+    async getHouseInfo () {
+      const url = "/epmetuser/icresiuser/ownerrelation";
+      let params = {
+        userId: this.userId,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        this.houseInfo = { ...this.houseInfo, ...data };
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    handlePageNoChange_demand (val) {
+      this.demand.pageNo = val;
+      this.getDemandData();
+    },
+
+    //加载组织数据
+    async getDemandData () {
+      const url =
+        "http://yapi.elinkservice.cn/mock/245/heart/userdemand/mydemand";
+      let params = {
+        userId: this.userId,
+        pageNo: this.demand.pageNo,
+        pageSize: this.demand.pageSize,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+      this.demand.loading = false;
+
+      if (code === 0) {
+        this.demand.total = data.total;
+        this.demand.list = data.list.map((item) => {
+          return [
+            { type: "index" },
+            item.wantServiceTime,
+            item.content,
+            item.categoryName,
+            item.statusName,
+            { type: "operate", list: ["查看"] },
+          ];
+        });
+      } else {
+        this.$message.error(msg);
+      }
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/resibuzz.scss"
+  scoped
+></style>
diff --git a/src/views/modules/visual/communityParty/community.vue b/src/views/modules/visual/communityParty/community.vue
new file mode 100644
index 00000000..30fdb498
--- /dev/null
+++ b/src/views/modules/visual/communityParty/community.vue
@@ -0,0 +1,401 @@
+<template>
+  <div class="warning-box">
+    <cpt-card class="card-wr">
+      <div class="card-title">
+        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
+        <div class="title-label">
+          区域化党建
+        </div>
+      </div>
+      <div class="second-title">
+        <div class="second-title-label">党建单位分类统计</div>
+        <div class="second-select">
+          <el-select v-model="value2" clearable placeholder="请选择">
+            <el-option
+              v-for="item in headerList"
+              :key="item.coulmn"
+              :label="item.title"
+              :value="item.coulmn">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="second-select">
+          <el-date-picker
+            v-model="value2"
+            type="date"
+            prefix-icon="el-icon-caret-bottom"
+            placeholder="选择日期"
+            value-format="yyyy-MM-dd">
+          </el-date-picker>
+        </div>
+      </div>
+      <div class="box-wr box-wr-400">
+        <div class="box-left">
+          <div class="box-left-item">
+            <div class="box-label">组织单位</div>
+            <div class="box-num">1233</div>
+          </div>
+          <div class="box-left-item">
+            <div class="box-label">组织活动</div>
+            <div class="box-num">1233</div>
+          </div>
+        </div>
+        <div class="box-right">
+          <div class="warning-box-bottom">
+            <screen-table
+              :headerList="headerList"
+              :tableData="tableData"
+              :visibleLoading="visibleLoading"
+              :operate="false"
+            ></screen-table>
+            <div class="pagination">
+              <el-pagination
+                :current-page="pageNo"
+                :page-size="pageSize"
+                background
+                layout="prev, pager, next"
+                @size-change="pageSizeChangeHandleNew"
+                @current-change="pageCurrentChangeHandleNew"
+                :total="total"
+              >
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="second-title">
+        <div class="second-title-label">党建单位分类统计</div>
+      </div>
+
+      <div class="box-wr">
+        <div class="box-left box-left-w400">
+          <div v-for="item in partyItem" :key="item.value" class="box-left-item">
+            <div class="box-label">{{ item.name }}</div>
+            <div class="box-num" :style="'color:' + item.color">{{ item.value }}</div>
+          </div>
+          
+        </div>
+        <div class="box-right">
+         <div class="box-map">这是地图容器</div>
+         <div class="map-tips">
+            <div v-for="item in partyItem" :key="item.value" class="map-tips-item">
+              <div class="map-tips-icon">
+                <img :src="item.icon" />
+              </div>
+              <div class="map-tips-label">{{ item.name }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </cpt-card>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import screenTable from "../components/screen-table/index";
+import cptCard from "@/views/modules/visual/cpts/card";
+import nextTick from "dai-js/tools/nextTick";
+
+export default {
+  name: "warning-box",
+  components: {
+    cptCard,
+    screenTable,
+  },
+  data() {
+    return {
+      warningList: [],
+      headerList: [
+        { title: "序号", coulmn: 'index' },
+        { title: "需求类型", coulmn: 'gridName' },
+        { title: "具体内容", coulmn: 'buildingName' },
+        { title: "上报情况", coulmn: 'neighborhoodName' },
+        { title: "上报人", coulmn: 'residentNames' },
+        { title: "上报时间", coulmn: 'residentNames' },
+        { title: "是否认领", coulmn: 'residentNames' },
+        { title: "认领方", coulmn: 'residentNames' },
+        { title: "认领时间", coulmn: 'residentNames' }
+      ],
+      tableData: [
+        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+      ],
+      value2: '',
+      visibleLoading: true,
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      activeIndex: 0,
+      activeLevel: "1",
+      partyItem: [
+        {
+          name: '楼宇党建',
+          value: 1,
+          color: 'rgba(250, 32, 10, 1)',
+          icon: require('../../../../assets/img/shuju/measure/ly@2x.png')
+        }, {
+          name: '机关直属部门',
+          value: 2,
+          color: 'rgba(65, 181, 104, 1)',
+          icon: require('../../../../assets/img/shuju/measure/jgzs@2x.png')
+        }, {
+          name: '两新党建',
+          value: 3,
+          color: 'rgba(251, 177, 4, 1)',
+          icon: require('../../../../assets/img/shuju/measure/lxdj@2x.png')
+        }, {
+          name: '辖区单位',
+          value: 4,
+          color: 'rgba(80, 194, 237, 1)',
+          icon: require('../../../../assets/img/shuju/measure/xq@2x.png')
+        }, {
+          name: '其他',
+          value: 5,
+          color: 'rgba(192, 21, 195, 1)',
+          icon: require('../../../../assets/img/shuju/measure/qita.png')
+        }
+      ],
+    };
+  },
+  async mounted() {
+    await nextTick(100);
+    this.getBuildingwarnlist();
+  },
+  methods: {
+    
+    
+    onClickList(index, level) {
+      this.activeIndex = index;
+      this.activeLevel = level;
+      this.pageNo = 1;
+      this.getUserwarnlist();
+    },
+    //具体人员列表
+    async getUserwarnlist() {
+      const { activeIndex, activeLevel, warningList } = this;
+      const reqItem = warningList[activeIndex];
+      let tableData = [];
+      const url = "/epmetuser/statsresiwarn/userwarnlist";
+      let params = {
+        configId: reqItem.configId,
+        buildingIdList: reqItem["buildingIdList" + activeLevel],
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        tableData = data.list.map((item, index) => {
+          return {
+            ...item,
+            index: index + 1,
+            residentNames: item.residentNames || "暂无"
+          }
+        });
+        this.tableData = tableData;
+        this.total = data.total;
+      } else {
+      }
+    },
+    // 【人员预警】 楼宇预警数量列表
+    async getBuildingwarnlist() {
+      const url = "/epmetuser/statsresiwarn/buildingwarnlist";
+      let params = {
+        agencyId: this.$store.state.user.agencyId,
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.warningList = data;
+        this.visibleLoading = false;
+        this.getUserwarnlist();
+      } else {
+      }
+    },
+    pageSizeChangeHandleNew(val) {
+      this.pageNo = 1;
+      this.pageSize = val;
+    },
+    pageCurrentChangeHandleNew(val) {
+      this.pageNo = val;
+      this.getUserwarnlist();
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/warning.scss"
+  scoped
+></style>
+<style lang="scss" scoped>
+.warning-box {
+  display: flex;
+  .card-wr {
+    flex: 1;
+  }
+  .card-wr:last-child {
+    margin-left: 20px;
+  }
+}
+.card-title {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .title-icon {
+    display: block;
+    width: 46px;
+    height: 34px;
+    box-sizing: border-box;
+    margin-right: 6px;
+  }
+  .title-label {
+    font-size: 16px;
+    font-weight: 800;
+  }
+  ::v-deep .el-dropdown {
+    font-size: 16px;
+    color: #fff;
+    font-weight: 800;
+  }
+  
+}
+.second-title {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+  .second-title-label {
+    position: relative;
+    padding-left: 40px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+  }
+  .second-title-label::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 20px;
+    width: 12px;
+    height: 12px;
+    box-sizing: border-box;
+    margin-top: -6px;
+    background: #2865FA;
+    border-radius: 50%;
+  }
+  .second-select {
+    margin: 0 10px 0 40px;
+    ::v-deep .el-input {
+      width: 120px;
+      height: 36px;
+      .el-input__inner {
+        height: 100%;
+        padding: 0 10px;
+        color: #fff;
+        line-height: 36px;
+        background: #06186D;
+        border: 1px solid #1A64CC;
+      }
+      
+      .el-icon-arrow-up:before {
+        content: "\e78f"
+      }
+      // .el-select__caret:before {
+      //   content: '\E790'
+      // }
+    }
+    ::v-deep .el-date-editor {
+      .el-input__prefix {
+        left: unset;
+        right: 5px;
+      }
+    }
+  }
+  .second-select:last-child {
+    margin-left: 0;
+  }
+}
+
+.box-wr {
+  display: flex;
+  box-sizing: border-box;
+  .box-left {
+    flex-shrink: 0;
+    display: flex;
+    .box-left-item {
+      .box-label {
+        font-size: 16px;
+        color: rgba(255, 255, 255, .72);
+      }
+      .box-num {
+        font-size: 32px;
+        font-weight: bold;
+        color: #fff;
+      }
+    }
+  }
+  .box-right {
+    flex: 1;
+    .box-map {
+      height: 400px;
+      border: 1px solid #2865FA;
+    }
+  }
+  .box-left-w400 {
+    flex-wrap: wrap;
+    width: 400px;
+    box-sizing: border-box;
+    padding-top: 60px;
+    padding-left: 100px;
+    .box-left-item {
+      width: 50%;
+    }
+  }
+}
+.box-wr-400 {
+  height: 400px;
+  .box-left {
+    width: 300px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .box-left-item:last-child {
+      margin-top: 100px;
+    }
+  }
+}
+
+
+.map-tips {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  padding-top: 10px;
+  padding-bottom: 20px;
+  .map-tips-item {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    margin-right: 40px;
+    .map-tips-icon {
+      width: 32px;
+      height: 32px;
+      box-sizing: border-box;
+      margin-right: 10px;
+      // background: #DD2719;
+      // border-radius: 2px;
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .map-tips-label {
+      font-size: 16px;
+      color: #fff;
+    }
+  }
+}
+
+</style>
diff --git a/src/views/modules/visual/communityParty/party.vue b/src/views/modules/visual/communityParty/party.vue
new file mode 100644
index 00000000..6d3a3efd
--- /dev/null
+++ b/src/views/modules/visual/communityParty/party.vue
@@ -0,0 +1,744 @@
+<template>
+  <div class="warning-box">
+    <cpt-card>
+      <div class="card-title">
+        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
+        <div class="title-label">
+          <el-dropdown trigger="click">
+            <span class="el-dropdown-link">
+              全部网格<i class="el-icon-caret-bottom el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>黄金糕</el-dropdown-item>
+              <el-dropdown-item>狮子头</el-dropdown-item>
+              <el-dropdown-item>螺蛳粉</el-dropdown-item>
+              <el-dropdown-item>双皮奶</el-dropdown-item>
+              <el-dropdown-item>蚵仔煎</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+        <!-- <div class="title-time">
+          <div class="title-time-label">选择时间</div>
+          <div class="">
+            <el-date-picker
+              v-model="value2"
+              type="month"
+              placeholder="选择月">
+            </el-date-picker>
+          </div>
+        </div> -->
+      </div>
+      <div class="card-echart">
+        <div class="card-left">
+          <div class="card-left-title">党员年龄统计</div>
+          <div class="card-flex">
+            <div class="echart-wr">
+              <div class="echart-cicle"></div>
+              <div id="echartOrg" class="echart-org"></div>
+            </div>
+            <div class="echarts-tips echarts-tips-wd50">
+              <div class="tips-lists">
+                <div v-for="item in ageItem" :key="item.value" class="tips-items">
+                  <div class="tips-items-title" :class="'tips-items-title' + item.value">
+                    {{ item.name }}
+                  </div>
+                  <div class="tips-items-num">
+                    <div class="tips-item-count">{{item.value}}</div>
+                    <div class="tips-item-has">25%</div>
+                  </div>
+                </div>
+                
+              </div>
+            </div>
+            
+          </div>
+          <div class="warning-box-bottom">
+            <screen-table
+              :headerList="headerList"
+              :tableData="tableData"
+              :visibleLoading="visibleLoading"
+              :operate="false"
+            ></screen-table>
+            <div class="pagination">
+              <el-pagination
+                :current-page="pageNo"
+                :page-size="pageSize"
+                background
+                layout="prev, pager, next"
+                @size-change="pageSizeChangeHandleNew"
+                @current-change="pageCurrentChangeHandleNew"
+                :total="total"
+              >
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+        <div class="card-left">
+          <div class="card-left-title">党员学历统计</div>
+          <div class="card-flex">
+            <div class="echart-wr echart-wr100">
+              <div class="echart-cicle echart-cicle0"></div>
+              <div id="echartType" class="echart-org"></div>
+            </div>
+            <div v-if="false" class="echarts-tips">
+              <div class="tips-list">
+                <div v-for="item in eduItem" :key="item.value" class="tips-item">
+                  <div class="tips-item-icon" :style="'background:' + item.color"></div>
+                  <div class="tips-item-text">{{item.name}}</div>
+                </div>
+                
+              </div>
+            </div>
+          </div>
+          <div class="warning-box-bottom">
+            <screen-table
+              :headerList="headerList"
+              :tableData="tableData"
+              :visibleLoading="visibleLoading"
+              :operate="false"
+            ></screen-table>
+            <div class="pagination">
+              <el-pagination
+                :current-page="pageNo"
+                :page-size="pageSize"
+                background
+                layout="prev, pager, next"
+                @size-change="pageSizeChangeHandleNew"
+                @current-change="pageCurrentChangeHandleNew"
+                :total="total"
+              >
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      
+    </cpt-card>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import screenTable from "../components/screen-table/index";
+import cptCard from "@/views/modules/visual/cpts/card";
+import nextTick from "dai-js/tools/nextTick";
+
+import * as echarts from 'echarts';
+export default {
+  name: "warning-box",
+  components: {
+    cptCard,
+    screenTable,
+  },
+  data() {
+    return {
+      warningList: [],
+      headerList: [
+        { title: "序号", coulmn: 'index' },
+        { title: "姓名", coulmn: 'gridName' },
+        { title: "年龄", coulmn: 'buildingName' },
+        { title: "手机号码", coulmn: 'neighborhoodName' }
+      ],
+      tableData: [
+        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+      ],
+      value2: '',
+      visibleLoading: true,
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      activeIndex: 0,
+      activeLevel: "1",
+      eduItem: [
+        {
+          name: '小学',
+          value: 0,
+          color: 'rgba(27, 81, 255, 1)'
+        }, {
+          name: '初中',
+          value: 1,
+          color: 'rgba(0, 229, 237, 1)'
+        }, {
+          name: '高中',
+          value: 2,
+          color: 'rgba(120, 0, 255, 1)'
+        }, {
+          name: '中专',
+          value: 3,
+          color: 'rgba(255, 120, 0, 1)'
+        }, {
+          name: '大专',
+          value: 4,
+          color: 'rgba(255, 186, 0, 1)'
+        }, {
+          name: '本科',
+          value: 5,
+          color: 'rgba(22, 215, 131, 1)'
+        }, {
+          name: '硕士',
+          value: 6,
+          color: 'rgba(42, 0, 255, 1)'
+        }, {
+          name: '博士',
+          value: 7,
+          color: 'rgba(198, 0, 255, 1)'
+        }, {
+          name: '其他',
+          value: 8,
+          color: 'rgba(255, 42, 0, 1)'
+        }
+      ],
+      ageItem: [
+        {
+          name: '50岁以下',
+          value: 1,
+          color: 'rgba(27, 81, 255, 1)'
+        }, {
+          name: '50-59岁',
+          value: 2,
+          color: 'rgba(0, 229, 237, 1)'
+        }, {
+          name: '60-69岁',
+          value: 3,
+          color: 'rgba(120, 0, 255, 1)'
+        }, {
+          name: '70-79岁',
+          value: 4,
+          color: 'rgba(255, 120, 0, 1)'
+        }, {
+          name: '80岁以上',
+          value: 5,
+          color: 'rgba(255, 186, 0, 1)'
+        }
+      ],
+
+    };
+  },
+  async mounted() {
+    await nextTick(100);
+    this.initCharts()
+    this.initChartType()
+    this.getBuildingwarnlist();
+  },
+  methods: {
+    initCharts() {
+      const eId = document.getElementById('echartOrg')
+      let _charts = echarts.init(eId)
+      let option = {
+        tooltip: {
+          show: false,
+          trigger: 'item'
+        },
+        legend: {
+          show: false,
+          orient: 'vertical',
+          top: '40%',
+          left: 'right',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        title: {
+          text: '12000',  //图形标题，配置在中间对应效果图的80%
+          subtext: '总数',
+          left: "center",
+          top: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 28,
+            align: "center"
+          },
+          subtextStyle: {
+            fontSize: 16,
+            color: '#fff'
+          }
+        },
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            // center: ['10%', '50%'],
+            radius: ['40%', '60%'],
+            avoidLabelOverlap: true,
+            // top: top + '%',
+            // height: '80%',
+            left: 'center',
+            width: 400,
+            label: {
+              show: true,
+              position: 'outer',
+              alignTo: 'edge',
+              formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+              minMargin: 5,
+              edgeDistance: 20,
+              lineHeight: 15,
+              color: '#fff',
+              fontSize: 12,
+              // padding: [5],
+              distanceToLabelLine: 10,
+              rich: {
+                name: {
+                  padding: [0, 6, 0, 6]
+                },
+                a: {
+                  fontSize: 15,
+                  color: '#fff',
+                  padding: [0, 6, 0, 6]
+                },
+                r: {
+                  backgroundColor: 'auto',
+                  borderRadius: 6,
+                  width: 6,
+                  height: 6,
+                  // padding: [3, 3, 0, -12]
+                }
+              }
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '14',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: true,
+              length: 20,
+              length2: 0,
+              maxSurfaceAngle: 80,
+              lineStyle: {
+                cap: 'round'
+              }
+            },
+            labelLayout: function (params) {
+              const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+              const points = params.labelLinePoints;
+              // Update the end point.
+              points[2][0] = isLeft
+                ? params.labelRect.x
+                : params.labelRect.x + params.labelRect.width;
+              return {
+                labelLinePoints: points
+              };
+            },
+            data: this.ageItem
+          }
+        ]
+      }
+      option && _charts.setOption(option);
+
+    },
+    initChartType() {
+      const eId = document.getElementById('echartType')
+      let _charts = echarts.init(eId)
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          show: true,
+          orient: 'vertical',
+          top: '20%',
+          right: 0,
+          textStyle: {
+            width: 90,
+            color: '#fff',
+            rich: {
+              a: {
+                width: 90
+              }
+            }
+          },
+          formatter: name => {
+            for (let a = 0; a < this.eduItem.length; a++) {
+              // this.data  这个数据中有名称和次数
+              if (this.eduItem[a].name === name) {
+                //两个名称进行对比，取出对应的次数
+                let params1 = name + "\n"; //然后return你需要的legend格式即可
+                console.log(params1);
+                let tmp = params1.split("\n");
+                let res = "" + params1;
+                for (let i in tmp) {
+                  res = res.replace(tmp[i], "");
+                }
+                return res + params1;
+              }
+            }
+          //   var target;
+          //   for(var i = 0; i < this.eduItem.length; i++){
+          //       if(i == this.eduItem.length && parseFloat(this.eduItem[i].value * 100).toFixed(2) < parseFloat(0.01)){
+          //           target = " (<0.01"
+          //           break;
+          //       }
+          //       if(name == this.eduItem[i].name){
+          //           target = " (" + (this.eduItem[i].value * 100).toFixed(2) + ""
+          //           break;
+          //       }
+          //   }
+          //   var arr = [
+          //       '{a|' + name + target + '%)}',
+          //   ]
+          //   return arr.join('\n');
+          }
+        },
+        title: {
+          text: '12000',  //图形标题，配置在中间对应效果图的80%
+          subtext: '总数',
+          left: 196,
+          top: "center",
+          textAlign: 'center',
+          textStyle: {
+            color: "#fff",
+            fontSize: 28,
+            align: "center"
+          },
+          subtextStyle: {
+            fontSize: 16,
+            color: '#fff',
+            align: 'center'
+          }
+        },
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            // center: ['50%', '50%'],
+            radius: ['40%', '60%'],
+            avoidLabelOverlap: true,
+            // top: top + '%',
+            // height: '80%',
+            // left: 0,
+            width: 400,
+            label: {
+              position: 'outside',
+              alignTo: 'edge',
+              formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+              minMargin: 5,
+              edgeDistance: 20,
+              lineHeight: 15,
+              color: '#fff',
+              fontSize: 15,
+              rich: {
+                name: {
+                  padding: [0, 6, 0, 6]
+                },
+                a: {
+                  fontSize: 15,
+                  color: '#fff',
+                  padding: [0, 6, 0, 6]
+                },
+                r: {
+                  backgroundColor: 'auto',
+                  borderRadius: 6,
+                  width: 6,
+                  height: 6,
+                  // padding: [3, 3, 0, -12]
+                }
+              }
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '14',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: true,
+              length: 20,
+              length2: 0,
+              maxSurfaceAngle: 80
+            },
+            labelLayout: function (params) {
+              const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+              const points = params.labelLinePoints;
+              // Update the end point.
+              points[2][0] = isLeft
+                ? params.labelRect.x
+                : params.labelRect.x + params.labelRect.width;
+              return {
+                labelLinePoints: points
+              };
+            },
+            data: this.eduItem
+          }
+        ]
+      }
+      option && _charts.setOption(option);
+
+    },
+    onClickList(index, level) {
+      this.activeIndex = index;
+      this.activeLevel = level;
+      this.pageNo = 1;
+      this.getUserwarnlist();
+    },
+    //具体人员列表
+    async getUserwarnlist() {
+      const { activeIndex, activeLevel, warningList } = this;
+      const reqItem = warningList[activeIndex];
+      let tableData = [];
+      const url = "/epmetuser/statsresiwarn/userwarnlist";
+      let params = {
+        configId: reqItem.configId,
+        buildingIdList: reqItem["buildingIdList" + activeLevel],
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        tableData = data.list.map((item, index) => {
+          return {
+            ...item,
+            index: index + 1,
+            residentNames: item.residentNames || "暂无"
+          }
+        });
+        this.tableData = tableData;
+        this.total = data.total;
+      } else {
+      }
+    },
+    // 【人员预警】 楼宇预警数量列表
+    async getBuildingwarnlist() {
+      const url = "/epmetuser/statsresiwarn/buildingwarnlist";
+      let params = {
+        agencyId: this.$store.state.user.agencyId,
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.warningList = data;
+        this.visibleLoading = false;
+        this.getUserwarnlist();
+      } else {
+      }
+    },
+    pageSizeChangeHandleNew(val) {
+      this.pageNo = 1;
+      this.pageSize = val;
+    },
+    pageCurrentChangeHandleNew(val) {
+      this.pageNo = val;
+      this.getUserwarnlist();
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/warning.scss"
+  scoped
+></style>
+<style lang="scss" scoped>
+.card-title {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .title-icon {
+    display: block;
+    width: 46px;
+    height: 34px;
+    box-sizing: border-box;
+    margin-right: 6px;
+  }
+  ::v-deep .el-dropdown {
+    font-size: 18px;
+    color: #fff;
+    font-weight: 800;
+  }
+  .title-time {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    margin-left: 30px;
+    font-size: 14px;
+    color: #fff;
+    .title-time-label {
+      margin-right: 10px;
+    }
+    ::v-deep .el-date-editor--month {
+      width: 100px;
+      .el-input__inner {
+        width: 100px;
+        height: 24px;
+        box-sizing: border-box;
+        padding: 0;
+        font-size: 14px;
+        color: #fff;
+        line-height: 24px;
+        text-align: center;
+        background: #06186D;
+        border: 1px solid #1A64CC;
+        border-radius: 2px;
+      }
+      .el-input__prefix {
+        display: none;
+      }
+      .el-input__suffix {
+        right: 0;
+        .el-input__icon {
+          line-height: 24px;
+        }
+      }
+      
+    }
+  }
+}
+.card-echart {
+  display: flex;
+  margin-top: 40px;
+  height: 100%;
+  .card-left {
+    position: relative;
+    flex: 1;
+    // display: flex;
+    height: 100%;
+    .card-flex {
+      width: 100%;
+      display: flex;
+    }
+  }
+}
+.card-left-title {
+  position: relative;
+  padding-left: 40px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+}
+.card-left-title::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 20px;
+  width: 12px;
+  height: 12px;
+  box-sizing: border-box;
+  margin-top: -6px;
+  background: #2865FA;
+  border-radius: 50%;
+}
+.echart-wr {
+  position: relative;
+  flex-shrink: 0;
+  width: 50%;
+  height: 320px;
+  box-sizing: border-box;
+  .echart-org {
+    width: 100%;
+    height: 100%;
+  }
+  .echart-cicle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 240px;
+    height: 240px;
+    box-sizing: border-box;
+    margin-top: -120px;
+    margin-left: -120px;
+    border: 1px dashed rgba(0, 96, 240, 1);
+    border-radius: 50%;
+  }
+  .echart-cicle0 {
+    left: 80px;
+    margin-left: 0;
+  }
+}
+.echart-wr100 {
+  width: 70%;
+}
+.echarts-tips {
+  width: 40%;
+  // flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.echarts-tips-wd50 {
+  width: 320px;
+}
+.tips-list, .tips-item, .tips-lists, .tips-items-num {
+  display: flex;
+  align-items: center;
+}
+.tips-list {
+  // width: 100%;
+  // height: 100%;
+  flex-wrap: wrap;
+  // justify-content: center;
+  .tips-item {
+    // flex: 1;
+    width: 50%;
+    margin-top: 20px;
+    // margin-right: 40px;
+    cursor: pointer;
+    .tips-item-icon {
+      width: 20px;
+      height: 10px;
+      box-sizing: border-box;
+      margin-right: 8px;
+      background: #1B51FF;
+      border-radius: 2px;
+    }
+    .tips-item-text {
+      font-size: 16px;
+      color: #D2E7FF;
+    }
+  }
+}
+.tips-lists {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 30px 0 0 30px;
+  flex-wrap: wrap;
+  .tips-items {
+    margin-bottom: 30px;
+    margin-right: 40px;
+    // width: 50%;
+    cursor: pointer;
+    .tips-items-title {
+      position: relative;
+      width: 100px;
+      height: 26px;
+      box-sizing: border-box;
+      padding-left: 6px;
+      font-size: 16px;
+      color: #EFF0F1;
+      background: url('../../../../assets/img/shuju/measure/zi@2x.png') no-repeat left bottom;
+      &1 {
+        background: url('../../../../assets/img/shuju/measure/huang@2x.png') no-repeat left bottom;
+      }
+      &2 {
+        background: url('../../../../assets/img/shuju/measure/lan@2x.png') no-repeat left bottom;
+      }
+      &3 {
+        background: url('../../../../assets/img/shuju/measure/lanlv@2x.png') no-repeat left bottom;
+      }
+      &4 {
+        background: url('../../../../assets/img/shuju/measure/lv@2x.png') no-repeat left bottom;
+      }
+    }
+    .tips-items-num {
+      justify-content: space-between;
+      box-sizing: border-box;
+      margin-top: 10px;
+      // padding-right: 30px;
+      font-size: 20px;
+      .tips-item-has {
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+.warning-box-bottom {
+  height: calc(100% - 500px);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 30px;
+  // overflow-y: scroll;
+}
+</style>
diff --git a/src/views/modules/visual/components/screen-echarts-frame/index.vue b/src/views/modules/visual/components/screen-echarts-frame/index.vue
new file mode 100644
index 00000000..e9503385
--- /dev/null
+++ b/src/views/modules/visual/components/screen-echarts-frame/index.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="screenEchartsFrame"
+       ref="screenEchartsFrame"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'screen-echarts-frame',
+  data () {
+    return {
+      myChart: ''
+    }
+  },
+  props: {
+    chartMethod: {
+      type: Function
+    }
+  },
+  mounted () {
+    this.initChart()
+    window.onresize = () => {
+      this.myChart.resize()
+    }
+  },
+  beforeDestroy () {
+    // 销毁echarts实例对象
+    if (this.myChart) this.myChart.dispose()
+  },
+  watch: {},
+  methods: {
+    initChart () {
+
+      this.$nextTick(() => {
+        const dom = this.$refs.screenEchartsFrame
+        this.myChart = echarts.init(dom)
+
+        // this.myChart.setOption(this.chartMethod());
+        this.$emit('myChartMethod', this.myChart)
+      })
+    },
+    //点击pie事件
+    handleClick (fun) {
+      this.myChart.on('click', fun);
+    },
+
+    //高亮
+    highLight (index) {
+      this.myChart.dispatchAction({
+        type: 'highlight',
+        seriesIndex: 1,
+        dataIndex: index
+      });
+    },
+
+    // 配置option
+    setOption (option) {
+      this.myChart.setOption(option)
+    },
+    // 获取option
+    getOption () {
+      if (this.myChart) {
+        return this.myChart.getOption()
+      } else {
+        return null
+      }
+    },
+    //
+    resize () {
+      if (this.myChart) {
+        this.myChart.resize()
+      }
+    },
+    clear () {
+      if (this.myChart) {
+        this.myChart.clear()
+      }
+    },
+    showLoading () {
+      if (this.myChart) {
+        this.$nextTick(() => {
+          this.myChart.showLoading({
+            text: '',
+            color: '#29cdff',
+            textColor: '#29cdff',
+            maskColor: 'rgba(255, 255, 255, 0)',
+            zlevel: 0
+
+          })
+        })
+      }
+    },
+    hideLoading () {
+
+      if (this.myChart) {
+        this.myChart.hideLoading()
+      }
+    },
+    // 启动动画时使用
+    tooltipAnimate (chart, length) {
+      // 清除上一次动画
+      this.timeTicket && clearInterval(this.timeTicket)
+      const count = 0
+      // 启动动画
+      this._action(chart, count, length)
+      chart && // 移除动画
+        chart.on('mouseover', params => {
+          this._cleanAction(chart, params)
+        })
+      // 重写启动动画
+      chart &&
+        chart.on('mouseout', () => {
+          this._action(chart, count, length)
+        })
+    },
+    // tooltip动画action
+    _action (chart, count, length) {
+      this.timeTicket && clearInterval(this.timeTicket)
+      this.timeTicket = setInterval(() => {
+        if (!chart) {
+          clearInterval(this.timeTicket)
+          return
+        }
+        chart &&
+          chart.dispatchAction({
+            type: 'downplay',
+            seriesIndex: 0
+          })
+        chart &&
+          chart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: 0,
+            dataIndex: count % length
+          })
+        chart &&
+          chart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: count % length
+          })
+        count++
+      }, 1000 * 3)
+    },
+    _cleanAction (chart, params) {
+      this.timeTicket && clearInterval(this.timeTicket)
+      if (!chart) {
+        clearInterval(this.timeTicket)
+        return
+      }
+      chart &&
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0
+        })
+      chart &&
+        chart.dispatchAction({
+          type: 'highlight',
+          seriesIndex: 0,
+          dataIndex: params.dataIndex
+        })
+      chart &&
+        chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: params.dataIndex
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.screenEchartsFrame {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/modules/visual/components/screen-loading/index.vue b/src/views/modules/visual/components/screen-loading/index.vue
new file mode 100644
index 00000000..cc8bda6f
--- /dev/null
+++ b/src/views/modules/visual/components/screen-loading/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="screen-loading">
+    <svg width="50px"
+         height="50px">
+      <circle cx="25"
+              cy="25"
+              r="20"
+              fill="transparent"
+              stroke-width="3"
+              stroke-dasharray="31.415, 31.415"
+              stroke="#29cdff"
+              stroke-linecap="round">
+        <animateTransform attributeName="transform"
+                          type="rotate"
+                          values="0, 25 25;360, 25 25"
+                          dur="1.5s"
+                          repeatCount="indefinite" />
+        <animate attributeName="stroke"
+                 values="#02bcfe;#3be6cb;#02bcfe"
+                 dur="3s"
+                 repeatCount="indefinite" />
+      </circle>
+
+      <circle cx="25"
+              cy="25"
+              r="10"
+              fill="transparent"
+              stroke-width="3"
+              stroke-dasharray="15.7, 15.7"
+              stroke="#29cdff"
+              stroke-linecap="round">
+        <animateTransform attributeName="transform"
+                          type="rotate"
+                          values="360, 25 25;0, 25 25"
+                          dur="1.5s"
+                          repeatCount="indefinite" />
+        <animate attributeName="stroke"
+                 values="#3be6cb;#02bcfe;#3be6cb"
+                 dur="3s"
+                 repeatCount="indefinite" />
+      </circle>
+    </svg>
+    <div class="loading-tip">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DvLoading'
+}
+</script>
+
+<style lang="scss" scoped>
+.screen-loading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .loading-tip {
+    font-size: 14px;
+    color: #fff;
+  }
+}
+</style>
diff --git a/src/views/modules/visual/components/screen-map/index copy.vue b/src/views/modules/visual/components/screen-map/index copy.vue
new file mode 100644
index 00000000..09217e02
--- /dev/null
+++ b/src/views/modules/visual/components/screen-map/index copy.vue	
@@ -0,0 +1,516 @@
+<template>
+  <div style="position: relative">
+
+    <div class="div_map"
+         id="map"
+         ref="map">
+      <!-- <div id="map"
+             class="map"></div> -->
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+import 'ol/ol.css'
+import { Map, View } from 'ol'
+import TileLayer from 'ol/layer/Tile.js';
+import XYZ from 'ol/source/XYZ.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import VectorSource from 'ol/source/Vector.js';
+import GeoJSON from 'ol/format/GeoJSON.js';
+import Point from "ol/geom/Point.js";
+import Feature from "ol/Feature.js";
+import Overlay from 'ol/Overlay';
+import { defaults as defaultInteractions, Select, DoubleClickZoom } from 'ol/interaction.js';
+import { getCenter, boundingExtent } from 'ol/extent.js';
+import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js';
+
+import { mapGetters } from "vuex";
+import { Loading } from 'element-ui'; //引入Loading服务
+import { requestPost } from "@/js/dai/request";
+
+
+
+let loading;//加载动画
+
+let map;
+let mapView;
+let gaodeMapLayer;//背景地图图层
+let polygonLayer;//区域标注图层
+let iconLayer; // icon标注图层
+let iconSource; // icon
+let polygonSource;//标注多边形
+let select;//选中标注
+
+
+//url图标
+
+let iconUrlArray = [
+  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
+  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
+  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
+];
+let textColorArray = [
+  'rgba(236, 69, 4, 0.66)',
+  'rgba(0, 146, 238, 0.75)',
+  'rgba(238, 151, 0, 0.8)'
+];
+let polygonColorArray = [
+  'rgba(210, 2, 2, 0.24)',
+  'rgba(43, 231, 253, 0.25)',
+  'rgba(183, 185, 0, 0.16)'
+];
+//变电站标注的文字样式
+var createTextStyle = function (feature) {
+  return new Text({
+    textAlign: undefined,
+    font: "18px Arial",
+    //fontFamily: "Courier New, monospace",
+    // fontWeight: "bold",
+    text: feature.values_.name,
+    backgroundFill: new Fill({
+      // color: 'rgba(0, 146, 238, 0.75)'
+      color: textColorArray[feature.values_.index - 1]
+    }),
+    padding: [4, 10, 4, 10],
+    //text: "变电站名称",
+    fill: new Fill({ color: "#ffffff" }),
+    // stroke: new Stroke({ color: "#ffffff", width: 3 }),
+    offsetY: -30,
+    offsetX: -50,
+    overflow: true,
+  });
+};
+
+//变电站标注样式
+
+var polygonStyleFunction = (function () {
+  return function (feature) {
+    return new Style({
+      fill: new Fill({
+        // color: [255, 255, 255, 0.3]
+        color: polygonColorArray[feature.values_.index - 1]
+      }),
+      stroke: new Stroke({
+        color: polygonColorArray[feature.values_.index - 1],
+        width: 3
+      }),
+
+      text: createTextStyle(feature)
+    });;
+  };
+})()
+
+const vueGis = {
+  name: 'HomeMap',
+  data () {
+    return {
+      centerPoint: [],//中心点位置
+      zoom: 14,//缩放范围：区14
+      minZoom: 1,//最小缩放
+
+      orgData: {},//当前组织对象
+      orgId: '',
+      orgLevel: '',
+
+      subAgencyArray: [],//下拉框数据
+      iconCoordinators: [],
+      currentCoordinate: null,
+      overlay: null,
+
+
+    }
+  },
+  async mounted () {
+    //加载组织数据
+    await this.loadOrgData()
+
+    //初始化地图
+    this.initMap()
+
+    //添加标注图层
+    this.addPolygonLayer()
+
+    //添加icontuceng
+    this.addIconLayer()
+
+    //加载当前园区的标注
+    this.loadPolygon(this.subAgencyArray)
+
+
+
+  },
+  methods: {
+
+    //刷新地图
+    async refreshMap (isRefreshView) {
+
+      //加载组织数据
+      await this.loadOrgData()
+
+      //加载当前园区的标注
+      await this.loadPolygon(this.subAgencyArray)
+
+      //重置地图中心点
+      if (isRefreshView) {
+        this.setMapLocation()
+        mapView.setCenter(this.centerPoint);
+        mapView.setZoom(this.zoom);
+      }
+
+
+    },
+
+
+    //加载组织数据
+    async loadOrgData () {
+
+      const url = "/gov/org/agency/maporg"
+      let params = {
+        orgId: this.orgId,
+        level: this.orgLevel
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+
+        this.orgData = data
+        this.orgId = this.orgData.id
+        this.orgLevel = this.orgData.level
+
+        if (data.children && data.children.length > 0) {
+          this.subAgencyArray = data.children
+        } else {
+          this.subAgencyArray = []
+        }
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+    //加载当前园区的标注
+    loadPolygon (subAgencyArray) {
+      polygonSource.clear()//清空多边形标注
+      iconSource.clear()//清空多边形标注
+
+      let featureData = []//标注数据
+      if (subAgencyArray && subAgencyArray.length > 0) {//判断是否存在下级标注
+        let oneData = {}
+
+        subAgencyArray.forEach(agencyItem => {
+
+          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
+            let urlNum = this.getRndBetween(1, 3)
+
+            oneData = {
+              type: 'Feature',
+              id: agencyItem.id,
+              properties: {
+                id: agencyItem.id,
+                level: agencyItem.level,
+                name: agencyItem.name,
+                index: urlNum//颜色随机的索引
+              },
+              geometry: {
+                type: 'Polygon',
+                coordinates: [],
+              },
+            }
+            let coorArray = agencyItem.coordinates.split(',')//坐标数组
+
+            let itemArray = []//单个点位的[lon,lat]，数组
+            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
+
+            coorArray.forEach((item, index) => {
+              itemArray.push(item)
+              if (index % 2 == 0) {//偶
+
+              } else {//奇
+                polygonArray.push(itemArray)
+                itemArray = []
+              }
+
+            });
+            oneData.geometry.coordinates.push(polygonArray)
+            featureData.push(oneData)
+          }
+        });
+      }
+
+      if (featureData && featureData.length > 0) {
+        var geojsonObject = {
+          'type': 'FeatureCollection',
+          'features': featureData
+        };
+        let feature = (new GeoJSON()).readFeatures(geojsonObject)
+
+        polygonSource.addFeatures(feature)
+
+        let iconFeatures = [];
+        feature.forEach(oneIcon => {
+
+          var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
+          // var center = getCenter(extent);   //获取边界区域的中心位置
+          //添加标注
+          let x = (parseFloat(extent[0]) + parseFloat(extent[2])) / 2
+          let y = (parseFloat(extent[1]) + parseFloat(extent[3])) / 2
+
+          let oneArray = [x, y]
+          this.iconCoordinators.push(oneArray)
+          // debugger
+
+          let oneCctv = new Feature({
+            geometry: new Point([x, y]),
+            id: oneIcon.id_,
+            properties: {
+              type: "icon",
+              id: oneIcon.id_
+            }
+          });
+
+          let iconStyle = new Style({
+            image: new Icon({
+              // anchor: [0.5, 0.5],
+              // imgSize: [32, 32],
+              scale: 0.5,
+              src: iconUrlArray[oneIcon.values_.index - 1]
+            })
+          });
+
+          oneCctv.setStyle(iconStyle);
+          iconFeatures.push(oneCctv);
+
+        });
+
+        iconSource.addFeatures(iconFeatures);
+      }
+
+      // this.addGif()
+
+    },
+    //设置地图定位的中心点和缩放级别
+    setMapLocation () {
+      this.centerPoint = []
+
+      if (this.orgData.longitude && this.orgData.latitude) {
+        this.centerPoint.push(this.orgData.longitude)
+        this.centerPoint.push(this.orgData.latitude)
+      }
+
+      this.setZoom(this.orgData.agencyLevel)
+    },
+
+    //根据组织层级设置缩放级别
+    setZoom (agencyLevel) {
+      if (agencyLevel === 'district') {
+        this.zoom = 14
+      } else if (agencyLevel === 'street') {
+        this.zoom = 15
+      } else if (agencyLevel === 'community') {
+        this.zoom = 16
+      }
+
+    },
+
+    initMap () {
+      this.setMapLocation()
+
+      gaodeMapLayer = new TileLayer({
+        title: "地图",
+        source: new XYZ({
+          //指定url瓦片
+          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
+          wrapX: true//x方向平铺，也可以选择false
+        }),
+        zIndex: 20
+      });
+
+      mapView = new View({
+        //中心点坐标
+        center: this.centerPoint,
+        // projection: 'EPSG:3857',
+        projection: 'EPSG:4326',
+        zoom: this.zoom,
+        minZoom: this.minZoom
+      })
+
+      //初始化map和地图底图
+      //创建地图容器
+      map = new Map({
+        layers: [gaodeMapLayer],
+        //加载瓦片图层数据
+        view: mapView,
+        target: 'map'
+        //目标加载到map中
+      })
+
+      map.on('singleclick', function (e) {
+        // console.log(e.coordinate)
+        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
+      })
+
+      //去除双击放大效果
+      const dblClickInteraction = map
+        .getInteractions()
+        .getArray()
+        .find(interaction => {
+          return interaction instanceof DoubleClickZoom;
+        });
+      map.removeInteraction(dblClickInteraction);
+
+    },
+
+    //添加变电站标注图层
+    addPolygonLayer () {
+      polygonSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      polygonLayer = new VectorLayer({
+        source: polygonSource,
+        style: polygonStyleFunction,
+        zIndex: 50
+      });
+
+      //选中多边形后的样式
+      var overlayStyle = (function () {
+
+        return function (feature) {
+          var styles = {};
+          styles['Polygon'] = [
+            new Style({
+              stroke: new Stroke({
+                color: '#ec9000',
+                width: 2
+              })
+            }),
+
+            new Style({
+              fill: new Fill({
+                color: 'rgba(0, 0, 255, 0.1)'
+              })
+            }),
+            new Style({
+              text: createTextStyle(feature)
+            })
+          ];
+          styles['MultiPolygon'] = styles['Polygon'];
+          return styles[feature.getGeometry().getType()];
+        };
+      })();
+
+      select = new Select({
+        style: overlayStyle
+      });
+
+
+      map.addLayer(polygonLayer)
+      map.addInteraction(select);
+
+
+
+    },
+
+    addIconLayer () {
+      iconSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      iconLayer = new VectorLayer({
+        source: iconSource,
+        zIndex: 70
+      });
+
+      map.addLayer(iconLayer);
+
+    },
+
+    //取随机数
+    getRndBetween (lowerLimit, upperLimit) {
+      return Math.floor(Math.random() * (upperLimit - lowerLimit + 1)) + lowerLimit;
+    },
+
+    //开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, //是否锁定
+        text: '正在加载……', //加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' //背景颜色
+      });
+
+    },
+
+    //结束加载动画
+    endLoading () {
+      //clearTimeout(timer);
+      if (loading) {
+        loading.close();
+      }
+    },
+  },
+  props: {
+    //是否显示多边形图层
+    showPolygonLayer: {
+      type: Boolean,
+      default: false
+    },
+
+    //是否显示标注
+    showIconLayer: {
+      type: Boolean,
+      default: false
+    }
+
+  },
+  computed: {
+
+    mapHeight () {
+
+      return this.clientHeight - 120;
+
+    },
+    // zoom: {
+    //   get () {
+    //     //根据不同屏幕分辨率，控制zoom大小
+    //     if (this.clientHeight < 900) {
+    //       return 2.3
+    //     } else {
+    //       return 2.8
+    //     }
+    //   },
+    //   set (value) {
+    //   }
+    // },
+    ...mapGetters(["clientHeight"])
+
+  },
+  components: {},
+}
+export default vueGis;
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/basicInfoMain.scss"
+  scoped
+></style>
+
+<style lang="scss" >
+.div_content {
+  .ol-viewport {
+    border-radius: 5px;
+  }
+}
+.ol-overlaycontainer-stopevent {
+  display: none;
+}
+
+.el-scrollbar__wrap {
+  overflow-x: hidden !important;
+}
+</style>   
\ No newline at end of file
diff --git a/src/views/modules/visual/components/screen-map/index.vue b/src/views/modules/visual/components/screen-map/index.vue
new file mode 100644
index 00000000..4dfac221
--- /dev/null
+++ b/src/views/modules/visual/components/screen-map/index.vue
@@ -0,0 +1,612 @@
+<template>
+  <div style="position: relative">
+
+    <div class="div_map"
+         id="map"
+         ref="map">
+      <!-- <div id="map"
+             class="map"></div> -->
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+import 'ol/ol.css'
+import { Map, View } from 'ol'
+import TileLayer from 'ol/layer/Tile.js';
+import XYZ from 'ol/source/XYZ.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import VectorSource from 'ol/source/Vector.js';
+import GeoJSON from 'ol/format/GeoJSON.js';
+import Point from "ol/geom/Point.js";
+import Feature from "ol/Feature.js";
+import Overlay from 'ol/Overlay';
+import { defaults as defaultInteractions, Select, DoubleClickZoom } from 'ol/interaction.js';
+import { getCenter, boundingExtent } from 'ol/extent.js';
+import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js';
+
+import { mapGetters } from "vuex";
+import { Loading } from 'element-ui'; //引入Loading服务
+import { requestPost } from "@/js/dai/request";
+
+
+
+let loading;//加载动画
+
+let map;
+let mapView;
+let gaodeMapLayer;//背景地图图层
+let polygonLayer;//区域多边形标注图层
+let polygonSource;//标注多边形
+
+let polIconLayer; // 区域icon标注图层
+let polIconSource; // icon
+
+let iconLayer; // icon图层
+let iconSource; // icon
+
+let select;//选中标注
+
+
+//url图标
+
+
+let textColorArray = [
+  'rgba(236, 69, 4, 0.66)',
+  'rgba(0, 146, 238, 0.75)',
+  'rgba(238, 151, 0, 0.8)'
+];
+let polygonColorArray = [
+  'rgba(210, 2, 2, 0.24)',
+  'rgba(43, 231, 253, 0.25)',
+  'rgba(183, 185, 0, 0.16)'
+];
+//变电站标注的文字样式
+var createTextStyle = function (feature) {
+  return new Text({
+    textAlign: undefined,
+    font: "18px Arial",
+    //fontFamily: "Courier New, monospace",
+    // fontWeight: "bold",
+    text: feature.values_.name,
+    backgroundFill: new Fill({
+      // color: 'rgba(0, 146, 238, 0.75)'
+      color: textColorArray[feature.values_.index - 1]
+    }),
+    padding: [4, 10, 4, 10],
+    //text: "变电站名称",
+    fill: new Fill({ color: "#ffffff" }),
+    // stroke: new Stroke({ color: "#ffffff", width: 3 }),
+    offsetY: -30,
+    offsetX: -50,
+    overflow: true,
+  });
+};
+
+//变电站标注样式
+
+var polygonStyleFunction = (function () {
+  return function (feature) {
+    return new Style({
+      fill: new Fill({
+        // color: [255, 255, 255, 0.3]
+        color: polygonColorArray[feature.values_.index - 1]
+      }),
+      stroke: new Stroke({
+        color: polygonColorArray[feature.values_.index - 1],
+        width: 3
+      }),
+
+      text: createTextStyle(feature)
+    });;
+  };
+})()
+
+const vueGis = {
+  name: 'HomeMap',
+  data () {
+    return {
+      centerPoint: [],//中心点位置
+      zoom: 14,//缩放范围：区14
+      minZoom: 1,//最小缩放
+
+      mapInfo: {
+        agencyLevel: "community",
+        coordinates: "120.37342346270151,36.0950221490494,120.39931465567633,36.09693067926868,120.39740612545705,36.09113306860255,120.39762218548188,36.08911650837086,120.39999884575495,36.0859836380109,120.4010071258708,36.080978247435795,120.39258078490263,36.08094223743166,120.38537878407514,36.08303081767163,120.37616022301596,36.082382637597156,120.37342346270151,36.0950221490494",
+        id: "6e511da6816e53af4cda952365a26eb9",
+        latitude: 36.072227,
+        level: "agency",
+        longitude: 120.389455,
+        name: "南宁社区",
+      },
+
+      polygonArray: [
+        {
+          agencyLevel: "grid",
+          coordinates: "120.37421528296863,36.085017737014525,120.37551227771064,36.08181339174796,120.38108173804676,36.08303409283569,120.3852397566111,36.08318668276358,120.38539234391965,36.090816077003794,120.37410084117755,36.09096866431234,120.37421528296863,36.085017737014525",
+          id: "2a278c0ceb863359d263fda7aabf6752",
+          latitude: 36.072227,
+          level: "grid",
+          longitude: 120.389455,
+          name: "第三网格",
+        },
+        {
+          agencyLevel: "grid",
+          coordinates: "120.38577111171519,36.095762169637716,120.38544318588274,36.08317796726519,120.39339541546589,36.08080049372144,120.40122467708379,36.08026761565102,120.40188052874869,36.08276805856732,120.39929810296697,36.086990119140545,120.39757648953199,36.08981849070392,120.39901116927089,36.0943274884915,120.3977404524482,36.096418022709926,120.38577111171519,36.095762169637716",
+          id: "94227891bc4ad5f40cb95081761592d9",
+          latitude: 36.072227,
+          level: "grid",
+          longitude: 120.389455,
+          name: "南宁第二网格",
+        },
+        {
+          agencyLevel: "grid",
+          coordinates: "120.3736430792519,36.09505039184175,120.373948253869,36.09119754789451,120.38543049205646,36.09115940106737,120.38577381481036,36.0960803587938,120.3736430792519,36.09505039184175",
+          id: "a772a325e022484ef53e4a7d679726f1",
+          latitude: 36.072227,
+          level: "grid",
+          longitude: 120.389455,
+          name: "南宁第一网格",
+        },
+      ],
+
+      iconArrays: [
+        {
+          id: "2a278c0ceb863359d263fda7aabf6752",
+          latitude: 36.072227,
+          longitude: 120.389455,
+          level: "grid",
+          name: "第三网格",
+        },
+        {
+          id: "2a278c0ceb863359d263fda7aabf6753",
+          latitude: 36.072227,
+          longitude: 120.389455,
+          level: "grid",
+          name: "南宁第二网格",
+        },
+        {
+          id: "2a278c0ceb863359d263fda7aabf6742",
+          latitude: 36.072227,
+          longitude: 120.389455,
+          level: "grid",
+          name: "南宁第一网格",
+        }
+      ],
+
+      //policon图标样式
+      polIconUrlArray: [
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
+      ],
+      //icon图标样式
+      iconUrlArray: [
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
+      ],
+
+    }
+  },
+  async mounted () {
+
+
+  },
+  methods: {
+    //加载地图
+    loadMap (mapInfo) {
+      this.mapInfo = mapInfo
+
+      //初始化地图
+      this.initMap()
+
+      if (this.showPolygonLayer) {
+        //初始化多边形标注图层
+        this.initPolygonLayer()
+        //加载当前园区的标注
+        this.loadPolygon()
+      }
+      if (this.showPolIconLayer) {
+
+        //初始化多边形标注图层
+        this.initPolygonLayer()
+        //加载当前园区的标注
+        this.loadPolygon()
+      }
+
+      if (this.showIconLayer) {
+        //初始化icon图层
+        this.initIconLayer()
+      }
+
+
+    },
+
+    //刷新地图
+    async refreshMap (isRefreshView) {
+
+      //加载组织数据
+      await this.loadOrgData()
+
+      //加载当前园区的标注
+      await this.loadPolygon()
+
+      //重置地图中心点
+      if (isRefreshView) {
+        this.setMapLocation()
+        mapView.setCenter(this.centerPoint);
+        mapView.setZoom(this.zoom);
+      }
+
+
+    },
+
+    //加载多边形
+    loadPolygon () {
+      polygonSource.clear()//清空多边形标注
+
+      let featureData = []//多边形数据数据
+      if (polygonArray && polygonArray.length > 0) {//判断是否存在下级标注
+        let oneData = {}
+
+        polygonArray.forEach(polygonItem => {
+
+          if (polygonItem.coordinates && polygonItem.coordinates !== '') {//如果有坐标
+            let urlNum = this.getRndBetween(1, 3)
+
+            oneData = {
+              type: 'Feature',
+              id: polygonItem.id,
+              properties: {
+                id: polygonItem.id,
+                level: polygonItem.level,
+                name: polygonItem.name,
+                index: urlNum//颜色随机的索引
+              },
+              geometry: {
+                type: 'Polygon',
+                coordinates: [],
+              },
+            }
+            let coorArray = polygonItem.coordinates.split(',')//坐标数组
+
+            let itemArray = []//单个点位的[lon,lat]，数组
+            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
+
+            coorArray.forEach((item, index) => {
+              itemArray.push(item)
+              if (index % 2 == 0) {//偶
+
+              } else {//奇
+                polygonArray.push(itemArray)
+                itemArray = []
+              }
+
+            });
+            oneData.geometry.coordinates.push(polygonArray)
+            featureData.push(oneData)
+          }
+        });
+      }
+
+      if (featureData && featureData.length > 0) {
+        var geojsonObject = {
+          'type': 'FeatureCollection',
+          'features': featureData
+        };
+        let feature = (new GeoJSON()).readFeatures(geojsonObject)
+
+        polygonSource.addFeatures(feature)
+
+        if (this.showPolIconLayer) {
+          this.loadPolIcon(feature)
+        }
+
+      }
+
+    },
+
+    //加载多边形的icon
+    loadPolIcon (feature) {
+      let polyIconFeatures = [];
+      feature.forEach(oneIcon => {
+
+        var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
+        // var center = getCenter(extent);   //获取边界区域的中心位置
+        //添加标注
+        let x = (parseFloat(extent[0]) + parseFloat(extent[2])) / 2
+        let y = (parseFloat(extent[1]) + parseFloat(extent[3])) / 2
+
+        let polyIcon = new Feature({
+          geometry: new Point([x, y]),
+          id: oneIcon.id_,
+          properties: {
+            type: "icon",
+            id: oneIcon.id_
+          }
+        });
+
+        let polyIconStyle = new Style({
+          image: new Icon({
+            // anchor: [0.5, 0.5],
+            // imgSize: [32, 32],
+            scale: 0.5,
+            src: polIconUrlArray[oneIcon.values_.index - 1]
+          })
+        });
+
+        polyIcon.setStyle(polyIconStyle);
+        polyIconFeatures.push(polyIcon);
+
+      });
+
+      polIconSource.addFeatures(polyIconFeatures);
+    },
+
+    //加载icon图标
+    loadIcon () {
+      iconSource.clear()//清空多边形标注
+      if (this.iconArrays && this.iconArrays.length > 0) {
+
+        let iconFeatures = [];
+        this.iconArrays.forEach(oneIcon => {
+
+          //添加标注
+          let iconItem = new Feature({
+            geometry: new Point([oneIcon.longitude, oneIcon.latitude]),
+            id: oneIcon.id,
+            properties: {
+              type: "icon",
+              id: oneIcon.id
+            }
+          });
+
+          let iconStyle = new Style({
+            image: new Icon({
+              // anchor: [0.5, 0.5],
+              // imgSize: [32, 32],
+              scale: 0.5,
+              src: iconUrlArray[oneIcon.values_.index - 1]
+            })
+          });
+
+          iconItem.setStyle(iconStyle);
+          iconFeatures.push(iconItem);
+
+        });
+
+        iconSource.addFeatures(iconFeatures);
+      }
+    },
+
+    //初始化地图
+    initMap () {
+      this.setMapLocation()
+      gaodeMapLayer = new TileLayer({
+        title: "地图",
+        source: new XYZ({
+          //指定url瓦片
+          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
+          wrapX: true//x方向平铺，也可以选择false
+        }),
+        zIndex: 20
+      });
+
+      mapView = new View({
+        //中心点坐标
+        center: this.centerPoint,
+        // projection: 'EPSG:3857',
+        projection: 'EPSG:4326',
+        zoom: this.zoom,
+        minZoom: this.minZoom
+      })
+
+      //初始化map和地图底图
+      //创建地图容器
+      map = new Map({
+        layers: [gaodeMapLayer],
+        //加载瓦片图层数据
+        view: mapView,
+        target: 'map'
+        //目标加载到map中
+      })
+
+      map.on('singleclick', function (e) {
+        // console.log(e.coordinate)
+        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
+      })
+
+      //去除双击放大效果
+      const dblClickInteraction = map
+        .getInteractions()
+        .getArray()
+        .find(interaction => {
+          return interaction instanceof DoubleClickZoom;
+        });
+      map.removeInteraction(dblClickInteraction);
+
+    },
+    //设置地图定位的中心点和缩放级别
+    setMapLocation () {
+      this.centerPoint = []
+
+      if (this.mapInfo.longitude && this.mapInfo.latitude) {
+        this.centerPoint.push(this.mapInfo.longitude)
+        this.centerPoint.push(this.mapInfo.latitude)
+      }
+
+      this.setZoom(this.mapInfo.agencyLevel)
+    },
+
+    //根据组织层级设置缩放级别
+    setZoom (agencyLevel) {
+      if (agencyLevel === 'district') {
+        this.zoom = 14
+      } else if (agencyLevel === 'street') {
+        this.zoom = 15
+      } else if (agencyLevel === 'community') {
+        this.zoom = 16
+      }
+
+    },
+
+
+    //初始化多边形标注图层
+    initPolygonLayer () {
+      polygonSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      polygonLayer = new VectorLayer({
+        source: polygonSource,
+        style: polygonStyleFunction,
+        zIndex: 50
+      });
+
+      //选中多边形后的样式
+      var overlayStyle = (function () {
+
+        return function (feature) {
+          var styles = {};
+          styles['Polygon'] = [
+            new Style({
+              stroke: new Stroke({
+                color: '#ec9000',
+                width: 2
+              })
+            }),
+
+            new Style({
+              fill: new Fill({
+                color: 'rgba(0, 0, 255, 0.1)'
+              })
+            }),
+            new Style({
+              text: createTextStyle(feature)
+            })
+          ];
+          styles['MultiPolygon'] = styles['Polygon'];
+          return styles[feature.getGeometry().getType()];
+        };
+      })();
+
+      select = new Select({
+        style: overlayStyle
+      });
+
+
+      map.addLayer(polygonLayer)
+      map.addInteraction(select);
+
+    },
+
+    //初始化多边形icon图层
+    initPolIconLayer () {
+      polIconSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      polIconLayer = new VectorLayer({
+        source: polIconSource,
+        zIndex: 70
+      });
+
+      map.addLayer(polIconLayer);
+
+    },
+
+    //初始化icon图层
+    initIconLayer () {
+      iconSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      iconLayer = new VectorLayer({
+        source: iconSource,
+        zIndex: 90
+      });
+
+      map.addLayer(iconLayer);
+
+    },
+
+    //取随机数
+    getRndBetween (lowerLimit, upperLimit) {
+      return Math.floor(Math.random() * (upperLimit - lowerLimit + 1)) + lowerLimit;
+    },
+
+    //开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, //是否锁定
+        text: '正在加载……', //加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' //背景颜色
+      });
+
+    },
+
+    //结束加载动画
+    endLoading () {
+      //clearTimeout(timer);
+      if (loading) {
+        loading.close();
+      }
+    },
+  },
+  props: {
+    //是否显示多边形图层
+    showPolygonLayer: {
+      type: Boolean,
+      default: false
+    },
+    //是否显示多边形icon图层
+    showPolIconLayer: {
+      type: Boolean,
+      default: false
+    },
+
+    //是否显示标注
+    showIconLayer: {
+      type: Boolean,
+      default: false
+    }
+
+  },
+  computed: {
+
+    mapHeight () {
+      return this.clientHeight - 120;
+
+    },
+
+    ...mapGetters(["clientHeight"])
+
+  },
+  components: {},
+}
+export default vueGis;
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/basicInfoMain.scss"
+  scoped
+></style>
+
+<style lang="scss" >
+.div_content {
+  .ol-viewport {
+    border-radius: 5px;
+  }
+}
+.ol-overlaycontainer-stopevent {
+  display: none;
+}
+
+.el-scrollbar__wrap {
+  overflow-x: hidden !important;
+}
+</style>   
\ No newline at end of file
diff --git a/src/views/modules/visual/components/screen-table/index.vue b/src/views/modules/visual/components/screen-table/index.vue
new file mode 100644
index 00000000..cd75b943
--- /dev/null
+++ b/src/views/modules/visual/components/screen-table/index.vue
@@ -0,0 +1,324 @@
+<template>
+  <div class="warning-table">
+    <div class="table">
+      <div class="table-header">
+        <div
+          class="table-header-th"
+          v-for="(item, index) in headerList"
+          :key="item.title"
+          :style="headerStyle[index]"
+        >
+          {{ item.title }}
+        </div>
+         <div
+          v-if="operate"
+          class="table-header-th"
+        >
+          操作
+        </div>
+      </div>
+      <div class="table-body">
+        <div
+          class="table-body-tr"
+          v-for="(value, index) in tableData"
+          :key="index"
+        >
+          <div
+            class="td"
+            v-for="(item, indexs) in headerList"
+            :key="indexs"
+            :style="tableContentStyle[indexs]"
+          >
+            {{ value[item.coulmn] }}
+            <!-- <span
+              v-if="indexs + 1 == value.length && item.length > 8"
+              class="more"
+              @click.stop="onClickMorePop(index)"
+              ref="morePop"
+            >
+              更多>
+              <span class="more-pop" v-if="visiblePopList[index]">
+                {{ value[item.coulmn] }}
+              </span>
+            </span> -->
+          </div>
+          <div v-if="operate" class="td" @click="look(value)">查看</div>
+        </div>
+        <screen-loading v-if="visibleLoading">加载中</screen-loading>
+        <div class="no-data" v-if="tableData.length == 0 && !visibleLoading">
+          <img
+            src="../../../../../assets/img/modules/visual/noData.png"
+            alt=""
+            srcset=""
+            class="no-data-img"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ScreenLoading from "../screen-loading/index";
+import Vue from "vue";
+export default {
+  name: "warning-table",
+  components: {
+    ScreenLoading,
+  },
+  props: {
+    headerList: {
+      type: Array,
+      required: false,
+      default: () => {
+        return [
+          { title: "序号" },
+          { title: "所属网格" },
+          { title: "所属小区" },
+          { title: "楼号" },
+          { title: "姓名" },
+        ];
+      },
+    },
+    tableData: {
+      type: Array,
+      required: false,
+      default: () => {
+        return [
+          // [
+          //   1,
+          //   "商丘路社区第一网格",
+          //   "商丘路小区",
+          //   "2号楼",
+          //   "杨颖、王平、刘佳敏、丁辉、杨萍",
+          // ],
+          // [
+          //   2,
+          //   "商丘路社区第一网格",
+          //   "商丘路小区",
+          //   "2号楼",
+          //   "杨颖、王平、刘佳敏、丁辉、杨萍",
+          // ],
+        ];
+      },
+    },
+    // 单独给头部设置样式
+    headerStyle: {
+      type: Array,
+      default: () => {
+        return [
+          // {
+          //   width:'200px',
+          //   border:'1px solid red'
+          // },
+          // {
+          //   width:'200px'
+          // }
+        ];
+      },
+    },
+    // 单独给内容设置样式
+    tableContentStyle: {
+      type: Array,
+      default: () => {
+        return [
+          // {
+          //   width:'200px',
+          //   border:'1px solid red'
+          // },
+          // {
+          //   width:'200px'
+          // }
+        ];
+      },
+    },
+    visibleLoading: {
+      type: Boolean,
+      default: true,
+    },
+    operate: {
+      type: Boolean,
+      default: true
+    }
+    // // 表格平均分的份数
+    // ava: {
+    //   type: Number,
+    //   default: 8
+    // },
+    // // 表头高度--默认占比10%
+    // headerHeightAva: {
+    //   type: String,
+    //   default: '10%'
+    // },
+    // // 表格主体平均分成的份数
+    // tableContentAva: {
+    //   type: Number,
+    //   default: 5
+    // },
+  },
+  data() {
+    return {
+      visiblePopList: [
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+      ],
+    };
+  },
+  watch: {
+    tableData(arr) {
+      if (Array.isArray(arr)) {
+        this.visiblePopList = new Array(arr.length).fill(false);
+      }
+    },
+  },
+
+  mounted() {
+    window.addEventListener("click", (e) => {
+      this.visiblePopList = new Array(this.visiblePopList.length).fill(false);
+    });
+  },
+
+  created() {},
+
+  methods: {
+    onClickMorePop(index) {
+      this.visiblePopList.forEach((item, indexs) => {
+        if (index == indexs) {
+          Vue.set(this.visiblePopList, index, true);
+        } else {
+          Vue.set(this.visiblePopList, indexs, false);
+        }
+      });
+    },
+    look(val) {
+      console.log('look-----l', val)
+      this.$emit('look', val)
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.warning-table {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  .table {
+    width: 100%;
+    height: 100%;
+    &-header {
+      width: 100%;
+      height: 50px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      background: rgba(8, 37, 134, 0.85);
+      font-size: 16px;
+      font-weight: 400;
+      color: #ffffff;
+
+      &-th {
+        text-align: center;
+        width: calc(100% / 5);
+      }
+    }
+
+    &-body {
+      box-sizing: border-box;
+      width: 100%;
+      height: calc(100% - 50px);
+      font-size: 18px;
+      font-weight: 400;
+      color: #ffffff;
+
+      &-tr {
+        width: 100%;
+        height: 50px;
+        // height: calc(100% / 10);
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .td {
+          text-align: center;
+          width: calc(100% / 5);
+          cursor: pointer;
+          .more {
+            font-size: 18px;
+            font-weight: 400;
+            color: #e4dc00;
+            position: relative;
+            cursor: pointer;
+
+            &-pop {
+              box-sizing: border-box;
+              display: block;
+              box-sizing: border-box;
+              width: 215px;
+              height: auto;
+              line-height: 20px;
+              border: 1px solid red;
+              position: absolute;
+              right: -100%;
+              top: 150%;
+              background: #06186d;
+              border: 1px solid #1a64cc;
+              border-radius: 5px;
+              font-size: 9px;
+              font-weight: 400;
+              color: #ffffff;
+              padding: 16px 8px 10px 9px;
+              z-index: 1;
+              cursor: default;
+              // &::after{
+              //   position: absolute;
+              //   left: 30%;
+              //   top: -30%;
+              //   display: flex;
+              //   content:'';
+              //   width: 0;
+              //   height: 0;
+              //   border-width: 13px;
+              //   border-style: solid;
+              //   border-color: transparent transparent rgba(26, 100, 204,0.5) transparent;
+              //   // border-color: transparent transparent red transparent;
+              //   transform: translate(-50%,0);
+              // }
+            }
+          }
+        }
+      }
+
+      &-tr:nth-child(2n) {
+        background: rgba(16, 75, 164, 0.24);
+      }
+
+      &-tr:hover {
+        background: url("../../../../../assets/img/modules/visual/hover-bac.png")
+          no-repeat center;
+        background-size: 100% 100%;
+      }
+      // 暂无数据
+      .no-data {
+        width: 100%;
+        height: calc(100% - 50px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &-img {
+          width: 249px;
+          height: 172px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/modules/visual/cpts/loading.vue b/src/views/modules/visual/cpts/loading.vue
new file mode 100644
index 00000000..cc8bda6f
--- /dev/null
+++ b/src/views/modules/visual/cpts/loading.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="screen-loading">
+    <svg width="50px"
+         height="50px">
+      <circle cx="25"
+              cy="25"
+              r="20"
+              fill="transparent"
+              stroke-width="3"
+              stroke-dasharray="31.415, 31.415"
+              stroke="#29cdff"
+              stroke-linecap="round">
+        <animateTransform attributeName="transform"
+                          type="rotate"
+                          values="0, 25 25;360, 25 25"
+                          dur="1.5s"
+                          repeatCount="indefinite" />
+        <animate attributeName="stroke"
+                 values="#02bcfe;#3be6cb;#02bcfe"
+                 dur="3s"
+                 repeatCount="indefinite" />
+      </circle>
+
+      <circle cx="25"
+              cy="25"
+              r="10"
+              fill="transparent"
+              stroke-width="3"
+              stroke-dasharray="15.7, 15.7"
+              stroke="#29cdff"
+              stroke-linecap="round">
+        <animateTransform attributeName="transform"
+                          type="rotate"
+                          values="360, 25 25;0, 25 25"
+                          dur="1.5s"
+                          repeatCount="indefinite" />
+        <animate attributeName="stroke"
+                 values="#3be6cb;#02bcfe;#3be6cb"
+                 dur="3s"
+                 repeatCount="indefinite" />
+      </circle>
+    </svg>
+    <div class="loading-tip">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DvLoading'
+}
+</script>
+
+<style lang="scss" scoped>
+.screen-loading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .loading-tip {
+    font-size: 14px;
+    color: #fff;
+  }
+}
+</style>
diff --git a/src/views/modules/visual/cpts/tb.vue b/src/views/modules/visual/cpts/tb.vue
new file mode 100644
index 00000000..2222a582
--- /dev/null
+++ b/src/views/modules/visual/cpts/tb.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="m-table">
+    <table class="table" border="0" cellspacing="0" cellpadding="0">
+      <col
+        :align="item.align"
+        :width="item.width"
+        :key="'col' + index"
+        v-for="(item, index) in colList"
+      />
+
+      <thead>
+        <tr class="table-header">
+          <th class="table-header-th" v-for="item in header" :key="item">
+            {{ item }}
+          </th>
+        </tr>
+      </thead>
+      <tbody class="table-body">
+        <tr class="table-body-tr" v-for="(value, index) in list" :key="index">
+          <td class="td" v-for="(item, indexs) in value" :key="indexs">
+            <span v-if="typeof item === 'string' || typeof item === 'number'">{{
+              item
+            }}</span>
+            <span v-if="typeof item === 'object' && item.type == 'index'">{{
+              index + 1
+            }}</span>
+            <a
+              v-else-if="typeof item === 'object' && item.type == 'operate'"
+              v-for="btn in item.list"
+              :key="'operate' + index + btn"
+              @click="handleClickBtn(index, btn)"
+              >{{ btn }}</a
+            >
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="table-status" v-if="loading">
+      <screen-loading>加载中</screen-loading>
+    </div>
+
+    <div class="table-status" v-if="list.length == 0 && !loading">
+      <div class="no-data">
+        <img
+          src="../../../../assets/img/modules/visual/noData.png"
+          class="no-data-img"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ScreenLoading from "./loading";
+import Vue from "vue";
+
+export default {
+  name: "table",
+  components: {
+    ScreenLoading,
+  },
+  props: {
+    colList: {
+      type: Array,
+      default: () => {
+        return [
+          // {
+          //   align: "center",
+          //   width: "50%",
+          // },
+        ];
+      },
+    },
+    header: {
+      type: Array,
+      required: false,
+      default: () => {
+        return [
+          // "序号", "所属网格", "操作"
+        ];
+      },
+    },
+    list: {
+      type: Array,
+      required: false,
+      default: () => {
+        return [
+          //   [
+          //     1,
+          //     "商丘路社区第一网格",
+          //     {
+          //       type: "operate",
+          //       list: ["查看"],
+          //     },
+          //   ],
+          //   [
+          //     2,
+          //     "商丘路社区第一网格",
+          //     {
+          //       type: "operate",
+          //       list: ["查看"],
+          //     },
+          //   ],
+        ];
+      },
+    },
+    loading: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {};
+  },
+  watch: {},
+
+  mounted() {},
+
+  created() {},
+
+  methods: {
+    handleClickBtn(index, type) {
+      this.$emit("operate", index, type);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.m-table {
+  .table {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border: none;
+
+    &-header {
+      width: 100%;
+      height: 50px;
+      background: rgba(8, 37, 134, 0.85);
+      font-size: 16px;
+      font-weight: 400;
+      color: #ffffff;
+
+      &-th {
+        text-align: center;
+        border: none;
+        // width: calc(100% / 5);
+      }
+    }
+
+    &-body {
+      box-sizing: border-box;
+      width: 100%;
+      font-size: 18px;
+      font-weight: 400;
+      color: #ffffff;
+
+      &-tr {
+        width: 100%;
+        height: 50px;
+        .td {
+          text-align: center;
+          border: none;
+          a {
+            font-size: 18px;
+            font-weight: 400;
+            color: #e4dc00;
+            position: relative;
+            cursor: pointer;
+          }
+        }
+      }
+
+      &-tr:nth-child(2n) {
+        background: rgba(16, 75, 164, 0.24);
+      }
+
+      &-tr:hover {
+        background: url("../../../../assets/img/modules/visual/hover-bac.png")
+          no-repeat center;
+        background-size: 100% 100%;
+      }
+    }
+  }
+
+  .table-status {
+    position: relative;
+    height: 300px;
+
+    // 暂无数据
+    .no-data {
+      &-img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/modules/visual/measure/service.vue b/src/views/modules/visual/measure/service.vue
new file mode 100644
index 00000000..96cc33ba
--- /dev/null
+++ b/src/views/modules/visual/measure/service.vue
@@ -0,0 +1,519 @@
+<template>
+  <div class="warning-box">
+    <cpt-card>
+      <div class="card-title">
+        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
+        <div class="title-label">
+          <el-dropdown trigger="click">
+            <span class="el-dropdown-link">
+              全部网格<i class="el-icon-caret-bottom el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>黄金糕</el-dropdown-item>
+              <el-dropdown-item>狮子头</el-dropdown-item>
+              <el-dropdown-item>螺蛳粉</el-dropdown-item>
+              <el-dropdown-item>双皮奶</el-dropdown-item>
+              <el-dropdown-item>蚵仔煎</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+        <div class="title-time">
+          <div class="title-time-label">选择时间</div>
+          <div class="">
+            <el-date-picker
+              v-model="value2"
+              type="month"
+              placeholder="选择月">
+            </el-date-picker>
+          </div>
+        </div>
+      </div>
+
+      <!-- <div class="card-echart">
+        <div class="card-left">
+          <div class="echart-wr">
+            <div class="echart-cicle"></div>
+            <div id="echartOrg" class="echart-org"></div>
+          </div>
+          <div class="echarts-tips">
+            <div class="tips-list">
+              <div class="tips-item">
+                <div class="tips-item-icon"></div>
+                <div class="tips-item-text">为民服务</div>
+              </div>
+              <div class="tips-item">
+                <div class="tips-item-icon"></div>
+                <div class="tips-item-text">社会治安综合</div>
+              </div>
+              <div class="tips-item">
+                <div class="tips-item-icon"></div>
+                <div class="tips-item-text">社会治安综合</div>
+              </div>
+              <div class="tips-item">
+                <div class="tips-item-icon"></div>
+                <div class="tips-item-text">卫生计生监管执法</div>
+              </div>
+              <div class="tips-item">
+                <div class="tips-item-icon"></div>
+                <div class="tips-item-text">卫生计生监管执法</div>
+              </div>
+              <div class="tips-item">
+                <div class="tips-item-icon"></div>
+                <div class="tips-item-text">建设管理</div>
+              </div>
+              
+              <div class="tips-item">
+                <div class="tips-item-icon"></div>
+                <div class="tips-item-text">为民服务</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card-left">
+          <div class="echart-wr">
+            <div class="echart-cicle"></div>
+            <div id="echartType" class="echart-org"></div>
+          </div>
+          <div class="echarts-tips echarts-tips-wd50">
+            <div class="tips-lists">
+              <div class="tips-items">
+                <div class="tips-items-title">
+                  <div>志愿者</div>
+                </div>
+                <div class="tips-items-num">
+                  <div class="tips-item-count">17513</div>
+                  <div class="tips-item-has">（服务次数：2430）</div>
+                </div>
+              </div>
+              <div class="tips-items">
+                <div class="tips-items-title">
+                  <div>志愿者</div>
+                </div>
+                <div class="tips-items-num">
+                  <div class="tips-item-count">17</div>
+                  <div class="tips-item-has">（服务次数：2430）</div>
+                </div>
+              </div>
+              <div class="tips-items">
+                <div class="tips-items-title">
+                  <div>志愿者</div>
+                </div>
+                <div class="tips-items-num">
+                  <div class="tips-item-count">175</div>
+                  <div class="tips-item-has">（服务次数：2430）</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div> -->
+
+      <div class="echarts-container">
+        <div id="echartsBox" class="echarts-boxs"></div>
+      </div>
+
+      <div class="warning-box-bottom">
+        <screen-table
+          :headerList="headerList"
+          :tableData="tableData"
+          :visibleLoading="visibleLoading"
+        ></screen-table>
+        <div class="pagination">
+          <el-pagination
+            :current-page="pageNo"
+            :page-size="pageSize"
+            background
+            layout="prev, pager, next"
+            @size-change="pageSizeChangeHandleNew"
+            @current-change="pageCurrentChangeHandleNew"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </cpt-card>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import screenTable from "../components/screen-table/index";
+import cptCard from "@/views/modules/visual/cpts/card";
+import nextTick from "dai-js/tools/nextTick";
+
+import * as echarts from 'echarts';
+export default {
+  name: "warning-box",
+  components: {
+    cptCard,
+    screenTable,
+  },
+  data() {
+    return {
+      warningList: [],
+      headerList: [
+        { title: "序号", coulmn: 'index' },
+        { title: "需求类型", coulmn: 'gridName' },
+        { title: "具体内容", coulmn: 'buildingName' },
+        { title: "上报情况", coulmn: 'neighborhoodName' },
+        { title: "上报人", coulmn: 'residentNames' },
+        { title: "上报时间", coulmn: 'residentNames' },
+        { title: "是否认领", coulmn: 'residentNames' },
+        { title: "认领方", coulmn: 'residentNames' },
+        { title: "认领时间", coulmn: 'residentNames' }
+      ],
+      tableData: [
+        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+      ],
+      value2: '',
+      visibleLoading: true,
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      activeIndex: 0,
+      activeLevel: "1",
+    };
+  },
+  async mounted() {
+    await nextTick(100);
+    this.initCharts()
+    // this.initChartType()
+    this.getBuildingwarnlist();
+  },
+  methods: {
+    initCharts() {
+      const eId = document.getElementById('echartsBox')
+      let _charts = echarts.init(eId)
+
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+          }
+        },
+        legend: {
+          top: 'bottom',
+          bottom: 'bottom',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#fff'
+          },
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            color: '#fff'
+          },
+          // axisLine: false
+        },
+        series: [
+          {
+            name: '区域化党建单位',
+            type: 'bar',
+            stack: 'total',
+            // barWidth: 20,
+            label: {
+              show: true
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [320, 302, 301, 334, 390, 330, 320]
+          },
+          {
+            name: '社会组织',
+            type: 'bar',
+            stack: 'total',
+            // barWidth: 20,
+            label: {
+              show: true
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '社区自组织',
+            type: 'bar',
+            stack: 'total',
+            // barWidth: 20,
+            label: {
+              show: true
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [220, 182, 191, 234, 290, 330, 310]
+          },
+          {
+            name: '志愿者',
+            type: 'bar',
+            stack: 'total',
+            // barWidth: 20,
+            label: {
+              show: true
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [150, 212, 201, 154, 190, 330, 410]
+          },
+          {
+            name: '未完成',
+            type: 'bar',
+            stack: 'total',
+            // barWidth: 20,
+            label: {
+              show: true
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [820, 832, 901, 934, 1290, 1330, 1320]
+          }
+        ]
+      };
+
+      option && _charts.setOption(option);
+
+    },
+    
+    onClickList(index, level) {
+      this.activeIndex = index;
+      this.activeLevel = level;
+      this.pageNo = 1;
+      this.getUserwarnlist();
+    },
+    //具体人员列表
+    async getUserwarnlist() {
+      const { activeIndex, activeLevel, warningList } = this;
+      const reqItem = warningList[activeIndex];
+      let tableData = [];
+      const url = "/epmetuser/statsresiwarn/userwarnlist";
+      let params = {
+        configId: reqItem.configId,
+        buildingIdList: reqItem["buildingIdList" + activeLevel],
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        tableData = data.list.map((item, index) => {
+          return {
+            ...item,
+            index: index + 1,
+            residentNames: item.residentNames || "暂无"
+          }
+        });
+        this.tableData = tableData;
+        this.total = data.total;
+      } else {
+      }
+    },
+    // 【人员预警】 楼宇预警数量列表
+    async getBuildingwarnlist() {
+      const url = "/epmetuser/statsresiwarn/buildingwarnlist";
+      let params = {
+        agencyId: this.$store.state.user.agencyId,
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.warningList = data;
+        this.visibleLoading = false;
+        this.getUserwarnlist();
+      } else {
+      }
+    },
+    pageSizeChangeHandleNew(val) {
+      this.pageNo = 1;
+      this.pageSize = val;
+    },
+    pageCurrentChangeHandleNew(val) {
+      this.pageNo = val;
+      this.getUserwarnlist();
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/warning.scss"
+  scoped
+></style>
+<style lang="scss" scoped>
+.card-title {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .title-icon {
+    display: block;
+    width: 46px;
+    height: 34px;
+    box-sizing: border-box;
+    margin-right: 6px;
+  }
+  ::v-deep .el-dropdown {
+    font-size: 16px;
+    color: #fff;
+    font-weight: 800;
+  }
+  .title-time {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    margin-left: 30px;
+    font-size: 14px;
+    color: #fff;
+    .title-time-label {
+      margin-right: 10px;
+    }
+    ::v-deep .el-date-editor--month {
+      width: 100px;
+      .el-input__inner {
+        width: 100px;
+        height: 24px;
+        box-sizing: border-box;
+        padding: 0;
+        font-size: 14px;
+        color: #fff;
+        line-height: 24px;
+        text-align: center;
+        background: #06186D;
+        border: 1px solid #1A64CC;
+        border-radius: 2px;
+      }
+      .el-input__prefix {
+        display: none;
+      }
+      .el-input__suffix {
+        right: 0;
+        .el-input__icon {
+          line-height: 24px;
+        }
+      }
+      
+    }
+  }
+}
+.card-echart {
+  display: flex;
+  margin-top: 40px;
+  .card-left {
+    position: relative;
+    flex: 1;
+    display: flex;
+    
+  }
+}
+.echart-wr {
+  position: relative;
+  flex-shrink: 0;
+  width: 50%;
+  height: 320px;
+  box-sizing: border-box;
+  .echart-org {
+    width: 100%;
+    height: 100%;
+  }
+  .echart-cicle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 240px;
+    height: 240px;
+    box-sizing: border-box;
+    margin-top: -120px;
+    margin-left: -120px;
+    border: 1px dashed rgba(0, 96, 240, 1);
+    border-radius: 50%;
+  }
+}
+
+.echarts-tips {
+  width: 40%;
+  // flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.echarts-tips-wd50 {
+  width: 50%;
+}
+.tips-list, .tips-item, .tips-lists, .tips-items-num {
+  display: flex;
+  align-items: center;
+}
+.tips-list {
+  // width: 100%;
+  // height: 100%;
+  flex-wrap: wrap;
+  // justify-content: center;
+  .tips-item {
+    // flex: 1;
+    width: 50%;
+    margin-top: 20px;
+    // margin-right: 40px;
+    cursor: pointer;
+    .tips-item-icon {
+      width: 20px;
+      height: 10px;
+      box-sizing: border-box;
+      margin-right: 8px;
+      background: #1B51FF;
+      border-radius: 2px;
+    }
+    .tips-item-text {
+      font-size: 16px;
+      color: #D2E7FF;
+    }
+  }
+}
+.tips-lists {
+  width: 100%;
+  flex-wrap: wrap;
+  .tips-items {
+    margin-bottom: 30px;
+    width: 50%;
+    .tips-items-title {
+      font-size: 16px;
+    }
+    .tips-items-num {
+      justify-content: space-between;
+      box-sizing: border-box;
+      margin-top: 20px;
+      padding-right: 30px;
+      font-size: 20px;
+      .tips-item-has {
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+
+.echarts-boxs {
+  width: 100%;
+  height: 400px;
+}
+
+
+</style>
diff --git a/src/views/modules/visual/measure/volunteer.vue b/src/views/modules/visual/measure/volunteer.vue
new file mode 100644
index 00000000..3f2728f2
--- /dev/null
+++ b/src/views/modules/visual/measure/volunteer.vue
@@ -0,0 +1,495 @@
+<template>
+  <div class="warning-box">
+    <cpt-card class="card-wr">
+      <div class="card-title">
+        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
+        <div class="title-label">
+          志愿者服务情况
+        </div>
+      </div>
+
+      <div class="card-echart">
+        <div class="card-left">
+          <div class="card-count">
+            <div class="card-count-item">
+              <div class="card-count-content">
+                <div class="card-count-num">6500</div>
+                <div class="card-count-label">党员数量</div>
+              </div>
+            </div>
+            <div class="card-count-item">
+              <div class="card-count-content">
+                <div class="card-count-num">6500</div>
+                <div class="card-count-label">居民数量</div>
+              </div>
+            </div>
+          </div>
+          <div class="echart-wr">
+            <!-- <div class="echart-cicle"></div> -->
+            <div id="echartService" class="echart-org"></div>
+          </div>
+          
+        </div>
+        
+      </div>
+
+      <div class="card-echart">
+        <div class="card-left">
+          <div class="card-count">
+            <div class="card-count-item">
+              <div class="card-count-content">
+                <div class="card-count-num">6500</div>
+                <div class="card-count-label">党员数量</div>
+              </div>
+            </div>
+            <div class="card-count-item">
+              <div class="card-count-content">
+                <div class="card-count-num">6500</div>
+                <div class="card-count-label">居民数量</div>
+              </div>
+            </div>
+          </div>
+          <div class="echart-wr">
+            <!-- <div class="echart-cicle"></div> -->
+            <div id="echartCount" class="echart-org"></div>
+          </div>
+          
+        </div>
+        
+      </div>
+
+    </cpt-card>
+    <cpt-card class="card-wr">
+      <div class="card-title">
+        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
+        <div class="title-label">
+          多元化治理平面图
+        </div>
+      </div>
+
+      <div class="map-tips">
+        <div class="map-tips-item">
+          <div class="map-tips-icon"></div>
+          <div class="map-tips-label">调解员</div>
+        </div>
+        <div class="map-tips-item">
+          <div class="map-tips-icon"></div>
+          <div class="map-tips-label">调解员</div>
+        </div>
+        <div class="map-tips-item">
+          <div class="map-tips-icon"></div>
+          <div class="map-tips-label">能人达人</div>
+        </div>
+        <div class="map-tips-item">
+          <div class="map-tips-icon"></div>
+          <div class="map-tips-label">治安巡逻</div>
+        </div>
+        <div class="map-tips-item">
+          <div class="map-tips-icon"></div>
+          <div class="map-tips-label">代办员</div>
+        </div>
+      </div>
+
+      <div class="card-map">
+        这里是地图容器
+      </div>
+
+    </cpt-card>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import screenTable from "../components/screen-table/index";
+import cptCard from "@/views/modules/visual/cpts/card";
+import nextTick from "dai-js/tools/nextTick";
+
+import * as echarts from 'echarts';
+export default {
+  name: "warning-box",
+  components: {
+    cptCard,
+    screenTable,
+  },
+  data() {
+    return {
+      warningList: [],
+      headerList: [
+        { title: "序号", coulmn: 'index' },
+        { title: "需求类型", coulmn: 'gridName' },
+        { title: "具体内容", coulmn: 'buildingName' },
+        { title: "上报情况", coulmn: 'neighborhoodName' },
+        { title: "上报人", coulmn: 'residentNames' },
+        { title: "上报时间", coulmn: 'residentNames' },
+        { title: "是否认领", coulmn: 'residentNames' },
+        { title: "认领方", coulmn: 'residentNames' },
+        { title: "认领时间", coulmn: 'residentNames' }
+      ],
+      tableData: [
+        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+      ],
+      value2: '',
+      visibleLoading: true,
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      activeIndex: 0,
+      activeLevel: "1",
+    };
+  },
+  async mounted() {
+    await nextTick(100);
+    this.initCharts()
+    this.initCount()
+    this.getBuildingwarnlist();
+  },
+  methods: {
+    initCharts() {
+      const eId = document.getElementById('echartService')
+      let _charts = echarts.init(eId)
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          show: true,
+          top: 'bottom',
+          left: 'center',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        title: {
+          text: '12000',  //图形标题，配置在中间对应效果图的80%
+          subtext: '志愿者总数',
+          left: "center",
+          top: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 28,
+            align: "center"
+          },
+          subtextStyle: {
+            fontSize: 16,
+            color: '#fff'
+          }
+        },
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            radius: ['50%', '60%'],
+            avoidLabelOverlap: false,
+            left: 'center',
+            width: 400,
+            label: {
+              show: false,
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: '14',
+                fontWeight: 'bold'
+              }
+            },
+            
+            data: [
+              { 
+                value: 104, 
+                name: '党员', 
+                itemStyle: {
+                  color: 'rgba(26, 178, 255, 1)'
+                } 
+              },
+              { 
+                value: 735, 
+                name: '居民', 
+                itemStyle: {
+                  color: 'rgba(250, 193, 38, 1)'
+                } 
+              }
+            ]
+          }
+        ]
+      }
+      option && _charts.setOption(option);
+
+    },
+    initCount() {
+      const eId = document.getElementById('echartCount')
+      let _charts = echarts.init(eId)
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          show: true,
+          top: 'bottom',
+          left: 'center',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        title: {
+          text: '12000',  //图形标题，配置在中间对应效果图的80%
+          subtext: '志愿者服务总数',
+          left: "center",
+          top: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 28,
+            align: "center"
+          },
+          subtextStyle: {
+            fontSize: 16,
+            color: '#fff'
+          }
+        },
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            // center: ['10%', '50%'],
+            radius: ['50%', '60%'],
+            avoidLabelOverlap: false,
+            // top: top + '%',
+            // height: '80%',
+            left: 'center',
+            width: 400,
+            label: {
+              show: false,
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: '14',
+                fontWeight: 'bold'
+              }
+            },
+            
+            data: [
+              { 
+                value: 1048, 
+                name: '党员', 
+                itemStyle: {
+                  color: 'rgba(26, 178, 255, 1)'
+                } 
+              },
+              { 
+                value: 735, 
+                name: '居民', 
+                itemStyle: {
+                  color: 'rgba(250, 193, 38, 1)'
+                } 
+              }
+            ]
+          }
+        ]
+      }
+      option && _charts.setOption(option);
+
+    },
+    
+    onClickList(index, level) {
+      this.activeIndex = index;
+      this.activeLevel = level;
+      this.pageNo = 1;
+      this.getUserwarnlist();
+    },
+    //具体人员列表
+    async getUserwarnlist() {
+      const { activeIndex, activeLevel, warningList } = this;
+      const reqItem = warningList[activeIndex];
+      let tableData = [];
+      const url = "/epmetuser/statsresiwarn/userwarnlist";
+      let params = {
+        configId: reqItem.configId,
+        buildingIdList: reqItem["buildingIdList" + activeLevel],
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        tableData = data.list.map((item, index) => {
+          return {
+            ...item,
+            index: index + 1,
+            residentNames: item.residentNames || "暂无"
+          }
+        });
+        this.tableData = tableData;
+        this.total = data.total;
+      } else {
+      }
+    },
+    // 【人员预警】 楼宇预警数量列表
+    async getBuildingwarnlist() {
+      const url = "/epmetuser/statsresiwarn/buildingwarnlist";
+      let params = {
+        agencyId: this.$store.state.user.agencyId,
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.warningList = data;
+        this.visibleLoading = false;
+        this.getUserwarnlist();
+      } else {
+      }
+    },
+    pageSizeChangeHandleNew(val) {
+      this.pageNo = 1;
+      this.pageSize = val;
+    },
+    pageCurrentChangeHandleNew(val) {
+      this.pageNo = val;
+      this.getUserwarnlist();
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/warning.scss"
+  scoped
+></style>
+<style lang="scss" scoped>
+.warning-box {
+  display: flex;
+  .card-wr {
+    flex: 1;
+  }
+  .card-wr:last-child {
+    margin-left: 20px;
+  }
+}
+.card-title {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .title-icon {
+    display: block;
+    width: 46px;
+    height: 34px;
+    box-sizing: border-box;
+    margin-right: 6px;
+  }
+  .title-label {
+    font-size: 16px;
+    font-weight: 800;
+  }
+  ::v-deep .el-dropdown {
+    font-size: 16px;
+    color: #fff;
+    font-weight: 800;
+  }
+  
+}
+.card-echart {
+  display: flex;
+  margin-top: 40px;
+  
+  .card-left {
+    position: relative;
+    flex: 1;
+    display: flex;
+  }
+}
+.card-echart:last-child {
+  padding-bottom: 40px;
+}
+.echart-wr {
+  position: relative;
+  flex-shrink: 0;
+  width: 50%;
+  height: 320px;
+  box-sizing: border-box;
+  .echart-org {
+    width: 100%;
+    height: 100%;
+  }
+  .echart-cicle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 240px;
+    height: 240px;
+    box-sizing: border-box;
+    margin-top: -120px;
+    margin-left: -120px;
+    border: 1px dashed rgba(0, 96, 240, 1);
+    border-radius: 50%;
+  }
+}
+.card-count {
+  flex: 1;
+  .card-count-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 418px;
+    height: 124px;
+    box-sizing: border-box;
+    margin-top: 20px;
+    // padding-left: 192px;
+    background: url('../../../../assets/img/shuju/measure/dangyuan.png') center no-repeat;
+    background-size: cover;
+    .card-count-content {
+      position: relative;
+      box-sizing: border-box;
+      padding-left: 30px;
+      color: #fff;
+      cursor: pointer;
+      .card-count-num {
+        font-size: 32px;
+        font-weight: bold;
+      }
+      .card-count-label {
+        margin-top: 6px;
+        font-size: 16px;
+        color: rgba(255, 255, 255, .72);
+      }
+    }
+    .card-count-content::after {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      content: '';
+      width: 1px;
+      height: 50px;
+      margin-top: -25px;
+      background: rgba(98, 162, 205, 1);
+    }
+  }
+  .card-count-item:last-child {
+    background: url('../../../../assets/img/shuju/measure/jumin.png') center no-repeat;
+  }
+}
+
+.map-tips {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding-top: 10px;
+  padding-bottom: 20px;
+  .map-tips-item {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    margin-right: 40px;
+    .map-tips-icon {
+      width: 20px;
+      height: 10px;
+      box-sizing: border-box;
+      margin-right: 10px;
+      background: #DD2719;
+      border-radius: 2px;
+    }
+    .map-tips-label {
+      font-size: 16px;
+      color: #fff;
+    }
+  }
+}
+
+</style>