|
|
<template>
|
|
|
<div class="picRotation">
|
|
|
<div class="picHead">
|
|
|
<div class="pageNation">
|
|
|
<el-pagination
|
|
|
@current-change="handleCurrentChange"
|
|
|
:current-page="page"
|
|
|
:page-size="pageSize"
|
|
|
layout=" prev, pager, next, jumper,total"
|
|
|
:total="total"
|
|
|
>
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
<div class="buttonGroup">
|
|
|
<span class="info">
|
|
|
<b> {{ isRuning ? remainingTime : "已暂停" }} </b>
|
|
|
</span>
|
|
|
<el-button type="primary" @click="toggleCountdown">{{
|
|
|
isRuning ? "暂停轮巡" : "开始轮巡"
|
|
|
}}</el-button>
|
|
|
<el-button type="primary" @click="setbtn">设置</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="imageCenter" v-loading="loading">
|
|
|
<div class="imgList" v-for="(item, index) in picList" :key="index">
|
|
|
<viewer
|
|
|
v-if="item.path !== null && item.path.indexOf('videos') == -1"
|
|
|
class="bigpic"
|
|
|
:style="
|
|
|
item.path ? 'backgroundImage:url(' + item.path + '!128x72)' : ''
|
|
|
"
|
|
|
>
|
|
|
<img :src="item.path + '!1280x720'" />
|
|
|
</viewer>
|
|
|
<div
|
|
|
class="bigpic"
|
|
|
v-else-if="item.path !== null && item.path.indexOf('videos') !== -1"
|
|
|
>
|
|
|
<video
|
|
|
width="100%"
|
|
|
height="100%"
|
|
|
:src="item.path"
|
|
|
controls="controls"
|
|
|
></video>
|
|
|
</div>
|
|
|
<div class="bigpic" v-else>
|
|
|
<img src="../../assets/img/nopic.jpg" />
|
|
|
</div>
|
|
|
<p class="infoTop">
|
|
|
{{ item.linename }}-{{ item.displayname }}-{{ item.channnelname }}
|
|
|
</p>
|
|
|
<p class="infoBottom" v-if="item.photoTime !== null">
|
|
|
{{ $moment(item.photoTime).format("yy-MM-DD HH:mm:ss") }}
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
title="设置"
|
|
|
:visible.sync="setdialog"
|
|
|
width="30%"
|
|
|
:close-on-click-modal="false"
|
|
|
>
|
|
|
<el-form label-width="100px" label-position="left">
|
|
|
<el-form-item label="轮巡速度">
|
|
|
<el-select v-model="selSpeed" placeholder="请选择">
|
|
|
<el-option
|
|
|
v-for="item in speedOptions"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<!-- <el-form-item label="画面布局">
|
|
|
<el-select v-model="selLayout" placeholder="s请选择">
|
|
|
<el-option v-for="item in layoutOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item> -->
|
|
|
</el-form>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button @click="setdialog = false">取 消</el-button>
|
|
|
<el-button type="primary" @click="submitForm()">确 定</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { getPictureList } from "@/utils/api/index";
|
|
|
import qs from "qs";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
value: "选项1",
|
|
|
page: 1, // 当前页数
|
|
|
pageSize: 4, // 每页数量
|
|
|
totalPage: 0, //总页数
|
|
|
total: 0, //总条数
|
|
|
picList: [], //图片列表数据
|
|
|
remainingTime: 15, //剩余时间
|
|
|
isRuning: false,
|
|
|
timer: null,
|
|
|
loading: false,
|
|
|
setdialog: false, //设置弹框
|
|
|
speedOptions: [
|
|
|
{
|
|
|
value: 5,
|
|
|
label: "5秒",
|
|
|
},
|
|
|
{
|
|
|
value: 11,
|
|
|
label: "11秒",
|
|
|
},
|
|
|
{
|
|
|
value: 12,
|
|
|
label: "12秒",
|
|
|
},
|
|
|
{
|
|
|
value: 13,
|
|
|
label: "13秒",
|
|
|
},
|
|
|
{
|
|
|
value: 14,
|
|
|
label: "14秒",
|
|
|
},
|
|
|
{
|
|
|
value: 15,
|
|
|
label: "15秒",
|
|
|
},
|
|
|
], //轮巡速度
|
|
|
selSpeed: 5,
|
|
|
layoutOptions: [
|
|
|
{
|
|
|
value: 1,
|
|
|
label: "2*2",
|
|
|
},
|
|
|
{
|
|
|
value: 2,
|
|
|
label: "3*3",
|
|
|
},
|
|
|
{
|
|
|
value: 3,
|
|
|
label: "2*3",
|
|
|
},
|
|
|
{
|
|
|
value: 4,
|
|
|
label: "3*2",
|
|
|
},
|
|
|
{
|
|
|
value: 5,
|
|
|
label: "4*2",
|
|
|
},
|
|
|
{
|
|
|
value: 6,
|
|
|
label: "4*3",
|
|
|
},
|
|
|
], //画面布局
|
|
|
selLayout: 1,
|
|
|
options: [
|
|
|
{
|
|
|
value: "选项1",
|
|
|
label: "顺序",
|
|
|
},
|
|
|
{
|
|
|
value: "选项2",
|
|
|
label: "倒序",
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
setbtn() {
|
|
|
this.isRuning = false;
|
|
|
this.pauseCountdown();
|
|
|
this.setdialog = true;
|
|
|
this.selSpeed = parseInt(localStorage.getItem("totalTime"))
|
|
|
? parseInt(localStorage.getItem("totalTime"))
|
|
|
: 15;
|
|
|
},
|
|
|
submitForm() {
|
|
|
localStorage.setItem("totalTime", this.selSpeed);
|
|
|
this.setdialog = false;
|
|
|
this.$message.success("设置成功");
|
|
|
},
|
|
|
//点击分页
|
|
|
handleCurrentChange(val) {
|
|
|
this.isRuning = false;
|
|
|
this.pauseCountdown();
|
|
|
this.page = val;
|
|
|
this.getPicData();
|
|
|
},
|
|
|
//请求数据接口方法
|
|
|
getPicData() {
|
|
|
this.loading = true;
|
|
|
getPictureList({
|
|
|
pageindex: this.page,
|
|
|
pagesize: this.pageSize,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log(this.totalPage);
|
|
|
this.picList = res.data.list;
|
|
|
this.totalPage = res.data.totalpage;
|
|
|
this.total = res.data.total;
|
|
|
this.loading = false;
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err);
|
|
|
});
|
|
|
},
|
|
|
//开始轮询
|
|
|
startCountdown() {
|
|
|
console.log(this.remainingTime);
|
|
|
this.timer = setInterval(() => {
|
|
|
if (this.remainingTime <= 0) {
|
|
|
this.clearTimer();
|
|
|
console.log("结束");
|
|
|
this.page++;
|
|
|
console.log(this.totalPage);
|
|
|
if (this.page > this.totalPage) {
|
|
|
console.log("组后一页");
|
|
|
this.page = 0;
|
|
|
this.startCountdown();
|
|
|
} else {
|
|
|
console.log(this.page);
|
|
|
this.remainingTime = this.selSpeed;
|
|
|
this.getPicData();
|
|
|
this.startCountdown();
|
|
|
}
|
|
|
} else {
|
|
|
this.remainingTime--;
|
|
|
}
|
|
|
}, 1000);
|
|
|
},
|
|
|
clearTimer() {
|
|
|
//清除定时器
|
|
|
clearInterval(this.timer);
|
|
|
this.timer = null;
|
|
|
},
|
|
|
pauseCountdown() {
|
|
|
//清除定时器
|
|
|
clearInterval(this.timer);
|
|
|
this.timer = null;
|
|
|
},
|
|
|
//根据isRuning执行开始暂停操作
|
|
|
toggleCountdown() {
|
|
|
if (this.isRuning) {
|
|
|
console.log(this.isRuning);
|
|
|
this.pauseCountdown();
|
|
|
} else {
|
|
|
console.log(this.isRuning);
|
|
|
this.startCountdown();
|
|
|
this.getPicData();
|
|
|
}
|
|
|
this.isRuning = !this.isRuning;
|
|
|
console.log(this.isRuning);
|
|
|
},
|
|
|
},
|
|
|
computed: {},
|
|
|
mounted() {
|
|
|
this.toggleCountdown();
|
|
|
},
|
|
|
created() {},
|
|
|
|
|
|
beforeDestroy() {
|
|
|
// console.log("销毁定时器");
|
|
|
clearInterval(this.timer);
|
|
|
this.timer = null;
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
.picRotation {
|
|
|
width: calc(100% - 32px);
|
|
|
height: calc(100% - 32px);
|
|
|
padding: 16px 16px;
|
|
|
background: #ffffff;
|
|
|
.picHead {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
padding: 0px 0px 8px 0px;
|
|
|
.buttonGroup {
|
|
|
display: flex;
|
|
|
.el-select {
|
|
|
margin-left: 10px;
|
|
|
width: 100px;
|
|
|
}
|
|
|
.info {
|
|
|
width: 80px;
|
|
|
text-align: center;
|
|
|
margin-right: 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);
|
|
|
justify-content: space-between;
|
|
|
.imgList {
|
|
|
width: 49.8%;
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
margin-right: 0.1%;
|
|
|
margin-left: 0.1%;
|
|
|
margin-top: 0.1%;
|
|
|
margin-bottom: 0.1%;
|
|
|
position: relative;
|
|
|
-moz-border-radius: 3px;
|
|
|
-webkit-border-radius: 3px;
|
|
|
border-radius: 3px px;
|
|
|
height: 49.8%;
|
|
|
.bigpic {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.infoTop {
|
|
|
position: absolute;
|
|
|
bottom: 28px;
|
|
|
left: 0px;
|
|
|
font-size: 14px;
|
|
|
background: linear-gradient(180deg, #00eaff 10%, #409eff 100%);
|
|
|
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: 14px;
|
|
|
background: linear-gradient(180deg, #00eaff 10%, #409eff 100%);
|
|
|
font-weight: normal;
|
|
|
margin-top: 2px;
|
|
|
padding-left: 5px;
|
|
|
padding-right: 5px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|