1

李喆(开发组)

2025-05-22 a08a8766a0526a08dca2842da01711b4152db540

 src/views/mdc/first-workpiece-detail.vue

@@ -2,54 +2,46 @@
 * @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: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 shadow="never" body-style="height: 100%;padding: 0;" style="margin-bottom: 12px;">
            <div class="detailModel" v-for="item in detailModelList">
                <div>
                    <div class="">零件名称</div><div><process-charts></process-charts></div>
                </div>
                <div>
                    <div>开始时间</div><div><process-charts></process-charts></div>
                </div>
                <div>
                    <div>结束时间</div><div><process-charts></process-charts></div>
                </div>
                <div>
                    <div>加工机床</div><div><process-charts></process-charts></div>
                </div>
                <div class="modelBtn">
                    <el-button type="primary" @click="goFirstWorkProcess">过程分析</el-button>
        <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-card body-style="height: 100%;padding: 0;" style="margin-bottom: 12px;">
            <el-table :data="tableData" border @selection-change="handleSelectionChange">
                <el-table-column prop="test" label="序号" width="60"></el-table-column>
                <el-table-column prop="test" label="零件号" width="80"></el-table-column>
                <el-table-column prop="test" label="工序号" width="80"></el-table-column>
                <el-table-column prop="test" label="版次" width="60"></el-table-column>
                <el-table-column prop="test" label="机床" width="60"></el-table-column>
                <el-table-column prop="test" label="开机时间" width="80"></el-table-column>
                <el-table-column prop="test" label="结束时间" width="80"></el-table-column>
                <el-table-column prop="test" label="占机时间" width="100"></el-table-column>
                <el-table-column prop="test" label="装夹调试时间" width="100"></el-table-column>
                <el-table-column prop="test" label="首件切削时间" width="100"></el-table-column>
                <el-table-column prop="test" label="首件切削时间" width="100"></el-table-column>
                <el-table-column prop="test" label="末件拆卸时间" width="100"></el-table-column>
                <el-table-column prop="test" label="首件计量时间" width="100"></el-table-column>
                <el-table-column prop="test" label="加工时间" width="80"></el-table-column>
                <el-table-column prop="test" label="准备时间" width="80"></el-table-column>
                <el-table-column prop="test" label="单件工时" width="80"></el-table-column>
                <el-table-column prop="test" label="数量" width="60"></el-table-column>
            </el-table>
            <el-footer>
                <el-button type="primary">输出</el-button>
            </el-footer>
        </el-card>
    </el-main>
</template>
@@ -68,29 +60,155 @@
    },
    data() {
        return {
            detailModelList: [{},{}],
            tableData: []
            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() {
        for(var i=0;i<10;i++) {
            this.tableData.push({test: 1})
        }
    },
    mounted() {
        this.getTableData();
        var idList = this.$route.query.ids.split(",");
        idList.forEach(item=> {
            this.detailModelList.push({id: item});
        })
    },
    methods: {
        handleSelectionChange() {

        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);
                }
            })
        },
        goFirstWorkProcess() {
            this.$router.push({path: `/mdc/first-workpiece-process`,query: {id:1}})
        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;