diff --git a/src/views/modules/visual/basicinfo/basicInfoMain.vue b/src/views/modules/visual/basicinfo/basicInfoMain.vue
index c57aaef3..38908c51 100644
--- a/src/views/modules/visual/basicinfo/basicInfoMain.vue
+++ b/src/views/modules/visual/basicinfo/basicInfoMain.vue
@@ -1,73 +1,78 @@
 <template>
   <div style="position: relative">
-
     <!-- 组织路由 -->
     <div class="div_top">
       <div class="router_line"></div>
       <div class="div_router">
-        <span class="router_parents"
-              v-for="(item,index) in runAgencyArray"
-              @click="handleClickAgency(index)"
-              :key="index">{{item.name}}<span class="arrow">></span></span>
-
-        <span class="router_child">{{orgData.name}}</span>
+        <span
+          class="router_parents"
+          v-for="(item, index) in runAgencyArray"
+          @click="handleClickAgency(index)"
+          :key="index"
+          >{{ item.name }}<span class="arrow">></span></span
+        >
+
+        <span class="router_child">{{ orgData.name }}</span>
       </div>
     </div>
 
-    <people v-if="orgLevel==='people'"
-            :uid="selUserId"
-            ref="ref_people"></people>
-
-    <div v-show="orgLevel!=='people' "
-         class="div_content">
-
-      <basic-info-community v-show="orgLevel==='neighborHood'"
-                            @toSubAgency="toSubAgency"
-                            ref="ref_community"
-                            @refreshInfoList="refreshInfoList"></basic-info-community>
-
-      <div v-show="orgLevel!=='people'  && orgLevel!=='neighborHood'"
-           class="div_map"
-           id="map"
-           ref="map">
-
+    <people
+      v-if="orgLevel === 'people'"
+      :uid="selUserId"
+      ref="ref_people"
+    ></people>
+
+    <div v-show="orgLevel !== 'people'" class="div_content">
+      <basic-info-community
+        v-show="orgLevel === 'neighborHood'"
+        @toSubAgency="toSubAgency"
+        ref="ref_community"
+        @refreshInfoList="refreshInfoList"
+      ></basic-info-community>
+
+      <div
+        v-show="orgLevel !== 'people' && orgLevel !== 'neighborHood'"
+        class="div_map"
+      >
+        <grid-map />
         <div class="m-sidebar">
-          <div class="wrap"
-               :class="[{'wrap-hidden':!showAgencyList}]">
-            <div @click="hideAgencyList"
-                 class="arrow_tip">
-              <img src="@/assets/img/modules/visual/popup.png"
-                   alt />
+          <div class="wrap" :class="[{ 'wrap-hidden': !showAgencyList }]">
+            <div @click="hideAgencyList" class="arrow_tip">
+              <img src="@/assets/img/modules/visual/popup.png" alt />
             </div>
 
             <div class="div_agency_list">
               <div class="agency_main">
-                <el-scrollbar style="height:98%"
-                              wrap-style="overflow-x:hidden">
-
-                  <div v-if="subAgencyArray.length>0"
-                       class="agency_list">
-                    <div v-for="(item,index) in subAgencyArray"
-                         :key="index"
-                         @click="clickAgencyItem(item,index)"
-                         :class="['agency_item',{'agency_item_on':index%2 ==0}]">
-                      <div class="agency_item_name">{{item.name}}</div>
-
+                <el-scrollbar
+                  style="height: 98%"
+                  wrap-style="overflow-x:hidden"
+                >
+                  <div v-if="subAgencyArray.length > 0" class="agency_list">
+                    <div
+                      v-for="(item, index) in subAgencyArray"
+                      :key="index"
+                      @click="clickAgencyItem(item, index)"
+                      :class="[
+                        'agency_item',
+                        { agency_item_on: index % 2 == 0 },
+                      ]"
+                    >
+                      <div class="agency_item_name">{{ item.name }}</div>
                     </div>
                   </div>
                   <div v-else>
-                    <img src="@/assets/img/modules/visual/noData.png"
-                         alt=""
-                         srcset=""
-                         class="no-data-img" />
+                    <img
+                      src="@/assets/img/modules/visual/noData.png"
+                      alt=""
+                      srcset=""
+                      class="no-data-img"
+                    />
                   </div>
                 </el-scrollbar>
-
               </div>
             </div>
           </div>
         </div>
-
       </div>
 
       <div class="div_data">
@@ -87,185 +92,91 @@
         </div> -->
 
         <div class="div_info">
-          <el-scrollbar style="height:98%">
+          <el-scrollbar style="height: 98%">
             <div class="info_tip">
-              <img src="../../../../assets/img/shuju/title-tip.png"
-                   alt />
+              <img src="../../../../assets/img/shuju/title-tip.png" alt />
               <div class="tip_title">分类列表</div>
             </div>
 
-            <div class="info_loading"
-                 v-if="infoLoading">
+            <div class="info_loading" v-if="infoLoading">
               <screen-loading>加载中</screen-loading>
             </div>
 
-            <div v-if="!infoLoading"
-                 class="info_list">
-              <div v-for="(item,index) in listDatashow"
-                   :key="index"
-                   class="item">
+            <div v-if="!infoLoading" class="info_list">
+              <div
+                v-for="(item, index) in listDatashow"
+                :key="index"
+                class="item"
+              >
                 <div class="list_item">
-                  <div v-for="(colItem,colIndex) in item"
-                       :key="colIndex"
-                       class="list_item_col"
-                       @click="handleTo(colItem)">
-                    <img :src="colItem.dataIcon"
-                         alt />
+                  <div
+                    v-for="(colItem, colIndex) in item"
+                    :key="colIndex"
+                    class="list_item_col"
+                    @click="handleTo(colItem)"
+                  >
+                    <img :src="colItem.dataIcon" alt />
                     <div class="item_content">
-                      <div class="item_label">{{colItem.label}}</div>
-                      <div class="item_count">{{colItem.count}}</div>
+                      <div class="item_label">{{ colItem.label }}</div>
+                      <div class="item_count">{{ colItem.count }}</div>
                     </div>
