1

src/components/rank/components/customer.vue

@@ -3,29 +3,21 @@
 </template>
 
 <script>
-import echarts from 'echarts';
-
-export default {
+  import echarts from 'echarts';
+  export default {
     name: 'CustomChart',
     data() {
       return {
         chart: null,
         barData: {
           name: '新增同业数',
-                data: [123, 211, 178, 289, 90, 156, 222, 101, 267, 199, 125, 291, 187, 92, 243, 148, 212, 117, 279, 103, 137, 256, 221, 193, 88, 283, 165, 111, 239, 107],
+          data: [],
         },
         lineData: {
           name: '新增激活数',
-                data: [105, 219, 142, 297, 176, 84, 233, 120, 265, 199, 207, 91, 251, 153, 281, 113, 224, 168, 246, 131, 273, 185, 99, 237, 147, 292, 109, 214, 171, 260],
-            },
-            xAxisData: [
-    '11/01', '11/02', '11/03', '11/04', '11/05',
-    '11/06', '11/07', '11/08', '11/09', '11/10',
-    '11/11', '11/12', '11/13', '11/14', '11/15',
-    '11/16', '11/17', '11/18', '11/19', '11/20',
-    '11/21', '11/22', '11/23', '11/24', '11/25',
-    '11/26', '11/27', '11/28', '11/29', '11/30'
-],
+          data: [],
+        },
+        xAxisData: [],
         unit: '人',
 
       };
@@ -36,12 +28,22 @@ export default {
         default: null
       }
     },
-    mounted() {
+    watch: {
+      chartData: function (old, val) {
         if (this.chartData) {
-            this.barData = this.chartData.barData;
-            this.lineData = this.chartData.lineData;
+          this.barData.data = this.chartData.customerYData;
+          this.lineData.data = this.chartData.activationYData;
+          this.xAxisData = this.chartData.xData;
+        }
+        this.initChart();
+      }
+    },
+    mounted() {
       this.unit = this.chartData.unit;
-            this.xAxisData = this.chartData.xAxisData;
+      if (this.chartData) {
+        this.barData.data = this.chartData.customerYData;
+        this.lineData.data = this.chartData.activationYData;
+        this.xAxisData = this.chartData.xData;
       }
       this.initChart();
     },
@@ -49,7 +51,6 @@ export default {
       initChart() {
         const chartDom = document.getElementById('chart');
         this.chart = echarts.init(chartDom);
-
         const option = {
           tooltip: {
             trigger: 'axis', // 设置为 'axis' 以确保鼠标悬浮在曲线任意位置时都能触发事件
@@ -122,8 +123,7 @@ export default {
               formatter: '{value} ' + this.unit,
             },
           },
-                series: [
-                    {
+          series: [{
               name: this.barData.name,
               type: 'bar',
               barWidth: 20,
@@ -152,16 +152,6 @@ export default {
         };
 
         this.chart.setOption(option);
-
-            // this.chart.on('mouseover', (params) => {
-            //     console.log(params);
-            //     this.setOpacity(params.seriesName);
-            // });
-
-            // // 监听鼠标离开事件
-            // this.chart.on('mouseout', () => {
-            //     this.setOpacity('');
-            // });
       },
       setOpacity(seriesName) {
         const option = this.chart.getOption();
@@ -199,12 +189,14 @@ export default {
         this.chart.dispose();
       }
     },
-};
+  };
+
 </script>
 
 <style scoped>
-#chart {
+  #chart {
     width: 100%;
     height: 100%;
-}
+  }
+
 </style>

src/components/rank/dataCount.vue

@@ -4,23 +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="结束日期"
+          <el-date-picker v-model="parameters.dateRange" type="daterange" align="right" unlink-panels
+            @change="getCustomerStatic" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
             :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">
@@ -35,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">
+                  {{customerObj.TotalCustomerCount}}
+                </template>
+              </span>
               <span>个</span>
             </div>
             <div class="text-info"> &nbsp; </div>
@@ -44,7 +43,11 @@
           <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">
@@ -58,7 +61,11 @@
           <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>
@@ -68,7 +75,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.TodayActivationCount}}
+                </template>
+              </span>
               <span>个</span>
             </div>
             <div class="text-info">
@@ -89,7 +100,7 @@
           </div>
         </div>
         <div style="height: 320px;">
-                    <Customer></Customer>
+          <Customer :chartData="customerObj"></Customer>
         </div>
       </div>
 
@@ -360,20 +371,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: {
@@ -403,8 +414,7 @@ export default {
             }
           }]
         },
-            menus:[
-                {
+        menus: [{
             title: '客户数据',
             path: 'coreData'
           },
@@ -414,43 +424,133 @@ 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: "访问人数"
+          },
+          {
+            id: 3,
+            name: "次均停留时长"
+          },
+          {
+            id: 4,
+            name: "进入页次数"
+          },
+          {
+            id: 5,
+            name: "退出页次数"
+          },
+          {
+            id: 6,
+            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: 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();
     },
+    mounted() {
+      this.getCustomerStatic();
+    },
     methods: {
-        handleClick(index){
+      handleClick(index) {
         this.active = 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[0]
+        }
+        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);
+          }
+        });
+      },
       getCompanyList() {
         const userInfo = this.getLocalStorage();
         const RB_Group_id = userInfo.RB_Group_id;
@@ -471,17 +571,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;
@@ -493,80 +595,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;
@@ -574,59 +694,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>