sporttery/web/apps/web-antd/src/views/match/datatest/index.vue

<template>
  <div class="data-test-container">
    <div class="page-header">
      <h1>数据测试</h1>
      <p>用于测试和验证比赛数据的页面</p>
    </div>

    <div class="content-area">
      <div class="test-panel">
        <h2>测试数据展示</h2>
        <div class="data-display">
          <div class="data-item">
            <label>当前时间：</label>
            <span>{{ currentTime }}</span>
          </div>
          <!-- <div class="data-item">
            <label>测试状态：</label>
            <span class="status-success">正常运行</span>
          </div> -->
          <div class="data-item">
            <label>数据源：</label>
            <span>比赛管理系统</span>
          </div>
        </div>

        <div class="radio-options">
          <div class="radio-group">
            <label class="radio-label">
              <input
                type="radio"
                name="testMode"
                value="1"
                v-model="selectedTestMode"
                class="radio-input"
              >
              <span class="radio-text">今日</span>
            </label>
            <label class="radio-label">
              <input
                type="radio"
                name="testMode"
                value="0"
                v-model="selectedTestMode"
                class="radio-input"
              >
              <span class="radio-text">早盘</span>
            </label>
            <label class="radio-label">
              <input
                type="radio"
                name="testMode"
                value=""
                v-model="selectedTestMode"
                class="radio-input"
              >
              <span class="radio-text">全部</span>
            </label>
          </div>
        </div>

        <div class="action-buttons">
          <button class="btn btn-primary" @click="refreshData">
            刷新数据
          </button>
          <button class="btn btn-secondary" @click="runTest(true)">
            有欢乐值
          </button>
          <button class="btn btn-secondary" @click="runTest(false)">
            无欢乐值
          </button>
          <button class="btn btn-secondary" @click="verifyData">
            验证数据
          </button>
          <button class="btn btn-secondary" @click="filterLive">
            筛选滚球
          </button>
        </div>
      </div>
    </div>

    <div class="data-table" v-if="prettyData">
      <vue-json-pretty :data="prettyData" :indent="2" :deep="prettyDeep" :showDoubleQuotes="false"></vue-json-pretty>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { requestClient } from '#/api/request';

import dayjs from 'dayjs';
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

const currentTime = ref('');
const gamesRelation = ref([]);
const gamesSolution = ref({});
const selectedTestMode = ref('');

const prettyData = ref(null);
const prettyDeep = ref(0);

const updateTime = () => {
  currentTime.value = new Date().toLocaleString('zh-CN')
}

const refreshData = () => {
  updateTime();
  Promise.all([
    requestClient.get('/pstery/get_games_relation', { params: { mk: selectedTestMode.value } }),
    requestClient.get('/pstery/get_solutions', { params: { win_min: -99999 } })
  ])
  .then(([relations, solutions]) => {
    gamesRelation.value = relations;
    gamesSolution.value = solutions;
    console.log('数据已刷新');
  });
}

const showDataPretty = (data, deep) => {
  prettyDeep.value = 0;
  prettyData.value = data;
  prettyDeep.value = deep;
}

const runTest = (hasSolutions=true) => {
  const gamesList = gamesRelation.value.map(item => {
    const { eventId, leagueId, leagueName, teamHomeName, teamAwayName, timestamp } = item?.rel?.ps ?? {};
    const datetime = dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
    return { eventId, leagueId, leagueName, teamHomeName, teamAwayName, datetime };
  });
  gamesSolution.value.solutions.forEach((solution) => {
    const { sid, info: { id }} = solution;
    const currentGame = gamesList.find(game => game.eventId === id);
    if (!currentGame) {
      console.log('game not found', id);
    }
    else {
      if (!currentGame.solutions) {
        currentGame.solutions = [];
      }
      currentGame.solutions.push(sid);
    }
  });
  const dataList = gamesList.filter(item => {
    if (hasSolutions) {
      return !!item.solutions?.length;
    }
    else {
      return !item.solutions?.length;
    }
  }).map((item, index) => {
    const serial = index + 1;
    return { serial, ...item };
  });
  showDataPretty(dataList, 2);
  console.log('gamesRelation', dataList);
}

const verifyData = () => {
  const solutions = gamesSolution.value.solutions;
  const invalidSolutions = [];
  solutions.forEach((solution) => {
    const { sol: { win_average, win_profit_rate } } = solution;
    if (win_average * win_profit_rate < 0) {
      invalidSolutions.push(solution)
    }
  });
  showDataPretty(invalidSolutions, 2);
  console.log('invalidSolutions', invalidSolutions);
}

const filterLive = () => {
  const solutions = gamesSolution.value.solutions;
  const liveSolutions = solutions.filter((solution) => {
    const { info: { ob, hg, ps } } = solution;
    return ps.stage;
  });
  showDataPretty(liveSolutions, 2);
  console.log('liveSolutions', liveSolutions);
}

// const currentTime = ref('')

// const updateTime = () => {
//   currentTime.value = new Date().toLocaleString('zh-CN')
// }

// const refreshData = () => {
//   updateTime()
//   console.log('数据已刷新')
// }

// const runTest = () => {
//   console.log('开始运行测试...')
//   // 这里可以添加具体的测试逻辑
// }

onMounted(() => {
  refreshData();
})
</script>

<style lang="scss" scoped>
.data-test-container {
  padding: 20px;

  .page-header {
    margin-bottom: 30px;

    h1 {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 8px;
      color: #333;
    }

    p {
      color: #666;
      font-size: 14px;
    }
  }

  .content-area {
    .test-panel {
      background: #fff;
      border-radius: 8px;
      padding: 24px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      h2 {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 20px;
        color: #333;
      }

      .data-display {
        margin-bottom: 24px;

        .data-item {
          display: flex;
          align-items: center;
          margin-bottom: 12px;

          label {
            font-weight: 500;
            color: #555;
            min-width: 100px;
          }

          span {
            color: #333;

            &.status-success {
              color: #52c41a;
              font-weight: 500;
            }
          }
        }
      }

      .radio-options {
        margin-bottom: 20px;

        .radio-group {
          display: flex;
          gap: 20px;

          .radio-label {
            display: flex;
            align-items: center;
            cursor: pointer;
            user-select: none;

            .radio-input {
              margin-right: 8px;
              cursor: pointer;
            }

            .radio-text {
              font-size: 14px;
              color: #333;
            }
          }
        }
      }

      .action-buttons {
        display: flex;
        gap: 12px;

        .btn {
          padding: 8px 16px;
          border-radius: 6px;
          border: none;
          cursor: pointer;
          font-size: 14px;
          transition: all 0.2s;

          &.btn-primary {
            background: #1890ff;
            color: white;

            &:hover {
              background: #40a9ff;
            }
          }

          &.btn-secondary {
            background: #f5f5f5;
            color: #333;
            border: 1px solid #d9d9d9;

            &:hover {
              background: #e6f7ff;
              border-color: #1890ff;
            }
          }
        }
      }
    }
  }
}
.data-table {
  padding: 20px;
}
</style>