From f2a15698fbe21938af607ae6fd9287a96e19787e Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Thu, 2 Feb 2023 16:39:36 +0800
Subject: [PATCH] =?UTF-8?q?=E7=83=9F=E5=8F=B0=E6=88=BF=E5=B1=8B=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=20=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/communityYantai/community.vue        | 1444 +++++++++--------
 .../base/communityYantai/cpts/agency-info.vue |  176 ++
 .../base/communityYantai/cpts/grid-info.vue   |  176 ++
 .../modules/base/communityYantai/cpts/map.vue |  535 ++++++
 4 files changed, 1655 insertions(+), 676 deletions(-)
 create mode 100644 src/views/modules/base/communityYantai/cpts/agency-info.vue
 create mode 100644 src/views/modules/base/communityYantai/cpts/grid-info.vue
 create mode 100644 src/views/modules/base/communityYantai/cpts/map.vue

diff --git a/src/views/modules/base/communityYantai/community.vue b/src/views/modules/base/communityYantai/community.vue
index aa8a2889b..5d6cfb2f1 100644
--- a/src/views/modules/base/communityYantai/community.vue
+++ b/src/views/modules/base/communityYantai/community.vue
@@ -1,707 +1,778 @@
 <template>
-  <div class="div_main">
-
-    <div :style="{height:rowHeight}"
-         class="div_tree">
-      <!-- <el-input placeholder="输入关键字进行过滤"
+	<div class="div_main">
+		<div :style="{ height: rowHeight }" class="div_tree">
+			<!-- <el-input placeholder="输入关键字进行过滤"
                 v-model="filterText">
       </el-input> -->
