From b1aaffc0d2879dc16484481897944894117c377e Mon Sep 17 00:00:00 2001
From: mk <2403457699@qq.com>
Date: Mon, 11 Dec 2023 14:07:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BE=AE=E7=BD=91=E6=A0=BC=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   4 +-
 src/App.vue                                   |   3 +
 src/views/modules/base/microGrid/index.vue    | 514 ++++++++++++++++++
 .../modules/base/microGrid/microGridAdd.vue   | 385 +++++++++++++
 .../base/microGrid/microGridDetail.vue        | 280 ++++++++++
 .../modules/base/microGrid/microGridHouse.vue | 376 +++++++++++++
 6 files changed, 1560 insertions(+), 2 deletions(-)
 create mode 100644 src/views/modules/base/microGrid/index.vue
 create mode 100644 src/views/modules/base/microGrid/microGridAdd.vue
 create mode 100644 src/views/modules/base/microGrid/microGridDetail.vue
 create mode 100644 src/views/modules/base/microGrid/microGridHouse.vue

diff --git a/.env.development b/.env.development
index fd937c0d..d91c73a3 100644
--- a/.env.development
+++ b/.env.development
@@ -1,7 +1,7 @@
 NODE_ENV=development
 # VUE_APP_API_SERVER =  http://epmet-dev.elinkservice.cn:41080/api
-VUE_APP_API_SERVER =  http://192.168.1.140/api
-# VUE_APP_API_SERVER =  https://epmet-test.elinkservice.cn/api
+# VUE_APP_API_SERVER =  http://192.168.1.140/api
+VUE_APP_API_SERVER =  https://epdc-shibei.elinkservice.cn/api
 # VUE_APP_API_SERVER =   https://epmet-cloud.elinkservice.cn/api
 # VUE_APP_API_SERVER =   https://epdc-shibei.elinkservice.cn/api
 
diff --git a/src/App.vue b/src/App.vue
index 848664f8..4892d0e3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -194,4 +194,7 @@ export default {
   flex-direction: column;
   justify-content: center;
 }
+.vSelsect{
+    z-index: 4000 !important;
+}
 </style>
