<!--
|
* @Author: lzhe lzhe@example.com
|
* @Date: 2024-04-26 09:36:18
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-12-20 15:06:05
|
* @FilePath: /smart-web/src/views/mdc/status-record.vue
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
-->
|
<template>
|
<el-main style="height: 100%;" class="timeAnalysis">
|
<el-card body-style="height: 100%;padding: 0;" style="margin-bottom: 12px;">
|
<div class="tableOuter">
|
<div class="tableAll">
|
<div class="tableHeader">
|
<span v-for="item in tableHeader" :style="{'width': item.width}"> {{item.title}} </span>
|
</div>
|
<div v-for="(item,index) in tableData" class="tableBody">
|
<span style="width:60px;" v-if="item.id">{{item.index}}</span>
|
<span style="width:80px;" v-if="item.id">{{item.partNo}}</span>
|
<span style="width:80px;" v-if="item.id">{{item.processNo}}</span>
|
<span style="width:60px;" v-if="item.id">{{item.version}}</span>
|
<span style="width:100px;" v-if="item.id">{{item.workstationName}}</span>
|
<span style="width:145px;" v-if="item.id">{{item.startTime}}</span>
|
<span style="width:145px;" v-if="item.id">{{item.endTime}}</span>
|
<span style="width:100px;" v-if="item.id">{{ convertSeconds(item.occupancySecs || 0) }}</span>
|
<span style="width:100px;" v-if="item.id">{{ convertSeconds(item.clampingSecs || 0) }}</span>
|
<span style="width:100px;" v-if="item.id">{{ convertSeconds(item.firstWorkingSecs || 0) }}</span>
|
<span style="width:100px;" v-if="item.id">{{ convertSeconds(item.firstMeasureSecs || 0) }}</span>
|
<span style="width:100px;" v-if="item.id">{{ convertSeconds(item.lastRemoveSecs || 0) }}</span>
|
<span style="width:80px;" v-if="item.id">{{ convertSeconds(item.processingSecs || 0) }}</span>
|
<span style="width:80px;" v-if="item.id">{{ convertSeconds(item.prepareSecs || 0) }}</span>
|
<span style="width:80px;" v-if="item.id">{{ convertSeconds(item.singleProcessSecs || 0) }}</span>
|
<span style="width:60px;" v-if="item.id">{{item.amount}}</span>
|
<!-- 图表 -->
|
<el-card v-if="!item.id" shadow="never" body-style="padding: 0;" class="chartsDiv">
|
<process-charts :index="index" :tableData="tableData"></process-charts>
|
<div class="modelBtn">
|
<el-button type="primary" @click="goFirstWorkProcess(item,index)">过程分析</el-button>
|
<el-button type="primary" @click="exportBtn(item,index)">输出</el-button>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
</el-main>
|
</template>
|
|
<script>
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
let icons = []
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
icons.push(key)
|
}
|
import * as echarts from 'echarts';
|
import processCharts from './components/process-charts.vue';
|
export default {
|
components: {
|
...ElementPlusIconsVue,processCharts
|
},
|
data() {
|
return {
|
detailModelList: [],
|
tableData: [],
|
tableHeader: [
|
{title:'序号',width: '60px'},
|
{title:'零件号',width: '80px'},
|
{title:'工序号',width: '80px'},
|
{title:'版次',width: '60px'},
|
{title:'工位',width: '100px'},
|
{title:'开始时间',width: '145px'},
|
{title:'结束时间',width: '145px'},
|
{title:'占机时间',width: '100px'},
|
{title:'装夹调试时间',width: '100px'},
|
{title:'首件切削时间',width: '100px'},
|
{title:'首件计量时间',width: '100px'},
|
{title:'末件拆卸时间',width: '100px'},
|
{title:'加工时间',width: '80px'},
|
{title:'准备时间',width: '80px'},
|
{title:'单件工时',width: '80px'},
|
{title:'数量',width: '60px'}
|
]
|
}
|
},
|
created() {
|
},
|
mounted() {
|
this.getTableData();
|
var idList = this.$route.query.ids.split(",");
|
idList.forEach(item=> {
|
this.detailModelList.push({id: item});
|
})
|
},
|
methods: {
|
exportBtn(item,index) {
|
var id = this.tableData[index - 1].id;
|
this.$HTTP.get(`/api/workinghour/export?id=${id}`).then(res => {
|
if (res.code == 200) {
|
this.$TOOL.downFile(res.data.link,res.data.originalName);
|
}
|
})
|
},
|
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(' ');
|
},
|
goFirstWorkProcess(item,index) {
|
var id = this.tableData[index - 1].id;
|
this.$router.push({path: `/mdc/first-workpiece-process`,query: {id}})
|
},
|
getTableData() {
|
this.$HTTP.post(`/api/workinghour/listByIds`, {ids: this.$route.query.ids.split(',')}).then(res => {
|
if (res.code === 200) {
|
res.data.forEach((item,index)=> {
|
item.index = index + 1;
|
})
|
// 使用 reduce 方法来构建新的数组
|
var newArray = res.data.reduce((acc, curr) => {
|
acc.push(curr); // 将当前对象添加到累积器中
|
acc.push({}); // 在当前对象后添加一个空对象
|
return acc;
|
}, []);
|
this.tableData = newArray;
|
//console.log(this.tableData,111)
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.tableOuter {
|
width: 100%;
|
overflow: hidden;
|
}
|
.tableAll {
|
overflow-x: scroll;
|
white-space: nowrap;
|
border: 1px solid #e4e7ed;
|
}
|
.tableHeader,.tableBody {
|
width:1470px;
|
border-top: 1px solid #e4e7ed;
|
display: flex;
|
}
|
.tableHeader span {
|
padding: 8px 12px;
|
display: inline-block;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: normal;
|
word-break: break-all;
|
line-height: 23px;
|
color: #909399;
|
font-weight: bold;
|
border-right: 1px solid #e4e7ed;
|
}
|
.tableBody span {
|
padding: 8px 12px;
|
display: inline-block;
|
white-space: normal;
|
word-break: break-all;
|
color: #909399;
|
border-right: 1px solid #e4e7ed;
|
}
|
.chartsDiv {
|
padding-bottom: 12px;
|
width: 100%;
|
padding-top: 12px;
|
padding-left: 12px;
|
padding-right: 12px;
|
}
|
.detailModel > div {
|
height: 32px;
|
display: flex;
|
align-items: center;
|
margin-bottom: 8px;
|
}
|
.detailModel > div > div:nth-child(1) {
|
margin-right:8px;
|
width: 80px;
|
}
|
.detailModel > div > div:nth-child(2) {
|
flex:1;
|
}
|
.detailModel {
|
padding-left: 16px;
|
padding-right: 12px;
|
padding-top: 6px;
|
padding-bottom: 6px;
|
margin-bottom: 12px;
|
border: 1px solid #e4e7ed;
|
border-radius: 4px;
|
width: 90%;
|
position: relative;
|
}
|
.detailModel:last-child {
|
margin-bottom: 0px;
|
}
|
.detailModel .modelBtn {
|
position: absolute;
|
top: 35%;
|
left: 100%;
|
margin-left:22px;
|
}
|
</style>
|