-
                   </div>
                 </div>
-                <div :class="['item_line',{'last_line':index==(listDatashow.length-1)}]"></div>
+                <div
+                  :class="[
+                    'item_line',
+                    { last_line: index == listDatashow.length - 1 },
+                  ]"
+                ></div>
               </div>
-
             </div>
           </el-scrollbar>
         </div>
-
       </div>
     </div>
-
   </div>
-
 </template>
 
 <script>
-import 'ol/ol.css'
-import { Map, View } from 'ol'
-import TileLayer from 'ol/layer/Tile.js';
-import XYZ from 'ol/source/XYZ.js';
-import VectorLayer from 'ol/layer/Vector.js';
-import VectorSource from 'ol/source/Vector.js';
-import GeoJSON from 'ol/format/GeoJSON.js';
-import Point from "ol/geom/Point.js";
-import Feature from "ol/Feature.js";
-import Overlay from 'ol/Overlay';
-import { defaults as defaultInteractions, Select, DoubleClickZoom } from 'ol/interaction.js';
-import { getCenter, boundingExtent } from 'ol/extent.js';
-import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js';
-
-import nextTick from 'dai-js/tools/nextTick'
+import nextTick from "dai-js/tools/nextTick";
 import { mapGetters } from "vuex";
-import { Loading } from 'element-ui'; //引入Loading服务
+import { Loading } from "element-ui"; //引入Loading服务
 import { requestPost } from "@/js/dai/request";
 import BasicInfoCommunity from "./basicInfoCommunity";
 
 import People from "./people";
 import cptCard from "@/views/modules/visual/cpts/card";
+import gridMap from "@/views/modules/visual/basicinfo/cpts/grid-map";
 import ScreenLoading from "@/views/modules/visual/cpts/loading";
 
