计量设备月检验报表

master
FCD 3 months ago
parent 8790a91493
commit 222d84ee38

@ -42,3 +42,14 @@ export function delDeviceOrder(orderId) {
method: 'delete'
});
}
/**
* 根据设备ID查询月工单
* */
export function getDeviceOrderMonthList(data) {
return request({
url: '/device/deviceOrder/month-list' ,
method: 'get',
params:data
});
}

@ -0,0 +1,161 @@
<template>
<el-dialog :title="'选择设备' + (multiple?'(多选)':'(单选)')" :visible.sync="visible" width="800px" top="5vh" append-to-body>
<el-form :model="queryParams" ref="queryRef" :inline="true" >
<el-form-item label="设备编码" prop="equipmentCode">
<el-input
v-model="queryParams.equipmentCode"
placeholder="请输入设备编码"
clearable
style="width: 200px"
@keyup.native.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="车间" prop="workshopCode">
<el-select
v-model="queryParams.workshopCode"
placeholder="请选择工单类型"
style="width: 200px"
:clearable="false"
>
<el-option
v-for="item in workCenterList"
:key="item.factoryCode"
:label="item.factoryName"
:value="item.factoryCode"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery"></el-button>
<el-button icon="Refresh" @click="resetQuery"></el-button>
</el-form-item>
</el-form>
<el-row>
<el-table
ref="refTable"
v-loading="loading"
:data="data"
@current-change="handleCurrentChange"
@selection-change="handleSelectionChange"
:highlight-current-row="!multiple"
>
<el-table-column type="selection" v-if="multiple" width="55" />
<el-table-column label="设备编码" prop="equipmentCode" show-overflow-tooltip />
<el-table-column label="设备名称" prop="equipmentName" show-overflow-tooltip />
<el-table-column label="所属车间" prop="workshopCode" show-overflow-tooltip />
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-row>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="confirmSelect(true)"></el-button>
<el-button @click="visible = false"> </el-button>
</div>
</template>
</el-dialog>
</template>
<script >
import {listEquipment} from "@/api/wms/equipment";
import {getWorkCenter} from "@/api/device/plan";
export default {
props: {
multiple: {
type: Boolean,
default: false
},
params: {
type: Object,
default: () => ({})
}
},
data() {
return {
loading: false,
data: [],
tableHeight: '',
visible: false,
total: 0,
result: null,
queryParams: {
...this.params,
pageNum: 1,
pageSize: 10,
keyword: undefined
},
workCenterList:[]
};
},
mounted() {
getWorkCenter().then((response) => {
this.workCenterList = response.data;
});
this.getList();
},
methods: {
//
show() {
this.visible = true;
},
//
getList() {
this.loading = true;
listEquipment(this.queryParams)
.then(res => {
this.data = res.rows;
this.total = res.total;
})
.finally(() => {
this.loading = false;
});
},
//
handleSelectionChange(res) {
if (this.multiple) {
this.result = res;
}
},
//
handleCurrentChange(res) {
if (!this.multiple) {
this.result = res;
}
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.$refs.queryRef.resetFields();
this.handleQuery();
},
/** 确认选择 */
confirmSelect(close) {
if (!this.result || (this.multiple && !this.result.length)) {
return this.$modal.msgError("请选择设备");
}
this.$emit("confirm", this.result);
if (close) {
this.visible = false;
}
},
},
expose: ['show']
};
</script>

