gameapi-client/src/views/index.vue

<template>
  <div class="app-container home" style="padding: 0px;">
   <div class="main_box" >
    <div style="margin-bottom: 15px;" v-hasPermi="['home:data:admin']">
      <CheckboxSelect v-model="currencyCodes" dataType="currency" collapse-tags collapse-tags-tooltip :placeholder="t('请选择币种')" style="width: 220px;"
      @change="getHomeIndexs" @allSelect="getHomeIndexs"></CheckboxSelect>
      <CheckboxSelect v-model="platformCodes" dataType="platformSelectList" collapse-tags collapse-tags-tooltip :placeholder="t('请选择平台')" style="width: 220px;"
      @change="getHomeIndexs" @allSelect="getHomeIndexs"></CheckboxSelect>
      <CheckboxSelect v-model="tenantKeys" dataType="tenantSelectList" collapse-tags collapse-tags-tooltip :placeholder="t('请选择商户')" style="width: 220px;"
      @change="getHomeIndexs" @allSelect="getHomeIndexs"></CheckboxSelect>
    </div>
    <el-row v-hasPermi="['home:data:admin']">
      <el-col v-hasPermi="['home:data:admin']" :span="24" style="background:rgb(255,255,255);padding:16px 16px 0px;margin-bottom:32px">
        <dashboard-card v-if="loadings"  :cardData="cardData" :currencyType="currencyCodes"></dashboard-card>
      </el-col>
      <!-- <el-col :span="24" style="background:rgb(255,255,255);padding:16px 16px 0px;margin-bottom:32px">
        <today-ranking-card v-if="loadings" :currencyType="currencyType"></today-ranking-card>
      </el-col>
      <el-col :span="24" style="background:rgb(255,255,255);padding:16px 16px 0px;margin-bottom:32px">
        <recently-card v-if="loadings" :currencyType="currencyType"></recently-card>
      </el-col> -->
      <el-col :span="24" v-hasPermi="['home:data:admin']"  style="background:rgb(255,255,255);padding:16px 16px 0px;margin-bottom:32px">
        <operation-card  :currencyType="currencyCodes"></operation-card>
      </el-col>
    </el-row>
    <div style="margin-bottom: 15px;" v-hasPermi="['home:data:tenant']">
      <CheckboxSelect v-model="currencyCodes" dataType="currency" collapse-tags collapse-tags-tooltip :placeholder="t('请选择币种')" style="width: 220px;"
      @change="getHomerealTimeFocusTenants" @allSelect="getHomerealTimeFocusTenants"></CheckboxSelect>
      <CheckboxSelect v-model="platformCodes" dataType="platformSelectList" collapse-tags collapse-tags-tooltip :placeholder="t('请选择平台')" style="width: 220px;"
      @change="getHomerealTimeFocusTenants" @allSelect="getHomerealTimeFocusTenants"></CheckboxSelect>
    </div>
    <el-row v-hasPermi="['home:data:tenant']">
      <el-col v-hasPermi="['home:data:tenant']" :span="24" style="background:rgb(255,255,255);padding:16px 16px 0px;margin-bottom:32px">
        <dashboard-card-no v-if="loadings1"  :cardData="cardData" :currencyType="currencyCodes"></dashboard-card-no>
      </el-col>
      <!-- <el-col :span="24" style="background:rgb(255,255,255);padding:16px 16px 0px;margin-bottom:32px">
        <today-ranking-card v-if="loadings" :currencyType="currencyType"></today-ranking-card>
      </el-col>
      <el-col :span="24" style="background:rgb(255,255,255);padding:16px 16px 0px;margin-bottom:32px">
        <recently-card v-if="loadings" :currencyType="currencyType"></recently-card>
      </el-col> -->
      <el-col :span="24" v-hasPermi="['home:data:tenant']"  style="background:rgb(255,255,255);padding:16px 16px 0px;margin-bottom:32px">
        <today-ranking-card  :currencyType="currencyCodes"></today-ranking-card>
      </el-col>
    </el-row>
   </div>
  </div>
</template>

<script setup name="Index">
import DashboardCard from "./components/DashboardCard";
import DashboardCardNo from "./components/DashboardCardNo";
import TodayRankingCard from "./components/TodayRankingCard";
// import RecentlyCard from "./components/RecentlyCard";
import OperationCard from "./components/OperationCard";
import CurrencySelect from '@/components/CurrencySelect'; // 币种选择
import CheckboxSelect from '@/components/CheckboxSelect';
import auth from '@/plugins/auth'
import {getHomeIndex,getHomerealTimeFocusTenant} from "@/api/home";
import { nextTick } from "vue";
const currencyCodes = ref([]);
const platformCodes = ref([]);
const tenantKeys = ref([]);
const cardData = ref({});
const loadings = ref(true);
const getHomeIndexs = async () => {
  
  // 获取当前时间
const now = new Date();

// 当天开始时间（00:00:00）
const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();

// 当天结束时间（23:59:59.999）
const endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999).getTime();
  let obj = {
    currencyCode:currencyCodes.value.join(","),
    platformCodes:platformCodes.value.join(","),
    tenantKeys:tenantKeys.value.join(","),
    startTime:startOfDay,
    endTime:endOfDay,
  };
  getHomeIndex(obj).then((res) => {
    cardData.value = res.data;
    loadings.value = false;
    nextTick(() => { 
      loadings.value = true;
    });
  });
}
const loadings1 = ref(true);
const getHomerealTimeFocusTenants = () => {
  // 获取当前时间
const now = new Date();

// 当天开始时间（00:00:00）
const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();

// 当天结束时间（23:59:59.999）
const endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999).getTime();
  let obj = {
    currencyCode:currencyCodes.value.join(","),
    platformCodes:platformCodes.value.join(","),
    startTime:startOfDay,
    endTime:endOfDay,
  };
  getHomerealTimeFocusTenant(obj).then((res) => {
    cardData.value = res.data;
    loadings1.value = false;
    nextTick(() => { 
      loadings1.value = true;
    });
  });
  
};
if (auth.hasPermi('home:data:admin') == true){
  getHomeIndexs();
}else if(auth.hasPermi('home:data:tenant') == true){
  getHomerealTimeFocusTenants();
}
</script>

<style lang="scss" scoped>
.main_box {
    background-color: #f0f2f5;
    padding: 12px 32px;
    height: 100%;
    overflow-y: auto;
}
</style>