数据总览

src/project/saas/AppDataStatistics/AppDataOverview.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="AppDataOverview">
+    <div class="head">
+      <div class="head_title">
+        <span>数据总览</span>
+        <span>数据截至 昨日24:00</span>
+      </div>
+      <div class="head_data">
+        <div class="head_data_item">
+          <span class="dot"></span>
+          <span>本月访问次数 50</span>
+        </div>
+        <div class="head_data_item">
+          <span class="dot"></span>
+          <span>本月访问人数 30</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="information">
+      <div class="u-sub">
+        <u-subsection :list="list" :current="current"  @change="sectionChange"></u-subsection>
+      </div>
+
+      <div class="card_list">
+        <div class="card" v-for="(item,index) in dataArray" :key="index">
+          <div class="card_name">{{ item }}</div>
+          <div class="card_num">{{ Number(data[item]).toLocaleString('en-US') }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AppDataOverview",
+  data() {
+    return {
+      list: [
+        { name: '本周' },
+        { name: '本月' }
+      ],
+      current: 0,
+      data: {},
+      dataArray: ['新增居民档案','新增网格员','新增走访记录','新增矛盾调解','新增宣发记录'],
+      beginDate: '2022-12-19'
+    }
+  },
+  onShow() {
+    this.getData()
+  },
+  methods: {
+    sectionChange(e) {
+      this.current = e
+      this.getData()
+    },
+    getData() {
+      this.$http.post(`/app/appwxcpopenstatistics/statistics`,null, {
+        params: {
+          beginDate: '2022-12-19',
+          type: this.current==0? '1':'2'
+        }
+      }).then(res=> {
+        if(res?.data) {
+          console.log(res);
+        }
+      })
+    }
+  },
+  onLoad(o) {
+    this.beginDate = o.beginDate
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppDataOverview {
+  .head {
+    height: 212px;
+    background: #3975C6;
+    .head_title { 
+      color: #FFFFFF;
+      padding: 32px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      span:first-child {
+        font-size: 44px;
+      }
+      span:last-child {
+        font-size: 24px;
+      }
+    }
+    .head_data {
+      display: flex;
+      padding: 0 32px;
+      box-sizing: border-box;
+      .head_data_item {
+        flex: 1;
+        color: #FFFFFF;
+        .dot {
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 4px;
+          background: #FFFFFF;
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+
+  .information {
+    width: 100%;
+    border-radius: 16px;
+    padding: 32px;
+    box-sizing: border-box;
+
+    .u-sub {
+      padding: 32px;
+      box-sizing: border-box;
+      background: #FFFFFF;
+      border-radius: 16px 16px 0 0;
+    }
+
+    .card_list {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      background: #FFFFFF;
+      padding: 0 32px;
+      box-sizing: border-box;
+      border-radius: 0 0 16px 16px;
+      
+      .card {
+        width: 50%;
+        height: 160px;
+        text-align: center;
+        .card_name {
+          margin-top: 32px;
+          color: #666666;
+        }
+        .card_num {
+          font-size: 36px;
+          color: #000000;
+          font-weight: 600;
+          margin-top: 12px;
+        }
+      }
+    }
+  }
+}
+</style>

src/project/saas/AppDataStatistics/AppDataStatistics.vue

@@ -14,6 +14,8 @@
       <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 ref='list' :is="tabList[tabIndex].component" :areaId="areaId" class="component" />
+
+    <button @click="toOverData">按钮</button>
   </div>
 </template>
 
@@ -60,6 +62,9 @@ export default {
     tabClick(index) {
       this.tabIndex = index
     },
+    toOverData() {
+      uni.navigateTo({url:'./AppDataOverview'})
+    },
     areaSelect(e) {
       this.areaId = e
       this.refreshList()