499 lines
15 KiB
Vue
499 lines
15 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
|
|
<el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" size="small">
|
|
<el-form-item label="围栏组名称" prop="fenceName">
|
|
<el-input
|
|
v-model="queryParams.fenceName"
|
|
clearable
|
|
placeholder="请输入围栏名称"
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="类型" prop="fenceType">
|
|
<el-select v-model="queryParams.fenceType" clearable placeholder="围栏状态">
|
|
<el-option
|
|
v-for="dict in dict.type.sys_fence_type"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="状态" prop="status">
|
|
<el-select v-model="queryParams.status" clearable placeholder="围栏状态">
|
|
<el-option
|
|
v-for="dict in dict.type.sys_normal_disable"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
v-hasPermi="['system:notice:add']"
|
|
icon="el-icon-plus"
|
|
plain
|
|
size="mini"
|
|
type="primary"
|
|
@click="handleAdd"
|
|
>新增
|
|
</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
v-hasPermi="['system:notice:edit']"
|
|
:disabled="single"
|
|
icon="el-icon-edit"
|
|
plain
|
|
size="mini"
|
|
type="success"
|
|
@click="handleUpdate"
|
|
>修改
|
|
</el-button>
|
|
</el-col>
|
|
|
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
</el-row>
|
|
|
|
<el-table
|
|
v-loading="loading"
|
|
:data="groupList"
|
|
style="width: 100%">
|
|
<el-table-column
|
|
label="id"
|
|
width="180">
|
|
<template slot-scope="scope">
|
|
<span style="margin-left: 10px">{{ scope.row.id }}</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">
|
|
<dict-tag :options="dict.type.sys_fence_type" :value="scope.row.groupType"/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="围栏状态"
|
|
width="180">
|
|
<template slot-scope="scope">
|
|
<dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status"/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="围栏优先级"
|
|
width="180">
|
|
<template slot-scope="scope">
|
|
<span style="margin-left: 10px" v-show="scope.row.priority==1">一级围栏组</span>
|
|
<span style="margin-left: 10px" v-show="scope.row.priority==2">二级围栏组</span>
|
|
<span style="margin-left: 10px" v-show="scope.row.priority==3">三级围栏组</span>
|
|
<span style="margin-left: 10px" v-show="scope.row.priority==4">四级围栏组</span>
|
|
<span style="margin-left: 10px" v-show="scope.row.priority==5">五级围栏组</span>
|
|
<span style="margin-left: 10px" v-show="scope.row.priority==6">六级围栏组</span>
|
|
<span style="margin-left: 10px" v-show="scope.row.priority==7">七级围栏组</span>
|
|
<span style="margin-left: 10px" v-show="scope.row.priority==8">八级围栏组</span>
|
|
<span style="margin-left: 10px" v-show="scope.row.priority==9">九级围栏组</span>
|
|
<span style="margin-left: 10px" v-show="scope.row.priority==10">十级围栏组</span>
|
|
<span style="margin-left: 10px" v-show="scope.row.priority==11">十一级围栏组</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
type="success"
|
|
class="el-icon-connection"
|
|
@click="boundFence(scope.row)">查看绑定的围栏</el-button>
|
|
<el-button
|
|
type="primary"
|
|
size="mini"
|
|
@click="handleUpdate(scope.row)">修改</el-button>
|
|
<el-button
|
|
size="mini"
|
|
type="danger"
|
|
@click="handleDelete(scope.row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 添加或修改部门对话框 -->
|
|
<el-dialog :title="title" :visible.sync="open" append-to-body width="900px">
|
|
|
|
<el-steps :active="active" finish-status="success">
|
|
<el-step title="步骤 1" description="围栏组信息"></el-step>
|
|
<el-step title="步骤 2" description="绑定围栏"></el-step>
|
|
</el-steps>
|
|
|
|
|
|
<div v-show="active==0">
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="200px">
|
|
<el-row>
|
|
<el-col :span="20">
|
|
<el-form-item label="围栏组名称" prop="groupName">
|
|
<el-input v-model="form.groupName" placeholder="请输入围栏组名称"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="20">
|
|
<el-form-item label="优先级" prop="priority">
|
|
<el-input-number v-model="form.priority" @change="handleChange" :min="0" :max="99" label="优先级范围在(0-99)"></el-input-number>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- <el-row>-->
|
|
<!-- <el-col :span="20">-->
|
|
<!-- <el-form-item label="围栏类型" prop="noticeType">-->
|
|
<!-- <el-select v-model="form.groupType" placeholder="请选择围栏类型">-->
|
|
<!-- <el-option-->
|
|
<!-- v-for="dict in dict.type.sys_fence_type"-->
|
|
<!-- :key="dict.value"-->
|
|
<!-- :label="dict.label"-->
|
|
<!-- :value="dict.value"-->
|
|
<!-- ></el-option>-->
|
|
<!-- </el-select>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- </el-col>-->
|
|
<!-- </el-row>-->
|
|
<el-row>
|
|
<el-col :span="20">
|
|
<el-form-item label="围栏组状态">
|
|
<el-radio-group v-model="form.status">
|
|
<el-radio
|
|
v-for="dict in dict.type.sys_normal_disable"
|
|
:key="dict.value"
|
|
:label="dict.value"
|
|
>{{ dict.label }}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
|
|
|
|
</div>
|
|
<div v-show="active==1">
|
|
<el-table
|
|
ref="multipleTable"
|
|
:data="fenceList"
|
|
tooltip-effect="dark"
|
|
style="width: 100%"
|
|
@selection-change="handleSelectionChange">
|
|
<el-table-column
|
|
type="selection"
|
|
width="55">
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="id"
|
|
width="120">
|
|
<template slot-scope="scope">{{ scope.row.id }}</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="电子围栏名称"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="longitudeLatitude"
|
|
label="围栏位置编码"
|
|
>
|
|
</el-table-column>
|
|
|
|
|
|
</el-table>
|
|
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
|
<el-button style="margin-top: 12px;" @click="active--" v-show="active===1">上一步</el-button>
|
|
<el-button style="margin-top: 12px;" @click="active++" v-show="active===0">下一步</el-button>
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
<el-button @click="cancel">取 消</el-button>
|
|
|
|
|
|
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<el-drawer
|
|
size="60%"
|
|
:title="title"
|
|
:visible.sync="drawer"
|
|
:direction="direction"
|
|
:before-close="handleClose">
|
|
|
|
<el-table
|
|
v-loading="loading"
|
|
ref="multipleTable"
|
|
:data="fenceList"
|
|
tooltip-effect="dark"
|
|
style="width: 100%"
|
|
@selection-change="handleSelectionChange">
|
|
<el-table-column
|
|
label="id"
|
|
width="180">
|
|
<template slot-scope="scope">
|
|
<span style="margin-left: 10px">{{ scope.row.id }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="围栏名称"
|
|
width="180">
|
|
<template slot-scope="scope">
|
|
<span style="margin-left: 10px">{{ scope.row.name}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="围栏位置编码"
|
|
width="180">
|
|
<template slot-scope="scope">
|
|
<span style="margin-left: 10px">{{ scope.row.longitudeLatitude}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
type="warning"
|
|
class="el-icon-view"
|
|
@click="lookFence(scope.row)"></el-button>
|
|
<el-button
|
|
size="mini"
|
|
type="danger"
|
|
@click="handleDelete1(scope.row)">解除绑定围栏组</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div>
|
|
<el-button
|
|
type="primary"
|
|
size="mini"
|
|
@click="closeDrawer()">确认</el-button>
|
|
</div>
|
|
|
|
</el-drawer>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
import {addGroup, findGroupByid, selectGroupList, updGroup} from "@/api/fence/group";
|
|
import {fenceArray, findElectronicByid, listFence} from "@/api/fence/fence";
|
|
import { delDept } from '@/api/system/dept'
|
|
export default {
|
|
name: "group",
|
|
dicts: ['sys_normal_disable','sys_fence_type','sys_notice_status'],
|
|
data() {
|
|
return {
|
|
testList:[],
|
|
//进度条
|
|
active: 0,
|
|
//抽屉
|
|
drawer: false,
|
|
direction: 'rtl',
|
|
// 非单个禁用
|
|
single: true,
|
|
showSearch: true,
|
|
groupList:[],
|
|
fenceList:[],
|
|
queryParams:{},
|
|
// 遮罩层
|
|
loading: false,
|
|
// 弹出层标题
|
|
title: "",
|
|
// 是否显示弹出层
|
|
open: false,
|
|
// 围栏组表单参数
|
|
form: {
|
|
//被选择的电子围栏
|
|
electronicFenceRespList: [],
|
|
},
|
|
// 表单校验
|
|
rules: {
|
|
fenceType: [
|
|
{required: true, message: "围栏类型不能为空", trigger: "blur"}
|
|
],
|
|
name: [
|
|
{required: true, message: "围栏名称不能为空", trigger: "blur"}
|
|
],
|
|
}
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
// 可以在这里添加一些初始化逻辑
|
|
console.log('Component is mounted, checking if the table reference is available:', this.$refs.multipleTable);
|
|
},
|
|
|
|
created() {
|
|
this.getList();
|
|
this.fenceArrayList();
|
|
},
|
|
methods: {
|
|
//查看电子围栏
|
|
lookFence(row){
|
|
if (row.longitudeLatitude==null||row.longitudeLatitude==undefined||row.longitudeLatitude==''){
|
|
this.$modal.msgError("请先设置电子围栏");
|
|
return;
|
|
}
|
|
this.$router.push({
|
|
path:'map',
|
|
query:{id:row.id,longitudeLatitude:row.longitudeLatitude,open:0}
|
|
})
|
|
},
|
|
//控制抽屉
|
|
closeDrawer(){
|
|
this.drawer=false;
|
|
},
|
|
|
|
/** 查询电子围栏列表 */
|
|
selectFence(row) {
|
|
|
|
findGroupByid(row.id).then(response => {
|
|
this.fenceList = response.data.electronicFenceRespList;
|
|
});
|
|
},
|
|
|
|
handleClose(done) {
|
|
this.$confirm('确认关闭？')
|
|
.then(_ => {
|
|
done();
|
|
})
|
|
.catch(_ => {});
|
|
},
|
|
handleChange(value) {
|
|
console.log(value);
|
|
},
|
|
handleSelectionChange(val) {
|
|
this.form.electronicFenceRespList = val;
|
|
},
|
|
//打开绑定围栏的功能
|
|
boundFence(row){
|
|
this.title = "绑定的电子围栏";
|
|
this.selectFence(row);
|
|
this.drawer = true;
|
|
},
|
|
|
|
handleDelete(row){
|
|
this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function () {
|
|
return delDept(row.deptId);
|
|
}).then(() => {
|
|
this.getList();
|
|
this.$modal.msgSuccess("删除成功");
|
|
}).catch(() => {
|
|
});
|
|
},
|
|
handleDelete1(row){
|
|
this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function () {
|
|
return delDept(row.deptId);
|
|
}).then(() => {
|
|
this.getList();
|
|
this.$modal.msgSuccess("删除成功");
|
|
}).catch(() => {
|
|
});
|
|
},
|
|
|
|
// 取消按钮
|
|
cancel() {
|
|
this.open = false;
|
|
this.reset();
|
|
},
|
|
// 表单重置
|
|
reset() {
|
|
this.form = {
|
|
status: "0"
|
|
};
|
|
this.resetForm("form");
|
|
},
|
|
fenceArrayList(){
|
|
fenceArray().then(res => {
|
|
console.log(res)
|
|
this.fenceList = res.data;
|
|
});
|
|
},
|
|
/** 新增按钮操作 */
|
|
handleAdd(row) {
|
|
this.reset();
|
|
this.open = true;
|
|
this.title = "添加围栏组";
|
|
},
|
|
/** 修改按钮操作 */
|
|
handleUpdate(row) {
|
|
this.reset();
|
|
this.title="修改围栏组";
|
|
this.open = true;
|
|
findGroupByid(row.id).then(response => {
|
|
this.form = response.data;
|
|
let rows = response.data.electronicFenceRespList;
|
|
console.log(rows)
|
|
if (rows!=null&&rows!=undefined&&rows!=''){
|
|
rows.forEach(row => {
|
|
console.log(row);
|
|
this.$refs.multipleTable.toggleRowSelection(this.fenceList[row.id-1]);
|
|
});
|
|
}
|
|
});
|
|
},
|
|
/** 提交按钮 */
|
|
submitForm: function () {
|
|
this.$refs["form"].validate(valid => {
|
|
if (valid) {
|
|
if (this.form.id != undefined) {
|
|
updGroup(this.form).then(response => {
|
|
this.$modal.msgSuccess("修改成功");
|
|
this.open = false;
|
|
this.getList();
|
|
});
|
|
} else {
|
|
addGroup(this.form).then(response => {
|
|
this.$modal.msgSuccess("新增成功");
|
|
this.open = false;
|
|
this.getList();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
/** 查询围栏列表 */
|
|
getList() {
|
|
this.loading=true;
|
|
selectGroupList(this.queryParams).then(res => {
|
|
console.log(res)
|
|
this.groupList = res.data;
|
|
this.loading=false;
|
|
});
|
|
},
|
|
/** 搜索按钮操作 */
|
|
handleQuery() {
|
|
this.getList();
|
|
},
|
|
/** 重置按钮操作 */
|
|
resetQuery() {
|
|
this.resetForm("queryForm");
|
|
this.handleQuery();
|
|
},
|
|
|
|
}
|
|
};
|
|
</script>
|