jdt-admin/src/views/game/dice/statistics/index.vue

<template>
  <CommonPage show-footer :title="$route.title">
    <n-grid class="mb-10" x-gap="12" :cols="4">
      <n-gi>
        <n-date-picker
          v-model:formatted-value="range"
          value-format="yyyy-MM-dd"
          type="daterange"
          clearable
        />
      </n-gi>
      <n-gi>
        <n-button type="primary" @click="getList">搜索</n-button>
        <n-button ml-10 @click="clear">重置</n-button>
      </n-gi>
    </n-grid>
    <div w-full flex items-center>
      <Echarts :loading="loading" :option="option" />
      <Echarts :loading="loading" :option="option1" />
    </div>
    <div w-full flex items-center justify-between>
      <n-card title="开奖记录" :bordered="false" content-style="padding: 0;">
        <n-data-table
          :max-height="500"
          :loading="loading"
          :columns="columns"
          :data="data"
          :bordered="true"
          :virtual-scroll="true"
          remote
        />
      </n-card>
    </div>
  </CommonPage>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '../../api.js'
import Echarts from '@/components/Echarts.vue'
import dayjs from 'dayjs'

const loading = ref(false)

const range = ref(null)

const option = ref({
  title: {
    text: '单期下注(豆子)/赔付(积分) 统计',
    left: 'center',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: [],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '下注(豆子)',
      data: [],
      type: 'bar',
    },
    {
      name: '赔付(积分)',
      data: [],
      type: 'bar',
    },
  ],
  dataZoom: [
    {
      type: 'inside',
    },
    {
      type: 'slider',
    },
  ],
})

const option1 = ref({
  title: {
    text: '总下注(豆子)/总赔付(积分)',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'vertical',
    left: 'right',
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
})

const data = ref([])

const columns = ref([
  {
    title: '期数',
    key: 'Periods',
    align: 'center',
  },
  {
    title: '购买号码',
    key: 'Name',
    align: 'center',
  },
  {
    title: '下注',
    key: 'NumberSum',
    align: 'center',
  },
  {
    title: '赔付',
    key: 'TotalCount',
    align: 'center',
  },
  {
    title: '时间',
    key: 'Date',
    align: 'center',
  },
])

onMounted(() => {
  getList()
})

const clear = () => {
  range.value = null
  getList()
}

const getList = async () => {
  loading.value = true
  const dataObj = {
    StartTime: dayjs().format('YYYY-MM-DD'),
    EndTime: dayjs().format('YYYY-MM-DD'),
  }
  if (range.value) {
    dataObj.StartTime = range.value[0]
    dataObj.EndTime = range.value[1]
  }
  const res = await api.getStatistics(dataObj)
  const newData = res.data.data || []
  data.value = newData
  option.value.xAxis.data = []
  option.value.series[0].data = []
  option.value.series[1].data = []
  option1.value.series[0].data = []
  if (newData.length > 0) {
    res.data.data.forEach((item) => {
      const a = (
        ((res.data.total * 10) / (res.data.total * 10 + res.data.totalDices)) *
        100
      ).toFixed(2)

      const b = ((res.data.totalDices / (res.data.total * 10 + res.data.totalDices)) * 100).toFixed(
        2
      )
      option.value.xAxis.data.push(`第${item.Periods}期-${item.Name}`)
      option.value.series[0].name = `下注(豆子): ${a}%`
      option.value.series[0].data.push(item.NumberSum * 10)
      option.value.series[1].name = `赔付(积分): ${b}%`
      option.value.series[1].data.push(item.TotalCount)
    })

    const a = (((res.data.total * 10) / (res.data.total * 10 + res.data.totalDices)) * 100).toFixed(
      2
    )
    const b = ((res.data.totalDices / (res.data.total * 10 + res.data.totalDices)) * 100).toFixed(2)

    option1.value.series[0].data.push({ value: res.data.total * 10, name: `总下注: ${a}%` })
    option1.value.series[0].data.push({
      value: res.data.totalDices,
      name: `总赔付: ${b}%`,
    })
  }
  loading.value = false
}
</script>

<style lang="scss" scoped>
.chart {
  width: 50%;
  height: 400px;
}
</style>