api2gpt-web/src/views/cert/admin/index.vue

<template>
    <div class="main">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>管理首页</span>
          <div>
            <el-button type="success" style="margin-right: 10px;" @click="flush()">刷新</el-button>
          </div>
        </div>
      </template>
      <el-row :gutter="20" class="info" style="margin-bottom: 20px;">
        <el-col :span="8">
            <el-input  placeholder="请输入Model名称查询" clearable @keyup.enter="getIndex" v-model="model"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="info">
        <el-col :span="6">用户余额：￥<el-text class="mx-1" >{{ NumFilter(userBalance) }}</el-text></el-col>
        <el-col :span="6">今日消费：￥<el-text class="mx-1" >{{ NumFilter(balanceDay) }}</el-text></el-col>
        <el-col :span="6">当月消费：￥<el-text class="mx-1" >{{ NumFilter(balanceDayMonth) }}</el-text></el-col>
        <el-col :span="6">所有消费：￥<el-text class="mx-1" >{{ NumFilter(balanceDayAll) }}</el-text></el-col>
      </el-row>
    </el-card>
    <div class="main2">
      <el-card class="box-card">
        <el-row :gutter="20" class="info" style="margin-bottom: 20px;">
          <el-col :span="8">
            <el-date-picker
              v-model="daterangeCreateTime"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-col>
          <el-col :span="8">
            <el-button style="margin-right: 10px;" @click="query()">查询</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="info" v-for="model in modelList" :key="model.model">
          <el-col :span="6">{{model.model}}：￥<el-text class="mx-1" >{{ NumFilter(model.fee) }}</el-text></el-col>
        </el-row>
      </el-card>
    </div>
    <div class="main2">
      <el-table v-loading="loading" :data="userBalanceList" >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="ID" align="center" prop="id" />
          <el-table-column label="用户ID" align="center" prop="userId" />
          <el-table-column label="余额" align="center" prop="balance" />
        </el-table>
  
        <pagination
          v-show="total>0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
    </div>
    </div>
  </template>
  
  <script setup name="Admin">
  import { getAdminIndex, listUserBalance, getModelList } from '@/api/cert/admin'
  import { refreshUserBalance } from "@/api/cert/userBalance";
  import { ref } from 'vue';
  
  const daterangeCreateTime = ref([]);
  const { proxy } = getCurrentInstance();
  const userBalance = ref(0);
  const balanceDay = ref(0);
  const balanceDayMonth = ref(0);
  const balanceDayAll = ref(0);
  
  const modelList = ref([]);
  const userBalanceList = ref([]);
  const loading = ref(true);
  const model = ref('');
  const total = ref(0);

  const data = reactive({
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
  });
  
  
  const { queryParams } = toRefs(data);

   /** 查询用户余额列表 */
   function getList() {
      loading.value = true;
      listUserBalance(queryParams.value).then(response => {
        userBalanceList.value = response.rows;
        total.value = response.total;
        loading.value = false;
      });
      const start = '';  
      if(daterangeCreateTime.value[0]){
        start = daterangeCreateTime.value[0];
      }
      const end = '';
      if(daterangeCreateTime.value[1]){
        end = daterangeCreateTime.value[1];
      }
      getModelList(start, end).then(response => {
        modelList.value = response.data;
      });
    }
  
  function getIndex() {
    getAdminIndex(model.value).then(response => {
      userBalance.value = response.data.userBalance
      balanceDayAll.value = response.data.userBalanceAll
      balanceDayMonth.value = response.data.userBalanceMonth
      balanceDay.value = response.data.userBalanceDay
    })
    getList()
  }
  
  function NumFilter (value) {
    // 截取当前数据到小数点后两位
    let realVal = parseFloat(value).toFixed(2)
    return realVal
  }
  
  function NumFilter4 (value) {
    // 截取当前数据到小数点后两位
    let realVal = parseFloat(value).toFixed(4)
    return realVal
  }
  
  function flush () {
    refreshUserBalance()
    getIndex()
    proxy.$modal.msgSuccess("刷新成功")
  }

  function query(){
    getModelList(daterangeCreateTime.value[0], daterangeCreateTime.value[1]).then(response => {
      modelList.value = response.data;
    });
  }
  getIndex()
  </script>
  
  <style scoped lang="scss">
  .main {
    padding: 20px;
  }
  .main2 {
    margin-top: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .text {
    font-size: 14px;
  }
  
  .item {
    margin-bottom: 18px;
  }
  
  .info {
      font-size: 15px;
      color: #606266;
   }
  </style>