李旭东
2023-12-08 7efc6ed86025b610cab109a2e9f83362740d8ed4
web/src/views/MixingInfo/workShop.vue
对比新文件
@@ -0,0 +1,187 @@
<template>
    <div class="work_index">
        <div class="work_headers">
            <div class="header_title">材料标识牌</div>
            <div class="header_area">
                <div class="header_area_text">区域:</div>
                <div class="header_area_data">{{workList&&workList.region}}号</div>
            </div>
        </div>
        <div class="work_main">
            <div class="work_rows">
                <div class="work_items">
                    <div class="work_items_text">材料名称</div>
                    <div class="work_items_data" style="border-right: 3px solid #001982;">{{workList&&workList.materialName}}</div>
                </div>
                <div class="work_items">
                    <div class="work_items_text">生产厂家</div>
                    <div class="work_items_data" >{{workList&&workList.manufacturer}}</div>
                </div>
            </div>
            <div class="work_rows">
                <div class="work_items">
                    <div class="work_items_text">规格型号</div>
                    <div class="work_items_data" style="border-right: 3px solid #001982;">{{workList&&workList.specifications}}</div>
                </div>
                <div class="work_items">
                    <div class="work_items_text">炉(批)号</div>
                    <div class="work_items_data" style="font-size:1.5rem">{{workList&&workList.heatNumber}}</div>
                </div>
            </div>
            <div class="work_rows">
                <div class="work_items">
                    <div class="work_items_text">进场数量</div>
                    <div class="work_items_data" style="border-right: 3px solid #001982;">{{workList&&workList.inNumber}}</div>
                </div>
                <div class="work_items">
                    <div class="work_items_text">报检日期</div>
                    <div class="work_items_data"  style="font-size:1.5rem">{{workList&&workList.reportTime}}</div>
                </div>
            </div>
            <div class="work_rows">
                <div class="work_items">
                    <div class="work_items_text">报告编号</div>
                    <div class="work_items_data" style="border-right: 3px solid #001982;font-size:1.5rem">{{workList&&workList.reportNum}}</div>
                </div>
                <div class="work_items">
                    <div class="work_items_text">检验状态</div>
                    <div class="work_items_data" >{{workList&&workList.status===1?'合格':workList&&workList.status===2?'待检':''}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            timer:null,//定时器
            workList:null,//展示数据
        }
    },
    created(){
        this.searchWorkInfos()
    },
    mounted(){
        const that = this;
        that.timer = setInterval(()=>{
            that.searchWorkInfos()
        },60000 * 10)
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    },
    methods:{
        searchWorkInfos(){
            let params={
                region:window.location.href.split('/')[5].split('=')[1]
            }
            this.$api.Materials.detailSignBoardInfos(params).then(res=>{
                if(res.statusMsg==='ok'){
                    this.workList = res.data===null?[]:res.data
                }else{
                    this.$message.warning('请检查网络或联系管理员!!!')
                }
            })
        },
    }
}
</script>
<style scoped lang="scss">
.work_index{
    width: 100%;
    height: 100%;
    background: url("../../assets/work_shop.png") no-repeat;
    background-size: 100% 100%;
    overflow: auto;
    .work_headers{
        height: 206px;
        padding-top: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .header_title{
            font-size: 4rem;
            font-weight: 600;
            background: linear-gradient(to bottom,#24A5ED,#1976CE,#145DBE,#071C94);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }
        .header_area{
            display: flex;
            position: absolute;
            right: 100px;
            .header_area_text{
                font-size: 3.2rem;
                font-weight: 600;
                background: linear-gradient(to bottom,#24A5ED,#1976CE,#145DBE,#071C94);
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }
            .header_area_data{
                font-size: 3.2rem;
                font-weight: 600;
                background: linear-gradient(to bottom,#24A5ED,#1976CE,#145DBE,#071C94);
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }
        }
    }
    .work_main{
        // height: calc(100% - 200px);
        border: 3px solid #001982;
        margin: 20px 50px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .work_rows{
            width: 100%;
            line-height: 60px;
            display: flex;
            .work_items{
                width: 50%;
                display: flex;
                .work_items_text{
                    font-size: 3rem;
                    font-weight: 500;
                    padding: 30px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex: none;
                    width: 240px;
                    border-bottom: 1px solid #001982;
                    border-right: 1px solid #001982;
                    background: linear-gradient(to bottom,#AEDEF9,#1E87D9,#1D87D9,#2265C0,#145DBE,#082296);
                    background-clip: text;
                    -webkit-background-clip: text;
                    color: transparent;
                }
                .work_items_data{
                    color: #11299F;
                    padding: 10px;
                    font-size: 2rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex: 1;
                    width: calc(50% - 200px);
                    border-bottom: 1px solid #001982;
                    word-break: break-all;
                    // word-wrap: break-word;
                }
            }
        }
    }
}
</style>