From aee54a87be2d8db72784f9a21b40e3e36b9d6ef5 Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Fri, 22 Jul 2022 18:20:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E4=BA=BA=E6=88=BF=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../visual/basicinfo/basicInfoMain-备份.vue | 1017 +++++++++++++++++
 .../visual/basicinfo/basicInfoMain.vue        |   91 +-
 .../visual/basicinfo/cpts/grid-map.vue        |  232 ++--
 3 files changed, 1195 insertions(+), 145 deletions(-)
 create mode 100644 src/views/modules/visual/basicinfo/basicInfoMain-备份.vue

diff --git a/src/views/modules/visual/basicinfo/basicInfoMain-备份.vue b/src/views/modules/visual/basicinfo/basicInfoMain-备份.vue
new file mode 100644
index 00000000..c57aaef3
--- /dev/null
+++ b/src/views/modules/visual/basicinfo/basicInfoMain-备份.vue
@@ -0,0 +1,1017 @@
+<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>
+      </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">
+
+        <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>
+
+            <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>
+
+                    </div>
+                  </div>
+                  <div v-else>
+                    <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">
+        <!-- <div @click="handleSearch"
+             class="div_search">
+          <div class="div_search_left">
+            <i slot="prefix"
+               class="icon">
+              <img src="../../../../assets/img/modules/visual/sousuo.png"
+                   alt />
+            </i>
+            <span>请输入姓名</span>
+          </div>
+
+          <div class="btn">搜索</div>
+
+        </div> -->
+
+        <div class="div_info">
+          <el-scrollbar style="height:98%">
+            <div class="info_tip">
+              <img src="../../../../assets/img/shuju/title-tip.png"
+                   alt />
+              <div class="tip_title">分类列表</div>
+            </div>
+
+            <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 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 class="item_content">
+                      <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>
+
+            </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 { mapGetters } from "vuex";
+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 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,
+  });
+};
+
+//上级组织标注样式
+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 () {
+    return {
+      showAgencyList: false,
+      agencyFadeIn: true,
+      centerPoint: [],//中心点位置
+      zoom: 14,//缩放范围：区14
+      minZoom: 1,//最小缩放
+
+      orgData: {},//当前组织对象
+      orgId: '',
+      orgLevel: '',
+
+      subAgencyArray: [],//下拉框数据
+      iconCoordinators: [],
+      currentCoordinate: null,
+      overlay: null,
+
+      //右侧搜索
+      searchName: "",
+
+      //右侧列表
+      infoLoading: true,
+      listData: [],//得到的数据
+      listDatashow: [],//处理成一行两列的数据
+
+      //下钻层级记录
+      runNum: 0,
+      runAgencyArray: [],
+      selUserId: '',
+      center: [],
+      zoom: null,
+      parentPolygon: [],
+
+      centerFlag: 'point',//定义中心点的flag  point点 fit 自适应
+
+    }
+  },
+  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()
+
+  },
+  methods: {
+    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
+        }
+      });
+    },
+    hideAgencyList () {
+      this.showAgencyList = !this.showAgencyList
+      // if (this.showAgencyList) {
+      //   this.agencyFadeIn = false
+      //   setTimeout(() => {
+      //     this.showAgencyList = false
+      //   }, 1000)
+
+      // } else {
+      //   this.agencyFadeIn = true
+      //   this.showAgencyList = true
+      // }
+
+
+    },
+
+    //获取右侧infolist数据
+    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
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+      this.infoLoading = false
+      if (code === 0) {
+
+        this.listData = data
+        // this.listData = this.listData1
+        this.listDatashow = []
+        let itemArray = []
+        this.listData.forEach((item, index) => {
+          if (!item.dataIcon) {
+            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)
+            }
+          } else {
+            itemArray.push(item)
+            this.listDatashow.push(itemArray)
+            itemArray = []
+          }
+
+        });
+
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    //子组件点击房间，刷新右侧list
+    refreshInfoList (selId, type) {
+      this.orgId = selId
+      this.level = ''
+    },
+
+    //点击组织列表数据
+    clickAgencyItem (item, index) {
+
+      let e = {
+        selected: []
+      }
+      let one = {
+        values_: item
+      }
+      e.selected.push(one)
+
+      this.toSubAgency('polygon', e)
+    },
+
+    //下钻到下一级 type点击的类型:polygon 点击多边形（分为点击组织/小区）    people 点击详情
+    async toSubAgency (type, e, searchName) {
+
+      //点击小区neighborHood显示楼栋，点击非小区，进入下一级地图
+      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
+
+      } else {
+
+        if (!e) {
+          return false
+        }
+        if (!e.selected[0]) {
+          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.runAgencyArray.push(this.orgData)
+
+        this.subAgencyArray.forEach(item => {
+          if (item.id === e.selected[0].values_.id) {
+            this.orgId = item.id
+            this.orgLevel = item.level
+            this.orgData = item
+          }
+        });
+
+        if (this.orgLevel === 'neighborHood') {
+          this.loadList()
+          this.$nextTick(() => {
+            // 小区id，小区名称
+            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 = []
+        }
+
+      } 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 () {
+      loading = Loading.service({
+        lock: true, //是否锁定
+        text: '正在加载……', //加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' //背景颜色
+      });
+
+    },
+
+    //结束加载动画
+    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
+  lang="scss"
+  src="@/assets/scss/modules/visual/basicInfoMain.scss"
+  scoped
+></style>
+
+<style lang="scss" >
+.div_content {
+  .ol-viewport {
+    border-radius: 5px;
+  }
+}
+.ol-overlaycontainer-stopevent {
+  display: none;
+}
+</style>  
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/modules/visual/basicinfo/basicInfoMain.vue b/src/views/modules/visual/basicinfo/basicInfoMain.vue
index 38908c51..3a0e2cce 100644
--- a/src/views/modules/visual/basicinfo/basicInfoMain.vue
+++ b/src/views/modules/visual/basicinfo/basicInfoMain.vue
@@ -34,7 +34,11 @@
         v-show="orgLevel !== 'people' && orgLevel !== 'neighborHood'"
         class="div_map"
       >
-        <grid-map />
+        <grid-map
+          v-if="orgData.id"
+          @clickAgency="clickAgencyItem"
+          :srcGridData="orgData"
+        />
         <div class="m-sidebar">
           <div class="wrap" :class="[{ 'wrap-hidden': !showAgencyList }]">
             <div @click="hideAgencyList" class="arrow_tip">
@@ -76,21 +80,6 @@
       </div>
 
       <div class="div_data">
-        <!-- <div @click="handleSearch"
-             class="div_search">
-          <div class="div_search_left">
-            <i slot="prefix"
-               class="icon">
-              <img src="../../../../assets/img/modules/visual/sousuo.png"
-                   alt />
-            </i>
-            <span>请输入姓名</span>
-          </div>
-
-          <div class="btn">搜索</div>
-
-        </div> -->
-
         <div class="div_info">
           <el-scrollbar style="height: 98%">
             <div class="info_tip">
@@ -203,7 +192,7 @@ export default {
 
   async mounted() {
     //加载组织数据
-    // await this.loadOrgData();
+    await this.loadOrgData();
     await this.loadList();
   },
 
@@ -223,6 +212,30 @@ export default {
       this.showAgencyList = !this.showAgencyList;
     },
 
+    //加载组织数据
+    async loadOrgData() {
+      const url = "/gov/org/agency/maporg";
+      let params = {
+        orgId: this.orgId,
+        level: this.orgLevel,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        this.orgData = data;
+        this.orgId = this.orgData.id;
+        this.orgLevel = this.orgData.level;
+        if (data.children && data.children.length > 0) {
+          this.subAgencyArray = data.children;
+        } else {
+          this.subAgencyArray = [];
+        }
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
     //获取右侧infolist数据
     async loadList() {
       this.infoLoading = true;
@@ -268,6 +281,38 @@ export default {
       this.level = "";
     },
 
+    //返回所选组织
+    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;
+
+      if (this.orgLevel === "people") {
+      } else if (this.orgLevel === "neighborHood") {
+        //显示小区
+      } else {
+        this.$nextTick(() => {
+          this.refreshMap(true);
+          this.$forceUpdate();
+        });
+      }
+    },
+
     //点击组织列表数据
     clickAgencyItem(item, index) {
       let e = {
@@ -304,10 +349,6 @@ export default {
           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.runAgencyArray.push(this.orgData);
 
@@ -334,6 +375,14 @@ export default {
       }
     },
 
+    //刷新地图
+    async refreshMap(isRefreshView) {
+      //加载组织数据
+      await this.loadOrgData();
+
+      await this.loadList();
+    },
+
     //开启加载动画
     startLoading() {
       loading = Loading.service({
diff --git a/src/views/modules/visual/basicinfo/cpts/grid-map.vue b/src/views/modules/visual/basicinfo/cpts/grid-map.vue
index f7eedd84..9756ea9f 100644
--- a/src/views/modules/visual/basicinfo/cpts/grid-map.vue
+++ b/src/views/modules/visual/basicinfo/cpts/grid-map.vue
@@ -9,91 +9,32 @@ 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 { Scene, PolygonLayer, LineLayer } 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: "您申请的安全密钥",
-// };
+let polygonLayer;
+let lineLayer;
+let textLayer;
+let posLayer;
+let circleLayer;
 
 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"),
-      },
+      //   srcGridData: {},
     };
   },
 
-  props: {},
+  props: {
+    srcGridData: {
+      type: Object,
+      default: null,
+    },
+  },
 
   computed: {},
 
@@ -105,63 +46,94 @@ export default {
   watch: {},
 
   async mounted() {
-    await this.getMapData();
+    // 临时这么用吧
+    window._AMapSecurityConfig = {
+      securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2",
+    };
+
+    // await this.getMapData();
     this.iniMap();
-    await this.getDotData();
-    this.updateMap();
+  },
+
+  computed: {
+    polygonData() {
+      const { srcGridData } = this;
+      if (
+        !srcGridData ||
+        !srcGridData.children ||
+        !Array.isArray(srcGridData.children)
+      ) {
+        return { type: "FeatureCollection", features: [] };
+      }
+      const polygon = [
+        ...srcGridData.children
+          .filter((item) => item.coordinates.length > 0)
+          .map((item) => ({
+            type: "Feature",
+            properties: {
+              //   id: item.id,
+              //   name: item.name,
+              //   level: item.level,
+              center: [item.longitude, item.latitude],
+              ...item,
+            },
+            geometry: {
+              type: "Polygon",
+              coordinates: [
+                spliceIntoChunks(
+                  item.coordinates.split(",").map((item) => parseFloat(item)),
+                  2
+                ),
+              ],
+            },
+          })),
+      ];
+      return { type: "FeatureCollection", features: polygon };
+    },
+  },
+
+  watch: {
+    srcGridData(val, oldValue) {
+      if (oldValue == null) {
+        this.iniMap();
+      } else {
+        this.updateMap();
+      }
+    },
   },
 
   methods: {
     iniMap() {
-      // 临时这么用吧
-      window._AMapSecurityConfig = {
-        securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2",
-      };
+      const { srcGridData, polygonData } = this;
+      if (!srcGridData) return false;
 
-      const { srcMapData } = this;
       scene = new Scene({
         id: "map",
         logoVisible: false,
         map: new GaodeMap({
-          // viewMode: "3D",
-          pitch: 35.210526315789465,
+          pitch: 60,
           //   style: "dark",
-          style: "light",
-          center: [srcMapData.longitude, srcMapData.latitude],
+          //   style: "grey",
+          style: "amap://styles/blue",
+          center: [
+            srcGridData.longitude || this.$store.state.user.longitude,
+            srcGridData.latitude || this.$store.state.user.latitude,
+          ],
           token: "fc14b42e0ca18387866d68ebd4f150c1",
           zoom: 18,
           minZoom: 10,
+          isHotspot: false,
+          resizeEnable: true,
+          doubleClickZoom: false,
         }),
       });
 
       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({
+        polygonLayer = new PolygonLayer({
           autoFit: true,
         })
           //   .size(1000)
-          .source({ type: "FeatureCollection", features: polygon })
+          .source(polygonData)
           .color("name", [
             "rgba(255, 100, 60, 0.5)",
             "rgba(43, 231, 253, 0.35)",
@@ -184,11 +156,11 @@ export default {
 
         scene.addLayer(polygonLayer);
 
-        const linelayer = new LineLayer({
+        lineLayer = new LineLayer({
           zIndex: 2,
           name: "line2",
         })
-          .source({ type: "FeatureCollection", features: polygon })
+          .source(polygonData)
           .shape("line")
           .size(1)
           .color("name", [
@@ -204,12 +176,12 @@ export default {
             duration: 2, // 持续时间，延时
             trailLength: 2, // 流线长度
           });
-        scene.addLayer(linelayer);
+        scene.addLayer(lineLayer);
 
-        const circleLayer = new PolygonLayer({
+        circleLayer = new PolygonLayer({
           zIndex: 3,
         })
-          .source({ type: "FeatureCollection", features: polygon })
+          .source(polygonData)
           .color("name", [
             "rgba(255, 50, 50, 0.99)",
             "rgba(43, 231, 253, 0.99)",
@@ -237,10 +209,10 @@ export default {
           "pos-yellow",
           require("@/assets/img/shuju/grid/pos-yellow.png")
         );
-        const posLayer = new PolygonLayer({
+        posLayer = new PolygonLayer({
           zIndex: 4,
         })
-          .source({ type: "FeatureCollection", features: polygon })
+          .source(polygonData)
           .shape("name", ["pos-red", "pos-green", "pos-yellow"])
           .size(12)
           .style({
@@ -250,10 +222,10 @@ export default {
           });
         scene.addLayer(posLayer);
 
-        const textLayer = new PolygonLayer({
+        textLayer = new PolygonLayer({
           zIndex: 10,
         })
-          .source({ type: "FeatureCollection", features: polygon })
+          .source(polygonData)
           .color("name", [
             "rgba(255, 100, 60, 0.99)",
             "rgba(43, 231, 253, 0.99)",
@@ -273,17 +245,18 @@ export default {
           .active(true);
         scene.addLayer(textLayer);
 
-        textLayer.on("mousemove", (e) => {
-          textLayer.style({
+        polygonLayer.on("mousemove", (e) => {
+          polygonLayer.style({
             raisingHeight: 0,
           });
         });
 
-        textLayer.on("click", (e) => {
-          console.log(e.feature.properties.name);
+        polygonLayer.on("click", (e) => {
+          console.log(e.feature.properties);
+          this.$emit("clickAgency", e.feature.properties);
         });
 
-        textLayer.on("unmousemove", (e) => {
+        polygonLayer.on("unmousemove", (e) => {
           polygonLayer.style({
             raisingHeight: 0,
           });
@@ -291,13 +264,24 @@ export default {
       });
     },
 
+    updateMap() {
+      const { polygonData } = this;
+      if (polygonLayer) {
+        polygonLayer.setData(polygonData);
+        lineLayer.setData(polygonData);
+        textLayer.setData(polygonData);
+        posLayer.setData(polygonData);
+        circleLayer.setData(polygonData);
+      }
+    },
+
     async getMapData() {
       const { data, code, msg } = await requestPost("/gov/org/agency/maporg", {
         level: "",
         orgId: "",
       });
       if (msg === "success" && code === 0) {
-        this.srcMapData = data;
+        this.srcGridData = data;
       }
     },
   },