Skip to content

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

表格增加用户小头像

parent abbb0b48
Pipeline #22804 passed with stages
      in 1 minute and 18 seconds
      Show whitespace changes
      Inline Side-by-side
      Showing with 88 additions and 44 deletions
      src/components/Ranking.vue
      View file @ b5a9c8e6
      ...@@ -150,74 +150,108 @@ ...@@ -150,74 +150,108 @@
      } }
      } }
      function renderExpTable(tableData) { function renderArenaTable(tableData) {
      tableData = tableData || []; tableData = tableData || [];
      var lang = localStorage.getItem('lang') || 'cn'; var lang = localStorage.getItem('lang') || 'cn';
      var rank = 1; var rank = 1;
      var processData = tableData.map(function(d) { var processData = tableData.map(function (d) {
      return [rank++, d.username, parseInt(d.exp), d.entertain_win, d.entertain_lose]; let ratio = 0
      if (d.athletic_all > 0) {
      ratio = (d.athletic_win / d.athletic_all * 100).toFixed(2)
      }
      var iconSrc = 'https://sapi.moecube.com:444/avatar/avatar/' + d.username + '/100/pic.png';
      return [rank++, iconSrc, String(d.username), parseInt(d.pt), d.athletic_win, d.athletic_lose, ratio + "%"];
      }); });
      var table = $('#exp_table').DataTable({ var table = $('#pt_table').DataTable({
      "autoWidth": false,
      data: processData, data: processData,
      pageLength: 25, pageLength: 25,
      order: [ order: [
      [0, "asc"] [0, "asc"]
      ], ],
      "ordering": true, "ordering": true,
      columns: [{ columns: [
      title: tb_language[lang].rank {
      title: tb_language[lang].rank,
      }, },
      { {
      title: tb_language[lang].name title: tb_language[lang].name, // Display icon + username in this column
      render: function (data, type, row) {
      var iconSrcWithUsername = row[1]; // 获取图像链接
      var username = row[2]; // 获取用户名
      return '<div style="display: flex; align-items: center;">' +
      '<img src="' + iconSrcWithUsername + '" style="width: 35px; height: 35px; margin-right: 3px;"> ' +
      '<a href="#/userinfo?username=' + encodeURIComponent(username) + '">' + username + '</a>' +
      '</div>';
      },
      }, },
      { {
      title: tb_language[lang].exp visible: false, // Hide the username column,
      }, },
      { {
      title: tb_language[lang].win title: tb_language[lang].pt,
      }, },
      { {
      title: tb_language[lang].lose title: tb_language[lang].win,
      },
      {
      title: tb_language[lang].lose,
      },
      {
      title: tb_language[lang].wl,
      }, },
      ], ],
      "columnDefs": [{ "columnDefs": [{
      "render": function(data, type, row) { "render": function (data, type, row) {
      return "<a href='#/userinfo?username=" + encodeURIComponent(data) + "'>" + data + "</a>"; return "<a href='#/userinfo?username=" + encodeURIComponent(data) + "'>" + data + "</a>";
      }, },
      "targets": 1 "targets": 2
      }, ], },],
      "language": lang === 'en' ? tb_language.en : tb_language.cn "language": tb_language[lang],
      }); });
      $(".input-sm").attr("placeholder",placeholder) $(".input-sm").attr("placeholder", placeholder)
      return table; return table;
      } }
      function renderArenaTable(tableData) { function renderExpTable(tableData) {
      tableData = tableData || []; tableData = tableData || [];
      var lang = localStorage.getItem('lang') || 'cn'; var lang = localStorage.getItem('lang') || 'cn';
      var rank = 1; var rank = 1;
      var processData = tableData.map(function(d) { var processData = tableData.map(function (d) {
      let ratio = 0 var iconSrc = 'https://sapi.moecube.com:444/avatar/avatar/' + d.username + '/100/pic.png';
      if (d.athletic_all > 0) { return [rank++, iconSrc, String(d.username), parseInt(d.exp), d.entertain_win, d.entertain_lose];
      ratio = (d.athletic_win / d.athletic_all * 100).toFixed(2)
      }
      return [rank++, d.username, parseInt(d.pt), d.athletic_win, d.athletic_lose, ratio + "%"];
      }); });
      var table = $('#pt_table').DataTable({
      var table = $('#exp_table').DataTable({
      data: processData, data: processData,
      pageLength: 25, pageLength: 25,
      order: [ order: [[0, "asc"]],
      [0, "asc"]
      ],
      "ordering": true, "ordering": true,
      columns: [{ columns: [
      {
      title: tb_language[lang].rank title: tb_language[lang].rank
      }, },
      { {
      title: tb_language[lang].name title: tb_language[lang].name, // Display icon + username in this column
      render: function (data, type, row) {
      var iconSrcWithUsername = row[1]; // 获取图像链接
      var username = row[2]; // 获取用户名
      return '<div style="display: flex; align-items: center;"><img src="' + iconSrcWithUsername + '" style="width: 35px; height: 35px; margin-right: 3px;"> <a href="#/userinfo?username=' + encodeURIComponent(username) + '">' + username + '</a></div>';
      },
      },
      {
      visible: false, // Hide the username column
      }, },
      { {
      title: tb_language[lang].pt title: tb_language[lang].exp
      }, },
      { {
      title: tb_language[lang].win title: tb_language[lang].win
      ...@@ -225,19 +259,16 @@ ...@@ -225,19 +259,16 @@
      { {
      title: tb_language[lang].lose title: tb_language[lang].lose
      }, },
      ],
      "columnDefs": [
      { {
      title: tb_language[lang].wl "targets": [0, 3, 4, 5], // Target other columns (exp, win, lose) to make them non-orderable
      "orderable": false
      }, },
      ], ],
      "columnDefs": [{ "language": lang === 'en' ? tb_language.en : tb_language.cn,
      "render": function(data, type, row) {
      return "<a href='#/userinfo?username=" + encodeURIComponent(data) + "'>" + data + "</a>";
      },
      "targets": 1
      }, ],
      "language": tb_language[lang]
      }); });
      $(".input-sm").attr("placeholder",placeholder) $(".input-sm").attr("placeholder", placeholder);
      return table; return table;
      } }
      renderPage(); renderPage();
      ...@@ -271,3 +302,16 @@ ...@@ -271,3 +302,16 @@
      width: 250%; width: 250%;
      } }
      </style> </style>
      <style>
      #pt_table tr td:first-child, #pt_table tr th:first-child, #exp_table tr td:first-child, #exp_table tr th:first-child {
      width: 1%;
      white-space: nowrap;
      }
      #pt_table td, #pt_table th {
      text-align: left;
      vertical-align: middle}
      #epx_table td, #exp_table th {
      text-align: left;
      vertical-align: middle}
      </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