From 772fbf27b31b0188a9c493253c785f8560051c2a Mon Sep 17 00:00:00 2001
From: shijingjing <1789544664@qq.com>
Date: Mon, 5 Sep 2022 17:30:00 +0800
Subject: [PATCH 1/7] css

---
 src/project/saas/AppCooperationPropaganda/addPropaganda.vue | 2 +-
 src/project/saas/AppCooperationPropaganda/tagsList.vue      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/project/saas/AppCooperationPropaganda/addPropaganda.vue b/src/project/saas/AppCooperationPropaganda/addPropaganda.vue
index e46f096d..e9ed2dd2 100644
--- a/src/project/saas/AppCooperationPropaganda/addPropaganda.vue
+++ b/src/project/saas/AppCooperationPropaganda/addPropaganda.vue
@@ -9,7 +9,7 @@
       <div><span class="color_red">*</span><span class="title">发送范围</span></div>
       <div @click="toSleectScoped">
         <span>
-          <span v-if="!form.sendScope">请选择</span>
+          <span class="color_gray" v-if="!form.sendScope">请选择</span>
           <span v-if="form.sendScope">已选择</span>
           <u-icon name="arrow-right" color="#CCD0D3"></u-icon>
         </span>
diff --git a/src/project/saas/AppCooperationPropaganda/tagsList.vue b/src/project/saas/AppCooperationPropaganda/tagsList.vue
index deb0e999..43ce8345 100644
--- a/src/project/saas/AppCooperationPropaganda/tagsList.vue
+++ b/src/project/saas/AppCooperationPropaganda/tagsList.vue
@@ -152,7 +152,7 @@ export default {
         color: #333333;
         font-size: 28px;
         background: #F3F4F7;
-        border-radius: 8px;
+        border-radius: 4px;
         max-width: 100%;
         text-overflow: ellipsis;
         overflow: hidden;

From ce94a10992c18d24e471be4dac8d356450f75092 Mon Sep 17 00:00:00 2001
From: shijingjing <1789544664@qq.com>
Date: Tue, 6 Sep 2022 11:04:38 +0800
Subject: [PATCH 2/7]   userListIds

---
 src/project/saas/AppCooperationPropaganda/scopedSelect.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/project/saas/AppCooperationPropaganda/scopedSelect.vue b/src/project/saas/AppCooperationPropaganda/scopedSelect.vue
index 101c5813..206c04f5 100644
--- a/src/project/saas/AppCooperationPropaganda/scopedSelect.vue
+++ b/src/project/saas/AppCooperationPropaganda/scopedSelect.vue
@@ -85,6 +85,7 @@ export default {
       }).then((res)=>{
           if(res?.userList) {
             this.userListIds = res.userList.map(e => e.id)
+            console.log(this.userListIds,'userListIds');
           }
         }
       ).catch((err) => {

From b1928e0abe1f4d550ca467657ab47331e2ece34f Mon Sep 17 00:00:00 2001
From: shijingjing <1789544664@qq.com>
Date: Tue, 6 Sep 2022 11:20:25 +0800
Subject: [PATCH 3/7] bug

---
 src/project/saas/AppCooperationPropaganda/scopedSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/project/saas/AppCooperationPropaganda/scopedSelect.vue b/src/project/saas/AppCooperationPropaganda/scopedSelect.vue
index 206c04f5..2cdc7229 100644
--- a/src/project/saas/AppCooperationPropaganda/scopedSelect.vue
+++ b/src/project/saas/AppCooperationPropaganda/scopedSelect.vue
@@ -3,7 +3,7 @@
     <div class="item">
       <div>添加人</div>
       <div @click="selectUser">
-        <span v-if="selectedUser.length">已选择{{ selectedUser.length || userListIds.length }}名成员</span>
+        <span v-if="selectedUser.length || userListIds.length">已选择{{ selectedUser.length || userListIds.length }}名成员</span>
         <span class="color_gray" v-else>请选择</span>
         <u-icon name="arrow-right" color="#CCD0D3"></u-icon>
       </div>

From 71a73477dbe32625d42d273033627f25e95b8769 Mon Sep 17 00:00:00 2001
From: shijingjing <1789544664@qq.com>
Date: Tue, 6 Sep 2022 11:23:08 +0800
Subject: [PATCH 4/7] =?UTF-8?q?=E9=83=A8=E9=97=A8=E9=80=89=E4=BA=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/project/saas/AppCooperationPropaganda/scopedSelect.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/project/saas/AppCooperationPropaganda/scopedSelect.vue b/src/project/saas/AppCooperationPropaganda/scopedSelect.vue
index 2cdc7229..c5ab9883 100644
--- a/src/project/saas/AppCooperationPropaganda/scopedSelect.vue
+++ b/src/project/saas/AppCooperationPropaganda/scopedSelect.vue
@@ -81,10 +81,10 @@ export default {
         fromDepartmentId: 0,
         mode: "multi",
         type: ["user"],
-        selectedUserIds: this.userList?.map(e => e.id)
+        selectedUserIds: this.userListIds?.map(e => e.id)
       }).then((res)=>{
           if(res?.userList) {
-            this.userListIds = res.userList.map(e => e.id)
+            this.userListIds = res.userList
             console.log(this.userListIds,'userListIds');
           }
         }

From 4b0102bb63a14ff7dc7344c0822e9cd46615cdd7 Mon Sep 17 00:00:00 2001
From: shijingjing <1789544664@qq.com>
Date: Tue, 6 Sep 2022 14:30:14 +0800
Subject: [PATCH 5/7] =?UTF-8?q?=E7=AD=9B=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppCooperationPropaganda.vue              | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/project/saas/AppCooperationPropaganda/AppCooperationPropaganda.vue b/src/project/saas/AppCooperationPropaganda/AppCooperationPropaganda.vue
index ae5536df..75427dce 100644
--- a/src/project/saas/AppCooperationPropaganda/AppCooperationPropaganda.vue
+++ b/src/project/saas/AppCooperationPropaganda/AppCooperationPropaganda.vue
@@ -54,9 +54,15 @@
                 <span class="label" v-if="userIdList.length">已选择</span>
                 <span v-else style="color:#999;">请选择</span>
                 <u-icon name="arrow-right" color="#303133" size="24" style="margin-left:8px;"/>
-              </div>
+              </div> 
             </AiPagePicker>
           </div>
+          <div class="type-list">
+            <div class="type-title">任务状态</div>
+            <div class="items">
+              <AiSelect dict="mstStatus" v-model="status"></AiSelect>
+            </div>
+          </div>
           <div class="type-list">
             <div class="type-title">群发时间</div>
             <div class="item">
@@ -107,7 +113,8 @@ export default {
       taskTitle: '',
       createUserId: '',
       userList: [],
-      userIdList: []
+      userIdList: [],
+      status: ''
     }
   },
   methods: {
@@ -399,6 +406,12 @@ export default {
           ::v-deep .uni-input-placeholder {
             text-align: right;
           }
+        }        
+      }
+      .items {
+        ::v-deep .AiSelect .display {
+          justify-content: space-between;
+          width: 100%;
         }
       }
       .active {
@@ -428,6 +441,9 @@ export default {
       }
     }
   }
