diff --git a/package.json b/package.json
index 799ec0ed1..76454b2f6 100644
--- a/package.json
+++ b/package.json
@@ -19,60 +19,60 @@
     "@antv/l7": "2.9.14",
     "@antv/l7-draw": "3.0.5",
     "@antv/l7-maps": "2.9.14",
-    "@riophae/vue-treeselect": "^0.4.0",
-    "@tinymce/tinymce-vue": "^3.2.8",
-    "async-validator": "^4.2.5",
-    "axios": "^0.19.0",
-    "babel-eslint": "^8.0.1",
-    "babel-plugin-component": "^1.1.1",
-    "echarts": "^5.2.2",
-    "echarts-gl": "^2.0.9",
+    "@riophae/vue-treeselect": "0.4.0",
+    "@tinymce/tinymce-vue": "3.2.8",
+    "async-validator": "4.2.5",
+    "axios": "0.19.0",
+    "babel-eslint": "8.0.1",
+    "babel-plugin-component": "1.1.1",
+    "echarts": "5.2.2",
+    "echarts-gl": "2.0.9",
     "element-theme": "2.0.1",
     "element-ui": "2.13.2",
-    "file-saver": "^2.0.5",
-    "gulp-autoprefixer": "^6.1.0",
-    "gulp-clean-css": "^4.2.0",
-    "gulp-load-plugins": "^2.0.0",
-    "gulp-rename": "^1.4.0",
-    "gulp-sass": "^4.0.2",
-    "js-cookie": "^2.2.0",
-    "jsencrypt": "^3.0.3",
-    "lodash": "^4.17.15",
-    "mint-ui": "^2.2.13",
-    "node-sass": "^4.12.0",
-    "ol": "^6.9.0",
-    "portfinder": "^1.0.21",
-    "proj4": "^2.8.0",
-    "qs": "^6.7.0",
-    "quill": "^1.3.6",
-    "screenfull": "^4.2.1",
-    "sortablejs": "^1.12.0",
-    "svg-sprite-loader": "^4.1.6",
-    "throttle-debounce": "^3.0.1",
-    "v-distpicker": "^1.2.2",
-    "vue": "^2.6.11",
-    "vue-baidu-map": "^0.21.22",
-    "vue-i18n": "^8.12.0",
-    "vue-quill-editor": "^3.0.6",
-    "vue-router": "^3.0.7",
-    "vuex": "^3.1.1",
-    "xlsx": "^0.17.1"
+    "file-saver": "2.0.5",
+    "gulp-autoprefixer": "6.1.0",
+    "gulp-clean-css": "4.2.0",
+    "gulp-load-plugins": "2.0.0",
+    "gulp-rename": "1.4.0",
+    "gulp-sass": "4.0.2",
+    "js-cookie": "2.2.0",
+    "jsencrypt": "3.0.3",
+    "lodash": "4.17.15",
+    "mint-ui": "2.2.13",
+    "node-sass": "4.12.0",
+    "ol": "6.9.0",
+    "portfinder": "1.0.21",
+    "proj4": "2.8.0",
+    "qs": "6.7.0",
+    "quill": "1.3.6",
+    "screenfull": "4.2.1",
+    "sortablejs": "1.12.0",
+    "svg-sprite-loader": "4.1.6",
+    "throttle-debounce": "3.0.1",
+    "v-distpicker": "1.2.2",
+    "vue": "2.6.11",
+    "vue-baidu-map": "0.21.22",
+    "vue-i18n": "8.12.0",
+    "vue-quill-editor": "3.0.6",
+    "vue-router": "3.0.7",
+    "vuex": "3.1.1",
+    "xlsx": "0.17.1"
   },
   "devDependencies": {
-    "@antv/f2": "^3.8.10-beta.1",
+    "@antv/f2": "3.8.10-beta.1",
     "@tinymce/tinymce-vue": "3.2.8",
-    "@vue/cli-plugin-babel": "^3.10.0",
-    "@vue/cli-plugin-eslint": "^3.10.0",
-    "@vue/cli-service": "^3.10.0",
-    "@vue/eslint-config-standard": "^4.0.0",
-    "dai-js": "^0.0.12",
-    "element-theme-chalk": "^2.13.0",
-    "natives": "^1.1.6",
-    "ol": "^6.9.0",
-    "sass-loader": "^7.3.1",
-    "script-loader": "^0.7.2",
+    "@vue/cli-plugin-babel": "3.10.0",
+    "@vue/cli-plugin-eslint": "3.10.0",
+    "@vue/cli-service": "3.10.0",
+    "@vue/eslint-config-standard": "4.0.0",
+    "dai-js": "0.0.12",
+    "element-theme-chalk": "2.13.0",
+    "natives": "1.1.6",
+    "ol": "6.9.0",
+    "sass-loader": "7.3.1",
+    "script-loader": "0.7.2",
     "tinymce": "5.8.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "2.6.11"
   },
   "eslintConfig": {
     "root": true,
diff --git a/src/views/modules/base/communityYantai/community.vue b/src/views/modules/base/communityYantai/community.vue
index aa8a2889b..f419fb31e 100644
--- a/src/views/modules/base/communityYantai/community.vue
+++ b/src/views/modules/base/communityYantai/community.vue
@@ -1,707 +1,791 @@
 <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
+				ref="leftScrollBar"
+				: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
+							v-if="
+								data.level != 'neighborHood' &&
+								data.level != 'building' &&
+								data.level != 'unit'
+							"
+							@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 -
+					this.$refs.leftScrollBar.wrap.scrollTop +
+					"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 +797,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..a128b1228
--- /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">
+				<div class="field">组织简介：</div>
+				<div class="value">{{ info.remark || '--' }}</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: "",
+				remark: "",
+			},
+
+			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..3c174ec4c
--- /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">
+				<div class="field">网格简介：</div>
+				<div class="value">{{ info.remark || '--' }}</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: "",
+				remark: "",
+			},
+
+			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>
diff --git a/src/views/modules/base/organization/organization.vue b/src/views/modules/base/organization/organization.vue
index 362cd5f56..8eb4655a8 100644
--- a/src/views/modules/base/organization/organization.vue
+++ b/src/views/modules/base/organization/organization.vue
@@ -15,12 +15,10 @@
             <el-link v-if="index === breadcrumbArr.length - 1"
                      type="primary"
                      @click.native="modifyOrgInfo"