diff --git a/src/views/modules/base/microGrid/index.vue b/src/views/modules/base/microGrid/index.vue
new file mode 100644
index 00000000..fe529843
--- /dev/null
+++ b/src/views/modules/base/microGrid/index.vue
@@ -0,0 +1,514 @@
+<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="serviceMatter">
+              <el-cascader class="customer_cascader" ref="myCascader" v-model="formData.agencyId" :options="orgOptions"
+                :props="orgOptionProps" :show-all-levels="false"></el-cascader>
+            </el-form-item>
+            <el-form-item label="微网格长" prop="contacts">
+              <el-input v-model="formData.contacts" class="item_width_1" clearable size="small" placeholder="请输入内容">
+              </el-input>
+            </el-form-item>
+            <el-button style="margin-left:10px" class="diy-button--search" size="small" @click="handleSearch">查询</el-button>
+            <el-button style="margin-left:10px" class="diy-button--reset" size="small" @click="resetSearch">重置</el-button>
+          </div>
+        </el-form>
+      </div>
+      <div class="div_table">
+        <div class="div_btn">
+          <el-button class="diy-button--add" size="small" @click="handleAdd">新增微网格</el-button>
+  
+          <el-button style="float:left;margin-left:10px" class="diy-button--reset" size="small"
+            @click="handleExport">导出</el-button>
+          <el-button class="diy-button--add" size="small" @click="deleteBatch">批量删除</el-button>
+        </div>
+        <!--  -->
+        <el-table class="table" :data="tableData" border :height="tableHeight" v-loading="tableLoading"
+          @select-all="selectAll" @selection-change="selectionChange"
+          :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" style="width: 100%">
+          <el-table-column type="selection" width="55"></el-table-column>
+          <el-table-column prop="communityName" header-align="center" align="center" label="所属社区" min-width="150">
+          </el-table-column>
+          <el-table-column prop="gridName" header-align="center" align="center" label="所属网格" min-width="200">
+          </el-table-column>
+          <el-table-column prop="microgridName" header-align="center" align="center" label="微网格名称" show-overflow-tooltip
+            max-width="150">
+          </el-table-column>
+          <el-table-column prop="contacts" header-align="center" align="center" label="微网格长" width="80">
+          </el-table-column>
+          <el-table-column label="操作" fixed="right" width="200" header-align="center" align="center" class="operate">
+            <template slot-scope="scope">
+              <el-button type="text" class="div-table-button--detail" size="small"
+                @click="handleDetail(scope.row)">查看</el-button>
+              <el-button type="text" class="div-table-button--edit" size="small"
+                @click="handleEdit(scope.row)">修改</el-button>
+              <el-button type="text" class="div-table-button--delete" size="small"
+                @click="handleHouse(scope.row)">绑定房屋</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div>
+          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo"
+            :page-sizes="[10, 20, 50]" :page-size="pageSize" layout="sizes, prev, pager, next, total" :total="total">
+          </el-pagination>
+        </div>
+      </div>
+  
+      <!-- 修改弹出框 -->
+      <el-dialog :visible.sync="formShow" :close-on-click-modal="false" :close-on-press-escape="false" :title="formTitle"
+        :destroy-on-close="true" width="950px" top="5vh" class="dialog-h" @closed="editDiaClose">
+        <microGrid-add ref="ref_form" :orgOptions="orgOptions" @dialogCancle="addFormCancle"
+          @dialogOk="addFormOk"></microGrid-add>
+      </el-dialog>
+      <!--详情弹出框  -->
+      <el-dialog :visible.sync="detailShow" :close-on-click-modal="false" :close-on-press-escape="false" :title="'微网格详情'"
+        width="950px" top="5vh" class="dialog-h" @closed="diaClose">
+        <microGrid-detail ref="ref_detail" @diaClose="diaClose"></microGrid-detail>
+      </el-dialog>
+      <!-- 绑定房屋弹出框 -->
+      <el-dialog :visible.sync="houseShow" :close-on-click-modal="false" :close-on-press-escape="false" :title="'绑定房屋'"
+        width="950px" top="5vh" class="dialog-h" @closed="diaClose">
+        <microGrid-house ref="ref_house" @diaClose="houseShow = false"></microGrid-house>
+      </el-dialog>
+    </div>
+  </template>
+  
+  <script>
+  
+  import microGridAdd from '../microGrid/microGridAdd'
+  import microGridDetail from '../microGrid/microGridDetail'
+  import microGridHouse from '../microGrid/microGridHouse'
+  
+  import { requestPost } from "@/js/dai/request";
+  import { mapGetters } from 'vuex'
+  import { Loading } from 'element-ui' // 引入Loading服务
+  
+  let loading // 加载动画
+  export default {
+    data() {
+      return {
+        loading: false,
+        total: 0,
+        pageSize: 20,
+        pageNo: 0,
+        tableLoading: false,
+        agencyId: '',
+  
+  
+        formData: {
+          contacts: '',
+          agencyId: ''
+        },
+        tableData: [],
+  
+        selection: [],
+  
+        //form相关
+        formShow: false,
+        formTitle: '新增单位',
+        detailShow: false,
+        houseShow: false,
+  
+        orgOptions: [],
+        orgOptionProps: {
+          value: 'agencyId',
+          label: 'agencyName',
+          children: 'subAgencyList',
+          checkStrictly: true
+        },
+  
+      }
+    },
+    components: {
+      microGridAdd,
+      microGridDetail,
+      microGridHouse
+  
+    },
+    async created() {
+  
+    },
+    mounted() {
+      //获取服务事项
+      this.getOrgTreeList()
+  
+      const { user } = this.$store.state
+      this.agencyId = user.agencyId
+      this.loadTable()
+    },
+  
+    methods: {
+      handleSearch() {
+        this.loadTable()
+      },
+  
+      // 获取组织树
+      getOrgTreeList() {
+        const { user } = this.$store.state
+        this.$http
+          .post('/gov/org/customeragency/agencygridtree', {})
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg)
+            } else {
+              console.log('获取组织树成功', res.data)
+              this.orgOptions = []
+              this.orgOptions.push(res.data)
+            }
+          })
+          .catch(() => {
+            return this.$message.error('网络错误')
+          })
+      },
+      async handleExportModule() {
+        let url = "/gov/org/icPublicService/download";
+        // let url = "http://yapi.elinkservice.cn/mock/245/gov/org/icPublicService/download";
+  
+        let params = {};
+        await this.$http({
+          method: "POST",
+          url,
+          responseType: "blob",
+          data: params,
+        })
+          .then((res) => {
+            // this.download(res.data, title + '.xls')
+            if (res.headers["content-disposition"]) {
+              let fileName = window.decodeURI(
+                res.headers["content-disposition"].split(";")[1].split("=")[1]
+              );
+              console.log("filename", fileName);
+              let blob = new Blob([res.data], {
+                type: "application/vnd.ms-excel",
+              });
+              var url = window.URL.createObjectURL(blob);
+              var aLink = document.createElement("a");
+              aLink.style.display = "none";
+              aLink.href = url;
+              aLink.setAttribute("download", fileName);
+              document.body.appendChild(aLink);
+              aLink.click();
+              document.body.removeChild(aLink); //下载完成移除元素
+              window.URL.revokeObjectURL(url); //释放掉blob对象
+            } else this.$message.error("下载失败");
+          })
+          .catch((err) => {
+            console.log("err", err);
+            return this.$message.error("网络错误");
+          });
+      },
+  
+      async loadTable() {
+        this.tableLoading = true
+        const url = "/gov/org/customerMicroGrid/page"
+        // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icPublicService/list"
+        this.formData.agencyId = this.formData.agencyId[this.formData.agencyId.length-1]
+        let params = {
+          pageSize: this.pageSize,
+          pageNo: this.pageNo,
+          ...this.formData
+        }
+  
+        const { data, code, msg } = await requestPost(url, params)
+  
+        if (code === 0) {
+          this.total = data.total
+          this.tableData = data.list
+        } else {
+          this.$message.error(msg)
+        }
+        this.tableLoading = false
+      },
+  
+      editDiaClose() {
+        this.$refs.ref_form.resetData()
+        this.formShow = false
+      },
+      diaClose() {
+        this.detailShow = false
+        this.finishDiaShow = false
+        this.scoreDiaShow = false
+      },
+  
+      handleDetail(row) {
+        this.detailShow = true
+        this.$nextTick(() => {
+          this.$refs.ref_detail.initForm(row)
+        })
+      },
+  
+      handleAdd() {
+        this.formTitle = '新增'
+        this.formShow = true
+        this.$nextTick(() => {
+          this.$refs.ref_form.initForm('add', null)
+        })
+      },
+      handleHouse(row) {
+        this.houseShow = true
+        this.$nextTick(() => {
+          this.$refs.ref_house.initForm(row)
+        })
+      },
+      handleEdit(row) {
+        this.formTitle = '修改'
+        this.formShow = true
+        this.$nextTick(() => {
+          this.$refs.ref_form.initForm('edit', row.id)
+        })
+      },
+  
+      addFormCancle() {
+        this.formShow = false
+      },
+      addFormOk() {
+        this.formShow = false
+        this.loadTable()
+  
+      },
+  
+      async handleDelete(row) {
+  
+        this.$confirm("确认删除?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            this.deleteUnit(row)
+          })
+          .catch(err => {
+            if (err == "cancel") {
+  
+            }
+  
+          });
+      },
+  
+      async deleteUnit(row) {
+        const url = "/gov/org/icPublicService/del"
+        // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icPublicService/del"
+  
+        let params = {
+          icPublicServiceId: row.icPublicServiceId
+        }
+  
+        const { data, code, msg } = await requestPost(url, params)
+  
+        if (code === 0) {
+          this.$message({
+            type: "success",
+            message: "删除成功"
+          });
+  
+          this.loadTable()
+        } else {
+          this.$message.error(msg)
+        }
+      },
+  
+      //重置搜索条件
+      resetSearch() {
+        this.formData = {
+          contacts: '',
+          agencyId: ''
+        }
+        this.pageSize = 10
+        this.pageNo = 0
+        this.loadTable()
+      },
+      deleteBatch() {
+        if (this.selection.length > 0) {
+          this.$confirm("确认删除选择的微网格?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          })
+            .then(() => {
+              this.deleteMicroGridBatch()
+            })
+            .catch(err => {
+              if (err == "cancel") {
+                // this.$message({
+                //   type: "info",
+                //   message: "已取消删除"
+                // });
+              }
+  
+            });
+        } else {
+          this.$message.warning('请先选择要删除的微网格')
+        }
+      },
+      selectAll(selection) {
+        this.selection = selection
+  
+      },
+      selectionChange(selection) {
+        this.selection = selection
+  
+      },
+      async deleteMicroGridBatch() {
+        if (this.selection.length === 0) return this.$message.error('请选择之后进行操作')
+        let userIds = this.selection.map(item => item.id)
+        this.$http
+          .post('/gov/org/customerMicroGrid/delete', userIds)
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg)
+            } else {
+              this.$message.success('删除成功')
+              this.loadTable()
+            }
+          })
+          .catch((err) => {
+            console.log('row4', err)
+            return this.$message.error('网络错误')
+          })
+      },
+      //导出表格
+      async handleExport() {
+        let title = '微网格管理列表'
+  
+        const url = "/gov/org/customerMicroGrid/export"
+        // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icPublicService/export"
+        let params = {
+          agencyId: this.agencyId,
+          ...this.formData
+        }
+  
+        app.ajax.exportFilePost(
+          url,
+          params,
+          (data, rspMsg) => {
+  
+            this.download(data, title + '.xls')
+          },
+          (rspMsg, data) => {
+            this.$message.error(rspMsg);
+          }
+        );
+  
+      },
+  
+      // 下载文件
+      download(data, fileName) {
+        if (!data) {
+          return
+        }
+  
+        var csvData = new Blob([data])
+  
+        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+          window.navigator.msSaveOrOpenBlob(csvData, fileName);
+        }
+        // for Non-IE (chrome, firefox etc.)
+        else {
+          var a = document.createElement('a');
+          document.body.appendChild(a);
+          a.style = 'display: none';
+          var url = window.URL.createObjectURL(csvData);
+          a.href = url;
+          a.download = fileName;
+          a.click();
+          a.remove();
+          window.URL.revokeObjectURL(url);
+        }
+  
+      },
+  
+  
+      handleSizeChange(val) {
+        this.pageSize = val
+        this.pageNo = 1
+        this.loadTable()
+      },
+      handleCurrentChange(val) {
+        this.pageNo = val
+        this.loadTable()
+      },
+  
+      // 开启加载动画
+      startLoading() {
+        loading = Loading.service({
+          lock: true, // 是否锁定
+          text: '正在加载……', // 加载中需要显示的文字
+          background: 'rgba(0,0,0,.7)' // 背景颜色
+        })
+      },
+      // 结束加载动画
+      endLoading() {
+        // clearTimeout(timer);
+        if (loading) {
+          loading.close()
+        }
+      }
+    },
+    computed: {
+      tableHeight() {
+  
+        return this.$store.state.inIframe ? this.clientHeight - 350 + this.iframeHeight : this.clientHeight - 350
+  
+      },
+  
+      ...mapGetters(['clientHeight', 'iframeHeight'])
+    },
+    watch: {
+  
+    },
+    props: {
+  
+    }
+  }
+  </script>
+  <style lang="scss" scoped >
+  @import "@/assets/scss/buttonstyle.scss";
+  @import "@/assets/scss/modules/management/list-main.scss";
+  
+  .div_main {
+    width: 100%;
+  }
+  
+  .div_search {
+    background: #ffffff;
+    border-radius: 4px;
+    padding: 30px 20px 5px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+  }
+  
+  .item_width_1 {
+    width: 260px;
+  }
+  
+  .item_width_2 {
+    width: 620px;
+  }
+  
+  .dialog-h {
+    z-index: 3020;
+  }
+  
+  .div_table {
+    background: #ffffff;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    margin-top: 15px;
+    // padding: 23px 30px 10px;
+  
+    .table {
+      margin-top: 20px;
+    }
+  }
+  
+  .el-row {
+    /* margin-bottom: 20px; */
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 10px;
+    margin-right: 50px;
+  }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/modules/base/microGrid/microGridAdd.vue b/src/views/modules/base/microGrid/microGridAdd.vue
new file mode 100644
index 00000000..e1abe488
--- /dev/null
+++ b/src/views/modules/base/microGrid/microGridAdd.vue
@@ -0,0 +1,385 @@
+<template>
+    <div>
+
+        <div class="dialog-h-content scroll-h">
+            <el-form ref="ref_form" :inline="true" :model="formData" :rules="dataRule" :disabled="formType === 'detail'"
+                class="form">
+
+                <!-- <el-form-item label="所属网格	" prop="gridId" label-width="150px" style="display: block">
+                          
+                    <el-select v-model.trim="formData.gridId"   placeholder="请选择" clearable class="cell-width-1">
+                        <el-option v-for="item in gridList" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item> -->
+
+                <el-form-item label="所属网格	" prop="gridId" label-width="150px" style="display: block">
+                    <el-cascader class="customer_cascader" ref="myCascader" v-model="formData.gridId" :options="orgOptions"
+                        :props="orgOptionProps" :show-all-levels="false" @change="handelAgency"></el-cascader>
+                </el-form-item>
+
+                <el-form-item label="微网格名称" prop="microgridName" label-width="150px" style="display: block">
+                    <el-input class="cell-width-1" :placeholder="'请输入微网格名称'" v-model="formData.microgridName" clearable>
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item label="微网格长" prop="contacts" label-width="150px" style="display: block">
+                    <el-input class="cell-width-1" maxlength="10" placeholder="请输入微网格长" clearable
+                        v-model="formData.contacts">
+                    </el-input>
+                    <el-button style="margin-left: 10px" type="primary" size="mini"
+                        @click="handleShowPersonList">居民信息中选择</el-button>
+                </el-form-item>
+                <el-form-item label="性别" prop="sex" label-width="150px" style="display: block">
+                    <el-select v-model="formData.sex" placeholder="请选择">
+                        <el-option v-for="item in sexList" :label="item.label" :value="item.value" clearable
+                            :key="item.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="联系方式" prop="mobile" label-width="150px" style="display: block">
+                    <el-input class="cell-width-1" maxlength="11" placeholder="请输入联系方式" clearable
+                        v-model="formData.mobile"></el-input></el-form-item>
+                <el-form-item label="住址" prop="address" label-width="150px" style="display: block">
+                    <div class="item_width_1">
+                        <el-input style="width:420px" clearable :placeholder="'请输入所在地址'" v-model="formData.address">
+                        </el-input>
+                    </div>
+                </el-form-item>
+            </el-form>
+        </div>
+
+        <div class="div_btn">
+            <el-button size="small" @click="handleCancle">取 消</el-button>
+            <el-button size="small" v-if="formType != 'detail'" type="primary" :disabled="btnDisable"
+                @click="handleComfirm">确 定</el-button>
+        </div>
+        <el-dialog :visible.sync="personTableShow" :close-on-click-modal="false" :close-on-press-escape="false"
+            :destroy-on-close="true" title="选择居民" z-index="3002" width="550px" top="5vh" class="dialog-h"
+            @closed="diaClose">
+            <div style="padding:10px 30px">
+                <el-form :inline="false" ref="ref_formSearch" :label-width="'90px'">
+                    <el-form-item label="所属网格" label-width="150px">
+                        <el-select class="cell-width-1" v-model.trim="selGridId" placeholder="请选择" clearable>
+                            <el-option v-for="item in gridList" @click.native="handleChangeGrid" :key="item.value"
+                                :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="居民" label-width="150px" prop="selPersonIndex">
+
+                        <el-select v-model="selPersonIndex" class="cell-width-1" filterable placeholder="请选择" clearable>
+                            <el-option v-for="(item, index) in demandUserList" :key="index" :label="item.label"
+                                :value="label">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+
+                </el-form>
+                <div class="div-btn ">
+
+                    <el-button style="margin-left:20px" type="primary" size="small"
+                        @click="handleComfirmSelPerson">确定</el-button>
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+  
+<script>
+import { mapGetters } from 'vuex'
+import { Loading } from 'element-ui' // 引入Loading服务
+import { requestPost } from '@/js/dai/request'
+
+
+
+var map
+var search
+var markers
+var infoWindowList
+var geocoder // 新建一个正逆地址解析类
+
+let loading // 加载动画
+export default {
+    data() {
+        return {
+            formType: 'add', //表单操作类型 add新增，edit编辑，detail详情
+
+            btnDisable: false,
+
+            icPublicServiceId: '',
+            formData: {
+                microgridName: '',
+                address: '',
+                gridId: '',
+                contacts: '',
+                sex: '',
+                mobile: '',
+            },
+            selPersonIndex: '',
+            serviceList: [],//服务list
+            agencyId: '',
+
+            personTableShow: false,//选择居民弹框
+
+            gridList: [],//所属网格list
+
+            demandUserList: [],//网格下居民
+
+            selGridId: '',//选中网格接口入参
+
+            orgOptionProps: {
+                value: 'agencyId',
+                label: 'agencyName',
+                children: 'subAgencyList',
+                checkStrictly: true
+            },
+
+            sexList: [{ label: '男', value: '1' }, { label: '女', value: '0' }],
+            microGridId:null,//父组件传值微网格Id更新用
+        }
+    },
+    components: {},
+    mounted() {
+        const { user } = this.$store.state
+        this.agencyId = user.agencyId
+    },
+    watch: {
+        // "formData.name": function (val) {
+        //   this.$emit("changeName", val)
+        // },
+        // "formData.mobile": function (val) {
+        //   this.$emit("changeMobile", val)
+        // },
+        // "formData.gridId": function (val) {
+        //   this.selGridId = val
+        //   this.$emit("changeGridId", val)
+        // }
+    },
+    methods: {
+        // 选择居民隐藏
+        diaClose() {
+            this.personTableShow = false;
+        },
+        async initForm(type, id) {
+            this.startLoading()
+            this.$refs.ref_form.resetFields();
+            if (id) {
+                this.microGridId = id
+                this.getDetail(id)
+            }
+            //获取网格
+            await this.loadGrid()
+
+            this.formType = type
+
+            this.endLoading()
+
+        },
+        // 选择居民
+        async handleShowPersonList() {
+            if (this.formData.gridId) {
+                await this.handleChangeGrid()
+                this.personTableShow = true
+            } else {
+                this.$message.info("请先选择网格");
+            }
+
+        },
+        // 选择所属网格
+        async handleChangeGrid() {
+            const url = "/epmetuser/icresiuser/demandusers"
+            // const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/epidemicPrevention/page"
+            let params = {
+                agencyId: '',
+                gridId: this.selGridId,
+                name: "",
+            }
+            const { data, code, msg } = await requestPost(url, params)
+
+            if (code === 0) {
+                this.demandUserList = data;
+
+            } else {
+                this.$message.error(msg)
+            }
+            this.tableLoading = false
+        },
+        //加载网格
+        async loadGrid() {
+            const url = "/gov/org/customergrid/gridoption"
+            let params = {
+                agencyId: this.agencyId,
+                purpose: "addorupdate"
+            }
+
+            const { data, code, msg } = await requestPost(url, params)
+
+            if (code === 0) {
+                this.gridList = data
+
+            } else {
+                this.$message.error(msg)
+            }
+
+        },
+        handelAgency(){
+            this.formData.gridId = this.formData.gridId[this.formData.gridId.length - 1]
+        },
+        async handleComfirm() {
+            this.btnDisable = true
+            setTimeout(() => {
+                this.btnDisable = false
+            }, 10000)
+            this.$refs['ref_form'].validate((valid, messageObj) => {
+                if (!valid) {
+                    app.util.validateRule(messageObj)
+                    this.btnDisable = false
+                } else {
+                    this.addmicrGrid()
+                }
+
+            })
+        },
+        // 新增提交
+        async addmicrGrid() {
+            let url = '/gov/org/customerMicroGrid/save'
+            let params = {}
+            if(this.formType == 'edit'){
+                let id = this.microGridId
+                params = {
+                    id,
+                ...this.formData
+                }
+            }else{
+                params = {
+                ...this.formData
+                } 
+            }
+            const { data, code, msg, internalMsg } = await requestPost(url, params)
+            if (code === 0) {
+                this.$message({
+                    type: 'success',
+                    message: '操作成功'
+                })
+                this.resetData()
+                this.$emit('dialogOk')
+                this.btnDisable = false
+            } else {
+                this.btnDisable = false
+                this.$message.error(internalMsg)
+            }
+        },
+
+        handleCancle() {
+            this.resetData()
+            this.$emit('dialogCancle')
+
+        },
+        resetData() {
+            this.icPublicServiceId = ''
+            this.formData = {
+                microgridName: '',
+                address: '',
+                gridId: '',
+                contacts: '',
+                sex: '',
+                mobile: '',
+            }
+        },
+        // 选中居民确定按钮
+        handleComfirmSelPerson() {
+
+            if (this.selPersonIndex === 0 || this.selPersonIndex) {
+                this.formData.contacts = selPerson.demandUserName
+                // this.formData.mobile = selPerson.demandUserMobile
+                // this.formData.reportUserId = selPerson.demandUserId
+                // this.formData.idCard = selPerson.idCard
+                this.personTableShow = false;
+
+            } else {
+                this.$message.info("请选择人员");
+            }
+
+        },
+        // 获取详情
+        async getDetail(id) {
+            const url = `/gov/org/customerMicroGrid/${id}`
+           
+            const { data, code, msg } = await requestPost(url)
+
+            if (code === 0) {
+               console.log(data);
+               this.formData = {...data}
+
+            } else {
+                this.$message.error(msg)
+            }
+
+        },
+        // 开启加载动画
+        startLoading() {
+            loading = Loading.service({
+                lock: true, // 是否锁定
+                text: '正在加载……', // 加载中需要显示的文字
+                background: 'rgba(0,0,0,.7)' // 背景颜色
+            })
+        },
+        // 结束加载动画
+        endLoading() {
+            // clearTimeout(timer);
+            if (loading) {
+                loading.close()
+            }
+        }
+    },
+    computed: {
+        dataRule() {
+            return {
+                microgridName: [
+                    { required: true, message: '微网格名称不能为空', trigger: 'blur' },
+                ],
+                address: [
+                    { required: true, message: '住址不能为空', trigger: 'blur' }
+                ],
+                gridId: [
+                    { required: true, message: '所属组织不能为空', trigger: 'blur' }
+                ],
+                contacts: [
+                    { required: true, message: '微网格长不能为空', trigger: 'blur' }
+                ],
+                sex: [
+                    { required: true, message: '性别不能为空', trigger: 'blur' }
+                ],
+                mobile: [
+                    { required: true, message: '联系电话不能为空', trigger: 'blur' }
+                ],
+            }
+        },
+
+    },
+    props: {
+        orgOptions: {
+            type: Array,
+            default: []
+        }
+    }
+}
+</script>
+<style scoped>
+.div_map {
+    position: relative;
+}
+
+.div_searchmap {
+    z-index: 5000;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+}
+</style>
+  
+<style lang="scss" scoped >
+@import "@/assets/scss/modules/visual/communityManageForm.scss";
+</style>
+  
\ No newline at end of file
diff --git a/src/views/modules/base/microGrid/microGridDetail.vue b/src/views/modules/base/microGrid/microGridDetail.vue
new file mode 100644
index 00000000..5ebfb859
--- /dev/null
+++ b/src/views/modules/base/microGrid/microGridDetail.vue
@@ -0,0 +1,280 @@
+<template>
+    <div>
+      <div class="dialog-h-content scroll-h">
+  
+        <el-form ref="ref_form"
+                 :inline="true"
+                 :model="formData"
+                 class="form">
+  
+          <el-form-item label="所属组织："
+                        prop="gridName"
+                        label-width="150px"
+                        style="display: block">
+            <span>{{formData.gridName}}</span>
+  
+          </el-form-item>
+          <el-form-item label="微网格名称："
+                        prop="microgridName"
+                        label-width="150px"
+                        style="display: block">
+  
+            <span>{{formData.microgridName}}</span>
+  
+          </el-form-item>
+          <el-form-item label="微网格长："
+                        prop="contacts"
+                        label-width="150px"
+                        style="display: block">
+            <span>{{formData.contacts}}</span>
+  
+          </el-form-item>
+          <el-form-item label="性别："
+                        prop="sex"
+                        label-width="150px"
+                        style="display: block">
+            <span>{{formData.sex === '1'?'男':'女'}}</span>
+          </el-form-item>
+          <el-form-item label="联系方式："
+                        style="display: block"
+                        prop="mobile"
+                        label-width="150px">
+            <div class="item_width_1">
+              <span>{{formData.mobile}}</span>
+            </div>
+          </el-form-item>
+          <el-form-item label="地址："
+                        style="display: block"
+                        prop="address"
+                        label-width="150px">
+            <div class="item_width_1">
+              <span>{{formData.address}}</span>
+            </div>
+          </el-form-item>
+          <!-- <el-form-item label="地址："
+                        style="display: block"
+                        prop="address"
+                        label-width="150px">
+            <div class="item_width_1">
+              <span>{{formData.address}}</span>
+              <div id="app" class="div_map"></div>
+            </div>
+          </el-form-item> -->
+        </el-form>
+  
+      </div>
+      <div class="div_btn">
+        <el-button size="small"
+                   @click="handleCancle">取 消</el-button>
+  
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  
+    import { Loading } from 'element-ui' // 引入Loading服务
+    import { requestPost } from '@/js/dai/request'
+  
+    var map
+    var search
+    var markers
+    var infoWindowList
+    var geocoder // 新建一个正逆地址解析类
+  
+    let loading // 加载动画
+    export default {
+      data () {
+        return {
+          formData: {},
+  
+        }
+      },
+      components: {},
+      mounted () {
+        // this.initMap()
+      },
+  
+      methods: {
+        handleCancle () {
+  
+          this.$emit('diaClose')
+  
+        },
+  
+        async initForm (row) {
+          this.startLoading()
+          await this.getDetail(row.id)
+
+          // map.setCenter(new TMap.LatLng(this.formData.latitude, this.formData.longitude))
+          // this.setMarker(this.formData.latitude, this.formData.longitude)
+          this.endLoading()
+  
+        },
+        async getDetail(id) {
+            const url = `/gov/org/customerMicroGrid/${id}`
+           
+            const { data, code, msg } = await requestPost(url)
+
+            if (code === 0) {
+               console.log(data);
+               this.formData = {...data}
+
+            } else {
+                this.$message.error(msg)
+            }
+
+        },
+        // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
+        initMap () {
+          // 定义地图中心点坐标
+          var center = new window.TMap.LatLng(36.0722275, 120.38945519)
+          // 定义map变量，调用 TMap.Map() 构造函数创建地图
+          map = new window.TMap.Map(document.getElementById('app'), {
+            center: center, // 设置地图中心点坐标
+            zoom: 17.2, // 设置地图缩放级别
+            pitch: 43.5, // 设置俯仰角
+            rotation: 45 // 设置地图旋转角度
+          })
+  
+          search = new window.TMap.service.Search({ pageSize: 10 })
+          // 新建一个地点搜索类
+          markers = new TMap.MultiMarker({
+            map: map,
+            geometries: []
+          })
+          infoWindowList = Array(10)
+  
+          geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
+  
+          // 监听地图平移结束
+          map.on('panend', () => {
+            this.handleMoveCenter()
+          })
+          this.handleMoveCenter()
+          this.convert()
+        },
+  
+        setMarker (lat, lng) {
+          markers.setGeometries([])
+          markers.add([
+            {
+              id: '4',
+              styleId: 'marker',
+              position: new TMap.LatLng(lat, lng),
+              properties: {
+                title: 'marker4'
+              }
+            }
+          ])
+        },
+  
+        handleSearchMap () {
+          infoWindowList.forEach((infoWindow) => {
+            infoWindow.close()
+          })
+          infoWindowList.length = 0
+          markers.setGeometries([])
+          // 在地图显示范围内以给定的关键字搜索地点
+          search
+                  .searchRectangle({
+                    keyword: this.keyWords,
+                    bounds: map.getBounds()
+                  })
+                  .then((result) => {
+                    let { data } = result
+                    if (Array.isArray(data) && data.length > 0) {
+                      const {
+                        location: { lat, lng }
+                      } = data[0]
+  
+  
+                      map.setCenter(new TMap.LatLng(lat, lng))
+                      this.setMarker(lat, lng)
+                      this.formData.latitude = lat
+                      this.formData.longitude = lng
+                      this.convert()
+                    } else {
+                      this.$message.error('未检索到相关位置坐标')
+                    }
+                  })
+        },
+  
+        handleMoveCenter () {
+          //修改地图中心点
+          const center = map.getCenter()
+          const lat = center.getLat()
+          const lng = center.getLng()
+          this.formData.latitude = lat
+          this.formData.longitude = lng
+          this.setMarker(lat, lng)
+          this.convert(lat, lng)
+        },
+  
+        convert (lat, lng) {
+          markers.setGeometries([]);
+          // var input = document.getElementById('location').value.split(',');
+          let location
+          if (lat && lng) {
+            location = new TMap.LatLng(lat, lng);
+          } else {
+            location = new TMap.LatLng(this.formData.latitude, this.formData.longitude);
+          }
+  
+          // map.setCenter(location);
+          markers.updateGeometries([
+            {
+              id: 'main', // 点标注数据数组
+              position: location,
+            },
+          ]);
+          geocoder
+                  .getAddress({ location: location }) // 将给定的坐标位置转换为地址
+                  .then((result) => {
+                    // this.formData.address = result.result.address
+                    // 显示搜索到的地址
+                  });
+        },
+  
+        // 开启加载动画
+        startLoading () {
+          loading = Loading.service({
+            lock: true, // 是否锁定
+            text: '正在加载……', // 加载中需要显示的文字
+            background: 'rgba(0,0,0,.7)' // 背景颜色
+          })
+        },
+        // 结束加载动画
+        endLoading () {
+          // clearTimeout(timer);
+          if (loading) {
+            loading.close()
+          }
+        }
+      },
+      computed: {
+      },
+      props: {
+  
+      }
+    }
+  </script>
+  <style lang="scss" scoped >
+    @import "@/assets/scss/modules/visual/communityManageForm.scss";
+  </style>
+  <style scoped>
+    .detail_span {
+      width: 500px;
+      font-weight: bold;
+      text-align: left;
+      margin: 0 0;
+      font-size: 16px;
+    }
+  
+    .form {
+      margin-top: 30px;
+    }
+  </style>
+  
+  
+  
\ No newline at end of file
diff --git a/src/views/modules/base/microGrid/microGridHouse.vue b/src/views/modules/base/microGrid/microGridHouse.vue
new file mode 100644
index 00000000..4d2c1dcc
--- /dev/null
+++ b/src/views/modules/base/microGrid/microGridHouse.vue
@@ -0,0 +1,376 @@
+<template>
+    <div class="div_main">
+        <div class="div_btn">
+            <el-button class="diy-button--add" size="small" @click="handleAdd">新增绑定</el-button>
+        </div>
+        <el-table class="table" :data="tableData" border :height="tableHeight" v-loading="tableLoading"
+            :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" style="width: 100%">
+            <el-table-column label="序号" header-align="center" align="center" type="index" width="50"></el-table-column>
+            <el-table-column prop="houseName" header-align="center" align="center" label="房屋">
+            </el-table-column>
+            <el-table-column label="操作" fixed="right" width="250" header-align="center" align="center" class="operate">
+                <template slot-scope="scope">
+                    <el-button type="text" class="div-table-button--delete" size="small"
+                        @click="handleDelete(scope.row)">删除</el-button>
+
+                </template>
+            </el-table-column>
+        </el-table>
+        <div>
+            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo"
+                :page-sizes="[10, 20, 50]" :page-size="pageSize" layout="sizes, prev, pager, next, total">
+            </el-pagination>
+        </div>
+        <el-dialog :visible.sync="addHouseShow" :close-on-click-modal="false" :close-on-press-escape="false" width="920px"
+        destroy-on-close :before-close="beforeClose" top="30vh" @closed="addHouseShow = false" class="dialog-h" z-index="3000">
+            <div style="padding:10px;">
+                <div> 所属组织:{{ gridName }}</div>
+                <el-row>
+                    <el-col :span="18">
+                        <div class="resi-cell">
+                            <div class="resi-cell-label">所属房屋</div>
+                            <div class="resi-cell-value">
+                                <el-select v-model.trim="VILLAGE_ID" placeholder="请选择小区" size="small" clearable
+                                    class="resi-cell-select" @clear="handleClearVillage" @change="handleChangeV" popper-class="vSelsect">
+                                    <el-option v-for="item in optionsV" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                                <el-select v-model.trim="BUILD_ID" placeholder="楼号" size="small" clearable
+                                    style="width: 150px;" class="resi-cell-select " :disabled="changeVDisabled"
+                                    @clear="handleClearBuild" multiple collapse-tags @change="handleChangeB" popper-class="vSelsect">
+                                    <el-option v-for="item in optionsB" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                                <el-select v-model.trim="UNIT_ID" multiple collapse-tags :disabled="changeBDisabled"
+                                    placeholder="单元" size="small" clearable style="width: 150px;" class="resi-cell-select "
+                                    @click="handleClearDan" @change="handleChangeD" popper-class="vSelsect">
+                                    <el-option v-for="item in optionsD" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                                <el-select v-model.trim="HOME_ID" multiple collapse-tags :disabled="changeDDisabled"
+                                    placeholder="房号" size="small" clearable style="width: 150px;" class="resi-cell-select " popper-class="vSelsect">
+                                    <el-option v-for="item in optionsH" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </div>
+                        </div>
+                        <div class="btn_bto">
+                              <el-row type="flex" justify="end" >
+                                  <el-col :span="24">
+                                    <el-button type="primary" plain @click="handleClose" >取消</el-button>
+                                    <el-button type="primary" plain @click="handelSave"> 确定</el-button>
+                                </el-col>
+                              </el-row>
+                        </div>
+                    </el-col></el-row>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+  
+<script>
+
+
+import { requestGet } from "@/js/dai/request";
+import { mapGetters } from 'vuex'
+import { Loading } from 'element-ui' // 引入Loading服务
+
+let loading // 加载动画
+export default {
+    data() {
+        return {
+            loading: false,
+            pageSize: 10,
+            pageNo: 0,
+            tableLoading: false,
+            microGridId: '',//微网格Id
+            tableData: [],//已绑定房屋列表
+            addHouseShow: false,//新增绑定房屋弹框
+            gridName: '',//网格名称
+            gridId: '',
+
+            optionsV: [],
+            optionsB: [],
+            optionsD: [],
+            optionsH: [],
+
+            AGENCY_ID: '',
+            GRID_ID: '',
+            VILLAGE_ID: '',
+            BUILD_ID: '',
+            UNIT_ID: '',
+            HOME_ID: '',
+            selArr:[]
+        }
+    },
+    components: {
+
+    },
+    async created() {
+
+    },
+    async mounted() {
+
+    },
+    methods: {
+        async initForm(row) {
+            this.microGridId = row.id
+            this.gridName = row.gridName
+            this.gridId = row.gridId
+            console.log(row);
+            console.log(row.gridId);
+            //获取数据
+            await this.loadTable()
+        },
+
+        async loadTable() {
+            this.tableLoading = true
+            const url = `/gov/org/house/getMicroGridHouseList?microGridId=${this.microGridId}`
+            // const url = "http://yapi.elinkservice.cn/mock/245/heart/userdemand/recordList"
+            const { data, code, msg } = await requestGet(url)
+
+            if (code === 0) {
+                this.tableData = data || []
+            } else {
+                this.$message.error(msg)
+            }
+            this.tableLoading = false
+        },
+        getValiheList() {
+            const { user } = this.$store.state
+            console.log(this.gridId);
+            this.$http
+                .post('/gov/org/icneighborhood/neighborhoodoption', {
+                    gridId: this.gridId,
+                    agencyId: ''
+                })
+                .then(({ data: res }) => {
+                    if (res.code !== 0) {
+                        return this.$message.error(res.msg)
+                    } else {
+                        console.log('获取查询详情成功', res.data)
+                        this.optionsV = res.data
+                    }
+                })
+                .catch(() => {
+                    return this.$message.error('网络错误')
+                })
+        },
+        getBuildList() {
+            this.$http
+                .post('/gov/org/icbuilding/buildingoption', {
+                    neighborHoodId: this.VILLAGE_ID
+                })
+                .then(({ data: res }) => {
+                    if (res.code !== 0) {
+                        return this.$message.error(res.msg)
+                    } else {
+                        console.log('获取查询详情成功', res.data)
+                        this.optionsB.push(...res.data)
+                    }
+                })
+                .catch((err) => {
+                    return this.$message.error('网络错误')
+                })
+        },
+        getUniList() {
+            this.$http
+                .post('/gov/org/icbuildingunit/unitoption', {
+                    buildingId: this.BUILD_ID.join(',')
+                })
+                .then(({ data: res }) => {
+                    if (res.code !== 0) {
+                        return this.$message.error(res.msg)
+                    } else {
+                        console.log('获取查询详情成功', res.data)
+                        this.optionsD.push(...res.data)
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                    return this.$message.error('网络错误')
+                })
+        },
+        getHouseList() {
+            this.$http
+                .post('/gov/org/ichouse/houseoption', { unitId: this.UNIT_ID.join(',') })
+                .then(({ data: res }) => {
+                    if (res.code !== 0) {
+                        return this.$message.error(res.msg)
+                    } else {
+                        console.log('获取查询详情成功', res.data)
+                        this.optionsH.push(...res.data)
+                    }
+                })
+                .catch(() => {
+                    return this.$message.error('网络错误')
+                })
+        },
+        handleChangeV(val) {
+            console.log('val', val)
+            this.BUILD_ID = ''
+            this.UNIT_ID = ''
+            this.HOME_ID = ''
+            this.getBuildList()
+        },
+        handleChangeB(val) {
+            console.log('val', val)
+            this.UNIT_ID = ''
+            this.HOME_ID = ''
+            this.getUniList()
+        },
+        handleChangeD(val) {
+            console.log('val', val)
+            this.HOME_ID = ''
+            this.getHouseList()
+        },
+        handleClearVillage() {
+            this.BUILD_ID = ''
+            this.HOME_ID = ''
+        },
+        handleClearBuild() {
+            this.BUILD_ID = ''
+            this.UNIT_ID = ''
+            this.HOME_ID = ''
+        },
+        handleClearDan() {
+            this.UNIT_ID = ''
+            this.HOME_ID = ''
+        },
+        handleSizeChange(val) {
+            this.pageSize = val
+            this.pageNo = 1
+            this.loadTable()
+        },
+        handleCurrentChange(val) {
+            this.pageNo = val
+            this.loadTable()
+        },
+        // 新增绑定房屋
+        handleAdd() {
+            this.addHouseShow = true
+            this.getValiheList()
+        },
+        beforeClose(done){
+            this.VILLAGE_ID = ''
+            this.addHouseShow = false
+        },
+        async getMicroGridHouseName(id,level) {
+            this.tableLoading = true
+            const url = `/gov/org/house/getMicroGridHouseName?levelId=${id}&level=${level}`
+            // const url = "http://yapi.elinkservice.cn/mock/245/heart/userdemand/recordList"
+            const { data, code, msg } = await requestGet(url)
+            if (code === 0) {
+                this.selArr.push(data)
+            } else {
+                this.$message.error(msg)
+            }
+            this.tableLoading = false
+        },
+       
+        handleClose(){
+            this.addHouseShow = false
+        },
+        handelSave(){
+            console.log(this.VILLAGE_ID ,this.BUILD_ID,this.UNIT_ID,this.HOME_ID);
+        },
+        // 开启加载动画
+        startLoading() {
+            loading = Loading.service({
+                lock: true, // 是否锁定
+                text: '正在加载……', // 加载中需要显示的文字
+                background: 'rgba(0,0,0,.7)' // 背景颜色
+            })
+        },
+        // 结束加载动画
+        endLoading() {
+            // clearTimeout(timer);
+            if (loading) {
+                loading.close()
+            }
+        }
+    },
+    computed: {
+        tableHeight() {
+
+            return (this.clientHeight - 460)
+
+        },
+        rowHeight() {
+            return (this.clientHeight - 200) + 'px'
+        },
+        changeVDisabled() {
+            return !this.VILLAGE_ID
+        },
+        changeBDisabled() {
+            return !this.BUILD_ID
+        },
+        changeDDisabled() {
+            return !this.UNIT_ID
+        },
+        ...mapGetters(['clientHeight'])
+    },
+    watch: {
+    
+    },
+    props: {
+        serviceType: {
+            type: String,
+            default: ''
+        }
+    }
+}
+</script>
+<style lang="scss" scoped >
+@import "@/assets/scss/buttonstyle.scss";
+// @import "@/assets/scss/common.scss";
+.div_main {
+    background: #ffffff;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    margin-top: 15px;
+    padding: 23px 30px 10px;
+}
+
+.div_search {
+    background: #ffffff;
+    border-radius: 4px;
+    padding: 30px 20px 5px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+}
+
+.item_width_1 {
+    width: 260px;
+}
+
+.item_width_2 {
+    width: 495px;
+}
+
+.div_table {
+    background: #ffffff;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    margin-top: 15px;
+    padding: 23px 30px 10px;
+
+
+}
+
+.table {
+    margin-top: 20px;
+}
+
+.el-row {
+    /* margin-bottom: 20px; */
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 10px;
+    margin-right: 50px;
+}
+</style>
+  
\ No newline at end of file