+  ::v-deep .uicon-arrow-right::before {
+    color: #606266 !important;
+  }
   .page_picker {
     display: flex;
     justify-content: space-between;

From cc4bed2a480147aa84c9f5ece21260289fe1189e Mon Sep 17 00:00:00 2001
From: shijingjing <1789544664@qq.com>
Date: Tue, 6 Sep 2022 14:37:26 +0800
Subject: [PATCH 6/7] =?UTF-8?q?=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cooperationDetail.vue                     | 69 ++++++-------------
 1 file changed, 20 insertions(+), 49 deletions(-)

diff --git a/src/project/saas/AppCooperationPropaganda/cooperationDetail.vue b/src/project/saas/AppCooperationPropaganda/cooperationDetail.vue
index 69100ae1..c4f89b30 100644
--- a/src/project/saas/AppCooperationPropaganda/cooperationDetail.vue
+++ b/src/project/saas/AppCooperationPropaganda/cooperationDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="cooperationDetail">
-    <AiTopFixed>
+    <!-- <AiTopFixed>
       <div class="tab-select">
         <div
           class="item"
@@ -12,7 +12,7 @@
           {{ item }}<span></span>
         </div>
       </div>
-    </AiTopFixed>
+    </AiTopFixed> -->
 
     <div class="content">
       <div class="header">
@@ -66,29 +66,19 @@
 
       <div class="list_content">
         <div class="list_card">
-          <div class="tab" v-show="update0">
+          <div class="tab" v-show="update">
             <u-subsection
-              :list="subsection0"
+              :list="subsection"
               mode="button"
               activeColor="#3c9cff"
-              :current="subIndex0"
-              @change="changeSub0"
-            ></u-subsection>
-          </div>
-
-          <div class="tab" v-show="update1">
-            <u-subsection
-              :list="subsection1"
-              mode="button"
-              activeColor="#3c9cff"
-              :current="subIndex1"
-              @change="changeSub1"
+              :current="subIndex"
+              @change="changeSub"
             ></u-subsection>
           </div>
 
           <AiTable
             :data="tableData"
-            :colConfigs="tabIndex == 0 ? colConfigs0 : colConfigs1"
+            :colConfigs="colConfigs"
             v-if="tableData.length"
           >
             <u-td slot="groupOwnerId" slot-scope="{ row }" style="border: none;">
@@ -125,34 +115,28 @@ export default {
       currentClickTime: "",
       detail: {},
 
-      subsection0: [
+      subsection: [
         { name: "未执行" },
         { name: "已执行" },
         { name: "无法执行" },
       ],
-      subsection1: [
-        { name: "未送达" },
-        { name: "已送达" },
-        { name: "无法送达" },
-      ],
-      update0: true,
-      update1: false,
+      update: true,
     };
   },
   computed: {
-    colConfigs0() {
+    colConfigs() {
       return [
         { slot: "groupOwnerId", label: "成员" },
-        { label: "预计送达居民群", prop: "groupCount" },
-      ];
-    },
-    colConfigs1() {
-      return [
-        { label: "居民群", prop: "groupName" },
-        { label: "群人数", prop: "memberCount" },
-        { slot: "groupOwnerId", label: "群主" },
+        { label: "预计送达居民", prop: "groupCount" },
       ];
     },
+    // colConfigs1() {
+    //   return [
+    //     { label: "居民群", prop: "groupName" },
+    //     { label: "群人数", prop: "memberCount" },
+    //     { slot: "groupOwnerId", label: "群主" },
+    //   ];
+    // },
   },
   onLoad(o) {
     this.id = o.id;
@@ -239,12 +223,8 @@ export default {
       }
     },
     // 切换分段器
-    changeSub0(index) {
-      this.subIndex0 = index;
-      this.getStatistics();
-    },
-    changeSub1(index) {
-      this.subIndex1 = index;
+    changeSub(index) {
+      this.subIndex = index;
       this.getStatistics();
     },
     // 获取数据
@@ -389,7 +369,6 @@ export default {
   }
 
   .header {
-    // height: 160px;
     padding: 32px;
     box-sizing: border-box;
     background: #fff;
@@ -504,14 +483,6 @@ export default {
 
       .tab {
         margin-bottom: 34px;
-
-        ::v-deep .u-subsection uni-view{
-          background: #eeef !important;
-        }
-      }
-
-      .sub-select {
-
       }
     }
   }

From bdff532ebbc7873a49c6c53dfe2d92097ff198ef Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Tue, 6 Sep 2022 17:17:49 +0800
Subject: [PATCH 7/7] =?UTF-8?q?=E5=B1=85=E6=B0=91=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apps/AppPageHome.vue/AppPageHome.vue      |   2 +-
 .../AppResidentStatistics.vue                 | 117 ++++++++++
 .../components/Files.vue                      | 115 ++++++++++
 .../components/Message.vue                    | 199 +++++++++++++++++
 .../components/People.vue                     | 210 ++++++++++++++++++
 .../AppResidentStatistics/img/location.png    | Bin 0 -> 766 bytes
 6 files changed, 642 insertions(+), 1 deletion(-)
 create mode 100644 src/project/saas/AppResidentStatistics/AppResidentStatistics.vue
 create mode 100644 src/project/saas/AppResidentStatistics/components/Files.vue
 create mode 100644 src/project/saas/AppResidentStatistics/components/Message.vue
 create mode 100644 src/project/saas/AppResidentStatistics/components/People.vue
 create mode 100644 src/project/saas/AppResidentStatistics/img/location.png

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 0000000000000000000000000000000000000000..c6f0463863e8c2fd5b11e76661db770d05dec625
GIT binary patch
literal 766
zcmV<a0s;MrP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px%xJg7oRA@u(m^p}4K@f(&KT#1y5Ih1SHFCi#*j+FZ6az6aQ84yM6eA4`#K1sJ
zL=#<21x-xEKopDw7r_&aJQ5RK5X1vlgOZY77;tA^z1KbS7?_Uhb^TvecUAQhL%uZR
z`WXSVoxx%mFta7VZeTmG8CVM}OMqX2_rP=DA#hjH_Y&~g0A{uxH~}0076(QB1a1K5
zCA|%PGp|`=05e+zoB@sl3mS^}4O|3HOZwGhk46Aywhp)rY;59mo^M_PdnLWAyI*Yp
zGus5*16I{_R$>1M*d^&joqcNoq{u(&gZMek4zaCHCc*&e%ug3QHr)d4$7v#ZC+Yy4
zOVy@MhMU@YbvhaOI0TSN<?D=U6VcLX<JD;_QevY3Q^3KxDl+Y_ORDr)36MIhU#@7A
zngtx#8<l6x*H~(Fhk%7auphwcs*W82*azGUI{gUjk>n%8f6L5##JB^j3GTOF(yd;$
z5r8Ye;ebPr{A4%rbKfV3$H7cYN$Tl40^rUj0sxmK9ShiDW|x4Y0o!RwleroA46Fz^
z^XPk@s9a{|0r9|8tr<xxa{>HlM25AcRTr+~82RY^tx7%cM^aDUkt5V5z^o*ndb_R&
zz|bF|HZSoLN#nU0XtRu7m2@N*VCWl}SBy4B34b^HDABW8RbFCGpP98W%w3b@vs2F%
z1@J!)!#hr=EDZ8Nb3u~-s;OL|3?u+=D1&%Xz5>RJKPeN0|4!-Wqkbm6hd)$?J{g2F
z&@sns0UiL$qfUZ$Uw|Ewo(1jynbihJnb->4F9_k{cS?F%M|@*|!VrzcX8{y~$P%9o
zkO`43z6d}=h$7;P0n~&jCcY>@5TdB~;s6y8#l`mppbJD_#P<y#L2Lldrp9zi(wn+X
wDq`QL6Gt{4l+6fWP?7HDXOw|a1~Mb?7liW|Kst8+)c^nh07*qoM6N<$g8Y(1!2kdN

literal 0
HcmV?d00001