|
|
<template>
|
|
|
<div class="picRotation">
|
|
|
<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 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="imgList" @click="handleShowHistory(item)">
|
|
|
<div
|
|
|
v-if="item.path !== null && item.path.indexOf('videos') == -1"
|
|
|
class="bigpic"
|
|
|
>
|
|
|
<img :src="item.path + '!1366x768'" @error="setDefaultImage" />
|
|
|
</div>
|
|
|
<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>
|
|
|
<div class="picInfo">
|
|
|
<p>
|
|
|
{{ item.linename }}-{{ item.towername }}-（{{
|
|
|
item.alias !== null && item.alias !== ""
|
|
|
? item.alias
|
|
|
: item.channnelname
|
|
|
}}）
|
|
|
</p>
|
|
|
<p class="timeinfo" v-if="item.photoTime !== null">
|
|
|
{{ $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") }}
|
|
|
</p>
|
|
|
<p class="timeinfo" v-else>无抓拍</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
title="设置"
|
|
|
:visible.sync="setdialog"
|
|
|
width="480px"
|
|
|
:close-on-click-modal="false"
|
|
|
class="setPicShow"
|
|
|
>
|
|
|
<el-form 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="画面布局" class="layoutBox">
|
|
|
<!-- <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> -->
|
|
|
<div class="selectGroup">
|
|
|
<div class="rowbox">
|
|
|
<el-radio-group v-model="rowradio" class="radio1">
|
|
|
<el-radio-button label="1"></el-radio-button>
|
|
|
<el-radio-button label="2"></el-radio-button>
|
|
|
<el-radio-button label="3"></el-radio-button>
|
|
|
<el-radio-button label="4"></el-radio-button>
|
|
|
<!-- <el-radio-button label="5"></el-radio-button>
|
|
|
<el-radio-button label="6"></el-radio-button> -->
|
|
|
</el-radio-group>
|
|
|
<span class="labelinfo">行</span>
|
|
|
</div>
|
|
|
<div class="colbox">
|
|
|
<el-radio-group v-model="colradio" class="radio2">
|
|
|
<el-radio-button label="1"></el-radio-button>
|
|
|
<el-radio-button label="2"></el-radio-button>
|
|
|
<el-radio-button label="3"></el-radio-button>
|
|
|
<el-radio-button label="4"></el-radio-button>
|
|
|
<!-- <el-radio-button label="5"></el-radio-button>
|
|
|
<el-radio-button label="6"></el-radio-button> -->
|
|
|
</el-radio-group>
|
|
|
<span class="labelinfo">列</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</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>
|
|
|
<morePicPreveiw ref="morePicPreveiw_ref"></morePicPreveiw>
|
|
|
<!-- <el-dialog
|
|
|
title="历史图片"
|
|
|
:visible.sync="historyPicdialog"
|
|
|
width="1366px"
|
|
|
:close-on-click-modal="false"
|
|
|
class="showDialogHistoryPic"
|
|
|
>
|
|
|
<div class="title">
|
|
|
{{ picInfoData.linename }}-{{ picInfoData.towername }}-（{{
|
|
|
picInfoData.alias !== null && picInfoData.alias !== ""
|
|
|
? picInfoData.alias
|
|
|
: picInfoData.channnelname
|
|
|
}}） {{ $moment(picInfoData.photoTime).format("YYYY-MM-DD ") }}
|
|
|
</div>
|
|
|
<carouselChart
|
|
|
ref="carouselpic"
|
|
|
:terminalPhoto="terminalPhoto"
|
|
|
v-if="terminalPhoto.length > 0"
|
|
|
v-loading="historyPicLoading"
|
|
|
></carouselChart>
|
|
|
</el-dialog> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { getPictureList, getTerminalPhotoListJoggle } from "@/utils/api/index";
|
|
|
// import carouselChart from "../realTimeMonitor/components/carouselChart";
|
|
|
import morePicPreveiw from "../realTimeMonitor/components/morePicPreveiw";
|
|
|
import defaultImage from "../../assets/img/nodatapic2.jpg";
|
|
|
export default {
|
|
|
name: "pictureRotation",
|
|
|
components: {
|
|
|
morePicPreveiw,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
OptionssalseImg: {
|
|
|
inline: false,
|
|
|
button: true,
|
|
|
navbar: false,
|
|
|
title: false,
|
|
|
toolbar: false,
|
|
|
tooltip: false,
|
|
|
zoomable: true,
|
|
|
url: "src",
|
|
|
},
|
|
|
value: "选项1",
|
|
|
page: 1, // 当前页数
|
|
|
pageSize: 4, // 每页数量
|
|
|
totalPage: 0, //总页数
|
|
|
total: 0, //总条数
|
|
|
picList: [], //图片列表数据
|
|
|
remainingTime: 0, //剩余时间
|
|
|
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,
|
|
|
//画面布局
|
|
|
rowNum: "",
|
|
|
colNum: "",
|
|
|
rowradio: "4",
|
|
|
colradio: "4",
|
|
|
selLayout: 1,
|
|
|
options: [
|
|
|
{
|
|
|
value: "选项1",
|
|
|
label: "顺序",
|
|
|
},
|
|
|
{
|
|
|
value: "选项2",
|
|
|
label: "倒序",
|
|
|
},
|
|
|
],
|
|
|
|
|
|
//点击查看历史图片
|
|
|
picInfoData: {}, //获取当前图片的信息
|
|
|
historyPicdialog: false,
|
|
|
historyPicLoading: false,
|
|
|
terminalPhoto: [], //获取装置当前图片数据
|
|
|
nopicPath: require("@/assets/img/nopic.jpg"),
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
setDefaultImage(e) {
|
|
|
e.target.src = defaultImage;
|
|
|
},
|
|
|
//点击图片弹出历史图
|
|
|
handleShowHistory(item) {
|
|
|
console.log(item);
|
|
|
this.$refs.morePicPreveiw_ref.display(item);
|
|
|
// this.picInfoData = item;
|
|
|
// console.log(this.picInfoData);
|
|
|
// this.historyPicdialog = true;
|
|
|
|
|
|
// //this.getTerminalPhotoList(item.cmdid);
|
|
|
// this.getTerminalPhotoList(item.channelid, item.photoTime, item.termid);
|
|
|
},
|
|
|
//获取图片
|
|
|
getTerminalPhotoList(channelid, date, termId) {
|
|
|
this.terminalPhoto = [];
|
|
|
|
|
|
this.historyPicLoading = true;
|
|
|
getTerminalPhotoListJoggle({
|
|
|
channelid: channelid,
|
|
|
time: date,
|
|
|
terminalid: termId,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
this.historyPicLoading = false;
|
|
|
if (res.data.list.length == 0) {
|
|
|
this.terminalPhoto = [
|
|
|
{
|
|
|
path: this.nopicPath,
|
|
|
termId: termId,
|
|
|
mediatype: 0,
|
|
|
},
|
|
|
];
|
|
|
} else {
|
|
|
this.terminalPhoto = res.data.list;
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
},
|
|
|
setbtn() {
|
|
|
this.isRuning = false;
|
|
|
this.pauseCountdown();
|
|
|
this.setdialog = true;
|
|
|
this.selSpeed = parseInt(localStorage.getItem("totalTime"))
|
|
|
? parseInt(localStorage.getItem("totalTime"))
|
|
|
: 15;
|
|
|
this.rowNum = parseInt(localStorage.getItem("row"))
|
|
|
? parseInt(localStorage.getItem("row"))
|
|
|
: 4;
|
|
|
this.colNum = parseInt(localStorage.getItem("col"))
|
|
|
? parseInt(localStorage.getItem("col"))
|
|
|
: 4;
|
|
|
this.rowradio = parseInt(localStorage.getItem("row"))
|
|
|
? parseInt(localStorage.getItem("row"))
|
|
|
: 4;
|
|
|
this.colradio = parseInt(localStorage.getItem("col"))
|
|
|
? parseInt(localStorage.getItem("col"))
|
|
|
: 4;
|
|
|
},
|
|
|
submitForm() {
|
|
|
localStorage.setItem("totalTime", this.selSpeed);
|
|
|
localStorage.setItem("row", this.rowradio);
|
|
|
localStorage.setItem("col", this.colradio);
|
|
|
this.rowNum = parseInt(localStorage.getItem("row"))
|
|
|
? parseInt(localStorage.getItem("row"))
|
|
|
: 4;
|
|
|
this.colNum = parseInt(localStorage.getItem("col"))
|
|
|
? parseInt(localStorage.getItem("col"))
|
|
|
: 4;
|
|
|
this.pageSize = this.rowradio * this.colradio;
|
|
|
this.setdialog = false;
|
|
|
this.$message.success("设置成功");
|
|
|
this.getPicData();
|
|
|
},
|
|
|
//点击分页
|
|
|
handleCurrentChange(val) {
|
|
|
this.isRuning = false;
|
|
|
this.pauseCountdown();
|
|
|
this.page = val;
|
|
|
this.getPicData();
|
|
|
},
|
|
|
//请求数据接口方法
|
|
|
getPicData() {
|
|
|
this.loading = true;
|
|
|
this.picList = [];
|
|
|
getPictureList({
|
|
|
pageindex: this.page,
|
|
|
pagesize: this.rowNum * this.colNum,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.picList = res.data.list;
|
|
|
this.totalPage = res.data.totalpage;
|
|
|
this.total = res.data.total;
|
|
|
this.loading = false;
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err);
|
|
|
});
|
|
|
},
|
|
|
//开始轮询
|
|
|
startCountdown() {
|
|
|
this.timer = setInterval(() => {
|
|
|
if (this.remainingTime <= 0) {
|
|
|
this.clearTimer();
|
|
|
|
|
|
this.page++;
|
|
|
|
|
|
if (this.page > this.totalPage) {
|
|
|
this.page = 0;
|
|
|
this.startCountdown();
|
|
|
} else {
|
|
|
this.remainingTime = parseInt(localStorage.getItem("totalTime"))
|
|
|
? parseInt(localStorage.getItem("totalTime"))
|
|
|
: 15;
|
|
|
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) {
|
|
|
this.pauseCountdown();
|
|
|
} else {
|
|
|
this.startCountdown();
|
|
|
this.getPicData();
|
|
|
}
|
|
|
this.isRuning = !this.isRuning;
|
|
|
},
|
|
|
},
|
|
|
computed: {},
|
|
|
mounted() {
|
|
|
this.remainingTime = parseInt(localStorage.getItem("totalTime"))
|
|
|
? parseInt(localStorage.getItem("totalTime"))
|
|
|
: 15;
|
|
|
this.rowradio = this.rowNum = parseInt(localStorage.getItem("row"))
|
|
|
? parseInt(localStorage.getItem("row"))
|
|
|
: 4;
|
|
|
this.colradio = this.colNum = parseInt(localStorage.getItem("col"))
|
|
|
? parseInt(localStorage.getItem("col"))
|
|
|
: 4;
|
|
|
this.pageSize = this.rowradio * this.colradio;
|
|
|
//this.toggleCountdown();
|
|
|
this.getPicData();
|
|
|
},
|
|
|
created() {},
|
|
|
|
|
|
beforeDestroy() {
|
|
|
// console.log("销毁定时器");
|
|
|
clearInterval(this.timer);
|
|
|
this.timer = null;
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
.picRotation {
|
|
|
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;
|
|
|
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: #67c23a;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.imageCenter {
|
|
|
// display: flex;
|
|
|
// flex-wrap: wrap;
|
|
|
height: calc(100% - 52px);
|
|
|
.el-col {
|
|
|
height: 100%;
|
|
|
padding-right: 0.1%;
|
|
|
padding-left: 0.1%;
|
|
|
padding-top: 0.1%;
|
|
|
padding-bottom: 0.1%;
|
|
|
}
|
|
|
// justify-content: space-between;
|
|
|
.imgList {
|
|
|
border: 1px solid #eee;
|
|
|
width: 100%;
|
|
|
position: relative;
|
|
|
//background-color: #00eaff;
|
|
|
height: 100%;
|
|
|
.bigpic {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.picInfo {
|
|
|
position: absolute;
|
|
|
background: #169e8ca1;
|
|
|
color: #fff;
|
|
|
height: auto;
|
|
|
font-size: 12px;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
p {
|
|
|
margin-top: 4px;
|
|
|
}
|
|
|
.timeinfo {
|
|
|
margin-bottom: 4px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.setPicShow {
|
|
|
.el-select {
|
|
|
width: 222px;
|
|
|
}
|
|
|
.layoutBox {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.selectGroup {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.el-radio-button--small .el-radio-button__inner {
|
|
|
padding: 9px 24px;
|
|
|
}
|
|
|
.rowbox {
|
|
|
margin-bottom: 8px;
|
|
|
.labelinfo {
|
|
|
margin-left: 8px;
|
|
|
}
|
|
|
}
|
|
|
.colbox {
|
|
|
.labelinfo {
|
|
|
margin-left: 8px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.showDialogHistoryPic {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
.el-dialog {
|
|
|
width: 70% !important;
|
|
|
height: 90%;
|
|
|
transform: none;
|
|
|
margin: auto;
|
|
|
left: auto;
|
|
|
top: auto;
|
|
|
}
|
|
|
|
|
|
.el-dialog__body {
|
|
|
height: calc(100% - 70px);
|
|
|
.title {
|
|
|
height: 32px;
|
|
|
padding-left: 12px;
|
|
|
line-height: 32px;
|
|
|
color: #fff;
|
|
|
font-size: 14px;
|
|
|
background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
|
|
|
text-align: center;
|
|
|
}
|
|
|
.thumb-example {
|
|
|
//height: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
[v-cloak] {
|
|
|
display: none;
|
|
|
}
|
|
|
</style>
|