Teams/shanghaigangxiangtuzhuangVUE
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整看板质量报表大小

Browse Source
This commit is contained in:
赵正易
2025-03-11 17:48:32 +08:00
parent 81df92861e
commit 4de67e0267
2 changed files with 129 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
src/views/qualityManagement/gp12/touchScreen/record/index.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="record-container">
<div class="container">
<!-- :model属性用于表单验证使用 比如下面的el-form-item 的 prop属性用于对表单值进行验证操作 -->
<el-form :model="queryParams" size="small" label-position="right" inline ref="queryForm"
:label-width="labelWidth" @submit.native.prevent>
<el-form-item label="开始日期" prop="startTime">
<el-date-picker v-model="queryParams.startTime" @change="selectChange" :clearable="false" type="date"
placeholder="选择日期时间"></el-date-picker>
<el-date-picker v-model="queryParams.startTime" @change="selectChange" :clearable="false"
type="datetime" placeholder="选择日期时间"></el-date-picker>
</el-form-item>
<el-form-item label="结束日期" prop="endTime">
<el-date-picker v-model="queryParams.endTime" @change="selectChange" :clearable="false" type="date"
<el-date-picker v-model="queryParams.endTime" @change="selectChange" :clearable="false" type="datetime"
placeholder="选择日期时间"></el-date-picker>
</el-form-item>
<el-form-item label="工单号" prop="workOrder">
@@ -22,12 +22,14 @@
</el-form-item>
<el-form-item label="站点" prop="siteNo">
<el-select v-model="queryParams.siteNo" placeholder="请选择站点" @change="selectChange">
<el-option label="全部" value=""></el-option>
<el-option v-for="item in siteOptions" :key="item.code" :label="item.name" :value="item.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="班组" prop="team">
<el-select v-model="queryParams.team" placeholder="请选择班组" @change="selectChange">
<el-option label="全部" value=""></el-option>
<el-option v-for="item in teamOptions" :key="item.code" :label="item.name" :value="item.code">
</el-option>
</el-select>
@@ -43,8 +45,13 @@
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出当前页</el-button>
</el-form-item>
</el-form>
<div style="width: 100%; display: flex; justify-content: flex-end">
<pagination class="mt10" background :pageSizes="[12, 30, 60, 300]" :total="total"
:page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
</div>
<!-- 统计数据区域 -->
<div v-if="statistics" class="statistics-box">
<div>总工单: {{ statistics.totalListCount }}</div>
@@ -56,65 +63,71 @@
<div>报废数: {{ statistics.totalBaofeiNumber }}</div>
</div>
<!-- 数据区域 -->
<vxe-table size="mini" ref="xTable" border height="500px" :scroll-y="{ gt: 400 }" :data="dataList"
:loading="loading" :row-config="{ isHover: true, isCurrent: true, height: 60 }"
:column-config="{ resizable: true }" :header-cell-style="headerCellStyle" :merge-cells="mergeCells"
:cell-style="cellStyle" @menu-click="contextMenuClickEvent" :menu-config="tableMenu">
<vxe-column fixed="left" field="workOrder" title="工单号" align="center" width="100px" />
<vxe-column fixed="left" field="partNumber" title="零件号" align="center" width="100px" />
<vxe-column fixed="left" field="description" title="描述" align="center" width="100px" />
<vxe-column fixed="left" field="requireNumber" title="投入数" align="center" />
<vxe-column fixed="left" field="qualifiedNumber" title="合格数" align="center" />
<vxe-column fixed="left" field="qualifiedRate" title="合格率" align="center" width="60px" />
<vxe-column fixed="left" field="polishNumber" title="抛光数" align="center" />
<vxe-column fixed="left" field="damoNumber" title="打磨数" align="center" />
<vxe-column fixed="left" field="baofeiNumber" title="报废数" align="center" />
<vxe-column field="specification" title="规格" align="center" />
<vxe-column field="color" title="颜色" align="center" />
<vxe-column field="siteNo" title="站点" align="center" />
<vxe-column field="team" title="班组" align="center" />
<vxe-column field="isOnetime" title="一次" align="center">
<template #default="{ row }">
{{ row.isOnetime == 1 ? '是' : '' }}
</template>
</vxe-column>
<vxe-column field="isBack" title="返工件" align="center">
<template #default="{ row }">
{{ row.isBack == 1 ? '是' : '' }}
</template>
</vxe-column>
<vxe-column field="isPolish" title="抛光件" align="center">
<template #default="{ row }">
{{ row.isPolish == 1 ? '是' : '' }}
</template>
</vxe-column>
<vxe-column field="isOut" title="其他" align="center">
<template #default="{ row }">
{{ row.isOut == 1 ? '是' : '' }}
</template>
</vxe-column>
<vxe-column field="startTime" title="开始" align="center" width="100px" />
<vxe-column field="endTime" title="结束" align="center" width="100px" />
<vxe-column field="groupSort" title="类别" align="center" width="60px">
<template #default="{ row }">
<span v-if="row.groupSort == 1">抛光</span>
<span v-if="row.groupSort == 2">打磨</span>
<span v-if="row.groupSort == 3">报废</span>
</template>
</vxe-column>
<vxe-table size="mini" ref="xTable" border height="860px" :data="dataList" :loading="loading"
:column-config="{ resizable: true }" :header-cell-style="headerCellStyle" :export-config="exportConfig"
:merge-cells="mergeCells" :cell-style="cellStyle" @menu-click="contextMenuClickEvent" :show-overflow="false"
:menu-config="tableMenu">
<vxe-colgroup title="工单信息" align="center" fixed="left">
<vxe-column field="workOrder" title="工单号" align="center" width="100px" />
<vxe-column field="partNumber" title="零件号" align="center" width="100px" />
<vxe-column field="description" title="零件描述" align="center" width="100px" />
<vxe-column field="specification" title="规格" align="center" />
<vxe-column field="color" title="颜色" align="center" />
<vxe-column field="siteNo" title="站点" align="center" />
<vxe-column field="team" title="班组" align="center" />
<vxe-column field="requireNumber" title="投入数" align="center" />
<vxe-column field="qualifiedNumber" title="合格数" align="center" />
<vxe-column field="qualifiedRate" title="合格率" align="center" width="70px" />
<vxe-column field="polishNumber" title="抛光数" align="center" />
<vxe-column field="damoNumber" title="打磨数" align="center" />
<vxe-column field="baofeiNumber" title="报废数" align="center" />
<vxe-column field="isOnetime" title="是否一次合格" align="center">
<template #default="{ row }">
{{ row.isOnetime == 1 ? '是' : '否' }}
</template>
</vxe-column>
<vxe-column field="isBack" title="是否返工件" align="center">
<template #default="{ row }">
{{ row.isBack == 1 ? '是' : '否' }}
</template>
</vxe-column>
<vxe-column field="isPolish" title="是否抛光件" align="center">
<template #default="{ row }">
{{ row.isPolish == 1 ? '是' : '否' }}
</template>
</vxe-column>
<vxe-column field="isOut" title="是否其他" align="center">
<template #default="{ row }">
{{ row.isOut == 1 ? '是' : '否' }}
</template>
</vxe-column>
<vxe-column field="startTime" title="开始时间" align="center" width="100px" />
<vxe-column field="endTime" title="结束时间" align="center" width="100px" />
<vxe-column field="groupSort" title="类别" align="center" width="60px">
<template #default="{ row }">
<span v-if="row.groupSort == 1">抛光</span>
<span v-if="row.groupSort == 2">打磨</span>
<span v-if="row.groupSort == 3">报废</span>
</template>
</vxe-column>
</vxe-colgroup>
<!-- 展示缺陷记录 -->
<vxe-colgroup v-for="group, index in groupTable" :key="index" :title="group.groupName" align="center">
<vxe-column v-for="defect, index in group.children" :key="index" :field="defect.code"
:title="defect.name" align="center">
:title="defect.name" align="center" width="40px">
</vxe-column>
</vxe-colgroup>
</vxe-table>
<!-- <pagination class="mt10" background :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" /> -->
</div>
</template>
<script>
import {
listQcGp12ServiceStatistics,
addQcGp12ServiceStatistics,
delQcGp12ServiceStatistics,
updateQcGp12ServiceStatistics,
getQcGp12ServiceStatistics,
GetReviseList
} from '@/api/qualityManagement/gp12/qcGp12ServiceStatistics.js';
import * as QcGp12Api from '@/api/qualityManagement/gp12/qcGp12Service.js';
@@ -137,7 +150,7 @@ export default {
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
pageSize: 60,
statisticsOrderType: 1,
team: '',
siteNo: '',
@@ -175,8 +188,10 @@ export default {
// 数据列表
statistics: null,
dataList: [],
allDataList: [],
mergeCells: [],
hiddenCells: [],
total: 0,
// 右键菜单
tableMenu: {
header: {
@@ -191,6 +206,26 @@ export default {
},
// 总记录数
total: 0,
exportConfig: {
types: ['xlsx'],
remote: false,
original: false,
isPrint: false,
mode: 'current',
message: true,
sheetMethod({ options, worksheet }) {
if (options.mergeCells && options.mergeCells.length) {
options.mergeCells.forEach(merge => {
worksheet.mergeCells(
merge.row + 1, // 起始行（从1开始）
merge.col + 1, // 起始列（从1开始）
merge.row + merge.rowspan, // 结束行
merge.col + merge.colspan // 结束列
);
});
}
}
}
};
},
created() {
@@ -249,9 +284,16 @@ export default {
// 查询数据
getList() {
this.loading = true;
const params = { ...this.queryParams }
params.startTime = this.$dayjs(this.queryParams.startTime).format()
params.endTime = this.$dayjs(this.queryParams.endTime).format()
console.log(params);
GetReviseList(this.queryParams).then(res => {
if (res.code == 200) {
this.dataList = res.data.list;
//this.allDataList = res.data.list;
this.dataList = res.data.pageList;
this.total = res.data.total;
this.statistics = res.data.statistics;
this.mergeTable(3);
this.loading = false;
@@ -333,6 +375,8 @@ export default {
resetQuery() {
this.timeRange = [];
this.resetForm("queryForm");
this.queryParams.startTime = this.$dayjs().startOf('day')
this.queryParams.endTime = this.$dayjs().endOf('day')
this.handleQuery();
},
// 多选框选中数据
@@ -375,6 +419,28 @@ export default {
fontWeight: '600',
}
},
handleExport() {
//TODO 导出存在异常，需要修复，现在导出数据都是一个数据
const $table = this.$refs.xTable
if ($table) {
$table.openExport({
type: 'xlsx',
isMerge: true,
isColgroup: true,
useStyle: true,
})
// $table.exportData()
// 设置导出类型为 xlsx
// $table.exportData({
// type: 'xlsx',
// }).then(() => {
// console.log('导出成功');
// }).catch(error => {
// console.error('导出失败:', error);
// });
}
}
},
};
</script>
@@ -388,35 +454,11 @@ export default {
--table-font-size: 14px;
--table-font-weight: 600;
--statistics-font-size: 20px;
--button-bg-color: #409EFF;
/* 蓝色按钮背景 */
--button-text-color: #ffffff;
/* 白色按钮文字 */
--input-bg-color: #ffffff;
/* 白色输入框背景 */
--input-text-color: #333333;
/* 深色输入框文字 */
}
.record-container {
width: 90vw;
/* 使用视口宽度的90% */
max-width: 1200px;
/* 设置最大宽度 */
background-color: #ffffff;
margin: 0 auto;
/* 居中对齐 */
padding: 20px;
/* 添加内边距 */
box-sizing: border-box;
/* 包含内边距和边框 */
}
@media (max-width: 768px) {
.record-container {
width: 95vw;
/* 在小屏幕设备上使用视口宽度的95% */
}
.container {
width: 95vw;
background-color: white;
}
.vxe-table--header-wrapper th {
@@ -439,32 +481,6 @@ export default {
flex-direction: row;
align-items: center;
justify-content: space-around;
color: #161823;
font-size: var(--statistics-font-size);
}
/* 调整按钮和输入框大小 */
.el-form-item {
margin-bottom: 20px;
/* 增加表单项之间的间距 */
}
.el-input__inner {
padding: 10px 15px;
/* 增加输入框的内边距 */
font-size: 16px;
/* 增加输入框的字体大小 */
background-color: var(--input-bg-color);
/* 白色输入框背景 */
color: var(--input-text-color);
/* 深色输入框文字 */
border: 1px solid #dcdcdc;
/* 边框颜色 */
}
.el-date-editor.el-input,
.el-select {
width: 100%;
/* 使日期选择器和下拉选择器占满宽度 */
}
</style>

10
vue.config.js
View File

@@ -68,11 +68,11 @@ module.exports = {
},
},
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'disabled', // 默认不自动启动
generateStatsFile: true, // 生成stats.json文件
statsFilename: 'stats.json',
}),
// new BundleAnalyzerPlugin({
// analyzerMode: 'disabled',
// generateStatsFile: true,
// statsFilename: 'stats.json',
// }),
],
},
chainWebpack(config) {