电脑管理

src/api/computer.js

@@ -0,0 +1,51 @@
+import service from '@/utils/request'
+
+export const getPcList = (data) => {
+  return service({
+    url: '/computer/getPcList',
+    method: 'post',
+    data
+  })
+}
+
+
+export const getPcById = (data) => {
+    return service({
+      url: '/computer/getPcById',
+      method: 'post',
+      data
+    })
+}
+
+export const createPc = (data) => {
+    return service({
+      url: '/computer/createPc',
+      method: 'post',
+      data
+    })
+}
+
+
+export const updatePc = (data) => {
+    return service({
+      url: '/computer/updatePc',
+      method: 'post',
+      data
+    })
+}
+
+export const colsePc = (data) => {
+    return service({
+      url: '/computer/statusOperationBatch',
+      method: 'post',
+      data
+    })
+}
+
+export const uploadExcel = (data) => {
+  return service({
+    url: '/computer/importExcel',
+    method: 'post',
+    data
+  })
+}

src/api/log.js

@@ -51,3 +51,11 @@ export const logComputerNum = (data) => {
     data
   })
 }
+
+export const computerUseLog = (data) => {
+  return service({
+    url: '/loging/getOnlineComputer',
+    method: 'post',
+    data
+  })
+}

src/view/computer/list.vue

