|
|
<template>
|
|
|
<el-dialog
|
|
|
class="setTimeDialog"
|
|
|
title="时间表设置"
|
|
|
:visible.sync="isShow"
|
|
|
:close-on-click-modal="false"
|
|
|
width="680px"
|
|
|
>
|
|
|
<el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading">
|
|
|
<el-tab-pane label="查询实际时间表" name="1">
|
|
|
<div class="flexnr">
|
|
|
<div class="w8">通道:</div>
|
|
|
<el-select v-model="selaccess" placeholder="请选择" class="mr20">
|
|
|
<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="inquirebtn()">查询</el-button>
|
|
|
</div>
|
|
|
<div class="flexno bt30">
|
|
|
<div class="w8">时间表:</div>
|
|
|
<div class="w80 flexonly">
|
|
|
<el-tag
|
|
|
class="mr10 mt10"
|
|
|
size="mini"
|
|
|
v-for="(val, index) in this.shedulenr"
|
|
|
:key="index"
|
|
|
>{{ val }}</el-tag
|
|
|
>
|
|
|
</div>
|
|
|
</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>时间表类型</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="startTime"
|
|
|
label="开始时间"
|
|
|
show-overflow-tooltip
|
|
|
></el-table-column>
|
|
|
<el-table-column
|
|
|
prop="endTime"
|
|
|
label="结束时间"
|
|
|
show-overflow-tooltip
|
|
|
></el-table-column>
|
|
|
<el-table-column
|
|
|
prop="span"
|
|
|
label="间隔（分）"
|
|
|
show-overflow-tooltip
|
|
|
></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="text" @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
|
|
|
>
|
|
|
<!-- <el-form
|
|
|
label-position="left"
|
|
|
ref="formInfo"
|
|
|
label-width="100px"
|
|
|
v-loading="loading"
|
|
|
>
|
|
|
<el-form-item label="通道：">
|
|
|
<el-tree
|
|
|
:data="listnr"
|
|
|
show-checkbox
|
|
|
:props="defaultProps"
|
|
|
ref="tree"
|
|
|
node-key="id"
|
|
|
:default-expand-all="true"
|
|
|
></el-tree>
|
|
|
</el-form-item>
|
|
|
</el-form> -->
|
|
|
<div class="setTimeTd">
|
|
|
<h3>装置信息</h3>
|
|
|
<div class="tdSetBox">
|
|
|
<el-descriptions title="" :column="3" border>
|
|
|
<el-descriptions-item label="电压等级"
|
|
|
>220kV</el-descriptions-item
|
|
|
>
|
|
|
<el-descriptions-item label="线路名称">
|
|
|
线路</el-descriptions-item
|
|
|
>
|
|
|
<el-descriptions-item label="装置名称">
|
|
|
XYIGQ10C230300104</el-descriptions-item
|
|
|
>
|
|
|
</el-descriptions>
|
|
|
<h3>时间表规则</h3>
|
|
|
<el-descriptions title="" :column="3" border>
|
|
|
<el-descriptions-item label="开始时间">
|
|
|
12:00:07</el-descriptions-item
|
|
|
>
|
|
|
<el-descriptions-item label="结束时间">
|
|
|
16:00:07</el-descriptions-item
|
|
|
>
|
|
|
<el-descriptions-item label="时间间隔（分）">
|
|
|
<el-tag size="small">60</el-tag>
|
|
|
</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
|
|
|
<h3>选择通道</h3>
|
|
|
<div class="checkBox">
|
|
|
<el-checkbox-group v-model="checkList">
|
|
|
<el-checkbox label="通道1" border></el-checkbox>
|
|
|
<el-checkbox label="通道2" border></el-checkbox>
|
|
|
</el-checkbox-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button @click="isShowset = false">取 消</el-button>
|
|
|
<el-button type="primary" @click="submitForm()">确 定</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
<script>
|
|
|
import {
|
|
|
getChannelListJoggle,
|
|
|
getSchedulenr,
|
|
|
getScheduleRulelListJoggle,
|
|
|
setScheduleRulel,
|
|
|
getScheduleRulelAccessList,
|
|
|
} from "@/utils/api/index";
|
|
|
export default {
|
|
|
props: {
|
|
|
title: String,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
loading: true,
|
|
|
isShow: false,
|
|
|
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
|
|
|
checkList: [],
|
|
|
};
|
|
|
},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
|
handleClick(tab, event) {
|
|
|
console.log(tab, event);
|
|
|
},
|
|
|
//获取单个设备通道
|
|
|
getSingleAccess(id) {
|
|
|
this.selfacilityId = id;
|
|
|
getChannelListJoggle({ termid: id })
|
|
|
.then((res) => {
|
|
|
this.accesslist = res.data.list;
|
|
|
this.selaccess = res.data.list[0].channelid;
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
//查询时间表
|
|
|
inquirebtn() {
|
|
|
getSchedulenr({
|
|
|
channelid: this.selaccess,
|
|
|
terminalid: this.selfacilityId,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.$message.success("查询成功");
|
|
|
// this.shedulenr = res.data.list.join("; ")
|
|
|
this.shedulenr = res.data.list;
|
|
|
this.loading = false;
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
this.$message.error("查询失败");
|
|
|
});
|
|
|
},
|
|
|
//获取线路列表数据
|
|
|
deviceList() {
|
|
|
getScheduleRulelListJoggle({
|
|
|
pageindex: this.page,
|
|
|
pagesize: this.pageSize,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.deviceTableData = res.data.list;
|
|
|
this.total = res.data.total;
|
|
|
this.loading = false;
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
//点击分页
|
|
|
handleCurrentChange(val) {
|
|
|
this.page = val;
|
|
|
this.deviceList();
|
|
|
},
|
|
|
//设置-获取所有通道
|
|
|
handleSet(val) {
|
|
|
this.loading = true;
|
|
|
this.scheduleid = val.id;
|
|
|
this.isShowset = true;
|
|
|
getScheduleRulelAccessList({ termid: this.selfacilityId })
|
|
|
.then((res) => {
|
|
|
this.listnr = res.data.list;
|
|
|
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;
|
|
|
},
|
|
|
// 保存确定操作
|
|
|
submitForm() {
|
|
|
this.getCheckedNodes();
|
|
|
if (this.parmsList.length == 0)
|
|
|
return this.$message.error("通道不能为空");
|
|
|
setScheduleRulel({ ruleid: this.scheduleid, list: this.parmsList })
|
|
|
.then((res) => {
|
|
|
this.isShowset = false;
|
|
|
this.$message.success("添加成功");
|
|
|
this.deviceList();
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
this.$message.error("添加失败");
|
|
|
});
|
|
|
},
|
|
|
display() {
|
|
|
this.isShow = true;
|
|
|
},
|
|
|
hide() {
|
|
|
this.isShow = false;
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
.setTimeDialog {
|
|
|
.el-tabs__content {
|
|
|
height: 280px;
|
|
|
overflow: auto;
|
|
|
.el-tab-pane {
|
|
|
height: calc(100% - 16px);
|
|
|
}
|
|
|
}
|
|
|
.flexonly {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
.flexno {
|
|
|
display: flex;
|
|
|
margin-top: 24px;
|
|
|
padding: 0px 8px;
|
|
|
}
|
|
|
.flexnr {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-top: 16px;
|
|
|
padding: 0px 8px;
|
|
|
}
|
|
|
.mt10 {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
.mr10 {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
.w8 {
|
|
|
width: 8%;
|
|
|
}
|
|
|
.w80 {
|
|
|
width: 80%;
|
|
|
}
|
|
|
.mr20 {
|
|
|
margin-right: 20px;
|
|
|
}
|
|
|
.bt30 {
|
|
|
margin-bottom: 30px;
|
|
|
}
|
|
|
.deviceTable {
|
|
|
padding: 16px 8px 0 8px;
|
|
|
height: calc(100% - 16px);
|
|
|
}
|
|
|
}
|
|
|
.setRoadDialog {
|
|
|
.el-dialog__body {
|
|
|
height: 280px;
|
|
|
overflow: auto;
|
|
|
.el-form {
|
|
|
height: 100%;
|
|
|
//background: #fcc;
|
|
|
}
|
|
|
.setTimeTd {
|
|
|
h3 {
|
|
|
margin: 8px 0px;
|
|
|
font-size: 16px;
|
|
|
line-height: 24px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|