|
|
@@ -0,0 +1,1119 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <!-- 控制栏 -->
|
|
|
+ <div class="control-bar">
|
|
|
+ <span class="control-label">刷新时间（秒，输入0关闭刷新）</span>
|
|
|
+ <el-input
|
|
|
+ v-model="num"
|
|
|
+ class="refresh-input"
|
|
|
+ placeholder="请添加刷新时间"
|
|
|
+ :min="1"
|
|
|
+ type="number"
|
|
|
+ @change="handleChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 标题 -->
|
|
|
+ <div class="header-section">
|
|
|
+ <DashboardHeader height="100%" content="原材仓看板" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 列表区域 - 3列2行Grid布局 -->
|
|
|
+ <div class="content-section">
|
|
|
+ <div class="grid-container">
|
|
|
+ <!-- 已登记未质检列表 -->
|
|
|
+ <div class="grid-item">
|
|
|
+ <el-card header="已登记未质检列表" shadow="hover" class="list-card">
|
|
|
+ <div
|
|
|
+ ref="scroll_preRollPass"
|
|
|
+ class="scroll-wrapper"
|
|
|
+ @mouseenter="stopAutoScroll('preRollPass')"
|
|
|
+ @mouseleave="startAutoScroll('preRollPass')"
|
|
|
+ >
|
|
|
+ <div class="table-wrapper">
|
|
|
+ <el-table
|
|
|
+ v-loading="loading.preRollPass"
|
|
|
+ :data="tableData.preRollPass"
|
|
|
+ border
|
|
|
+ class="auto-fit-table"
|
|
|
+ size="small"
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :header-cell-style="headerCellStyle"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ width="50"
|
|
|
+ align="center"
|
|
|
+ label="序号"
|
|
|
+ />
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="物料批次"
|
|
|
+ label="物料批次"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="采购订单"
|
|
|
+ label="采购订单"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ /> -->
|
|
|
+ <el-table-column
|
|
|
+ prop="物料编码"
|
|
|
+ label="物料编码"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料名称"
|
|
|
+ label="物料名称"
|
|
|
+ align="center"
|
|
|
+ min-width="150"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料批次"
|
|
|
+ label="物料批次"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="采购订单"
|
|
|
+ label="采购订单"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="到货数量"
|
|
|
+ label="到货数量"
|
|
|
+ align="center"
|
|
|
+ min-width="80"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="供应商名称"
|
|
|
+ label="供应商名称"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="num > 0" class="page-indicator">
|
|
|
+ {{ pageNo.preRollPass || 1 }} /
|
|
|
+ {{ Math.max(1, Math.ceil((total.preRollPass || 0) / pageSize)) }}
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 已QC通过待入库列表 -->
|
|
|
+ <div class="grid-item">
|
|
|
+ <el-card header="已QC通过待入库列表" shadow="hover" class="list-card">
|
|
|
+ <div
|
|
|
+ ref="scroll_mergedPreRollPass"
|
|
|
+ class="scroll-wrapper"
|
|
|
+ @mouseenter="stopAutoScroll('mergedPreRollPass')"
|
|
|
+ @mouseleave="startAutoScroll('mergedPreRollPass')"
|
|
|
+ >
|
|
|
+ <div class="table-wrapper">
|
|
|
+ <el-table
|
|
|
+ v-loading="loading.mergedPreRollPass"
|
|
|
+ :data="tableData.mergedPreRollPass"
|
|
|
+ border
|
|
|
+ class="auto-fit-table"
|
|
|
+ size="small"
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :header-cell-style="headerCellStyle"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ width="50"
|
|
|
+ align="center"
|
|
|
+ label="序号"
|
|
|
+ />
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="物料批次"
|
|
|
+ label="物料批次"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="采购订单"
|
|
|
+ label="采购订单"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ /> -->
|
|
|
+ <el-table-column
|
|
|
+ prop="物料编码"
|
|
|
+ label="物料编码"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料名称"
|
|
|
+ label="物料名称"
|
|
|
+ align="center"
|
|
|
+ min-width="150"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料批次"
|
|
|
+ label="物料批次"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="采购订单"
|
|
|
+ label="采购订单"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="数量"
|
|
|
+ label="数量"
|
|
|
+ align="center"
|
|
|
+ min-width="80"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="供应商名称"
|
|
|
+ label="供应商名称"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="num > 0" class="page-indicator">
|
|
|
+ {{ pageNo.mergedPreRollPass || 1 }} /
|
|
|
+ {{
|
|
|
+ Math.max(
|
|
|
+ 1,
|
|
|
+ Math.ceil((total.mergedPreRollPass || 0) / pageSize)
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 每日入库信息列表 -->
|
|
|
+ <div class="grid-item">
|
|
|
+ <el-card header="每日入库信息列表" shadow="hover" class="list-card">
|
|
|
+ <div
|
|
|
+ ref="scroll_rollUp"
|
|
|
+ class="scroll-wrapper"
|
|
|
+ @mouseenter="stopAutoScroll('rollUp')"
|
|
|
+ @mouseleave="startAutoScroll('rollUp')"
|
|
|
+ >
|
|
|
+ <div class="table-wrapper">
|
|
|
+ <el-table
|
|
|
+ v-loading="loading.rollUp"
|
|
|
+ :data="tableData.rollUp"
|
|
|
+ border
|
|
|
+ class="auto-fit-table"
|
|
|
+ size="small"
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :header-cell-style="headerCellStyle"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ width="50"
|
|
|
+ align="center"
|
|
|
+ label="序号"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="业务类型"
|
|
|
+ label="业务类型"
|
|
|
+ align="center"
|
|
|
+ min-width="100"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料编码"
|
|
|
+ label="物料编码"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料名称"
|
|
|
+ label="物料名称"
|
|
|
+ align="center"
|
|
|
+ min-width="150"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="入库数量"
|
|
|
+ label="入库数量"
|
|
|
+ align="center"
|
|
|
+ min-width="80"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="入库时间"
|
|
|
+ label="入库时间"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ formatTimestamp(scope.row["入库时间"])
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="审核人"
|
|
|
+ label="审核人"
|
|
|
+ align="center"
|
|
|
+ min-width="80"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="num > 0" class="page-indicator">
|
|
|
+ {{ pageNo.rollUp || 1 }} /
|
|
|
+ {{ Math.max(1, Math.ceil((total.rollUp || 0) / pageSize)) }}
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 每日出库信息列表 -->
|
|
|
+ <div class="grid-item">
|
|
|
+ <el-card header="每日出库信息列表" shadow="hover" class="list-card">
|
|
|
+ <div
|
|
|
+ ref="scroll_finalPass"
|
|
|
+ class="scroll-wrapper"
|
|
|
+ @mouseenter="stopAutoScroll('finalPass')"
|
|
|
+ @mouseleave="startAutoScroll('finalPass')"
|
|
|
+ >
|
|
|
+ <div class="table-wrapper">
|
|
|
+ <el-table
|
|
|
+ v-loading="loading.finalPass"
|
|
|
+ :data="tableData.finalPass"
|
|
|
+ border
|
|
|
+ class="auto-fit-table"
|
|
|
+ size="small"
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :header-cell-style="headerCellStyle"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ width="50"
|
|
|
+ align="center"
|
|
|
+ label="序号"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="业务类型"
|
|
|
+ label="业务类型"
|
|
|
+ align="center"
|
|
|
+ min-width="100"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料编码"
|
|
|
+ label="物料编码"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料名称"
|
|
|
+ label="物料名称"
|
|
|
+ align="center"
|
|
|
+ min-width="150"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="出库数量"
|
|
|
+ label="出库数量"
|
|
|
+ align="center"
|
|
|
+ min-width="80"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="出库时间"
|
|
|
+ label="出库时间"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ formatTimestamp(scope.row["出库时间"])
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="审核人"
|
|
|
+ label="审核人"
|
|
|
+ align="center"
|
|
|
+ min-width="80"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="num > 0" class="page-indicator">
|
|
|
+ {{ pageNo.finalPass || 1 }} /
|
|
|
+ {{ Math.max(1, Math.ceil((total.finalPass || 0) / pageSize)) }}
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 已入库原材料不良列表 -->
|
|
|
+ <div class="grid-item">
|
|
|
+ <el-card
|
|
|
+ header="已入库原材料不良列表"
|
|
|
+ shadow="hover"
|
|
|
+ class="list-card"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ ref="scroll_slitting"
|
|
|
+ class="scroll-wrapper"
|
|
|
+ @mouseenter="stopAutoScroll('slitting')"
|
|
|
+ @mouseleave="startAutoScroll('slitting')"
|
|
|
+ >
|
|
|
+ <div class="table-wrapper">
|
|
|
+ <el-table
|
|
|
+ v-loading="loading.slitting"
|
|
|
+ :data="tableData.slitting"
|
|
|
+ border
|
|
|
+ class="auto-fit-table"
|
|
|
+ size="small"
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :header-cell-style="headerCellStyle"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ width="50"
|
|
|
+ align="center"
|
|
|
+ label="序号"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="申请单号"
|
|
|
+ label="申请单号"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="业务类型"
|
|
|
+ label="业务类型"
|
|
|
+ align="center"
|
|
|
+ min-width="100"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料编码"
|
|
|
+ label="物料编码"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料名称"
|
|
|
+ label="物料名称"
|
|
|
+ align="center"
|
|
|
+ min-width="150"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="入库数量"
|
|
|
+ label="入库数量"
|
|
|
+ align="center"
|
|
|
+ min-width="80"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="入库时间"
|
|
|
+ label="入库时间"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ formatTimestamp(scope.row["入库时间"])
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="审核人"
|
|
|
+ label="审核人"
|
|
|
+ align="center"
|
|
|
+ min-width="80"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="num > 0" class="page-indicator">
|
|
|
+ {{ pageNo.slitting || 1 }} /
|
|
|
+ {{ Math.max(1, Math.ceil((total.slitting || 0) / pageSize)) }}
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 库存呆滞料查询 -->
|
|
|
+ <div class="grid-item">
|
|
|
+ <el-card header="库存呆滞料查询" shadow="hover" class="list-card">
|
|
|
+ <div
|
|
|
+ ref="scroll_annealing"
|
|
|
+ class="scroll-wrapper"
|
|
|
+ @mouseenter="stopAutoScroll('annealing')"
|
|
|
+ @mouseleave="startAutoScroll('annealing')"
|
|
|
+ >
|
|
|
+ <div class="table-wrapper">
|
|
|
+ <el-table
|
|
|
+ v-loading="loading.annealing"
|
|
|
+ :data="tableData.annealing"
|
|
|
+ border
|
|
|
+ class="auto-fit-table"
|
|
|
+ size="small"
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :header-cell-style="headerCellStyle"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ width="50"
|
|
|
+ align="center"
|
|
|
+ label="序号"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料编码"
|
|
|
+ label="物料编码"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料名称"
|
|
|
+ label="物料名称"
|
|
|
+ align="center"
|
|
|
+ min-width="150"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="在库数量"
|
|
|
+ label="在库数量"
|
|
|
+ align="center"
|
|
|
+ min-width="80"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="批次号"
|
|
|
+ label="批次号"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="库存天数"
|
|
|
+ label="库存天数"
|
|
|
+ align="center"
|
|
|
+ min-width="80"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="入库日期"
|
|
|
+ label="入库日期"
|
|
|
+ align="center"
|
|
|
+ min-width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ formatTimestamp(scope.row["入库日期"])
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="num > 0" class="page-indicator">
|
|
|
+ {{ pageNo.annealing || 1 }} /
|
|
|
+ {{ Math.max(1, Math.ceil((total.annealing || 0) / pageSize)) }}
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import DashboardHeader from "@/views/bulletinBoard/components/dashboardHeader.vue";
|
|
|
+import DictTag from "@/components/DictTag";
|
|
|
+import screenfull from "screenfull";
|
|
|
+import * as QueryManageApi from "@/api/mes/queryManage";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "TraceResult",
|
|
|
+ components: { DashboardHeader, DictTag },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ num: 15, // 刷新时间（秒），保持不变
|
|
|
+ pageSize: 5,
|
|
|
+
|
|
|
+ tableData: {
|
|
|
+ preRollPass: [],
|
|
|
+ mergedPreRollPass: [],
|
|
|
+ rollUp: [],
|
|
|
+ finalPass: [],
|
|
|
+ slitting: [],
|
|
|
+ annealing: [],
|
|
|
+ },
|
|
|
+
|
|
|
+ loading: {
|
|
|
+ preRollPass: false,
|
|
|
+ mergedPreRollPass: false,
|
|
|
+ rollUp: false,
|
|
|
+ finalPass: false,
|
|
|
+ slitting: false,
|
|
|
+ annealing: false,
|
|
|
+ },
|
|
|
+
|
|
|
+ pageNo: {
|
|
|
+ preRollPass: 1,
|
|
|
+ mergedPreRollPass: 1,
|
|
|
+ rollUp: 1,
|
|
|
+ finalPass: 1,
|
|
|
+ slitting: 1,
|
|
|
+ annealing: 1,
|
|
|
+ },
|
|
|
+
|
|
|
+ total: {
|
|
|
+ preRollPass: 0,
|
|
|
+ mergedPreRollPass: 0,
|
|
|
+ rollUp: 0,
|
|
|
+ finalPass: 0,
|
|
|
+ slitting: 0,
|
|
|
+ annealing: 0,
|
|
|
+ },
|
|
|
+
|
|
|
+ autoTimers: {},
|
|
|
+ scrollTimers: {},
|
|
|
+ scrollSpeed: 0.8,
|
|
|
+
|
|
|
+ tabs: [
|
|
|
+ { name: "preRollPass", documentId: "2005460172242325506" },
|
|
|
+ { name: "mergedPreRollPass", documentId: "2005466606724091905" },
|
|
|
+ { name: "rollUp", documentId: "2005468337855959041" },
|
|
|
+ { name: "finalPass", documentId: "2005468804044460033" },
|
|
|
+ { name: "slitting", documentId: "2005487894289092609" },
|
|
|
+ { name: "annealing", documentId: "2005521571224129538" },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ num() {
|
|
|
+ this.restartAllAutoPage();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ this.enterFullScreen();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.clearAllTimers();
|
|
|
+ this.clearAllScrollTimers();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async init() {
|
|
|
+ for (const tab of this.tabs) {
|
|
|
+ await this.loadTableData(tab);
|
|
|
+ }
|
|
|
+ this.startAllAutoPage();
|
|
|
+ },
|
|
|
+
|
|
|
+ async loadTableData(tab) {
|
|
|
+ if (this.loading[tab.name]) return;
|
|
|
+ try {
|
|
|
+ this.$set(this.loading, tab.name, true);
|
|
|
+ const currentPage = this.pageNo[tab.name] || 1;
|
|
|
+
|
|
|
+ const { data } = await QueryManageApi.loadTableData({
|
|
|
+ pageNo: currentPage,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ paramList: [],
|
|
|
+ id: tab.documentId,
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$set(this.tableData, tab.name, data?.list || []);
|
|
|
+ this.$set(this.total, tab.name, data?.total || 0);
|
|
|
+
|
|
|
+ // 数据加载完成后，重置滚动位置并重新启动滚动
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const scrollEl = this.$refs[`scroll_${tab.name}`];
|
|
|
+ if (scrollEl) {
|
|
|
+ scrollEl.scrollLeft = 0; // 回到最左边
|
|
|
+ }
|
|
|
+ this.stopAutoScroll(tab.name);
|
|
|
+ this.startAutoScroll(tab.name);
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error("加载数据失败:", error);
|
|
|
+ this.$set(this.tableData, tab.name, []);
|
|
|
+ } finally {
|
|
|
+ this.$set(this.loading, tab.name, false);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // ========== 横向自动滚动（单向：左→右，到达停止）==========
|
|
|
+ startAutoScroll(tableName) {
|
|
|
+ this.stopAutoScroll(tableName);
|
|
|
+
|
|
|
+ const scrollEl = this.$refs[`scroll_${tableName}`];
|
|
|
+ if (!scrollEl) return;
|
|
|
+
|
|
|
+ // 内容不足不需要滚动
|
|
|
+ if (scrollEl.scrollWidth <= scrollEl.clientWidth) return;
|
|
|
+
|
|
|
+ // 初始化：回到最左边
|
|
|
+ scrollEl.scrollLeft = 0;
|
|
|
+
|
|
|
+ this.scrollTimers[tableName] = setInterval(() => {
|
|
|
+ const el = this.$refs[`scroll_${tableName}`];
|
|
|
+ if (!el) return;
|
|
|
+
|
|
|
+ // 内容不足时停止
|
|
|
+ if (el.scrollWidth <= el.clientWidth) {
|
|
|
+ this.stopAutoScroll(tableName);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const maxScrollLeft = el.scrollWidth - el.clientWidth;
|
|
|
+ let currentPos = el.scrollLeft;
|
|
|
+
|
|
|
+ // 向右滚动
|
|
|
+ currentPos += this.scrollSpeed;
|
|
|
+
|
|
|
+ // 到达或超过最右边，停止滚动
|
|
|
+ if (currentPos >= maxScrollLeft) {
|
|
|
+ currentPos = maxScrollLeft;
|
|
|
+ el.scrollLeft = currentPos;
|
|
|
+ this.stopAutoScroll(tableName); // 到达后停止
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ el.scrollLeft = currentPos;
|
|
|
+ }, 16);
|
|
|
+ },
|
|
|
+
|
|
|
+ stopAutoScroll(tableName) {
|
|
|
+ if (this.scrollTimers[tableName]) {
|
|
|
+ clearInterval(this.scrollTimers[tableName]);
|
|
|
+ delete this.scrollTimers[tableName];
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ clearAllScrollTimers() {
|
|
|
+ Object.keys(this.scrollTimers).forEach((key) => {
|
|
|
+ clearInterval(this.scrollTimers[key]);
|
|
|
+ });
|
|
|
+ this.scrollTimers = {};
|
|
|
+ },
|
|
|
+
|
|
|
+ // ========== 翻页相关（使用 num）==========
|
|
|
+ startAutoPage(tab) {
|
|
|
+ this.stopAutoPage(tab);
|
|
|
+ const ms = this.num * 1000;
|
|
|
+ if (!ms || ms <= 0) return;
|
|
|
+
|
|
|
+ this.autoTimers[tab.name] = setInterval(async () => {
|
|
|
+ const maxPage = Math.max(
|
|
|
+ 1,
|
|
|
+ Math.ceil((this.total[tab.name] || 0) / this.pageSize)
|
|
|
+ );
|
|
|
+ const currentPage = this.pageNo[tab.name] || 1;
|
|
|
+ const nextPage = currentPage < maxPage ? currentPage + 1 : 1;
|
|
|
+
|
|
|
+ this.$set(this.pageNo, tab.name, nextPage);
|
|
|
+ await this.loadTableData(tab); // 加载数据时会自动重置滚动
|
|
|
+ }, ms);
|
|
|
+ },
|
|
|
+
|
|
|
+ stopAutoPage(tab) {
|
|
|
+ if (this.autoTimers[tab.name]) {
|
|
|
+ clearInterval(this.autoTimers[tab.name]);
|
|
|
+ delete this.autoTimers[tab.name];
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ startAllAutoPage() {
|
|
|
+ this.tabs.forEach((tab) => this.startAutoPage(tab));
|
|
|
+ },
|
|
|
+
|
|
|
+ clearAllTimers() {
|
|
|
+ Object.keys(this.autoTimers).forEach((key) => {
|
|
|
+ clearInterval(this.autoTimers[key]);
|
|
|
+ });
|
|
|
+ this.autoTimers = {};
|
|
|
+ },
|
|
|
+
|
|
|
+ restartAllAutoPage() {
|
|
|
+ this.clearAllTimers();
|
|
|
+ this.startAllAutoPage();
|
|
|
+ },
|
|
|
+
|
|
|
+ formatTimestamp(val) {
|
|
|
+ if (!val) return "";
|
|
|
+ const timestamp = String(val).length === 10 ? val * 1000 : val;
|
|
|
+ const d = new Date(Number(timestamp));
|
|
|
+ if (isNaN(d.getTime())) return val;
|
|
|
+ const pad = (n) => String(n).padStart(2, "0");
|
|
|
+ return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
|
|
|
+ },
|
|
|
+
|
|
|
+ rowStyle({ row, rowIndex }) {
|
|
|
+ if (row.colorControl) {
|
|
|
+ return { backgroundColor: row.colorControl };
|
|
|
+ }
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+
|
|
|
+ tableRowClassName({ row, rowIndex }) {
|
|
|
+ if (row.colorControl) return "has-color-control";
|
|
|
+ return rowIndex % 2 === 0 ? "even-row" : "odd-row";
|
|
|
+ },
|
|
|
+
|
|
|
+ cellStyle({ row, column, rowIndex, columnIndex }) {
|
|
|
+ const baseStyle = {
|
|
|
+ padding: "1px",
|
|
|
+ fontSize: "3px",
|
|
|
+ whiteSpace: "nowrap",
|
|
|
+ overflow: "hidden",
|
|
|
+ textOverflow: "ellipsis",
|
|
|
+ height: "12px",
|
|
|
+ lineHeight: "10px",
|
|
|
+ color: "#fff",
|
|
|
+ };
|
|
|
+
|
|
|
+ if (row.colorControl) {
|
|
|
+ return { ...baseStyle, backgroundColor: row.colorControl };
|
|
|
+ }
|
|
|
+
|
|
|
+ const bgColor = rowIndex % 2 === 0 ? "#0a1e44" : "#132a55";
|
|
|
+ return { ...baseStyle, backgroundColor: bgColor };
|
|
|
+ },
|
|
|
+
|
|
|
+ headerCellStyle() {
|
|
|
+ return {
|
|
|
+ padding: "1px",
|
|
|
+ fontSize: "3px",
|
|
|
+ fontWeight: 600,
|
|
|
+ backgroundColor: "#071b38",
|
|
|
+ color: "#fff",
|
|
|
+ whiteSpace: "nowrap",
|
|
|
+ overflow: "hidden",
|
|
|
+ textOverflow: "ellipsis",
|
|
|
+ height: "14px",
|
|
|
+ lineHeight: "12px",
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ handleChange(v) {
|
|
|
+ const n = Number(v);
|
|
|
+ if (isNaN(n) || n < 0) {
|
|
|
+ this.$message.warning("请输入≥0的整数，输入0关闭刷新");
|
|
|
+ this.num = 10;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.num = n;
|
|
|
+ },
|
|
|
+
|
|
|
+ enterFullScreen() {
|
|
|
+ setTimeout(() => {
|
|
|
+ if (screenfull.isEnabled) {
|
|
|
+ screenfull.toggle();
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.app-container {
|
|
|
+ background: -webkit-radial-gradient(
|
|
|
+ 50% 35%,
|
|
|
+ farthest-corner,
|
|
|
+ #034f8e,
|
|
|
+ #034987,
|
|
|
+ #02366d,
|
|
|
+ #002353
|
|
|
+ );
|
|
|
+ height: 100vh;
|
|
|
+ width: 100vw;
|
|
|
+ padding: 6px 8px;
|
|
|
+ margin: 0 !important;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.control-bar {
|
|
|
+ flex-shrink: 0;
|
|
|
+ height: 28px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.control-label {
|
|
|
+ color: white;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.refresh-input {
|
|
|
+ width: 160px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.refresh-input ::v-deep .el-input__inner {
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ padding: 0 8px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.header-section {
|
|
|
+ flex-shrink: 0;
|
|
|
+ height: 32px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.content-section {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+/* ========== 3列2行布局 ========== */
|
|
|
+.grid-container {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
+ grid-template-rows: repeat(2, minmax(0, 1fr));
|
|
|
+ gap: 6px;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.grid-item {
|
|
|
+ min-height: 0;
|
|
|
+ min-width: 0;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.list-card {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.list-card ::v-deep .el-card__header {
|
|
|
+ color: #8adfec;
|
|
|
+ font-weight: 600;
|
|
|
+ background-color: #192849;
|
|
|
+ padding: 4px 8px;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 18px;
|
|
|
+ font-size: 12px;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.list-card ::v-deep .el-card__body {
|
|
|
+ flex: 1;
|
|
|
+ padding: 2px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+/* ========= 滚动外层容器 - 横向滚动条在这里 ========= */
|
|
|
+.scroll-wrapper {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+ overflow-x: auto;
|
|
|
+ overflow-y: hidden;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ scrollbar-width: thin;
|
|
|
+ scrollbar-color: #1a2e5a #0a1e44;
|
|
|
+}
|
|
|
+
|
|
|
+/* Webkit 滚动条样式 */
|
|
|
+.scroll-wrapper::-webkit-scrollbar {
|
|
|
+ height: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.scroll-wrapper::-webkit-scrollbar-track {
|
|
|
+ background: #0a1e44;
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.scroll-wrapper::-webkit-scrollbar-thumb {
|
|
|
+ background: #1a2e5a;
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.scroll-wrapper::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #2a3e6a;
|
|
|
+}
|
|
|
+
|
|
|
+/* 表格包装层 - 宽度撑开 */
|
|
|
+.table-wrapper {
|
|
|
+ min-width: 100%;
|
|
|
+ width: max-content;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.page-indicator {
|
|
|
+ text-align: center;
|
|
|
+ color: #8adfec;
|
|
|
+ font-size: 11px;
|
|
|
+ padding: 1px 0;
|
|
|
+ background-color: #192849;
|
|
|
+ border-top: 1px solid #1a2e5a;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-input__inner {
|
|
|
+ background: transparent !important;
|
|
|
+ border: 1px solid #034f8e;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-input__inner::placeholder {
|
|
|
+ color: #ccc;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-card {
|
|
|
+ background-color: #0a1e44 !important;
|
|
|
+ border: 1px solid #1a2e5a !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+ border-radius: 2px !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-card__header {
|
|
|
+ border-bottom: 1px solid #1a2e5a;
|
|
|
+}
|
|
|
+
|
|
|
+/* ========= 表格样式 ========= */
|
|
|
+::v-deep .auto-fit-table {
|
|
|
+ width: auto !important;
|
|
|
+ min-width: 100%;
|
|
|
+ font-size: 11px !important;
|
|
|
+ background-color: #0a1e44 !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 关键：关闭表格内部滚动，让外层容器控制滚动 */
|
|
|
+::v-deep .auto-fit-table .el-table__body-wrapper,
|
|
|
+::v-deep .auto-fit-table .el-table__header-wrapper {
|
|
|
+ overflow: visible !important;
|
|
|
+ background-color: #0a1e44 !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .auto-fit-table .el-table__body-wrapper::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .auto-fit-table .el-table__empty-block {
|
|
|
+ background-color: #0a1e44 !important;
|
|
|
+ min-height: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .auto-fit-table .el-table__empty-text {
|
|
|
+ color: #8adfec !important;
|
|
|
+ font-size: 11px;
|
|
|
+ line-height: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .auto-fit-table .el-table__body,
|
|
|
+::v-deep .auto-fit-table .el-table__header {
|
|
|
+ width: auto !important;
|
|
|
+ table-layout: auto !important;
|
|
|
+ background-color: #0a1e44 !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 表头背景色 */
|
|
|
+::v-deep .auto-fit-table .el-table__header th {
|
|
|
+ padding: 0 !important;
|
|
|
+ font-size: 11px !important;
|
|
|
+ height: auto !important;
|
|
|
+ line-height: 1.1;
|
|
|
+ font-weight: 600;
|
|
|
+ background-color: #071b38 !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 单元格基础背景色 */
|
|
|
+::v-deep .auto-fit-table .el-table__body td {
|
|
|
+ padding: 0 !important;
|
|
|
+ font-size: 11px !important;
|
|
|
+ height: auto !important;
|
|
|
+ line-height: 1.1;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 有colorControl时的行 */
|
|
|
+::v-deep .auto-fit-table .has-color-control td {
|
|
|
+ background-color: inherit !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 斑马纹 */
|
|
|
+::v-deep .auto-fit-table .even-row td {
|
|
|
+ background-color: #0a1e44 !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .auto-fit-table .odd-row td {
|
|
|
+ background-color: #132a55 !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 鼠标悬停 */
|
|
|
+::v-deep .auto-fit-table .has-color-control:hover td {
|
|
|
+ background-color: inherit !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .auto-fit-table .even-row:hover td,
|
|
|
+::v-deep .auto-fit-table .odd-row:hover td {
|
|
|
+ background-color: rgba(138, 223, 236, 0.2) !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .auto-fit-table.el-table--border,
|
|
|
+::v-deep .auto-fit-table.el-table--border th,
|
|
|
+::v-deep .auto-fit-table.el-table--border td {
|
|
|
+ border-color: #1a2e5a !important;
|
|
|
+ border-width: 1px !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .auto-fit-table .cell {
|
|
|
+ font-size: 11px !important;
|
|
|
+ line-height: 1.1 !important;
|
|
|
+ padding: 0 1px !important;
|
|
|
+ white-space: nowrap !important;
|
|
|
+ overflow: hidden !important;
|
|
|
+ text-overflow: ellipsis !important;
|
|
|
+ background-color: transparent !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .auto-fit-table td .cell,
|
|
|
+::v-deep .auto-fit-table th .cell {
|
|
|
+ padding-left: 1px !important;
|
|
|
+ padding-right: 1px !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-loading-mask {
|
|
|
+ background-color: rgba(10, 30, 68, 0.8) !important;
|
|
|
+}
|
|
|
+</style>
|
chensibo