Merge branch 'master' of http://39.101.188.84:7000/suzhou-jichuang-lanhai/taicangPopulation2

.env.development

@@ -4,9 +4,13 @@ VUE_APP_TITLE = 人口数据管理系统
 # 开发环境配置
 ENV = 'development'
 
-# 政务网/开发环境
-VUE_APP_BASE_API_HTML = "http://122.193.93.182:19002"
-VUE_APP_BASE_API = 'http://122.193.93.182:19002'
+# # 政务网/开发环境
+# VUE_APP_BASE_API_HTML = "http://122.193.93.182:19002"
+# VUE_APP_BASE_API = 'http://122.193.93.182:19002'
+
+# 测试/开发环境
+VUE_APP_BASE_API_HTML = "http://192.168.0.120:19002"
+VUE_APP_BASE_API = "http://192.168.0.120:19002"
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

package.json

@@ -38,6 +38,7 @@
   "dependencies": {
     "@riophae/vue-treeselect": "0.4.0",
     "amfe-flexible": "^2.2.1",
+    "animate.css": "^4.1.1",
     "autofit.js": "^3.1.1",
     "axios": "0.28.1",
     "clipboard": "2.0.8",

src/api/home/index.js

@@ -0,0 +1,181 @@
+/*
+ * @Author: 许宏杰
+ * @Date: 2022-03-31 15:28:43
+ * @LastEditors: 许宏杰
+ * @LastEditTime: 2022-05-24 09:48:55
+ * @FilePath: \taicangpopulationpc\src\api\home\index.js
+ */
+import request from "@/utils/request";
+
+// 获取网格员id
+export function getNetWorkId(params) {
+  return request({
+    url: "/taicangpop/data/getparentid",
+    method: "GET",
+    params,
+  });
+}
+
+//查询总数统计数据列表
+export function getTotaldata(params) {
+  return request({
+    url: "/taicangpop/data/totaldata",
+    method: "GET",
+    params,
+  });
+}
+//查询颜色列表
+export function getColorList(params) {
+  return request({
+    url: "/taicangpop/data/grouphousedata",
+    method: "GET",
+    params,
+  });
+}
+//页面初始化（加载网格排名）
+export function initGetNetWorkData(params) {
+  return request({
+    url: "/taicangpop/data/parenttimedata",
+    method: "GET",
+    params,
+  });
+}
+//根据网格园名字进行排名
+export function netWorkNameP(params) {
+  return request({
+    url: "/taicangpop/data/parentpersondata",
+    method: "GET",
+    params,
+  });
+}
+//echatr图标数据
+export function echartsData(params) {
+  return request({
+    url: "/taicangpop/data/timedata",
+    method: "GET",
+    params,
+  });
+}
+
+//输入框搜索
+
+export function inputSearch(params) {
+  return request({
+    url: "/taicangpop/data/getxinxi",
+    method: "GET",
+    params,
+  });
+}
+
+//网格员帅选简介
+export function getNectWorkOffice(params) {
+  return request({
+    url: "/taicangpop/data/getpeopellist",
+    method: "GET",
+    params,
+  });
+}
+//根据person查询数据
+export function getPersonData(params) {
+  return request({
+    url: "/taicangpop/data/persontimedata",
+    method: "GET",
+    params,
+  });
+}
+//根据person时间百分比查询数据
+export function getPersonTimePm(params) {
+  return request({
+    url: "/taicangpop/data/personparenttimedata",
+    method: "GET",
+    params,
+  });
+}
+//根据person人百分比查询数据
+export function getPersonremPm(params) {
+  return request({
+    url: "/taicangpop/data/personparentpersondata",
+    method: "GET",
+    params,
+  });
+}
+//获取小区信息
+export function getxiaoqu(deptId) {
+  return request({
+    url: `/taicangpop/data/${deptId}`,
+    method: "GET",
+  });
+}
+//预警列表
+export function getWarningList(params) {
+  return request({
+    url: "/taicangpop/data/getyujing",
+    method: "GET",
+    params,
+  });
+}
+//回收中心
+export function getRecycleList(params) {
+  return request({
+    url: "/taicangpop/recycle/list",
+    method: "GET",
+    params,
+  });
+}
+//导出搜索中心
+export function exportSearch(params) {
+  return request({
+    url: "/taicangpop/data/exportxinxi",
+    method: "GET",
+    params,
+  });
+}
+//导出预警列表
+export function exportyujing(params) {
+  return request({
+    url: "/taicangpop/data/exportyujing",
+    method: "GET",
+    params,
+  });
+}
+
+// 回收站导出
+export function exportHuishou(params) {
+  return request({
+    url: "/taicangpop/recycle/export",
+    method: "GET",
+    params,
+  });
+}
+//回收表恢复
+export function recoverData(data) {
+  return request({
+    url: "/taicangpop/recycle",
+    method: "POST",
+    data,
+  });
+}
+//删除回收中心数据
+export function removeData(ids) {
+  return request({
+    url: `/taicangpop/recycle/${ids}`,
+    method: "DELETE",
+  });
+}
+
+//获取日志中心list
+export function getLog(params) {
+  return request({
+    url: "/taicangpop/log/list",
+    method: "GET",
+    params,
+  });
+}
+//导出日志中心数据
+export function exportLog(params) {
+  return request({
+    url: "/taicangpop/log/export",
+    method: "GET",
+    params,
+  });
+}

src/api/system/dept.js

@@ -1,52 +1,60 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 // 查询部门列表
 export function listDept(query) {
   return request({
-    url: '/system/dept/list',
-    method: 'get',
-    params: query
-  })
+    url: "/system/dept/list",
+    method: "get",
+    params: query,
+  });
 }
 
 // 查询部门列表（排除节点）
 export function listDeptExcludeChild(deptId) {
   return request({
-    url: '/system/dept/list/exclude/' + deptId,
-    method: 'get'
-  })
+    url: "/system/dept/list/exclude/" + deptId,
+    method: "get",
+  });
 }
 
 // 查询部门详细
 export function getDept(deptId) {
   return request({
-    url: '/system/dept/' + deptId,
-    method: 'get'
-  })
+    url: "/system/dept/" + deptId,
+    method: "get",
+  });
+}
+// 查询部门下拉树结构
+export function treeselect() {
+  return request({
+    // "/system/dept/tree",
+    url: "/system/dept/treeselect",
+    method: "get",
+  });
 }
 
 // 新增部门
 export function addDept(data) {
   return request({
-    url: '/system/dept',
-    method: 'post',
-    data: data
-  })
+    url: "/system/dept",
+    method: "post",
+    data: data,
+  });
 }
 
 // 修改部门
 export function updateDept(data) {
   return request({
-    url: '/system/dept',
-    method: 'put',
-    data: data
-  })
+    url: "/system/dept",
+    method: "put",
+    data: data,
+  });
 }
 
 // 删除部门
 export function delDept(deptId) {
   return request({
-    url: '/system/dept/' + deptId,
-    method: 'delete'
-  })
+    url: "/system/dept/" + deptId,
+    method: "delete",
+  });
 }

src/api/taicangpop/block.js

@@ -0,0 +1,79 @@
+import request from "@/utils/request";
+
+// 查询街区管理列表
+export function listBlock(query) {
+  return request({
+    url: "/taicangpop/block/list",
+    headers: {
+      isToken: false,
+    },
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询街区管理详细
+export function getBlock(id) {
+  return request({
+    url: "/taicangpop/block/" + id,
+    headers: {
+      isToken: false,
+    },
+    method: "get",
+  });
+}
+
+// 新增街区管理
+export function addBlock(data) {
+  return request({
+    url: "/taicangpop/block",
+    headers: {
+      isToken: false,
+    },
+    method: "post",
+    data: data,
+  });
+}
+
+// 修改街区管理
+export function updateBlock(data) {
+  return request({
+    url: "/taicangpop/block",
+    headers: {
+      isToken: false,
+    },
+    method: "put",
+    data: data,
+  });
+}
+
+// 删除街区管理
+export function delBlock(id) {
+  return request({
+    url: "/taicangpop/block/" + id,
+    headers: {
+      isToken: false,
+    },
+    method: "delete",
+  });
+}
+
+// 导出街区管理
+export function exportBlock(query) {
+  return request({
+    url: "/taicangpop/block/export",
+    headers: {
+      isToken: false,
+    },
+    method: "get",
+    params: query,
+  });
+}
+
+export function getYj(params) {
+  return request({
+    url: "/taicangpop/tc/getYj",
+    method: "get",
+    params,
+  });
+}

src/api/taicangpop/building.js

@@ -0,0 +1,68 @@
+import request from "@/utils/request";
+
+// 查询楼栋管理列表
+export function listBuilding(query) {
+  return request({
+    url: "/taicangpop/building/list",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询楼栋管理详细
+export function getBuilding(id) {
+  return request({
+    url: "/taicangpop/building/" + id,
+    method: "get",
+  });
+}
+
+// 新增楼栋管理
+export function addBuilding(data) {
+  return request({
+    url: "/taicangpop/building",
+    method: "post",
+    data: data,
+  });
+}
+
+// 修改楼栋管理
+export function updateBuilding(data) {
+  return request({
+    url: "/taicangpop/building",
+    method: "put",
+    data: data,
+  });
+}
+
+// 删除楼栋管理
+export function delBuilding(id) {
+  return request({
+    url: "/taicangpop/building/" + id,
+    method: "delete",
+  });
+}
+
+// 导出楼栋管理
+export function exportBuilding(query) {
+  return request({
+    url: "/taicangpop/building/export",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询楼栋管理排摸
+export function listPaimoBuilding(id) {
+  return request({
+    url: "/taicangpop/building/getListNew?deptid=" + id,
+    method: "get",
+  });
+}
+
+// export function listPaimoBuilding(id) {
+//   return request({
+//     url: "/taicangpop/building/getListNew2?deptId=" + id,
+//     method: "get",
+//   });
+// }

src/api/taicangpop/check.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询巡检记录管理列表
+export function listCheck(query) {
+  return request({
+    url: '/taicangpop/check/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询巡检记录管理详细
+export function getCheck(id) {
+  return request({
+    url: '/taicangpop/check/' + id,
+    method: 'get'
+  })
+}
+
+// 新增巡检记录管理
+export function addCheck(data) {
+  return request({
+    url: '/taicangpop/check',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改巡检记录管理
+export function updateCheck(data) {
+  return request({
+    url: '/taicangpop/check',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除巡检记录管理
+export function delCheck(id) {
+  return request({
+    url: '/taicangpop/check/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出巡检记录管理
+export function exportCheck(query) {
+  return request({
+    url: '/taicangpop/check/export',
+    method: 'get',
+    params: query
+  })
+}

src/api/taicangpop/data.js

@@ -0,0 +1,46 @@
+import request from "@/utils/request";
+
+// 修改户主
+export function updateHolder(data) {
+  return request({
+    url: `/taicangpop/data/sethouse?id=${data.id}&houseid=${data.houseid}`,
+    method: "post",
+  });
+}
+
+export function getNum(data) {
+  return request({
+    url: `/taicangpop/data/getnum?buildingid=${data.buildingid}`,
+    method: "get",
+  });
+}
+
+export function getPeopellist(data) {
+  return request({
+    url: `/taicangpop/data/getpeopellist?deptid=${data.deptid}&deptname=${data.deptname}`,
+    method: "get",
+  });
+}
+// 获取社保信息
+export function getPeopelShebaoInfo(data) {
+  return request({
+    url: `/taicangpop/datasql/diaoyong?SFZH=${data.SFZH}`,
+    method: "get",
+  });
+}
+
+// 获取社区List-ID
+export function getCommunitylist() {
+  return request({
+    url: `/taicangpop/data/getshequ`,
+    method: "get",
+  });
+}
+
+// 获取小区List-ID
+export function getXiaoqulist() {
+  return request({
+    url: `taicangpop/data/getxiaoqulist`,
+    method: "get",
+  });
+}

src/api/taicangpop/house.js

@@ -0,0 +1,69 @@
+import request from "@/utils/request";
+
+// 查询住户管理列表
+export function listHouse(query) {
+  return request({
+    url: "/taicangpop/house/list",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询住户管理详细
+export function getHouse(id) {
+  return request({
+    url: "/taicangpop/house/" + id,
+    method: "get",
+  });
+}
+
+// 新增住户管理
+export function addHouse(data) {
+  return request({
+    url: "/taicangpop/house",
+    method: "post",
+    data: data,
+  });
+}
+
+// 修改住户管理
+export function updateHouse(data) {
+  return request({
+    url: "/taicangpop/house",
+    method: "put",
+    data: data,
+  });
+}
+
+// 删除住户管理
+export function delHouse(id) {
+  return request({
+    url: "/taicangpop/house/" + id,
+    method: "delete",
+  });
+}
+
+// 导出住户管理
+export function exportHouse(query) {
+  return request({
+    url: "/taicangpop/house/export",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询住户管理排摸
+// export function listPaimoHouse(id) {
+//   return request({
+//     url: "/taicangpop/house/getweigengxin?buildingid=" + id,
+//     method: "get",
+//   });
+// }
+
+// 查询住户管理排摸
+export function listPaimoHouse(id) {
+  return request({
+    url: "/taicangpop/house/getweigengxinnew?buildingid=" + id,
+    method: "get",
+  });
+}

src/api/taicangpop/new.js

@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+
+export function getColorList(query) {
+  return request({
+    url: "/taicangpop/data/newGroupHouseData",
+    method: "get",
+    params: query,
+  });
+}

src/api/taicangpop/person.js

@@ -0,0 +1,53 @@
+import request from "@/utils/request";
+
+// 查询居民管理列表
+export function listPerson(query) {
+  return request({
+    url: "/taicangpop/person/list",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询居民管理详细
+export function getPerson(id) {
+  return request({
+    url: "/taicangpop/person/" + id,
+    method: "get",
+  });
+}
+
+// 新增居民管理
+export function addPerson(data) {
+  return request({
+    url: "/taicangpop/person",
+    method: "post",
+    data: data,
+  });
+}
+
+// 修改居民管理
+export function updatePerson(data) {
+  return request({
+    url: "/taicangpop/person",
+    method: "put",
+    data: data,
+  });
+}
+
+// 删除居民管理
+export function delPerson(id) {
+  return request({
+    url: "/taicangpop/person/" + id,
+    method: "delete",
+  });
+}
+
+// 导出居民管理
+export function exportPerson(query) {
+  return request({
+    url: "/taicangpop/person/export",
+    method: "get",
+    params: query,
+  });
+}

src/api/taicangpop/recycle.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询【请填写功能名称】列表
+export function listRecycle(query) {
+  return request({
+    url: '/taicangpop/recycle/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询【请填写功能名称】详细
+export function getRecycle(id) {
+  return request({
+    url: '/taicangpop/recycle/' + id,
+    method: 'get'
+  })
+}
+
+// 新增【请填写功能名称】
+export function addRecycle(data) {
+  return request({
+    url: '/taicangpop/recycle',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改【请填写功能名称】
+export function updateRecycle(data) {
+  return request({
+    url: '/taicangpop/recycle',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除【请填写功能名称】
+export function delRecycle(id) {
+  return request({
+    url: '/taicangpop/recycle/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出【请填写功能名称】
+export function exportRecycle(query) {
+  return request({
+    url: '/taicangpop/recycle/export',
+    method: 'get',
+    params: query
+  })
+}

src/assets/data/daqingjinxiuxincheng.json

@@ -0,0 +1,87 @@
+{
+  "type" : "FeatureCollection",
+  "crs" : {
+    "type" : "name",
+    "properties" : {
+      "name" : "EPSG:4490"
+    }
+  },
+  "features" : [
+    {
+      "type" : "Feature",
+      "id" : 202,
+      "geometry" : {
+        "type" : "Polygon",
+        "coordinates" : [
+          [
+            [
+              121.15210206300003,
+              31.453490119000094
+            ],
+            [
+              121.15130613400015,
+              31.45483670700014
+            ],
+            [
+              121.15030696000008,
+              31.456521351000049
+            ],
+            [
+              121.14706991800017,
+              31.454924208000193
+            ],
+            [
+              121.14324918900013,
+              31.45304202400024
+            ],
+            [
+              121.14528287800022,
+              31.450400786000159
+            ],
+            [
+              121.1461368790001,
+              31.449216880000108
+            ],
+            [
+              121.14660267700015,
+              31.448841845000061
+            ],
+            [
+              121.1493941870001,
+              31.450028493000218
+            ],
+            [
+              121.15117412200004,
+              31.450787285000104
+            ],
+            [
+              121.15124973500019,
+              31.450653987000067
+            ],
+            [
+              121.1532992880002,
+              31.451514098000075
+            ],
+            [
+              121.15330743900006,
+              31.451544017000174
+            ],
+            [
+              121.15250676300013,
+              31.452819680000118
+            ],
+            [
+              121.15210206300003,
+              31.453490119000094
+            ]
+          ]
+        ]
+      },
+      "properties" : {
+        "FID" : 201,
+        "Id" : 202,
+        "name" : "大庆锦绣新城"
+      }
+    }
+  ]
+}

src/assets/data/juweihui.json

@@ -0,0 +1,353 @@
+{
+  "type" : "FeatureCollection",
+  "crs" : {
+    "type" : "name",
+    "properties" : {
+      "name" : "EPSG:4490"
+    }
+  },
+  "features" : [
+    {
+      "type" : "Feature",
+      "id" : 0,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.10947197200005,
+          31.456474306000075
+        ]
+      },
+      "properties" : {
+        "FID" : 0,
+        "OBJECTID" : 1,
+        "Id" : 0,
+        "娄东社区" : "太平居民委员会",
+        "办公地点" : "向阳东路11号"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 1,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.11437667300004,
+          31.44781344900008
+        ]
+      },
+      "properties" : {
+        "FID" : 1,
+        "OBJECTID" : 2,
+        "Id" : 0,
+        "娄东社区" : "惠阳居民委员会",
+        "办公地点" : "太平南路与康福路交叉口东50米"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 2,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.11753281000006,
+          31.465022260000069
+        ]
+      },
+      "properties" : {
+        "FID" : 2,
+        "OBJECTID" : 3,
+        "Id" : 0,
+        "娄东社区" : "东郊居民委员会",
+        "办公地点" : "郑和中路与半泾南路交叉路口往西北约100米（华荣园南?"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 3,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.10642910100012,
+          31.461001298000042
+        ]
+      },
+      "properties" : {
+        "FID" : 3,
+        "OBJECTID" : 4,
+        "Id" : 0,
+        "娄东社区" : "洋沙居民委员会",
+        "办公地点" : "洋沙弄与庆阳路交汇处附近东南"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 4,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.11915253600012,
+          31.442585473000065
+        ]
+      },
+      "properties" : {
+        "FID" : 4,
+        "OBJECTID" : 5,
+        "Id" : 0,
+        "娄东社区" : "朝阳居民委员会",
+        "办公地点" : "岳阳路65号"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 5,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.13350127000001,
+          31.459166517000028
+        ]
+      },
+      "properties" : {
+        "FID" : 5,
+        "OBJECTID" : 6,
+        "Id" : 0,
+        "娄东社区" : "太东社区居民委员会",
+        "办公地点" : "万和路1号"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 6,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.12905196400004,
+          31.492983860000038
+        ]
+      },
+      "properties" : {
+        "FID" : 6,
+        "OBJECTID" : 7,
+        "Id" : 0,
+        "娄东社区" : "花北社区居民委员会",
+        "办公地点" : "南京东路200号"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 7,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.13413055500007,
+          31.48513478600006
+        ]
+      },
+      "properties" : {
+        "FID" : 7,
+        "OBJECTID" : 8,
+        "Id" : 0,
+        "娄东社区" : "荷塘社区居民委员会",
+        "办公地点" : "兴业北路133号"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 8,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.13842722400011,
+          31.461390605000076
+        ]
+      },
+      "properties" : {
+        "FID" : 8,
+        "OBJECTID" : 9,
+        "Id" : 0,
+        "娄东社区" : "太胜社区居民委员会",
+        "办公地点" : "世福二园内"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 9,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.12742742100011,
+          31.488123655000038
+        ]
+      },
+      "properties" : {
+        "FID" : 9,
+        "OBJECTID" : 10,
+        "Id" : 0,
+        "娄东社区" : "香花桥社区居民委员会",
+        "办公地点" : "五洲西路58号"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 10,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.09563946200001,
+          31.469885880000049
+        ]
+      },
+      "properties" : {
+        "FID" : 10,
+        "OBJECTID" : 11,
+        "Id" : 0,
+        "娄东社区" : "华盛园社区居民委员会",
+        "办公地点" : "毛太路与兰州路交叉路口往东约50米（华盛园）"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 11,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.14594528000009,
+          31.457378301000062
+        ]
+      },
+      "properties" : {
+        "FID" : 11,
+        "OBJECTID" : 12,
+        "Id" : 0,
+        "娄东社区" : "娄江社区居民委员会",
+        "办公地点" : "常胜南路18号"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 12,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.1277129560001,
+          31.447093744000028
+        ]
+      },
+      "properties" : {
+        "FID" : 12,
+        "OBJECTID" : 13,
+        "Id" : 0,
+        "娄东社区" : "滨河社区居民委员会",
+        "办公地点" : "世纪苑小区西门"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 13,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.14611008800011,
+          31.457147618000079
+        ]
+      },
+      "properties" : {
+        "FID" : 13,
+        "OBJECTID" : 14,
+        "Id" : 0,
+        "娄东社区" : "景瑞社区居民委员会",
+        "办公地点" : "常胜南路18号"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 14,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.08547262400009,
+          31.469171860000074
+        ]
+      },
+      "properties" : {
+        "FID" : 14,
+        "OBJECTID" : 15,
+        "Id" : 0,
+        "娄东社区" : "城北社区居民委员会",
+        "办公地点" : "华盛八园会所"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 15,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.14344444200003,
+          31.45372543700006
+        ]
+      },
+      "properties" : {
+        "FID" : 15,
+        "OBJECTID" : 16,
+        "Id" : 0,
+        "娄东社区" : "浦溪社区居民委员会",
+        "办公地点" : "滨河路96号"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 16,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.13676868700009,
+          31.464796686000057
+        ]
+      },
+      "properties" : {
+        "FID" : 16,
+        "OBJECTID" : 17,
+        "Id" : 0,
+        "娄东社区" : "裕珑社区居民委员会",
+        "办公地点" : "娄江南路100号（浴沁庭会所南侧）"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 17,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.09838082800002,
+          31.467528630000061
+        ]
+      },
+      "properties" : {
+        "FID" : 17,
+        "OBJECTID" : 18,
+        "Id" : 0,
+        "娄东社区" : "柳园社区居民委员会",
+        "办公地点" : "滨河雅苑内"
+      }
+    },
+    {
+      "type" : "Feature",
+      "id" : 18,
+      "geometry" : {
+        "type" : "Point",
+        "coordinates" : [
+          121.10911069600002,
+          31.460719788000063
+        ]
+      },
+      "properties" : {
+        "FID" : 18,
+        "OBJECTID" : 19,
+        "Id" : 0,
+        "娄东社区" : "丽景社区居民委员会",
+        "办公地点" : "丽景嘉园内"
+      }
+    }
+  ]
+}

src/assets/data/loujiangjiedaoshequ.json

@@ -0,0 +1,107 @@
+{
+  "type" : "FeatureCollection",
+  "crs" : {
+    "type" : "name",
+    "properties" : {
+      "name" : "EPSG:4490"
+    }
+  },
+  "features" : [
+    {
+      "type" : "Feature",
+      "id" : 201,
+      "geometry" : {
+        "type" : "Polygon",
+        "coordinates" : [
+          [
+            [
+              121.14996546000009,
+              31.449507692000054,
+              0,
+              null
+            ],
+            [
+              121.15394217100004,
+              31.451362261000043,
+              0,
+              null
+            ],
+            [
+              121.15237992200002,
+              31.453754060000051,
+              0,
+              null
+            ],
+            [
+              121.15157090200012,
+              31.454992614000048,
+              0,
+              null
+            ],
+            [
+              121.15053158300009,
+              31.45658368200003,
+              0,
+              null
+            ],
+            [
+              121.15040434100001,
+              31.456778468000039,
+              0,
+              null
+            ],
+            [
+              121.14697517400009,
+              31.455067955000061,
+              0,
+              null
+            ],
+            [
+              121.14367343700007,
+              31.453341342000044,
+              0,
+              null
+            ],
+            [
+              121.14307333700003,
+              31.453121585000076,
+              0,
+              null
+            ],
+            [
+              121.14246134100006,
+              31.452889928000047,
+              0,
+              null
+            ],
+            [
+              121.14460465500008,
+              31.450021865000053,
+              0,
+              null
+            ],
+            [
+              121.14625117500009,
+              31.447768978000056,
+              0,
+              null
+            ],
+            [
+              121.14996546000009,
+              31.449507692000054,
+              0,
+              null
+            ]
+          ]
+        ]
+      },
+      "properties" : {
+        "FID" : 201,
+        "Shape_Leng" : 0.030180652771500002,
+        "Shape_Area" : 5.4399586747699999e-05,
+        "CMC" : "娄江社区",
+        "DZWHMC" : "娄东街道"
+      }
+    }
+  ]
+}

src/assets/data/river-name.json

@@ -0,0 +1,521 @@
+{
+  "type": "FeatureCollection",
+  "crs": {
+    "type": "name",
+    "properties": {
+      "name": "EPSG:4490"
+    }
+  },
+  "features": [
+    {
+      "type": "Feature",
+      "id": 1,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.15609031366705, 31.460306345661394]
+      },
+      "properties": {
+        "OBJECTID": 1,
+        "FeatureID": 88,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "十八港",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": -51.225697107114605,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 1
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 2,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.10322993256545, 31.48568046997777]
+      },
+      "properties": {
+        "OBJECTID": 2,
+        "FeatureID": 34,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "半泾河",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": -55.150264229828302,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 2
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 3,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.13159141001563, 31.541451759591098]
+      },
+      "properties": {
+        "OBJECTID": 3,
+        "FeatureID": 112,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "杨林塘",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 26.188450191024611,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 3
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 4,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.08797650491181, 31.431213867036413]
+      },
+      "properties": {
+        "OBJECTID": 4,
+        "FeatureID": 6,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "新浏河",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 13.807256236938171,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 4
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 5,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.11018819318064, 31.498479895630756]
+      },
+      "properties": {
+        "OBJECTID": 5,
+        "FeatureID": 74,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "娄江河",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": -53.018239902652788,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 5
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 6,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.10219794038267, 31.446293306790722]
+      },
+      "properties": {
+        "OBJECTID": 6,
+        "FeatureID": 52,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "盐铁塘",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": -47.457436397292796,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 6
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 8,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.11843550839205, 31.453212017021031]
+      },
+      "properties": {
+        "OBJECTID": 8,
+        "FeatureID": 16,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "",
+        "FontName": "东城河",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": -38.487982176642745,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 8
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 9,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.09897302008892, 31.501149737470485]
+      },
+      "properties": {
+        "OBJECTID": 9,
+        "FeatureID": 89,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "湖川塘",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 28.265573907345733,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 9
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 10,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.10072642458486, 31.46671966997683]
+      },
+      "properties": {
+        "OBJECTID": 10,
+        "FeatureID": 28,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "城北河",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 22.706035040579994,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 10
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 11,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.10699536844152, 31.462086081807286]
+      },
+      "properties": {
+        "OBJECTID": 11,
+        "FeatureID": 27,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "",
+        "FontName": "通城河",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": -53.018283232271365,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 11
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 12,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.09141686949295, 31.482471087470742]
+      },
+      "properties": {
+        "OBJECTID": 12,
+        "FeatureID": 61,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "纵一河",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": -49.877022231590921,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 12
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 13,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.08557054594405, 31.499971510476882]
+      },
+      "properties": {
+        "OBJECTID": 13,
+        "FeatureID": 83,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "半泾河",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": -58.828075016068453,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 13
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 14,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.05782208921812, 31.54263323493592]
+      },
+      "properties": {
+        "OBJECTID": 14,
+        "FeatureID": 111,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "半泾河",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": -72.733129249859843,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 14
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 15,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.13546569568541, 31.411531458310208]
+      },
+      "properties": {
+        "OBJECTID": 15,
+        "FeatureID": 1,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "盐铁塘",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": -53.508266682401526,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 15
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 17,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.03169904917183, 31.468963707409216]
+      },
+      "properties": {
+        "OBJECTID": 17,
+        "FeatureID": 40,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "湖川塘",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 28.879178407779097,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 17
+      }
+    }
+  ]
+}

src/assets/data/road-name.json

@@ -0,0 +1,617 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.13848065216041, 31.5258859051105]
+      },
+      "properties": {
+        "OBJECTID": 1,
+        "FeatureID": 1,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "苏昆太高速",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 26.99952478868826,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "苏昆太高速",
+        "ORIG_FID": 1
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.1095703268592, 31.542675573219185]
+      },
+      "properties": {
+        "OBJECTID": 2,
+        "FeatureID": 2,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "沈海高速",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 313,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "沈海高速",
+        "ORIG_FID": 2
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.0895464343206, 31.51329206807452]
+      },
+      "properties": {
+        "OBJECTID": 3,
+        "FeatureID": 13,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "东亭北路",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": -53.97455748903548,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "东亭北路",
+        "ORIG_FID": 3
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.10463077558984, 31.471696319929265]
+      },
+      "properties": {
+        "OBJECTID": 4,
+        "FeatureID": 6,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "苏州中路",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 26.672724606764447,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "苏州中路",
+        "ORIG_FID": 4
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.15627334314036, 31.47921552187887]
+      },
+      "properties": {
+        "OBJECTID": 5,
+        "FeatureID": 12,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "江南路",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 21.82223479714308,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "江南路",
+        "ORIG_FID": 5
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.10636765064658, 31.430706628508176]
+      },
+      "properties": {
+        "OBJECTID": 6,
+        "FeatureID": 3,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "G204",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": -33.476277963910725,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "G204",
+        "ORIG_FID": 6
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.0565975102669, 31.447551219113507]
+      },
+      "properties": {
+        "OBJECTID": 7,
+        "FeatureID": 4,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "苏州西路",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 26.70120027383763,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "苏州西路",
+        "ORIG_FID": 7
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.10649499644694, 31.500329923587174]
+      },
+      "properties": {
+        "OBJECTID": 8,
+        "FeatureID": 25,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "广州东路",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 27.979447434042477,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "广州东路",
+        "ORIG_FID": 8
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.12561979391841, 31.49958661339715]
+      },
+      "properties": {
+        "OBJECTID": 9,
+        "FeatureID": 22,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "北京东路",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 27.480898157753295,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "北京东路",
+        "ORIG_FID": 9
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.11520654024969, 31.46305099500745]
+      },
+      "properties": {
+        "OBJECTID": 10,
+        "FeatureID": 10,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "郑和中路",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 23.853308685437288,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "",
+        "ORIG_FID": 10
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.07999274736744, 31.44397910115464]
+      },
+      "properties": {
+        "OBJECTID": 11,
+        "FeatureID": 7,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "郑和西路",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 29.01765876595468,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "郑和西路",
+        "ORIG_FID": 11
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.12534019099712, 31.449688040670594]
+      },
+      "properties": {
+        "OBJECTID": 12,
+        "FeatureID": 18,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "朝阳东路",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 33.454091858264604,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "朝阳东路",
+        "ORIG_FID": 12
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.15127117362579, 31.495622427732883]
+      },
+      "properties": {
+        "OBJECTID": 13,
+        "FeatureID": 5,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "苏州东路",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 27.108675622614353,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "苏州东路",
+        "ORIG_FID": 13
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.07688639549087, 31.48458803760792]
+      },
+      "properties": {
+        "OBJECTID": 14,
+        "FeatureID": 27,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "广州西路",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 27.980049799669352,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "广州西路",
+        "ORIG_FID": 14
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.12863151128533, 31.460602458186945]
+      },
+      "properties": {
+        "OBJECTID": 15,
+        "FeatureID": 16,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "东亭南路",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": -42.99490783379614,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "东亭南路",
+        "ORIG_FID": 15
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.10564473996282, 31.435556718267966]
+      },
+      "properties": {
+        "OBJECTID": 16,
+        "FeatureID": 20,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "朝阳西路",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 40.58402489553576,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "朝阳西路",
+        "ORIG_FID": 16
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.08320832730249, 31.477272006897635]
+      },
+      "properties": {
+        "OBJECTID": 17,
+        "FeatureID": 24,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "北京西路",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 27.51761602541921,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "北京西路",
+        "ORIG_FID": 17
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.07195194762437, 31.54471009779286]
+      },
+      "properties": {
+        "OBJECTID": 18,
+        "FeatureID": 17,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "白云南路",
+        "FontName": "宋体",
+        "FontSize": 8,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": -77.8465237653276,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "name": "白云南路",
+        "ORIG_FID": 18
+      }
+    }
+  ]
+}

src/assets/data/shequ-name.json

