1

lzhe

2024-04-25 a0d0246d2848e5b3f0fbb50c6d5cc28a1f5a37d2

1

 src/views/mdc/status-record.vue

@@ -185,56 +185,55 @@
                        }
                    }
                },
                series: [
                    {
                        name: '辅助',
                        type: 'bar',
                        stack: 'grouup',
                        itemStyle: {
                            borderColor: 'transparent',
                            color: 'transparent'
                        },
                        emphasis: {
                            itemStyle: {
                            borderColor: 'transparent',
                            color: 'transparent'
                            }
                        },
                        data: [{value:100}, {value:0}, {value:0}, {value:240}, {value:360}, {value:540}] //从什么时候开始的
                        //data: []
                    },
                    {
                        name: 'time',
                        type: 'bar',
                        stack: 'grouup',
                        data: [{value: 200}, {value: null}, {value: null}, {value:1200}, {value:240}, {value:900}]  //数值是几，如(20，就是从4开始，20格数据)
                        //data: []
                    },
                    {
                        name: '辅助',
                        type: 'bar',
                        stack: 'grouup',
                        itemStyle: {
                            borderColor: 'transparent',
                            color: 'transparent'
                        },
                        emphasis: {
                            itemStyle: {
                            borderColor: 'transparent',
                            color: 'transparent'
                            }
                        },
                        data: [{value:400}, {value:null}, {value:null}, {value:null}, {value:10}, {value:null}] //从什么时候开始的
                        //data: []
                    },
                    {
                        name: 'time',
                        type: 'bar',
                        stack: 'grouup',
                        data: [{value: 45}, {value: null}, {value: null}, {value:null}, {value:32}, {value:null}]  //数值是几，如(20，就是从4开始，20格数据)
                        //data: []
                    }
                ]
                series: []
                    // {
                    //     name: '辅助',
                    //     type: 'bar',
                    //     stack: 'grouup',
                    //     itemStyle: {
                    //         borderColor: 'transparent',
                    //         color: 'transparent'
                    //     },
                    //     emphasis: {
                    //         itemStyle: {
                    //         borderColor: 'transparent',
                    //         color: 'transparent'
                    //         }
                    //     },
                    //     data: [{value:100}, {value:0}, {value:0}, {value:240}, {value:360}, {value:540}] //从什么时候开始的
                    //     //data: []
                    // },
                    // {
                    //     name: 'time',
                    //     type: 'bar',
                    //     stack: 'grouup',
                    //     data: [{value: 200}, {value: null}, {value: null}, {value:1200}, {value:240}, {value:900}]  //数值是几，如(20，就是从4开始，20格数据)
                    //     //data: []
                    // },
                    // {
                    //     name: '辅助',
                    //     type: 'bar',
                    //     stack: 'grouup',
                    //     itemStyle: {
                    //         borderColor: 'transparent',
                    //         color: 'transparent'
                    //     },
                    //     emphasis: {
                    //         itemStyle: {
                    //         borderColor: 'transparent',
                    //         color: 'transparent'
                    //         }
                    //     },
                    //     data: [{value:400}, {value:null}, {value:null}, {value:null}, {value:10}, {value:null}] //从什么时候开始的
                    //     //data: []
                    // },
                    // {
                    //     name: 'time',
                    //     type: 'bar',
                    //     stack: 'grouup',
                    //     data: [{value: 45}, {value: null}, {value: null}, {value:null}, {value:32}, {value:null}]  //数值是几，如(20，就是从4开始，20格数据)
                    //     //data: []
                    // }
            }
        }
    },
