367 lines
11 KiB
Vue
367 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<template>
|
||
<el-form ref="form" :model="form" label-width="80px">
|
||
<!-- <el-form-item label="活动名称">-->
|
||
<!-- <el-input v-model="form.name"></el-input>-->
|
||
<!-- </el-form-item>-->
|
||
</el-form>
|
||
|
||
<el-button type="primary" @click="toAddFenceGroup">添加围栏组</el-button>
|
||
|
||
<!--围栏组列表-->
|
||
<el-table :data="fenceGroup" tooltip-effect="dark" style="width: 100%">
|
||
|
||
|
||
<el-table-column label="id" width="180" >
|
||
<template slot-scope="scope">
|
||
<span style="margin-left: 10px">{{ scope.row.groupId }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="名称" width="180">
|
||
<template slot-scope="scope">
|
||
<span style="margin-left: 10px">{{ scope.row.groupName }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="状态" width="180">
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
v-if="scope.row.groupStates ==0"
|
||
v-model="groupStates"
|
||
active-color="#13ce66"
|
||
inactive-color="#ff4949">
|
||
</el-switch>
|
||
<el-switch
|
||
v-if="scope.row.groupStates ==1"
|
||
v-model="groupStatestwo"
|
||
active-color="#13ce66"
|
||
inactive-color="#ff4949">
|
||
</el-switch>
|
||
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" @click="updateFenceGroupById(scope.row.groupId)" v-if="scope.row.groupStates ==0">禁用</el-button>
|
||
<el-button size="mini" @click="activate(scope.row.groupId)" v-if="scope.row.groupStates ==1">启动</el-button>
|
||
<el-button size="mini" @click="addGroup(scope.row.groupId)" v-if="scope.row.groupStates ==0">添加围栏</el-button>
|
||
<el-button size="mini" @click="BoundFence(scope.row.groupId)" v-if="scope.row.groupStates ==0">查看绑定的围栏</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
</template>
|
||
<!--多对多的添加-->
|
||
<el-dialog
|
||
title="提示"
|
||
:visible.sync="dialogVisible"
|
||
width="85%"
|
||
:before-close="handleClose">
|
||
|
||
<template>
|
||
<el-table
|
||
ref="multipleTable"
|
||
:data="carFence"
|
||
tooltip-effect="dark"
|
||
:style="{width: tableWidth}" @selection-change="handleSelectionChange">
|
||
|
||
<el-table-column
|
||
type="selection"
|
||
width="55">
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="围栏主键">
|
||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="围栏名称">
|
||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="业务类型">
|
||
<template slot-scope="scope">{{ scope.row.clazzName }}</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="围栏类型">
|
||
<template slot-scope="scope">{{ scope.row.typeName }}</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="围栏开始时间">
|
||
<template slot-scope="scope">{{ scope.row.fenceCreate }}</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="围栏结束时间">
|
||
<template slot-scope="scope">{{ scope.row.fenceEnd }}</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="创建时间">
|
||
<template slot-scope="scope">{{ scope.row.fenceStart }}</template>
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
</template>
|
||
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="addMiddls">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<!--//围栏组添加-->
|
||
<el-dialog
|
||
title="提示"
|
||
:visible.sync="dialogVisibles"
|
||
width="85%"
|
||
:before-close="handleClose">
|
||
|
||
<el-form ref="form" :model="fenceGroupAdd" label-width="100px">
|
||
<el-form-item label="围栏组名称">
|
||
<el-input v-model="fenceGroupAdd.groupName"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="围栏组状态">
|
||
<el-switch
|
||
v-model="fenceGroupAdd.groupStates"
|
||
active-color="#13ce66"
|
||
inactive-color="#ff4949">
|
||
</el-switch>
|
||
</el-form-item>
|
||
|
||
|
||
|
||
|
||
</el-form>
|
||
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisibles = false">取 消</el-button>
|
||
<el-button type="primary" @click="doAddFenceGroup">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<!--已经绑定的围栏-->
|
||
<el-dialog
|
||
title="提示"
|
||
:visible.sync="dialogVisibless"
|
||
width="85%"
|
||
:before-close="handleClose">
|
||
<template>
|
||
<el-table
|
||
ref="multipleTable"
|
||
:data="carFences"
|
||
tooltip-effect="dark"
|
||
:style="{width: tableWidth}">
|
||
|
||
<el-table-column
|
||
label="围栏主键">
|
||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="围栏名称">
|
||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="业务类型">
|
||
<template slot-scope="scope">{{ scope.row.clazzName }}</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="围栏类型">
|
||
<template slot-scope="scope">{{ scope.row.typeName }}</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="围栏开始时间">
|
||
<template slot-scope="scope">{{ scope.row.fenceCreate }}</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="围栏结束时间">
|
||
<template slot-scope="scope">{{ scope.row.fenceEnd }}</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="创建时间">
|
||
<template slot-scope="scope">{{ scope.row.fenceStart }}</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisibless = false">取 消</el-button>
|
||
<el-button type="primary" @click="dialogVisibless = false">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||
//例如：import 《组件名称》 from '《组件路径》,
|
||
import {
|
||
activate,
|
||
addFenceGroup,
|
||
addFenceGroupMidddle, BoundFenceGroup,
|
||
group,
|
||
selectCarFenceList,
|
||
updateFenceGroupById
|
||
} from '@/api/electronic'
|
||
import log from '@/views/monitor/job/log.vue'
|
||
|
||
export default {
|
||
//import引入的组件需要注入到对象中才能使用"
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
//这里存放数据"
|
||
|
||
return {
|
||
//绑定的围栏列表
|
||
carFences:[],
|
||
|
||
groupStates:true,
|
||
groupStatestwo:false,
|
||
fenceGroupAdd:{
|
||
groupStates:true
|
||
},
|
||
fenceGroup:[],
|
||
dialogVisible: false,
|
||
dialogVisibles: false,
|
||
dialogVisibless: false,
|
||
carFence:[],
|
||
form:{},
|
||
multipleSelection: [],
|
||
fenceGroupId:'',
|
||
};
|
||
},
|
||
//计算属性 类似于data概念",
|
||
computed: {},
|
||
//监控data中的数据变化",
|
||
watch: {},
|
||
//方法集合",
|
||
methods: {
|
||
//根据围栏组的id查询绑定的围栏的中间表 并 获取围栏组绑定的围栏列表
|
||
BoundFence(groupId){
|
||
this.dialogVisibless = true
|
||
BoundFenceGroup(groupId).then(res=>{
|
||
|
||
this.carFences=res.data
|
||
})
|
||
},
|
||
//启动围栏状态
|
||
activate(groupId){
|
||
activate(groupId).then(res=>{
|
||
if (200 == res.code){
|
||
this.$message.success("成功")
|
||
this.group()
|
||
}
|
||
})
|
||
},
|
||
//修改围栏状态
|
||
updateFenceGroupById(groupId){
|
||
updateFenceGroupById(groupId).then(res=>{
|
||
if (200 == res.code){
|
||
this.$message.success("成功")
|
||
this.group()
|
||
}
|
||
})
|
||
},
|
||
//多对多添加
|
||
addMiddls(){
|
||
addFenceGroupMidddle(this.fenceGroupId,this.multipleSelection).then(res=>{
|
||
this.$modal.msgSuccess("成功");
|
||
this.dialogVisible = false
|
||
this.selectCarFenceList();
|
||
})
|
||
},
|
||
//添加围栏组
|
||
doAddFenceGroup(){
|
||
if (this.fenceGroupAdd.groupStates = true){
|
||
this.fenceGroupAdd.groupStates = 0
|
||
}else {
|
||
this.fenceGroupAdd.groupStates = 1
|
||
}
|
||
// console.log(this.fenceGroupAdd.groupStates)
|
||
addFenceGroup(this.fenceGroupAdd).then(res=>{
|
||
if (200 == res.code ){
|
||
this.$message.success("成功");
|
||
this.dialogVisibles=false
|
||
this.group()
|
||
}
|
||
})
|
||
},
|
||
//开启围栏组添加对话框
|
||
toAddFenceGroup(){
|
||
this.dialogVisibles=true
|
||
|
||
},
|
||
//获取围栏组的id
|
||
addGroup(id){
|
||
this.multipleSelection = []
|
||
this.fenceGroupId = id
|
||
this.dialogVisible = true
|
||
},
|
||
//获取围栏的Id值 多对多
|
||
handleSelectionChange(val) {
|
||
this.multipleSelection = val;
|
||
|
||
},
|
||
//围栏组列表
|
||
group(){
|
||
group().then(res=>{
|
||
// console.log(res)
|
||
this.fenceGroup = res.data
|
||
})
|
||
},
|
||
handleClose(done) {
|
||
this.$confirm('确认关闭？')
|
||
.then(_ => {
|
||
done();
|
||
})
|
||
.catch(_ => {});
|
||
},
|
||
//围栏列表
|
||
selectCarFenceList(){
|
||
selectCarFenceList(this.form).then(res=>{
|
||
this.carFence=res.data.records
|
||
})
|
||
},
|
||
|
||
|
||
},
|
||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||
created() {
|
||
this.group()
|
||
this.selectCarFenceList();
|
||
},
|
||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||
mounted() {
|
||
},
|
||
beforeCreate() {
|
||
}, //生命周期 - 创建之前",
|
||
beforeMount() {
|
||
}, //生命周期 - 挂载之前",
|
||
beforeUpdate() {
|
||
}, //生命周期 - 更新之前",
|
||
updated() {
|
||
}, //生命周期 - 更新之后",
|
||
beforeDestroy() {
|
||
}, //生命周期 - 销毁之前",
|
||
destroyed() {
|
||
}, //生命周期 - 销毁完成",
|
||
activated() {
|
||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
|
||
</style>
|