Skip to content

Y
Ygopro Arena Web
Commit 7903e064 authored by GaiaXalter's avatar GaiaXalter 💬
Browse files
Options

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

parent 354655dc
Pipeline #8560 failed with stages
      in 60 minutes
      Hide whitespace changes
      Inline Side-by-side
      Showing with 223 additions and 115 deletions
      .gitignore
      View file @ 7903e064
      ......@@ -11,3 +11,4 @@ plan.org
      database.sql
      release
      Answaer.js
      *.rar
      src/assets/darkModelCss/darkStyleMix.css
      View file @ 7903e064
      .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
      src/components/Cards.vue
      View file @ 7903e064
      ......@@ -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
      src/components/Rates.vue
      View file @ 7903e064
      ......@@ -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