Skip to content

Y
Ygopro Arena Web
Commit 76ec88ce authored by GaiaXalter's avatar GaiaXalter 💬
Browse files
Options

决斗数据库 卡组胜率:1.禁用table拖拽 2.排序着色功能 3.多页面暗黑模式样式调整

parent 9a8c3b03
Pipeline #8485 failed with stages
      in 60 minutes and 14 seconds
      Hide whitespace changes
      Inline Side-by-side
      Showing with 417 additions and 206 deletions
      src/assets/darkModelCss/darkStyleMix.css
      View file @ 76ec88ce
      .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus
      {
      background-color: #1a4861;
      border: 3px solid #161b22;
      background-color: #1a4861;
      border: 3px solid #161b22;
      }
      .nav-tabs {
      border-bottom: 1px solid black;
      border-bottom: 1px solid black;
      }
      .well
      {
      .well
      {
      background-color: #1a4861;
      background-color: #1a4861;
      border:none;
      }
      border:none;
      }
      .input-group-addon
      {
      color: white;
      background-color: #161b22;
      border: 1px solid black;
      color: white;
      background-color: #161b22;
      border: 1px solid black;
      }
      .form-control
      {
      border: 2px solid black;
      color: white;
      background-color: #1D252F;
      }
      .tab-img {
      height: 72px;
      width: 120px;
      }
      .table-responsive {
      border: 0px solid transparent!important;
      overflow: hidden!important;
      }
      .search-form div.input-group-addon {
      background: #1D252F;
      color: #80A3BD;
      border-bottom-left-radius: 2px;
      border-top-left-radius: 2px;
      border: 1px solid #b6c3cd;
      border-right: 0;
      }
      .search-form div.input-group-addon {
      background: #1a4861;
      color: #80A3BD;
      border-bottom-left-radius: 2px;
      border-top-left-radius: 2px;
      border: 2px solid black
      ;
      border-right: 1px solid black;
      }
      .search-form .input-group input {
      background-color: #1D252F;
      box-shadow: none;
      color: white;
      outline: none;
      border: 2px solid black;
      border-right: 0;
      border-left: 0;
      }
      .search-form div.input-group-btn button {
      border-bottom-right-radius: 2px;
      border-top-right-radius: 2px;
      background: #1a4861;
      box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
      color: #ffffff;
      border: 1px solid black;
      outline: none;
      opacity: 0.9;
      }
      .thumbnail {
      display: block;
      padding: 4px;
      margin-bottom: 22px;
      line-height: 1.42857143;
      background-color: #1D252F;
      border: 1px solid black;
      border-radius: 4px;
      color:white;
      -webkit-transition: border .2s ease-in-out;
      -o-transition: border .2s ease-in-out;
      transition: border .2s ease-in-out;
      }
      .thumbnail .caption {
      padding: 9px;
      color: white;
      }
      .panel-default>.panel-heading {
      color:white;
      background-color: #1a4861;
      border-color: #dddddd;
      }
      .table-striped>tbody>tr:nth-of-type(odd){
      background-color: #1D252F;
      }
      .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
      color: white;
      }
      .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
      background-color: #1a4861;
      border: 1px solid #161b22;
      }
      .nav>li>a:hover, .nav>li>a:focus {
      text-decoration: none;
      background-color: #161b22;
      }
      .nav-tabs>li>a:hover {
      border-color: #161b22 #161b22 #161b22;
      }
      a:hover, a:focus {
      color: white;
      text-decoration: underline;
      }
      .panel-default {
      border: 2px solid black;
      background-color: #1b2738;
      }
      .panel-default>.panel-heading {
      color: #fff;
      background-color: #1a4861;
      border-color: #000;
      }
      tbody {
      border-color: #000;
      }
      .panel>.table-responsive>.table-bordered {
      border-color: #000;
      }
      .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus,
      .pagination>.active>span:focus{
      z-index: 3;
      color: #fff;
      background-color: #1a4861;
      border-color: #1a4861;
      cursor: default;
      }
      .pagination>.active>a, .pagination>.active>span {
      z-index: 3;
      color: #fff;
      background-color: #1a4861;
      border-color: #1a4861;
      cursor: default;
      }
      .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
      z-index: 2;
      color: #fff;
      background-color: #0B202B;
      border-color: #3AB6BA;
      }
      .pagination>li>a, .pagination>li>span {
      position: relative;
      float: left;
      padding: 8px px 12px;
      line-height: 1.42857143;
      text-decoration: none;
      color: #333;
      background-color: #fff;
      border: 1px solid black;
      margin-left: -1px;
      }
      .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
      color: black;
      background-color: #1D252F;
      border-color: #1D252F;
      border:1px solid black;
      cursor: not-allowed;
      }
      .pagination>li>a, .pagination>li>span {
      color: #fff;
      background-color: #181D24;
      border: 1px solid black;
      .form-control
      {
      }
      #entertain_rank{
      border: 1px solid black;
      color: white;
      background-color: #283044;
      overflow:hidden;
      }
      .tab-img {
      height: 72px;
      width: 120px;
      }
      .table-responsive {
      }
      border: 1px solid black;
      thead {
      background-color: #1a4861;
      }
      .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1000;
      display: none;
      float: left;
      min-width: 160px;
      padding: 5px 0;
      margin: 2px 0 0;
      list-style: none;
      font-size: 16px;
      text-align: left;
      background-color: #283044;
      border: 1px solid black;
      border: 1px solid black;
      border-radius: 4px;
      -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
      box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      }
      .dropdown-menu>li>a {
      display: block;
      padding: 3px 20px;
      clear: both;
      font-weight: normal;
      line-height: 1.42857143;
      color: white;
      white-space: nowrap;
      }
      .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
      text-decoration: none;
      color: #fff;
      background-color: #1a4861;
      }
      .dropdown-menu .divider {
      height: 1px;
      margin: 10px 0;
      overflow: hidden;
      background-color: #e5e5e5;
      }
      \ No newline at end of file
      src/components/Cards.vue
      View file @ 76ec88ce
      ......@@ -54,7 +54,8 @@
      </div>
      <div class="form-group" style="display:none">
      <button type="submit" id="search" class="form-control btn btn-primary">{{lang.search}}</button>
      <button type="submit" id="search"
      class="form-control btn btn-primary">{{lang.search}}</button>
      </div>
      </form>
      ......@@ -62,8 +63,6 @@
      <h4 class="color-blue"><i class="glyphicon glyphicon-list-alt"></i> {{lang.table_data}} </h4>
      <div>
      <ul class="nav nav-tabs">
      ......@@ -89,71 +88,78 @@
      <div class="tab-content">
      <div role="tabpanel" class="tab-pane" :class="{ active: isActive }" v-if="isActive" id="tab-0">
      <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>
      <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>
      <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>
      <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>
      <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>
      <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>
      <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>
      <button type="submit" id="search"
      class="form-control btn btn-primary">{{lang.search}}</button>
      </div>
      </div>
      </div>
      </div>
      <Footads></Footads>
      <Footads></Footads>
      </div>
      </div>
      </div>
      </template>
      <script>
      import Footads from './Footads'
      import Footads from './Footads'
      import tb_language from './tb_lang.js'
      import { mapGetters } from 'vuex'
      import {
      mapGetters
      } from 'vuex'
      import API from '../api';
      import img0 from '../assets/img/500x300_deck.jpg'
      // import img1 from '../assets/MonsterWithBorder.jpg'
      import img1 from '../assets/img/500x300_monster.jpg'
      ......@@ -164,45 +170,36 @@
      // import img4 from '../assets/SideWithBorder.jpg'
      import img4 from '../assets/img/500x300_side.jpg'
      import img5 from '../assets/img/ExtraWithBorder.jpg'
      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;
      export default {
      components: {
      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;
      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 {
      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,
      ......@@ -222,13 +219,13 @@
      }),
      },
      watch: {
      lang: function (val) {
      lang: function(val) {
      // console.log('lang change1', val)
      this.init2()
      },
      },
      methods: {
      init: function (lang) {
      init: function(lang) {
      if (lang === "cn") {
      this.isActive = true;
      } else {
      ......@@ -237,13 +234,14 @@
      // 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;
      }
      function renderPage() {
      if (monsterTable) {
      monsterTable.clear();
      ......@@ -265,49 +263,43 @@
      sideTable.clear();
      sideTable.destroy();
      }
      var server = $("#server").val() || "mycard"
      var source = $("#source").val() || "athletic"
      var final_source = server + "-" + source
      $.get('https://sapi.moecube.com:444/ygopro/analytics/single/type', {
      type: $("#type").val(),
      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;
      var side = data.side;
      var ex = data.ex;
      monsterTable = renderTable("#monster", monster)
      spellTable = renderTable("#spell", spell)
      trapTable = renderTable("#trap", trap)
      exTable = renderTable("#ex", ex)
      sideTable = renderTable("#side", side)
      });
      //卡组api https://sapi.moecube.com:444/ygopro/analytics/deck/type?type=day&source=mycard-entertain
      //只显示中文
      var lang = localStorage.getItem('lang') || 'cn';
      if (lang === "cn") {
      if (deckTable) {
      deckTable.clear();
      deckTable.destroy();
      }
      $.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++) {
      ......@@ -317,95 +309,101 @@
      }
      return [rank++, x.name, x.count, 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].topTags },
      order: [
      [2, "desc"]
      ],
      "columnDefs": [
      "ordering": true,
      columns: [{
      title: tb_language[lang].rank
      },
      {
      "render": function (data, type, row) {
      // return "<span title='" + data + "'>" + data + "</span>";
      // return "<img src='imag.png' />";
      return "<a href='?name=" + data + "#/deck'>" + data + "</a>";
      },
      "targets": 1
      title: tb_language[lang].deck
      },
      {
      title: tb_language[lang].count
      },
      {
      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>";
      },
      "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) {
      return [rank++, d.name ? d.name[langIndex] : "未知卡片", d.frequency, d.putone, d.puttwo, d.putthree, d.id];
      var processData = tableData.map(function(d) {
      return [rank++, d.name ? d.name[langIndex] : "未知卡片", d.frequency, 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].put1 },
      { title: tb_language[lang].put2 },
      { title: tb_language[lang].put3 },
      order: [
      [2, "desc"]
      ],
      "columnDefs": [
      "ordering": true,
      columns: [{
      title: tb_language[lang].rank
      },
      {
      title: tb_language[lang].cardName
      },
      {
      title: tb_language[lang].used
      },
      {
      "render": function (data, type, row) {
      // return "<span title='" + data + "'>" + data + "</span>";
      // <<<<<<< HEAD
      // return "<a href='?id=" + row[6] + "#/cardinfo'>" + data + "</a>";
      return "<a href='https://www.ourocg.cn/search/" + row[6] + "'>" + data + "</a>";
      // =======
      // return "<a href='https://www.ourocg.cn/search/" + row[6] + "/'>" + data + "</a>";
      // >>>>>>> 77e3b283f8782193f4ecdaf5219a79ecf9fd2a91
      },
      "targets": 1
      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]
      });
      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
      ......@@ -421,58 +419,17 @@
      }
      },
      events: {
      'lang-change': function (lang) {
      'lang-change': function(lang) {
      this.init(lang)
      this.onChange()
      }
      },
      }
      </script>
      <style scoped>
      .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus
      {
      background-color: #1a4861;
      border: 3px solid #161b22;
      }
      .nav-tabs {
      border-bottom: 1px solid black;
      }
      .well
      {
      background-color: #1a4861;
      border:none;
      }
      .input-group-addon
      {
      color: white;
      background-color: #161b22;
      border: 1px solid black;
      }
      .form-control
      {
      border: 1px solid black;
      color: white;
      background-color: #283044;
      }
      .tab-img {
      height: 72px;
      width: 120px;
      #deck {
      margin-top:20px!important;
      border:1px solid black;
      }
      .table-responsive {
      border: 1px solid black;
      }
      </style>
      </style>
      \ No newline at end of file
      src/components/Download.vue
      View file @ 76ec88ce
      ......@@ -2,7 +2,7 @@
      <div class="team-boxed">
      <div class="container">
      <div class="intro">
      <h2 class="text-center">{{lang.downloadPage.welcome}} </h2>
      <h2 id='downLoadWelcome' class="text-center">{{lang.downloadPage.welcome}} </h2>
      <p class="text-center"><strong>{{lang.downloadPage.desc}}</strong> </p>
      </div>
      <div class="row people">
      ......@@ -20,8 +20,8 @@
      </div>
      <div @click="gogo('android')" class="col-md-4 col-sm-6 item1">
      <div class="box"><i class="fa fa-android"></i>
      <h3 class="name">Android </h3>
      <!--<p class="title">(YGOMobile)</p>-->
      <h3 class="name">Android </h3>
      <!--<p class="title">(YGOMobile)</p>-->
      </div>
      </div>
      ......@@ -42,22 +42,20 @@
      <script>
      import querystring from 'querystring';
      import API from '../api'
      import { mapGetters } from 'vuex'
      import {
      mapGetters
      } from 'vuex'
      import "../assets/css/Team-Boxed.css"
      import "../assets/css/Team-Clean.css"
      export default {
      data() {
      return {
      downloadUrls: {},
      }
      },
      created: function () {
      created: function() {
      // https://wudizhanche.mycard.moe/download?platform=win32
      // https://wudizhanche.mycard.moe/download?platform=darwin
      var self = this
      self.downloadUrls['windows'] = "https://mycard.moe"
      self.downloadUrls['mac'] = "https://mycard.moe"
      ......@@ -79,44 +77,58 @@
      // });
      },
      computed: {
      ...mapGetters({
      ...mapGetters({
      lang: 'getLang',
      }),
      },
      watch: {
      lang: function (val) {
      lang: function(val) {
      this.initLang()
      },
      },
      events: {
      'lang-change': function (lang) {
      'lang-change': function(lang) {
      this.initLang(lang)
      }
      },
      methods: {
      initLang: function (lang) {
      },
      gogo: function (url) {
      initLang: function(lang) {},
      gogo: function(url) {
      // window.open(url)
      window.location.href = this.downloadUrls[url]
      }
      },
      }
      </script>
      <style scoped>
      #downLoadWelcome {color: white;}
      .team-boxed {
      color: #313437;
      background-color: #ffffff;
      color: white;
      background-color: #1b2738;
      }
      .item1 {
      cursor: pointer;
      }
      .box {
      background-color: red;
      }
      .team-boxed .item1 .box {
      text-align: center;
      padding: 30px;
      background-color: #1b2738;
      margin-bottom: 30px;
      }
      .team-boxed .item1 {
      text-align:center;
      box-shadow:10px 10px 15px #1b2738;
      }
      .team-boxed .item1 {
      text-align: center;
      box-shadow: 10px 10px 35px black;
      }
      </style>
      \ No newline at end of file
      src/components/Index.vue
      View file @ 76ec88ce
      ......@@ -62,12 +62,12 @@
      </template>
      <script>
      import querystring from 'querystring';
      import image from '../assets/img/banner.jpg'
      import image3 from '../assets/img/image3.jpg'
      import { mapGetters } from 'vuex'
      import API from '../api'
      /* import "../assets/darkModelCss/darkMix.css" */
      import "../assets/darkModelCss/darkStyleMix.css"
      export default {
      data() {
      return {
      ......
      src/components/Rates.vue
      View file @ 76ec88ce
      ......@@ -29,7 +29,7 @@
      :cell-style="csMonitor" @sort-change='sortChange'>
      <el-table-column v-for="item in tableHead" :key="item.key" :label='item.label'
      :property='item.prop' :sortable="item.sortable" :render-header="labelFunction">
      :property='item.prop' :sortable="item.sortable" :resizable="item.resizable" :render-header="labelFunction">
      <template slot-scope="scope">
      <div>{{item.key== 0 ? scope.row[item.label]: scope.row[item.label]+'%'}}
      ......@@ -54,12 +54,14 @@
      //例如：import 《组件名称》 from '《组件路径》';
      import API from '../api';
      const winRateButtonText = ['先攻胜率', '后攻胜率', '综合胜率']
      const builtInColumnTitle = {deckType:'卡组种类', avgWinRate:'均胜率'}
      export default {
      //import引入的组件需要注入到对象中才能使用
      components: {},
      data() {
      //这里存放数据
      return {
      builtInColumnTitle,
      tableChangeCount: 0,
      winRateColumnTitle: [],
      winRateButtonDefault: '0',
      ......@@ -100,7 +102,37 @@
      return label;
      },
      sortChange(para) {
      this.tableOrder = para.order
      let curChangeColName = para.prop //排序列名
      this.tableOrder = para.order//排序方式
      let tempOrderTable = [...this.tableData]
      tempOrderTable = this.tableBubbleSort(curChangeColName, tempOrderTable)
      this.tableData=tempOrderTable
      },
      tableBubbleSort(OrderKey, curTable) {
      let arr=curTable
      for (let i = 0; i < arr.length; i++) {
      for (let j = 0; j < arr.length - 1 - i; j++) {
      let curOrderItem=arr[j][OrderKey]
      let curOrderNextItem=arr[j+1][OrderKey]
      if (curOrderItem < curOrderNextItem) {
      [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
      }
      }//降序
      if ( this.tableOrder=='ascending') {
      curTable=curTable.reverse()
      }
      if ( this.tableOrder==null) {
      curTable= [...this.totalWinRateData[this.tableFlag]]
      }
      return [...curTable]
      },
      toPoint(percent) {
      percent = percent + ''
      ......@@ -175,10 +207,13 @@
      tempCellCss["font-weight"] = 'bold'
      }
      }
      if (this.tableOrder == null) {
      let tempLabel = cell.column.label
      let tempContent = this.winRateColumnTitle[cell.rowIndex]
      let tempLabel = cell.column.label//当前格子的列名
      let tempContent = this.tableData[cell.rowIndex][this.builtInColumnTitle.deckType]//当前格子的行名
      if (tempLabel == tempContent) {
      {
      if (this.tableFlag == '2') {
      tempCellCss["color"] = '#39485C'
      ......@@ -186,47 +221,51 @@
      tempCellCss["background-color"] = '#141A21' //胜率50的斜线
      }
      }
      }
      return tempCellCss
      },
      showClickWinRate(tab, event) {
      let curTabNo = parseInt(tab.name)
      this.tableData = this.totalWinRateData[curTabNo]
      this.tableData = [...this.totalWinRateData[curTabNo]]
      this.tableFlag = curTabNo
      },
      handleColumn(jsonTxT) {
      let tempColumnTitle = []
      let tempObj = {
      label: '卡组种类',
      prop: '卡组种类',
      label: this.builtInColumnTitle.deckType,
      prop: this.builtInColumnTitle.deckType,
      key: 0
      }
      tempObj['resizable'] = false
      tempObj['sortable'] = false
      tempColumnTitle.push(tempObj)
      for (let index = 0; index < 10; index++) {
      const element = jsonTxT[index].deckb;
      let tempColumn = {
      tempObj = {
      label: element,
      prop: element,
      key: index + 1
      }
      tempColumn['sortable'] = true
      tempColumnTitle.push(tempColumn)
      tempObj['resizable'] = false
      tempObj['sortable'] = 'custom'
      tempColumnTitle.push(tempObj)
      this.winRateColumnTitle.push(element)
      }
      tempObj = {
      label: '均胜率',
      prop: '均胜率',
      label: this.builtInColumnTitle.avgWinRate,
      prop: this.builtInColumnTitle.avgWinRate,
      key: 11
      }
      tempObj['sortable'] = true
      tempObj['resizable'] = false
      tempObj['sortable'] = 'custom'
      tempColumnTitle.push(tempObj)
      this.tableHead = tempColumnTitle
      for (let x = 0; x < 3; x++) {
      let tempRowList = []
      for (let j = 0; j < 10; j++) {
      let tempRow = {}
      tempRow['卡组种类'] = tempColumnTitle[j + 1].label
      tempRow[this.builtInColumnTitle.deckType] = tempColumnTitle[j + 1].label
      let avgRowRateList = []
      for (let i = 0; i < 10; i++) {
      let secondStrikeJson = jsonTxT[10 * i + j]
      ......@@ -247,7 +286,7 @@
      tempRow[tempColumnTitle[i + 1].label] = tempWinRate[x]
      avgRowRateList.push(tempWinRate[x])
      }
      tempRow['均胜率'] = (Math.round((avgRowRateList.reduce((prev, current, index, avgRowRateList) => {
      tempRow[this.builtInColumnTitle.avgWinRate] = (Math.round((avgRowRateList.reduce((prev, current, index, avgRowRateList) => {
      return prev + current
      }) / 10 * 100)) / 100)
      tempRowList.push(tempRow)
      ......@@ -255,7 +294,9 @@
      tempRowList.push()
      this.totalWinRateData.push(tempRowList)
      }
      this.tableData = this.totalWinRateData[0]
      this.tableData = [...this.totalWinRateData[0]]//包含三种场次的数据
      }
      },
      //生命周期 - 创建完成（可以访问当前this实例）
      ......@@ -330,6 +371,9 @@
      background: #409eff;
      }
      .winRateContent .el-tabs__nav-wrap::after {
      background-color: black;
      }
      .el-table,
      .el-table__expanded-cell {
      ......
      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