fix():重构电子围栏以及围栏组
parent
986207e780
commit
9b25112e7f
|
|
@ -7,6 +7,20 @@
|
||||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
||||||
<link href="<%= BASE_URL %>favicon.ico" rel="icon">
|
<link href="<%= BASE_URL %>favicon.ico" rel="icon">
|
||||||
<title><%= webpackConfig.name %></title>
|
<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]>
|
<!--[if lt IE 11]>
|
||||||
<script>window.location.href = '/html/ie.html';</script><![endif]-->
|
<script>window.location.href = '/html/ie.html';</script><![endif]-->
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
|
|
@ -1,44 +1,79 @@
|
||||||
import request from '@/utils/request'
|
import request from '@/utils/request'
|
||||||
|
|
||||||
// 查询电子围栏列表
|
// 查询电子围栏列表
|
||||||
export function listFence(query) {
|
export function listFence(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/fence/fence/list',
|
url: '/fence/fence/fenceselectList',
|
||||||
method: 'get',
|
|
||||||
params: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 查询电子围栏详细
|
|
||||||
export function getFence(fenceId) {
|
|
||||||
return request({
|
|
||||||
url: '/fence/fence/' + fenceId,
|
|
||||||
method: 'get'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 新增电子围栏
|
|
||||||
export function addFence(data) {
|
|
||||||
return request({
|
|
||||||
url: '/fence/fence',
|
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 修改电子围栏
|
// 查询电子围栏选择列表
|
||||||
export function updateFence(data) {
|
export function fenceArray(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/fence/fence',
|
url: '/fence/fence/fenceArray',
|
||||||
method: 'put',
|
method: 'post',
|
||||||
data: data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 删除电子围栏
|
//添加
|
||||||
export function delFence(fenceId) {
|
export function addfence(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/fence/fence/' + fenceId,
|
url: '/fence/fence/add',
|
||||||
method: 'delete'
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//修改
|
||||||
|
export function updfence(data) {
|
||||||
|
return request({
|
||||||
|
url: `/fence/fence/upd/${data.id}`,
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//删除
|
||||||
|
export function delElectronById(id) {
|
||||||
|
return request({
|
||||||
|
url: '/fence/fence/delElectronById/'+id,
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//根据id设置围栏
|
||||||
|
export function setFenceWay(data) {
|
||||||
|
return request({
|
||||||
|
url: '/fence/fence/setFenceWay',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//开启围栏
|
||||||
|
export function openFence(id) {
|
||||||
|
return request({
|
||||||
|
url: '/fence/fence/open/'+id,
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//回显
|
||||||
|
export function findElectronicByid(id) {
|
||||||
|
return request({
|
||||||
|
url: '/fence/fence/findElectronicByid/'+id,
|
||||||
|
method: 'post',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//关闭围栏
|
||||||
|
export function closeFence(id) {
|
||||||
|
return request({
|
||||||
|
url: '/fence/fence/close/'+id,
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,34 @@
|
||||||
import request from '@/utils/request'
|
import request from '@/utils/request'
|
||||||
|
|
||||||
//查询围栏组
|
// 查询围栏组列表
|
||||||
export function selectGroupList() {
|
export function selectGroupList(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/fence/tbGroup/selectTbGroupList',
|
url: '/fence/group/selectGroupList',
|
||||||
method: 'get'
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//添加
|
||||||
|
export function addGroup(data) {
|
||||||
|
return request({
|
||||||
|
url: '/fence/group/addGroup',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//修改
|
||||||
|
export function updGroup(data) {
|
||||||
|
return request({
|
||||||
|
url: `/fence/group/updGroup/${data.id}`,
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//添加
|
||||||
|
export function findGroupByid(id) {
|
||||||
|
return request({
|
||||||
|
url: '/fence/group/findGroupByid/'+id,
|
||||||
|
method: 'post',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,84 +1,3 @@
|
||||||
<!--<template>-->
|
|
||||||
<!-- <div class="location-container">-->
|
|
||||||
<!-- <div id="map"></div>-->
|
|
||||||
<!-- <el-button @click="openPolyEditor">绘制</el-button>-->
|
|
||||||
<!-- <el-button @click="closePolyEditor">保存围栏</el-button>-->
|
|
||||||
<!-- <el-button type="primary" @click="confirmSelection">确认选择</el-button>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!--</template>-->
|
|
||||||
|
|
||||||
<!--<script>-->
|
|
||||||
<!--export default {-->
|
|
||||||
<!-- name:'SelectLocation',-->
|
|
||||||
<!-- data() {-->
|
|
||||||
<!-- return {-->
|
|
||||||
<!-- selectedLocation:null,// 存储选中的经纬度信息-->
|
|
||||||
<!-- map:null,-->
|
|
||||||
<!-- polygonEditor:null,-->
|
|
||||||
<!-- polygon:null,-->
|
|
||||||
<!-- };-->
|
|
||||||
<!-- },-->
|
|
||||||
<!-- mounted() {-->
|
|
||||||
<!-- this.initMap();-->
|
|
||||||
<!-- },-->
|
|
||||||
<!-- methods:{-->
|
|
||||||
<!-- initMap() {-->
|
|
||||||
<!-- // 确保页面加载完成后初始化地图-->
|
|
||||||
<!-- this.$nextTick(() => {-->
|
|
||||||
<!-- this.map = new AMap.Map('map',{-->
|
|
||||||
<!-- resizeEnable:true,-->
|
|
||||||
<!-- center:[116.397428,39.90923],// 默认中心点-->
|
|
||||||
<!-- zoom:13,-->
|
|
||||||
<!-- });-->
|
|
||||||
<!-- });-->
|
|
||||||
<!-- },-->
|
|
||||||
<!-- openPolyEditor() {-->
|
|
||||||
<!-- if (!this.polygon) {-->
|
|
||||||
<!-- this.polygon = new AMap.Polygon({-->
|
|
||||||
<!-- map:this.map,-->
|
|
||||||
<!-- path:[],// 初始为空，可以让用户自己绘制-->
|
|
||||||
<!-- strokeColor:"#FF33FF",// 线颜色-->
|
|
||||||
<!-- strokeOpacity:0.8,// 线透明度-->
|
|
||||||
<!-- strokeWeight:2,// 线宽-->
|
|
||||||
<!-- fillColor:"#1791fc",// 填充颜色-->
|
|
||||||
<!-- fillOpacity:0.35,// 填充透明度-->
|
|
||||||
<!-- });-->
|
|
||||||
|
|
||||||
<!-- this.map.add(this.polygon);-->
|
|
||||||
<!-- }-->
|
|
||||||
|
|
||||||
<!-- this.map.plugin(["AMap.PolyEditor"],() => {-->
|
|
||||||
<!-- this.polygonEditor = new AMap.PolyEditor(this.map,this.polygon);-->
|
|
||||||
<!-- this.polygonEditor.open();-->
|
|
||||||
<!-- });-->
|
|
||||||
<!-- },-->
|
|
||||||
<!-- closePolyEditor() {-->
|
|
||||||
<!-- if (this.polygonEditor) {-->
|
|
||||||
<!-- this.polygonEditor.close();-->
|
|
||||||
<!-- const path = this.polygon.getPath();-->
|
|
||||||
<!-- this.selectedLocation = path.map(point => ({-->
|
|
||||||
<!-- lng:point.lng,-->
|
|
||||||
<!-- lat:point.lat,-->
|
|
||||||
<!-- }));-->
|
|
||||||
<!-- }-->
|
|
||||||
<!-- },-->
|
|
||||||
<!-- confirmSelection() {-->
|
|
||||||
<!-- this.$emit('locationSelected',this.selectedLocation);-->
|
|
||||||
<!-- },-->
|
|
||||||
<!-- },-->
|
|
||||||
<!--};-->
|
|
||||||
<!--</script>-->
|
|
||||||
|
|
||||||
<!--<style scoped>-->
|
|
||||||
<!--#map {-->
|
|
||||||
<!-- width:100%;-->
|
|
||||||
<!-- height:400px;-->
|
|
||||||
<!--}-->
|
|
||||||
<!--</style>-->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<!-- 控制按钮组 -->
|
<!-- 控制按钮组 -->
|
||||||
<div class="main">
|
<div class="main">
|
||||||
|
|
@ -92,7 +11,6 @@
|
||||||
<div class="ebox">
|
<div class="ebox">
|
||||||
<el-button-group>
|
<el-button-group>
|
||||||
<el-button type="info" icon="el-icon-circle-plus-outline" @click="drawRectangle">绘制围栏</el-button>
|
<el-button type="info" icon="el-icon-circle-plus-outline" @click="drawRectangle">绘制围栏</el-button>
|
||||||
<el-button type="success" icon="el-icon-success" @click="saveRectangle">保存围栏</el-button>
|
|
||||||
</el-button-group>
|
</el-button-group>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -220,21 +138,6 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
//保存围栏
|
|
||||||
saveRectangle() {
|
|
||||||
|
|
||||||
this.carFence.fenceCreate = new Date().toLocaleString()
|
|
||||||
var s = JSON.stringify(this.paths)
|
|
||||||
this.carFence.fenceText=s
|
|
||||||
console.log(this.carFence.fenceText)
|
|
||||||
// 取消编辑状态
|
|
||||||
this.polyEditors.forEach(item => { item.close(); });
|
|
||||||
this.polyEditorsBefore.forEach(item => { item.close(); });
|
|
||||||
this.dialogFormVisible = true
|
|
||||||
// 保存 console.log(this.paths,this.path)=>成功（重新刷新页面）
|
|
||||||
// ...
|
|
||||||
this.handleLocationSelected()
|
|
||||||
},
|
|
||||||
//获取后台数据
|
//获取后台数据
|
||||||
init() {
|
init() {
|
||||||
const that = this
|
const that = this
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,498 @@
|
||||||
|
<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>
|
||||||
|
|
@ -0,0 +1,337 @@
|
||||||
|
<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="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}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
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/sysCorpuscleFence/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