@@ -310,60 +309,99 @@
                            item1.startMinutes = moment(item1.startTime).diff(moment(initstart + " 00:00:00"), 'minutes') //从什么时候开始
                            item1.diff = moment(item1.endTime).diff(moment(item1.startTime), 'minutes') //开始了多久
                        })
                        // var data1 = [];
                        // var data2 = [];
                        //计算显示的数据
                        // item.statusRecordList.forEach(item2=> {
                        //     seriesData.push({
                        //         name: '辅助',
                        //         type: 'bar',
                        //         stack: 'grouup',
                        //         itemStyle: {
                        //             borderColor: 'transparent',
                        //             color: 'transparent'
                        //         },
                        //         emphasis: {
                        //             itemStyle: {
                        //             borderColor: 'transparent',
                        //             color: 'transparent'
                        //             }
                        //         },
                        //         data: [{value:item.startMinutes}, {value:0}, {value:0}, {value:240}, {value:360}, {value:540}] //从什么时候开始的
                        //     })
                        //     arr.push({
                        //         name: 'time',
                        //         type: 'bar',
                        //         stack: 'grouup',
                        //         data: [{value: item.diff}, {value: null}, {value: null}, {value:1200}, {value:240}, {value:900}]  //数值是几，如(20，就是从4开始，20格数据)
                        //     })
                        //})
                    })
                    //demo
                    // var data = [];
                    // var vb = a[0].statusRecordList;
                    // vb.forEach((item,index)=> {
                    //     if(index == 0) {
                    //         data.push({value: item.startMinutes}); //幕布
                    //     }else {
                    //         data.push({value: item.startMinutes - (vb[index-1].startMinutes+vb[index-1].diff)}); //幕布
                    //     }
                    //     data.push({value: item.diff});  //内容
                    // })
                    // data;
                    //计算最大的length
                    var ln = [],maxln = 0;
                    res.data.records.forEach(item=> {
                        ln.push(item.statusRecordList.length);
                    })
                    maxln = ln.sort().reverse()[0];
                    function bq(arr) {  //补全
                        // 确保每个对象都有value属性  
                        arr.forEach(item => {  
                            if (!item.value) {  
                                item.value = null;  
                            }  
                        });  
                        // 补全数组  
                        while (arr.length < maxln) {  
                            arr.push({value: null});  
                        } 
                        return arr;
                    }
                    function getdata(arr) {  //做数据
                        var data = [];
                        for(var i=0;i<maxln;i++) {
                            if(i == 0) {
                                data.push([{value: arr[i].startMinutes || null}]); //幕布
                            }else {
                                data.push([{value: (arr[i].startMinutes - (arr[i-1].startMinutes+arr[i-1].diff) || null)}]); //幕布
                            }
                            data.push([{value: arr[i].diff || null,name: 'time'}]);  //内容
                        }
                        return data;
                    }
                    function hebing(arr) {
                        // 合并后的数组，初始化为空数组  
                        var mergedArray = [];  
                        // 遍历每个索引位置  
                        for (let i = 0; i < maxln*2; i++) {  
                            // 初始化当前位置的对象数组  
                            var currentMerged = [];  
                            // 遍历每个要合并的数组  
                            arr.forEach(arr => {  
                                // 尝试获取当前数组在该位置的对象，如果不存在则添加一个包含value: null的对象  
                                var obj = arr[i] && arr[i][0] || {value: null};  
                                currentMerged.push(obj);  
                            });  
                            // 将当前位置的对象数组添加到合并后的数组中  
                            mergedArray.push(currentMerged);  
                        }
                        return mergedArray;
                    }
                    var everyArr = [];
                    res.data.records.forEach((item,index)=> {
                        everyArr.push(getdata(bq(item.statusRecordList)))
                    })
                    console.log(everyArr,hebing(everyArr))
                    return;
                    //最后处理
                    var record = [];
                    hebing(everyArr).forEach((item,index)=> {
                        if(index%2 == 0) {
                            record.push({
                                name: '辅助',
                                type: 'bar',
                                stack: 'grouup',
                                itemStyle: {
                                    borderColor: 'transparent',
                                    color: 'transparent'
                                },
                                emphasis: {
                                    itemStyle: {
                                    borderColor: 'transparent',
                                    color: 'transparent'
                                    }
                                },
                                data: item
                            })
                        }else {
                            record.push({
                                name: 'time',
                                type: 'bar',
                                stack: 'grouup',
                                data: item
                            })
                        }
                    })
                    //end

                    var recordDom = document.getElementById('record');
                    var myChart = echarts.init(recordDom);
                    this.recordOptionLog.yAxis.data = yAxis;  //y轴数据
                    var series0data = [];  //从什么时候开始的
                    var series1data = [];  //数值是几，如(20，就是从4开始，20格数据)
                    console.log(JSON.stringify(res.data.records))
                    // res.data.records.forEach(item=> {
                    //     item.statusRecordList.forEach(item1=> {

                    //     })
                    // })

                    this.recordOptionLog.series = record;
                    console.log(this.recordOptionLog.yAxis.data,record)
                    myChart.setOption(this.recordOptionLog);
                    // 检查是否存在id为'parentNodeDom'的DOM元素,有就先删除
                    var parentNodeDom = document.getElementById('parentNodeDom');  