-var centerPointGlobal = [120.664619, 36.504963]
-
-let loading;//加载动画
-
-let map;
-let mapView;
-let gaodeMapLayer;//背景地图图层
-let parentLayer;//上级组织图层
-let parentSource;//上级组织多边形
-let polygonLayer;//变电站标注图层
-let iconLayer; // icon标注图层
-let iconSource; // icon
-let polygonSource;//变电站标注多边形
-let select;//选中标注
-
-let xoffset = 0
-let yoffset = 0
-
-
-//url图标
-
-let iconUrlArray = [
-  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
-  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
-  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
-];
-let textColorArray = [
-  'rgba(236, 69, 4, 0.66)',
-  'rgba(0, 146, 238, 0.75)',
-  'rgba(238, 151, 0, 0.8)'
-];
-let polygonColorArray = [
-  'rgba(210, 2, 2, 0.24)',
-  'rgba(43, 231, 253, 0.25)',
-  'rgba(183, 185, 0, 0.16)'
-];
-//变电站标注的文字样式
-var createTextStyle = function (feature) {
-  return new Text({
-    textAlign: undefined,
-    font: "18px Arial",
-    //fontFamily: "Courier New, monospace",
-    // fontWeight: "bold",
-    text: feature.values_.name,
-    backgroundFill: new Fill({
-      // color: 'rgba(0, 146, 238, 0.75)'
-      color: textColorArray[feature.values_.colorIndex]
-    }),
-    padding: [4, 10, 4, 10],
-    //text: "变电站名称",
-    fill: new Fill({ color: "#ffffff" }),
-    // stroke: new Stroke({ color: "#ffffff", width: 3 }),
-    offsetY: -30,
-    offsetX: -50,
-    overflow: true,
-  });
-};
+let loading; //加载动画
+
+export default {
+  name: "HomeMap",
+
+  components: { BasicInfoCommunity, People, cptCard, ScreenLoading, gridMap },
+
+  props: {
+    // vueFlag: {
+    //   type: String,
+    //   default: "alarm"
+    // }
+  },
 
-//上级组织标注样式
-var parentStyleFunction = (function () {
-  return function (feature) {
-    return new Style({
-      // fill: new Fill({
-      //   color: [255, 255, 255, 0.3]
-      // }),
-      stroke: new Stroke({
-        color: [0, 103, 182, 1],
-        width: 2
-      }),
-
-      // text: createTextStyle(feature)
-    });;
-  };
-})()
-
-
-//变电站标注样式
-var polygonStyleFunction = (function () {
-  return function (feature) {
-    return new Style({
-      fill: new Fill({
-        // color: [255, 255, 255, 0.3]
-        color: polygonColorArray[feature.values_.colorIndex]
-      }),
-      stroke: new Stroke({
-        color: polygonColorArray[feature.values_.colorIndex],
-        width: 3
-      }),
-
-      text: createTextStyle(feature)
-    });;
-  };
-})()
-
-const vueGis = {
-  name: 'HomeMap',
-  data () {
+  computed: {
+    ...mapGetters(["clientHeight"]),
+  },
+
+  data() {
     return {
       showAgencyList: false,
       agencyFadeIn: true,
-      centerPoint: [],//中心点位置
-      zoom: 14,//缩放范围：区14
-      minZoom: 1,//最小缩放
 
-      orgData: {},//当前组织对象
-      orgId: '',
-      orgLevel: '',
+      orgData: {}, //当前组织对象
+      orgId: "",
+      orgLevel: "",
 
-      subAgencyArray: [],//下拉框数据
+      subAgencyArray: [], //下拉框数据
       iconCoordinators: [],
       currentCoordinate: null,
       overlay: null,
@@ -275,725 +186,172 @@ const vueGis = {
 
       //右侧列表
       infoLoading: true,
-      listData: [],//得到的数据
-      listDatashow: [],//处理成一行两列的数据
+      listData: [], //得到的数据
+      listDatashow: [], //处理成一行两列的数据
 
       //下钻层级记录
       runNum: 0,
       runAgencyArray: [],
-      selUserId: '',
+      selUserId: "",
       center: [],
       zoom: null,
       parentPolygon: [],
 
-      centerFlag: 'point',//定义中心点的flag  point点 fit 自适应
-
-    }
+      centerFlag: "point", //定义中心点的flag  point点 fit 自适应
+    };
   },
-  async mounted () {
 
+  async mounted() {
     //加载组织数据
-    await this.loadOrgData()
-
-    //初始化地图
-    this.initMap()
-
-    await nextTick(300)
-    this.addParentLayer()
-    this.loadParentPolygon()
-    //添加标注图层
-    this.addPolygonLayer()
-
-    //添加icontuceng
-    this.addIconLayer()
-
-    //加载当前园区的标注
-    this.loadPolygon(this.subAgencyArray)
-    this.setMapLocation()
-    await this.loadList()
-
+    // await this.loadOrgData();
+    await this.loadList();
   },
+
   methods: {
-    handleTo (item) {
+    handleTo(item) {
       this.$router.push({
         path: `/main-shuju/visual-basicinfo-people-list`,
         query: {
           columnName: item.columnName,
           label: item.label,
           id: this.orgId,
-          level: this.orgLevel
-        }
+          level: this.orgLevel,
+        },
       });
     },
-    hideAgencyList () {
-      this.showAgencyList = !this.showAgencyList
-      // if (this.showAgencyList) {
-      //   this.agencyFadeIn = false
-      //   setTimeout(() => {
-      //     this.showAgencyList = false
-      //   }, 1000)
-
-      // } else {
-      //   this.agencyFadeIn = true
-      //   this.showAgencyList = true
-      // }
-
-
+    hideAgencyList() {
+      this.showAgencyList = !this.showAgencyList;
     },
 
     //获取右侧infolist数据
-    async loadList () {
-      this.infoLoading = true
-      const url = "/epmetuser/statsresiwarn/list"
+    async loadList() {
+      this.infoLoading = true;
+      const url = "/epmetuser/statsresiwarn/list";
       // const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/statsresiwarn/list"
       let params = {
         id: this.orgId,
-        level: this.orgLevel
-      }
+        level: this.orgLevel,
+      };
 
-      const { data, code, msg } = await requestPost(url, params)
-      this.infoLoading = false
+      const { data, code, msg } = await requestPost(url, params);
+      this.infoLoading = false;
       if (code === 0) {
-
-        this.listData = data
+        this.listData = data;
         // this.listData = this.listData1
-        this.listDatashow = []
-        let itemArray = []
+        this.listDatashow = [];
+        let itemArray = [];
         this.listData.forEach((item, index) => {
           if (!item.dataIcon) {
-            item.dataIcon = require('../../../../assets/img/modules/visual/dibao.png')
+            item.dataIcon = require("../../../../assets/img/modules/visual/dibao.png");
           }
 
-          if (index % 2 === 0) {//偶数
-            itemArray.push(item)
-            if ((index + 1) === this.listData.length) {
-              this.listDatashow.push(itemArray)
+          if (index % 2 === 0) {
+            //偶数
+            itemArray.push(item);
+            if (index + 1 === this.listData.length) {
+              this.listDatashow.push(itemArray);
             }
           } else {
-            itemArray.push(item)
-            this.listDatashow.push(itemArray)
-            itemArray = []
+            itemArray.push(item);
+            this.listDatashow.push(itemArray);
+            itemArray = [];
           }
-
         });
-
-
       } else {
-        this.$message.error(msg)
+        this.$message.error(msg);
       }
     },
 
     //子组件点击房间，刷新右侧list
-    refreshInfoList (selId, type) {
-      this.orgId = selId
-      this.level = ''
+    refreshInfoList(selId, type) {
+      this.orgId = selId;
+      this.level = "";
     },
 
     //点击组织列表数据
-    clickAgencyItem (item, index) {
-
+    clickAgencyItem(item, index) {
       let e = {
-        selected: []
-      }
+        selected: [],
+      };
       let one = {
-        values_: item
-      }
-      e.selected.push(one)
+        values_: item,
+      };
+      e.selected.push(one);
 
-      this.toSubAgency('polygon', e)
+      this.toSubAgency("polygon", e);
     },
 
     //下钻到下一级 type点击的类型:polygon 点击多边形（分为点击组织/小区）    people 点击详情
-    async toSubAgency (type, e, searchName) {
-
+    async toSubAgency(type, e, searchName) {
       //点击小区neighborHood显示楼栋，点击非小区，进入下一级地图
-      if (type === 'people') {
-        this.runNum++
-        this.runAgencyArray.push(this.orgData)
-        this.orgLevel = 'people'
-        this.selUserId = e
-        this.orgId = ''
+      if (type === "people") {
+        this.runNum++;
+        this.runAgencyArray.push(this.orgData);
+        this.orgLevel = "people";
+        this.selUserId = e;
+        this.orgId = "";
         this.orgData = {
-          id: '',
-          level: 'people',
-          name: '人员档案'
-        }
-        this.searchName = searchName
-
+          id: "",
+          level: "people",
+          name: "人员档案",
+        };
+        this.searchName = searchName;
       } else {
-
         if (!e) {
-          return false
+          return false;
         }
         if (!e.selected[0]) {
-          return false
+          return false;
         }
-        this.runNum++
-        this.orgData.center = map.getView().getCenter()
-        this.orgData.zoom = map.getView().getZoom()
-        console.log('center', map.getView().getCenter())
-        console.log('zoom', map.getView().getZoom())
+        this.runNum++;
+        this.orgData.center = map.getView().getCenter();
+        this.orgData.zoom = map.getView().getZoom();
+        console.log("center", map.getView().getCenter());
+        console.log("zoom", map.getView().getZoom());
 
-        this.runAgencyArray.push(this.orgData)
+        this.runAgencyArray.push(this.orgData);
 
-        this.subAgencyArray.forEach(item => {
+        this.subAgencyArray.forEach((item) => {
           if (item.id === e.selected[0].values_.id) {
-            this.orgId = item.id
-            this.orgLevel = item.level
-            this.orgData = item
+            this.orgId = item.id;
+            this.orgLevel = item.level;
+            this.orgData = item;
           }
         });
 
-        if (this.orgLevel === 'neighborHood') {
-          this.loadList()
+        if (this.orgLevel === "neighborHood") {
+          this.loadList();
           this.$nextTick(() => {
             // 小区id，小区名称
-            this.$refs.ref_community.initData(this.orgData.id, this.orgData.name);
+            this.$refs.ref_community.initData(
+              this.orgData.id,
+              this.orgData.name
+            );
           });
-
-        } else {
-          this.refreshMap(true)
-        }
-
-      }
-
-    },
-
-    //刷新地图
-    async refreshMap (isRefreshView) {
-
-      //加载组织数据
-      await this.loadOrgData()
-
-      //绘制父级组织数据
-      this.loadParentPolygon()
-      //绘制本级组织数据
-      this.loadPolygon(this.subAgencyArray)
-
-      //重置地图中心点
-
-      // if (isRefreshView) {
-      this.setMapLocation()
-
-      // }
-
-      await this.loadList()
-
-    },
-
-    //设置地图定位的中心点和缩放级别
-    setMapLocation () {
-      if (!this.zoom) {
-        this.setZoom(this.orgData.agencyLevel)
-      }
-      this.centerPoint = []
-
-
-      //如果存在中心点（返回时赋值）
-      if (this.center && this.center.length > 0) {
-        this.centerPoint = this.center
-        this.centerFlag = 'point'
-        this.center = []
-
-      } else if (parentLayer.getSource().getFeatures()[0]) {//如果是初次进入，不存在下级组织，用父级组织
-        this.centerFlag = 'flag_parent'
-
-
-      } else if (polygonLayer.getSource().getFeatures()[0]) {//如果是初次进入,存在下级组织
-        this.centerFlag = 'flag_polygon'
-
-      } else if (this.orgData.longitude && this.orgData.latitude) {
-        this.centerPoint.push(this.orgData.longitude)
-        this.centerPoint.push(this.orgData.latitude)
-        this.centerFlag = 'point'
-
-      } else {
-        this.centerPoint = centerPointGlobal
-        this.centerFlag = 'point'
-      }
-      // debugger
-      if (this.centerFlag === 'flag_parent') {
-        let parentFeatures = parentLayer.getSource().getFeatures()[0]
-        let polygon = parentFeatures.getGeometry();
-        map.getView().fit(polygon, map.getSize());
-        this.zoom = map.getView().getZoom() - 1
-
-      } else if (this.centerFlag === 'flag_polygon') {
-        let polygonFeatures = polygonLayer.getSource().getFeatures()[0]
-        let polygon = polygonFeatures.getGeometry();
-        map.getView().fit(polygon, map.getSize());
-        this.zoom = map.getView().getZoom() - 1
-
-      } else {
-        mapView.setCenter(this.centerPoint);
-
-      }
-      mapView.setZoom(this.zoom);
-
-
-
-    },
-
-    //返回所选组织
-    handleClickAgency (index) {
-      //如果是从小区返回，清空一下小区的人员显示列表
-      if (this.orgLevel === 'neighborHood') {
-
-        this.$nextTick(() => {
-          // 小区id，小区名称
-          this.$refs.ref_community.handleCloseAllUser();
-        });
-
-      }
-      const cutNum = this.runAgencyArray.length - index//要减去的长度
-      this.runNum = this.runNum - cutNum
-
-      this.orgData = this.runAgencyArray[index]
-
-      for (let i = 0; i < cutNum; i++) {
-        this.runAgencyArray.pop()
-      }
-
-      this.orgId = this.orgData.id
-      this.orgLevel = this.orgData.level
-      this.center = this.orgData.center
-      this.zoom = this.orgData.zoom
-
-      if (this.orgLevel === 'people') {
-
-      }
-
-      else if (this.orgLevel === 'neighborHood') {//显示小区
-
-      } else {
-
-        this.$nextTick(() => {
-          this.refreshMap(true)
-          this.$forceUpdate()
-        });
-
-      }
-
-    },
-
-    //加载组织数据
-    async loadOrgData () {
-
-      const url = "/gov/org/agency/maporg"
-      let params = {
-        orgId: this.orgId,
-        level: this.orgLevel
-      }
-
-      const { data, code, msg } = await requestPost(url, params)
-
-      if (code === 0) {
-
-        this.orgData = data
-        this.orgId = this.orgData.id
-        this.orgLevel = this.orgData.level
-        this.parentPolygon = []
-        this.parentPolygon.push(data)
-        if (data.children && data.children.length > 0) {
-          this.subAgencyArray = data.children
         } else {
-          this.subAgencyArray = []
+          this.refreshMap(true);
         }
-
-      } else {
-        this.$message.error(msg)
-      }
-
-    },
-
-    //加载父级组织多边形
-    loadParentPolygon () {
-      parentSource.clear()//清空变电站标注
-
-      let featureData = []//标注数据
-      if (this.parentPolygon && this.parentPolygon.length > 0) {//判断是否存在下级标注
-        let oneData = {}
-
-        this.parentPolygon.forEach(agencyItem => {
-
-          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
-            oneData = {
-              type: 'Feature',
-              id: agencyItem.id,
-              properties: {
-                id: agencyItem.id,
-                level: agencyItem.level,
-                name: agencyItem.name
-              },
-              geometry: {
-                type: 'Polygon',
-                coordinates: [],
-              },
-            }
-            let coorArray = agencyItem.coordinates.split(',')//坐标数组
-
-            let itemArray = []//单个点位的[lon,lat]，数组
-            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
-
-            coorArray.forEach((item, index) => {
-
-              if (index % 2 == 0) {//偶
-                item = (parseFloat(item) + parseFloat(xoffset)) + ''
-                itemArray.push(item)
-              } else {//奇
-                item = (parseFloat(item) + parseFloat(yoffset)) + ''
-                itemArray.push(item)
-
-                polygonArray.push(itemArray)
-                itemArray = []
-              }
-
-            });
-            oneData.geometry.coordinates.push(polygonArray)
-            featureData.push(oneData)
-          }
-        });
-      }
-
-      if (featureData && featureData.length > 0) {
-        var geojsonObject = {
-          'type': 'FeatureCollection',
-          'features': featureData
-        };
-        let feature = (new GeoJSON()).readFeatures(geojsonObject)
-        parentSource.addFeatures(feature)
-
-      }
-
-    },
-
-    //加载当前园区的标注
-    loadPolygon (subAgencyArray) {
-      polygonSource.clear()//清空多边形标注
-      iconSource.clear()//清空多边形标注
-
-      let featureData = []//标注数据
-      if (subAgencyArray && subAgencyArray.length > 0) {//判断是否存在下级标注
-        let oneData = {}
-
-        let count = 0
-        for (let i = 0; i < subAgencyArray.length; i++) {
-          const agencyItem = subAgencyArray[i]
-
-
-          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
-            let urlNum = count % 3
-            count++
-
-            oneData = {
-              type: 'Feature',
-              id: agencyItem.id,
-              properties: {
-                id: agencyItem.id,
-                level: agencyItem.level,
-                name: agencyItem.name,
-                colorIndex: urlNum//颜色随机的索引
-              },
-              geometry: {
-                type: 'Polygon',
-                coordinates: [],
-              },
-            }
-            let coorArray = agencyItem.coordinates.split(',')//坐标数组
-
-            let itemArray = []//单个点位的[lon,lat]，数组
-            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
-
-            coorArray.forEach((item, index) => {
-              // itemArray.push(item)
-              if (index % 2 == 0) {//偶
-                item = (parseFloat(item) + parseFloat(xoffset)) + ''
-                itemArray.push(item)
-
-              } else {//奇
-
-                item = (parseFloat(item) + parseFloat(yoffset)) + ''
-                itemArray.push(item)
-                polygonArray.push(itemArray)
-                itemArray = []
-              }
-
-            });
-            oneData.geometry.coordinates.push(polygonArray)
-            featureData.push(oneData)
-          }
-        }
-      }
-
-      if (featureData && featureData.length > 0) {
-        var geojsonObject = {
-          'type': 'FeatureCollection',
-          'features': featureData
-        };
-        let feature = (new GeoJSON()).readFeatures(geojsonObject)
-        console.log(geojsonObject)
-
-        polygonSource.addFeatures(feature)
-
-        let iconFeatures = [];
-        feature.forEach(oneIcon => {
-          var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
-          // var center = getCenter(extent);   //获取边界区域的中心位置
-          //添加标注
-          let x = (parseFloat(extent[0]) + parseFloat(extent[2])) / 2
-          let y = (parseFloat(extent[1]) + parseFloat(extent[3])) / 2
-
-          let oneArray = [x, y]
-          this.iconCoordinators.push(oneArray)
-          // debugger
-          //地图icon样式
-          let oneCctv = new Feature({
-            geometry: new Point([x, y]),
-            id: oneIcon.id_,
-            properties: {
-              type: "icon",
-              id: oneIcon.id_
-            }
-          });
-
-          let iconStyle = new Style({
-            image: new Icon({
-              // anchor: [0.5, 0.5],
-              // imgSize: [32, 32],
-              scale: 0.5,
-              // src: "/img/largeScreen/icon_camra.png"
-              // src: "https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png"
-              src: iconUrlArray[oneIcon.values_.colorIndex]
-            })
-          });
-
-          oneCctv.setStyle(iconStyle);
-          iconFeatures.push(oneCctv);
-
-        });
-
-        iconSource.addFeatures(iconFeatures);
-      }
-
-    },
-
-
-    //根据组织层级设置缩放级别
-    setZoom (agencyLevel) {
-      if (agencyLevel === 'district') {
-        this.zoom = 12
-      } else if (agencyLevel === 'street') {
-        this.zoom = 13
-      } else if (agencyLevel === 'community') {
-        this.zoom = 14
-      } else {
-        this.zoom = 11
-      }
-
-    },
-
-    firstCenterMap () {
-      this.centerPoint = []
-      if (this.orgData.longitude && this.orgData.latitude) {
-        this.centerPoint.push(this.orgData.longitude)
-        this.centerPoint.push(this.orgData.latitude)
-
-      } else {
-        this.centerPoint = centerPointGlobal
-      }
-
-      if (!this.zoom) {
-        this.setZoom(this.orgData.agencyLevel)
       }
     },
 
-    initMap () {
-      this.firstCenterMap()
-
-      gaodeMapLayer = new TileLayer({
-        title: "地图",
-        source: new XYZ({
-          //指定url瓦片
-          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
-          wrapX: true//x方向平铺，也可以选择false
-        }),
-        zIndex: 20
-      });
-
-      mapView = new View({
-        //中心点坐标
-        center: this.centerPoint,
-        // projection: 'EPSG:3857',
-        projection: 'EPSG:4326',
-        zoom: this.zoom,
-        minZoom: this.minZoom
-      })
-
-      //初始化map和地图底图
-      //创建地图容器
-      map = new Map({
-        layers: [gaodeMapLayer],
-        //加载瓦片图层数据
-        view: mapView,
-        target: 'map'
-        //目标加载到map中
-      })
-
-      map.on('singleclick', function (e) {
-        // console.log(e.coordinate)
-        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
-      })
-
-      //去除双击放大效果
-      const dblClickInteraction = map
-        .getInteractions()
-        .getArray()
-        .find(interaction => {
-          return interaction instanceof DoubleClickZoom;
-        });
-      map.removeInteraction(dblClickInteraction);
-
-    },
-    //添加变电站标注图层
-    addParentLayer () {
-      parentSource = new VectorSource({
-        //features: (new GeoJSON()).readFeatures(geojsonObject)
-      });
-
-      parentLayer = new VectorLayer({
-        source: parentSource,
-        style: parentStyleFunction,
-        zIndex: 50
-      });
-
-
-      map.addLayer(parentLayer)
-
-
-    },
-
-    //添加变电站标注图层
-    addPolygonLayer () {
-      polygonSource = new VectorSource({
-        //features: (new GeoJSON()).readFeatures(geojsonObject)
-      });
-
-      polygonLayer = new VectorLayer({
-        source: polygonSource,
-        style: polygonStyleFunction,
-        zIndex: 50
-      });
-
-      //选中多边形后的样式
-      var overlayStyle = (function () {
-
-        return function (feature) {
-          var styles = {};
-          styles['Polygon'] = [
-            new Style({
-              stroke: new Stroke({
-                color: '#ec9000',
-                width: 2
-              })
-            }),
-
-            new Style({
-              fill: new Fill({
-                color: 'rgba(0, 0, 255, 0.1)'
-              })
-            }),
-            new Style({
-              text: createTextStyle(feature)
-            })
-          ];
-          styles['MultiPolygon'] = styles['Polygon'];
-          return styles[feature.getGeometry().getType()];
-        };
-      })();
-
-      select = new Select({
-        style: overlayStyle
-      });
-
-
-      map.addLayer(polygonLayer)
-      map.addInteraction(select);
-
-      select.on('select', e => {
-        this.toSubAgency('polygon', e)
-      });
-
-    },
-
-    addIconLayer () {
-      iconSource = new VectorSource({
-        //features: (new GeoJSON()).readFeatures(geojsonObject)
-      });
-
-      iconLayer = new VectorLayer({
-        source: iconSource,
-        zIndex: 70
-      });
-
-      map.addLayer(iconLayer);
-
-    },
-
-    //取随机数
-    getRndBetween (lowerLimit, upperLimit) {
-      return Math.floor(Math.random() * (upperLimit - lowerLimit + 1)) + lowerLimit;
-    },
-
     //开启加载动画
-    startLoading () {
+    startLoading() {
       loading = Loading.service({
         lock: true, //是否锁定
-        text: '正在加载……', //加载中需要显示的文字
-        background: 'rgba(0,0,0,.7)' //背景颜色
+        text: "正在加载……", //加载中需要显示的文字
+        background: "rgba(0,0,0,.7)", //背景颜色
       });
-
     },
 
     //结束加载动画
-    endLoading () {
+    endLoading() {
       //clearTimeout(timer);
       if (loading) {
         loading.close();
       }
     },
   },
-  props: {
-
-    // vueFlag: {
-    //   type: String,
-    //   default: "alarm"
-    // }
-  },
-  computed: {
-
-    mapHeight () {
-
-      return this.clientHeight - 120;
-
-    },
-    // zoom: {
-    //   get () {
-    //     //根据不同屏幕分辨率，控制zoom大小
-    //     if (this.clientHeight < 900) {
-    //       return 2.3
-    //     } else {
-    //       return 2.8
-    //     }
-    //   },
-    //   set (value) {
-    //   }
-    // },
-    ...mapGetters(["clientHeight"])
-
-  },
-  components: { BasicInfoCommunity, People, cptCard, ScreenLoading },
-}
-export default vueGis;
+};
 </script>
 
 <style
@@ -1002,7 +360,7 @@ export default vueGis;
   scoped
 ></style>
 
-<style lang="scss" >
+<style lang="scss">
 .div_content {
   .ol-viewport {
     border-radius: 5px;
@@ -1011,7 +369,6 @@ export default vueGis;
 .ol-overlaycontainer-stopevent {
   display: none;
 }
-</style>  
+</style>
 
-<style lang="scss" scoped>
-</style>
\ No newline at end of file
+<style lang="scss" scoped></style>
diff --git a/src/views/modules/visual/basicinfo/cpts/grid-map.vue b/src/views/modules/visual/basicinfo/cpts/grid-map.vue
new file mode 100644
index 00000000..f7eedd84
--- /dev/null
+++ b/src/views/modules/visual/basicinfo/cpts/grid-map.vue
@@ -0,0 +1,322 @@
+<template>
+  <div class="m-map">
+    <div id="map"></div>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import cptCard from "@/views/modules/visual/cpts/card";
+import cptTb from "@/views/modules/visual/cpts/tb";
+import nextTick from "dai-js/tools/nextTick";
+import dateFormat from "dai-js/tools/dateFormat";
+import {
+  Scene,
+  PointLayer,
+  PolygonLayer,
+  LineLayer,
+  CityBuildingLayer,
+  RasterLayer,
+  Popup,
+} from "@antv/l7";
+import { GaodeMap, Map } from "@antv/l7-maps";
+// import { DrawEvent, DrawPolygon } from "@antv/l7-draw";
+import { spliceIntoChunks } from "@/utils/index";
+
+let scene;
+// window._AMapSecurityConfig = {
+//   securityJsCode: "您申请的安全密钥",
+// };
+
+export default {
+  name: "l7",
+  data() {
+    return {
+      srcMapData: [],
+      dotData: [],
+      iconUrlArray: {
+        anzhibangjiao: require("@/assets/img/shuju/fiveLayer/anzhibangjiao.png"),
+        buliangqingshaonian: require("@/assets/img/shuju/fiveLayer/buliangqingshaonian.png"),
+        shequjiaozheng: require("@/assets/img/shuju/fiveLayer/shequjiaozheng.png"),
+        resi_xfry: require("@/assets/img/shuju/fiveLayer/resi_xfry.png"),
+        xidurenyuan: require("@/assets/img/shuju/fiveLayer/xidurenyuan.png"),
+        xiejiaorenyuan: require("@/assets/img/shuju/fiveLayer/xiejiaorenyuan.png"),
+        zhaoshizhaohuojingshenbing: require("@/assets/img/shuju/fiveLayer/zhaoshizhaohuojingshenbing.png"),
+
+        yjdw: require("@/assets/img/shuju/fiveLayer/yjdw.png"),
+        sr_gy: require("@/assets/img/shuju/fiveLayer/sr_gy.png"),
+        sr_gc: require("@/assets/img/shuju/fiveLayer/sr_gc.png"),
+        whdw: require("@/assets/img/shuju/fiveLayer/whdw.png"),
+        sr_ggld: require("@/assets/img/shuju/fiveLayer/sr_ggld.png"),
+        lwh: require("@/assets/img/shuju/fiveLayer/lwh.png"),
+        sr_tyc: require("@/assets/img/shuju/fiveLayer/sr_tyc.png"),
+        lyjlb: require("@/assets/img/shuju/fiveLayer/lyjlb.png"),
+        sr_yjy: require("@/assets/img/shuju/fiveLayer/sr_yjy.png"),
+        zaxld: require("@/assets/img/shuju/fiveLayer/zaxld.png"),
+        other: require("@/assets/img/shuju/fiveLayer/other.png"),
+        sr_jzz: require("@/assets/img/shuju/fiveLayer/sr_jzz.png"),
+        sr_djc: require("@/assets/img/shuju/fiveLayer/sr_djc.png"),
+        sr_rfqck: require("@/assets/img/shuju/fiveLayer/sr_rfqck.png"),
+        ep_lg: require("@/assets/img/shuju/fiveLayer/ep_lg.png"),
+        sr_xfz: require("@/assets/img/shuju/fiveLayer/sr_xfz.png"),
+        pu_jgzsbm: require("@/assets/img/shuju/fiveLayer/pu_jgzsbm.png"),
+        ep_qt: require("@/assets/img/shuju/fiveLayer/ep_qt.png"),
+
+        gr_czw: require("@/assets/img/shuju/fiveLayer/gr_czw.png"),
+        ep_cycs: require("@/assets/img/shuju/fiveLayer/ep_cycs.png"),
+        dc_jyz: require("@/assets/img/shuju/fiveLayer/dc_jyz.png"),
+        ep_gwylcs: require("@/assets/img/shuju/fiveLayer/ep_gwylcs.png"),
+        dc_jqz: require("@/assets/img/shuju/fiveLayer/dc_jqz.png"),
+        dc_whpdw: require("@/assets/img/shuju/fiveLayer/dc_whpdw.png"),
+        ep_wb: require("@/assets/img/shuju/fiveLayer/ep_wb.png"),
+        ep_mrxycs: require("@/assets/img/shuju/fiveLayer/ep_mrxycs.png"),
+        dc_yqhjz: require("@/assets/img/shuju/fiveLayer/dc_yqhjz.png"),
+        dc_jzgd: require("@/assets/img/shuju/fiveLayer/dc_jzgd.png"),
+        ep_scjgqy: require("@/assets/img/shuju/fiveLayer/ep_scjgqy.png"),
+
+        cm_nmsc: require("@/assets/img/shuju/fiveLayer/cm_nmsc.png"),
+        event_tdnd: require("@/assets/img/shuju/fiveLayer/event_tdnd.png"),
+        cm_bhsc: require("@/assets/img/shuju/fiveLayer/cm_bhsc.png"),
+        cm_cjsc: require("@/assets/img/shuju/fiveLayer/cm_cjsc.png"),
+        ep_lssd: require("@/assets/img/shuju/fiveLayer/ep_lssd.png"),
+
+        resi_szry: require("@/assets/img/shuju/fiveLayer/resi_szry.png"),
+        ps_lyy: require("@/assets/img/shuju/fiveLayer/ps_lyy.png"),
+        resi_snry: require("@/assets/img/shuju/fiveLayer/resi_snry.png"),
+        ps_mzb: require("@/assets/img/shuju/fiveLayer/ps_mzb.png"),
+        ps_zs: require("@/assets/img/shuju/fiveLayer/ps_zs.png"),
+        ps_wss: require("@/assets/img/shuju/fiveLayer/ps_wss.png"),
+        ps_jjz: require("@/assets/img/shuju/fiveLayer/ps_jjz.png"),
+        ep_xx: require("@/assets/img/shuju/fiveLayer/ep_xx.png"),
+        ep_yy: require("@/assets/img/shuju/fiveLayer/ep_yy.png"),
+      },
+    };
+  },
+
+  props: {},
+
+  computed: {},
+
+  components: {
+    cptCard,
+    cptTb,
+  },
+
+  watch: {},
+
+  async mounted() {
+    await this.getMapData();
+    this.iniMap();
+    await this.getDotData();
+    this.updateMap();
+  },
+
+  methods: {
+    iniMap() {
+      // 临时这么用吧
+      window._AMapSecurityConfig = {
+        securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2",
+      };
+
+      const { srcMapData } = this;
+      scene = new Scene({
+        id: "map",
+        logoVisible: false,
+        map: new GaodeMap({
+          // viewMode: "3D",
+          pitch: 35.210526315789465,
+          //   style: "dark",
+          style: "light",
+          center: [srcMapData.longitude, srcMapData.latitude],
+          token: "fc14b42e0ca18387866d68ebd4f150c1",
+          zoom: 18,
+          minZoom: 10,
+        }),
+      });
+
+      scene.on("loaded", () => {
+        const polygon = [
+          ...srcMapData.children
+            .filter((item) => item.coordinates.length > 0)
+            .map((item) => ({
+              type: "Feature",
+              properties: {
+                name: item.name,
+                center: [item.longitude, item.latitude],
+              },
+              geometry: {
+                type: "Polygon",
+                coordinates: [
+                  spliceIntoChunks(
+                    item.coordinates.split(",").map((item) => parseFloat(item)),
+                    2
+                  ),
+                ],
+              },
+            })),
+        ];
+        console.log(polygon);
+
+        const polygonLayer = new PolygonLayer({
+          autoFit: true,
+        })
+          //   .size(1000)
+          .source({ type: "FeatureCollection", features: polygon })
+          .color("name", [
+            "rgba(255, 100, 60, 0.5)",
+            "rgba(43, 231, 253, 0.35)",
+            "rgba(255, 255, 50, 0.35)",
+          ])
+          //   .shape("extrude")
+          .shape("fill")
+          .style({
+            opacityLinear: {
+              enable: true, // true - false
+              dir: "out", // in - out
+            },
+            opacity: 1,
+            // heightfixed: true,
+            // pickLight: true,
+            // raisingHeight: 1000,
+            // sourceColor: "#333",
+            // targetColor: "rgba(255,255,255, 0.5)",
+          });
+
+        scene.addLayer(polygonLayer);
+
+        const linelayer = new LineLayer({
+          zIndex: 2,
+          name: "line2",
+        })
+          .source({ type: "FeatureCollection", features: polygon })
+          .shape("line")
+          .size(1)
+          .color("name", [
+            "rgba(255, 50, 50, 0.7)",
+            "rgba(43, 231, 253, 0.7)",
+            "rgba(255, 255, 50, 0.7)",
+          ])
+          .style({
+            opacity: 1,
+          })
+          .animate({
+            interval: 1, // 间隔
+            duration: 2, // 持续时间，延时
+            trailLength: 2, // 流线长度
+          });
+        scene.addLayer(linelayer);
+
+        const circleLayer = new PolygonLayer({
+          zIndex: 3,
+        })
+          .source({ type: "FeatureCollection", features: polygon })
+          .color("name", [
+            "rgba(255, 50, 50, 0.99)",
+            "rgba(43, 231, 253, 0.99)",
+            "rgba(255, 255, 50, 0.99)",
+          ])
+          .shape("circle")
+          .active(true)
+          .animate(true)
+          .size(50)
+          .style({
+            offsets: [0, -10], // 文本相对锚点的偏移量 [水平, 垂直]
+            opacity: 1,
+          });
+        scene.addLayer(circleLayer);
+
+        scene.addImage(
+          "pos-red",
+          require("@/assets/img/shuju/grid/pos-red.png")
+        );
+        scene.addImage(
+          "pos-green",
+          require("@/assets/img/shuju/grid/pos-green.png")
+        );
+        scene.addImage(
+          "pos-yellow",
+          require("@/assets/img/shuju/grid/pos-yellow.png")
+        );
+        const posLayer = new PolygonLayer({
+          zIndex: 4,
+        })
+          .source({ type: "FeatureCollection", features: polygon })
+          .shape("name", ["pos-red", "pos-green", "pos-yellow"])
+          .size(12)
+          .style({
+            offsets: [0, 8], // 文本相对锚点的偏移量 [水平, 垂直]
+            // rotation: 60,
+            layerType: "fillImage",
+          });
+        scene.addLayer(posLayer);
+
+        const textLayer = new PolygonLayer({
+          zIndex: 10,
+        })
+          .source({ type: "FeatureCollection", features: polygon })
+          .color("name", [
+            "rgba(255, 100, 60, 0.99)",
+            "rgba(43, 231, 253, 0.99)",
+            "rgba(255, 255, 50, 0.99)",
+          ])
+          .shape("name", "text")
+          .size(16)
+          .style({
+            textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+            textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直]
+            spacing: 2, // 字符间距
+            padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+            stroke: "#ffffff", // 描边颜色
+            strokeWidth: 0.3, // 描边宽度
+            strokeOpacity: 1.0,
+          })
+          .active(true);
+        scene.addLayer(textLayer);
+
+        textLayer.on("mousemove", (e) => {
+          textLayer.style({
+            raisingHeight: 0,
+          });
+        });
+
+        textLayer.on("click", (e) => {
+          console.log(e.feature.properties.name);
+        });
+
+        textLayer.on("unmousemove", (e) => {
+          polygonLayer.style({
+            raisingHeight: 0,
+          });
+        });
+      });
+    },
+
+    async getMapData() {
+      const { data, code, msg } = await requestPost("/gov/org/agency/maporg", {
+        level: "",
+        orgId: "",
+      });
+      if (msg === "success" && code === 0) {
+        this.srcMapData = data;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.g-cnt {
+  margin-top: 40px;
+}
+
+.m-map {
+  position: relative;
+  padding: 20px 0;
+  height: 100%;
+
+  #app {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/views/modules/visual/test/l7.vue b/src/views/modules/visual/test/l7.vue
index f1badfd0..951fd7b7 100644
--- a/src/views/modules/visual/test/l7.vue
+++ b/src/views/modules/visual/test/l7.vue
@@ -28,6 +28,9 @@ import { GaodeMap, Map } from "@antv/l7-maps";
 import { spliceIntoChunks } from "@/utils/index";
 
 let scene;
+// window._AMapSecurityConfig = {
+//   securityJsCode: "您申请的安全密钥",
+// };
 
 export default {
   name: "l7",
@@ -115,33 +118,33 @@ export default {
   methods: {
     iniMap() {
       const { srcMapData } = this;
-        scene = new Scene({
-          id: "map",
-          logoVisible: false,
-          map: new GaodeMap({
-            // viewMode: "3D",
-            pitch: 35.210526315789465,
-            style: "dark",
-            //   style: "light",
-            center: [srcMapData.longitude, srcMapData.latitude],
-            //   token: "xxxx - token",
-            zoom: 18,
-            minZoom: 10,
-          }),
-        });
+      scene = new Scene({
+        id: "map",
+        logoVisible: false,
+        map: new GaodeMap({
+          // viewMode: "3D",
+          pitch: 35.210526315789465,
+        //   style: "dark",
+            style: "light",
+          center: [srcMapData.longitude, srcMapData.latitude],
+        //   token: "77e4e81967f342b3e7b81ad1d0411224",
+          zoom: 18,
+          minZoom: 10,
+        }),
+      });
 
-    //   scene = new Scene({
-    //     id: "map",
-    //     map: new Map({
-    //       pitch: 35.210526315789465,
-    //       style: "dark",
-    //       //   style: "light",
-    //       center: [srcMapData.longitude, srcMapData.latitude],
-    //       //   token: "xxxx - token",
-    //       zoom: 18,
-    //       minZoom: 10,
-    //     }),
-    //   });
+      //   scene = new Scene({
+      //     id: "map",
+      //     map: new Map({
+      //       pitch: 35.210526315789465,
+      //       style: "dark",
+      //       //   style: "light",
+      //       center: [srcMapData.longitude, srcMapData.latitude],
+      //       //   token: "xxxx - token",
+      //       zoom: 18,
+      //       minZoom: 10,
+      //     }),
+      //   });
 
       scene.on("loaded", () => {
         // 底图服务