统计

game-ui/src/api/business/user.js

@@ -1,5 +1,13 @@
 import request from '@/utils/request'
 
+// 首页用户统计
+export function indexStatics(query) {
+  return request({
+    url: '/business/tran_record/count',
+    method: 'get',
+    params: query
+  })
+}
 // 查询app用户列表
 export function listUser(query) {
   return request({

game-ui/src/views/index.vue

@@ -1,87 +1,389 @@
 <template>
-  <div class="app-container home">
+  <div class="app-container home" style="align-content: center">
+    <el-row :gutter="20">
+      <el-col :span="3">
+        <div class="grid-content bg-purple">
+          <div class="k-title">用户剩余金币</div>
+          <div class="k-content">{{ undefined!=dataMap["userCount"]?dataMap["userCount"]["coin"]:0.00 }}</div>
+        </div>
+      </el-col>
+      <el-col :span="3">
+        <div class="grid-content bg-purple">
+          <div class="k-title">用户剩余余额</div>
+          <div class="k-content">{{ undefined!=dataMap["userCount"]?dataMap["userCount"]["diamondCoin"]:0.00 }}</div>
+        </div>
+      </el-col>
+      <el-col :span="3">
+        <div class="grid-content bg-purple">
+          <div class="grid-content bg-purple">
+            <div class="k-title">充值总额</div>
+            <div class="k-content">{{ undefined!=dataMap["rechargeCount"]?dataMap["rechargeCount"]["diamondCoinSum"]:0.00 }}</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="3">
+        <div class="grid-content bg-purple">
+          <div class="grid-content bg-purple">
+            <div class="k-title">总兑换余额</div>
+            <div class="k-content">{{ undefined!=dataMap["exchangeCount"]?dataMap["exchangeCount"]["diamondCoinSum"]:0.00 }}</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="3">
+        <div class="grid-content bg-purple">
+          <div class="grid-content bg-purple">
+            <div class="k-title">总兑换金币</div>
+            <div class="k-content">{{ undefined!=dataMap["exchangeCount"]?dataMap["exchangeCount"]["coinSum"]:0.00 }}</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="3">
+        <div class="grid-content bg-purple">
+          <div class="grid-content bg-purple">
+            <div class="k-title">玩家游戏金币消耗</div>
+            <div class="k-content">{{ undefined!=dataMap["bettingAmountSum"]?dataMap["bettingAmountSum"]["coinSum"]:0.00 }}</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="3">
+        <div class="grid-content bg-purple">
+          <div class="grid-content bg-purple">
+            <div class="k-title">玩家游戏余额消耗</div>
+            <div class="k-content">{{ undefined!=dataMap["bettingAmountSum"]?dataMap["bettingAmountSum"]["diamondCoinSum"]:0.00 }}</div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <div style="    font-size: 14px;color: #606266">
+      <el-radio v-model="dateRadio" label="1">昨日</el-radio>
+      <el-radio v-model="dateRadio" label="2">今日</el-radio>
+      <el-radio v-model="dateRadio" label="3">本周</el-radio>
+      <el-radio v-model="dateRadio" label="4">上周</el-radio>
+      <el-radio v-model="dateRadio" label="5">最近七天</el-radio>
+      <el-radio v-model="dateRadio" label="6">本月</el-radio>
+      <el-radio v-model="dateRadio" label="7">上月</el-radio>
+      <span style="padding-right: 10px">日期查询</span>
+      <el-date-picker
+        v-model="daterange"
+        style="width: 240px"
+        value-format="yyyy-MM-dd"
+        type="daterange"
+        range-separator="-"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        @change="dateChage"
+      ></el-date-picker>
+      <span style="padding-left: 20px">
+        <el-button type="primary" round @click="search">查询</el-button>
+      </span>
+    </div>
+    <div style="padding-top: 1rem">
+      <el-row>
+        <el-col :span="25" class="card-box">
+          <el-card>
+            <div slot="header"><span></span></div>
+            <div class="el-table el-table--enable-row-hover el-table--medium">
+              <table cellspacing="0" style="width: 70rem;border-bottom: 1px solid black">
+                <thead>
+                <tr>
+                  <th class="el-table__cell is-leaf"><div class="cell"></div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">线上充值总额</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">vip充值总额</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">充值总额</div></th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                  <td class="el-table__cell is-leaf" rowspan="2"><div class="cell">充值总额</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">支付宝：{{getVal(getCharge('1'),0)}}</div></td>
+                  <td class="el-table__cell is-leaf" rowspan="2"><div class="cell">充值：{{getVal(getCharge('4'),1)}}</div></td>
+                  <td class="el-table__cell is-leaf" rowspan="2"><div class="cell">总额：{{getTotal()}}</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell" >微信：{{getVal(getCharge('1'),0)}}</div></td>
+<!--                  <td class="el-table__cell is-leaf"><div class="cell" >微信</div></td>-->
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf" rowspan="3"><div class="cell">提现总额</div></td>
+                  <td class="el-table__cell is-leaf" colspan="2"><div class="cell">支付宝：{{getCash("1")}}</div></td>
+                  <td class="el-table__cell is-leaf" rowspan="3"><div class="cell">总额：{{getCash(null)}}</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf" colspan="2"><div class="cell" >微信：{{getCash("2")}}</div></td>
+<!--                  <td class="el-table__cell is-leaf"><div class="cell" >微信</div></td>-->
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf" colspan="2"><div class="cell" >银行卡：{{getCash("3")}}</div></td>
+<!--                  <td class="el-table__cell is-leaf"><div class="cell" >银行卡</div></td>-->
+                </tr>
+                </tbody>
+              </table>
 
+              <table cellspacing="0" style="width: 70rem;border-bottom: 1px solid black">
+                <thead>
+                <tr>
+<!--                  <th class="el-table__cell is-leaf" rowspan="2"><div class="cell">游戏投注</div></th>-->
+                  <th class="el-table__cell is-leaf"><div class="cell">金币投注</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">余额投注</div></th>
+<!--                  <th class="el-table__cell is-leaf"><div class="cell"></div></th>-->
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+<!--                  <td class="el-table__cell is-leaf" rowspan="2"><div class="cell">游戏投注</div></td>-->
+                  <td class="el-table__cell is-leaf"><div class="cell">{{ undefined!=dataMap["bettingAmountDateSum"]?dataMap["bettingAmountDateSum"]["coinSum"]:0.00 }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">{{undefined!=dataMap["bettingAmountDateSum"]?dataMap["bettingAmountDateSum"]["diamondCoinSum"]:0.00}}</div></td>
+<!--                  <td class="el-table__cell is-leaf"><div class="cell" ></div></td>-->
+                </tr>
+                </tbody>
+              </table>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
+import { indexStatics } from "@/api/business/user";
+import { parseTime } from "@/utils/ruoyi.js"
 export default {
   name: "Index",
   data() {
     return {
       // 版本号
-      version: "3.8.7"
+      dateRadio: "2",
+      queryParams:{},
+      daterange:[],
+      daterange2:[],
+      dataMap:{}
     };
   },
+  created() {
+    // console.log(parseTime())
+    this.search();
+  },
   methods: {
-    goTarget(href) {
-      window.open(href, "_blank");
-    }
-  }
-};
-</script>
+    dateChage(val){
+      if(undefined == this.daterange || null == this.daterange){
+        this.dateRadio = "2";
+      }else{
+        this.dateRadio = null;
+      }
+    },
+    search(){
+      let radio = "2";
+      let that = this;
+      that.queryParams = {};
+      if(!that.dataRadio){
+        radio = that.dateRadio;
+      }
+      if(this.daterange == undefined || this.daterange == null || this.daterange.length < 1){
+        let curDate = new Date();
+        if("1" == radio){
+          curDate = curDate.setDate(curDate.getDate()-1);
+          that.setQueryParam(curDate,curDate);
+        }else if("2" == radio){
+          that.setQueryParam(curDate,curDate);
+        }else if("3" == radio){
+          // 获取当前日期是本周的第几天（0代表周日，1代表周一，...，6代表周六）
+          const dayOfWeek = curDate.getDay();
+          // 获取当前日期距离本周第一天的天数差（负数代表本周之前的天数，正数或零代表本周之后的天数）
+          const diffToFirstDay = dayOfWeek > 0 ? -(dayOfWeek - 1) : -6;
+          // 获取本周第一天的日期对象
+          const firstDayOfWeek = new Date(curDate);
+          firstDayOfWeek.setDate(curDate.getDate() + diffToFirstDay);
+          // 获取本周最后一天的日期对象
+          const lastDayOfWeek = new Date(curDate);
+          lastDayOfWeek.setDate(firstDayOfWeek.getDate() + 6);
+          that.setQueryParam(firstDayOfWeek,lastDayOfWeek);
+        }else if("4" == radio){
+          // 获取当前日期是本周的第几天（0代表周日，1代表周一，...，6代表周六）
+          const date = curDate.setDate(curDate.getDate()-6);
+          let dayOfWeek = new Date(date).getDay();
+          // 获取当前日期距离本周第一天的天数差（负数代表本周之前的天数，正数或零代表本周之后的天数）
+          const diffToFirstDay = dayOfWeek > 0 ? -(dayOfWeek - 1) : -6;
+          // 获取本周第一天的日期对象
+          const firstDayOfWeek = new Date(curDate);
+          firstDayOfWeek.setDate(curDate.getDate() + diffToFirstDay);
+          // 获取本周最后一天的日期对象
+          const lastDayOfWeek = new Date(curDate);
+          lastDayOfWeek.setDate(firstDayOfWeek.getDate() + 6);
+          that.setQueryParam(firstDayOfWeek,lastDayOfWeek);
+        }else if("5" == radio){
+          const dayOfWeek = new Date().setDate(new Date().getDate()-6);
+          that.setQueryParam(dayOfWeek,curDate);
+        }else if("6" == radio){
+          // 获取本月开始时间
+          var startOfMonth = new Date();
+          startOfMonth.setDate(1);
+          startOfMonth.setHours(0, 0, 0, 0);
 
-<style scoped lang="scss">
-.home {
-  blockquote {
-    padding: 10px 20px;
-    margin: 0 0 20px;
-    font-size: 17.5px;
-    border-left: 5px solid #eee;
-  }
-  hr {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: 0;
-    border-top: 1px solid #eee;
-  }
-  .col-item {
-    margin-bottom: 20px;
-  }
-
-  ul {
-    padding: 0;
-    margin: 0;
-  }
+          // 获取本月结束时间
+          var endOfMonth = new Date();
+          endOfMonth.setMonth(endOfMonth.getMonth() + 1, 0);
+          endOfMonth.setHours(23, 59, 59, 999);
+          that.setQueryParam(startOfMonth,endOfMonth);
+        }else if("7" == radio){
+          // 获取本月开始时间
+          var startOfMonth = new Date(curDate.setMonth(curDate.getMonth()-1));
+          startOfMonth.setDate(1);
+          startOfMonth.setHours(0, 0, 0, 0);
 
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  color: #676a6c;
-  overflow-x: hidden;
+          // 获取本月结束时间
+          var endOfMonth = curDate;
+          endOfMonth.setMonth(endOfMonth.getMonth() + 1, 0);
+          endOfMonth.setHours(23, 59, 59, 999);
+          that.setQueryParam(startOfMonth,endOfMonth);
+        }
+      }else{
+        that.queryParams["beginTime"] = this.daterange[0];
+        that.queryParams["endTime"] = this.daterange[1];
+      }
 
-  ul {
-    list-style-type: none;
-  }
+      indexStatics(this.queryParams).then(response => {
+        that.dataMap = response.data;
+      });
+    },
+    setQueryParam(beginDate,endDate){
+      let that = this;
+      that.queryParams["beginTime"] = parseTime(beginDate,"{y}-{m}-{d}");
+      that.queryParams["endTime"] = parseTime(endDate,"{y}-{m}-{d}");
+    },
+    getCharge(type){
+      let dataMap = this.dataMap;
+      let res = {};
+      for(var i in dataMap["rechargeByDateSum"]){
+        var item = dataMap["rechargeByDateSum"][i];
+        if(item["type"] == type){
+          res = item;
+          break;
+        }
+      }
+      return res;
+    },
+    getVal(val,type){
+      //type 3 统计线上+线下
+      let diamondCoin = 0.00;
+      let platformService = 0.00;
+      if(type == 0 || type == 3) {
+        //线上
+        if (val["diamondCoinUpSum"] != undefined) {
+          diamondCoin += val["diamondCoinUpSum"];
+        }
+        if(val["platformServiceDiamondCoinUpSum"] != undefined){
+          platformService += val["platformServiceDiamondCoinUpSum"];
+        }
+      }
+      if(type == 1 || type == 3){
+        //线下
+        if (val["diamondCoinDownSum"] != undefined) {
+          diamondCoin += val["diamondCoinDownSum"];
+        }
+        if(val["platformServiceDiamondCoinDownSum"] != undefined){
+          platformService += val["platformServiceDiamondCoinDownSum"];
+        }
+      }
+      return diamondCoin + " （包含手续费" + platformService + "）";
+    },
+    getTotal(){
+      //支付宝
+      let ali = this.getCharge("1");
+      //微信
+      let wexin = this.getCharge("2");
+      //线下
+      let down = this.getCharge("4");
+      let total = 0;
+      let totalService = 0;
+      if (down["diamondCoinDownSum"] != undefined) {
+        total += down["diamondCoinDownSum"];
+      }
+      if(down["platformServiceDiamondCoinDownSum"] != undefined){
+        totalService += down["platformServiceDiamondCoinDownSum"];
+      }
 
-  h4 {
-    margin-top: 0px;
-  }
+      if (ali["diamondCoinUpSum"] != undefined) {
+        total += ali["diamondCoinUpSum"];
+      }
+      if(ali["platformServiceDiamondCoinUpSum"] != undefined){
+        totalService += ali["platformServiceDiamondCoinUpSum"];
+      }
 
-  h2 {
-    margin-top: 10px;
-    font-size: 26px;
-    font-weight: 100;
-  }
+      if (wexin["diamondCoinUpSum"] != undefined) {
+        total += wexin["diamondCoinUpSum"];
+      }
+      if(wexin["platformServiceDiamondCoinUpSum"] != undefined){
+        totalService += wexin["platformServiceDiamondCoinUpSum"];
+      }
 
-  p {
-    margin-top: 10px;
+      return total + " (包含手续费："+totalService+")"
 
-    b {
-      font-weight: 700;
+    },
+    getCash(type){
+      let amount = 0;
+      let serviceAmount = 0;
+      for(var i in this.dataMap["withdrawByDateSum"]){
+        let item  = this.dataMap["withdrawByDateSum"][i];
+        if(type != null) {
+          if (item["type"] == type) {
+            amount += item["moneySum"];
+            serviceAmount += item["platformServiceSum"];
+          }
+        }else{
+          amount += item["moneySum"];
+          serviceAmount += item["platformServiceSum"];
+        }
+      }
+      return amount + " （包含手续费"+serviceAmount+"）";
     }
   }
+};
+</script>
 
-  .update-log {
-    ol {
-      display: block;
-      list-style-type: decimal;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0;
-      margin-inline-end: 0;
-      padding-inline-start: 40px;
-    }
+<style>
+table {
+  width: 50%;
+}
+
+.k-title{
+  font-size: 14px;
+  text-align: center;
+  /* margin-top: -85px; */
+  color: white;
+  line-height: 2rem;
+  background-color: #4079c4;
+}
+.k-content{
+  color: black;
+  text-align: center;
+  line-height: 5rem;
+}
+.el-row {
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
   }
 }
+.el-col {
+  border-radius: 4px;
+}
+.bg-purple-dark {
+  background: #99a9bf;
+}
+.bg-purple {
+  background: #eef5fd;
+}
+.bg-purple-light {
+  background: #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 100px;
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
 </style>