1

lzhe

2024-11-24 ee064f855e289e00b0dd0056f4d468d388174d41

1

 src/config/route.js

@@ -110,6 +110,28 @@
            type: 'menu',
            hidden: true
        }
    },
    {
        name: "工时统计详情",
        path: "/mdc/first-workpiece-detail",
        component: "mdc/first-workpiece-detail",
        meta: {
            icon: "el-icon-menu",
            title: "工时统计详情",
            type: 'menu',
            hidden: true
        }
    },
    {
        name: "工时统计过程",
        path: "/mdc/first-workpiece-process",
        component: "mdc/first-workpiece-process",
        meta: {
            icon: "el-icon-menu",
            title: "过程分析",
            type: 'menu',
            hidden: true
        }
    }
]


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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,70 @@
<!--
 * @Date: 2024-04-18 21:52:18
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-20 23:37:09
 * @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>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            option: {
                // tooltip: {
                //     trigger: 'axis',
                //     axisPointer: {
                //         type: 'shadow'
                //     }
                // },
                grid: {
                    left: 20,
                    width: "100%"
                },
                xAxis: {
                    type: 'value',
                    min: 0,
                    max: 24, // æ ¹æ®éœ€è¦è°ƒæ•´æœ€å¤§å€¼
                    boundaryGap: [0, 0.01], // ç•™å‡ºä¸€ç‚¹ç©ºé—´
                },
                yAxis: {
                    type: 'category',
                    data: ['柱子'],
                    show: false
                },
                series: []
            }
        }
    },
    methods: {

    },
    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',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);
    },
}
</script>

<style lang="scss" scoped></style>


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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,127 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-04-26 09:36:18
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-11-22 18:45:06
 * @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>
                </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>

<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: []
        }
    },
    created() {
        for(var i=0;i<10;i++) {
            this.tableData.push({test: 1})
        }
    },
    mounted() {
    },
    methods: {
        handleSelectionChange() {

        },
        goFirstWorkProcess() {
            this.$router.push({path: `/mdc/first-workpiece-process`,query: {id:1}})
        }
    }
}
</script>

<style scoped>
    .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>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,59 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-04-26 09:36:18
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-11-22 18:45:06
 * @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;">
            <el-table :data="tableData" border @selection-change="handleSelectionChange">
                <el-table-column prop="test" label="程序名称"></el-table-column>
                <el-table-column prop="test" label="开机时间"></el-table-column>
                <el-table-column prop="test" label="结束时间"></el-table-column>
                <el-table-column prop="test" label="持续时长"></el-table-column>
                <el-table-column prop="test" label="状态"></el-table-column>
            </el-table>
            <el-footer>
                <el-button type="primary">输出</el-button>
            </el-footer>
        </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';
export default {
    components: {
        ...ElementPlusIconsVue
    },
    data() {
        return {
            tableData: []
        }
    },
    created() {
        for(var i=0;i<10;i++) {
            this.tableData.push({test: 1})
        }
    },
    mounted() {
    },
    methods: {
        handleSelectionChange() {

        }
    }
}
</script>

<style scoped>
    
</style>

 src/views/mdc/first-workpiece.vue

@@ -10,7 +10,7 @@
    <el-main style="height: 100%;" class="timeAnalysis">
        <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-aside width="300px" style="height: 100%;">
                    <el-container>
                        <el-main style="padding: 20px;">
                            <el-row>
@@ -30,19 +30,68 @@
                    <el-main style="position: relative;">
                        
                    </el-main>
                </el-container> -->
                <el-aside width="300px" style="height: 100%;">
                    <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.test"></el-input>
                          </el-form-item>
                          <el-form-item label="机序号">
                            <el-input v-model="searchInfo.test"></el-input>
                          </el-form-item>
                          <el-form-item label="开始时间">
                            <el-date-picker v-model="searchInfo.time" type="date" placeholder="选择日期"></el-date-picker>
                          </el-form-item>
                          <el-form-item label="结束时间">
                            <el-date-picker v-model="searchInfo.time" type="date" placeholder="选择日期"></el-date-picker>
                          </el-form-item>
                        </el-form>
                        <div style="text-align: center;"><el-button type="primary">主要按钮</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>
                        <el-table :data="tableData" border @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55"></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="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-main>
                    <el-footer>
                        <el-button type="primary" @click="goFirstWorkDetail">详情</el-button>
                        <el-button type="primary">输出</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)
@@ -55,15 +104,30 @@
    },
    data() {
        return {
            searchInfo: {
                test: "",
                time: ""
            },
            tabPosition: "设备结构树",
            tableData: [],
            treeChecked: []
        }
    },
    created() {
        
        var obj = {test:1}
        for(var i=0;i<10;i++) {
            this.tableData.push(obj);
        }
    },
    mounted() {
    },
    methods: {
        goFirstWorkDetail() {
            this.$router.push({path: `/mdc/first-workpiece-detail`,query: {id:1}})
        },
        handleSelectionChange(val) {
            console.log(val);
        },
        query() {
            
        }