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] =?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