diff --git a/src/apps/AppPageHome.vue/AppPageHome.vue b/src/apps/AppPageHome.vue/AppPageHome.vue
index a4904f24..f35958e3 100644
--- a/src/apps/AppPageHome.vue/AppPageHome.vue
+++ b/src/apps/AppPageHome.vue/AppPageHome.vue
@@ -27,7 +27,7 @@ export default {
   },
   onLoad(options) {
     this.id = options.id
-    this.id = '7a4701d5641543cca4419488db368d3e'
+    // this.id = '7a4701d5641543cca4419488db368d3e'
     this.getAppInfo()
   },
   methods: {
diff --git a/src/project/saas/AppResidentStatistics/AppResidentStatistics.vue b/src/project/saas/AppResidentStatistics/AppResidentStatistics.vue
new file mode 100644
index 00000000..97fd4425
--- /dev/null
+++ b/src/project/saas/AppResidentStatistics/AppResidentStatistics.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="AppResidentStatistics">
+    <AiTopFixed>
+      <div class="area-content">
+        <AiAreaPicker v-model="areaId" :name.sync="areaName">
+          <div flex>
+            <img src="./img/location.png" alt="" class="icon-img">
+            <AiMore v-model="areaName" icon="arrow-down"/>
+          </div>
+        </AiAreaPicker>
+      </div>
+    </AiTopFixed>
+    <div class="tab-list">
+      <div :class="index == tabIndex ? 'tab-item active' : 'tab-item'" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">{{ item.text }}<span></span></div>
+    </div>
+    <component :is="tabList[tabIndex].component" class="component" />
+  </div>
+</template>
+
+<script>
+import Files from './components/Files'
+import Message from './components/Message'
+import People from './components/People'
+export default {
+  name: "AppResidentStatistics",
+  appName: "居民统计",
+  data() {
+    return {
+      tabList: [
+        {
+          text: '人群统计',
+          component: People
+        },
+        {
+          text: '档案统计',
+          component: Files
+        },
+        {
+          text: '会话统计',
+          component: Message
+        },
+      ],
+      tabIndex: 0,
+      areaId: '',
+      areaName: '',
+    }
+  },
+  components: {Files, Message, People},
+  methods: {
+    tabClick(index) {
+      this.tabIndex = index
+    },
+  },
+  onShow() {
+    document.title = "居民统计"
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppResidentStatistics {
+  width: 100%;
+  height: 100%;
+  background-color: #F5F6F7;
+  padding-bottom: 112px;
+  ::v-deep .AiTopFixed {
+    .content {
+      background-color: #3975C6;
+      color: #fff;
+    }
+    .icon-img{
+      width: 48px;
+      height: 48px;
+    }
+  }
+  ::v-deep .AiMore{
+    span{
+      color: #fff;
+    }
+  }
+  .tab-list {
+    width: 100%;
+    line-height: 88px;
+    display: flex;
+    background-color: #fff;
+    position: fixed;
+    z-index: 9;
+
+    .tab-item {
+      flex: 1;
+      text-align: center;
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #666;
+      position: relative;
+    }
+    .active {
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #000;
+      span {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        margin-left: -25px;
+        width: 50px;
+        height: 6px;
+        background: #3399FF;
+        border-radius: 4px;
+      }
+    }
+  }
+  .component{
+    padding-top: 88px;
+  }
+}
+</style>
diff --git a/src/project/saas/AppResidentStatistics/components/Files.vue b/src/project/saas/AppResidentStatistics/components/Files.vue
new file mode 100644
index 00000000..00cea72c
--- /dev/null
+++ b/src/project/saas/AppResidentStatistics/components/Files.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="Files">
+    <div class="title">特殊人群</div>
+    <div class="chart-content" style="height: 264px;" id="echartDataSpecial"></div>
+    <div class="title">年龄分布</div>
+    <div class="chart-content" style="height: 244px;" id="echartDataAge"></div>
+    <div class="title">男女比例</div>
+    <div class="chart-content" style="height: 264px;" id="echartDataSex"></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import echarts from 'echarts'
+export default {
+  name: "Files",
+  data() {
+    return {
+      echartDataSpecial: null,
+      echartDataAge: null,
+      echartDataSex: null
+    }
+  },
+  computed: { ...mapState(['user']) },
+  methods: {
+    chartInit() {
+      this.echartDataSpecial = echarts.init(document.getElementById('echartDataSpecial'))
+      this.echartDataAge = echarts.init(document.getElementById('echartDataAge'))
+      this.echartDataSex = echarts.init(document.getElementById('echartDataSex'))
+      var option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            data: [
+              { value: 1048, name: 'Search Engine' },
+              { value: 735, name: 'Direct' },
+              { value: 580, name: 'Email' },
+              { value: 484, name: 'Union Ads' },
+              { value: 300, name: 'Video Ads' }
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      this.echartDataSpecial.setOption(option)
+      this.echartDataSex.setOption(option)
+
+      var option2 = {
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [
+              120,
+              {
+                value: 200,
+                itemStyle: {
+                  color: '#a90000'
+                }
+              },
+              150,
+              80,
+              70,
+              110,
+              130
+            ],
+            type: 'bar'
+          }
+        ]
+      };
+      this.echartDataAge.setOption(option2)
+    },
+  },
+  created() {
+    this.$nextTick(() => {
+      this.chartInit()
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.Files {
+  padding: 0 32px;
+  .title {
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333;
+    line-height: 44px;
+    padding: 40px 0 24px 0;
+  }
+  .chart-content{
+    width: 100%;
+    background-color: #fff;
+    border-radius: 8px;
+  }
+}
+</style>
diff --git a/src/project/saas/AppResidentStatistics/components/Message.vue b/src/project/saas/AppResidentStatistics/components/Message.vue
new file mode 100644
index 00000000..c0ff99ec
--- /dev/null
+++ b/src/project/saas/AppResidentStatistics/components/Message.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="Message">
+    <div class="title">消息回复率</div>
+    <div class="title">单聊统计</div>
+    <div class="tab-content">
+      <div class="item" v-for="(item, index) in friendList" :key="index">
+        <p>{{ item.label }}</p>
+        <h3>{{ item.value }}</h3>
+      </div>
+    </div>
+    <div class="chart-content" id="chartFriend"></div>
+    <div class="title">单聊统计</div>
+    <div class="tab-content">
+      <div class="item" v-for="(item, index) in groupList" :key="index">
+        <p>{{ item.label }}</p>
+        <h3>{{ item.value }}</h3>
+      </div>
+    </div>
+    <div class="chart-content" id="chartGroup"></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import echarts from 'echarts'
+export default {
+  name: "Message",
+  data() {
+    return {
+      friendList: [
+        {
+          label: '单聊会话',
+          value: '235'
+        },
+        {
+          label: '单聊消息',
+          value: '23500'
+        }
+      ],
+      groupList: [
+        {
+          label: '活跃群聊',
+          value: '235'
+        },
+        {
+          label: '活跃群成员',
+          value: '23'
+        },
+        {
+          label: '群聊消息',
+          value: '255,625'
+        },
+      ],
+      echartDataFriend: null,
+      echartDataGroup: null
+    }
+  },
+  computed: { ...mapState(['user']) },
+  methods: {
+    chartInit() {
+      this.echartDataFriend = echarts.init(document.getElementById('chartFriend'))
+      this.echartDataGroup = echarts.init(document.getElementById('chartGroup'))
+      var option = {
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#E1E5EF', //x轴的颜色
+              width: 1, //轴线的宽度
+            },
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#666',
+            },
+          },
+          data: ['4月', '5月', '6月', '7月', '8月',]
+        },
+        yAxis: {
+          axisLine:{       //y轴
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#666',
+            },
+          },
+          type: 'value',
+          minInterval: 50,
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        series: [
+          {
+            data: [155, 130, 120, 160, 120, 130, 110],
+            type: 'line',
+            areaStyle: {//覆盖区域的渐变色
+            	normal: {
+            		color: {
+                  type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
+                    }
+                  ],
+                  global: false // 缺省为 false
+		       		  },
+            	}
+            },
+            lineStyle: {
+              normal: {
+                color: '#2891FF'
+              }
+            },
+            itemStyle : {
+              normal : {
+                color:'#2891FF',
+              }
+            }
+          }
+        ]
+      };
+      this.echartDataFriend.setOption(option)
+       this.echartDataGroup.setOption(option)
+    },
+  },
+  created() {
+    this.$nextTick(() => {
+      this.chartInit()
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.Message {
+  padding: 0 30px;
+  .title {
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333;
+    line-height: 44px;
+    padding: 40px 0 24px 0;
+    span {
+      font-size: 26px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #999;
+      line-height: 36px;
+    }
+  }
+  .tab-content {
+    display: flex;
+    padding: 24px 0;
+    background-color: #fff;
+    border-radius: 16px;
+    margin-bottom: 16px;
+    .item {
+      flex: 1;
+      text-align: center;
+      p {
+        font-size: 24px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #666;
+        line-height: 48px;
+      }
+      h3 {
+        font-size: 36px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #000;
+        line-height: 48px;
+      }
+    }
+  }
+  .chart-content {
+    width: 100%;
+    height: 517px;
+    background-color: #fff;
+    border-radius: 8px;
+  }
+}
+</style>
diff --git a/src/project/saas/AppResidentStatistics/components/People.vue b/src/project/saas/AppResidentStatistics/components/People.vue
new file mode 100644
index 00000000..db95af50
--- /dev/null
+++ b/src/project/saas/AppResidentStatistics/components/People.vue
@@ -0,0 +1,210 @@
+<template>
+  <div class="People">
+    <div class="title">
+      居民好友统计<span>（统计数据为去重后的数据）</span>
+    </div>
+    <div class="tab-content">
+      <div class="item" v-for="(item, index) in friendList" :key="index">
+        <p>{{ item.label }}</p>
+        <h3>{{ item.value }}</h3>
+      </div>
+    </div>
+    <div class="chart-content" id="chartFriend"></div>
+    <div class="title">
+      居民群统计<span>（统计数据为去重后的数据）</span>
+    </div>
+    <div class="tab-content">
+      <div class="item" v-for="(item, index) in groupList" :key="index">
+        <p>{{ item.label }}</p>
+        <h3>{{ item.value }}</h3>
+      </div>
+    </div>
+    <div class="chart-content" id="chartGroup"></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import echarts from 'echarts'
+export default {
+  name: "People",
+  data() {
+    return {
+      friendList: [
+        {
+          label: '居民好友',
+          value: '235,625'
+        },
+        {
+          label: '昨日新增',
+          value: '235'
+        },
+        {
+          label: '昨日流失',
+          value: '18'
+        }
+      ],
+      groupList: [
+        {
+          label: '居民群',
+          value: '235'
+        },
+        {
+          label: '居民群',
+          value: '235,625'
+        },
+        {
+          label: '昨日新增',
+          value: '235'
+        },
+        {
+          label: '昨日流失',
+          value: '18'
+        }
+      ],
+      echartDataFriend: null,
+      echartDataGroup: null
+    }
+  },
+  computed: { ...mapState(['user']) },
+  methods: {
+    chartInit() {
+      this.echartDataFriend = echarts.init(document.getElementById('chartFriend'))
+      this.echartDataGroup = echarts.init(document.getElementById('chartGroup'))
+      var option = {
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#E1E5EF', //x轴的颜色
+              width: 1, //轴线的宽度
+            },
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#666',
+            },
+          },
+          data: ['4月', '5月', '6月', '7月', '8月',]
+        },
+        yAxis: {
+          axisLine:{       //y轴
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#666',
+            },
+          },
+          type: 'value',
+          minInterval: 50,
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        series: [
+          {
+            data: [155, 130, 120, 160, 120, 130, 110],
+            type: 'line',
+            areaStyle: {//覆盖区域的渐变色
+            	normal: {
+            		color: {
+                  type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
+                    }
+                  ],
+                  global: false // 缺省为 false
+		       		  },
+            	}
+            },
+            lineStyle: {
+              normal: {
+                color: '#2891FF'
+              }
+            },
+            itemStyle : {
+              normal : {
+                color:'#2891FF',
+              }
+            }
+          }
+        ]
+      };
+      this.echartDataFriend.setOption(option)
+       this.echartDataGroup.setOption(option)
+    },
+  },
+  created() {
+    this.$nextTick(() => {
+      this.chartInit()
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.People {
+  padding: 0 30px;
+  .title {
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333;
+    line-height: 44px;
+    padding: 40px 0 24px 0;
+    span {
+      font-size: 26px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #999;
+      line-height: 36px;
+    }
+  }
+  .tab-content {
+    display: flex;
+    padding: 24px 0;
+    background-color: #fff;
+    border-radius: 16px;
+    margin-bottom: 16px;
+    .item {
+      flex: 1;
+      text-align: center;
+      p {
+        font-size: 24px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #666;
+        line-height: 48px;
+      }
+      h3 {
+        font-size: 36px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #000;
+        line-height: 48px;
+      }
+    }
+  }
+  .chart-content {
+    width: 100%;
+    height: 517px;
+    background-color: #fff;
+    border-radius: 8px;
+  }
+}
+</style>
diff --git a/src/project/saas/AppResidentStatistics/img/location.png b/src/project/saas/AppResidentStatistics/img/location.png
new file mode 100644
index 00000000..c6f04638
Binary files /dev/null and b/src/project/saas/AppResidentStatistics/img/location.png differ