|
|
<template>
|
|
|
<el-dialog
|
|
|
class="photoSetDialog"
|
|
|
title="设置"
|
|
|
:visible.sync="isShow"
|
|
|
:close-on-click-modal="false"
|
|
|
width="1020px"
|
|
|
@close="handleclose"
|
|
|
>
|
|
|
<div class="setTimeTd">
|
|
|
<div class="ruleBox">
|
|
|
<h3>时间表规则</h3>
|
|
|
<div class="flexTimeGz">
|
|
|
<p class="timeGz" v-for="(val, index) in ruleSchedule" :key="index">
|
|
|
<span>
|
|
|
{{
|
|
|
val.startTime.substring(0, val.startTime.lastIndexOf(":"))
|
|
|
}}</span
|
|
|
>
|
|
|
~
|
|
|
<span>{{
|
|
|
val.endTime.substring(0, val.endTime.lastIndexOf(":"))
|
|
|
}}</span>
|
|
|
间隔：<b>{{ val.span }}分钟</b>
|
|
|
</p>
|
|
|
</div>
|
|
|
</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">
|
|
|
<el-tree
|
|
|
:data="newzzList"
|
|
|
show-checkbox
|
|
|
:props="defaultProps"
|
|
|
ref="tree"
|
|
|
node-key="id"
|
|
|
:default-expand-all="true"
|
|
|
@check-change="getCheckedNodes"
|
|
|
>
|
|
|
<div
|
|
|
v-if="!data.list"
|
|
|
class="custom-tree-node nodelist"
|
|
|
slot-scope="{ data }"
|
|
|
>
|
|
|
<span class="mr10">{{ data.name }}</span>
|
|
|
<div class="math">
|
|
|
偏移时间(分)：
|
|
|
<el-input-number
|
|
|
v-model="data.offsetNum"
|
|
|
:min="0"
|
|
|
:max="9"
|
|
|
></el-input-number>
|
|
|
</div>
|
|
|
<!-- <div class="deStatus" v-if="isactive == data.id">
|
|
|
<el-tag type="success" v-if="isCheck">下发成功</el-tag>
|
|
|
<el-tag type="" v-if="isCheck"
|
|
|
><i class="el-icon-loading"></i>下发中{{ data.id }}</el-tag
|
|
|
>
|
|
|
<el-tag type="danger" v-if="data.errortag">下发失败</el-tag>
|
|
|
</div> -->
|
|
|
</div>
|
|
|
<span v-else class="custom-tree-node" slot-scope="{ data }">
|
|
|
<span>{{ data.name }}</span>
|
|
|
</span>
|
|
|
</el-tree>
|
|
|
</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="handleclose">取 消</el-button>
|
|
|
<el-button type="primary" @click="submitForm()" :loading="sureloading"
|
|
|
>确 定</el-button
|
|
|
>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
<script>
|
|
|
import {
|
|
|
setScheduleRulel,
|
|
|
getScheduleRulelAccessList,
|
|
|
getTermListByChannelJoggle,
|
|
|
getCmaSchelduleUpload,
|
|
|
} from "@/utils/api/index";
|
|
|
export default {
|
|
|
props: {
|
|
|
title: String,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
isactive: "",
|
|
|
contentStyle: { width: "90px" },
|
|
|
isShow: false,
|
|
|
selid: 0, //选中时间表id
|
|
|
ruleSchedule: [], //时间表规则
|
|
|
checkedAisle: "", //选中通道数据
|
|
|
aisleList: [], //通道数据内容
|
|
|
listnr: [], //通道树状结构
|
|
|
defaultProps: {
|
|
|
children: "list",
|
|
|
label: "name",
|
|
|
},
|
|
|
termidArr: [],
|
|
|
ruleid: "",
|
|
|
parmsList: [], //选中的通道
|
|
|
multipleSelection: [],
|
|
|
//新是数据结构参数
|
|
|
newzzList: [],
|
|
|
zzListCheck: [],
|
|
|
loading: false,
|
|
|
|
|
|
//全选
|
|
|
checkAll: true,
|
|
|
isIndeterminate: true, //全选设置默认选中
|
|
|
timer: null,
|
|
|
termidArrNum: -1,
|
|
|
requestList: [],
|
|
|
|
|
|
timer: null,
|
|
|
i: 0,
|
|
|
isCheck: false,
|
|
|
checkNode: null,
|
|
|
zzsuccess: false,
|
|
|
zzpending: false,
|
|
|
zzerror: false,
|
|
|
|
|
|
allCheckNode: [], //获取选中的节点
|
|
|
|
|
|
requestArr: [], //通过requestid获取状态
|
|
|
termzzid: [],
|
|
|
flag: false,
|
|
|
sureloading: false,
|
|
|
};
|
|
|
},
|
|
|
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) => {});
|
|
|
},
|
|
|
|
|
|
//选择通道
|
|
|
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.newzzList);
|
|
|
|
|
|
//console.log(a);
|
|
|
this.newzzList = this.getChildren(this.newzzList);
|
|
|
console.log(this.newzzList);
|
|
|
this.loading = false;
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
//// 给数组里的每一个对象都添加一个isEdit属性
|
|
|
getChildren(data) {
|
|
|
console.log(data);
|
|
|
return data.map((item) => {
|
|
|
console.log(item);
|
|
|
item = Object.assign({}, item);
|
|
|
item.offsetNum = Math.floor(Math.random() * 10);
|
|
|
|
|
|
if (!!item.list && item.list.length > 0) {
|
|
|
item.list = this.getChildren(item.list);
|
|
|
}
|
|
|
return item;
|
|
|
});
|
|
|
},
|
|
|
handleCheckBox() {
|
|
|
console.log(this.zzListCheck);
|
|
|
},
|
|
|
|
|
|
// //获取所选值
|
|
|
getCheckedNodes(nodeObj) {
|
|
|
this.allCheckNode = this.$refs.tree.getCheckedNodes();
|
|
|
// console.log(this.allCheckNode);
|
|
|
console.log(nodeObj);
|
|
|
this.isactive = nodeObj.id;
|
|
|
this.isCheck = this.$refs.tree.getCheckedNodes().indexOf(nodeObj) > -1;
|
|
|
console.log(this.isCheck);
|
|
|
},
|
|
|
|
|
|
// 保存确定操作
|
|
|
submitForm() {
|
|
|
//console.log(this.termidArr);
|
|
|
this.sureSum();
|
|
|
},
|
|
|
//时间表
|
|
|
sureSum() {
|
|
|
//console.log(this.termidArr);
|
|
|
console.log(this.checkedAisle);
|
|
|
var ruleBox = [];
|
|
|
for (var i = 0; i < this.allCheckNode.length; i++) {
|
|
|
var parmsobj = {
|
|
|
termid: this.allCheckNode[i].id,
|
|
|
channelidlist: [this.checkedAisle],
|
|
|
offset: this.allCheckNode[i].offsetNum,
|
|
|
};
|
|
|
console.log(parmsobj);
|
|
|
ruleBox.push(parmsobj);
|
|
|
}
|
|
|
console.log(ruleBox);
|
|
|
setScheduleRulel({
|
|
|
list: ruleBox,
|
|
|
scheduleid: this.selid,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
this.requestList = res.data.list;
|
|
|
this.requestTime();
|
|
|
this.timer = window.setInterval(() => {
|
|
|
//console.log(this.requestList);
|
|
|
this.requestTime();
|
|
|
this.i++;
|
|
|
}, 3000);
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
message: "添加失败",
|
|
|
type: "error",
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
//根据requestid查询时间表下发状态
|
|
|
requestTime() {
|
|
|
this.sureloading = true;
|
|
|
getCmaSchelduleUpload({
|
|
|
list: this.requestList,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.requestArr = res.data.list;
|
|
|
this.requestList = this.requestArr.filter(function (
|
|
|
value,
|
|
|
index,
|
|
|
arr
|
|
|
) {
|
|
|
console.log(value, index, arr);
|
|
|
|
|
|
return value.status !== 1;
|
|
|
});
|
|
|
if (this.requestList.length == 0) {
|
|
|
this.zzsuccess = true;
|
|
|
this.$message.success("下发成功");
|
|
|
clearInterval(this.timer);
|
|
|
this.timer = null;
|
|
|
this.isShow = false;
|
|
|
this.sureloading = false;
|
|
|
} else if (this.i > 9) {
|
|
|
this.zzerror = true;
|
|
|
this.i = 0;
|
|
|
this.$message.warning("下发失败，请稍后再试！");
|
|
|
clearInterval(this.timer);
|
|
|
this.timer = null;
|
|
|
this.isShow = false;
|
|
|
this.sureloading = false;
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
display() {
|
|
|
this.isShow = true;
|
|
|
},
|
|
|
handleclose() {
|
|
|
this.isShow = false;
|
|
|
this.newzzList = [];
|
|
|
this.checkedAisle = "";
|
|
|
console.log(this.allCheckNode, "1111111111");
|
|
|
clearTimeout(this.timer);
|
|
|
this.timer = null;
|
|
|
this.sureloading = 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;
|
|
|
.el-tree {
|
|
|
flex: 1;
|
|
|
border: 1px solid #eee;
|
|
|
.el-tree-node {
|
|
|
.el-tree-node__content {
|
|
|
height: 40px;
|
|
|
border-bottom: 1px solid #eee;
|
|
|
.mr10 {
|
|
|
margin-right: 10px;
|
|
|
width: 180px;
|
|
|
}
|
|
|
.nodelist {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.math {
|
|
|
margin-left: 32px;
|
|
|
}
|
|
|
.deStatus {
|
|
|
margin-left: 24px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.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 {
|
|
|
.ruleBox {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
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: @color-primary;
|
|
|
}
|
|
|
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;
|
|
|
margin-top: 12px;
|
|
|
label {
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
}
|
|
|
.treeTable {
|
|
|
margin-top: 16px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|