<script setup>
|
import { ref, onMounted, reactive, onUnmounted } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import request from '@/utils/request'
|
|
const timer = ref(null)
|
const xGrid = ref()
|
const tableData = ref([])
|
const loading = ref(false)
|
|
// 筛选条件
|
const filterForm = ref({
|
startDate: null,
|
endDate: null,
|
taskType: '',
|
operationRecord: '',
|
lineType: ''
|
})
|
|
// 获取本月第一天和最后一天
|
const getCurrentMonthRange = () => {
|
const now = new Date()
|
const firstDay = new Date(now.getFullYear(), now.getMonth(), 1)
|
const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0)
|
return {
|
startDate: formatDate(firstDay),
|
endDate: formatDate(lastDay)
|
}
|
}
|
|
// 格式化日期为 yyyy-MM-dd HH:mm:ss
|
const formatDate = (date, isEndDate = false) => {
|
const year = date.getFullYear()
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
const day = String(date.getDate()).padStart(2, '0')
|
const time = isEndDate ? '23:59:59' : '00:00:00'
|
return `${year}-${month}-${day} ${time}`
|
}
|
|
// 格式化表格中的时间显示
|
const formatTableDateTime = ({ cellValue }) => {
|
if (!cellValue) return ''
|
try {
|
// 处理ISO格式的时间字符串
|
const date = new Date(cellValue)
|
if (isNaN(date.getTime())) return cellValue
|
|
const year = date.getFullYear()
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
const day = String(date.getDate()).padStart(2, '0')
|
const hours = String(date.getHours()).padStart(2, '0')
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
const seconds = String(date.getSeconds()).padStart(2, '0')
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
} catch (error) {
|
console.error('日期格式化错误:', error)
|
return cellValue
|
}
|
}
|
|
// 添加日期选择的限制逻辑
|
const validateDateRange = (startDate, endDate) => {
|
if (!startDate || !endDate) return true
|
|
const start = new Date(startDate)
|
const end = new Date(endDate)
|
|
// 计算两个日期之间的毫秒差
|
const diffTime = Math.abs(end - start)
|
// 转换为天数
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
|
|
// 检查是否超过31天
|
return diffDays <= 31
|
}
|
|
const gridOptions = reactive({
|
border: true,
|
height: '500px',
|
showOverflow: true,
|
loading: loading,
|
exportConfig: {},
|
columnConfig: {
|
resizable: true
|
},
|
toolbarConfig:
|
{
|
print: true,
|
export: true,
|
custom: true,
|
zoom: true
|
},
|
columns: [
|
{ type: 'seq', width: 60, title: '序号' },
|
{ field: 'glass_id', title: '玻璃ID', width: 120 },
|
{ field: 'batch_number', title: '批次号', width: 120 },
|
{ field: 'scan_id', title: '扫描ID', width: 120 },
|
{ field: 'operation_record_time', title: '操作时间', width: 180, formatter: formatTableDateTime },
|
{ field: 'task_type', title: '类型', width: 100 },
|
{ field: 'operation_record', title: '设备名称', width: 120 },
|
{ field: 'operation_mode', title: '操作模式', width: 100 },
|
{ field: 'drawing_marking', title: '图纸标记', width: 120 },
|
{ field: 'state', title: '状态', width: 100 },
|
{ field: 'work_state', title: '工作状态', width: 100 },
|
{ field: 'glass_state', title: '玻璃状态', width: 100 },
|
{ field: 'line_configuration_id', title: '产线ID', width: 100 },
|
{ field: 'is_marking', title: '是否标记', width: 100 },
|
{ field: 'is_send', title: '发送状态', width: 100 },
|
{ field: 'is_silk_screen', title: '是否丝印', width: 100 },
|
{ field: 'length', title: '长度', width: 100 },
|
{ field: 'width', title: '宽度', width: 100 },
|
{ field: 'thickness', title: '厚度', width: 100 },
|
{ field: 'program_id', title: '程序ID', width: 120 },
|
{ field: 'silk_screen_x', title: '丝印X', width: 100 },
|
{ field: 'silk_screen_y', title: '丝印Y', width: 100 },
|
{ field: 'task_quantity', title: '任务数量', width: 100 },
|
{ field: 'task_sequence', title: '任务序列', width: 100 }
|
],
|
data: tableData
|
})
|
|
// 获取数据
|
const fetchData = async () => {
|
loading.value = true
|
try {
|
if (!filterForm.value.startDate || !filterForm.value.endDate) {
|
ElMessage.warning('请选择时间范围')
|
loading.value = false
|
return
|
}
|
|
// 验证日期范围
|
if (!validateDateRange(filterForm.value.startDate, filterForm.value.endDate)) {
|
ElMessage.warning('时间范围不能超过一个月')
|
loading.value = false
|
return
|
}
|
|
const startDate = formatDate(new Date(filterForm.value.startDate), false) // 开始日期使用 00:00:00
|
const endDate = formatDate(new Date(filterForm.value.endDate), true) // 结束日期使用 23:59:59
|
|
const params = {
|
dayCount: 0,
|
startDate: startDate,
|
endDate: endDate,
|
taskType: filterForm.value.taskType || null,
|
operationRecord: filterForm.value.operationRecord || null,
|
lineType: filterForm.value.lineType || null
|
}
|
|
const response = await request({
|
url: '/deviceInteraction/taskingLog/mechanicalReport',
|
method: 'post',
|
params: params
|
})
|
|
if (response && response.code === 200) {
|
if (Array.isArray(response.data)) {
|
//console.log('设置表格数据:', response.data)
|
gridOptions.data = response.data
|
} else {
|
gridOptions.data = []
|
ElMessage.warning('暂无数据')
|
}
|
} else {
|
gridOptions.data = []
|
ElMessage.error(response?.message || '查询失败')
|
}
|
} catch (error) {
|
console.error('获取数据失败:', error)
|
ElMessage.error('获取数据失败：' + (error.message || '未知错误'))
|
gridOptions.data = []
|
} finally {
|
loading.value = false
|
}
|
}
|
|
// 重置筛选条件
|
const resetFilter = () => {
|
const today = new Date()
|
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
|
|
filterForm.value = {
|
startDate: formatDate(firstDayOfMonth),
|
endDate: formatDate(today),
|
taskType: '',
|
operationRecord: '',
|
lineType: ''
|
}
|
fetchData()
|
}
|
|
// 限制结束日期不能超过开始日期一个月
|
const disabledEndDate = (time) => {
|
if (!filterForm.value.startDate) {
|
return false
|
}
|
const startDate = new Date(filterForm.value.startDate)
|
const oneMonthLater = new Date(startDate)
|
oneMonthLater.setMonth(oneMonthLater.getMonth() + 1)
|
return time.getTime() > oneMonthLater.getTime()
|
}
|
|
// 限制开始日期不能离结束日期超过一个月
|
const disabledStartDate = (time) => {
|
if (!filterForm.value.endDate) {
|
return false
|
}
|
const endDate = new Date(filterForm.value.endDate)
|
const oneMonthEarlier = new Date(endDate)
|
oneMonthEarlier.setMonth(oneMonthEarlier.getMonth() - 1)
|
return time.getTime() < oneMonthEarlier.getTime()
|
}
|
|
// 页面加载时获取数据
|
onMounted(() => {
|
resetFilter()
|
// 每分钟刷新一次数据
|
timer.value = setInterval(fetchData, 60000)
|
})
|
|
// 页面卸载时清除定时器
|
onUnmounted(() => {
|
if (timer.value) {
|
clearInterval(timer.value)
|
}
|
})
|
|
|
</script>
|
|
<template>
|
<div class="mechanical-report">
|
<!-- 筛选条件 -->
|
<el-card class="filter-card">
|
<el-form :inline="true" :model="filterForm" class="filter-form">
|
<el-form-item label="开始日期" required>
|
<el-date-picker v-model="filterForm.startDate" type="date" placeholder="选择开始日期" format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD" :disabledDate="disabledStartDate" />
|
</el-form-item>
|
<el-form-item label="结束日期" required>
|
<el-date-picker v-model="filterForm.endDate" type="date" placeholder="选择结束日期" format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD" :disabledDate="disabledEndDate" />
|
</el-form-item>
|
<el-form-item label="类型">
|
<el-select v-model="filterForm.taskType" placeholder="请选择类型" style="width: 100px;" clearable>
|
<el-option label="全部" value="" />
|
<el-option label="定制" value="定制" />
|
<el-option label="标准" value="标准" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="设备名称">
|
<el-select v-model="filterForm.operationRecord" placeholder="请选择设备" style="width: 100px;" clearable>
|
<el-option label="全部" value="" />
|
<el-option label="上片" value="上片" />
|
<el-option label="磨边" value="磨边" />
|
<el-option label="翻片" value="翻片" />
|
<el-option label="打标" value="打标" />
|
<el-option label="丝印" value="丝印" />
|
<el-option label="旋转" value="旋转" />
|
|
</el-select>
|
</el-form-item>
|
<el-form-item label="生产线">
|
<el-select v-model="filterForm.lineType" placeholder="请选择生产线" style="width: 100px;" clearable>
|
<el-option label="全部" value="" />
|
<el-option label="一线" value="1" />
|
<el-option label="二线" value="2" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="fetchData">查询</el-button>
|
<el-button @click="resetFilter">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<!-- 数据表格 -->
|
<el-card class="table-card">
|
<vxe-grid v-bind="gridOptions"></vxe-grid>
|
<div class="total-info">
|
<el-tag type="info" style="font-size: 22px; padding: 8px 16px;">总数量: {{ gridOptions.data.length }}</el-tag>
|
</div>
|
</el-card>
|
|
</div>
|
</template>
|
|
<style scoped>
|
.mechanical-report {
|
padding: 20px;
|
}
|
|
.filter-card {
|
margin-bottom: 20px;
|
}
|
|
.filter-form {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px;
|
}
|
|
.table-card {
|
margin-top: 20px;
|
}
|
|
.total-info {
|
margin-top: 2px;
|
display: left;
|
padding-right: 20px;
|
font-weight: bold;
|
}
|
</style>
|