@ -0,0 +1,558 @@
<template>
<div class="app-container">
<!-- 搜索表单区域 -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
<el-form-item label="工单类型" prop="planType">
<el-select
v-model="queryParams.planType"
placeholder="请选择工单类型"
style="width: 200px"
:clearable="false"
@change="changePlanType"
>
<el-option
v-for="dict in dict.type.device_item_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="时间" prop="queryDate">
<el-date-picker
v-model="queryParams.queryDate"
type="month"
placeholder="请选择时间"
:clearable="false"
@change="changeDate"
/>
</el-form-item>
<el-form-item label="设备" prop="equipmentCode">
<el-input
v-model="queryParams.equipmentCode"
placeholder="请输入设备编码"
style="width: 200px"
clearable
>
<template #append>
<el-button @click="showEquipment" type="primary" >选择</el-button>
</template>
</el-input>
</el-form-item>
<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-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-printer"
size="mini"
@click="handlePrint"
>打印</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<div ref="printContent" v-if="tableData.length > 0">
<h3 class="table-title">{{title}}</h3>
<div class="header-section">
<div class="logo-container">
<img src="@/assets/logo/lanjv.png" alt="公司logo" class="logo" >
</div>
<div class="equipment-info">
<div class="info-row">
<div class="info-item">
<span class="info-label">设备名称</span>
<span class="info-value">{{ equipmentInfo.name }}</span>
</div>
<div class="info-item">
<span class="info-label">设备编号</span>
<span class="info-value">{{ equipmentInfo.code }}</span>
</div>
<div class="info-item">
<span class="info-label">使用部门</span>
<span class="info-value">{{ equipmentInfo.department }}</span>
</div>
<div class="info-item">
<span class="info-label">保养频率</span>
<span class="info-value">{{ equipmentInfo.frequency }}</span>
</div>
<div class="info-item">
<span class="info-label">日期</span>
<span class="info-value">{{ year }}{{ month }}</span>
</div>
</div>
</div>
</div>
<table class="maintenance-table">
<thead>
<tr>
<th class="serial-number">序号</th>
<th class="project-column">保养项目</th>
<!-- 动态生成当月天数表头 -->
<th v-for="day in daysInMonth" :key="day" class="day-column">{{ day }}</th>
</tr>
</thead>
<tbody>
<!-- 遍历数据生成表格内容 -->
<tr v-for="(item, index) in tableData" :key="index">
<td class="serial-number">{{ index + 1 }}</td>
<td class="project-column">{{ item.checkItem }}</td>
<!-- 遍历当月天数生成对应单元格 -->
<td v-for="day in daysInMonth" :key="`${index}-${day}`" class="result-cell">
<span v-if="item[day] === '1'" class="check"></span>
<span v-else-if="item[day] === '0'" class="cross"></span>
<span v-if="item[day] !== '1' && item[day] !== '0'">
{{ item[day] }}
</span>
</td>
</tr>
</tbody>
</table>
<div class="remarks-section">
<div class="remarks-label">备注</div>
<div class="remarks-content">
1.设备确认计划 设备正常 ×设备异常 设备停机 当场维修 计划修理 N/A设备未有此项<br>
2.保养项目包含项目例如传动系统检查电路电气元件检查漏电漏油检查储罐管道泄露检查法兰接驳管泄露检查<br>
工模具损坏检查其他辅助设施检查委外保养维修等项目供参考保养人员可结合设备实际情况灵活填写保养项目内容
</div>
</div>
</div>
<div v-if="tableData.length === 0" style="text-align: center;margin-top: 50px;color: #909399">
<span v-if="!queryParams.equipmentCode" >
请选择设备
</span>
<span v-else>
暂无数据
</span>
</div>
<select-equipment ref="selectImportEquipmentRef" @confirm="confirmEquipment"></select-equipment>
</div>
</template>
<script>
import { getDeviceOrderMonthList } from "@/api/device/deviceOrder";
import { parseTime } from "@/utils/openPlatform";
import SelectEquipment from "@/components/Lanju/selectEquipment.vue";
export default {
components: {SelectEquipment },
dicts: ["device_item_type"],
data() {
return {
showSearch: true,
queryParams: {
planType:"maintenance",
queryDate: parseTime(new Date(), "{y}-{m}"),
equipmentCode: undefined,
},
equipmentInfo: {
name: '', //
code: '', //
department: '质量管理部', // 使
frequency: '每天' //
},
rawData: [],
month: new Date().getMonth() + 1,
year: new Date().getFullYear(),
loading: false,
tableData: [],
daysInMonth: [],
title:"",
remark:""
};
},
created() {
this.getDates();
},
methods: {
handlePrint() {
const printContent = this.$refs.printContent
const printWindow = window.open('', '_blank')
printWindow.document.write(`
<html>
<head>
<title>${this.year}年${this.month}月保养项目检查表</title>
<style>
@page {
size: A4 landscape;
margin: 1cm;
}
.table-title {
text-align: center;
margin: 0;
font-size: 20px;
font-weight: bold;
}
.header-section {
width: 100%;
margin-bottom: 20px;
}
.logo-container {
width: 100px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.logo {
max-width: 100%;
max-height: 100%;
}
.equipment-info {
flex-grow: 1;
margin-left: 20px;
overflow: hidden;
}
.info-row {
display: flex;
justify-content: space-between;
width: 100%;
}
.info-item {
flex: 1;
margin-right: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.info-item:last-child {
margin-right: 0;
}
.info-label {
font-weight: bold;
}
.maintenance-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
margin-bottom: 15px;
}
.maintenance-table th,
.maintenance-table td {
border: 1px solid #333;
padding: 4px;
text-align: center;
height: 30px;
vertical-align: middle;
}
.serial-number {
width: 40px;
}
.project-column {
width: 180px;
text-align: left !important;
padding-left: 8px !important;
}
.day-column {
width: 30px;
}
.person-name {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.abnormal-text {
text-align: left;
padding: 4px;
word-wrap: break-word;
white-space: normal;
}
.remarks-section {
margin-top: 15px;
padding-top: 10px;
border-top: 1px solid #333;
}
.remarks-label {
font-weight: bold;
display: inline-block;
margin-bottom: 5px;
}
.remarks-content {
line-height: 1.5;
font-size: 20px;
color: #333;
}
</style>
</head>
<body>
${printContent.innerHTML}
</body>
</html>
`)
printWindow.document.close()
printWindow.onload = () => {
setTimeout(() => {
printWindow.print()
setTimeout(() => printWindow.close(), 500)
}, 300)
}
},
getList() {
this.loading = true;
getDeviceOrderMonthList(this.queryParams).then(res => {
this.rawData = res.data;
this.dataHandle(this.rawData);
this.loading = false;
});
},
showEquipment(){
this.$refs.selectImportEquipmentRef.show()
},
confirmEquipment(res){
this.queryParams.equipmentCode = res.equipmentCode
this.equipmentInfo.code = res.equipmentCode
this.equipmentInfo.name = res.equipmentName
this.equipmentInfo.department = res.department
this.getList()
},
dataHandle(rows) {
const resultRows = [];
let i = 0;
for (const row of rows) {
const dates = row.checkDate.split(',').map(Number);
if (i === rows.length - 1) {
const checkPersons = (row.checkPerson || '').split(',');
const confirmPersons = (row.confirmPerson || '').split(',');
const exceptionHandles = (row.exceptionHandle || '').split(',');
const checkPersonMap = { checkItem: "检核人" };
const confirmPersonMap = { checkItem: "确认人" };
const exceptionHandleMap = { checkItem: "异常情况处理" };
dates.forEach((date, j) => {
checkPersonMap[date] = checkPersons[j];
confirmPersonMap[date] = confirmPersons[j];
exceptionHandleMap[date] = exceptionHandles[j];
});
resultRows.push(checkPersonMap, confirmPersonMap, exceptionHandleMap);
} else {
const resultMap = {
checkItem: row.checkItem
};
const results = row.checkResult.split(',');
let j = 0;
for (const date of dates) {
resultMap[date] = results[j];
j++;
}
resultRows.push(resultMap);
}
i++;
}
this.tableData = resultRows;
},
handleQuery() {
if (!this.queryParams.equipmentCode){
this.$modal.msgError(`请选择设备`);
return false;
}
this.getList();
},
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
changeDate() {
this.month = new Date(this.queryParams.queryDate).getMonth() + 1;
this.year = new Date(this.queryParams.queryDate).getFullYear();
this.queryParams.queryDate = parseTime(new Date(this.queryParams.queryDate), '{y}-{m}');
this.getDates();
if (this.queryParams.equipmentCode){
this.getList()
}
},
getDates() {
const days = new Date(this.year, this.month, 0).getDate();
this.daysInMonth = Array.from({ length: days }, (_, i) => i + 1);
},
changePlanType(res){
let label = ""
for (const item of this.dict.type.device_item_type){
if (item.value === res){
label = item.label
}
}
this.title = "设备"+label +"记录表"
if (this.queryParams.equipmentCode){
this.getList()
}
}
}
};
</script>
<style scoped>
/* 标题样式 - 置于最上方 */
.table-title {
text-align: center;
margin: 0;
color: #333;
font-size: 20px;
font-weight: bold;
}
.header-section {
width: 100%;
margin-bottom: 20px;
}
.logo-container {
width: 100px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.logo {
max-width: 100%;
max-height: 100%;
}
.equipment-info {
flex-grow: 1;
margin-left: 20px;
overflow: hidden;
}
.info-row {
display: flex;
justify-content: space-between;
width: 100%;
flex-wrap: nowrap;
}
.info-item {
flex: 1;
margin-right: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.info-item:last-child {
margin-right: 0;
}
.info-label {
font-weight: bold;
color: #333;
}
.maintenance-table {
width: 100%;
border-collapse: collapse;
margin: 0 auto 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.maintenance-table th,
.maintenance-table td {
border: 1px solid #ddd;
padding: 10px;
min-width: 40px;
}
.maintenance-table th {
background-color: #f8f9fa;
font-weight: bold;
}
.serial-number {
width: 50px;
background-color: #f1f3f5;
}
.project-column {
width: 200px;
text-align: left !important;
background-color: #f1f3f5;
}
.result-cell {
transition: background-color 0.2s;
}
.result-cell:hover {
background-color: #f8f9fa;
}
.check {
color: #28a745; /* 绿色 */
font-weight: bold;
font-size: 18px;
}
.cross {
color: #dc3545; /* 红色 */
font-weight: bold;
font-size: 18px;
}
/* 备注区域样式 */
.remarks-section {
margin-top: 20px;
padding-top: 10px;
border-top: 1px solid #ccc;
}
.remarks-label {
font-weight: bold;
margin-bottom: 5px;
display: inline-block;
}
.remarks-content {
line-height: 1.5;
font-size: 20px;
color: #333;
}
</style>
Loading…
Cancel
Save