diff --git a/package.json b/package.json
index fbabfdd2..3cd63adc 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@antv/g6": "^4.5.3",
     "@jiaminghi/data-view": "^2.10.0",
     "bin-code-editor": "^0.9.0",
     "dayjs": "^1.8.35",
@@ -29,6 +30,7 @@
     "sortablejs": "^1.12.0",
     "vue-draggable-resizable": "^2.3.0",
     "vue-json-editor": "^1.4.3",
+    "vue-okr-tree": "^1.0.10",
     "vue-ruler-tool": "^1.2.4",
     "vuedraggable": "^2.24.3"
   },
diff --git a/project/dv/apps/AppGridDV.vue b/project/dv/apps/AppGridDV.vue
index e097acc9..ec028832 100644
--- a/project/dv/apps/AppGridDV.vue
+++ b/project/dv/apps/AppGridDV.vue
@@ -11,21 +11,82 @@
           @node-click="handleNodeClick"
           node-key="id"
           ref="tree"
+          :expand-on-click-node="false"
           default-expand-all
           highlight-current>
         </el-tree>
       </div>
     </div>
-    <div class="middle">
-
+    <div class="middle" v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.5)">
+      <div id="tree" style="width: 100%; height: 100%">
+        <VueOkrTree
+          ref="VueOkrTree"
+          :data="chartData"
+          node-key="id"
+          show-collapsable
+          aniamte
+          animate-name="okr-fade-in-linear"
+          :render-content="renderContent"
+          default-expand-all>
+        </VueOkrTree>
+      </div>
     </div>
-    <div class="right" v-if="false">
-
+    <div class="right">
+      <div class="right-top">
+        <div class="griddv-title">
+          <h2>网格内人员情况</h2>
+        </div>
+        <div class="right-chart">
+          <ai-echart
+            style="height: 100%; width: 100%;"
+            :data="userInfo"
+            :ops="pieChart">
+          </ai-echart>
+        </div>
+      </div>
+      <div class="right-bottom">
+        <div class="griddv-title">
+          <h2>事件上报情况</h2>
+        </div>
+        <div class="right-chart">
+          <ai-echart
+            style="height: 100%; width: 100%;"
+            :data="eventInfo"
+            :ops="pieChart">
+          </ai-echart>
+        </div>
+      </div>
     </div>
+    <el-dialog :visible.sync="isShowInfo" width="640px" :modal-append-to-body="false">
+      <template slot="title">
+        <h2>家庭信息</h2>
+        <img src="../assets/grid/close.png" @click="isShowInfo = false">
+      </template>
+      <div class="grid-info">
+        <div class="grid-info__title">
+          <h2>家庭地址</h2>
+          <span>{{ residentInfo.currentAreaName }}</span>
+        </div>
+        <ai-table
+          v-if="tableData.length"
+          style="width: 558px"
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :total="total"
+          :isShowPagination="false"
+          :current.sync="search.current"
+          :size.sync="search.size"
+          @getList="() => {}">
+        </ai-table>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+  import pieChart from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart2'
+  import { VueOkrTree } from 'vue-okr-tree'
+  import 'vue-okr-tree/dist/vue-okr-tree.css'
   export default {
     name: 'AppGridDV',
 
@@ -38,31 +99,218 @@
 
     data () {
       return {
+        isLoading: false,
         treeList: [],
+        search: {
+          size: 100,
+          current: 1
+        },
+        userInfo: [],
+        eventInfo: [],
+        pieChart,
+        total: 0,
+        isShowInfo: false,
         defaultProps: {
           children: 'girdList',
           label: 'girdName',
-        }
+        },
+        colConfigs: [
+          { prop: 'name',  label: '姓名', align: 'center', width: 120 },
+          { prop: 'residentType', label: '与户主关系', align: 'center',  formart: v => this.dict.getLabel('householdRelation', v) },
+          { prop: 'idNumber', label: '身份证号', align: 'center', width: 220 },
+          { prop: 'phone', label: '联系方式', align: 'center' }
+        ],
+        girdId: '',
+        residentInfo: {},
+        tableData: [],
+        chartData: [],
+        girdLevel: '0',
+        defaultUrl: 'http://respub.sinoecare.net/20220121/avatar-20220121163714.jpg'
       }
     },
 
