Board / HH-board-2026 · Files

<template>
    <div class="order-progress-list">
        <div class="title-text">生成订单进度(当天)</div>
        <!-- <div v-for="(item, index) in dataList" :key="index" class="progress-item">
            <div class="order-id">{{ item }}</div>
            <div class="progress-bar-container">
                <el-progress :text-inside="true" :stroke-width="17" :percentage="70" text-color="#fff"></el-progress>
            </div>
            <div class="status-info">
                总订单/完成 11/22
            </div>
        </div> -->
        <div style="height: 90%;" class="table-container">
            <vxe-table class="custom-row-height-table" border="none" ref="xTable" empty-text=" " :show-header="false"
                height="100%" :data="dataList">
                <vxe-column field="name1"></vxe-column>
                <vxe-column field="name2">
                    <template #default="{ row }">
                        <el-progress :text-inside="true" :stroke-width="16" :percentage="70"
                            text-color="#fff"></el-progress>
                    </template>
                </vxe-column>
                <vxe-column field="name3">
                    <template #default="{ row }">
                        1233
                    </template>
                </vxe-column>
            </vxe-table>
        </div>
    </div>
</template>

<!--趋势图-->
<script>
// import { warehouseHealthOption } from '../../public/static/echartsConfig'
export default {
    data() {
        return {
            // 各自动仓库状况
            baseUrlOff: 'http://127.0.0.1:6001/api/BulletinBoard/Mes/V1/ReadData5',
            baseUrlOnLine: window.appConfig.baseUrlOnLine5,

            sysData: {
                getwarehouseHealth: null,
            },
            dataList: [{ name1: 'CFW222011544' }, { name1: 'CFW222011545' }, { name1: 'CFW222011546' }, { name1: 'CFW222011547' }, { name1: 'CFW222011548' }, { name1: 'CFW222011549' }, { name1: 'CFW222011550' }, { name1: 'CFW222011551' }, { name1: 'CFW222011552' }, { name1: 'CFW222011553' }, { name1: 'CFW222011554' }, { name1: 'CFW222011555' }],
            tempEcharts: [
                { name: 'SRM32', index: null },
                { name: 'SRM31', index: null },
                { name: 'SRM21', index: null },
                { name: 'SRM11', index: null },
                { name: 'SRM41', index: null },
                { name: 'SRM11_PLCHeatBeat', index: null },
                { name: 'SRM21_PLCHeatBeat', index: null },
                { name: 'SRM31_PLCHeatBeat', index: null },
                { name: 'SRM32_PLCHeatBeat', index: null },
                { name: 'SRM41_PLCHeatBeat', index: null },
            ],
            getwarehouseHealth: null,
            warehouseHealthOption: warehouseHealthOption,
            warehouseHealthOption2: warehouseHealthOption2,
            info: {
                CutQuantity: 0,
                PipeQuantity: 0
            },
            autoScrollTimer: null,
        }
    },
    methods: {
        // 中间柱状图
        getData() {
            let opt = {
                urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLine : this.baseUrlOff,
                logTitle: '中间柱状图',
                isUrlALL: true,
                headers: window.baseOnLineOrOff,
                // header: window.baseOnLineOrOff,
            }
            let callBackFn = (res) => {
                if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return
                this.sysData.getwarehouseHealth = res.data.data
                // this.dataAnalysis(res.data.data)
                this.getwarehouseHealthbar(res.data.data)
            }
            ''.ajax(this, opt, callBackFn)
        },
        dataAnalysis(data) {
            //获取数据下标，用于数据对应name渲染
            data.x.forEach((x, index) => {
                if (x == 'SRM32') {
                    this.tempEcharts[0].index = index
                }
                if (x == 'SRM31') {
                    this.tempEcharts[1].index = index
                }
                if (x == 'SRM21') {
                    this.tempEcharts[2].index = index
                }
                if (x == 'SRM11') {
                    this.tempEcharts[3].index = index
                }
                if (x == 'SRM41') {
                    this.tempEcharts[4].index = index
                }
                if (x == 'SRM11_PLCHeatBeat') {
                    this.tempEcharts[5].index = index
                }
                if (x == 'SRM21_PLCHeatBeat') {
                    this.tempEcharts[6].index = index
                }
                if (x == 'SRM31_PLCHeatBeat') {
                    this.tempEcharts[7].index = index
                }
                if (x == 'SRM32_PLCHeatBeat') {
                    this.tempEcharts[8].index = index
                }
                if (x == 'SRM41_PLCHeatBeat') {
                    this.tempEcharts[9].index = index
                }
            })
        },
        // 中间柱状图
        getwarehouseHealthbar(rawData) {
            const dates = rawData.map(item => item.CurryDate);
            const quantities = rawData.map(item => item.Quantity);
            let myChart = this.$echarts.init(document.getElementById('warehouseHealth'))
            this.warehouseHealthOption.xAxis.data = dates
            this.warehouseHealthOption.series[0].data = quantities
            myChart.clear()
            myChart.setOption(this.warehouseHealthOption)
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        },
        getwarehouseHealthbar2(rawData) {
            let data = this.sortedData(rawData);
            const dates = data.map(item => item.CurryDate);
            const quantities = data.map(item => item.Quantity);
            let myChart2 = this.$echarts.init(document.getElementById('warehouseHealth2'))
            this.warehouseHealthOption2.xAxis.data = this.monthDayDates(dates)
            this.warehouseHealthOption2.series[0].data = quantities
            myChart2.clear()
            myChart2.setOption(this.warehouseHealthOption2)
            window.addEventListener('resize', () => {
                myChart2.resize();
            });
        },
        setInfo(data) {
            this.info = data;
        },
        sortedData(data) {
            return data.slice().sort((a, b) => {
                return new Date(a.CurryDate) - new Date(b.CurryDate); // 升序：早 → 晚
                // return new Date(b.CurryDate) - new Date(a.CurryDate); // 降序：晚 → 早
            });
        },
        monthDayDates(data) {
            return data.map(date => {
                const [year, month, day] = date.split('-');
                return `${month}-${day}`;
            });
        },
        ajaxSuccessDataBefore(res, title) {
            if (res.data == null || res.data.data.length == 0) {
                ''.Log(title + '无数据', 'getData')
                return false
            }
            return true
        },
        startAutoScroll() {
            this.stopAutoScroll(); // 防止重复启动
            this.autoScrollTimer = setInterval(() => {
                const table = this.$refs.xTable;
                if (!table) return;

                // 尝试不同的选择器来找到滚动元素
                let bodyElem = table.$el.querySelector('.vxe-table--body-wrapper');
                if (!bodyElem) {
                    bodyElem = table.$el.querySelector('.vxe-body');
                }
                if (!bodyElem) {
                    bodyElem = table.$el.querySelector('.vxe-table--body');
                }
                if (!bodyElem) return;

                // 每次滚动 1px
                bodyElem.scrollTop += 1;

                // 计算滚动位置和容器高度
                const scrollTop = bodyElem.scrollTop;
                const scrollHeight = bodyElem.scrollHeight;
                const clientHeight = bodyElem.clientHeight;
                const bottomPosition = scrollHeight - clientHeight;

                // 如果接近底部（留有10px的缓冲区），重置到顶部（循环滚动）
                if (scrollTop >= bottomPosition - 10) {
                    bodyElem.scrollTop = 0; // 循环滚动
                }
            }, 50); // 速度：数值越小越快
        },
        stopAutoScroll() {
            if (this.autoScrollTimer) {
                clearInterval(this.autoScrollTimer);
                this.autoScrollTimer = null;
            }
        }
    },
    mounted() {
        // this.getData()
        // const item = {
        //     x: ['1号堆垛机', '1号RGV', '2号RGV'],
        //     running: [50, 40, 44],
        //     free: [49, 59, 55],
        //     error: [1, 1, 0.9],
        // }
        // this.getwarehouseHealthbar(item)
        this.startAutoScroll();
    },
    beforeDestroy() {
        this.stopAutoScroll();
    },
}
</script>

