smScreen/src/views/home/swiperMulti.vue

<template>
    <div class="swiperMulti" @mouseenter="mouseenter" @mouseleave="mouseleave">
        <div class="el-toLeft guide" v-show="guideShow" @click.stop="toLeft">
            <i class="el-icon-arrow-right icon"></i>
        </div>
        <div class="el-toRight guide" v-show="guideShow" @click.stop="toRight">
            <i class="el-icon-arrow-left icon"></i>
        </div>
        <ul>
            <li
                v-for="(item, index) in data"
                :key="item.lqid"
                :style="`left:${(index - 1) * itemPositionInterval}px`"
                :ref="'item' + index"
                :data-position-left="(index - 1) * itemPositionInterval"
            >
                <template v-if="item.isQk">
                    <h3 class="h3_type_1">{{item.position}}</h3>
                    <div class="warp">
                        <div class="gutter" @click="openItem(item, 1)">
                            <el-row>
                                <el-col :span="10" class="temp-line">
                                    <span >水量：</span>
                                </el-col>
                                <el-col :span="14" style="text-align: left;">
                                    <span v-if="item.sl === ''" class="text-red" style="font-size: 16px;">暂无数据</span>
                                    <span v-else class="text-green" >{{item.sl}}吨</span>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="gutter" @click="openItem(item, 2)">
                            <el-row>
                                <el-col :span="10" class="humidity-line">
                                    <span >电量：</span>
                                </el-col>
                                <el-col :span="14" class="gutter_text" style="text-align: left;">
                                    <span v-if="item.dl === ''" class="text-red" style="font-size: 16px;">暂无数据</span>
                                    <span v-else class="text-green" >{{item.dl}}kwh</span>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="gutter" @click="openItem(item, 3)">
                            <el-row>
                                <el-col :span="10" class="ammonia-line">
                                    <span >ph：</span>
                                </el-col>
                                <el-col :span="14" style="text-align: left;">
                                    <span v-if="item.ph === '' " class="text-red" style="font-size: 16px;">暂无数据</span>
                                    <span v-else class="text-green" >{{item.ph}}</span>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="gutter" @click="openItem(item, 4)">
                            <el-row>
                                <el-col :span="10" class="ammonia-line">
                                    <span >水压：</span>
                                </el-col>
                                <el-col :span="14" style="text-align: left;">
                                    <span v-if="item.sy === '' " class="text-red" style="font-size: 16px;">暂无数据</span>
                                    <span v-else class="text-green" >{{item.sy}}Mpa</span>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <!-- {{ item.id }} -->
                    <h3 class="h3_type_1">{{item.position}}</h3>
                    <div class="warp"  @click="onOpen(item)">
                        <div class="gutter">
                            <el-row>
                                <el-col :span="14" class="temp-line">
                                    <i class="icon_temp"></i>
                                    <span class="temp_text">温度：</span>
                                </el-col>
                                <el-col :span="10" style="text-align: left;">
                                    <span v-if="item.temp === ''" class="text-red" style="font-size: 16px;">暂无数据</span>
                                    <span v-else :class="item.temp > 35 ? 'text-red' : 'text-green'" >{{item.temp}}℃</span>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="gutter"  @click="onOpen(item)">
                            <el-row>
                                <el-col :span="14" class="humidity-line">
                                    <i class="icon_humidity"></i>
                                    <span class="humidity_text">湿度：</span>
                                </el-col>
                                <el-col :span="10" class="gutter_text" style="text-align: left;">
                                    <span v-if="item.humidity === ''" class="text-red" style="font-size: 16px;">暂无数据</span>
                                    <span v-else :class="item.humidity > 93 ? 'text-red' : 'text-green'" >{{item.humidity}}RH</span>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="gutter"  @click="onOpen(item)">
                            <el-row>
                                <el-col :span="14" class="ammonia-line">
                                    <i class="icon_ammonia"></i>
                                    <span class="ammonia_text">氨气：</span>
                                </el-col>
                                <el-col :span="10" style="text-align: left;">
                                    <span v-if="item.ammonia === '' " class="text-red" style="font-size: 16px;">暂无数据</span>
                                    <span v-else :class="item.ammonia > 3 ? 'text-red' : 'text-green'" >{{item.ammonia}}mg/m³</span>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </template>
            </li>
        </ul>
    </div>
</template>


<script>
let timer, timer1;

