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

<script setup>
import { Page } from '@vben/common-ui';
import { requestClient } from '#/api/request';
import { Button, message } from 'ant-design-vue';
import { ref, reactive, computed, onMounted, useTemplateRef } from 'vue';
import dayjs from 'dayjs';

import MatchCard from '../components/match_card.vue';

const solutions = ref([]);

const getSolutions = async () => {
  try {
    const data = await requestClient.get('/triangle/get_solutions');
    return data;
  }
  catch (error) {
    console.error('Failed to fetch solutions:', error);
    message.error('获取中单方案失败');
    return [];
  }
}

const getGamesEvents = async () => {
  try {
    const data = await requestClient.get('/triangle/get_games_events');
    return data;
  }
  catch (error) {
    console.error('Failed to fetch games events:', error);
    message.error('获取比赛盘口失败');
    return {};
  }
}


const moveToFront = (arr, index) => {
  if (index <= 0 || index >= arr.length) {
    return arr;
  }
  const item = arr.splice(index, 1)[0];
  arr.unshift(item);
  return arr;
}

const updateSolutions = async () => {
  const [solutionsList, eventsList] = await Promise.all([getSolutions(), getGamesEvents()]);
  solutions.value = solutionsList.map(item => {
    const { cpr, info, sol: { cross_type, jc_index, gold_side_a, gold_side_b, gold_side_m, win_side_a, win_side_b, win_side_m, win_average } } = item;
    const cprKeys = cpr.map(item => item.k);
    const jcEvents = eventsList.jc[info.jc.eventId];
    const psEvents = eventsList.ps[info.ps.eventId];
    const obEvents = eventsList.ob[info.ob.eventId];



    cpr[0].g = gold_side_a;
    cpr[0].w = win_side_a;
    cpr[1].g = gold_side_b;
    cpr[1].w = win_side_b;
    cpr[2].g = gold_side_m;
    cpr[2].w = win_side_m;
    const newCpr = moveToFront(cpr, jc_index);
    return { ...item, cpr: newCpr, sol: { cross_type, jc_index, win_average }, events };
  });
}

const updateGamesEvents = async () => {
  const events = await getGamesEvents();
  gamesEvents.value = events;
}

onMounted(() => {
  updateSolutions();
});

</script>

<!-- eventId
platform
leagueName
teamHomeName
teamAwayName
dateTime
eventInfo
solutionKey -->

<template>
  <div class="solution-container">
    <div class="solution-header">
      <span>JC</span>
      <span>PS</span>
      <span>OB</span>
      <em>利润</em>
    </div>
    <div class="solution-list">
      <!-- <div class="solution-item" v-for="solution in solutions" :key="solution.sid">
        <MatchCard />
        <MatchCard />
        <MatchCard />
        <div class="solution-profit"></div>
      </div> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.solution-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.solution-header {
  display: flex;
  align-items: center;
  height: 40px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  span, em {
    display: block;
    text-align: center;
  }
  span {
    flex: 1;
  }
  em {
    width: 80px;
    font-style: normal;
  }
}
</style>