feat():围栏组：围栏组多对多电子围栏
parent
86ee4d5654
commit
2cba0f0f8b
|
|
@ -7,6 +7,20 @@
|
|||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
||||
<link href="<%= BASE_URL %>favicon.ico" rel="icon">
|
||||
<title><%= webpackConfig.name %></title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<title>多边形编辑器吸附功能</title>
|
||||
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
|
||||
<script src="https://webapi.amap.com/maps?v=2.0&key=defb21facca687bad1bb8e956b7d67dd&plugin=AMap.PolygonEditor"></script>
|
||||
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
|
||||
<!--[if lt IE 11]>
|
||||
<script>window.location.href = '/html/ie.html';</script><![endif]-->
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
import request from '@/utils/request'
|
||||
// 查询电子围栏列表
|
||||
export function listFence(data) {
|
||||
return request({
|
||||
url: '/vehicles/fence/fenceselectList',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 查询电子围栏选择列表
|
||||
export function fenceArray(data) {
|
||||
return request({
|
||||
url: '/vehicles/fence/fenceArray',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//添加
|
||||
export function addfence(data) {
|
||||
return request({
|
||||
url: '/vehicles/fence/add',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
//修改
|
||||
export function updfence(data) {
|
||||
return request({
|
||||
url: `/vehicles/fence/upd/${data.id}`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//删除
|
||||
export function delElectronById(id) {
|
||||
return request({
|
||||
url: '/vehicles/fence/delElectronById/'+id,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//根据id设置围栏
|
||||
export function setFenceWay(data) {
|
||||
return request({
|
||||
url: '/vehicles/fence/setFenceWay',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//开启围栏
|
||||
export function openFence(id) {
|
||||
return request({
|
||||
url: '/vehicles/fence/open/'+id,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
//回显
|
||||
export function findElectronicByid(id) {
|
||||
return request({
|
||||
url: '/vehicles/fence/findElectronicByid/'+id,
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
|
||||
//关闭围栏
|
||||
export function closeFence(id) {
|
||||
return request({
|
||||
url: '/vehicles/fence/close/'+id,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 查询围栏组列表
|
||||
export function selectGroupList(data) {
|
||||
return request({
|
||||
url: '/vehicles/group/selectGroupList',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//添加
|
||||
export function addGroup(data) {
|
||||
return request({
|
||||
url: '/vehicles/group/addGroup',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
//修改
|
||||
export function updGroup(data) {
|
||||
return request({
|
||||
url: `/vehicles/group/updGroup/${data.id}`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
//添加
|
||||
export function findGroupByid(id) {
|
||||
return request({
|
||||
url: '/vehicles/group/findGroupByid/'+id,
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 查询车辆信息列表
|
||||
export function listInfo(query) {
|
||||
return request({
|
||||
url: '/vehicle/info/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询车辆信息详细
|
||||
export function getInfo(id) {
|
||||
return request({
|
||||
url: '/vehicle/info/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增车辆信息
|
||||
export function addInfo(data) {
|
||||
return request({
|
||||
url: '/vehicle/info',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改车辆信息
|
||||
export function updateInfo(data) {
|
||||
return request({
|
||||
url: '/vehicle/info',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除车辆信息
|
||||
export function delInfo(id) {
|
||||
return request({
|
||||
url: '/vehicle/info/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
export function realTimeLocus(vin){
|
||||
return request({
|
||||
url: '/vehicle/info/realTimeLocus/' + vin,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function realTimeLocusDel(vin){
|
||||
return request({
|
||||
url: '/vehicle/info/realTimeLocus/' + vin,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
export function getVehicleDataByVin(vin){
|
||||
return request({
|
||||
url: '/vehicle/info/data/' + vin,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
export function getVehicleIndexData(){
|
||||
return request({
|
||||
url: '/vehicle/info/indexData/',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 查询车辆运行记录列表
|
||||
export function listMove(query) {
|
||||
return request({
|
||||
url: '/vehicle/move/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询车辆运行记录详细
|
||||
export function getMove(id) {
|
||||
return request({
|
||||
url: '/vehicle/move/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增车辆运行记录
|
||||
export function addMove(data) {
|
||||
return request({
|
||||
url: '/vehicle/move',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改车辆运行记录
|
||||
export function updateMove(data) {
|
||||
return request({
|
||||
url: '/vehicle/move',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除车辆运行记录
|
||||
export function delMove(id) {
|
||||
return request({
|
||||
url: '/vehicle/move/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 准备开始历史数据
|
||||
export function historyMoveStart(vin,startTime, endTime) {
|
||||
return request({
|
||||
url: '/vehicle/move/historyMove/' + vin + "/" + startTime + "/" + endTime,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 查看结束历史数据
|
||||
export function historyMoveDel(vin) {
|
||||
return request({
|
||||
url: '/vehicle/move/historyMove/' + vin,
|
||||
method: 'DELETE'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 历史数据
|
||||
export function historyMove(vin) {
|
||||
return request({
|
||||
url: '/vehicle/move/history/' + vin,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
|
@ -10,6 +10,17 @@
|
|||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- fenceBusiness-->
|
||||
<!-- <el-form-item label="业务类型" prop="fenceBusiness">-->
|
||||
<!-- <el-select v-model="queryParams.fenceBusiness" placeholder="请选择业务类型" clearable size="small">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="dict in fenceAlarmTypeOptions"-->
|
||||
<!-- :key="dict.dictValue"-->
|
||||
<!-- :label="dict.dictLabel"-->
|
||||
<!-- :value="dict.dictValue"-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="围栏类型" prop="fenceType">
|
||||
<el-select v-model="queryParams.fenceType" placeholder="请选择围栏类型" clearable size="small">
|
||||
<el-option
|
||||
|
|
@ -86,7 +97,13 @@
|
|||
<el-table v-loading="loading" :data="fenceList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="围栏名称" align="center" prop="fenceName" />
|
||||
<el-table-column label="围栏类型" align="center" prop="fenceType" >
|
||||
<!-- vehicle_fence_business-->
|
||||
<el-table-column label="业务类型" align="fenceBusiness" prop="fenceBusiness" >
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.vehicle_fence_business" :value="scope.row.fenceBusiness"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="围栏类型" align="fenceType" prop="fenceType" >
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.vehicle_fence_type" :value="scope.row.fenceType"/>
|
||||
</template>
|
||||
|
|
@ -143,6 +160,16 @@
|
|||
<el-form-item label="围栏名称" prop="fenceName">
|
||||
<el-input v-model="form.fenceName" placeholder="请输入围栏名称" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="业务类型" prop="fenceType">-->
|
||||
<!-- <el-select v-model="form.fenceBusiness" placeholder="请选择业务类型">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="dict in fenceAlarmTypeOptions"-->
|
||||
<!-- :key="dict.dictValue"-->
|
||||
<!-- :label="dict.dictLabel"-->
|
||||
<!-- :value="dict.dictValue"-->
|
||||
<!-- ></el-option>-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="围栏类型" prop="fenceType">
|
||||
<el-select v-model="form.fenceType" placeholder="请选择围栏类型">
|
||||
<el-option
|
||||
|
|
@ -196,7 +223,7 @@ import { listFence, getFence, delFence, addFence, updateFence } from "@/api/vehi
|
|||
import FaultDraw from "@/views/fence/AMAP/index.vue";
|
||||
export default {
|
||||
name: "fence",
|
||||
dicts: ['sys_normal_disable','yes_no','vehicle_fence_type'],
|
||||
dicts: ['sys_normal_disable','vehicle_fence_business','vehicle_fence_type','yes_no'],
|
||||
components: { FaultDraw },
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -222,6 +249,8 @@ export default {
|
|||
fenceAlarmTypeOptions: [],
|
||||
// 围栏状态字典
|
||||
statusOptions: [],
|
||||
// 围栏业务类型字典
|
||||
// fenceAlarmBusinessOptions: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
// pageNum: 1,
|
||||
|
|
@ -229,6 +258,7 @@ export default {
|
|||
fenceName: null,
|
||||
fenceType: null,
|
||||
state: null,
|
||||
fenceBusiness: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
|
|
@ -251,6 +281,9 @@ export default {
|
|||
this.getDicts("yes_no").then(response => {
|
||||
this.statusOptions = response.data;
|
||||
});
|
||||
// this.getDicts("vehicle_fence_business").then(response => {
|
||||
// this.fenceAlarmBusinessOptions = response.data;
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
/** 查询电子围栏列表 */
|
||||
|
|
@ -265,12 +298,16 @@ export default {
|
|||
},
|
||||
// 围栏类型字典翻译
|
||||
fenceAlarmTypeFormat(row, column) {
|
||||
return this.selectDictLabel(this.fenceAlarmTypeOptions, row.fenceAlarmType);
|
||||
return this.selectDictLabel(this.fenceAlarmTypeOptions, row.fenceType);
|
||||
},
|
||||
// 围栏状态字典翻译
|
||||
statusFormat(row, column) {
|
||||
return this.selectDictLabel(this.statusOptions, row.state);
|
||||
},
|
||||
// 围栏状态字典翻译
|
||||
// fenceAlarmBusiness(row, column) {
|
||||
// return this.selectDictLabel(this.fenceAlarmBusinessOptions, row.state);
|
||||
// },
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,535 @@
|
|||
<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="priority">
|
||||
<el-option label="一级围栏组" value="1"></el-option>
|
||||
<el-option label="二级围栏组" value="2"></el-option>
|
||||
<el-option label="三级围栏组" value="3"></el-option>
|
||||
<el-option label="四级围栏组" value="4"></el-option>
|
||||
<el-option label="五级围栏组" value="5"></el-option>
|
||||
<el-option label="六级围栏组" value="6"></el-option>
|
||||
<el-option label="七级围栏组" value="7"></el-option>
|
||||
<el-option label="八级围栏组" value="8"></el-option>
|
||||
<el-option label="九级围栏组" value="9"></el-option>
|
||||
<el-option label="十级围栏组" value="10"></el-option>
|
||||
</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>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['vehicles:sysCorpuscleFence:export']"
|
||||
>导出</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>
|
||||
</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">
|
||||
<dict-tag :options="dict.type.sys_fence_type" :value="scope.row.fenceType"/>
|
||||
</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 = "添加围栏组";
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('vehicles/fence/export', {
|
||||
...this.queryParams
|
||||
}, `vehicle_fence.xlsx`)
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
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>
|
||||
|
|
@ -0,0 +1,396 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="围栏名称" prop="fenceName">
|
||||
<el-input
|
||||
v-model="queryParams.fenceName"
|
||||
placeholder="请输入围栏名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="围栏类型" prop="fenceType">
|
||||
<el-select v-model="queryParams.fenceType" placeholder="请选择围栏类型" clearable size="small">
|
||||
<el-option
|
||||
v-for="dict in fenceAlarmTypeOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="围栏状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="请选择围栏状态" clearable size="small">
|
||||
<el-option
|
||||
v-for="dict in statusOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @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
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['vehicles:sysCorpuscleFence:addSysCorpuscleFence']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['vehicles:sysCorpuscleFence:updSysCorpuscleFence']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['vehicles:sysCorpuscleFence:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['vehicles:sysCorpuscleFence:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
<!-- :formatter="statusFormat"-->
|
||||
<!-- :formatter="fenceAlarmTypeFormat"-->
|
||||
<el-table v-loading="loading" :data="fenceList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="围栏名称" align="center" prop="fenceName" />
|
||||
<!-- vehicle_fence_business-->
|
||||
<el-table-column label="业务类型" align="fenceBusiness" prop="fenceBusiness" >
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.vehicle_fence_business" :value="scope.row.fenceBusiness"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="围栏类型" align="fenceType" prop="fenceType" >
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.vehicle_fence_type" :value="scope.row.fenceType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="围栏状态" align="state" prop="state">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.yes_no" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="围栏位置" align="center" prop="fencePosition" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="warning"
|
||||
class="el-icon-view"
|
||||
@click="lookFence(scope.row)"></el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="showFaultDraw(scope.row)"
|
||||
>绘制围栏</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['vehicle:fence:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['vehicle:fence:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改电子围栏对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-input v-show="false" v-model="form.id" />
|
||||
<el-form-item label="围栏名称" prop="fenceName">
|
||||
<el-input v-model="form.fenceName" placeholder="请输入围栏名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="围栏类型" prop="fenceType">
|
||||
<el-select v-model="form.fenceType" placeholder="请选择围栏类型">
|
||||
<el-option
|
||||
v-for="dict in fenceAlarmTypeOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="围栏状态：" prop="state">
|
||||
<el-radio-group v-model="form.state">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.yes_no"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-drawer
|
||||
v-if="faultDrawStatus"
|
||||
:title="drawerTitle"
|
||||
:visible.sync="drawer"
|
||||
:direction="direction"
|
||||
:before-close="handleClose"
|
||||
size="100%">
|
||||
<fault-draw ref="faultDraw" v-if="faultDrawStatus" v-bind:id="fenceId" @handleClose="handleClose"></fault-draw>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listFence, getFence, delFence, addFence, updateFence } from "@/api/vehicle/fence";
|
||||
import FaultDraw from "@/views/fence/AMAP/index.vue";
|
||||
export default {
|
||||
name: "fence",
|
||||
dicts: ['sys_normal_disable','vehicle_fence_business','vehicle_fence_type','yes_no'],
|
||||
components: { FaultDraw },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 电子围栏表格数据
|
||||
fenceList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 围栏类型字典
|
||||
fenceAlarmTypeOptions: [],
|
||||
// 围栏状态字典
|
||||
statusOptions: [],
|
||||
// 围栏业务类型字典
|
||||
// fenceAlarmBusinessOptions: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
// pageNum: 1,
|
||||
// pageSize: 10,
|
||||
fenceName: null,
|
||||
fenceType: null,
|
||||
state: null,
|
||||
fenceBusiness: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
,
|
||||
drawer: false,
|
||||
direction: 'rtl',
|
||||
drawerTitle:"",
|
||||
fenceId: "",
|
||||
faultDrawStatus:false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getDicts("vehicle_fence_type").then(response => {
|
||||
this.fenceAlarmTypeOptions = response.data;
|
||||
});
|
||||
this.getDicts("yes_no").then(response => {
|
||||
this.statusOptions = response.data;
|
||||
});
|
||||
// this.getDicts("vehicle_fence_business").then(response => {
|
||||
// this.fenceAlarmBusinessOptions = response.data;
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
/** 查询电子围栏列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listFence(this.queryParams).then(response => {
|
||||
this.fenceList = response.data;
|
||||
// this.total = response.data.total;
|
||||
this.loading = false;
|
||||
console.log("列表"+response.data)
|
||||
});
|
||||
},
|
||||
// 围栏类型字典翻译
|
||||
fenceAlarmTypeFormat(row, column) {
|
||||
return this.selectDictLabel(this.fenceAlarmTypeOptions, row.fenceType);
|
||||
},
|
||||
// 围栏状态字典翻译
|
||||
statusFormat(row, column) {
|
||||
return this.selectDictLabel(this.statusOptions, row.state);
|
||||
},
|
||||
// 围栏状态字典翻译
|
||||
// fenceAlarmBusiness(row, column) {
|
||||
// return this.selectDictLabel(this.fenceAlarmBusinessOptions, row.state);
|
||||
// },
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
fenceName: null,
|
||||
fenceAlarmType: null,
|
||||
status: 0,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
updateTime: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加电子围栏";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getFence(id).then(response => {
|
||||
this.form = response.data;
|
||||
console.log(response)
|
||||
this.open = true;
|
||||
this.title = "修改电子围栏";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
alert(this.form.id)
|
||||
if (this.form.id != null) {
|
||||
updateFence(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addFence(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$confirm('是否确认删除电子围栏编号为"' + ids + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return delFence(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('vehicles/sysCorpuscleFence/export', {
|
||||
...this.queryParams
|
||||
}, `vehicle_fence.xlsx`)
|
||||
},
|
||||
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}
|
||||
})
|
||||
},
|
||||
showFaultDraw(row){
|
||||
this.drawer = true;
|
||||
this.drawerTitle = "绘制围栏：" + row.fenceName ;
|
||||
this.fenceId = row.id;
|
||||
this.faultDrawStatus = true;
|
||||
},
|
||||
handleClose(){
|
||||
this.drawer = false;
|
||||
this.faultDrawStatus = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,352 @@
|
|||
<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>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['vehicles:sysCorpuscleFence:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['vehicles:sysCorpuscleFence:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<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>
|
||||
<!--fenceType-->
|
||||
<el-table-column
|
||||
label="围栏类型"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.sys_fence_type" :value="scope.row.fenceType"/>
|
||||
</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">{{ 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
|
||||
type="success"
|
||||
class="el-icon-map-location"
|
||||
@click="handleFence(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="600px">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="围栏名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入围栏名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="围栏类型" prop="noticeType">
|
||||
<el-select v-model="form.fenceType" 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="12">
|
||||
<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 slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import {addfence, findElectronicByid, listFence, updfence} from "@/api/fence/fence";
|
||||
import {addDept, delDept, getDept, listDept, listDeptExcludeChild, updateDept} from "@/api/system/dept";
|
||||
|
||||
export default {
|
||||
name: "list",
|
||||
dicts: ['sys_normal_disable','sys_fence_type','sys_notice_status'],
|
||||
data() {
|
||||
return {
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
showSearch: true,
|
||||
fenceList:[],
|
||||
queryParams:{},
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
fenceType: [
|
||||
{required: true, message: "围栏类型不能为空", trigger: "blur"}
|
||||
],
|
||||
name: [
|
||||
{required: true, message: "围栏名称不能为空", trigger: "blur"}
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
handleSelectionChange(){
|
||||
|
||||
},
|
||||
//绘制电子围栏
|
||||
handleFence(row){
|
||||
this.$router.push({
|
||||
path:'map',
|
||||
query:{id:row.id,longitudeLatitude:row.longitudeLatitude,open:1}
|
||||
})
|
||||
},
|
||||
//查看电子围栏
|
||||
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}
|
||||
})
|
||||
alert("位置："+row.longitudeLatitude)
|
||||
},
|
||||
handleDelete(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");
|
||||
},
|
||||
|
||||
/** 新增按钮操作 */
|
||||
handleAdd(row) {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加围栏";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
findElectronicByid(row.id).then(response => {
|
||||
console.log(response)
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改围栏";
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('vehicles/fence/export', {
|
||||
...this.queryParams
|
||||
}, `vehicle_fence.xlsx`)
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function () {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != undefined) {
|
||||
updfence(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addfence(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 查询围栏列表 */
|
||||
getList() {
|
||||
this.loading=true;
|
||||
listFence(this.queryParams).then(res => {
|
||||
console.log(res)
|
||||
this.fenceList = res.data;
|
||||
this.loading=false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="container"></div>
|
||||
<div class="input-card" style="width: 120px">
|
||||
<button class="btn" @click="returnlist" style="margin-bottom: 5px">返回电子围栏</button>
|
||||
<div v-show="open==1">
|
||||
<button class="btn" @click="startEditing" style="margin-bottom: 5px">开始绘制围栏</button>
|
||||
<button class="btn" @click="endEditing" style="margin-bottom: 5px">保存围栏</button>
|
||||
<button class="btn" @click="createPolygon" style="margin-bottom: 5px">多边形绘制</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {setFenceWay} from "@/api/fence/fence";
|
||||
|
||||
export default {
|
||||
name: 'AmapPolygonEditor',
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
//展示操作
|
||||
open: 0,
|
||||
fenceWay: {
|
||||
id: null,
|
||||
longitudeLatitude: '',
|
||||
},
|
||||
polygonEcho: null,
|
||||
polygon1: null,
|
||||
polygon2: null,
|
||||
//回显围栏位置
|
||||
pathEcho: null,
|
||||
polyEditor: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initMap();
|
||||
},
|
||||
created() {
|
||||
this.fenceWay.id = this.$route.query.id;
|
||||
this.open = this.$route.query.open;
|
||||
},
|
||||
methods: {
|
||||
|
||||
//初始化地图
|
||||
initMap() {
|
||||
this.pathEcho = this.$route.query.longitudeLatitude;
|
||||
console.log(this.pathEcho);
|
||||
// 初始化地图
|
||||
this.map = new AMap.Map('container', {
|
||||
center: [116.471354, 39.994257],
|
||||
zoom: 16.8,
|
||||
});
|
||||
|
||||
// 创建多边形
|
||||
// const path1 = [[116.475334, 39.997534], [116.476627, 39.998315], [116.478603, 39.99879], [116.478529, 40.000296], [116.475082, 40.000151], [116.473421, 39.998717]];
|
||||
// const path2 = [[116.474595, 40.001321], [116.473526, 39.999865], [116.476284, 40.000917]];
|
||||
//
|
||||
// this.polygon1 = new AMap.Polygon({
|
||||
// path: path1
|
||||
// });
|
||||
// this.polygon2 = new AMap.Polygon({
|
||||
// path: path2
|
||||
// });
|
||||
|
||||
if (this.pathEcho != null && this.pathEcho != undefined) {
|
||||
// 将字符串按分号分割
|
||||
const pointPairs = this.pathEcho.split(';');
|
||||
const points = [];
|
||||
|
||||
for (const pair of pointPairs) {
|
||||
// 去除空格
|
||||
const trimmedPair = pair.trim();
|
||||
if (trimmedPair) {
|
||||
// 将每一对经纬度按逗号分割
|
||||
const [lng, lat] = trimmedPair.split(',').map(Number);
|
||||
points.push([lng, lat]);
|
||||
|
||||
}
|
||||
}
|
||||
this.polygon1 = new AMap.Polygon({
|
||||
//points 是经纬度数组
|
||||
path: points
|
||||
});
|
||||
|
||||
this.map.add([this.polygon1]);
|
||||
|
||||
this.polygon1.on('dblclick', () => {
|
||||
this.polyEditor.setTarget(this.polygon1);
|
||||
this.polyEditor.open();
|
||||
});
|
||||
}
|
||||
|
||||
this.map.setFitView();
|
||||
|
||||
// 初始化多边形编辑器
|
||||
this.polyEditor = new AMap.PolygonEditor(this.map);
|
||||
// this.polyEditor.addAdsorbPolygons([this.polygon1, this.polygon2]);
|
||||
|
||||
// 监听添加事件
|
||||
this.polyEditor.on('add', (data) => {
|
||||
// event.obj 为绘制出来的覆盖物对象
|
||||
let path = data.obj.getPath(); // 获取多边形的路径
|
||||
let str = "";
|
||||
let pathArr = [];
|
||||
for (let i = 0; i < path.length; i++) {
|
||||
pathArr.push([path[i].getLng(), path[i].getLat()]);
|
||||
this.fenceWay.longitudeLatitude += path[i].getLng() + "," + path[i].getLat() + ";";
|
||||
}
|
||||
// 这个就是绘制的点的坐标数组
|
||||
// this.addForm.latlng = str; // 转换为字符串
|
||||
console.log(this.fenceWay.longitudeLatitude)
|
||||
console.log(data);
|
||||
const polygon = data.target;
|
||||
|
||||
this.polyEditor.addAdsorbPolygons(polygon);
|
||||
|
||||
polygon.on('dblclick', () => {
|
||||
this.polyEditor.setTarget(polygon);
|
||||
this.polyEditor.open();
|
||||
});
|
||||
});
|
||||
|
||||
// 双击多边形开始编辑
|
||||
// this.polygon1.on('dblclick', () => {
|
||||
// this.polyEditor.setTarget(this.polygon1);
|
||||
// this.polyEditor.open();
|
||||
// });
|
||||
// this.polygon2.on('dblclick', () => {
|
||||
// this.polyEditor.setTarget(this.polygon2);
|
||||
// this.polyEditor.open();
|
||||
// });
|
||||
},
|
||||
|
||||
//返回围栏列表
|
||||
returnlist() {
|
||||
this.$router.push({
|
||||
path: 'list'
|
||||
})
|
||||
|
||||
},
|
||||
createPolygon() {
|
||||
this.polyEditor.close();
|
||||
this.polyEditor.setTarget();
|
||||
this.polyEditor.open();
|
||||
},
|
||||
|
||||
//开始编辑
|
||||
startEditing() {
|
||||
this.polyEditor.open();
|
||||
},
|
||||
//结束编辑
|
||||
endEditing() {
|
||||
this.polyEditor.close();
|
||||
console.log(this.longitudeLatitude)
|
||||
setFenceWay(this.fenceWay).then(res => {
|
||||
if (200 == res.code) {
|
||||
this.$modal.msgSuccess("设置位置成功");
|
||||
this.$router.push({
|
||||
path: 'list'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.input-card {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="tableData"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="日期"
|
||||
width="120">
|
||||
<template slot-scope="scope">{{ scope.row.date }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="姓名"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="地址"
|
||||
show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 20px">
|
||||
<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
|
||||
<el-button @click="toggleSelection()">取消选择</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-08',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-06',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-07',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
multipleSelection: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleSelection(rows) {
|
||||
if (rows) {
|
||||
rows.forEach(row => {
|
||||
console.log(row)
|
||||
this.$refs.multipleTable.toggleRowSelection(row);
|
||||
});
|
||||
} else {
|
||||
this.$refs.multipleTable.clearSelection();
|
||||
}
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue