diff --git a/project/sass/apps/AppGridMap/AppGridMap.vue b/project/sass/apps/AppGridMap/AppGridMap.vue
new file mode 100644
index 00000000..c6918b54
--- /dev/null
+++ b/project/sass/apps/AppGridMap/AppGridMap.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="AppGridMap">
+    <keep-alive :include="['List']">
+      <component
+        ref="component"
+        :is="component"
+        @change="onChange"
+        :params="params"
+        :instance="instance"
+        :dict="dict"
+      ></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import List from "./components/list";
+
+export default {
+  name: "AppGridMap",
+  label: "网格地图",
+
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+
+  data() {
+    return {
+      component: "List",
+      params: {},
+      include: [],
+    };
+  },
+
+  components: {
+    List,
+  },
+
+  mounted() {},
+
+  methods: {
+    onChange(data) {
+      if (data.type === "Add") {
+        this.component = "Add";
+        this.params = data.params;
+      }
+
+      if (data.type === "list") {
+        this.component = "List";
+        this.params = data.params;
+
+        this.$nextTick(() => {
+          if (data.isRefresh) {
+            this.$refs.component.getList();
+          }
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.AppGridMap {
+  height: 100%;
+  background: #f3f6f9;
+  overflow: auto;
+}
+</style>
diff --git a/project/sass/apps/AppGridMap/components/list.vue b/project/sass/apps/AppGridMap/components/list.vue
new file mode 100644
index 00000000..a5c42451
--- /dev/null
+++ b/project/sass/apps/AppGridMap/components/list.vue
@@ -0,0 +1,669 @@
+<template>
+  <div class="gridMap">
+    <ai-t-map :map.sync="map" ref="AiTMap" :lib.sync="mapLib" @loaded="onMapInit" :libraries="['geometry','service', 'tools']"/>
+    <div class="drawer" ref="drawer">
+      <div v-if="show" class="drawer-content">
+        <b>网格地图</b>
+        <div class="tree">
+          <div class="input">
+            <el-input placeholder="请输入网格名称" v-model="filterText" size="mini" suffix-icon="el-icon-search"/>
+          </div>
+          <header class="header">
+            <span>网格列表</span>
+          </header>
+          <div class="tree-div">
+            <el-tree
+              :data="treeObj.treeList"
+              :props="treeObj.defaultProps"
+              @node-click="handleNodeClick"
+              node-key="id"
+              ref="tree"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              default-expand-all
+              highlight-current>
+            </el-tree>
+          </div>
+        </div>
+      </div>
+      <div class="rightBtn" :class="{show}" @click="show=!show">
+        <i class="iconfont iconArrow_Right"/>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import {mapState} from 'vuex'
+
+  export default {
+    name: 'AppGridMap',
+    label: "网格地图",
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function,
+    },
+    data() {
+      return {
+        map: null,
+        mapLib: null,
+        show: true,
+        retryMapCount: 0,
+        polygons: [],
+
+        drawer: false,
+        filterText: "",
+        treeObj: {
+          treeList: [],
+          defaultProps: {
+            children: "girdList",
+            label: "girdName",
+          },
+          defaultExpandedKeys: [],
+        },
+        ops: {},
+
+        path: [],
+        searchObj: {
+          onlineStatus: "",
+          girdMemberName: "",
+        },
+        member: {
+          memberList: [],
+        },
+        currInfo: {},
+        infoWindowHtml: "",
+        marker: {},
+        activeId: null,
+        labels: []
+      };
+    },
+    computed: {
+      ...mapState(['user']),
+    },
+    created() {
+      this.dict.load("onlineStatus")
+      this.getTreeList().then(() => {
+        this.getLeafNodes()
+      })
+    },
+    watch: {
+      filterText(val) {
+        this.$refs.tree.filter(val);
+      },
+    },
+    methods: {
+      filterNode(value, data) {
+        if (!value) return true;
+        return data.girdName.indexOf(value) !== -1;
+      },
+      getTreeList() {
+        return this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
+          if (res.code == 0) {
+            this.treeObj.treeList = res.data;
+
+            this.$nextTick(() => {
+              res.data.length && this.$refs.tree.setCurrentKey(res.data[0].id)
+            })
+          }
+        })
+      },
+
+      onMapInit () {
+        this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
+          if (res.code === 0) {
+            this.map.setCenter(new this.mapLib.LatLng(res.data.lat, res.data.lng))
+          }
+        })
+      },
+
+      getLeafNodes() {
+        this.instance.post(`/app/appgirdinfo/listAll2`).then((res) => {
+          if (res?.data) {
+            const arr = res.data.map(v => {
+              return {
+                id: v.id,
+                girdName: v.girdName,
+                points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
+              }
+            }).filter(v => v.points.length)
+
+            this.renderGridMap(arr)
+          }
+        })
+      },
+      handleNodeClick (val) {
+        if (val.girdLevel === '0') {
+          this.getLeafNodes()
+
+          return false
+        }
+        
+        this.instance.post(`/app/appgirdinfo/queryChildGirdInfoByGirdId?girdId=${val.id}`).then((res) => {
+          if (res?.data) {
+            const arr = res.data.map(v => {
+              return {
+                id: v.id,
+                girdName: v.girdName,
+                points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
+              }
+            }).filter(v => v.points.length)
+
+            if (!arr.length) {
+              return this.$message.error('该网格还未标绘')
+            }
+
+            this.renderGridMap(arr)
+          }
+        })
+      },
+
+      fitBounds(latLngList, count = 0) {
+        let {mapLib: TMap} = this
+        if (TMap) {
+          if (latLngList.length === 0) {
+            return null;
+          }
+          let boundsN = latLngList[0].getLat();
+          let boundsS = boundsN;
+          let boundsW = latLngList[0].getLng();
+          let boundsE = boundsW;
+          latLngList.forEach((point) => {
+            point.getLat() > boundsN && (boundsN = point.getLat());
+            point.getLat() < boundsS && (boundsS = point.getLat());
+            point.getLng() > boundsE && (boundsE = point.getLng());
+            point.getLng() < boundsW && (boundsW = point.getLng());
+          });
+          return new TMap.LatLngBounds(
+              new TMap.LatLng(boundsS, boundsW),
+              new TMap.LatLng(boundsN, boundsE)
+          );
+        } else {
+          if (count < 5) {
+            this.fitBounds(latLngList, ++count)
+          }
+        }
+      },
+
+      renderGridMap(paths) {
+        let {map, mapLib: TMap } = this
+        if (TMap) {
+          if (this.polygons.length > 0) {
+            this.polygons.forEach(e => e.destroy())
+            this.labels.forEach(e => {
+              e.destroy(e.id)
+            })
+            this.polygons = []
+            this.labels = []
+          }
+          if (paths?.length > 0) {
+            let bounds = []
+            paths.forEach((path, i) => {
+              let polygon = new TMap.MultiPolygon({
+                map, styles: {
+                  default: new TMap.PolygonStyle({
+                    showBorder: true,
+                    borderColor: '#5088FF',
+                    borderWidth: 2,
+                    color: this.$colorUtils.Hex2RGBA('#5088FF', 0.1)
+                  })
+                },
+                id: path.id,
+                geometries: [{paths: path.points.map(e => new TMap.LatLng(e[1], e[0]))}]
+              })
+              this.polygons.push(polygon)
+              bounds.push(this.fitBounds(path.points.map(e => new TMap.LatLng(e[1], e[0]))))
+
+              polygon.on('click', e => {
+                // const id = e.target.id
+                // this.getGridInfo(id)
+              })
+
+              const points = path.points.map(e => new TMap.LatLng(e[1], e[0]))
+
+              var position = TMap.geometry.computeCentroid(points)
+
+              let label = new TMap.MultiLabel({
+                id: `label~${path.id}`,
+                data: path.id,
+                map: map,
+                styles: {
+                  building:  new TMap.LabelStyle({
+                    color: '#3777FF',
+                    size: 20,
+                    alignment: 'center',
+                    verticalAlignment: 'middle'
+                  })
+                },
+                geometries: [
+                  {
+                    id: `label-class-${i}`,
+                    styleId: 'building',
+                    position: position,
+                    content: path.girdName,
+                  }
+                ]
+              })
+              this.labels.push(label)
+              label.on('click', e => {
+                // this.getGridInfo(e.target.id.split('~')[1])
+              });
+            })
+            bounds = bounds.reduce((a, b) => {
+              return this.fitBounds([
+                a.getNorthEast(),
+                a.getSouthWest(),
+                b.getNorthEast(),
+                b.getSouthWest(),
+              ]);
+            });
+            map.fitBounds(bounds, {padding: 100})
+          }
+        }
+      },
+      hasClass(ele, cls) {
+        return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
+      },
+      addClass(ele, cls) {
+        if (!this.hasClass(ele, cls)) ele.className += " " + cls;
+      },
+      removeClass(ele, cls) {
+        if (this.hasClass(ele, cls)) {
+          const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
+          ele.className = ele.className.replace(reg, " ");
+        }
+      },
+      changClass(ele, className) {
+        if (!this.hasClass(ele, className)) {
+          this.addClass(ele, className);
+        } else {
+          this.removeClass(ele, className);
+        }
+      },
+      percentage() {
+        if (this.member.onlineNumber == 0) {
+          return 0;
+        } else {
+          return (
+              100 *
+              (this.member.onlineNumber / this.member.allMemberNumber)
+          ).toFixed(2);
+        }
+      },
+      getMemberList() {
+        this.instance.post(`/app/appgirdmemberinfo/queryGirdMemberByMap`, this.searchObj).then((res) => {
+          if (res.code == 0) {
+            let markers = [];
+            this.member = res.data;
+            this.member.memberList.map((e) => {
+              if (e.onlineStatus == "1") {
+                markers.push({lng: e.lng, lat: e.lat, name: e.name});
+              }
+            });
+            this.initMap(null, null, markers);
+          }
+        });
+      },
+      clickMember(marker) {
+        if (marker.onlineStatus == 1) {
+          this.activeId = marker.id;
+          this.marker = marker;
+          this.infoWindowContent(marker);
+        }
+      },
+      infoWindowContent(marker) {
+        this.instance
+        .post(`/app/location/xyToAddress`, null, {
+          params: {
+            x: marker.lat,
+            y: marker.lng,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.infoWindowHtml = `<div class="info">
+                                          <p>
+                                              <span class="name">${marker.name}</span>
+                                              <span class="lat">${marker.lng},${marker.lat}</span>
+                                          </p>
+                                          <p>
+                                              <span class="lat">${res.data}</span>
+                                          </p>
+                                          <p class="address">
+                                              <span class="iconfont iconarea" id="addressSpan">当日轨迹</span>
+                                          </p>
+                                      </div>`;
+            this.initMap(false, marker);
+          }
+        });
+      },
+      queryTrajectory() {
+        this.instance
+        .post(`/app/appgirdmembertrajectory/queryTrajectory`, null, {
+          params: {
+            userId: this.marker.userId,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            let path = [];
+            if (res.data) {
+              res.data.map((e, index) => {
+                path[index] = [e.lng, e.lat];
+              });
+            }
+            this.initMap(path, this.marker);
+          }
+        });
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+.gridMap {
+  height: 100%;
+  width: 100%;
+  position: relative;
+
+  .drawer-btn {
+    position: absolute;
+    left: 280px;
+    bottom: 0;
+    top: 0;
+    margin: auto;
+    width: 20px;
+    height: 24px;
+    border-top: 40px solid transparent;
+    border-bottom: 40px solid transparent;
+    border-left: 16px solid #333c53;
+    border-right: 0 solid transparent;
+    transition: all 0.5s ease-in-out;
+    cursor: pointer;
+
+    .iconfont {
+      position: absolute;
+      font-size: 26px;
+      color: rgb(255, 255, 255);
+      left: -21px;
+      top: -14px;
+      transition: all 0.5s ease-in-out;
+    }
+  }
+
+  .btn-hide {
+    left: 0;
+  }
+
+  .drawer {
+    width: 280px;
+    height: 100%;
+    position: absolute;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    visibility: visible;
+    opacity: 1;
+    transition: all 0.5s ease-in-out;
+    display: flex;
+    align-items: center;
+
+    .drawer-content {
+      width: 100%;
+      height: 100%;
+      padding: 0 16px;
+      box-sizing: border-box;
+      background: #333c53;
+
+      & > b {
+        color: #fff;
+        font-size: 18px;
+        line-height: 60px;
+      }
+
+      .tree {
+        height: calc(100% - 28px - 76px);
+        border-radius: 4px;
+        overflow: hidden;
+
+        .map-search {
+          display: flex;
+          padding: 8px 0;
+          justify-content: space-between;
+
+          ::v-deep .el-input__inner {
+            color: #fff;
+          }
+        }
+
+        .member-list {
+          width: 100%;
+          height: calc(100% - 44px - 28px);
+          overflow: auto;
+          padding: 0;
+          margin: 0;
+
+          li {
+            width: 100%;
+            height: 32px;
+            display: flex;
+            padding: 0 8px;
+            align-items: center;
+            color: #fff;
+            margin: 0;
+            cursor: pointer;
+
+            span {
+              padding-right: 8px;
+            }
+          }
+
+          .active {
+            background: #1d2336;
+          }
+
+          &::-webkit-scrollbar {
+            /*滚动条整体样式*/
+            width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
+            height: 1px;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            /*滚动条里面小方块*/
+            border-radius: 10px;
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+            background: #1a1e2c;
+          }
+
+          &::-webkit-scrollbar-track {
+            /*滚动条里面轨道*/
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+            border-radius: 10px;
+            background: #282f45;
+          }
+        }
+
+        .empty {
+          padding: 20px 0;
+          color: #7a88bb;
+          text-align: center;
+        }
+
+        .header {
+          width: 100%;
+          height: 28px;
+          padding: 0 16px;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          color: #fff;
+          justify-content: space-between;
+          font-size: 14px;
+          background: #3e4a69;
+        }
+
+        .input {
+          width: 100%;
+          padding: 8px 0;
+
+          ::v-deep .el-input__inner {
+            color: #fff;
+          }
+        }
+
+        ::v-deep .el-input__inner {
+          background-color: #282f45;
+          border: 1px solid #282f45;
+        }
+
+        .tree-div {
+          width: 100%;
+          height: calc(100% - 44px - 28px);
+          overflow: auto;
+
+          &::-webkit-scrollbar {
+            /*滚动条整体样式*/
+            width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
+            height: 1px;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            /*滚动条里面小方块*/
+            border-radius: 10px;
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+            background: #1a1e2c;
+          }
+
+          &::-webkit-scrollbar-track {
+            /*滚动条里面轨道*/
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+            border-radius: 10px;
+            background: #282f45;
+          }
+        }
+
+        footer {
+          width: 100%;
+          height: 32px;
+          background-color: #fff;
+          display: flex;
+          align-items: center;
+
+          span {
+            width: 33.33%;
+            text-align: center;
+            cursor: pointer;
+          }
+        }
+
+        ::v-deep .el-tree {
+          width: 100%;
+
+          .el-tree__empty-block {
+            background: #333c53;
+          }
+
+          .el-tree-node__label {
+            color: #fff;
+          }
+
+          .el-tree-node__content {
+            background: #333c53;
+          }
+
+          .is-current > .el-tree-node__content {
+            .el-tree-node__label {
+              color: #5088ff;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .hide {
+    left: -280px;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .btn {
+    position: absolute;
+    top: 100px;
+  }
+
+  .rightBtn {
+    width: 16px;
+    height: 80px;
+    background: url("https://cdn.cunwuyun.cn/monitor/drawerBtn.png");
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .iconfont {
+      transition: transform 0.2s;
+    }
+
+
+    &.show > .iconfont {
+      transform: rotate(180deg);
+    }
+  }
+}
+</style>
+<style lang="scss">
+.map {
+  .info {
+    width: 280px;
+    height: 98px;
+    background: #fff;
+    padding: 8px 0 0 12px;
+    box-sizing: border-box;
+
+    p {
+      margin: 0;
+      padding: 0;
+    }
+
+    p {
+      line-height: 20px;
+
+      .name {
+        color: #333;
+        font-size: 16px;
+        font-weight: bold;
+      }
+
+      .lat {
+        font-size: 12px;
+        color: #999;
+      }
+    }
+
+    .address {
+      color: #999;
+      line-height: 40px;
+      font-size: 12px;
+      cursor: pointer;
+    }
+  }
+
+  .title_info {
+    width: 68px;
+    font-size: 14px;
+    font-weight: bold;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    border-radius: 4px;
+    padding: 0;
+    margin: 0;
+  }
+
+  .amap-marker-label {
+    border: 1px solid rgb(141, 139, 139);
+    background-color: #fff;
+  }
+}
+</style>
diff --git a/project/sass/apps/AppGridMember copy/AppGridMember.vue b/project/sass/apps/AppGridMember copy/AppGridMember.vue
new file mode 100644
index 00000000..fa9f5d03
--- /dev/null
+++ b/project/sass/apps/AppGridMember copy/AppGridMember.vue	
@@ -0,0 +1,79 @@
+<template>
+  <div class="AppGridMember">
+    <keep-alive :include="['List']">
+      <component
+        ref="component"
+        :is="component"
+        @change="onChange"
+        :params="params"
+        :instance="instance"
+        :dict="dict"
+      ></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import List from "./components/list";
+import Add from "./components/add";
+import Family from "./components/Family";
+
+export default {
+  name: "AppGridMember",
+  label: "网格管理员",
+
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+
+  data() {
+    return {
+      component: "List",
+      params: {},
+      include: [],
+    };
+  },
+
+  components: {
+    Add,
+    List,
+    Family
+  },
+
+  mounted() {},
+
+  methods: {
+    onChange(data) {
+      if (data.type === "Add") {
+        this.component = "Add";
+        this.params = data.params;
+      }
+
+      if (data.type === "Family") {
+        this.component = "Family"
+        this.params = data.params
+      }
+
+      if (data.type === "list") {
+        this.component = "List";
+        this.params = data.params;
+
+        this.$nextTick(() => {
+          if (data.isRefresh) {
+            this.$refs.component.getList();
+          }
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.AppGridMember {
+  height: 100%;
+  background: #f3f6f9;
+  overflow: auto;
+}
+</style>
diff --git a/project/sass/apps/AppGridMember copy/components/Family.vue b/project/sass/apps/AppGridMember copy/components/Family.vue
new file mode 100644
index 00000000..98298bed
--- /dev/null
+++ b/project/sass/apps/AppGridMember copy/components/Family.vue	
@@ -0,0 +1,499 @@
+<template>
+  <ai-list class="Family">
+    <template slot="title">
+      <ai-title title="责任家庭" isShowBack isShowBottomBorder @onBackClick="onBack"></ai-title>
+    </template>
+    <template slot="content">
+      <ai-search-bar class="search-bar">
+        <template #left>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="isShow = true">添加</el-button>
+          <el-button size="small" :disabled="!ids.length" icon="iconfont iconDelete" @click="removeAll">批量删除</el-button>
+          <el-select size="small" style="width: 200px;" v-model="search.girdId" placeholder="所属网格" clearable @change="getListInit()">
+            <el-option
+              v-for="(item,i) in girdList"
+              :key="i"
+              :label="item.girdName"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </template>
+        <template #right>
+          <el-input
+            v-model="search.name"
+            class="search-input"
+            size="small"
+            @keyup.enter.native="search.current = 1, getList()"
+            placeholder="姓名/身份证/联系方式"
+            clearable
+            @clear="search.current = 1, search.name = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        style="margin-top: 6px;"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @handleSelectionChange="handleSelectionChange"
+        @getList="getList">
+        <el-table-column slot="options" width="100px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="remove(row.gmrId)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <ai-dialog
+        :visible.sync="isShow"
+        width="890px"
+        @close="closeDialog"
+        title="添加户主"
+        @onConfirm="onConfirm">
+        <ai-area-select clearable always-show :instance="instance"  v-model="areaId" :disabled-level="disabledLevel" @change="search.current = 1, getUserList()"></ai-area-select>
+        <span style="margin-top:16px;"><span style="color:#f46;margin-right:4px;">*</span>网格：</span>
+        <el-select size="small" style="width: 280px;margin-top:16px;" v-model="girdId" placeholder="请选择网格" clearable>
+          <el-option
+            v-for="(item,i) in girdList"
+            :key="i"
+            :label="item.girdName"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+        <div class="AiWechatSelecter-container">
+          <div class="AiWechatSelecter-container__left" v-loading="isLoading">
+            <div class="AiWechatSelecter-header">
+              <div class="AiWechatSelecter-header__left">
+                <h2>户主信息列表</h2>
+              </div>
+              <el-input
+                class="search-input"
+                size="mini"
+                placeholder="请输入姓名/身份证号"
+                v-model="name"
+                clearable
+                @keyup.enter.native="getUserList()"
+                @clear="name = '', getUserList()"
+                suffix-icon="iconfont iconSearch">
+              </el-input>
+            </div>
+            <el-scrollbar class="AiWechatSelecter-list">
+              <el-checkbox-group v-model="chooseUser">
+                <el-checkbox
+                  :label="`${item.name}~${item.id}`"
+                  v-for="(item, index) in userList"
+                  :key="index">
+                  {{ item.name }}-{{ item.idNumber }}
+                </el-checkbox>
+              </el-checkbox-group>
+              <AiEmpty v-if="!this.userList.length"></AiEmpty>
+            </el-scrollbar>
+          </div>
+          <div class="AiWechatSelecter-container__right">
+            <div class="AiWechatSelecter-header AiWechatSelecter-header__right">
+              <h2>已选择</h2>
+              <el-button size="mini" icon="el-icon-delete" @click="clearAll">清空</el-button>
+            </div>
+            <el-scrollbar class="AiWechatSelecter-list">
+              <div class="tags-wrapper">
+                <el-tag
+                  v-for="(item, index) in chooseUser"
+                  :key="index"
+                  closable
+                  @close="del(item)"
+                  size="small"
+                  type="info">
+                  {{ item.split('~')[0] }}
+                </el-tag>
+              </div>
+            </el-scrollbar>
+          </div>
+        </div>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    name: 'Family',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data() {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          name: '',
+          girdId: ''
+        },
+        isLoading: false,
+        form: {
+
+        },
+        userList: [],
+        name: '',
+        chooseUser: [],
+        isShow: false,
+        total: 10,
+        colConfigs: [
+          { type: 'selection', label: '' },
+          { prop: 'name',  label: '户主姓名', align: 'left', width: '200px' },
+          { prop: 'idNumber', label: '身份证号', align: 'center' },
+          { prop: 'phone', label: '联系方式', align: 'center' },
+          { prop: 'girdName', label: '所属网格', align: 'center' },
+          { prop: 'createTime', label: '添加时间', align: 'center' },
+          { slot: 'options', label: '操作', align: 'center' }
+        ],
+        tableData: [],
+        areaId: '',
+        ids: [],
+        disabledLevel: 0,
+        girdList: [],
+        girdId: '',
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    created() {
+      this.areaId = this.user.info.areaId
+      this.disabledLevel = this.user.info.areaList.length
+      this.dict.load('epidemicDangerousAreaLevel').then(() => {
+        this.getGirdList()
+        this.getList()
+        this.getUserList()
+      })
+    },
+
+    methods: {
+      getGirdList() {
+        this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2?girdMemberId=${this.params.id}`).then(res => {
+          if (res.code == 0) {
+            this.girdList = res.data
+          }
+        })
+      },
+      getListInit() {
+        this.search.current = 1
+        this.getList()
+      },
+      getList () {
+        this.instance.post(`/app/appgirdmemberresident/listByGirdMember`, null, {
+          params: {
+            ...this.search,
+            girdMemberId: this.params.id,
+            areaId: this.areaId
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+    removeAll() {
+        if (!this.ids) {
+          return this.$message.error('请选择户主')
+        }
+        this.remove(this.ids.join(','))
+      },
+      handleSelectionChange(e) {
+        this.ids = e.map(v => v.gmrId)
+      },
+
+      clearAll () {
+        this.chooseUser = []
+      },
+
+      onConfirm () {
+        if(!this.girdId) {
+          return this.$message.error('请选择网格')
+        }
+
+        if (!this.chooseUser.length) {
+          return this.$message.error('请选择户主')
+        }
+
+        const residentList = this.chooseUser.map(v => {
+          return {
+            girdMemberId: this.params.id,
+            name: v.split('~')[0],
+            residentId: v.split('~')[1],
+            girdId: this.girdId
+          }
+        })
+        this.instance.post(`/app/appgirdmemberresident/add`, {
+          residentList
+        }).then(res => {
+          if (res.code == 0) {
+            this.current = 1
+            this.getList()
+            this.$message.success('添加成功')
+            this.closeDialog()
+          }
+        })
+      },
+      closeDialog() {
+        this.isShow = false
+        this.chooseUser = []
+        this.girdId = ''
+        this.name = ''
+        this.areaId = this.user.info.areaId
+        this.getUserList()
+      },
+
+      del (e) {
+        this.chooseUser.splice(this.chooseUser.indexOf(e), 1)
+      },
+
+      getUserList () {
+        this.isLoading = true
+        this.instance.post(`/app/appresident/list`, null, {
+          params: {
+            current: 1,
+            size: 200,
+            con: this.name,
+            householdName: 1,
+            areaId: this.areaId,
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.userList = res.data.records
+          }
+
+          this.isLoading = false
+        })
+      },
+
+      onBack () {
+        this.$emit('change', {
+          type: 'list'
+        })
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appgirdmemberresident/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .Family {
+    .AiWechatSelecter-container {
+      display: flex;
+      height: 380px;
+      margin-top: 20px;
+
+      ::v-deep {
+        .el-icon-circle-close {
+          display: inline-block!important;
+        }
+      }
+
+      .tree-container {
+        & > span {
+          display: block;
+          margin-bottom: 4px;
+        }
+
+        .tree-user__item {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+        img {
+          width: 27px;
+          height: 27px;
+          margin-right: 10px;
+        }
+      }
+
+      ::v-deep .el-tree {
+        background: transparent;
+
+        .el-tree-node {
+          margin-bottom: 8px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        .el-tree-node__content {
+          height: auto;
+          margin-top: 2px;
+          // align-items: inherit;
+        }
+        
+        .el-tree-node__expand-icon {
+          height: 24px;
+        }
+      }
+
+      .mask-btn__wrapper {
+        position: relative;
+      }
+
+      .mask-btn {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+      }
+
+      .userlist-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+        padding: 0 17px;
+        cursor: pointer;
+        user-select: none;
+
+        ::v-deep .el-checkbox__label {
+          display: none;
+        }
+
+        .userlist-item__left {
+          display: flex;
+          align-items: center;
+
+          span {
+            color: #222222;
+            font-size: 14px;
+          }
+
+          img {
+            width: 40px;
+            height: 40px;
+            margin-right: 8px;
+          }
+        }
+      }
+
+      & > div {
+        width: 280px;
+        background: #FCFCFC;
+        border: 1px solid #D0D4DC;
+      }
+
+      .AiWechatSelecter-list {
+        height: calc(100% - 40px);
+        padding: 8px 0;
+
+        ::v-deep .el-scrollbar__wrap {
+          margin-bottom: 0!important;
+          overflow-x: hidden;
+        }
+
+        ::v-deep .el-checkbox-group {
+          padding: 0 8px;
+
+          .el-checkbox {
+            display: block;
+            margin-right: 0;
+          }
+        }
+      }
+
+      .AiWechatSelecter-container__left {
+        flex: 1;
+      }
+
+      .AiWechatSelecter-container__right {
+        flex: 1;
+        margin-left: 20px;
+
+        .AiWechatSelecter-list {
+          .tags-wrapper {
+            padding: 0 8px;
+          }
+          .el-tag {
+            margin: 0 8px 8px 0px;
+            color: #222222;
+            font-size: 14px;
+          }
+        }
+      }
+
+      .AiWechatSelecter-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 40px;
+        padding: 0 8px 0 0;
+        border-bottom: 1px solid #D0D4DC;
+        background: #F5F7FA;
+
+        .AiWechatSelecter-header__left {
+          display: flex;
+          align-items: center;
+          padding: 0 8px;
+
+          h2 {
+            height: 100%;
+            line-height: 40px;
+            color: #222222;
+            font-size: 14px;
+            text-align: center;
+            cursor: pointer;
+            border-bottom: 2px solid transparent;
+
+            &.active {
+              color: #2266FF;
+              border-color: #2266FF;
+            }
+          }
+        }
+
+        .el-button {
+          height: 28px;
+          padding: 7px 5px;
+        }
+
+        .el-input {
+          width: 160px;
+        }
+      }
+
+      .AiWechatSelecter-header__right {
+        padding: 0 8px;
+
+        h2 {
+          color: #222222;
+          font-size: 14px;
+          text-align: center;
+        }
+      }
+    }
+  }
+</style>
diff --git a/project/sass/apps/AppGridMember copy/components/add.vue b/project/sass/apps/AppGridMember copy/components/add.vue
new file mode 100644
index 00000000..d3d6fd90
--- /dev/null
+++ b/project/sass/apps/AppGridMember copy/components/add.vue	
@@ -0,0 +1,543 @@
+<template>
+  <section style="height: 100%">
+    <ai-detail class="add">
+      <template #title>
+        <ai-title :title="title" :isShowBack="true" :isShowBottomBorder="true" @onBackClick="cancel(false)"></ai-title>
+      </template>
+      <template #content>
+        <el-form
+          ref="rules"
+          :model="forms"
+          :rules="formRules"
+          size="small"
+          label-suffix="："
+          label-width="136px">
+          <ai-card title="基础信息" >
+            <template #right  v-if="title=='网格员详情'">
+              <span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="editOne==false" @click="editOne=true">修改</span>
+              <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editOne==true" @click="searchDetail(),editOne=false">取消</span>
+              <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editOne==true" @click="save()">保存</span>
+            </template>
+            <template slot="content">
+              <div class="above" v-if="editOne==true">
+                <div class="left">
+                  <el-form-item label="网格员姓名" prop="name" >
+                    <el-input v-model="forms.name" placeholder="请选择网格员" disabled>
+                      <template #append>
+                        <ai-wechat-selecter :isMultiple="false" refs="addTags" :instance="instance" v-model="users" @change="getSelectPerson">
+                          <el-button size="small" type="primary"><span style="color: #fff">选择成员</span></el-button>
+                        </ai-wechat-selecter>
+                      </template>
+                    </el-input>
+                  </el-form-item>
+                  <el-form-item label="选用日期" prop="selectionDate" >
+                    <el-date-picker
+                      v-model="forms.selectionDate"
+                      type="date"
+                      style="width: 100%"
+                      value-format="yyyy-MM-dd"
+                      size="medium"
+                      placeholder="选择日期">
+                    </el-date-picker>
+                  </el-form-item>
+                  <el-form-item label="身份证号" prop="idNumber" >
+                      <el-input v-model="forms.idNumber" placeholder="请输入…" maxlength="18" show-word-limit></el-input>
+                  </el-form-item>
+                </div>
+                <div class="right">
+                  <el-form-item label="照片" prop="photo">
+                    <!-- <ai-uploader :instance="instance" v-model="photoList" :limit="1" @change="photoChange"></ai-uploader> -->
+                    <ai-avatar :instance="instance"  v-model="forms.photo"/>
+                  </el-form-item>
+                </div>
+              </div>
+              <div class="above" v-if="editOne==true">
+                <div class="left">
+                  <el-form-item label="出生日期" prop="birthday" >
+                    <el-date-picker
+                        v-model="forms.birthday"
+                        type="date"
+                        style="width: 100%"
+                        value-format="yyyy-MM-dd"
+                        size="medium"
+                        placeholder="选择日期">
+                    </el-date-picker>
+                  </el-form-item>
+                  <el-form-item label="联系电话" prop="phone" >
+                    <el-input v-model.number="forms.phone" placeholder="请输入…" maxlength="11" show-word-limit></el-input>
+                  </el-form-item>
+                </div>
+                <div class="right">
+                  <el-form-item label="性别" prop="sex" >
+                    <el-select size="medium" style="width: 100%" v-model="forms.sex" placeholder="请选择..." clearable>
+                      <el-option
+                        v-for="(item,i) in dict.getDict('sex')"
+                        :key="i"
+                        :label="item.dictName"
+                        :value="item.dictValue"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="电子邮箱" prop="mail" >
+                      <el-input v-model="forms.mail" placeholder="请输入…"></el-input>
+                  </el-form-item>
+                </div>
+              </div>
+              <template  v-if="editOne==false">
+                <div class="above">
+                  <div class="left">
+                    <ai-wrapper label-width="120px"  :columnsNumber="1"  style="margin-top: 16px;">
+                      <ai-info-item label="网格员姓名："><span >{{forms.name}}</span></ai-info-item>
+                      <ai-info-item label="选用日期："><span >{{forms.selectionDate}}</span></ai-info-item>
+                      <ai-info-item label="身份证号："><span >{{forms.idNumber}}</span></ai-info-item>
+                      <ai-info-item label="性别："><span >{{dict.getLabel('sex', forms.sex)}}</span></ai-info-item>
+                      <ai-info-item label="出生日期："><span >{{forms.birthday}}</span></ai-info-item>
+                      <ai-info-item label="电子邮箱："><span >{{forms.mail}}</span></ai-info-item>
+                    </ai-wrapper>
+                  </div>
+                  <div class="right">
+                    <ai-wrapper label-width="120px"  :columnsNumber="1"  style="margin-top: 16px;">
+                      <ai-info-item label="照片：" v-if="forms.photo">
+                        <span >
+                          <ai-uploader :instance="instance" v-model="photoList" disabled :limit="1" @change="photoChange"></ai-uploader>
+                        </span>
+                      </ai-info-item>
+                      <ai-info-item label="联系电话："><span >{{forms.phone}}</span></ai-info-item>
+                    </ai-wrapper>
+                  </div>
+                </div>
+              </template>
+            </template>
+          </ai-card>
+          <ai-card title="关联信息" >
+            <template #right  v-if="title=='网格员详情'">
+              <span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="editTwo==false" @click="editTwo=true">修改</span>
+              <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editTwo==true" @click="searchDetail(),editTwo=false">取消</span>
+              <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editTwo==true" @click="save()">保存</span>
+            </template>
+            <template slot="content">
+              <template v-if="editTwo==true">
+                <el-form-item label="责任网格" prop="girdInfoList" style="margin-top: 8px;">
+                  <el-form-item style="width: 100%" label-width="80px" :label="'网格' + (index + 1)" v-for="(item, index) in forms.girdInfoList" :key="'选项' + (index + 1)">
+                    <div class="form-flex">
+                      <el-select v-model="item.checkType" placeholder="请选择网格角色">
+                        <el-option
+                          v-for="item in options"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value">
+                        </el-option>
+                      </el-select>
+                      <el-input disabled v-model="item.girdName" :maxlength="200" size="small" placeholder="请选择责任网格">
+                        <template slot="append">
+                          <el-button size="small" @click="currIndex = index, showGrid = true">选择网格</el-button>
+                        </template>
+                      </el-input>
+                      <el-button type="danger" size="small" @click="removeGrid(index)">删除</el-button>
+                    </div>
+                  </el-form-item>
+                  <el-button type="primary" size="small" @click="addGrid">添加选项</el-button>
+                  <!-- <el-button size="small" @click="showGrid=true">选择网格</el-button> -->
+                </el-form-item>
+                <div class="above">
+                  <div class="left">
+                    <el-form-item label="是否特殊网格员" prop="isGirdMember" >
+                      <el-radio-group v-model="forms.isGirdMember">
+                        <el-radio label="0">否</el-radio>
+                        <el-radio label="1">是</el-radio>
+                      </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="政治面貌" prop="politicsStatus" >
+                      <el-select v-model="forms.politicsStatus" size="small" style="width: 100%" placeholder="请选择..." clearable>
+                        <el-option v-for="(item,i) in dict.getDict('politicsStatus')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </div>
+                  <div class="right">
+                    <el-form-item label="特殊网格员" prop="girdMemberType" v-if="forms.isGirdMember==1">
+                      <el-select v-model="forms.girdMemberType" size="small" placeholder="请选择..." clearable>
+                        <el-option v-for="(item,i) in dict.getDict('girdMemberType')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="学历" prop="education" >
+                      <el-select v-model="forms.education" style="width: 100%" size="small" placeholder="请选择..." clearable>
+                        <el-option v-for="(item,i) in dict.getDict('education')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </div>
+                </div>
+                <el-form-item label="个人简介" prop="introduction" >
+                  <el-input
+                    type="textarea"
+                    maxlength="200"
+                    show-word-limit
+                    :rows="4"
+                    placeholder="请输入内容"
+                    v-model="forms.introduction">
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="人生格言" prop="motto" >
+                  <el-input
+                    type="textarea"
+                    maxlength="200"
+                    show-word-limit
+                    :rows="4"
+                    placeholder="请输入内容"
+                    v-model="forms.motto">
+                  </el-input>
+                </el-form-item>
+              </template>
+              <template v-if="editTwo==false">
+                <ai-wrapper label-width="120px" :columnsNumber="2" style="margin-top: 16px;">
+                  <ai-info-item label="责任网格：" style="width: 100%;"><span v-html="girdInfoStr || '-'"></span></ai-info-item>
+                  <ai-info-item label="是否特殊网格员：">
+                    <span>{{ !forms.isGirdMember ? '-' : forms.isGirdMember === '0' ? '否' : '是' }}</span>
+                  </ai-info-item>
+                  <ai-info-item label="特殊网格员：" v-if="forms.isGirdMember==1"><span >{{dict.getLabel('girdMemberType', forms.girdMemberType)}}</span></ai-info-item>
+                  <ai-info-item label="政治面貌："><span >{{dict.getLabel('politicsStatus', forms.politicsStatus)}}</span></ai-info-item>
+                  <ai-info-item label="学历："><span >{{dict.getLabel('education', forms.education)}}</span></ai-info-item>
+                  <ai-info-item label="人生格言：" style="width: 100%;"><span >{{forms.motto}}</span></ai-info-item>
+                  <ai-info-item label="个人简介：" style="width: 100%;"><span >{{forms.introduction}}</span></ai-info-item>
+                </ai-wrapper>
+              </template>
+            </template>
+          </ai-card>
+        </el-form>
+        <ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true"  :destroyOnClose="true" border  width="720px">
+          <div class="grid">
+            <el-tree
+              :data="treeObj.treeList"
+              :props="treeObj.defaultProps"
+              node-key="id"
+              ref="tree"
+              :check-strictly="true"
+              show-checkbox
+              :default-checked-keys="currCheckedKeys"
+              default-expand-all
+              @check="onCheckChange">
+            </el-tree>
+          </div>
+          <div class="dialog-footer" slot="footer" >
+            <el-button  size="medium" @click="showGrid=false">取消</el-button>
+            <el-button  type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
+          </div>
+        </ai-dialog>
+      </template>
+      <template #footer v-if="title=='添加网格员'">
+        <el-button @click="cancel(false)" class="delete-btn footer-btn" >取 消</el-button>
+        <el-button type="primary" @click="save()"  class="footer-btn">提 交</el-button>
+      </template>
+    </ai-detail>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "add",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    params: Object,
+  },
+  data() {
+    return {
+      users: [],
+      currIndex: 0,
+      forms: {
+        birthday: "",
+        education: "",
+        girdId: "",
+        girdInfoList: [],
+        girdMemberType: "",
+        id: "",
+        wxUserId: '',
+        introduction: "",
+        isGirdMember: "",
+        mail: "",
+        motto: "",
+        name: "",
+        phone: "",
+        photo: "",
+        politicsStatus: "",
+        selectionDate: "",
+        sex: "",
+        userId: "",
+      },
+      options: [{
+        value: '2',
+        label: '网格长'
+      }, {
+        value: '1',
+        label: '网格员'
+      }],
+      showGrid: false,
+      treeObj: {
+        treeList: [],
+        defaultProps: {
+          children: "girdList",
+          label: "girdName",
+        },
+        checkedKeys: [],
+      },
+      girdInfoStr: '',
+      photoList: [],
+      title: "添加网格员",
+      editOne: false,
+      editTwo: false,
+    };
+  },
+  created() {
+    this.beforeSelectTree()
+    if (this.params.id) {
+      this.searchDetail();
+      this.title = "网格员详情";
+      this.editOne = false;
+      this.editTwo = false;
+    } else {
+      this.title = "添加网格员";
+      this.editOne = true;
+      this.editTwo = true;
+    }
+  },
+  computed: {
+    currCheckedKeys () {
+      if (this.forms && this.forms.girdInfoList && this.forms.girdInfoList[this.currIndex] && this.forms.girdInfoList[this.currIndex].id) {
+        return [this.forms.girdInfoList[this.currIndex].id]
+      }
+
+      return []
+    },
+    formRules() {
+      let phonePass = (rule, value, callback) => {
+        let reg = /^(?:(?:\+|00)86)?1\d{10}$/;
+        if (value) {
+          if (reg.test(value)) {
+            callback();
+          } else {
+            callback(new Error("联系电话格式错误"));
+          }
+        } else {
+          callback(new Error("请输入联系电话"));
+        }
+      };
+      return {
+        name: [
+          { required: true, message: "请输入网格员姓名", trigger: "change" },
+        ],
+        selectionDate: [
+          { required: true, message: "请选择选用日期", trigger: "change" },
+        ],
+        phone: [{ required: true, validator: phonePass, trigger: "blur" }],
+        girdInfoList: [
+          { required: true, message: "请选择责任网络", trigger: "change" },
+        ],
+        mail: [
+          {
+            type: "email",
+            message: "请输入正确的邮箱地址",
+            trigger: ["blur", "change"],
+          },
+        ]
+      };
+    },
+  },
+  methods: {
+    cancel (isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh,
+      })
+    },
+
+    onCheckChange (e) {
+      this.$nextTick(() => {
+        this.$refs.tree.getCheckedKeys().forEach(v => {
+          this.$refs.tree.setChecked(v, false)
+        })
+        this.$refs.tree.setChecked(e.id, true)
+      })
+    },
+
+    removeGrid (index) {
+      this.forms.girdInfoList.splice(index, 1)
+    },
+
+    addGrid () {
+      this.forms.girdInfoList.push({
+        id: '',
+        girdName: '',
+        checkType: ''
+      })
+    },
+    photoChange(val) {
+      this.forms.photo = val[0].url;
+    },
+    getSelectPerson(val) {
+      this.forms.name = val[0].name;
+      this.forms.phone = val[0].phone;
+      this.forms.userId = val[0].sysUserId
+      this.forms.wxUserId = val[0].id
+    },
+    getCheckedTree() {
+      if (!this.$refs.tree.getCheckedNodes().length) {
+        return this.$message.error('请选择网格')
+      }
+
+      if (this.$refs.tree.getCheckedNodes().length > 1) {
+        return this.$message.error('不支持多选')
+      }
+      this.$set(this.forms.girdInfoList, this.currIndex, {
+        ...this.$refs.tree.getCheckedNodes()[0],
+        checkType: this.forms.girdInfoList[this.currIndex].checkType
+      })
+      this.showGrid = false;
+    },
+    handleClose(tag) {
+      this.forms.girdInfoList.splice(this.forms.girdInfoList.indexOf(tag), 1);
+    },
+    beforeSelectTree() {
+      this.treeObj.checkedKeys = [];
+      this.instance.post(`/app/appgirdinfo/listAll`, null, null).then((res) => {
+        if (res.code == 0) {
+          this.treeObj.treeList = res.data;
+          this.forms.girdInfoList.map((e) => {
+            this.treeObj.checkedKeys.push(e.id);
+          });
+        }
+      });
+    },
+    save() {
+      this.$refs["rules"].validate((valid) => {
+        if (valid) {
+          for (let i = 0; i < this.forms.girdInfoList.length; i++) {
+            const currInfo = this.forms.girdInfoList[i]
+            const arr = JSON.parse(JSON.stringify(this.forms.girdInfoList))
+            arr.splice(i, 1)
+            const sameInfo = arr.filter(v => v.id === currInfo.id)
+            if (!currInfo.checkType) {
+              return this.$message.error('请选择网格员类型')
+            }
+
+            if (!currInfo.id) {
+              return this.$message.error('请选择网格')
+            }
+
+            if (currInfo.checkType === '1' && currInfo.girdLevel !== '2') {
+              return this.$message.error(`一级、二级网格不能添加网格员`)
+            }
+
+            if (sameInfo.length) {
+              return this.$message.error('不能选择同一网格重复绑定')
+            }
+          }
+
+          this.instance.post(`/app/appgirdmemberinfo/addOrUpdate`,{
+            ...this.forms,
+            girdInfoListStr: this.forms.girdInfoList.map(v => v.girdName).join(',')
+          }).then((res) => {
+            if (res.code == 0) {
+              if (this.title == "添加网格员") {
+                this.cancel(true)
+              } else {
+                this.editOne = false
+                this.editTwo = false
+                this.searchDetail()
+              }
+            }
+          });
+        } else {
+          return false
+        }
+      });
+    },
+    searchDetail() {
+      this.instance
+        .post(`/app/appgirdmemberinfo/queryDetailById`, null, {
+          params: { id: this.params.id },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.forms = {
+              ...res.data,
+              girdInfoList: res.data.girdInfoList || []
+            };
+            this.users = [{
+              name: res.data.name,
+              phone: res.data.phone,
+              userId: res.data.id,
+              id: res.data.wxUserId
+            }]
+            this.girdInfoStr = ''
+            this.photoList = [{ url: this.forms.photo }];
+            if (res.data.girdInfoList) {
+              res.data.girdInfoList.forEach((e) => {
+                this.girdInfoStr = this.girdInfoStr + `${e.checkType === '1' ? '网格员' : '网格长'}-${e.girdName}&emsp;`
+              })
+            }
+          }
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.add {
+  height: 100%;
+
+    .form-flex {
+      display: flex;
+      align-items: center;
+
+      & > .el-button {
+        margin-left: 20px;
+      }
+
+      .el-input {
+        width: 300px;
+        margin-left: 20px;
+      }
+
+      ::v-deep .el-form-item__content {
+        margin-left: 0!important;
+      }
+    }
+  .ai-detail__title {
+    background-color: #fff;
+  }
+  .ai-detail__content {
+    .ai-detail__content--wrapper {
+      .el-form {
+        // background-color: #fff;
+        // padding: 0 60px;
+        .flex {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          .el-form-item {
+            width: 48%;
+          }
+          .buildingTypes {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+  ::v-deep .el-tag {
+    margin-right: 8px;
+    color: #333333;
+  }
+  .footer-btn {
+    width: 92px;
+  }
+  .above{
+    display: flex;
+    .left, .right{
+      flex: 1;
+    }
+  }
+}
+</style>
diff --git a/project/sass/apps/AppGridMember copy/components/list.vue b/project/sass/apps/AppGridMember copy/components/list.vue
new file mode 100644
index 00000000..2d3878af
--- /dev/null
+++ b/project/sass/apps/AppGridMember copy/components/list.vue	
@@ -0,0 +1,199 @@
+<template>
+  <ai-list class="list">
+    <template slot="title">
+      <ai-title title="网格员管理" :isShowBottomBorder="true"></ai-title>
+    </template>
+    <template slot="content">
+      <ai-search-bar bottomBorder>
+        <template slot="left">
+          <el-date-picker
+            v-model="searchObj.selectionDate"
+            type="date"
+            @change="(page.current = 1), getList()"
+            value-format="yyyy-MM-dd"
+            size="small"
+            placeholder="选用时间">
+          </el-date-picker>
+        </template>
+        <template slot="right">
+          <el-input
+            v-model="searchObj.name"
+            size="small"
+            placeholder="网格员/责任网格"
+            @keyup.enter.native="(page.current = 1), getList()"
+            clearable
+            @clear="(searchObj.name = '', page.current = 1), getList()"
+            suffix-icon="iconfont iconSearch" />
+        </template>
+      </ai-search-bar>
+      <ai-search-bar style="padding: 16px 0 0">
+        <template slot="left">
+          <el-button
+            icon="iconfont iconAdd"
+            type="primary"
+            size="small"
+            @click="add('')"
+            >添加</el-button
+          >
+          <el-button
+            icon="iconfont iconDelete"
+            @click="deleteById(ids.join(','))"
+            :disabled="!Boolean(ids.length)"
+            >删除</el-button
+          >
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="page.total"
+        ref="aitableex"
+        :current.sync="page.current"
+        :size.sync="page.size"
+        @selection-change="(v) => (ids = v.map((e) => e.id))"
+        @getList="getList()">
+        <el-table-column label="操作" slot="options" align="center" fixed="right" width="170">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toFamily(row.id)">责任家庭</el-button>
+              <el-button type="text" @click="add(row.id)">查看</el-button>
+              <el-button type="text" @click="deleteById(row.id)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+export default {
+  name: "list",
+  label: "网格员管理",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+  },
+  data() {
+    return {
+      searchObj: {
+        name: "",
+        selectionDate: "",
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0,
+      },
+      goAdd: false,
+      tableData: [],
+      fileList: [],
+      ids: [],
+      detail: {},
+    };
+  },
+  created() {
+    this.dict.load("sex", "girdMemberType", "politicsStatus", "education");
+    this.getList();
+  },
+  computed: {
+    colConfigs() {
+      let _ = this;
+      return [
+        {
+          type: "selection",
+        },
+        {
+          prop: "name",
+          label: "网格员姓名",
+        },
+        {
+          prop: "girdInfoListStr",
+          align: "center",
+          label: "责任网格",
+        },
+        {
+          prop: "phone",
+          align: "center",
+          label: "联系电话",
+        },
+        {
+          prop: "selectionDate",
+          align: "center",
+          label: "选用时间",
+        },
+      ];
+    },
+  },
+  methods: {
+    getList() {
+      this.instance
+        .post("/app/appgirdmemberinfo/list", null, {
+          params: {
+            ...this.searchObj,
+            ...this.page,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.tableData = res.data.records;
+            this.page.total = res.data.total;
+          }
+        });
+    },
+    deleteById(ids) {
+      ids &&
+        this.$confirm("是否要删除该网格员？", {
+          type: "error",
+        })
+          .then(() => {
+            this.instance
+              .post("/app/appgirdmemberinfo/delete", null, {
+                params: { ids },
+              })
+              .then((res) => {
+                if (res?.code == 0) {
+                  this.$message.success("删除成功!");
+                  this.getList();
+                }
+              });
+          })
+          .catch(() => {});
+    },
+    add(id) {
+      this.$emit('change', {
+        type: 'Add',
+        params: {
+          id: id || ''
+        }
+      })
+    },
+
+    toFamily (id) {
+      this.$emit('change', {
+        type: 'Family',
+        params: {
+          id
+        }
+      })
+    },
+
+    handleSelectionChange(val) {
+      this.ids = [];
+      val.map((e) => {
+        this.ids.push(e.id);
+      });
+    },
+    resetSearch() {
+      Object.keys(this.searchObj).map((e) => {
+        this.searchObj[e] = "";
+      });
+      this.getList();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/project/sass/apps/AppGridMember/AppGridMember.vue b/project/sass/apps/AppGridMember/AppGridMember.vue
new file mode 100644
index 00000000..fa9f5d03
--- /dev/null
+++ b/project/sass/apps/AppGridMember/AppGridMember.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="AppGridMember">
+    <keep-alive :include="['List']">
+      <component
+        ref="component"
+        :is="component"
+        @change="onChange"
+        :params="params"
+        :instance="instance"
+        :dict="dict"
+      ></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import List from "./components/list";
+import Add from "./components/add";
+import Family from "./components/Family";
+
+export default {
+  name: "AppGridMember",
+  label: "网格管理员",
+
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+
+  data() {
+    return {
+      component: "List",
+      params: {},
+      include: [],
+    };
+  },
+
+  components: {
+    Add,
+    List,
+    Family
+  },
+
+  mounted() {},
+
+  methods: {
+    onChange(data) {
+      if (data.type === "Add") {
+        this.component = "Add";
+        this.params = data.params;
+      }
+
+      if (data.type === "Family") {
+        this.component = "Family"
+        this.params = data.params
+      }
+
+      if (data.type === "list") {
+        this.component = "List";
+        this.params = data.params;
+
+        this.$nextTick(() => {
+          if (data.isRefresh) {
+            this.$refs.component.getList();
+          }
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.AppGridMember {
+  height: 100%;
+  background: #f3f6f9;
+  overflow: auto;
+}
+</style>
diff --git a/project/sass/apps/AppGridMember/components/Family.vue b/project/sass/apps/AppGridMember/components/Family.vue
new file mode 100644
index 00000000..98298bed
--- /dev/null
+++ b/project/sass/apps/AppGridMember/components/Family.vue
@@ -0,0 +1,499 @@
+<template>
+  <ai-list class="Family">
+    <template slot="title">
+      <ai-title title="责任家庭" isShowBack isShowBottomBorder @onBackClick="onBack"></ai-title>
+    </template>
+    <template slot="content">
+      <ai-search-bar class="search-bar">
+        <template #left>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="isShow = true">添加</el-button>
+          <el-button size="small" :disabled="!ids.length" icon="iconfont iconDelete" @click="removeAll">批量删除</el-button>
+          <el-select size="small" style="width: 200px;" v-model="search.girdId" placeholder="所属网格" clearable @change="getListInit()">
+            <el-option
+              v-for="(item,i) in girdList"
+              :key="i"
+              :label="item.girdName"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </template>
+        <template #right>
+          <el-input
+            v-model="search.name"
+            class="search-input"
+            size="small"
+            @keyup.enter.native="search.current = 1, getList()"
+            placeholder="姓名/身份证/联系方式"
+            clearable
+            @clear="search.current = 1, search.name = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        style="margin-top: 6px;"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @handleSelectionChange="handleSelectionChange"
+        @getList="getList">
+        <el-table-column slot="options" width="100px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="remove(row.gmrId)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <ai-dialog
+        :visible.sync="isShow"
+        width="890px"
+        @close="closeDialog"
+        title="添加户主"
+        @onConfirm="onConfirm">
+        <ai-area-select clearable always-show :instance="instance"  v-model="areaId" :disabled-level="disabledLevel" @change="search.current = 1, getUserList()"></ai-area-select>
+        <span style="margin-top:16px;"><span style="color:#f46;margin-right:4px;">*</span>网格：</span>
+        <el-select size="small" style="width: 280px;margin-top:16px;" v-model="girdId" placeholder="请选择网格" clearable>
+          <el-option
+            v-for="(item,i) in girdList"
+            :key="i"
+            :label="item.girdName"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+        <div class="AiWechatSelecter-container">
+          <div class="AiWechatSelecter-container__left" v-loading="isLoading">
+            <div class="AiWechatSelecter-header">
+              <div class="AiWechatSelecter-header__left">
+                <h2>户主信息列表</h2>
+              </div>
+              <el-input
+                class="search-input"
+                size="mini"
+                placeholder="请输入姓名/身份证号"
+                v-model="name"
+                clearable
+                @keyup.enter.native="getUserList()"
+                @clear="name = '', getUserList()"
+                suffix-icon="iconfont iconSearch">
+              </el-input>
+            </div>
+            <el-scrollbar class="AiWechatSelecter-list">
+              <el-checkbox-group v-model="chooseUser">
+                <el-checkbox
+                  :label="`${item.name}~${item.id}`"
+                  v-for="(item, index) in userList"
+                  :key="index">
+                  {{ item.name }}-{{ item.idNumber }}
+                </el-checkbox>
+              </el-checkbox-group>
+              <AiEmpty v-if="!this.userList.length"></AiEmpty>
+            </el-scrollbar>
+          </div>
+          <div class="AiWechatSelecter-container__right">
+            <div class="AiWechatSelecter-header AiWechatSelecter-header__right">
+              <h2>已选择</h2>
+              <el-button size="mini" icon="el-icon-delete" @click="clearAll">清空</el-button>
+            </div>
+            <el-scrollbar class="AiWechatSelecter-list">
+              <div class="tags-wrapper">
+                <el-tag
+                  v-for="(item, index) in chooseUser"
+                  :key="index"
+                  closable
+                  @close="del(item)"
+                  size="small"
+                  type="info">
+                  {{ item.split('~')[0] }}
+                </el-tag>
+              </div>
+            </el-scrollbar>
+          </div>
+        </div>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    name: 'Family',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data() {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          name: '',
+          girdId: ''
+        },
+        isLoading: false,
+        form: {
+
+        },
+        userList: [],
+        name: '',
+        chooseUser: [],
+        isShow: false,
+        total: 10,
+        colConfigs: [
+          { type: 'selection', label: '' },
+          { prop: 'name',  label: '户主姓名', align: 'left', width: '200px' },
+          { prop: 'idNumber', label: '身份证号', align: 'center' },
+          { prop: 'phone', label: '联系方式', align: 'center' },
+          { prop: 'girdName', label: '所属网格', align: 'center' },
+          { prop: 'createTime', label: '添加时间', align: 'center' },
+          { slot: 'options', label: '操作', align: 'center' }
+        ],
+        tableData: [],
+        areaId: '',
+        ids: [],
+        disabledLevel: 0,
+        girdList: [],
+        girdId: '',
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    created() {
+      this.areaId = this.user.info.areaId
+      this.disabledLevel = this.user.info.areaList.length
+      this.dict.load('epidemicDangerousAreaLevel').then(() => {
+        this.getGirdList()
+        this.getList()
+        this.getUserList()
+      })
+    },
+
+    methods: {
+      getGirdList() {
+        this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2?girdMemberId=${this.params.id}`).then(res => {
+          if (res.code == 0) {
+            this.girdList = res.data
+          }
+        })
+      },
+      getListInit() {
+        this.search.current = 1
+        this.getList()
+      },
+      getList () {
+        this.instance.post(`/app/appgirdmemberresident/listByGirdMember`, null, {
+          params: {
+            ...this.search,
+            girdMemberId: this.params.id,
+            areaId: this.areaId
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+    removeAll() {
+        if (!this.ids) {
+          return this.$message.error('请选择户主')
+        }
+        this.remove(this.ids.join(','))
+      },
+      handleSelectionChange(e) {
+        this.ids = e.map(v => v.gmrId)
+      },
+
+      clearAll () {
+        this.chooseUser = []
+      },
+
+      onConfirm () {
+        if(!this.girdId) {
+          return this.$message.error('请选择网格')
+        }
+
+        if (!this.chooseUser.length) {
+          return this.$message.error('请选择户主')
+        }
+
+        const residentList = this.chooseUser.map(v => {
+          return {
+            girdMemberId: this.params.id,
+            name: v.split('~')[0],
+            residentId: v.split('~')[1],
+            girdId: this.girdId
+          }
+        })
+        this.instance.post(`/app/appgirdmemberresident/add`, {
+          residentList
+        }).then(res => {
+          if (res.code == 0) {
+            this.current = 1
+            this.getList()
+            this.$message.success('添加成功')
+            this.closeDialog()
+          }
+        })
+      },
+      closeDialog() {
+        this.isShow = false
+        this.chooseUser = []
+        this.girdId = ''
+        this.name = ''
+        this.areaId = this.user.info.areaId
+        this.getUserList()
+      },
+
+      del (e) {
+        this.chooseUser.splice(this.chooseUser.indexOf(e), 1)
+      },
+
+      getUserList () {
+        this.isLoading = true
+        this.instance.post(`/app/appresident/list`, null, {
+          params: {
+            current: 1,
+            size: 200,
+            con: this.name,
+            householdName: 1,
+            areaId: this.areaId,
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.userList = res.data.records
+          }
+
+          this.isLoading = false
+        })
+      },
+
+      onBack () {
+        this.$emit('change', {
+          type: 'list'
+        })
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appgirdmemberresident/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .Family {
+    .AiWechatSelecter-container {
+      display: flex;
+      height: 380px;
+      margin-top: 20px;
+
+      ::v-deep {
+        .el-icon-circle-close {
+          display: inline-block!important;
+        }
+      }
+
+      .tree-container {
+        & > span {
+          display: block;
+          margin-bottom: 4px;
+        }
+
+        .tree-user__item {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+        img {
+          width: 27px;
+          height: 27px;
+          margin-right: 10px;
+        }
+      }
+
+      ::v-deep .el-tree {
+        background: transparent;
+
+        .el-tree-node {
+          margin-bottom: 8px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        .el-tree-node__content {
+          height: auto;
+          margin-top: 2px;
+          // align-items: inherit;
+        }
+        
+        .el-tree-node__expand-icon {
+          height: 24px;
+        }
+      }
+
+      .mask-btn__wrapper {
+        position: relative;
+      }
+
+      .mask-btn {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+      }
+
+      .userlist-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+        padding: 0 17px;
+        cursor: pointer;
+        user-select: none;
+
+        ::v-deep .el-checkbox__label {
+          display: none;
+        }
+
+        .userlist-item__left {
+          display: flex;
+          align-items: center;
+
+          span {
+            color: #222222;
+            font-size: 14px;
+          }
+
+          img {
+            width: 40px;
+            height: 40px;
+            margin-right: 8px;
+          }
+        }
+      }
+
+      & > div {
+        width: 280px;
+        background: #FCFCFC;
+        border: 1px solid #D0D4DC;
+      }
+
+      .AiWechatSelecter-list {
+        height: calc(100% - 40px);
+        padding: 8px 0;
+
+        ::v-deep .el-scrollbar__wrap {
+          margin-bottom: 0!important;
+          overflow-x: hidden;
+        }
+
+        ::v-deep .el-checkbox-group {
+          padding: 0 8px;
+
+          .el-checkbox {
+            display: block;
+            margin-right: 0;
+          }
+        }
+      }
+
+      .AiWechatSelecter-container__left {
+        flex: 1;
+      }
+
+      .AiWechatSelecter-container__right {
+        flex: 1;
+        margin-left: 20px;
+
+        .AiWechatSelecter-list {
+          .tags-wrapper {
+            padding: 0 8px;
+          }
+          .el-tag {
+            margin: 0 8px 8px 0px;
+            color: #222222;
+            font-size: 14px;
+          }
+        }
+      }
+
+      .AiWechatSelecter-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 40px;
+        padding: 0 8px 0 0;
+        border-bottom: 1px solid #D0D4DC;
+        background: #F5F7FA;
+
+        .AiWechatSelecter-header__left {
+          display: flex;
+          align-items: center;
+          padding: 0 8px;
+
+          h2 {
+            height: 100%;
+            line-height: 40px;
+            color: #222222;
+            font-size: 14px;
+            text-align: center;
+            cursor: pointer;
+            border-bottom: 2px solid transparent;
+
+            &.active {
+              color: #2266FF;
+              border-color: #2266FF;
+            }
+          }
+        }
+
+        .el-button {
+          height: 28px;
+          padding: 7px 5px;
+        }
+
+        .el-input {
+          width: 160px;
+        }
+      }
+
+      .AiWechatSelecter-header__right {
+        padding: 0 8px;
+
+        h2 {
+          color: #222222;
+          font-size: 14px;
+          text-align: center;
+        }
+      }
+    }
+  }
+</style>
diff --git a/project/sass/apps/AppGridMember/components/add.vue b/project/sass/apps/AppGridMember/components/add.vue
new file mode 100644
index 00000000..d3d6fd90
--- /dev/null
+++ b/project/sass/apps/AppGridMember/components/add.vue
@@ -0,0 +1,543 @@
+<template>
+  <section style="height: 100%">
+    <ai-detail class="add">
+      <template #title>
+        <ai-title :title="title" :isShowBack="true" :isShowBottomBorder="true" @onBackClick="cancel(false)"></ai-title>
+      </template>
+      <template #content>
+        <el-form
+          ref="rules"
+          :model="forms"
+          :rules="formRules"
+          size="small"
+          label-suffix="："
+          label-width="136px">
+          <ai-card title="基础信息" >
+            <template #right  v-if="title=='网格员详情'">
+              <span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="editOne==false" @click="editOne=true">修改</span>
+              <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editOne==true" @click="searchDetail(),editOne=false">取消</span>
+              <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editOne==true" @click="save()">保存</span>
+            </template>
+            <template slot="content">
+              <div class="above" v-if="editOne==true">
+                <div class="left">
+                  <el-form-item label="网格员姓名" prop="name" >
+                    <el-input v-model="forms.name" placeholder="请选择网格员" disabled>
+                      <template #append>
+                        <ai-wechat-selecter :isMultiple="false" refs="addTags" :instance="instance" v-model="users" @change="getSelectPerson">
+                          <el-button size="small" type="primary"><span style="color: #fff">选择成员</span></el-button>
+                        </ai-wechat-selecter>
+                      </template>
+                    </el-input>
+                  </el-form-item>
+                  <el-form-item label="选用日期" prop="selectionDate" >
+                    <el-date-picker
+                      v-model="forms.selectionDate"
+                      type="date"
+                      style="width: 100%"
+                      value-format="yyyy-MM-dd"
+                      size="medium"
+                      placeholder="选择日期">
+                    </el-date-picker>
+                  </el-form-item>
+                  <el-form-item label="身份证号" prop="idNumber" >
+                      <el-input v-model="forms.idNumber" placeholder="请输入…" maxlength="18" show-word-limit></el-input>
+                  </el-form-item>
+                </div>
+                <div class="right">
+                  <el-form-item label="照片" prop="photo">
+                    <!-- <ai-uploader :instance="instance" v-model="photoList" :limit="1" @change="photoChange"></ai-uploader> -->
+                    <ai-avatar :instance="instance"  v-model="forms.photo"/>
+                  </el-form-item>
+                </div>
+              </div>
+              <div class="above" v-if="editOne==true">
+                <div class="left">
+                  <el-form-item label="出生日期" prop="birthday" >
+                    <el-date-picker
+                        v-model="forms.birthday"
+                        type="date"
+                        style="width: 100%"
+                        value-format="yyyy-MM-dd"
+                        size="medium"
+                        placeholder="选择日期">
+                    </el-date-picker>
+                  </el-form-item>
+                  <el-form-item label="联系电话" prop="phone" >
+                    <el-input v-model.number="forms.phone" placeholder="请输入…" maxlength="11" show-word-limit></el-input>
+                  </el-form-item>
+                </div>
+                <div class="right">
+                  <el-form-item label="性别" prop="sex" >
+                    <el-select size="medium" style="width: 100%" v-model="forms.sex" placeholder="请选择..." clearable>
+                      <el-option
+                        v-for="(item,i) in dict.getDict('sex')"
+                        :key="i"
+                        :label="item.dictName"
+                        :value="item.dictValue"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="电子邮箱" prop="mail" >
+                      <el-input v-model="forms.mail" placeholder="请输入…"></el-input>
+                  </el-form-item>
+                </div>
+              </div>
+              <template  v-if="editOne==false">
+                <div class="above">
+                  <div class="left">
+                    <ai-wrapper label-width="120px"  :columnsNumber="1"  style="margin-top: 16px;">
+                      <ai-info-item label="网格员姓名："><span >{{forms.name}}</span></ai-info-item>
+                      <ai-info-item label="选用日期："><span >{{forms.selectionDate}}</span></ai-info-item>
+                      <ai-info-item label="身份证号："><span >{{forms.idNumber}}</span></ai-info-item>
+                      <ai-info-item label="性别："><span >{{dict.getLabel('sex', forms.sex)}}</span></ai-info-item>
+                      <ai-info-item label="出生日期："><span >{{forms.birthday}}</span></ai-info-item>
+                      <ai-info-item label="电子邮箱："><span >{{forms.mail}}</span></ai-info-item>
+                    </ai-wrapper>
+                  </div>
+                  <div class="right">
+                    <ai-wrapper label-width="120px"  :columnsNumber="1"  style="margin-top: 16px;">
+                      <ai-info-item label="照片：" v-if="forms.photo">
+                        <span >
+                          <ai-uploader :instance="instance" v-model="photoList" disabled :limit="1" @change="photoChange"></ai-uploader>
+                        </span>
+                      </ai-info-item>
+                      <ai-info-item label="联系电话："><span >{{forms.phone}}</span></ai-info-item>
+                    </ai-wrapper>
+                  </div>
+                </div>
+              </template>
+            </template>
+          </ai-card>
+          <ai-card title="关联信息" >
+            <template #right  v-if="title=='网格员详情'">
+              <span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="editTwo==false" @click="editTwo=true">修改</span>
+              <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editTwo==true" @click="searchDetail(),editTwo=false">取消</span>
+              <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editTwo==true" @click="save()">保存</span>
+            </template>
+            <template slot="content">
+              <template v-if="editTwo==true">
+                <el-form-item label="责任网格" prop="girdInfoList" style="margin-top: 8px;">
+                  <el-form-item style="width: 100%" label-width="80px" :label="'网格' + (index + 1)" v-for="(item, index) in forms.girdInfoList" :key="'选项' + (index + 1)">
+                    <div class="form-flex">
+                      <el-select v-model="item.checkType" placeholder="请选择网格角色">
+                        <el-option
+                          v-for="item in options"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value">
+                        </el-option>
+                      </el-select>
+                      <el-input disabled v-model="item.girdName" :maxlength="200" size="small" placeholder="请选择责任网格">
+                        <template slot="append">
+                          <el-button size="small" @click="currIndex = index, showGrid = true">选择网格</el-button>
+                        </template>
+                      </el-input>
+                      <el-button type="danger" size="small" @click="removeGrid(index)">删除</el-button>
+                    </div>
+                  </el-form-item>
+                  <el-button type="primary" size="small" @click="addGrid">添加选项</el-button>
+                  <!-- <el-button size="small" @click="showGrid=true">选择网格</el-button> -->
+                </el-form-item>
+                <div class="above">
+                  <div class="left">
+                    <el-form-item label="是否特殊网格员" prop="isGirdMember" >
+                      <el-radio-group v-model="forms.isGirdMember">
+                        <el-radio label="0">否</el-radio>
+                        <el-radio label="1">是</el-radio>
+                      </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="政治面貌" prop="politicsStatus" >
+                      <el-select v-model="forms.politicsStatus" size="small" style="width: 100%" placeholder="请选择..." clearable>
+                        <el-option v-for="(item,i) in dict.getDict('politicsStatus')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </div>
+                  <div class="right">
+                    <el-form-item label="特殊网格员" prop="girdMemberType" v-if="forms.isGirdMember==1">
+                      <el-select v-model="forms.girdMemberType" size="small" placeholder="请选择..." clearable>
+                        <el-option v-for="(item,i) in dict.getDict('girdMemberType')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="学历" prop="education" >
+                      <el-select v-model="forms.education" style="width: 100%" size="small" placeholder="请选择..." clearable>
+                        <el-option v-for="(item,i) in dict.getDict('education')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </div>
+                </div>
+                <el-form-item label="个人简介" prop="introduction" >
+                  <el-input
+                    type="textarea"
+                    maxlength="200"
+                    show-word-limit
+                    :rows="4"
+                    placeholder="请输入内容"
+                    v-model="forms.introduction">
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="人生格言" prop="motto" >
+                  <el-input
+                    type="textarea"
+                    maxlength="200"
+                    show-word-limit
+                    :rows="4"
+                    placeholder="请输入内容"
+                    v-model="forms.motto">
+                  </el-input>
+                </el-form-item>
+              </template>
+              <template v-if="editTwo==false">
+                <ai-wrapper label-width="120px" :columnsNumber="2" style="margin-top: 16px;">
+                  <ai-info-item label="责任网格：" style="width: 100%;"><span v-html="girdInfoStr || '-'"></span></ai-info-item>
+                  <ai-info-item label="是否特殊网格员：">
+                    <span>{{ !forms.isGirdMember ? '-' : forms.isGirdMember === '0' ? '否' : '是' }}</span>
+                  </ai-info-item>
+                  <ai-info-item label="特殊网格员：" v-if="forms.isGirdMember==1"><span >{{dict.getLabel('girdMemberType', forms.girdMemberType)}}</span></ai-info-item>
+                  <ai-info-item label="政治面貌："><span >{{dict.getLabel('politicsStatus', forms.politicsStatus)}}</span></ai-info-item>
+                  <ai-info-item label="学历："><span >{{dict.getLabel('education', forms.education)}}</span></ai-info-item>
+                  <ai-info-item label="人生格言：" style="width: 100%;"><span >{{forms.motto}}</span></ai-info-item>
+                  <ai-info-item label="个人简介：" style="width: 100%;"><span >{{forms.introduction}}</span></ai-info-item>
+                </ai-wrapper>
+              </template>
+            </template>
+          </ai-card>
+        </el-form>
+        <ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true"  :destroyOnClose="true" border  width="720px">
+          <div class="grid">
+            <el-tree
+              :data="treeObj.treeList"
+              :props="treeObj.defaultProps"
+              node-key="id"
+              ref="tree"
+              :check-strictly="true"
+              show-checkbox
+              :default-checked-keys="currCheckedKeys"
+              default-expand-all
+              @check="onCheckChange">
+            </el-tree>
+          </div>
+          <div class="dialog-footer" slot="footer" >
+            <el-button  size="medium" @click="showGrid=false">取消</el-button>
+            <el-button  type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
+          </div>
+        </ai-dialog>
+      </template>
+      <template #footer v-if="title=='添加网格员'">
+        <el-button @click="cancel(false)" class="delete-btn footer-btn" >取 消</el-button>
+        <el-button type="primary" @click="save()"  class="footer-btn">提 交</el-button>
+      </template>
+    </ai-detail>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "add",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    params: Object,
+  },
+  data() {
+    return {
+      users: [],
+      currIndex: 0,
+      forms: {
+        birthday: "",
+        education: "",
+        girdId: "",
+        girdInfoList: [],
+        girdMemberType: "",
+        id: "",
+        wxUserId: '',
+        introduction: "",
+        isGirdMember: "",
+        mail: "",
+        motto: "",
+        name: "",
+        phone: "",
+        photo: "",
+        politicsStatus: "",
+        selectionDate: "",
+        sex: "",
+        userId: "",
+      },
+      options: [{
+        value: '2',
+        label: '网格长'
+      }, {
+        value: '1',
+        label: '网格员'
+      }],
+      showGrid: false,
+      treeObj: {
+        treeList: [],
+        defaultProps: {
+          children: "girdList",
+          label: "girdName",
+        },
+        checkedKeys: [],
+      },
+      girdInfoStr: '',
+      photoList: [],
+      title: "添加网格员",
+      editOne: false,
+      editTwo: false,
+    };
+  },
+  created() {
+    this.beforeSelectTree()
+    if (this.params.id) {
+      this.searchDetail();
+      this.title = "网格员详情";
+      this.editOne = false;
+      this.editTwo = false;
+    } else {
+      this.title = "添加网格员";
+      this.editOne = true;
+      this.editTwo = true;
+    }
+  },
+  computed: {
+    currCheckedKeys () {
+      if (this.forms && this.forms.girdInfoList && this.forms.girdInfoList[this.currIndex] && this.forms.girdInfoList[this.currIndex].id) {
+        return [this.forms.girdInfoList[this.currIndex].id]
+      }
+
+      return []
+    },
+    formRules() {
+      let phonePass = (rule, value, callback) => {
+        let reg = /^(?:(?:\+|00)86)?1\d{10}$/;
+        if (value) {
+          if (reg.test(value)) {
+            callback();
+          } else {
+            callback(new Error("联系电话格式错误"));
+          }
+        } else {
+          callback(new Error("请输入联系电话"));
+        }
+      };
+      return {
+        name: [
+          { required: true, message: "请输入网格员姓名", trigger: "change" },
+        ],
+        selectionDate: [
+          { required: true, message: "请选择选用日期", trigger: "change" },
+        ],
+        phone: [{ required: true, validator: phonePass, trigger: "blur" }],
+        girdInfoList: [
+          { required: true, message: "请选择责任网络", trigger: "change" },
+        ],
+        mail: [
+          {
+            type: "email",
+            message: "请输入正确的邮箱地址",
+            trigger: ["blur", "change"],
+          },
+        ]
+      };
+    },
+  },
+  methods: {
+    cancel (isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh,
+      })
+    },
+
+    onCheckChange (e) {
+      this.$nextTick(() => {
+        this.$refs.tree.getCheckedKeys().forEach(v => {
+          this.$refs.tree.setChecked(v, false)
+        })
+        this.$refs.tree.setChecked(e.id, true)
+      })
+    },
+
+    removeGrid (index) {
+      this.forms.girdInfoList.splice(index, 1)
+    },
+
+    addGrid () {
+      this.forms.girdInfoList.push({
+        id: '',
+        girdName: '',
+        checkType: ''
+      })
+    },
+    photoChange(val) {
+      this.forms.photo = val[0].url;
+    },
+    getSelectPerson(val) {
+      this.forms.name = val[0].name;
+      this.forms.phone = val[0].phone;
+      this.forms.userId = val[0].sysUserId
+      this.forms.wxUserId = val[0].id
+    },
+    getCheckedTree() {
+      if (!this.$refs.tree.getCheckedNodes().length) {
+        return this.$message.error('请选择网格')
+      }
+
+      if (this.$refs.tree.getCheckedNodes().length > 1) {
+        return this.$message.error('不支持多选')
+      }
+      this.$set(this.forms.girdInfoList, this.currIndex, {
+        ...this.$refs.tree.getCheckedNodes()[0],
+        checkType: this.forms.girdInfoList[this.currIndex].checkType
+      })
+      this.showGrid = false;
+    },
+    handleClose(tag) {
+      this.forms.girdInfoList.splice(this.forms.girdInfoList.indexOf(tag), 1);
+    },
+    beforeSelectTree() {
+      this.treeObj.checkedKeys = [];
+      this.instance.post(`/app/appgirdinfo/listAll`, null, null).then((res) => {
+        if (res.code == 0) {
+          this.treeObj.treeList = res.data;
+          this.forms.girdInfoList.map((e) => {
+            this.treeObj.checkedKeys.push(e.id);
+          });
+        }
+      });
+    },
+    save() {
+      this.$refs["rules"].validate((valid) => {
+        if (valid) {
+          for (let i = 0; i < this.forms.girdInfoList.length; i++) {
+            const currInfo = this.forms.girdInfoList[i]
+            const arr = JSON.parse(JSON.stringify(this.forms.girdInfoList))
+            arr.splice(i, 1)
+            const sameInfo = arr.filter(v => v.id === currInfo.id)
+            if (!currInfo.checkType) {
+              return this.$message.error('请选择网格员类型')
+            }
+
+            if (!currInfo.id) {
+              return this.$message.error('请选择网格')
+            }
+
+            if (currInfo.checkType === '1' && currInfo.girdLevel !== '2') {
+              return this.$message.error(`一级、二级网格不能添加网格员`)
+            }
+
+            if (sameInfo.length) {
+              return this.$message.error('不能选择同一网格重复绑定')
+            }
+          }
+
+          this.instance.post(`/app/appgirdmemberinfo/addOrUpdate`,{
+            ...this.forms,
+            girdInfoListStr: this.forms.girdInfoList.map(v => v.girdName).join(',')
+          }).then((res) => {
+            if (res.code == 0) {
+              if (this.title == "添加网格员") {
+                this.cancel(true)
+              } else {
+                this.editOne = false
+                this.editTwo = false
+                this.searchDetail()
+              }
+            }
+          });
+        } else {
+          return false
+        }
+      });
+    },
+    searchDetail() {
+      this.instance
+        .post(`/app/appgirdmemberinfo/queryDetailById`, null, {
+          params: { id: this.params.id },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.forms = {
+              ...res.data,
+              girdInfoList: res.data.girdInfoList || []
+            };
+            this.users = [{
+              name: res.data.name,
+              phone: res.data.phone,
+              userId: res.data.id,
+              id: res.data.wxUserId
+            }]
+            this.girdInfoStr = ''
+            this.photoList = [{ url: this.forms.photo }];
+            if (res.data.girdInfoList) {
+              res.data.girdInfoList.forEach((e) => {
+                this.girdInfoStr = this.girdInfoStr + `${e.checkType === '1' ? '网格员' : '网格长'}-${e.girdName}&emsp;`
+              })
+            }
+          }
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.add {
+  height: 100%;
+
+    .form-flex {
+      display: flex;
+      align-items: center;
+
+      & > .el-button {
+        margin-left: 20px;
+      }
+
+      .el-input {
+        width: 300px;
+        margin-left: 20px;
+      }
+
+      ::v-deep .el-form-item__content {
+        margin-left: 0!important;
+      }
+    }
+  .ai-detail__title {
+    background-color: #fff;
+  }
+  .ai-detail__content {
+    .ai-detail__content--wrapper {
+      .el-form {
+        // background-color: #fff;
+        // padding: 0 60px;
+        .flex {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          .el-form-item {
+            width: 48%;
+          }
+          .buildingTypes {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+  ::v-deep .el-tag {
+    margin-right: 8px;
+    color: #333333;
+  }
+  .footer-btn {
+    width: 92px;
+  }
+  .above{
+    display: flex;
+    .left, .right{
+      flex: 1;
+    }
+  }
+}
+</style>
diff --git a/project/sass/apps/AppGridMember/components/list.vue b/project/sass/apps/AppGridMember/components/list.vue
new file mode 100644
index 00000000..2d3878af
--- /dev/null
+++ b/project/sass/apps/AppGridMember/components/list.vue
@@ -0,0 +1,199 @@
+<template>
+  <ai-list class="list">
+    <template slot="title">
+      <ai-title title="网格员管理" :isShowBottomBorder="true"></ai-title>
+    </template>
+    <template slot="content">
+      <ai-search-bar bottomBorder>
+        <template slot="left">
+          <el-date-picker
+            v-model="searchObj.selectionDate"
+            type="date"
+            @change="(page.current = 1), getList()"
+            value-format="yyyy-MM-dd"
+            size="small"
+            placeholder="选用时间">
+          </el-date-picker>
+        </template>
+        <template slot="right">
+          <el-input
+            v-model="searchObj.name"
+            size="small"
+            placeholder="网格员/责任网格"
+            @keyup.enter.native="(page.current = 1), getList()"
+            clearable
+            @clear="(searchObj.name = '', page.current = 1), getList()"
+            suffix-icon="iconfont iconSearch" />
+        </template>
+      </ai-search-bar>
+      <ai-search-bar style="padding: 16px 0 0">
+        <template slot="left">
+          <el-button
+            icon="iconfont iconAdd"
+            type="primary"
+            size="small"
+            @click="add('')"
+            >添加</el-button
+          >
+          <el-button
+            icon="iconfont iconDelete"
+            @click="deleteById(ids.join(','))"
+            :disabled="!Boolean(ids.length)"
+            >删除</el-button
+          >
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="page.total"
+        ref="aitableex"
+        :current.sync="page.current"
+        :size.sync="page.size"
+        @selection-change="(v) => (ids = v.map((e) => e.id))"
+        @getList="getList()">
+        <el-table-column label="操作" slot="options" align="center" fixed="right" width="170">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toFamily(row.id)">责任家庭</el-button>
+              <el-button type="text" @click="add(row.id)">查看</el-button>
+              <el-button type="text" @click="deleteById(row.id)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+export default {
+  name: "list",
+  label: "网格员管理",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+  },
+  data() {
+    return {
+      searchObj: {
+        name: "",
+        selectionDate: "",
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0,
+      },
+      goAdd: false,
+      tableData: [],
+      fileList: [],
+      ids: [],
+      detail: {},
+    };
+  },
+  created() {
+    this.dict.load("sex", "girdMemberType", "politicsStatus", "education");
+    this.getList();
+  },
+  computed: {
+    colConfigs() {
+      let _ = this;
+      return [
+        {
+          type: "selection",
+        },
+        {
+          prop: "name",
+          label: "网格员姓名",
+        },
+        {
+          prop: "girdInfoListStr",
+          align: "center",
+          label: "责任网格",
+        },
+        {
+          prop: "phone",
+          align: "center",
+          label: "联系电话",
+        },
+        {
+          prop: "selectionDate",
+          align: "center",
+          label: "选用时间",
+        },
+      ];
+    },
+  },
+  methods: {
+    getList() {
+      this.instance
+        .post("/app/appgirdmemberinfo/list", null, {
+          params: {
+            ...this.searchObj,
+            ...this.page,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.tableData = res.data.records;
+            this.page.total = res.data.total;
+          }
+        });
+    },
+    deleteById(ids) {
+      ids &&
+        this.$confirm("是否要删除该网格员？", {
+          type: "error",
+        })
+          .then(() => {
+            this.instance
+              .post("/app/appgirdmemberinfo/delete", null, {
+                params: { ids },
+              })
+              .then((res) => {
+                if (res?.code == 0) {
+                  this.$message.success("删除成功!");
+                  this.getList();
+                }
+              });
+          })
+          .catch(() => {});
+    },
+    add(id) {
+      this.$emit('change', {
+        type: 'Add',
+        params: {
+          id: id || ''
+        }
+      })
+    },
+
+    toFamily (id) {
+      this.$emit('change', {
+        type: 'Family',
+        params: {
+          id
+        }
+      })
+    },
+
+    handleSelectionChange(val) {
+      this.ids = [];
+      val.map((e) => {
+        this.ids.push(e.id);
+      });
+    },
+    resetSearch() {
+      Object.keys(this.searchObj).map((e) => {
+        this.searchObj[e] = "";
+      });
+      this.getList();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/project/sass/apps/AppReportAiWill/AppReportAtWill.vue b/project/sass/apps/AppReportAiWill/AppReportAtWill.vue
new file mode 100644
index 00000000..ed09578b
--- /dev/null
+++ b/project/sass/apps/AppReportAiWill/AppReportAtWill.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="doc-circulation ailist-wrapper">
+    <keep-alive :include="['List']">
+      <component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+  import List from './components/List'
+  import Detail from './components/Detail'
+
+  export default {
+    name: 'AppReportAtWill',
+    label: '矛盾调解',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        component: 'List',
+        params: {}
+      }
+    },
+
+    components: {
+      List,
+      Detail
+    },
+
+    mounted () {
+    },
+
+    methods: {
+      onChange (data) {
+        if (data.type === 'Detail') {
+          this.component = 'Detail'
+          this.params = data.params
+        }
+
+        if (data.type === 'list') {
+          this.component = 'List'
+          this.params = data.params
+
+          this.$nextTick(() => {
+            if (data.isRefresh) {
+              this.$refs.component.getList()
+            }
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .doc-circulation {
+    height: 100%;
+    background: #F3F6F9;
+    overflow: auto;
+  }
+</style>
diff --git a/project/sass/apps/AppReportAiWill/components/Detail.vue b/project/sass/apps/AppReportAiWill/components/Detail.vue
new file mode 100644
index 00000000..31c9898c
--- /dev/null
+++ b/project/sass/apps/AppReportAiWill/components/Detail.vue
@@ -0,0 +1,602 @@
+<template>
+  <ai-detail class="reportAtWillDetail" v-loading="isLoading">
+    <template #title>
+      <ai-title title="随手拍详情" isShowBack isShowBottomBorder  @onBackClick="cancel(false)">
+        <template #rightBtn>
+          <div class="title-btns">
+            <el-button type="primary" icon="iconfont iconPerson_Transfered" @click="isShowForward = true" v-if="detail.eventStatus < 2">指派事件</el-button>
+            <el-button type="primary" icon="iconfont iconRegister" @click="isShowAdd = true" v-if="detail.eventStatus < 2">处理事件</el-button>
+          </div>
+        </template>
+      </ai-title>
+    </template>
+    <template #content>
+      <div class="detail-content__wrapper">
+        <ai-card class="detail-content__wrapper--left" title="基础信息">
+          <template #content>
+            <ai-wrapper>
+              <ai-info-item label="上报人员" :value="detail.name"></ai-info-item>
+              <ai-info-item label="当前状态" :value="dict.getLabel('clapEventStatus', detail.eventStatus)"></ai-info-item>
+              <ai-info-item label="联系方式">{{ detail.phone }}</ai-info-item>
+              <ai-info-item label="上报时间">{{ detail.createTime }}</ai-info-item>
+              <ai-info-item label="事件类型">{{ detail.groupName }}</ai-info-item>
+              <ai-info-item label="事件描述" isLine>{{ detail.content }}</ai-info-item>
+              <ai-info-item label="现场照片" isLine>
+                <ai-uploader :instance="instance" disabled v-model="detail.files"></ai-uploader>
+              </ai-info-item>
+              <ai-info-item label="所属网格">{{ detail.girdName }}</ai-info-item>
+              <ai-info-item label="事件位置" isLine>
+                <div id="map" style="width: 500px; height: 280px;"></div>
+              </ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+        <div class="rightZone">
+          <ai-card title="办理进度">
+            <template #content>
+              <el-steps direction="vertical" :active="1">
+                <el-step
+                  v-for="(item, i) in processList"
+                  :key="i"
+                  :title="item.systemExplain"
+                  :description="item.doTime">
+                  <template #title>
+                    <h2 class="step-title" style="font-weight: 500; font-size: 14px;">
+                      {{ item.systemExplain }}
+                    </h2>
+                  </template>
+                  <template #description>
+                    <p style="color: #888; margin: 0 4px 10px 0; font-size: 14px;">{{ item.doTime }}</p>
+                    <div style="color: #444;margin-bottom: 10px;" v-if="item.doExplain">{{ item.doExplain }}</div>
+                    <ai-uploader :instance="instance" disabled v-model="item.files"></ai-uploader>
+                  </template>
+                </el-step>
+              </el-steps>
+            </template>
+          </ai-card>
+        </div>
+      </div>
+      <ai-dialog
+        :visible.sync="isShowAdd"
+        width="800px"
+        title="事件处理"
+        @closed="onClose"
+        @onConfirm="handleEvent">
+        <el-form class="ai-form" label-width="120px" :model="form" ref="form">
+          <el-form-item label="事件分类" prop="groupId" style="width: 100%;" :rules="[{ required: true, message: '请选择事件分类' }]">
+            <ai-select
+              v-model="form.groupId"
+              placeholder="请选择事件分类"
+              :selectList="dictList">
+            </ai-select>
+          </el-form-item>
+          <el-form-item label="处理结果" prop="eventStatus" style="width: 100%;" :rules="[{ required: true, message: '请选择处理结果' }]">
+            <el-radio-group v-model="form.eventStatus">
+              <el-radio label="2">已办结</el-radio>
+              <el-radio label="3">已拒绝</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="处理意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入处理意见' }]">
+            <el-input type="textarea" :rows="5" :maxlength="500" v-model="form.content" clearable placeholder="请输入处理意见" show-word-limit></el-input>
+          </el-form-item>
+          <el-form-item label="图片" prop="files" style="width: 100%;">
+            <ai-uploader
+              :instance="instance"
+              isShowTip
+              v-model="form.files"
+              :limit="9">
+            </ai-uploader>
+          </el-form-item>
+        </el-form>
+      </ai-dialog>
+      <ai-dialog
+        :visible.sync="isShowForward"
+        width="800px"
+        @close="onClose"
+        title="事件指派"
+        @onConfirm="onForwardConfirm">
+        <el-form class="ai-form" label-width="120px" :model="forwardForm" ref="forwardForm">
+          <el-form-item label="转交" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请选择网格员或网格' }]">
+            <el-input disabled size="small" v-model="forwardForm.name" clearable placeholder="请选择网格员或网格">
+              <template slot="append">
+                <el-button @click="isShowUser = true">选择</el-button>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="办理意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入办理意见' }]">
+            <el-input type="textarea" :rows="5" :maxlength="500" v-model="forwardForm.content" clearable placeholder="请输入办理意见" show-word-limit></el-input>
+          </el-form-item>
+          <el-form-item label="图片" prop="files" style="width: 100%;">
+            <ai-uploader
+              :instance="instance"
+              v-model="forwardForm.files"
+              isShowTip
+              :limit="9">
+            </ai-uploader>
+          </el-form-item>
+        </el-form>
+      </ai-dialog>
+      <ai-dialog
+        :visible.sync="isShowUser"
+        width="800px"
+        title="选择网格或网格员"
+        @onConfirm="onConfirm">
+        <div class="grid-wrapper">
+          <el-input
+            style="margin-bottom: 10px;"
+            size="small"
+            placeholder="请输入网格名称/网格员姓名/网格员电话"
+            v-model="name"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+          <el-tree
+            :filter-node-method="filterNode"
+            ref="tree"
+            :props="defaultProps"
+            node-key="id"
+            :data="tree"
+            highlight-current
+            @current-change="onTreeChange">
+            <div class="tree-container" slot-scope="{ data }">
+              <div class="tree-container__user">
+                <div class="tree-user__item">
+                  <span>{{ data.isUser ? `${data.name}-${data.phone}` : data.girdName }}</span>
+                </div>
+              </div>
+            </div>
+          </el-tree>
+        </div>
+      </ai-dialog>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  import AMapLoader from '@amap/amap-jsapi-loader'
+  import { mapState } from 'vuex'
+
+  export default {
+    name: 'Detail',
+    props: ['dict', 'instance', 'params'],
+
+    data() {
+      return {
+        forwardForm: {
+          content: '',
+          girdId: '',
+          girdName: '',
+          girdMemberId: '',
+          girdMemberName: '',
+          name: ''
+        },
+        isLoading: true,
+        name: '',
+        detail: {},
+        isShowUser: false,
+        eventList: [],
+        isShowAdd: false,
+        userList: [],
+        processList: [],
+        dictList: [],
+        defaultProps: {
+          children: 'girdList',
+          label: 'girdName'
+        },
+        isShowForward: false,
+        tree: [],
+        gridInfo: {},
+        form: {
+          files: [],
+          groupId: '',
+          groupName: '',
+          content: [],
+          eventStatus: '2'
+        }
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    watch: {
+      name (val) {
+        this.$refs.tree.filter(val)
+      }
+    },
+
+    created() {
+      this.getDict()
+      this.getGirdList()
+      this.dict.load('clapEventStatus').then(() => {
+        this.getDetail()
+      })
+    },
+
+    methods: {
+      getDetail() {
+        this.instance.post('/app/appclapeventinfo/queryDetailById', null, {
+          params: { id: this.params.id }
+        }).then(res => {
+          if (res?.data) {
+            this.detail = res.data
+            this.processList = res.data.processList
+            this.form.groupId = res.data.groupId
+
+            this.$nextTick(() => {
+              this.initMap()
+            })
+            this.isLoading = false
+          }
+        }).catch(() => {
+          this.isLoading = false
+        })
+      },
+
+      getGirdList () {
+        this.instance.post(`/app/appgirdinfo/listAllByTop`).then(res => {
+          if (res.code == 0) {
+            this.tree = this.formatList(res.data)
+          }
+        })
+      },
+
+      onClose () {
+        this.form.files = []
+        this.form.groupId = ''
+        this.form.groupName = ''
+        this.form.content = ''
+        this.form.eventStatus = ''
+        this.forwardForm.content = ''
+        this.forwardForm.girdId = ''
+        this.forwardForm.girdName = ''
+        this.forwardForm.girdMemberId = ''
+        this.forwardForm.girdMemberName = ''
+        this.forwardForm.name = ''
+      },
+
+      formatList (list) {
+        var arr = []
+        for (let item of list) {
+          if (item.girdMemberList && item.girdMemberList.length) {
+            let userList = JSON.parse(JSON.stringify(item.girdMemberList)).map(v => {
+              return {
+                  ...v,
+                isUser: true,
+                girdName: item.girdName,
+                girdId: item.id
+              }
+            })
+
+            item.girdList = [
+              ...userList
+            ]
+            delete item.girdMemberList
+          }
+
+          if (item.girdList && item.girdList.length) {
+            this.formatList(item.girdList)
+          }
+
+          arr.push(item)
+        }
+
+        return arr
+      },
+
+      filterNode (value, data) {
+        if (!value) return true
+
+        return (data.girdName && data.girdName.indexOf(value) !== -1) || (data.name && data.name.indexOf(value) !== -1) || (data.name && data.phone.indexOf(value) !== -1)
+      },
+
+      onTreeChange (e) {
+        this.gridInfo = e
+      },
+
+      onForwardConfirm () {
+        this.$refs.forwardForm.validate(v => {
+          if (v) {
+            this.instance.post('/app/appclapeventinfo/transferByManager', {
+              ...this.forwardForm,
+              id: this.params.id
+            }).then(res => {
+              if (res?.code == 0) {
+                this.isShowForward = false
+                this.getDetail()
+                this.$message.success('转交成功!')
+              }
+            })
+          }
+        })
+      },
+
+      onConfirm () {
+        if (this.gridInfo.userId || this.gridInfo.isLastLevel === '1') {
+          if (this.gridInfo.userId) {
+            this.forwardForm.girdId = this.gridInfo.girdId
+            this.forwardForm.girdName = this.gridInfo.girdName
+            this.forwardForm.girdMemberId = this.gridInfo.id
+            this.forwardForm.girdMemberName = this.gridInfo.name
+          } else {
+            this.forwardForm.girdId = this.gridInfo.id
+          }
+
+          this.forwardForm.girdName = this.gridInfo.girdName
+          this.forwardForm.name = `${this.gridInfo.girdName}${this.gridInfo.name ? '-' + this.gridInfo.name : ''}`
+
+          this.isShowUser = false
+        } else {
+          return this.$message.error('请选择网格员或者最后层网格')
+        }
+      },
+
+      getDict () {
+        this.instance.post(`/app/appclapeventgroup/list?current=1&size=100000`).then(res => {
+          if (res.code == 0) {
+            this.dictList = res.data.records.map(v => {
+              return {
+                dictValue: v.id,
+                dictName: v.groupName
+              }
+            })
+          }
+        })
+      },
+
+      close () {
+        this.$confirm('确定关闭该事件？').then(() => {
+          this.instance.post(`/app/appmininotice/delete?ids=${this.params.id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'list',
+          isRefresh: !!isRefresh
+        })
+      },
+
+      onChange(e) {
+        this.instance.post(`/app/appvillagerintegralrule/list?size=1000&classification=${e}&ruleStatus=1`).then(res => {
+          if (res.code === 0) {
+            this.form.ruleId = ''
+            this.eventList = res.data.records
+          }
+        })
+      },
+
+      initMap() {
+        let { lng, lat } = this.detail
+        let center = [lng, lat]
+        AMapLoader.load({
+          key: 'b553334ba34f7ac3cd09df9bc8b539dc',
+          version: '2.0'
+        }).then(AMap => {
+          let map = new AMap.Map('map', {
+            center,
+            zoom: 14
+          })
+          let marker = new AMap.Marker({
+            position: new AMap.LngLat(lng, lat),
+            title: this.detail.address
+          })
+          map.add(marker)
+        })
+      },
+
+      handleEvent() {
+        this.$refs.form.validate(v => {
+          if (v) {
+            this.instance.post('/app/appclapeventinfo/finishByManager', {
+              ...this.form,
+              groupName: this.dictList.filter(v => v.dictValue === this.form.groupId)[0].dictName,
+              id: this.params.id
+            }).then(res => {
+              if (res?.code == 0) {
+                this.isShowAdd = false
+                this.getDetail()
+                this.$message.success('处理成功!')
+              }
+            })
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .reportAtWillDetail {
+    height: 100%;
+
+    .grid-wrapper {
+      min-height: 360px;
+    }
+
+    .title-btns {
+      display: flex;
+      align-items: center;
+    }
+      ::v-deep .el-tree {
+        background: transparent;
+
+        .el-tree-node__expand-icon.is-leaf {
+          color: transparent !important;
+        }
+
+        .el-tree-node__content > .el-tree-node__expand-icon {
+          padding: 4px;
+        }
+
+        .el-tree-node__content {
+          height: 32px;
+        }
+
+        .el-tree__empty-text {
+          color: #222;
+          font-size: 14px;
+        }
+
+        .el-tree-node__children .el-tree-node__content {
+          height: 32px;
+        }
+
+        .el-tree-node__content:hover {
+          background: #E8EFFF;
+          color: #222222;
+          border-radius: 2px;
+        }
+
+        .is-current > .el-tree-node__content {
+          &:hover {
+            background: #2266FF;
+            color: #fff;
+          }
+
+          background: #2266FF;
+
+          span {
+            color: #fff;
+          }
+        }
+      }
+
+    .el-steps {
+      ::v-deep .el-step__icon {
+        font-size: 12px;
+        color: #555555;
+        border-color: #d0d4dc;
+      }
+
+      ::v-deep .el-step__head.is-finish {
+        .el-step__icon.is-text {
+          border: none;
+          color: #fff;
+          font-size: 12px;
+          background: #2266ff;
+        }
+      }
+
+      ::v-deep .el-step__line {
+        background-color: #d0d4dc;
+      }
+    }
+
+    .imgs {
+      font-size: 0;
+
+      img {
+        width: 108px;
+        height: 108px;
+        margin-right: 4px;
+        margin-bottom: 4px;
+        cursor: pointer;
+        user-select: none;
+
+        &:hover {
+          opacity: 0.8;
+        }
+
+        &:nth-of-type(2n) {
+          margin-right: 0;
+        }
+      }
+    }
+
+    ::v-deep .report-dialog {
+      .el-select {
+        width: 100%;
+      }
+    }
+
+    ::v-deep .el-step__head.is-process {
+      color: #555;
+      border-color: #555;
+    }
+
+    ::v-deep .is-finish h2 {
+      color: #2266ff;
+    }
+
+    .step-title {
+      color: #555;
+    }
+
+    .detail-content__wrapper {
+      display: flex;
+      width: 100%;
+
+      .detail-content__wrapper--left {
+        flex: 1;
+        margin-right: 20px;
+      }
+    }
+
+    ::v-deep .ai-detail__content {
+      background: #f3f6f9;
+
+      .ai-detail__content--wrapper {
+        display: flex;
+        gap: 16px;
+        width: 100%;
+        max-width: 100%;
+        padding: 16px;
+        box-sizing: border-box;
+
+        & > .el-card {
+          flex: 1;
+          min-width: 0;
+        }
+
+        .rightZone {
+          width: 400px;
+          flex-shrink: 0;
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+      }
+    }
+
+    ::v-deep .el-card {
+      .el-card__header {
+        padding: 12px 16px;
+        font-weight: bold;
+      }
+
+      .el-card__body {
+        padding: 8px;
+      }
+
+      #amap {
+        width: 466px;
+        height: 232px;
+      }
+
+      .el-steps {
+        margin-left: 8px;
+      }
+
+      .imgFormItem > .el-form-item__content {
+        display: flex;
+        gap: 16px;
+        flex-wrap: wrap;
+
+        &:before {
+          content: none;
+        }
+
+        .el-image__inner {
+          width: 82px;
+          height: 82px;
+        }
+      }
+    }
+  }
+</style>
diff --git a/project/sass/apps/AppReportAiWill/components/List.vue b/project/sass/apps/AppReportAiWill/components/List.vue
new file mode 100644
index 00000000..bcccec9a
--- /dev/null
+++ b/project/sass/apps/AppReportAiWill/components/List.vue
@@ -0,0 +1,121 @@
+<template>
+  <ai-list>
+    <template #title>
+      <ai-title title="事件上报" isShowBottomBorder></ai-title>
+    </template>
+    <template #content>
+      <ai-search-bar>
+        <template #left>
+          <ai-select
+            v-model="search.eventStatus"
+            clearable
+            placeholder="处理状态"
+            :selectList="dict.getDict('clapEventStatus')"
+            @change="search.current = 1, getList()">
+          </ai-select>
+        </template>
+        <template #right>
+          <el-input
+            v-model="search.content"
+            class="search-input"
+            size="small"
+            @keyup.enter.native="search.current = 1, getList()"
+            placeholder="请输入内容描述/上报人"
+            clearable
+            @change="getList"
+            @clear="search.current = 1, search.content = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="total" :current.sync="search.current" :size.sync="search.size" @getList="getList">
+        <el-table-column slot="options" label="操作" fixed="right" width="120" align="center">
+          <div class="table-options" slot-scope="{row}">
+            <el-button type="text" title="详情" @click="toDetail(row.id)">详情</el-button>
+          </div>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+
+  export default {
+    name: 'List',
+    label: "随手拍",
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data() {
+      return {
+        userList: [],
+        search: {
+          current: 1,
+          size: 10,
+          eventStatus: '',
+          content: ''
+        },
+        total: 0,
+        tableData: [],
+        content: '',
+        id: ''
+      }
+    },
+
+    computed: {
+      ...mapState(['user']),
+
+      colConfigs() {
+        return [
+          { prop: 'content', label: '内容描述', width: '300px' },
+          { prop: 'groupName', label: '事件类型', align: 'center' },
+          { prop: 'girdName', label: '所属网格', align: 'center' },
+          { prop: 'createTime', label: '上报时间', align: 'center' },
+          { prop: 'name', label: '上报居民', align: 'center' },
+          { prop: 'phone', label: '联系方式', align: 'center' },
+          { prop: 'eventStatus', label: '处理状态', align: 'center', formart: v => this.dict.getLabel('clapEventStatus', v) },
+          { prop: 'processTime', label: '处理时长', align: 'center' },
+          { slot: 'options' }
+        ]
+      }
+    },
+
+    created () {
+      this.dict.load('clapEventStatus').then(() => {
+        this.getList()
+      })
+    },
+
+    methods: {
+      getList () {
+        this.instance.post(`/app/appclapeventinfo/list`, null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+      toDetail (id) {
+        this.$emit('change', {
+          type: 'Detail',
+          params: {
+            id: id || ''
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/project/sass/apps/AppReturnHomeRegister/AppReturnHomeRegister.vue b/project/sass/apps/AppReturnHomeRegister/AppReturnHomeRegister.vue
new file mode 100644
index 00000000..c86d5b13
--- /dev/null
+++ b/project/sass/apps/AppReturnHomeRegister/AppReturnHomeRegister.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="AppReturnHomeRegister">
+    <keep-alive :include="['List']">
+      <component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+  import List from './components/List.vue'
+  import Detail from './components/Detail.vue'
+
+  export default {
+    name: 'AppReturnHomeRegister',
+    label: '返乡登记',
+
+    components: {
+      List,
+      Detail
+    },
+
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function
+    },
+
+    data () {
+      return {
+        component: 'List',
+        params: {}
+      }
+    },
+
+    methods: {
+      onChange (data) {
+        if (data.type === 'Detail') {
+          this.component = 'Detail'
+          this.isShowDetail = true
+          this.params = data.params
+        }
+
+        if (data.type === 'list') {
+          this.component = 'List'
+          this.params = data.params
+
+          this.$nextTick(() => {
+            if (data.isRefresh) {
+              this.$refs.component.getList()
+            }
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AppReturnHomeRegister {
+    height: 100%;
+  }
+</style>
diff --git a/project/sass/apps/AppReturnHomeRegister/components/Detail.vue b/project/sass/apps/AppReturnHomeRegister/components/Detail.vue
new file mode 100644
index 00000000..fbddb253
--- /dev/null
+++ b/project/sass/apps/AppReturnHomeRegister/components/Detail.vue
@@ -0,0 +1,279 @@
+ <template>
+  <ai-detail isHasSidebar>
+    <template slot="title">
+      <ai-title title="返乡登记详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <AiSidebar :tabTitle="tabList" v-model="currIndex"></AiSidebar>
+      <div v-show="currIndex === 0">
+        <ai-card title="基本信息" v-show="currIndex === 0">
+          <template #content>
+            <ai-wrapper
+              label-width="120px">
+              <ai-info-item label="姓名" :value="info.name"></ai-info-item>
+              <ai-info-item label="填报时间" :value="info.createTime"></ai-info-item>
+              <ai-info-item label="身份证号" :value="info.idNumber"></ai-info-item>
+              <ai-info-item label="手机号码" :value="info.phone"></ai-info-item>
+              <ai-info-item label="人员类别" isLine>
+                <span :style="info.type == 0 ? 'color:#42D784;' : 'color:#f46;'">{{dict.getLabel('epidemicMemberType', info.type)}}</span>
+              </ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+        <ai-card title="行程信息">
+          <template #content>
+            <ai-wrapper
+              label-width="120px">
+              <ai-info-item label="出发时间" :value="info.startTime"></ai-info-item>
+              <ai-info-item label="出发地区" >
+                <span  :style="{color: info.denger == 1 ? '#FF4466' : '#333'}">{{info.startAreaName}} </span>
+              </ai-info-item>
+              <ai-info-item label="出发地址" isLine :value="info.startAddress"></ai-info-item>
+              <ai-info-item label="出行方式" :value="dict.getLabel('epidemicRecentTravel', info.travelType)"></ai-info-item>
+              <ai-info-item label="行程描述" isLine :value="info.description"></ai-info-item>
+              <ai-info-item label="到达时间" :value="info.arriveTime"></ai-info-item>
+              <ai-info-item label="到达地区" :value="info.arriveAreaName"></ai-info-item>
+              <ai-info-item label="返乡地址" isLine :value="info.arriveAddress"></ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+        <ai-card title="健康状况">
+          <template #content>
+            <ai-wrapper
+              label-width="120px">
+              <ai-info-item label="当前体温">
+                <span :style="info.temperature >= 37.3 ? 'color:#f46;' : ''">{{ info.temperature + '℃' }}</span>
+              </ai-info-item>
+              <ai-info-item label="14天内是否接触新冠确诊或疑似患者">
+                <span :class="'color-'+info.touchInFourteen">{{$dict.getLabel('epidemicTouchInFourteen', info.touchInFourteen)}}</span> 
+              </ai-info-item>
+              <ai-info-item label="当前健康状况"> 
+                <span></span>
+                <span v-for="(item, index) in info.health" :key="index" :style="item != 0 ? 'color:#FF4466;' : ''"><span v-if="index>0">;</span>{{$dict.getLabel('epidemicRecentHealth', item)}}</span>
+              </ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+        <ai-card title="核酸检测">
+          <template #content>
+            <ai-wrapper
+              label-width="120px">
+              <ai-info-item label="检测日期" :value="info.checkTime && info.checkTime.split(' ')[0]"></ai-info-item>
+              <ai-info-item label="检测结果">
+                <span :style="info.checkResult == 1 ? 'color:#f46;' : 'color:#42D784;'">{{$dict.getLabel('epidemicRecentTestResult', info.checkResult)}}</span>
+              </ai-info-item>
+              <ai-info-item label="本人健康码截图" isLine>
+                <ai-uploader
+                  :instance="instance"
+                  v-model="info.checkPhoto"
+                  disabled
+                  :limit="9">
+                </ai-uploader>
+              </ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+      </div>
+      <div v-show="currIndex === 1">
+        <ai-card title="异常处理">
+          <template #right>
+            <el-button type="primary" v-if="info.status === '0'" @click="release">解除异常</el-button>
+          </template>
+          <template #content>
+            <ai-wrapper
+              label-width="120px">
+              <ai-info-item label="姓名" :value="info.name"></ai-info-item>
+              <ai-info-item label="填报时间" :value="info.createTime"></ai-info-item>
+              <ai-info-item label="身份证号" :value="info.idNumber"></ai-info-item>
+              <ai-info-item label="手机号码" :value="info.phone"></ai-info-item>
+              <ai-info-item label="人员类别" isLine :value="dict.getLabel('epidemicMemberType', info.type)"></ai-info-item>
+              <ai-info-item label="异常状况" isLine>
+                <span :style="{color: info.unusual ? 'red' : '#333'}">{{ info.unusual || '-' }}</span>
+              </ai-info-item>
+              <ai-info-item label="异常解除人" v-if="info.releaseName && info.status === '1'" :value="info.releaseName"></ai-info-item>
+              <ai-info-item label="异常解除时间" v-if="info.releaseTime && info.status === '1'" :value="info.releaseTime"></ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+        <ai-card title="异常情况记录">
+          <template #right>
+            <el-button type="primary" v-if="info.status === '0'" @click="isShow = true">添加记录</el-button>
+          </template>
+          <template #content>
+            <ai-table
+              :tableData="tableData"
+              :col-configs="colConfigs"
+              :total="total"
+              :current.sync="search.current"
+              :size.sync="search.size"
+              @getList="getList">
+              <el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
+                <template slot-scope="{ row }">
+                  <div class="table-options">
+                    <el-button type="text" @click="remove(row.id)">删除</el-button>
+                  </div>
+                </template>
+              </el-table-column>
+            </ai-table>
+          </template>
+        </ai-card>
+        <ai-dialog
+          :visible.sync="isShow"
+          width="800px"
+          @close="form.content = ''"
+          title="添加异常记录"
+          @onConfirm="onConfirm">
+          <el-form class="ai-form" label-width="120px" :model="form" ref="form">
+            <el-form-item label="异常记录" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入异常记录' }]">
+              <el-input type="textarea" :rows="5" :maxlength="500" v-model="form.content" clearable placeholder="请输入异常记录" show-word-limit></el-input>
+            </el-form-item>
+          </el-form>
+        </ai-dialog>
+      </div>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  export default {
+    name: 'Detail',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data () {
+      return {
+        total: 0,
+        info: {},
+        id: '',
+        search: {
+          current: 1,
+          size: 10
+        },
+        form: {
+          content: ''
+        },
+        isShow: false,
+        currIndex: 0,
+        tableData: [],
+        colConfigs: [
+          {prop: 'content', label: '异常记录', align: 'center' },
+          {prop: 'createTime', label: '创建时间', align: 'center'},
+          {prop: 'createUserName', label: '记录人', align: 'center' }
+        ],
+        tabList: ['基本信息', '异常处理']
+      }
+    },
+
+    created () {
+      if (this.params && this.params.id) {
+        this.id = this.params.id
+        this.$dict.load(['epidemicRecentHealth', 'epidemicRecentTravel', 'epidemicTouchInFourteen', 'epidemicMemberType', 'epidemicRecentTestResult']).then(() => {
+          this.getInfo(this.params.id)
+        })
+
+        this.getList()
+      }
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/appepidemicbackhomerecord/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+            this.info.checkPhoto = res.data.checkPhoto ? JSON.parse(res.data.checkPhoto) : []
+            let healthName = ''
+            this.info.isHealth = false
+            res.data.health.split(',').forEach(v => {
+              if (v > 0) {
+                this.info.isHealth = true
+              }
+              healthName = healthName + this.$dict.getLabel('epidemicRecentHealth', v)
+            })
+            this.info.healthName = healthName
+            this.info.health = this.info.health.split(',')
+          }
+        })
+      },
+
+      release () {
+        this.$confirm('确定解除异常？').then(() => {
+          this.instance.post(`/app/appepidemicbackhomerecord/release?recordId=${this.params.id}`, {
+            id: this.params.id
+          }).then(res => {
+            if (res.code == 0) {
+              this.$message.success('解除异常成功！')
+              this.currIndex = 0
+              this.getInfo(this.params.id)
+            }
+          })
+        })
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appepidemicunusuallog/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+
+      onConfirm() {
+        this.$refs.form.validate(v => {
+          if (v) {
+            this.instance.post('/app/appepidemicunusuallog/addOrUpdate', {
+              ...this.form,
+              recordId: this.params.id
+            }).then(res => {
+              if (res?.code == 0) {
+                this.isShow = false
+                this.getList()
+                this.$message.success('添加成功!')
+              }
+            })
+          }
+        })
+      },
+
+      getList () {
+        this.instance.post(`/app/appepidemicunusuallog/list`, null, {
+          params: {
+            ...this.search,
+            recordId: this.params.id
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+      cancel () {
+        this.$emit('change', {
+          type: 'list',
+          isRefresh: true
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .color-0{
+    color: #42D784;
+  }
+  .color-1{
+    color: #f46;
+  }
+  .color-2{
+    color: #1365DD;
+  }
+</style>
diff --git a/project/sass/apps/AppReturnHomeRegister/components/List.vue b/project/sass/apps/AppReturnHomeRegister/components/List.vue
new file mode 100644
index 00000000..741ede6b
--- /dev/null
+++ b/project/sass/apps/AppReturnHomeRegister/components/List.vue
@@ -0,0 +1,274 @@
+<template>
+  <ai-list class="list">
+    <ai-title slot="title" title="返乡登记" v-if="search.arriveAreaId" isShowBottomBorder :instance="instance" :disabledLevel="disabledLevel" isShowArea v-model="search.arriveAreaId" @change="changeArea"></ai-title>
+    <template slot="content">
+      <div class="statistics-top">
+        <div class="statistics-top__item">
+          <span>返乡人数</span>
+          <h2 style="color: #2266FF;">{{ info.total }}</h2>
+        </div>
+        <div class="statistics-top__item">
+          <span>今日新增返乡</span>
+          <h2 style="color: #22AA99;">{{ info.today }}</h2>
+        </div>
+        <div class="statistics-top__item">
+          <span>异常人数</span>
+          <h2 style="color: #F8B425">{{ info.unusual }}</h2>
+        </div>
+        <div class="statistics-top__item">
+          <span>今日异常人数</span>
+          <h2 style="color: red">{{ info.todayUnusual }}</h2>
+        </div>
+        <div class="statistics-top__item">
+          <span>异常处理</span>
+          <h2 style="color: red">{{ info.release }}</h2>
+        </div>
+      </div>
+      <div class="content">
+        <ai-search-bar bottomBorder>
+          <template #left>
+            <ai-select
+              v-model="search.status"
+              clearable
+              placeholder="请选择健康状态"
+              :selectList="dictList"
+              @change="search.current = 1, getList()">
+            </ai-select>
+            <ai-download :instance="instance" url="/app/appepidemicbackhomerecord/export" :params="param" fileName="返乡登记" :disabled="tableData.length == 0">
+              <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
+            </ai-download>
+          </template>
+          <template #right>
+            <el-input
+              v-model="search.name"
+              size="small"
+              placeholder="请输入姓名"
+              clearable
+              @keyup.enter.native="search.current = 1, getList()"
+              @clear="search.current = 1, search.name = '', getList()"
+              suffix-icon="iconfont iconSearch">
+            </el-input>
+          </template>
+        </ai-search-bar>
+        <ai-table
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :total="total"
+          v-loading="loading"
+          style="margin-top: 16px;"
+          :current.sync="search.current"
+          :size.sync="search.size"
+          @getList="getList">
+          <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
+            <template slot-scope="{ row }">
+              <div class="table-options">
+                <el-button type="text" @click="toDetail(row.id)">详情</el-button>
+                <el-button type="text" @click="remove(row.id)">删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </div>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    name: 'List',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          name: '',
+          arriveAreaId: '',
+          status: ''
+        },
+        dictList: [{
+          dictName: '异常',
+          dictValue: '0'
+        }, {
+          dictName: '正常',
+          dictValue: '1'
+        }],
+        info: {},
+        colConfigs: [
+          { prop: 'name', label: '姓名' },
+          { prop: 'phone', align: 'center', label: '手机号码' },
+          { prop: 'startTime', align: 'center', label: '出发时间', formart: v => v.substr(0, v.length - 3) },
+          {
+            prop: 'startAreaName',
+            align: 'center',
+            label: '出发地区'
+          },
+          { prop: 'arriveTime', align: 'center', label: '到达时间', formart: v => v.substr(0, v.length - 3) }, 
+          {
+            prop: 'arriveAreaName',
+            align: 'center',
+            label: '到达地区'
+          },
+          { prop: 'checkTime', align: 'center', label: '核酸日期', formart: v => v.split(' ')[0] },
+          {
+            prop: 'status',
+            align: 'center',
+            label: '健康状态',
+            render: (h, {row}) => {
+              return h('span', {
+                style: {
+                  color: row.status === '0' ? 'red' : '#333'
+                }
+              }, row.status === '0' ? '异常' : '正常')
+            }
+          }
+        ],
+        ids: [],
+        tableData: [],
+        total: 0,
+        loading: false,
+        disabledLevel: 0
+      }
+    },
+
+    computed: {
+      ...mapState(['user']),
+
+      param () {
+        return this.search
+      }
+    },
+
+    created () {
+      this.disabledLevel = this.user.info.areaList.length - 1
+      this.search.arriveAreaId = this.user.info.areaId
+      this.loading = true
+      this.dict.load(['marriageType', 'marriagePersonType', 'modeType']).then(() => {
+        this.getList()
+      })
+    },
+
+    methods: {
+      getList () {
+        this.instance.post(`/app/appepidemicbackhomerecord/list`, null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+            this.loading = false
+          } else {
+            this.loading = false
+          }
+        }).catch(() => {
+          this.loading = false
+        })
+        
+        this.getTotalInfo()
+      },
+
+      toDetail (id) {
+        this.$emit('change', {
+          type: 'Detail',
+          params: {
+            id: id || ''
+          }
+        })
+      },
+
+      changeArea () {
+        this.search.current = 1
+
+        this.$nextTick(() => {
+          this.getList()
+          this.getTotalInfo()
+        })
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appepidemicbackhomerecord/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getTotalInfo()
+              this.getList()
+            }
+          })
+        })
+      },
+
+
+      getTotalInfo () {
+        this.instance.post(`/app/appepidemicbackhomerecord/statistic`, null, {
+          params: {
+            areaId: this.search.arriveAreaId
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.info = res.data
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .list {
+    ::v-deep .ai-list__content {
+      padding: 0!important;
+
+      .ai-list__content--right-wrapper {
+        background: transparent!important;
+        box-shadow: none!important;
+        margin: 0!important;
+        padding: 12px 16px 12px!important;
+      }
+    }
+    .statistics-top {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+
+      & > div {
+        flex: 1;
+        height: 96px;
+        line-height: 1;
+        margin-right: 20px;
+        padding: 16px 24px;
+        background: #FFFFFF;
+        box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
+        border-radius: 4px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        h3 {
+          font-size: 24px;
+        }
+
+        span {
+          display: block;
+          margin-bottom: 16px;
+          color: #888888;
+          font-size: 16px;
+        }
+      }
+    }
+
+    .content {
+      padding: 16px;
+      background: #FFFFFF;
+      box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
+    }
+  }
+</style>
diff --git a/project/sass/apps/AppRiskArea/AppRiskArea.vue b/project/sass/apps/AppRiskArea/AppRiskArea.vue
new file mode 100644
index 00000000..42064025
--- /dev/null
+++ b/project/sass/apps/AppRiskArea/AppRiskArea.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="doc-circulation ailist-wrapper">
+    <keep-alive :include="['List']">
+      <component ref="component" :moduleName="moduleName" :moduleId="moduleId" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+  import List from './components/List'
+  import Add from './components/Add'
+
+  export default {
+    name: 'AppRiskArea',
+    label: '风险配置',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        component: 'List',
+        params: {},
+        moduleId: '',
+        include: [],
+        moduleName: ''
+      }
+    },
+
+    components: {
+      Add,
+      List
+    },
+
+    methods: {
+      onChange (data) {
+        if (data.type === 'Add') {
+          this.component = 'Add'
+          this.params = data.params
+        }
+
+        if (data.type === 'list') {
+          this.component = 'List'
+          this.params = data.params
+
+          this.$nextTick(() => {
+            if (data.isRefresh) {
+              this.$refs.component.getList()
+            }
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .doc-circulation {
+    height: 100%;
+    background: #F3F6F9;
+    overflow: auto;
+  }
+</style>
diff --git a/project/sass/apps/AppRiskArea/components/Add.vue b/project/sass/apps/AppRiskArea/components/Add.vue
new file mode 100644
index 00000000..cefc6124
--- /dev/null
+++ b/project/sass/apps/AppRiskArea/components/Add.vue
@@ -0,0 +1,154 @@
+<template>
+  <ai-detail class="content-add">
+    <template slot="title">
+      <ai-title :title="params.id ? '编辑风险区域' : '添加风险区域'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <ai-card title="基本信息">
+        <template #content>
+          <el-form class="ai-form" :model="form" label-width="120px" ref="form">
+            <el-form-item prop="areaId" style="width: 100%;" label="选择地区" :rules="[{required: true, message: '请选择地区', trigger: 'change'}]">
+              <ai-area-select clearable @fullname="v => form.areaName = v" always-show :instance="instance" v-model="form.areaId"></ai-area-select>
+            </el-form-item>
+            <el-form-item label="风险等级" style="width: 100%;" prop="level" :rules="[{required: true, message: '请选择风险等级', trigger: 'change'}]">
+              <ai-select
+                v-model="form.level"
+                clearable
+                placeholder="请选择风险等级"
+                :selectList="dict.getDict('epidemicDangerousAreaLevel')">
+              </ai-select>
+            </el-form-item>
+          </el-form>
+        </template>
+      </ai-card>
+    </template>
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="confirm">提交</el-button>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    name: 'Add',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object,
+      moduleName: String
+    },
+    data () {
+      return {
+        info: {},
+        form: {
+          level: '',
+          areaId: '',
+          areaName: ''
+        },
+        id: ''
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    created () {
+      this.dict.load('epidemicDangerousAreaLevel').then(() => {
+        if (this.params && this.params.id) {
+          this.id = this.params.id
+          this.getInfo(this.params.id)
+        }
+      })
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/appepidemicdangerousarea/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.form = res.data
+          }
+        })
+      },
+
+      confirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.instance.post(`/app/appepidemicdangerousarea/addOrUpdate`, {
+              ...this.form
+            }).then(res => {
+              if (res.code == 0) {
+                this.$message.success('提交成功')
+                setTimeout(() => {
+                  this.cancel(true)
+                }, 600)
+              }
+            })
+          }
+        })
+      },
+
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'list',
+          isRefresh: !!isRefresh
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .content-add {
+    .video {
+      width: 640px;
+      height: 360px;
+      border-radius: 4px;
+      border: 1px dashed #D0D4DC;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      .icon {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        span:nth-child(2) {
+          display: inline-block;
+          font-size: 16px;
+          color: #333333;
+          line-height: 30px;
+        }
+
+        .iconfont {
+          display: inline-block;
+          font-size: 40px;
+          color: #2266FF;
+        }
+      }
+
+      .tips {
+        display: inline-block;
+        font-size: 12px;
+        color: #999999;
+        line-height: 26px;
+      }
+    }
+
+    .video-com {
+      width: 640px;
+      height: 360px;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 2px;
+      border: 1px solid #D0D4DC;
+      margin-top: -40px;
+    }
+  }
+</style>
diff --git a/project/sass/apps/AppRiskArea/components/List.vue b/project/sass/apps/AppRiskArea/components/List.vue
new file mode 100644
index 00000000..6cc3bd8a
--- /dev/null
+++ b/project/sass/apps/AppRiskArea/components/List.vue
@@ -0,0 +1,141 @@
+<template>
+  <ai-list class="notice">
+    <template slot="title">
+      <ai-title title="风险区域配置" isShowBottomBorder></ai-title>
+    </template>
+    <template slot="content">
+      <ai-search-bar class="search-bar">
+        <template #left>
+          <ai-select
+            v-model="search.level"
+            clearable
+            placeholder="请选择风险登记"
+            :selectList="dict.getDict('epidemicDangerousAreaLevel')"
+            @change="search.current = 1, getList()">
+          </ai-select>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加</el-button>
+        </template>
+        <template #right>
+          <el-input
+            v-model="search.province"
+            class="search-input"
+            size="small"
+            @keyup.enter.native="search.current = 1, getList()"
+            placeholder="省级名称/市级名称/区级名称"
+            clearable
+            @clear="search.current = 1, search.province = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        style="margin-top: 6px;"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @getList="getList">
+        <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
+              <el-button type="text" @click="remove(row.id)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    name: 'List',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      moduleName: String
+    },
+
+    data() {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          level: '',
+          province: ''
+        },
+        currIndex: -1,
+        areaList: [],
+        total: 10,
+        colConfigs: [
+          { prop: 'province',  label: '省级', align: 'left', width: '200px' },
+          { prop: 'city', label: '市级', align: 'center' },
+          { prop: 'district', label: '区级', align: 'center' },
+          { prop: 'town', label: '镇级', align: 'center' },
+          { prop: 'village', label: '村级', align: 'center' },
+          { prop: 'level', label: '等级', align: 'center', formart: v => this.dict.getLabel('epidemicDangerousAreaLevel', v) },
+          { prop: 'createTime', label: '设置时间', align: 'center' },
+          { prop: 'createUserName', label: '添加人', align: 'center' },
+          { slot: 'options', label: '操作', align: 'center' }
+        ],
+        areaName: '',
+        unitName: '',
+        tableData: []
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    created() {
+      this.dict.load('epidemicDangerousAreaLevel').then(() => {
+        this.getList()
+      })
+    },
+
+    methods: {
+      getList() {
+        this.instance.post(`/app/appepidemicdangerousarea/list`, null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appepidemicdangerousarea/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+
+      toAdd(id) {
+        this.$emit('change', {
+          type: 'Add',
+          params: {
+            id: id || ''
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .notice {
+  }
+</style>