|
|
|
@ -1,82 +1,86 @@
|
|
|
|
|
<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 class="rotationBox">
|
|
|
|
|
<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>
|
|
|
|
|
<div class="imageCenter" v-loading="loading" v-cloak>
|
|
|
|
|
<el-row
|
|
|
|
|
v-for="i in rowNum"
|
|
|
|
|
:key="'row-' + i"
|
|
|
|
|
:style="{ height: 100 / rowNum + '%' }"
|
|
|
|
|
>
|
|
|
|
|
<el-col
|
|
|
|
|
:span="24 / colNum"
|
|
|
|
|
v-for="(item, index) in picList"
|
|
|
|
|
v-if="index < colNum * i && index >= colNum * (i - 1)"
|
|
|
|
|
:key="'col-' + index"
|
|
|
|
|
<div class="imageCenter" v-loading="loading" v-cloak>
|
|
|
|
|
<el-row
|
|
|
|
|
v-for="i in rowNum"
|
|
|
|
|
:key="'row-' + i"
|
|
|
|
|
:style="{ height: 100 / rowNum + '%' }"
|
|
|
|
|
>
|
|
|
|
|
<div class="imgList">
|
|
|
|
|
<viewer
|
|
|
|
|
:options="OptionssalseImg"
|
|
|
|
|
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" />
|
|
|
|
|
<el-col
|
|
|
|
|
:span="24 / colNum"
|
|
|
|
|
v-for="(item, index) in picList"
|
|
|
|
|
v-if="index < colNum * i && index >= colNum * (i - 1)"
|
|
|
|
|
:key="'col-' + index"
|
|
|
|
|
>
|
|
|
|
|
<div class="imgList">
|
|
|
|
|
<viewer
|
|
|
|
|
:options="OptionssalseImg"
|
|
|
|
|
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 !== null && item.displayname !== ""
|
|
|
|
|
? item.displayname
|
|
|
|
|
: item.cmdid
|
|
|
|
|
}}-{{
|
|
|
|
|
item.alias !== null && item.alias !== ""
|
|
|
|
|
? item.alias
|
|
|
|
|
: item.channnelname
|
|
|
|
|
}}
|
|
|
|
|
</p>
|
|
|
|
|
<p class="infoBottom" v-if="item.photoTime !== null">
|
|
|
|
|
{{ $moment(item.photoTime).format("yy-MM-DD HH:mm:ss") }}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="infoTop">
|
|
|
|
|
{{ item.linename }}-{{
|
|
|
|
|
item.displayname !== null && item.displayname !== ""
|
|
|
|
|
? item.displayname
|
|
|
|
|
: item.cmdid
|
|
|
|
|
}}-{{
|
|
|
|
|
item.alias !== null && item.alias !== ""
|
|
|
|
|
? item.alias
|
|
|
|
|
: item.channnelname
|
|
|
|
|
}}
|
|
|
|
|
</p>
|
|
|
|
|
<p class="infoBottom" v-if="item.photoTime !== null">
|
|
|
|
|
{{ $moment(item.photoTime).format("yy-MM-DD HH:mm:ss") }}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-dialog
|
|
|
|
|
title="设置"
|
|
|
|
@ -339,10 +343,17 @@ export default {
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less">
|
|
|
|
|
.picRotation {
|
|
|
|
|
width: calc(100% - 32px);
|
|
|
|
|
height: calc(100% - 32px);
|
|
|
|
|
padding: 16px 16px;
|
|
|
|
|
width: calc(100% - 24px);
|
|
|
|
|
height: calc(100% - 24px);
|
|
|
|
|
padding: 12px 12px;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
.rotationBox {
|
|
|
|
|
border: 1px solid #dddddd;
|
|
|
|
|
height: calc(100% - 22px);
|
|
|
|
|
max-height: calc(100% - 22px);
|
|
|
|
|
padding: 12px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
.picHead {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|