<style lang="less" scoped>
.order-progress-list {
    width: 100%;
    height: 100%;
    // background-color: #0a1428;
    color: #fff;
    font-size: 1vw;
}

.progress-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #1e3a5f;
    height: 8%;

    &:last-child {
        border-bottom: none;
    }
}

.order-id {
    // flex: 1;
    width: 25%;
    padding-right: 0px;
    text-align: center;

}

.progress-bar-container {
    // flex: 2;
    width: 35%;
    position: relative;
    text-align: center;
    // height: 20px;
    // overflow: hidden;
    margin: 0 10px;
}

.progress-bar {
    height: 100%;
    transition: width 0.3s ease;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
    pointer-events: none;
}

.status-info {
    // flex: 1;
    width: 40%;
    // text-align: right;
    color: #67c8fb;
}

.title-text {
    width: 100%;
    height: 2vh;
    font-size: 2vh;
    font-weight: 600;
    color: #fff;
    text-align: left;
    padding-left: 1vw;
}

::v-deep .vxe-table--render-default .vxe-table--body-wrapper>table {
    background-color: transparent;
}

::v-deep .vxe-table--render-wrapper {
    background-color: transparent;
}

::v-deep .vxe-table--render-default {
    color: #fff;
    font-size: 1vw;
}

.table-container {
    height: 90%;
    overflow: hidden; // 隐藏容器的溢出内容
}

.custom-row-height-table {
    --vxe-ui-table-row-height-default: 6vh;
    --vxe-ui-table-column-padding-default: 1vh;
}

::v-deep .table-container .vxe-table--body-wrapper {
    overflow-y: auto !important;
}

// 隐藏滚动条但保留滚动功能
::v-deep .table-container .vxe-table--body-wrapper::-webkit-scrollbar {
    display: none;
}

::v-deep .table-container .vxe-table--body-wrapper {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
</style>