@@ -0,0 +1,435 @@
+<template>
+  <div>
+    <div class="gva-search-box">
+      <el-form ref="searchForm" :inline="true" :model="searchInfo">
+        <el-form-item label="电脑编号">
+          <el-input v-model="searchInfo.pc_code" placeholder="编号" />
+        </el-form-item>
+        <el-form-item label="使用者">
+          <el-input v-model="searchInfo.user" placeholder="使用者" />
+        </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">
+      <div class="gva-btn-list">
+        <el-button size="small" type="primary" icon="plus" @click="openDialog('addCard')">新增</el-button>
+        <el-button class="excel-btn" size="small" type="success" icon="download" @click="downloadExcelTemplate()">下载模板</el-button>
+        <el-upload
+          class="excel-btn"
+          :action="`${path}/computer/importExcel`"
+          :headers="{'x-token':userStore.token}"
+          :on-success="loadExcel"
+          :show-file-list="false"
+        >
+          <el-button size="small" type="primary" icon="upload">导入</el-button>
+        </el-upload>
+      </div>
+      <el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange">
+        <el-table-column
+          type="selection"
+          width="55"
+        />
+        <el-table-column align="left" label="电脑编号" min-width="150" prop="pc_code" sortable="custom" />
+        <el-table-column align="left" label="使用者" min-width="150" prop="user" sortable="custom" />
+        <el-table-column align="left" label="状态" min-width="150" prop="status" >
+          <template #default="scope">
+            <div>
+              <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'">{{ statusFiletr(scope.row.status) }}</el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="电脑供应商" min-width="150" prop="supplier" sortable="custom" />
+        <el-table-column align="left" label="创建时间" min-width="150" prop="create_time" sortable="custom" />
+        <el-table-column align="left" fixed="right" label="操作" width="200">
+          <template #default="scope">
+            <el-button
+              icon="edit"
+              size="small"
+              type="primary"
+              link
+              @click="editCardFunc(scope.row)"
+            >编辑</el-button>
+          </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>
+
+    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
+      <el-form ref="apiForm" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="电脑编号" prop="pc_code">
+          <el-input v-model="form.pc_code" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="电脑供应商" prop="supplier">
+          <el-input v-model="form.supplier" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="使用者" prop="user">
+          <el-input v-model="form.user" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="form.status" placeholder="请选择" style="width:100%">
+            <el-option
+              v-for="item in searchStatusOptions"
+              :key="item.value"
+              :label="`${item.label}(${item.value})`"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button size="small" @click="closeDialog">取 消</el-button>
+          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PcList',
+}
+</script>
+
+<script setup>
+import {
+  getPcList,
+  getPcById,
+  createPc,
+  updatePc,
+  colsePc,
+  uploadExcel
+} from '@/api/computer'
+import { useUserStore } from '@/pinia/modules/user'
+import { toSQLLine } from '@/utils/stringFun'
+import warningBar from '@/components/warningBar/warningBar.vue'
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {downloadTemplate } from '@/api/excel'
+
+const downloadExcelTemplate = () => {
+  downloadTemplate('PcCodeExcelTemplate.xlsx')
+}
+
+const loadExcel = (res) => {
+  if(res.code === 0){
+    ElMessage({
+      type: 'success',
+      message: res.msg
+    })
+  }else{
+    ElMessage({
+      type: 'error',
+      message: res.msg,
+      showClose: true
+    })
+  }
+}
+const path = ref(import.meta.env.VITE_BASE_API)
+const userStore = useUserStore()
+const typeFiletr = (value) => {
+  const target = typeOptions.value.filter(item => item.value === value)[0]
+  return target && `${target.label}`
+}
+
+const statusFiletr = (value) => {
+  const target = statusOptions.value.filter(item => item.value === value)[0]
+  return target && `${target.label}`
+}
+const searchStatusOptions = ref([
+  {
+    value: -1,
+    label: '关闭',
+    type: 'success'
+  },
+  {
+    value: 1,
+    label: '使用',
+    type: ''
+  }
+])
+
+const apis = ref([])
+const form = ref({
+  pc_code: '',
+  supplier: '',
+  user: '',
+  status: 1
+})
+const statusOptions = ref([
+  {
+    value: -1,
+    label: '关闭',
+    type: 'wain'
+  },
+  {
+    value: 1,
+    label: '使用',
+    type: 'success'
+  }
+])
+
+
+const type = ref('')
+const rules = ref({
+  pc_code: [{ required: true, message: '请输电脑编号', trigger: 'blur' }],
+  supplier: [
+    { required: true, message: '请输入电脑供应商', trigger: 'blur' }
+  ],
+  user: [
+    { required: true, message: '请输入使用者', trigger: 'blur' }
+  ]
+})
+
+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 getPcList({ 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 handleSelectionChange = (val) => {
+  apis.value = val
+}
+
+const deleteVisible = ref(false)
+const onDelete = async() => {
+  const ids = apis.value.map(item => item.id)
+  console.log(ids)
+  // const res = await deleteApisByIds({ ids })
+  // if (res.code === 0) {
+  //   ElMessage({
+  //     type: 'success',
+  //     message: res.msg
+  //   })
+  //   if (tableData.value.length === ids.length && page.value > 1) {
+  //     page.value--
+  //   }
+  //   deleteVisible.value = false
+  //   getTableData()
+  // }
+}
+
+const onClose = async() => {
+  const ids = apis.value.map(item => item.id)
+  console.log(ids)
+  const status = -1
+  const res = await colsePc({ ids,status })
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: res.msg
+    })
+    if (tableData.value.length === ids.length && page.value > 1) {
+      page.value--
+    }
+    deleteVisible.value = false
+    getTableData()
+  }
+}
+
+const onOpen = async() => {
+  const ids = apis.value.map(item => item.id)
+  console.log(ids)
+  const status = 1
+  const res = await colsePc({ ids,status })
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: res.msg
+    })
+    if (tableData.value.length === ids.length && page.value > 1) {
+      page.value--
+    }
+    deleteVisible.value = false
+    getTableData()
+  }
+}
+
+// 弹窗相关
+const apiForm = ref(null)
+const initForm = () => {
+  apiForm.value.resetFields()
+  form.value = {
+    card_no: '',
+    machine_no: '',
+    imsi: '',
+    sim_card_no: 0,
+    type: '',
+    card_slot_no: ''
+  }
+}
+
+const dialogTitle = ref('新增')
+const dialogFormVisible = ref(false)
+const openDialog = (key) => {
+  switch (key) {
+    case 'addCard':
+      dialogTitle.value = '新增'
+      break
+    case 'edit':
+      dialogTitle.value = '编辑'
+      break
+    default:
+      break
+  }
+  type.value = key
+  dialogFormVisible.value = true
+}
+const closeDialog = () => {
+  initForm()
+  dialogFormVisible.value = false
+}
+
+const editCardFunc = async(row) => {
+  const res = await getPcById({ id: row.id })
+  form.value = res.data
+  openDialog('edit')
+}
+
+const enterDialog = async() => {
+  apiForm.value.validate(async valid => {
+    if (valid) {
+      switch (type.value) {
+        case 'addCard':
+          {
+            const res = await createPc(form.value)
+            if (res.code === 0) {
+              ElMessage({
+                type: 'success',
+                message: '添加成功',
+                showClose: true
+              })
+            }
+            getTableData()
+            closeDialog()
+          }
+
+          break
+        case 'edit':
+          {
+            const res = await updatePc(form.value)
+            if (res.code === 0) {
+              ElMessage({
+                type: 'success',
+                message: '编辑成功',
+                showClose: true
+              })
+            }
+            getTableData()
+            closeDialog()
+          }
+          break
+        default:
+          // eslint-disable-next-line no-lone-blocks
+          {
+            ElMessage({
+              type: 'error',
+              message: '未知操作',
+              showClose: true
+            })
+          }
+          break
+      }
+    }
+  })
+}
+
+const deleteApiFunc = async(row) => {
+  ElMessageBox.confirm('此操作将永久删除所有角色下该api, 是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(async() => {
+      const res = await deleteApi(row)
+      if (res.code === 0) {
+        ElMessage({
+          type: 'success',
+          message: '删除成功!'
+        })
+        if (tableData.value.length === 1 && page.value > 1) {
+          page.value--
+        }
+        getTableData()
+      }
+    })
+}
+
+</script>
+
+<style scoped lang="scss">
+.button-box {
+  padding: 10px 20px;
+  .el-button {
+    float: right;
+  }
+}
+.warning {
+  color: #dc143c;
+}
+</style>

