profile页面增加了每月胜率，cards页面增加了期间使用率计算。

d2b9e1c9 · 铃兰 · 24719f2c · d2b9e1c9 · d2b9e1c9 · d2b9e1c9
Commit d2b9e1c9 authored Jul 13, 2023 by 铃兰
5 changed files
--- a/src/api.js
+++ b/src/api.js
@@ -49,7 +49,7 @@ export default class Api {
  }

  static getUserDueHistory(opt) {
-        return Vue.http.get(`${URL}/history`, { 'params': opt });
+    return Vue.http.get(`${URL}/history`, {'params': opt});
  }

  static getDownloadUrls() {
@@ -67,72 +67,72 @@ export default class Api {
  }

  static getDeckInfo(opt) {
-        return Vue.http.get(`${URL}/deckinfo`, { 'params': opt });
+    return Vue.http.get(`${URL}/deckinfo`, {'params': opt});
  }

  static saveDeck(opt) {
    const url = `${URL}/deckinfo`
-        return Vue.http.post(url, opt, { 'emulateJSON': true });
+    return Vue.http.post(url, opt, {'emulateJSON': true});
  }

  static saveDeckDemo(opt) {
    const url = `${URL}/deckdemo`
-        return Vue.http.post(url, opt, { 'emulateJSON': true });
+    return Vue.http.post(url, opt, {'emulateJSON': true});
  }

  static getReport(opt) {
-        return Vue.http.get(`${URL}/report`, { 'params': opt });
+    return Vue.http.get(`${URL}/report`, {'params': opt});
  }

  static getVoteList(opt) {
-        return Vue.http.get(`${URL}/votes`, { 'params': opt });
+    return Vue.http.get(`${URL}/votes`, {'params': opt});
  }

  static saveVote(opt) {
    const url = `${URL}/votes`
-        return Vue.http.post(url, opt, { 'emulateJSON': true });
+    return Vue.http.post(url, opt, {'emulateJSON': true});
  }

  static voteStatus(opt) {
    const url = `${URL}/voteStatus`
-        return Vue.http.post(url, opt, { 'emulateJSON': true });
+    return Vue.http.post(url, opt, {'emulateJSON': true});
  }

  static getVote(opt) {
-        return Vue.http.get(`${URL}/vote`, { 'params': opt });
+    return Vue.http.get(`${URL}/vote`, {'params': opt});
  }

  static submitVote(opt) {
    const url = `${URL}/submitVote`
-        return Vue.http.post(url, opt, { 'emulateJSON': true });
+    return Vue.http.post(url, opt, {'emulateJSON': true});
  }

  static saveAds(opt) {
    const url = `${URL}/ads`
-        return Vue.http.post(url, opt, { 'emulateJSON': true });
+    return Vue.http.post(url, opt, {'emulateJSON': true});
  }

  static getAdsList(opt) {
-        return Vue.http.get(`${URL}/ads`, { 'params': opt });
+    return Vue.http.get(`${URL}/ads`, {'params': opt});
  }

  static adsStatus(opt) {
    const url = `${URL}/adsStatus`
-        return Vue.http.post(url, opt, { 'emulateJSON': true });
+    return Vue.http.post(url, opt, {'emulateJSON': true});
  }

  static getAd(opt) {
-        return Vue.http.get(`${URL}/getAd`, { 'params': opt });
+    return Vue.http.get(`${URL}/getAd`, {'params': opt});
  }

  static adClick(opt) {
    const url = `${URL}/adClick`
-        return Vue.http.post(url, opt, { 'emulateJSON': true });
+    return Vue.http.post(url, opt, {'emulateJSON': true});
  }

  static adImpl(opt) {
    const url = `${URL}/adImpl`
-        return Vue.http.post(url, opt, { 'emulateJSON': true });
+    return Vue.http.post(url, opt, {'emulateJSON': true});
  }

  static getFirstWin(opt) {
@@ -143,21 +143,26 @@ export default class Api {

  static adSwitchChange(opt) {
    const url = `${URL}/adSwitchChange`
-        return Vue.http.post(url, opt, { 'emulateJSON': true });
+    return Vue.http.post(url, opt, {'emulateJSON': true});
  }

  static saveActivity(opt) {
    const url = `${URL}/activity`
-        return Vue.http.post(url, opt, { 'emulateJSON': true });
+    return Vue.http.post(url, opt, {'emulateJSON': true});
  }

  static saveLabel(opt) {
    const url = `${URL}/label`
-        return Vue.http.post(url, opt, { 'emulateJSON': true });
+    return Vue.http.post(url, opt, {'emulateJSON': true});
  }

  static getLabel(opt) {
-        return Vue.http.get(`${URL}/label`, { 'params': {} });
+    return Vue.http.get(`${URL}/label`, {'params': {}});
  }

+  static getMonthlyHistory(opt) {
+    const url = `https://sapi.moecube.com:444/ygopro/arena/historyScore`;
+    return Vue.http.get(url, {params: opt});
+  }
+// https://sapi.moecube.com:444/ygopro/arena/historyScore?username=id&season=yyyy-mm
 }
--- a/src/components/Cards.vue
+++ b/src/components/Cards.vue
@@ -5,26 +5,26 @@
        <div>
          <h4 class="color-blue">
            <i class="glyphicon glyphicon-filter"></i>
-                        {{lang.qc}}
+            {{ lang.qc }}
          </h4>
          <div class="well">
            <form action="" method="get" role="form" class="form-inline form-filter">
              <div class="form-group" style="margin-right: 10px;">
                <div class="input-group">
-                                    <div class="input-group-addon">{{lang.time}}</div>
+                  <div class="input-group-addon">{{ lang.time }}</div>
                  <select name="type" class="form-control" id="type" v-on:change="onChange">
-                                        <option value="day">{{lang.today}}</option>
-                                        <option value="week">{{lang.week}}</option>
-                                        <option value="halfmonth">{{lang.half_month}}</option>
-                                        <option value="month">{{lang.month}}</option>
-                                        <option value="season">{{lang.season}}</option>
+                    <option value="day">{{ lang.today }}</option>
+                    <option value="week">{{ lang.week }}</option>
+                    <option value="halfmonth">{{ lang.half_month }}</option>
+                    <option value="month">{{ lang.month }}</option>
+                    <option value="season">{{ lang.season }}</option>
                  </select>
                </div>
              </div>

              <div class="form-group" style="margin-right: 10px;">
                <div class="input-group">
-                                    <div class="input-group-addon">{{lang.source}}</div>
+                  <div class="input-group-addon">{{ lang.source }}</div>
                  <select name="server" class="form-control" id="server" v-on:change="onChange">
                    <option value="mycard">MCPro</option>
                    <option value="233">233</option>
@@ -36,53 +36,60 @@

              <div class="form-group" style="margin-right: 10px;">
                <div class="input-group">
-                                    <div class="input-group-addon">{{lang.type}}</div>
+                  <div class="input-group-addon">{{ lang.type }}</div>
                  <select name="source" class="form-control" id="source" v-on:change="onChange">
-                                        <option value="athletic">{{lang.athletic}}</option>
-                                        <option value="entertain">{{lang.entertain}}</option>
-                                        <option value="custom">{{lang.custom}}</option>
-                                        <option value="tag">{{lang.tag}}</option>
+                    <option value="athletic">{{ lang.athletic }}</option>
+                    <option value="entertain">{{ lang.entertain }}</option>
+                    <option value="custom">{{ lang.custom }}</option>
+                    <option value="tag">{{ lang.tag }}</option>
                  </select>
                </div>
              </div>

              <div class="form-group" style="margin-right: 10px;">
                <div class="input-group">
-                                    <div class="input-group-addon">{{lang.totalDeck}}</div>
-                                    <span class="form-control">{{totalDeck}}</span>
+                  <div class="input-group-addon">{{ lang.totalDeck }}</div>
+                  <span class="form-control">{{ totalDeck }}</span>
                </div>
              </div>

              <div class="form-group" style="display:none">
                <button type="submit" id="search"
-                                    class="form-control btn btn-primary">{{lang.search}}</button>
+                        class="form-control btn btn-primary">{{ lang.search }}
+                </button>
              </div>

            </form>
          </div>

-                    <h4 class="color-blue"><i class="glyphicon glyphicon-list-alt"></i> {{lang.table_data}} </h4>
+          <h4 class="color-blue"><i class="glyphicon glyphicon-list-alt"></i> {{ lang.table_data }} </h4>

          <div>
            <ul class="nav nav-tabs">

              <li :class="{ active: isActive }" v-if="isActive">
-                                <a href="#tab-0" role="tab" data-toggle="tab" @click='navClick("Deck")'><img class="tab-img" :src="img0" ></a>
+                <a href="#tab-0" role="tab" data-toggle="tab" @click='navClick("Deck")'><img class="tab-img"
+                                                                                             :src="img0"></a>
              </li>
              <li :class="{ active: !isActive }">
-                                <a href="#tab-1" role="tab" data-toggle="tab"  @click='navClick("Monster")'><img class="tab-img" :src="img1"></a>
+                <a href="#tab-1" role="tab" data-toggle="tab" @click='navClick("Monster")'><img class="tab-img"
+                                                                                                :src="img1"></a>
              </li>
              <li>
-                                <a href="#tab-2" role="tab" data-toggle="tab"  @click='navClick("Spell")'><img class="tab-img" :src="img2"></a>
+                <a href="#tab-2" role="tab" data-toggle="tab" @click='navClick("Spell")'><img class="tab-img"
+                                                                                              :src="img2"></a>
              </li>
              <li>
-                                <a href="#tab-3" role="tab" data-toggle="tab" @click='navClick("Trap")' ><img class="tab-img" :src="img3"></a>
+                <a href="#tab-3" role="tab" data-toggle="tab" @click='navClick("Trap")'><img class="tab-img"
+                                                                                             :src="img3"></a>
              </li>
              <li>
-                                <a href="#tab-4" role="tab" data-toggle="tab" @click='navClick("Side")'><img class="tab-img" :src="img4"></a>
+                <a href="#tab-4" role="tab" data-toggle="tab" @click='navClick("Side")'><img class="tab-img"
+                                                                                             :src="img4"></a>
              </li>
              <li>
-                                <a href="#tab-5" role="tab" data-toggle="tab"  @click='navClick("Extra")'><img class="tab-img" :src="img5"></a>
+                <a href="#tab-5" role="tab" data-toggle="tab" @click='navClick("Extra")'><img class="tab-img"
+                                                                                              :src="img5"></a>
              </li>
            </ul>

@@ -139,7 +146,8 @@

              <div class="form-group" style="display:none">
                <button type="submit" id="search"
-                                    class="form-control btn btn-primary">{{lang.search}}</button>
+                        class="form-control btn btn-primary">{{ lang.search }}
+                </button>
              </div>

            </div>
@@ -154,44 +162,47 @@
 </template>

 <script>
-    import Footads from './Footads'
-    import tb_language from './tb_lang.js'
-    import {
+import Footads from './Footads'
+import tb_language from './tb_lang.js'
+import {
  mapGetters
-    } from 'vuex'
-    import API from '../api';
-    import img0 from '../assets/img/500x300_deck.png'
-
-    import img1 from '../assets/img/500x300_monster.png'
-
-    import img2 from '../assets/img/500x300_Spell.png'
- 
-    import img3 from '../assets/img/500x300_Trap.png'
-
-    import img4 from '../assets/img/500x300_side.png'
-    import img5 from '../assets/img/ExtraWithBorder.png'
-    var dt = require('datatables.net')
-    var dt2 = require('datatables.net-bs')
-    import "../assets/css/dataTables.bootstrap.min.css"
-    var monsterTable;
-    var spellTable;
-    var trapTable;
-    var exTable;
-    var sideTable;
-    var deckTable;
-    const placeholder={
-        Deck:'请输入卡组名..',
-        Monster:'请输入怪兽卡名..',
-        Spell:'请输入魔法卡名..',
-        Trap:'请输入陷阱卡名..',
-        Side:'请输入卡片名..',
-        Extra:'请输入卡片名..',
-      }
-    export default {
+} from 'vuex'
+import API from '../api';
+import img0 from '../assets/img/500x300_deck.png'
+
+import img1 from '../assets/img/500x300_monster.png'
+
+import img2 from '../assets/img/500x300_Spell.png'
+
+import img3 from '../assets/img/500x300_Trap.png'
+
+import img4 from '../assets/img/500x300_side.png'
+import img5 from '../assets/img/ExtraWithBorder.png'
+
+var dt = require('datatables.net')
+var dt2 = require('datatables.net-bs')
+import "../assets/css/dataTables.bootstrap.min.css"
+
+var monsterTable;
+var spellTable;
+var trapTable;
+var exTable;
+var sideTable;
+var deckTable;
+const placeholder = {
+  Deck: '请输入卡组名..',
+  Monster: '请输入怪兽卡名..',
+  Spell: '请输入魔法卡名..',
+  Trap: '请输入陷阱卡名..',
+  Side: '请输入卡片名..',
+  Extra: '请输入卡片名..',
+}
+export default {
  components: {
    Footads
  },
-        created: function() {
+  created: function () {
+
    var regex_match =
      /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte-|longcos|pantech|gionee|^sie-|portalmmm|jigs browser|hiptop|^benq|haier|^lct|operas*mobi|opera*mini|320x320|240x320|176x220)/i;
    var u = navigator.userAgent;
@@ -199,20 +210,21 @@
      return true;
    }
    var result = regex_match.exec(u);
-            if (null == result) {} else {
+    if (null == result) {
+    } else {
      this.width = "250%"
    }
    var lang = localStorage.getItem('lang') || 'cn';
    this.init(lang)
  },
-        mounted: function() {
+  mounted: function () {
    this.init2();
  },
  data() {
    return {
-              
-                isActive: true,
      totalDeck: 0,
+      type: "",
+      isActive: true,
      width: "100%",
      img0: img0,
      img1: img1,
@@ -228,20 +240,49 @@
    }),
  },
  watch: {
-            lang: function(val) {
+    lang: function (val) {
      // console.log('lang change1', val)
      this.init2()
    },
  },
  methods: {
-            navClick(data){
-                console.log('%c ---------------------src'+'\\'+'components'+'\\'+'Cards.vue---------------------%c:238','background:#f034c6','background:#14f1a4',
-                data)
-                 $(".input-sm").attr("placeholder",placeholder[data])
+    period(){
+      // 计算禁卡表发布时间间隔
+      const today = new Date();
+      const year = today.getFullYear();
+      const dates = [
+        new Date(year, 0, 1),
+        new Date(year, 3, 1),
+        new Date(year, 6, 1),
+        new Date(year, 9, 1),
+      ];
+      const season = dates.reduce((min, date) => {
+        const diff = Math.floor((today - date) / (1000 * 60 * 60 * 24));
+        if (today >= date && diff >= 0 && diff < min) {
+          return diff;
+        }
+        return min;
+      }, Infinity);
+      // 根据select设定对应天数
+      const periodMap = {
+        day: 1,
+        week: 7,
+        halfmonth: 15,
+        month: 30,
+        season: season
+      };
+      var selectedType = $("#type").val();
+      return  periodMap[selectedType] || 1;
+    },
+
+    navClick(data) {
+      // console.log('%c ---------------------src' + '\\' + 'components' + '\\' + 'Cards.vue---------------------%c:238', 'background:#f034c6', 'background:#14f1a4',
+      //   data)
+      $(".input-sm").attr("placeholder", placeholder[data])


    },
-            init: function(lang) {
+    init: function (lang) {
      if (lang === "cn") {
        this.isActive = true;
      } else {
@@ -250,15 +291,20 @@
      // this.lang = language[lang]
      this.getCount()
    },
-            init2: function() {
+    init2: function () {
      var lang = localStorage.getItem('lang') || 'cn';
      if (lang === "cn") {
        this.isActive = true;
      } else {
        this.isActive = false;
      }
+      var self = this;
+      this.getCount().then(function (count) {
+        self.totalDeck = count; // 设置totalDeck的值
+        // 在获取到count后调用init2

        function renderPage() {
+
          if (monsterTable) {
            monsterTable.clear();
            monsterTable.destroy();
@@ -287,7 +333,7 @@
            lang: localStorage.getItem('lang') || 'cn',
            extra: 'name',
            source: final_source
-                    }, function(data) {
+          }, function (data) {
            var monster = data.monster;
            var spell = data.spell;
            var trap = data.trap;
@@ -298,6 +344,7 @@
            trapTable = renderTable("#trap", trap)
            exTable = renderTable("#ex", ex)
            sideTable = renderTable("#side", side)
+            // console.log(data)
          });
          //卡组api https://sapi.moecube.com:444/ygopro/analytics/deck/type?type=day&source=mycard-entertain
          //只显示中文
@@ -310,12 +357,12 @@
            $.get('https://sapi.moecube.com:444/ygopro/analytics/deck/type', {
              type: $("#type").val(),
              source: final_source
-                        }, function(data) {
+            }, function (data) {
              var obj = data;
              if (typeof obj === 'string')
                obj = JSON.parse(data);
              var rank = 1;
-                            var processData = obj.map(function(x) {
+              var processData = obj.map(function (x) {
                var tagStr = [];
                var deckName = x.name;
                for (var i = 0; i < x.tags.length; i++) {
@@ -323,16 +370,27 @@
                  var short_tagName = tagName.replace(deckName + "-", "");
                  tagStr.push(short_tagName)
                }
-                                return [rank++, x.name, x.count, tagStr.join(" , ")];
+
+                var period = self.period();
+
+
+                var PickRate = (0 < (x.count / (self.totalDeck * period)) && (x.count / (self.totalDeck * period)) < 1)
+                  ? ((x.count / (self.totalDeck * period) * 100)).toFixed(2) + "%" : "-";
+                // 出现-是数据算出来不在0-1之间
+
+                return [rank++, x.name, x.count, PickRate, tagStr.join(" , ")];
              });
+
+
              deckTable = $("#deck").DataTable({
                data: processData,
                pageLength: 25,
                order: [
                  [2, "desc"]
                ],
-                                "ordering": true,
-                                columns: [{
+                ordering: true,
+                columns: [
+                  {
                    title: tb_language[lang].rank
                  },
                  {
@@ -341,21 +399,24 @@
                  {
                    title: tb_language[lang].count
                  },
+                  {
+                    title: tb_language[lang].PickRate
+                  },
                  {
                    title: tb_language[lang].topTags
                  },
                ],
-                                "columnDefs": [{
-                                    "render": function(data, type, row) {
-                                        // return "<span title='" + data + "'>" + data + "</span>";
-                                        // return "<img src='imag.png' />";
-                                        return "<a href='?name=" + data + "#/deck'>" +
-                                            data + "</a>";
+                columnDefs: [
+                  {
+                    render: function (data, type, row) {
+                      return "<a href='?name=" + data + "#/deck'>" + data + "</a>";
                    },
-                                    "targets": 1
-                                }, ],
-                                "language": tb_language[lang]
+                    targets: 1
+                  }
+                ],
+                language: tb_language[lang]
              });
+
            });
          }
        }
@@ -365,9 +426,19 @@
          var lang = localStorage.getItem('lang') || 'cn';
          var langIndex = (lang === 'en' ? 'en-US' : 'zh-CN');
          var rank = 1;
-                    var processData = tableData.map(function(d) {
-                        return [rank++, d.name ? d.name[langIndex] : "未知卡片", d.frequency, d.putone, d
-                            .puttwo, d.putthree, d.id
+          var processData = tableData.map(function (d) {
+            var period = self.period();
+            var PickRate = (parseInt(d.putone) + parseInt(d.puttwo) + parseInt(d.putthree)) / self.totalDeck / period;
+            PickRate = (0 < PickRate && PickRate < 1) ? (PickRate * 100).toFixed(2) + "%" : "-";
+            // 使用率出现-是数据算出来不在0-1之间
+            return [
+              rank++, d.name ? d.name[langIndex] : "未知卡片",
+              d.frequency,
+              PickRate,
+              d.putone,
+              d.puttwo,
+              d.putthree,
+              d.id
            ];
          });
          var table = $(tableID).DataTable({
@@ -386,6 +457,9 @@
              {
                title: tb_language[lang].used
              },
+              {
+                title: tb_language[lang].PickRate
+              },
              {
                title: tb_language[lang].put1
              },
@@ -397,57 +471,62 @@
              },
            ],
            "columnDefs": [{
-                            "render": function(data, type, row) {
+              "render": function (data, type, row) {
                return "<a href='https://www.ourocg.cn/search/" + row[6] +
                  "'>" + data + "</a>";
              },
              "targets": 1
-                        }, ],
+            },],
            "language": tb_language[lang]
          });
-                      $(".input-sm").attr("placeholder",placeholder.Deck)
+          $(".input-sm").attr("placeholder", placeholder.Deck)
          return table;
        }
+
        renderPage();
-                $("#search").click(function() {
+        $("#search").click(function () {
          renderPage();
          return false;
        })
+      });
+
    },
-            onChange: function() {
+    onChange: function () {
      $("#search").trigger('click')
      this.getCount()
    },
-            getCount: function() {
+    getCount: function () {
      var server = $("#server").val() || "mycard"
      var source = $("#source").val() || "athletic"
      var opt = {
        type: $("#type").val() || "day",
        source: server + "-" + source
      }
-                var self = this
-                API.getCount(opt).then((res) => {
+
+      return API.getCount(opt).then((res) => {
        if (isNaN(res.data)) {
-                        self.totalDeck = 0
+          return 0;
        } else {
-                        self.totalDeck = res.data
+          return res.data;
        }
      });
+
    }
  },
  events: {
-            'lang-change': function(lang) {
+    'lang-change': function (lang) {
      this.init(lang)
      this.onChange()
    }
  },
-    }
+}
 </script>

 <style scoped>
-   #deck {
-       margin-top:20px!important;
-      border:1px solid black;
-    }
+#deck {
+  margin-top: 20px !important;
+  border: 1px solid black;
+}

 </style>
+
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -6,47 +6,48 @@
          <div class="thumbnail">
            <img v-bind:src="user.avatar_url" style="height:200px;margin-top:13px;">
            <div class="caption">
-              <h3> <i class="glyphicon glyphicon-user"></i> <strong>{{user.username}}</strong></h3>
-              <p class="text-muted" style="font-size:20px;">今日首胜: {{activity.today}}/1 </p>
-              <p class="text-muted" v-if="showActivity" style="font-size:20px;">{{activity.name}}首胜: {{activity.total}}/{{activity.max}} </p>
+              <h3><i class="glyphicon glyphicon-user"></i> <strong>{{ user.username }}</strong></h3>
+              <p class="text-muted" style="font-size:20px;">今日首胜: {{ activity.today }}/1 </p>
+              <p class="text-muted" v-if="showActivity" style="font-size:20px;">{{ activity.name }}首胜:
+                {{ activity.total }}/{{ activity.max }} </p>
            </div>
          </div>
        </div>
        <div class="col-md-9">
          <div class="panel panel-default">
            <div class="panel-heading">
-              <h3 class="panel-title">{{lang.athletic}} </h3>
+              <h3 class="panel-title">{{ lang.athletic }} </h3>
            </div>
            <div class="table-responsive">
              <table class="table table-striped table-bordered table-hover">
                <tbody>
                <tr>
-                    <td>D.P </td>
-                    <td>{{user_info.pt}} </td>
+                  <td>D.P</td>
+                  <td>{{ user_info.pt }}</td>
                </tr>
                <tr>
-                    <td>{{lang.athletic_rank}} </td>
-                    <td>{{user_info.arena_rank}} </td>
+                  <td>{{ lang.athletic_rank }}</td>
+                  <td>{{ user_info.arena_rank }}</td>
                </tr>
                <tr>
-                    <td>{{lang.win}} </td>
-                    <td>{{user_info.athletic_win}} </td>
+                  <td>{{ lang.win }}</td>
+                  <td>{{ user_info.athletic_win }}</td>
                </tr>
                <tr>
-                    <td>{{lang.lose}} </td>
-                    <td>{{user_info.athletic_lose}} </td>
+                  <td>{{ lang.lose }}</td>
+                  <td>{{ user_info.athletic_lose }}</td>
                </tr>
                <tr>
-                    <td>{{lang.draw}} </td>
-                    <td>{{user_info.athletic_draw}} </td>
+                  <td>{{ lang.draw }}</td>
+                  <td>{{ user_info.athletic_draw }}</td>
                </tr>
                <tr>
-                    <td>{{lang.all}} </td>
-                    <td>{{user_info.athletic_all}} </td>
+                  <td>{{ lang.all }}</td>
+                  <td>{{ user_info.athletic_all }}</td>
                </tr>
                <tr>
-                    <td>{{lang.ratio}} </td>
-                    <td>{{user_info.athletic_wl_ratio}}% </td>
+                  <td>{{ lang.ratio }}</td>
+                  <td>{{ user_info.athletic_wl_ratio }}%</td>
                </tr>
                </tbody>
              </table>
@@ -54,73 +55,90 @@
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
-              <h3 class="panel-title">{{lang.entertain}} </h3>
+              <h3 class="panel-title">{{ lang.entertain }} </h3>
            </div>
            <div class="table-responsive">
              <table class="table table-striped table-bordered table-hover">
                <tbody>
                <tr>
-                    <td>EXP </td>
-                    <td>{{user_info.exp}} </td>
+                  <td>EXP</td>
+                  <td>{{ user_info.exp }}</td>
                </tr>
                <tr>
-                    <td>{{lang.exp_rank}} </td>
-                    <td>{{user_info.exp_rank}} </td>
+                  <td>{{ lang.exp_rank }}</td>
+                  <td>{{ user_info.exp_rank }}</td>
                </tr>
                <tr>
-                    <td>{{lang.win}} </td>
-                    <td>{{user_info.entertain_win}} </td>
+                  <td>{{ lang.win }}</td>
+                  <td>{{ user_info.entertain_win }}</td>
                </tr>
                <tr>
-                    <td>{{lang.lose}} </td>
-                    <td>{{user_info.entertain_lose}} </td>
+                  <td>{{ lang.lose }}</td>
+                  <td>{{ user_info.entertain_lose }}</td>
                </tr>
                <tr>
-                    <td>{{lang.draw}} </td>
-                    <td>{{user_info.entertain_draw}} </td>
+                  <td>{{ lang.draw }}</td>
+                  <td>{{ user_info.entertain_draw }}</td>
                </tr>
                <tr>
-                    <td>{{lang.all}} </td>
-                    <td>{{user_info.entertain_all}} </td>
+                  <td>{{ lang.all }}</td>
+                  <td>{{ user_info.entertain_all }}</td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>

+          <div class="panel panel-default">
+            <div class="panel-heading">
+              <h3 class="panel-title">{{ lang.monthlyHistory }} </h3>
+            </div>
+            <!--<div class="panel-body">-->
+            <!--<div style="width:100%;overflow-x:auto;overflow-y:hidden;">
+                <table id="rank" class="table table-striped table-bordered table-hover example" ></table>
+              </div>-->
+            <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
+              <table id="monthly_rank" class="table table-striped table-bordered table-hover example"
+                     :class="{ scroll: isMobile }"></table>
+            </div>
+          </div>

          <div class="alert alert-info alert-dismissible" role="alert">
-            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>            {{lang.tagInfo}}
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
+              aria-hidden="true">&times;</span></button>
+            {{ lang.tagInfo }}
          </div>

+
          <div class="panel panel-default">
            <div class="panel-heading">
-              <h3 class="panel-title">{{lang.athleticDueHistory}} </h3>
+              <h3 class="panel-title">{{ lang.athleticDueHistory }} </h3>
            </div>
            <!--<div class="panel-body">-->
            <!--<div style="width:100%;overflow-x:auto;overflow-y:hidden;">
 								<table id="rank" class="table table-striped table-bordered table-hover example" ></table>
 							</div>-->
            <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
-              <table id="athletic_rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }"></table>
+              <table id="athletic_rank" class="table table-striped table-bordered table-hover example"
+                     :class="{ scroll: isMobile }"></table>
            </div>
            <!--</div>-->
            <!--<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
 							<table id="rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }" ></table>
 					</div>-->
-
          </div>

          <div class="panel panel-default">
            <div class="panel-heading">
-              <h3 class="panel-title">{{lang.entertainDueHistory}} </h3>
+              <h3 class="panel-title">{{ lang.entertainDueHistory }} </h3>
            </div>
            <!--<div class="panel-body">-->
            <!--<div style="width:100%;overflow-x:auto;overflow-y:hidden;">
 								<table id="rank" class="table table-striped table-bordered table-hover example" ></table>
 							</div>-->
            <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
-              <table id="entertain_rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }"></table>
+              <table id="entertain_rank" class="table table-striped table-bordered table-hover example"
+                     :class="{ scroll: isMobile }"></table>
            </div>
            <!--</div>-->
            <!--<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
@@ -128,9 +146,6 @@
 					</div>-->

          </div>
-
-
-
        </div>
      </div>
    </div>
@@ -138,16 +153,19 @@
 </template>

 <script>
-  import querystring from 'querystring';
-  import API from '../api'
-  import { mapGetters } from 'vuex'
+import querystring from 'querystring';
+import API from '../api'
+import {mapGetters} from 'vuex'
+import moment from 'moment'
+import tb_language from './tb_lang.js'
+

-  var rankTable;
-  var rankTable2;
-  import moment from 'moment'
-  import tb_language from './tb_lang.js'
+var rankTable;
+var rankTable2;
+var rankTable3;

-  export default {
+
+export default {
  data() {
    return {
      isMobile: false,
@@ -172,7 +190,7 @@
        athletic_all: 0,
        athletic_wl_ratio: 0,
        arena_rank: 0
-        }
+      },
    }
  },
  computed: {
@@ -183,7 +201,6 @@
  },


-
  mounted: function () {
    var _this = this
    $("#search").click(function () {
@@ -195,7 +212,6 @@
  },


-
  created: function () {

    var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte-|longcos|pantech|gionee|^sie-|portalmmm|jigs browser|hiptop|^benq|haier|^lct|operas*mobi|opera*mini|320x320|240x320|176x220)/i;
@@ -216,21 +232,20 @@

    API.getUserInfo(opt).then((res) => {
      this.user_info = res.data
-        console.log('%c ---------------------src'+'\\'+'components'+'\\'+'Profile.vue---------------------%c:219','background:#ed162b','background:#7d382d',
-        res)
+      // console.log('%c ---------------------src' + '\\' + 'components' + '\\' + 'Profile.vue---------------------%c:219', 'background:#ed162b', 'background:#7d382d',
+      //   res)
    });
  },

  methods: {

-      exchangeUserInfo(info){
-        let userName=this.user.username
-        let exchangeInfo=info
-        if(info.usernamea!=userName)
-        {
-          exchangeInfo={
-          "type":info.type,
-          "start_time":info.start_time,
+    exchangeUserInfo(info) {
+      let userName = this.user.username
+      let exchangeInfo = info
+      if (info.usernamea != userName) {
+        exchangeInfo = {
+          "type": info.type,
+          "start_time": info.start_time,
          "isfirstwin": info.isfirstwin,
          "end_time": info.end_time,
          "usernamea": info.usernameb,
@@ -246,15 +261,37 @@
          "pta_ex": info.ptb_ex,
          "ptb_ex": info.pta_ex,
          "winner": info.winner,
-
        }
+      }
+      // console.log('%c ---------------------src' + '\\' + 'components' + '\\' + 'Profile.vue---------------------%c:227', 'background:#1b5fbd', 'background:#ce8e6b',
+      //   exchangeInfo)
+      return exchangeInfo
+    },

-
+    exchangeUserInfo3(info) {
+      let userName = this.user.username
+      let exchangeInfo = info
+      if (info.usernamea !== userName) {
+        exchangeInfo = {
+          "username":info.username,
+          "season": info.season,
+          "rank": info.rank,
+          "pt": info.pt,
+          "note": info.note,
+          "entertainmentWin": info.entertainmentWin,
+          "entertainmentLose": info.entertainmentLose,
+          "entertainmentDraw": info.entertainmentDraw,
+          "correction": info.correction,
+          "athleticWin": info.athleticWin,
+          "athleticLose": info.athleticLose,
+          "athleticDraw": info.athleticDraw,
+        }
      }
-        console.log('%c ---------------------src'+'\\'+'components'+'\\'+'Profile.vue---------------------%c:227','background:#1b5fbd','background:#ce8e6b',
-        exchangeInfo)
+      // console.log('%c ---------------------src' + '\\' + 'components' + '\\' + 'Profile.vue---------------------%c:227', 'background:#1b5fbd', 'background:#ce8e6b',
+      //   exchangeInfo)
      return exchangeInfo
    },
+
    init: function () {
    },

@@ -267,15 +304,20 @@
        rankTable2.destroy();
      }

+      if (rankTable3) {
+        rankTable3.destroy();
+      }
+
      var username = this.user.username
      var type = 1;

      rankTable = this.renderRankTable("#athletic_rank", [], "DP");
      rankTable2 = this.renderRankTable("#entertain_rank", [], "");
+      rankTable3 = this.renderRankTable3("#monthly_rank", [], "");

      if (!username) return;

-        API.getUserDueHistory({ username: username, type: "1", page_num: 100 }).then((res) => {
+      API.getUserDueHistory({username: username, type: "1", page_num: 100}).then((res) => {

        if (rankTable) {
          rankTable.destroy();
@@ -286,41 +328,68 @@

      });

-        API.getUserDueHistory({ username: username, type: "2", page_num: 100 }).then((res) => {
+      API.getUserDueHistory({username: username, type: "2", page_num: 100}).then((res) => {
        if (rankTable2) {
          rankTable2.destroy();
        }
        rankTable2 = this.renderRankTable("#entertain_rank", res.data.data, "")
      }, (res) => {
-         console.log('%c ---------------------src'+'\\'+'components'+'\\'+'Profile.vue---------------------%c:258','background:#ef98b5','background:#53116e',
-         res)
+        // console.log('%c ---------------------src' + '\\' + 'components' + '\\' + 'Profile.vue---------------------%c:258', 'background:#ef98b5', 'background:#53116e',
+        //   res)
+      });
+
+// 获取用户每个月的战斗历史数据
+      var monthly = [];
+      function fetchData(username, monthOffset) {
+        var date = moment().subtract(monthOffset, 'months').format('YYYY-MM');
+        let opt = {
+          'username': username,
+          'season': date,
+        };
+        return API.getMonthlyHistory(opt)
+          .then(response => {
+            const res = response.data;
+            // console.log(res);
+            // 判断是否有返回数据
+            if (res) {
+              // 继续请求前一个月的数据
+              monthly.push(res);
+              return fetchData(username, monthOffset + 1);
+            } else {
+              // 当不再返回数据时，结束递归，并返回最终的 monthly 数组
+              return monthly;
+            }
+          });
+      }
+      fetchData(username, 1).then(res => {
+        if (rankTable3) {
+          rankTable3.destroy();
+        }
+        rankTable3 = this.renderRankTable3("#monthly_rank", monthly, "")
      });

-        var _this = this;

-        API.getFirstWin({ username: username }).then((res) => {
+      var _this = this;
+      API.getFirstWin({username: username}).then((res) => {
        _this.activity = res.data
        if (_this.activity.name && _this.activity.name.trim().length > 0) {
          _this.showActivity = true;
        }
      }, (res) => {
-         console.log('%c ---------------------src'+'\\'+'components'+'\\'+'Profile.vue---------------------%c:271','background:#c85336','background:#a4c933',
-         res)
+        // console.log('%c ---------------------src' + '\\' + 'components' + '\\' + 'Profile.vue---------------------%c:271', 'background:#c85336', 'background:#a4c933',
+        //   res)
      });
    },

    renderRankTable: function (id, tableData, ttype) {
      tableData = tableData || [];
      var lang = localStorage.getItem('lang') || 'cn';
-
      var rank = 1;
-        console.log('%c ---------------------src'+'\\'+'components'+'\\'+'Profile.vue---------------------%c:284','background:#c896f3','background:#f332b2',
-        tableData)
-    
-
-        let that=this
+      // console.log('%c ---------------------src' + '\\' + 'components' + '\\' + 'Profile.vue---------------------%c:284', 'background:#c896f3', 'background:#f332b2',
+      //   tableData)
+      let that = this
      var processData = tableData.map(function (d) {
-          d=that.exchangeUserInfo(d)
+        d = that.exchangeUserInfo(d)
        return [d.usernamea, d.usernameb, moment(d.start_time).format('YYYY-MM-DD HH:mm'),
          moment(d.end_time).format('YYYY-MM-DD HH:mm'), d.userscorea, d.userscoreb,
          d.pta, d.pta_ex, d.ptb, d.ptb_ex];
@@ -334,10 +403,10 @@
        data: processData,

        columns: [
-            { title: tb_language[lang].playerA },
-            { title: tb_language[lang].playerB },
-            { title: tb_language[lang].startTime },
-            { title: tb_language[lang].endTime },
+          {title: tb_language[lang].playerA},
+          {title: tb_language[lang].playerB},
+          {title: tb_language[lang].startTime},
+          {title: tb_language[lang].endTime},

        ],
        "columnDefs": [
@@ -395,8 +464,48 @@

      return table;
    },
+    renderRankTable3: function (id, tableData) {
+      tableData = tableData || [];
+      var lang = localStorage.getItem('lang') || 'cn'
+      let that = this
+      var processData = tableData.map(function (d) {
+        console.log(tableData)
+        d = that.exchangeUserInfo3(d);
+        var pt=Math.round(d.pt);
+        var totoal=d.athleticWin+d.athleticLose;
+        return [
+          moment(d.season).format('YYYY-MM'),
+          d.rank,
+          pt,
+          d.athleticWin,
+          d.athleticLose,
+          totoal
+        ];
+      });
+      var table = $(id).DataTable({
+        paging: true,
+        searching: false,
+        ordering: false,
+        lengthChange: false,
+        info: false,
+        data: processData,
+        "pageLength": 12, // 设置每页显示12行数据
+        columns: [
+          {title: tb_language[lang].season},
+          {title: tb_language[lang].rank},
+          {title: tb_language[lang].pt},
+          {title: tb_language[lang].athleticWin},
+          {title: tb_language[lang].athleticLose},
+          {title: tb_language[lang].total},
+        ],
+        "columnDefs": [
+        ],
+        "language": lang === 'en' ? tb_language.en : tb_language.cn
+      });

+      return table;
    },
-  }
+  },
+}

 </script>
--- a/src/components/lang.js
+++ b/src/components/lang.js
@@ -41,6 +41,7 @@ module.exports = {
    dueHistory: '最近决斗记录',
    athleticDueHistory: '竞技场决斗记录',
    entertainDueHistory: '娱乐场决斗记录',
+    monthlyHistory: '每月决斗记录',
    tagInfo: '绿色表示获胜方，红色则表示掉线。',
    rates: '卡组胜率',

@@ -155,6 +156,7 @@ module.exports = {
    side: 'Side',
    extra: 'Extra',
    dueHistory: 'Recent Due History',
+    monthlyHistory: 'Monthly Rank Record',
    athleticDueHistory: 'Athletic Due History',
    entertainDueHistory: 'Entertain Due History',
    tagInfo: 'Green tag represents the winner.Red tag represents player lost connection.',

--- a/src/components/tb_lang.js
+++ b/src/components/tb_lang.js
@@ -29,7 +29,10 @@ module.exports = {
    win: "胜局",
    lose: "负局",
    wl: "胜率",
-
+    athleticWin:'竞技场胜利',
+    athleticLose:'竞技场失败',
+    season:'时间',
+    total:'合计',
    cardName: "卡名",
    used: "使用量",
    put1: "投入1",
@@ -38,6 +41,7 @@ module.exports = {

    deck: "卡组",
    count: "使用数",
+    PickRate : "使用率",
    topTags: "热门标签",

    playerA: '玩家A',
@@ -59,10 +63,14 @@ module.exports = {

    cardName: "Card Name",
    used: "Used",
+    PickRate:"Pick Rate",
    put1: "Put one ",
    put2: "Put two ",
    put3: "Put three ",
-
+    athleticWin:'Win',
+    athleticLose:'Lose',
+    season:'Time',
+    total:'Total',
    deck: "Deck",
    count: "Count",
    topTags: "Top Tags",