| | |
| | | * @Author: lzhe lzhe@example.com |
| | | * @Date: 2024-04-26 09:36:18 |
| | | * @LastEditors: lzhe lzhe@example.com |
| | | * @LastEditTime: 2024-11-22 18:45:06 |
| | | * @LastEditTime: 2024-12-20 15:10:08 |
| | | * @FilePath: /smart-web/src/views/mdc/status-record.vue |
| | | * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE |
| | | --> |
| | |
| | | <el-card shadow="never" style="height: 100%;" body-style="height: 100%;padding: 0;"> |
| | | <el-container style="height: 100%;"> |
| | | <el-aside width="300px" style="height: 100%;"> |
| | | <el-container> |
| | | <el-main style="padding: 20px;"> |
| | | <el-row> |
| | | <el-col style="margin-bottom: 12px;">日期</el-col> |
| | | </el-row> |
| | | <el-row style="margin-top: 14px;"> |
| | | <MYTree getAll v-model="treeChecked" show-checkbox class="MYTree-content"></MYTree> |
| | | </el-row> |
| | | </el-main> |
| | | <el-footer> |
| | | <el-button @click="query" type="primary">查询</el-button> |
| | | <exportDialog @export="exportExcel"></exportDialog> |
| | | </el-footer> |
| | | </el-container> |
| | | <el-main style="border-bottom: 1px solid #ccc;"> |
| | | <el-form ref="form" :model="searchInfo" label-width="80px"> |
| | | <el-form-item label="零件号"> |
| | | <el-input v-model="searchInfo.partNo"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="工位编号"> |
| | | <el-input v-model="searchInfo.workstationName"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="开始时间"> |
| | | <el-date-picker v-model="searchInfo.startDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="选择日期"></el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="结束时间"> |
| | | <el-date-picker v-model="searchInfo.endDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="选择日期"></el-date-picker> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div style="text-align: center;"><el-button type="primary" @click="searchBtn">查询</el-button></div> |
| | | </el-main> |
| | | <el-main> |
| | | <el-radio-group v-model="tabPosition" style="margin-bottom: 12px;"> |
| | | <el-radio-button label="设备结构树"></el-radio-button> |
| | | <el-radio-button label="零件结构树"></el-radio-button> |
| | | </el-radio-group> |
| | | <!-- <MYTree v-model="treeChecked" show-checkbox class="MYTree-content"></MYTree> --> |
| | | </el-main> |
| | | </el-aside> |
| | | <el-container> |
| | | <el-main style="position: relative;"> |
| | | |
| | | <el-main> |
| | | <el-table :data="tableData" border @selection-change="handleSelectionChange"> |
| | | <el-table-column type="selection" width="55" fixed></el-table-column> |
| | | <el-table-column prop="index" label="序号" width="60" fixed></el-table-column> |
| | | <el-table-column prop="partNo" label="零件号" width="80" fixed></el-table-column> |
| | | <el-table-column prop="processNo" label="工序号" width="80"></el-table-column> |
| | | <el-table-column prop="version" label="版次" width="60"></el-table-column> |
| | | <el-table-column prop="workstationName" label="工位" width="100"></el-table-column> |
| | | <el-table-column prop="startTime" label="开始时间" width="145"></el-table-column> |
| | | <el-table-column prop="endTime" label="结束时间" width="145"></el-table-column> |
| | | <el-table-column prop="occupancySecs" label="占机时间" width="100"> |
| | | <template #default="scope"> |
| | | {{ convertSeconds(scope.row.occupancySecs || 0) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="clampingSecs" label="装夹调试时间" width="100"> |
| | | <template #default="scope"> |
| | | {{ convertSeconds(scope.row.clampingSecs || 0) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="firstWorkingSecs" label="首件切削时间" width="100"> |
| | | <template #default="scope"> |
| | | {{ convertSeconds(scope.row.firstWorkingSecs || 0) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="firstMeasureSecs" label="首件计量时间" width="100"> |
| | | <template #default="scope"> |
| | | {{ convertSeconds(scope.row.firstMeasureSecs || 0) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="lastRemoveSecs" label="末件拆卸时间" width="100"> |
| | | <template #default="scope"> |
| | | {{ convertSeconds(scope.row.lastRemoveSecs || 0) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="processingSecs" label="加工时间" width="80"> |
| | | <template #default="scope"> |
| | | {{ convertSeconds(scope.row.processingSecs || 0) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="prepareSecs" label="准备时间" width="80"> |
| | | <template #default="scope"> |
| | | {{ convertSeconds(scope.row.prepareSecs || 0) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="singleProcessSecs" label="单件工时" width="80"> |
| | | <template #default="scope"> |
| | | {{ convertSeconds(scope.row.singleProcessSecs || 0) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="amount" label="数量" width="60"></el-table-column> |
| | | <el-table-column label="操作" width="100"> |
| | | <template #default="scope"> |
| | | <el-button type="primary" @click="exportBtn(scope)">输出</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <el-pagination background layout="total, prev, pager, next" :total="total" style="margin-top: 12px;" @current-change="handleCurrentChange"></el-pagination> |
| | | </el-main> |
| | | <el-footer> |
| | | <el-button type="primary" @click="goFirstWorkDetail">详情</el-button> |
| | | </el-footer> |
| | | </el-container> |
| | | </el-container> |
| | | </el-card> |
| | | <!-- <el-dialog title="设置" v-model="dialogVisible" v-if="dialogVisible" width="30%" class="setModelStyle"> |
| | | <Efficiency :showModalList="showModalList" /> |
| | | </el-dialog> --> |
| | | </el-main> |
| | | </template> |
| | | |
| | | <script> |
| | | //import exportDialog from '@/layout/components/exportDialog.vue' |
| | | import * as ElementPlusIconsVue from '@element-plus/icons-vue' |
| | | //import Efficiency from './configComp/Efficiency.vue' |
| | | let icons = [] |
| | | for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
| | | icons.push(key) |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | treeChecked: [] |
| | | searchInfo: { |
| | | "endDate": "", |
| | | "partNo": "", |
| | | "startDate": "", |
| | | "workstationName": "" |
| | | }, |
| | | tabPosition: "设备结构树", |
| | | tableData: [], |
| | | treeChecked: [], |
| | | ids: [], |
| | | total: 0, |
| | | current: 1, |
| | | size: 20 |
| | | } |
| | | }, |
| | | created() { |
| | | |
| | | // var obj = {test:1} |
| | | // for(var i=0;i<10;i++) { |
| | | // this.tableData.push(obj); |
| | | // } |
| | | }, |
| | | mounted() { |
| | | this.setDate(); //设置开始,结束日期 |
| | | this.getTableData(); |
| | | }, |
| | | methods: { |
| | | exportBtn(scope) { |
| | | this.$HTTP.get(`/api/workinghour/export?id=${scope.row.id}`).then(res => { |
| | | if (res.code == 200) { |
| | | this.$TOOL.downFile(res.data.link,res.data.originalName); |
| | | } |
| | | }) |
| | | }, |
| | | setDate() { |
| | | var date = new Date(); |
| | | var threeDaysInMilliseconds = 3 * 24 * 60 * 60 * 1000; |
| | | var threeDaysAgo = new Date(date.getTime() - threeDaysInMilliseconds); |
| | | |
| | | // 辅助函数,用于将数字格式化为两位数 |
| | | function padZero(num) { |
| | | return num < 10 ? '0' + num : num; |
| | | } |
| | | |
| | | // 构建当前日期的字符串 |
| | | var currentYear = date.getFullYear(); |
| | | var currentMonth = padZero(date.getMonth() + 1); // 月份从0开始,所以需要加1 |
| | | var currentDay = padZero(date.getDate()); |
| | | this.searchInfo.endDate = currentYear + '-' + currentMonth + '-' + currentDay; |
| | | |
| | | // 构建三天前日期的字符串 |
| | | var previousYear = threeDaysAgo.getFullYear(); |
| | | var previousMonth = padZero(threeDaysAgo.getMonth() + 1); |
| | | var previousDay = padZero(threeDaysAgo.getDate()); |
| | | this.searchInfo.startDate = previousYear + '-' + previousMonth + '-' + previousDay; |
| | | }, |
| | | handleCurrentChange(val) { |
| | | this.current = val; |
| | | this.getTableData(); |
| | | }, |
| | | convertSeconds(seconds) { //转换时间 |
| | | // 定义时间单位转换关系 |
| | | const daysInSeconds = 24 * 60 * 60; |
| | | const hoursInSeconds = 60 * 60; |
| | | const minutesInSeconds = 60; |
| | | |
| | | // 计算天数 |
| | | let days = Math.floor(seconds / daysInSeconds); |
| | | seconds %= daysInSeconds; |
| | | |
| | | // 计算小时数 |
| | | let hours = Math.floor(seconds / hoursInSeconds); |
| | | seconds %= hoursInSeconds; |
| | | |
| | | // 计算分钟数 |
| | | let minutes = Math.floor(seconds / minutesInSeconds); |
| | | seconds %= minutesInSeconds; |
| | | |
| | | // 准备结果数组 |
| | | let result = []; |
| | | |
| | | // 根据需要添加天数到结果数组 |
| | | if (days > 0) { |
| | | result.push(`${days}天`); |
| | | } |
| | | |
| | | // 根据需要添加小时数到结果数组 |
| | | if (hours > 0) { |
| | | result.push(`${hours}小时`); |
| | | } |
| | | |
| | | // 根据需要添加分钟数到结果数组 |
| | | if (minutes > 0) { |
| | | result.push(`${minutes}分钟`); |
| | | } |
| | | |
| | | // 始终添加秒数到结果数组(因为秒数总是有意义的) |
| | | result.push(`${seconds}秒`); |
| | | |
| | | // 返回格式化后的字符串 |
| | | return result.join(' '); |
| | | }, |
| | | changeStartDate(val) { |
| | | }, |
| | | searchBtn() { |
| | | if(!this.searchInfo.startDate || !this.searchInfo.endDate) { |
| | | this.$message.error('选择开始、结束时间查询'); |
| | | return; |
| | | } |
| | | this.getTableData(); |
| | | }, |
| | | getTableData() { |
| | | this.$HTTP.post(`/api/workinghour/page?current=${this.current}&size=${this.size}`, this.searchInfo).then(res => { |
| | | if (res.code === 200) { |
| | | res.data.records.forEach((item,index)=> { |
| | | item.index = index + 1; |
| | | }) |
| | | this.tableData = res.data.records; |
| | | this.total = res.data.total; |
| | | } |
| | | }) |
| | | }, |
| | | goFirstWorkDetail() { |
| | | if(this.ids.length == 0) { |
| | | this.$message.error("请先选择数据"); |
| | | return; |
| | | } |
| | | this.$router.push({path: `/mdc/first-workpiece-detail`,query: {ids: this.ids.join(',')}}) |
| | | }, |
| | | handleSelectionChange(val) { |
| | | this.ids = []; |
| | | val.forEach(item=> { |
| | | this.ids.push(item.id); |
| | | }) |
| | | }, |
| | | query() { |
| | | |
| | | } |