bonus-ui/src/views/screen/cityScreen-old/components/maintenance/index.vue

<template>
    <div class="content">
        <div class="content-title">
            <div class="title">
                维保预警
            </div> 
        </div>
        <div class="content-view">
            <div style="width: 100%;height: 12%;display: flex;align-items: center;justify-content: center;">
                <img src="../../../../../assets/cityScreen/icon1.png" class="icon" />
                <span class="text" style="">装备预警总数:</span>
                <span class="num">{{totalNum}}</span>
                <span class="unit">台</span>
            </div>
            <div style="width: 100%;height: 85%;overflow-y: auto;">
                <div class="tableHeader">
                    <div class="header" style="width: 15%;">序号</div>
                    <div class="header" style="width: 30%;">工序</div> 
                    <div class="header" style="width: 30%;">设备</div>
                    <div class="header" style="width: 25%;">维保情况</div>
                </div>
                <div class="tableBox">
                    <div class="tableTr" v-for="(item,index) in tableList" :key="index">
                        <div class="tableTd" style="width: 15%;">
                            {{ index+1 }}
                        </div>
                        <div class="tableTd" style="width: 30%;">
                            {{ item.procedureName }}
                        </div>
                        <div class="tableTd" style="width: 30%;">
                            {{ item.deviceName }}
                        </div>
                        <div class="tableTd" style="width: 25%;">
                            <span v-if="item.situation=='已超期'" style="color: red;">{{ item.situation }}</span>
                            <span v-else>{{ item.situation }}</span>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
</template>

<script> 

import { maintenanceAlarmApi } from "@/api/screen/cityScreen"; 
export default {
    data() {
        return { 
            totalNum:0,
            tableList:[]
        }
    },
    created() {

    },
    mounted() {
        this.getMaintenanceAlarm()
    },
    methods: {
        getMaintenanceAlarm(){
            maintenanceAlarmApi({companyId:sessionStorage.getItem('companyId')}).then(response => { 
                console.log(response,'maintenanceAlarmApi')
                if(response.code==200){
                    this.totalNum = response.data.total
                    this.tableList = response.data.list
                }
            });
        } 
        
    },
}
</script>
<style lang="scss" scoped>
.content{
    width: 100%;
    height: 100%; 
    background-image: url("../../../../../assets/cityScreen/maintenanceBg.png");
    background-size: 110% 100%;
    
}   
.content-title{
    width: 100%;
    height: 18%;
    position: relative;
    color: #78D6FF;
}
.title{
    font-size: 24px;
    position: absolute;
    top: 35%;
    left: 18%;
    font-family: DS-TITLE;
    background: linear-gradient(180deg, #fff 19.35%, #5dcbfe 77.42%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}
.content-view{
    width: 100%;
    height: 85%; 
    padding-left: 8%;
}
.text{
    color: #C0C2C6;
    font-size: 26px;
}
.num{
    color: #83D3F8;
    font-size: 26px;
    font-weight: 600;
    margin: 0 10px;
    font-family: DIN;
}
.unit{
    font-size: 16px;
    color: #ccc; 
}
.icon{
    width: 70px;
    height: 70px;
}

.tableHeader{
    width: 100%;
    height: 12%; 
    background-color: #082D6E;
    opacity: 0.8;
    display: flex;
    align-items: center;
}
.tableBox{
    width: 100%;
    height: 84%; 
    overflow-y: auto;
}
.tableTr{
    width: 100%;
    height: 16%; 
    // background-image: url("../../../../../assets/cityScreen/tableTr2.png");
    // background-size: 100% 100%;
    border-bottom: 1px dashed #eee;
    margin-bottom: 2px;
    display: flex;
    cursor: pointer;
}
.tableTd{
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ccc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header{
    color: #ccc;
    width: 25%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

::-webkit-scrollbar{
  width: 4px;
  height: 4px;
}
//定义背景颜色和圆角
::-webkit-scrollbar-thumb{
  border-radius: 1em;
  background-color: rgba(50,50,50,.3);
}
//定义滚动条轨道 内阴影+圆角
::-webkit-scrollbar-track{
  border-radius: 1em;
  background-color: rgba(50,50,50,.1);
}

@media screen and (min-width: 1080px) { 
    .title{
        font-size: 10px; 
    } 
    .num{
        color: #83D3F8;
        font-size: 12px;
        margin: 0 2px;
    }
    .unit{
        font-size: 8px; 
    }
    .icon{
        width: 35px;
        height: 35px;
    }
    .text{ 
        font-size: 10px;
    }
    .header{ 
        font-size: 10px;
    } 
    .tableTd{ 
        font-size: 8px; 
    }
}
@media screen and (min-width: 3000px) { 
    .title{
        font-size: 24px;
    }
    .num{
        color: #83D3F8;
        font-size: 24px;
        margin: 0 10px;
    }
    .unit{
        font-size: 16px; 
    }
    .icon{
        width: 70px;
        height: 70px;
    }
    .text{ 
        font-size: 26px;
    }
    .header{ 
        font-size: 26px;
    } 
    .tableTd{ 
        font-size: 24px; 
    }
}


</style>