居民档案

src/apps/AppMarryAndDie/AppMarryAndDie.vue

@@ -252,7 +252,6 @@ export default {
 
     change(index) {
       this.currentTabs = index
-      // this.Echart = echarts.init(document.getElementById('yearStatistic'))
       this.getList()
       this.getEchart()
     },

src/apps/AppResidentFile/AppResidentFile.vue

@@ -0,0 +1,338 @@
+<template>
+  <div class="AppResidentFile">
+    <u-tabbar v-model="currentTabBar" :list="list" @change="changeTab" style="height: 0"></u-tabbar>
+
+    <div v-if="currentTabBar == 0">
+      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
+
+      <div class="peopleGroup" v-if="currentTabs == 0">
+        <div class="topcard">
+          <div class="cards">
+            <div class="items">
+              <span class="items1">1</span>
+              <span>群聊人数</span>
+            </div>
+
+            <div class="items">
+              <span class="items2">1</span>
+              <span>群成员总数</span>
+            </div>
+
+            <div class="items">
+              <span class="items3">1</span>
+              <span>今日入群</span>
+            </div>
+
+            <div class="items">
+              <span class="items4">1</span>
+              <span>今日退群</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="echartes" id="echarts1">
+          <div class="echartss"></div>
+        </div>
+      </div>
+
+      <div class="people" v-if="currentTabs == 1">
+        <div class="topcard">
+          <div class="cards">
+            <div class="items">
+              <span class="items1">1</span>
+              <span>群聊人数</span>
+            </div>
+
+            <div class="items">
+              <span class="items2">1</span>
+              <span>群成员总数</span>
+            </div>
+
+            <div class="items">
+              <span class="items3">1</span>
+              <span>今日入群</span>
+            </div>
+
+            <div class="items">
+              <span class="items4">1</span>
+              <span>今日退群</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="echartes" id="echarts2">
+          <div class="echartss"></div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="currentTabBar == 1">1</div>
+
+    <div v-if="currentTabBar == 2">2</div>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'AppResidentFile',
+  appName: '居民档案',
+  components: {},
+  props: {},
+  data() {
+    return {
+      list: [
+        {
+          iconPath: 'home',
+          selectedIconPath: 'home-fill',
+          text: '统计分析',
+          isDot: true,
+          customIcon: false,
+        },
+        {
+          iconPath: 'photo',
+          selectedIconPath: 'photo-fill',
+          text: '居民列表',
+          customIcon: false,
+        },
+
+        {
+          iconPath: 'play-right',
+          selectedIconPath: 'play-right-fill',
+          text: '居民群列表',
+          customIcon: false,
+        },
+      ],
+      currentTabBar: 0,
+      currentTabs: 0,
+      tabList: [
+        {
+          name: '居民群管理',
+        },
+        {
+          name: '居民管理',
+        },
+      ],
+      Echarts1: null,
+      Echarts2: null,
+    }
+  },
+  computed: {
+    ...mapState(['user', 'global']),
+  },
+  watch: {},
+  onLoad() {
+    this.getEchart()
+  },
+  mounted() {
+    this.Echarts1 = echarts.init(document.getElementById('echarts1'))
+  },
+  methods: {
+    getEchart() {
+      this.$http.post(`/app/appresident/queryCustInfoByAreaId?areaId=${this.user.areaId}`).then((res) => {
+        if (res.code === 0) {
+          this.initEcharts1(res.data['年龄层次'])
+          this.initEcharts2(res.data['人口分布'])
+        }
+      })
+    },
+
+    initEcharts1(data) {
+      var option = {
+        xAxis: {
+          type: 'category',
+          data: data.map((v) => v.v1),
+          axisLine: {
+            lineStyle: { color: '#157EFF' },
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+          },
+          axisTick: {
+            interval: 'auto',
+          },
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#666',
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#D8DDE6',
+            },
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+          },
+        },
+        series: [
+          {
+            color: '#0072FF',
+            barWidth: 30,
+            data: data.map((v) => v.v2),
+            type: 'line',
+          },
+        ],
+      }
+
+      option && this.Echarts1.setOption(option)
+    },
+
+    initEcharts2(data) {
+      var options = {
+        xAxis: {
+          type: 'category',
+          data: data.map((v) => v.name),
+          axisLine: {
+            lineStyle: { color: '#157EFF' },
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+          },
+          axisTick: {
+            interval: 'auto',
+          },
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#666',
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#D8DDE6',
+            },
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+          },
+        },
+        series: [
+          {
+            color: '#0072FF',
+            barWidth: 30,
+            data: data.map((v) => v.v1),
+            type: 'line',
+          },
+        ],
+      }
+
+      options && this.Echarts2.setOption(options)
+    },
+
+    changeTab(e) {
+      this.currentTabBar = e
+    },
+
+    change(index) {
+      this.currentTabs = index
+      this.$nextTick(() => {
+        if (index == 0) {
+          this.Echarts1 = echarts.init(document.getElementById('echarts1'))
+        } else {
+          this.Echarts2 = echarts.init(document.getElementById('echarts2'))
+        }
+        this.getEchart()
+      })
+
+      // this.getList()
+      // this.getEchart()
+    },
+  },
+  onReachBottom() {
+    // this.current = this.current + 1
+    // this.getList()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+uni-page-body {
+  height: 100%;
+}
+.AppResidentFile {
+  height: 100%;
+  .peopleGroup,
+  .people {
+    .topcard {
+      position: relative;
+      background: url(http://respub.sinoecare.net/20211221/4-20211221095551.png) no-repeat;
+      // background: url(http://respub.sinoecare.net/20211221/44-20211221095613.png) no-repeat;
+      background-size: 100% 100%;
+      height: 320px;
+      .cards {
+        box-sizing: border-box;
+        position: absolute;
+        bottom: -35px;
+        width: 92%;
+        box-sizing: border-box;
+        margin: 0 32px;
+        height: 232px;
+        background: #ffffff;
+        border-radius: 8px;
+        z-index: 999;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        .items {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          span {
+            font-size: 30px;
+            font-weight: 500;
+            color: #999999;
+          }
+          .items1 {
+            font-size: 40px;
+            font-weight: bold;
+            color: #354fc7;
+          }
+          .items2 {
+            font-size: 40px;
+            font-weight: bold;
+            color: #868686;
+          }
+          .items3 {
+            font-size: 40px;
+            font-weight: bold;
+            color: #5fba95;
+          }
+          .items4 {
+            font-size: 40px;
+            font-weight: bold;
+            color: #f09535;
+          }
+        }
+      }
+    }
+
+    .echartes {
+      margin-top: 64px;
+      height: 616px;
+      background: #fff;
+      box-sizing: border-box;
+
+      .echartss {
+        margin: 0 32px;
+        height: 100%;
+        padding-top: 16px;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+</style>