frontend/src/views/pictureRotation/index.vue

<template>
    <div class="picRotation">
        <div class="picHead">
            <div class="pageNation">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-size="pageSize"
                    layout=" prev, pager, next, jumper,total"
                    :total="total"
                >
                </el-pagination>
            </div>
            <div class="buttonGroup">
                <el-button type="primary" @click="toggleCountdown">{{ isRuning ? '暂停轮巡' : '开始轮巡' }}</el-button>
                <el-button type="primary">全屏</el-button>
                <el-button type="primary">设置</el-button>
                <el-button type="primary">轮询条件</el-button>
                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
                <span class="info">
                    <b> {{ isRuning ? remainingTime : '已暂停' }} </b>
                </span>
            </div>
        </div>
        <div class="imageCenter">
            <div class="imgList" v-for="(item, index) in picList" :key="index">
                <img :src="basUrl + item.filePath" />
                <p class="infoTop">{{ item.lineName }}-{{ item.towerName }}-{{ item.orientationName }}</p>
                <p class="infoBottom">{{ item.captureTime }}</p>
            </div>
        </div>
    </div>
</template>
<script>
import { picLoop } from '@/utils/api/index';
import qs from 'qs';
export default {
    data() {
        return {
            options: [
                {
                    value: '选项1',
                    label: '顺序'
                },
                {
                    value: '选项2',
                    label: '倒序'
                }
            ],
            value: '选项1',
            page: 1, // 当前页数
            pageSize: 4, // 每页数量
            totalPage: 0, //总页数
            total: 0, //总条数
            picList: [], //图片列表数据
            basUrl: '',
            totalTime: 15, //总共倒计时时间
            remainingTime: 15, //剩余时间
            isRuning: false,
            timer: null
        };
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.isRuning = false;
            this.pauseCountdown();
            this.page = val;
            this.getPicData();
        },
        //请求数据接口方法
        getPicData() {
            picLoop({ rows: this.pageSize, page: this.page }).then((res) => {
                console.log(res.data);
                this.total = res.data.total; //总条数
                this.totalPage = Math.ceil(this.total / this.pageSize); //总页数
                this.picList = res.data.rows; //图片列表
                this.basUrl = res.data.photoserver; //获取图片地址
            });
        },

        //开始轮巡
        startCountdown() {
            this.timer = setInterval(() => {
                if (this.remainingTime <= 0) {
                    //等于0时  清除定时器，剩余时间等于总时间，从新执行当前轮巡函数
                    clearInterval(this.timer);
                    this.remainingTime = this.totalTime;
                    this.startCountdown();
                    this.page++;
                    this.getPicData();
                    console.log(this.page);
                    if (this.page > this.totalPage) {
                        clearInterval(this.timer);
                        alert('最后一页了');
                        this.page = 1;
                        this.startCountdown();
                        this.getPicData();
                    }
                } else {
                    this.remainingTime--;
                }
            }, 1000);
        },

        //暂停轮巡
        pauseCountdown() {
            clearInterval(this.timer); //清除定时器
        },
        //根据isRuning执行开始暂停操作
        toggleCountdown() {
            if (this.isRuning) {
                this.pauseCountdown();
            } else {
                this.startCountdown();
                this.getPicData();
            }
            this.isRuning = !this.isRuning;
        }
    },
    computed: {},
    mounted() {
        this.toggleCountdown();
    },
    created() {},

    beforeDestroy() {
        console.log('销毁定时器');
        clearInterval(this.timer);
        this.timer = null;
    }
};
</script>
<style lang="less">
.picRotation {
    height: calc(100% - 8px);
    width: 100%;
    background: @color-white;
    //background: #fcc;
    .picHead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0px;
       
        .buttonGroup {
            display: flex;
            .el-select {
                margin-left: 10px;
                width: 100px;
            }
            .info {
                width: 80px;
                text-align: center;
                margin-left: 16px;
                line-height: 32px;
                b {
                    font-size: 24px;
                    font-weight: normal;
                    color: @color-success;
                    vertical-align: middle;
                }
            }
        }
    }

    .imageCenter {
        display: flex;
        // justify-content: space-around;
        flex-wrap: wrap;
        height: calc(100% - 52px);
        .imgList {
            width: 49.4%;
            position: relative;
            display: inline-block;
            margin-right: 0.25%;
            margin-left: 0.25%;
            position: relative;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px px;
            height: 49%;

            img {
                width: 100%;
                height: 100%;
            }
            .infoTop {
                position: absolute;
                bottom: 28px;
                left: 0px;
                font-size: 15px;
                background-color: #3a87ad !important;
                color: @color-white;
                font-weight: normal;
                margin-top: 2px;
                padding-left: 5px;
                padding-right: 5px;
            }
            .infoBottom {
                position: absolute;
                bottom: 4px;
                color: @color-white;
                left: 0px;
                font-size: 15px;
                background-color: #51b17c !important;
                font-weight: normal;
                margin-top: 2px;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
    }
}
</style>