数据统计

src/components/rank/components/customer.vue

@@ -39,7 +39,7 @@
       }
     },
     mounted() {
-      this.unit = this.chartData.unit;
+    //   this.unit = this.chartData.unit;
       if (this.chartData) {
         this.barData.data = this.chartData.customerYData;
         this.lineData.data = this.chartData.activationYData;

src/components/rank/dataCount.vue

@@ -4,25 +4,18 @@
       <div class="row items-center" style="margin-bottom: 20px;">
         <div class="page-title col">平台数据</div>
         <div class="row items-center">
-                    <el-select v-model="parameters.branchId" style="margin-right: 20px;">
+          <el-select v-model="parameters.branchId" style="margin-right: 20px;" @change="getCustomerStatic()">
             <el-option v-for="(x,i) in branchs" :key="i" :label="x.BName" :value="x.Id"></el-option>
           </el-select>
-                    <el-date-picker
-                        v-model="parameters.dateRange"
-                        type="daterange"
-                        align="right"
-                        unlink-panels
-                        range-separator="至"
-                        start-placeholder="开始日期"
-                        end-placeholder="结束日期"
-                        value-format="yyyy/MM/dd"
-                        :clearable="false"
-                        :picker-options="pickerOptions">
+          <el-date-picker v-model="parameters.dateRange" type="daterange" align="right" unlink-panels
+            @change="getCustomerStatic()" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+            value-format="yyyy/MM/dd" :clearable="false" :picker-options="pickerOptions">
           </el-date-picker>
         </div>
       </div>
       <div class="card rounded row items-center">
-                <div class="menu-item" :class="{'active':i==active}" v-for="(x,i) in menus" :key="i" @click="handleClick(i)">{{ x.title }}</div>
+        <div class="menu-item" :class="{'active':i==active}" v-for="(x,i) in menus" :key="i" @click="handleClick(i)">
+          {{ x.title }}</div>
       </div>
       <div class="sub-title q-my-md">今日实时数据</div>
       <div class="card rounded big">
@@ -37,7 +30,11 @@
           <div class="data-items col">
             <div>客户总数</div>
             <div class="num" style="margin: 6px 0;">
-                            <span class="datanum">26052</span>
+              <span class="datanum">
+                <template v-if="customerObj">
+                  {{customerObj.TotalCustomerCount}}
+                </template>
+              </span>
               <span>个</span>
             </div>
             <div class="text-info"> &nbsp; </div>
@@ -46,21 +43,33 @@
           <div class="data-items col">
             <div>今日新增客户</div>
             <div class="num" style="margin: 6px 0;">
-                            <span class="datanum">89</span>
+              <span class="datanum">
+                <template v-if="customerObj">
+                  {{customerObj.TodayCustomerCount}}
+                </template>
+              </span>
               <span>个</span>
             </div>
             <div class="text-info">
               <span>较昨日</span>
-                            <span class="green" style="margin:0 12px 0 5px;">+23%</span>
-                            <span>较昨日</span>
-                            <span class="red" style="margin-left: 5px;">-125%</span>
+              <template v-if="customerObj">
+                <template v-if="customerObj.CustomerPercent>0">
+                  <span class="green" style="margin:0 12px 0 5px;"> {{customerObj.CustomerPercent}}%</span>
+                </template>
+                <template v-else>
+                  <span class="red" style="margin-left: 5px;">{{customerObj.CustomerPercent}}%</span>
+                </template>
+              </template>
             </div>
           </div>
           <el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
           <div class="data-items col">
             <div>小程序激活数</div>
             <div class="num" style="margin: 6px 0;">
-                            <span class="datanum">455</span>
+              <span class="datanum">
+                <template v-if="customerObj">
+                  {{customerObj.TotalActivationCount}}
+                </template></span>
               <span>个</span>
             </div>
             <div class="text-info">&nbsp;</div>
@@ -70,14 +79,21 @@
           <div class="data-items col">
             <div>今日激活数</div>
             <div class="num" style="margin: 6px 0;">
-                            <span class="datanum">26052</span>
+              <span class="datanum"><template v-if="customerObj">
+                  {{customerObj.TodayActivationCount}}
+                </template></span>
               <span>个</span>
             </div>
             <div class="text-info">
               <span>较昨日</span>
-                            <span class="green" style="margin:0 12px 0 5px;">+23%</span>
-                            <span>较昨日</span>
-                            <span class="red" style="margin-left: 5px;">-125%</span>
+              <template v-if="customerObj">
+                <template v-if="customerObj.ActivationPrecent>0">
+                  <span class="green" style="margin:0 12px 0 5px;"> {{customerObj.ActivationPrecent}}%</span>
+                </template>
+                <template v-else>
+                  <span class="red" style="margin-left: 5px;"> {{customerObj.ActivationPrecent}}%</span>
+                </template>
+              </template>
             </div>
           </div>
         </div>
@@ -87,11 +103,11 @@
           <div class="sub-title">客户数据走势</div>
           <div class="">
             <span class="dot"></span>
-                        <span class="text-info">{{ parameters.dateRange.join(' - ') }}</span>
+            <span class="text-info">{{ parameters.dateRange.join('-') }}</span>
           </div>
         </div>
         <div style="height: 320px;">
-                    <Customer></Customer>
+          <Customer :chartData="customerObj"></Customer>
         </div>
       </div>
 
@@ -251,7 +267,7 @@
             </div>
             <el-divider direction="vertical" style="margin: 0 12px;height: 80%;"></el-divider>
             <div class="data-items col">
-                            <div>日转发人数</div>
+              <div>日转发次数</div>
               <div class="num" style="margin: 6px 0;">
                 <span class="datanum">89</span>
                 <span>人</span>
@@ -362,20 +378,20 @@
   </div>
 </template>
 <script>
-import Customer from './components/customer.vue'
-import Coreview from './components/coreview.vue';
-import Pagecount from './components/pagecount.vue';
-import Citiescount from './components/citiescount.vue'
-import Tradecount from './components/tradecount.vue'
-export default {
-    components:{
+  import Customer from './components/customer.vue'
+  import Coreview from './components/coreview.vue';
+  import Pagecount from './components/pagecount.vue';
+  import Citiescount from './components/citiescount.vue'
+  import Tradecount from './components/tradecount.vue'
+  export default {
+    components: {
       Customer,
       Coreview,
       Pagecount,
       Citiescount,
       Tradecount
     },
-    data(){
+    data() {
       return {
         active: 0,
         pickerOptions: {
@@ -408,8 +424,7 @@ export default {
             return time.getTime() > new Date(Date.now() - 3600 * 1000 * 24);
           },
         },
-            menus:[
-                {
+        menus: [{
             title: '客户数据',
             path: 'coreData'
           },
@@ -419,37 +434,108 @@ export default {
           },
           {
             title: '访问分析',
-                    path:'accessAnalysis'
+            path: 'accessAnalysis'
           },
           {
             title: '产品统计',
-                    path:'productStatistics'
+            path: 'productStatistics'
           }
         ],
-            branchs:[],
-            parameters:{
-                branchId:-1,
-                dateRange:[]
+        branchs: [],
+        parameters: {
+          branchId: -1,
+          dateRange: [],
+          StartDate: "",
+          EndDate: "",
+        },
+        coreId: 1,
+        coreLists: [{
+          "Id": 1,
+          "Name": "累计用户数"
+        }, {
+          "Id": 2,
+          "Name": "日访问人数"
+        }, {
+          "Id": 3,
+          "Name": "日打开次数"
+        }, {
+          "Id": 4,
+          "Name": "日访问页面数"
+        }, {
+          "Id": 5,
+          "Name": "日新增用户"
+        }, {
+          "Id": 6,
+          "Name": "日打开次数(新用户)"
+        }, {
+          "Id": 7,
+          "Name": "总添加人数"
+        }, {
+          "Id": 8,
+          "Name": "新添加人数"
+        }, {
+          "Id": 9,
+          "Name": "活跃日留存"
+        }, {
+          "Id": 10,
+          "Name": "新增日留存"
+        }, {
+          "Id": 11,
+          "Name": "流失用户数"
+        }, {
+          "Id": 12,
+          "Name": "回流用户数"
+        }],
+        metrics: [{
+            id: 1,
+            name: "访问次数"
+          },
+          {
+            id: 2,
+            name: "访问人数"
           },
-            coreId:1,
-            coreLists:[{"Id":1,"Name":"累计用户数"},{"Id":2,"Name":"日访问人数"},{"Id":3,"Name":"日打开次数"},{"Id":4,"Name":"日访问页面数"},{"Id":5,"Name":"日新增用户"},{"Id":6,"Name":"日打开次数(新用户)"},{"Id":7,"Name":"总添加人数"},{"Id":8,"Name":"新添加人数"},{"Id":9,"Name":"活跃日留存"},{"Id":10,"Name":"新增日留存"},{"Id":11,"Name":"流失用户数"},{"Id":12,"Name":"回流用户数"}],
-            metrics : [
-                { id: 1, name: "访问次数" },
-                { id: 2, name: "访问人数" },
-                { id: 3, name: "次均停留时长" },
-                { id: 4, name: "进入页次数" },
-                { id: 5, name: "退出页次数" },
-                { id: 6, name: "转发次数" },
-                { id: 7, name: "转发人数" }
+          {
+            id: 3,
+            name: "次均停留时长"
+          },
+          {
+            id: 4,
+            name: "进入页次数"
+          },
+          {
+            id: 5,
+            name: "退出页次数"
+          },
+          {
+            id: 6,
+            name: "转发次数"
+          },
+          {
+            id: 7,
+            name: "转发人数"
+          }
         ],
         metricsId: 1,
-            areas:[{Id:1,Name:'省份'},{Id:2,Name:'城市'}],
-            platforms:[{Id:1,Name:'全部'},{Id:2,Name:'旅小友'}],
-            platformId:1,
-            areaId:1,
+        areas: [{
+          Id: 1,
+          Name: '省份'
+        }, {
+          Id: 2,
+          Name: '城市'
+        }],
+        platforms: [{
+          Id: 1,
+          Name: '全部'
+        }, {
+          Id: 2,
+          Name: '旅小友'
+        }],
+        platformId: 1,
+        areaId: 1,
+        customerObj: {},
       }
     },
-    created(){
+    created() {
       this.getCompanyList();
       const end = new Date();
       const start = new Date();
@@ -457,8 +543,27 @@ export default {
       end.setTime(end.getTime() - 3600 * 1000 * 24);
       this.parameters.dateRange = [start.toLocaleString().split(' ')[0], end.toLocaleString().split(' ')[0]]
     },
+    mounted() {
+      this.getCustomerStatic();
+    },
     methods: {
-        handleClick(index){
+      getCustomerStatic() {
+        if (this.parameters.dateRange && this.parameters.dateRange.length == 2) {
+          var tempArray = this.parameters.dateRange;
+          this.parameters.StartDate = tempArray[0];
+          this.parameters.EndDate = tempArray[1]
+        }
+        var that = this;
+        that.apipost("erp_post_GetCustomerStatic", that.parameters, (res) => {
+          console.log("res", res);
+          if (res.data.resultCode == 1) {
+            this.customerObj = res.data.data;
+          } else {
+            that.Error(res.data.message);
+          }
+        });
+      },
+      handleClick(index) {
         this.active = index;
       },
       getCompanyList() {
@@ -481,17 +586,19 @@ export default {
       },
 
     }
-}
+  }
+
 </script>
 <style>
-.full-box{
+  .full-box {
     width: 100%;
     height: 100%;
     background: #f7f7f7;
-    padding:20px;
+    padding: 20px;
     box-sizing: border-box;
-}
-.full-box .dot {
+  }
+
+  .full-box .dot {
     color: #00ce8b;
     amination: realtime 2s infinite;
     -webkit-animation: realtime 2s infinite;
@@ -503,80 +610,98 @@ export default {
     display: inline-block;
     border-radius: 50%;
     margin-right: 3px;
-}
-.full-box .text-info{
+  }
+
+  .full-box .text-info {
     display: inline-block;
     vertical-align: baseline;
     font-size: 14px;
     font-weight: 400;
     color: rgba(0, 0, 0, .3);
-    font-family: Avenir,'PingFang SC Regular';
-}
-.full-box .red{
+    font-family: Avenir, 'PingFang SC Regular';
+  }
+
+  .full-box .red {
     color: #fa5151;
-}
-.full-box .green{
+  }
+
+  .full-box .green {
     color: #00ce8b !important;
-}
-.full-box .el-divider{
+  }
+
+  .full-box .el-divider {
     height: 60px !important;
     margin: 0 12px;
     background: #f7f7f7;
-}
-.full-box .num{
+  }
+
+  .full-box .num {
     font-family: Avenir;
-}
-.full-box .q-mt-md{
+  }
+
+  .full-box .q-mt-md {
     margin-top: 20px;
-}
-.full-box .q-mb-md{
+  }
+
+  .full-box .q-mb-md {
     margin-bottom: 20px;
-}
-.full-box .q-ml-md{
+  }
+
+  .full-box .q-ml-md {
     margin-left: 20px;
-}
-.full-box .q-mr-md{
+  }
+
+  .full-box .q-mr-md {
     margin-right: 20px;
-}
-.full-box .q-mx-md{
+  }
+
+  .full-box .q-mx-md {
     margin-right: 20px;
     margin-left: 20px;
-}
-.full-box .q-my-md{
+  }
+
+  .full-box .q-my-md {
     margin-top: 20px;
     margin-bottom: 20px;
-}
-.full-box .page-title{
+  }
+
+  .full-box .page-title {
     color: rgba(0, 0, 0, .9);
     font-size: 24px;
     font-weight: 500;
-}
-.full-box .data-box{
+  }
+
+  .full-box .data-box {
     max-width: 1366px;
     margin: 0 auto;
-}
-.full-box .card{
+  }
+
+  .full-box .card {
     background: #fff;
     padding: 16px 20px;
-}
-.full-box .card.big{
-    padding:32px 20px;
-}
-.full-box .menu-item{
+  }
+
+  .full-box .card.big {
+    padding: 32px 20px;
+  }
+
+  .full-box .menu-item {
     margin-right: 30px;
     font-size: 17px;
     color: rgba(0, 0, 0, .55);
     font-weight: 400;
     cursor: pointer;
-}
-.full-box .menu-item.active,
-.full-box .sub-title{
+  }
+
+  .full-box .menu-item.active,
+  .full-box .sub-title {
     font-family: PingfangSC-Medium, Helvetica;
     font-weight: 500;
     color: rgba(0, 0, 0, .9);
     font-size: 17px;
-}
-.full-box .data-items{
+  }
+
+  .full-box .data-items {
     background-color: #fff;
     padding: 12px;
     border-radius: 12px;
@@ -584,59 +709,78 @@ export default {
     /* font-weight: 400; */
     color: rgba(0, 0, 0, .9);
     font-family: PingFang SC Regular;
-}
-.full-box .text-small{
+  }
+
+  .full-box .text-small {
     font-size: 12px;
     /* font-weight: 400; */
     color: rgba(0, 0, 0, .9);
     font-family: PingFang SC Regular;
-}
-.full-box .data-items:hover{
+  }
+
+  .full-box .data-items:hover {
     background-color: #f7f7f7;
-}
-.full-box .data-items .datanum{
+  }
+
+  .full-box .data-items .datanum {
     font-size: 24px;
     font-weight: 500;
-}
-.full-box .rounded{
+  }
+
+  .full-box .rounded {
     border-radius: 12px;
-}
-.full-box .row{
+  }
+
+  .full-box .row {
     display: flex;
-}
-.full-box .items-center{
+  }
+
+  .full-box .items-center {
     align-items: center;
-}
-.full-box .col{
+  }
+
+  .full-box .col {
     flex: 1;
-}
-.full-box .justify-between{
+  }
+
+  .full-box .justify-between {
     justify-content: space-between;
-}
-.full-box .juesify-center{
+  }
+
+  .full-box .juesify-center {
     justify-content: center;
-}
-.full-box .el-input__inner{
+  }
+
+  .full-box .el-input__inner {
     color: rgba(0, 0, 0, .9) !important;
     border-radius: 12px !important;
     border: none !important;
-}
-.full-box .el-date-editor .el-range-separator{
+  }
+
+  .full-box .el-date-editor .el-range-separator {
     width: 18px !important;
-}
-.full-box .el-input__icon{
-    color: rgba(0, 0, 0,.9)!important;
+  }
+
+  .full-box .el-input__icon {
+    color: rgba(0, 0, 0, .9) !important;
     font-weight: bolder;
-}
-@keyframes realtime {
+  }
+
+  @keyframes realtime {
     0% {
-        opacity: 1; /* 初始状态，元素完全不透明 */
+      opacity: 1;
+      /* 初始状态，元素完全不透明 */
     }
+
     50% {
-        opacity: 0.2; /* 动画进行到一半时，元素接近透明 */
+      opacity: 0.2;
+      /* 动画进行到一半时，元素接近透明 */
     }
+
     100% {
-        opacity: 1; /* 动画结束时，元素恢复完全不透明 */
+      opacity: 1;
+      /* 动画结束时，元素恢复完全不透明 */
+    }
   }
-}
+
 </style>