master
fanluyan 2 years ago
parent 1e07473d04
commit c1e662b471

@ -1,117 +0,0 @@
<template>
<el-dialog
class="addLineDialog"
:title="title"
:visible.sync="isShow"
:close-on-click-modal="false"
width="470px"
>
<el-form
label-position="left"
ref="formInfo"
label-width="80px"
:rules="rules"
:model="formdata"
>
<el-form-item label="名称:" prop="name">
<el-input v-model="formdata.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="时间:" prop="time">
<el-time-picker
is-range
v-model="formdata.time"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
value-format="HH:mm:ss"
>
</el-time-picker>
</el-form-item>
<el-form-item label="间隔:" prop="span">
<!-- <el-input v-model="formdata.span" autocomplete="off" type="number"></el-input> -->
<el-input-number v-model="formdata.span" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="备注:" prop="remark">
<el-input v-model="formdata.remark" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="isShow = false"> </el-button>
<el-button type="primary" @click="submitForm()"> </el-button>
</div>
</el-dialog>
</template>
<script>
import { addScheduleRulel, updateScheduleRulel } from "@/utils/api/index";
export default {
props: {
title: String,
},
data() {
return {
isShow: false,
formdata: {},
rules: {
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
time: [{ required: true, message: "请选择时间", trigger: "blur" }],
span: [{ required: true, message: "请输入间隔", trigger: "blur" }],
remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
},
};
},
methods: {
//
getdataform(val) {
console.log(val);
if (val == null) {
return (this.formdata = {});
}
this.formdata = val;
this.$set(this.formdata, "time", [val.startTime, val.endTime]);
},
//
submitForm() {
this.$refs.formInfo.validate((valid) => {
if (valid) {
this.formdata.startTime = this.formdata.time[0];
this.formdata.endTime = this.formdata.time[1];
delete this.formdata.time;
if (this.title == "新增") {
let formArr = [];
formArr.push(this.formdata);
addScheduleRulel({ list: formArr })
.then((res) => {
this.isShow = false;
this.$message.success("添加成功");
this.$parent.deviceList();
})
.catch((err) => {
this.$message.error("添加失败");
});
} else {
updateScheduleRulel(this.formdata)
.then((res) => {
this.isShow = false;
this.$message.success("修改成功");
this.$parent.deviceList();
})
.catch((err) => {
this.$message.error("修改失败");
});
}
} else {
console.log("error submit!!");
return false;
}
});
},
display() {
this.isShow = true;
},
hide() {
this.isShow = false;
},
},
mounted() {},
};
</script>

