数据统计

src/project/saas/AppDataStatistics/AppDataStatistics.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="AppDataStatistics">
+    <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 resident from './components/resident.vue'
+import update from './components/update'
+import wechat from './components/wechat'
+import message from './components/message'
+
+export default {
+  name: "AppDataStatistics",
+  appName: "数据统计",
+  data() {
+    return {
+      tabList: [
+        {
+          text: '居民统计',
+          component: resident
+        },
+        {
+          text: '更新统计',
+          component: update
+        },
+        {
+          text: '微信统计',
+          component: wechat
+        },
+        {
+          text: '会话统计',
+          component: message
+        },
+      ],
+      tabIndex: 0,
+      areaId: '',
+      areaName: '',
+    }
+  },
+  components: {resident, update, wechat, message},
+  methods: {
+    tabClick(index) {
+      this.tabIndex = index
+    },
+  },
+  onShow() {
+    document.title = "数据统计"
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppDataStatistics {
+  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>

src/project/saas/AppDataStatistics/components/message.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="message"></div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.message {
+
+}
+</style>

src/project/saas/AppDataStatistics/components/resident.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="resident"></div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.resident {
+  
+}
+</style>

src/project/saas/AppDataStatistics/components/update.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="update"></div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.update {
+
+}
+</style>

src/project/saas/AppDataStatistics/components/wechat.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="wechat"></div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.wechat {
+
+}
+</style>