Commit 7903e064 authored by GaiaXalter's avatar GaiaXalter 💬

决斗数据库 1.nav导航图片修改 2.均胜率算法修改,着色样式,算法修改 3.竞技场排行样式修改

parent 354655dc
......@@ -11,3 +11,4 @@ plan.org
database.sql
release
Answaer.js
*.rar
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus
{
background-color: #1a4861;
......@@ -35,11 +38,13 @@ background-color: #1D252F;
height: 72px;
width: 120px;
}
/* .table-responsive {
/* 收缩页面边框 白色 */
.table-responsive {
border: 0px solid transparent!important;
overflow: hidden!important;
} */
}
.search-form div.input-group-addon {
background: #1D252F;
......@@ -105,11 +110,9 @@ border-color: #dddddd;
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;
background-color: #161b22;
border: 1px solid #161b22;
}
......@@ -117,9 +120,8 @@ border: 1px solid #161b22;
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;
......@@ -198,67 +200,93 @@ 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;
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;
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;
text-decoration: none;
color: #fff;
background-color: #1a4861;
}
.dropdown-menu .divider {
height: 1px;
margin: 10px 0;
overflow: hidden;
background-color: #e5e5e5;
height: 1px;
margin: 10px 0;
overflow: hidden;
background-color: #e5e5e5;
}
::-webkit-scrollbar {
height: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background-color: #283044;
background-color: #283044;
}
::-webkit-scrollbar-thumb {
background-color: #161b22;
background-color: #161b22;
}
::-webkit-scrollbar-button{
color:white;
background-color: #161b22;
color:white;
background-color: #161b22;
}
.tab-img { background-color: #1D252F;}
.tab-img { background-color: #1a4861;}
/* 用户名点击链接 */
a {
color: #409eff;
}
/* 竞技场排名nav */
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
color: #409eff;
background-color: transparent;
border: 0px solid transparent;
border-bottom-color: transparent;
cursor: default;
}
/* 竞技场排名nav */
.nav>li>a {
color: #e5e5e5;
}
/* 竞技场排名nav */
.nav-tabs>li>a:hover {
border-color: transparent;
background-color: transparent;
color: #409eff;
}
\ No newline at end of file
......@@ -160,16 +160,16 @@
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'
// import img2 from '../assets/SpellWithBorder.jpg'
import img2 from '../assets/img/500x300_Spell.jpg'
// import img3 from '../assets/TrapWithBorder.jpg'
import img3 from '../assets/img/500x300_Trap.jpg'
// import img4 from '../assets/SideWithBorder.jpg'
import img4 from '../assets/img/500x300_side.jpg'
import img5 from '../assets/img/ExtraWithBorder.jpg'
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"
......@@ -449,4 +449,5 @@
margin-top:20px!important;
border:1px solid black;
}
</style>
\ No newline at end of file
......@@ -25,11 +25,12 @@
</div>
<div class='winRateTable'>
<el-table :data="tableData" border style="width: 100%" :header-cell-style="hdMonitor"
<el-table ref="tableList" :data="tableData" border style="width: 100%" :header-cell-style="hdMonitor"
: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" :resizable="item.resizable" :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,7 +55,10 @@
//例如:import 《组件名称》 from '《组件路径》';
import API from '../api';
const winRateButtonText = ['先攻胜率', '后攻胜率', '综合胜率']
const builtInColumnTitle = {deckType:'卡组种类', avgWinRate:'均胜率'}
const builtInColumnTitle = {
deckType: '卡组种类',
avgWinRate: '均胜率'
}
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
......@@ -80,6 +84,84 @@
watch: {},
//方法集合
methods: {
gradientColor(startColor, endColor, startPercent,endPercent,curPercent) {
let startRGB = this.colorRgb(startColor); //转换为rgb数组模式
let startR = startRGB[0];
let startG = startRGB[1];
let startB = startRGB[2];
let endRGB = this.colorRgb(endColor);
let endR = endRGB[0];
let endG = endRGB[1];
let endB = endRGB[2];
let sR = (endR - startR) / ((endPercent-startPercent)*100); //总差值
let sG = (endG - startG) / ((endPercent-startPercent)*100);
let sB = (endB - startB) / ((endPercent-startPercent)*100);
let colorRet = '';
let tempPercent=(curPercent-startPercent)*100
let rgbStr = 'rgb(' + parseInt((sR * tempPercent + startR)) + ',' + parseInt((sG *
tempPercent + startG)) +
',' +
parseInt((sB * tempPercent + startB)) + ')'
let hex = this.colorHex(rgbStr);
colorRet = hex
return colorRet;
},
colorRgb(sColor) {
let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
sColor = sColor.toLowerCase();
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
let sColorNew = "#";
for (let i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
//处理六位的颜色值
let sColorChange = [];
for (let i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return sColorChange;
} else {
return sColor;
}
},
colorHex(rgb) {
let _this = rgb;
let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
if (/^(rgb|RGB)/.test(_this)) {
let aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
let strHex = "#";
for (let i = 0; i < aColor.length; i++) {
let hex = Number(aColor[i]).toString(16);
hex = hex < 10 ? 0 + '' + hex : hex; // 保证每个rgb的值为2位
if (hex === "0") {
hex += hex;
}
strHex += hex;
}
if (strHex.length !== 7) {
strHex = _this;
}
return strHex;
} else if (reg.test(_this)) {
let aNum = _this.replace(/#/, "").split("");
if (aNum.length === 6) {
return _this;
} else if (aNum.length === 3) {
let numHex = "#";
for (let i = 0; i < aNum.length; i += 1) {
numHex += (aNum[i] + aNum[i]);
}
return numHex;
}
} else {
return _this;
}
},
labelFunction(h, l, fontSize) {
let index = l['$index']
let f = 15;
......@@ -102,37 +184,30 @@
return label;
},
sortChange(para) {
let curChangeColName = para.prop //排序列名
this.tableOrder = para.order//排序方式
this.tableOrder = para.order //排序方式
let tempOrderTable = [...this.tableData]
tempOrderTable = this.tableBubbleSort(curChangeColName, tempOrderTable)
this.tableData=tempOrderTable
tempOrderTable = this.tableBubbleSort(curChangeColName, tempOrderTable)
this.tableData = tempOrderTable
},
tableBubbleSort(OrderKey, curTable) {
let arr=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]
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]]
}
} //降序
if (this.tableOrder == 'ascending') {
curTable = curTable.reverse()
}
if (this.tableOrder == null) {
curTable = [...this.totalWinRateData[this.tableFlag]]
}
return [...curTable]
},
toPoint(percent) {
percent = percent + ''
......@@ -169,10 +244,17 @@
if (cell.columnIndex != 0) { //表格内
tempCellCss["color"] = '#e2f2ff'
if (tempCellWinRate <= 30) {
tempCellCss["color"] = '#b9ff5c'
tempCellCss["color"] = '#ff7945'
}
if (tempCellWinRate >= 70) {
tempCellCss["color"] = '#ff7945'
tempCellCss["color"] = '#b9ff5c'
}
if (tempCellWinRate > 30 && tempCellWinRate < 50) {
tempCellCss["color"] = this.gradientColor('#ff7945', '#e2f2ff', 30,50,tempCellWinRate)
}
if (tempCellWinRate > 50 && tempCellWinRate < 70) {
tempCellCss["color"] = this.gradientColor('#e2f2ff', '#b9ff5c', 50,70,tempCellWinRate)
}
tempCellCss["border-bottom"] = '10px solid #111822'
tempCellCss["border-right"] = '1px solid #111822'
......@@ -200,35 +282,30 @@
//最后一列
tempCellCss["color"] = '#e2f2ff'
if (tempCellWinRate >= 50) {
tempCellCss["color"] = '#FF0000'
tempCellCss["color"] = '#55FF00'
} else {
tempCellCss["color"] = '#e2f2ff'
}
tempCellCss["font-weight"] = 'bold'
}
}
let tempLabel = cell.column.label//当前格子的列名
let tempContent = this.tableData[cell.rowIndex][this.builtInColumnTitle.deckType]//当前格子的行名
if (tempLabel == tempContent) {
{
if (this.tableFlag == '2') {
tempCellCss["color"] = '#39485C'
}
tempCellCss["background-color"] = '#141A21' //胜率50的斜线
let tempLabel = cell.column.label //当前格子的列名
let tempContent = this.tableData[cell.rowIndex][this.builtInColumnTitle.deckType] //当前格子的行名
if (tempLabel == tempContent) {
{
if (this.tableFlag == '2') {
tempCellCss["color"] = '#39485C'
}
tempCellCss["background-color"] = '#141A21' //胜率50的斜线
}
}
return tempCellCss
},
showClickWinRate(tab, event) {
this.$refs.tableList.clearSort()
let curTabNo = parseInt(tab.name)
this.tableData = [...this.totalWinRateData[curTabNo]]
this.tableFlag = curTabNo
},
handleColumn(jsonTxT) {
let tempColumnTitle = []
......@@ -242,7 +319,7 @@
tempColumnTitle.push(tempObj)
for (let index = 0; index < 10; index++) {
const element = jsonTxT[index].deckb;
tempObj = {
tempObj = {
label: element,
prop: element,
key: index + 1
......@@ -274,20 +351,22 @@
let totalScMatch = (
secondStrikeJson.win + secondStrikeJson.lose + secondStrikeJson.draw)
let tempWinRate = []
let tempFirstStrikeWinRate = Math.round(firstStrikeJson.win / (totalFsMatch) * 1000) /
10
let tempSecondStrikeWinRate = Math.round(secondStrikeJson.lose / (totalScMatch) * 1000) /
10 //该卡组对手先攻输-该卡组后攻赢
let totalWinrate = Math.round((firstStrikeJson.win + secondStrikeJson.lose )/ (totalFsMatch+totalScMatch)* 10000) /
( 100)
//(勇者先攻赢+勇者后攻赢)/(勇者先攻赢+勇者先攻平+勇者先攻输+勇者后攻赢+勇者后攻输+勇者后攻平)
let tempFirstStrikeWinRate = Math.round(firstStrikeJson.win / (totalFsMatch) * 10000) /
100
let tempSecondStrikeWinRate = Math.round(secondStrikeJson.lose / (totalScMatch) * 10000) /
100 //该卡组对手先攻输-该卡组后攻赢
let totalWinrate = Math.round((firstStrikeJson.win + secondStrikeJson.lose) / (
totalFsMatch + totalScMatch) * 10000) /
(100)
//(勇者先攻赢+勇者后攻赢)/(勇者先攻赢+勇者先攻平+勇者先攻输+勇者后攻赢+勇者后攻输+勇者后攻平)
tempWinRate.push(tempFirstStrikeWinRate)
tempWinRate.push(tempSecondStrikeWinRate)
tempWinRate.push(totalWinrate)
tempRow[tempColumnTitle[i + 1].label] = tempWinRate[x]
avgRowRateList.push(tempWinRate[x])
}
tempRow[this.builtInColumnTitle.avgWinRate] = (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)
......@@ -295,9 +374,7 @@
tempRowList.push()
this.totalWinRateData.push(tempRowList)
}
this.tableData = [...this.totalWinRateData[0]]//包含三种场次的数据
this.tableData = [...this.totalWinRateData[0]] //包含三种场次的数据
}
},
//生命周期 - 创建完成(可以访问当前this实例)
......@@ -372,8 +449,9 @@
background: #409eff;
}
.winRateContent .el-tabs__nav-wrap::after {
background-color: black;
background-color: black;
}
.el-table,
......
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