@@ -0,0 +1,657 @@
+{
+  "type": "FeatureCollection",
+  "crs": {
+    "type": "name",
+    "properties": {
+      "name": "EPSG:4490"
+    }
+  },
+  "features": [
+    {
+      "type": "Feature",
+      "id": 233,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.12301184032429, 31.50576837705898]
+      },
+      "properties": {
+        "OBJECTID": 1,
+        "FeatureID": 16,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "花北社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 2
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 217,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.09380655163113, 31.48669967275174]
+      },
+      "properties": {
+        "OBJECTID": 2,
+        "FeatureID": 17,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "华盛园社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 3
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 224,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.11503911436375, 31.486413284545506]
+      },
+      "properties": {
+        "OBJECTID": 3,
+        "FeatureID": 10,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "香花桥社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 4
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 238,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.07991765037934, 31.482449983080301]
+      },
+      "properties": {
+        "OBJECTID": 4,
+        "FeatureID": 18,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "城北社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 5
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 232,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.13476392141786, 31.482792085186645]
+      },
+      "properties": {
+        "OBJECTID": 5,
+        "FeatureID": 14,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "荷塘社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 6
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 226,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.12655669133835, 31.468655922532832]
+      },
+      "properties": {
+        "OBJECTID": 6,
+        "FeatureID": 11,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "东郊社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 7
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 225,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.12421180083402, 31.455819651655645]
+      },
+      "properties": {
+        "OBJECTID": 7,
+        "FeatureID": 6,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "太东社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 8
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 230,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.1355365766517, 31.448748693397533]
+      },
+      "properties": {
+        "OBJECTID": 8,
+        "FeatureID": 3,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "滨河社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 9
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 223,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.12122451020309, 31.443312944536785]
+      },
+      "properties": {
+        "OBJECTID": 9,
+        "FeatureID": 4,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "朝阳社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 10
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 228,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.14588741587163, 31.465887662185925]
+      },
+      "properties": {
+        "OBJECTID": 10,
+        "FeatureID": 1,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "太胜社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 11
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 219,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.11430871107825, 31.470629786935149]
+      },
+      "properties": {
+        "OBJECTID": 11,
+        "FeatureID": 15,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "洋沙社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 12
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 227,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.13217112890952, 31.463650917455936]
+      },
+      "properties": {
+        "OBJECTID": 12,
+        "FeatureID": 7,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "裕珑社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 13
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 222,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.11658817320574, 31.450741292476721]
+      },
+      "properties": {
+        "OBJECTID": 13,
+        "FeatureID": 5,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "惠阳社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 14
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 220,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.11160797862533, 31.463799302895552]
+      },
+      "properties": {
+        "OBJECTID": 14,
+        "FeatureID": 12,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "丽景社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 15
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 201,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.14810847922297, 31.452274965717152]
+      },
+      "properties": {
+        "OBJECTID": 15,
+        "FeatureID": 19,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "娄江社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 16
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 221,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.11210121000295, 31.457487688106369]
+      },
+      "properties": {
+        "OBJECTID": 16,
+        "FeatureID": 8,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "太平社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 17
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 229,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.14140237322101, 31.455290622514293]
+      },
+      "properties": {
+        "OBJECTID": 17,
+        "FeatureID": 2,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "浦溪社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 18
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 218,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.10059837946173, 31.463740241718824]
+      },
+      "properties": {
+        "OBJECTID": 18,
+        "FeatureID": 9,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "柳园社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 19
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 231,
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.14705629311345, 31.458722946506839]
+      },
+      "properties": {
+        "OBJECTID": 19,
+        "FeatureID": 20,
+        "ZOrder": null,
+        "AnnotationClassID": 0,
+        "SymbolID": 0,
+        "Status": 0,
+        "TextString": "景瑞社区",
+        "FontName": "隶书",
+        "FontSize": 14,
+        "Bold": 0,
+        "Italic": 0,
+        "Underline": 0,
+        "VerticalAlignment": 3,
+        "HorizontalAlignment": 1,
+        "XOffset": 0,
+        "YOffset": 0,
+        "Angle": 0,
+        "FontLeading": 0,
+        "WordSpacing": 100,
+        "CharacterWidth": 100,
+        "CharacterSpacing": 0,
+        "FlipAngle": 90,
+        "Override": 0,
+        "ORIG_FID": 20
+      }
+    }
+  ]
+}

src/assets/data/taicang-point.json

@@ -0,0 +1,250 @@
+{
+  "type": "FeatureCollection",
+  "name": "20210929_居民小区点",
+  "crs": {
+    "type": "name",
+    "properties": {
+      "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
+    }
+  },
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "pyname": "rhbjy",
+        "telephone": "021-68878888",
+        "display_x": "121.097818",
+        "display_y": "31.480807",
+        "address": "华盛园社区"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.097818, 31.480807]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "pyname": "dyycdm",
+        "telephone": "021-58406093",
+        "display_x": "121.11627",
+        "display_y": "31.488934",
+        "address": "香花桥社区"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.11627, 31.488934]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "pyname": "rssc",
+        "telephone": null,
+        "display_x": "121.126621",
+        "display_y": "31.507107",
+        "address": "花北社区"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.126621, 31.507107]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "pyname": "jdgy",
+        "telephone": null,
+        "display_x": "121.136973",
+        "display_y": "31.480659",
+        "address": "荷塘社区"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.136973, 31.480659]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "pyname": "dyscxm",
+        "telephone": null,
+        "display_x": "121.130907",
+        "display_y": "31.4703",
+        "address": "东郊社区"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.130907, 31.4703]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "pyname": "lssscnm",
+        "telephone": null,
+        "display_x": "121.127914",
+        "display_y": "31.455269",
+        "address": "太东社区"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.127914, 31.455269]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "pyname": "shxqxm",
+        "telephone": null,
+        "display_x": "121.111482",
+        "display_y": "31.45595",
+        "address": "太平社区"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.111482, 31.45595]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "pyname": "zyxqbm",
+        "telephone": null,
+        "display_x": "121.111514",
+        "display_y": "31.464404",
+        "address": "丽景社区"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.111514, 31.464404]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "pyname": "dcxqxm",
+        "telephone": null,
+        "display_x": "121.113657",
+        "display_y": "31.470368",
+        "address": "洋沙社区"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.113657, 31.470368]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "pyname": "myxqxm",
+        "telephone": null,
+        "display_x": "121.133955",
+        "display_y": "31.464055",
+        "address": "裕珑社区"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.133955, 31.464055]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "pyname": "sjh",
+        "telephone": "021-51183333",
+        "display_x": "121.5097",
+        "display_y": "31.2342",
+        "address": "惠阳社区"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.117087, 31.451426]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "pyname": "sjh",
+        "telephone": "021-51183333",
+        "display_x": "121.121378",
+        "display_y": "31.444614",
+        "address": "朝阳社区"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.121378, 31.444614]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "pyname": "sjh",
+        "telephone": "021-51183333",
+        "display_x": "121.135462",
+        "display_y": "31.449627",
+        "address": "滨河社区"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.135462, 31.449627]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "pyname": "sjh",
+        "telephone": "021-51183333",
+        "display_x": "121.140405",
+        "display_y": "31.455974",
+        "address": "浦溪社区"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.140405, 31.455974]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "pyname": "sjh",
+        "telephone": "021-51183333",
+        "display_x": "121.147921",
+        "display_y": "31.452617",
+        "address": "娄东社区"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.147921, 31.452617]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "pyname": "sjh",
+        "telephone": "021-51183333",
+        "display_x": "121.145138",
+        "display_y": "31.466331",
+        "address": "太胜社区"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.145138, 31.466331]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "pyname": "sjh",
+        "telephone": "021-51183333",
+        "display_x": "121.147255",
+        "display_y": "31.458281",
+        "address": "景瑞社区"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [121.147255, 31.458281]
+      }
+    }
+  ]
+}

src/assets/data/xiaoqu242.json

@@ -0,0 +1,63 @@
+{
+  "displayFieldName": "",
+  "fieldAliases": {
+    "FID": "FID",
+    "OBJECTID": "OBJECTID",
+    "Shape_Leng": "Shape_Leng",
+    "Shape_Area": "Shape_Area",
+    "名称": "名称"
+  },
+  "geometryType": "esriGeometryPolygon",
+  "spatialReference": { "wkid": 4490, "latestWkid": 4490 },
+  "fields": [
+    { "name": "FID", "type": "esriFieldTypeOID", "alias": "FID" },
+    { "name": "OBJECTID", "type": "esriFieldTypeInteger", "alias": "OBJECTID" },
+    {
+      "name": "Shape_Leng",
+      "type": "esriFieldTypeDouble",
+      "alias": "Shape_Leng"
+    },
+    {
+      "name": "Shape_Area",
+      "type": "esriFieldTypeDouble",
+      "alias": "Shape_Area"
+    },
+    {
+      "name": "名称",
+      "type": "esriFieldTypeString",
+      "alias": "名称",
+      "length": 50
+    }
+  ],
+  "features": [
+    {
+      "attributes": {
+        "FID": 0,
+        "OBJECTID": 0,
+        "Shape_Leng": 0,
+        "Shape_Area": 0,
+        "名称": "星雨华府"
+      },
+      "geometry": {
+        "rings": [
+          [
+            [121.12279891402805, 31.451721436414346],
+            [121.12331740390771, 31.452040003075219],
+            [121.12408569179644, 31.452512861528238],
+            [121.12470258830108, 31.452893988241954],
+            [121.12531929737979, 31.452327845565964],
+            [121.12626502014109, 31.451461741968533],
+            [121.12547674999021, 31.450947315995919],
+            [121.1260359762196, 31.450347077116263],
+            [121.12500371372785, 31.449677312470119],
+            [121.12494091096249, 31.449662354657587],
+            [121.12475474951661, 31.449689043304577],
+            [121.12441000674728, 31.450051372156416],
+            [121.12390550630934, 31.450573576700819],
+            [121.12279891402805, 31.451721436414346]
+          ]
+        ]
+      }
+    }
+  ]
+}

src/assets/data/娄东街道社区.json

@@ -0,0 +1,981 @@
+{
+  "type": "FeatureCollection",
+  "crs": {
+    "type": "name",
+    "properties": {
+      "name": "EPSG:4490"
+    }
+  },
+  "features": [
+    {
+      "type": "Feature",
+      "id": 217,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.09930481300012, 31.508867991000045, 0, null],
+            [121.09929085400006, 31.509057295000048, 0, null],
+            [121.09618665500011, 31.507777702000055, 0, null],
+            [121.09571062100008, 31.508252954000056, 0, null],
+            [121.09534704300006, 31.508074442000066, 0, null],
+            [121.09504611400007, 31.508392184000058, 0, null],
+            [121.0936644730001, 31.507796674000076, 0, null],
+            [121.09364604900009, 31.50778873400003, 0, null],
+            [121.0936501970001, 31.507782397000028, 0, null],
+            [121.09449146800011, 31.506497115000059, 0, null],
+            [121.09567018300004, 31.504455306000068, 0, null],
+            [121.09187838700007, 31.503899027000045, 0, null],
+            [121.08993317200009, 31.503613653000059, 0, null],
+            [121.08978551200005, 31.503539322000051, 0, null],
+            [121.08954307800002, 31.503449418000059, 0, null],
+            [121.0894275500001, 31.503440743000056, 0, null],
+            [121.0885607890001, 31.505707197000049, 0, null],
+            [121.08592762000001, 31.504596779000053, 0, null],
+            [121.08499645800009, 31.50422442100006, 0, null],
+            [121.08361266000009, 31.503830483000058, 0, null],
+            [121.08364527800006, 31.503662650000024, 0, null],
+            [121.08253407400002, 31.503359619000037, 0, null],
+            [121.08168528100009, 31.50298716900005, 0, null],
+            [121.08096810000006, 31.502852817000075, 0, null],
+            [121.07981703200005, 31.502637178000043, 0, null],
+            [121.07951272700006, 31.502536441000075, 0, null],
+            [121.0773856510001, 31.502111887000069, 0, null],
+            [121.0773875970001, 31.502053074000059, 0, null],
+            [121.07686642500005, 31.501879123000037, 0, null],
+            [121.0761777890001, 31.501716668000029, 0, null],
+            [121.07480985100005, 31.501503496000055, 0, null],
+            [121.07390942400002, 31.501283448000038, 0, null],
+            [121.07341969100003, 31.501103411000031, 0, null],
+            [121.07271052900001, 31.500758957000073, 0, null],
+            [121.07381572600002, 31.499462768000058, 0, null],
+            [121.07230238800003, 31.498577608000062, 0, null],
+            [121.07127446100003, 31.49792087700007, 0, null],
+            [121.06988961500008, 31.49710710100004, 0, null],
+            [121.06891171400002, 31.498643841000046, 0, null],
+            [121.06835405100003, 31.498241688000064, 0, null],
+            [121.06784094700004, 31.498094371000036, 0, null],
+            [121.06715561900012, 31.49769253200003, 0, null],
+            [121.06658274800009, 31.497431385000027, 0, null],
+            [121.06583953300003, 31.497053008000023, 0, null],
+            [121.06514627700005, 31.496620568000026, 0, null],
+            [121.0648941500001, 31.496925866000026, 0, null],
+            [121.06397702000004, 31.49650179300005, 0, null],
+            [121.06368674800001, 31.496858219000046, 0, null],
+            [121.05973027700009, 31.494902779000029, 0, null],
+            [121.05970457700005, 31.494890077000036, 0, null],
+            [121.05973027800007, 31.494859948000055, 0, null],
+            [121.06020392800008, 31.494304675000024, 0, null],
+            [121.0608711110001, 31.493972429000053, 0, null],
+            [121.06169179500012, 31.49245697300006, 0, null],
+            [121.06254798800001, 31.491288513000029, 0, null],
+            [121.06327506800005, 31.490448676000028, 0, null],
+            [121.0642240520001, 31.489709665000078, 0, null],
+            [121.06452247300001, 31.489231176000033, 0, null],
+            [121.06451662000006, 31.488433332000056, 0, null],
+            [121.06467399900009, 31.487768932000051, 0, null],
+            [121.06681087200002, 31.487119752000069, 0, null],
+            [121.06789394800001, 31.486068209000052, 0, null],
+            [121.06854220600007, 31.484811576000027, 0, null],
+            [121.06951844000002, 31.48399985900005, 0, null],
+            [121.07029604700006, 31.482809117000045, 0, null],
+            [121.07139577300006, 31.481742918000066, 0, null],
+            [121.08414031700011, 31.488414658000067, 0, null],
+            [121.0901364230001, 31.48071903500005, 0, null],
+            [121.09544189400003, 31.474114234000069, 0, null],
+            [121.09265208400006, 31.472534807000045, 0, null],
+            [121.0942084510001, 31.470626185000071, 0, null],
+            [121.0947719620001, 31.469994077000024, 0, null],
+            [121.09234062700011, 31.468568739000034, 0, null],
+            [121.09112259500012, 31.46785464900006, 0, null],
+            [121.09057652500007, 31.467534501000046, 0, null],
+            [121.08609645100012, 31.46492624900003, 0, null],
+            [121.08676257800005, 31.464647860000071, 0, null],
+            [121.08724066700006, 31.464195300000029, 0, null],
+            [121.08748503400011, 31.463296014000036, 0, null],
+            [121.09053101300003, 31.464614075000043, 0, null],
+            [121.09189534300003, 31.462816220000036, 0, null],
+            [121.09395019600004, 31.463538142000061, 0, null],
+            [121.09832242200002, 31.465738194000039, 0, null],
+            [121.09666243800007, 31.467717189000041, 0, null],
+            [121.0992646950001, 31.469025065000039, 0, null],
+            [121.10109540000008, 31.469945204000055, 0, null],
+            [121.10483076300011, 31.471812496000041, 0, null],
+            [121.10656534900011, 31.469438550000064, 0, null],
+            [121.10985701900006, 31.471235783000054, 0, null],
+            [121.11196529100005, 31.472386888000074, 0, null],
+            [121.11040582600003, 31.474618742000075, 0, null],
+            [121.09620227900007, 31.494940734000068, 0, null],
+            [121.09423774700008, 31.498958751000032, 0, null],
+            [121.10671474900005, 31.505947525000067, 0, null],
+            [121.10545839300005, 31.507489416000055, 0, null],
+            [121.09836759900008, 31.505123042000037, 0, null],
+            [121.09878400500008, 31.505985597000063, 0, null],
+            [121.09925989700002, 31.507115841000029, 0, null],
+            [121.09930481300012, 31.508867991000045, 0, null]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.21790409503300001,
+        "Shape_Area": 0.00090903101001699996,
+        "CMC": "华盛园社区",
+        "DZWHMC": "娄东街道",
+        "color": "#32fc80"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 218,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.10434938900005, 31.462511650000067, 0, null],
+            [121.10297838600002, 31.464267885000027, 0, null],
+            [121.0992646950001, 31.469025065000039, 0, null],
+            [121.09666243800007, 31.467717189000041, 0, null],
+            [121.09832242200002, 31.465738194000039, 0, null],
+            [121.09854816100005, 31.465469075000044, 0, null],
+            [121.09978292300002, 31.463891680000074, 0, null],
+            [121.10059608300003, 31.46285285700003, 0, null],
+            [121.1022716120001, 31.461018832000036, 0, null],
+            [121.10235688400007, 31.460925494000037, 0, null],
+            [121.10375895000004, 31.458258077000039, 0, null],
+            [121.10390922800002, 31.458318985000062, 0, null],
+            [121.10404103200005, 31.458235161000061, 0, null],
+            [121.10417230000007, 31.458151679000025, 0, null],
+            [121.10655471200005, 31.459008586000039, 0, null],
+            [121.10685436200004, 31.459232464000024, 0, null],
+            [121.10434938900005, 31.462511650000067, 0, null]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.030562567693499999,
+        "Shape_Area": 3.3958030437500003e-5,
+        "CMC": "柳园社区",
+        "DZWHMC": "娄东街道",
+        "color": "#a0f531"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 219,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.1202539410001, 31.471004659000073, 0, null],
+            [121.12731090500006, 31.473959878000073, 0, null],
+            [121.1259038820001, 31.476319869000065, 0, null],
+            [121.12425047200009, 31.479092962000038, 0, null],
+            [121.11196529100005, 31.472386888000074, 0, null],
+            [121.10985701900006, 31.471235783000054, 0, null],
+            [121.10656534900011, 31.469438550000064, 0, null],
+            [121.10483076300011, 31.471812496000041, 0, null],
+            [121.10109540000008, 31.469945204000055, 0, null],
+            [121.0992646950001, 31.469025065000039, 0, null],
+            [121.10297838600002, 31.464267885000027, 0, null],
+            [121.10434938900005, 31.462511650000067, 0, null],
+            [121.10929215600004, 31.465660052000032, 0, null],
+            [121.11460913600001, 31.468640804000074, 0, null],
+            [121.1202539410001, 31.471004659000073, 0, null]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.069279523130800005,
+        "Shape_Area": 0.00014822706008500001,
+        "CMC": "洋沙社区",
+        "DZWHMC": "娄东街道",
+        "color": "#fc32b5"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 220,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.1086033900001, 31.460059204000061, 0, null],
+            [121.11258021700007, 31.461938990000078, 0, null],
+            [121.11256541100011, 31.461955746000058, 0, null],
+            [121.1144306220001, 31.462809581000045, 0, null],
+            [121.11756713600005, 31.464285165000035, 0, null],
+            [121.11460913600001, 31.468640804000074, 0, null],
+            [121.10929215600004, 31.465660052000032, 0, null],
+            [121.10434938900005, 31.462511650000067, 0, null],
+            [121.10685436200004, 31.459232464000024, 0, null],
+            [121.1086033900001, 31.460059204000061, 0, null]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.033220715964499999,
+        "Shape_Area": 5.6251608877700003e-5,
+        "CMC": "丽景社区",
+        "DZWHMC": "娄东街道",
+        "color": "#5db324"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 221,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.11651680800003, 31.457599878000053, 0, null],
+            [121.11443798100004, 31.459878568000079, 0, null],
+            [121.11258021700007, 31.461938990000078, 0, null],
+            [121.1086033900001, 31.460059204000061, 0, null],
+            [121.10685436200004, 31.459232464000024, 0, null],
+            [121.10655471200005, 31.459008586000039, 0, null],
+            [121.10689909400003, 31.458507137000026, 0, null],
+            [121.10695596900007, 31.458406091000029, 0, null],
+            [121.10831015400004, 31.456000200000062, 0, null],
+            [121.10961705300008, 31.453766408000035, 0, null],
+            [121.10968905100003, 31.453643344000056, 0, null],
+            [121.11043150300009, 31.452625911000041, 0, null],
+            [121.11066093200009, 31.452311507000047, 0, null],
+            [121.11170797200009, 31.453238290000058, 0, null],
+            [121.11253442100008, 31.453690433000077, 0, null],
+            [121.11282513900005, 31.453949519000048, 0, null],
+            [121.11426478100009, 31.45548410300006, 0, null],
+            [121.1150174280001, 31.455958730000077, 0, null],
+            [121.11587637100001, 31.45669143300006, 0, null],
+            [121.11680435800008, 31.457284672000071, 0, null],
+            [121.11651680800003, 31.457599878000053, 0, null]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.028811301899899999,
+        "Shape_Area": 5.1231240623299997e-5,
+        "CMC": "太平社区",
+        "DZWHMC": "娄东街道",
+        "color": "#70a7ff"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 222,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.11612518200002, 31.445270729000072, 0, null],
+            [121.11660975700011, 31.445648278000078, 0, null],
+            [121.11695508000003, 31.445939549000059, 0, null],
+            [121.11773231000006, 31.446703471000035, 0, null],
+            [121.11802638300003, 31.446936332000064, 0, null],
+            [121.11842632500009, 31.447177810000028, 0, null],
+            [121.11897351300001, 31.447631156000057, 0, null],
+            [121.11946210400004, 31.448150751000071, 0, null],
+            [121.12012622000009, 31.448786280000036, 0, null],
+            [121.12145512900008, 31.44987558400004, 0, null],
+            [121.12161675300001, 31.450047558000051, 0, null],
+            [121.12171115700005, 31.45026187600007, 0, null],
+            [121.12172987400004, 31.450431122000055, 0, null],
+            [121.12160803000006, 31.45071692700003, 0, null],
+            [121.12062664600012, 31.451487239000073, 0, null],
+            [121.11982406300001, 31.452028738000024, 0, null],
+            [121.11941261700008, 31.452382293000028, 0, null],
+            [121.11883580900007, 31.452978018000067, 0, null],
+            [121.11842413000011, 31.453312482000058, 0, null],
+            [121.11748247000003, 31.454020616000037, 0, null],
+            [121.11701747000006, 31.454241011000079, 0, null],
+            [121.1163266210001, 31.454819691000068, 0, null],
+            [121.1150174280001, 31.455958730000077, 0, null],
+            [121.11426478100009, 31.45548410300006, 0, null],
+            [121.11282513900005, 31.453949519000048, 0, null],
+            [121.11253442100008, 31.453690433000077, 0, null],
+            [121.11170797200009, 31.453238290000058, 0, null],
+            [121.11066093200009, 31.452311507000047, 0, null],
+            [121.11320330500007, 31.448827515000062, 0, null],
+            [121.11328679500002, 31.448713100000077, 0, null],
+            [121.11492692100001, 31.446629030000054, 0, null],
+            [121.11601309500008, 31.445248852000077, 0, null],
+            [121.11612518200002, 31.445270729000072, 0, null]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.031158776215399999,
+        "Shape_Area": 6.0227996315300001e-5,
+        "CMC": "惠阳社区",
+        "DZWHMC": "娄东街道",
+        "color": "#10b7f1"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 223,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.12371346900011, 31.44916336600005, 0, null],
+            [121.12332454400007, 31.449535824000066, 0, null],
+            [121.12292713200009, 31.449819274000049, 0, null],
+            [121.12266793600008, 31.450127030000033, 0, null],
+            [121.12220789900005, 31.450838929000042, 0, null],
+            [121.12191284300002, 31.450992632000066, 0, null],
+            [121.12162327100009, 31.45082814400007, 0, null],
+            [121.12160803000006, 31.45071692700003, 0, null],
+            [121.12172987400004, 31.450431122000055, 0, null],
+            [121.12171115700005, 31.45026187600007, 0, null],
+            [121.12161675300001, 31.450047558000051, 0, null],
+            [121.12145512900008, 31.44987558400004, 0, null],
+            [121.12012622000009, 31.448786280000036, 0, null],
+            [121.11946210400004, 31.448150751000071, 0, null],
+            [121.11897351300001, 31.447631156000057, 0, null],
+            [121.11842632500009, 31.447177810000028, 0, null],
+            [121.11802638300003, 31.446936332000064, 0, null],
+            [121.11773231000006, 31.446703471000035, 0, null],
+            [121.11695508000003, 31.445939549000059, 0, null],
+            [121.11660975700011, 31.445648278000078, 0, null],
+            [121.11612518200002, 31.445270729000072, 0, null],
+            [121.11601309500008, 31.445248852000077, 0, null],
+            [121.11605111300003, 31.445200541000077, 0, null],
+            [121.11478533600007, 31.444044949000045, 0, null],
+            [121.11518248300001, 31.443598080000072, 0, null],
+            [121.11383333000003, 31.44275575100005, 0, null],
+            [121.11360011900001, 31.442962905000059, 0, null],
+            [121.11260995900011, 31.44205893700007, 0, null],
+            [121.11376637700005, 31.440630666000061, 0, null],
+            [121.11225917700006, 31.439726354000072, 0, null],
+            [121.11146432700002, 31.439249436000068, 0, null],
+            [121.11273393100009, 31.437938044000077, 0, null],
+            [121.11305275000007, 31.437451190000047, 0, null],
+            [121.11305279400005, 31.437451124000063, 0, null],
+            [121.12039830300012, 31.43950835000004, 0, null],
+            [121.13027099400006, 31.442156460000035, 0, null],
+            [121.13002235300007, 31.442618439000057, 0, null],
+            [121.13003776800008, 31.442622611000047, 0, null],
+            [121.12908868300008, 31.444706862000032, 0, null],
+            [121.12807195200003, 31.445759094000039, 0, null],
+            [121.12806509300003, 31.445766193000054, 0, null],
+            [121.12707703100011, 31.446788724000044, 0, null],
+            [121.12476334700011, 31.44918301000007, 0, null],
+            [121.12408328100003, 31.448748776000059, 0, null],
+            [121.12371346900011, 31.44916336600005, 0, null]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.051993084705100001,
+        "Shape_Area": 0.00012264707331099999,
+        "CMC": "朝阳社区",
+        "DZWHMC": "娄东街道",
+        "color": "#d5b7f1"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 224,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.10963388800008, 31.507679758000052, 0, null],
+            [121.10671474900005, 31.505947525000067, 0, null],
+            [121.09423774700008, 31.498958751000032, 0, null],
+            [121.09620227900007, 31.494940734000068, 0, null],
+            [121.11040582600003, 31.474618742000075, 0, null],
+            [121.12286732300004, 31.480810502000054, 0, null],
+            [121.12787167600004, 31.483385657000042, 0, null],
+            [121.13408157300012, 31.486860066000077, 0, null],
+            [121.13532295400012, 31.487539306000031, 0, null],
+            [121.13818882700002, 31.489085174000024, 0, null],
+            [121.13492294000002, 31.492458958000043, 0, null],
+            [121.12988420700003, 31.498173889000043, 0, null],
+            [121.12809054200011, 31.496705808000058, 0, null],
+            [121.11893584500001, 31.506970059000025, 0, null],
+            [121.11235715900011, 31.503673304000074, 0, null],
+            [121.10963388800008, 31.507679758000052, 0, null]
+          ],
+          [
+            [121.11747277800009, 31.497175293000055, 0, null],
+            [121.1172645900001, 31.497433038000054, 0, null],
+            [121.11658452200004, 31.498274983000044, 0, null],
+            [121.11602697600006, 31.498965217000034, 0, null],
+            [121.11782281300009, 31.500204113000052, 0, null],
+            [121.11916896700006, 31.50122179400006, 0, null],
+            [121.11873790300001, 31.501852770000028, 0, null],
+            [121.12121073600008, 31.503124587000059, 0, null],
+            [121.12299478300008, 31.501250080000034, 0, null],
+            [121.12507055200001, 31.499068936000072, 0, null],
+            [121.12260415500009, 31.497760674000062, 0, null],
+            [121.11868094600004, 31.495679490000043, 0, null],
+            [121.11747277800009, 31.497175293000055, 0, null]
+          ],
+          [
+            [121.12732770300011, 31.496148108000057, 0, null],
+            [121.12973188100011, 31.493069185000024, 0, null],
+            [121.12730611300003, 31.491708293000045, 0, null],
+            [121.12510554900007, 31.494861420000063, 0, null],
+            [121.12732770300011, 31.496148108000057, 0, null]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.156450951437,
+        "Shape_Area": 0.00074659317650599996,
+        "CMC": "香花桥社区",
+        "DZWHMC": "娄东街道",
+        "color": "#b447f1"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 225,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.12632445300005, 31.463341342000035, 0, null],
+            [121.12558730100011, 31.463138829000059, 0, null],
+            [121.12513460700006, 31.463071225000078, 0, null],
+            [121.12447815000007, 31.463267877000078, 0, null],
+            [121.12426475700011, 31.463269751000041, 0, null],
+            [121.12360288200011, 31.463013094000075, 0, null],
+            [121.12270982300004, 31.462822088000053, 0, null],
+            [121.12215137700002, 31.462393515000031, 0, null],
+            [121.12150954200001, 31.461793076000049, 0, null],
+            [121.1211729800001, 31.46158127800004, 0, null],
+            [121.12081489100001, 31.461431704000063, 0, null],
+            [121.12066066900002, 31.461103776000073, 0, null],
+            [121.12041652800008, 31.460705053000027, 0, null],
+            [121.12026948900007, 31.460590615000058, 0, null],
+            [121.12010623500009, 31.460440353000024, 0, null],
+            [121.1200519570001, 31.460156027000039, 0, null],
+            [121.11914140400006, 31.459427687000073, 0, null],
+            [121.11852278000003, 31.45928527500007, 0, null],
+            [121.1181961310001, 31.459133709000071, 0, null],
+            [121.11797105900007, 31.458932858000026, 0, null],
+            [121.11781510100002, 31.458709977000069, 0, null],
+            [121.11765927700003, 31.458462342000075, 0, null],
+            [121.11708210200004, 31.458005913000079, 0, null],
+            [121.1167607860001, 31.457757011000069, 0, null],
+            [121.11651680800003, 31.457599878000053, 0, null],
+            [121.11680435800008, 31.457284672000071, 0, null],
+            [121.11587637100001, 31.45669143300006, 0, null],
+            [121.1150174280001, 31.455958730000077, 0, null],
+            [121.1163266210001, 31.454819691000068, 0, null],
+            [121.11701747000006, 31.454241011000079, 0, null],
+            [121.11748247000003, 31.454020616000037, 0, null],
+            [121.11842413000011, 31.453312482000058, 0, null],
+            [121.11883580900007, 31.452978018000067, 0, null],
+            [121.11941261700008, 31.452382293000028, 0, null],
+            [121.11982406300001, 31.452028738000024, 0, null],
+            [121.12062664600012, 31.451487239000073, 0, null],
+            [121.12160803000006, 31.45071692700003, 0, null],
+            [121.12162327100009, 31.45082814400007, 0, null],
+            [121.12191284300002, 31.450992632000066, 0, null],
+            [121.12220789900005, 31.450838929000042, 0, null],
+            [121.12266793600008, 31.450127030000033, 0, null],
+            [121.12292713200009, 31.449819274000049, 0, null],
+            [121.12332454400007, 31.449535824000066, 0, null],
+            [121.12371346900011, 31.44916336600005, 0, null],
+            [121.12408328100003, 31.448748776000059, 0, null],
+            [121.12476334700011, 31.44918301000007, 0, null],
+            [121.12876711800004, 31.451931534000039, 0, null],
+            [121.13166051500002, 31.45385929400004, 0, null],
+            [121.13393929200004, 31.455377454000029, 0, null],
+            [121.13862770000003, 31.457857306000051, 0, null],
+            [121.13630709500001, 31.46088457500008, 0, null],
+            [121.13566330100002, 31.461724415000049, 0, null],
+            [121.13036315000011, 31.458556540000075, 0, null],
+            [121.12632445300005, 31.463341342000035, 0, null]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.061305069993900001,
+        "Shape_Area": 0.00017363804882600001,
+        "CMC": "太东社区",
+        "DZWHMC": "娄东街道",
+        "color": "#33ffcc"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 226,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.13593237500004, 31.467569656000023, 0, null],
+            [121.13537758400003, 31.468774150000058, 0, null],
+            [121.13785896000002, 31.469195615000046, 0, null],
+            [121.1397347840001, 31.469509717000051, 0, null],
+            [121.14183776300001, 31.470292695000069, 0, null],
+            [121.1375103790001, 31.47617705600004, 0, null],
+            [121.1365043720001, 31.477850405000027, 0, null],
+            [121.13642084600008, 31.477996544000064, 0, null],
+            [121.13309900500008, 31.476408500000048, 0, null],
+            [121.12731090500006, 31.473959878000073, 0, null],
+            [121.1202539410001, 31.471004659000073, 0, null],
+            [121.11460913600001, 31.468640804000074, 0, null],
+            [121.11756713600005, 31.464285165000035, 0, null],
+            [121.1144306220001, 31.462809581000045, 0, null],
+            [121.11256541100011, 31.461955746000058, 0, null],
+            [121.11258021700007, 31.461938990000078, 0, null],
+            [121.11443798100004, 31.459878568000079, 0, null],
+            [121.11651680800003, 31.457599878000053, 0, null],
+            [121.1167607860001, 31.457757011000069, 0, null],
+            [121.11708210200004, 31.458005913000079, 0, null],
+            [121.11765927700003, 31.458462342000075, 0, null],
+            [121.11781510100002, 31.458709977000069, 0, null],
+            [121.11797105900007, 31.458932858000026, 0, null],
+            [121.1181961310001, 31.459133709000071, 0, null],
+            [121.11852278000003, 31.45928527500007, 0, null],
+            [121.11914140400006, 31.459427687000073, 0, null],
+            [121.1200519570001, 31.460156027000039, 0, null],
+            [121.12010623500009, 31.460440353000024, 0, null],
+            [121.12026948900007, 31.460590615000058, 0, null],
+            [121.12041652800008, 31.460705053000027, 0, null],
+            [121.12066066900002, 31.461103776000073, 0, null],
+            [121.12081489100001, 31.461431704000063, 0, null],
+            [121.1211729800001, 31.46158127800004, 0, null],
+            [121.12150954200001, 31.461793076000049, 0, null],
+            [121.12215137700002, 31.462393515000031, 0, null],
+            [121.12270982300004, 31.462822088000053, 0, null],
+            [121.12360288200011, 31.463013094000075, 0, null],
+            [121.12426475700011, 31.463269751000041, 0, null],
+            [121.12447815000007, 31.463267877000078, 0, null],
+            [121.12513460700006, 31.463071225000078, 0, null],
+            [121.12558730100011, 31.463138829000059, 0, null],
+            [121.12632445300005, 31.463341342000035, 0, null],
+            [121.12634025000011, 31.463345681000078, 0, null],
+            [121.12512300900005, 31.464877354000066, 0, null],
+            [121.13164675600001, 31.466534275000072, 0, null],
+            [121.13220152400004, 31.466754456000047, 0, null],
+            [121.13283827400005, 31.465999600000032, 0, null],
+            [121.13593237500004, 31.467569656000023, 0, null]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.083672665783800004,
+        "Shape_Area": 0.00023262840564100001,
+        "CMC": "东郊社区",
+        "DZWHMC": "娄东街道",
+        "color": "#FA8072"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 227,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.13566330100002, 31.461724415000049, 0, null],
+            [121.13598867300004, 31.461918874000048, 0, null],
+            [121.1406439970001, 31.464700951000054, 0, null],
+            [121.13785896000002, 31.469195615000046, 0, null],
+            [121.13537758400003, 31.468774150000058, 0, null],
+            [121.13593237500004, 31.467569656000023, 0, null],
+            [121.13283827400005, 31.465999600000032, 0, null],
+            [121.13220152400004, 31.466754456000047, 0, null],
+            [121.13164675600001, 31.466534275000072, 0, null],
+            [121.12512300900005, 31.464877354000066, 0, null],
+            [121.12634025000011, 31.463345681000078, 0, null],
+            [121.12632445300005, 31.463341342000035, 0, null],
+            [121.13036315000011, 31.458556540000075, 0, null],
+            [121.13566330100002, 31.461724415000049, 0, null]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.0411268584827,
+        "Shape_Area": 7.7544312680099994e-5,
+        "CMC": "裕珑社区",
+        "DZWHMC": "娄东街道",
+        "color": "#A0522D"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 228,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.1482608980001, 31.470118068000033, 0, null],
+            [121.14560447300005, 31.473513814000057, 0, null],
+            [121.14183776300001, 31.470292695000069, 0, null],
+            [121.1397347840001, 31.469509717000051, 0, null],
+            [121.13785896000002, 31.469195615000046, 0, null],
+            [121.1406439970001, 31.464700951000054, 0, null],
+            [121.13598867300004, 31.461918874000048, 0, null],
+            [121.13566330100002, 31.461724415000049, 0, null],
+            [121.13630709500001, 31.46088457500008, 0, null],
+            [121.13862770000003, 31.457857306000051, 0, null],
+            [121.13393929200004, 31.455377454000029, 0, null],
+            [121.13166051500002, 31.45385929400004, 0, null],
+            [121.13166264800009, 31.453856745000053, 0, null],
+            [121.13392739500011, 31.45536555700005, 0, null],
+            [121.13538614900006, 31.453986102000044, 0, null],
+            [121.13856572400005, 31.454922708000026, 0, null],
+            [121.14033234600004, 31.455588137000063, 0, null],
+            [121.13875592200009, 31.457806887000061, 0, null],
+            [121.14347648700004, 31.46053106200003, 0, null],
+            [121.14742302600007, 31.462570464000066, 0, null],
+            [121.1490138050001, 31.459480050000025, 0, null],
+            [121.15040434100001, 31.456778468000039, 0, null],
+            [121.15053158300009, 31.45658368200003, 0, null],
+            [121.15157090200012, 31.454992614000048, 0, null],
+            [121.15237992200002, 31.453754060000051, 0, null],
+            [121.15394217100004, 31.451362261000043, 0, null],
+            [121.16092057200001, 31.453930980000052, 0, null],
+            [121.15550944900008, 31.46085064500005, 0, null],
+            [121.15296331100001, 31.464106186000038, 0, null],
+            [121.1482608980001, 31.470118068000033, 0, null]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.10093646303500001,
+        "Shape_Area": 0.000221232058146,
+        "CMC": "太胜社区",
+        "DZWHMC": "娄东街道",
+        "color": "#87CEEB"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 229,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.14697517400009, 31.455067955000061, 0, null],
+            [121.14531242700002, 31.45766438000004, 0, null],
+            [121.14495185100009, 31.458227407000038, 0, null],
+            [121.14347648700004, 31.46053106200003, 0, null],
+            [121.13875592200009, 31.457806887000061, 0, null],
+            [121.14033234600004, 31.455588137000063, 0, null],
+            [121.13856572400005, 31.454922708000026, 0, null],
+            [121.13538614900006, 31.453986102000044, 0, null],
+            [121.13821989500002, 31.451237564000053, 0, null],
+            [121.14246134100006, 31.452889928000047, 0, null],
+            [121.14307333700003, 31.453121585000076, 0, null],
+            [121.14367343700007, 31.453341342000044, 0, null],
+            [121.14697517400009, 31.455067955000061, 0, null]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.033380877987199999,
+        "Shape_Area": 4.9644396315800003e-5,
+        "CMC": "浦溪社区",
+        "DZWHMC": "娄东街道",
+        "color": "#00B2EE"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 230,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.13538614900006, 31.453986102000044, 0, null],
+            [121.13392739500011, 31.45536555700005, 0, null],
+            [121.13166264800009, 31.453856745000053, 0, null],
+            [121.13166051500002, 31.45385929400004, 0, null],
+            [121.12876711800004, 31.451931534000039, 0, null],
+            [121.12476334700011, 31.44918301000007, 0, null],
+            [121.12707703100011, 31.446788724000044, 0, null],
+            [121.12806509300003, 31.445766193000054, 0, null],
+            [121.12807195200003, 31.445759094000039, 0, null],
+            [121.12908868300008, 31.444706862000032, 0, null],
+            [121.13003776800008, 31.442622611000047, 0, null],
+            [121.13002235300007, 31.442618439000057, 0, null],
+            [121.13804735200006, 31.444640034000031, 0, null],
+            [121.1388154870001, 31.444933001000038, 0, null],
+            [121.14625117500009, 31.447768978000056, 0, null],
+            [121.14460465500008, 31.450021865000053, 0, null],
+            [121.14246134100006, 31.452889928000047, 0, null],
+            [121.13821989500002, 31.451237564000053, 0, null],
+            [121.13538614900006, 31.453986102000044, 0, null]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.053522688117500002,
+        "Shape_Area": 0.00014671314128700001,
+        "CMC": "滨河社区",
+        "DZWHMC": "娄东街道",
+        "color": "#556B2F"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 231,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.15040434100001, 31.456778468000039, 0, null],
+            [121.1490138050001, 31.459480050000025, 0, null],
+            [121.14742302600007, 31.462570464000066, 0, null],
+            [121.14347648700004, 31.46053106200003, 0, null],
+            [121.14495185100009, 31.458227407000038, 0, null],
+            [121.14531242700002, 31.45766438000004, 0, null],
+            [121.14697517400009, 31.455067955000061, 0, null],
+            [121.15040434100001, 31.456778468000039, 0, null]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.021276090040200001,
+        "Shape_Area": 2.6828420511900001e-5,
+        "CMC": "景瑞社区",
+        "DZWHMC": "娄东街道",
+        "color": "#7D26CD"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 201,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.14996546000009, 31.449507692000054, 0, null],
+            [121.15394217100004, 31.451362261000043, 0, null],
+            [121.15237992200002, 31.453754060000051, 0, null],
+            [121.15157090200012, 31.454992614000048, 0, null],
+            [121.15053158300009, 31.45658368200003, 0, null],
+            [121.15040434100001, 31.456778468000039, 0, null],
+            [121.14697517400009, 31.455067955000061, 0, null],
+            [121.14367343700007, 31.453341342000044, 0, null],
+            [121.14307333700003, 31.453121585000076, 0, null],
+            [121.14246134100006, 31.452889928000047, 0, null],
+            [121.14460465500008, 31.450021865000053, 0, null],
+            [121.14625117500009, 31.447768978000056, 0, null],
+            [121.14996546000009, 31.449507692000054, 0, null]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.030180652771500002,
+        "Shape_Area": 5.4399586747699999e-5,
+        "CMC": "娄江社区",
+        "DZWHMC": "娄东街道",
+        "color": "#828282"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 232,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.14587158000006, 31.484509273000072, 0, null],
+            [121.14682849500002, 31.484855587000027, 0, null],
+            [121.14630485900011, 31.486073235000049, 0, null],
+            [121.1459444730001, 31.486911254000063, 0, null],
+            [121.14293807600006, 31.491494283000065, 0, null],
+            [121.13818882700002, 31.489085174000024, 0, null],
+            [121.13532295400012, 31.487539306000031, 0, null],
+            [121.13408157300012, 31.486860066000077, 0, null],
+            [121.12787167600004, 31.483385657000042, 0, null],
+            [121.12286732300004, 31.480810502000054, 0, null],
+            [121.11040582600003, 31.474618742000075, 0, null],
+            [121.11196529100005, 31.472386888000074, 0, null],
+            [121.12425047200009, 31.479092962000038, 0, null],
+            [121.1259038820001, 31.476319869000065, 0, null],
+            [121.12731090500006, 31.473959878000073, 0, null],
+            [121.13309900500008, 31.476408500000048, 0, null],
+            [121.13642084600008, 31.477996544000064, 0, null],
+            [121.1365043720001, 31.477850405000027, 0, null],
+            [121.1375103790001, 31.47617705600004, 0, null],
+            [121.14183776300001, 31.470292695000069, 0, null],
+            [121.14560447300005, 31.473513814000057, 0, null],
+            [121.14999912700011, 31.476759470000047, 0, null],
+            [121.14945933000001, 31.478385977000073, 0, null],
+            [121.1486690050001, 31.480749067000033, 0, null],
+            [121.14859601500007, 31.480967304000046, 0, null],
+            [121.14847383900008, 31.481332608000059, 0, null],
+            [121.14806092800006, 31.481148718000043, 0, null],
+            [121.14784171800011, 31.481021017000046, 0, null],
+            [121.14776456000004, 31.481190304000052, 0, null],
+            [121.14747367200005, 31.481010897000033, 0, null],
+            [121.14587158000006, 31.484509273000072, 0, null]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.107800304083,
+        "Shape_Area": 0.00032256619148799998,
+        "CMC": "荷塘社区",
+        "DZWHMC": "娄东街道",
+        "color": "#9370DB"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 233,
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [121.11878713500005, 31.525347381000074, 0, null],
+              [121.12019994700006, 31.527352820000033, 0, null],
+              [121.12073047700005, 31.527912779000076, 0, null],
+              [121.12071210500005, 31.528160282000044, 0, null],
+              [121.12175239200008, 31.529160905000026, 0, null],
+              [121.12163653300001, 31.529317589000073, 0, null],
+              [121.12071824600002, 31.530583272000058, 0, null],
+              [121.11933859200008, 31.53232822700005, 0, null],
+              [121.11910354400004, 31.53264019900007, 0, null],
+              [121.1187114600001, 31.533289703000037, 0, null],
+              [121.11822483100002, 31.53390538900004, 0, null],
+              [121.11773087100005, 31.534865212000057, 0, null],
+              [121.10955931500007, 31.530561935000037, 0, null],
+              [121.11021920000007, 31.529875908000065, 0, null],
+              [121.10965314200007, 31.529313064000064, 0, null],
+              [121.10857671400004, 31.528728605000026, 0, null],
+              [121.10713479300011, 31.527417901000035, 0, null],
+              [121.10683179600005, 31.527206531000047, 0, null],
+              [121.10596816800012, 31.52684111700006, 0, null],
+              [121.10560213100007, 31.526657388000046, 0, null],
+              [121.10506337700008, 31.52622341700004, 0, null],
+              [121.10471930100005, 31.525980514000025, 0, null],
+              [121.10708243900001, 31.523601074000055, 0, null],
+              [121.10824717800006, 31.524529132000055, 0, null],
+              [121.10862282900007, 31.524311497000042, 0, null],
+              [121.11020460400005, 31.522923318000039, 0, null],
+              [121.1100493990001, 31.522587874000067, 0, null],
+              [121.11066737900001, 31.521742002000053, 0, null],
+              [121.11061315800009, 31.521551189000036, 0, null],
+              [121.1102910410001, 31.52115441400008, 0, null],
+              [121.10974289100011, 31.520629627000062, 0, null],
+              [121.11040383800002, 31.519894247000025, 0, null],
+              [121.11245301100007, 31.518057897000062, 0, null],
+              [121.11423932200012, 31.516115249000052, 0, null],
+              [121.1136604940001, 31.515710428000034, 0, null],
+              [121.11377058100004, 31.515589577000071, 0, null],
+              [121.11328952500003, 31.51520301000005, 0, null],
+              [121.11369484900001, 31.514749376000054, 0, null],
+              [121.11375600000008, 31.514680937000037, 0, null],
+              [121.11406210600001, 31.514338347000034, 0, null],
+              [121.11348760100009, 31.514011141000026, 0, null],
+              [121.11337500600007, 31.513947013000063, 0, null],
+              [121.11306790600008, 31.513772105000044, 0, null],
+              [121.11230144300009, 31.51461592000004, 0, null],
+              [121.11118161500008, 31.513871861000041, 0, null],
+              [121.11073098600002, 31.514356815000042, 0, null],
+              [121.11053112700006, 31.514244116000043, 0, null],
+              [121.10998938500006, 31.513819831000035, 0, null],
+              [121.11004208500003, 31.513764617000049, 0, null],
+              [121.11207924300004, 31.511636817000067, 0, null],
+              [121.10545839300005, 31.507489416000055, 0, null],
+              [121.10671474900005, 31.505947525000067, 0, null],
+              [121.10963388800008, 31.507679758000052, 0, null],
+              [121.11235715900011, 31.503673304000074, 0, null],
+              [121.11893584500001, 31.506970059000025, 0, null],
+              [121.12809054200011, 31.496705808000058, 0, null],
+              [121.12988420700003, 31.498173889000043, 0, null],
+              [121.13492294000002, 31.492458958000043, 0, null],
+              [121.13818882700002, 31.489085174000024, 0, null],
+              [121.14293807600006, 31.491494283000065, 0, null],
+              [121.1411539500001, 31.493476375000057, 0, null],
+              [121.13506142800009, 31.501268190000076, 0, null],
+              [121.1351561670001, 31.501324813000053, 0, null],
+              [121.13410475900002, 31.503439176000029, 0, null],
+              [121.13179269900002, 31.508088686000065, 0, null],
+              [121.12867729100003, 31.515920859000062, 0, null],
+              [121.12794591200009, 31.515818756000044, 0, null],
+              [121.12767555900007, 31.515879090000055, 0, null],
+              [121.12769742600005, 31.51604687400004, 0, null],
+              [121.12746301800007, 31.516039072000069, 0, null],
+              [121.12734333800006, 31.516073931000051, 0, null],
+              [121.12722399200004, 31.516157081000074, 0, null],
+              [121.12707400700003, 31.516301181000074, 0, null],
+              [121.1269557390001, 31.516515132000052, 0, null],
+              [121.12671032100002, 31.516611150000074, 0, null],
+              [121.12650736600006, 31.516651152000065, 0, null],
+              [121.12610495000001, 31.516613540000037, 0, null],
+              [121.12549576200001, 31.516420271000072, 0, null],
+              [121.12515122800005, 31.516222151000079, 0, null],
+              [121.12467735300004, 31.515886798000054, 0, null],
+              [121.12451665600008, 31.515709946000072, 0, null],
+              [121.12424015800002, 31.515277950000041, 0, null],
+              [121.12407603700001, 31.515134677000049, 0, null],
+              [121.12388907400009, 31.515043979000041, 0, null],
+              [121.12348137800006, 31.51503559300005, 0, null],
+              [121.12316022200002, 31.515090484000041, 0, null],
+              [121.12323571400009, 31.515787130000035, 0, null],
+              [121.12295159400003, 31.516110877000074, 0, null],
+              [121.12331093600005, 31.516276958000049, 0, null],
+              [121.12319590900006, 31.51651649300004, 0, null],
+              [121.12277107900002, 31.517022889000032, 0, null],
+              [121.12249135400009, 31.517202138000073, 0, null],
+              [121.12218930100005, 31.517666512000062, 0, null],
+              [121.12156999900003, 31.518801158000031, 0, null],
+              [121.1214496450001, 31.518964728000071, 0, null],
+              [121.12129652200008, 31.519052577000025, 0, null],
+              [121.12111354400008, 31.51924714300003, 0, null],
+              [121.12104829300006, 31.519488970000054, 0, null],
+              [121.12090487000012, 31.519671010000025, 0, null],
+              [121.12077091300011, 31.520029762000036, 0, null],
+              [121.12063629500005, 31.520189678000065, 0, null],
+              [121.1205479780001, 31.520429608000029, 0, null],
+              [121.12043853200009, 31.520932393000066, 0, null],
+              [121.12024934400006, 31.521223177000024, 0, null],
+              [121.11976940000011, 31.521735715000034, 0, null],
+              [121.11950125900012, 31.522127555000054, 0, null],
+              [121.11916584100004, 31.522530271000051, 0, null],
+              [121.11775706000003, 31.524086494000073, 0, null],
+              [121.11878713500005, 31.525347381000074, 0, null]
+            ]
+          ],
+          [
+            [
+              [121.12973188100011, 31.493069185000024, 0, null],
+              [121.12732770300011, 31.496148108000057, 0, null],
+              [121.12510554900007, 31.494861420000063, 0, null],
+              [121.12730611300003, 31.491708293000045, 0, null],
+              [121.12973188100011, 31.493069185000024, 0, null]
+            ]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 100,
+        "Shape_Leng": 0.17673052623300001,
+        "Shape_Area": 0.00055468075978200001,
+        "CMC": "花北社区",
+        "DZWHMC": "娄东街道",
+        "color": "#B8860B"
+      }
+    }
+  ]
+}

