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

叶松

2023-12-01 5efd01db698683e95a63053da43aaa08fa35a185

 web/src/views/MixingInfo/mixing.vue

对比新文件
@@ -0,0 +1,314 @@
<template>
    <div class="wrap">
        <div class="header">
            <div class="header_name">中铁十四局通甬站前I标管片场拌合站</div>
        </div>
        <div class="container">
            <div class="con_name">
                <div class="line left"></div>
                <div class="name">
                    <p class="p">{{ infoL.siloName }}</p>
                    <p class="p">{{ infoR.siloName }}</p>
                </div>
                <div class="line right"></div>
            </div>
            <div class="con_main">
                <div class="con_main_item con_main_l">
                    <div class="placeholder"></div>
                    <div class="list_wrap">
                        <list :data="infoL.mixing"></list>
                    </div>
                </div>
                <div class="con_main_item con_main_c">
                    <div :class="`image ${infoL.percentImgName || ''}`">
                        <p>{{ infoL.siloName }}</p>
                    </div>
                    <div :class="`image ${infoR.percentImgName || ''}`">
                        <p>{{ infoR.siloName }}</p>
                    </div>
                </div>
                <div class="con_main_item con_main_r">
                    <div class="placeholder"></div>
                    <div class="list_wrap">
                        <list :data="infoR.mixing"></list>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import List from './components/List'
const interval = function (fn, Vue) {
    let timer = setInterval(
        (() => {
            fn()
            return fn
        })(),
        1000 * 60 * 1
    )
    if (Vue) {
        Vue.$once('hook:beforeDestroy', function () {
            timer && clearInterval(timer)
        })
    }
}
export default {
    name: 'mixing',
    data() {
        return {
            type: '',
            infoL: {},
            infoR: {},
            percents: {
                0: 'container_10',
                10: 'container_10',
                20: 'container_20',
                40: 'container_40',
                60: 'container_60',
                80: 'container_80',
                90: 'container_90',
                100: 'container_100',
            }
        };
    },
    components: {
        List
    },
    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 percentArr = Object.keys(this.percents)
            this.$api.Infos.getMixing({types: this.type}).then(res => {
                if (res.statusMsg === 'ok' && res.data && res.data.length) {
                    res.data.forEach((item, index) => {
                        if (item && item.mixing && item.mixing.percentage) {
                            let targetVal = +item.mixing.percentage
                            for (let index = 0; index < percentArr.length - 1; index++) {
                                const val = percentArr[index]
                                const valNext = percentArr[index + 1]
                                if (val <= targetVal && targetVal <= valNext) {
                                    item.percentImgName = this.percents[val]
                                    break
                                }
                            }
                        } else {
                            item.percentImgName = this.percents[0]
                        }
                        index === 0 && (this.infoL = item)
                        index === 1 && (this.infoR = item)
                    })
                } else {
                    this.$message.warning('请检查网络或联系管理员!!!')
                }
            })



        },
    }
}
</script>
<style scoped>
li {
    list-style: none;
}

.wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 1rem;
    background: #040A3F;
    overflow: hidden;
}

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

    .header_name {
        font-size: 1.6rem;
        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;
    }
}

.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 3.6rem;
    bottom: 20px;
    color: #fff;

    .con_name {
        display: flex;
        align-items: center;
        height: 2.2rem;

        .name {
            width: 20rem;
            display: flex;
            justify-content: space-evenly;

            .p {
                height: 2rem;
                padding: 0 2rem;
                line-height: 2rem;
                font-size: 1.2rem;
                font-weight: bold;
                white-space: nowrap;
                background: url(../../assets/mixing/name_bg.png) no-repeat;
                background-size: 100% 100%;
            }
        }

        .line {
            flex: 1;
            height: 14px;

            &.left {
                background: -webkit-linear-gradient(right, rgba(18, 99, 162, 1) 0, rgba(18, 99, 162, 0) 100%);
            }

            &.right {
                background: -webkit-linear-gradient(left, rgba(18, 99, 162, 1) 0, rgba(18, 99, 162, 0) 100%);
            }
        }
    }

    .con_main {
        margin-top: 10px;
        flex: 1;
        display: flex;

        .con_main_item {
            padding: 15px 15px 0 15px;
            position: relative;
            flex: 1;

            &.con_main_l,
            &.con_main_r {
                background: url(../../assets/mixing/list_bg.png) no-repeat;
                background-size: 100% 100%;
            }

            &.con_main_l .placeholder {
                width: 100%;
                height: 8%;
                background: url(../../assets/mixing/list_l_bg.png) no-repeat;
                background-size: 100% 100%;
            }

            &.con_main_r .placeholder {
                width: 100%;
                height: 8%;
                background: url(../../assets/mixing/list_r_bg.png) no-repeat;
                background-size: 100% 100%;
            }

            &.con_main_c .image {
                position: relative;
                float: left;
                width: 50%;
                height: 100%;
                min-height: 480px;
                text-align: center;

                >p {
                    position: absolute;
                    left: 50%;
                    top: 21%;
                    white-space: nowrap;
                    transform: translate(-50%, -50%);
                }

                &.container_10 {
                    background: url(../../assets/mixing/container_10.png) center 30% no-repeat;
                    background-size: auto 70%;
                }

                &.container_20 {
                    background: url(../../assets/mixing/container_20.png) center 30% no-repeat;
                    background-size: auto 70%;
                }

                &.container_40 {
                    background: url(../../assets/mixing/container_40.png) center 30% no-repeat;
                    background-size: auto 70%;
                }

                &.container_60 {
                    background: url(../../assets/mixing/container_60.png) center 30% no-repeat;
                    background-size: auto 70%;
                }

                &.container_80 {
                    background: url(../../assets/mixing/container_80.png) center 30% no-repeat;
                    background-size: auto 70%;
                }

                &.container_90 {
                    background: url(../../assets/mixing/container_90.png) center 30% no-repeat;
                    background-size: auto 70%;
                }

                &.container_100 {
                    background: url(../../assets/mixing/container_100.png) center 30% no-repeat;
                    background-size: auto 70%;
                }
            }

            .list_wrap {
                position: absolute;
                top: 12%;
                bottom: 0;
            }

        }
    }
}
</style>