-      <el-scrollbar :style="{height:treeHeight}"
-                    class="scrollar">
-        <el-tree ref="ref_tree"
-                 v-loading="treeLoading"
-                 class="filter_tree"
-                 :data="treeData"
-                 :props="defaultProps"
-                 :highlight-current="true"
-                 node-key="id"
-                 :default-expanded-keys="openNodes"
-                 :expand-on-click-node="false"
-                 :filter-node-method="filterNode"
-                 @node-click="handleNodeClick"
-                 lazy
-                 :load="lazyLoadTree">
-
-          <span slot-scope="{ node, data }"
-                class="custom-tree-node">
-            <span :id="data.id">{{ data.showName }}</span>
-          </span>
-        </el-tree>
-      </el-scrollbar>
-
-    </div>
-
-    <div :style="{height:rowHeight}"
-         class=div_left>
-
-      <div class="div_search marginl-20">
-        <el-form :inline="true"
-                 ref="ref_searchform"
-                 :label-width="'80px'">
-          <div>
-
-            <el-form-item label="所属组织"
-                          prop="ownerName">
-              <el-cascader class="customer_cascader"
-                           ref="myCascader"
-                           size="small"
-                           v-model="agencyIdArray"
-                           :options="orgOptions"
-                           :props="orgOptionProps"
-                           :show-all-levels="false"
-                           @change="handleChangeAgency"></el-cascader>
-            </el-form-item>
-            <el-form-item label="房主姓名"
-                          prop="ownerName">
-              <el-input v-model="ownerName"
-                        class="item_width_2"
-                        size="small"
-                        clearable
-                        placeholder="请输入内容">
-
-              </el-input>
-            </el-form-item>
-            <el-form-item label="联系方式"
-                          prop="ownerPhone">
-              <el-input v-model="ownerPhone"
-                        class="item_width_2"
-                        size="small"
-                        clearable
-                        placeholder="请输入手机">
-              </el-input>
-
-            </el-form-item>
-
-            <el-form-item label="房屋状态"
-                          prop="rentFlag">
-              <el-select class="item_width_2"
-                         v-model="rentFlag"
-                         placeholder="请选择"
-                         size="small"
-                         clearable>
-                <el-option v-for="item in rentList"
-                           :key="item.value"
-                           :label="item.label"
-                           :value="item.value">
-                </el-option>
-              </el-select>
-            </el-form-item>
-
-            <el-form-item label="房屋用途"
-                          prop="purpose">
-              <el-select v-model="purpose"
-                         class="item_width_2"
-                         placeholder="请选择"
-                         size="small"
-                         clearable>
-                <el-option v-for="item in purposeArr"
-                           :key="item.dictValue"
-                           :label="item.dictName"
-                           :value="item.dictValue">
-                </el-option>
-              </el-select>
-
-            </el-form-item>
-
-            <el-form-item label="备注"
-                          prop="remark">
-              <el-input v-model="remark"
-                        class="item_width_2"
-                        size="small"
-                        clearable
-                        placeholder="请输入备注">
-              </el-input>
-            </el-form-item>
-            <el-form-item label="更新时间"
-                          prop="updateStartDate">
-              <el-date-picker v-model="updateStartDate"
-                              :picker-options="startPickerOptions"
-                              class="item_width_2"
-                              size="small"
-                              type="date"
-                              value-format="yyyyMMdd"
-                              value="yyyy-MM-dd"
-                              placeholder="开始时间">
-              </el-date-picker>
-              <span class="data-tag">至</span>
-              <el-date-picker v-model="updateEndDate"
-                              :picker-options="endPickerOptions"
-                              class="item_width_2 data-tag"
-                              size="small"
-                              type="date"
-                              value-format="yyyyMMdd"
-                              value="yyyy-MM-dd"
-                              placeholder="结束时间">
-              </el-date-picker>
-            </el-form-item>
-
-            <el-button style="margin-left:30px"
-                       size="small"
-                       class="diy-button--search"
-                       @click="handleSearch">查询</el-button>
-            <el-button style="margin-left:10px"
-                       size="small"
-                       class="diy-button--reset"
-                       @click="resetSearch">重置</el-button>
-          </div>
-        </el-form>
-      </div>
-      <div class=div_left_table>
-        <build-table v-if="selTreeObj.level==='neighborHood'&&!showRoomTable"
-                     ref="ref_neighTable"
-                     :staffAgencyId="staffAgencyId"
-                     :showImportBtn="showImportBtn"
-                     :ownerName="ownerName"
-                     :ownerPhone="ownerPhone"
-                     :rentFlag="rentFlag"
-                     :purpose="purpose"
-                     :remark="remark"
-                     :updateStartDate="updateStartDate"
-                     :updateEndDate="updateEndDate"
-                     @toNextLevel="toNextLevel"
-                     @refreshTree="refreshTree"></build-table>
-
-        <room-table v-if="showRoomTable||selTreeObj.level==='building'"
-                    :staffAgencyId="staffAgencyId"
-                    :showImportBtn="showImportBtn"
-                    :ownerName="ownerName"
-                    :ownerPhone="ownerPhone"
-                    :rentFlag="rentFlag"
-                    :purpose="purpose"
-                    :remark="remark"
-                    :updateStartDate="updateStartDate"
-                    :updateEndDate="updateEndDate"
-                    :orgType="orgType"
-                    :orgId="orgId"
-                    ref="ref_buildingTable"
-                    @refreshTree="refreshTree"></room-table>
-
-        <community-table v-if="selTreeObj.level!=='building'&&selTreeObj.level!=='neighborHood'&&!showRoomTable"
-                         @toNextLevel="toNextLevel"
-                         :staffAgencyId="staffAgencyId"
-                         :ownerName="ownerName"
-                         :ownerPhone="ownerPhone"
-                         :rentFlag="rentFlag"
-                         :purpose="purpose"
-                         :remark="remark"
-                         :updateStartDate="updateStartDate"
-                         :updateEndDate="updateEndDate"
-                         ref="ref_communityTable"
-                         @refreshTree="refreshTree"></community-table>
-      </div>
-    </div>
-
-  </div>
+			<el-scrollbar :style="{ height: treeHeight }" class="scrollar">
+				<el-tree
+					ref="ref_tree"
+					v-loading="treeLoading"
+					class="filter_tree"
+					:data="treeData"
+					:props="defaultProps"
+					:highlight-current="true"
+					node-key="id"
+					:default-expanded-keys="openNodes"
+					:expand-on-click-node="false"
+					:filter-node-method="filterNode"
+					@node-click="handleNodeClick"
+					lazy
+					:load="lazyLoadTree"
+				>
+					<div slot-scope="{ node, data }" class="custom-tree-node">
+						<span :id="data.id">{{ data.showName }}</span>
+						<i @click.stop="(e) => handleClickAgencyIcon(data, e)"
+							>!</i
+						>
+					</div>
+				</el-tree>
+			</el-scrollbar>
+		</div>
+
+		<div class="m-pop" :style="popOrgStyle" v-if="displayedPopOrg">
+			<agency-info
+				:agency-id="currentPopOrgId"
+				v-if="currentPopOrgLevel == 'agency'"
+				@close="displayedPopOrg = false"
+			/>
+
+			<grid-info
+				:grid-id="currentPopOrgId"
+				v-if="currentPopOrgLevel == 'grid'"
+				@close="displayedPopOrg = false"
+			/>
+		</div>
+
+		<div :style="{ height: rowHeight }" class="div_left">
+			<div class="div_search marginl-20">
+				<el-form
+					:inline="true"
+					ref="ref_searchform"
+					:label-width="'80px'"
+				>
+					<div>
+						<el-form-item label="所属组织" prop="ownerName">
+							<el-cascader
+								class="customer_cascader"
+								ref="myCascader"
+								size="small"
+								v-model="agencyIdArray"
+								:options="orgOptions"
+								:props="orgOptionProps"
+								:show-all-levels="false"
+								@change="handleChangeAgency"
+							></el-cascader>
+						</el-form-item>
+						<el-form-item label="房主姓名" prop="ownerName">
+							<el-input
+								v-model="ownerName"
+								class="item_width_2"
+								size="small"
+								clearable
+								placeholder="请输入内容"
+							>
+							</el-input>
+						</el-form-item>
+						<el-form-item label="联系方式" prop="ownerPhone">
+							<el-input
+								v-model="ownerPhone"
+								class="item_width_2"
+								size="small"
+								clearable
+								placeholder="请输入手机"
+							>
+							</el-input>
+						</el-form-item>
+
+						<el-form-item label="房屋状态" prop="rentFlag">
+							<el-select
+								class="item_width_2"
+								v-model="rentFlag"
+								placeholder="请选择"
+								size="small"
+								clearable
+							>
+								<el-option
+									v-for="item in rentList"
+									:key="item.value"
+									:label="item.label"
+									:value="item.value"
+								>
+								</el-option>
+							</el-select>
+						</el-form-item>
+
+						<el-form-item label="房屋用途" prop="purpose">
+							<el-select
+								v-model="purpose"
+								class="item_width_2"
+								placeholder="请选择"
+								size="small"
+								clearable
+							>
+								<el-option
+									v-for="item in purposeArr"
+									:key="item.dictValue"
+									:label="item.dictName"
+									:value="item.dictValue"
+								>
+								</el-option>
+							</el-select>
+						</el-form-item>
+
+						<el-form-item label="备注" prop="remark">
+							<el-input
+								v-model="remark"
+								class="item_width_2"
+								size="small"
+								clearable
+								placeholder="请输入备注"
+							>
+							</el-input>
+						</el-form-item>
+						<el-form-item label="更新时间" prop="updateStartDate">
+							<el-date-picker
+								v-model="updateStartDate"
+								:picker-options="startPickerOptions"
+								class="item_width_2"
+								size="small"
+								type="date"
+								value-format="yyyyMMdd"
+								value="yyyy-MM-dd"
+								placeholder="开始时间"
+							>
+							</el-date-picker>
+							<span class="data-tag">至</span>
+							<el-date-picker
+								v-model="updateEndDate"
+								:picker-options="endPickerOptions"
+								class="item_width_2 data-tag"
+								size="small"
+								type="date"
+								value-format="yyyyMMdd"
+								value="yyyy-MM-dd"
+								placeholder="结束时间"
+							>
+							</el-date-picker>
+						</el-form-item>
+
+						<el-button
+							style="margin-left: 30px"
+							size="small"
+							class="diy-button--search"
+							@click="handleSearch"
+							>查询</el-button
+						>
+						<el-button
+							style="margin-left: 10px"
+							size="small"
+							class="diy-button--reset"
+							@click="resetSearch"
+							>重置</el-button
+						>
+					</div>
+				</el-form>
+			</div>
+			<div class="div_left_table">
+				<build-table
+					v-if="selTreeObj.level === 'neighborHood' && !showRoomTable"
+					ref="ref_neighTable"
+					:staffAgencyId="staffAgencyId"
+					:showImportBtn="showImportBtn"
+					:ownerName="ownerName"
+					:ownerPhone="ownerPhone"
+					:rentFlag="rentFlag"
+					:purpose="purpose"
+					:remark="remark"
+					:updateStartDate="updateStartDate"
+					:updateEndDate="updateEndDate"
+					@toNextLevel="toNextLevel"
+					@refreshTree="refreshTree"
+				></build-table>
+
+				<room-table
+					v-if="showRoomTable || selTreeObj.level === 'building'"
+					:staffAgencyId="staffAgencyId"
+					:showImportBtn="showImportBtn"
+					:ownerName="ownerName"
+					:ownerPhone="ownerPhone"
+					:rentFlag="rentFlag"
+					:purpose="purpose"
+					:remark="remark"
+					:updateStartDate="updateStartDate"
+					:updateEndDate="updateEndDate"
+					:orgType="orgType"
+					:orgId="orgId"
+					ref="ref_buildingTable"
+					@refreshTree="refreshTree"
+				></room-table>
+
+				<community-table
+					v-if="
+						selTreeObj.level !== 'building' &&
+						selTreeObj.level !== 'neighborHood' &&
+						!showRoomTable
+					"
+					@toNextLevel="toNextLevel"
+					:staffAgencyId="staffAgencyId"
+					:ownerName="ownerName"
+					:ownerPhone="ownerPhone"
+					:rentFlag="rentFlag"
+					:purpose="purpose"
+					:remark="remark"
+					:updateStartDate="updateStartDate"
+					:updateEndDate="updateEndDate"
+					ref="ref_communityTable"
+					@refreshTree="refreshTree"
+				></community-table>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-import CDialog from '@c/CDialog'
-import communityTable from './communityTable'
-import buildTable from './buildTable'
-import roomTable from './roomTable'
+import CDialog from "@c/CDialog";
+import communityTable from "./communityTable";
+import buildTable from "./buildTable";
+import roomTable from "./roomTable";
+import agencyInfo from "@/views/modules/base/communityYantai/cpts/agency-info.vue";
+import gridInfo from "@/views/modules/base/communityYantai/cpts/grid-info.vue";
 import { requestPost } from "@/js/dai/request";
-import { mapGetters } from 'vuex'
-import { Loading } from 'element-ui' // 引入Loading服务
-import nextTick from 'dai-js/tools/nextTick'
+import { mapGetters } from "vuex";
+import { Loading } from "element-ui"; // 引入Loading服务
+import nextTick from "dai-js/tools/nextTick";
 