@ -0,0 +1,373 @@
<template>
<el-dialog
class="photoSetDialog"
title="设置"
:visible.sync="isShow"
:close-on-click-modal="false"
width="1020px"
>
<div class="setTimeTd">
<h3>时间表规则</h3>
<div class="flexTimeGz">
<p class="timeGz" v-for="(val, index) in ruleSchedule" :key="index">
<span>{{ val.startTime }}</span> ~
<span>{{ val.endTime }}</span>
间隔<b>{{ val.span }}分钟</b>
</p>
</div>
<h3>设置通道</h3>
<div class="chooseTDBox">
<label>选择通道:</label>
<div class="checkBox">
<el-radio-group v-model="checkedAisle" @change="handleChange">
<el-radio
:label="val.id"
border
v-for="val in aisleList"
:key="val.id"
>{{ val.name }}</el-radio
>
</el-radio-group>
</div>
</div>
<div class="flexnr" v-loading="loading" v-if="newzzList.length !== 0">
<div class="dybox" v-for="(dyitem, index) in newzzList" :key="index">
<h4>电压等级{{ dyitem.name }}</h4>
<div
class="xlbox"
v-for="(xlitem, index) in dyitem.list"
:key="index"
>
<div class="zzbox">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="xlitem.isCheck"
@change="handleCheckAllChange(item.isCheck, index)"
>
<h4>线路{{ xlitem.name }}</h4>
</el-checkbox>
<el-checkbox-group v-model="zzListCheck" @change="handleCheckBox">
<el-checkbox
:label="zzitem.id"
v-for="(zzitem, index) in xlitem.list"
:key="index"
>{{ zzitem.displayName }}
<b v-if="false" class="zzstatus"></b>
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
</div>
<div class="flexnr" v-else>
<p class="nochannel">暂无通道</p>
</div>
</div>
<div slot="footer" class="dialog-footer">
<!-- <el-button @click="getCheckedNodes"></el-button> -->
<el-button @click="isShow = false"> </el-button>
<el-button type="primary" @click="submitForm()"> </el-button>
</div>
</el-dialog>
</template>
<script>
import {
setScheduleRulel,
getScheduleRulelAccessList,
getTermListByChannelJoggle,
} from "@/utils/api/index";
export default {
props: {
title: String,
},
data() {
return {
contentStyle: { width: "90px" },
isShow: false,
selid: 0, //id
ruleSchedule: [], //
checkedAisle: "", //
aisleList: [], //
listnr: [], //
defaultProps: {
children: "list",
label: "name",
},
ruleid: "",
parmsList: [], //
multipleSelection: [],
//
newzzList: [],
zzListCheck: [],
loading: false,
//
checkAll: true,
isIndeterminate: true, //
};
},
mounted() {},
methods: {
//
getdataform(val) {
this.selid = val.id;
this.ruleSchedule = val.list;
console.log(this.ruleSchedule, "时间规则");
this.getlistnr();
},
//
getlistnr() {
getScheduleRulelAccessList({})
.then((res) => {
this.listnr = res.data.list;
this.aisleList = res.data.channellist;
})
.catch((err) => {});
},
//q
handleCheckAllChange(val, index) {
let arr = [];
const re = this.data[index].children;
//
if (val) {
for (let i = 0; i < re.length; i++) {
arr[i] = re[i]["value"];
}
}
this.data[index].checkedData = arr;
this.data[index].isIndeterminate = false;
},
//
handleChange() {
console.log(this.checkedAisle);
this.loading = true;
getTermListByChannelJoggle({
id: this.checkedAisle,
})
.then((res) => {
console.log(res);
this.newzzList = res.data.list;
console.log(this.zzListCheck);
this.loading = false;
})
.catch((err) => {});
},
handleCheckBox() {
console.log(this.zzListCheck);
},
//
eachTreeData(data, callback, childKey) {
if (!childKey) childKey = "children";
data.forEach((d) => {
if (callback(d) !== false && d[childKey])
this.eachTreeData(d[childKey], callback, childKey);
});
},
// keykey
addKeyToList(data) {
let key = 0;
this.eachTreeData(data, (d) => {
d.key = key++;
});
},
//
getCheckedNodes() {
this.parmsList = [];
const checkedNodes = this.$refs.tree.getCheckedNodes(false, true); //
//const checkedParam = []; //
let index = -1;
// console.log(checkedNodes);
if (checkedNodes.length !== 0) {
checkedNodes.forEach((item) => {
// list
if (item.list !== undefined) {
index++;
this.parmsList[index] = {
//name: item.name,
termid: item.id,
channelidlist: [],
};
} else {
//list id push channelidlist
this.parmsList[index].channelidlist.push(item.id);
}
//bsManufacturer 线 线id
// if (item.bsManufacturer !== undefined) {
// this.ruleid = item.id;
// console.log(this.ruleid);
// }
});
}
// console.log(this.parmsList);
//channelichilddlist
this.parmsList = this.parmsList
.filter((item) => item.channelidlist.length !== 0)
.map((item) => {
return {
termid: item.termid,
channelidlist: item.channelidlist,
};
});
console.log(this.parmsList);
return this.parmsList;
},
//
submitForm() {
console.log(this.zzListCheck);
console.log(this.checkedAisle);
let checkzzList = [];
for (let i = 0; i < this.zzListCheck.length; i++) {
console.log(this.zzListCheck[i]);
checkzzList.push({
termid: this.zzListCheck[i],
channelidlist: [this.checkedAisle],
});
}
console.log(checkzzList);
if (this.zzListCheck.length == 0) {
this.$message.error("请选择通道");
} else {
setScheduleRulel({
scheduleid: this.selid,
list: checkzzList,
})
.then((res) => {
this.isShow = false;
this.$message.success("添加成功");
this.$parent.deviceList();
})
.catch((err) => {
this.$message.error("添加失败");
});
}
// if (this.parmsList.length == 0)
// return this.$message.error("");
// setScheduleRulel({ list: this.parmsList, ruleid: this.selid })
// .then((res) => {
// this.isShow = false;
// this.$message.success("");
// this.$parent.deviceList();
// })
// .catch((err) => {
// this.$message.error("");
// });
},
display() {
this.isShow = true;
},
hide() {
this.isShow = false;
},
},
};
</script>
<style lang="less">
.photoSetDialog {
.el-dialog__body {
// height: 360px;
// overflow: auto;
}
.flexnr {
height: 360px;
overflow: auto;
display: flex;
align-items: flex-start;
border: 1px solid #eee;
padding: 16px;
border-radius: 4px;
.dybox {
h4 {
font-size: 14px;
color: #333;
line-height: 24px;
font-weight: normal;
}
.xlbox {
h4 {
font-size: 14px;
color: #333;
line-height: 24px;
font-weight: normal;
}
margin-left: 16px;
.zzbox {
h4 {
}
.el-checkbox-group {
// display: flex;
// flex-direction: column;
margin-left: 22px;
.el-checkbox {
line-height: 28px;
//width: 196px;
.el-checkbox__label {
b {
margin-left: 18px;
font-weight: normal;
font-size: 12px;
}
}
}
}
}
}
}
.nochannel {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
.w50 {
width: 50px;
}
.setTimeTd {
h3 {
margin: 8px 0px;
font-size: 16px;
line-height: 24px;
}
.flexTimeGz {
display: flex;
flex-wrap: wrap;
.timeGz {
line-height: 32px;
margin-right: 16px;
b {
font-weight: normal;
color: #409eff;
}
span {
margin: 0px 8px;
}
}
}
.setCheckbox {
.el-table__header .el-table-column--selection .cell .el-checkbox:after {
color: #333;
content: "全选";
font-size: 16px;
margin-left: 12px;
font-weight: bold;
}
}
}
.chooseTDBox {
display: flex;
align-items: center;
margin-bottom: 8px;
label {
margin-right: 8px;
}
}
.treeTable {
margin-top: 16px;
}
}
</style>

@ -31,34 +31,19 @@
</div> </div>
</div> </div>
<div class="flexnr" v-loading="loading" v-if="newzzList.length !== 0"> <div class="flexnr" v-loading="loading" v-if="newzzList.length !== 0">
<div class="dybox" v-for="(dyitem, index) in newzzList" :key="index"> <el-tree
<h4>电压等级{{ dyitem.name }}</h4> :data="newzzList"
<div show-checkbox
class="xlbox" :props="defaultProps"
v-for="(xlitem, index) in dyitem.list" ref="tree"
:key="index" node-key="id"
:default-expand-all="true"
> >
<div class="zzbox"> <span class="custom-tree-node" slot-scope="{ node, data }">
<el-checkbox <span>{{ data.name }}</span>
:indeterminate="isIndeterminate" <span v-if="data.list == ''" class="zzdown"> </span>
v-model="xlitem.index" </span>
@change="handleCheckAllChange" </el-tree>
>
<h4>线路{{ xlitem.name }}</h4>
</el-checkbox>
<el-checkbox-group v-model="zzListCheck" @change="handleCheckBox">
<el-checkbox
:label="zzitem.id"
v-for="(zzitem, index) in xlitem.list"
:key="index"
:checked="checked"
>{{ zzitem.displayName }}
<b v-if="false" class="zzstatus"></b>
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
</div> </div>
<div class="flexnr" v-else> <div class="flexnr" v-else>
<p class="nochannel">暂无通道</p> <p class="nochannel">暂无通道</p>
@ -96,55 +81,12 @@ export default {
}, },
ruleid: "", ruleid: "",
parmsList: [], // parmsList: [], //
tableData: [
{
id: 2,
date: "220kv",
name: "线路11",
address: "asdadadadad",
children: [
{
id: 31,
date: "220kv",
name: "线路11",
address: "asdadadadad",
},
{
id: 32,
date: "220kv",
name: "线路11",
address: "asdadadadad",
},
],
},
{
id: 3,
date: "220kv",
name: "线路11",
address: "asdadadadad",
children: [
{
id: 31,
date: "220kv",
name: "线路11",
address: "asdadadadad",
},
{
id: 32,
date: "220kv",
name: "线路11",
address: "asdadadadad",
},
],
},
],
multipleSelection: [], multipleSelection: [],
// //
newzzList: [], newzzList: [],
zzListCheck: [], zzListCheck: [],
loading: false, loading: false,
checked: false,
// //
checkAll: true, checkAll: true,
isIndeterminate: true, // isIndeterminate: true, //
@ -164,15 +106,12 @@ export default {
getScheduleRulelAccessList({}) getScheduleRulelAccessList({})
.then((res) => { .then((res) => {
this.listnr = res.data.list; this.listnr = res.data.list;
this.aisleList = res.data.channellist; this.aisleList = res.data.channellist;
}) })
.catch((err) => {}); .catch((err) => {});
}, },
//q
handleCheckAllChange(val) {
console.log(val);
this.isIndeterminate = false;
},
// //
handleChange() { handleChange() {
console.log(this.checkedAisle); console.log(this.checkedAisle);
@ -183,7 +122,8 @@ export default {
.then((res) => { .then((res) => {
console.log(res); console.log(res);
this.newzzList = res.data.list; this.newzzList = res.data.list;
this.checked = true; console.log(this.listnr);
console.log(this.newzzList);
console.log(this.zzListCheck); console.log(this.zzListCheck);
this.loading = false; this.loading = false;
}) })
@ -333,8 +273,8 @@ export default {
h4 { h4 {
} }
.el-checkbox-group { .el-checkbox-group {
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
margin-left: 22px; margin-left: 22px;
.el-checkbox { .el-checkbox {
line-height: 28px; line-height: 28px;

@ -1,279 +0,0 @@
<template>
<el-dialog
class="addPhotoDialog"
:title="photoDialogTitle"
:visible.sync="photoDialog"
width="660px"
>
<el-form
label-position="left"
label-width="98px"
ref="formPhotoInfo"
:rules="rules"
:model="formInfo"
>
<el-form-item label="线路" prop="channelVal" required>
<el-select
v-model="formInfo.channelVal"
multiple
placeholder="请选择"
@change="changeChannelId"
>
<el-option
v-for="item in channelOptions"
:key="item.id"
:label="item.channelname"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="杆塔:" prop="towerid" required>
<el-select
v-model="formInfo.towerid"
placeholder="请选择"
@change="changetowerid"
>
<el-option
v-for="item in toweridOptions"
:key="item.id"
:label="item.lineName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="装置ID" prop="cmdid" required>
<el-input v-model="formInfo.cmdid" auto-complete="on"></el-input>
</el-form-item>
<el-form-item label="SIM卡" prop="simCard">
<el-input v-model="formInfo.simCard" auto-complete="on"></el-input>
</el-form-item>
<el-form-item label="通道:" prop="channelVal">
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox label="备选项1" border></el-checkbox>
<el-checkbox label="备选项2" border></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialog(0)"> </el-button>
<el-button type="primary" @click="submitForm()"> </el-button>
</div>
</el-dialog>
</template>
<script>
import {
addTerminalJoggle,
updateTerminalJoggle,
getAllChannelListJoggle,
getAllTowerJoggle,
} from "@/utils/api/index";
export default {
props: {
photoDialog: {
type: Boolean,
},
photoDialogTitle: {
type: String,
default: "新增",
},
formItem: {
type: Object,
default: function () {
return {};
},
},
},
data() {
let validCmid = (rule, value, callback) => {
let reg = /^[0-9A-Za-z]{17}$/;
if (!reg.test(value)) {
callback(new Error("装置id位17位编码"));
} else {
callback();
}
};
return {
checkboxGroup1: [],
page: 1, //
pageSize: 10, //
channelOptions: "",
channelArr: [],
toweridOptions: "",
toweridVal: "",
formInfo: {},
rules: {
cmdid: [
{ required: true, message: "请输入装置ID", trigger: "blur" },
{ validator: validCmid, trigger: "blur" },
],
},
//
formArr: [],
};
},
methods: {
//
submitForm() {
this.$refs.formPhotoInfo.validate((valid) => {
if (valid) {
console.log(this.channelArr);
let formObj = {
bsIdentifier: this.formInfo.bsIdentifier,
bsManufacturer: this.formInfo.bsManufacturer,
bsProductionDate: this.formInfo.bsProductionDate,
cmdid: this.formInfo.cmdid,
displayName: this.formInfo.displayName,
equipName: this.formInfo.equipName,
essentialInfoVersion: this.formInfo.essentialInfoVersion,
hasPan: this.formInfo.hasPan,
latitude: this.formInfo.latitude,
//lineid: this.formInfo.lineid,
longitude: this.formInfo.longitude,
model: this.formInfo.model,
orgId: this.formInfo.orgId,
towerid: this.formInfo.towerid,
};
this.formArr.push(formObj);
console.log(this.formArr);
//
if (this.photoDialogTitle == "新增") {
addTerminalJoggle({ list: this.formArr })
.then((res) => {
console.log(res);
this.$emit("photoDialogClose", 1); //
this.formArr = [];
this.$message.success("添加成功");
})
.catch((err) => {
console.log(err); //
this.$message.error("添加失败");
});
} else if (this.photoDialogTitle == "修改") {
let changeformObj = {
bsIdentifier: this.formInfo.bsIdentifier,
bsManufacturer: this.formInfo.bsManufacturer,
bsProductionDate: this.formInfo.bsProductionDate,
cmdid: this.formInfo.cmdid,
displayName: this.formInfo.displayName,
equipName: this.formInfo.equipName,
essentialInfoVersion: this.formInfo.essentialInfoVersion,
hasPan: this.formInfo.hasPan,
latitude: this.formInfo.latitude,
// lineid: this.formInfo.lineid,
longitude: this.formInfo.longitude,
model: this.formInfo.model,
orgId: this.formInfo.orgId,
towerid: this.formInfo.towerid,
id: this.formInfo.id,
};
updateTerminalJoggle(changeformObj)
.then((res) => {
console.log(res);
this.$emit("photoDialogClose", 1); //
this.$message.success("修改成功");
})
.catch((err) => {
console.log(err); //
this.$message.error("修改失败");
});
}
} else {
console.log("error submit!!");
return false;
}
});
},
//
closeDialog(flag) {
this.$refs.formPhotoInfo.resetFields();
this.formInfo.hasPan = 0;
this.$emit("photoDialogClose", flag);
},
//
getChannel() {
getAllChannelListJoggle()
.then((res) => {
this.channelOptions = res.data.list;
console.log(this.channelOptions);
})
.catch((err) => {
console.log(err);
});
},
//
getTowerid() {
getAllTowerJoggle()
.then((res) => {
this.toweridOptions = res.data.list;
console.log(this.channelOptions);
})
.catch((err) => {
console.log(err);
});
},
//id
changeChannelId(val) {
console.log(val);
this.channelArr = val;
},
//id
changetowerid(val) {
let opt = {};
opt = this.toweridOptions.find((item) => {
return item.lineName;
});
// let channelObj = {};
// channelObj = this.channelOption.find(function (i) {
// return i.value;
// });
console.log(opt.lineName);
//this.toweridVal = val;
},
},
mounted() {
console.log("打印传过来的对象", this.formItem);
console.log("打印传过来的对象", this.formItem.bsIdentifier);
this.formInfo = JSON.parse(JSON.stringify(this.formItem));
},
created() {
this.getChannel();
this.getTowerid();
},
watch: {
formItem: {
handler(newVal, oldVal) {
//
this.$nextTick(() => {
this.formInfo = JSON.parse(JSON.stringify(this.formItem));
});
},
immediate: true,
deep: true,
},
},
};
</script>
<style lang="less">
.addPhotoDialog {
.el-dialog {
.el-form {
//display: flex;
// flex-wrap: wrap;
.el-form-item {
// width: 260px;
// margin-right: 16px;
.el-select {
width: 100%;
}
.el-form-item__label {
padding-right: 0px;
}
}
}
}
}
</style>

@ -1,351 +0,0 @@
<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">
<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 {
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: "倒序",
},
],
value: "选项1",
page: 1, //
pageSize: 4, //
totalPage: 0, //
total: 0, //
picList: [], //
basUrl: "",
remainingTime: 15, //
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) {},
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) => {
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) {
//0
clearInterval(this.timer);
this.remainingTime = parseInt(localStorage.getItem("totalTime"))
? parseInt(localStorage.getItem("totalTime"))
: 15;
this.startCountdown();
this.page++;
this.getPicData();
if (this.page >= this.totalPage) {
console.log("最后一页");
clearInterval(this.timer);
this.page = 1;
this.startCountdown();
}
} 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 {
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>

@ -565,7 +565,7 @@ export default {
.w80 { .w80 {
width: 80%; width: 80%;
overflow-y: auto; overflow-y: auto;
height: 250px; height: 210px;
} }
.mr20 { .mr20 {
margin-right: 20px; margin-right: 20px;

Loading…
Cancel
Save