midi-admin/src/views/room/roomList/XunLeHui/statistics.vue

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import SearchForm from "@/components/SearchForm/index.vue";
import { message } from "@/utils/message";
import {
  resetBlindBoxRule
} from "@/api/modules/blindBox";
import {
  queryTurntableRecord
} from "@/api/modules/room";
const searchLabel = ref([
  { label: "用户ID", prop: "user_id", type: "input" },
  { label: "开奖期数", prop: "periods", type: "input" },
  { label: "礼物ID", prop: "gift_id", type: "input" },
  { label: "房间ID", prop: "room_id", type: "input" }
]);
const props = defineProps(["roomId"]);
const searchForm = ref({
  gift_bag_id: 13,
  user_id: '',
  gift_id: "",
  gift_name: ""
});
const pagination = ref({
  total: 0,
  pageSize: 10,
  currentPage: 1,
  background: true
});
const statisticsData = ref()
const tableList = ref([])
const statisticsList = ref([
  { label: "总抽奖次数", prop: "total" },
  { label: "总抽奖金额（支出）", prop: "total_money" },
  {
    label: "总礼物价值（收入）", prop: "total_gift_money"
  },
  { label: "统计（收入/支出）", prop: "ratio", tip: "%" },
  { label: "用户盈亏", prop: "profit_loss" },
  { label: "用户盈亏比", prop: "profit_loss_ratio", tip: "%" },
  { label: "平台盈亏", prop: "platform_profit_loss" },
  { label: "平台盈亏比", prop: "platform_profit_loss_ratio", tip: "%" },
])
const dynamicflowColumns = ref([
  {
    label: "ID",
    prop: "id"
  },
  {
    label: "期数",
    prop: "periods"
  },
  {
    label: "开奖人ID",
    prop: "user_name"
  },
  {
    label: "支付价格",
    prop: "bag_price"
  },
  {
    label: "礼物ID",
    prop: "gift_id"
  },
  {
    label: "礼物名称",
    prop: "gift_name"
  },
  {
    label: "礼物价格",
    prop: "gift_price"
  },
  {
    label: "抽中数量",
    prop: "gift_num"
  },
  {
    label: "创建时间",
    prop: "createtime"
  }
])
const getData = async (formData) => {
  searchForm.value = { ...formData }
  const { data, code } = await queryTurntableRecord({
    ...formData,
    page: pagination.value.currentPage,
    page_limit: pagination.value.pageSize,
    room_id: props.roomId
  })
  if (code) {
    tableList.value = data.lists.map(ele => {
      return {
        ...ele, ...data.total_data,
        is_public_screen: data.is_public_screen === 1 ? '显示' : '隐藏',
        is_public_server: data.is_public_server === 1 ? '显示' : '隐藏',
        is_world_show: data.is_world_show === 1 ? '显示' : '隐藏',
      }
    });
    statisticsData.value = data.total_data
    pagination.value.total = data.count;
    pagination.value.currentPage = data.page;
  }
}
const handleSizeChange = (val: number) => {
  pagination.value.pageSize = val;
  getData(searchForm.value)
};
const handleCurrentChange = (val: number) => {
  pagination.value.currentPage = val;
  getData(searchForm.value)
};
const resetSetting = async () => {
  const { data, code } = await resetBlindBoxRule({
    gift_bag_id: searchForm.value.gift_bag_id,
    room_id: props.roomId
  })
  if (code) {
    message(`重置成功`, {
      type: "success"
    });
    getData(searchForm.value)
  }
}
onMounted(() => {
  getData(searchForm.value)
  // getType()
})

</script>
<template>
  <div class="viewPage">

    <div class="content-flex" v-if="statisticsData">
      <div class="box" v-for="(ele, index) in statisticsList">
        <el-statistic :precision="2" decimal-separator="." :value="statisticsData[ele.prop] || 0"
          :suffix="ele.tip || ''" :title="ele.label"></el-statistic>
        <span></span>
      </div>
    </div>

    <div style="display: inline-flex;justify-content: space-between;align-items: center;width: 100%;">
      <SearchForm class="pb-2" :LabelList="searchLabel" :formData="searchForm" @handleSearch="getData" />
      <el-popconfirm :title="`是否重置当前巡乐会数量吗？`" @confirm="resetSetting">
        <template #reference>
          <el-button type="primary" style="margin-bottom: 18px;">
            重置数量
          </el-button>
        </template>
      </el-popconfirm>
    </div>
    <pure-table class="mt-5" ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto"
      default-expand-all row-key="id" :adaptiveConfig="{ offsetBottom: 108 }" :data="tableList"
      :columns="dynamicflowColumns" :pagination="{ ...pagination }" :header-cell-style="{
        background: 'var(--el-fill-color-light)',
        color: 'var(--el-text-color-primary)'
      }" @page-current-change="handleCurrentChange" @page-size-change="handleSizeChange">
    </pure-table>
  </div>
</template>
<style lang="scss" scoped>
.content {
  width: 100%;
  background-color: #fff;
  padding: 20px;
}

.content-flex {
  width: 100%;
  display: inline-flex;
  background-color: #f5f5f5;
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  align-items: center;
  justify-content: space-between
}
</style>