-let loading // 加载动画
+let loading; // 加载动画
 export default {
-  data () {
-    let endDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
-      let nowData = Date.now()
-      if (this.updateStartDate) {
-        let startTime = new Date(this.updateStartDate)
-        return time.getTime() > nowData || time.getTime() < startTime || time.getTime() === startTime
-      } else {
-        return time.getTime() > nowData
-      }
-
-    }
-    let startDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
-      let nowData = Date.now()
-      return time.getTime() > nowData
-    }
-    return {
-      // filterText: '',
-      treeLoading: true,
-      treeData: [],
-      openNodes: [],
-      defaultProps: {
-        children: 'children',
-        label: 'showName',
-        isLeaf: 'isLeaf'
-      },
-      orgOptions: [],
-      orgOptionProps: {
-        multiple: false,
-        value: 'agencyId',
-        label: 'agencyName',
-        children: 'subAgencyList',
-        checkStrictly: true
-      },
-      agencyIdArray: [],
-      orgType: '',
-      orgId: '',
-
-      selTreeObj: {},
-
-      centerPoint: [],
-      staffAgencyId: localStorage.getItem("agencyId"),
-      showImportBtn: false,
-
-      rentList: [
-        {
-          value: '1',
-          label: '出租'
-        },
-        {
-          value: '2',
-          label: '闲置'
-        },
-        {
-          value: '0',
-          label: '自住'
-        },
-        {
-          value: '3',
-          label: '未出售'
-        },
-      ],
-      ownerName: '',
-      ownerPhone: '',
-      rentFlag: '',
-      purpose: '',
-      remark: '',
-      updateStartDate: '',
-      updateEndDate: '',
-      showRoomTable: false,
-      selObj: {},
-      purposeArr: [
-        { dictValue: '1', dictName: '住宅' },
-        { dictValue: '2', dictName: '商业' },
-        { dictValue: '3', dictName: '办公' },
-        { dictValue: '4', dictName: '工业' },
-        { dictValue: '5', dictName: '仓储' },
-        { dictValue: '6', dictName: '商住混用' },
-        { dictValue: '7', dictName: '其他' }
-      ],
-      endPickerOptions: {
-        disabledDate: endDisabledDate
-      },
-      startPickerOptions: {
-        disabledDate: startDisabledDate
-      },
-
-      selGridId: '',
-      selAgencyId: '',
-
-
-    }
-  },
-  components: {
-    CDialog
-  },
-  async mounted () {
-    this.treeLoading = true
-
-    await this.loadOrgData()
-    await this.loadTree()
-    await this.getOrgTreeList()
-
-    await this.$refs['ref_communityTable'].loadTable(true, this.selTreeObj)
-    if (this.treeData.length > 0) {
-      this.$nextTick(() => {
-        // ref_tree 元素的ref   value 绑定的node-key
-        this.$refs.ref_tree.setCurrentKey(this.treeData[0].id);
-      });
-    }
-    this.treeLoading = false
-
-  },
-  computed: {
-    rowHeight () {
-      return this.$store.state.inIframe ? this.clientHeight - 140 + this.iframeHeight + 'px' : this.clientHeight - 140 + 'px'
-
-    },
-    treeHeight () {
-      return this.$store.state.inIframe ? this.clientHeight - 200 + this.iframeHeight + 'px' : this.clientHeight - 200 + 'px'
-
-    },
-
-    ...mapGetters(['clientHeight', 'iframeHeight'])
-  },
-  methods: {
-    async getOrgTreeList () {
-      let url = '/gov/org/customeragency/agencygridtree'
-      let params = {}
-      const { data, code, msg } = await requestPost(url, params)
-
-      if (code === 0) {
-        this.orgOptions = []
-        this.orgOptions.push(data)
-
-      } else {
-        this.$message.error(msg)
-      }
-
-    },
-    handleChangeAgency (val) {
-      let obj = this.$refs["myCascader"].getCheckedNodes()[0].data
-      if (obj) {
-
-        this.orgType = obj.level === 'grid' ? 'grid' : 'agency'
-        this.orgId = obj.agencyId
-
-      } else {
-        this.orgType = ''
-        this.orgId = ''
-      }
-
-
-    },
-    async lazyLoadTree (node, resolve) {
-      console.log(node)
-      // debugger
-      if (node.level !== 0) {
-        const url = "/gov/org/building/next-tree-node"
-        let params = {
-          id: node.data.id,
-          level: node.data.level
-        }
-
-        const { data, code, msg } = await requestPost(url, params)
-
-        if (code === 0) {
-          data.forEach(element => {
-            if (element.level === 'building') {
-              element.isLeaf = true
-            }
-          });
-          console.log(data)
-          resolve(data)
-
-        } else {
-          this.$message.error(msg)
-        }
-      }
-
-    },
-
-
-    handleSearch () {
-      // if (this.ownerName || this.ownerPhone || this.rentFlag || this.purpose || this.remark) {
-      this.showRoomTable = true
-
-      this.$nextTick(() => {
-        this.$refs['ref_buildingTable'].loadTable('search', this.selTreeObj)
-      })
-      // } else {
-      //   this.$message.warning('请输入查询条件')
-      // }
-
-
-    },
-
-    //重置搜索条件
-    resetSearch () {
-      this.ownerName = ''
-      this.ownerPhone = ''
-      this.rentFlag = ''
-      this.purpose = ''
-      this.remark = ''
-      this.updateStartDate = ''
-      this.updateEndDate = ''
-      this.orgType = ''
-      this.orgId = ''
-
-      this.pageSize = 10
-      this.pageNo = 1
-
-      this.agencyIdArray = []
-
-    },
-
-    async loadTree (isRefresh) {
-      const url = "/gov/org/building/treeinit"
-      let params = {}
-
-      const { data, code, msg } = await requestPost(url, params)
-
-      if (code === 0) {
-        this.openNodes = []
-        this.openNodes.push(data.id)
-
-        this.treeData = []
-        this.treeData.push(data)
-
-        if (!isRefresh && data) {
-
-          this.selTreeObj = data
-          if (!this.selTreeObj.latitude) {
-            this.selTreeObj.latitude = this.centerPoint[0]
-          }
-
-          if (!this.selTreeObj.longitude) {
-            this.selTreeObj.longitude = this.centerPoint[1]
-          }
-        }
-
-      } else {
-        this.$message.error(msg)
-      }
-    },
-
-    //加载组织数据
-    async loadOrgData () {
-      const url = "/gov/org/agency/maporg"
-      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg"
-      let params = {}
-
-      const { data, code, msg } = await requestPost(url, params)
-
-      if (code === 0) {
-        this.centerPoint = []
-
-        this.centerPoint.push(data.latitude)
-        this.centerPoint.push(data.longitude)
-
-      } else {
-        this.$message.error(msg)
-      }
-
-    },
-
-    async handleNodeClick (obj) {
-      this.ownerName = ''
-      this.ownerPhone = ''
-      this.rentFlag = ''
-      this.purpose = ''
-      this.remark = ''
-      this.updateStartDate = ''
-      this.updateEndDate = ''
-      this.showRoomTable = false
-
-      this.selObj = JSON.parse(JSON.stringify(obj))
-      this.getTreeObj(obj)
-      await nextTick(1000)
-
-      if (obj.level === 'building') {//点击楼栋
-
-        this.selAgencyId = ''
-        this.selGridId = ''
-
-        this.$refs['ref_buildingTable'].loadTable('tree', this.selTreeObj)
-
-
-      } else if (obj.level === 'neighborHood') {//点击小区
-
-        this.selAgencyId = ''
-        this.selGridId = ''
-
-        this.$refs['ref_neighTable'].loadTable(true, this.selTreeObj)
-
-      } else {
-        this.$refs['ref_communityTable'].loadTable(true, this.selTreeObj)
-
-        if (obj.level === 'grid') {
-          this.selAgencyId = ''
-          this.selGridId = this.selTreeObj.id
-        } else {
-          this.selAgencyId = this.selTreeObj.id
-          this.selGridId = ''
-        }
-
-      }
-
-
-    },
-
-    //添加小区结束
-    async refreshTree () {
-      this.treeLoading = true
-      await this.loadTree(this.selTreeObj.id)
-      this.$nextTick(() => {
-        // ref_tree 元素的ref   value 绑定的node-key
-        this.$refs.ref_tree.setCurrentKey(this.selTreeObj.id);
-      });
-      this.treeLoading = false
-    },
-
-    //进入下一级
-    async toNextLevel (row, level) {
-      console.log(row)
-      if (level === 'community') {
-        this.selTreeObj.id = row.neighborHoodId
-        this.selTreeObj.label = row.neighborHoodName
-        this.selTreeObj.latitude = row.latitude
-        this.selTreeObj.level = 'neighborHood'
-        this.selTreeObj.longitude = row.longitude
-
-      } else {
-        this.selTreeObj.id = row.buildingId
-        this.selTreeObj.label = row.buildingName
-        this.selTreeObj.latitude = row.latitude
-        this.selTreeObj.level = "building"
-        this.selTreeObj.longitude = row.longitude
-      }
-
-      console.log(this.selTreeObj)
-
-      this.ownerName = ''
-      this.ownerPhone = ''
-      this.rentFlag = ''
-      this.purpose = ''
-      this.remark = ''
-      this.updateStartDate = ''
-      this.updateEndDate = ''
-      this.showRoomTable = false
-
-      this.selObj = JSON.parse(JSON.stringify(this.selTreeObj))
-      // this.getTreeObj(obj)
-      await nextTick(1000)
-
-      if (this.selObj.level === 'building') {//点击楼栋
-        this.selAgencyId = ''
-        this.selGridId = ''
-
-        this.$refs['ref_buildingTable'].loadTable('tree', this.selTreeObj)
-
-      } else if (this.selObj.level === 'neighborHood') {//点击小区
-        this.selAgencyId = ''
-        this.selGridId = ''
-
-        this.$refs['ref_neighTable'].loadTable(true, this.selTreeObj)
-
-      }
-
-
-    },
-
-    //解析树数据
-    getTreeObj (obj) {
-      // 树接口：
-      // 组织：组织id、组织名称、type、经度、纬度
-      // 小区：小区id、小区名称、type、所属网格id、所属网格名称、所属组织id、所属组织名称、经度、纬度
-      // 楼：楼id、楼名称、type、所属小区id、所属小区名称
-      if (obj.level === 'building') {//点击楼栋
-        let neighborHoodNode = this.$refs.ref_tree.getNode(obj.pid)//所属小区
-
-        let gridNode = this.$refs.ref_tree.getNode(neighborHoodNode.data.pid)//所属网格
-        let agencyNode = this.$refs.ref_tree.getNode(gridNode.data.pid)//所属社区
-        obj.agencyId = agencyNode.data.id
-        obj.agencyName = agencyNode.data.label
-        obj.gridId = gridNode.data.id
-        obj.gridName = gridNode.data.label
-        obj.neighborHoodId = neighborHoodNode.data.id
-        obj.neighborHoodName = neighborHoodNode.data.label
-        if (obj.agencyId === this.staffAgencyId) {
-          this.showImportBtn = true
-        } else {
-          this.showImportBtn = false
-        }
-
-      } else if (obj.level === 'neighborHood') {//点击小区
-        let gridNode = this.$refs.ref_tree.getNode(obj.pid)
-        let agencyNode = this.$refs.ref_tree.getNode(gridNode.data.pid)
-        obj.gridId = gridNode.data.id
-        obj.gridName = gridNode.data.label
-        obj.agencyId = agencyNode.data.id
-        obj.agencyName = agencyNode.data.label
-        if (obj.agencyId === this.staffAgencyId) {
-          this.showImportBtn = true
-        } else {
-          this.showImportBtn = false
-        }
-
-      } else {
-
-      }
-
-      if (!obj.latitude) {
-        obj.latitude = this.centerPoint[0]
-      }
-
-      if (!obj.longitude) {
-        obj.longitude = this.centerPoint[1]
-      }
-      this.selTreeObj = obj
-      console.log('selTreeObj', this.selTreeObj)
-
-    },
-
-    filterNode (value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
-    },
-
-    // 开启加载动画
-    startLoading () {
-      loading = Loading.service({
-        lock: true, // 是否锁定
-        text: '正在加载……', // 加载中需要显示的文字
-        background: 'rgba(0,0,0,.7)' // 背景颜色
-      })
-    },
-    // 结束加载动画
-    endLoading () {
-      // clearTimeout(timer);
-      if (loading) {
-        loading.close()
-      }
-    }
-  },
-  watch: {
-    // filterText (val) {
-    //   this.$refs.ref_tree.filter(val);
-    // }
-  },
-  components: {
-    communityTable, buildTable, roomTable
-  }
-}
+	components: {
+		CDialog,
+		communityTable,
+		buildTable,
+		roomTable,
+		agencyInfo,
+		gridInfo,
+	},
+
+	data() {
+		let endDisabledDate = (time) => {
+			//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
+			let nowData = Date.now();
+			if (this.updateStartDate) {
+				let startTime = new Date(this.updateStartDate);
+				return (
+					time.getTime() > nowData ||
+					time.getTime() < startTime ||
+					time.getTime() === startTime
+				);
+			} else {
+				return time.getTime() > nowData;
+			}
+		};
+		let startDisabledDate = (time) => {
+			//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
+			let nowData = Date.now();
+			return time.getTime() > nowData;
+		};
+		return {
+			// filterText: '',
+			treeLoading: true,
+			treeData: [],
+			openNodes: [],
+			defaultProps: {
+				children: "children",
+				label: "showName",
+				isLeaf: "isLeaf",
+			},
+			orgOptions: [],
+			orgOptionProps: {
+				multiple: false,
+				value: "agencyId",
+				label: "agencyName",
+				children: "subAgencyList",
+				checkStrictly: true,
+			},
+			agencyIdArray: [],
+			orgType: "",
+			orgId: "",
+
+			selTreeObj: {},
+
+			centerPoint: [],
+			staffAgencyId: localStorage.getItem("agencyId"),
+			showImportBtn: false,
+
+			rentList: [
+				{
+					value: "1",
+					label: "出租",
+				},
+				{
+					value: "2",
+					label: "闲置",
+				},
+				{
+					value: "0",
+					label: "自住",
+				},
+				{
+					value: "3",
+					label: "未出售",
+				},
+			],
+			ownerName: "",
+			ownerPhone: "",
+			rentFlag: "",
+			purpose: "",
+			remark: "",
+			updateStartDate: "",
+			updateEndDate: "",
+			showRoomTable: false,
+			selObj: {},
+			purposeArr: [
+				{ dictValue: "1", dictName: "住宅" },
+				{ dictValue: "2", dictName: "商业" },
+				{ dictValue: "3", dictName: "办公" },
+				{ dictValue: "4", dictName: "工业" },
+				{ dictValue: "5", dictName: "仓储" },
+				{ dictValue: "6", dictName: "商住混用" },
+				{ dictValue: "7", dictName: "其他" },
+			],
+			endPickerOptions: {
+				disabledDate: endDisabledDate,
+			},
+			startPickerOptions: {
+				disabledDate: startDisabledDate,
+			},
+
+			selGridId: "",
+			selAgencyId: "",
+
+			// 弹窗组织详情
+			displayedPopOrg: false,
+			currentPopOrgId: "",
+			currentPopOrgLevel: "",
+			popOrgStyle: "",
+		};
+	},
+
+	computed: {
+		rowHeight() {
+			return this.$store.state.inIframe
+				? this.clientHeight - 140 + this.iframeHeight + "px"
+				: this.clientHeight - 140 + "px";
+		},
+		treeHeight() {
+			return this.$store.state.inIframe
+				? this.clientHeight - 200 + this.iframeHeight + "px"
+				: this.clientHeight - 200 + "px";
+		},
+
+		...mapGetters(["clientHeight", "iframeHeight"]),
+	},
+
+	async mounted() {
+		this.treeLoading = true;
+
+		await this.loadOrgData();
+		await this.loadTree();
+		await this.getOrgTreeList();
+
+		await this.$refs["ref_communityTable"].loadTable(true, this.selTreeObj);
+		if (this.treeData.length > 0) {
+			this.$nextTick(() => {
+				// ref_tree 元素的ref   value 绑定的node-key
+				this.$refs.ref_tree.setCurrentKey(this.treeData[0].id);
+			});
+		}
+		this.treeLoading = false;
+	},
+
+	methods: {
+		handleClickAgencyIcon(item, event) {
+			console.log(item, event);
+			const { level } = item;
+			if (
+				level == "province" ||
+				level == "city" ||
+				level == "district" ||
+				level == "street" ||
+				level == "community"
+			) {
+				this.currentPopOrgLevel = "agency";
+			} else if (level == "grid") {
+				this.currentPopOrgLevel = "grid";
+			} else {
+				this.currentPopOrgLevel = "";
+				return;
+			}
+
+			this.currentPopOrgId = item.id;
+			this.displayedPopOrg = true;
+
+			const { layerY, layerX } = event;
+			let popOrgStyle = {
+				left: layerX + 40 + "px",
+				top : layerY + 20 + "px"
+			};
+			if (layerY > 300) {
+				popOrgStyle.transform ="translateY(-100%)";
+
+			}
+			this.popOrgStyle = popOrgStyle;
+		},
+
+		async getOrgTreeList() {
+			let url = "/gov/org/customeragency/agencygridtree";
+			let params = {};
+			const { data, code, msg } = await requestPost(url, params);
+
+			if (code === 0) {
+				this.orgOptions = [];
+				this.orgOptions.push(data);
+			} else {
+				this.$message.error(msg);
+			}
+		},
+		handleChangeAgency(val) {
+			let obj = this.$refs["myCascader"].getCheckedNodes()[0].data;
+			if (obj) {
+				this.orgType = obj.level === "grid" ? "grid" : "agency";
+				this.orgId = obj.agencyId;
+			} else {
+				this.orgType = "";
+				this.orgId = "";
+			}
+		},
+		async lazyLoadTree(node, resolve) {
+			console.log(node);
+			// debugger
+			if (node.level !== 0) {
+				const url = "/gov/org/building/next-tree-node";
+				let params = {
+					id: node.data.id,
+					level: node.data.level,
+				};
+
+				const { data, code, msg } = await requestPost(url, params);
+
+				if (code === 0) {
+					data.forEach((element) => {
+						if (element.level === "building") {
+							element.isLeaf = true;
+						}
+					});
+					console.log(data);
+					resolve(data);
+				} else {
+					this.$message.error(msg);
+				}
+			}
+		},
+
+		handleSearch() {
+			// if (this.ownerName || this.ownerPhone || this.rentFlag || this.purpose || this.remark) {
+			this.showRoomTable = true;
+
+			this.$nextTick(() => {
+				this.$refs["ref_buildingTable"].loadTable(
+					"search",
+					this.selTreeObj
+				);
+			});
+			// } else {
+			//   this.$message.warning('请输入查询条件')
+			// }
+		},
+
+		//重置搜索条件
+		resetSearch() {
+			this.ownerName = "";
+			this.ownerPhone = "";
+			this.rentFlag = "";
+			this.purpose = "";
+			this.remark = "";
+			this.updateStartDate = "";
+			this.updateEndDate = "";
+			this.orgType = "";
+			this.orgId = "";
+
+			this.pageSize = 10;
+			this.pageNo = 1;
+
+			this.agencyIdArray = [];
+		},
+
+		async loadTree(isRefresh) {
+			const url = "/gov/org/building/treeinit";
+			let params = {};
+
+			const { data, code, msg } = await requestPost(url, params);
+
+			if (code === 0) {
+				this.openNodes = [];
+				this.openNodes.push(data.id);
+
+				this.treeData = [];
+				this.treeData.push(data);
+
+				if (!isRefresh && data) {
+					this.selTreeObj = data;
+					if (!this.selTreeObj.latitude) {
+						this.selTreeObj.latitude = this.centerPoint[0];
+					}
+
+					if (!this.selTreeObj.longitude) {
+						this.selTreeObj.longitude = this.centerPoint[1];
+					}
+				}
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		//加载组织数据
+		async loadOrgData() {
+			const url = "/gov/org/agency/maporg";
+			// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg"
+			let params = {};
+
+			const { data, code, msg } = await requestPost(url, params);
+
+			if (code === 0) {
+				this.centerPoint = [];
+
+				this.centerPoint.push(data.latitude);
+				this.centerPoint.push(data.longitude);
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		async handleNodeClick(obj) {
+			this.ownerName = "";
+			this.ownerPhone = "";
+			this.rentFlag = "";
+			this.purpose = "";
+			this.remark = "";
+			this.updateStartDate = "";
+			this.updateEndDate = "";
+			this.showRoomTable = false;
+
+			this.selObj = JSON.parse(JSON.stringify(obj));
+			this.getTreeObj(obj);
+			await nextTick(1000);
+
+			if (obj.level === "building") {
+				//点击楼栋
+
+				this.selAgencyId = "";
+				this.selGridId = "";
+
+				this.$refs["ref_buildingTable"].loadTable(
+					"tree",
+					this.selTreeObj
+				);
+			} else if (obj.level === "neighborHood") {
+				//点击小区
+
+				this.selAgencyId = "";
+				this.selGridId = "";
+
+				this.$refs["ref_neighTable"].loadTable(true, this.selTreeObj);
+			} else {
+				this.$refs["ref_communityTable"].loadTable(
+					true,
+					this.selTreeObj
+				);
+
+				if (obj.level === "grid") {
+					this.selAgencyId = "";
+					this.selGridId = this.selTreeObj.id;
+				} else {
+					this.selAgencyId = this.selTreeObj.id;
+					this.selGridId = "";
+				}
+			}
+		},
+
+		//添加小区结束
+		async refreshTree() {
+			this.treeLoading = true;
+			await this.loadTree(this.selTreeObj.id);
+			this.$nextTick(() => {
+				// ref_tree 元素的ref   value 绑定的node-key
+				this.$refs.ref_tree.setCurrentKey(this.selTreeObj.id);
+			});
+			this.treeLoading = false;
+		},
+
+		//进入下一级
+		async toNextLevel(row, level) {
+			console.log(row);
+			if (level === "community") {
+				this.selTreeObj.id = row.neighborHoodId;
+				this.selTreeObj.label = row.neighborHoodName;
+				this.selTreeObj.latitude = row.latitude;
+				this.selTreeObj.level = "neighborHood";
+				this.selTreeObj.longitude = row.longitude;
+			} else {
+				this.selTreeObj.id = row.buildingId;
+				this.selTreeObj.label = row.buildingName;
+				this.selTreeObj.latitude = row.latitude;
+				this.selTreeObj.level = "building";
+				this.selTreeObj.longitude = row.longitude;
+			}
+
+			console.log(this.selTreeObj);
+
+			this.ownerName = "";
+			this.ownerPhone = "";
+			this.rentFlag = "";
+			this.purpose = "";
+			this.remark = "";
+			this.updateStartDate = "";
+			this.updateEndDate = "";
+			this.showRoomTable = false;
+
+			this.selObj = JSON.parse(JSON.stringify(this.selTreeObj));
+			// this.getTreeObj(obj)
+			await nextTick(1000);
+
+			if (this.selObj.level === "building") {
+				//点击楼栋
+				this.selAgencyId = "";
+				this.selGridId = "";
+
+				this.$refs["ref_buildingTable"].loadTable(
+					"tree",
+					this.selTreeObj
+				);
+			} else if (this.selObj.level === "neighborHood") {
+				//点击小区
+				this.selAgencyId = "";
+				this.selGridId = "";
+
+				this.$refs["ref_neighTable"].loadTable(true, this.selTreeObj);
+			}
+		},
+
+		//解析树数据
+		getTreeObj(obj) {
+			// 树接口：
+			// 组织：组织id、组织名称、type、经度、纬度
+			// 小区：小区id、小区名称、type、所属网格id、所属网格名称、所属组织id、所属组织名称、经度、纬度
+			// 楼：楼id、楼名称、type、所属小区id、所属小区名称
+			if (obj.level === "building") {
+				//点击楼栋
+				let neighborHoodNode = this.$refs.ref_tree.getNode(obj.pid); //所属小区
+
+				let gridNode = this.$refs.ref_tree.getNode(
+					neighborHoodNode.data.pid
+				); //所属网格
+				let agencyNode = this.$refs.ref_tree.getNode(gridNode.data.pid); //所属社区
+				obj.agencyId = agencyNode.data.id;
+				obj.agencyName = agencyNode.data.label;
+				obj.gridId = gridNode.data.id;
+				obj.gridName = gridNode.data.label;
+				obj.neighborHoodId = neighborHoodNode.data.id;
+				obj.neighborHoodName = neighborHoodNode.data.label;
+				if (obj.agencyId === this.staffAgencyId) {
+					this.showImportBtn = true;
+				} else {
+					this.showImportBtn = false;
+				}
+			} else if (obj.level === "neighborHood") {
+				//点击小区
+				let gridNode = this.$refs.ref_tree.getNode(obj.pid);
+				let agencyNode = this.$refs.ref_tree.getNode(gridNode.data.pid);
+				obj.gridId = gridNode.data.id;
+				obj.gridName = gridNode.data.label;
+				obj.agencyId = agencyNode.data.id;
+				obj.agencyName = agencyNode.data.label;
+				if (obj.agencyId === this.staffAgencyId) {
+					this.showImportBtn = true;
+				} else {
+					this.showImportBtn = false;
+				}
+			} else {
+			}
+
+			if (!obj.latitude) {
+				obj.latitude = this.centerPoint[0];
+			}
+
+			if (!obj.longitude) {
+				obj.longitude = this.centerPoint[1];
+			}
+			this.selTreeObj = obj;
+			console.log("selTreeObj", this.selTreeObj);
+		},
+
+		filterNode(value, data) {
+			if (!value) return true;
+			return data.label.indexOf(value) !== -1;
+		},
+
+		// 开启加载动画
+		startLoading() {
+			loading = Loading.service({
+				lock: true, // 是否锁定
+				text: "正在加载……", // 加载中需要显示的文字
+				background: "rgba(0,0,0,.7)", // 背景颜色
+			});
+		},
+		// 结束加载动画
+		endLoading() {
+			// clearTimeout(timer);
+			if (loading) {
+				loading.close();
+			}
+		},
+	},
+};
 </script>
 
-
 <style>
 /* .aui-content > .el-tabs > .el-tabs__content {
     padding: 0px;
   } */
 
 .el-tree-node:focus > .el-tree-node__content {
-  /* background-color: #ccc !important; */
-  color: #2195fe;
+	/* background-color: #ccc !important; */
+	color: #2195fe;
 }
 </style>
 <style lang="scss" scoped>
 .div_tree {
-  /deep/ .el-scrollbar__wrap {
-    overflow-x: hidden !important;
-  }
+	/deep/ .el-scrollbar__wrap {
+		overflow-x: hidden !important;
+	}
 }
 </style>
 
-<style lang="scss" scoped >
+<style lang="scss" scoped>
 @import "@/assets/scss/modules/visual/communityManage.scss";
 @import "@/assets/scss/modules/management/list-main.scss";
 </style>
 
-<style lang="scss" scoped >
+<style lang="scss" scoped>
 .div_main {
-  display: flex;
+	display: flex;
 }
 .scrollar {
-  margin-top: 10px;
+	margin-top: 10px;
 }
 
 .div_tree {
-  flex: 0 0 280px;
-  background-color: #ffffff;
-  border-radius: 5px;
-  padding: 10px;
-  overflow-y: hidden;
+	flex: 0 0 280px;
+	background-color: #ffffff;
+	border-radius: 5px;
+	padding: 10px;
+	overflow-y: hidden;
 }
 .filter_tree {
-  overflow-x: auto;
+	overflow-x: auto;
 }
 
 // .div_table {
@@ -713,16 +784,37 @@ export default {
 //   padding: 10px;
 // }
 .div_left {
-  // flex: 1;
-  width: calc(100% - 300px);
+	// flex: 1;
+	width: calc(100% - 300px);
 }
 .div_left_table {
-  margin-top: 10px;
-  margin-left: 15px;
-  background-color: #ffffff;
-  border-radius: 5px;
-  padding: 10px;
+	margin-top: 10px;
+	margin-left: 15px;
+	background-color: #ffffff;
+	border-radius: 5px;
+	padding: 10px;
 }
-</style>
 
+.custom-tree-node {
+	i {
+		margin-left: 4px;
+		display: inline-block;
+		width: 14px;
+		height: 14px;
+		background-color: #ddd;
+		color: #ffffff;
+		border-radius: 100%;
+		text-align: center;
+		line-height: 14px;
+		font-size: 12px;
+		font-weight: bold;
+		font-style: normal;
+	}
+}
 
+.m-pop {
+	position: absolute;
+	z-index: 500;
+	transition: all ease 0.4s;
+}
+</style>
diff --git a/src/views/modules/base/communityYantai/cpts/agency-info.vue b/src/views/modules/base/communityYantai/cpts/agency-info.vue
new file mode 100644
index 000000000..ae9fb29a9
--- /dev/null
+++ b/src/views/modules/base/communityYantai/cpts/agency-info.vue
@@ -0,0 +1,176 @@
+<template>
+	<div class="m-info">
+		<div class="btn-close" @click="off">
+			<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
+				<use xlink:href="#icon-close"></use>
+			</svg>
+		</div>
+
+		<div class="info">
+			<div class="title">{{ info.agencyName }}</div>
+			<div class="item">
+				<div class="field">组织区划：</div>
+				<div class="value">{{ info.areaName }}</div>
+			</div>
+			<div class="item">
+				<div class="field">组织编码：</div>
+				<div class="value">{{ info.areaCode }}</div>
+			</div>
+			<div class="item">
+				<div class="field">负责人：</div>
+				<div class="value">{{ info.contacts }}</div>
+			</div>
+			<div class="item">
+				<div class="field">联系电话：</div>
+				<div class="value">{{ info.mobile }}</div>
+			</div>
+			<div class="item" v-if="info.intro">
+				<div class="field">社区简介：</div>
+				<div class="value">{{ info.intro }}</div>
+			</div>
+			<div class="item" v-if="mapData">
+				<div class="field">管辖范围：</div>
+				<div class="value-map">
+					<grid-map ref="map" :srcGridData="mapData" :pitch="0" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import gridMap from "./map";
+
+export default {
+	components: { gridMap },
+
+	props: {
+		agencyId: {
+			//显示【显示脱敏信息】按钮
+			type: String,
+			default: "",
+		},
+	},
+
+	data() {
+		return {
+			info: {
+				agencyId: "", // 所属组织ID
+				level: "",
+				agencyName: "",
+				areaCode: "",
+				areaName: "",
+				contacts: "",
+				mobile: "",
+				intro: "",
+			},
+
+			mapData: null,
+
+			displayed: false,
+		};
+	},
+
+	computed: {},
+
+	mounted() {
+		if (this.agencyId) {
+			this.getInfo();
+			this.getMapData();
+		}
+	},
+
+	watch: {
+		agencyId() {
+			this.mapData = null;
+			this.getInfo();
+			this.getMapData();
+		},
+	},
+
+	methods: {
+		off() {
+			this.$emit("close");
+		},
+
+		async getInfo() {
+			const url = "/gov/org/agency/agencydetail";
+			let params = {
+				agencyId: this.agencyId,
+			};
+
+			const { data, code, msg } = await requestPost(url, params);
+
+			if (code === 0) {
+				this.info = data;
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		async getMapData() {
+			const url = "/gov/org/agency/maporg";
+			let params = {
+				level: "agency",
+				orgId: this.agencyId,
+			};
+
+			const { data, code, msg } = await requestPost(url, params);
+
+			if (code === 0) {
+				if (data.coordinates) {
+					this.mapData = data;
+				}
+			} else {
+				this.$message.error(msg);
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.m-info {
+	position: relative;
+	width: 300px;
+	background-color: #ffffff;
+	box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+		0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+	padding: 15px;
+	.btn-close {
+		position: absolute;
+		top: 0;
+		right: 0;
+		font-size: 15px;
+		color: #aaaaaa;
+		padding: 15px;
+		cursor: pointer;
+		&:hover {
+			color: #666666;
+		}
+	}
+	.info {
+		.title {
+			font-size: 18px;
+			font-weight: bold;
+			line-height: 30px;
+		}
+		.item {
+			display: flex;
+			flex-wrap: wrap;
+			line-height: 24px;
+			.field {
+				width: 30%;
+			}
+			.value {
+				width: 70%;
+			}
+			.value-map {
+				width: 100%;
+				height: 200px;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/modules/base/communityYantai/cpts/grid-info.vue b/src/views/modules/base/communityYantai/cpts/grid-info.vue
new file mode 100644
index 000000000..80c769030
--- /dev/null
+++ b/src/views/modules/base/communityYantai/cpts/grid-info.vue
@@ -0,0 +1,176 @@
+<template>
+	<div class="m-info">
+		<div class="btn-close" @click="off">
+			<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
+				<use xlink:href="#icon-close"></use>
+			</svg>
+		</div>
+
+		<div class="info">
+			<div class="title">{{ info.gridName }}</div>
+			<div class="item">
+				<div class="field">组织区划：</div>
+				<div class="value">{{ info.areaName }}</div>
+			</div>
+			<div class="item">
+				<div class="field">组织编码：</div>
+				<div class="value">{{ info.areaCode }}</div>
+			</div>
+			<div class="item">
+				<div class="field">负责人：</div>
+				<div class="value">{{ info.contacts }}</div>
+			</div>
+			<div class="item">
+				<div class="field">联系电话：</div>
+				<div class="value">{{ info.mobile }}</div>
+			</div>
+			<div class="item" v-if="info.intro">
+				<div class="field">社区简介：</div>
+				<div class="value">{{ info.intro }}</div>
+			</div>
+			<div class="item" v-if="mapData">
+				<div class="field">管辖范围：</div>
+				<div class="value-map">
+					<grid-map ref="map" :srcGridData="mapData" :pitch="0" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import gridMap from "./map";
+
+export default {
+	components: { gridMap },
+
+	props: {
+		gridId: {
+			//显示【显示脱敏信息】按钮
+			type: String,
+			default: "",
+		},
+	},
+
+	data() {
+		return {
+			info: {
+				gridId: "", // 所属组织ID
+				level: "",
+				gridName: "",
+				areaCode: "",
+				areaName: "",
+				contacts: "",
+				mobile: "",
+				intro: "",
+			},
+
+			mapData: null,
+
+			displayed: false,
+		};
+	},
+
+	computed: {},
+
+	mounted() {
+		if (this.gridId) {
+			this.getInfo();
+			this.getMapData();
+		}
+	},
+
+	watch: {
+		gridId() {
+			this.mapData = null;
+			this.getInfo();
+			this.getMapData();
+		},
+	},
+
+	methods: {
+		off() {
+			this.$emit("close");
+		},
+
+		async getInfo() {
+			const url = "/gov/org/grid/griddetail";
+			let params = {
+				gridId: this.gridId,
+			};
+
+			const { data, code, msg } = await requestPost(url, params);
+
+			if (code === 0) {
+				this.info = data;
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		async getMapData() {
+			const url = "/gov/org/agency/maporg";
+			let params = {
+				level: "grid",
+				orgId: this.gridId,
+			};
+
+			const { data, code, msg } = await requestPost(url, params);
+
+			if (code === 0) {
+				if (data.coordinates) {
+					this.mapData = data;
+				}
+			} else {
+				this.$message.error(msg);
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.m-info {
+	position: relative;
+	width: 300px;
+	background-color: #ffffff;
+	box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+		0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+	padding: 15px;
+	.btn-close {
+		position: absolute;
+		top: 0;
+		right: 0;
+		font-size: 15px;
+		color: #aaaaaa;
+		padding: 15px;
+		cursor: pointer;
+		&:hover {
+			color: #666666;
+		}
+	}
+	.info {
+		.title {
+			font-size: 18px;
+			font-weight: bold;
+			line-height: 30px;
+		}
+		.item {
+			display: flex;
+			flex-wrap: wrap;
+			line-height: 24px;
+			.field {
+				width: 30%;
+			}
+			.value {
+				width: 70%;
+			}
+			.value-map {
+				width: 100%;
+				height: 200px;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/modules/base/communityYantai/cpts/map.vue b/src/views/modules/base/communityYantai/cpts/map.vue
new file mode 100644
index 000000000..1f49e7ef4
--- /dev/null
+++ b/src/views/modules/base/communityYantai/cpts/map.vue
@@ -0,0 +1,535 @@
+<template>
+	<div class="m-map" :class="{ 'z-td': mapType == 'td' }">
+		<div id="map"></div>
+	</div>
+</template>
+
+<script>
+import nextTick from "dai-js/tools/nextTick";
+import {
+	Scene,
+	PolygonLayer,
+	LineLayer,
+	RasterLayer,
+	PointLayer,
+} from "@antv/l7";
+import { GaodeMap, Map } from "@antv/l7-maps";
+import { spliceIntoChunks } from "@/utils/index";
+import { mapType, searchNearby } from "@/utils/dai-map";
+import tdtWp from "@/utils/tdt-wp";
+import tdtWpZw from "@/utils/tdt-wp-zw";
+
+let myMap;
+let scene;
+let polygonLayer;
+let lineLayer;
+let textLayer;
+let posLayer;
+let circleLayer;
+
+export default {
+	name: "l7",
+	inject: ["refresh"],
+
+	data() {
+		return {
+			mapType,
+
+			mapStyleType: "light",
+			//   srcGridData: {},
+			darkStyle: {
+				style: "amap://styles/blue",
+				polygonColor: [
+					"rgba(255, 100, 60, 0.5)",
+					"rgba(43, 231, 253, 0.35)",
+					"rgba(255, 255, 50, 0.35)",
+				],
+				lineColor: [
+					"rgba(255, 180, 150, 0.9)",
+					"rgba(43, 231, 253, 0.7)",
+					"rgba(255, 255, 50, 0.7)",
+				],
+				circleColor: [
+					"rgba(255, 180, 150, 0.99)",
+					"rgba(43, 231, 253, 0.99)",
+					"rgba(255, 255, 50, 0.99)",
+				],
+				textColor: [
+					"rgba(255, 100, 60, 0.99)",
+					"rgba(43, 231, 253, 0.99)",
+					"rgba(255, 255, 50, 0.99)",
+				],
+				textStrokeColor: "#fff",
+			},
+
+			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",
+			},
+		};
+	},
+
+	props: {
+		pitch: {
+			type: Number,
+			default: 60,
+		},
+
+		srcGridData: {
+			type: Object,
+			default: null,
+		},
+	},
+
+	components: {},
+
+	async mounted() {
+		// 临时这么用吧
+		window._AMapSecurityConfig = {
+			securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2",
+		};
+
+		this.iniMap();
+	},
+
+	computed: {
+		polygonData() {
+			const { srcGridData } = this;
+			if (srcGridData.coordinates == "") {
+				return { type: "FeatureCollection", features: [] };
+			}
+			const polygon = [
+				...[srcGridData]
+					.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
+								).filter((item) => item.length == 2),
+							],
+						},
+					})),
+			];
+			return { type: "FeatureCollection", features: polygon };
+		},
+
+		polygonDotData() {
+			const { srcGridData } = this;
+			if (srcGridData.coordinates == "") {
+				return { type: "FeatureCollection", features: [] };
+			}
+			const polygon = [
+				...[srcGridData]
+					.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: [
+								item.latitude
+									? [[item.longitude, item.latitude]]
+									: spliceIntoChunks(
+											item.coordinates
+												.split(",")
+												.map((item) =>
+													parseFloat(item)
+												),
+											2
+									  ).filter((item) => item.length == 2),
+							],
+						},
+					})),
+			];
+			return { type: "FeatureCollection", features: polygon };
+		},
+	},
+
+	watch: {
+		srcGridData(val, oldValue) {
+			if (oldValue == null) {
+				this.iniMap();
+			} else {
+				this.updateGrid();
+			}
+			this.zoomInABit();
+		},
+		dotList(val, oldValue) {
+			this.updateDot();
+		},
+		dotList2(val, oldValue) {
+			this.updateDot();
+		},
+	},
+
+	methods: {
+		iniMap() {
+			const { darkStyle, lightStyle, srcGridData } = this;
+			if (!srcGridData) return false;
+
+			let styleConfig = darkStyle;
+			if (this.mapStyleType == "light") {
+				styleConfig = lightStyle;
+			}
+
+			const iniCenter = [
+				srcGridData.longitude ||
+					this.$store.state.user.longitude ||
+					116.39743841556731,
+				srcGridData.latitude ||
+					this.$store.state.user.latitude ||
+					39.9088810666821,
+			];
+
+			if (mapType != "qq") {
+				myMap = new Map({
+					center: iniCenter,
+					zoom: 18,
+				});
+			} else {
+				myMap = new GaodeMap({
+					pitch: this.pitch,
+					style: styleConfig.style,
+					center: iniCenter,
+					token: "fc14b42e0ca18387866d68ebd4f150c1",
+					zoom: 18,
+					isHotspot: false,
+					resizeEnable: true,
+					doubleClickZoom: false,
+				});
+			}
+
+			scene = new Scene({
+				id: "map",
+				logoVisible: false,
+				map: myMap,
+			});
+
+			scene.on("loaded", async () => {
+				if (mapType == "td") {
+					this.iniMapBase(scene);
+				} else if (mapType == "tdzw") {
+					this.iniMapBase2(scene);
+				}
+
+				this.iniMapGrid(scene);
+				await nextTick(0);
+				this.zoomInABit();
+			});
+		},
+
+		// 初始化底图
+		iniMapBase(scene) {
+			console.log("-----------------iniMapBase");
+			// 底图服务
+			const baseLayer = new RasterLayer({
+				zIndex: 1,
+			});
+			baseLayer
+				.source(
+					"http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
+					{
+						parser: {
+							type: "rasterTile",
+							tileSize: 256,
+							// 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: 256,
+							// minZoom: 6,
+							// maxZoom: 15,
+							zoomOffset: 0,
+						},
+					}
+				)
+				.style({
+					opacity: 0.5,
+				});
+
+			scene.addLayer(baseLayer);
+			scene.addLayer(annotionLayer);
+		},
+
+		// 初始化底图 天地图山东政务网瓦片
+		iniMapBase2(scene) {
+			console.log("-----------------iniMapBase");
+			// 底图服务
+			const baseLayer = new RasterLayer({
+				zIndex: 1,
+			});
+			baseLayer
+				.source(tdtWpZw.vec, {
+					parser: {
+						type: "rasterTile",
+						tileSize: 256,
+						zoomOffset: 0,
+					},
+				})
+				.style({
+					opacity: 0.7,
+				});
+
+			scene.addLayer(baseLayer);
+		},
+
+		iniMapGrid(scene) {
+			const { darkStyle, lightStyle, polygonData, polygonDotData } = this;
+
+			let styleConfig = darkStyle;
+			if (this.mapStyleType == "light") {
+				styleConfig = lightStyle;
+			}
+
+			console.log("地图初始化数据", polygonData);
+
+			polygonLayer = new PolygonLayer({
+				autoFit: true,
+			})
+				// .size(0)
+				.source(polygonData)
+				.color("name", styleConfig.polygonColor)
+				//   .shape("extrude")
+				.shape("fill")
+				.style({
+					opacityLinear: {
+						enable: true, // true - false
+						dir: "out", // in - out
+					},
+					opacity: 1,
+					// heightfixed: true,
+					// pickLight: true,
+					raisingHeight: 0,
+					// sourceColor: "#333",
+					// targetColor: "rgba(255,255,255, 0.5)",
+				});
+
+			scene.addLayer(polygonLayer);
+
+			lineLayer = new LineLayer({
+				zIndex: 2,
+				name: "line2",
+			})
+				.source(polygonData)
+				.shape("line")
+				.size(1)
+				.color("name", styleConfig.lineColor)
+				.style({
+					opacity: 1,
+				})
+				.animate({
+					interval: 1, // 间隔
+					duration: 2, // 持续时间，延时
+					trailLength: 2, // 流线长度
+				});
+			scene.addLayer(lineLayer);
+
+			circleLayer = new PolygonLayer({
+				zIndex: 3,
+			})
+				.source(polygonDotData)
+				.color("name", styleConfig.circleColor)
+				.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")
+			);
+			posLayer = new PolygonLayer({
+				zIndex: 4,
+			})
+				.source(polygonDotData)
+				.shape("name", ["pos-red", "pos-green", "pos-yellow"])
+				.size(12)
+				.style({
+					offsets: [0, 8], // 文本相对锚点的偏移量 [水平, 垂直]
+					// rotation: 60,
+					// layerType: "fillImage",
+				});
+			scene.addLayer(posLayer);
+
+			textLayer = new PolygonLayer({
+				zIndex: 20,
+			})
+				.source(polygonDotData)
+				.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);
+
+			polygonLayer.on("mousemove", (e) => {
+				polygonLayer.style({
+					raisingHeight: 0,
+				});
+			});
+
+			polygonLayer.on("click", (e) => {
+				console.log(e.feature.properties);
+				this.$emit("clickAgency", e.feature.properties);
+			});
+
+			polygonLayer.on("unmousemove", (e) => {
+				polygonLayer.style({
+					raisingHeight: 0,
+				});
+			});
+		},
+
+		// 把地图缩放等级在原来基础上大一点
+		zoomInABit() {
+			let current = scene.getZoom();
+			scene.setZoomAndCenter(current + 0.5);
+		},
+
+		shiftMapStyle(type) {
+			this.mapStyleType = type;
+			localStorage.setItem("mapStyle", type);
+			this.refresh();
+		},
+
+		updateMap() {
+			this.updateGrid();
+		},
+
+		updateGrid() {
+			const { polygonData, polygonDotData } = this;
+			if (polygonLayer) {
+				polygonLayer.setData(polygonData);
+				lineLayer.setData(polygonData);
+				textLayer.setData(polygonDotData);
+				posLayer.setData(polygonDotData);
+				circleLayer.setData(polygonDotData);
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.m-map {
+	position: relative;
+	height: 100%;
+	border-radius: 10px;
+	overflow: hidden;
+
+	&.z-td {
+		#app {
+			/deep/ .l7-scene {
+				canvas {
+					background-color: rgba(43, 51, 73, 0.82);
+					background-image: radial-gradient(
+						rgba(0, 0, 0, 0),
+						rgba(0, 0, 0, 0.3),
+						#000
+					);
+				}
+				.gray {
+					-webkit-filter: grayscale(100%);
+					filter: grayscale(100%);
+					opacity: 0.7;
+				}
+			}
+		}
+	}
+
+	#map {
+		width: 100%;
+		height: 100%;
+	}
+	.btn {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 100px;
+		line-height: 36px;
+		height: 36px;
+		text-align: center;
+		color: #ffffff;
+		font-size: 14px;
+		background-color: rgba(#000, 0.2);
+		cursor: pointer;
+	}
+}
+</style>