Commit 76ec88ce authored by GaiaXalter's avatar GaiaXalter 💬

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

parent 9a8c3b03
Pipeline #8485 failed with stages
in 60 minutes and 14 seconds
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus
{ {
background-color: #1a4861; background-color: #1a4861;
border: 3px solid #161b22; border: 3px solid #161b22;
} }
.nav-tabs { .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 .input-group-addon
{ {
color: white; color: white;
background-color: #161b22; background-color: #161b22;
border: 1px solid black; border: 1px solid black;
} }
.form-control
{
.form-control border: 2px solid black;
{ color: white;
background-color: #1D252F;
border: 1px solid black; }
color: white; .tab-img {
background-color: #283044; 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 {
.tab-img { text-decoration: none;
height: 72px; background-color: #161b22;
width: 120px; }
} .nav-tabs>li>a:hover {
.table-responsive { 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;
}
#entertain_rank{
overflow:hidden;
}
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: 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
...@@ -54,7 +54,8 @@ ...@@ -54,7 +54,8 @@
</div> </div>
<div class="form-group" style="display:none"> <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>
</form> </form>
...@@ -62,8 +63,6 @@ ...@@ -62,8 +63,6 @@
<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> <div>
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
...@@ -89,50 +88,58 @@ ...@@ -89,50 +88,58 @@
<div class="tab-content"> <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> <br>
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;"> <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> </div>
<div role="tabpanel" class="tab-pane" :class="{ active: !isActive }" id="tab-1"> <div role="tabpanel" class="tab-pane" :class="{ active: !isActive }" id="tab-1">
<br> <br>
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;"> <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> </div>
<div role="tabpanel" class="tab-pane" id="tab-2"> <div role="tabpanel" class="tab-pane" id="tab-2">
<br> <br>
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;"> <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> </div>
<div role="tabpanel" class="tab-pane" id="tab-3"> <div role="tabpanel" class="tab-pane" id="tab-3">
<br> <br>
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;"> <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> </div>
<div role="tabpanel" class="tab-pane" id="tab-4"> <div role="tabpanel" class="tab-pane" id="tab-4">
<br> <br>
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;"> <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> </div>
<div role="tabpanel" class="tab-pane" id="tab-5"> <div role="tabpanel" class="tab-pane" id="tab-5">
<br> <br>
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;"> <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> </div>
<div class="form-group" style="display:none"> <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>
...@@ -143,17 +150,16 @@ ...@@ -143,17 +150,16 @@
</div> </div>
</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 { mapGetters } from 'vuex' import {
mapGetters
} from 'vuex'
import API from '../api'; import API from '../api';
import img0 from '../assets/img/500x300_deck.jpg' import img0 from '../assets/img/500x300_deck.jpg'
// import img1 from '../assets/MonsterWithBorder.jpg' // import img1 from '../assets/MonsterWithBorder.jpg'
import img1 from '../assets/img/500x300_monster.jpg' import img1 from '../assets/img/500x300_monster.jpg'
...@@ -164,45 +170,36 @@ ...@@ -164,45 +170,36 @@
// import img4 from '../assets/SideWithBorder.jpg' // import img4 from '../assets/SideWithBorder.jpg'
import img4 from '../assets/img/500x300_side.jpg' import img4 from '../assets/img/500x300_side.jpg'
import img5 from '../assets/img/ExtraWithBorder.jpg' import img5 from '../assets/img/ExtraWithBorder.jpg'
var dt = require('datatables.net') var dt = require('datatables.net')
var dt2 = require('datatables.net-bs') var dt2 = require('datatables.net-bs')
import "../assets/css/dataTables.bootstrap.min.css" import "../assets/css/dataTables.bootstrap.min.css"
var monsterTable; var monsterTable;
var spellTable; var spellTable;
var trapTable; var trapTable;
var exTable; var exTable;
var sideTable; var sideTable;
var deckTable; var deckTable;
export default { export default {
components: { components: {
Footads Footads
}, },
created: function () { created: function() {
var regex_match =
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; /(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; var u = navigator.userAgent;
if (null == u) { if (null == u) {
return true; return true;
} }
var result = regex_match.exec(u); var result = regex_match.exec(u);
if (null == result) { if (null == result) {} else {
} else {
this.width = "250%" this.width = "250%"
} }
var lang = localStorage.getItem('lang') || 'cn'; var lang = localStorage.getItem('lang') || 'cn';
this.init(lang) this.init(lang)
}, },
mounted: function () { mounted: function() {
this.init2(); this.init2();
}, },
data() { data() {
return { return {
isActive: true, isActive: true,
...@@ -222,13 +219,13 @@ ...@@ -222,13 +219,13 @@
}), }),
}, },
watch: { watch: {
lang: function (val) { lang: function(val) {
// console.log('lang change1', val) // console.log('lang change1', val)
this.init2() this.init2()
}, },
}, },
methods: { methods: {
init: function (lang) { init: function(lang) {
if (lang === "cn") { if (lang === "cn") {
this.isActive = true; this.isActive = true;
} else { } else {
...@@ -237,13 +234,14 @@ ...@@ -237,13 +234,14 @@
// this.lang = language[lang] // this.lang = language[lang]
this.getCount() this.getCount()
}, },
init2: function () { init2: function() {
var lang = localStorage.getItem('lang') || 'cn'; var lang = localStorage.getItem('lang') || 'cn';
if (lang === "cn") { if (lang === "cn") {
this.isActive = true; this.isActive = true;
} else { } else {
this.isActive = false; this.isActive = false;
} }
function renderPage() { function renderPage() {
if (monsterTable) { if (monsterTable) {
monsterTable.clear(); monsterTable.clear();
...@@ -265,49 +263,43 @@ ...@@ -265,49 +263,43 @@
sideTable.clear(); sideTable.clear();
sideTable.destroy(); sideTable.destroy();
} }
var server = $("#server").val() || "mycard" var server = $("#server").val() || "mycard"
var source = $("#source").val() || "athletic" var source = $("#source").val() || "athletic"
var final_source = server + "-" + source var final_source = server + "-" + source
$.get('https://sapi.moecube.com:444/ygopro/analytics/single/type', { $.get('https://sapi.moecube.com:444/ygopro/analytics/single/type', {
type: $("#type").val(), type: $("#type").val(),
lang: localStorage.getItem('lang') || 'cn', lang: localStorage.getItem('lang') || 'cn',
extra: 'name', extra: 'name',
source: final_source source: final_source
}, function (data) { }, function(data) {
var monster = data.monster; var monster = data.monster;
var spell = data.spell; var spell = data.spell;
var trap = data.trap; var trap = data.trap;
var side = data.side; var side = data.side;
var ex = data.ex; var ex = data.ex;
monsterTable = renderTable("#monster", monster) monsterTable = renderTable("#monster", monster)
spellTable = renderTable("#spell", spell) spellTable = renderTable("#spell", spell)
trapTable = renderTable("#trap", trap) trapTable = renderTable("#trap", trap)
exTable = renderTable("#ex", ex) exTable = renderTable("#ex", ex)
sideTable = renderTable("#side", side) sideTable = renderTable("#side", side)
}); });
//卡组api https://sapi.moecube.com:444/ygopro/analytics/deck/type?type=day&source=mycard-entertain //卡组api https://sapi.moecube.com:444/ygopro/analytics/deck/type?type=day&source=mycard-entertain
//只显示中文 //只显示中文
var lang = localStorage.getItem('lang') || 'cn'; var lang = localStorage.getItem('lang') || 'cn';
if (lang === "cn") { if (lang === "cn") {
if (deckTable) { if (deckTable) {
deckTable.clear(); deckTable.clear();
deckTable.destroy(); deckTable.destroy();
} }
$.get('https://sapi.moecube.com:444/ygopro/analytics/deck/type', { $.get('https://sapi.moecube.com:444/ygopro/analytics/deck/type', {
type: $("#type").val(), type: $("#type").val(),
source: final_source source: final_source
}, function (data) { }, function(data) {
var obj = data; var obj = data;
if (typeof obj === 'string') if (typeof obj === 'string')
obj = JSON.parse(data); obj = JSON.parse(data);
var rank = 1; var rank = 1;
var processData = obj.map(function (x) { var processData = obj.map(function(x) {
var tagStr = []; var tagStr = [];
var deckName = x.name; var deckName = x.name;
for (var i = 0; i < x.tags.length; i++) { for (var i = 0; i < x.tags.length; i++) {
...@@ -317,95 +309,101 @@ ...@@ -317,95 +309,101 @@
} }
return [rank++, x.name, x.count, tagStr.join(" , ")]; return [rank++, x.name, x.count, tagStr.join(" , ")];
}); });
deckTable = $("#deck").DataTable({ deckTable = $("#deck").DataTable({
data: processData, data: processData,
pageLength: 25, pageLength: 25,
order: [[2, "desc"]], order: [
"ordering": true, [2, "desc"]
columns: [
{ title: tb_language[lang].rank },
{ title: tb_language[lang].deck },
{ title: tb_language[lang].count },
{ title: tb_language[lang].topTags },
], ],
"columnDefs": [ "ordering": true,
columns: [{
title: tb_language[lang].rank
},
{
title: tb_language[lang].deck
},
{ {
"render": function (data, type, row) { title: tb_language[lang].count
},
{
title: tb_language[lang].topTags
},
],
"columnDefs": [{
"render": function(data, type, row) {
// return "<span title='" + data + "'>" + data + "</span>"; // return "<span title='" + data + "'>" + data + "</span>";
// return "<img src='imag.png' />"; // return "<img src='imag.png' />";
return "<a href='?name=" + data + "#/deck'>" + data + "</a>"; return "<a href='?name=" + data + "#/deck'>" +
data + "</a>";
}, },
"targets": 1 "targets": 1
}, }, ],
],
"language": tb_language[lang] "language": tb_language[lang]
}); });
}); });
} }
} }
function renderTable(tableID, tableData) { function renderTable(tableID, tableData) {
tableData = tableData || []; tableData = tableData || [];
var lang = localStorage.getItem('lang') || 'cn'; var lang = localStorage.getItem('lang') || 'cn';
var langIndex = (lang === 'en' ? 'en-US' : 'zh-CN'); var langIndex = (lang === 'en' ? 'en-US' : 'zh-CN');
var rank = 1; var rank = 1;
var processData = tableData.map(function (d) { var processData = tableData.map(function(d) {
return [rank++, d.name ? d.name[langIndex] : "未知卡片", d.frequency, d.putone, d.puttwo, d.putthree, d.id]; return [rank++, d.name ? d.name[langIndex] : "未知卡片", d.frequency, d.putone, d
.puttwo, d.putthree, d.id
];
}); });
var table = $(tableID).DataTable({ var table = $(tableID).DataTable({
data: processData, data: processData,
pageLength: 50, pageLength: 50,
order: [[2, "desc"]], order: [
"ordering": true, [2, "desc"]
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 },
], ],
"columnDefs": [ "ordering": true,
columns: [{
title: tb_language[lang].rank
},
{ {
"render": function (data, type, row) { title: tb_language[lang].cardName
// 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].used
},
{
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] "language": tb_language[lang]
}); });
return table; return table;
} }
renderPage(); renderPage();
$("#search").click(function() {
$("#search").click(function () {
renderPage(); renderPage();
return false; return false;
}) })
}, },
onChange: function () { onChange: function() {
$("#search").trigger('click') $("#search").trigger('click')
this.getCount() this.getCount()
}, },
getCount: function () { getCount: function() {
var server = $("#server").val() || "mycard" var server = $("#server").val() || "mycard"
var source = $("#source").val() || "athletic" var source = $("#source").val() || "athletic"
var opt = { var opt = {
type: $("#type").val() || "day", type: $("#type").val() || "day",
source: server + "-" + source source: server + "-" + source
...@@ -421,58 +419,17 @@ ...@@ -421,58 +419,17 @@
} }
}, },
events: { events: {
'lang-change': function (lang) { 'lang-change': function(lang) {
this.init(lang) this.init(lang)
this.onChange() this.onChange()
} }
}, },
} }
</script> </script>
<style scoped> <style scoped>
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus #deck {
{ margin-top:20px!important;
background-color: #1a4861; border:1px solid black;
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;
}
.table-responsive {
border: 1px solid black;
}
</style> </style>
\ No newline at end of file
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="team-boxed"> <div class="team-boxed">
<div class="container"> <div class="container">
<div class="intro"> <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> <p class="text-center"><strong>{{lang.downloadPage.desc}}</strong> </p>
</div> </div>
<div class="row people"> <div class="row people">
...@@ -42,22 +42,20 @@ ...@@ -42,22 +42,20 @@
<script> <script>
import querystring from 'querystring'; import querystring from 'querystring';
import API from '../api' import API from '../api'
import {
import { mapGetters } from 'vuex' mapGetters
} from 'vuex'
import "../assets/css/Team-Boxed.css" import "../assets/css/Team-Boxed.css"
import "../assets/css/Team-Clean.css" import "../assets/css/Team-Clean.css"
export default { export default {
data() { data() {
return { return {
downloadUrls: {}, downloadUrls: {},
} }
}, },
created: function () { created: function() {
// https://wudizhanche.mycard.moe/download?platform=win32 // https://wudizhanche.mycard.moe/download?platform=win32
// https://wudizhanche.mycard.moe/download?platform=darwin // https://wudizhanche.mycard.moe/download?platform=darwin
var self = this var self = this
self.downloadUrls['windows'] = "https://mycard.moe" self.downloadUrls['windows'] = "https://mycard.moe"
self.downloadUrls['mac'] = "https://mycard.moe" self.downloadUrls['mac'] = "https://mycard.moe"
...@@ -84,39 +82,53 @@ ...@@ -84,39 +82,53 @@
}), }),
}, },
watch: { watch: {
lang: function (val) { lang: function(val) {
this.initLang() this.initLang()
}, },
}, },
events: { events: {
'lang-change': function (lang) { 'lang-change': function(lang) {
this.initLang(lang) this.initLang(lang)
} }
}, },
methods: { methods: {
initLang: function (lang) { initLang: function(lang) {},
gogo: function(url) {
},
gogo: function (url) {
// window.open(url) // window.open(url)
window.location.href = this.downloadUrls[url] window.location.href = this.downloadUrls[url]
} }
}, },
} }
</script> </script>
<style scoped> <style scoped>
#downLoadWelcome {color: white;}
.team-boxed { .team-boxed {
color: #313437; color: white;
background-color: #ffffff; background-color: #1b2738;
} }
.item1 { .item1 {
cursor: pointer; 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> </style>
\ No newline at end of file
...@@ -62,12 +62,12 @@ ...@@ -62,12 +62,12 @@
</template> </template>
<script> <script>
import querystring from 'querystring';
import image from '../assets/img/banner.jpg' import image from '../assets/img/banner.jpg'
import image3 from '../assets/img/image3.jpg' import image3 from '../assets/img/image3.jpg'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import API from '../api' import API from '../api'
/* import "../assets/darkModelCss/darkMix.css" */ import "../assets/darkModelCss/darkStyleMix.css"
export default { export default {
data() { data() {
return { return {
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
:cell-style="csMonitor" @sort-change='sortChange'> :cell-style="csMonitor" @sort-change='sortChange'>
<el-table-column v-for="item in tableHead" :key="item.key" :label='item.label' <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"> <template slot-scope="scope">
<div>{{item.key== 0 ? scope.row[item.label]: scope.row[item.label]+'%'}} <div>{{item.key== 0 ? scope.row[item.label]: scope.row[item.label]+'%'}}
...@@ -54,12 +54,14 @@ ...@@ -54,12 +54,14 @@
//例如:import 《组件名称》 from '《组件路径》'; //例如:import 《组件名称》 from '《组件路径》';
import API from '../api'; import API from '../api';
const winRateButtonText = ['先攻胜率', '后攻胜率', '综合胜率'] const winRateButtonText = ['先攻胜率', '后攻胜率', '综合胜率']
const builtInColumnTitle = {deckType:'卡组种类', avgWinRate:'均胜率'}
export default { export default {
//import引入的组件需要注入到对象中才能使用 //import引入的组件需要注入到对象中才能使用
components: {}, components: {},
data() { data() {
//这里存放数据 //这里存放数据
return { return {
builtInColumnTitle,
tableChangeCount: 0, tableChangeCount: 0,
winRateColumnTitle: [], winRateColumnTitle: [],
winRateButtonDefault: '0', winRateButtonDefault: '0',
...@@ -100,7 +102,37 @@ ...@@ -100,7 +102,37 @@
return label; return label;
}, },
sortChange(para) { 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) { toPoint(percent) {
percent = percent + '' percent = percent + ''
...@@ -175,10 +207,13 @@ ...@@ -175,10 +207,13 @@
tempCellCss["font-weight"] = 'bold' tempCellCss["font-weight"] = 'bold'
} }
} }
if (this.tableOrder == null) {
let tempLabel = cell.column.label let tempLabel = cell.column.label//当前格子的列名
let tempContent = this.winRateColumnTitle[cell.rowIndex]
let tempContent = this.tableData[cell.rowIndex][this.builtInColumnTitle.deckType]//当前格子的行名
if (tempLabel == tempContent) { if (tempLabel == tempContent) {
{ {
if (this.tableFlag == '2') { if (this.tableFlag == '2') {
tempCellCss["color"] = '#39485C' tempCellCss["color"] = '#39485C'
...@@ -186,47 +221,51 @@ ...@@ -186,47 +221,51 @@
tempCellCss["background-color"] = '#141A21' //胜率50的斜线 tempCellCss["background-color"] = '#141A21' //胜率50的斜线
} }
} }
}
return tempCellCss return tempCellCss
}, },
showClickWinRate(tab, event) { showClickWinRate(tab, event) {
let curTabNo = parseInt(tab.name) let curTabNo = parseInt(tab.name)
this.tableData = this.totalWinRateData[curTabNo] this.tableData = [...this.totalWinRateData[curTabNo]]
this.tableFlag = curTabNo this.tableFlag = curTabNo
}, },
handleColumn(jsonTxT) { handleColumn(jsonTxT) {
let tempColumnTitle = [] let tempColumnTitle = []
let tempObj = { let tempObj = {
label: '卡组种类', label: this.builtInColumnTitle.deckType,
prop: '卡组种类', prop: this.builtInColumnTitle.deckType,
key: 0 key: 0
} }
tempObj['resizable'] = false
tempObj['sortable'] = false tempObj['sortable'] = false
tempColumnTitle.push(tempObj) tempColumnTitle.push(tempObj)
for (let index = 0; index < 10; index++) { for (let index = 0; index < 10; index++) {
const element = jsonTxT[index].deckb; const element = jsonTxT[index].deckb;
let tempColumn = { tempObj = {
label: element, label: element,
prop: element, prop: element,
key: index + 1 key: index + 1
} }
tempColumn['sortable'] = true tempObj['resizable'] = false
tempColumnTitle.push(tempColumn) tempObj['sortable'] = 'custom'
tempColumnTitle.push(tempObj)
this.winRateColumnTitle.push(element) this.winRateColumnTitle.push(element)
} }
tempObj = { tempObj = {
label: '均胜率', label: this.builtInColumnTitle.avgWinRate,
prop: '均胜率', prop: this.builtInColumnTitle.avgWinRate,
key: 11 key: 11
} }
tempObj['sortable'] = true tempObj['resizable'] = false
tempObj['sortable'] = 'custom'
tempColumnTitle.push(tempObj) tempColumnTitle.push(tempObj)
this.tableHead = tempColumnTitle this.tableHead = tempColumnTitle
for (let x = 0; x < 3; x++) { for (let x = 0; x < 3; x++) {
let tempRowList = [] let tempRowList = []
for (let j = 0; j < 10; j++) { for (let j = 0; j < 10; j++) {
let tempRow = {} let tempRow = {}
tempRow['卡组种类'] = tempColumnTitle[j + 1].label tempRow[this.builtInColumnTitle.deckType] = tempColumnTitle[j + 1].label
let avgRowRateList = [] let avgRowRateList = []
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
let secondStrikeJson = jsonTxT[10 * i + j] let secondStrikeJson = jsonTxT[10 * i + j]
...@@ -247,7 +286,7 @@ ...@@ -247,7 +286,7 @@
tempRow[tempColumnTitle[i + 1].label] = tempWinRate[x] tempRow[tempColumnTitle[i + 1].label] = tempWinRate[x]
avgRowRateList.push(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 return prev + current
}) / 10 * 100)) / 100) }) / 10 * 100)) / 100)
tempRowList.push(tempRow) tempRowList.push(tempRow)
...@@ -255,7 +294,9 @@ ...@@ -255,7 +294,9 @@
tempRowList.push() tempRowList.push()
this.totalWinRateData.push(tempRowList) this.totalWinRateData.push(tempRowList)
} }
this.tableData = this.totalWinRateData[0] this.tableData = [...this.totalWinRateData[0]]//包含三种场次的数据
} }
}, },
//生命周期 - 创建完成(可以访问当前this实例) //生命周期 - 创建完成(可以访问当前this实例)
...@@ -330,6 +371,9 @@ ...@@ -330,6 +371,9 @@
background: #409eff; background: #409eff;
} }
.winRateContent .el-tabs__nav-wrap::after {
background-color: black;
}
.el-table, .el-table,
.el-table__expanded-cell { .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