diff --git a/packages/3.0.0/AppVillageActivity/AppVillageActivity.vue b/packages/3.0.0/AppVillageActivity/AppVillageActivity.vue
new file mode 100644
index 00000000..3f55204a
--- /dev/null
+++ b/packages/3.0.0/AppVillageActivity/AppVillageActivity.vue
@@ -0,0 +1,100 @@
+<template>
+  <ai-list v-if="!isShowDetail">
+    <template slot="title">
+      <ai-title title="村民活动" :isShowBottomBorder="false"></ai-title>
+    </template>
+    <template slot="tabs">
+      <el-tabs v-model="currIndex">
+        <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
+          <component :ref="String(i)" v-if="currIndex == i" :is="tab.comp" @change="onChange" lazy :instance="instance" :dict="dict" :permissions="permissions"/>
+        </el-tab-pane>
+      </el-tabs>
+    </template>
+  </ai-list>
+  <Add v-else-if="componentName === 'Add'" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></Add>
+  <Detail v-else-if="componentName === 'Detail'" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></Detail>
+</template>
+
+<script>
+  import List from './components/List.vue'
+  import Statistics from './components/Statistics'
+  import Add from './components/Add'
+  import Detail from './components/Detail'
+  import { mapState } from 'vuex'
+
+  export default {
+    name: 'AppVillageActivity',
+    label: '村民活动',
+
+    components: {
+      List,
+      Add,
+      Detail,
+      Statistics
+    },
+
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function
+    },
+
+    computed: {
+      ...mapState(['user']),
+
+      tabs () {
+        const tabList = [
+          {label: '活动管理', name: 'List', comp: List, permission: ''},
+          {label: '报到数据', name: 'Statistics', comp: Statistics, permission: ''}
+        ].filter(item => {
+          return true
+        })
+
+        return tabList
+      }
+    },
+
+    data () {
+      return {
+        activeName: 'JoinEvent',
+        currIndex: '0',
+        componentName: '',
+        params: {},
+        isShowDetail: false
+      }
+    },
+
+    created () {
+      if (this.$route.query.id) {
+        this.componentName = this.$route.query?.type
+        this.params = {id: this.$route.query?.id}
+        this.isShowDetail = true
+      }
+    },
+
+    methods: {
+      onChange (data) {
+        if (data.type === 'list') {
+          this.componentName = 'List'
+          this.isShowDetail = false
+          this.params = data.params
+        }
+
+        if (data.type === 'Detail') {
+          this.componentName = 'Detail'
+          this.isShowDetail = true
+          this.params = data.params
+        }
+
+        if (data.type === 'Add') {
+          this.componentName = 'Add'
+          this.isShowDetail = true
+          this.params = data.params
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/packages/3.0.0/AppVillageActivity/components/Add.vue b/packages/3.0.0/AppVillageActivity/components/Add.vue
new file mode 100644
index 00000000..f4545e39
--- /dev/null
+++ b/packages/3.0.0/AppVillageActivity/components/Add.vue
@@ -0,0 +1,155 @@
+<template>
+  <ai-detail>
+    <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 label="活动标题" style="width: 100%;" prop="title" :rules="[{required: true, message: '请输入活动标题', trigger: 'blur'}]">
+              <el-input type="input" size="small" v-model="form.title" clearable placeholder="请输入活动标题..." maxlength="30" show-word-limit></el-input>
+            </el-form-item>
+            <el-form-item prop="areaId" style="width: 100%;" label="发布地区" :rules="[{required: true, message: '请选择发布地区', trigger: 'change'}]">
+              <ai-area-select clearable always-show :instance="instance" v-model="form.areaId" :disabled-level="disabledLevel"></ai-area-select>
+            </el-form-item>
+            <el-form-item prop="startTime" label="活动开始时间" :rules="[{required: true, message: '活动开始时间', trigger: 'change'}]">
+              <el-date-picker
+                style="width: 100%"
+                v-model="form.startTime"
+                type="datetime"
+                size="small"
+                placeholder="活动开始时间">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item prop="endTime" label="活动结束时间" :rules="[{required: true, message: '活动结束时间', trigger: 'change'}]">
+              <el-date-picker
+                v-model="form.endTime"
+                style="width: 100%"
+                type="datetime"
+                size="small"
+                placeholder="活动开始时间">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="活动地点" style="width: 100%;" prop="title" :rules="[{required: true, message: '请输入标题', trigger: 'blur'}]">
+              <el-input type="input" size="small" v-model="form.title" clearable placeholder="请输入..." maxlength="30" show-word-limit></el-input>
+            </el-form-item>
+            <el-form-item label="联系人" prop="title" :rules="[{required: true, message: '请输入活动标题', trigger: 'blur'}]">
+              <el-input type="input" size="small" v-model="form.title" clearable placeholder="请输入活动标题..." maxlength="30" show-word-limit></el-input>
+            </el-form-item>
+            <el-form-item label="联系电话" prop="title" :rules="[{required: true, message: '请输入活动标题', trigger: 'blur'}]">
+              <el-input type="input" size="small" v-model="form.title" clearable placeholder="请输入活动标题..." maxlength="30" show-word-limit></el-input>
+            </el-form-item>
+            <el-form-item label="活动介绍" style="width: 100%;" prop="content" :rules="[{required: true, message: '请输入内容', trigger: 'change'}]">
+              <ai-editor v-model="form.content" :instance="instance"/>
+            </el-form-item>
+            <el-form-item label="缩略图" style="width: 100%;" prop="thumbUrl">
+              <ai-uploader
+                :instance="instance"
+                isShowTip
+                v-model="form.thumbUrl"
+                :limit="1">
+              </ai-uploader>
+            </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
+    },
+
+    data () {
+      return {
+        info: {},
+        form: {
+          title: '',
+          content: '',
+          areaId: '',
+          startTime: '',
+          endTime: '',
+          createUnitName: '',
+          createUserName: '',
+          status: '',
+          thumbUrl: []
+        },
+        cropOps: {
+          width: "336px",
+          height: "210px"
+        },
+        id: ''
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    created () {
+      this.form.areaId = this.user.info.areaId
+      this.disabledLevel = this.user.info.areaList.length
+      if (this.params && this.params.id) {
+        this.id = this.params.id
+        this.getInfo(this.params.id)
+      }
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/appcountrysidetourism/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.form = res.data
+            this.form.thumbUrl = res.data.thumbUrl ? JSON.parse(res.data.thumbUrl) : []
+          }
+        })
+      },
+
+      confirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.instance.post(`/app/appcountrysidetourism/addOrUpdate`, {
+              ...this.form,
+              type: 0,
+              createUserName: this.user.info.name,
+              thumbUrl: this.form.thumbUrl.length ? JSON.stringify([{
+                url: this.form.thumbUrl[0].url
+              }]) : ''
+            }).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">
+</style>
diff --git a/packages/3.0.0/AppVillageActivity/components/Detail.vue b/packages/3.0.0/AppVillageActivity/components/Detail.vue
new file mode 100644
index 00000000..7f0c632e
--- /dev/null
+++ b/packages/3.0.0/AppVillageActivity/components/Detail.vue
@@ -0,0 +1,115 @@
+<template>
+  <ai-detail>
+    <template slot="title">
+      <ai-title title="详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <AiSidebar :tabTitle="tabList" v-model="currIndex"></AiSidebar>
+      <ai-card title="基本信息" v-show="currIndex === 0">
+        <template #content>
+          <ai-wrapper
+            label-width="80px">
+            <ai-info-item label="添加渠道" value="1231313"></ai-info-item>
+            <ai-info-item label="添加渠道" value="1231313"></ai-info-item>
+            <ai-info-item label="添加渠道" value="1231313"></ai-info-item>
+            <ai-info-item label="添加渠道" value="1231313"></ai-info-item>
+            <ai-info-item label="添加渠道" value="1231313"></ai-info-item>
+            <ai-info-item label="添加渠道" value="1231313"></ai-info-item>
+          </ai-wrapper>
+        </template>
+      </ai-card>
+      <ai-card title="报名情况" v-show="currIndex === 1">
+        <template #content>
+          <ai-table
+            class="detail-table__table"
+            :border="true"
+            :tableData="tableData"
+            :col-configs="colConfigs"
+            :total="total"
+            :current.sync="search.current"
+            :size.sync="search.size"
+            :stripe="false"
+            @getList="getList">
+          </ai-table>
+        </template>
+      </ai-card>
+      <ai-card title="活动动态" v-show="currIndex === 2">
+        <template #content>
+          <Dynamic :instance="instance" :dict="dict" :id="params.id" v-show="currIndex === 2"></Dynamic>
+        </template>
+      </ai-card>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  import Dynamic from './Dynamic'
+  export default {
+    name: 'Detail',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    components: {
+      Dynamic
+    },
+
+    data () {
+      return {
+        total: 11,
+        info: {},
+        id: '',
+        search: {
+          current: 1,
+          size: 10
+        },
+        currIndex: 0,
+        tableData: [],
+        colConfigs: [
+          {slot: 'userinfo'},
+          {prop: 'addWay', label: '客户来源', align: 'center', formart: v => this.dict.getLabel('wxCustomerAddWay', v)},
+          {prop: 'createTime', label: '添加时间', align: 'center'}
+        ],
+        tabList: ['基本信息', '报名情况', '活动动态']
+      }
+    },
+
+    created () {
+      if (this.params && this.params.id) {
+        this.id = this.params.id
+        this.getInfo(this.params.id)
+      }
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/appeveryvillagecode/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.form = res.data
+            this.form.codeUrl = [{
+              url: res.data.codeUrl
+            }]
+          }
+        })
+      },
+
+      getList () {
+
+      },
+
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'list',
+          isRefresh: !!isRefresh
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/packages/3.0.0/AppVillageActivity/components/Dynamic.vue b/packages/3.0.0/AppVillageActivity/components/Dynamic.vue
new file mode 100644
index 00000000..e0fbdbc6
--- /dev/null
+++ b/packages/3.0.0/AppVillageActivity/components/Dynamic.vue
@@ -0,0 +1,266 @@
+<template>
+  <div class="bbs">
+    <div v-if="list.length">
+      <div class="bbs-title">
+        <span>共</span>
+        <i>{{ list.length }}</i>
+        <span>条动态</span>
+      </div>
+      <div class="bbs-item" v-for="(item, index) in list" :key="index">
+        <div class="bbs-item__info">
+          <div class="bbs-item__info--top">
+            <div class="left">
+              <img :src="item.avatar" />
+              <h2>{{ item.name }}</h2>
+            </div>
+            <i>{{ item.createTime }}</i>
+          </div>
+          <div class="bbs-item__info--content">
+            <p>{{ item.content }}</p>
+            <ai-uploader v-if="item.images && item.images.length" :instance="instance" :value="item.images" :limit="9" disabled></ai-uploader>
+            <div class="text-button" @click="remove(item.id)">删除动态</div>
+          </div>
+        </div>
+        <div class="bbs-replay">
+          <div class="bbs-replay__item" v-for="(replay, index) in item.replyList" :key="index">
+            <div class="bbs-replay__item--top">
+              <img :src="replay.headPortrait" />
+              <div class="right">
+                <div class="right-user">
+                  <h2>{{ replay.createUserName }}</h2>
+                  <i>回复</i>
+                  <h2>{{ replay.lastReplyName }}</h2>
+                </div>
+                <span>{{ replay.createTime }}</span>
+              </div>
+            </div>
+            <p>{{ replay.content }}</p>
+            <div class="text-button" @click="removeReplay(replay.id)">删除评论</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <ai-empty class="empty" v-else></ai-empty>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Add',
+
+    props: {
+      id: String,
+      instance: Function
+    },
+
+    data () {
+      return {
+        list: []
+      }
+    },
+
+    created () {
+      this.getInfo(this.id)
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/apppostinfo/listWitReply?activityId=${id}`).then(res => {
+          if (res.code === 0) {
+            this.list = res.data.map(v => {
+              return {
+                ...v,
+                images: v.images ? JSON.parse(v.images) : []
+              }
+            })
+          }
+        })
+      },
+
+      removeReplay(id) {
+        this.$confirm('确定删除该数据?').then(() => {
+          this.instance.post(`/app/apppostreply/delete?id=${id}`).then((res) => {
+            if (res.code == 0) {
+              this.getInfo(this.id)
+              this.$message.success('删除成功！')
+            }
+          })
+        })
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据?').then(() => {
+          this.instance.post(`/app/apppostinfo/delete?id=${id}`).then((res) => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .bbs {
+    padding-top: 16px;
+
+    ::v-deep .ai-detail__content {
+      background: #F3F6F9;
+    }
+
+    ::v-deep .ai-empty__bg {
+      margin-top: 0;
+    }
+
+    .text-button {
+      cursor: pointer;
+      color: #5088FF;
+      font-size: 14px;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    .bbs-replay {
+      margin-top: 16px;
+      padding: 0 16px;
+      background: #F5F6F7;
+
+      .bbs-replay__item {
+        padding: 16px 0;
+        border-bottom: 1px solid #DDDDDD;
+
+        .text-button {
+          margin-left: 48px;
+        }
+
+        & > p {
+          line-height: 19px;
+          margin: 8px 0 8px 48px;
+          font-size: 14px;
+          color: #333333;
+        }
+
+        .bbs-replay__item--top {
+          display: flex;
+          align-items: center;
+
+          img {
+            width: 40px;
+            height: 40px;
+            margin-right: 8px;
+            border-radius: 50%;
+          }
+
+          .right {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex: 1;
+
+            .right-user {
+              display: flex;
+              align-items: center;
+            }
+
+            h2 {
+              color: #333333;
+              font-size: 14px;
+            }
+
+            i {
+              padding: 0 4px;
+              font-style: normal;
+              font-size: 14px;
+              color: #999999;
+            }
+
+            span {
+              color: #999999;
+              font-size: 14px;
+            }
+          }
+        }
+
+        &:last-child {
+          border: none;
+        }
+      }
+    }
+
+    .bbs-item__info {
+      .bbs-item__info--content {
+        padding-left: 64px;
+
+        p {
+          font-size: 14px;
+          color: #333333;
+          margin-bottom: 10px;
+          line-height: 19px;
+        }
+      }
+
+      .bbs-item__info--top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 6px;
+        padding-left: 16px;
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          img {
+            width: 40px;
+            height: 40px;
+            margin-right: 8px;
+            border-radius: 50%;
+          }
+
+          h2 {
+            color: #333333;
+            font-size: 14px;
+          }
+        }
+
+        i {
+          color: #999999;
+          font-size: 14px;
+          font-style: normal;
+        }
+      }
+    }
+
+    .bbs-title {
+      display: flex;
+      align-items: center;
+      height: 56px;
+      line-height: 1;
+      margin: 0 0 16px;
+      padding: 0px 16px;
+      background: #FFFFFF;
+      color: #333333;
+      font-size: 16px;
+      border-radius: 4px;
+      border: 1px solid #D8E0E8;
+
+      i {
+        padding: 0 4px;
+        color: #5088FF;
+        font-style: normal;
+      }
+    }
+
+    .bbs-item {
+      margin-bottom: 16px;
+      padding: 16px;
+      background: #FFFFFF;
+      border-radius: 4px;
+      border: 1px solid #D8E0E8;
+    }
+  }
+</style>
diff --git a/packages/3.0.0/AppVillageActivity/components/List.vue b/packages/3.0.0/AppVillageActivity/components/List.vue
new file mode 100644
index 00000000..6058d7d5
--- /dev/null
+++ b/packages/3.0.0/AppVillageActivity/components/List.vue
@@ -0,0 +1,257 @@
+<template>
+  <ai-list class="AppPetitionManage" isTabs>
+    <template slot="content">
+      <ai-search-bar class="search-bar">
+        <template slot="left">
+          <el-button type="primary" icon="iconfont iconAdd" @click="toAdd">发布活动</el-button>
+          <ai-select
+            v-model="search.isRealName"
+            @change="search.current = 1, getList()"
+            placeholder="是否实名"
+            :selectList="dict.getDict('wxCustomerAddWay')">
+          </ai-select>
+        </template>
+        <template slot="right">
+          <el-input
+            v-model="search.name"
+            class="search-input"
+            size="small"
+            @keyup.enter.native="search.current = 1, getList()"
+            placeholder="请输入备注、昵称、姓名"
+            clearable
+            @change="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"
+        ref="aitableex"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        v-loading="isLoading"
+        @getList="getList">
+        <el-table-column slot="options" width="220px" 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="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
+    },
+
+    data () {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          name: '',
+          tagId: '',
+          wxUserId: '',
+          isRealName: ''
+        },
+        isLoading: false,
+        ids: [],
+        total: 10,
+        colConfigs: [
+          { prop: 'realName', label: '真实姓名', align: 'center' },
+          {
+            prop: 'identityNumber', label: '是否实名', align: 'center', 
+            render: (h, params) => {
+              return h('span', {
+              }, params.row.realName ? '是' : '否')
+            }
+          },
+          { prop: 'wxUserNames', label: '所属员工', align: 'center' },
+          { slot: 'tags' },
+          { prop: 'createTime', label: '添加时间', align: 'left' },
+          { prop: 'addWay', label: '添加渠道', align: 'center', formart: v => this.dict.getLabel('wxCustomerAddWay', v) },
+          { slot: 'options', label: '操作', align: 'center' }
+        ],
+        tableData: []
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    created () {
+      this.isLoading = true
+      this.dict.load(['wxCustomerAddWay']).then(() => {
+        this.getList()
+      })
+    },
+
+    methods: {
+      getList() {
+        this.instance.post(`/app/wxcp/wxcustomer/list`, null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+
+            this.isLoading = false
+          } else {
+            this.isLoading = false
+          }
+        }).catch(() => {
+          this.isLoading = false  
+        })
+      },
+
+      toAdd (id) {
+        this.$emit('change', {
+          type: 'Add',
+          params: {
+            id
+          }
+        })
+      },
+
+      remove (id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/apppetition/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+
+      toDetail (id) {
+        this.$emit('change', {
+          type: 'Detail',
+          params: {
+            id: id
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .table-tags {
+    .el-tag {
+      margin-right: 8px;
+      margin-bottom: 8px;
+      border: 1px solid #D0D4DC;
+      background: #F3F4F7;
+      border-radius: 4px;
+      font-size: 13px;
+      color: #222222;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .ellipsis {
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+  }
+
+  .tags {
+    .tag-item {
+      display: flex;
+      align-items: center;
+      padding-bottom: 30px;
+      padding-top: 30px;
+      border-bottom: 1px solid #EEEEEE;
+
+      &:first-child {
+        padding-top: 0;
+      }
+
+      .el-tag {
+        margin-right: 8px;
+        color: #222222;
+      }
+
+      h2 {
+        width: 88px;
+        margin-right: 40px;
+        text-align: right;
+        color: #888888;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .avatar {
+    text-align: right;
+    img {
+      position: relative;
+      top: 4px;
+      width: 40px;
+      height: 40px;
+      border-radius: 2px;
+      border: 1px solid #CCCCCC;
+    }
+  }
+
+  .userinfo {
+    display: flex;
+    align-items: center;
+    line-height: 1;
+
+    .userinfo-right__top {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    .userinfo-right__bottom {
+      text-align: left;
+    }
+
+    i {
+      cursor: pointer;
+      font-style: normal;
+      color: #888888;
+      font-size: 14px;
+    }
+
+    h3 {
+      margin-top: 0;
+      margin-bottom: 0;
+      margin-right: 8px;
+      color: #222222;
+      font-weight: normal;
+      font-size: 14px;
+    }
+
+    span {
+      color: #3C7FC8;
+      white-space: nowrap;
+    }
+  }
+</style>
diff --git a/packages/3.0.0/AppVillageActivity/components/Statistics.vue b/packages/3.0.0/AppVillageActivity/components/Statistics.vue
new file mode 100644
index 00000000..09268148
--- /dev/null
+++ b/packages/3.0.0/AppVillageActivity/components/Statistics.vue
@@ -0,0 +1,495 @@
+<template>
+  <ai-list class="statistics" isTabs style="width: 100%">
+    <template #left>
+      <div class="villagecode-left">
+        <div class="villagecode-left__title">
+          <h2>地区</h2>
+        </div>
+        <div class="addressBook-left__list">
+          <div class="addressBook-left__list--title">
+            <el-input
+              class="addressBook-left__list--search"
+              size="mini"
+              placeholder="请输入地区名称"
+              v-model="unitName"
+              suffix-icon="iconfont iconSearch">
+            </el-input>
+          </div>
+          <el-tree
+            :filter-node-method="filterNode"
+            ref="tree"
+            :props="defaultProps"
+            node-key="id"
+            :data="areaTree"
+            highlight-current
+            :current-node-key="search.areaId"
+            :default-expanded-keys="defaultExpanded"
+            :default-checked-keys="defaultChecked"
+            @current-change="onTreeChange">
+          </el-tree>
+        </div>
+      </div>
+    </template>
+    <template slot="content" v-loading="loading">
+      <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.increase }}</h2>
+        </div>
+        <div class="statistics-top__item">
+          <span>今日流失</span>
+          <h2 style="color: #F8B425">{{ info.decrease }}</h2>
+        </div>
+      </div>
+      <ai-card title="趋势图">
+        <template #content>
+          <div class="chart" style="height: 340px; width: 100%;"></div>
+          <ai-empty v-if="false" style="height: 148px;"></ai-empty>
+        </template>
+      </ai-card>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  import * as echarts from 'echarts'
+  export default {
+    name: 'Statistics',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        chart: null,
+        info: {},
+        chartWidth: '',
+        loading: false,
+        defaultExpanded: [],
+        defaultChecked: [],
+        areaTree: [],
+        defaultProps: {
+          children: 'children',
+          label: 'name'
+        },
+        areaId: '',
+        currIndex: -1,
+        areaList: [],
+        unitName: '',
+        search: {
+          current: 1,
+          areaId: ''
+        }
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    watch: {
+      unitName (val) {
+        this.$refs.tree.filter(val)
+      }
+    },
+
+    mounted () {
+      this.search.areaId = this.user.info.areaId
+      this.areaName = this.user.info.areaName
+      this.getTree()
+      this.getAreaList()
+      this.loading = true
+      this.$nextTick(() => {
+        this.chart = echarts.init(document.querySelector('.chart'))
+        window.addEventListener('resize', this.onResize)
+        this.getInfo()
+      })
+    },
+
+    destroyed () {
+      window.removeEventListener('resize', this.onResize)
+    },
+
+    methods: {
+      onResize () {
+        this.chart.resize()
+      },
+
+      onTreeChange (e) {
+        this.search.areaId = e.id
+        this.areaName = e.name
+        this.search.current = 1
+
+        this.$nextTick(() => {
+          this.getList()
+        })
+      },
+
+      filterNode(value, data) {
+        if (!value) return true
+        return data.name.indexOf(value) !== -1
+      },
+
+      getTree () {
+        this.instance.post(`/admin/area/queryAllArea?id=${this.user.info.areaId}`).then(res => {
+          if (res.code === 0) {
+            let parent = res.data.map(v => {
+              v.label = v.name
+              v.children = []
+
+              return v
+            }).filter(e => !e.parentid)[0]
+            this.defaultExpanded = [parent.id]
+            this.defaultChecked = [parent.id]
+            this.search.areaId = parent.id
+            this.addChild(parent, res.data)
+            this.areaTree = [parent]
+
+            this.$nextTick(() => {
+              this.$refs.tree.setCurrentKey(parent.id)
+            })
+          }
+        })
+      },
+
+      addChild (parent, list) {
+        for (let i = 0; i < list.length; i++) {
+          if (list[i].parentId === parent.id) {
+            parent.children.push(list[i])
+          }
+        }
+
+        if (list.length > 0) {
+          parent['children'].map(v => this.addChild(v, list))
+        }
+      },
+
+      getAreaList() {
+        this.instance.post(`/admin/area/queryAreaByParentId?id=341021104000`).then(res => {
+          if (res.code == 0) {
+            this.areaList = res.data
+          }
+        })
+      },
+
+      getInfo () {
+        this.instance.post(`/app/wxcp/wxcustomerlog/customerStatistic`).then(res => {
+          if (res.code == 0) {
+            this.info = res.data.today
+            this.initChart(res.data.list)
+            this.loading = false
+          } else {
+            this.loading = false
+          }
+        })
+      },
+
+      initChart (data) {
+        const x = Object.keys(data)
+        const y = Object.values(data)
+        let option = {
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            type: "plain"
+          },
+          grid: {
+            left: '20px',
+            right: '38px',
+            bottom: '14px',
+            top: '30px',
+            containLabel: true
+          },
+          color: ['#2266FF', '#22AA99', '#F8B425'],
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              align: 'center',
+              padding: [2, 0, 0, 0],
+              interval: 0,
+              fontSize: 14,
+              color: '#666666'
+            },
+            boundaryGap: false,
+            axisLine: {
+              lineStyle: {
+                color: '#E1E5EF'
+              }
+            },
+            data: x
+          },
+          yAxis: {
+            axisTick: {
+              length: 0,
+              show: false
+            },
+            splitLine: {
+              show: true,
+              lineStyle:{
+                color: ['#E1E5EF'],
+                width: 1,
+                type: 'solid'
+              }
+            },
+            nameTextStyle: {
+              color: '#666666',
+              align: 'left'
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              color: '#666666'
+            },
+            type: 'value'
+          },
+          series: [
+            {
+              name: '居民总数',
+              type: 'line',
+              data: y.map(v => v.total)
+            },
+            {
+              name: '新增居民数',
+              type: 'line',
+              data: y.map(v => v.increase)
+            },
+            {
+              name: '流失居民数',
+              type: 'line',
+              data: y.map(v => v.decrease)
+            }
+          ]
+        }
+        this.chart.setOption(option)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+.villagecode {
+  .table-tags {
+    .el-tag {
+      margin-right: 8px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+  .statistics {
+    ::v-deep .ai-list__content--right-wrapper {
+      background: transparent!important;
+      box-shadow: none!important;
+      padding: 0 0 0!important;
+    }
+
+    ::v-deep .ai-list {
+      padding: 0!important;
+    }
+
+  .addressBook-left__list {
+    height: calc(100% - 40px);
+    padding: 8px 8px;
+    overflow: auto;
+
+    .addressBook-left__tags--item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 40px;
+      padding: 0 8px 0 16px;
+      color: #222222;
+
+      &.addressBook-left__tags--item-active, &:hover {
+        background: #E8EFFF;
+        color: #2266FF;
+
+        i, span {
+          color: #2266FF;
+        }
+      }
+
+      span {
+        font-size: 14px;
+      }
+
+      i {
+        cursor: pointer;
+        color: #8e9ebf;
+        font-size: 16px;
+      }
+    }
+
+    .addressBook-left__list--title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+
+      .addressBook-left__list--search {
+        flex: 1;
+        ::v-deep input {
+          width: 100%;
+        }
+      }
+
+      .el-button {
+        width: 84px;
+        flex-shrink: 1;
+        margin-right: 8px;
+      }
+    }
+
+    span {
+      color: #222222;
+      font-size: 14px;
+    }
+
+    ::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;
+        }
+      }
+    }
+  }
+
+  ::v-deep .ai-list__content--left {
+    margin-right: 2px;
+  }
+
+  .villagecode-left {
+    width: 100%;
+    height: auto;
+    background: #FAFAFB;
+
+    .villagecode-left__title {
+      display: flex;
+      align-items: center;
+      height: 40px;
+      padding: 0 16px;
+      background: #fff;
+
+      h2 {
+        color: #222;
+        font-size: 14px;
+      }
+    }
+
+    .villagecode-left__list {
+      height: calc(100% - 40px);
+      padding: 8px 0;
+      overflow: auto;
+
+      span {
+        display: block;
+        height: 40px;
+        line-height: 40px;
+        padding: 0 24px;
+        color: #222222;
+        font-size: 14px;
+        cursor: pointer;
+        border-right: 2px solid transparent;
+        background: transparent;
+
+        &:hover {
+          color: #2266FF;
+          background: #E8EFFF;
+        }
+
+        &.left-active {
+          color: #2266FF;
+          border-color: #2266FF;
+          background: #E8EFFF;
+        }
+      }
+    }
+  }
+
+  ::v-deep .ai-list__content--right {
+
+    .ai-list__content--right-wrapper {
+      min-height: 100%;
+    }
+  }
+
+    .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;
+        }
+      }
+    }
+  }
+</style>