-                     style="
-                margin-left: 10px;
-                margin-top: 0px;
-                color: #3e8ef7;
-                cursor: pointer;
-              "
+                     style=" margin-left: 10px;
+                    margin-top: 0px;
+                    color: #3e8ef7;
+                    cursor: pointer;"
                      icon="el-icon-edit">修改</el-link>
           </el-breadcrumb-item>
         </el-breadcrumb>
@@ -714,6 +712,17 @@
           <el-input v-model="OrgDetailsForm.mobile"
                     placeholder="请输入联系电话"></el-input>
         </el-form-item>
+        <el-form-item label="社区简介">
+          <el-input
+          type="textarea"
+          v-model="OrgDetailsForm.remark"
+          placeholder="请输入内容"
+          resize="none"
+          rows=3
+          show-word-limit
+        >
+        </el-input>
+        </el-form-item>
         <el-form-item label="坐标">
           <div id="con"></div>
         </el-form-item>
@@ -1036,6 +1045,7 @@ export default {
         areaCode: "",
         agencyId: "",
         areaName: "",
+        remark:""
       },
       // 下级机关单位
       OrgUnitDetailsForm: {
@@ -2413,6 +2423,7 @@ export default {
         this.OrgDetailsForm.centerAddress = data.centerAddress;
         this.OrgDetailsForm.areaCode = data.areaCode;
         this.OrgDetailsForm.mobile = data.mobile;
+        this.OrgDetailsForm.remark = data.remark;
         this.latitude = data.latitude;
         this.longitude = data.longitude;
         this.OrgDetailsForm.agencyId = data.agencyId;
@@ -2479,6 +2490,7 @@ export default {
         mobile: this.OrgDetailsForm.mobile,
         code: this.OrgDetailsForm.code,
         latitude: this.latitude,
+        remark:this.OrgDetailsForm.remark,
         longitude: this.longitude,
       };
 
diff --git a/src/views/modules/communityParty/orgActivity/activivityList/addActivity.vue b/src/views/modules/communityParty/orgActivity/activivityList/addActivity.vue
index bbc79ac31..4b8e251ec 100644
--- a/src/views/modules/communityParty/orgActivity/activivityList/addActivity.vue
+++ b/src/views/modules/communityParty/orgActivity/activivityList/addActivity.vue
@@ -171,14 +171,14 @@
 
     </div>
 
-    <!-- <div class="div_btn">
+    <div class="div_btn">
       <el-button size="small"
                  @click="handleCancle">取 消</el-button>
       <el-button size="small"
                  type="primary"
                  :disabled="btnDisable"
                  @click="handleComfirm">确 定</el-button>
-    </div> -->
+    </div>
   </div>
 </template>
 
diff --git a/src/views/modules/shequ/index.vue b/src/views/modules/shequ/index.vue
index 1e9825252..03c824e91 100644
--- a/src/views/modules/shequ/index.vue
+++ b/src/views/modules/shequ/index.vue
@@ -823,7 +823,8 @@ export default {
           });
         }
       });
