factory_web/src/components/scScrollTable.vue

<template>
    <el-container>
        <el-main>
            <div class="boxmain">
                <div class="wrapper" :id="'scrollWrapper' + refValue" @mouseover="mouseOver" @mouseout="mouseOut">
                    <table class="totall">
                        <tr class="title">
                            <th v-for="itemx in titleData" :key="itemx">{{ itemx }}</th>
                        </tr>
                    </table>
                    <div :id="refValue" :ref="`${refValue}`" style="overflow:scroll">
                        <div>
                            <table :class="{ marquee_top: animate }">
                                <tr v-for="(itemy, index) in rowData" class="rollData" ref="con1" :key="itemy">
                                    <td v-if="!noIndex">{{ index + 1 }}</td>
                                    <td v-for="itemz in itemy" :key="itemz">
                                        <el-progress v-if="itemz.elType == 'progress'" :text-inside="true"
                                            :stroke-width="14" :percentage="itemz.value" :status="getStatus(itemz.value)" />
                                        <el-tag v-else-if="itemz.elType == 'tag'" :type="getTagType(itemz.value)">{{
                                            stateOption[itemz.value] }}</el-tag>
                                        <span v-else>{{ itemz.value }}</span>
                                    </td>
                                </tr>
                            </table>
                            <table :class="{ marquee_top: animate }" v-show="scrollVivible">
                                <tr v-for="(itemy, index) in rowData" class="rollData" ref="con1" :key="itemy">
                                    <td v-if="!noIndex">{{ index + 1 }}</td>
                                    <td v-for="itemz in itemy" :key="itemz">
                                        <!-- <el-progress v-if="itemz.elType=='progress'" :text-inside="true" :stroke-width="14" :percentage="itemz.value"
                                        :status="getStatus(itemz.value)"/> -->
                                        <el-progress v-if="itemz.elType == 'progress'" :text-inside="true"
                                            :stroke-width="16" :percentage="itemz.value" :status="getStatus(itemz.value)">
                                            <span>{{ itemz.value }}</span>
                                        </el-progress>
                                        <el-tag v-else-if="itemz.elType == 'tag'" :type="getTagType(itemz.value)">{{
                                            stateOption[itemz.value] }}</el-tag>
                                        <span v-else>{{ itemz.value }}</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </el-main>
    </el-container>
</template>
<script>
export default {
    props: {
        noIndex: {
            type: Boolean,
            default: false
        },
        rowData: {
            type: Array,
            default() {
                return []
            }
        },
        titleData: {
            type: Array,
            default() {
                return []
            }
        },
        tableHeight: {
            type: Number,
            default() {
                return 100
            }
        },
        refValue: {
            type: String,
            default() {
                return ''
            }
        }
    },
    data() {
        return {
            speed: 2000,
            myScroll: null,
            iliHeight: 30,
            time: null,
            delay: 20,
            scrollVivible: true,
            stateOption: {
                10: "创建中",
                14: "已分解",
                20: "已下达",
                30: '生产中',
                40: '已完成',
                'q10': '完好',
                'q20': '限用',
                'q30': '在修',
                'q40': '禁用',
                'normal': '正常',
                'late': '迟到',
                '未到岗': '未到岗',
            },
        }
    },
    mounted() {
        let that = this;
        let Container = that.tableHeight;
        let tableHeight = Container - 40;
        let idName = 'scrollWrapper' + that.refValue;
        let idName2 = that.refValue;
        document.getElementById(idName).style.height = Container + 'px';
        document.getElementById(idName2).style.height = tableHeight + 'px';
        // console.log(this.$refs[`${this.refValue}`])
        let scrollHeight = that.$refs[`${that.refValue}`].scrollHeight / 2;
        if (tableHeight > scrollHeight) {
            that.scrollVivible = false;
        } else {
            that.scrollVivible = true;
            that.myScroll = setInterval(() => {
                that.scrollUp();
            }, that.speed);
        }
    },
    methods: {
        getTagType(type) {
            if (type == 30 || type == 10 || type == 14 || type == 20) {
                return ""
            } else if (type == 40) {
                return "success"
            } else if (type == 'normal') {
                return "success"
            } else if (type == 'late') {
                return "warning"
            } else if (type == '未到岗') {
                return "danger"
            }
        },
        getStatus(status) {
            if (status == 100) {
                return "success"
            } else if (status >= 80) {
                return "primary"
            } else if (status >= 60) {
                return "warning"
            } else {
                return "exception"
            }
        },

        scrollUp() {
            if (this.$refs[`${this.refValue}`] && this.$refs[`${this.refValue}`].scrollTop) {
                let scrollTop = this.$refs[`${this.refValue}`].scrollTop;
                let scrollHeight = this.$refs[`${this.refValue}`].scrollHeight;
                if (scrollTop >= scrollHeight / 2) {
                    //判断条件是否达到临界
                    this.$refs[`${this.refValue}`].scrollTop = 0;
                } else {
                    this.$refs[`${this.refValue}`].scrollTop = scrollTop + 40;
                }
            }

        },
        // 鼠标滑过暂停滚动
        mouseOver() {
            clearInterval(this.myScroll);
        },
        //鼠标移开重新滚动
        mouseOut() {
            this.myScroll = setInterval(() => {
                this.scrollUp();
            },
                this.speed);
        },
    },
    beforeUnmount() {
        let that = this;
        clearInterval(that.myScroll1);
        that.myScroll1 = null;
    },
    beforeDestoryed() {
        let that = this;
        clearInterval(that.myScroll1);
        that.myScroll1 = null;
    },
}
</script>
<style scoped>
.boxmain {
    height: calc(100% - 40px);
}

@media screen and (max-width: 800px) {
    .boxmain {
        height: 200px;
    }
}

table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
}

.title {
    height: 40px;
    line-height: 40px;
    text-align: center;
}

table th {
    font-size: 14px;
    background: rgba(0, 0, 0, .1);
}

table td {
    font-size: 14px;
    height: 40px;
    text-align: center;
    color: rgba(255, 255, 255, .8);
}

table th,
table td {
    padding: .1rem 0;
    border-bottom: none !important;
    background: none !important;
}

.marquee_top {
    transition: all 0.5s ease-in-out;
    margin-top: -26px;
}

.totall {
    color: #fff;
    background-color: rgb(10, 63, 68);
}

.rollData {
    background-color: rgb(10, 39, 50);
}

.rollData:nth-of-type(2n+1) {
    background-color: rgb(0, 59, 81);
}
</style>