-    created () {
-      this.getTreeList()
+    components: {
+      VueOkrTree
     },
 
-    mounted () {
-
+    created () {
+      this.dict.load('householdRelation')
+      this.getTreeList()
+      this.getGirdInfo()
     },
 
     methods: {
       handleNodeClick (e) {
-        console.log(e)
+        this.girdLevel = e.girdLevel
+        this.isLoading = true
+        this.getGirdInfo(e.id, e.girdLevel)
+        this.getStatisticsInfo(e.id)
+      },
+
+      getStatisticsInfo (id) {
+        this.instance.post(`/app/appgirdmemberinfo/girdMemberAndResidentStatistic?girdId=${id}`).then((res) => {
+          if (res.code == 0) {
+            this.userInfo = Object.keys(res.data).map(v => {
+              return {
+                name: v,
+                v1: res.data[v]
+              }
+            })
+          }
+        })
+
+        this.instance.post(`/app/appclapeventinfo/clapEventStatistic?girdId=${id}`).then((res) => {
+          if (res.code == 0) {
+            this.eventInfo = Object.keys(res.data).map(v => {
+              return {
+                name: v,
+                v1: res.data[v]
+              }
+            })
+          }
+        })
+      },
+
+      renderContent (h, node) {
+        return h('div', {
+          class: `userlist ${node.data.label === '子节点' ? 'last-level' : ''} ${node.data.girdLevel > 1 ? 'userlist-wrapper' : ''}`
+        }, node.data.userList.map(v => {
+          return h('div', {
+            class: `user-item user-item-${v.girdLevel}`
+          }, [h('img', {
+            attrs: {
+              src: v.photo || this.defaultUrl
+            }
+          }), h('p', {
+            attrs: {
+              title: v.label,
+              'data-id': v.id
+            },
+            on: {
+              click: () => {
+                if (node.data.label === '子节点') {
+                  this.getResidentInfo(v.id)
+                }
+              }
+            }
+          }, v.label), h('span', {
+            style: {
+              display: v.girdLevel > 1 ? 'none' : 'block'
+            },
+            attrs: {
+              title: v.girdName
+            }
+          }, v.girdName)])
+        }))
+      },
+
+      getResidentInfo (id) {
+        this.isLoading = true
+        this.instance.post(`/app/appresident/detail?id=${id}`).then((res) => {
+          if (res.code == 0) {
+            this.residentInfo.resident = res.data
+            this.tableData = res.data.family || []
+            this.isShowInfo = true
+          }
+
+          this.isLoading = false
+        })
+      },
+
+      getGirdInfo (id, level) {
+        this.instance.post(`/app/appgirdinfo/listAllGirdAndMemberByTop?id=${id || ''}`).then((res) => {
+          if (res.code == 0) {
+            this.chartData = this.formatList(res.data)
+
+            this.$nextTick(() => {
+              if (level === '2') {
+                this.getUserList(id)
+              } else {
+                this.isLoading = false
+              }
+            })
+          }
+        })
+      },
+
+      getUserList (id) {
+        this.instance.post(`/app/appgirdmemberresident/listByGirdMember`, null, {
+          params: {
+            size: 1000,
+            girdId: id
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            const userList = res.data.records.map(v => {
+              return {
+                ...v,
+                isLast: true,
+                label: v.name
+              }
+            })
+            
+            this.isLoading = false
+
+            if (!userList.length) {
+              return false
+            }
+
+            const node = this.$refs.VueOkrTree.getNode(id)
+
+            if (userList.length) {
+              this.$refs.VueOkrTree.append({
+                id: new Date().getTime(),
+                label: '子节点',
+                userList: userList || []
+              }, node)
+            }
+          }
+        })
+      },
+
+      formatList (list) {
+        return list.map(item => {
+          const userList = item.girdMemberManageList ? item.girdMemberManageList.map(v => {
+            return {
+              ...v,
+              label: v.name,
+              id: v.id,
+              girdName: item.girdName,
+              girdLevel: item.girdLevel,
+              isUser: true
+            }
+          }) : [{
+            label: item.girdName,
+            id: item.id,
+            girdLevel: item.girdLevel,
+            girdName: item.girdName
+          }]
+          const obj = {
+            label: item.girdName,
+            id: item.id,
+            girdLevel: item.girdLevel,
+            isUser: false,
+            userList: userList,
+            children: item.girdList || []
+          }
+
+          if (obj.children && obj.children.length) {
+            obj.children = this.formatList(obj.children)
+          }
+
+          return obj
+        })
       },
 
       getTreeList () {
         this.instance.post('/app/appgirdinfo/listAll').then((res) => {
           if (res.code == 0) {
             this.treeList = [...res.data]
+
+            this.$nextTick(() => {
+              this.$refs.tree.setCurrentKey(res.data[0].id)
+              this.getStatisticsInfo(res.data[0].id)
+            })
           }
         })
       }
@@ -76,6 +324,182 @@
     align-items: center;
     height: 100%;
 
+    .grid-info {
+      width: 100%;
+      .grid-info__title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+
+        h2, span {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 500;
+        }
+      }
+    }
+
+    ::v-deep .el-dialog__body {
+      padding: 10px 40px 30px;
+
+      .el-table {
+        background-color: transparent;
+      }
+      
+      .el-table__body tr td:first-child .cell, .ai-table .el-table__header tr th:first-child .cell {
+        padding-left: 0!important;
+      }
+
+      .el-table th, .el-table tr {
+        color: #fff;
+        font-size: 14px;
+        background-color: rgba(28, 39, 65, 0.9);
+      }
+
+      .el-table__row--striped, .el-table--striped .el-table__body tr.el-table__row--striped td {
+        background-color: transparent!important;
+      }
+
+      .el-table__header-wrapper {
+        display: none;
+      }
+
+      .el-table--enable-row-hover .el-table__body tr:hover > td, .el-table-filter {
+        background-color: transparent;
+      }
+    }
+
+    ::v-deep .el-dialog {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin: 0!important;
+      transform: translate(-50%, -50%);
+      background: rgba(2, 13, 43, 0.9);
+      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 10px 0px #2C7CFF;
+      border: 1px solid #2D65C9;
+
+      .el-dialog__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: transparent;
+        box-shadow: none;
+
+        h2 {
+          color: #fff;
+          font-size: 18px;
+        }
+
+        img {
+          cursor: pointer;
+          width: 16px;
+          height: 16px;
+
+          &:hover {
+            opacity: 0.6;
+          }
+        }
+      }
+
+      .el-dialog__headerbtn {
+        display: none;
+      }
+    }
+
+    ::v-deep .userlist {
+      display: flex;
+      align-items: center;
+
+      &.userlist-wrapper {
+        padding: 10px;
+        background: rgba(76, 166, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+      }
+
+      .user-item {
+        margin-right: 10px;
+        color: #fff;
+        font-size: 0;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        img {
+          width: 58px;
+          height: 80px;
+          object-fit: cover;
+        }
+
+        p {
+          max-width: 120px;
+          margin: 4px 0;
+          font-size: 19px;
+          overflow: hidden;
+          text-overflow:ellipsis;
+          white-space: nowrap;
+        }
+
+        span {
+          display: block;
+          max-width: 120px;
+          font-size: 17px;
+          color: #9DD3FF;
+          overflow: hidden;
+          text-overflow:ellipsis;
+          white-space: nowrap;
+        }
+
+        &.user-item-0 {
+          img {
+            width: 86px;
+            height: 120px;
+          }
+        }
+
+        &.user-item-2 {
+          p {
+            font-size: 12px;
+            margin-bottom: 0;
+          }
+          img {
+            width: 40px;
+            height: 56px;
+          }
+        }
+      }
+
+      &.last-level {
+        flex-wrap: wrap;
+        max-width: 690px;
+        font-size: 0;
+        background: rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        padding: 12px 12px 0 12px;
+        box-sizing: border-box;
+
+        .user-item {
+          margin-bottom: 12px;
+        }
+
+        img {
+          display: none;
+        }
+
+        p {
+          padding: 8px;
+          font-size: 12px;
+          background: #0B477D;
+          border-radius: 4px;
+        }
+
+        span {
+          display: none!important;
+        }
+      }
+    }
+
     * {
       box-sizing: border-box;
     }
@@ -104,14 +528,52 @@
     }
 
     .right {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
       width: 440px;
+      margin-left: 20px;
+
+      & > div {
+        width: 100%;
+        height: 440px;
+        padding-bottom: 20px;
+        background: rgba(7, 11, 35, 0.4);
+        border: 1px solid #2D50B5;
+        box-sizing: border-box;
+
+        .right-chart {
+          height: calc(100% - 82px);
+        }
+      }
     }
 
     .middle {
       flex: 1;
-      margin: 0 20px;
+      margin-left: 20px;
       background: rgba(7, 11, 35, 0.4);
       border: 1px solid #2D50B5;
+      overflow: hidden;
+
+      #tree {
+        padding: 20px;
+        overflow: auto;
+      }
+
+      ::v-deep .org-chart-container {
+        display: flex;
+        justify-content: center;
+
+        .org-chart-node-children:before, .org-chart-node:after, .org-chart-node:last-child:before,
+        .org-chart-node.is-leaf:before {
+          border-radius: 0;
+          border-color: #9CD7FF!important;
+        }
+
+        .org-chart-node-label-inner {
+          padding: 0!important;
+        }
+      }
     }
 
     .left {
diff --git a/project/dv/assets/grid/close.png b/project/dv/assets/grid/close.png
new file mode 100644
index 00000000..a7c16685
Binary files /dev/null and b/project/dv/assets/grid/close.png differ