-      return selectedFuncIdList.map((id) => obj[id]);
+      console.log('88888888888888888', selectedFuncIdList)
+      return selectedFuncIdList.filter((id) => obj[id]).map((id) => obj[id]);
     },
     maxTableHeight() {
       // return this.clientHeight - 450;
diff --git a/src/views/modules/shequzhili/htgl/cpts/htglInfo.vue b/src/views/modules/shequzhili/htgl/cpts/htglInfo.vue
new file mode 100644
index 000000000..6926df9fb
--- /dev/null
+++ b/src/views/modules/shequzhili/htgl/cpts/htglInfo.vue
@@ -0,0 +1,83 @@
+<template>
+ <div>
+ <div class="">
+    <el-row type="flex"  >
+          <el-col :span="24">
+                <span class="htgl_info_label">所属网格:</span> {{htglDetailData.gridName||'--'}}
+        </el-col>
+      </el-row>
+   
+      <el-row type="flex"  >
+          <el-col :span="24" style="display: flex;">
+            <span  class="htgl_info_label">话题内容:</span> <section style="flex:1">{{htglDetailData.topicContent||'--'}}</section>
+        </el-col>
+      </el-row>
+
+      <el-row type="flex"  >
+          <el-col :span="24" style="display: flex;">
+                <span class="img_label">图片:</span>
+                <section v-for="(item,index) in htglDetailData.topicImages" :key="index" > 
+                     <img :src="item" alt="" width="150px" height="75px" style="margin-left:16px;" />
+                </section>  
+        </el-col>
+      </el-row>
+
+      <el-row type="flex"  >
+          <el-col :span="24">
+            <span  class="htgl_info_label">话题发表人:</span> {{htglDetailData.releaseUserName||'--'}}
+        </el-col>
+      </el-row>
+
+      <el-row type="flex"  >
+          <el-col :span="24">
+            <span  class="htgl_info_label">发布时间:</span> {{htglDetailData.releaseTime||'--'}}
+        </el-col>
+      </el-row>
+
+      <el-row type="flex"  >
+          <el-col :span="24">
+            <span  class="htgl_info_label">当前支持:</span>{{htglDetailData.supportCount||'--'}}票,反对: {{htglDetailData.oppositionCount||'--'}}票
+        </el-col>
+      </el-row>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  props:{
+    htglDetailData:{
+        type:Object,
+        default:{}
+    },
+    topicId:{
+        type:String,
+        default:''
+    }
+  },
+  created() {},
+  methods: {},
+  components: {},
+  computed: {},
+  watch: {},
+};
+</script>
+<style lang="scss" scoped>
+.img_label{
+    display: inline-block;
+    height: 75px;
+    vertical-align: top;
+    width: 90px;
+    text-align: right;
+    margin-right: 6px;
+}
+.htgl_info_label{
+    display: inline-block;
+    width: 90px;
+    text-align: right;
+    margin-right: 6px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modules/shequzhili/htgl/htgl.vue b/src/views/modules/shequzhili/htgl/htgl.vue
new file mode 100644
index 000000000..115aa5bbb
--- /dev/null
+++ b/src/views/modules/shequzhili/htgl/htgl.vue
@@ -0,0 +1,331 @@
+<template>
+  <div  class="div_main">
+      <div class="div_search">
+        <el-form
+          :inline="true"
+          :model="formData"
+          ref="ref_searchform"
+          :label-width="'100px'"
+        >
+          <div>
+            <el-form-item label="所属组织" prop="orgId" >
+              <el-cascader
+                class="item_width_2"
+                ref="myCascader"
+                size="small"
+                v-model="agencyIdArray"
+                :options="orgOptions"
+                :props="orgOptionProps"
+                :show-all-levels="false"
+              ></el-cascader>
+            </el-form-item>
+
+            <el-form-item label="话题内容" prop="topicContent">
+              <el-input
+                class="item_width_2"
+                size="small"
+                v-model="formData.topicContent"
+                clearable
+                placeholder="请输入"
+              >
+              </el-input>
+            </el-form-item>
+
+         
+
+            <el-form-item label="话题发表人" prop="userName">
+              <el-input
+                class="item_width_2"
+                size="small"
+                v-model="formData.userName"
+                clearable
+                placeholder="请输入"
+              >
+              </el-input>
+            </el-form-item>
+
+            <el-form-item label="发布时间" prop="startTime">
+                <el-date-picker v-model="formData.startDate"
+                              class="item_width_2"
+                              size="small"
+                              type="date"
+                              value-format="yyyy-MM-dd"
+                              value="yyyy-MM-dd"
+                              placeholder="开始时间">
+              </el-date-picker>
+              <span class="data-tag">至</span>
+              <el-date-picker v-model="formData.endDate"
+                              class="item_width_2 data-tag"
+                              size="small"
+                              type="date"
+                              value-format="yyyy-MM-dd"
+                              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_table">
+      <el-table
+        border
+        :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
+        class="table"
+        :data="tableData"
+        style="width: 100%"
+        :height="maxTableHeight"
+      >
+     
+        <el-table-column
+          label="序号"
+          fixed="left"
+          type="index"
+          align="center"
+          width="50"
+        />
+
+        <el-table-column
+          prop="gridName"
+          align="center"
+          label="所属网格"
+          :show-overflow-tooltip="true"
+        >
+        </el-table-column>
+
+        <el-table-column
+          prop="topicContent"
+          label="话题内容"
+          min-width="150"
+          align="center"
+          :show-overflow-tooltip="true"
+        >
+        </el-table-column>
+
+        <el-table-column
+          prop="releaseUserName"
+          align="center"
+          min-width="150"
+          label="话题发表人"
+          :show-overflow-tooltip="true"
+        >
+        </el-table-column>
+
+        <el-table-column
+          prop="releaseTime"
+          align="center"
+          width="180"
+          :show-overflow-tooltip="true"
+          label="发布时间"
+        >
+        </el-table-column>
+
+        <el-table-column fixed="right" label="操作" align="center" width="100">
+          <template slot-scope="scope">
+            <!-- <el-button v-if="scope.row.issueStatus==='voting'&& agencyId===scope.row.orgId"
+                 @click="handleDispose(scope.row)"
+                 type="text"                 size="small"
+                 class="div-table-button--edit">处理</el-button> -->
+
+            <el-button @click="handleWatch(scope.row)" type="text" size="small"
+              >查看</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div>
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page.sync="pageNo"
+          :page-sizes="[20, 50, 100, 200]"
+          :page-size="parseInt(pageSize)"
+          layout="sizes, prev, pager, next, total"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+    <el-dialog
+    title="话题详情"
+    :visible.sync="dialogVisible"
+    width="60%"
+   >
+    <htgl-info 
+    :htglDetailData="htglDetailData"
+    :topicId="topicId"
+    >
+
+    </htgl-info>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { requestPost } from "@/js/dai/request";
+import htglInfo from "./cpts/htglInfo.vue"
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      orgOptions: [],
+      orgOptionProps: {
+        multiple: false,
+        value: 'agencyId',
+        label: 'agencyName',
+        children: 'subAgencyList',
+        checkStrictly: true
+      },
+      formData: {
+        topicContent: '',
+        userName: '',
+        startDate: '',
+        endDate: '',
+      },
+      topicId:'',
+      tableData:[],
+      dialogVisible:false,
+      agencyIdArray: [],
+      htglDetailData:{},
+      pageNo: 1,
+      pageSize: window.localStorage.getItem("pageSize") || 20,
+      total: 1,
+    };
+  },
+  created() {
+    this.getTableData()
+  },
+  mounted() {
+    this.getOrgTreeList();
+  },
+  methods: {
+    async getOrgTreeList() {
+      const url = "/gov/org/customeragency/agencygridtree";
+
+      let params = {
+        agencyId: this.agencyId,
+        purpose: "query",
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        this.orgOptions = [];
+        this.orgOptions.push(data);
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    handleSizeChange (val) {
+
+        this.pageSize = val;
+        window.localStorage.setItem("pageSize", val);
+        this.getTableData();
+    },
+    handleCurrentChange (val) {
+            this.pageNo = val;
+            this.getTableData();
+    },
+    handleSearch (val) {
+      this.pageNo = 1;
+      this.getTableData();
+    },
+   
+    resetSearch () {
+        this.agencyIdArray = []
+        this.formData = {
+        topicContent: '',
+        userName: '',
+        startDate: '',
+        endDate: '',
+    }
+    this.pageNo = 1
+    },
+
+    async getTableData () {
+      const url = "/resi/group/ytTopic/topicList";
+      var gridId = ''
+      const { pageSize, pageNo, formData } = this;
+      if(this.agencyIdArray.length ==1){
+         gridId = this.agencyIdArray.join()
+      }else if(this.agencyIdArray.length ==2){
+        gridId = this.agencyIdArray.splice(1).join()
+      }else if(this.agencyIdArray.length ==3){
+        gridId = this.agencyIdArray.splice(2).join()
+      }else if(this.agencyIdArray.length ==4){
+        gridId = this.agencyIdArray.splice(3).join()
+      }else{
+        this.agencyIdArray = []
+      }
+      const { data, code, msg } = await requestPost(url, {
+        pageSize,
+        pageNo,
+        gridId,
+        source:'1',
+        ...formData,
+      });
+      if (code === 0) {
+        this.total = data.total || 0;
+        this.tableData = data.list
+          ? data.list.map((item) => {
+            return item;
+          })
+          : [];
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async handleWatch (row) {
+      this.topicId = row.topicId
+      this.dialogVisible = true
+      const url = "/resi/group/ytTopic/topicDetail";
+      const { data, code, msg } = await requestPost(url, {
+        topicId: this.topicId,
+      });
+      if (code === 0) {
+        this.htglDetailData = { ...data };
+      } else {
+        this.$message.error(msg);
+      }
+    },
+  },
+  components: {
+    htglInfo
+  },
+  computed: {
+    maxTableHeight () {
+      return this.$store.state.inIframe
+        ? this.clientHeight - 360 + this.iframeHeigh
+        : this.clientHeight - 360;
+    },
+    ...mapGetters(["clientHeight", "iframeHeight"]),
+  },
+  watch: {},
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/scss/buttonstyle.scss";
+@import "@/assets/scss/modules/management/list-main.scss";
+@import "@/assets/scss/modules/shequzhili/event-info.scss";
+ ::v-deep .el-row{
+margin-bottom: 16px;
+}
+</style>