From 01b2b4c0f7db937b9f119f0f4cfef461436917f0 Mon Sep 17 00:00:00 2001
From: mk <2403457699@qq.com>
Date: Mon, 4 Dec 2023 16:59:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E6=9B=B4=E6=8D=A2=E4=B8=BAL7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                               |   2 +
 src/api/hulianApi.js                       |  45 ++
 src/components/screen-popup-ydzl/index.vue |  44 +-
 src/style/left2.scss                       |  30 +-
 src/views/agencySelect.vue                 |  12 +-
 src/views/screenCenter/screenCenter.vue    | 878 +++++++++------------
 src/views/screenLeft/left2.vue             | 519 ++++++------
 src/views/screenLeft/left3.vue             |  43 +-
 src/views/screenRight/right1.vue           |   2 -
 src/views/screenRight/right3.vue           |   1 -
 10 files changed, 747 insertions(+), 829 deletions(-)

diff --git a/package.json b/package.json
index 43edeaf..aa2fd58 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@antv/l7": "^2.20.5",
     "@turf/turf": "^6.5.0",
     "axios": "^1.4.0",
     "blueimp-md5": "^2.19.0",
diff --git a/src/api/hulianApi.js b/src/api/hulianApi.js
index c685f0e..e4b832a 100644
--- a/src/api/hulianApi.js
+++ b/src/api/hulianApi.js
@@ -20,4 +20,49 @@ export function getIcpartyactivity(data) {
     data: data
   })
 }
+// 社区治理人员 communityId: 1202772469238554625  type：1处级干部包联社区2：一线工作组3：党建指导员4：社区书记5：社区副书记6：党委委员
+export function getListForCommnity(data) {
+  return request({
+    baseURL,
+    url: '/gov/org/customerCommunityManageUser/screen/listForCommnity',
+    method: 'GET',
+    params: data
+  })
+}
+// 网格治理人员 gridId: 1224237268259110914  type：1：处级干部包联社区2：一线工作组3：党建指导员4：社区书记5：社区副书记6：党委委员
+export function getListForGrid(data) {
+  return request({
+    baseURL,
+    url: '/gov/org/customerGridManageUser/screen/listForGrid',
+    method: 'GET',
+    params: data
+  })
+}
+// 社区工作人员统计  communityId 1202807268116357122 
+export function getCommunityStatistics(data) {
+  return request({
+    baseURL,
+    url: '/gov/org/customerGridManageUser/screen/communityStatistics',
+    method: 'GET',
+    params: data
+  })
+}
+// 入参agencyId: ""
+export function getTypestatistics(data) {
+  return request({
+    baseURL,
+    url: '/heart/icpartyunit/screen/typestatistics',
+    method: 'POST',
+    data: data
+  })
+}
+// 获取社区下网格 agencyId  purpose:"addorupdate" || "query"
+export function getGridoption(data) {
+  return request({
+    baseURL,
+    url: '/gov/org/customergrid/screen/gridoption',
+    method: 'POST',
+    data: data
+  })
+}
 
diff --git a/src/components/screen-popup-ydzl/index.vue b/src/components/screen-popup-ydzl/index.vue
index f307a29..46aac38 100644
--- a/src/components/screen-popup-ydzl/index.vue
+++ b/src/components/screen-popup-ydzl/index.vue
@@ -1,14 +1,24 @@
 <template>
-  <div class="screen-popup-ydzl"
-       :style="{height: visible?'65px':'0px', opacity: popupVisible ? '1' : '0','--left': left,'--top': top,'--width':width,'--fontSize':fontSize }">
-    <div class="screen-popup-ydzl-border"
-         :style="{overflowY:  'hidden' }">
-      <div class="screen-popup-ydzl-content">
-        <div>{{memberInfo.name}}</div>
-        <div>{{memberInfo.phone}}</div>
-
+  <div class="screen-popup-ydzl" :style="{
+    height: (!memberInfo && memberArr) ? '180px' : '65px',
+    opacity: popupVisible ? '1' : '0',
+    '--left': left,
+    '--top': top,
+    '--width': width,
+    '--fontSize': fontSize
+  }" v-show="popupVisible == '1'">
+    <div class="screen-popup-ydzl-border" :style="{ overflowX: 'hidden' }">
+      <div class="screen-popup-ydzl-content" v-if="memberInfo">
+        <div>{{ memberInfo.name }}</div>
+        <div>{{ memberInfo.phone }}</div>
+      </div>
+      <div v-if="!memberInfo && memberArr" >
+        <div v-for="item  in memberArr">
+          <div>{{ item.name }}</div>
+          <div>{{ item.phone }}</div>
+          <div v-if="item.property">人员属性：{{ item.property }}</div>
+        </div>
       </div>
-
     </div>
 
   </div>
