Merge branch 'master' of http://111.30.93.211:10101/r/supipe

李旭东

2023-12-08 7efc6ed86025b610cab109a2e9f83362740d8ed4

 web/src/views/MixingInfo/mixRatio.vue

对比新文件
@@ -0,0 +1,253 @@
<template>
    <div class="wrap">
        <div class="header">
            <div class="header_name">中铁十四局通甬站前I标管片场拌和站</div>
        </div>
        <div class="table">
            <div class="row title">{{ info.signboardName }}</div>

            <div class="row">
                <div class="name">工程名称</div>
                <div class="value">{{ info.proName }}</div>
            </div>

            <div class="row">
                <div class="name">施工单位</div>
                <div class="value">{{ info.constructionUnit }}</div>
            </div>

            <div class="row line">
                <div>
                    <div class="name">施工日期</div>
                    <div class="value">{{ info.saveStamp }}</div>
                </div>
                <div>
                    <div class="name">施工部位</div>
                    <div class="value">{{ info.construction }}</div>
                </div>
            </div>

            <div class="row" v-for="item in dataLists" :key="item.name">
                <div class="name">{{ item.name }}</div>
                <div class="column">
                    <div class="column-item" v-for="(sub, index) in item.value" :key="index">{{ sub }}</div>
                </div>
            </div>

        </div>
    </div>
</template>
  
<script>
const interval = function (fn, Vue) {
    let timer = setInterval(
        (() => {
            fn()
            return fn
        })(),
        1000 * 60 * 10
    )
    if (Vue) {
        Vue.$once('hook:beforeDestroy', function () {
            timer && clearInterval(timer)
        })
    }
}
export default {
    name: 'Page2',
    data() {
        return {
            info: {
                signboardName: '', // 标识排
                proName: '', // 工程名称
                constructionUnit: '', // 施工单位
                saveStamp: '',  // 施工日期
                construction: '',  // 施工部位
            },
            dataLists: [
                {name: '材料名称', type: 'dictName', value: []}, // 材料名称
                {name: '规格型号', type: 'spec', value: []}, // 规格型号
                {name: '生产厂家', type: 'manufacturer', value: []}, // 生产厂家
                {name: '材料含水率(%)', type: 'watFull', value: []}, // 含水率
                {name: '理论用量(kg/m³)', type: 'planAmnt', value: []}, // 理论用量
                {name: '实际用量(kg/m³)', type: 'factAmnt', value: []}, // 实际用量
            ]
        }
    },
    beforeCreate() {
        this.$http = this.$api.Infos
    },
    beforeRouteEnter(to, form, next) {
        const {path} = to

        const type = path.slice(-1)

        next(vm => {
            vm.type = type
            interval(vm.getLists, vm)
        })
    },
    mounted() {
        let width = document.getElementsByClassName('wrap')[0].clientWidth
        let $html = document.getElementsByTagName('html')[0]
        let fontsize = width / 1920 * 35.2
        $html.style.fontSize = `${fontsize}px`
        window.onresize = () => {
            let width = document.getElementById('app').clientWidth
            let fontsize = width / 1920 * 35.2
            $html.style.fontSize = `${fontsize}px`
        }
    },
    beforeDestroy() {
        let $html = document.getElementsByTagName('html')[0]
        $html.style.fontSize = ''
    },
    methods: {
        getLists() {
            const params = {
                pageNum: this.type, // 传 1 2对应两个页面
                pageSize: 1,
            }
            this.$api.Infos.getMixRatio(params).then(res => {
                if (res.statusMsg === 'ok' && res.data) {
                    const {list} = res.data
                    if (list && list.length) {
                        const item = list[0]
                        const {tmixingConsumes} = item

                        this.info.signboardName = item.signboardName
                        this.info.proName = item.proName

                        if (tmixingConsumes && tmixingConsumes.length) {
                            this.info.constructionUnit = tmixingConsumes[0].constructionUnit
                            this.info.saveStamp = tmixingConsumes[0].saveStamp
                            this.info.construction = tmixingConsumes[0].construction
                            this.dataLists = [
                                {name: '材料名称', type: 'dictName', value: []}, // 材料名称
                                {name: '规格型号', type: 'spec', value: []}, // 规格型号
                                {name: '生产厂家', type: 'manufacturer', value: []}, // 生产厂家
                                {name: '材料含水率(%)', type: 'watFull', value: []}, // 含水率
                                {name: '理论用量(kg/m³)', type: 'planAmnt', value: []}, // 理论用量
                                {name: '实际用量(kg/m³)', type: 'factAmnt', value: []}, // 实际用量
                            ]
                            tmixingConsumes.forEach(item => {
                                this.dataLists.forEach(val => {
                                    item[val.type] && val.value.push(item[val.type])
                                })
                            })
                        }
                    }
                } else {
                    this.$message.warning('请检查网络或联系管理员!!!')
                }
            })

        },
    }
}
</script>
<style lang="scss" scoped>
.wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 1rem;
    background: #040A3F;
    overflow: hidden;
}

.header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 3rem;
    text-align: center;
    color: #fff;
    background: url('../../assets/mixing/header.png') no-repeat center center;
    background-size: 100% auto;

    .header_name {
        font-size: 1.4rem;
        font-weight: bold;
        line-height: 3.2rem;
        letter-spacing: 2px;
        text-shadow: 0px 3px 3px rgba(25, 63, 95, 0.05);
        background: -webkit-linear-gradient(90deg, #2AC0FF 0%, #FFFFFF 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.table {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 4rem;
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
    font-size: 0.74rem;
    color: #fff;

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #BEE2F0;
        background: rgba(1, 142, 196, .35);
    }

    .row {
        flex: 1;
        width: 100%;
        margin: 0 -1px -1px 0;
        text-align: center;
        line-height: 1.1rem;
        border: 1px solid #01B3EF;

        .name {
            display: flex;
            justify-content: center;
            align-items: center;
            float: left;
            width: 8rem;
            height: 100%;
            margin: -1px -1px -1px 0;
            color: #BEE2F0;
            border: 1px solid #01B3EF;
            background: rgba(1, 142, 196, .75);
            box-sizing: unset;
        }

        .value {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            overflow: hidden;
        }

        .column {
            display: flex;
            height: 100%;

            .column-item {
                display: flex;
                justify-content: center;
                align-items: center;
                flex: 1;
                margin: -1px -1px -1px 0;
                border: 1px solid #01B3EF;
            }
        }
    }

    .row.line {
        display: flex;

        > div {
            flex: 1;
        }
    }
}
</style>