feat(custom): 订单列表改版

src/views/game/dice/statistics/index.vue

@@ -0,0 +1,214 @@
+<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>