src/assets/data/小区.json

@@ -0,0 +1,313 @@
+{
+  "type": "FeatureCollection",
+  "crs": {
+    "type": "name",
+    "properties": {
+      "name": "EPSG:4490"
+    }
+  },
+  "features": [
+    {
+      "type": "Feature",
+      "id": 202,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.15210206300003, 31.453490119000094],
+            [121.15130613400015, 31.45483670700014],
+            [121.15030696000008, 31.456521351000049],
+            [121.14706991800017, 31.454924208000193],
+            [121.14324918900013, 31.45304202400024],
+            [121.14528287800022, 31.450400786000159],
+            [121.1461368790001, 31.449216880000108],
+            [121.14660267700015, 31.448841845000061],
+            [121.1493941870001, 31.450028493000218],
+            [121.15117412200004, 31.450787285000104],
+            [121.15124973500019, 31.450653987000067],
+            [121.1532992880002, 31.451514098000075],
+            [121.15330743900006, 31.451544017000174],
+            [121.15250676300013, 31.452819680000118],
+            [121.15210206300003, 31.453490119000094]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 201,
+        "Id": 202,
+        "name": "大庆锦绣新城"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 215,
+      "properties": {
+        "FID": 231,
+        "Id": 215,
+        "name": "景瑞·荣御蓝湾"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.14371380584339, 31.460461572031647],
+            [121.14702601556337, 31.455255311350925],
+            [121.15022401115527, 31.456816237770738],
+            [121.14697842634337, 31.46223189101994],
+            [121.14371380584339, 31.460461572031647]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 235,
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.08689169600007, 31.469446161000064],
+            [121.08679089200007, 31.469379570000058],
+            [121.08766088700008, 31.468154330000061],
+            [121.08837364100009, 31.467199571000037],
+            [121.0886989060001, 31.466824578000057],
+            [121.09114914800011, 31.468210549000048],
+            [121.09357745900002, 31.469619566000063],
+            [121.09148624200009, 31.47194227600005],
+            [121.08689169600007, 31.469446161000064]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 238,
+        "Id": 235,
+        "name": "华盛六园"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 242,
+      "properties": {
+        "FID": 225,
+        "Id": 242,
+        "name": "星雨华府"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [121.12279891402805, 31.451721436414346],
+            [121.12331740390771, 31.452040003075219],
+            [121.12408569179644, 31.452512861528238],
+            [121.12470258830108, 31.452893988241954],
+            [121.12531929737979, 31.452327845565964],
+            [121.12626502014109, 31.451461741968533],
+            [121.12547674999021, 31.450947315995919],
+            [121.1260359762196, 31.450347077116263],
+            [121.12500371372785, 31.449677312470119],
+            [121.12494091096249, 31.449662354657587],
+            [121.12475474951661, 31.449689043304577],
+            [121.12441000674728, 31.450051372156416],
+            [121.12390550630934, 31.450573576700819],
+            [121.12279891402805, 31.451721436414346]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 245,
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [121.13567298958456, 31.454102406409948, 0],
+              [121.13768475821482, 31.454661905928795, 0],
+              [121.13907670620884, 31.45514106131147, 0],
+              [121.14015895699522, 31.45555853531014, 0],
+              [121.14214039978316, 31.45300449914922, 0],
+              [121.14107437717665, 31.45254633383576, 0],
+              [121.13844127068502, 31.45162250056609, 0],
+              [121.13567298958456, 31.454102406409948, 0]
+            ]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 229,
+        "Id": 245,
+        "name": "高尔夫湖滨花苑"
+      }
+    },
+
+    {
+      "type": "Feature",
+      "id": 251,
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [121.13478750396366, 31.4554114542002, 0],
+              [121.13800290880931, 31.45706533280174, 0],
+              [121.1385358975176, 31.456301828615167, 0],
+              [121.13920674454972, 31.45662609333331, 0],
+              [121.13988031553205, 31.455681185608626, 0],
+              [121.13848990390939, 31.454984894100864, 0],
+              [121.13564086372101, 31.454161945136057, 0],
+              [121.13478750396366, 31.4554114542002, 0]
+            ]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 228,
+        "Id": 251,
+        "name": "世福园"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 248,
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [121.12910044289922, 31.451999629749007, 0],
+              [121.1335163778425, 31.454900251289484, 0],
+              [121.13387411488705, 31.45502115967714, 0],
+              [121.13505183479573, 31.453894050411556, 0],
+              [121.1367634499105, 31.45226589209519, 0],
+              [121.13755914025558, 31.45154599141533, 0],
+              [121.13402259627087, 31.44996079650474, 0],
+              [121.13332372310879, 31.449707498096036, 0],
+              [121.13224567213331, 31.44945754835756, 0],
+              [121.13005052215875, 31.451209814357746, 0],
+              [121.12928936509174, 31.45185480022009, 0],
+              [121.12910044289922, 31.451999629749007, 0]
+            ]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 230,
+        "Id": 248,
+        "name": "华侨花园"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 254,
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [121.13337712525555, 31.4599390265864, 0],
+              [121.13433252807067, 31.46049940365059, 0],
+              [121.13560636225301, 31.4612421079844, 0],
+              [121.13667649840896, 31.459857209704648, 0],
+              [121.13660222255425, 31.45981491992953, 0],
+              [121.1366219258422, 31.45977537507781, 0],
+              [121.13661593417916, 31.45974023389423, 0],
+              [121.13660080319006, 31.4596974191384, 0],
+              [121.13659677651934, 31.459652119762985, 0],
+              [121.13662457023656, 31.459591028573232, 0],
+              [121.1346309182915, 31.45843238118359, 0],
+              [121.13439275771833, 31.458707098456827, 0],
+              [121.13439856151928, 31.458726732038407, 0],
+              [121.13417547742985, 31.4589822268822, 0],
+              [121.13411281956859, 31.459037661187136, 0],
+              [121.13337712525555, 31.4599390265864, 0]
+            ]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 225,
+        "Id": 254,
+        "name": "碧桂园天珵"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 257,
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [121.1346309182915, 31.45843238118359, 0],
+              [121.13662457023656, 31.459591028573232, 0],
+              [121.13665450784781, 31.459571077860772, 0],
+              [121.13675295393595, 31.459540378264492, 0],
+              [121.1368099534709, 31.459535100152895, 0],
+              [121.13683066951084, 31.459521792924335, 0],
+              [121.13685947594122, 31.459486939340177, 0],
+              [121.13693089629705, 31.45952328917581, 0],
+              [121.13814370947021, 31.457959191630987, 0],
+              [121.13694638390011, 31.45734945191755, 0],
+              [121.1364901969794, 31.457951209075937, 0],
+              [121.13552176739715, 31.457394303700475, 0],
+              [121.1346309182915, 31.45843238118359, 0]
+            ]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 225,
+        "Id": 257,
+        "name": "吴中锦绣朝阳"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 260,
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [121.1310254406712, 31.458598471707873, 0],
+              [121.13304914184576, 31.459759296020913, 0],
+              [121.13570284420756, 31.45678196603628, 0],
+              [121.13405432659054, 31.45582401657525, 0],
+              [121.13200466980022, 31.45770566446173, 0],
+              [121.1310254406712, 31.458598471707873, 0]
+            ]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 225,
+        "Id": 260,
+        "name": "中南君樾阁"
+      }
+    },
+    {
+      "type": "Feature",
+      "id": 267,
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [121.090062550702143, 31.480153267271167],
+              [121.092243209269853, 31.47733104878057],
+              [121.089840505197145, 31.476009361892121],
+              [121.087443982342165, 31.478827408937555],
+              [121.090062550702143, 31.480153267271167]
+            ]
+          ]
+        ]
+      },
+      "properties": {
+        "FID": 238,
+        "Id": 267,
+        "name": "森茂汽车城"
+      }
+    }
+  ]
+}

src/assets/styles/index.scss

@@ -5,6 +5,7 @@
 @import "./sidebar.scss";
 @import "./btn.scss";
 @import "./font.css";
+@import "./map.css";
 
 body {
   height: 100%;
@@ -189,3 +190,16 @@ aside {
     margin-bottom: 10px;
   }
 }
+
+.input-general-width {
+  //input常规宽度
+  width: 140px;
+}
+
+.taicang-dialog {
+  .el-dialog__close {
+    color: #fff;
+  }
+}
+
+/*全局滚动条样式结束*/

src/assets/styles/isTable.scss

