xymp
/
frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加获取当前选中的节点

Browse Source
master
Fluyan 2 years ago
parent bde66f5805
commit 01eb96413e
4 changed files with 363 additions and 12162 deletions
Show Stats Download Patch File Download Diff File

12159
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

70
src/views/devicePhotoSchedule/components/setdevice.vue
Unescape Escape View File

@ -6,7 +6,7 @@
:close-on-click-modal="false"
width="40%"
>
<el-form
<!-- <el-form
label-position="left"
ref="formInfo"
label-width="100px"
@ -21,10 +21,17 @@
ref="tree"
node-key="id"
:default-expand-all="true"
@check-change="handleCheckChange"
></el-tree>
</el-form-item>
</el-form>
</el-form> -->
<el-tree
:data="listnr"
show-checkbox
:props="defaultProps"
ref="tree"
node-key="id"
:default-expand-all="true"
></el-tree>
<div slot="footer" class="dialog-footer">
<el-button @click="getCheckedNodes">获取</el-button>
<el-button @click="isShow = false">取 消</el-button>
@ -54,6 +61,8 @@ export default {
label: "name",
},
selid: 0,
ruleid: "",
parmsList: [],
};
},
mounted() {
@ -77,31 +86,53 @@ export default {
})
.catch((err) => {});
},
handleCheckChange(data, checked, indeterminate) {
//获取所有选中的节点 start
if (checked == true) {
console.log(checked, indeterminate);
console.log(data);
//获取所有选中的节点 end
}
},
//获取所选值
getCheckedNodes() {
console.log(this.$refs.tree);
console.log("当前选中的id是" + this.$refs.tree.getCheckedKeys(true));
console.log("当前选中的id是" + this.$refs.tree.getCheckedKeys(false));
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.$refs.formInfo.validate((valid) => {
if (valid) {
setScheduleRulel({ list: formArr })
setScheduleRulel({ ruleid: this.ruleid, list: this.parmsList })
.then((res) => {
this.isShow = false;
this.$message.success("添加成功");
@ -111,6 +142,7 @@ export default {
this.$message.error("添加失败");
});
} else {
console.log({ ruleid: this.ruleid, list: this.parmsList });
console.log("error submit!!");
return false;
}

265
src/views/realTimeMonitor/components/setschedule.vue
Unescape Escape View File

@ -1,47 +1,108 @@
<template>
<el-dialog class="addLineDialog" title="时间表设置" :visible.sync="isShow" :close-on-click-modal="false" width="60%" >
<el-dialog
class="addLineDialog"
title="时间表设置"
:visible.sync="isShow"
:close-on-click-modal="false"
width="60%"
>
<el-tabs v-model="activeName" @tab-click="handleClick">
<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.id" :label="item.channelName" :value="item.id"></el-option>
<el-option
v-for="item in accesslist"
:key="item.id"
:label="item.channelName"
:value="item.id"
></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>
<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" style="width: 100%" height="calc(100% - 40px)">
<el-table
ref="multipleTable"
:data="deviceTableData"
tooltip-effect="dark"
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
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="操作" width="200">
<template slot-scope="scope">
<el-button type="text" @click.native.stop="handleSet(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-page="page" :page-size="pageSize" layout=" prev, pager, next, jumper,total"
@current-change="handleCurrentChange" :total="total" background >
<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="addLineDialog" title="设置" :visible.sync="isShowset" :close-on-click-modal="false" width="40%" append-to-body>
<el-form label-position="left" ref="formInfo" label-width="100px" >
<el-dialog
class="addLineDialog"
title="设置"
:visible.sync="isShowset"
:close-on-click-modal="false"
width="40%"
append-to-body
>
<el-form label-position="left" ref="formInfo" label-width="100px">
<el-form-item label="通道：">
<el-tree :data="listnr" show-checkbox :props="defaultProps" ref="tree" node-key="id" ></el-tree>
<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 slot="footer" class="dialog-footer">
@ -55,64 +116,80 @@
</el-dialog>
</template>
<script>
import { getChannelListJoggle, getSchedulenr,getScheduleRulelListJoggle, setScheduleRulel,getScheduleRulelAccessList } from "@/utils/api/index";
import {
getChannelListJoggle,
getSchedulenr,
getScheduleRulelListJoggle,
setScheduleRulel,
getScheduleRulelAccessList,
} from "@/utils/api/index";
export default {
props: {
title:String
title: String,
},
data() {
return {
isShow: false,
isShowset:false,
activeName: '1',//选项卡
accesslist:[],//通道选择器
selaccess:'',//选中的通道
shedulenr:[],//查询的时间表
deviceTableData: [],//时间表-表格
isShowset: false,
activeName: "1", //选项卡
accesslist: [], //通道选择器
selaccess: "", //选中的通道
shedulenr: [], //查询的时间表
deviceTableData: [], //时间表-表格
page: 1, // 当前页数
pageSize: 10, // 每页数量
total: 0, //总条数
listnr: [],//通道树结构
listnr: [], //通道树结构
defaultProps: {
children: 'list',
label: 'name'
children: "list",
label: "name",
},
selfacilityId:''//所选设备id
selfacilityId: "", //所选设备id
ruleid: "", //线路id
parmsList: [], //装置下通道参数
};
},
mounted() {
},
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].id
}).catch((err) => {});
getSingleAccess(id) {
this.selfacilityId = id;
getChannelListJoggle({ termid: id })
.then((res) => {
this.accesslist = res.data.list;
this.selaccess = res.data.list[0].id;
})
.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
inquirebtn() {
getSchedulenr({
channelid: this.selaccess,
terminalid: this.selfacilityId,
})
.catch((err) => {
this.$message.error("查询失败");
});
.then((res) => {
this.$message.success("查询成功");
// this.shedulenr = res.data.list.join("; ")
this.shedulenr = res.data.list;
})
.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
getScheduleRulelListJoggle({
pageindex: this.page,
pagesize: this.pageSize,
})
.catch((err) => {});
.then((res) => {
this.deviceTableData = res.data.list;
this.total = res.data.total;
})
.catch((err) => {});
},
//点击分页
handleCurrentChange(val) {
@ -120,28 +197,68 @@ export default {
this.deviceList();
},
//设置-获取所有通道
handleSet(val){
this.isShowset=true
getScheduleRulelAccessList({ termid:this.selfacilityId }).then((res) => {
this.listnr = res.data.list
}).catch((err) => {});
handleSet(val) {
this.isShowset = true;
getScheduleRulelAccessList({ termid: this.selfacilityId })
.then((res) => {
this.listnr = res.data.list;
})
.catch((err) => {});
},
//获取所选值
getCheckedNodes() {
console.log(this.$refs.tree.getCheckedNodes());
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) => {
console.log(item);
return {
termid: item.termid,
channelidlist: item.channelidlist,
};
});
console.log(this.parmsList);
return this.parmsList;
},
// 保存确定操作
submitForm() {
this.$refs.formInfo.validate((valid) => {
if (valid) {
setScheduleRulel({ list: formArr }).then((res) => {
this.isShowset = false
this.$message.success("添加成功");
this.$parent.deviceList()
})
.catch((err) => {
this.$message.error("添加失败");
});
setScheduleRulel({ ruleid: this.ruleid, list: this.parmsList })
.then((res) => {
this.isShowset = false;
this.$message.success("添加成功");
this.$parent.deviceList();
})
.catch((err) => {
this.$message.error("添加失败");
});
} else {
console.log("error submit!!");
return false;
@ -149,44 +266,44 @@ export default {
});
},
display() {
this.isShow = true
this.isShow = true;
},
hide() {
this.isShow = false
}
}
this.isShow = false;
},
},
};
</script>
<style lang="less">
.flexonly{
.flexonly {
display: flex;
flex-wrap: wrap;
}
.flexno{
.flexno {
display: flex;
margin-top: 25px;
}
.flexnr{
.flexnr {
display: flex;
align-items: center;
margin-top: 25px;
}
.mt10{
.mt10 {
margin-top: 10px;
}
.mr10{
.mr10 {
margin-right: 10px;
}
.w8{
.w8 {
width: 8%;
}
.w80{
.w80 {
width: 80%;
}
.mr20{
.mr20 {
margin-right: 20px;
}
.bt30{
.bt30 {
margin-bottom: 30px;
}
.deviceTable {

31
src/views/realTimeMonitor/index.vue
Unescape Escape View File

@ -62,11 +62,11 @@
</el-option>
</el-select>
</div>
</div>
<div class="paramsDate">
<el-button type="primary" @click.native.stop="handleSetSchedule()"
>时间表设置</el-button
>
<div class="setTimebtn">
<el-button type="primary" @click.native.stop="handleSetSchedule()"
>时间表设置</el-button
>
</div>
</div>
</div>
<!-- <paramArea></paramArea> -->
@ -85,14 +85,14 @@ import carouselChart from "../components/carouselChart.vue";
import picturemain from "./picturemain.vue"; //照片展示
import paramArea from "./paramArea.vue"; //右侧参数区
import setschedule from "./components/setschedule.vue"
import setschedule from "./components/setschedule.vue";
export default {
components: {
picturemain,
paramArea,
carouselChart,
setschedule
setschedule,
},
data() {
return {
@ -235,15 +235,11 @@ export default {
this.getTerminalPhotoList(val, this.dateValue, channelObj.termid);
},
//设置时间表
<<<<<<< HEAD
handleSetSchedule() {},
=======
handleSetSchedule(){
this.$refs.setschedule_ref.display()
this.$refs.setschedule_ref.getSingleAccess(this.channelId)
this.$refs.setschedule_ref.deviceList()
}
>>>>>>> xy-ly
handleSetSchedule() {
this.$refs.setschedule_ref.display();
this.$refs.setschedule_ref.getSingleAccess(this.channelId);
this.$refs.setschedule_ref.deviceList();
},
},
};
</script>
@ -299,7 +295,8 @@ export default {
padding: 16px 16px;
border-left: 1px solid #dcdfe6;
.monitorItemBox,
.paramsDate {
.paramsDate,
.setTimebtn {
margin-bottom: 16px;
h3 {
font-size: 16px;

Write Preview
Loading…
Cancel
Save