log-server-web/src/view/gameTargetTotal/statistics.vue

<template>
    <div>
      <div class="gva-search-box">
        <el-form ref="searchForm" :inline="true" :model="searchInfo">
            <el-form-item label="分类">
            <el-select v-model="searchInfo.group_key" placeholder="分类查询" >
                <el-option
                    v-for="item in searchStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                />
                </el-select>
            </el-form-item>
          <el-form-item label="日期" prop="date">
                <el-date-picker
                    v-model="searchInfo.date"
                    popper-class="picker-popovers"
                    class="timefilter"
                    type="datetime"
                    placeholder="选择日期时间"
                    value-format="YYYY-MM-DD"
                >
                </el-date-picker>
          </el-form-item>
    
          <el-form-item>
            <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
            <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="gva-table-box">
        <el-table :data="tableData" @sort-change="sortChange">
          <el-table-column
            type="selection"
            width="55"
          />
          
          <el-table-column align="left" label="负责人" min-width="150" prop="user" sortable="custom" />
          <el-table-column align="left" label="游戏端口" min-width="150" prop="game_port" sortable="custom" />
          <el-table-column align="left" label="任务日期" min-width="150" prop="task_date" sortable="custom" />
          <el-table-column align="left" label="目标新增" min-width="150" prop="new_target" sortable="custom" />
          <el-table-column align="left" label="目标活跃" min-width="150" prop="retained_target" sortable="custom" />
          <el-table-column align="left" label="目标付费" min-width="150" prop="pay_target" sortable="custom" />
          <el-table-column align="left" label="完成新增" min-width="150" prop="new_complete" sortable="custom" />
          <el-table-column align="left" label="完成活跃" min-width="150" prop="retained_complete" sortable="custom" />
          <el-table-column align="left" label="完成付费" min-width="150" prop="pay_complete" sortable="custom" />
        </el-table>
        <div class="gva-pagination">
          <el-pagination
            :current-page="page"
            :page-size="pageSize"
            :page-sizes="[10, 30, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
  
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'TargetTotal',
  }
  </script>
  
  <script setup>
  import {
    everyDayStatistics,

  } from '@/api/task'

  import { toSQLLine } from '@/utils/stringFun'
  import { ref } from 'vue'

  
  const page = ref(1)
  const total = ref(0)
  const pageSize = ref(10)
  const tableData = ref([])
  const searchInfo = ref({})
  
  const onReset = () => {
    searchInfo.value = {}
  }

  // 搜索
  
  const onSubmit = () => {
    page.value = 1
    pageSize.value = 10
    getTableData()
  }
  
  // 分页
  const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
  }
  
  const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
  }
  
  // 排序
  const sortChange = ({ prop, order }) => {
    if (prop) {
      if (prop === 'id') {
        prop = 'id'
      }
      searchInfo.value.orderKey = toSQLLine(prop)
      searchInfo.value.desc = order === 'descending'
    }
    getTableData()
  }
  
  // 查询
  const getTableData = async() => {
    const table = await everyDayStatistics({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
    if (table.code === 0) {
      tableData.value = table.data.list
      if(searchInfo.value.group_key != 'user'){
        table.data.list.forEach((element) => {
            element.user = '合计'
        });
      }
      if(searchInfo.value.group_key != 'game_port_id'){
        table.data.list.forEach(element => {
            element.game_port = '合计'
        });
      }
      total.value = table.data.total
      page.value = table.data.page
      pageSize.value = table.data.pageSize
    }
  }
  
  getTableData()
  
  const searchStatusOptions = ref([
 {
    value: '',
    label: '总数据',
  },
  {
    value: 'user',
    label: '按负责人',
  },
  {
    value: 'game_port_id',
    label: '按游戏端口',
  }
])
  
  </script>
  
  <style scoped lang="scss">
  .button-box {
    padding: 10px 20px;
    .el-button {
      float: right;
    }
  }
  .warning {
    color: #dc143c;
  }
  </style>