|
|
<template>
|
|
|
<el-dialog
|
|
|
class="setTimeDialog"
|
|
|
title="拍照时间表设置"
|
|
|
:visible.sync="isShow"
|
|
|
:close-on-click-modal="false"
|
|
|
@close="handleclose"
|
|
|
width="1000px"
|
|
|
>
|
|
|
<el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading">
|
|
|
<el-tab-pane label="查询实际时间表" name="1">
|
|
|
<div class="timebox">
|
|
|
<div class="flexnr">
|
|
|
<div class="w8">选择通道:</div>
|
|
|
<el-select
|
|
|
v-model="selaccess"
|
|
|
placeholder="请选择"
|
|
|
class="mr20"
|
|
|
@change="changeSelect"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in accesslist"
|
|
|
:key="item.channelid"
|
|
|
:label="item.channelname"
|
|
|
:value="item.channelid"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
|
|
|
<!-- <el-button type="primary" @click="inquireRealbtn()"
|
|
|
>查询实际时间表</el-button
|
|
|
> -->
|
|
|
</div>
|
|
|
<div class="flexno bt30" v-if="this.shedulenr.length !== 0">
|
|
|
<div class="timehead">
|
|
|
<label>时间表规则:</label>
|
|
|
<p>ssssssssssss</p>
|
|
|
</div>
|
|
|
<div class="timeShow">
|
|
|
<div class="w8">时间表:</div>
|
|
|
<div class="w80 flexonly" v-loading="timeloading">
|
|
|
<el-tag
|
|
|
class="mr10 mt10"
|
|
|
size="mini"
|
|
|
v-for="(val, index) in this.shedulenr"
|
|
|
:key="index"
|
|
|
>{{ val }}</el-tag
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flexno bt30" v-else>暂无设置时间表</div>
|
|
|
<el-button class="searchBtn" type="text" @click="inquirebtn()"
|
|
|
>查询</el-button
|
|
|
>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="设置时间表" name="2">
|
|
|
<div class="deviceTable">
|
|
|
<el-table
|
|
|
ref="multipleTable"
|
|
|
:data="deviceTableData"
|
|
|
tooltip-effect="dark"
|
|
|
stripe
|
|
|
style="width: 100%"
|
|
|
height="calc(100% - 40px)"
|
|
|
>
|
|
|
<el-table-column label="名称" show-overflow-tooltip>
|
|
|
<template slot-scope="scope">{{ scope.row.name }}</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="时间表类型" show-overflow-tooltip>
|
|
|
<template>按时间段</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="时间表规则" width="300">
|
|
|
<template slot-scope="scope">
|
|
|
<p
|
|
|
class="timeGz"
|
|
|
v-for="(val, index) in scope.row.list"
|
|
|
:key="index"
|
|
|
>
|
|
|
<span>{{ val.startTime }}</span> ~
|
|
|
<span>{{ val.endTime }}</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="操作">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
@click.native.stop="handleSet(scope.row)"
|
|
|
>设置</el-button
|
|
|
>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<div class="pageNation">
|
|
|
<el-pagination
|
|
|
:current-page="page"
|
|
|
:page-size="pageSize"
|
|
|
layout=" prev, pager, next, jumper,total"
|
|
|
@current-change="handleCurrentChange"
|
|
|
:total="total"
|
|
|
background
|
|
|
>
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
class="setRoadDialog"
|
|
|
title="设置"
|
|
|
:visible.sync="isShowset"
|
|
|
:close-on-click-modal="false"
|
|
|
width="680px"
|
|
|
append-to-body
|
|
|
@close="closebtn"
|
|
|
>
|
|
|
<div class="setTimeTd">
|
|
|
<div class="tdSetBox">
|
|
|
<h3>装置信息</h3>
|
|
|
<el-descriptions title="" :column="3" border>
|
|
|
<el-descriptions-item label="电压等级">{{
|
|
|
deviceListData.dyname
|
|
|
}}</el-descriptions-item>
|
|
|
<el-descriptions-item label="线路名称">
|
|
|
{{ deviceListData.xlname }}</el-descriptions-item
|
|
|
>
|
|
|
<el-descriptions-item label="装置名称">
|
|
|
{{ deviceListData.zzname }}
|
|
|
</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
<h3>时间表规则</h3>
|
|
|
<p class="timename">时间表名称：{{ timeName }}</p>
|
|
|
<div class="flexTimeGz">
|
|
|
<p
|
|
|
class="timeGz"
|
|
|
v-for="(val, index) in scheduleInfo"
|
|
|
:key="index"
|
|
|
>
|
|
|
<span>{{ val.startTime }}</span> ~
|
|
|
<span>{{ val.endTime }}</span>
|
|
|
间隔：<b>{{ val.span }}分钟</b>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<h3>选择通道</h3>
|
|
|
<div class="checkBox">
|
|
|
<el-radio-group v-model="checkList" @change="handleChange">
|
|
|
<el-radio
|
|
|
:label="val.id"
|
|
|
border
|
|
|
v-for="val in zzchannel"
|
|
|
:key="val.id"
|
|
|
>{{ val.name }}</el-radio
|
|
|
>
|
|
|
</el-radio-group>
|
|
|
<!-- <el-checkbox-group v-model="checkList" @change="handleChange">
|
|
|
<el-checkbox
|
|
|
:label="val.id"
|
|
|
border
|
|
|
v-for="val in zzchannel"
|
|
|
:key="val.id"
|
|
|
>{{ val.name }}</el-checkbox
|
|
|
>
|
|
|
</el-checkbox-group> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button @click="closebtn">取 消</el-button>
|
|
|
<el-button type="primary" v-debounce="submitForm">确 定</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
<script>
|
|
|
import {
|
|
|
getChannelListJoggle,
|
|
|
getSchedulenr,
|
|
|
getScheduleRulelListJoggle,
|
|
|
setScheduleRulel,
|
|
|
getScheduleRulelAccessList,
|
|
|
selectPhotoTimeGetJoggle,
|
|
|
selectPhotoTimeJoggle,
|
|
|
getPhotoTimeJoggle,
|
|
|
} from "@/utils/api/index";
|
|
|
export default {
|
|
|
props: {
|
|
|
title: String,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
loading: true,
|
|
|
isShow: true,
|
|
|
isShowset: false,
|
|
|
activeName: "1", //选项卡
|
|
|
accesslist: [], //通道选择器
|
|
|
selaccess: "", //选中的通道
|
|
|
shedulenr: [], //查询的时间表
|
|
|
deviceTableData: [], //时间表-表格
|
|
|
page: 1, // 当前页数
|
|
|
pageSize: 10, // 每页数量
|
|
|
total: 0, //总条数
|
|
|
listnr: [], //通道树结构
|
|
|
defaultProps: {
|
|
|
children: "list",
|
|
|
label: "name",
|
|
|
},
|
|
|
selfacilityId: "", //所选设备id
|
|
|
ruleid: "", //线路id
|
|
|
parmsList: [], //所选装置下通道参数
|
|
|
scheduleid: 0, //所选时间表id
|
|
|
|
|
|
//设置-获取所有通道
|
|
|
timeName: "",
|
|
|
scheduleInfo: [],
|
|
|
//获取当前装置内容
|
|
|
deviceListData: {}, //当前装置信息
|
|
|
zzchannel: [], //当前装置通道
|
|
|
checkList: "", //选中的通道
|
|
|
newcmdzzid: "",
|
|
|
newrequestId: "",
|
|
|
timer: null, //定时器
|
|
|
timernum: 0,
|
|
|
timeloading: false,
|
|
|
};
|
|
|
},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
|
handleClick(tab, event) {
|
|
|
console.log(tab, event);
|
|
|
},
|
|
|
//获取单个设备通道
|
|
|
getSingleAccess(id, zzid) {
|
|
|
this.newcmdzzid = zzid;
|
|
|
this.selfacilityId = id;
|
|
|
getChannelListJoggle({ termid: id })
|
|
|
.then((res) => {
|
|
|
this.accesslist = res.data.list;
|
|
|
console.log(this.accesslist);
|
|
|
this.selaccess = res.data.list[0].channelid;
|
|
|
this.inquireRealbtn();
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
//选择通道查询
|
|
|
changeSelect(val) {
|
|
|
console.log(val);
|
|
|
console.log(this.selaccess);
|
|
|
},
|
|
|
//查询时间表
|
|
|
|
|
|
//查询真是时间时间表
|
|
|
inquirebtn() {
|
|
|
console.log(this.selaccess, this.selfacilityId, this.newcmdzzid);
|
|
|
this.timeloading = true;
|
|
|
selectPhotoTimeGetJoggle({
|
|
|
channel: this.selaccess,
|
|
|
termId: this.selfacilityId,
|
|
|
cmdId: this.newcmdzzid,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.$message.success("查询成功");
|
|
|
console.log(this.shedulenr);
|
|
|
this.newrequestId = res.data.requestId;
|
|
|
this.searchRealtime();
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
this.$message.error("查询失败");
|
|
|
});
|
|
|
},
|
|
|
searchRealtime() {
|
|
|
selectPhotoTimeJoggle({
|
|
|
channel: this.selaccess,
|
|
|
termId: this.selfacilityId,
|
|
|
cmdId: this.newcmdzzid,
|
|
|
requestId: this.newrequestId,
|
|
|
}).then((res) => {
|
|
|
console.log(res);
|
|
|
if (res.data.isNew == true && this.timernum < 10) {
|
|
|
clearInterval(this.timer);
|
|
|
this.timer = null;
|
|
|
this.inquirebtn();
|
|
|
this.timernum = 0;
|
|
|
} else if (res.data.isNew == false && this.timernum > 10) {
|
|
|
this.i = 0;
|
|
|
clearInterval(this.timer);
|
|
|
this.timer = null;
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
message: "时间表查询无响应，请稍后再试！",
|
|
|
type: "warning",
|
|
|
});
|
|
|
}
|
|
|
// if (res.data.isNew == true) {
|
|
|
// this.shedulenr = res.data.list;
|
|
|
// this.$message({
|
|
|
// message: "装置信息已更新",
|
|
|
// type: "success",
|
|
|
// });
|
|
|
// clearInterval(this.timer);
|
|
|
// }
|
|
|
});
|
|
|
},
|
|
|
|
|
|
//获取线路列表数据
|
|
|
deviceList() {
|
|
|
getScheduleRulelListJoggle({
|
|
|
pageindex: this.page,
|
|
|
pagesize: this.pageSize,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.deviceTableData = res.data.list;
|
|
|
this.total = res.data.total;
|
|
|
console.log(this.deviceTableData);
|
|
|
this.loading = false;
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
//点击分页
|
|
|
handleCurrentChange(val) {
|
|
|
this.page = val;
|
|
|
this.deviceList();
|
|
|
},
|
|
|
//设置-获取所有通道
|
|
|
handleSet(val) {
|
|
|
this.loading = true;
|
|
|
this.scheduleid = val.id;
|
|
|
this.isShowset = true;
|
|
|
console.log(val);
|
|
|
this.scheduleInfo = val.list;
|
|
|
this.timeName = val.name;
|
|
|
getScheduleRulelAccessList({ termid: this.selfacilityId })
|
|
|
.then((res) => {
|
|
|
this.listnr = res.data.list;
|
|
|
console.log("1111111111111111111");
|
|
|
console.log(this.listnr);
|
|
|
this.deviceListData = {
|
|
|
dyname: this.listnr[0].name,
|
|
|
dyid: this.listnr[0].id,
|
|
|
xlname: this.listnr[0].list[0].name,
|
|
|
xlid: this.listnr[0].list[0].id,
|
|
|
zzname: this.listnr[0].list[0].list[0].name,
|
|
|
zzcmid: this.listnr[0].list[0].list[0].cmdid,
|
|
|
zzid: this.listnr[0].list[0].list[0].id,
|
|
|
};
|
|
|
this.zzchannel = this.listnr[0].list[0].list[0].list;
|
|
|
console.log(this.deviceListData);
|
|
|
console.log(this.zzchannel);
|
|
|
this.this.loading = false;
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
//获取所选值
|
|
|
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;
|
|
|
},
|
|
|
//选择通道
|
|
|
handleChange() {
|
|
|
//console.log(this.listnr);
|
|
|
console.log(this.checkList);
|
|
|
// this.$refs.tree.setCheckedKeys(this.checkedAisle);
|
|
|
},
|
|
|
// 保存确定操作
|
|
|
submitForm() {
|
|
|
//this.getCheckedNodes();
|
|
|
|
|
|
console.log(this.deviceListData);
|
|
|
console.log(this.checkList);
|
|
|
console.log(this.scheduleid);
|
|
|
|
|
|
if (this.checkList.length == 0) {
|
|
|
this.$message.error("请选择通道");
|
|
|
} else {
|
|
|
setScheduleRulel({
|
|
|
scheduleid: this.scheduleid,
|
|
|
list: [
|
|
|
{
|
|
|
termid: this.deviceListData.zzid,
|
|
|
channelidlist: [this.checkList],
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.isShowset = false;
|
|
|
console.log(res);
|
|
|
// this.$message({
|
|
|
showClose: true,
|
|
|
message: '添加成功',type: 'success'
|
|
|
});;
|
|
|
console.log(this.checkList);
|
|
|
// this.$store.commit("SET_CHANNELID", this.checkList); //将通道保存在vuex中
|
|
|
// this.$store.commit("SET_TERMID", this.deviceListData.zzid); //将装置保存在vuex中
|
|
|
this.handlexfTime(this.deviceListData.zzid, this.checkList);
|
|
|
this.deviceList();
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
message: '添加失败',type: 'error'
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
//下发时间表
|
|
|
handlexfTime(termid, channelid) {
|
|
|
console.log("下发时间表");
|
|
|
console.log(termid);
|
|
|
console.log(channelid);
|
|
|
console.log("下发时间表结束");
|
|
|
getPhotoTimeJoggle({
|
|
|
channel: channelid,
|
|
|
termId: termid,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
if (res.code == 200) {
|
|
|
this.$message.success("拍照时间表设置下发成功");
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
closebtn() {
|
|
|
this.isShowset = false;
|
|
|
clearInterval(this.timer);
|
|
|
this.deviceList();
|
|
|
},
|
|
|
display() {
|
|
|
this.isShow = true;
|
|
|
},
|
|
|
hide() {
|
|
|
this.isShow = false;
|
|
|
},
|
|
|
handleclose() {
|
|
|
clearInterval(this.timer);
|
|
|
console.log("关闭轮询");
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
.setTimeDialog {
|
|
|
.el-tabs__content {
|
|
|
height: 400px;
|
|
|
overflow: auto;
|
|
|
.el-tab-pane {
|
|
|
height: calc(100% - 16px);
|
|
|
}
|
|
|
}
|
|
|
.timebox {
|
|
|
width: 410px;
|
|
|
margin: auto;
|
|
|
}
|
|
|
.flexonly {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-content: flex-start;
|
|
|
}
|
|
|
.flexno {
|
|
|
display: flex;
|
|
|
margin-top: 16px;
|
|
|
padding: 0px 8px;
|
|
|
flex-direction: column;
|
|
|
.timehead {
|
|
|
display: flex;
|
|
|
|
|
|
line-height: 32px;
|
|
|
margin-bottom: 8px;
|
|
|
label {
|
|
|
margin-right: 6px;
|
|
|
width: 80px;
|
|
|
}
|
|
|
.searchBtn {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
.timeShow {
|
|
|
display: flex;
|
|
|
}
|
|
|
}
|
|
|
.flexnr {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-top: 16px;
|
|
|
padding: 0px 8px;
|
|
|
}
|
|
|
.mt10 {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
.mr10 {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
.w8 {
|
|
|
width: 80px;
|
|
|
}
|
|
|
.w80 {
|
|
|
width: 80%;
|
|
|
overflow-y: auto;
|
|
|
height: 267px;
|
|
|
}
|
|
|
.mr20 {
|
|
|
margin-right: 20px;
|
|
|
}
|
|
|
|
|
|
.deviceTable {
|
|
|
padding: 16px 8px 0 8px;
|
|
|
height: calc(100% - 16px);
|
|
|
|
|
|
.el-table--small {
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
.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: 26px;
|
|
|
|
|
|
span {
|
|
|
margin: 0px 8px;
|
|
|
}
|
|
|
b {
|
|
|
font-weight: normal;
|
|
|
color: @color-primary;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.pageNation {
|
|
|
justify-content: flex-start;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.setRoadDialog {
|
|
|
.el-dialog__body {
|
|
|
height: 400px;
|
|
|
overflow: auto;
|
|
|
.el-form {
|
|
|
height: 100%;
|
|
|
//background: #fcc;
|
|
|
}
|
|
|
.setTimeTd {
|
|
|
h3 {
|
|
|
margin: 8px 0px;
|
|
|
font-size: 16px;
|
|
|
line-height: 24px;
|
|
|
}
|
|
|
.timename {
|
|
|
margin: 8px 0px;
|
|
|
}
|
|
|
.flexTimeGz {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
.timeGz {
|
|
|
line-height: 32px;
|
|
|
margin-right: 16px;
|
|
|
span {
|
|
|
margin: 0px 8px;
|
|
|
}
|
|
|
b {
|
|
|
font-weight: normal;
|
|
|
color: @color-primary;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|