CKQ/src/views/home/components/CheckWarnReport.vue

<template>
    <div class="item report">
        <div class="title">
            <span class="name">巡检预警汇报</span>
            <span class="number">{{total}}</span>
        </div>
        <div class="container">                
            <Vue3SeamlessScroll :list="items" class="scroll" hover>    
                <table>
                    <tr class="report-title">
                        <td>预警名称</td>
                        <td>状态</td>
                        <td>等级</td>
                        <td>时间</td>
                    </tr>                                    
                    <tr class="report-item" v-for="(item,index) in items" :key="index">
                        <td :title="item.hdangerTitle" style="max-width:200px;">{{ item.hdangerTitle }}</td>
                        <td :title="item.status">{{ dangerStatus(item.status)}}</td>
                        <td :title="item.level">{{ hdangerLevel(item.hdangerLevel) }}</td>
                        <td :title="item.time">{{ item.dangerDeadline }}</td>
                    </tr> 
                </table> 
            </Vue3SeamlessScroll>                      
        </div>
    </div> 
</template>
<script>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { getDangerByList } from '@/api/goaf/dangerApi'
export default {
    name:"CheckWarnReport",
    components:{
        Vue3SeamlessScroll,
    },
    data(){
        return{
            items:[],
            total:0
        }
    },
    created(){
        this.load()
    },
    methods:{
        dangerStatus(val) {
            const status = ['待提交', '待评审', '待整改', '待验收', '完成']
            return val === -1 ? '撤销' : status[val]
        },
        hdangerLevel(val){
            let status=['较低','一般','较大','重大']
            return status[val]
        },
        load(){
            getDangerByList({
                hdangerType:0
            }).then((res)=>{
                this.total=res.data.length
                this.items=res.data
            })
        }
    }
}
</script>