1

lzhe

2024-05-16 8bf6231abe66a69cabbae004529f9a29499f8dc2

1

 src/views/mdc/components/recordChartsByDate.vue

@@ -82,6 +82,16 @@
            })
            return color;
        },
        getStatus(name) {
            var stauts = {};
            this.achievements.forEach(item=> {
                if(item.code == name) {
                    stauts.name= item.name;
                    stauts.type= item.type;
                }
            })
            return stauts;
        },
        getCharts() {
            var obj = {
                date: this.date,
@@ -106,6 +116,8 @@
                            var color = this.getColor(item1.wcs);
                            item1.value = [index,startTime,endTime,diff];
                            item1.itemStyle = {"normal": {"color": color}};
                            item1.statusName = this.getStatus(item1.wcs).name;
                            item1.statusType = this.getStatus(item1.wcs).type;
                            item1.code = item.workstationInfo.code;
                            item1.name = item.workstationInfo.name;
                            item1.id = item.workstationInfo.id;
@@ -128,12 +140,18 @@
            var option = {
                tooltip: {
                    formatter: function (params) {
                        return `<span class="tipdesc">工位</span>${params.data.name}</br>
                            <span class="tipdesc">状态</span>${params.data.wcsDesc}</br>
                            <span class="tipdesc">描述</span>${params.data.feedbackDesc}</br>
                            <span class="tipdesc">状态时间</span>${params.data.startTime} ～ ${params.data.endTime}</br>
                            <span class="tipdesc">反馈时间</span>${params.data.feedbackTime}</br>
                            <span class="tipdesc">反馈人</span>${params.data.feedUser}</br>`;
                       if(params.data.statusType == 4) {
                            var dom = `<span class="tipdesc">工位:</span>${params.data.name}</br>
                                        <span class="tipdesc">状态:</span>${params.data.wcsDesc}</br>
                                        <span class="tipdesc">描述:</span>${params.data.feedbackDesc}</br>
                                        <span class="tipdesc">状态时间:</span>${params.data.startTime} ～ ${params.data.endTime}</br>
                                        <span class="tipdesc">反馈时间:</span>${params.data.feedbackTime}</br>
                                        <span class="tipdesc">反馈人:</span>${params.data.feedUser}</br>`
                       }else {
                            var dom = `<span class="tipstatus">${params.data.statusName}</span></br>
                                    <span class="tipdesc">时段:</span><span>${params.data.startTime.split(" ")[1]} ～ ${params.data.endTime.split(" ")[1]}</span></br>`
                       }
                        return dom;
                    }
                },
                grid: {
@@ -302,9 +320,10 @@
        position: absolute;
        cursor: pointer;
    }
    #record /deep/ .tipdesc {
    #record /deep/ .tipstatus {
        width: 100%;
        display: inline-block;
        width: 80px;
        border-bottom: 1px solid #eee;
    }
    .pagination {
        text-align: right;

 src/views/mdc/components/recordChartsByWorkstation.vue

@@ -74,6 +74,16 @@
            })
            return color;
        },
        getStatus(name) {
            var stauts = {};
            this.achievements.forEach(item=> {
                if(item.code == name) {
                    stauts.name= item.name;
                    stauts.type= item.type;
                }
            })
            return stauts;
        },
        getCharts() {
            if(!this.setWork) return;
            this.$HTTP.post(`/api/blade-mdc/status-record/status-record-by-workstation?current=${this.current}&size=${this.size}`,this.setWork).then(res => {
@@ -93,6 +103,8 @@
                            var color = this.getColor(item1.wcs);
                            item1.value = [index,startTime,endTime,diff];
                            item1.itemStyle = {"normal": {"color": color}};
                            item1.statusName = this.getStatus(item1.wcs).name;
                            item1.statusType = this.getStatus(item1.wcs).type;
                            item1.code = item.date;
                            item1.name = item.date;
                            item1.id = item.date;
@@ -109,12 +121,18 @@
            var option = {
                tooltip: {
                    formatter: function (params) {
                    return `<span class="tipdesc">工位</span>${params.data.name}</br>
                            <span class="tipdesc">状态</span>${params.data.wcsDesc}</br>
                            <span class="tipdesc">描述</span>${params.data.feedbackDesc}</br>
                            <span class="tipdesc">状态时间</span>${params.data.startTime} ～ ${params.data.endTime}</br>
                            <span class="tipdesc">反馈时间</span>${params.data.feedbackTime}</br>
                            <span class="tipdesc">反馈人</span>${params.data.feedUser}</br>`;
                       if(params.data.statusType == 4) {
                            var dom = `<span class="tipdesc">工位:</span>${params.data.name}</br>
                                        <span class="tipdesc">状态:</span>${params.data.wcsDesc}</br>
                                        <span class="tipdesc">描述:</span>${params.data.feedbackDesc}</br>
                                        <span class="tipdesc">状态时间:</span>${params.data.startTime} ～ ${params.data.endTime}</br>
                                        <span class="tipdesc">反馈时间:</span>${params.data.feedbackTime}</br>
                                        <span class="tipdesc">反馈人:</span>${params.data.feedUser}</br>`
                       }else {
                            var dom = `<span class="tipstatus">${params.data.statusName}</span></br>
                                    <span class="tipdesc">时段:</span><span>${params.data.startTime.split(" ")[1]} ～ ${params.data.endTime.split(" ")[1]}</span></br>`
                       }
                        return dom;
                    }
                },
                grid: {

 src/views/mdc/station-live.vue

@@ -2,7 +2,7 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-05-15 09:44:50
 * @LastEditTime: 2024-05-15 16:25:52
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -81,13 +81,21 @@
                            <div id="wcs-log" style="width: 100%;height:200px;"></div>
                            <el-table ref="multipleTableRef1" :data="recordData" border style="width: 100%;">
                                <el-table-column prop="shiftIndexName" label="班次"></el-table-column>
                                <el-table-column prop="temdata" label="调试"></el-table-column>
                                <el-table-column prop="temdata" label="离线"></el-table-column>
                                <el-table-column prop="temdata" label="待机"></el-table-column>
                                <el-table-column prop="temdata" label="报警"></el-table-column>
                                <el-table-column prop="temdata" label="运行"></el-table-column>
                                <el-table-column prop="oee" label="稼动率%"></el-table-column>
                                <el-table-column prop="perdata" label="报警率%"></el-table-column>
                                <el-table-column prop="5" label="调试"></el-table-column>
                                <el-table-column prop="4" label="离线"></el-table-column>
                                <el-table-column prop="3" label="待机"></el-table-column>
                                <el-table-column prop="1" label="报警"></el-table-column>
                                <el-table-column prop="2" label="运行"></el-table-column>
                                <el-table-column prop="oee" label="稼动率%">
                                    <template #default="scope">
                                        <span>{{(Number(scope.row.oee) * 100).toFixed(2)}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="perdata" label="报警率%">
                                    <template #default="scope">
                                        <span>{{(Number(scope.row.fault) * 100).toFixed(2)}}</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
@@ -240,20 +248,7 @@
                        type: 'category',
                        data: ['1', '2']
                    },
                    series: [
                        {	
                            name: 'wcsLog',  
                            type: 'bar',   
                            data: [],  
                            emphasis: {  
                                itemStyle: {  
                                    shadowBlur: 10,  
                                    shadowOffsetX: 0,  
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'  
                                }  
                            }  
                        }
                    ]
                    series: []
                },
                dmpList: [],
                stationForm: {
@@ -290,7 +285,9 @@
                    current: "1",
                    size: "15"
                },
                recordData: [] // 班次状态记录table
                records: [],
                recordData: [], // 班次状态记录table
                allwcs: []
            }
        },
        created(){
@@ -344,27 +341,109 @@
                }
                this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-table`,obj).then(res=> {
                    if(res.code == 200) {
                        var defaultValues = {  
                            oee: 0,  
                            fault: 0,  
                            '1': "00:00:00",  
                            '2': "00:00:00",  
                            '3': "00:00:00",  
                            '4': "00:00:00",  
                            '5': "00:00:00"  
                        };  
                        res.data.forEach(item=> {
                            item.temdata = "00:00:00";
                            item.perdata = "0";
                        })
                            Object.keys(defaultValues).forEach(key => {  
                                if (!item[key]) {  
                                item[key] = defaultValues[key];  
                                }  
                            });  
                        });
                        this.recordData = res.data;
                    }
                })
            },
            renderItem(params, api) {
                var categoryIndex = api.value(0);
                var start = api.coord([api.value(1), categoryIndex]);
                var end = api.coord([api.value(2), categoryIndex]);
                var height = api.size([0, 1])[1] * 0.6;
                var rectShape = echarts.graphic.clipRectByRect(
                    {
                        x: start[0],
                        y: start[1] - height / 2,
                        width: end[0] - start[0],
                        height: height
                    },
                    {
                        x: params.coordSys.x,
                        y: params.coordSys.y,
                        width: params.coordSys.width,
                        height: params.coordSys.height
                    }
                );
                return (
                        rectShape && {
                        type: 'rect',
                        transition: ['shape'],
                        shape: rectShape,
                        style: api.style()
                    }
                );
            },
            getColor(name) {
                var color = '';
                this.achievements.forEach(item=> {
                    if(item.code == name) {
                        color = item.color;
                    }
                })
                return color;
            },
            getStatus(name) {
                var stauts = {};
                this.allwcs.forEach(item=> {
                    if(item.code == name) {
                        stauts.name= item.name;
                        stauts.type= item.type;
                    }
                })
                return stauts;
            },
            getlogcart() {  //班次状态记录chart
                var obj = {
                    date: this.wcsDate,
                    //date: this.wcsDate,
                    date : "2024-05-15",
                    humanFeedback: true,
                    workstationId: this.lastLevelId
                }
                this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-table`,obj).then(res=> {
                this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-chart`,obj).then(res=> {
                    if(res.code == 200) {
                        var myChart = echarts.init(document.getElementById('wcs-log')); 
                        res.data.forEach(item => {
                            item.value = 0;
                        var yAxisData = [];
                        var newData = [];
                        this.records = res.data.reverse();
                        res.data.forEach((item,index)=> {
                            yAxisData.push(item.shiftIndex);
                            //计算开始时间，显示时间
                            if(item.statusRecordList == null) item.statusRecordList = [];
                            item.statusRecordList.forEach(item1=> {
                                var initstart = item1.startTime.split(" ")[0];  //根据日期计算差值
                                var startTime = moment(item1.startTime).diff(moment(initstart + " 00:00:00"), 'minutes');
                                var endTime = moment(item1.endTime).diff(moment(initstart + " 00:00:00"), 'minutes');
                                var diff = moment(item1.endTime).diff(moment(item1.startTime), 'minutes') //开始了多久
                                var color = this.getColor(item1.wcs);
                                item1.value = [index,startTime,endTime,diff];
                                item1.itemStyle = {"normal": {"color": color}};
                                item1.statusName = this.getStatus(item1.wcs).name;
                                item1.statusType = this.getStatus(item1.wcs).type;
                        })
                        this.wcsOptionLog.series[0].data = res.data;
                            newData.push(...item.statusRecordList);
                        })
                        //渲染图表
                        this.setCharts(yAxisData,newData);

                        var nowTime = moment().format("HH:mm:ss");  //11:37:54
                        var spaceTime = moment(obj.date + " " + nowTime).diff(moment(obj.date + " 00:00:00"), 'hours');  //离当天00:00:00过了多少小时
                        console.log(spaceTime,obj.date + " " + nowTime,234)
                        return;
                        //计算时间
                        var startOfDay = moment().startOf('day'); //00:00:00
                        var now = moment();  //当前时间
@@ -386,6 +465,88 @@
                        myChart.setOption(this.wcsOptionLog);
                    }
                })
            },
            setCharts(yAxisData,data) {
                var option = {
                    tooltip: {
                        formatter: function (params) {
                            if(params.data.statusType == 4) {
                                var dom = `<span class="tipdesc">工位:</span>${params.data.name}</br>
                                            <span class="tipdesc">状态:</span>${params.data.wcsDesc}</br>
                                            <span class="tipdesc">描述:</span>${params.data.feedbackDesc}</br>
                                            <span class="tipdesc">状态时间:</span>${params.data.startTime} ～ ${params.data.endTime}</br>
                                            <span class="tipdesc">反馈时间:</span>${params.data.feedbackTime}</br>
                                            <span class="tipdesc">反馈人:</span>${params.data.feedUser}</br>`
                            }else {
                                var dom = `<span class="tipstatus">${params.data.statusName}</span></br>
                                            <span class="tipdesc">时段:</span><span>${params.data.startTime.split(" ")[1]} ～ ${params.data.endTime.split(" ")[1]}</span></br>`
                            }
                            return dom;
                        }
                    },
                    grid: {
                        top: 10,
                        left: 70,
                        bottom: 120
                    },
                    xAxis: {
                        min: 0,
                        max: 1440,  // 单位分钟
                        interval: 1440/6,  //每隔多少分钟显示一个刻度
                        axisLabel: {
                            formatter: (value)=> {
                                console.log(value,111)
                                if(value == 0) {
                                    return "00:00:00";
                                }else if(value == 240) {
                                    return "04:00:00";
                                }else if(value == 480) {
                                    return "08:00:00";
                                }else if(value == 720) {
                                    return "12:00:00";
                                }else if(value == 960) {
                                    return "16:00:00";
                                }else if(value == 1200) {
                                    return "18:00:00";
                                }else if(value == 1440) {
                                    return "00:00:00";
                                }
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        axisLabel: {
                            formatter: function (value) {
                                return value;
                            },
                            rich: {
                                a: {
                                    color: '#409eff',
                                    cursor: 'pointer',
                                    fontSize: '12px'
                                }
                            }
                        },
                        data: yAxisData
                    },
                    series: [
                        {
                        type: 'custom',
                        renderItem: this.renderItem,
                        itemStyle: {
                            opacity: 0.8
                        },
                        encode: {
                            x: [1, 2],
                            y: 0
                        },
                        data: data
                        }
                    ]
                };
                var myChart = echarts.init(document.getElementById('wcs-log')); 
                myChart.setOption(option);
            },
            getwscLvalue() {
                var obj = {
@@ -477,6 +638,7 @@
                this.$HTTP.get(`/api/blade-cps/workstation/get-dmp-variables?machineId=${machineId}&workstationId=${lastLevelId}`).then(res=> {
                    if(res.code == 200) {
                        this.dmpList = res.data;
                        console.log(this.dmpList,111)
                    }
                })
            },
@@ -580,6 +742,7 @@
                        })
                        this.achievements = achievements;
                        this.collectionstatus = collectionstatus;
                        this.allwcs = res.data;
                    }
                })
            },
@@ -823,4 +986,9 @@
.status-wrap /deep/ .el-checkbox.el-checkbox--large {
    color: #409eff;
}
#record /deep/ .tipstatus {
    width: 100%;
    display: inline-block;
    border-bottom: 1px solid #eee;
}
</style>

 src/views/mdc/status-record.vue

@@ -42,7 +42,7 @@
                    <!-- collectionstatus 反馈状态
                    date 日期
                    workstationInfoList 工位list -->
                    <record-charts-by-date :achievements="achievements" :date="date" :workstationInfoList="workstationInfoList" v-if="achievements.length != 0"></record-charts-by-date>
                    <record-charts-by-date :achievements="allwcs" :date="date" :workstationInfoList="workstationInfoList" v-if="achievements.length != 0"></record-charts-by-date>
                </el-tab-pane>
                <el-tab-pane label="按工位查看" name="time">
                    <div class="fact-analysis-realtim">
@@ -72,7 +72,7 @@
                                </div>
                            </div>
                            <!-- setWork 入参 -->
                            <record-charts-by-workstation :setWork="setWork" :select="select" :achievements="achievements" v-if="!isshowempty"></record-charts-by-workstation>
                            <record-charts-by-workstation :setWork="setWork" :select="select" :achievements="allwcs" v-if="!isshowempty"></record-charts-by-workstation>
                        </div>
                    </div>
                    <save-dialog v-if="dialog.save" ref="saveDialog"  @success="addfeedbackSuccess" :workstationId="lastLevelId" @closed="dialog.save=false"></save-dialog>
@@ -154,7 +154,8 @@
            achievements: [],
            collectionstatus: [],
            workstationId: "",
            setWork: {}
            setWork: {},
            allwcs: []
        }
    },
    created() {
@@ -243,6 +244,7 @@
                    })
                    this.achievements = achievements;
                    this.collectionstatus = collectionstatus;
                    this.allwcs = res.data;
                }
            })
        },