1

lzhe

2024-04-25 a0d0246d2848e5b3f0fbb50c6d5cc28a1f5a37d2

 src/views/mdc/status-record.vue

@@ -47,11 +47,6 @@
</template>

<script>
// 模拟数据，表示每个小时的占用情况
var data = [];
for (var i = 0; i < 24; i++) {
    data.push(Math.random() * 100); // 随机生成占用指数
}
import moment from 'moment';
import MYTree from './MYTree.vue'
import Shift from './components/Shift.vue'
@@ -145,7 +140,9 @@
                    }
                },
                grid: {
                    top: 10
                    top: 10,
                    left: 70,
                    bottom: 120
                },
                yAxis: {
                    type: 'category',
@@ -161,8 +158,7 @@
                            }
                        }
                    },
                    //data: ['461', '462', '516', '517', '512', '513']
                    data: ['461', '462', '516']
                    data: ['123','345','789','888','666','222']
                },
                xAxis: {
                    type: 'value',
@@ -189,36 +185,55 @@
                        }
                    }
                },
                series: [
                    {
                        name: '辅助',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {
                            borderColor: 'transparent',
                            color: 'transparent'
                        },
                        emphasis: {
                            itemStyle: {
                                borderColor: 'transparent',
                                color: 'transparent'
                            }
                        },
                        data: [0, 0, 0, 240, 360, 540] //从什么时候开始的
                    },
                    {
                        name: '时间',
                        type: 'bar',
                        stack: '总量',
                        label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                        },
                        data: ['-', '-', '-', 1200, 240, 900]  //数值是几，如(20，就是从4开始，20格数据)
                    }
                ]
                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: []
                    // }
            }
        }
    },
@@ -271,37 +286,203 @@
        getCharts() {
            var obj = {
                //date: this.time[1],
                date: "2024-04-16",
                date: "2024-04-24",
                humanFeedback: true,
                machineFeedback: true,
                workstationInfoList: this.workstationInfoList
            }
            // var recordDom = document.getElementById('record');
            // var myChart = echarts.init(recordDom);
            // myChart.setOption(this.recordOptionLog);
            // return;
            this.$HTTP.post(`/api/blade-mdc/status-record/status-record-by-date?current=${this.current}&size=${this.size}`,obj).then(res => {
                if (res.code === 200) {
                    var yAxis = [];  //计算y轴数据
                    var seriesData = [];  //显示的数据
                    res.data.records.forEach(item=> {
                        yAxis.push(item.workstationInfo.name);
                        //计算开始时间，显示时间
                        item.statusRecordList.forEach(item1=> {
                            var endTime = item1.endTime;
                            var startTime = item1.startTime;
                            var initstart = item1.startTime.split(" ")[0];
                            item1.startMinutes = moment(item1.startTime).diff(moment(initstart + " 00:00:00"), 'minutes') //从什么时候开始
                            item1.diff = moment(item1.endTime).diff(moment(item1.startTime), 'minutes') //开始了多久
                        })
                    })
                    //demo
                    //计算最大的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轴数据
                    this.recordOptionLog.series = record;
                    console.log(this.recordOptionLog.yAxis.data,record)
                    myChart.setOption(this.recordOptionLog);
                    // 检查是否存在id为'parentNodeDom'的DOM元素,有就先删除
                    var parentNodeDom = document.getElementById('parentNodeDom');  
                    if (parentNodeDom) {   
                        parentNodeDom.parentNode.removeChild(parentNodeDom);  
                    }
                    this.domlocation();  //重新添加，计算位置
                    this.total = res.data.total;
                }
            })
        },
        domlocation() {
            var recordDom = document.getElementById('record');
            var myChart = echarts.init(recordDom);
            myChart.setOption(this.recordOptionLog);
            //添加dom，定位
            var parentNodeDom = document.createElement('div');
            parentNodeDom.id="parentNodeDom";
            recordDom.appendChild(parentNodeDom);
            for(var i=0;i<this.recordOptionLog.yAxis.data.length;i++) {
                var dom = document.createElement('span');
                dom.className = "domSpan spanIndex" + i;
                dom.style.top = i*70 + 40 + "px";
                if(this.recordOptionLog.yAxis.data.length == 1) {
                    dom.style.top = 220 + "px";  //定位top
                }
                if(this.recordOptionLog.yAxis.data.length == 2) {
                    if(i==0){
                        dom.style.top = 325 + "px";
                    }else if(i==1){
                        dom.style.top = 116 + "px";  //定位top
                    }
                }
                if(this.recordOptionLog.yAxis.data.length == 3) {
                    if(i==0){
                        dom.style.top = 360 + "px";
                    }else if(i==1){
                        dom.style.top = 220 + "px";  //定位top
                    }else if(i==2){
                        dom.style.top = 80 + "px";  //定位top
                    }
                }
                if(this.recordOptionLog.yAxis.data.length == 4) {
                    if(i==0){
                        dom.style.top = 377 + "px";
                    }else if(i==1){
                        dom.style.top = 272 + "px";  //定位top
                    }else if(i==2){
                        dom.style.top = 168 + "px";  //定位top
                    }else if(i==3){
                        dom.style.top = 62 + "px";  //定位top
                    }
                }
                if(this.recordOptionLog.yAxis.data.length == 5) {
                    if(i==0){
                        dom.style.top = 387 + "px";
                    }else if(i==1){
                        dom.style.top = 303 + "px";  //定位top
                    }else if(i==2){
                        dom.style.top = 220 + "px";  //定位top
                    }else if(i==3){
                        dom.style.top = 135 + "px";  //定位top
                    }else if(i==4){
                        dom.style.top = 51 + "px";  //定位top
                    }
                }
                if(this.recordOptionLog.yAxis.data.length == 6) {
                    if(i==0){
                        dom.style.top = 348 + "px";
                    }else if(i==1){
                        dom.style.top = 287 + "px";  //定位top
                    }else if(i==2){
                        dom.style.top = 225 + "px";  //定位top
                    }else if(i==3){
                        dom.style.top = 163 + "px";  //定位top
                    }else if(i==4){
                        dom.style.top = 102 + "px";  //定位top
                    }else if(i==5){
                        dom.style.top = 40 + "px";  //定位top
                    }
                }
                dom.style.left = recordDom.offsetLeft  + "px";  //定位left
                parentNodeDom.appendChild(dom);
            }
            //删除dom
            //parentNodeDom.remove();
            return;
            this.$HTTP.post(`/api/blade-mdc/status-record/status-record-by-date?current=${this.current}&size=${this.size}`,obj).then(res => {
                if (res.code === 200) {
                    //this.recordOptionLog.series[0].data = res.data.records.statusRecordList;
                    // var yAxis = [];
                    // res.data.records.forEach(item=> {
                    //     item.value = item.workstationInfo.name;
                    // })
                    // this.recordOptionLog.yAxis.data = res.data.records;
                    this.total = res.data.total;
                }
            })
        },
        init() {
            this.time = [moment().subtract(2, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')];
@@ -322,124 +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 {
    background: red;
    position: re    lative;
}
#record /deep/ .domSpan {
    display: inline-block;
    width: 60px;
    height: 20px;
    background: green;
    position: absolute;
    left: 55px;
}
    .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>