1

lzhe

2024-12-01 2ec3250c83921ba91836ef8af129a74fef9d3c6a

1

 src/views/mdc/components/process-charts.vue

@@ -5,21 +5,24 @@
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/TimeAlarm.vue
-->
<template>
    <div ref="processCharts" style="width: 100%;height:32px;" id="record"></div>
    <div ref="processCharts" style="width: 100%;height:40px;" id="record"></div>
</template>

<script>
import * as echarts from 'echarts';
import T from '@/components/scEcharts/echarts-theme-T.js';
import moment from 'moment'
export default {
    data() {
        return {
            option: {
                // tooltip: {
                //     trigger: 'axis',
                //     axisPointer: {
                //         type: 'shadow'
                //     }
                // },
                tooltip: {
                    position: ['50%','50%']
                    // trigger: 'axis',
                    // axisPointer: {
                    //     type: 'shadow'
                    // }
                },
                grid: {
                    left: 0,
                    right: 0,
@@ -27,8 +30,7 @@
                },
                xAxis: {
                    type: 'value',
                    min: 0,
                    max: 24, // 根据需要调整最大值
                    interval: 0.05,
                    axisLabel: {
                        show: false,
                        margin: 0
@@ -44,41 +46,66 @@
                    },
                    axisTick: {
                        show: false
                    },
                    boundaryGap: false, // 留出一点空间
                    }
                    // "type": "value",
                    // "interval": 0.05,
                    // "axisLabel": {

                    // }
                },
                yAxis: {
                    type: 'category',
                    data: ['柱子'],
                    data: [''],
                    show: false
                },
                series: []
            }
        }
    },
    props: ['index','tableData'],
    methods: {

        getTableData(id) {
            this.$HTTP.get(`/api/workinghour/working-process`, {id}).then(res => {
                if (res.code === 200) {
                    if(res.data.length == 0) return;
                    var timeRange = {};
                    console.log(res.data,1111111)
                    timeRange.startTime = res.data[0].startTime;
                    timeRange.endTime = res.data[res.data.length - 1].endTime;
                    var total = Math.abs(moment(timeRange.startTime).diff(moment(timeRange.endTime)));
                    var start = timeRange.startTime;
                    var arr = [];
                    res.data.map((item, i) => {
                        var current = Math.abs(moment(start).diff(moment(item.endTime)))
                        start = item.endTime;
                        //console.log(current / total,'百分比')
                        if(item.deviceStatus == "2") {
                            item.deviceStatusName = "运行";
                            item.color = "#307f45";
                        }else {
                            item.deviceStatusName = "待机";
                            item.color = "#fdff85";
                        }
                        var obj = {name: item.deviceStatusName,type: 'bar',stack: 'total',barWidth: "20px",data: [current / total],itemStyle: {color: item.color},"tooltip": {
                                "show": true,
                                "trigger": "item",
                                formatter: (value, ticket) => {
                                    return `${item.deviceStatusName}: ${item.startTime} - ${item.endTime}`
                                }
                        }};
                        arr.push(obj);
                    })
                    this.option.series = arr;
                    var recordDom = this.$refs.processCharts;
                    var myChart = echarts.init(recordDom);
                    myChart.setOption(this.option);
                }
            })
        }
    },
    mounted() {
        // this.option.series = [
        //     {name: '空闲时间',type: 'bar',stack: 'total',itemStyle: {color: '#fdff85'},data: [2]},
        //     {name: '工作时间',type: 'bar',stack: 'total',itemStyle: {color: '#307f45'},data: [3]}
        // ]
        var arr = [];
        for(var i=0;i<24;i++) {
            var obj = {name: '空闲时间',type: 'bar',stack: 'total',barCategoryGap: '0',barGap: '-100%',itemStyle: {color: '#fdff85'},data: [1]};
            if(Math.random() >= 0.5) {
                obj.itemStyle.color = "#fdff85";
            }else {
                obj.itemStyle.color = "#307f45";
            }
            arr.push(obj)
        }
        this.option.series = arr;
        //console.log(this.option.series)
        var recordDom = this.$refs.processCharts;
        var myChart = echarts.init(recordDom);
        myChart.setOption(this.option);
        var id = this.tableData[this.index - 1].id;
        this.getTableData(id);
    },
}
</script>

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

@@ -8,76 +8,39 @@
-->
<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(item)">过程分析</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>
                            </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>
                <el-table-column prop="index" label="序号" width="60"></el-table-column>
                    <el-table-column prop="partNo" label="零件号" width="80"></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>
            <el-footer>
                <el-button type="primary">输出</el-button>
            </el-footer>
@@ -100,7 +63,25 @@
    data() {
        return {
            detailModelList: [],
            tableData: []
            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() {
@@ -155,8 +136,9 @@
            // 返回格式化后的字符串
            return result.join(' ');
        },
        goFirstWorkProcess(item) {
            sthis.$router.push({path: `/mdc/first-workpiece-process`,query: {id:item.id}})
        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 => {
@@ -164,7 +146,14 @@
                    res.data.forEach((item,index)=> {
                        item.index = index + 1;
                    })
                    this.tableData = res.data;
                    // 使用 reduce 方法来构建新的数组
                    var newArray = res.data.reduce((acc, curr) => {
                      acc.push(curr); // 将当前对象添加到累积器中
                      acc.push({}); // 在当前对象后添加一个空对象
                      return acc;
                    }, []);
                    this.tableData = newArray;
                    //console.log(this.tableData,111)
                }
            })
        }
@@ -173,6 +162,47 @@
</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;

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

@@ -64,7 +64,7 @@
                        })
                    })
                    this.tableData = res.data;
                    console.log(res.data,111)
                    console.log(JSON.stringify(res.data),111)
                }
            })
        },

 src/views/mdc/processParam/index.vue

@@ -325,7 +325,6 @@
                    showPie: false
                })
            }

        },
        setDeviceStatusOptions(data, myname) {
            debugger