You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
370 lines
11 KiB
Vue
370 lines
11 KiB
Vue
<template>
|
|
<div class="deviceInformation">
|
|
<div class="deviceBox">
|
|
<div class="deviceBtnGroup">
|
|
<h4>拍照时间表设置</h4>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
@click.native.stop="handleAdddevice()"
|
|
>新增</el-button
|
|
>
|
|
</div>
|
|
<div class="deviceTable">
|
|
<el-table
|
|
ref="multipleTable"
|
|
:data="newList"
|
|
stripe
|
|
tooltip-effect="dark"
|
|
style="width: 100%"
|
|
height="calc(100% - 40px)"
|
|
@selection-change="handleSelectionChange"
|
|
@row-click="handleRowClick"
|
|
v-loading="loading"
|
|
>
|
|
<!-- <el-table-column type="index" width="55"> </el-table-column>
|
|
<el-table-column type="selection" width="55"> </el-table-column> -->
|
|
<template slot="empty">
|
|
<el-empty :image-size="160" description="暂无数据"></el-empty>
|
|
</template>
|
|
<el-table-column label="名称" show-overflow-tooltip>
|
|
<template slot-scope="scope">{{ scope.row.name }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="时间表规则">
|
|
<template slot-scope="scope">
|
|
<p
|
|
class="timeGz"
|
|
v-for="(val, index) in scope.row.listTime"
|
|
:key="index"
|
|
>
|
|
<span>
|
|
{{
|
|
new Date(val.startTime).getHours() < 10
|
|
? "0" + new Date(val.startTime).getHours()
|
|
: new Date(val.startTime).getHours()
|
|
}}:
|
|
{{
|
|
new Date(val.startTime).getMinutes() < 10
|
|
? "0" + new Date(val.startTime).getMinutes()
|
|
: new Date(val.startTime).getMinutes()
|
|
}}</span
|
|
>
|
|
|
|
~
|
|
<span
|
|
>{{
|
|
new Date(val.endTime).getHours() < 10
|
|
? "0" + new Date(val.endTime).getHours()
|
|
: new Date(val.endTime).getHours()
|
|
}}:
|
|
{{
|
|
new Date(val.endTime).getMinutes() < 10
|
|
? "0" + new Date(val.endTime).getMinutes()
|
|
: new Date(val.endTime).getMinutes()
|
|
}}</span
|
|
>
|
|
间隔：<b>{{ val.span }}分钟</b>
|
|
</p>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
prop="remark"
|
|
label="备注"
|
|
show-overflow-tooltip
|
|
></el-table-column>
|
|
<el-table-column fixed="right" label="操作" width="200">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
@click.native.stop="handleResive(scope.row)"
|
|
type="text"
|
|
>修改</el-button
|
|
>
|
|
<el-button
|
|
type="text"
|
|
class="deleteText"
|
|
@click.native.stop="handleDelete(scope.row)"
|
|
>删除</el-button
|
|
>
|
|
<el-button type="text" @click.native.stop="handleSet(scope.row)"
|
|
>设置</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="pageNation">
|
|
<el-pagination
|
|
@current-change="handleCurrentChange"
|
|
@size-change="handleSizeChange"
|
|
:current-page="page"
|
|
:page-size="pageSize"
|
|
layout="sizes, prev, pager, next, jumper,total"
|
|
:total="total"
|
|
background
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 新增时间表 -->
|
|
<adddeviceDialog :title="title" ref="adddeviceDialogref"></adddeviceDialog>
|
|
<!-- 设置时间表 -->
|
|
<setdevice ref="setdeviceDialogref"></setdevice>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getScheduleRulelListJoggle,
|
|
deleteScheduleRulel,
|
|
} from "@/utils/api/index";
|
|
import adddeviceDialog from "./components/adddeviceDialog.vue";
|
|
import setdevice from "./components/setdevice.vue";
|
|
|
|
export default {
|
|
components: {
|
|
adddeviceDialog,
|
|
setdevice,
|
|
},
|
|
data() {
|
|
return {
|
|
title: "", //弹窗标题
|
|
deviceTableData: [],
|
|
newList: [],
|
|
listTime: [],
|
|
//multipleSelection: [], //获取当前选中
|
|
page: 1, // 当前页数
|
|
pageSize: 20, // 每页数量
|
|
total: 0, //总条数
|
|
loading: true,
|
|
};
|
|
},
|
|
created() {
|
|
this.deviceList();
|
|
},
|
|
methods: {
|
|
//获取拍照时间表数据列表
|
|
deviceList() {
|
|
this.loading = true;
|
|
getScheduleRulelListJoggle({
|
|
pageindex: this.page,
|
|
pagesize: this.pageSize,
|
|
})
|
|
.then((res) => {
|
|
this.newList = [];
|
|
this.deviceTableData = res.data.list;
|
|
this.total = res.data.total;
|
|
this.loading = false;
|
|
// for (var i = 0; i < this.deviceTableData.list.length; i++) {
|
|
// console.log(this.deviceTableData.list[i]);
|
|
// }
|
|
console.log(this.deviceTableData);
|
|
|
|
for (var i = 0; i < this.deviceTableData.length; i++) {
|
|
var arr = [];
|
|
console.log(this.deviceTableData[i]);
|
|
for (var k = 0; k < this.deviceTableData[i].list.length; k++) {
|
|
if (k % 3 == 0) {
|
|
var obj = {};
|
|
obj.span =
|
|
this.deviceTableData[i].list[k].hour * 60 +
|
|
this.deviceTableData[i].list[k].minute;
|
|
console.log("时间间隔");
|
|
} else if (k % 3 == 1) {
|
|
console.log("开始时间");
|
|
console.log("a");
|
|
// obj.startTime =
|
|
// this.deviceTableData[i].list[k].hour +
|
|
// ":" +
|
|
// this.deviceTableData[i].list[k].minute;
|
|
// console.log(new Date());
|
|
let timeDate = new Date();
|
|
timeDate.setHours(this.deviceTableData[i].list[k].hour);
|
|
timeDate.setMinutes(this.deviceTableData[i].list[k].minute);
|
|
console.log(timeDate);
|
|
// console.log(new Date().getHours());
|
|
// console.log(
|
|
// new Date().setHours(this.deviceTableData[i].list[k].hour)
|
|
// );
|
|
// console.log(d.getHours() + ":" + d.getMinutes());
|
|
// if (timeDate.getHours() < 10) {
|
|
// console.log(timeDate.getHours());
|
|
// obj.startTime =
|
|
// "0" + timeDate.getHours() + ":" + timeDate.getMinutes();
|
|
// } else {
|
|
|
|
// }
|
|
|
|
// let timeHour =
|
|
// timeDate.getHours() < 10
|
|
// ? "0" + timeDate.getHours()
|
|
// : timeDate.getHours();
|
|
// let timeMinute =
|
|
// timeDate.getMinutes() < 10
|
|
// ? "0" + timeDate.getMinutes()
|
|
// : timeDate.getMinutes();
|
|
obj.startTime = timeDate.toUTCString();
|
|
} else if (k % 3 == 2) {
|
|
console.log("结束时间");
|
|
obj.endTime =
|
|
this.deviceTableData[i].list[k].hour +
|
|
":" +
|
|
this.deviceTableData[i].list[k].minute;
|
|
let timeDate = new Date();
|
|
timeDate.setHours(this.deviceTableData[i].list[k].hour);
|
|
timeDate.setMinutes(this.deviceTableData[i].list[k].minute);
|
|
// obj.endTime = c.toJSON();
|
|
let timeHour =
|
|
timeDate.getHours() < 10
|
|
? "0" + timeDate.getHours()
|
|
: timeDate.getHours();
|
|
let timeMinute =
|
|
timeDate.getMinutes() < 10
|
|
? "0" + timeDate.getMinutes()
|
|
: timeDate.getMinutes();
|
|
//obj.startTime = timeHour + ":" + timeMinute;
|
|
// obj.endTime = timeHour + ":" + timeMinute;
|
|
obj.endTime = timeDate.toUTCString();
|
|
arr.push(obj);
|
|
}
|
|
console.log(this.deviceTableData[i].list[k]);
|
|
}
|
|
this.newList.push({
|
|
id: this.deviceTableData[i].id,
|
|
list: this.deviceTableData[i].list,
|
|
name: this.deviceTableData[i].name,
|
|
remark: this.deviceTableData[i].remark,
|
|
listTime: arr,
|
|
});
|
|
}
|
|
console.log("this.newList");
|
|
console.log(this.newList);
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
//点击行选中
|
|
handleRowClick(row, column, event) {
|
|
this.$refs.multipleTable.toggleRowSelection(row);
|
|
},
|
|
//获取选中的行
|
|
handleSelectionChange(val) {
|
|
this.multipleSelection = val;
|
|
},
|
|
|
|
// 新建
|
|
handleAdddevice() {
|
|
this.title = "新增";
|
|
this.$refs.adddeviceDialogref.display();
|
|
this.$refs.adddeviceDialogref.getdataform(null);
|
|
},
|
|
|
|
//修改
|
|
handleResive(data) {
|
|
this.title = "修改";
|
|
this.$refs.adddeviceDialogref.display();
|
|
this.$refs.adddeviceDialogref.getdataform(data);
|
|
},
|
|
|
|
//设置
|
|
handleSet(data) {
|
|
this.$refs.setdeviceDialogref.display();
|
|
this.$refs.setdeviceDialogref.getdataform(data);
|
|
},
|
|
|
|
//删除数据
|
|
handleDelete(data) {
|
|
let deleteArr = [];
|
|
deleteArr.push({
|
|
id: data.id,
|
|
});
|
|
this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
deleteScheduleRulel({ list: deleteArr }).then((res) => {
|
|
this.deviceList(); //刷新
|
|
});
|
|
this.$message({
|
|
duration: 1500,
|
|
showClose: true,
|
|
type: "success",
|
|
message: "删除成功!",
|
|
});
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
duration: 1500,
|
|
showClose: true,
|
|
type: "info",
|
|
message: "已取消删除",
|
|
});
|
|
});
|
|
},
|
|
//点击分页
|
|
handleCurrentChange(val) {
|
|
this.page = val;
|
|
this.deviceList();
|
|
},
|
|
//每页条数
|
|
handleSizeChange(val) {
|
|
this.pageSize = val;
|
|
this.deviceList();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less">
|
|
.deviceInformation {
|
|
width: calc(100% - 24px);
|
|
height: calc(100% - 24px);
|
|
padding: 12px 12px;
|
|
background: @color-white;
|
|
|
|
.deviceBox {
|
|
border: 1px solid #dddddd;
|
|
height: calc(100% - 24px);
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
}
|
|
.deviceBtnGroup {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.deviceTable {
|
|
margin-top: 16px;
|
|
height: calc(100% - 48px);
|
|
//background: #fcc;
|
|
.rulesBox {
|
|
display: flex;
|
|
flex-direction: row;
|
|
li {
|
|
list-style: none;
|
|
margin-right: 24px;
|
|
line-height: 24px;
|
|
span {
|
|
margin-right: 4px;
|
|
}
|
|
.el-tag--small {
|
|
height: 16px;
|
|
padding: 0 8px;
|
|
line-height: 16px;
|
|
}
|
|
}
|
|
}
|
|
.timeGz {
|
|
line-height: 32px;
|
|
b {
|
|
font-weight: normal;
|
|
color: @color-primary;
|
|
}
|
|
span {
|
|
margin: 0px 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|