@@ -465,123 +503,123 @@
</script>

<style scoped>
.aposcope-main {
    display: flex;
    min-height: 100%;
    height: 100%;
    overflow: hidden;
    margin: 8px;
}
.aposcope-left {
    position: relative;
    width: 240px;
    margin-right: 8px;
    padding: 4px;
    height: 100%;
    background-color: #fff;
    border-radius: 2px;
    overflow: hidden;
}
.aposcope-right {
    flex: 1;
    padding: 8px;
    background-color: #fff;
}
.left-title {
    font-size: 16px;
    text-align: center;
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #e2e2e2;
    background-color: #409eff;
    color: #fff;
    border-radius: 2px 2px 0 0;
}
.left-title-col {
    margin-bottom: 8px;
    font-size: 14px;
    margin-top: 8px;
}
.footer {
    padding: 0px 32px;
    border-radius: 0 0 2px 2px;
    background: #fff;
    box-shadow: -1px 0 3px rgba(92, 92, 92, .16);
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    z-index: 99;
}
.MYTree {
    height: calc(100% - 200px);
    overflow: hidden;
    overflow-y: auto;
}
.status {
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: start;
    margin: 20px 0 8px;
    position: relative;
    width: 100%;
    font-size: 16px;
    cursor: pointer;
}
.status-wrap.align-left, .status-wrap:first-child {
    padding-left: 24px;
}
.status-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}
.collect-status {
    color: #409eff;
    margin-right: 16px;
    font-size: 14px;
}
.status-box {
    margin: 0 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.status-color {
    width: 40px;
    height: 15px;
    border-radius: 2px;
    margin-right: 8px;
}
.status-wrap .status-con {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
}
.status-wrap /deep/ .el-checkbox.el-checkbox--large {
    color: #3b8e8e;
}
.pagination {
    text-align: right;
    display: flex;
    justify-content: end;
}
#record {
    position: relative;
}
#record /deep/ .domSpan {
    display: inline-block;
    width: 70px;
    height: 20px;
    background: green;
    position: absolute;
    cursor: pointer;
}
    .aposcope-main {
        display: flex;
        min-height: 100%;
        height: 100%;
        margin: 8px;
    }
    .aposcope-left {
        position: relative;
        width: 240px;
        margin-right: 8px;
        padding: 4px;
        height: 100%;
        background-color: #fff;
        border-radius: 2px;
        overflow: hidden;
    }
    .aposcope-right {
        flex: 1;
        padding: 8px;
        background-color: #fff;
    }
    .left-title {
        font-size: 16px;
        text-align: center;
        height: 38px;
        line-height: 38px;
        border-bottom: 1px solid #e2e2e2;
        background-color: #409eff;
        color: #fff;
        border-radius: 2px 2px 0 0;
    }
    .left-title-col {
        margin-bottom: 8px;
        font-size: 14px;
        margin-top: 8px;
    }
    .footer {
        padding: 0px 32px;
        border-radius: 0 0 2px 2px;
        background: #fff;
        box-shadow: -1px 0 3px rgba(92, 92, 92, .16);
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        z-index: 99;
    }
    .MYTree {
        height: calc(100% - 200px);
        overflow: hidden;
        overflow-y: auto;
    }
    .status {
        display: flex;
        align-items: start;
        flex-direction: column;
        justify-content: start;
        margin: 20px 0 8px;
        position: relative;
        width: 100%;
        font-size: 16px;
        cursor: pointer;
    }
    .status-wrap.align-left, .status-wrap:first-child {
        padding-left: 24px;
    }
    .status-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
    }
    .collect-status {
        color: #409eff;
        margin-right: 16px;
        font-size: 14px;
    }
    .status-box {
        margin: 0 8px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .status-color {
        width: 40px;
        height: 15px;
        border-radius: 2px;
        margin-right: 8px;
    }
    .status-wrap .status-con {
        display: flex;
        flex: 1;
        flex-wrap: wrap;
    }
    .status-wrap /deep/ .el-checkbox.el-checkbox--large {
        color: #3b8e8e;
    }
    .pagination {
        text-align: right;
        display: flex;
        justify-content: end;
    }
    #record {
        position: relative;
        margin-bottom: 120px;
    }
    #record /deep/ .domSpan {
        display: inline-block;
        width: 70px;
        height: 20px;
        background: green;
        position: absolute;
        cursor: pointer;
    }
</style>