diff --git a/src/project/pingchang/AppCommunityManagement/Statistics.vue b/src/project/pingchang/AppCommunityManagement/Statistics.vue
new file mode 100644
index 00000000..55c18b8f
--- /dev/null
+++ b/src/project/pingchang/AppCommunityManagement/Statistics.vue
@@ -0,0 +1,345 @@
+<template>
+  <div class="Statistics">
+    <div class="header">
+      <img src="./components/img/header.png" alt="" />
+      <div class="content-info">
+        <div class="title">
+          <h2>实时数据统计</h2>
+          <div>
+            <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" style="color: #666" selectRoot>
+              <span style="margin-left: 4px" v-if="areaName">{{ areaName }}</span>
+              <span v-else>地区选择</span>
+              <u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" />
+            </AiAreaPicker>
+          </div>
+        </div>
+        <div class="tab-content">
+          <div class="tab-item">
+            <h2 class="color-5AAD6A">{{totalInfo.back1}}</h2>
+            <p>累计排查</p>
+          </div>
+          <div class="tab-item">
+            <h2 class="color-4185F5">{{totalInfo.back2}}</h2>
+            <p>今日排查</p>
+          </div>
+          <div class="tab-item">
+            <h2 class="color-CD413A">{{totalInfo.back3}}</h2>
+            <p>今日核酸</p>
+          </div>
+          <div class="tab-item">
+            <h2 class="color-5AAD6A">{{totalInfo.report1}}</h2>
+            <p>我的排查</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="echart-content mar-t160">
+      <div class="title">排查数据统计</div>
+      <div class="echart" id="statistic"></div>
+      <div class="type-text"><span class="tips bg-32C5FF"></span>排查人数 <span class="tips bg-FFAA44"></span>已采核酸</div>
+    </div>
+
+    <div class="echart-content">
+      <div class="title">返乡数据统计
+        <span class="right-search">时间选择<u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" /></span>
+      </div>
+      <div class="chart-flex">
+        <div class="chart-box" id="statisticCircle" style="width: 200px;height: 200px;"></div>
+        <div class="type-num">
+          <div class="item status0">
+            <div class="label">
+              <span class="tips"></span>返乡登记
+            </div>
+            <div class="num">20</div>
+          </div>
+          <div class="item status1">
+            <div class="label">
+              <span class="tips"></span>卡口登记
+            </div>
+            <div class="num">20</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import echarts from 'echarts'
+export default {
+  name: 'Statistics',
+  data() {
+    return {
+      toadyText: '',
+      totalInfo: {},
+      echartData: null,
+      echartDataClrcle: null,
+      areaId: '',
+      areaName: '',
+
+    }
+  },
+  computed: { ...mapState(['user']) },
+  onShow() {
+    document.title = '排查统计'
+  },
+  onLoad() {
+    var date = new Date();
+    this.toadyText = date.getFullYear() + '-' + date.getMonth()+1 + '-' + date.getDate()
+    this.getTotal()
+  },
+  methods: {
+    areaSelect(e) {
+      this.areaId = e
+    },
+    getTotal() {
+      this.$http.post(`/app/appepidemicbackhomerecord/statisticForQW`).then((res) => {
+        if (res.code == 0) {
+          this.totalInfo = res.data.map
+          var xData = [], yDataBack = [], yDataError = []
+          for(let key  in res.data.fiveTotal){
+            xData.push(key)
+            yDataBack.push(res.data.fiveTotal[key])
+          }
+          for(let key  in res.data.fiveUnusual){
+            yDataError.push(res.data.fiveUnusual[key])
+          }
+          this.chartInit(xData, yDataBack, yDataError)
+          this.chartInitCircle()
+        }
+      })
+    },
+    chartInit(xData, yDataBack, yDataError) {
+      console.log(xData)
+      this.echartData = echarts.init(document.getElementById('statistic'))
+      var option = {
+        grid: {
+          left: '6%',
+          right: '8%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            type: 'line',
+            data: yDataBack,
+            lineStyle: {
+              normal: {
+                color: '#32c5ff'
+              }
+            },
+            itemStyle : {
+              normal : {
+                color:'#32c5ff',
+              }
+            }
+          },
+          {
+            type: 'line',
+            data: yDataError,
+            lineStyle: {
+              normal: {
+                color: '#ffaa44'
+              }
+            },
+            itemStyle : {
+              normal : {
+                color:'#ffaa44',
+              }
+            }
+          },
+        ]
+      };
+      this.echartData.setOption(option)
+    },
+    chartInitCircle() {
+      this.echartDataCircle = echarts.init(document.getElementById('statisticCircle'))
+      var option = {
+        color: ['#4185F5', '#5AAD6A'],
+        series: [
+          {
+            type: 'pie',
+            radius: '80%',
+            label: {
+              show: false,
+              position: 'center'
+            },
+            data: [
+              { value: 1048, name: '返乡登记' },
+              { value: 735, name: '卡口登记' },
+            ],
+          }
+        ]
+      };
+      this.echartDataCircle.setOption(option)
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.Statistics {
+  .header {
+    position: relative;
+    img {
+      width: 100%;
+      height: 504px;
+    }
+    .content-info {
+      width: calc(100% - 60px);
+      background: #fff;
+      box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.12);
+      border-radius: 8px;
+      position: absolute;
+      top: 368px;
+      left: 30px;
+      z-index: 99;
+      margin-bottom: 32px;
+      .title {
+        display: flex;
+        justify-content: space-between;
+        padding: 32px 32px 32px 48px;
+        h2 {
+          font-size: 36px;
+          font-family: PingFang-SC-Heavy, PingFang-SC;
+          font-weight: 800;
+          color: #333;
+          line-height: 50px;
+        }
+        div {
+          font-size: 26px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #999;
+          line-height: 36px;
+        }
+      }
+      .tab-content {
+        padding-bottom: 20px;
+        .tab-item {
+          display: inline-block;
+          width: 25%;
+          text-align: center;
+          margin-bottom: 32px;
+          h2 {
+            font-size: 52px;
+            font-family: DINAlternate-Bold, DINAlternate;
+            font-weight: bold;
+            line-height: 60px;
+            margin-bottom: 10px;
+            letter-spacing: -4px;
+          }
+          p {
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            color: #999;
+            line-height: 40px;
+          }
+          .color-5AAD6A {
+            color: #5aad6a;
+          }
+          .color-4185F5 {
+            color: #4185f5;
+          }
+          .color-CD413A {
+            color: #cd413a;
+          }
+        }
+      }
+    }
+  }
+  .mar-t160 {
+    margin-top: 160px;
+  }
+  .echart-content {
+    width: 100%;
+    background-color: #fff;
+    padding: 0 32px 38px;
+    box-sizing: border-box;
+    margin-bottom: 32px;
+    .title {
+      font-size: 32px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333;
+      line-height: 96px;
+      margin-bottom: 16px;
+      overflow: hidden;
+      .right-search {
+        float: right;
+        font-size: 28px;
+        color: #666;
+      }
+    }
+    .echart {
+      width: 100%;
+      height: 464px;
+      background: #f9f9f9;
+      border-radius: 8px;
+      margin-bottom: 32px;
+    }
+    .type-text {
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #666;
+      line-height: 40px;
+      text-align: center;
+      .tips {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        border-radius: 2px;
+        margin-right: 20px;
+      }
+      .bg-32C5FF {
+        background: #32c5ff;
+      }
+      .bg-FFAA44 {
+        background: #ffaa44;
+        margin-left: 80px;
+      }
+    }
+    .chart-flex {
+      display: flex;
+      justify-content: space-between;
+      .type-num {
+        width: 240px;
+        margin-top: 120px;
+        .item {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 32px;
+          .tips {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border-radius: 2px;
+            margin-right: 20px;
+          }
+        }
+        .status0 {
+          color: #4185F5;
+          .tips {
+            background-color: #4185F5;
+          }
+        }
+        .status1 {
+          color: #5AAD6A;
+          .tips {
+            background-color: #5AAD6A;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/project/pingchang/AppCommunityManagement/components/img/header.png b/src/project/pingchang/AppCommunityManagement/components/img/header.png
new file mode 100644
index 00000000..56cdd003
Binary files /dev/null and b/src/project/pingchang/AppCommunityManagement/components/img/header.png differ