@@ -0,0 +1,165 @@
+.search-container {
+  margin-top: 10px;
+  flex: 1;
+  ::v-deep .option-rows {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #003869;
+    padding: 15px 0;
+    .el-select {
+      margin-right: 10px;
+      width: 150px;
+    }
+    .el-date-editor {
+      margin-right: 10px;
+    }
+    .el-input__inner,
+    .el-input__inner::placeholder,
+    .el-range-input,
+    .el-range-input::placeholder {
+      color: #06162a;
+    }
+    .el-radio-group {
+      margin: 0 30px 0 10px;
+    }
+    .el-checkbox__label,
+    .el-radio__label {
+      font-size: 16px;
+      color: #aabace;
+      font-weight: 500;
+      font-family: "Alibaba-PuHuiTi-Regular.otf";
+    }
+  }
+  .three-option {
+    margin-top: 15px;
+
+    .option-list {
+      position: relative;
+      top: 2px;
+      left: 0;
+      display: flex;
+      align-items: center;
+      & > div {
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        text-align: center;
+        line-height: 40px;
+        margin-right: 8px;
+        background: #0059a2;
+        border-radius: 4px 4px 0px 0px;
+        font-size: 16px;
+        color: #aee0ff;
+        font-weight: 400;
+        font-family: "Alibaba-PuHuiTi-Regular.otf";
+      }
+    }
+    .option-input {
+      height: 80px;
+      background: #042854;
+      border: 1px solid #006cc5;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      .input-general-width {
+        margin-right: 10px;
+      }
+      .input-big-width {
+        width: 300px;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .result-list {
+    margin-top: 15px;
+    .list-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 16px;
+      .header-left-total {
+        color: #ffa11b;
+        font-weight: 500;
+        font-family: "Alibaba-PuHuiTi-Medium.otf";
+      }
+      .header-rigth-total {
+        color: #aacfff;
+        font-weight: 400;
+        font-family: "Alibaba-PuHuiTi-Regular.otf";
+      }
+    }
+    .list-table {
+      margin-top: 10px;
+      .table-header {
+        padding: 5px 0;
+        font-size: 16px;
+        color: #eff8ff;
+        background: linear-gradient(90deg, #007b9f, #0066d8);
+        font-family: "Alibaba-PuHuiTi-Regular.otf";
+      }
+      .table-body {
+        height: 350px;
+
+        .body-rows {
+          padding: 7px 0;
+          font-size: 14px;
+          color: #ffffff;
+          font-family: "Alibaba-PuHuiTi-Medium.otf";
+        }
+        & > .body-rows:nth-child(even) {
+          background: #033159;
+        }
+      }
+      .table-header,
+      .body-rows {
+        display: flex;
+        align-items: center;
+        & > div {
+          text-align: center;
+        }
+        .table-cell0 {
+          width: 50px;
+        }
+        .table-cell1 {
+          flex: 1;
+        }
+        .table-cell2 {
+          flex: 2;
+        }
+        .cell-flex {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+  .el-button {
+    font-size: 14px;
+    color: #cdfbff;
+    font-weight: 400;
+    background: url("~@/assets/images/ui/btn_bg.png");
+    background-size: 100% 100%;
+    padding: 12px 20px 14px 20px;
+    font-family: "Alibaba-PuHuiTi-Regular.otf";
+  }
+}
+.activeItme {
+  color: #ffffff !important;
+  border: 1px solid #006cc5 !important;
+  border-bottom: 0 !important;
+  background: #042854 !important;
+}
+.recover {
+  span {
+    padding: 3px 8px;
+    background: #007f54;
+    color: white;
+    cursor: pointer;
+    border-radius: 3px;
+  }
+}
+::v-deep .el-loading-mask {
+  background: rgba(0, 0, 0, 0.8);
+}

src/assets/styles/map.css

@@ -0,0 +1,167 @@
+/* leaflet样式 */
+.region-name1 {
+  /* width: 84px !important; */
+  height: 65px !important;
+  font-size: 20px;
+  /* font-family: 'Source Han Sans CN-Bold'; */
+  font-weight: bold;
+  text-align: center;
+  color: #ffffff;
+  line-height: 1px;
+  white-space: nowrap;
+  background: linear-gradient(
+    0deg,
+    rgba(79, 126, 248, 0.68),
+    rgba(0, 96, 255, 0.99)
+  );
+  border-radius: 5px;
+  font-style: italic;
+  text-stroke: 0.5px #217ff5;
+  -webkit-text-stroke: 0.5px #217ff5;
+  text-shadow: 0px 2px 3px rgba(42, 133, 243, 0.67);
+}
+.region-name2 {
+  margin-top: -13px !important;
+  text-align: center;
+  white-space: nowrap;
+  font-size: 13px;
+  font-style: italic;
+  color: #ffffff;
+  text-shadow: 0px 2px 3px rgba(42, 133, 243, 0.67);
+}
+.region-name3 {
+  margin-top: 5px !important;
+  text-align: center;
+  white-space: nowrap;
+  font-size: 13px;
+  font-style: italic;
+  color: #ffffff;
+  text-shadow: 0px 2px 3px rgba(42, 133, 243, 0.67);
+}
+
+.region-name4 {
+  /* font-family: "xiniu"; */
+  font-size: 14px;
+  font-weight: bold;
+  font-style: italic;
+  color: #fff7cf;
+  text-align: center;
+  white-space: nowrap;
+  /* text-stroke: 0.7px rgba(0, 0, 0, 1);
+  -webkit-text-stroke: 0.7px rgba(0, 0, 0, 1);*/
+  background: linear-gradient(0deg, #ffffff 0%, #cff4ff 50%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(0 0 0.3px #000) drop-shadow(0 0 0.3px #000)
+    drop-shadow(0 0 0.3px #000) drop-shadow(0 0 0.3px #000)
+    drop-shadow(0 0 0.3px #000) drop-shadow(0 0 0.3px #000)
+    drop-shadow(0 0 0.3px #000);
+  /* writing-mode: vertical-rl; */
+}
+
+.land-name {
+  font-family: "Alibaba-PuHuiTi-Bold.otf";
+  font-size: 18px;
+  font-weight: bold;
+  text-align: center;
+  font-style: italic;
+  color: #ffeb3b;
+  /* background: linear-gradient(0deg, #ffffff 0%, #fff7cf 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent; */
+  line-height: 24px;
+  letter-spacing: 2px;
+  white-space: nowrap;
+  /* text-stroke: 0.5px rgba(0, 0, 0, 1);
+  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 1); */
+  filter: drop-shadow(0 0 0.75px #000) drop-shadow(0 0 0.75px #000)
+    drop-shadow(0 0 0.75px #000) drop-shadow(0 0 0.75px #000)
+    drop-shadow(0 0 0.75px #000);
+}
+.text-hide .land-name {
+  display: none;
+}
+.text-18 .land-name {
+  font-size: 20px;
+}
+.text-17 .land-name {
+  font-size: 15px;
+}
+.text-16 .land-name {
+  font-size: 10px;
+}
+.land-name2 {
+  font-size: 20px;
+  font-weight: 400;
+  text-align: center;
+  color: #ffffff;
+  line-height: 85px;
+  letter-spacing: 2px;
+  white-space: nowrap;
+  text-shadow: #000000 1px 0 0, #000000 0 1px 0, #000000 -1px 0 0,
+    #000000 0 -1px 0;
+}
+.text-hide .land-name2 {
+  display: none;
+}
+.text-18 .land-name2 {
+  line-height: 95px;
+  font-size: 20px;
+}
+.text-17 .land-name2 {
+  font-size: 14px;
+}
+.text-16 .land-name2 {
+  line-height: 55px;
+  font-size: 7px;
+}
+.road-name-icon {
+  color: white;
+  width: 60px !important;
+  height: 16px !important;
+  font-family: "Alibaba-PuHuiTi-Regular.otf";
+  font-size: 10px;
+  line-height: 14px;
+  text-align: center;
+  /* filter: drop-shadow(0 0 0.3px #007d76) drop-shadow(0 0 0.3px #007d76)
+    drop-shadow(0 0 0.3px #007d76) drop-shadow(0 0 0.3px #007d76)
+    drop-shadow(0 0 0.3px #007d76) drop-shadow(0 0 0.3px #007d76)
+    drop-shadow(0 0 0.3px #007d76) drop-shadow(0 0 0.3px #007d76)
+    drop-shadow(0 0 0.3px #007d76) drop-shadow(0 0 0.3px #007d76)
+    drop-shadow(0 0 0.3px #007d76); */
+  filter: drop-shadow(0 0 0.3px #9d6e00) drop-shadow(0 0 0.3px #9d6e00)
+    drop-shadow(0 0 0.3px #9d6e00) drop-shadow(0 0 0.3px #9d6e00)
+    drop-shadow(0 0 0.3px #9d6e00) drop-shadow(0 0 0.3px #9d6e00)
+    drop-shadow(0 0 0.3px #9d6e00) drop-shadow(0 0 0.3px #9d6e00)
+    drop-shadow(0 0 0.3px #9d6e00) drop-shadow(0 0 0.3px #9d6e00)
+    drop-shadow(0 0 0.3px #9d6e00);
+}
+.river-name-icon {
+  color: white;
+  width: 60px !important;
+  height: 16px !important;
+  font-family: "Alibaba-PuHuiTi-Regular.otf";
+  font-size: 10px;
+  line-height: 14px;
+  text-align: center;
+  /* filter: drop-shadow(0 0 0.3px #007d76) drop-shadow(0 0 0.3px #007d76)
+    drop-shadow(0 0 0.3px #007d76) drop-shadow(0 0 0.3px #007d76)
+    drop-shadow(0 0 0.3px #007d76) drop-shadow(0 0 0.3px #007d76)
+    drop-shadow(0 0 0.3px #007d76) drop-shadow(0 0 0.3px #007d76)
+    drop-shadow(0 0 0.3px #007d76) drop-shadow(0 0 0.3px #007d76)
+    drop-shadow(0 0 0.3px #007d76); */
+  filter: drop-shadow(0 0 0.3px #33816d) drop-shadow(0 0 0.3px #33816d)
+    drop-shadow(0 0 0.3px #33816d) drop-shadow(0 0 0.3px #33816d)
+    drop-shadow(0 0 0.3px #33816d) drop-shadow(0 0 0.3px #33816d)
+    drop-shadow(0 0 0.3px #33816d) drop-shadow(0 0 0.3px #33816d)
+    drop-shadow(0 0 0.3px #33816d) drop-shadow(0 0 0.3px #33816d)
+    drop-shadow(0 0 0.3px #33816d);
+}
+.leaflet-container {
+  background: transparent !important;
+}
+.mars3d-template-content label {
+  margin: 0 10px;
+  min-width: 75px;
+  float: left;
+}

src/components/ColorCell/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="grid-item-main">
+    <div class="corlor-grid">
+      <div class="left-color" :style="{ background: item.leftColor }"></div>
+      <div class="rigth-color">
+        <div :style="{ background: item.rightTopColor }"></div>
+        <div
+          class="rigth-bottom"
+          v-show="item.color == 'HF' || item.color == 'NF'"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    item: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.grid-item-main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .corlor-grid {
+    position: relative;
+    height: 20px;
+    width: 48px;
+    border: 1px solid white;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    overflow: hidden;
+    .left-color {
+      flex: 1;
+      height: 100%;
+    }
+    .rigth-color {
+      flex: 1;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      border-left: 1px solid white;
+      & > div {
+        flex: 1;
+        width: 100%;
+      }
+      .rigth-bottom {
+        background: red;
+        border-top: 1px solid white;
+        // border-left: 1px solid white;
+      }
+    }
+    .house_number {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      color: white;
+      font-size: 0.23rem;
+    }
+    .grid-islable {
+      position: absolute;
+      top: -50%;
+      left: 0;
+      width: 120%;
+      text-align: left;
+      img {
+        display: inline-block;
+        width: 0.22rem;
+        height: 0.22rem;
+      }
+    }
+    .grid-point {
+      position: absolute;
+      right: -25%;
+      height: 0.09rem;
+      width: 0.09rem;
+      border-radius: 50%;
+      border: 0.03rem solid white;
+    }
+  }
+}
+</style>

src/components/LeafletMap/index.vue

@@ -1,14 +1,42 @@
 <template>
+  <div class="leaflet-map-container">
     <div id="leaflet-map"></div>
+    <slot name="select"></slot>
+  </div>
 </template>
 
 <script>
 import L from "leaflet";
+
+import "@/utils/leaflet.polygon.gradient.js";
+import "@/utils/leaflet-rotate/leaflet-rotate-src.js";
+import "@/utils/leaflet.rotatedMarker.js";
+
+// 社区
+import loujiangjiedaoshequ from "@/assets/data/shequ.json"; //娄江社区
+// 社区名称
+import shequName from "@/assets/data/shequ-name.json";
+// 街道
+import loujiangjiedao from "@/assets/data/loujiangjiedao.json"; //娄东街道
+import loujiangjiedaoMove from "@/assets/data/loujiangjiedao-move.json"; //娄东街道
+
+import xiaoqu from "@/assets/data/小区.json";
+
 export default {
   data() {
     return {
       townCenter: [31.4865100338683, 121.11104941651722],
       mapRotate: 0, //地图旋转角度
+      mapLayers: {
+        mapLayer1: null,
+        mapLayer2: null,
+        mapLayer3: null,
+        mapLayer4: null,
+        mapLayer5: null,
+      },
+      globalMap: null,
+      markerXiaoqu: null,
+      markerShequ: null,
     };
   },
   mounted() {
@@ -26,12 +54,180 @@ export default {
         rotate: true,
         bearing: this.mapRotate,
       });
+      var rotatePane = this.globalMap.getPane("rotatePane"); //需要旋转的图层容器
+      var noRotatePane = this.globalMap.getPane("norotatePane"); //不需要旋转的图层容器
+
+      // 街道面
+      this.globalMap.createPane("mapLayer1", rotatePane);
+      this.globalMap.getPane("mapLayer1").style.zIndex = 501;
+      this.globalMap.getPane("mapLayer1").style.pointerEvents = "none";
+
+      // 社区面
+      this.globalMap.createPane("mapLayer2", rotatePane);
+      this.globalMap.getPane("mapLayer2").style.zIndex = 504;
+      this.globalMap.getPane("mapLayer2").style.pointerEvents = "none";
+
+      // 小区面
+      this.globalMap.createPane("mapLayer3", rotatePane);
+      this.globalMap.getPane("mapLayer3").style.zIndex = 505;
+      this.globalMap.getPane("mapLayer3").style.pointerEvents = "none";
+
+      // 小区名字
+      this.globalMap.createPane("mapLayer4", noRotatePane);
+      this.globalMap.getPane("mapLayer4").style.zIndex = 703;
+      this.globalMap.getPane("mapLayer4").style.pointerEvents = "none";
+
+      // 社区名字
+      this.globalMap.createPane("mapLayer5", noRotatePane);
+      this.globalMap.getPane("mapLayer5").style.zIndex = 702;
+      this.globalMap.getPane("mapLayer5").style.pointerEvents = "none";
+
+      this.mapLayers.mapLayer1 = L.featureGroup().addTo(this.globalMap);
+      this.mapLayers.mapLayer2 = L.featureGroup().addTo(this.globalMap);
+      this.mapLayers.mapLayer3 = L.featureGroup();
+      this.mapLayers.mapLayer4 = L.featureGroup().addTo(this.globalMap);
+      this.mapLayers.mapLayer5 = L.featureGroup().addTo(this.globalMap);
+
+      // 渲染街道
+      this.addStreet();
+      //社区
+      this.addShequ();
+      //小区
+      this.addXiaoqu();
+
+      this.globalMap.on("zoomend", (e) => {
+        let zoom = e.target._zoom;
+        if (zoom >= 15) {
+          // this.mapLayers.mapLayer3.setStyle({ opacity: 1, fillOpacity: 0.2 });
+          // this.markerXiaoqu.setOpacity(1);
+        }
+      });
+    },
+
+    addStreet() {
+      //阴影
+      L.geoJSON(loujiangjiedaoMove, {
+        pane: "mapLayer1",
+        style: function (feature) {
+          return {
+            color: "#31A8C0",
+            weight: 1,
+            fillColor: "#001530",
+            fillOpacity: 1,
+          };
+        },
+      }).addTo(this.mapLayers.mapLayer1);
+      L.geoJSON(loujiangjiedao, {
+        pane: "mapLayer1",
+        style: function (feature) {
+          return {
+            color: "#31A8C0",
+            weight: 1,
+            fillColor:
+              "linearGradient(60deg, #057BEB 40%, #18A7FC 80%, #057BEB 100%)",
+            fillOpacity: 1,
+          };
+        },
+      }).addTo(this.mapLayers.mapLayer1);
+    },
+
+    addShequ() {
+      let geojsons = L.geoJSON(loujiangjiedaoshequ, {
+        pane: "mapLayer2",
+        style: function (feature) {
+          return {
+            color: "#6ED2FB",
+            weight: 2,
+            fillColor: "#19A8FA",
+            fillOpacity: 0,
+          };
+        },
+      }).addTo(this.mapLayers.mapLayer2);
+      let bounds = geojsons.getBounds();
+      this.globalMap.fitBounds(bounds);
+      // 社区名称
+      L.geoJSON(shequName, {
+        pointToLayer: (feature) => {
+          var myIcon = L.divIcon({
+            className: "region-name4",
+            html: feature.properties.TextString,
+            iconSize: [80, 20],
+            iconAnchor: [40, 10],
+          });
+          return L.marker(
+            L.latLng(
+              feature.geometry.coordinates[1],
+              feature.geometry.coordinates[0]
+            ),
+            {
+              pane: "mapLayer5",
+              icon: myIcon,
+              rotationAngle: 0,
+              rotationOrigin: "left center",
+            }
+          );
+        },
+        style: {
+          opacity: 0,
+        },
+      }).addTo(this.mapLayers.mapLayer5);
+    },
+    addXiaoqu() {
+      L.geoJSON(xiaoqu, {
+        pane: "mapLayer3",
+
+        style: function (feature) {
+          let id = feature.properties.Id;
+          /* 没有人口数据面给灰色 */
+          if (id == 254 || id == 257 || id == 260) {
+            return {
+              color: "#545454",
+              weight: 5,
+              fillColor: "#545454",
+              fillOpacity: 0.5,
+            };
+          } else {
+            return {
+              color: "#ffeb3b",
+              weight: 5,
+              fillColor: "#ffeb3b",
+              fillOpacity: 0.2,
+            };
+          }
+        },
+        onEachFeature: (feature, layer) => {
+          let bounds = layer._bounds;
+          let center = bounds.getCenter();
+          let text = feature.properties.name;
+          let html = text;
+          let myIcon = L.divIcon({
+            className: "land-name",
+            html: html,
+            iconSize: [150, 24],
+            iconAnchor: [75, 12],
+          });
+          //   多边形上的标记点;
+          let marker = L.marker(center, {
+            pane: "mapLayer3",
+            properties: feature.properties,
+            icon: myIcon,
+          });
+
+          marker.addTo(this.mapLayers.mapLayer3);
+        },
+      }).addTo(this.mapLayers.mapLayer3);
     },
   },
 };
 </script>
 
 <style>
+.leaflet-map-container {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 5;
+}
 #leaflet-map {
   height: 100%;
   width: 100%;

src/components/NavigationBar/index.js

@@ -2,3 +2,4 @@ export { default as peopleCentre } from "./peopleCentre.vue";
 export { default as warningCentre } from "./warningCentre.vue";
 export { default as recycleCentre } from "./recycleCentre.vue";
 export { default as logCentre } from "./logCentre.vue";
+export { default as userModel } from "./userModel.vue";

src/components/NavigationBar/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="navigation-bar">
-    <div class="navigation-left">
+    <div class="navigation-left" v-show="showLeft">
       <el-badge
-        :value="item.badge ? item.badge : ''"
+        :value="item.title == '预警中心' ? yjTotal : ''"
         class="item"
         v-for="(item, index) in leftBtnList"
         :key="index"
@@ -16,18 +16,20 @@
       <div class="main-title" :text="mainTitle">{{ mainTitle }}</div>
       <div class="sub-title" :text="subTitle">{{ subTitle }}</div>
     </div>
-    <div class="navigation-right">
+    <div class="navigation-right" v-show="showRight">
       <div class="reset"></div>
       <el-button type="text">后台管理</el-button>
       <el-button type="text">美丽街区</el-button>
-      <div class="user-data">
-        <div class="user-icon"></div>
-        <div class="user-name">欢迎,{{ name }}</div>
-      </div>
+      <userModel :name="name" />
     </div>
 
     <!-- 四个中心 -->
-    <el-dialog :visible.sync="open" top="25vh" :modal="false" width="1158px">
+    <el-dialog
+      :visible.sync="open"
+      :modal="false"
+      width="990px"
+      custom-class="taicang-dialog"
+    >
       <div class="dialog-main">
         <div class="dialog-title"><span></span> {{ title }}</div>
         <peopleCentre v-if="title == '搜索中心'" />
@@ -41,15 +43,32 @@
 
 <script>
 import { mapGetters } from "vuex";
-import { peopleCentre, warningCentre, recycleCentre, logCentre } from "./index";
+import {
+  peopleCentre,
+  warningCentre,
+  recycleCentre,
+  logCentre,
+  userModel,
+} from "./index";
 export default {
   components: {
     peopleCentre,
     warningCentre,
     recycleCentre,
     logCentre,
+    userModel,
   },
   props: {
+    //显示左边四个中心
+    showLeft: {
+      type: Boolean,
+      default: true,
+    },
+    //显示右边
+    showRight: {
+      type: Boolean,
+      default: true,
+    },
     mainTitle: {
       type: String,
       default: "娄东街道人口数据管理系统",
@@ -65,12 +84,13 @@ export default {
       open: false,
       leftBtnList: [
         { title: "搜索中心", isShow: true },
-        { title: "预警中心", isShow: true, badge: 100 },
+        { title: "预警中心", isShow: true },
         { title: "回收中心", isShow: true },
         { title: "日志中心", isShow: true },
       ],
     };
   },
+  mounted() {},
   methods: {
     /**
      * 是个中心
@@ -81,7 +101,7 @@ export default {
     },
   },
   computed: {
-    ...mapGetters(["name"]),
+    ...mapGetters(["name", "yjTotal"]),
   },
 };
 </script>
@@ -91,10 +111,10 @@ export default {
   position: fixed;
   top: 0;
   z-index: 100;
-  height: 125px;
+  height: 110px;
   width: 100%;
   background: url("~@/assets/images/ui/navigation.png");
-  background-size: 100% 100%;
+  background-size: cover;
   display: flex;
   justify-content: center;
   & > div {
@@ -145,26 +165,6 @@ export default {
       width: 58px;
       background: url("~@/assets/images/ui/reset.png");
     }
-    .user-data {
-      display: flex;
-      align-items: center;
-      padding-top: 8px;
-      cursor: pointer;
-      .user-icon {
-        height: 19px;
-        width: 19px;
-        border-radius: 50%;
-        background: url("~@/assets/images/ui/user.png");
-        background-size: 100% 100%;
-        margin-right: 10px;
-      }
-      .user-name {
-        font-size: 16px;
-        color: #ffffff;
-        font-weight: 400;
-        font-family: "Alibaba-PuHuiTi-Regular.otf";
-      }
-    }
   }
   .el-button {
     font-size: 14px;
@@ -212,9 +212,9 @@ export default {
 ::v-deep .el-dialog__body {
   background: #009bf4;
   border-radius: 12px;
-  padding: 2px;
+  padding: 1px;
 }
 ::v-deep .el-dialog:not(.is-fullscreen) {
-  margin-top: 23vh !important;
+  margin-top: 10vh !important;
 }
 </style>

src/components/NavigationBar/logCentre.vue

@@ -1,9 +1,506 @@
 <template>
-  <div>日志</div>
+  <div class="search-container">
+    <div class="option-rows">
+      <el-select
+        @change="changeSelect($event, 'xiaoquList')"
+        v-model="queryParams.shequId"
+        placeholder="选择社区"
+        clearable
+      >
+        <el-option
+          v-for="item in deptList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="queryParams.xiaoquId"
+        placeholder="选择小区"
+        @change="changeSelect($event, 'netList')"
+        clearable
+      >
+        <el-option
+          v-for="item in xiaoquList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="option-rows">
+      <el-select
+        v-model="queryParams.parentid"
+        placeholder="选择网格"
+        @change="changeSelect($event, 'yuanList')"
+        clearable
+      >
+        <el-option
+          v-for="item in netList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="queryParams.yuanid"
+        placeholder="选择苑"
+        @change="changeSelect($event, 'buildingList')"
+        clearable
+      >
+        <el-option
+          v-for="item in yuanList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="queryParams.buildingId"
+        placeholder="选择楼栋"
+        @change="changeSelect($event, 'houseList')"
+        clearable
+      >
+        <el-option
+          v-for="item in buildingList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="queryParams.houseid" placeholder="选择住户" clearable>
+        <el-option
+          v-for="item in houseList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="option-rows">
+      <el-date-picker
+        @change="changeyearTimer"
+        v-model="timer"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd-HH-mm-ss"
+      >
+      </el-date-picker>
+      <!-- <el-select
+        v-model="colorList"
+        placeholder="选择分色"
+        multiple
+        collapse-tags
+        clearable
+      >
+        <el-option
+          v-for="dict in dict.type.b_color_type"
+          :key="dict.value"
+          :label="dict.label"
+          :value="dict.value"
+        >
+        </el-option>
+      </el-select> -->
+
+      <el-radio v-model="queryParams.type" label="1">新增</el-radio>
+      <el-radio v-model="queryParams.type" label="2">修改</el-radio>
+      <el-radio v-model="queryParams.type" label="3">删除</el-radio>
+
+      <el-button type="text" @click="handleSearch()">搜索</el-button>
+      <el-button type="text" @click="handleReset()">重置</el-button>
+      <el-button type="text" @click="handleExport()">导出</el-button>
+
+      <!-- <el-checkbox-group v-model="isCheck">
+        <el-checkbox label="中共党员"> </el-checkbox>
+        <el-checkbox label="帮扶对象"> </el-checkbox>
+        <el-checkbox label="重点人群"> </el-checkbox>
+        <el-checkbox label="退役军人"> </el-checkbox>
+      </el-checkbox-group> -->
+    </div>
+    <!-- <div class="three-option">
+      <div class="option-list">
+        <div
+          class="option-list-item"
+          v-for="(item, index) in tabList"
+          :key="index"
+          @click="handleClick(index)"
+          :class="currentIndex == index ? 'activeItme' : ''"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="option-input">
+        <el-select
+          v-model="credentialnoType"
+          v-show="currentIndex == 0"
+          class="input-general-width"
+        >
+          <el-option
+            v-for="item in optionList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+
+        <el-input
+          prefix-icon="el-icon-search"
+          placeholder="请输入内容"
+          v-model="keyWord"
+          class="input-big-width"
+        >
+        </el-input>
+        <el-button type="text" @click="handleSearch()">搜索</el-button>
+        <el-button type="text" @click="handleReset()">重置</el-button>
+        <el-button type="text">导出</el-button>
+      </div>
+    </div> -->
+
+    <div class="result-list">
+      <div class="list-header">
+        <div class="header-left-total">搜索结果列表</div>
+        <div class="header-rigth-total">共{{ total }}条数据</div>
+      </div>
+      <div class="list-table" v-loading="loading">
+        <div class="table-header">
+          <div class="table-cell0">序号</div>
+          <div class="table-cell1">名称</div>
+          <div class="table-cell1">证件号</div>
+          <div class="table-cell1">证件号</div>
+          <div class="table-cell1">分色</div>
+          <div class="table-cell1">类型</div>
+        </div>
+        <div class="table-body" style="overflow: auto" v-infinite-scroll="load">
+          <div
+            class="body-rows"
+            v-for="(item, index) in list"
+            :key="'rows' + index"
+          >
+            <div class="table-cell0">{{ index + 1 }}</div>
+            <div class="table-cell1">{{ item.name }}</div>
+            <div class="table-cell1">
+              {{ item.credentialNo }}
+            </div>
+
+            <div class="table-cell1">
+              {{ item.phone }}
+            </div>
+            <div class="table-cell1 cell-flex">
+              <ColorCell :item="item" />
+              <span style="margin-left: 3px">{{ item.color }}</span>
+            </div>
+            <div class="table-cell1">{{ item.type | filterType }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {};
+import { getLog, exportLog } from "@/api/home/index.js"; //回收
+import { handleTreeId } from "@/utils/findTreeId.js";
+import { treeselect } from "@/api/system/dept"; //部门
+import { mapGetters } from "vuex";
+import ColorCell from "@/components/ColorCell";
+
+export default {
+  // dicts: ["b_color_type"],
+  components: { ColorCell },
+  computed: {
+    ...mapGetters(["leftColor", "rightTopColor", "queryParamsIndex"]),
+  },
+  filters: {
+    filterType(target) {
+      if (target == 1) {
+        return "新增";
+      } else if (target == 2) {
+        return "修改";
+      } else if (target == 3) {
+        return "删除";
+      }
+    },
+  },
+  data() {
+    return {
+      loading: true,
+
+      currentIndex: 0,
+      credentialnoType: 0,
+      tabList: [
+        { name: "身份证", value: 0 },
+        { name: "手机号", value: 1 },
+        { name: "姓名", value: 2 },
+      ],
+      optionList: [
+        { name: "完整身份证号", value: 0 },
+        { name: "省级(前2位)", value: 1 },
+        { name: "市级(前4位)", value: 2 },
+        { name: "县级(前6位)", value: 3 },
+      ],
+      isCheck: [],
+      isList: [
+        { name: "中共党员", key: "isd" },
+        { name: "帮扶对象", key: "isk" },
+        { name: "退役军人", key: "isj" },
+        { name: "重点人群", key: "isx" },
+      ],
+
+      timer: "",
+      keyWord: "",
+      colorList: [],
+      queryParams: {
+        shequId: undefined,
+        xiaoquId: undefined,
+        parentid: undefined,
+        yuanid: undefined,
+        buildingId: undefined,
+        houseid: undefined,
+        // isd: undefined, //党员
+        // isk: undefined, //帮扶
+        // isj: undefined, //退伍
+        // isx: undefined, //重点
+        // credentialno: undefined, //身份证(全)
+        // cre1: undefined, //身份证(2)
+        // cre2: undefined, //身份证(4)
+        // cre3: undefined, //身份证(6)
+        // phone: undefined,
+        // name: undefined,
+        color: undefined,
+        type: undefined,
+        mark: "",
+        params: {
+          beginOperateTime: "", //statr
+          endOperateTime: "", //end
+        },
+        pageNum: 1,
+        pageSize: 20,
+      },
+      deptList: [],
+      xiaoquList: [],
+      netList: [],
+      yuanList: [],
+      buildingList: [],
+      houseList: [],
+      list: [],
+      houseTotal: 0,
+      total: 0,
+      objList: [
+        { key: "deptList", value: "shequId" },
+        { key: "xiaoquList", value: "xiaoquId" },
+        { key: "netList", value: "parentid" },
+        { key: "yuanList", value: "yuanid" },
+        { key: "buildingList", value: "buildingId" },
+        { key: "houseList", value: "houseid" },
+      ],
+    };
+  },
+  mounted() {
+    this.queryParams.shequId = this.queryParamsIndex.shequId;
+
+    this.getDeptList();
+  },
+  methods: {
+    //时间选择器
+    changeyearTimer(e) {
+      if (e) {
+        this.queryParams.params = {
+          beginOperateTime: e[0], //statr
+          endOperateTime: e[1], //end
+        };
+      }
+    },
+    /**获取树部门 */
+    async getDeptList() {
+      let result = await treeselect();
+      this.deptList = result.data[0].children;
+    },
+    /**
+     * 级联筛选
+     */
+    changeSelect(e, key) {
+      let list = [];
+      let index = this.objList.findIndex((item) => item.key == key);
+      if (index > -1) {
+        list = this.objList.slice(index);
+      }
+      list.map((item) => {
+        this.queryParams[item.value] = undefined;
+      });
+      this[key] = handleTreeId(e, this.deptList);
+    },
+
+    /**
+     * 搜索
+     */
+    handleSearch() {
+      this.reset();
+      //分色
+      this.queryParams.color = this.colorList.toString();
+      // console.log(this.queryParams.color);
+      //处理四个is
+      // this.isCheck.forEach((item) => {
+      //   let index = this.isList.findIndex((it) => it.name == item);
+      //   if (index > -1) {
+      //     this.queryParams[this.isList[index].key] = 1;
+      //   }
+      // });
+      //三个tab搜索
+      // if (this.currentIndex == 0) {
+      //   if (this.credentialnoType == 0) {
+      //     this.queryParams.credentialno = this.keyWord;
+      //   } else {
+      //     this.queryParams["cre" + this.credentialnoType] = this.keyWord;
+      //   }
+      // }
+      // if (this.currentIndex == 1) this.queryParams.phone = this.keyWord;
+      // if (this.currentIndex == 2) this.queryParams.name = this.keyWord;
+
+      this.load();
+    },
+    /**
+     * 导出
+     */
+    handleExport() {
+      if (this.list.length == 0) {
+        this.$message({
+          message: "没有数据可导出！",
+          type: "warning",
+        });
+        return;
+      }
+      const loading = this.$loading({
+        lock: true,
+        text: "正在生成excel，请稍候",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      this.$modal
+        .confirm("是否确认导出所有数据项？")
+        .then(() => {
+          return exportLog(this.queryParams);
+        })
+        .then((response) => {
+          this.$download.name(response.msg);
+          loading.close();
+        })
+        .catch(() => {
+          loading.close();
+        });
+    },
+
+    /**
+     * 重置操作
+     */
+    handleReset() {
+      this.keyWord = "";
+      this.credentialnoType = 0;
+      this.timer = "";
+      this.queryParams.mark = "";
+      this.queryParams.type = undefined;
+      this.queryParams.shequId = undefined;
+      this.queryParams.xiaoquId = undefined;
+      this.queryParams.parentid = undefined;
+      this.queryParams.yuanid = undefined;
+      this.queryParams.buildingId = undefined;
+      this.queryParams.houseid = undefined;
+      this.queryParams.params = undefined;
+      this.colorList = [];
+      // this.isCheck = [];
+      this.reset();
+      this.load();
+    },
+    /**
+     * 三个输入方式
+     */
+    handleClick(index) {
+      if (this.currentIndex == index) return;
+      this.keyWord = "";
+      this.currentIndex = index;
+    },
+    /**
+     * 加载更多
+     */
+    load() {
+      if (this.list.length > 0 && this.list.length >= this.total) return;
+      this.getList();
+    },
+    /**
+     * 获取list
+     */
+    async getList() {
+      this.loading = true;
+      let result = await getLog(this.queryParams);
+      let handleColor = this.handleColor(result.rows);
+      this.list = [...this.list, ...handleColor];
+      this.total = result.total;
+      this.queryParams.pageNum++;
+      this.loading = false;
+    },
+
+    /**
+     * 处理颜色
+     */
+    handleColor(list) {
+      let arr = list.map((item) => {
+        item.personInfo = JSON.parse(item.personInfo);
+        item.personInfo.type = item.type;
+        // item.personInfo.personId = item.id;
+        if (!item.personInfo.color) {
+          item.personInfo.leftColor = "#7b75ff";
+          item.personInfo.rightTopColor = "#7b75ff";
+        } else {
+          for (let key in this.leftColor) {
+            if (item.personInfo.color == key) {
+              item.personInfo.leftColor = this.leftColor[key];
+              item.personInfo.rightTopColor = this.rightTopColor[key];
+            }
+          }
+        }
+
+        item = item.personInfo;
+        return item;
+      });
+      // console.log(arr);
+      return arr;
+    },
+
+    /**
+     * 重置
+     */
+    reset() {
+      // this.queryParams.isd = undefined; //党员
+      // this.queryParams.isk = undefined; //帮扶
+      // this.queryParams.isj = undefined; //退伍
+      // this.queryParams.isx = undefined; //重点
+      // this.queryParams.credentialno = undefined; //身份证(全)
+      // this.queryParams.cre1 = undefined; //身份证(2)
+      // this.queryParams.cre2 = undefined; //身份证(4)
+      // this.queryParams.cre3 = undefined; //身份证(6)
+      // this.queryParams.phone = undefined;
+      // this.queryParams.name = undefined;
+      this.queryParams.color = undefined; //分色
+
+      this.queryParams.pageNum = 1;
+      this.queryParams.pageSize = 20;
+
+      this.list = [];
+      this.houseTotal = 0;
+      this.total = 0;
+    },
+  },
+};
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+@import "~@/assets/styles/isTable.scss";
+</style>

src/components/NavigationBar/peopleCentre.vue

@@ -1,45 +1,482 @@
 <template>
   <div class="search-container">
+    <div class="option-rows" v-show="show_shequ_xiaoqu">
+      <el-select
+        @change="changeSelect($event, 'xiaoquList')"
+        v-model="queryParams.shequId"
+        placeholder="选择社区"
+        clearable
+      >
+        <el-option
+          v-for="item in deptList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="queryParams.xiaoquId"
+        placeholder="选择小区"
+        @change="changeSelect($event, 'netList')"
+        clearable
+      >
+        <el-option
+          v-for="item in xiaoquList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </div>
     <div class="option-rows">
-      <el-select v-model="value" placeholder="选择社区">
+      <el-select
+        v-show="show_net || show_shequ_xiaoqu"
+        v-model="queryParams.parentid"
+        placeholder="选择网格"
+        @change="changeSelect($event, 'yuanList')"
+        clearable
+      >
         <el-option
-          v-for="item in community"
-          :key="item.value"
+          v-for="item in netList"
+          :key="item.id"
           :label="item.label"
-          :value="item.value"
+          :value="item.id"
         >
         </el-option>
       </el-select>
-      <el-select v-model="value" placeholder="选择小区">
+      <el-select
+        v-model="queryParams.yuanid"
+        placeholder="选择苑"
+        @change="changeSelect($event, 'buildingList')"
+        clearable
+      >
         <el-option
-          v-for="item in xiaoqu"
-          :key="item.value"
+          v-for="item in yuanList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="queryParams.buildingId"
+        placeholder="选择楼栋"
+        @change="changeSelect($event, 'houseList')"
+        clearable
+      >
+        <el-option
+          v-for="item in buildingList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="queryParams.houseid" placeholder="选择住户" clearable>
+        <el-option
+          v-for="item in houseList"
+          :key="item.id"
           :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="option-rows">
+      <el-select
+        v-model="colorList"
+        placeholder="选择分色"
+        multiple
+        collapse-tags
+        clearable
+      >
+        <el-option
+          v-for="dict in dict.type.b_color_type"
+          :key="dict.value"
+          :label="dict.label"
+          :value="dict.value"
+        >
+        </el-option>
+      </el-select>
+
+      <el-radio v-model="queryParams.type" :label="1">户籍</el-radio>
+      <el-radio v-model="queryParams.type" :label="2">流动</el-radio>
+
+      <el-checkbox-group v-model="isCheck">
+        <el-checkbox label="中共党员"> </el-checkbox>
+        <el-checkbox label="帮扶对象"> </el-checkbox>
+        <el-checkbox label="重点人群"> </el-checkbox>
+        <el-checkbox label="退役军人"> </el-checkbox>
+      </el-checkbox-group>
+    </div>
+    <div class="three-option">
+      <div class="option-list">
+        <div
+          class="option-list-item"
+          v-for="(item, index) in tabList"
+          :key="index"
+          @click="handleClick(index)"
+          :class="currentIndex == index ? 'activeItme' : ''"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="option-input">
+        <el-select
+          v-model="credentialnoType"
+          v-show="currentIndex == 0"
+          class="input-general-width"
+        >
+          <el-option
+            v-for="item in optionList"
+            :key="item.value"
+            :label="item.name"
             :value="item.value"
           >
           </el-option>
         </el-select>
+
+        <el-input
+          prefix-icon="el-icon-search"
+          placeholder="请输入内容"
+          v-model="keyWord"
+          class="input-big-width"
+        >
+        </el-input>
+        <el-button type="text" @click="handleSearch()">搜索</el-button>
+        <el-button type="text" @click="handleReset()">重置</el-button>
+        <el-button type="text" @click="handleExport()">导出</el-button>
+      </div>
+    </div>
+
+    <div class="result-list">
+      <div class="list-header">
+        <div class="header-left-total">
+          搜索结果列表 {{ houseTotal }}户 {{ total }}人
+        </div>
+        <div class="header-rigth-total">共{{ total }}条数据</div>
+      </div>
+      <div class="list-table" v-loading="loading">
+        <div class="table-header">
+          <div class="table-cell0">序号</div>
+          <div class="table-cell1">姓名</div>
+          <div class="table-cell1">证件号</div>
+          <div class="table-cell1">手机号</div>
+          <div class="table-cell2">家庭地址</div>
+          <div class="table-cell1">分色</div>
+        </div>
+        <div class="table-body" style="overflow: auto" v-infinite-scroll="load">
+          <div
+            class="body-rows"
+            v-for="(item, index) in list"
+            :key="'rows' + index"
+          >
+            <div class="table-cell0">{{ index + 1 }}</div>
+            <div class="table-cell1">{{ item.name }}</div>
+            <div class="table-cell1">{{ item.credentialNo }}</div>
+            <div class="table-cell1">{{ item.phone }}</div>
+            <div class="table-cell2">
+              {{
+                item.shequ_name +
+                item.xiaoqu_name +
+                item.deptname +
+                item.buildingname +
+                item.housename
+              }}
+            </div>
+            <div class="table-cell1 cell-flex">
+              <ColorCell :item="item" />
+              <span style="margin-left: 3px">{{ item.color }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { inputSearch } from "@/api/home/index.js";
+import { handleTreeId } from "@/utils/findTreeId.js";
+import { treeselect } from "@/api/system/dept"; //部门
+import { mapGetters } from "vuex";
+import ColorCell from "@/components/ColorCell";
+import { exportSearch } from "@/api/home/index.js"; //预警
+import { listHouse } from "@/api/taicangpop/house"; //户
 export default {
+  dicts: ["b_color_type"],
+  components: { ColorCell },
+  computed: {
+    ...mapGetters(["leftColor", "rightTopColor", "queryParamsIndex"]),
+  },
   data() {
     return {
-      value: "",
-      queryParams: {},
-      community: [],
-      xiaoqu: [],
+      show_shequ_xiaoqu: false,
+      show_net: false,
+      loading: true,
+      currentIndex: 0,
+      credentialnoType: 0,
+      tabList: [
+        { name: "身份证", value: 0 },
+        { name: "手机号", value: 1 },
+        { name: "姓名", value: 2 },
+      ],
+      optionList: [
+        { name: "完整身份证号", value: 0 },
+        { name: "省级(前2位)", value: 1 },
+        { name: "市级(前4位)", value: 2 },
+        { name: "县级(前6位)", value: 3 },
+      ],
+      isCheck: [],
+      isList: [
+        { name: "中共党员", key: "isd" },
+        { name: "帮扶对象", key: "isk" },
+        { name: "退役军人", key: "isj" },
+        { name: "重点人群", key: "isx" },
+      ],
+
+      keyWord: "",
+      colorList: [],
+      queryParams: {
+        shequId: undefined,
+        xiaoquId: undefined,
+        parentid: undefined,
+        yuanid: undefined,
+        buildingId: undefined,
+        houseid: undefined,
+        isd: undefined, //党员
+        isk: undefined, //帮扶
+        isj: undefined, //退伍
+        isx: undefined, //重点
+        credentialno: undefined, //身份证(全)
+        cre1: undefined, //身份证(2)
+        cre2: undefined, //身份证(4)
+        cre3: undefined, //身份证(6)
+        phone: undefined,
+        name: undefined,
+        color: undefined,
+        type: undefined,
+        pageNum: 1,
+        pageSize: 20,
+      },
+      deptList: [],
+      xiaoquList: [],
+      netList: [],
+      yuanList: [],
+      buildingList: [],
+      houseList: [],
+      list: [],
+      houseTotal: 0,
+      total: 0,
+      objList: [
+        { key: "deptList", value: "shequId" },
+        { key: "xiaoquList", value: "xiaoquId" },
+        { key: "netList", value: "parentid" },
+        { key: "yuanList", value: "yuanid" },
+        { key: "buildingList", value: "buildingId" },
+        { key: "houseList", value: "houseid" },
+      ],
     };
   },
+  mounted() {
+    this.show_shequ_xiaoqu = this.$auth.hasRoleOr(["admin", "leader"]); //超级管理员 - 领导
+    this.show_net = this.$auth.authRoleNet("network"); //网格员
+
+    console.log(this.show_shequ_xiaoqu, this.show_net);
+
+    this.queryParams.shequId = this.queryParamsIndex.shequId;
+    this.getDeptList();
+  },
+  methods: {
+    /**获取树部门 */
+    async getDeptList() {
+      let result = await treeselect();
+      this.deptList = result.data[0].children;
+      // console.log(result);
+    },
+    /**
+     * 级联筛选
+     */
+    changeSelect(e, key) {
+      let list = [];
+      let index = this.objList.findIndex((item) => item.key == key);
+      if (index > -1) {
+        list = this.objList.slice(index);
+      }
+      list.map((item) => {
+        this.queryParams[item.value] = undefined;
+      });
+
+      if (key == "houseList") {
+        // this.getHouse(e)
+      } else {
+        this[key] = handleTreeId(e, this.deptList);
+      }
+    },
+
+    /**
+     * 获取住户
+     */
+    async getHouse() {
+      let result = await listHouse();
+    },
+
+    /**
+     * 搜索
+     */
+    handleSearch() {
+      this.reset();
+      //分色
+      this.queryParams.color = this.colorList.toString();
+      // console.log(this.queryParams.color);
+      //处理四个is
+      this.isCheck.forEach((item) => {
+        let index = this.isList.findIndex((it) => it.name == item);
+        if (index > -1) {
+          this.queryParams[this.isList[index].key] = 1;
+        }
+      });
+      //三个tab搜索
+      if (this.currentIndex == 0) {
+        if (this.credentialnoType == 0) {
+          this.queryParams.credentialno = this.keyWord;
+        } else {
+          this.queryParams["cre" + this.credentialnoType] = this.keyWord;
+        }
+      }
+      if (this.currentIndex == 1) this.queryParams.phone = this.keyWord;
+      if (this.currentIndex == 2) this.queryParams.name = this.keyWord;
+
+      this.load();
+    },
+
+    /**
+     * 导出
+     */
+    handleExport() {
+      if (this.list.length == 0) {
+        this.$message({
+          message: "没有数据可导出！",
+          type: "warning",
+        });
+        return;
+      }
+      const loading = this.$loading({
+        lock: true,
+        text: "正在生成excel，请稍候",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      this.$modal
+        .confirm("是否确认导出所有数据项？")
+        .then(() => {
+          return exportSearch(this.queryParams);
+        })
+        .then((response) => {
+          this.$download.name(response.msg);
+          loading.close();
+        })
+        .catch(() => {
+          loading.close();
+        });
+    },
+    /**
+     * 重置操作
+     */
+    handleReset() {
+      this.keyWord = "";
+      this.credentialnoType = 0;
+      this.queryParams.type = undefined;
+      this.queryParams.shequId = undefined;
+      this.queryParams.xiaoquId = undefined;
+      this.queryParams.parentid = undefined;
+      this.queryParams.yuanid = undefined;
+      this.queryParams.buildingId = undefined;
+      this.queryParams.houseid = undefined;
+
+      this.colorList = [];
+      this.isCheck = [];
+      this.reset();
+      this.load();
+    },
+    /**
+     * 三个输入方式
+     */
+    handleClick(index) {
+      if (this.currentIndex == index) return;
+      this.keyWord = "";
+      this.currentIndex = index;
+    },
+    /**
+     * 加载更多
+     */
+    load() {
+      if (this.list.length > 0 && this.list.length >= this.total) return;
+      this.getList();
+    },
+    /**
+     * 获取list
+     */
+    async getList() {
+      this.loading = true;
+      let result = await inputSearch(this.queryParams);
+      let handleColor = this.handleColor(result.data.xinxilist.rows);
+      this.list = [...this.list, ...handleColor];
+      this.houseTotal = result.data.count;
+      this.total = result.data.xinxilist.total;
+      this.queryParams.pageNum++;
+      this.loading = false;
+    },
+
+    /**
+     * 处理颜色
+     */
+    handleColor(list) {
+      list.map((item) => {
+        if (!item.color) {
+          item.leftColor = "#7b75ff";
+          item.rightTopColor = "#7b75ff";
+          return;
+        }
+        for (let key in this.leftColor) {
+          if (item.color == key) {
+            item.leftColor = this.leftColor[key];
+            item.rightTopColor = this.rightTopColor[key];
+          }
+        }
+      });
+      return list;
+    },
+
+    /**
+     * 重置
+     */
+    reset() {
+      this.queryParams.isd = undefined; //党员
+      this.queryParams.isk = undefined; //帮扶
+      this.queryParams.isj = undefined; //退伍
+      this.queryParams.isx = undefined; //重点
+      this.queryParams.credentialno = undefined; //身份证(全)
+      this.queryParams.cre1 = undefined; //身份证(2)
+      this.queryParams.cre2 = undefined; //身份证(4)
+      this.queryParams.cre3 = undefined; //身份证(6)
+      this.queryParams.phone = undefined;
+      this.queryParams.name = undefined;
+      this.queryParams.color = undefined; //分色
+
+      this.queryParams.pageNum = 1;
+      this.queryParams.pageSize = 20;
+
+      this.list = [];
+      this.houseTotal = 0;
+      this.total = 0;
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-.search-container {
-  margin-top: 10px;
-  flex: 1;
-  border: 1px solid red;
-}
+@import "~@/assets/styles/isTable.scss";
 </style>

src/components/NavigationBar/recycleCentre.vue

@@ -1,9 +1,512 @@
 <template>
-  <div>回收</div>
+  <div class="search-container">
+    <div class="option-rows">
+      <el-select
+        @change="changeSelect($event, 'xiaoquList')"
+        v-model="queryParams.shequId"
+        placeholder="选择社区"
+        clearable
+      >
+        <el-option
+          v-for="item in deptList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="queryParams.xiaoquId"
+        placeholder="选择小区"
+        @change="changeSelect($event, 'netList')"
+        clearable
+      >
+        <el-option
+          v-for="item in xiaoquList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="option-rows">
+      <el-select
+        v-model="queryParams.parentid"
+        placeholder="选择网格"
+        @change="changeSelect($event, 'yuanList')"
+        clearable
+      >
+        <el-option
+          v-for="item in netList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="queryParams.yuanid"
+        placeholder="选择苑"
+        @change="changeSelect($event, 'buildingList')"
+        clearable
+      >
+        <el-option
+          v-for="item in yuanList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="queryParams.buildingId"
+        placeholder="选择楼栋"
+        @change="changeSelect($event, 'houseList')"
+        clearable
+      >
+        <el-option
+          v-for="item in buildingList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="queryParams.houseid" placeholder="选择住户" clearable>
+        <el-option
+          v-for="item in houseList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="option-rows">
+      <el-button type="text" @click="handleSearch()">搜索</el-button>
+      <el-button type="text" @click="handleReset()">重置</el-button>
+      <el-button type="text" @click="handleExport()">导出</el-button>
+    </div>
+    <!-- <div class="option-rows">
+      <el-select
+        v-model="colorList"
+        placeholder="选择分色"
+        multiple
+        collapse-tags
+        clearable
+      >
+        <el-option
+          v-for="dict in dict.type.b_color_type"
+          :key="dict.value"
+          :label="dict.label"
+          :value="dict.value"
+        >
+        </el-option>
+      </el-select>
+
+      <el-radio v-model="queryParams.mark" label="">全部</el-radio>
+      <el-radio v-model="queryParams.mark" label="ninety">3个月</el-radio>
+      <el-radio v-model="queryParams.mark" label="eighty">半年</el-radio>
+
+  
+
+      <el-checkbox-group v-model="isCheck">
+        <el-checkbox label="中共党员"> </el-checkbox>
+        <el-checkbox label="帮扶对象"> </el-checkbox>
+        <el-checkbox label="重点人群"> </el-checkbox>
+        <el-checkbox label="退役军人"> </el-checkbox>
+      </el-checkbox-group>
+    </div> -->
+    <!-- <div class="three-option">
+      <div class="option-list">
+        <div
+          class="option-list-item"
+          v-for="(item, index) in tabList"
+          :key="index"
+          @click="handleClick(index)"
+          :class="currentIndex == index ? 'activeItme' : ''"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="option-input">
+        <el-select
+          v-model="credentialnoType"
+          v-show="currentIndex == 0"
+          class="input-general-width"
+        >
+          <el-option
+            v-for="item in optionList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+
+        <el-input
+          prefix-icon="el-icon-search"
+          placeholder="请输入内容"
+          v-model="keyWord"
+          class="input-big-width"
+        >
+        </el-input>
+        <el-button type="text" @click="handleSearch()">搜索</el-button>
+        <el-button type="text" @click="handleReset()">重置</el-button>
+        <el-button type="text" @click="handleExport()">导出</el-button>
+      </div>
+    </div> -->
+
+    <div class="result-list">
+      <div class="list-header">
+        <div class="header-left-total">搜索结果列表</div>
+        <div class="header-rigth-total">共{{ total }}条数据</div>
+      </div>
+      <div class="list-table" v-loading="loading">
+        <div class="table-header">
+          <div class="table-cell0">序号</div>
+          <div class="table-cell1">姓名</div>
+          <div class="table-cell1">手机号</div>
+          <div class="table-cell1">证件号</div>
+
+          <div class="table-cell1">分色</div>
+          <div class="table-cell1">操作</div>
+        </div>
+        <div class="table-body" style="overflow: auto" v-infinite-scroll="load">
+          <div
+            class="body-rows"
+            v-for="(item, index) in list"
+            :key="'rows' + index"
+          >
+            <div class="table-cell0">{{ index + 1 }}</div>
+            <div class="table-cell1">{{ item.name }}</div>
+            <div class="table-cell1">
+              {{ item.phone }}
+            </div>
+
+            <div class="table-cell1">{{ item.credentialNo }}</div>
+            <div class="table-cell1 cell-flex">
+              <ColorCell :item="item" />
+              <span style="margin-left: 3px">{{ item.color }}</span>
+            </div>
+            <div class="table-cell1">
+              <div class="recover" @click.stop="addClcik(item)">
+                <span>恢复</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {};
+import {
+  getRecycleList,
+  exportHuishou,
+  getNetWorkId,
+  recoverData,
+  removeData,
+} from "@/api/home/index.js"; //回收
+import { addPerson } from "@/api/taicangpop/person";
+import { handleTreeId } from "@/utils/findTreeId.js";
+import { treeselect } from "@/api/system/dept"; //部门
+import { mapGetters } from "vuex";
+import ColorCell from "@/components/ColorCell";
+export default {
+  dicts: ["b_color_type"],
+  components: { ColorCell },
+  computed: {
+    ...mapGetters(["leftColor", "rightTopColor", "userId", "queryParamsIndex"]),
+  },
+  data() {
+    return {
+      loading: true,
+
+      currentIndex: 0,
+      credentialnoType: 0,
+      // tabList: [
+      //   { name: "身份证", value: 0 },
+      //   { name: "手机号", value: 1 },
+      //   { name: "姓名", value: 2 },
+      // ],
+      // optionList: [
+      //   { name: "完整身份证号", value: 0 },
+      //   { name: "省级(前2位)", value: 1 },
+      //   { name: "市级(前4位)", value: 2 },
+      //   { name: "县级(前6位)", value: 3 },
+      // ],
+      isCheck: [],
+      isList: [
+        { name: "中共党员", key: "isd" },
+        { name: "帮扶对象", key: "isk" },
+        { name: "退役军人", key: "isj" },
+        { name: "重点人群", key: "isx" },
+      ],
+
+      keyWord: "",
+      colorList: [],
+      queryParams: {
+        shequId: undefined,
+        xiaoquId: undefined,
+        parentid: undefined,
+        yuanid: undefined,
+        buildingId: undefined,
+        houseid: undefined,
+        // isd: undefined, //党员
+        // isk: undefined, //帮扶
+        // isj: undefined, //退伍
+        // isx: undefined, //重点
+        // credentialno: undefined, //身份证(全)
+        // cre1: undefined, //身份证(2)
+        // cre2: undefined, //身份证(4)
+        // cre3: undefined, //身份证(6)
+        // phone: undefined,
+        // name: undefined,
+        color: undefined,
+        // type: undefined,
+        mark: "",
+        pageNum: 1,
+        pageSize: 20,
+      },
+      deptList: [],
+      xiaoquList: [],
+      netList: [],
+      yuanList: [],
+      buildingList: [],
+      houseList: [],
+      list: [],
+      houseTotal: 0,
+      total: 0,
+      objList: [
+        { key: "deptList", value: "shequId" },
+        { key: "xiaoquList", value: "xiaoquId" },
+        { key: "netList", value: "parentid" },
+        { key: "yuanList", value: "yuanid" },
+        { key: "buildingList", value: "buildingId" },
+        { key: "houseList", value: "houseid" },
+      ],
+    };
+  },
+  mounted() {
+    this.queryParams.shequId = this.queryParamsIndex.shequId;
+    this.getDeptList();
+  },
+  methods: {
+    /**
+     * 恢复
+     */
+    /**恢复 */
+    addClcik(item) {
+      // console.warn("恢复数据", item.deleteUserId, this.userId);
+      if (item.deleteUserId != this.userId) {
+        this.$message.error("您没有权限恢复该条记录！");
+      } else {
+        this.$modal
+          .confirm("您确定要恢复该条记录吗？")
+          .then(() => {
+            delete item.id;
+            return addPerson(item);
+          })
+          .then(() => {
+            removeData(item.personId);
+          })
+          .then(() => {
+            this.handleSearch();
+          })
+          .then(() => {
+            this.$message({
+              message: "恢复成功",
+              type: "success",
+            });
+          })
+          .catch(() => {});
+      }
+    },
+    /**获取树部门 */
+    async getDeptList() {
+      let result = await treeselect();
+      this.deptList = result.data[0].children;
+      // console.log(result);
+    },
+    /**
+     * 级联筛选
+     */
+    changeSelect(e, key) {
+      let list = [];
+      let index = this.objList.findIndex((item) => item.key == key);
+      if (index > -1) {
+        list = this.objList.slice(index);
+      }
+      list.map((item) => {
+        this.queryParams[item.value] = undefined;
+      });
+      this[key] = handleTreeId(e, this.deptList);
+    },
+
+    /**
+     * 搜索
+     */
+    handleSearch() {
+      this.reset();
+      //分色
+      this.queryParams.color = this.colorList.toString();
+      // console.log(this.queryParams.color);
+      //处理四个is
+      // this.isCheck.forEach((item) => {
+      //   let index = this.isList.findIndex((it) => it.name == item);
+      //   if (index > -1) {
+      //     this.queryParams[this.isList[index].key] = 1;
+      //   }
+      // });
+      //三个tab搜索
+      // if (this.currentIndex == 0) {
+      //   if (this.credentialnoType == 0) {
+      //     this.queryParams.credentialno = this.keyWord;
+      //   } else {
+      //     this.queryParams["cre" + this.credentialnoType] = this.keyWord;
+      //   }
+      // }
+      // if (this.currentIndex == 1) this.queryParams.phone = this.keyWord;
+      // if (this.currentIndex == 2) this.queryParams.name = this.keyWord;
+
+      this.load();
+    },
+    /**
+     * 导出
+     */
+    handleExport() {
+      if (this.list.length == 0) {
+        this.$message({
+          message: "没有数据可导出！",
+          type: "warning",
+        });
+        return;
+      }
+      const loading = this.$loading({
+        lock: true,
+        text: "正在生成excel，请稍候",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      this.$modal
+        .confirm("是否确认导出所有数据项？")
+        .then(() => {
+          return exportHuishou(this.queryParams);
+        })
+        .then((response) => {
+          this.$download.name(response.msg);
+          loading.close();
+        })
+        .catch(() => {
+          loading.close();
+        });
+    },
+
+    /**
+     * 重置操作
+     */
+    handleReset() {
+      this.keyWord = "";
+      this.credentialnoType = 0;
+      this.queryParams.mark = "";
+      // this.queryParams.type = undefined;
+      this.queryParams.shequId = undefined;
+      this.queryParams.xiaoquId = undefined;
+      this.queryParams.parentid = undefined;
+      this.queryParams.yuanid = undefined;
+      this.queryParams.buildingId = undefined;
+      this.queryParams.houseid = undefined;
+
+      this.colorList = [];
+      // this.isCheck = [];
+      this.reset();
+      this.load();
+    },
+    /**
+     * 三个输入方式
+     */
+    handleClick(index) {
+      if (this.currentIndex == index) return;
+      this.keyWord = "";
+      this.currentIndex = index;
+    },
+    /**
+     * 加载更多
+     */
+    load() {
+      if (this.list.length > 0 && this.list.length >= this.total) return;
+      this.getList();
+    },
+    /**
+     * 获取list
+     */
+    async getList() {
+      this.loading = true;
+      let result = await getRecycleList(this.queryParams);
+      let handleColor = this.handleColor(result.rows);
+      this.list = [...this.list, ...handleColor];
+      this.total = result.total;
+      this.queryParams.pageNum++;
+      this.loading = false;
+    },
+
+    /**
+     * 处理颜色
+     */
+    handleColor(list) {
+      let arr = list.map((item) => {
+        item.personInfo = JSON.parse(item.personInfo);
+        item.personInfo.deleteUserId = item.deleteUserId;
+        item.personInfo.personId = item.id;
+        if (!item.personInfo.color) {
+          item.personInfo.leftColor = "#7b75ff";
+          item.personInfo.rightTopColor = "#7b75ff";
+        } else {
+          for (let key in this.leftColor) {
+            if (item.personInfo.color == key) {
+              item.personInfo.leftColor = this.leftColor[key];
+              item.personInfo.rightTopColor = this.rightTopColor[key];
+            }
+          }
+        }
+
+        item = item.personInfo;
+        return item;
+      });
+      // console.log(arr);
+      return arr;
+    },
+
+    /**
+     * 重置
+     */
+    reset() {
+      // this.queryParams.isd = undefined; //党员
+      // this.queryParams.isk = undefined; //帮扶
+      // this.queryParams.isj = undefined; //退伍
+      // this.queryParams.isx = undefined; //重点
+      // this.queryParams.credentialno = undefined; //身份证(全)
+      // this.queryParams.cre1 = undefined; //身份证(2)
+      // this.queryParams.cre2 = undefined; //身份证(4)
+      // this.queryParams.cre3 = undefined; //身份证(6)
+      // this.queryParams.phone = undefined;
+      // this.queryParams.name = undefined;
+      this.queryParams.color = undefined; //分色
+
+      this.queryParams.pageNum = 1;
+      this.queryParams.pageSize = 20;
+
+      this.list = [];
+      this.houseTotal = 0;
+      this.total = 0;
+    },
+  },
+};
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+@import "~@/assets/styles/isTable.scss";
+</style>

src/components/NavigationBar/userModel.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-dropdown trigger="click">
+    <div class="user-data">
+      <div class="user-icon"></div>
+      <div class="user-name">
+        欢迎 , {{ name }} <i class="el-icon-caret-bottom"></i>
+      </div>
+    </div>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item>修改密码</el-dropdown-item>
+      <el-dropdown-item divided @click.native="logout"
+        >退出登录</el-dropdown-item
+      >
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  name: "userModel",
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    async logout() {
+      this.$confirm("确定注销并退出系统吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$store.dispatch("LogOut").then(() => {
+            location.href = "/index";
+          });
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.user-data {
+  display: flex;
+  align-items: center;
+  padding-top: 8px;
+  cursor: pointer;
+  .user-icon {
+    height: 19px;
+    width: 19px;
+    border-radius: 50%;
+    background: url("~@/assets/images/ui/user.png");
+    background-size: 100% 100%;
+    margin-right: 10px;
+  }
+  .user-name {
+    font-size: 16px;
+    color: #ffffff;
+    font-weight: 400;
+    font-family: "Alibaba-PuHuiTi-Regular.otf";
+  }
+}
+</style>

src/components/NavigationBar/warningCentre.vue

@@ -1,9 +1,468 @@
 <template>
-  <div>预警</div>
+  <div class="search-container">
+    <div class="option-rows">
+      <el-select
+        @change="changeSelect($event, 'xiaoquList')"
+        v-model="queryParams.shequId"
+        placeholder="选择社区"
+        clearable
+      >
+        <el-option
+          v-for="item in deptList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="queryParams.xiaoquId"
+        placeholder="选择小区"
+        @change="changeSelect($event, 'netList')"
+        clearable
+      >
+        <el-option
+          v-for="item in xiaoquList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="option-rows">
+      <el-select
+        v-model="queryParams.parentid"
+        placeholder="选择网格"
+        @change="changeSelect($event, 'yuanList')"
+        clearable
+      >
+        <el-option
+          v-for="item in netList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="queryParams.yuanid"
+        placeholder="选择苑"
+        @change="changeSelect($event, 'buildingList')"
+        clearable
+      >
+        <el-option
+          v-for="item in yuanList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="queryParams.buildingId"
+        placeholder="选择楼栋"
+        @change="changeSelect($event, 'houseList')"
+        clearable
+      >
+        <el-option
+          v-for="item in buildingList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="queryParams.houseid" placeholder="选择住户" clearable>
+        <el-option
+          v-for="item in houseList"
+          :key="item.id"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="option-rows">
+      <el-select
+        v-model="colorList"
+        placeholder="选择分色"
+        multiple
+        collapse-tags
+        clearable
+      >
+        <el-option
+          v-for="dict in dict.type.b_color_type"
+          :key="dict.value"
+          :label="dict.label"
+          :value="dict.value"
+        >
+        </el-option>
+      </el-select>
+
+      <el-radio v-model="queryParams.mark" label="">全部</el-radio>
+      <el-radio v-model="queryParams.mark" label="ninety">3个月</el-radio>
+      <el-radio v-model="queryParams.mark" label="eighty">半年</el-radio>
+
+      <el-button type="text" @click="handleSearch()">搜索</el-button>
+      <el-button type="text" @click="handleReset()">重置</el-button>
+      <el-button type="text" @click="handleExport()">导出</el-button>
+
+      <!-- <el-checkbox-group v-model="isCheck">
+        <el-checkbox label="中共党员"> </el-checkbox>
+        <el-checkbox label="帮扶对象"> </el-checkbox>
+        <el-checkbox label="重点人群"> </el-checkbox>
+        <el-checkbox label="退役军人"> </el-checkbox>
+      </el-checkbox-group> -->
+    </div>
+    <!-- <div class="three-option">
+      <div class="option-list">
+        <div
+          class="option-list-item"
+          v-for="(item, index) in tabList"
+          :key="index"
+          @click="handleClick(index)"
+          :class="currentIndex == index ? 'activeItme' : ''"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="option-input">
+        <el-select
+          v-model="credentialnoType"
+          v-show="currentIndex == 0"
+          class="input-general-width"
+        >
+          <el-option
+            v-for="item in optionList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+
+        <el-input
+          prefix-icon="el-icon-search"
+          placeholder="请输入内容"
+          v-model="keyWord"
+          class="input-big-width"
+        >
+        </el-input>
+        <el-button type="text" @click="handleSearch()">搜索</el-button>
+        <el-button type="text" @click="handleReset()">重置</el-button>
+        <el-button type="text">导出</el-button>
+      </div>
+    </div> -->
+
+    <div class="result-list">
+      <div class="list-header">
+        <div class="header-left-total">搜索结果列表</div>
+        <div class="header-rigth-total">共{{ total }}条数据</div>
+      </div>
+      <div class="list-table" v-loading="loading">
+        <div class="table-header">
+          <div class="table-cell0">序号</div>
+          <div class="table-cell1">所属网格</div>
+          <div class="table-cell1">楼幢号</div>
+          <div class="table-cell1">户名称</div>
+          <div class="table-cell1">姓名</div>
+          <div class="table-cell2">证件号</div>
+          <div class="table-cell1">手机号</div>
+          <div class="table-cell1">分色</div>
+          <div class="table-cell1">未更新天数</div>
+        </div>
+        <div class="table-body" style="overflow: auto" v-infinite-scroll="load">
+          <div
+            class="body-rows"
+            v-for="(item, index) in list"
+            :key="'rows' + index"
+          >
+            <div class="table-cell0">{{ index + 1 }}</div>
+            <div class="table-cell1">{{ item.parentname }}</div>
+            <div class="table-cell1">
+              {{ item.deptname }}{{ item.buildingname }}
+            </div>
+            <div class="table-cell1">{{ item.housename }}</div>
+            <div class="table-cell1">
+              {{ item.pname }}
+            </div>
+            <div class="table-cell2">{{ item.credentialNo }}</div>
+            <div class="table-cell1">{{ item.phone }}</div>
+            <div class="table-cell1 cell-flex">
+              <ColorCell :item="item" />
+              <span style="margin-left: 3px">{{ item.color }}</span>
+            </div>
+            <div class="table-cell1">{{ item.daycount }}天</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {};
+import { getWarningList } from "@/api/home/index.js"; //预警
+import { handleTreeId } from "@/utils/findTreeId.js";
+import { treeselect } from "@/api/system/dept"; //部门
+import { mapGetters } from "vuex";
+import ColorCell from "@/components/ColorCell";
+import { exportyujing } from "@/api/home/index.js"; //预警
+export default {
+  dicts: ["b_color_type"],
+  components: { ColorCell },
+  computed: {
+    ...mapGetters(["leftColor", "rightTopColor", "queryParamsIndex"]),
+  },
+  data() {
+    return {
+      loading: true,
+
+      currentIndex: 0,
+      credentialnoType: 0,
+      tabList: [
+        { name: "身份证", value: 0 },
+        { name: "手机号", value: 1 },
+        { name: "姓名", value: 2 },
+      ],
+      optionList: [
+        { name: "完整身份证号", value: 0 },
+        { name: "省级(前2位)", value: 1 },
+        { name: "市级(前4位)", value: 2 },
+        { name: "县级(前6位)", value: 3 },
+      ],
+      isCheck: [],
+      isList: [
+        { name: "中共党员", key: "isd" },
+        { name: "帮扶对象", key: "isk" },
+        { name: "退役军人", key: "isj" },
+        { name: "重点人群", key: "isx" },
+      ],
+
+      keyWord: "",
+      colorList: [],
+      queryParams: {
+        shequId: undefined,
+        xiaoquId: undefined,
+        parentid: undefined,
+        yuanid: undefined,
+        buildingId: undefined,
+        houseid: undefined,
+        // isd: undefined, //党员
+        // isk: undefined, //帮扶
+        // isj: undefined, //退伍
+        // isx: undefined, //重点
+        // credentialno: undefined, //身份证(全)
+        // cre1: undefined, //身份证(2)
+        // cre2: undefined, //身份证(4)
+        // cre3: undefined, //身份证(6)
+        // phone: undefined,
+        // name: undefined,
+        color: undefined,
+        // type: undefined,
+        mark: "",
+        pageNum: 1,
+        pageSize: 20,
+      },
+      deptList: [],
+      xiaoquList: [],
+      netList: [],
+      yuanList: [],
+      buildingList: [],
+      houseList: [],
+      list: [],
+      houseTotal: 0,
+      total: 0,
+      objList: [
+        { key: "deptList", value: "shequId" },
+        { key: "xiaoquList", value: "xiaoquId" },
+        { key: "netList", value: "parentid" },
+        { key: "yuanList", value: "yuanid" },
+        { key: "buildingList", value: "buildingId" },
+        { key: "houseList", value: "houseid" },
+      ],
+    };
+  },
+  mounted() {
+    this.queryParams.shequId = this.queryParamsIndex.shequId;
+    this.getDeptList();
+  },
+  methods: {
+    /**获取树部门 */
+    async getDeptList() {
+      let result = await treeselect();
+      this.deptList = result.data[0].children;
+      // console.log(result);
+    },
+    /**
+     * 级联筛选
+     */
+    changeSelect(e, key) {
+      let list = [];
+      let index = this.objList.findIndex((item) => item.key == key);
+      if (index > -1) {
+        list = this.objList.slice(index);
+      }
+      list.map((item) => {
+        this.queryParams[item.value] = undefined;
+      });
+      this[key] = handleTreeId(e, this.deptList);
+    },
+
+    /**
+     * 搜索
+     */
+    handleSearch() {
+      this.reset();
+      //分色
+      this.queryParams.color = this.colorList.toString();
+      // console.log(this.queryParams.color);
+      //处理四个is
+      // this.isCheck.forEach((item) => {
+      //   let index = this.isList.findIndex((it) => it.name == item);
+      //   if (index > -1) {
+      //     this.queryParams[this.isList[index].key] = 1;
+      //   }
+      // });
+      //三个tab搜索
+      // if (this.currentIndex == 0) {
+      //   if (this.credentialnoType == 0) {
+      //     this.queryParams.credentialno = this.keyWord;
+      //   } else {
+      //     this.queryParams["cre" + this.credentialnoType] = this.keyWord;
+      //   }
+      // }
+      // if (this.currentIndex == 1) this.queryParams.phone = this.keyWord;
+      // if (this.currentIndex == 2) this.queryParams.name = this.keyWord;
+
+      this.load();
+    },
+    /**
+     * 导出
+     */
+    handleExport() {
+      if (this.list.length == 0) {
+        this.$message({
+          message: "没有数据可导出！",
+          type: "warning",
+        });
+        return;
+      }
+      const loading = this.$loading({
+        lock: true,
+        text: "正在生成excel，请稍候",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      this.$modal
+        .confirm("是否确认导出所有数据项？")
+        .then(() => {
+          return exportyujing(this.queryParams);
+        })
+        .then((response) => {
+          this.$download.name(response.msg);
+          loading.close();
+        })
+        .catch(() => {
+          loading.close();
+        });
+    },
+
+    /**
+     * 重置操作
+     */
+    handleReset() {
+      this.keyWord = "";
+      this.credentialnoType = 0;
+      this.queryParams.mark = "";
+      // this.queryParams.type = undefined;
+      this.queryParams.shequId = undefined;
+      this.queryParams.xiaoquId = undefined;
+      this.queryParams.parentid = undefined;
+      this.queryParams.yuanid = undefined;
+      this.queryParams.buildingId = undefined;
+      this.queryParams.houseid = undefined;
+
+      this.colorList = [];
+      // this.isCheck = [];
+      this.reset();
+      this.load();
+    },
+    /**
+     * 三个输入方式
+     */
+    handleClick(index) {
+      if (this.currentIndex == index) return;
+      this.keyWord = "";
+      this.currentIndex = index;
+    },
+    /**
+     * 加载更多
+     */
+    load() {
+      if (this.list.length > 0 && this.list.length >= this.total) return;
+      this.getList();
+    },
+    /**
+     * 获取list
+     */
+    async getList() {
+      this.loading = true;
+      let result = await getWarningList(this.queryParams);
+      let handleColor = this.handleColor(result.rows);
+      this.list = [...this.list, ...handleColor];
+      this.total = result.total;
+      this.queryParams.pageNum++;
+      this.loading = false;
+    },
+
+    /**
+     * 处理颜色
+     */
+    handleColor(list) {
+      list.map((item) => {
+        if (!item.color) {
+          item.leftColor = "#7b75ff";
+          item.rightTopColor = "#7b75ff";
+          return;
+        }
+        for (let key in this.leftColor) {
+          if (item.color == key) {
+            item.leftColor = this.leftColor[key];
+            item.rightTopColor = this.rightTopColor[key];
+          }
+        }
+      });
+      return list;
+    },
+
+    /**
+     * 重置
+     */
+    reset() {
+      // this.queryParams.isd = undefined; //党员
+      // this.queryParams.isk = undefined; //帮扶
+      // this.queryParams.isj = undefined; //退伍
+      // this.queryParams.isx = undefined; //重点
+      // this.queryParams.credentialno = undefined; //身份证(全)
+      // this.queryParams.cre1 = undefined; //身份证(2)
+      // this.queryParams.cre2 = undefined; //身份证(4)
+      // this.queryParams.cre3 = undefined; //身份证(6)
+      // this.queryParams.phone = undefined;
+      // this.queryParams.name = undefined;
+      this.queryParams.color = undefined; //分色
+
+      this.queryParams.pageNum = 1;
+      this.queryParams.pageSize = 20;
+
+      this.list = [];
+      this.houseTotal = 0;
+      this.total = 0;
+    },
+  },
+};
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+@import "~@/assets/styles/isTable.scss";
+</style>

src/components/scaleBox/index.vue

@@ -11,7 +11,7 @@
   components: {},
   data() {
     return {
-        width: 1920,
+      width: 2010,
       height: 1080,
       scaleX: null,
       scaleY: null,
@@ -59,4 +59,3 @@
   transition: 0.3s;
 }
 </style>
-   

src/directive/permission/hasRole.js

@@ -3,26 +3,26 @@
  * Copyright (c) 2019 ruoyi
  */
 
-import store from '@/store'
+import store from "@/store";
 
 export default {
   inserted(el, binding, vnode) {
-    const { value } = binding
+    const { value } = binding;
     const super_admin = "admin";
-    const roles = store.getters && store.getters.roles
+    const roles = store.getters && store.getters.roles;
 
     if (value && value instanceof Array && value.length > 0) {
-      const roleFlag = value
+      const roleFlag = value;
 
-      const hasRole = roles.some(role => {
-        return super_admin === role || roleFlag.includes(role)
-      })
+      const hasRole = roles.some((role) => {
+        return super_admin === role || roleFlag.includes(role);
+      });
 
       if (!hasRole) {
-        el.parentNode && el.parentNode.removeChild(el)
+        el.parentNode && el.parentNode.removeChild(el);
       }
     } else {
-      throw new Error(`请设置角色权限标签值"`)
-    }
-  }
+      throw new Error(`请设置角色权限标签值"`);
     }
+  },
+};

src/main.js

@@ -13,6 +13,7 @@ import router from "./router";
 import directive from "./directive"; // directive
 import plugins from "./plugins"; // plugins
 import { download } from "@/utils/request";
+import "animate.css";
 
 // 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
 import "leaflet/dist/leaflet.css";

src/permission.js

@@ -1,58 +1,61 @@
-import router from './router'
-import store from './store'
-import { Message } from 'element-ui'
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
-import { getToken } from '@/utils/auth'
-import { isRelogin } from '@/utils/request'
+import router from "./router";
+import store from "./store";
+import { Message } from "element-ui";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+import { getToken } from "@/utils/auth";
+import { isRelogin } from "@/utils/request";
 
-NProgress.configure({ showSpinner: false })
+NProgress.configure({ showSpinner: false });
 
-const whiteList = ['/login', '/register']
+const whiteList = ["/login", "/register"];
 
 router.beforeEach((to, from, next) => {
-  NProgress.start()
+  NProgress.start();
   if (getToken()) {
-    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
+    to.meta.title && store.dispatch("settings/setTitle", to.meta.title);
     /* has token*/
-    if (to.path === '/login') {
-      next({ path: '/' })
-      NProgress.done()
+    if (to.path === "/login") {
+      next({ path: "/" });
+      NProgress.done();
     } else if (whiteList.indexOf(to.path) !== -1) {
-      next()
+      next();
     } else {
       if (store.getters.roles.length === 0) {
-        isRelogin.show = true
+        isRelogin.show = true;
         // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetInfo').then(() => {
-          isRelogin.show = false
-          store.dispatch('GenerateRoutes').then(accessRoutes => {
+        store
+          .dispatch("GetInfo")
+          .then(() => {
+            isRelogin.show = false;
+            store.dispatch("GenerateRoutes").then((accessRoutes) => {
               // 根据roles权限生成可访问的路由表
-            router.addRoutes(accessRoutes) // 动态添加可访问路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
-          })
-        }).catch(err => {
-            store.dispatch('LogOut').then(() => {
-              Message.error(err)
-              next({ path: '/' })
-            })
+              router.addRoutes(accessRoutes); // 动态添加可访问路由表
+              next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
+            });
           })
+          .catch((err) => {
+            store.dispatch("LogOut").then(() => {
+              Message.error(err);
+              next({ path: "/" });
+            });
+          });
       } else {
-        next()
+        next();
       }
     }
   } else {
     // 没有token
     if (whiteList.indexOf(to.path) !== -1) {
       // 在免登录白名单，直接进入
-      next()
+      next();
     } else {
-      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页
-      NProgress.done()
+      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`); // 否则全部重定向到登录页
+      NProgress.done();
     }
   }
-})
+});
 
 router.afterEach(() => {
-  NProgress.done()
-})
+  NProgress.done();
+});

src/plugins/auth.js

@@ -1,26 +1,37 @@
-import store from '@/store'
+import store from "@/store";
 
 function authPermission(permission) {
   const all_permission = "*:*:*";
-  const permissions = store.getters && store.getters.permissions
+  const permissions = store.getters && store.getters.permissions;
   if (permission && permission.length > 0) {
-    return permissions.some(v => {
-      return all_permission === v || v === permission
-    })
+    return permissions.some((v) => {
+      return all_permission === v || v === permission;
+    });
   } else {
-    return false
+    return false;
   }
 }
 
 function authRole(role) {
   const super_admin = "admin";
-  const roles = store.getters && store.getters.roles
+  const roles = store.getters && store.getters.roles;
   if (role && role.length > 0) {
-    return roles.some(v => {
-      return super_admin === v || v === role
-    })
+    return roles.some((v) => {
+      return super_admin === v || v === role;
+    });
   } else {
-    return false
+    return false;
+  }
+}
+function authRoleNet(role) {
+  const super_admin = "network";
+  const roles = store.getters && store.getters.roles;
+  if (role && role.length > 0) {
+    return roles.some((v) => {
+      return v.indexOf(super_admin) != -1 || v === role;
+    });
+  } else {
+    return false;
   }
 }
 
@@ -31,30 +42,33 @@ export default {
   },
   // 验证用户是否含有指定权限，只需包含其中一个
   hasPermiOr(permissions) {
-    return permissions.some(item => {
-      return authPermission(item)
-    })
+    return permissions.some((item) => {
+      return authPermission(item);
+    });
   },
   // 验证用户是否含有指定权限，必须全部拥有
   hasPermiAnd(permissions) {
-    return permissions.every(item => {
-      return authPermission(item)
-    })
+    return permissions.every((item) => {
+      return authPermission(item);
+    });
   },
   // 验证用户是否具备某角色
   hasRole(role) {
     return authRole(role);
   },
+  hasRoleNet(role) {
+    return authRoleNet(role);
+  },
   // 验证用户是否含有指定角色，只需包含其中一个
   hasRoleOr(roles) {
-    return roles.some(item => {
-      return authRole(item)
-    })
+    return roles.some((item) => {
+      return authRole(item);
+    });
   },
   // 验证用户是否含有指定角色，必须全部拥有
   hasRoleAnd(roles) {
-    return roles.every(item => {
-      return authRole(item)
-    })
-  }
-}
+    return roles.every((item) => {
+      return authRole(item);
+    });
+  },
+};

src/router/index.js

@@ -73,6 +73,13 @@ export const constantRoutes = [
     name: "Index",
     meta: { title: "首页", icon: "dashboard", affix: true },
   },
+  {
+    path: "/xiaoqu",
+    component: () => import("@/views/xiaoqu"),
+    name: "xiaoqu",
+    meta: { title: "小区", icon: "dashboard", affix: true },
+    hidden: true,
+  },
   {
     path: "/user",
     component: Layout,

src/store/getters.js

@@ -1,19 +1,29 @@
 const getters = {
-  sidebar: state => state.app.sidebar,
-  size: state => state.app.size,
-  device: state => state.app.device,
-  dict: state => state.dict.dict,
-  visitedViews: state => state.tagsView.visitedViews,
-  cachedViews: state => state.tagsView.cachedViews,
-  token: state => state.user.token,
-  avatar: state => state.user.avatar,
-  name: state => state.user.name,
-  introduction: state => state.user.introduction,
-  roles: state => state.user.roles,
-  permissions: state => state.user.permissions,
-  permission_routes: state => state.permission.routes,
-  topbarRouters:state => state.permission.topbarRouters,
-  defaultRoutes:state => state.permission.defaultRoutes,
-  sidebarRouters:state => state.permission.sidebarRouters,
-}
-export default getters
+  sidebar: (state) => state.app.sidebar,
+  size: (state) => state.app.size,
+  device: (state) => state.app.device,
+  dict: (state) => state.dict.dict,
+  visitedViews: (state) => state.tagsView.visitedViews,
+  cachedViews: (state) => state.tagsView.cachedViews,
+  token: (state) => state.user.token,
+  avatar: (state) => state.user.avatar,
+  name: (state) => state.user.name,
+  userId: (state) => state.user.id,
+  dept: (state) => state.user.dept,
+  introduction: (state) => state.user.introduction,
+  roles: (state) => state.user.roles,
+  permissions: (state) => state.user.permissions,
+  permission_routes: (state) => state.permission.routes,
+  topbarRouters: (state) => state.permission.topbarRouters,
+  defaultRoutes: (state) => state.permission.defaultRoutes,
+  sidebarRouters: (state) => state.permission.sidebarRouters,
+  leftColor: (state) => state.taicang.leftColor,
+  rightTopColor: (state) => state.taicang.rightTopColor,
+  yjTotal: (state) => state.taicang.yjTotal,
+  xiaoquIntroduce: (state) => state.taicang.xiaoquIntroduce,
+  colorListL: (state) => state.taicang.colorListL,
+  threeCell: (state) => state.taicang.threeCell,
+  pie: (state) => state.taicang.pie,
+  queryParamsIndex: (state) => state.taicang.queryParams,
+};
+export default getters;

src/store/index.js

@@ -1,14 +1,15 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import app from './modules/app'
-import dict from './modules/dict'
-import user from './modules/user'
-import tagsView from './modules/tagsView'
-import permission from './modules/permission'
-import settings from './modules/settings'
-import getters from './getters'
+import Vue from "vue";
+import Vuex from "vuex";
+import app from "./modules/app";
+import dict from "./modules/dict";
+import user from "./modules/user";
+import tagsView from "./modules/tagsView";
+import permission from "./modules/permission";
+import settings from "./modules/settings";
+import taicang from "./modules/taicang";
+import getters from "./getters";
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 const store = new Vuex.Store({
   modules: {
@@ -17,9 +18,10 @@ const store = new Vuex.Store({
     user,
     tagsView,
     permission,
-    settings
+    settings,
+    taicang,
   },
-  getters
-})
+  getters,
+});
 
-export default store
+export default store;

src/store/modules/taicang.js

@@ -0,0 +1,204 @@
+import { getYj } from "@/api/taicangpop/block.js";
+import {
+  getxiaoqu,
+  getTotaldata,
+  echartsData,
+  getPersonData,
+} from "@/api/home";
+import { getColorList } from "@/api/taicangpop/new.js";
+
+const taicang = {
+  state: {
+    queryParams: {
+      shequId: "",
+      xiaoquId: "",
+    },
+    yjTotal: 0,
+    leftColor: {
+      HZ: "#008c5e",
+      HL: "#008c5e",
+      HO: "#008c5e",
+      HF: "#008c5e",
+      NZ: "#7f8c95",
+      NL: "#7f8c95",
+      NO: "#7f8c95",
+      NF: "#7f8c95",
+    },
+    rightTopColor: {
+      HZ: "#008c5e",
+      HL: "red",
+      HO: "#7f8c95",
+      HF: "#008c5e",
+      NZ: "#008c5e",
+      NL: "red",
+      NO: "#7f8c95",
+      NF: "#008c5e",
+    },
+    xiaoquIntroduce: {
+      intro: {
+        shequ: {},
+        kaiguo: {},
+      },
+    },
+    colorListL: [],
+    threeCell: {
+      houseTotal: 0,
+      personTotal: 0,
+      netTotal: 0,
+      buildingTotal: 0,
+    },
+    pie: {
+      total: 0,
+      update: 0,
+    },
+  },
+  mutations: {
+    SET_QUERY_PARAMS: (state, query) => {
+      state.queryParams.shequId = query.shequId;
+      state.queryParams.xiaoquId = query.xiaoquId;
+    },
+    SET_YJ_TOTAL: (state, total) => {
+      state.yjTotal = total;
+    },
+    SET_INTRODUCE: (state, introduce) => {
+      state.xiaoquIntroduce = introduce;
+    },
+    SET_COLOR_LIST: (state, list) => {
+      state.colorListL = handleColor(state.colorListL, list);
+    },
+    CLEAR_COLOR: (state) => {
+      let colorListL = [
+        { name: "HZ", house: 0, person: 0 },
+        { name: "HL", house: 0, person: 0 },
+        { name: "HO", house: 0, person: 0 },
+        { name: "HF", house: 0, person: 0 },
+        { name: "NZ", house: 0, person: 0 },
+        { name: "NL", house: 0, person: 0 },
+        { name: "NO", house: 0, person: 0 },
+        { name: "NF", house: 0, person: 0 },
+        { name: "户籍", house: 0, person: 0 },
+        { name: "流动", house: 0, person: 0 },
+        { name: "中共党员", house: 0, person: 0 },
+        { name: "帮扶对象", house: 0, person: 0 },
+        { name: "重点人群", house: 0, person: 0 },
+        { name: "退伍军人", house: 0, person: 0 },
+      ];
+
+      state.colorListL = resetColor(
+        colorListL,
+        state.leftColor,
+        state.rightTopColor
+      );
+    },
+    SET_THREE_CELL: (state, obj) => {
+      state.threeCell = {
+        houseTotal: obj["网格户数据"],
+        personTotal: obj["网格人数据"],
+        netTotal: obj["网格总数数据"],
+        buildingTotal: obj["网格楼栋数据"],
+      };
+    },
+    SET_PIE: (state, obj) => {
+      state.pie = {
+        total: obj["所有户数据"],
+        update: obj["修改户数据"],
+      };
+    },
+  },
+  actions: {
+    /**预警总数 */
+    GetYjtotal({ commit }, queryParams) {
+      return new Promise((resolve, reject) => {
+        getYj(queryParams).then((res) => {
+          commit("SET_YJ_TOTAL", res.data);
+          resolve();
+        });
+      });
+    },
+
+    /**
+     * 获取小区详情
+     */
+    GetXiaoquInfo({ commit }, deptId) {
+      return new Promise((resolve, reject) => {
+        getxiaoqu(deptId).then((res) => {
+          res.data.intro = JSON.parse(res.data.intro);
+          commit("SET_INTRODUCE", res.data);
+          resolve();
+        });
+      });
+    },
+
+    /**获取colorList */
+    GetcolorList({ commit }, queryParams) {
+      return new Promise((resolve, reject) => {
+        commit("CLEAR_COLOR");
+        getColorList(queryParams).then((res) => {
+          commit("SET_COLOR_LIST", res.data);
+          resolve();
+        });
+      });
+    },
+    /**
+     * 获取户总数 /人口数 / 网格总数 / 楼栋总数
+     */
+    getThreeCell({ commit }, queryParams) {
+      return new Promise((resolve, reject) => {
+        getTotaldata(queryParams).then((res) => {
+          commit("SET_THREE_CELL", res.data);
+          resolve();
+        });
+      });
+    },
+    /**
+     * 获取住户 / 居民 饼图数据
+     */
+    GetPie({ commit }, queryParams) {
+      return new Promise((resolve, reject) => {
+        if (queryParams.type == "house") {
+          delete queryParams.type;
+          echartsData(queryParams).then((res) => {
+            commit("SET_PIE", res.data);
+            resolve();
+          });
+        } else {
+          delete queryParams.type;
+          getPersonData(queryParams).then((res) => {
+            commit("SET_PIE", res.data);
+            resolve();
+          });
+        }
+      });
+    },
+  },
+};
+
+function handleColor(colorList, list) {
+  colorList.map((item) => {
+    let index = list.findIndex((it) => it.name == item.name);
+    if (index > -1) {
+      item.house = list[index].house;
+      item.person = list[index].person;
+    }
+  });
+
+  return colorList;
+}
+
+function resetColor(colorList, leftColor, rightTopColor) {
+  colorList.map((item) => {
+    let isColor = /^[a-zA-Z]+$/.test(item.name);
+    if (isColor) {
+      item.color = item.name;
+      for (let key in leftColor) {
+        if (item.name == key) {
+          item.leftColor = leftColor[key];
+          item.rightTopColor = rightTopColor[key];
+        }
+      }
+    }
+  });
+  return colorList;
+}
+
+export default taicang;

src/store/modules/user.js

@@ -1,101 +1,117 @@
-import { login, logout, getInfo } from '@/api/login'
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import { login, logout, getInfo } from "@/api/login";
+import { getToken, setToken, removeToken } from "@/utils/auth";
 
 const user = {
   state: {
     token: getToken(),
-    id: '',
-    name: '',
-    avatar: '',
+    id: "",
+    name: "",
+    avatar: "",
     roles: [],
-    permissions: []
+    dept: {},
+    permissions: [],
   },
 
   mutations: {
     SET_TOKEN: (state, token) => {
-      state.token = token
+      state.token = token;
     },
     SET_ID: (state, id) => {
-      state.id = id
+      state.id = id;
     },
     SET_NAME: (state, name) => {
-      state.name = name
+      state.name = name;
     },
     SET_AVATAR: (state, avatar) => {
-      state.avatar = avatar
+      state.avatar = avatar;
     },
     SET_ROLES: (state, roles) => {
-      state.roles = roles
+      state.roles = roles;
+    },
+    SET_DEPT: (state, dept) => {
+      state.dept = dept;
     },
     SET_PERMISSIONS: (state, permissions) => {
-      state.permissions = permissions
-    }
+      state.permissions = permissions;
+    },
   },
 
   actions: {
     // 登录
     Login({ commit }, userInfo) {
-      const username = userInfo.username.trim()
-      const password = userInfo.password
-      const code = userInfo.code
-      const uuid = userInfo.uuid
+      const username = userInfo.username.trim();
+      const password = userInfo.password;
+      const code = userInfo.code;
+      const uuid = userInfo.uuid;
       return new Promise((resolve, reject) => {
-        login(username, password, code, uuid).then(res => {
-          setToken(res.token)
-          commit('SET_TOKEN', res.token)
-          resolve()
-        }).catch(error => {
-          reject(error)
-        })
+        login(username, password, code, uuid)
+          .then((res) => {
+            setToken(res.token);
+            commit("SET_TOKEN", res.token);
+            resolve();
           })
+          .catch((error) => {
+            reject(error);
+          });
+      });
     },
 
     // 获取用户信息
     GetInfo({ commit, state }) {
       return new Promise((resolve, reject) => {
-        getInfo().then(res => {
-          const user = res.user
-          const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;
-          if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
-            commit('SET_ROLES', res.roles)
-            commit('SET_PERMISSIONS', res.permissions)
+        getInfo()
+          .then((res) => {
+            const user = res.user;
+            const avatar =
+              user.avatar == "" || user.avatar == null
+                ? require("@/assets/images/profile.jpg")
+                : process.env.VUE_APP_BASE_API + user.avatar;
+            if (res.roles && res.roles.length > 0) {
+              // 验证返回的roles是否是一个非空数组
+              commit("SET_ROLES", res.roles);
+
+              commit("SET_PERMISSIONS", res.permissions);
             } else {
-            commit('SET_ROLES', ['ROLE_DEFAULT'])
+              commit("SET_ROLES", ["ROLE_DEFAULT"]);
             }
-          commit('SET_ID', user.userId)
-          commit('SET_NAME', user.userName)
-          commit('SET_AVATAR', avatar)
-          resolve(res)
-        }).catch(error => {
-          reject(error)
-        })
+            commit("SET_DEPT", user.dept);
+            commit("SET_ID", user.userId);
+            commit("SET_NAME", user.userName);
+            commit("SET_AVATAR", avatar);
+            resolve(res);
           })
+          .catch((error) => {
+            reject(error);
+          });
+      });
     },
 
     // 退出系统
     LogOut({ commit, state }) {
       return new Promise((resolve, reject) => {
-        logout(state.token).then(() => {
-          commit('SET_TOKEN', '')
-          commit('SET_ROLES', [])
-          commit('SET_PERMISSIONS', [])
-          removeToken()
-          resolve()
-        }).catch(error => {
-          reject(error)
-        })
+        logout(state.token)
+          .then(() => {
+            commit("SET_TOKEN", "");
+            commit("SET_ROLES", []);
+            commit("SET_PERMISSIONS", []);
+            removeToken();
+            resolve();
           })
+          .catch((error) => {
+            reject(error);
+          });
+      });
     },
 
     // 前端 登出
     FedLogOut({ commit }) {
-      return new Promise(resolve => {
-        commit('SET_TOKEN', '')
-        removeToken()
-        resolve()
-      })
-    }
-  }
-}
+      return new Promise((resolve) => {
+        commit("SET_TOKEN", "");
+        removeToken();
+        resolve();
+      });
+    },
+  },
+};
 
-export default user
+export default user;

src/utils/findTreeId.js

@@ -0,0 +1,52 @@
+// 定义递归函数来查找指定 id 的节点及其子节点
+function findNodeById(tree, id) {
+  // 遍历树的每一个节点
+  for (let node of tree) {
+    // 如果当前节点的 id 匹配
+    if (node.id === id) {
+      return node; // 返回当前节点及其子节点
+    }
+    // 如果当前节点有子节点，则递归查找子节点
+    if (node.children) {
+      let result = findNodeById(node.children, id);
+      if (result) {
+        return result; // 如果找到了就直接返回结果
+      }
+    }
+  }
+  // 如果未找到匹配的节点，则返回空（null）
+  return null;
+}
+
+// 定义一个函数来找到指定 id 节点及其所有子节点的完整信息
+function findAllChildrenInfo(tree, id) {
+  let node = findNodeById(tree, id); // 首先找到指定 id 的节点
+
+  if (!node) {
+    return null; // 如果找不到，返回 null
+  }
+
+  // 定义一个递归函数来获取节点及其所有子节点的完整信息
+  function collectChildrenInfo(node) {
+    let result = { ...node }; // 复制当前节点的所有属性
+
+    if (result.children) {
+      // 如果当前节点有子节点，则递归处理每一个子节点
+      result.children = result.children.map((child) =>
+        collectChildrenInfo(child)
+      );
+    }
+
+    return result;
+  }
+
+  return collectChildrenInfo(node); // 返回节点及其所有子节点的完整信息
+}
+
+export function handleTreeId(id, tree) {
+  // 测试示例
+  const idToFind = id; // 要查找的 id
+  const foundIds = findAllChildrenInfo(tree, idToFind); // 找到所有与 idToFind 相关的节点 id
+
+  return foundIds.children;
+}

src/utils/leaflet-rotate/src/control/Rotate.js

@@ -0,0 +1,168 @@
+/**
+ * L.Control.Rotate
+ */
+
+// A tri-state control for map rotation. States are:
+// Locked (default)
+// Unlocked (user can pinch-rotate)
+// Follow (rotation follows device orientation, if available)
+L.Control.Rotate = L.Control.extend({
+
+    options: {
+        position: 'topleft',
+        closeOnZeroBearing: true
+    },
+
+    onAdd: function(map) {
+        this._onDeviceOrientation = L.Util.throttle(this._unthrottledOnDeviceOrientation, 100, this);
+
+        var container = this._container = L.DomUtil.create('div', 'leaflet-control-rotate leaflet-bar');
+
+        // this.button = L.Control.Zoom.prototype._createButton.call(this, 'R', 'leaflet-control-rotate', 'leaflet-control-rotate', container, this._toggleLock);
+
+        var arrow = this._arrow = L.DomUtil.create('span', 'leaflet-control-rotate-arrow');
+
+        arrow.style.backgroundImage = `url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")`;
+        arrow.style.cursor = 'grab';
+        arrow.style.display = 'block';
+        arrow.style.width = '100%';
+        arrow.style.height = '100%';
+        arrow.style.backgroundRepeat = 'no-repeat';
+        arrow.style.backgroundPosition = '50%';
+
+        // Copy-pasted from L.Control.Zoom
+        var link = this._link = L.DomUtil.create('a', 'leaflet-control-rotate-toggle', container);
+        link.appendChild(arrow);
+        link.href = '#';
+        link.title = 'Rotate map';
+
+        L.DomEvent
+            .on(link, 'dblclick', L.DomEvent.stopPropagation)
+            .on(link, 'mousedown', this._handleMouseDown, this)
+            .on(link, 'click', L.DomEvent.stop)
+            .on(link, 'click', this._cycleState, this)
+            .on(link, 'click', this._refocusOnMap, this);
+
+        if (!L.Browser.any3d) {
+            L.DomUtil.addClass(link, 'leaflet-disabled');
+        }
+
+        this._restyle();
+
+        map.on('rotate', this._restyle.bind(this));
+
+        // State flag
+        this._follow = false;
+        this._canFollow = false;
+
+        if (this.options.closeOnZeroBearing && map.getBearing() === 0) {
+            container.style.display = 'none';
+        }
+
+        return container;
+    },
+
+    _handleMouseDown: function(e) {
+        L.DomEvent.stopPropagation(e);
+        this.dragging = true;
+        this.dragstartX = e.pageX;
+        this.dragstartY = e.pageY;
+        L.DomEvent
+            .on(document, 'mousemove', this._handleMouseDrag, this)
+            .on(document, 'mouseup', this._handleMouseUp, this);
+    },
+
+    _handleMouseUp: function(e) {
+        L.DomEvent.stopPropagation(e);
+        this.dragging = false;
+
+        L.DomEvent
+            .off(document, 'mousemove', this._handleMouseDrag, this)
+            .off(document, 'mouseup', this._handleMouseUp, this);
+    },
+
+    _handleMouseDrag: function(e) {
+        if (!this.dragging) { return; }
+        var deltaX = e.clientX - this.dragstartX;
+        this._map.setBearing(deltaX);
+    },
+
+    _cycleState: function(ev) {
+        var map = this._map;
+
+        if (!map) { return; }
+
+        if (!map.touchRotate.enabled() && !map.compassBearing.enabled()) {
+            // Go from disabled to touch
+            map.touchRotate.enable();
+
+            // console.log('state is now: touch rotate');
+        } else {
+
+            if (!map.compassBearing.enabled()) {
+                // Go from touch to compass
+                map.touchRotate.disable();
+                map.compassBearing.enable();
+
+                // console.log('state is now: compass');
+
+                // It is possible that compass is not supported. If so,
+                // the hangler will automatically go from compass to disabled.
+            } else {
+                // Go from compass to disabled
+                map.compassBearing.disable();
+
+                // console.log('state is now: locked');
+
+                map.setBearing(0);
+                if (this.options.closeOnZeroBearing) {
+                    map.touchRotate.enable();
+                }
+            }
+        }
+        this._restyle();
+    },
+
+    _restyle: function() {
+        if (this._map.options.rotate) {
+            var map = this._map;
+            var bearing = map.getBearing();
+            if (this.options.closeOnZeroBearing && bearing) {
+                this._container.style.display = 'block';
+            }
+
+            var cssTransform = 'rotate(' + bearing + 'deg)';
+            this._arrow.style.transform = cssTransform;
+
+            if (map.compassBearing.enabled()) {
+                this._link.style.backgroundColor = 'orange';
+            } else if (map.touchRotate.enabled()) {
+                this._link.style.backgroundColor = null;
+            } else {
+                this._link.style.backgroundColor = 'grey';
+                if (this.options.closeOnZeroBearing && map.getBearing() === 0) {
+                    this._container.style.display = 'none';
+                }
+            }
+        } else {
+            L.DomUtil.addClass(this._link, 'leaflet-disabled');
+        }
+    },
+
+});
+
+L.control.rotate = function(options) {
+    return new L.Control.Rotate(options);
+};
+
+L.Map.mergeOptions({
+    rotateControl: true,
+});
+
+L.Map.addInitHook(function() {
+    if (this.options.rotateControl) {
+        var options = typeof this.options.rotateControl === 'object' ? this.options.rotateControl : {};
+        this.rotateControl = L.control.rotate(options);
+        this.addControl(this.rotateControl);
+    }
+});

src/utils/leaflet-rotate/src/dom/DomUtil.js

@@ -0,0 +1,45 @@
+/**
+ * L.DomUtil
+ */
+const domUtilProto = L.extend({}, L.DomUtil);
+
+L.extend(L.DomUtil, {
+
+    setTransform: function(el, offset, scale, bearing, pivot) {
+        var pos = offset || new L.Point(0, 0);
+
+        if (!bearing) {
+            offset = pos._round();
+            return domUtilProto.setTransform.call(this, el, offset, scale);
+        }
+
+        pos = pos.rotateFrom(bearing, pivot);
+
+        el.style[L.DomUtil.TRANSFORM] =
+            'translate3d(' + pos.x + 'px,' + pos.y + 'px' + ',0)' +
+            (scale ? ' scale(' + scale + ')' : '') +
+            ' rotate(' + bearing + 'rad)';
+    },
+
+    setPosition: function(el, point, bearing, pivot) { // (HTMLElement, Point[, Boolean])
+        if (!bearing) {
+            return domUtilProto.setPosition.call(this, el, point);
+        }
+
+        /*eslint-disable */
+        el._leaflet_pos = point;
+        /*eslint-enable */
+
+        if (L.Browser.any3d) {
+            L.DomUtil.setTransform(el, point, undefined, bearing, pivot);
+        } else {
+            el.style.left = point.x + 'px';
+            el.style.top = point.y + 'px';
+        }
+    },
+
+    // Constants for rotation
+    DEG_TO_RAD: Math.PI / 180,
+    RAD_TO_DEG: 180 / Math.PI,
+
+});

src/utils/leaflet-rotate/src/dom/Draggable.js

@@ -0,0 +1,10 @@
+/**
+ * L.Draggable
+ */
+L.Draggable.include({
+
+    updateMapBearing: function(mapBearing) {
+        this._mapBearing = mapBearing;
+    },
+
+});

src/utils/leaflet-rotate/src/geometry/Point.js

@@ -0,0 +1,41 @@
+/**
+ * L.Point
+ */
+L.extend(L.Point.prototype, {
+
+    // Rotate around (0,0) by applying the 2D rotation matrix:
+    // ⎡ x' ⎤ = ⎡ cos θ  -sin θ ⎤ ⎡ x ⎤
+    // ⎣ y' ⎦   ⎣ sin θ   cos θ ⎦ ⎣ y ⎦
+    // Theta must be given in radians.
+    rotate: function(theta) {
+        if (!theta) { return this; }
+        var sinTheta = Math.sin(theta);
+        var cosTheta = Math.cos(theta);
+
+        return new L.Point(
+            this.x * cosTheta - this.y * sinTheta,
+            this.x * sinTheta + this.y * cosTheta
+        );
+    },
+
+    // Rotate around (pivot.x, pivot.y) by:
+    // 1. subtract (pivot.x, pivot.y)
+    // 2. rotate around (0, 0)
+    // 3. add (pivot.x, pivot.y) back
+    // same as `this.subtract(pivot).rotate(theta).add(pivot)`
+    rotateFrom: function(theta, pivot) {
+        if (!theta) { return this; }
+        var sinTheta = Math.sin(theta);
+        var cosTheta = Math.cos(theta);
+        var cx = pivot.x,
+            cy = pivot.y;
+        var x = this.x - cx,
+            y = this.y - cy;
+
+        return new L.Point(
+            x * cosTheta - y * sinTheta + cx,
+            x * sinTheta + y * cosTheta + cy
+        );
+    },
+
+});

src/utils/leaflet-rotate/src/index.js

@@ -0,0 +1,45 @@
+/**
+ * Based on Leaflet structure (ver. 1.7)
+ *
+ * @see https://github.com/Leaflet/Leaflet/blob/master/src/Leaflet.js
+ */
+
+// import {version} from '../package.json';
+// export {version};
+
+
+// core
+// export * from './core/index';
+
+// dom
+export * from './dom/DomUtil';
+export * from './dom/Draggable';
+
+// geometry
+export * from './geometry/Point';
+
+// geo
+// export * from './geo/index';
+
+// layer
+export * from './layer/DivOverlay';
+export * from './layer/Popup';
+export * from './layer/Tooltip';
+export * from './layer/marker/Icon';
+export * from './layer/marker/Marker';
+export * from './layer/tile/GridLayer';
+export * from './layer/vector/Canvas';
+export * from './layer/vector/Renderer';
+export * from './layer/vector/SVG';
+
+// map
+export * from './map/Map';
+export * from './map/handler/CompassBearing';
+export * from './map/handler/ContainerMutation';
+export * from './map/handler/TouchGestures';
+export * from './map/handler/TouchRotate';
+export * from './map/handler/ShiftKeyRotate';
+export * from './map/handler/TouchZoom';
+
+// control
+export * from './control/Rotate';

src/utils/leaflet-rotate/src/layer/DivOverlay.js

@@ -0,0 +1,37 @@
+/**
+ * L.DivOverlay
+ */
+const divOverlayProto = L.extend({}, L.DivOverlay.prototype);
+
+L.DivOverlay.include({
+
+    getEvents: function() {
+        return L.extend(divOverlayProto.getEvents.call(this), { rotate: this._updatePosition });
+    },
+
+    _updatePosition: function() {
+        if (!this._map) { return; }
+
+        var pos = this._map.latLngToLayerPoint(this._latlng),
+            offset = L.point(this.options.offset),
+            anchor = this._getAnchor();
+
+        if (this._zoomAnimated) {
+            // TODO: use divOverlayProto._updatePosition
+            if (this._map._rotate) {
+                pos = this._map.rotatedPointToMapPanePoint(pos);
+            }
+            L.DomUtil.setPosition(this._container, pos.add(anchor));
+        } else {
+            offset = offset.add(pos).add(anchor);
+        }
+
+        var bottom = this._containerBottom = -offset.y,
+            left = this._containerLeft = -Math.round(this._containerWidth / 2) + offset.x;
+
+        // bottom position the popup in case the height of the popup changes (images loading etc)
+        this._container.style.bottom = bottom + 'px';
+        this._container.style.left = left + 'px';
+    },
+
+});

src/utils/leaflet-rotate/src/layer/Popup.js

@@ -0,0 +1,65 @@
+/**
+ * L.Popup
+ */
+const popupProto = L.extend({}, L.Popup.prototype);
+
+L.Popup.include({
+
+    _animateZoom: function(e) {
+        if (!this._map._rotate) {
+            popupProto._animateZoom.call(this, e);
+        }
+        var pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center),
+            anchor = this._getAnchor();
+
+        pos = this._map.rotatedPointToMapPanePoint(pos);
+
+        L.DomUtil.setPosition(this._container, pos.add(anchor));
+    },
+
+    _adjustPan: function() {
+        if (!this.options.autoPan || (this._map._panAnim && this._map._panAnim._inProgress)) { return; }
+
+        var map = this._map,
+            marginBottom = parseInt(L.DomUtil.getStyle(this._container, 'marginBottom'), 10) || 0,
+            containerHeight = this._container.offsetHeight + marginBottom,
+            containerWidth = this._containerWidth,
+            layerPos = new L.Point(this._containerLeft, -containerHeight - this._containerBottom);
+
+        layerPos._add(L.DomUtil.getPosition(this._container));
+
+        // var containerPos = map.layerPointToContainerPoint(layerPos);
+        // TODO: use popupProto._adjustPan
+        var containerPos = layerPos._add(this._map._getMapPanePos()),
+            padding = L.point(this.options.autoPanPadding),
+            paddingTL = L.point(this.options.autoPanPaddingTopLeft || padding),
+            paddingBR = L.point(this.options.autoPanPaddingBottomRight || padding),
+            size = map.getSize(),
+            dx = 0,
+            dy = 0;
+
+        if (containerPos.x + containerWidth + paddingBR.x > size.x) { // right
+            dx = containerPos.x + containerWidth - size.x + paddingBR.x;
+        }
+        if (containerPos.x - dx - paddingTL.x < 0) { // left
+            dx = containerPos.x - paddingTL.x;
+        }
+        if (containerPos.y + containerHeight + paddingBR.y > size.y) { // bottom
+            dy = containerPos.y + containerHeight - size.y + paddingBR.y;
+        }
+        if (containerPos.y - dy - paddingTL.y < 0) { // top
+            dy = containerPos.y - paddingTL.y;
+        }
+
+        // @namespace Map
+        // @section Popup events
+        // @event autopanstart: Event
+        // Fired when the map starts autopanning when opening a popup.
+        if (dx || dy) {
+            map
+                .fire('autopanstart')
+                .panBy([dx, dy]);
+        }
+    },
+
+});

src/utils/leaflet-rotate/src/layer/Tooltip.js

@@ -0,0 +1,28 @@
+/**
+ * L.Tooltip
+ */
+const tooltipProto = L.extend({}, L.Tooltip.prototype);
+
+L.Tooltip.include({
+
+    _updatePosition: function() {
+        if (!this._map._rotate) {
+            return tooltipProto._updatePosition.call(this);
+        }
+        var pos = this._map.latLngToLayerPoint(this._latlng);
+
+        pos = this._map.rotatedPointToMapPanePoint(pos);
+        this._setPosition(pos);
+    },
+
+    _animateZoom: function(e) {
+        if (!this._map._rotate) {
+            return tooltipProto._animateZoom.call(this, e);
+        }
+        var pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center);
+
+        pos = this._map.rotatedPointToMapPanePoint(pos);
+        this._setPosition(pos);
+    },
+
+});

src/utils/leaflet-rotate/src/layer/marker/Icon.js

@@ -0,0 +1,35 @@
+/**
+ * L.Icon
+ */
+const iconProto = L.extend({}, L.Icon.prototype);
+
+L.Icon.include({
+
+    _setIconStyles: function(img, name) {
+        var options = this.options;
+        var sizeOption = options[name + 'Size'];
+
+        if (typeof sizeOption === 'number') {
+            sizeOption = [sizeOption, sizeOption];
+        }
+
+        var size = L.point(sizeOption),
+            anchor = L.point(name === 'shadow' && options.shadowAnchor || options.iconAnchor ||
+                size && size.divideBy(2, true));
+
+        img.className = 'leaflet-marker-' + name + ' ' + (options.className || '');
+
+        if (anchor) {
+            img.style.marginLeft = (-anchor.x) + 'px';
+            img.style.marginTop = (-anchor.y) + 'px';
+            // TODO: use iconProto._setIconStyles
+            img.style[L.DomUtil.TRANSFORM + "Origin"] = anchor.x + "px " + anchor.y + "px 0px";
+        }
+
+        if (size) {
+            img.style.width = size.x + 'px';
+            img.style.height = size.y + 'px';
+        }
+    },
+
+});

src/utils/leaflet-rotate/src/layer/marker/Marker.js

@@ -0,0 +1,138 @@
+/**
+ * L.Handler.MarkerDrag
+ */
+var markerDragProto;
+
+var MarkerDrag = {
+
+    _onDragStart: function() {
+        if (!this._marker._map._rotate) {
+            return markerDragProto._onDragStart.call(this)
+        }
+        this._draggable.updateMapBearing(this._marker._map._bearing);
+    },
+
+    _onDrag: function(e) {
+        var marker = this._marker,
+            // TODO: use markerDragProto._onDrag
+            rotated_marker = marker.options.rotation || marker.options.rotateWithView,
+            shadow = marker._shadow,
+            iconPos = L.DomUtil.getPosition(marker._icon);
+
+        // TODO: use markerDragProto._onDrag
+        // update shadow position
+        if (!rotated_marker && shadow) {
+            L.DomUtil.setPosition(shadow, iconPos);
+        }
+
+        // TODO: use markerDragProto._onDrag
+        if (marker._map._rotate) {
+            // Reverse calculation from mapPane coordinates to rotatePane coordinates
+            iconPos = marker._map.mapPanePointToRotatedPoint(iconPos);
+        }
+        var latlng = marker._map.layerPointToLatLng(iconPos);
+
+        marker._latlng = latlng;
+        e.latlng = latlng;
+        e.oldLatLng = this._oldLatLng;
+
+        // TODO: use markerDragProto._onDrag
+        if (rotated_marker) marker.setLatLng(latlng); // use `setLatLng` to presisit rotation. low efficiency
+        else marker.fire('move', e); // `setLatLng` will trig 'move' event. we imitate here.
+
+        // @event drag: Event
+        // Fired repeatedly while the user drags the marker.
+        marker
+            .fire('drag', e);
+    },
+
+    _onDragEnd: function(e) {
+        if (this._marker._map._rotate) {
+            this._marker.update();
+        }
+        markerDragProto._onDragEnd.call(this, e);
+    },
+
+};
+
+/**
+ * L.Marker
+ */
+const markerProto = L.extend({}, L.Marker.prototype);
+
+L.Marker.mergeOptions({
+
+    // @option rotation: Number = 0
+    // Rotation of this marker in rad
+    rotation: 0,
+
+    // @option rotateWithView: Boolean = false
+    // Rotate this marker when map rotates
+    rotateWithView: false,
+
+});
+
+L.Marker.include({
+
+    getEvents: function() {
+        return L.extend(markerProto.getEvents.call(this), { rotate: this.update });
+    },
+
+    onAdd: function(map) {
+        markerProto.onAdd.call(this, map);
+        map.on('rotate', this.update, this);
+    },
+
+    _initInteraction: function() {
+        var ret = markerProto._initInteraction.call(this);
+        if (this.dragging && this.dragging.enabled() && this._map && this._map._rotate) {
+            // L.Handler.MarkerDrag is used internally by L.Marker to make the markers draggable
+            markerDragProto = markerDragProto || Object.getPrototypeOf(this.dragging);
+            this.dragging._onDragStart = MarkerDrag._onDragStart.bind(this.dragging);
+            this.dragging._onDrag = MarkerDrag._onDrag.bind(this.dragging);
+            this.dragging._onDragEnd = MarkerDrag._onDragEnd.bind(this.dragging);
+            this.dragging.disable();
+            this.dragging.enable();
+        }
+        return ret;
+    },
+
+    _setPos: function(pos) {
+
+        // TODO: use markerProto._setPos
+        if (this._map._rotate) {
+            pos = this._map.rotatedPointToMapPanePoint(pos);
+        }
+
+        // TODO: use markerProto._setPos
+        var bearing = this.options.rotation || 0;
+        if (this.options.rotateWithView) {
+            bearing += this._map._bearing;
+        }
+
+        // TODO: use markerProto._setPos
+        L.DomUtil.setPosition(this._icon, pos, bearing, pos);
+
+        // TODO: use markerProto._setPos
+        if (this._shadow) {
+            L.DomUtil.setPosition(this._shadow, pos, bearing, pos);
+        }
+
+        this._zIndex = pos.y + this.options.zIndexOffset;
+
+        this._resetZIndex();
+    },
+
+    _updateZIndex: function(offset) {
+        if (!this._map._rotate) {
+            return markerProto._updateZIndex.call(this, offset)
+        }
+        this._icon.style.zIndex = Math.round(this._zIndex + offset);
+    },
+
+    setRotation: function(rotation) {
+        this.options.rotation = rotation;
+        this.update();
+    },
+
+});

src/utils/leaflet-rotate/src/layer/tile/GridLayer.js

@@ -0,0 +1,39 @@
+/**
+ * L.GridLayer
+ */
+const gridLayerProto = L.extend({}, L.GridLayer.prototype);
+
+L.GridLayer.include({
+
+    getEvents: function() {
+        var events = gridLayerProto.getEvents.call(this);
+        if (this._map._rotate && !this.options.updateWhenIdle) {
+            if (!this._onRotate) {
+                this._onRotate = L.Util.throttle(this._onMoveEnd, this.options.updateInterval, this);
+            }
+            events.rotate = this._onRotate;
+        }
+        return events;
+    },
+
+    _getTiledPixelBounds: function(center) {
+        if (!this._map._rotate) {
+            return gridLayerProto._getTiledPixelBounds.call(this, center);
+        }
+
+        var map = this._map,
+            mapZoom = map._animatingZoom ? Math.max(map._animateToZoom, map.getZoom()) : map.getZoom(),
+            scale = map.getZoomScale(mapZoom, this._tileZoom),
+            pixelCenter = map.project(center, this._tileZoom).floor(),
+            size = map.getSize(),
+            halfSize = new L.Bounds([
+                map.containerPointToLayerPoint([0, 0]).floor(),
+                map.containerPointToLayerPoint([size.x, 0]).floor(),
+                map.containerPointToLayerPoint([0, size.y]).floor(),
+                map.containerPointToLayerPoint([size.x, size.y]).floor()
+            ]).getSize().divideBy(scale * 2);
+
+        return new L.Bounds(pixelCenter.subtract(halfSize), pixelCenter.add(halfSize));
+    },
+
+});

src/utils/leaflet-rotate/src/layer/vector/Canvas.js

@@ -0,0 +1,25 @@
+/**
+ * L.Canvas
+ */
+const canvasProto = L.extend({}, L.Canvas.prototype);
+
+L.Canvas.include({
+
+    onAdd: function() {
+        canvasProto.onAdd.call(this);
+        // When rotating the canvas itself, it is cleared by some weird reason, so redraw.
+        this._map.on('rotate', this._redraw, this);
+    },
+
+    onRemove: function() {
+        canvasProto.onRemove.call(this);
+        this._map.off('rotate', this._redraw, this);
+    },
+
+    _update: function() {
+        canvasProto._update.call(this);
+        // Tell paths to redraw themselves
+        this.fire('update')
+    },
+
+});

src/utils/leaflet-rotate/src/layer/vector/Renderer.js

@@ -0,0 +1,60 @@
+/**
+ * L.Renderer
+ */
+const rendererProto = L.extend({}, L.Renderer.prototype);
+
+L.Renderer.include({
+
+    onAdd: function() {
+        rendererProto.onAdd.call(this);
+        // this._map.on('rotate', this._update, this);
+    },
+
+    onRemove: function() {
+        rendererProto.onRemove.call(this);
+        // this._map.off('rotate', this._update, this);
+    },
+
+    _updateTransform: function(center, zoom) {
+        if (!this._map._rotate) {
+            return rendererProto._updateTransform.call(this, center, zoom);
+        }
+        var scale = this._map.getZoomScale(zoom, this._zoom),
+            offset = this._map._latLngToNewLayerPoint(this._topLeft, zoom, center);
+        if (L.Browser.any3d) {
+            L.DomUtil.setTransform(this._container, offset, scale);
+        } else {
+            L.DomUtil.setPosition(this._container, offset);
+        }
+    },
+
+    _update: function() {
+        if (!this._map._rotate) {
+            return rendererProto._update.call(this);
+        }
+        // Update pixel bounds of renderer container (for positioning/sizing/clipping later)
+        // Subclasses are responsible of firing the 'update' event.
+        var p = this.options.padding,
+            map = this._map,
+            size = this._map.getSize(),
+            padMin = size.multiplyBy(-p),
+            padMax = size.multiplyBy(1 + p),
+            //// TODO: Somehow refactor this out into map.something() - the code is
+            ////   pretty much the same as in GridLayer.
+            clip = new L.Bounds([
+                map.containerPointToLayerPoint([padMin.x, padMin.y]).floor(),
+                map.containerPointToLayerPoint([padMin.x, padMax.y]).floor(),
+                map.containerPointToLayerPoint([padMax.x, padMin.y]).floor(),
+                map.containerPointToLayerPoint([padMax.x, padMax.y]).floor()
+            ]);
+        //min = this._map.containerPointToLayerPoint(size.multiplyBy(-p)).round();
+
+        this._bounds = clip;
+        // this._topLeft = clip.min;
+        this._topLeft = this._map.layerPointToLatLng(clip.min);
+
+        this._center = this._map.getCenter();
+        this._zoom = this._map.getZoom();
+    },
+
+});

src/utils/leaflet-rotate/src/layer/vector/SVG.js

@@ -0,0 +1,15 @@
+/**
+ * L.SVG
+ */
+const svgProto = L.extend({}, L.SVG.prototype);
+
+L.SVG.include({
+
+    _update: function() {
+        svgProto._update.call(this);
+        if (this._map._rotate) {
+            this.fire('update');
+        }
+    },
+
+});

src/utils/leaflet-rotate/src/map/Map.js

@@ -0,0 +1,235 @@
+/**
+ * L.Map
+ */
+const mapProto = L.extend({}, L.Map.prototype);
+
+L.Map.mergeOptions({ rotate: false, bearing: 0, });
+
+L.Map.include({
+
+    initialize: function(id, options) { // (HTMLElement or String, Object)
+        if (options.rotate) {
+            this._rotate = true;
+            this._bearing = 0;
+        }
+        mapProto.initialize.call(this, id, options);
+        if(this.options.rotate){
+          this.setBearing(this.options.bearing);
+        }
+    },
+
+    // createPane: function(name, container) {
+    //     if (!this._rotate || name == 'mapPane') {
+    //         return mapProto.createPane.call(this, name, container);
+    //     }
+    //     // init "rotatePane"
+    //     if (!this._rotatePane) {
+    //         // this._pivot = this.getSize().divideBy(2);
+    //         this._rotatePane = mapProto.createPane.call(this, 'rotatePane', this._mapPane);
+    //         L.DomUtil.setPosition(this._rotatePane, new L.Point(0, 0), this._bearing, this._pivot);
+    //     }
+    //     return mapProto.createPane.call(this, name, container || this._rotatePane);
+    // },
+
+    containerPointToLayerPoint: function(point) { // (Point)
+        if (!this._rotate) {
+            return mapProto.containerPointToLayerPoint.call(this, point);
+        }
+        return L.point(point)
+            .subtract(this._getMapPanePos())
+            .rotateFrom(-this._bearing, this._getRotatePanePos())
+            .subtract(this._getRotatePanePos());
+    },
+
+    getBounds: function() {
+        if (!this._rotate) {
+            return mapProto.getBounds.call(this);
+        }
+        var size = this.getSize();
+        var topleft = this.layerPointToLatLng(this.containerPointToLayerPoint([0, 0])),
+            topright = this.layerPointToLatLng(this.containerPointToLayerPoint([size.x, 0])),
+            bottomright = this.layerPointToLatLng(this.containerPointToLayerPoint([size.x, size.y])),
+            bottomleft = this.layerPointToLatLng(this.containerPointToLayerPoint([0, size.y]));
+
+        // Use LatLngBounds' build-in constructor that automatically extends the bounds to fit the passed points
+        return new L.LatLngBounds([topleft, topright, bottomright, bottomleft]);
+    },
+
+    layerPointToContainerPoint: function(point) { // (Point)
+        if (!this._rotate) {
+            return mapProto.layerPointToContainerPoint.call(this, point);
+        }
+        return L.point(point)
+            .add(this._getRotatePanePos())
+            .rotateFrom(this._bearing, this._getRotatePanePos())
+            .add(this._getMapPanePos());
+    },
+
+    // Rotation methods
+    // setBearing will work with just the 'theta' parameter.
+    setBearing: function(theta) {
+        if (!L.Browser.any3d || !this._rotate) { return; }
+
+        var rotatePanePos = this._getRotatePanePos();
+        var halfSize = this.getSize().divideBy(2);
+        this._pivot = this._getMapPanePos().clone().multiplyBy(-1).add(halfSize);
+
+        rotatePanePos = rotatePanePos.rotateFrom(-this._bearing, this._pivot);
+
+        this._bearing = theta * L.DomUtil.DEG_TO_RAD; // TODO: mod 360
+        this._rotatePanePos = rotatePanePos.rotateFrom(this._bearing, this._pivot);
+
+        L.DomUtil.setPosition(this._rotatePane, rotatePanePos, this._bearing, this._pivot);
+
+        this.fire('rotate');
+    },
+
+    getBearing: function() {
+        return this._bearing * L.DomUtil.RAD_TO_DEG;
+    },
+
+    _initPanes: function() {
+        var panes = this._panes = {};
+        this._paneRenderers = {};
+
+        // @section
+        //
+        // Panes are DOM elements used to control the ordering of layers on the map. You
+        // can access panes with [`map.getPane`](#map-getpane) or
+        // [`map.getPanes`](#map-getpanes) methods. New panes can be created with the
+        // [`map.createPane`](#map-createpane) method.
+        //
+        // Every map has the following default panes that differ only in zIndex.
+        //
+        // @pane mapPane: HTMLElement = 'auto'
+        // Pane that contains all other map panes
+
+        this._mapPane = this.createPane('mapPane', this._container);
+        L.DomUtil.setPosition(this._mapPane, new L.Point(0, 0));
+
+        if (this._rotate) {
+            this._rotatePane = this.createPane('rotatePane', this._mapPane);
+            this._norotatePane = this.createPane('norotatePane', this._mapPane);
+
+            // @pane tilePane: HTMLElement = 2
+            // Pane for tile layers
+            this.createPane('tilePane', this._rotatePane);
+            // @pane overlayPane: HTMLElement = 4
+            // Pane for overlays like polylines and polygons
+            this.createPane('overlayPane', this._rotatePane);
+
+            // @pane shadowPane: HTMLElement = 5
+            // Pane for overlay shadows (e.g. marker shadows)
+            this.createPane('shadowPane', this._norotatePane);
+            // @pane markerPane: HTMLElement = 6
+            // Pane for marker icons
+            this.createPane('markerPane', this._norotatePane);
+            // @pane tooltipPane: HTMLElement = 650
+            // Pane for tooltips.
+            this.createPane('tooltipPane', this._norotatePane);
+            // @pane popupPane: HTMLElement = 700
+            // Pane for popups.
+            this.createPane('popupPane', this._norotatePane);
+        } else {
+            // @pane tilePane: HTMLElement = 2
+            // Pane for tile layers
+            this.createPane('tilePane');
+            // @pane overlayPane: HTMLElement = 4
+            // Pane for overlays like polylines and polygons
+            this.createPane('overlayPane');
+            // @pane shadowPane: HTMLElement = 5
+            // Pane for overlay shadows (e.g. marker shadows)
+            this.createPane('shadowPane');
+            // @pane markerPane: HTMLElement = 6
+            // Pane for marker icons
+            this.createPane('markerPane');
+            // @pane tooltipPane: HTMLElement = 650
+            // Pane for tooltips.
+            this.createPane('tooltipPane');
+            // @pane popupPane: HTMLElement = 700
+            // Pane for popups.
+            this.createPane('popupPane');
+        }
+
+        if (!this.options.markerZoomAnimation) {
+            L.DomUtil.addClass(panes.markerPane, 'leaflet-zoom-hide');
+            L.DomUtil.addClass(panes.shadowPane, 'leaflet-zoom-hide');
+        }
+    },
+
+    // @method rotatedPointToMapPanePoint(point: Point): Point
+    // Converts a coordinate from the rotated pane reference system
+    // to the reference system of the not rotated map pane.
+    rotatedPointToMapPanePoint: function(point) {
+        return L.point(point).rotate(this._bearing)._add(this._getRotatePanePos());
+    },
+
+    // @method mapPanePointToRotatedPoint(point: Point): Point
+    // Converts a coordinate from the not rotated map pane reference system
+    // to the reference system of the rotated pane.
+    mapPanePointToRotatedPoint: function(point) {
+        return L.point(point)._subtract(this._getRotatePanePos()).rotate(-this._bearing);
+    },
+
+    // offset of the specified place to the current center in pixels
+    _getCenterOffset: function(latlng) {
+        var centerOffset = mapProto._getCenterOffset.call(this, latlng);
+        if (this._rotate) {
+            centerOffset = centerOffset.rotate(this._bearing);
+        }
+        return centerOffset;
+    },
+
+    _getRotatePanePos: function() {
+        return this._rotatePanePos || new L.Point(0, 0);
+    },
+
+    _getNewPixelOrigin: function(center, zoom) {
+        var viewHalf = this.getSize()._divideBy(2);
+        if (!this._rotate) {
+            mapProto._getNewPixelOrigin.call(this, center, zoom);
+        }
+        return this.project(center, zoom)
+            .rotate(this._bearing)
+            ._subtract(viewHalf)
+            ._add(this._getMapPanePos())
+            ._add(this._getRotatePanePos())
+            .rotate(-this._bearing)
+            ._round();
+    },
+
+    _handleGeolocationResponse: function(pos) {
+        var lat = pos.coords.latitude,
+            lng = pos.coords.longitude,
+            // TODO: use mapProto._handleGeolocationResponse
+            hdg = pos.coords.heading,
+            latlng = new L.LatLng(lat, lng),
+            bounds = latlng.toBounds(pos.coords.accuracy),
+            options = this._locateOptions;
+
+        if (options.setView) {
+            var zoom = this.getBoundsZoom(bounds);
+            this.setView(latlng, options.maxZoom ? Math.min(zoom, options.maxZoom) : zoom);
+        }
+
+        var data = {
+            latlng: latlng,
+            bounds: bounds,
+            timestamp: pos.timestamp,
+            // TODO: use mapProto._handleGeolocationResponse
+            heading: hdg
+        };
+
+        for (var i in pos.coords) {
+            if (typeof pos.coords[i] === 'number') {
+                data[i] = pos.coords[i];
+            }
+        }
+
+        // @event locationfound: LocationEvent
+        // Fired when geolocation (using the [`locate`](#map-locate) method)
+        // went successfully.
+        this.fire('locationfound', data);
+    },
+
+});

src/utils/leaflet-rotate/src/map/handler/CompassBearing.js

@@ -0,0 +1,41 @@
+/*
+ * L.Map.CompassBearing will rotate the map according to a smartphone's compass.
+ */
+
+L.Map.CompassBearing = L.Handler.extend({
+
+    initialize: function(map) {
+        if (!window.DeviceOrientationEvent) {
+            this._capable = false;
+            return;
+        }
+        this._capable = true;
+        this._map = map;
+
+        this._throttled = L.Util.throttle(this._onDeviceOrientation, 1000, this);
+    },
+
+    addHooks: function() {
+        if (this._capable && this._map._rotate) {
+            L.DomEvent.on(window, 'deviceorientation', this._throttled, this);
+        }
+    },
+
+    removeHooks: function() {
+        if (this._capable && this._map._rotate) {
+            L.DomEvent.off(window, 'deviceorientation', this._throttled, this);
+        }
+    },
+
+    _onDeviceOrientation: function(event) {
+        if (event.alpha !== null) {
+            this._map.setBearing(event.alpha - window.orientation);
+        }
+    },
+
+});
+
+// @section Handlers
+// @property compassBearing: Handler
+// Compass bearing handler.
+L.Map.addInitHook('addHandler', 'compassBearing', L.Map.CompassBearing);

src/utils/leaflet-rotate/src/map/handler/ContainerMutation.js

@@ -0,0 +1,53 @@
+/*
+ * L.Handler.ContainerMutation triggers `invalidateResize` when the map's DOM container mutates.
+ */
+
+// @namespace Map
+// @section Interaction Options
+L.Map.mergeOptions({
+
+    // @option trackContainerMutation: Boolean = false
+    // Whether the map uses [mutation observers](https://developer.mozilla.org/docs/Web/API/MutationObserver)
+    // to detect changes in its container and trigger `invalidateSize`. Disabled
+    // by default due to support not being available in all web browsers.
+    trackContainerMutation: false
+
+});
+
+L.Map.ContainerMutation = L.Handler.extend({
+
+    addHooks: function() {
+        if (!L.Browser.mutation) {
+            return;
+        }
+
+        if (!this._observer) {
+            this._observer = new MutationObserver(L.Util.bind(this._onMutation, this));
+        }
+
+        this._observer.observe(this._map.getContainer(), {
+            childList: false,
+            attributes: true,
+            characterData: false,
+            subtree: false,
+            attributeFilter: ['style']
+        });
+    },
+
+    removeHooks: function() {
+        if (!L.Browser.mutation) {
+            return;
+        }
+        this._observer.disconnect();
+    },
+
+    _onMutation: function() {
+        this._map.invalidateSize();
+    },
+
+});
+
+// @section Handlers
+// @property containerMutation: Handler
+// Container mutation handler (disabled unless [`trackContainerMutation`](#map-trackcontainermutation) is set).
+L.Map.addInitHook('addHandler', 'trackContainerMutation', L.Map.ContainerMutation);

src/utils/leaflet-rotate/src/map/handler/ShiftKeyRotate.js

@@ -0,0 +1,52 @@
+/*
+ * L.Handler.ShiftKeyRotate is used by L.Map to add shift-wheel rotation.
+ */
+
+// @namespace Map
+// @section Interaction Options
+L.Map.mergeOptions({
+
+    // @section ShiftKey interaction options
+    // @option shiftKeyRotate: Boolean|String = *
+    // Whether the map can be rotated with a shit-wheel rotation
+    shiftKeyRotate: true,
+
+});
+
+L.Map.ShiftKeyRotate = L.Handler.extend({
+
+    addHooks: function() {
+        L.DomEvent.on(this._map._container, "wheel", this._handleShiftScroll, this);
+        // this._map.shiftKeyRotate.enable();
+        this._map.shiftKeyRotate.rotate = true;
+    },
+
+    removeHooks: function() {
+        L.DomEvent.off(this._map._container, "wheel", this._handleShiftScroll, this);
+        this._map.shiftKeyRotate.rotate = false;
+    },
+
+    _handleShiftScroll: function(e) {
+        if (e.shiftKey) {
+            e.preventDefault();
+            this._map.scrollWheelZoom.disable();
+            this._map.setBearing((this._map._bearing * L.DomUtil.RAD_TO_DEG) + Math.sign(e.deltaY) * 5);
+        } else {
+            this._map.scrollWheelZoom.enable();
+        }
+    },
+
+});
+
+// @section Handlers
+// @property touchZoom: Handler
+// Touch rotate handler.
+L.Map.addInitHook('addHandler', 'shiftKeyRotate', L.Map.ShiftKeyRotate);
+
+// decrease "scrollWheelZoom" handler priority over "shiftKeyRotate" handler
+L.Map.addInitHook(function() {
+    if (this.scrollWheelZoom.enabled() && this.shiftKeyRotate.enabled()) {
+        this.scrollWheelZoom.disable();
+        this.scrollWheelZoom.enable();
+    }
+});

src/utils/leaflet-rotate/src/map/handler/TouchGestures.js

@@ -0,0 +1,162 @@
+/*
+ * L.Handler.TouchGestures is both TouchZoom plus TouchRotate.
+ */
+
+// @namespace Map
+// @section Interaction Options
+L.Map.mergeOptions({
+
+    // @option bounceAtZoomLimits: Boolean = true
+    // Set it to false if you don't want the map to zoom beyond min/max zoom
+    // and then bounce back when pinch-zooming.
+    bounceAtZoomLimits: true,
+
+});
+
+L.Map.TouchGestures = L.Handler.extend({
+
+    initialize: function(map) {
+        this._map = map;
+        this.rotate = !!this._map.options.touchRotate;
+        this.zoom = !!this._map.options.touchZoom;
+    },
+
+    addHooks: function() {
+        L.DomEvent.on(this._map._container, 'touchstart', this._onTouchStart, this);
+    },
+
+    removeHooks: function() {
+        L.DomEvent.off(this._map._container, 'touchstart', this._onTouchStart, this);
+    },
+
+    _onTouchStart: function(e) {
+        var map = this._map;
+
+        if (!e.touches || e.touches.length !== 2 || map._animatingZoom || this._zooming || this._rotating) { return; }
+
+        var p1 = map.mouseEventToContainerPoint(e.touches[0]),
+            p2 = map.mouseEventToContainerPoint(e.touches[1]),
+            vector = p1.subtract(p2);
+
+        this._centerPoint = map.getSize()._divideBy(2);
+        this._startLatLng = map.containerPointToLatLng(this._centerPoint);
+
+        if (this.zoom) {
+            if (map.options.touchZoom !== 'center') {
+                this._pinchStartLatLng = map.containerPointToLatLng(p1.add(p2)._divideBy(2));
+            }
+            this._startDist = p1.distanceTo(p2);
+            this._startZoom = map.getZoom();
+            this._zooming = true;
+        } else {
+            this._zooming = false;
+        }
+
+        if (this.rotate) {
+            this._startTheta = Math.atan(vector.x / vector.y);
+            this._startBearing = map.getBearing();
+            if (vector.y < 0) { this._startBearing += 180; }
+            this._rotating = true;
+        } else {
+            this._rotating = false;
+        }
+
+        this._moved = false;
+
+        map.stop();
+
+        L.DomEvent
+            .on(document, 'touchmove', this._onTouchMove, this)
+            .on(document, 'touchend', this._onTouchEnd, this);
+
+        L.DomEvent.preventDefault(e);
+    },
+
+    _onTouchMove: function(e) {
+        if (!e.touches || e.touches.length !== 2 || !(this._zooming || this._rotating)) { return; }
+
+        var map = this._map,
+            p1 = map.mouseEventToContainerPoint(e.touches[0]),
+            p2 = map.mouseEventToContainerPoint(e.touches[1]),
+            vector = p1.subtract(p2),
+            scale = p1.distanceTo(p2) / this._startDist,
+            delta;
+
+        if (this._rotating) {
+            var theta = Math.atan(vector.x / vector.y);
+            var bearingDelta = (theta - this._startTheta) * L.DomUtil.RAD_TO_DEG;
+            if (vector.y < 0) { bearingDelta += 180; }
+            if (bearingDelta) {
+                /// TODO: The pivot should be the last touch point, but zoomAnimation manages to
+                ///   overwrite the rotate pane position. Maybe related to #3529.
+                map.setBearing(this._startBearing - bearingDelta);
+            }
+        }
+
+        if (this._zooming) {
+            this._zoom = map.getScaleZoom(scale, this._startZoom);
+
+            if (!map.options.bounceAtZoomLimits && (
+                    (this._zoom < map.getMinZoom() && scale < 1) ||
+                    (this._zoom > map.getMaxZoom() && scale > 1))) {
+                this._zoom = map._limitZoom(this._zoom);
+            }
+
+            if (map.options.touchZoom === 'center') {
+                this._center = this._startLatLng;
+                if (scale === 1) { return; }
+            } else {
+                // Get delta from pinch to center, so centerLatLng is delta applied to initial pinchLatLng
+                delta = p1._add(p2)._divideBy(2)._subtract(this._centerPoint);
+                if (scale === 1 && delta.x === 0 && delta.y === 0) { return; }
+
+                var alpha = -map.getBearing() * L.DomUtil.DEG_TO_RAD;
+
+                this._center = map.unproject(map.project(this._pinchStartLatLng).subtract(delta.rotate(alpha)));
+            }
+
+        }
+
+        if (!this._moved) {
+            map._moveStart(true);
+            this._moved = true;
+        }
+
+        L.Util.cancelAnimFrame(this._animRequest);
+
+        var moveFn = L.bind(map._move, map, this._center, this._zoom, { pinch: true, round: false });
+        this._animRequest = L.Util.requestAnimFrame(moveFn, this, true);
+
+        L.DomEvent.preventDefault(e);
+    },
+
+    _onTouchEnd: function() {
+        if (!this._moved || !this._zooming) {
+            this._zooming = false;
+            return;
+        }
+
+        this._zooming = false;
+        this._rotating = false;
+        L.Util.cancelAnimFrame(this._animRequest);
+
+        L.DomEvent
+            .off(document, 'touchmove', this._onTouchMove)
+            .off(document, 'touchend', this._onTouchEnd);
+
+        if (this.zoom) {
+            // Pinch updates GridLayers' levels only when snapZoom is off, so snapZoom becomes noUpdate.
+            if (this._map.options.zoomAnimation) {
+                this._map._animateZoom(this._center, this._map._limitZoom(this._zoom), true, this._map.options.snapZoom);
+            } else {
+                this._map._resetView(this._center, this._map._limitZoom(this._zoom));
+            }
+        }
+    },
+
+});
+
+// @section Handlers
+// @property touchGestures: Handler
+// Touch gestures handler.
+L.Map.addInitHook('addHandler', 'touchGestures', L.Map.TouchGestures);

src/utils/leaflet-rotate/src/map/handler/TouchRotate.js

@@ -0,0 +1,32 @@
+/*
+ * L.Handler.TouchRotate is used by L.Map to add two-finger rotation gestures.
+ */
+
+// @namespace Map
+// @section Interaction Options
+L.Map.mergeOptions({
+
+    // @section Touch interaction options
+    // @option touchRotate: Boolean|String = *
+    // Whether the map can be rotated with a two-finger rotation gesture
+    touchRotate: false,
+
+});
+
+L.Map.TouchRotate = L.Handler.extend({
+
+    addHooks: function() {
+        this._map.touchGestures.enable();
+        this._map.touchGestures.rotate = true;
+    },
+
+    removeHooks: function() {
+        this._map.touchGestures.rotate = false;
+    },
+
+});
+
+// @section Handlers
+// @property touchZoom: Handler
+// Touch rotate handler.
+L.Map.addInitHook('addHandler', 'touchRotate', L.Map.TouchRotate);

src/utils/leaflet-rotate/src/map/handler/TouchZoom.js

@@ -0,0 +1,38 @@
+/*
+ * L.Handler.TouchZoom is used by L.Map to add pinch zoom on supported mobile browsers.
+ */
+
+// @namespace Map
+// @section Interaction Options
+L.Map.mergeOptions({
+
+    // @section Touch interaction options
+    // @option touchZoom: Boolean|String = *
+    // Whether the map can be zoomed by touch-dragging with two fingers. If
+    // passed `'center'`, it will zoom to the center of the view regardless of
+    // where the touch events (fingers) were. Enabled for touch-capable web
+    // browsers except for old Androids.
+    touchZoom: L.Browser.touch && !L.Browser.android23,
+
+    bounceAtZoomLimits: false,
+});
+
+L.Map.TouchZoom = L.Handler.extend({
+
+    addHooks: function() {
+        L.DomUtil.addClass(this._map._container, 'leaflet-touch-zoom');
+        this._map.touchGestures.enable();
+        this._map.touchGestures.zoom = true;
+    },
+
+    removeHooks: function() {
+        L.DomUtil.removeClass(this._map._container, 'leaflet-touch-zoom');
+        this._map.touchGestures.zoom = false;
+    },
+
+});
+
+// @section Handlers
+// @property touchZoom: Handler
+// Touch zoom handler.
+L.Map.addInitHook('addHandler', 'touchZoom', L.Map.TouchZoom);

src/utils/leaflet.polygon.gradient.js

@@ -0,0 +1,335 @@
+/* eslint-disable */
+(function (factory, window) {
+
+    // define an AMD module that relies on 'leaflet'
+    if (typeof define === 'function' && define.amd) {
+        define(['leaflet'], factory);
+
+        // define a Common JS module that relies on 'leaflet'
+    } else if (typeof exports === 'object') {
+        module.exports = factory(require('leaflet'));
+    }
+
+    // attach your plugin to the global 'L' letiable
+    if (typeof window !== 'undefined' && window.L) {
+        window.L.ArrowPath = factory(L);
+    }
+}(function (L) {
+
+    L.SVG.include({
+        _updateStyle: function (layer) {
+
+            let path = layer._path,
+                options = layer.options;
+
+            if (!path) {
+                return;
+            }
+
+            if (options.stroke) {
+                path.setAttribute('stroke', options.color);
+                path.setAttribute('stroke-opacity', options.opacity);
+                path.setAttribute('stroke-width', options.weight);
+                path.setAttribute('stroke-linecap', options.lineCap);
+                path.setAttribute('stroke-linejoin', options.lineJoin);
+
+                if (options.dashArray) {
+                    path.setAttribute('stroke-dasharray', options.dashArray);
+                } else {
+                    path.removeAttribute('stroke-dasharray');
+                }
+
+                if (options.dashOffset) {
+                    path.setAttribute('stroke-dashoffset', options.dashOffset);
+                } else {
+                    path.removeAttribute('stroke-dashoffset');
+                }
+            } else {
+                path.setAttribute('stroke', 'none');
+            }
+
+            if (options.fill) {
+                this._polyFill(layer, path, options);
+                path.setAttribute('fill-opacity', options.fillOpacity);
+                path.setAttribute('fill-rule', options.fillRule || 'evenodd');
+            } else {
+                path.setAttribute('fill', 'none');
+            }
+        },
+        _polyFill(layer, path, options) {
+            let fillColor = options.fillColor;
+            let isLinearGradient = fillColor.match(/^linearGradient\(/);
+            let isRadialGradient = fillColor.match(/^radialGradient\(/);
+
+            if (fillColor.match(/^#/)) {
+                path.setAttribute('fill', fillColor || options.color);
+            } else if (isLinearGradient || isRadialGradient) {
+                let gradientOpt = this._addGradient(fillColor);
+                if (isLinearGradient) {
+                    this._addLinearGradient(layer, gradientOpt);
+                } else {
+                    this._addRadialGradient(layer, gradientOpt);
+                }
+            } else if (fillColor.match(/^url\(/)) {
+                this._fillByImage(layer);
+            }
+        },
+        _addLinearGradient: function (layer, gradientOpt) {
+            let path = layer._path;
+            let colorStr = layer.options.fillColor;
+            let gradientId = 'gradient' + gradientOpt.index;
+
+            this._addDefs();
+
+            if (!gradientOpt.exist) {
+                let gradient = L.SVG.create('linearGradient');
+                gradient.setAttribute('id', gradientId);
+
+                let arrMap = this._getLinearProperties(colorStr, ['linearGradient(', ')']);
+                this._addStops(gradient, arrMap);
+
+                this._addAngle(gradient, arrMap.angle);
+
+                this._defs.appendChild(gradient);
+            }
+
+            path.setAttribute('fill', 'url(#' + gradientId + ')');
+        },
+        _addRadialGradient: function (layer, gradientOpt) {
+            let path = layer._path;
+            let colorStr = layer.options.fillColor;
+            let gradientId = 'gradient' + gradientOpt.index;
+
+            this._addDefs();
+
+            if (!gradientOpt.exist) {
+                let gradient = L.SVG.create('radialGradient');
+                gradient.setAttribute('id', gradientId);
+
+                let arrMap = this._getRadialProperties(colorStr, ['radialGradient(', ')']);
+                this._addStops(gradient, arrMap);
+
+                this._addAttribute(gradient, arrMap);
+                //
+                this._defs.appendChild(gradient);
+            }
+
+            path.setAttribute('fill', 'url(#' + gradientId + ')');
+        },
+        _addAttribute(gradient, arr) {
+            gradient.setAttribute('cx', arr.cx);
+            gradient.setAttribute('cy', arr.cy);
+            gradient.setAttribute('r', arr.r);
+            gradient.setAttribute('fx', arr.fx);
+            gradient.setAttribute('fy', arr.fy);
+        },
+
+        _getRadialProperties(colorStr, replaceArr) {
+            let string = colorStr;
+            for (let i = 0, l = replaceArr.length; i < l; i++) {
+                let str = replaceArr[i];
+                string = string.replace(str, '');
+            }
+            let arrays = string.split(/[\,]+/);
+            let colorArr = arrays.slice(5);
+            let resColors = [];
+            let resOffsets = [];
+            let offsetNum = 0;
+            for (let i = 0, l = colorArr.length; i < l; i++) {
+                let str = colorArr[i];
+                let opts = str.trim().split(/\s+/);
+                resColors.push(opts[0]);
+                if (opts.length > 1 || i === l - 1) {
+                    let offset;
+                    if (opts.length > 1) {
+                        offset = parseFloat(opts[1]);
+                    } else {
+                        offset = 100;
+                    }
+
+                    let len = resOffsets.length;
+                    if (offsetNum > 0) {
+                        let startNum = len - offsetNum - 1;
+                        let startVal = parseFloat(resOffsets[startNum]);
+                        let step = (offset - startVal) / (offsetNum + 1);
+                        for (let j = 1; j <= offsetNum; j++) {
+                            resOffsets[startNum + j] = startVal + step * j + '%';
+                        }
+                        offsetNum = 0;
+                    }
+                    resOffsets.push(offset + '%');
+                } else {
+                    if (i !== 0) {
+                        offsetNum = offsetNum + 1;
+                        resOffsets.push('');
+                    } else {
+                        resOffsets.push('0%');
+                    }
+                }
+            }
+            return {
+                cx: arrays[0].trim(),
+                cy: arrays[1].trim(),
+                r: arrays[2].trim(),
+                fx: arrays[3].trim(),
+                fy: arrays[4].trim(),
+                colors: resColors,
+                offsets: resOffsets
+            }
+        },
+        _addGradient(gradient) {
+            if (!this._gradientArray) {
+                this._gradientArray = [];
+            }
+            let gradientStr = gradient.split(/[\s\,\-\(\)]+/).join('');
+            let index = this._gradientArray.indexOf(gradientStr);
+            if (index > -1) {
+                return { index: index, exist: true }
+            }
+            this._gradientArray.push(gradientStr);
+            return { index: this._gradientArray.length - 1, exist: false }
+        },
+        _addDefs() {
+            if (!this._defs) {
+                this._defs = L.SVG.create('defs');
+                this._container.appendChild(this._defs);
+            }
+        },
+        _addAngle(gradient, angle) {
+            gradient.setAttribute('x1', '0');
+            gradient.setAttribute('y1', '0');
+            gradient.setAttribute('x2', '1');
+            gradient.setAttribute('y2', '0');
+            gradient.setAttribute('gradientTransform', 'rotate(' + angle.replace('deg', '') + ')');
+        },
+        _addStops(gradient, options) {
+            let colors = options.colors;
+            let offsets = options.offsets;
+            for (let i = 0, len = colors.length; i < len; i++) {
+                let stop = L.SVG.create('stop');
+                stop.setAttribute('offset', offsets[i]);
+                stop.setAttribute('stop-color', colors[i]);
+                gradient.appendChild(stop);
+            }
+        },
+        _getLinearProperties(colorStr, replaceArr) {
+            let string = colorStr;
+            for (let i = 0, l = replaceArr.length; i < l; i++) {
+                let str = replaceArr[i];
+                string = string.replace(str, '');
+            }
+            let arrays = string.split(/[\,]+/);
+            let colorArr = arrays.slice(1);
+            let resAngle = arrays[0].trim();
+            let resColors = [];
+            let resOffsets = [];
+            let offsetNum = 0;
+            for (let i = 0, l = colorArr.length; i < l; i++) {
+                let str = colorArr[i];
+                let opts = str.trim().split(/\s+/);
+                resColors.push(opts[0]);
+                if (opts.length > 1 || i === l - 1) {
+                    let offset;
+                    if (opts.length > 1) {
+                        offset = parseFloat(opts[1]);
+                    } else {
+                        offset = 100;
+                    }
+
+                    let len = resOffsets.length;
+                    if (offsetNum > 0) {
+                        let startNum = len - offsetNum - 1;
+                        let startVal = parseFloat(resOffsets[startNum]);
+                        let step = (offset - startVal) / (offsetNum + 1);
+                        for (let j = 1; j <= offsetNum; j++) {
+                            resOffsets[startNum + j] = startVal + step * j + '%';
+                        }
+                        offsetNum = 0;
+                    }
+                    resOffsets.push(offset + '%');
+                } else {
+                    if (i !== 0) {
+                        offsetNum = offsetNum + 1;
+                        resOffsets.push('');
+                    } else {
+                        resOffsets.push('0%');
+                    }
+                }
+            }
+            return {
+                angle: resAngle,
+                colors: resColors,
+                offsets: resOffsets
+            }
+        },
+
+        //借鉴自插件leaflet-polygon-fillPattern
+        _fillByImage: function (layer) {
+            let path = layer._path,
+                options = layer.options,
+                fill = options.fillColor;
+            this._addDefs();
+
+            let _img_url = fill.replace(/url\(+/, '').replace(/\)+/, '');/*.substring(4, fill.length - 1)*/
+            let _refOption = this._addRefId(_img_url);
+            let _ref_id = _img_url + _refOption.index;
+            if (!_refOption.exist) {
+                this._addPattern(_img_url, _ref_id, options);
+            }
+            path.setAttribute('fill', "url(#" + _ref_id + ")");
+        },
+        _addRefId(url) {
+            if (!this._imgUrls) {
+                this._imgUrls = [];
+            }
+            let index = this._imgUrls.indexOf(url);
+            if (index > -1) {
+                return { index: index, exist: true }
+            }
+            this._imgUrls.push(url);
+            return { index: this._imgUrls.length - 1, exist: false }
+        },
+        _addPattern(_img_url, _ref_id, options) {
+            let _im = new Image();
+            _im.src = _img_url;
+
+            let _p = L.SVG.create('pattern');
+            _p.setAttribute('id', _ref_id);
+            _p.setAttribute('x', '0');
+            _p.setAttribute('y', '0');
+            _p.setAttribute('patternUnits', 'userSpaceOnUse');
+            _p.setAttribute('width', '24');
+            _p.setAttribute('height', '24');
+
+            let _rect = L.SVG.create('rect');
+            _rect.setAttribute('width', 24);
+            _rect.setAttribute('height', 24);
+            _rect.setAttribute('x', 0);
+            _rect.setAttribute('x', 0);
+            _rect.setAttribute('fill', options.fillColor || options.color);
+
+            let _img = L.SVG.create('image');
+            _img.setAttribute('x', '0');
+            _img.setAttribute('y', '0');
+            _img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', _img_url);
+            _img.setAttribute('width', '24');
+            _img.setAttribute('height', '24');
+
+            _p.appendChild(_rect);
+            _p.appendChild(_img);
+
+            this._defs.appendChild(_p);
+
+            _im.onload = function () {
+                _p.setAttribute('width', _im.width);
+                _p.setAttribute('height', _im.height);
+                _img.setAttribute('width', _im.width);
+                _img.setAttribute('height', _im.height);
+            };
+        }
+
+    })
+
+}, window));
+
+

src/utils/leaflet.rotatedMarker.js

@@ -0,0 +1,62 @@
+(function () {
+  // save these original methods before they are overwritten
+  var proto_initIcon = L.Marker.prototype._initIcon;
+  var proto_setPos = L.Marker.prototype._setPos;
+
+  var oldIE = L.DomUtil.TRANSFORM === "msTransform";
+
+  L.Marker.addInitHook(function () {
+    var iconOptions = this.options.icon && this.options.icon.options;
+    var iconAnchor = iconOptions && this.options.icon.options.iconAnchor;
+    if (iconAnchor) {
+      iconAnchor = iconAnchor[0] + "px " + iconAnchor[1] + "px";
+    }
+    this.options.rotationOrigin =
+      this.options.rotationOrigin || iconAnchor || "center bottom";
+    this.options.rotationAngle = this.options.rotationAngle || 0;
+
+    // Ensure marker keeps rotated during dragging
+    this.on("drag", function (e) {
+      e.target._applyRotation();
+    });
+  });
+
+  L.Marker.include({
+    _initIcon: function () {
+      proto_initIcon.call(this);
+    },
+
+    _setPos: function (pos) {
+      proto_setPos.call(this, pos);
+      this._applyRotation();
+    },
+
+    _applyRotation: function () {
+      if (this.options.rotationAngle) {
+        this._icon.style[L.DomUtil.TRANSFORM + "Origin"] =
+          this.options.rotationOrigin;
+        if (oldIE) {
+          // for IE 9, use the 2D rotation
+          this._icon.style[L.DomUtil.TRANSFORM] =
+            "rotate(" + this.options.rotationAngle + "deg)";
+        } else {
+          // for modern browsers, prefer the 3D accelerated version
+          this._icon.style[L.DomUtil.TRANSFORM] +=
+            " rotateZ(" + this.options.rotationAngle + "deg)";
+        }
+      }
+    },
+
+    setRotationAngle: function (angle) {
+      this.options.rotationAngle = angle;
+      this.update();
+      return this;
+    },
+
+    setRotationOrigin: function (origin) {
+      this.options.rotationOrigin = origin;
+      this.update();
+      return this;
+    },
+  });
+})();

src/views/components/IndexModel/components/colorList.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="color-list">
+    <div class="list-item" v-for="(item, index) in colorListL" :key="index">
+      <div class="item-name">
+        <ColorCell :item="item" v-if="item.color" style="margin-right: 12px" />
+        <span>
+          {{ item.name }}
+          <span v-show="item.name == '户籍'"
+            >(空关{{ colorListL[2].house }}户)</span
+          >
+          <span v-show="item.name == '流动'"
+            >(空关{{ colorListL[6].house }}户)</span
+          >
+        </span>
+      </div>
+      <div class="item-value">
+        <span>{{ item.house }}</span>
+        <span> 户 </span>
+        <span>{{ item.person }}</span>
+        <span> 人 </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import ColorCell from "@/components/ColorCell";
+export default {
+  components: {
+    ColorCell,
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapGetters(["colorListL"]),
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.color-list {
+  margin-top: 10px;
+  height: 550px;
+  background: url("~@/assets/images/ui/colorList_bg.png");
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 25px;
+  padding-bottom: 23px;
+  .list-item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid rgba(0, 156, 255, 0.2);
+    .item-name {
+      display: flex;
+      align-items: center;
+      font-size: 15px;
+      color: #abc7ed;
+      font-family: "Alibaba-PuHuiTi-Regular.otf";
+    }
+    .item-value {
+      span:nth-child(odd) {
+        font-size: 16px;
+        color: #52ccff;
+        font-family: "DIN-Medium-2.otf";
+      }
+      span:nth-child(even) {
+        font-size: 14px;
+        color: #c9e1f5;
+      }
+    }
+  }
+  .list-item:nth-child(9) .item-value,
+  .list-item:nth-child(10) .item-value {
+    span:nth-child(odd) {
+      font-size: 16px;
+      color: #ffb400;
+      font-family: "DIN-Medium-2.otf";
+    }
+  }
+  .list-item:nth-child(9),
+  .list-item:nth-child(10) {
+    .item-name {
+      color: #fff;
+    }
+  }
+  .list-item:nth-child(10) {
+    border: 0;
+  }
+}
+</style>

src/views/components/IndexModel/components/pieChart.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="pie-chart">
+    <div class="tabLits">
+      <div
+        @click="handleClick(item.type, index)"
+        v-for="(item, index) in tabList"
+        :key="index"
+        :class="currentIndex == index ? 'currentIndex' : ''"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+    <div class="pie">
+      <div class="pie-title">目前数据更新情况</div>
+      <div id="pie-echarts"></div>
+      <div class="lable">
+        <span style="color: #ffb400">{{ pie.update }}</span> /
+        <span>{{ pie.total }}</span>
+        {{ currentIndex == 0 ? "户" : "人" }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+var echarts = require("echarts");
+import { mapGetters } from "vuex";
+export default {
+  computed: {
+    ...mapGetters(["pie", "queryParamsIndex"]),
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      tabList: [
+        { name: "住户", type: "house" },
+        { name: "居民", value: "person" },
+      ],
+    };
+  },
+  mounted() {
+    this.getPie("house");
+  },
+  watch: {
+    queryParamsIndex: {
+      handler(newVal, oldVal) {
+        this.getPie();
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    handleClick(type, index) {
+      if (this.currentIndex == index) return;
+      this.currentIndex = index;
+      this.getPie();
+    },
+
+    getPie() {
+      let queryParams = {
+        type: this.tabList[this.currentIndex].type,
+        shequId: this.queryParamsIndex.shequId,
+      };
+      this.$store.dispatch("GetPie", queryParams).then((res) => {
+        let percent = Math.trunc((this.pie.update / this.pie.total) * 100);
+        this.initPieEcharts(percent);
+      });
+    },
+
+    initPieEcharts(num) {
+      if (!num) {
+        num = 0;
+      }
+      var myChart = echarts.init(document.getElementById("pie-echarts"));
+      let angle = 0; //角度，用来做简单的动画效果的
+      let value = num; //图上角度数据
+      var option = {
+        title: {
+          text: "{a|" + value + "}{c|%}",
+          x: "center",
+          y: "center",
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 14,
+                color: "#ffffff",
+                fontWeight: "bold",
+              },
+              c: {
+                fontSize: 14,
+                color: "#ffffff",
+                fontWeight: "normal",
+              },
+            },
+          },
+        },
+        series: [
+          //内环
+          {
+            name: "",
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: function (params, api) {
+              return {
+                type: "arc",
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2.3) * 0.65,
+                  startAngle: ((0 + -angle) * Math.PI) / 180,
+                  endAngle: ((360 + -angle) * Math.PI) / 180,
+                },
+                style: {
+                  stroke: "#0CD3DB",
+                  fill: "transparent",
+                  lineWidth: 0.5,
+                },
+                silent: true,
+              };
+            },
+            data: [0],
+          },
+          //外环
+          {
+            name: "",
+            type: "pie",
+            radius: ["90%", "80%"],
+            silent: true,
+            clockwise: true,
+            startAngle: 90,
+            z: 0,
+            zlevel: 0,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            data: [
+              {
+                value: value,
+                name: "",
+                itemStyle: {
+                  normal: {
+                    //外环发光
+                    borderWidth: 0.5,
+                    shadowBlur: 10,
+                    borderColor: "#4bf3f9",
+                    shadowColor: "#9bfeff",
+                    color: {
+                      // 圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#4bf3f9", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#4bf3f9", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+              {
+                value: 100 - value,
+                name: "",
+                label: {
+                  normal: {
+                    show: false,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: "#173164",
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option, true);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.pie-chart {
+  margin-top: 10px;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  .tabLits {
+    height: 100%;
+    width: 25px;
+    border: 1px solid #086394;
+    border-radius: 6px;
+    overflow: hidden;
+    div {
+      cursor: pointer;
+      display: flex;
+      text-align: center;
+      align-items: center;
+      height: 50%;
+      font-size: 14px;
+      color: #007dc1;
+      font-family: "Alibaba-PuHuiTi-Regular.otf";
+    }
+    .currentIndex {
+      color: #fff;
+      font-weight: bold;
+      background: #086394;
+    }
+  }
+  .pie {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .pie-title {
+      font-size: 16px;
+      text-align: center;
+      color: #ffffff;
+      font-family: "Alibaba-PuHuiTi-Regular.otf";
+      text-shadow: 0 0 10px #278873, 0 0 10px #278873, 0 0 30px #278873,
+        0 0 50px #278873;
+    }
+    #pie-echarts {
+      flex: 1;
+      margin: 5px 0;
+      height: 70%;
+      width: 70%;
+    }
+    .lable {
+      text-align: center;
+      font-size: 14px;
+      color: #c9e1f5;
+      span {
+        font-family: "DIN-Regular-2.otf";
+      }
+    }
+  }
+}
+</style>

src/views/components/IndexModel/components/threeCell.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="three-cell">
+    <div class="cell-item">
+      <img src="@/assets/images/ui/icon_3.png" alt="" />
+      <div class="lable-value">
+        <div class="value-item">
+          <div class="value-data">{{ threeCell.houseTotal }}</div>
+          <div class="value-lable">总户数</div>
+        </div>
+        <div class="value-item" style="margin-left: 6px">
+          <div class="value-data">{{ threeCell.personTotal }}</div>
+          <div class="value-lable">人口数</div>
+        </div>
+      </div>
+    </div>
+    <div class="cell-item">
+      <img src="@/assets/images/ui/icon_1.png" alt="" />
+      <div class="value-item">
+        <div class="value-data">{{ threeCell.netTotal }}</div>
+        <div class="value-lable">网格总数</div>
+      </div>
+    </div>
+    <div class="cell-item">
+      <img src="@/assets/images/ui/icon_2.png" alt="" />
+      <div class="value-item">
+        <div class="value-data">{{ threeCell.buildingTotal }}</div>
+        <div class="value-lable">楼幢总数</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+  computed: {
+    ...mapGetters(["threeCell"]),
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.three-cell {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .cell-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    img {
+      display: block;
+      width: 60px;
+      height: 65px;
+    }
+    .lable-value {
+      display: flex;
+      align-items: center;
+      & > div {
+        flex: 1;
+      }
+    }
+    .value-item {
+      div {
+        text-align: center;
+      }
+      .value-data {
+        margin: 2px 0;
+        font-size: 18px;
+        color: #ffffff;
+        font-family: "DIN-Medium-2.otf";
+        text-shadow: 0 0 10px #278873, 0 0 10px #278873, 0 0 30px #278873,
+          0 0 50px #278873;
+      }
+      .value-lable {
+        font-size: 15px;
+        color: #30ecf9;
+        font-family: "Alibaba-PuHuiTi-Medium.otf";
+      }
+    }
+  }
+}
+</style>

src/views/components/IndexModel/left.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="model-left">
+    <introduceTitle title="社区概况" />
+    <div class="community-table">
+      <div class="table-row">
+        <div class="row-lable">地名</div>
+        <div class="row-value">{{ xiaoquIntroduce.intro.shequ.diming }}</div>
+      </div>
+      <div class="table-row">
+        <div class="row-lable">隶属</div>
+        <div class="row-value">{{ xiaoquIntroduce.intro.shequ.lishu }}</div>
+      </div>
+      <div class="table-row">
+        <div class="row-lable">行政代码</div>
+        <div class="row-value">{{ xiaoquIntroduce.intro.shequ.xzdaima }}</div>
+      </div>
+      <div class="table-row">
+        <div class="row-lable">身份证前6位</div>
+        <div class="row-value">{{ xiaoquIntroduce.intro.shequ.id6 }}</div>
+      </div>
+      <div class="table-row">
+        <div class="row-lable">长途区号</div>
+        <div class="row-value">{{ xiaoquIntroduce.intro.shequ.ctquhao }}</div>
+      </div>
+      <div class="table-row">
+        <div class="row-lable">邮政编码</div>
+        <div class="row-value">{{ xiaoquIntroduce.intro.shequ.youzheng }}</div>
+      </div>
+      <div class="table-row">
+        <div class="row-lable">车牌号码</div>
+        <div class="row-value">{{ xiaoquIntroduce.intro.shequ.chep }}</div>
+      </div>
+      <div class="table-row">
+        <div class="row-lable">行政级别</div>
+        <div class="row-value">{{ xiaoquIntroduce.intro.shequ.jibie }}</div>
+      </div>
+    </div>
+    <div class="introduce-content">
+      <div>{{ xiaoquIntroduce.intro.kaiguo.text || "暂无数据" }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import introduceTitle from "@/views/components/introduceTitle/subTtile.vue";
+import { mapGetters } from "vuex";
+export default {
+  components: { introduceTitle },
+
+  data() {
+    return {};
+  },
+  mounted() {},
+  computed: {
+    ...mapGetters(["xiaoquIntroduce"]),
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.model-left {
+  flex: 1;
+  padding: 25px 0;
+
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .community-table {
+    margin-top: 20px;
+    height: 290px;
+    border: 1px solid #1b4296;
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .table-row {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      font-family: "Alibaba-PuHuiTi-Regular.otf";
+      border-bottom: 1px solid #1b4296;
+      .row-lable {
+        padding: 7px 0;
+        width: 30%;
+        text-align: center;
+        font-size: 15px;
+        color: #00ff9c;
+        border-right: 1px solid #1b4296;
+        overflow: hidden;
+      }
+      .row-value {
+        padding: 7px;
+        flex: 1;
+        font-size: 15px;
+        color: #d3e9ff;
+      }
+    }
+    & .table-row:last-child {
+      border-bottom: 0px;
+    }
+  }
+  .introduce-content {
+    flex: 1;
+    box-sizing: border-box;
+    margin-top: 20px;
+    padding: 35px 15px;
+    padding-right: 0;
+    background: url("~@/assets/images/ui/introduce-text.png");
+    background-size: 100% 100%;
+    overflow: hidden;
+    & > div {
+      padding-right: 8px;
+      height: 100%;
+      line-height: 25px;
+      font-size: 15px;
+      color: #d3e9ff;
+      overflow-y: auto;
+    }
+  }
+}
+/*全局滚动条样式*/
+::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  height: 10px;
+  width: 1px;
+  background: rgba(255, 255, 255, 0.5);
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+</style>

src/views/components/IndexModel/right.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="model-right">
+    <threeCell />
+    <colorList />
+    <pieChart />
+  </div>
+</template>
+
+<script>
+import threeCell from "./components/threeCell.vue";
+import colorList from "./components/colorList.vue";
+import pieChart from "./components/pieChart.vue";
+export default {
+  components: { threeCell, colorList, pieChart },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.model-right {
+  flex: 1;
+  padding: 25px 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+</style>

src/views/components/foldpanelLeft/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="fold-panel">
+    <div class="panel-container">
+      <div
+        class="panel-main"
+        :class="['panel-main', { collapsed: isCollapsed }]"
+      >
+        <div class="panel-box">
+          <introduceTitle
+            :title="title"
+            subTitle="INTRODUCTION"
+          ></introduceTitle>
+          <slot></slot>
+        </div>
+      </div>
+      <div class="fold-btn" @click="togglePanel()">
+        <img
+          :src="
+            isCollapsed
+              ? require('@/assets/images/ui/arrow_left.jpg')
+              : require('@/assets/images/ui/arrow_right.jpg')
+          "
+          alt=""
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import introduceTitle from "@/views/components/introduceTitle";
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "标题",
+    },
+  },
+  components: {
+    introduceTitle,
+  },
+  data() {
+    return {
+      isCollapsed: false,
+    };
+  },
+  methods: {
+    togglePanel() {
+      this.isCollapsed = !this.isCollapsed;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.fold-panel {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  height: 100%;
+  box-sizing: border-box;
+  padding-top: 110px;
+  cursor: pointer;
+  background: url("~@/assets/images/ui/panel_left.png");
+  background-size: 100% 100%;
+  .panel-container {
+    position: relative;
+    height: 100%;
+    .fold-btn {
+      position: absolute;
+      right: -21px;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 40px;
+      width: 20px;
+      img {
+        display: block;
+        height: 100%;
+        width: 100%;
+      }
+    }
+    .panel-main {
+      position: relative;
+      width: 390px;
+      height: 100%;
+      overflow: hidden;
+      transition: width 0.3s ease;
+      .panel-box {
+        position: absolute;
+        left: 25px;
+        right: 25px;
+        height: 100%;
+        width: calc(390px - 50px);
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    .collapsed {
+      width: 0;
+    }
+  }
+}
+</style>

src/views/components/foldpanelRight/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="fold-panel">
+    <div class="panel-container">
+      <div
+        class="panel-main"
+        :class="['panel-main', { collapsed: isCollapsed }]"
+      >
+        <div class="panel-box">
+          <introduceTitle
+            title="统计分析"
+            subTitle="STATISTICAL ANALYSIS"
+          ></introduceTitle>
+          <slot></slot>
+        </div>
+      </div>
+      <div class="fold-btn" @click="togglePanel()">
+        <img
+          :src="
+            isCollapsed
+              ? require('@/assets/images/ui/arrow_right.jpg')
+              : require('@/assets/images/ui/arrow_left.jpg')
+          "
+          alt=""
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import introduceTitle from "@/views/components/introduceTitle";
+export default {
+  components: { introduceTitle },
+  data() {
+    return {
+      isCollapsed: false,
+    };
+  },
+  methods: {
+    togglePanel() {
+      this.isCollapsed = !this.isCollapsed;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.fold-panel {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+  height: 100%;
+  box-sizing: border-box;
+  padding-top: 110px;
+  cursor: pointer;
+  background: url("~@/assets/images/ui/panel_right.png");
+  background-size: 100% 100%;
+  .panel-container {
+    position: relative;
+    height: 100%;
+    .fold-btn {
+      position: absolute;
+      left: -21px;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 40px;
+      width: 20px;
+      img {
+        display: block;
+        height: 100%;
+        width: 100%;
+      }
+    }
+    .panel-main {
+      position: relative;
+      width: 390px;
+      height: 100%;
+      overflow: hidden;
+      transition: width 0.3s ease;
+      .panel-box {
+        position: absolute;
+        left: 25px;
+        right: 25px;
+        height: 100%;
+        width: calc(390px - 50px);
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    .collapsed {
+      width: 0;
+    }
+  }
+}
+</style>

src/views/components/index.js

@@ -0,0 +1,5 @@
+export { default as foldpanelLeft } from "./foldpanelLeft";
+export { default as foldpanelRight } from "./foldpanelRight";
+
+export { default as IndexModelLeft } from "./IndexModel/left.vue";
+export { default as IndexModelRight } from "./IndexModel/right.vue";

src/views/components/introduceTitle/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="introduce-title">
+    <span class="main-title">{{ title }}</span>
+    <span class="sub-title"> {{ subTitle }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "标题",
+    },
+    subTitle: {
+      type: String,
+      default: "标题",
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.introduce-title {
+  height: 40px;
+  background: url("~@/assets/images/ui/introduce-title.png");
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: space-between;
+  padding-left: 55px;
+  overflow: hidden;
+  .main-title {
+    padding: 4px 0;
+    font-size: 20px;
+    color: #ffffff;
+    font-family: "Alibaba-PuHuiTi-Medium.otf";
+  }
+  .sub-title {
+    padding: 6px 0;
+    margin-left: 15px;
+    font-size: 16px;
+    color: #518fd4;
+    font-family: "Alibaba-PuHuiTi-Regular.otf";
+  }
+}
+</style>

src/views/components/introduceTitle/subTtile.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="introduce-title">
+    <span class="main-title">{{ title }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "标题",
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.introduce-title {
+  height: 40px;
+  background: url("~@/assets/images/ui/user_title.png");
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  .main-title {
+    margin-left: 40px;
+    font-size: 19px;
+    color: #ffffff;
+    font-family: "xiniu";
+    background: linear-gradient(0deg, #00beff 0%, #ffffff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+</style>

src/views/index.vue

@@ -1,40 +1,182 @@
 <template>
-  
-
-
   <div class="pc-container">
     <NavigationBar></NavigationBar>
-    <LeafletMap />
-  </div>
+    <foldpanelLeft :title="xiaoquIntroduce.deptName + '简介'">
+      <IndexModelLeft />
+    </foldpanelLeft>
+    <foldpanelRight>
+      <IndexModelRight />
+    </foldpanelRight>
 
+    <LeafletMap>
+      <template #select>
+        <div class="select-search">
+          <el-select
+            v-model="community"
+            placeholder="选择社区"
+            clearable
+            @change="handleChange"
+            :popper-append-to-body="false"
+          >
+            <el-option
+              v-for="dict in communityList"
+              :key="dict.dept_id"
+              :label="dict.dept_name"
+              :value="dict.dept_id"
+            >
+            </el-option>
+          </el-select>
+
+          <el-select
+            style="margin-left: 10px"
+            v-model="xiaoqu"
+            placeholder="选择小区"
+            clearable
+            v-show="xiaoquList.length > 0"
+            :popper-append-to-body="false"
+          >
+            <el-option
+              v-for="dict in xiaoquList"
+              :key="dict.xiaoqu_id"
+              :label="dict.dept_name"
+              :value="dict.xiaoqu_id"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </template>
+    </LeafletMap>
+  </div>
 </template>
 
 <script>
 import NavigationBar from "@/components/NavigationBar/index.vue";
+import { mapGetters } from "vuex";
+import {
+  foldpanelLeft,
+  IndexModelLeft,
+  foldpanelRight,
+  IndexModelRight,
+} from "@/views/components/index.js";
 import LeafletMap from "@/components/LeafletMap";
-
+import { getCommunitylist, getXiaoqulist } from "@/api/taicangpop/data.js";
 export default {
   name: "Index",
+  computed: {
+    ...mapGetters(["dept", "xiaoquIntroduce"]),
+  },
   components: {
     NavigationBar,
+    foldpanelLeft,
+    IndexModelLeft,
+    foldpanelRight,
+    IndexModelRight,
     LeafletMap,
-   
   },
   data() {
     return {
-      // 版本号
-      version: "3.8.8",
+      community: 100,
+      communityList: [],
+      xiaoqu: "",
+      xiaoquList: [],
     };
   },
-  methods: {},
+
+  created() {
+    if (this.$auth.hasRoleNet("network")) {
+      this.$router.replace("/xiaoqu");
+      return;
+    }
+    this.getCommunity();
+    this.$store.dispatch("GetYjtotal");
+    this.$store.dispatch("GetXiaoquInfo", this.dept.deptId);
+    this.$store.dispatch("getThreeCell");
+    this.$store.dispatch("GetcolorList");
+  },
+  methods: {
+    handleChange(e) {
+      if (!e) return;
+      this.$store.dispatch("GetXiaoquInfo", e);
+      this.xiaoqu = "";
+      this.xiaoquList = this.communityList.filter(
+        (item) => item.dept_id == e
+      )[0].children;
+      if (e == 100) e = undefined;
+      this.$store.dispatch("GetYjtotal", {
+        shequId: e,
+      });
+      this.$store.commit("SET_QUERY_PARAMS", { shequId: e });
+      this.$store.dispatch("getThreeCell", {
+        shequId: e,
+      });
+      this.$store.dispatch("GetcolorList", {
+        shequId: e,
+      });
+    },
+
+    getCommunity() {
+      let community = new Promise((resolve, reject) => {
+        getCommunitylist().then((res) => {
+          res.data["社区list集合"].unshift({
+            dept_name: "全部社区",
+            dept_id: this.dept.deptId,
+          });
+          resolve(res.data["社区list集合"]);
+        });
+      });
+
+      let xiaoqu = new Promise((resolve, reject) => {
+        getXiaoqulist().then((res) => {
+          resolve(res.data["小区list集合"]);
+        });
+      });
+
+      Promise.all([community, xiaoqu]).then((res) => {
+        this.communityList = res[0].map((item) => {
+          item.children = [];
+          res[1].forEach((it) => {
+            if (item.dept_id == it.shequ_id) item.children.push(it);
+          });
+          return item;
+        });
+      });
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
 .pc-container {
+  position: relative;
   height: 100%;
   box-sizing: border-box;
   background: url("~@/assets/images/ui/index_bg.jpg");
   background-size: 100% 100%;
+  overflow: hidden;
+}
+
+::v-deep .select-search {
+  position: absolute;
+  left: 410px;
+  top: 110px;
+
+  .el-select {
+    width: 160px;
+    .el-input {
+      background: transparent;
+    }
+    .el-input__inner {
+      height: 45px;
+      line-height: 45px;
+      color: #fff;
+      background: url("~@/assets/images/ui/img_btn_search.png");
+      background-size: 100% 100%;
+      border: 0px !important;
+    }
+    .el-input__inner::placeholder,
+    .el-select__caret {
+      color: #fff;
+    }
+  }
 }
 </style>

src/views/login.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="login">
-    <NavigationBar />
+    <NavigationBar :showLeft="false" :showRight="false" />
     <el-form
       ref="loginForm"
       :model="loginForm"
@@ -215,7 +215,7 @@ export default {
   border-radius: 6px;
   background-image: url("../assets/images/ui/img_frame.png");
   background-size: 100% 100%;
-  width: 500px;
+  width: 450px;
   padding: 35px 35px 5px 35px;
   .el-input {
     height: 50px;

src/views/xiaoqu.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="pc-container"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  // mounted() {
+  //   if (this.$auth.authRoleNet("network")) {
+  //     window.addEventListener("popstate", this.preventBack);
+  //     // 初始化时添加一个历史记录条目
+  //     window.history.pushState(null, "", window.location.href);
+  //   }
+  // },
+  // methods: {
+  //   preventBack() {
+  //     window.history.pushState(null, "", window.location.href);
+  //   },
+  // },
+  // beforeDestroy() {
+  //   window.removeEventListener("popstate", this.preventBack);
+  // },
+};
+</script>
+
+<style lang="scss" scoped>
+.pc-container {
+  height: 100%;
+  border: 1px solid red;
+}
+</style>