@@ -17,7 +27,7 @@
 <script>
 export default {
   name: 'screen-popup-ydzl',
-  data () {
+  data() {
     return {
 
       popupVisible: true
@@ -48,9 +58,11 @@ export default {
     memberInfo: {
       type: Object,
       default: () => { }
+    },
+    memberArr: {
+      type: Array,
+      default: () => []
     }
-
-
   },
   watch: {
 
@@ -96,27 +108,33 @@ export default {
   border-radius: 4px;
   max-height: 260px;
   transition: height 0.1s linear, opacity 0.1s linear;
+
   &-content {
     padding: 5px;
     text-align: center;
   }
+
   &-border {
     width: 100%;
     height: 100%;
     overflow-y: auto;
     border-radius: 4px;
     box-sizing: border-box;
+
     // padding: 10px 0 0;
     &::-webkit-scrollbar {
       /*滚动条整体样式*/
-      width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
+      width: 6px;
+      /*高宽分别对应横竖滚动条的尺寸*/
       height: 1px;
     }
+
     &::-webkit-scrollbar-thumb {
       /*滚动条里面小方块*/
       background: linear-gradient(-90deg, #09b8e5 0%, #09f0e3 99%);
       border-radius: 3px;
     }
+
     &::-webkit-scrollbar-track {
       /*滚动条里面轨道*/
       // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
diff --git a/src/style/left2.scss b/src/style/left2.scss
index 0862c6f..0d7124b 100644
--- a/src/style/left2.scss
+++ b/src/style/left2.scss
@@ -20,7 +20,7 @@
   }
 }
 .grid-title {
-  margin-top: 5px;
+  margin-top: 10px;
   height: 40px;
 }
 
@@ -47,12 +47,12 @@
     position: relative;
     margin-top: 5px;
     width: 578px;
-    height: 30px;
+    height: 40px;
     background: rgba(36, 190, 241, 0.7);
     border-radius: 2px;
 
     text-align: center;
-    line-height: 30px;
+    line-height: 40px;
 
     .rowitem {
       font-size: 18px;
@@ -110,39 +110,39 @@
 
   .grid-item {
     text-align: center;
-
+    position: relative;
     .frame-arrow2 {
       > img {
-        height: 24px;
+        height: 40px;
         width: 24px;
       }
     }
 
     .grid-member {
-      width: 285px;
-      height: 254px;
+      width: 130px;
+      height: 75px;
       background: rgba(36, 190, 241, 0.3);
       border-radius: 4px;
       box-sizing: border-box;
-
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       align-items: center;
-      padding: 14px 0 14px 14px;
-
+      padding: 14px 14px 14px 14px;
       &-title {
-        width: 100px;
-        height: 26px;
+        width: 113px;
         background: rgba(255, 255, 255, 0.8);
         border-radius: 2px;
-
         text-align: center;
         font-size: 16px;
         font-family: Alibaba PuHuiTi;
         font-weight: 500;
         color: #006fbd;
-        line-height: 26px;
+        min-height:49px ;
+        display: grid;
+        place-items: center;
+        cursor: pointer;
+        // line-height: 49px;
       }
 
       &-main {
@@ -194,7 +194,7 @@
 }
 
 .left2-static {
-  margin-top: 10px 23px;
+  margin-top: 50px;
   display: flex;
   justify-content: space-around;
 
diff --git a/src/views/agencySelect.vue b/src/views/agencySelect.vue
index a4e11a7..e297c48 100644
--- a/src/views/agencySelect.vue
+++ b/src/views/agencySelect.vue
@@ -121,7 +121,7 @@ export default {
     },
 
     onChooseStreet(streetItem) {
-      console.log(streetItem);
+      console.log(streetItem,'选中街道');
       this.selectStreet = {
         label: streetItem.label,
         value: streetItem.value,
@@ -132,8 +132,8 @@ export default {
         value: '',
         // center: []
       }
+      this.communityList = []
       this.getOrgTree('community_party', streetItem.value)
-      // this.communityList = []
       // this.communityList.push({
       //   label: "全部社区",
       //   value: "",
@@ -143,9 +143,8 @@ export default {
       // this.communityList = [...this.communityList, ...streetItem.children]
       this.getCommunityList()
       if (this.selectStreet.value) {
-
         this.set_shibeiAgencyName(this.selectStreet.label)
-        this.set_shibeiAgencyType('community')
+        this.set_shibeiAgencyType('street')
         this.set_shibeiMapCenter(this.selectStreet.center)
         this.set_shibeiAgencyId(this.selectStreet.value)
       } else {
@@ -163,7 +162,6 @@ export default {
 
     },
     onChooseCommunity(communityItem) {
-
       this.selectCommunity = {
         label: communityItem.label,
         value: communityItem.value,
@@ -173,13 +171,13 @@ export default {
       if (this.selectCommunity.value) {
         this.set_shibeiAgencyId(this.selectCommunity.value)
         this.set_shibeiAgencyName(this.selectCommunity.label)
-        this.set_shibeiAgencyType('street')
+        this.set_shibeiAgencyType('community')
         this.set_shibeiMapCenter(this.selectCommunity.center)
       } else {
         ////选择了全部社区，shibeiId=社区上一级的街道id
         this.set_shibeiAgencyId(this.selectStreet.value)
         this.set_shibeiAgencyName(this.selectStreet.label)
-        this.set_shibeiAgencyType('community')
+        this.set_shibeiAgencyType('street')
         this.set_shibeiMapCenter(this.selectStreet.centerMark)
       }
     },
diff --git a/src/views/screenCenter/screenCenter.vue b/src/views/screenCenter/screenCenter.vue
index 8c6cd88..65e2d49 100644
--- a/src/views/screenCenter/screenCenter.vue
+++ b/src/views/screenCenter/screenCenter.vue
@@ -1,23 +1,6 @@
 <template>
     <div class="screen-center">
         <div id="map" style="height: 100%;width: 100%;position: relative;min-width:1000px">
-            <!-- <div style="position: absolute;left:16%;top: 10px;cursor: pointer;z-index: 100;color: #fff;font-size: 40px;">
-                <div style="display: flex;justify-content: space-around;flex-direction: row;width: 30vw;">
-                    <div v-for="item in topNum"
-                         :key="item.value"
-                         style="background-color: rgba(8, 31, 45, 0.6);padding: 30px;display: flex;flex-direction: column;align-items: center;">
-                        <div style="padding-bottom: 20px;">
-                            {{item.value&&getThousandth(item.value)}}
-                        </div>
-                        <div style="border-top: 5px solid #36acd3;padding-top: 20px;display: flex;align-items: center;white-space: nowrap;">
-                            <el-image style="height: 60px;"
-                                      :src="require('../../assets/shuline.png')"
-                                      fit="fill"></el-image>
-                            {{item.label||"--" }}
-                        </div>
-                    </div>
-                </div>
-            </div> -->
             <div @click="initialization" style="position: absolute;left: 100px;bottom: 100px;cursor: pointer;z-index: 100;">
                 <el-image style="width: 50px; height: 50px;" :src="require('../../assets/back.png')" fit="fill"></el-image>
             </div>
@@ -120,58 +103,65 @@
         </div>
     </div>
 </template>
-
 <script>
-import markIcon from "@/assets/position.png";
-import markIcons from "@/assets/positions.png";
+// import markIcon from "@/assets/position.png";
+// import markIcons from "@/assets/positions.png";
+import { Scene, PolygonLayer, LineLayer, MarkerLayer, RasterLayer, PointLayer, Marker, Popup } from "@antv/l7";
+import { GaodeMap, Map } from "@antv/l7-maps";
 import * as turf from '@turf/turf';
 import axios from 'axios';
-import mapboxgl from 'mapbox-gl';
-import 'mapbox-gl/dist/mapbox-gl.css';
 import { mapGetters } from "vuex";
+import shibeiJson from './shibei.json';
 const md5 = require('blueimp-md5');
+
+let myMap;
+let scene;
+let polygonLayer;
+let lineLayer;
+let textLayer;
+let posLayer;
+let circleLayer;
+let dotLayer;
+let dotBgLayer;
+let dotLayer2;
+let searchMarker;
+let searchBgLayer;
+let numMarker;
+let pointMarker;
 export default {
     name: "screen-center",
     data() {
         return {
-            map: null,
             colorList: ["#F84E2D", "#1372EC", "#44DEA3", "#FFC544", "#6C44FF"],
             attrAndColor: [],
-            shibeiJson: null,
-            resolutions: [
-                156543.03392800014, 78271.516963999937, 39135.758482000092, 19567.879240999919,
-                9783.9396204999593, 4891.9698102499797, 2445.9849051249898, 1222.9924525624949, 611.49622628137968,
-                305.74811314055756, 152.87405657041106, 76.437028285073239, 38.21851414253662, 19.10925707126831,
-                9.5546285356341549, 4.7773142679493699, 2.3886571339746849, 1.1943285668550503, 0.59716428355981721,
-                0.29858214164761665, 0.149291070823808325, 0.0746455354119041625
-            ],
+
             hoveredStateId: null,
-            topNum: [
-                {
-                    label: "用户总数",
-                    value: 330195
-                },
-                {
-                    label: "党员总数",
-                    value: 74830
-                },
-                {
-                    label: "党群总数",
-                    value: 9501
-                },
-                {
-                    label: "话题总数",
-                    value: 286508
-                },
-                {
-                    label: "议题总数",
-                    value: 223829
-                },
-                {
-                    label: "诉求总数",
-                    value: 215450
-                }
-            ],
+            // topNum: [
+            //     {
+            //         label: "用户总数",
+            //         value: 330195
+            //     },
+            //     {
+            //         label: "党员总数",
+            //         value: 74830
+            //     },
+            //     {
+            //         label: "党群总数",
+            //         value: 9501
+            //     },
+            //     {
+            //         label: "话题总数",
+            //         value: 286508
+            //     },
+            //     {
+            //         label: "议题总数",
+            //         value: 223829
+            //     },
+            //     {
+            //         label: "诉求总数",
+            //         value: 215450
+            //     }
+            // ],
             buttonPiece: [
                 {
                     value: 1,
@@ -185,23 +175,11 @@ export default {
                     value: 3,
                     label: "党支部"
                 },
-                // {
-                //     value: 4,
-                //     label: "用户"
-                // },
-                // {
-                //     value: 5,
-                //     label: "党员"
-                // },
-                // {
-                //     value: 6,
-                //     label: "事件"
-                // }
+
             ],
             buttonIndex: 0,
             markerJson: null,
             layersIndex: 1,
-            features: {},
             showFirst: false,
             showMicrogridDetails: false,
             microgridArr: [
@@ -413,20 +391,67 @@ export default {
                     },
                 ]
             },
+            lightStyle: {
+                style: "amap://styles/whitesmoke",
+                polygonColor: [
+                    // "rgba(255, 100, 60, 0.3)",
+                    "rgba(43, 231, 253, 0.3)",
+                    // "rgba(255, 255, 50, 0.3)",
+                ],
+                lineColor: [
+                    // "rgba(220, 150, 120, 0.9)",
+                    "rgba(33, 201, 223, 0.8)",
+                    // "rgba(200, 200, 50, 0.9)",
+                ],
+                circleColor: [
+                    // "rgba(255, 180, 150, 0.99)",
+                    "rgba(13, 181, 203, 0.8)",
+                    // "rgba(255, 255, 50, 0.99)",
+                ],
+                textColor: [
+                    // "rgba(200, 50, 10, 0.99)",
+                    "rgba(0, 130, 153, 0.99)",
+                    // "rgba(120, 120, 0, 0.99)",
+                ],
+                textStrokeColor: "#666",
+            },
+            darkStyle: {
+                style: "amap://styles/blue",
+                polygonColor: [
+                    // "rgba(255, 100, 60, 0.5)",
+                    // "rgba(43, 231, 253, 0.35)",
+                    "rgba(0, 127, 241, .3)",
+                    // "rgba(255, 255, 50, 0.35)",
+                ],
+                lineColor: [
+                    // "rgba(255, 180, 150, 0.9)",
+                    // "rgba(43, 231, 253, 0.7)",
+                    "rgba(0, 127, 241, .6)",
+                    // "rgba(255, 255, 50, 0.7)",
+                ],
+                circleColor: [
+                    // "rgba(255, 180, 150, 0.99)",
+                    // "rgba(43, 231, 253, 0.99)",
+                    "rgba(0, 127, 241, 0.99)",
+                    // "rgba(255, 255, 50, 0.99)",
+                ],
+                textColor: [
+                    // "rgba(255, 100, 60, 0.99)",
+                    // "rgba(43, 231, 253, 0.99)",
+                    "rgba(126, 187, 255, 1)",
+                    // "rgba(255, 255, 50, 0.99)",
+                ],
+                textStrokeColor: "#fff",
+            },
         }
     },
     mounted() {
-        this.shibeiJson = require('./shibei.json');
-        console.log(this.shibeiJson);
-        for (let i in this.shibeiJson.features) {
-            this.shibeiJson.features[i].properties.resiNum = '88',
-                this.shibeiJson.features[i].properties.houseNum = '66'
-            this.shibeiJson.features[i].properties.partNum = '第一党支部'
-        }
-        console.log(this.shibeiJson.features);
-        this.markerJson = require('./markerJson.json');
-        this.init()
-        this.microgridObj.list = JSON.parse(JSON.stringify(this.microgridObjCopy.list)).slice(0, 5)
+        window._AMapSecurityConfig = {
+            securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2",
+        };
+        this.$nextTick(() => {
+            this.init()
+        })
     },
     computed: {
         ...mapGetters(['shibeiAId', 'shibeiName', 'shibeiAgencyType']),
@@ -447,285 +472,6 @@ export default {
         }
     },
     methods: {
-        init() {
-            // 初始化map对象，加载天地图底图 
-            mapboxgl.accessToken = "pk.eyJ1IjoiZGp4YyIsImEiOiJjanlxdzNlbW0wNHNyM29yMzZibHczOHlpIn0.TOUXgB6IHHhnmA6RsL6pWw";
-            this.map = new mapboxgl.Map({
-                container: 'map', // container id
-                center: [120.38140448734, 36.11044959486], // starting position [lng, lat]
-                zoom: 12.5, // starting zoom
-                // maxZoom: 12.5, // 22
-                // minZoom: 9,
-                bearing: 0,
-                pitch: 40,
-                style: {
-                    version: 8,
-                    sources: {
-                    },
-                    glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
-                    layers: [
-                    ],
-                }
-            });
-            const _this = this;
-            this.map.on('load', function () {
-                _this.getPolygonJson(_this.shibeiJson)
-                _this.map.on('mousemove', 'shibeiPolygonLayer', function (e) {
-                    _this.map.getCanvas().style.cursor = 'pointer'; // 鼠标样式
-
-                });
-                _this.map.on("click", "shibeiPolygonLayer", function (e) {
-                    const features = _this.map.queryRenderedFeatures(e.point);
-                    if (_this.layersIndex === 3) {
-                        _this.showFirst = true
-                    }
-                    if (features.length > 0) {
-                        _this.features = features[0]
-                        if (features[0]["properties"]["type"] && features[0]["properties"]["type"] == "marker") {
-                            _this.makeMarker(features[0])
-                            return
-                        }
-                        if (features[0]["properties"]["name"].indexOf("网格") != -1) {
-                            return
-                        }
-                        _this.getBoundary(features[0]["properties"]["adcode"] || features[0]["properties"]["subId"])
-
-                        _this.map.setZoom(13.5)
-                        _this.map.setCenter(features[0]["geometry"]["coordinates"][0][0])
-
-                        if (_this.map.getLayer("shibeiPolygonLayer")) {
-                            _this.map.removeLayer("shibeiPolygonLayer")
-                            _this.map.removeLayer("text_JSON_layer")
-                            _this.map.removeSource("shibeiPolygonSource")
-                        }
-                        if (_this.map.getLayer("SinglePolygonLayer")) {
-                            _this.map.removeLayer("SinglePolygonLayer")
-                            _this.map.removeLayer("SingleTextLayer")
-
-                            _this.map.removeSource("SinglePolygonSource")
-                        }
-                        if (_this.map.getLayer("text_JSON_layer-num")) {
-                            _this.map.removeLayer("text_JSON_layer-num")
-                        }
-                        for (let i = 8; i <= 18; i++) {
-                            if (_this.map.getLayer("lineBufferLayer-" + i)) {
-                                _this.map.removeLayer("lineBufferLayer-" + i)
-                                _this.map.removeSource("lineBufferSource-" + i)
-
-                            }
-                        }
-                    }
-                    // _this.addSinglePolygon(features[0])
-                });
-                // 鼠标移入要素时的高亮效果
-                // _this.map.on('mousemove', 'shibeiPolygonLayer', function (e) {
-                //     _this.map.getCanvas().style.cursor = 'pointer'; // 鼠标样式
-                //     if (_this.map.getLayer("heightPolygonLayer")) {
-                //         _this.map.removeLayer("heightPolygonLayer")
-                //         _this.map.removeSource("heightPolygonSource")
-                //     }
-                //     let feature = e.features[0];
-                //     _this.addHeightPolygon(feature)
-                // });
-                // _this.map.on('mouseleave', 'shibeiPolygonLayer', function (e) {
-                //     if (_this.map.getLayer("heightPolygonLayer")) {
-                //         _this.map.removeLayer("heightPolygonLayer")
-                //         _this.map.removeSource("heightPolygonSource")
-                //     }
-                // });
-            })
-        },
-        getPolygonJson(obj) {
-            let shibeiPolyline = JSON.parse(JSON.stringify(obj))
-            for (let i = 0; i < shibeiPolyline.features.length; i++) {
-                shibeiPolyline.features[i].geometry.type = 'MultiLineString' //面转线
-                shibeiPolyline.features[i].geometry.coordinates = this.convertPolygonToPolyline(shibeiPolyline.features[
-                    i].geometry.coordinates)
-            }
-
-            this.addPolygon(obj)
-            this.addPolyline(shibeiPolyline)
-
-        },
-        convertPolygonToPolyline(MultiPolygon) {
-            let MultiLineString = []
-            MultiPolygon.forEach(Polygon => {
-                Polygon.forEach(LinearRing => {
-                    let LineString = LinearRing
-                    MultiLineString.push(LineString)
-                })
-            });
-            return MultiLineString
-        },
-        addPolygon(geojson) {
-            this.map.addSource('shibeiPolygonSource', {
-                'type': 'geojson',
-                'data': geojson
-            });
-            this.map.addLayer({
-                'id': 'shibeiPolygonLayer',
-                'type': 'fill-extrusion',
-                'source': 'shibeiPolygonSource',
-                'paint': {
-                    'fill-extrusion-vertical-gradient': true,
-                    'fill-extrusion-color': "#00466e",
-                    'fill-extrusion-height': 300,
-                    'fill-extrusion-base': 0,
-                    'fill-extrusion-opacity': 0.2  // 调整透明度值
-                }
-            });
-            this.map.addLayer({
-                id: "text_JSON_layer",
-                type: "symbol",
-                source: "shibeiPolygonSource",
-                // minzoom: 5,
-                // maxzoom: 22,
-                interactive: true,
-                paint: {
-                    'text-color': '#fff',
-                },
-                "layout": {
-                    "text-field": "{name}",
-                    'text-size': 25
-                }
-            });
-        },
-        addSinglePolygon(geojson) {
-            this.map.addSource('SinglePolygonSource', {
-                'type': 'geojson',
-                'data': geojson
-            });
-
-            this.map.addLayer({
-                'id': 'SinglePolygonLayer',
-                'type': 'fill-extrusion',
-                'source': 'SinglePolygonSource',
-                'paint': {
-                    'fill-extrusion-vertical-gradient': true,
-                    'fill-extrusion-color': "#1d597b",
-                    'fill-extrusion-height': 300,
-                    'fill-extrusion-base': 0,
-                    'fill-extrusion-opacity': 1
-                }
-            });
-            this.map.addLayer({
-                id: "SingleTextLayer",
-                type: "symbol",
-                source: "SinglePolygonSource",
-                // minzoom: 5,
-                // maxzoom: 22,
-                interactive: true,
-                paint: {
-                    'text-color': '#fff',
-                },
-                "layout": {
-                    "text-field": "{name}",
-                    'text-size': 40
-                }
-            });
-        },
-        addHeightPolygon(geojson) {
-            this.map.addSource('heightPolygonSource', {
-                'type': 'geojson',
-                'data': geojson
-            });
-            this.map.addLayer({
-                'id': 'heightPolygonLayer',
-                'type': 'fill-extrusion',
-                'source': 'heightPolygonSource',
-                'paint': {
-                    'fill-extrusion-vertical-gradient': true,
-                    'fill-extrusion-color': "#b3b817",
-                    'fill-extrusion-height': 300,
-                    'fill-extrusion-base': 0,
-                    'fill-extrusion-opacity': 1
-                },
-            });
-        },
-        addPolyline(geojson) {
-            // 8 ~ 18 级
-            for (let i = 8; i <= 18; i++) {
-                let radius = 1 * this.resolutions[i + 1] // 2个像素，缓冲后4个像素
-                let lineBuffer = turf.buffer(geojson, radius, {
-                    units: 'meters'
-                });
-                this.map.addSource('lineBufferSource-' + i, {
-                    'type': 'geojson',
-                    'data': lineBuffer
-                });
-                this.map.addLayer({
-                    'id': 'lineBufferLayer-' + i,
-                    'type': 'fill-extrusion',
-                    'source': 'lineBufferSource-' + i,
-                    "minzoom": (i - 1),
-                    "maxzoom": (i + 1),
-                    'paint': {
-                        'fill-extrusion-vertical-gradient': true,
-                        'fill-extrusion-color': '#00e4fa',
-                        'fill-extrusion-height': 310, // 挤出高度
-                        'fill-extrusion-base': 300,// 底部的高度。必须小于或等于挤出高度
-                        'fill-extrusion-opacity': 0.3
-                    }
-                });
-                // this.map.addLayer({
-                //     id: 'shibeiPolylineShadow-',
-                //     type: 'fill-extrusion',
-                //     source: 'lineBufferSource-' + i,
-                //     paint: {
-                //         'fill-extrusion-color': [
-                //             'interpolate',
-                //             ['linear'],
-                //             ['get', 'height'],
-                //             0, '#05c3e3',  // 内阴影底部颜色
-                //             // 300, '#0089aa'  // 内阴影顶部颜色
-                //         ],
-                //         'fill-extrusion-height': 310,  // 内阴影的底部高度
-                //         'fill-extrusion-base': 300,  // 内阴影的顶部高度
-                //         'fill-extrusion-opacity': 0.3,  // 内阴影的透明度
-                //     },
-                //     light: null,  // 设置光照效果为 null
-                // },)
-            }
-        },
-        initialization() {
-            if (this.map.getLayer("text_JSON_layer-num")) {
-                // 如果存在，移除图层
-                this.map.removeLayer("text_JSON_layer-num");
-            }
-            if (this.map.getLayer("shibeiPolygonLayer")) {
-                this.map.removeLayer("shibeiPolygonLayer")
-                this.map.removeLayer("text_JSON_layer")
-                this.map.removeSource("shibeiPolygonSource")
-            }
-            if (this.map.getLayer("SinglePolygonLayer")) {
-                this.map.removeLayer("SinglePolygonLayer")
-                this.map.removeLayer("SingleTextLayer")
-                this.map.removeSource("SinglePolygonSource")
-            }
-
-            for (let i = 8; i <= 18; i++) {
-                if (this.map.getLayer("lineBufferLayer-" + i)) {
-                    this.map.removeLayer("lineBufferLayer-" + i)
-                    this.map.removeSource("lineBufferSource-" + i)
-                }
-            }
-            if (this.map.getLayer("pointDimensions")) {
-                this.map.removeLayer("pointDimensions")
-                this.map.removeSource("pointDimensions")
-                this.map.removeImage("markIcons")
-            }
-            if (this.map.getLayer("pointDimension")) {
-                this.map.removeLayer("pointDimension")
-                this.map.removeSource("pointDimension")
-                this.map.removeImage("markIcon")
-            }
-            this.layersIndex = 1;
-            this.buttonIndex = 0;
-            this.getPolygonJson(this.shibeiJson);
-            this.map.setZoom(12.5);
-            this.map.setCenter([120.38140448734, 36.11044959486]);
-            this.close();
-        },
         selectType(value, label) {
             // if (value === this.buttonIndex) {
             //     this.buttonIndex = 0
@@ -796,8 +542,255 @@ export default {
             }
             this.makeMarkers(json)
         },
+        initialization() {
+            if (polygonLayer) {
+                scene.removeLayer(polygonLayer);
+            }
+            if (lineLayer) {
+                scene.removeLayer(lineLayer);
+            }
+            if (textLayer) {
+                scene.removeLayer(textLayer);
+            }
+            this.iniMapGrid(shibeiJson)
+        },
+        init() {
+            const { darkStyle, lightStyle, } = this;
+            if (!shibeiJson) return false;
+
+            let styleConfig = darkStyle;
+            // if (this.mapStyleType == "light") {
+            // styleConfig = lightStyle;
+            // }
+            const iniCenter = [116.39743841556731, 39.9088810666821];
+            myMap = new GaodeMap({
+                pitch: 47.24716321414439,
+                mapStyle: "amap://styles/darkblue",
+                // style: styleConfig.style,
+                showLabel: false,
+                center: [120.362190755209, 36.0997500271275],
+                token: "fc14b42e0ca18387866d68ebd4f150c1",
+                zoom: 20,
+                isHotspot: false,
+                showIndoorMap: false,
+                showBuildingBlock: false,
+                // resizeEnable: true,
+                doubleClickZoom: false,
+                showRoad: false,
+                viewMode: "3D",
+                styleJson: [
+                    {
+                        "featureType": "road",
+                        "elementType": "all",
+                        "stylers": {
+                            "color": "#fff" // 或者设置为与地图背景相似的颜色
+                        }
+                    }
+                ]
+            });
+            scene = new Scene({
+                id: "map",
+                logoVisible: false,
+                map: myMap,
+            });
+            scene.on("loaded", async () => {
+                // this.iniMapBase(scene);
+                this.iniMapGrid(shibeiJson);
+            });
+        },
+        // 初始化底图
+        iniMapBase(scene) {
+            // console.log("-----------------iniMapBase");
+            // 底图服务
+            const baseLayer = new RasterLayer({
+                zIndex: 0,
+            });
+            baseLayer
+                .source("http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", {
+                    parser: {
+                        type: "rasterTile",
+                        tileSize: 1,
+                        minZoom: 6,
+                        maxZoom: 15,
+                        zoomOffset: 0,
+                    },
+                })
+                .style({
+                    opacity: 0.7,
+                });
+
+            // 注记服务
+            const annotionLayer = new RasterLayer({
+                zIndex: 2,
+            });
+            annotionLayer
+                .source("http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", {
+                    parser: {
+                        type: "rasterTile",
+                        tileSize: 1,
+                        minZoom: 6,
+                        maxZoom: 15,
+                        zoomOffset: 0,
+                    },
+                })
+                .style({
+                    opacity: 0.5,
+                });
+
+            scene.addLayer(baseLayer);
+            scene.addLayer(annotionLayer);
+
+        },
+        iniMapGrid(data) {
+            const { darkStyle, lightStyle, polygonData, polygonDotData, } = this;
+            console.log(data, '初始化网格');
+            let styleConfig = darkStyle;
+            if (this.mapStyleType == "light") {
+                styleConfig = lightStyle;
+            }
+            // 画区域面积
+            polygonLayer = new PolygonLayer({
+                autoFit: true,
+            })
+                // .size(0)
+                .source(data)
+                .color("name", styleConfig.polygonColor)
+                //   .shape("extrude")
+                .shape("fill")
+                .style({
+                    opacityLinear: {
+                        enable: false, // true - false
+                        dir: "in", // in - out
+                    },
+                    opacity: 1,
+                    heightfixed: true,
+                    pickLight: true,
+                    raisingHeight: 300,
+                    sourceColor: "#333",
+                    targetColor: "rgba(255,255,255, 0.5)",
+                });
+
+            scene.addLayer(polygonLayer);
+
+            // 画区域边
+            lineLayer = new LineLayer({
+                zIndex: 2,
+                name: "line2",
+            })
+                .source(data)
+                .shape("line")
+                .size(1)
+                .color("name", styleConfig.lineColor)
+                .style({
+                    opacity: 1,
+                })
+                .animate({
+                    interval: 1, // 间隔
+                    duration: 2, // 持续时间，延时
+                    trailLength: 2, // 流线长度
+                });
+            scene.addLayer(lineLayer);
+
+            // posLayer = new PointLayer({
+            //     zIndex: 4,
+            //     name: "gridPoint",
+            //     visible: false,
+            // })
+            //     .source(polygonDotData)
+            //     .shape("name", [
+            //         // "pos-red",
+            //         "pos-green",
+            //         // "pos-yellow"
+            //     ])
+            //     .size(12)
+            //     .style({
+            //         options: this.level === "grid" ? 1 : 0,
+            //         offsets: [0, 0],
+            //     });
+            // // scene.addLayer(posLayer);
+            // /*    if (this.level === 'grid') {
+            //       posLayer.show()
+            //     } else {
+            //       posLayer.hide()
+            //     }*/
+            textLayer = new PolygonLayer({
+                zIndex: 20,
+            })
+                .source(data)
+                .color("name", styleConfig.textColor)
+                .shape("name", "text")
+                .size(16)
+                .style({
+                    textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+                    textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直]
+                    spacing: 2, // 字符间距
+                    padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+                    stroke: styleConfig.textStrokeColor, // 描边颜色
+                    strokeWidth: 0.1, // 描边宽度
+                    strokeOpacity: 0.8,
+                    textAllowOverlap: true,
+                })
+                .active(true);
+            scene.addLayer(textLayer);
+            let popup;
+            //             polygonLayer.on("mousemove", (e) => {
+            //                 if (this.level === "grid") {
+            //                     return;
+            //                 }
+            //                 popup = new Popup({
+            //                     offsets: [60, 60],
+            //                     closeButton: false,
+            //                     maxWidth: 400,
+            //                 }).setLnglat(e.lngLat).setHTML(`
+            //             <div class="jw-popup-container">
+            //                 <div class="jw-popup-bg"></div>
+            //                 <div class="jw-popup-con">
+            //                   <div class="jw-popup-title">
+            //                       ${e.feature.properties.name}
+            //                   </div>
+            //                    <div class="jw-popup-des">
+            //                       ${e.feature.properties.description ? e.feature.properties.description : ""}
+            //                   </div>
+            //                 </div>
+            //           </div>
+            // `);
+            //                 scene.addPopup(popup);
+            //             });
+
+            // polygonLayer.on("mouseout", (e) => {
+            //     // 如果popup初始化没成功报错导致地图初始化失败
+            //     if (popup) {
+            //         popup.remove();
+            //     }
+            // });
+            polygonLayer.on("click", (e) => {
+                console.log(e);
+                if (e.feature.properties.name.indexOf("网格") != -1) {
+                    return
+                }
+                if (polygonLayer) {
+                    scene.removeLayer(polygonLayer);
+                }
+                if (lineLayer) {
+                    scene.removeLayer(lineLayer);
+                }
+                if (textLayer) {
+                    scene.removeLayer(textLayer);
+                }
+                this.getBoundary(e.feature.properties.adcode || e.feature.properties.subId)
+            });
+            // posLayer.on("click", (e) => {
+            //     console.log(e);
+            // });
+        },
         getBoundary(id) {
             const ts = Date.now();
+            const { darkStyle, lightStyle, polygonData, polygonDotData, } = this;
+            console.log(shibeiJson, '初始化网格');
+            let styleConfig = darkStyle;
+            if (this.mapStyleType == "light") {
+                styleConfig = lightStyle;
+            }
             let signConfig = {
                 key: '612d304095c50369c3ef06e490f05779eeb8f19ff16566c73aeafafc5fa01970',
                 dataType: 'real',
@@ -820,147 +813,42 @@ export default {
                     ts
                 }
             }).then(e => {
-                if (e.data.code == 0 && e.data.data) {
-                    if (e.data.data.agencyDistribution && e.data.data.agencyDistribution.length == 0) {
-                        return
-                    }
-                    if (this.map.getLayer("shibeiPolygonLayer")) {
-                        this.map.removeLayer("shibeiPolygonLayer")
-                        this.map.removeLayer("text_JSON_layer")
-                        this.map.removeSource("shibeiPolygonSource")
-                    }
-                    if (this.map.getLayer("SinglePolygonLayer")) {
-                        this.map.removeLayer("SinglePolygonLayer")
-                        this.map.removeLayer("SingleTextLayer")
-                        this.map.removeSource("SinglePolygonSource")
-                    }
-                    for (let i = 8; i <= 18; i++) {
-                        if (this.map.getLayer("lineBufferLayer-" + i)) {
-                            this.map.removeLayer("lineBufferLayer-" + i)
-                            this.map.removeSource("lineBufferSource-" + i)
-                        }
-                    }
-                    let obj = {
-                        type: "FeatureCollection",
-                        name: "index",
-                        features: e.data.data.agencyDistribution
-                    }
-                    obj.features.forEach(f => {
-                        f.type = "Feature"
-                        f.properties = {}
-                        f.geometry = {}
-                        f.properties.subId = f.subId || ""
-                        f.properties.name = f.subName || ""
-                        f.geometry.type = "MultiPolygon"
-                        f.geometry.coordinates = [[JSON.parse(f.subAreaMarks)]] || []
-                        delete f.agencyLevel
-                        delete f.subAreaMarks
-                        delete f.subCenterMark
-                        delete f.subId
-                        delete f.subName
-                    })
-                    this.getPolygonJson(obj)
-
-                    if (this.features["properties"]["name"].indexOf("社区") != -1) {
-                        this.selectType(0, "")
-                        this.layersIndex = 3
-                    }
+                let obj = {
+                    type: "FeatureCollection",
+                    name: "index",
+                    features: e.data.data.agencyDistribution
                 }
+                obj.features.forEach(f => {
+                    f.type = "Feature"
+                    f.properties = {}
+                    f.geometry = {}
+                    f.properties.subId = f.subId || ""
+                    f.properties.name = f.subName || ""
+                    f.geometry.type = "MultiPolygon"
+                    f.geometry.coordinates = [[JSON.parse(f.subAreaMarks)]] || []
+                    delete f.agencyLevel
+                    delete f.subAreaMarks
+                    delete f.subCenterMark
+                    delete f.subId
+                    delete f.subName
+                })
+
+                this.iniMapGrid(obj)
             }).catch(f => {
                 console.log(f);
             })
         },
-        makeMarkers(json) {
-            const _this = this;
-            if (_this.map.getLayer("pointDimension")) {
-                _this.map.removeLayer("pointDimension")
-                _this.map.removeSource("pointDimension")
-                _this.map.removeImage("markIcon")
-            }
-            _this.map.loadImage(markIcon, function (error, image) {
-                _this.map.addImage("markIcon", image);
-                _this.map.addSource("pointDimension", {
-                    type: "geojson" /* geojson类型资源 */,
-                    data: json
-                });
-                _this.map.addLayer({
-                    id: "pointDimension",
-                    type: "symbol" /* symbol类型layer，一般用来绘制点*/,
-                    source: "pointDimension",
-                    layout: {
-                        "icon-image": "markIcon",
-                        "icon-size": 1,
-                    },
-                    // paint: {
-                    //   "circle-radius": 4,
-                    //   "circle-color": "#B42222"
-                    // }
-                });
-                //
-                _this.map.addLayer({
-                    id: "pointDimension-text",
-                    type: "symbol",
-                    source: "pointDimension",
-                    layout: {
-                        "text-field": "{resiNum}", // 替换为包含文字信息的属性
-                        "text-size": 15,
-                        "text-offset": [0, -5], // 调整文字位置，根据需要调整
-                        // "text-background-color": "#000", // 设置文字背景色
-                        // "text-background-opacity": 0.7, // 设置文字背景透明度
-                    },
-                    paint: {
-                        "text-color": "#fff", // 设置文字颜色
-                        "text-halo-width": 10, // 设置文字描边宽度，模拟背景宽度
-                        "text-halo-color": "#000", // 设置文字描边颜色，模拟背景颜色
-                    },
-                });
-            })
-            _this.layersIndex = 3
-
-        },
-        makeMarker(json) {
-            const _this = this;
-            if (_this.map.getLayer("pointDimensions")) {
-                _this.map.removeLayer("pointDimensions")
-                _this.map.removeSource("pointDimensions")
-                _this.map.removeImage("markIcons")
-            }
-            _this.showFirst = true
-            _this.map.loadImage(markIcons, function (error, image) {
-                _this.map.addImage("markIcons", image);
-                _this.map.addSource("pointDimensions", {
-                    type: "geojson" /* geojson类型资源 */,
-                    data: json
-                });
+        // getPolygonJson(obj) {
+        //     let shibeiPolyline = JSON.parse(JSON.stringify(obj))
+        //     for (let i = 0; i < shibeiPolyline.features.length; i++) {
+        //         shibeiPolyline.features[i].geometry.type = 'MultiLineString' //面转线
+        //         shibeiPolyline.features[i].geometry.coordinates = this.convertPolygonToPolyline(shibeiPolyline.features[
+        //             i].geometry.coordinates)
+        //     }
+        //     this.addPolygon(obj)
+        //     this.addPolyline(shibeiPolyline)
 
-                _this.map.addLayer({
-                    id: "pointDimensions",
-                    type: "symbol" /* symbol类型layer，一般用来绘制点*/,
-                    source: "pointDimensions",
-                    layout: {
-                        "icon-image": "markIcons",
-                        "icon-size": 2,
-                    },
-                    // paint: {
-                    //   "circle-radius": 4,
-                    //   "circle-color": "#B42222"
-                    // }
-                });
-            });
-        },
-        microgridDetails(item) {
-            this.showMicrogridDetails = true
-            this.microgridIndex = item.value
-            this.microgridObj.firstTitle = item.label
-        },
-        close() {
-            this.showFirst = false
-            this.showMicrogridDetails = false
-        },
-        handleCurrentChange(e) {
-            let times = 5
-            this.microgridObj.list = JSON.parse(JSON.stringify(this.microgridObjCopy.list)).slice(e * times - times, e * times)
-        }
+        // },
     }
 }
 </script>
diff --git a/src/views/screenLeft/left2.vue b/src/views/screenLeft/left2.vue
index acbb931..5e16e4b 100644
--- a/src/views/screenLeft/left2.vue
+++ b/src/views/screenLeft/left2.vue
@@ -4,44 +4,29 @@
     <div>
       <div class="d-title">
         <img src="./../../assets/icon/point.png" />
-        <div>{{'社区人员架构'}}</div>
+        <div>{{ '社区人员架构' }}</div>
       </div>
 
       <div class="frame">
         <div class="frame-row">
-          {{communityName}}
+          {{ communityName || '所属社区' }}
         </div>
         <div class="frame-arrow">
           <img src="./../../assets/icon/arrow.png" />
 
         </div>
         <div class="frame-multirow">
-          <div class="multirowitem"
-               ref="showClgb"
-               @click="clickItem('showClgb')"> {{'处理干部包联社区'}}
-            <screen-popup-ydzl :top="top"
-                               :left="left"
-                               :memberInfo="memberInfo"
-                               :visible.sync="showObj['showClgb'] ">
+          <div class="multirowitem" ref="showClgb" @click="clickItem('showClgb')"> {{ '处理干部包联社区' }}
+            <screen-popup-ydzl :top="top" :left="left" :memberInfo="clgbMemberInfo" :visible.sync="showObj['showClgb']">
             </screen-popup-ydzl>
           </div>
 
-          <div class="multirowitem"
-               ref="showYxgz"
-               @click="clickItem('showYxgz')"> {{'一线工作组'}}
-            <screen-popup-ydzl :top="top"
-                               :left="left"
-                               :memberInfo="memberInfo"
-                               :visible.sync="showObj['showYxgz']">
+          <div class="multirowitem" ref="showYxgz" @click="clickItem('showYxgz')"> {{ '一线工作组' }}
+            <screen-popup-ydzl :top="top" :left="left" :memberArr="memberInfoYxgz" :visible.sync="showObj['showYxgz']">
             </screen-popup-ydzl>
           </div>
-          <div class="multirowitem"
-               ref="showDjzd"
-               @click="clickItem('showDjzd')"> {{'党建指导员'}}
-            <screen-popup-ydzl :top="top"
-                               :left="left"
-                               :memberInfo="memberInfo"
-                               :visible.sync="showObj['showDjzd']">
+          <div class="multirowitem" ref="showDjzd" @click="clickItem('showDjzd')"> {{ '党建指导员' }}
+            <screen-popup-ydzl :top="top" :left="left" :memberInfo="memberInfoDjzd" :visible.sync="showObj['showDjzd']">
             </screen-popup-ydzl>
           </div>
         </div>
@@ -49,31 +34,16 @@
           <img src="./../../assets/icon/arrow.png" />
         </div>
         <div class="frame-multirow">
-          <div class="multirowitem"
-               ref="showSqsj"
-               @click="clickItem('showSqsj')"> {{'社区书记'}}
-            <screen-popup-ydzl :top="top"
-                               :left="left"
-                               :memberInfo="memberInfo"
-                               :visible.sync="showObj['showSqsj']">
+          <div class="multirowitem" ref="showSqsj" @click="clickItem('showSqsj')"> {{ '社区书记' }}
+            <screen-popup-ydzl :top="top" :left="left" :memberInfo="memberInfoSqsj" :visible.sync="showObj['showSqsj']">
             </screen-popup-ydzl>
           </div>
-          <div class="multirowitem"
-               ref="showSqfsj"
-               @click="clickItem('showSqfsj')"> {{'社区副书记'}}
-            <screen-popup-ydzl :top="top"
-                               :left="left"
-                               :memberInfo="memberInfo"
-                               :visible.sync="showObj['showSqfsj']">
+          <div class="multirowitem" ref="showSqfsj" @click="clickItem('showSqfsj')"> {{ '社区副书记' }}
+            <screen-popup-ydzl :top="top" :left="left" :memberInfo="memberInfoSqfs" :visible.sync="showObj['showSqfsj']">
             </screen-popup-ydzl>
           </div>
-          <div class="multirowitem"
-               ref="showDwwy"
-               @click="clickItem('showDwwy')"> {{'党委委员'}}
-            <screen-popup-ydzl :top="top"
-                               :left="left"
-                               :memberInfo="memberInfo"
-                               :visible.sync="showObj['showDwwy']">
+          <div class="multirowitem" ref="showDwwy" @click="clickItem('showDwwy')"> {{ '党委委员' }}
+            <screen-popup-ydzl :top="top" :left="left" :memberInfo="memberInfoDwwy" :visible.sync="showObj['showDwwy']">
             </screen-popup-ydzl>
           </div>
         </div>
@@ -82,42 +52,30 @@
     <div>
       <div class="d-title grid-title">
         <img src="./../../assets/icon/point.png" />
-        <div>{{'网格人员架构'}}</div>
-        <div v-if="isStreet"
-             class="agency-select">
-          <div class="item"
-               ref="grid"
-               @click="onChangeGrid">
-            <div>{{selectGrid.label === '' ? '全部网格' : selectGrid.label}}</div>
-            <svg-icon icon-class="bottom-sword"
-                      fill="#8ec6d8">
+        <div>{{ '网格人员架构' }}</div>
+        <div v-if="isStreet && shibeiAgencyType == 'community'" class="agency-select">
+          <div class="item" ref="grid" @click="onChangeGrid">
+            <div>{{ selectGrid.label === '' ? '全部网格' : selectGrid.label }}</div>
+            <svg-icon icon-class="bottom-sword" fill="#8ec6d8">
             </svg-icon>
-            <screen-dropdown-menu top="45px"
-                                  :menuList="gridList"
-                                  :visible.sync="gridDropMenuVisible"
-                                  :defaultSelected="selectGrid.value"
-                                  @onChooseItem="onChooseGrid">
+            <screen-dropdown-menu top="45px" :menuList="gridList" :visible.sync="gridDropMenuVisible"
+              :defaultSelected="selectGrid.value" @onChooseItem="onChooseGrid">
             </screen-dropdown-menu>
           </div>
         </div>
       </div>
       <div class="frame">
         <div class="frame-row">
-          {{gridName}}
+          {{ gridName || '所属网格' }}
         </div>
         <div class="frame-arrow">
           <img src="./../../assets/icon/arrow.png" />
 
         </div>
         <div class="frame-onerow">
-          <div class="rowitem"
-               ref="showWgzb"
-               @click="clickItem('showWgzb')"> {{'网格支部书记'}}
-            <screen-popup-ydzl :top="top"
-                               :left="left"
-                               :width="width"
-                               :memberInfo="memberInfo"
-                               :visible.sync="showObj['showWgzb']">
+          <div class="rowitem" ref="showWgzb" @click="clickItem('showWgzb')"> {{ '网格支部书记' }}
+            <screen-popup-ydzl :top="top" :left="left" :width="width" :memberInfo="memberInfo"
+              :visible.sync="showObj['showWgzb']">
             </screen-popup-ydzl>
           </div>
 
@@ -125,18 +83,12 @@
         <div class="frame-arrow">
           <img src="./../../assets/icon/arrow.png" />
         </div>
-        <div class="frame-onerow"
-             ref="showWgz"
-             @click="clickItem('showWgz')">
-          <div class="rowitem"> {{'网格长'}}
-            <screen-popup-ydzl :top="top"
-                               :left="left"
-                               :width="width"
-                               :memberInfo="memberInfo"
-                               :visible.sync="showObj['showWgz']">
+        <div class="frame-onerow" ref="showWgz" @click="clickItem('showWgz')">
+          <div class="rowitem"> {{ '网格长' }}
+            <screen-popup-ydzl :top="top" :left="left" :width="width" :memberInfo="memberInfo"
+              :visible.sync="showObj['showWgz']">
             </screen-popup-ydzl>
           </div>
-
         </div>
 
         <div class="grid">
@@ -144,55 +96,43 @@
             <div class="frame-arrow2">
               <img src="./../../assets/icon/arrow2.png" />
             </div>
-
             <div class="grid-member">
-              <div class="grid-member-title">{{'专职网格员'}}</div>
-              <!-- v-if="isStreet" -->
-              <div 
-                   class="grid-member-main">
-                <div class="memberitem"
-                     v-for="(item,index) in memberLeftList"
-                     :key="index"
-                     :ref="'leftMember'+index"
-                     @click="clickLeftMemberItem(index)">
-                  {{item.name}}
-
-                  <screen-popup-ydzl :top="topMember"
-                                     :left="leftMember"
-                                     :width="widthMember"
-                                     :fontSize="fontSizeMember"
-                                     :memberInfo="memberInfo"
-                                     :visible.sync="showLeftMember[index]">
-                  </screen-popup-ydzl>
-
-                </div>
-              </div>
+              <div class="grid-member-title" @click="clickItem('showZzwgy')">{{ '专职网格员' }}</div>
+              <screen-popup-ydzl :top="tops" :width="width" :left="left" :memberArr="memberInfoZzwgy"
+                :visible.sync="showObj['showZzwgy']">
+              </screen-popup-ydzl>
             </div>
           </div>
           <div class="grid-item">
             <div class="frame-arrow2">
               <img src="./../../assets/icon/arrow2.png" />
             </div>
-<!-- v-if="isStreet" -->
             <div class="grid-member">
-              <div class="grid-member-title">{{'专职网格管理员'}}</div>
-              <div 
-                   class="grid-member-main">
-                <div class="memberitem"
-                     v-for="(item,index) in memberRightList"
-                     :key="index"
-                     :ref="'rightMember'+index"
-                     @click="clickRightMemberItem(index)">
-                  {{item.name}}
-                  <screen-popup-ydzl :top="topMember"
-                                     :left="leftMember"
-                                     :width="widthMember"
-                                     :fontSize="fontSizeMember"
-                                     :memberInfo="memberInfo"
-                                     :visible.sync="showRightMember[index]">
-                  </screen-popup-ydzl>
-                </div>
-              </div>
+              <div class="grid-member-title" @click="clickItem('showBssb')">{{ '"北尚诉办"专职终端网格员' }}</div>
+              <screen-popup-ydzl :top="topss" :left="left" :memberInfo="memberInfoBssb"
+                :visible.sync="showObj['showBssb']">
+              </screen-popup-ydzl>
+            </div>
+          </div>
+          <div class="grid-item">
+            <div class="frame-arrow2">
+              <img src="./../../assets/icon/arrow2.png" />
+            </div>
+            <div class="grid-member">
+              <div class="grid-member-title" @click="clickItem('showZywg')">{{ '专业网格管理员' }}</div>
+              <screen-popup-ydzl :top="tops" :left="left" :memberArr="memberInfoZywg" :visible.sync="showObj['showZywg']">
+              </screen-popup-ydzl>
+            </div>
+          </div>
+          <div class="grid-item">
+            <div class="frame-arrow2">
+              <img src="./../../assets/icon/arrow2.png" />
+            </div>
+            <div class="grid-member">
+              <div class="grid-member-title" @click="clickItem('showJzwg')">{{ '兼职网格管理员' }}</div>
+              <screen-popup-ydzl :top="tops" :left="left" :memberArr="memberInfoJzwg" :visible.sync="showObj['showJzwg']">
+              </screen-popup-ydzl>
+
             </div>
           </div>
         </div>
@@ -202,23 +142,23 @@
     <div class="left2-static">
       <div class="static-item">
         <div class="static-item-title">网格支部</div>
-        <div class="static-item-num">32</div>
+        <div class="static-item-num">{{ wgzbTotal }}</div>
       </div>
       <div class="static-item">
         <div class="static-item-title">网格支部书记</div>
-        <div class="static-item-num">32</div>
+        <div class="static-item-num">{{ wgzbsjTotal }}</div>
       </div>
       <div class="static-item">
         <div class="static-item-title">网格长</div>
-        <div class="static-item-num">45</div>
+        <div class="static-item-num">{{ wgzTotal }}</div>
       </div>
       <div class="static-item">
         <div class="static-item-title">专职网格员</div>
-        <div class="static-item-num">121</div>
+        <div class="static-item-num">{{ zzwgyTotal }}</div>
       </div>
       <div class="static-item">
         <div class="static-item-title">专业网格管理员</div>
-        <div class="static-item-num">28</div>
+        <div class="static-item-num">{{ zywgglyTotal }}</div>
       </div>
     </div>
   </div>
@@ -226,34 +166,22 @@
 
 <script>
 import { mapGetters } from "vuex"
-
+import { getListForCommnity, getListForGrid, getCommunityStatistics, getGridoption } from "../../api/hulianApi"
 export default {
   name: "screen-left2",
-  data () {
+  data() {
     return {
-      communityName: "即墨路街道-恩县路社区",
-      gridName: "恩县路社区-第一网格",
-      gridList: [
-        {
-          name: '第一网格',
-          id: '1'
-        },
-        {
-          name: '第二网格',
-          id: '2'
-        },
-        {
-          name: '第三网格',
-          id: '3'
-        },
-      ],
+      communityName: "",
+      gridName: "",
+      gridList: [],
 
       isStreet: false,
 
       top: '33px',
+      tops: '-143px',
+      topss: '-33px',
       left: '0px',
       width: '578px',
-
       showObj: {
         showClgb: false,
         showYxgz: false,
@@ -262,181 +190,84 @@ export default {
         showSqfsj: false,
         showDwwy: false,
 
+        showZzwgy: false,
+        showBssb: false,
+        showZywg: false,
+        showJzwg: false,
+
         showWgzb: false,
         showWgz: false,
       },
 
       gridDropMenuVisible: false,
       selectGrid: {
-        value: '1',
-        label: '网格1'
+
       },
-      gridList: [
-        {
-          value: '1',
-          label: '网格1'
-        },
-        {
-          value: '2',
-          label: '网格2'
-        },
-        {
-          value: '3',
-          label: '网格3'
-        },
-      ],
 
       memberInfo: {
         duty: '职务',
         name: '张三',
         phone: '15999999999'
       },
-
-      memberLeftList: [
-        {
-          duty: '职务',
-          name: '左1',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '左2',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '左3',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '左4',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '左5',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '左6',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '左7',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '左8',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '左9',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '左10',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '左11',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '左12',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '左13',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '左14',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '左15',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '左16',
-          phone: '15111111111'
-        }
-      ],
-      memberRightList: [
-        {
-          duty: '职务',
-          name: '右1',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '右2',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '右3',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '右4',
-          phone: '15111111111'
-        },
-        {
-          duty: '职务',
-          name: '右5',
-          phone: '15111111111'
-        },
-      ],
+      clgbMemberInfo: {},
+      memberInfoYxgz: [],
+      memberInfoDjzd: {},
+      memberInfoDwwy: {},
+      memberInfoSqfs: {},
+      memberInfoSqsj: {},
+      memberLeftList: [],
+
+      memberInfoZzwgy: [],
+      memberInfoBssb: {},
+      memberInfoZywg: [],
+      memberInfoJzwg: [],
+
+      memberRightList: [],
       showLeftMember: [],
       showRightMember: [],
       topMember: '26px',
       leftMember: '0px',
       widthMember: '100px',
-      fontSizeMember: '15px'
+      fontSizeMember: '15px',
 
+      wgzbTotal: '',
+      wgzbsjTotal: '',
+      wgzTotal: '',
+      zzwgyTotal: '',
+      zywgglyTotal: ''
     }
   },
-  created () {
+  created() {
 
   },
   watch: {
-    shibeiAId (value) {
+    shibeiAId(value) {
       console.log('切换区域id:' + value)
       console.log('切换区域Name:' + this.shibeiName)
       console.log('切换区域类型:' + this.shibeiAgencyType)
 
       this.communityName = this.shibeiName
-      if (this.shibeiAgencyType === 'street') {
-        this.isStreet = true
-
+      if (this.shibeiAgencyType === 'community') {
+        this.getGridoption()
+        this.getCommunityStatistics()
+        if (value) {
+          this.isStreet = true
+        } else {
+          this.isStreet = false
+        }
       } else {
         this.isStreet = false
       }
-
-
     }
   },
   computed: {
     ...mapGetters(['shibeiAId', 'shibeiName', 'shibeiAgencyType'])
   },
-  mounted () {
-    if (this.shibeiAgencyType === 'street') {
+  mounted() {
+    console.log(this.shibeiAgencyType);
+    if (this.shibeiAgencyType === 'community') {
+      console.log(this.selectGrid.label);
       this.isStreet = true
-      this.gridName = this.selectGrid.label
     } else {
       this.isStreet = false
     }
@@ -492,7 +323,7 @@ export default {
 
   },
   methods: {
-    initShow (type) {
+    initShow(type) {
       for (let key in this.showObj) {
 
         if (key !== type) {
@@ -501,21 +332,129 @@ export default {
       }
 
     },
-    clickItem (type) {
+    async getCommunityStatistics() {
+      try {
+        let params = {
+          communityId: this.shibeiAId,//this.shibeiAId 
+        }
+        const { data, code, msg } = await getListForGrid(params)
+        if (code == 0) {
+          this.wgzbTotal = data.girdNum || 0;
+          this.wgzbsjTotal = data.girdShujiNum || 0;
+          this.wgzTotal = data.girdHeadNum || 0;
+          this.zzwgyTotal = data.girdZhuanzhiNum || 0;
+          this.zywgglyTotal = data.girdZhuanyeNum || 0;
+        }
+      } catch (err) {
+        console.error(err)
+      }
+    },
+    async getListForCommnity(type) {
+      try {
+        let params = {
+          communityId: this.shibeiAId,//1202772469238554625
+          type
+        }
+        const { data, code, msg } = await getListForCommnity(params)
+        if (code == 0) {
+          const typeMap = {
+            '1': 'clgbMemberInfo',
+            '2': 'memberInfoYxgz',
+            '3': 'memberInfoDjzd',
+            '4': 'memberInfoSqsj',
+            '5': 'memberInfoSqfs',
+            '6': 'memberInfoDwwy',
+          };
+          const propertyName = typeMap[type];
+          if (propertyName) {
+            this[propertyName] = (type === '2') ? data.map(item => ({ name: item.name, phone: item.mobile })) : {
+              name: data[0].name,
+              phone: data[0].mobile
+            };
+          }
+        }
+      } catch (err) {
+        console.error(err)
+      }
+    },
+    async getListForGrid(type) {
+      try {
+        let params = {
+          gridId: this.shibeiAId,//'1224237268259110914'
+          type: type - 6
+        }
+        const { data, code, msg } = await getListForGrid(params)
+        if (code == 0) {
+          const typeMap = {
+            '1': 'memberInfoZzwgy',
+            '2': 'memberInfoBssb',
+            '3': 'memberInfoZywg',
+            '4': 'memberInfoJzwg'
+          };
+          const propertyName = typeMap[type - 6];
+          console.log(propertyName);
+          if (propertyName) {
+            this[propertyName] = (type === '8') ? { name: data[0].name, phone: data[0].mobile } : data.map(item => ({ name: item.name, phone: item.mobile, property: item.property }));
+          }
+        }
+      } catch (err) {
+        console.error(err)
+      }
+    },
+    async getGridoption() {
+      try {
+        let params = {
+          agencyId: this.shibeiAId,
+          purpose: 'addorupdate'
+        }
+        const { data, code, msg } = await getGridoption(params)
+        if (code == 0) {
+          if (data) {
+            this.gridList = data.map(item => ({ label: item.label, id: item.value }))
+            this.selectGrid = { label: this.gridList[0].label, id: this.gridList[0].value }
+            this.gridName = this.selectGrid.label
+            console.log(this.gridList);
+          }
+        }
+      } catch (err) {
+        console.error(err)
+      }
+    },
+
+    clickItem(type) {
+      const typeMap = {
+        'showClgb': '1',
+        'showYxgz': '2',
+        'showDjzd': '3',
+        'showSqsj': '4',
+        'showSqfsj': '5',
+        'showDwwy': '6',
+        'showZzwgy': '7',
+        'showBssb': '8',
+        'showZywg': '9',
+        'showJzwg': '10',
+      };
+      const selectedType = typeMap[type];
+      if (selectedType && Number(selectedType) < 7) {
+        this.getListForCommnity(selectedType);
+      } else {
+        this.getListForGrid(selectedType);
+
+      }
       if (this.isStreet) {
         this.initShow(type)
         this.showObj[type] = !this.showObj[type]
       }
-
     },
-    onChangeGrid () {
+    onChangeGrid() {
       this.gridDropMenuVisible = !this.gridDropMenuVisible
     },
-    onChooseGrid (gridItem) {
+    onChooseGrid(gridItem) {
+      console.log(gridItem, '选中id');
       this.selectGrid = gridItem
       this.gridName = this.selectGrid.label
     },
-    clickLeftMemberItem (index) {
+    clickLeftMemberItem(index) {
 
       const position = (index + 1) % 3//计算在每一行第几个，确定popup的位置
       console.log(position)
@@ -531,7 +470,7 @@ export default {
       this.$set(this.showLeftMember, index, val)
 
     },
-    clickRightMemberItem (index) {
+    clickRightMemberItem(index) {
       const position = (index + 1) % 3//计算在每一行第几个，确定popup的位置
       console.log(position)
       if (position === 1) {//左1
@@ -541,11 +480,8 @@ export default {
       } else if (position === 0) {
         this.leftMember = '-24px'
       }
-
       const val = !this.showRightMember[index]
       this.$set(this.showRightMember, index, val)
-
-
     }
   }
 }
@@ -554,4 +490,9 @@ export default {
 <style lang="scss" src="style/left2.scss" scoped></style>
 <style lang="scss" src="style/agencySelect.scss" scoped></style>
 <style lang="scss" scoped>
+.frame-arrow {
+  img {
+    height: 53px;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/screenLeft/left3.vue b/src/views/screenLeft/left3.vue
index 2cc9170..9adbe20 100644
--- a/src/views/screenLeft/left3.vue
+++ b/src/views/screenLeft/left3.vue
@@ -10,12 +10,12 @@
         <div class="chartsGl" id="charts"></div>
         <!-- 饼图下面的底座 -->
         <div class="buttomCharts"></div>
-        <div class="legend">
+        <!-- <div class="legend">
           <div class="legend-item" v-for="(item, index) in optionData" :key="index">
             <div class="item-icon" :style="{ background: item.itemStyle.color }"></div>
             <div class="item-name">{{ item.name }}</div>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
     <div class='b-ljhd'>
@@ -35,7 +35,9 @@ import * as echarts from 'echarts'
 import 'echarts-gl'
 
 import { loadLjhdList } from './../../data/index'
-import { getIcpartyactivity } from '../../api/hulianApi'
+import { getIcpartyactivity ,getTypestatistics} from '../../api/hulianApi'
+
+import { mapGetters } from "vuex"
 export default {
   name: "screen-left3",
   data() {
@@ -84,17 +86,37 @@ export default {
     }
   },
 
-  mounted() {
-    this.getIcpartyactivity()
+ async mounted() {
+    await this.getIcpartyactivity()
+    // await this.getTypestatistics()
     this.$nextTick(function () {
       this.initChart();
     });
   },
-
+  computed: {
+    ...mapGetters(['shibeiAId'])
+  },
   methods: {
+    async getTypestatistics(){
+      try {
+        let params = {
+          agencyId:this.shibeiAId || '1175270520603930625',//this.shibeiAId 
+        }
+        const { data, code, msg } = await getTypestatistics(params)
+        if(code == 0){
+            this.optionData.forEach((item,index)=>{
+              item.name = data[index].label,
+              item.value = data[index].value
+            })
+            console.log( this.optionData);
+        }
+      } catch (err) {
+        console.error(err)
+      }
+    },  
     async getIcpartyactivity() {
       let params = {
-        agencyId: '1175270520603930625',
+        agencyId: this.shibeiAId|| '1175270520603930625',
         pageSize: 50,
         pageNo: 1
       }
@@ -248,6 +270,13 @@ export default {
           min: -1,
           max: 1
         },
+        // legend:{
+        //   bottom:20,
+        //   // left: '-15%',
+        //   textStyle: {
+        //     color: '#fff !important'
+        //   }
+        // },
         //此处是修改样式的重点
         grid3D: {
           show: false,
diff --git a/src/views/screenRight/right1.vue b/src/views/screenRight/right1.vue
index c1d00b0..6dcbb34 100644
--- a/src/views/screenRight/right1.vue
+++ b/src/views/screenRight/right1.vue
@@ -217,14 +217,12 @@ export default {
             }
     },
     onHover(e) {
-            console.log(e.target.className)
             if (e.target.className === 'dyfc-item-row3') {
                 // console.log(e.target);
                 let index = e.target.id;
                 let item = JSON.parse(e.target.dataset.obj);
                 this.showContent = this.dyfcList[index - 1].mainDeed
                 this.popupVisible = true
-              console.log(this.popupVisible);
             } else if (e.target.className === 'screen-popup-content') {
                 this.popupVisible = true
             } else {
diff --git a/src/views/screenRight/right3.vue b/src/views/screenRight/right3.vue
index 1d70e8e..1f1976c 100644
--- a/src/views/screenRight/right3.vue
+++ b/src/views/screenRight/right3.vue
@@ -522,7 +522,6 @@ export default {
                 element.developCount,
                 element.lawCount,
             ]);
-            console.log(this.eventStatList);
         },
     }
 }