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">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,44 +1,79 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 查询电子围栏列表
|
||||
export function listFence(query) {
|
||||
export function listFence(data) {
|
||||
return request({
|
||||
url: '/fence/fence/list',
|
||||
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',
|
||||
url: '/fence/fence/fenceselectList',
|
||||
method: 'post',
|
||||
data: data
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改电子围栏
|
||||
export function updateFence(data) {
|
||||
// 查询电子围栏选择列表
|
||||
export function fenceArray(data) {
|
||||
return request({
|
||||
url: '/fence/fence',
|
||||
method: 'put',
|
||||
data: data
|
||||
url: '/fence/fence/fenceArray',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除电子围栏
|
||||
export function delFence(fenceId) {
|
||||
//添加
|
||||
export function addfence(data) {
|
||||
return request({
|
||||
url: '/fence/fence/' + fenceId,
|
||||
method: 'delete'
|
||||
url: '/fence/fence/add',
|
||||
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'
|
||||
|
||||
//查询围栏组
|
||||
export function selectGroupList() {
|
||||
// 查询围栏组列表
|
||||
export function selectGroupList(data) {
|
||||
return request({
|
||||
url: '/fence/tbGroup/selectTbGroupList',
|
||||
method: 'get'
|
||||
url: '/fence/group/selectGroupList',
|
||||
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>
|
||||
<!-- 控制按钮组 -->
|
||||
<div class="main">
|
||||
|
|
@ -92,7 +11,6 @@
|
|||
<div class="ebox">
|
||||
<el-button-group>
|
||||
<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>
|
||||
</div>
|
||||
</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() {
|
||||
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