xymp
/
frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

图片轮巡

Browse Source
master
liuyi 2 years ago
parent 467b6c887d
commit 5fbcb497c6
2 changed files with 123 additions and 164 deletions
Show Stats Download Patch File Download Diff File

12
src/utils/api/index.js
Unescape Escape View File

@ -36,6 +36,18 @@ export function getChannelByTermidJoggle(data) {
});
}
//图片轮巡
//获取图片轮巡接口
export function getPictureList(data){
return request({
url: "/test/getPhotoBanner",
method: "post",
data
})
}
//拍照时间表设置
//1.获取任务规则列表接口
export function getScheduleRulelListJoggle(data) {

275
src/views/pictureRotation/index.vue
Unescape Escape View File

@ -16,8 +16,8 @@
<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" @click="setbtn">设置</el-button>
<!-- <el-button type="primary">轮询条件</el-button>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
@ -26,29 +26,102 @@
:value="item.value"
>
</el-option>
</el-select>
</el-select> -->
<span class="info">
<b> {{ isRuning ? remainingTime : "已暂停" }} </b>
</span>
</div>
</div>
<div class="imageCenter">
<div class="imageCenter" v-loading="loading">
<div class="imgList" v-for="(item, index) in picList" :key="index">
<img :src="item.path" />
<p class="infoTop">
{{ item.channelId }}-{{ item.termId }}-{{ item.fileSize }}
</p>
<p class="infoBottom">{{ item.photoTime }}</p>
<p class="infoBottom">{{ $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 { picLoop } from "@/utils/api/index";
import { getPictureList } from "@/utils/api/index";
import qs from "qs";
export default {
data() {
return {
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",
@ -60,24 +133,33 @@ export default {
},
],
value: "选项1",
page: 1, // 当前页数
page: 0, // 当前页数
pageSize: 4, // 每页数量
totalPage: 0, //总页数
total: 0, //总条数
picList: [], //图片列表数据
basUrl: "",
totalTime: 15, //总共倒计时时间
remainingTime: 15, //剩余时间
remainingTime: 0, //剩余时间
isRuning: false,
timer: null,
loading:false
};
},
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("设置成功");
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.isRuning = false;
this.pauseCountdown();
this.page = val;
@ -85,151 +167,19 @@ export default {
},
//请求数据接口方法
getPicData() {
this.picList = [
{
id: 15,
termId: 10010,
channelId: 1,
presetId: 255,
width: 0,
height: 0,
fileSize: 265357,
photoTime: "2023-05-05T17:21:04.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506012104.jpg",
manualRequest: 0,
},
{
id: 16,
termId: 10010,
channelId: 1,
presetId: 255,
width: 0,
height: 0,
fileSize: 263597,
photoTime: "2023-05-05T17:21:49.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506012149.jpg",
manualRequest: 0,
},
{
id: 17,
termId: 10010,
channelId: 1,
presetId: 255,
width: 0,
height: 0,
fileSize: 265471,
photoTime: "2023-05-05T17:25:13.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506012513.jpg",
manualRequest: 0,
},
{
id: 18,
termId: 10010,
channelId: 1,
presetId: 255,
width: 0,
height: 0,
fileSize: 263625,
photoTime: "2023-05-05T17:36:37.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506013617.jpg",
manualRequest: 0,
},
{
id: 19,
termId: 10010,
channelId: 1,
presetId: 255,
width: 0,
height: 0,
fileSize: 261572,
photoTime: "2023-05-05T17:37:14.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506013654.jpg",
manualRequest: 0,
},
{
id: 22,
termId: 10010,
channelId: 1,
presetId: 255,
width: 0,
height: 0,
fileSize: 264348,
photoTime: "2023-05-05T17:40:06.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506013946.jpg",
manualRequest: 0,
},
{
id: 23,
termId: 10010,
channelId: 1,
presetId: 255,
width: 0,
height: 0,
fileSize: 262231,
photoTime: "2023-05-05T17:42:33.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506014213.jpg",
manualRequest: 0,
},
{
id: 24,
termId: 10010,
channelId: 1,
presetId: 255,
width: 0,
height: 0,
fileSize: 262564,
photoTime: "2023-05-05T17:43:11.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506014252.jpg",
manualRequest: 0,
},
{
id: 26,
termId: 10010,
channelId: 2,
presetId: 255,
width: 0,
height: 0,
fileSize: 177557,
photoTime: "2023-05-05T17:46:23.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_2_FF_20230506014604.jpg",
manualRequest: 0,
},
{
id: 37,
termId: 10010,
channelId: 2,
presetId: 255,
width: 0,
height: 0,
fileSize: 219467,
photoTime: "2023-05-05T17:47:31.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_2_FF_20230506014711.jpg",
manualRequest: 0,
},
{
id: 89,
termId: 10010,
channelId: 2,
presetId: 255,
width: 0,
height: 0,
fileSize: 257854,
photoTime: "2023-05-06T00:54:07.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_2_FF_20230506085401.jpg",
manualRequest: 0,
},
];
this.loading = true
getPictureList({
pageindex: this.page,
pagesize: this.pageSize
}).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);
});
},
//开始轮巡
@ -238,17 +188,14 @@ export default {
if (this.remainingTime <= 0) {
//等于0时 清除定时器，剩余时间等于总时间，从新执行当前轮巡函数
clearInterval(this.timer);
this.remainingTime = this.totalTime;
this.remainingTime = parseInt(localStorage.getItem('totalTime')) ? parseInt(localStorage.getItem('totalTime')) : 15;
this.startCountdown();
this.page++;
this.getPicData();
console.log(this.page);
if (this.page > this.totalPage) {
if (this.page >= this.totalPage) {
clearInterval(this.timer);
//alert("最后一页了");
this.page = 1;
this.page = 0;
this.startCountdown();
this.getPicData();
}
} else {
this.remainingTime--;
@ -273,12 +220,12 @@ export default {
},
computed: {},
mounted() {
//this.toggleCountdown();
this.toggleCountdown();
},
created() {},
beforeDestroy() {
console.log("销毁定时器");
// console.log("销毁定时器");
clearInterval(this.timer);
this.timer = null;
},

Write Preview
Loading…
Cancel
Save