kgraph-ui/src/views/knowledge/test/index.vue

<template>
    <el-card>
        <el-row>故障进度</el-row>
        <el-table :data="visibleItems" style="background-color: transparent">
            <el-table-column label="机号" align="center" prop="airNumber" />
            <el-table-column label="机型" align="center" prop="airplaneModel" />
            <el-table-column label="专业" align="center" prop="major" />
            <el-table-column label="发现日期" align="center" prop="discoveryDate" />
            <el-table-column label="倒计时时间" align="center" prop="countDown">
                <template slot-scope="scope">
                    <span v-if="!scope.row ||scope.row.countDown > 15" style="color:green"> {{ scope.row ? scope.row.countDown : '' }} </span>
                    <span v-else-if="scope.row.countDown < 0" style="color:red"> {{ scope.row.countDown }} </span>
                    <span v-else style="color:yellow"> {{ scope.row.countDown }} </span>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>
  
<script>
export default {
    name: "BreakdownSchedule",
    data() {
        return {
            startIndex: 0,
            numItems: 3,
            breakdownList:[
                {
                    airNumber:1,
                    airplaneModel:1,
                    major:1,
                    discoveryDate:"2023-04-01",
                    countDown:1,
                },
                {
                    airNumber:2,
                    airplaneModel:2,
                    major:2,
                    discoveryDate:"2023-04-01",
                    countDown:2,
                },
                {
                    airNumber:3,
                    airplaneModel:3,
                    major:3,
                    discoveryDate:"2023-04-01",
                    countDown:3,
                },
                {
                    airNumber:4,
                    airplaneModel:4,
                    major:4,
                    discoveryDate:"2023-04-01",
                    countDown:4,
                },
                {
                    airNumber:5,
                    airplaneModel:5,
                    major:5,
                    discoveryDate:"2023-04-01",
                    countDown:5,
                },
            ],
        }
    },
    computed: {
        visibleItems() {
            let v = [];
            let itemsLength = this.breakdownList.length
            for (let i = 0; i < this.numItems; i++) {
                if ((i + this.startIndex) < itemsLength) {
                    v.push(this.breakdownList[i + this.startIndex])
                } else {
                    v.push(this.breakdownList[i + this.startIndex - itemsLength])
                }
            }
            return v

        }
    },
    mounted() {
        this.interval = setInterval(() => {
            this.startIndex++
            if (this.startIndex >= this.breakdownList.length) {
                this.startIndex = 0
            }
        }, 3000)
    },
    beforeDestroy() {
        clearInterval(this.interval)
    }
}
</script>
<style scoped>
.el-table {
    color:red
}
</style>