export default {
    data() {
        return {
            active: 1,
            guideShow: false,
            itemPositionInterval: 240, // 定位间隔
            data: [],
        };
    },
    created() {},
    mounted() {
        this.init();
        this.setInit();
    },
    destroyed() {
        clearInterval(timer);
        clearInterval(timer1);
    },
    methods: {
        toRight() {
            let firstItemPositionLift = this.$refs.item0[0].getAttribute("data-position-left");
            if (Number(firstItemPositionLift) <= -this.itemPositionInterval) {
                this.data.unshift(this.data.pop());
            }
        },
        toLeft() {
            let firstItemPositionLift = this.$refs.item0[0].getAttribute("data-position-left");
            if (Number(firstItemPositionLift) >= -this.itemPositionInterval) {
                this.data.push(this.data.shift());
            }
        },
        setInterval() {
            clearInterval(timer)
            let that = this;
            timer = setInterval(() => {
                that.toLeft();
            }, 2000);
        },
        mouseenter(e) {
            this.guideShow = true;
            clearInterval(timer);
        },
        mouseleave() {
            this.guideShow = false;
            this.setInterval()
        },
        onOpen(item) {
           this.$emit('onOpen', item);
        },
        openItem(item, i) {
            this.$emit('openItem', {item: item, index: i});
        },
        init() {
            console.log('++++++++++++++++++++++++++++');
            this.$http.get('/environment/getZsda', {mcid: 39})
                    .then(res => {
                        // loading.close();
                        if(res.code === 10000) {
                            // this.data = res.data;
                            this.data = [];
                            let arr1 = [];
                            let arr2 = [];
                            res.data.forEach(item => {
                                if(item.isQuanKong) {
                                    this.$http.post('http://122.112.252.100:8088/allDataController/findByZSID', {ZSID: item.zsid, lqid: item.lqid})
                                    .then(res => {
                                        let slList = [];
                                        let dlList = [];
                                        let phList = [];
                                        let syList = [];
                                        Object.values(res.data.sl).forEach(key => {
                                            slList.push(key);
                                        });
                                        let sl = Math.max(...slList);
                                        Object.values(res.data.dl).forEach(key => {
                                            dlList.push(key);
                                        });
                                        let dl = Math.max(...dlList);
                                        Object.values(res.data.ph).forEach(key => {
                                            phList.push(key);
                                        });
                                        Object.values(res.data.sy).forEach(key => {
                                            syList.push(key);
                                        });
                                        let ph = Math.max(...phList);
                                        let sy = Math.max(...syList);
                                        if(res.data.zsid === item.zsid) {
                                            arr1.push({
                                                sl: sl,
                                                dl: dl,
                                                ph: ph,
                                                sy: sy,
                                                isQk: true,
                                                position: item.zsmc,
                                                lqid: res.data.lqid,
                                                zsid: res.data.zsid,
                                                dlLists: res.data.dl,
                                                phLists: res.data.ph,
                                                slLists: res.data.sl,
                                                syLists: res.data.sy
                                            });
                                        }

                                        this.data = arr1.concat(arr2);
                                    })
                                } else {
                                    this.$http.get('/environment/getLastEnvByLq', {lqid: item.lqid})
                                            .then(res => {
                                                if(res.data.lqid === item.lqid) {
                                                    res.data.position = item.zsmc;
                                                    res.data.isQk = false;
                                                }
                                                arr2.push(res.data);
                                                this.data = arr1.concat(arr2);
                                            })
                                }

                            });
                            // 数组排序
                            this.data.sort(function(a, b){a.lqid - b.lqid});
                            this.setInterval();
                        }
                    })
                    .catch(err => {
                        // this.loading = false;
                        // loading.close();
                    })
        },
        setInit() {
            let that = this;
            timer1 = setInterval(() => {
                that.init();
            }, 1800000)
        }
    },
    // beforeUpdate() {
    //     console.log('==========================');
    //     clearInterval(timer)
    // }
};
</script>

<style lang="scss" scope>
.swiperMulti {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    > .guide{
        position: absolute;
        font-size: 60px;
        height: 100%;
        display: flex;
        align-items: center;
        z-index: 1;
        background-color: #4441;
        &:hover{
            background-color: #9991;
        }
        .icon{
            transition: all 1s ease-in-out;
        }
    }
    > .el-toRight {
        left: 0;
    }
    > .el-toLeft {
        right: 0;
    }
    ul {
        width: 100%;
        height: 100%;
        li {
            // border: 1px solid rgb(60, 206, 16);
            background-color: #0D1943;
            width: 220px;
            height: 100%;
            position: absolute;
            transition: all 0.5s ease;
            display: flex;
            flex-direction: column;
            > h3{
                text-align: center;
                font-size: 1.3rem;
                font-weight: normal;
            }
            > .h3_type_1{
                background-color: #207BC4;
            }
            > .h3_type_2{
                background-color: #0E1E51;
            }
            > .warp {
                flex-grow: 1;
                // border: 1px solid rgb(221, 218, 16);
                .gutter {
                    padding: 30px 0 20px 0;
                    text-align: center;
                    font-size: 22px;
                    .text-red {
                        color: #F56C6C;
                    }
                    .text-green {
                        color: #67C23A;
                    }
                    .temp-line {
                        position: relative;
                        .icon_temp {
                            display: inline-block;
                            width: 28px;
                            height: 28px;
                            background-image: url("../../assets/icon_T.png");
                            background-size: 100% 100%;
                            position: absolute;
                            top: 0;
                            left: 15px;
                        }
                        .temp_text {
                            padding-left: 44px;
                        }
                    }
                    .humidity-line {
                        position: relative;
                        .icon_humidity {
                            display: inline-block;
                            width: 28px;
                            height: 28px;
                            background-image: url("../../assets/icon_humidity.png");
                            background-size: 100% 100%;
                            position: absolute;
                            top: 0;
                            left: 15px;
                        }
                        .humidity_text {
                            padding-left: 44px;
                        }
                    }
                    .ammonia-line {
                        .icon_ammonia {
                            display: inline-block;
                            width: 28px;
                            height: 28px;
                            background-image: url("../../assets/icon_meter.png");
                            background-size: 100% 100%;
                            position: absolute;
                            top: 0;
                            left: 15px;
                        }
                        .ammonia_text {
                            padding-left: 44px;
                        }
                    }
                }
            }
        }
    }
}
</style>