src/view/logComputer/computerUseLog.vue

@@ -0,0 +1,377 @@
+<template>
+    <div>
+      <div class="gva-search-box">
+        <el-form ref="searchForm" :inline="true" :model="searchInfo">
+          <el-form-item label="电脑编号">
+            <el-input v-model="searchInfo.pc_code" placeholder="电脑编号" />
+          </el-form-item>
+          <el-form-item label="使用者">
+            <el-input v-model="searchInfo.operator" placeholder="使用者" />
+          </el-form-item>
+          <el-form-item label="状态">
+          <el-select v-model="searchInfo.status" 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="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" @selection-change="handleSelectionChange"
+        border
+        >
+          <el-table-column
+            type="selection"
+            width="55"
+          />
+          <el-table-column align="left" label="电脑编号" min-width="100" prop="pc_code" sortable="custom"/>
+          <el-table-column align="left" label="使用者" min-width="150" prop="operator" sortable="custom"/>
+          <el-table-column align="left" label="日期" min-width="150" prop="create_date" />
+          <el-table-column align="left" label="状态" min-width="150" prop="status" >
+          <template #default="scope">
+            <div>
+              <el-tag :type="scope.row.status === -1 ? 'warning' : 'success'">{{ statusFiletr(scope.row.status) }}</el-tag>
+            </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>
+  
+      <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
+        <el-form ref="apiForm" :model="form" :rules="rules" label-width="80px">
+          <el-form-item label="游戏名称" prop="game_name">
+            <el-input v-model="form.game_name" autocomplete="off" />
+          </el-form-item>
+          <el-form-item label="游戏包名" prop="game_package_name">
+            <el-input v-model="form.game_package_name" autocomplete="off" />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button size="small" @click="closeDialog">取 消</el-button>
+            <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
+          </div>
+        </template>
+      </el-dialog>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'ComputerUseLog',
+  }
+  </script>
+  
+  <script setup>
+  import {
+    computerUseLog,
+    logComputerNum,
+  } from '@/api/log'
+  import { toSQLLine } from '@/utils/stringFun'
+  import { ref } from 'vue'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import warningBar from '@/components/warningBar/warningBar.vue'
+  
+  const apis = ref([])
+  const form = ref({
+      game_name: '',
+      game_package_name: ''
+  })
+
+  const statusOptions = ref([
+  {
+    value: -1,
+    label: '没有上报',
+    type: 'wain'
+  },
+  {
+    value: 1,
+    label: '中控上报',
+    type: 'success'
+  },
+  {
+    value: 2,
+    label: '任务上报',
+    type: 'success'
+  }
+])
+  
+  const statusFiletr = (value) => {
+  const target = statusOptions.value.filter(item => item.value === value)[0]
+  return target && `${target.label}`
+}
+
+
+const searchStatusOptions = ref([
+ {
+    value: -1,
+    label: '没有上报',
+    type: 'wain'
+  },
+  {
+    value: 1,
+    label: '中控上报',
+    type: 'success'
+  },
+  {
+    value: 2,
+    label: '任务上报',
+    type: 'success'
+  }
+])
+  
+  const type = ref('')
+  const rules = ref({
+    game_name: [{ required: true, message: '请输入游戏名称', trigger: 'blur' }],
+    game_package_name: [
+      { required: true, message: '请输入游戏包名', trigger: 'blur' }
+    ]
+  })
+  
+  const typeFiletr = (value) => {
+    const target = typeOptions.value.filter(item => item.value === value)[0]
+    return target && `${target.label}`
+  }
+    
+    const typeOptions = ref([
+    {
+      value: 0,
+      label: '脚本',
+      type: ''
+    },
+    {
+      value: 1,
+      label: '中控',
+      type: ''
+    }
+  ])
+  
+  const page = ref(1)
+  const total = ref(0)
+  const pageSize = ref(10)
+  const tableData = ref([])
+  let spanArr = []
+  const searchInfo = ref({})
+  
+  const onReset = () => {
+    searchInfo.value = {}
+  }
+  
+  // 搜索
+  
+  const onSubmit = () => {
+    page.value = 1
+    pageSize.value = 10
+    searchInfo.value.game_id = Number(searchInfo.value.game_id)
+    searchInfo.value.coding = Number(searchInfo.value.coding)
+    getTableData()
+  }
+
+  const getSpanArr = (data) => {
+    spanArr = []
+    var pos = 0
+    for (var i = 0; i < data.length; i++) {
+          if (i === 0) {
+            spanArr.push(1);
+            pos = 0
+          } else {
+            if (data[i].pc_code === data[i - 1].pc_code) {
+              spanArr[pos] += 1;
+              spanArr.push(0);
+            } else {
+              spanArr.push(1);
+              pos = i;
+            }
+          }
+        }
+        console.log(spanArr)  
+  }
+
+  const objectSpanMethod = (row) => {
+    if (row.columnIndex === 1 || row.columnIndex === 2 || row.columnIndex === 3 || row.columnIndex === 0) {
+          const rowspan = spanArr[row.rowIndex];
+          const colspan = rowspan > 0 ? 1 : 0;
+          return {
+            rowspan: rowspan,
+            colspan: colspan
+          }
+        }
+  }
+ 
+
+  
+  // 分页
+  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 computerUseLog({ 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 handleSelectionChange = (val) => {
+    apis.value = val
+  }
+  
+  
+  // 弹窗相关
+  const apiForm = ref(null)
+  const initForm = () => {
+    apiForm.value.resetFields()
+    form.value = {
+      game_name: '',
+      game_package_name: ''
+    }
+  }
+  
+  const dialogTitle = ref('新增game')
+  const dialogFormVisible = ref(false)
+  const openDialog = (key) => {
+    switch (key) {
+      case 'addGame':
+        dialogTitle.value = '新增game'
+        break
+      case 'edit':
+        dialogTitle.value = '编辑game'
+        break
+      default:
+        break
+    }
+    type.value = key
+    dialogFormVisible.value = true
+  }
+  const closeDialog = () => {
+    initForm()
+    dialogFormVisible.value = false
+  }
+  
+  const editCardFunc = async(row) => {
+    const res = await getGameById({ id: row.id })
+    form.value = res.data
+    openDialog('edit')
+  }
+  
+  const enterDialog = async() => {
+    apiForm.value.validate(async valid => {
+      if (valid) {
+        switch (type.value) {
+          case 'addGame':
+            {
+              const res = await cuGame(form.value)
+              if (res.code === 0) {
+                ElMessage({
+                  type: 'success',
+                  message: '添加成功',
+                  showClose: true
+                })
+              }
+              getTableData()
+              closeDialog()
+            }
+  
+            break
+          case 'edit':
+            {
+              const res = await cuGame(form.value)
+              if (res.code === 0) {
+                ElMessage({
+                  type: 'success',
+                  message: '编辑成功',
+                  showClose: true
+                })
+              }
+              getTableData()
+              closeDialog()
+            }
+            break
+          default:
+            // eslint-disable-next-line no-lone-blocks
+            {
+              ElMessage({
+                type: 'error',
+                message: '未知操作',
+                showClose: true
+              })
+            }
+            break
+        }
+      }
+    })
+  }
+  
+  
+  </script>
+  
+  <style scoped lang="scss">
+  .button-box {
+    padding: 10px 20px;
+    .el-button {
+      float: right;
+    }
+  }
+  .warning {
+    color: #dc143c;
+  }
+  </style>
+