log-server-web/src/view/logStatistics/deviceIdErr.vue

<template>
    <div>
      <div class="gva-search-box">
        <el-form ref="searchForm" :inline="true" :model="searchInfo">
          <el-form-item label="游戏id">
            <el-input v-model="searchInfo.game_id" placeholder="游戏id" />
          </el-form-item>
          <el-form-item label="日期" prop="create_date">
                <el-date-picker
                    v-model="searchInfo.create_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 align="left" label="游戏ID" min-width="100" prop="game_id" sortable="custom" />
          <el-table-column align="left" label="电脑编号" min-width="80" prop="pc_code"/>
          <el-table-column align="left" label="负责人" min-width="90" prop="operator"  />
          <el-table-column align="left" label="账号" min-width="150" prop="account" />
          <el-table-column align="left" label="设备id" min-width="150" prop="first_device_id" />
          <el-table-column align="left" label="异常游戏ID" min-width="150" prop="current_game_id" />
          <el-table-column align="left" label="异常账号" min-width="150" prop="current_account" />
          <el-table-column align="left" label="异常设备id" min-width="150" prop="current_device_id" />
          <el-table-column align="left" label="上报时间" min-width="150" prop="create_time" />
          <el-table-column align="left" label="日期" min-width="150" prop="create_date" />
          <el-table-column align="left" label="备注" min-width="60" prop="status">
          <template #default="scope">
            <div>
              {{ typeFiletr(scope.row.status) }}
            </div>
          </template>
        </el-table-column>
        </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: 'DeviceId',
  }
  </script>
  
  <script setup>
  import {
    getDeviceIdErr

  } from '@/api/log'

  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 searchStatusOptions = ref([
    {
      value: -1,
      label: '否',
      type: 'success'
    },
    {
      value: 1,
      label: '是',
      type: ''
    }
  ])

  // 搜索
  
  const onSubmit = () => {
    page.value = 1
    pageSize.value = 10
    searchInfo.value.game_id = Number(searchInfo.value.game_id)
    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 getDeviceIdErr({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
    if (table.code === 0) {
      tableData.value = table.data.list
      total.value = table.data.total
      page.value = table.data.page
      pageSize.value = table.data.pageSize
    }
  }
  
  getTableData()
  

const typeFiletr = (value) => {
  const target = typeOptions.value.filter(item => item.value === value)[0]
  return target && `${target.label}`
}
const typeOptions = ref([
  {
    value: 1,
    label: '设备id不同',
    type: ''
  },
  {
    value: 2,
    label: '设备id相同',
    type: ''
  },
])
  
  </script>
  
  <style scoped lang="scss">
  .button-box {
    padding: 10px 20px;
    .el-button {
      float: right;
    }
  }
  .warning {
    color: #dc143c;
  }
  </style>