Skip to content

Y
Ygopro Arena Web
Commit abbb0b48 authored by 铃兰's avatar 铃兰
Browse files
Options

修复bug

parent 6a65cbdf
Pipeline #22682 passed with stages
      in 2 minutes and 45 seconds
      Hide whitespace changes
      Inline Side-by-side
      Showing with 446 additions and 473 deletions
      src/components/Cards.vue
      View file @ abbb0b48
      <template> <template>
      <div> <div>
      <div class="content"> <div class="content">
      <div class="container"> <div class="container">
      <div> <div>
      <h4 class="color-blue"> <h4 class="color-blue">
      <i class="glyphicon glyphicon-filter"></i> <i class="glyphicon glyphicon-filter"></i>
      {{ lang.qc }} {{ lang.qc }}
      </h4> </h4>
      <div class="well"> <div class="well">
      <form action="" method="get" role="form" class="form-inline form-filter"> <form action="" method="get" role="form" class="form-inline form-filter">
      <div class="form-group" style="margin-right: 10px;"> <div class="form-group" style="margin-right: 10px;">
      <div class="input-group"> <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"> <select name="type" class="form-control" id="type" v-on:change="onChange">
      <option value="day">{{ lang.today }}</option> <option value="day">{{ lang.today }}</option>
      <option value="week">{{ lang.week }}</option> <option value="week">{{ lang.week }}</option>
      <option value="halfmonth">{{ lang.half_month }}</option> <option value="halfmonth">{{ lang.half_month }}</option>
      <option value="month">{{ lang.month }}</option> <option value="month">{{ lang.month }}</option>
      <option value="season">{{ lang.season }}</option> <option value="season">{{ lang.season }}</option>
      </select> </select>
      </div> </div>
      </div> </div>
      <div class="form-group" style="margin-right: 10px;"> <div class="form-group" style="margin-right: 10px;">
      <div class="input-group"> <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"> <select name="server" class="form-control" id="server" v-on:change="onChange">
      <option value="mycard">MCPro</option> <option value="mycard">MCPro</option>
      <option value="233">233</option> <option value="233">233</option>
      <option value="koishi">Koishi</option> <option value="koishi">Koishi</option>
      <option value="koishi_tcg">Koishi_tcg</option> <option value="koishi_tcg">Koishi_tcg</option>
      </select> </select>
      </div> </div>
      </div> </div>
      <div class="form-group" style="margin-right: 10px;"> <div class="form-group" style="margin-right: 10px;">
      <div class="input-group"> <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"> <select name="source" class="form-control" id="source" v-on:change="onChange">
      <option value="athletic">{{ lang.athletic }}</option> <option value="athletic">{{ lang.athletic }}</option>
      <option value="entertain">{{ lang.entertain }}</option> <option value="entertain">{{ lang.entertain }}</option>
      <option value="custom">{{ lang.custom }}</option> <option value="custom">{{ lang.custom }}</option>
      <option value="tag">{{ lang.tag }}</option> <option value="tag">{{ lang.tag }}</option>
      </select> </select>
      </div> </div>
      </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>
      </div>
      <div class="form-group" style="display:none">
      <button type="submit" id="search"
      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>
      <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>
      </li>
      <li :class="{ active: !isActive }">
      <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>
      </li>
      <li>
      <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>
      </li>
      <li>
      <a href="#tab-5" role="tab" data-toggle="tab" @click='navClick("Extra")'><img class="tab-img"
      :src="img5"></a>
      </li>
      </ul>
      <div class="tab-content">
      <div role="tabpanel" class="tab-pane" :class="{ active: isActive }" v-if="isActive"
      id="tab-0">
      <br>
      <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
      <table id="deck" class="table table-striped table-bordered table-hover example"
      :width="width"></table>
      </div>
      </div>
      <div role="tabpanel" class="tab-pane" :class="{ active: !isActive }" id="tab-1">
      <br>
      <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
      <table id="monster" class="table table-striped table-bordered table-hover example"
      :width="width"></table>
      </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="tab-2">
      <br>
      <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
      <table id="spell" class="table table-striped table-bordered table-hover example"
      :width="width"></table>
      </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="tab-3">
      <br>
      <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
      <table id="trap" class="table table-striped table-bordered table-hover example"
      :width="width"></table>
      </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="tab-4">
      <br>
      <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
      <table id="side" class="table table-striped table-bordered table-hover example"
      :width="width"></table>
      </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="tab-5">
      <br>
      <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
      <table id="ex" class="table table-striped table-bordered table-hover example"
      :width="width"></table>
      </div>
      </div>
      <div class="form-group" style="display:none">
      <button type="submit" id="search"
      class="form-control btn btn-primary">{{ lang.search }}
      </button>
      </div>
      </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>
      </div>
      <div class="form-group" style="display:none">
      <button type="submit" id="search"
      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>
      <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>
      </li>
      <li :class="{ active: !isActive }">
      <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>
      </li>
      <li>
      <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>
      </li>
      <li>
      <a href="#tab-5" role="tab" data-toggle="tab" @click='navClick("Extra")'><img class="tab-img"
      :src="img5"></a>
      </li>
      </ul>
      <div class="tab-content">
      <div role="tabpanel" class="tab-pane" :class="{ active: isActive }" v-if="isActive"
      id="tab-0">
      <br>
      <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
      <table id="deck" class="table table-striped table-bordered table-hover example"
      :width="width"></table>
      </div> </div>
      </div> <Footads></Footads>
      <div role="tabpanel" class="tab-pane" :class="{ active: !isActive }" id="tab-1">
      <br>
      <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
      <table id="monster" class="table table-striped table-bordered table-hover example"
      :width="width"></table>
      </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="tab-2">
      <br>
      <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
      <table id="spell" class="table table-striped table-bordered table-hover example"
      :width="width"></table>
      </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="tab-3">
      <br>
      <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
      <table id="trap" class="table table-striped table-bordered table-hover example"
      :width="width"></table>
      </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="tab-4">
      <br>
      <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
      <table id="side" class="table table-striped table-bordered table-hover example"
      :width="width"></table>
      </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="tab-5">
      <br>
      <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
      <table id="ex" class="table table-striped table-bordered table-hover example"
      :width="width"></table>
      </div>
      </div>
      <div class="form-group" style="display:none">
      <button type="submit" id="search"
      class="form-control btn btn-primary">{{ lang.search }}
      </button>
      </div>
      </div> </div>
      </div>
      </div> </div>
      <Footads></Footads>
      </div>
      </div>
      </div> </div>
      </template> </template>
      <script> <script>
      import Footads from './Footads' import Footads from './Footads'
      import tb_language from './tb_lang.js' import tb_language from './tb_lang.js'
      import { import {
      mapGetters mapGetters
      } from 'vuex' } from 'vuex'
      import API from '../api'; import API from '../api';
      import img0 from '../assets/img/500x300_deck.png' import img0 from '../assets/img/500x300_deck.png'
      ...@@ -190,343 +190,316 @@ var exTable; ...@@ -190,343 +190,316 @@ var exTable;
      var sideTable; var sideTable;
      var deckTable; var deckTable;
      const placeholder = { const placeholder = {
      Deck: '请输入卡组名..', Deck: '请输入卡组名..',
      Monster: '请输入怪兽卡名..', Monster: '请输入怪兽卡名..',
      Spell: '请输入魔法卡名..', Spell: '请输入魔法卡名..',
      Trap: '请输入陷阱卡名..', Trap: '请输入陷阱卡名..',
      Side: '请输入卡片名..', Side: '请输入卡片名..',
      Extra: '请输入卡片名..', Extra: '请输入卡片名..',
      } }
      export default { export default {
      components: { components: {
      Footads Footads
      },
      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;
      if (null == u) {
      return true;
      }
      var result = regex_match.exec(u);
      if (null == result) {
      } else {
      this.width = "250%"
      }
      var lang = localStorage.getItem('lang') || 'cn';
      this.init(lang)
      },
      mounted: function () {
      this.init2();
      },
      data() {
      return {
      totalDeck: 0,
      type: "",
      isActive: true,
      width: "100%",
      img0: img0,
      img1: img1,
      img2: img2,
      img3: img3,
      img4: img4,
      img5: img5,
      }
      },
      computed: {
      ...mapGetters({
      lang: 'getLang',
      }),
      },
      watch: {
      lang: function (val) {
      // console.log('lang change1', val)
      this.init2()
      }, },
      }, created: function () {
      methods: { var regex_match =
      period(){ /(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;
      const today = new Date(); if (null == u) {
      const year = today.getFullYear(); return true;
      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; var result = regex_match.exec(u);
      }, Infinity); if (null == result) {
      // 根据select设定对应天数 } else {
      const periodMap = { this.width = "250%"
      day: 1, }
      week: 7, var lang = localStorage.getItem('lang') || 'cn';
      halfmonth: 15, this.init(lang)
      month: 30,
      season: season
      };
      var selectedType = $("#type").val();
      return periodMap[selectedType] || 1;
      }, },
      mounted: function () {
      navClick(data) { this.init2();
      // console.log('%c ---------------------src' + '\\' + 'components' + '\\' + 'Cards.vue---------------------%c:238', 'background:#f034c6', 'background:#14f1a4',
      // data)
      $(".input-sm").attr("placeholder", placeholder[data])
      }, },
      init: function (lang) { data() {
      if (lang === "cn") { return {
      this.isActive = true; totalDeck: 0,
      } else { type: "",
      this.isActive = false; isActive: true,
      } width: "100%",
      // this.lang = language[lang] img0: img0,
      this.getCount() img1: img1,
      img2: img2,
      img3: img3,
      img4: img4,
      img5: img5,
      }
      }, },
      init2: function () { computed: {
      var lang = localStorage.getItem('lang') || 'cn'; ...mapGetters({
      if (lang === "cn") { lang: 'getLang',
      this.isActive = true; }),
      } else { },
      this.isActive = false; watch: {
      } lang: function (val) {
      var self = this; // console.log('lang change1', val)
      this.getCount().then(function (count) { this.init2()
      self.totalDeck = count; // 设置totalDeck的值 },
      // 在获取到count后调用init2 },
      methods: {
      function renderPage() { // 计算禁卡表发布时间间隔
      // period() {
      if (monsterTable) { // const today = new Date();
      monsterTable.clear(); // const year = today.getFullYear();
      monsterTable.destroy(); // const dates = [
      } // new Date(year, 0, 1),
      if (spellTable) { // new Date(year, 3, 1),
      spellTable.clear(); // new Date(year, 6, 1),
      spellTable.destroy(); // new Date(year, 9, 1),
      } // ];
      if (trapTable) { // const season = dates.reduce((min, date) => {
      trapTable.clear(); // const diff = Math.floor((today - date) / (1000 * 60 * 60 * 24));
      trapTable.destroy(); // if (today >= date && diff >= 0 && diff < min) {
      } // return diff;
      if (exTable) { // }
      exTable.clear(); // return min;
      exTable.destroy(); // }, Infinity);
      } // // 根据select设定对应天数
      if (sideTable) { // const periodMap = {
      sideTable.clear(); // day: 1,
      sideTable.destroy(); // week: 7,
      } // halfmonth: 15,
      var server = $("#server").val() || "mycard" // month: 30,
      var source = $("#source").val() || "athletic" // season: season
      var final_source = server + "-" + source // };
      $.get('https://sapi.moecube.com:444/ygopro/analytics/single/type', { // var selectedType = $("#type").val();
      type: $("#type").val(), // return periodMap[selectedType] || 1;
      lang: localStorage.getItem('lang') || 'cn', // },
      extra: 'name',
      source: final_source navClick(data) {
      }, function (data) { // console.log('%c ---------------------src' + '\\' + 'components' + '\\' + 'Cards.vue---------------------%c:238', 'background:#f034c6', 'background:#14f1a4',
      var monster = data.monster; // data)
      var spell = data.spell; $(".input-sm").attr("placeholder", placeholder[data])
      var trap = data.trap; },
      var side = data.side; init: function (lang) {
      var ex = data.ex; if (lang === "cn") {
      monsterTable = renderTable("#monster", monster) this.isActive = true;
      spellTable = renderTable("#spell", spell) } else {
      trapTable = renderTable("#trap", trap) this.isActive = false;
      exTable = renderTable("#ex", ex) }
      sideTable = renderTable("#side", side) // this.lang = language[lang]
      // console.log(data) this.getCount()
      }); },
      //卡组api https://sapi.moecube.com:444/ygopro/analytics/deck/type?type=day&source=mycard-entertain init2: function () {
      //只显示中文 var lang = localStorage.getItem('lang') || 'cn';
      var lang = localStorage.getItem('lang') || 'cn'; if (lang === "cn") {
      if (lang === "cn") { this.isActive = true;
      if (deckTable) { } else {
      deckTable.clear(); this.isActive = false;
      deckTable.destroy();
      } }
      $.get('https://sapi.moecube.com:444/ygopro/analytics/deck/type', {
      type: $("#type").val(),
      source: final_source
      }, function (data) {
      var obj = data;
      if (typeof obj === 'string')
      obj = JSON.parse(data);
      var rank = 1;
      var processData = obj.map(function (x) {
      var tagStr = [];
      var deckName = x.name;
      for (var i = 0; i < x.tags.length; i++) {
      var tagName = x.tags[i].name || x.tags[i].toString() || "";
      var short_tagName = tagName.replace(deckName + "-", "");
      tagStr.push(short_tagName)
      }
      var period = self.period(); var self = this;
      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: [
      {
      title: tb_language[lang].rank
      },
      {
      title: tb_language[lang].deck
      },
      {
      title: tb_language[lang].count
      },
      {
      title: tb_language[lang].PickRate
      },
      {
      title: tb_language[lang].topTags
      },
      ],
      columnDefs: [
      {
      render: function (data, type, row) {
      return "<a href='?name=" + data + "#/deck'>" + data + "</a>";
      },
      targets: 1
      }
      ],
      language: tb_language[lang]
      });
      }); function renderPage() {
      } if (monsterTable) {
      } monsterTable.clear();
      monsterTable.destroy();
      }
      if (spellTable) {
      spellTable.clear();
      spellTable.destroy();
      }
      if (trapTable) {
      trapTable.clear();
      trapTable.destroy();
      }
      if (exTable) {
      exTable.clear();
      exTable.destroy();
      }
      if (sideTable) {
      sideTable.clear();
      sideTable.destroy();
      }
      function renderTable(tableID, tableData) { var server = $("#server").val() || "mycard"
      tableData = tableData || []; var source = $("#source").val() || "athletic"
      var lang = localStorage.getItem('lang') || 'cn'; var final_source = server + "-" + source
      var langIndex = (lang === 'en' ? 'en-US' : 'zh-CN');
      var rank = 1; $.get('https://sapi.moecube.com:444/ygopro/analytics/single/type', {
      var processData = tableData.map(function (d) { type: $("#type").val(),
      var period = self.period(); lang: localStorage.getItem('lang') || 'cn',
      var PickRate = (parseInt(d.putone) + parseInt(d.puttwo) + parseInt(d.putthree)) / self.totalDeck / period; extra: 'name',
      PickRate = (0 < PickRate && PickRate < 1) ? (PickRate * 100).toFixed(2) + "%" : "-"; source: final_source
      // 使用率出现-是数据算出来不在0-1之间 }, function (data) {
      return [ var monster = data.monster;
      rank++, d.name ? d.name[langIndex] : "未知卡片", var spell = data.spell;
      d.frequency, var trap = data.trap;
      PickRate, var side = data.side;
      d.putone, var ex = data.ex;
      d.puttwo,
      d.putthree, monsterTable = renderTable("#monster", monster);
      d.id spellTable = renderTable("#spell", spell);
      ]; trapTable = renderTable("#trap", trap);
      }); exTable = renderTable("#ex", ex);
      var table = $(tableID).DataTable({ sideTable = renderTable("#side", side);
      data: processData, });
      pageLength: 50,
      order: [ var lang = localStorage.getItem('lang') || 'cn';
      [2, "desc"] if (lang === "cn") {
      ], if (deckTable) {
      "ordering": true, deckTable.clear();
      columns: [{ deckTable.destroy();
      title: tb_language[lang].rank }
      },
      { $.get('https://sapi.moecube.com:444/ygopro/analytics/deck/type', {
      title: tb_language[lang].cardName type: $("#type").val(),
      }, source: final_source
      { }, function (data) {
      title: tb_language[lang].used var obj = data;
      }, if (typeof obj === 'string')
      { obj = JSON.parse(data);
      title: tb_language[lang].PickRate
      }, var rank = 1;
      { var processData = obj.map(function (x) {
      title: tb_language[lang].put1 var tagStr = [];
      }, var deckName = x.name;
      { for (var i = 0; i < x.tags.length; i++) {
      title: tb_language[lang].put2 var tagName = x.tags[i].name || x.tags[i].toString() || "";
      }, var short_tagName = tagName.replace(deckName + "-", "");
      { tagStr.push(short_tagName)
      title: tb_language[lang].put3 }
      }, var PickRate = (0 < (x.count / (self.totalDeck)) && (x.count / (self.totalDeck)) < 1)
      ], ? ((x.count / (self.totalDeck) * 100)).toFixed(2) + "%" : "-";
      "columnDefs": [{
      "render": function (data, type, row) { // 出现-是数据算出来不在0-1之间
      return "<a href='https://www.ourocg.cn/search/" + row[6] + return [rank++, x.name, x.count, PickRate, tagStr.join(" , ")];
      "'>" + data + "</a>"; });
      },
      "targets": 1 deckTable = $("#deck").DataTable({
      },], data: processData,
      "language": tb_language[lang] pageLength: 25,
      }); order: [
      $(".input-sm").attr("placeholder", placeholder.Deck) [2, "desc"]
      return table; ],
      } ordering: true,
      columns: [
      {title: tb_language[lang].rank},
      {title: tb_language[lang].deck},
      {title: tb_language[lang].count},
      {title: tb_language[lang].PickRate},
      {title: tb_language[lang].topTags},
      ],
      columnDefs: [
      {
      render: function (data, type, row) {
      return "<a href='?name=" + data + "#/deck'>" + data + "</a>";
      },
      targets: 1
      }
      ],
      language: tb_language[lang]
      });
      });
      }
      }
      function renderTable(tableID, tableData) {
      tableData = tableData || [];
      var lang = localStorage.getItem('lang') || 'cn';
      var langIndex = (lang === 'en' ? 'en-US' : 'zh-CN');
      var rank = 1;
      var processData = tableData.map(function (d) {
      // var period = self.period();
      var PickRate = (parseInt(d.putone) + parseInt(d.puttwo) + parseInt(d.putthree)) / self.totalDeck;
      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({
      data: processData,
      pageLength: 50,
      order: [[2, "desc"]],
      ordering: true,
      columns: [
      {title: tb_language[lang].rank},
      {title: tb_language[lang].cardName},
      {title: tb_language[lang].used},
      {title: tb_language[lang].PickRate},
      {title: tb_language[lang].put1},
      {title: tb_language[lang].put2},
      {title: tb_language[lang].put3},
      ],
      columnDefs: [
      {
      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);
      return table;
      }
      renderPage(); renderPage();
      $("#search").click(function () {
      renderPage();
      return false;
      })
      });
      $("#search").click(function () {
      renderPage();
      return false;
      });
      },
      onChange: function () {
      var self = this;
      this.getCount().then(function () {
      self.init2();
      });
      },
      getCount: function () {
      var server = $("#server").val() || "mycard"
      var source = $("#source").val() || "athletic"
      var opt = {
      type: $("#type").val() || "day",
      source: server + "-" + source
      };
      var self = this;
      return API.getCount(opt).then((res) => {
      if (isNaN(res.data)) {
      return 0;
      } else {
      this.totalDeck = res.data;
      return res.data;
      }
      });
      }
      }, },
      onChange: function () { events: {
      $("#search").trigger('click') 'lang-change': function (lang) {
      this.getCount() this.init(lang)
      }, this.onChange()
      getCount: function () {
      var server = $("#server").val() || "mycard"
      var source = $("#source").val() || "athletic"
      var opt = {
      type: $("#type").val() || "day",
      source: server + "-" + source
      }
      return API.getCount(opt).then((res) => {
      if (isNaN(res.data)) {
      return 0;
      } else {
      this.totalDeck = res.data;
      this.$forceUpdate();
      return res.data;
      } }
      }); },
      }
      },
      events: {
      'lang-change': function (lang) {
      this.init(lang)
      this.onChange()
      }
      },
      } }
      </script> </script>
      <style scoped> <style scoped>
      #deck { #deck {
      margin-top: 20px !important; margin-top: 20px !important;
      border: 1px solid black; border: 1px solid black;
      } }
      </style> </style>
      ......
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment