forked from dyf/dyf-vue-ui
电子围栏完成
This commit is contained in:
liub
@ -6,8 +6,10 @@ VITE_APP_ENV = 'development'
|
|||||||
|
|
||||||
# 开发环境
|
# 开发环境
|
||||||
# VITE_APP_BASE_API = 'http://47.120.79.150/backend'
|
# VITE_APP_BASE_API = 'http://47.120.79.150/backend'
|
||||||
VITE_APP_BASE_API = 'http://192.168.2.23:8000'
|
# VITE_APP_BASE_API = 'http://192.168.110.54:8000'
|
||||||
# VITE_APP_BASE_API = 'http://localhost:8000'
|
|
||||||
|
#代永飞接口
|
||||||
|
VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'
|
||||||
|
|
||||||
|
|
||||||
# 应用访问路径 例如使用前缀 /admin/
|
# 应用访问路径 例如使用前缀 /admin/
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
<meta name="renderer" content="webkit" />
|
<meta name="renderer" content="webkit" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<script src="https://webapi.amap.com/maps?v=2.0&key=90bc158992feb8ccd0145e168cab1307"></script>
|
<script src="https://webapi.amap.com/maps?v=2.0&key=90bc158992feb8ccd0145e168cab1307&plugin=AMap.CircleEditor"></script>
|
||||||
<title>物联网管理平台</title>
|
<title>物联网管理平台</title>
|
||||||
<!--[if lt IE 11
|
<!--[if lt IE 11
|
||||||
]><script>
|
]><script>
|
||||||
|
|||||||
77
src/api/FenceManager/fence.ts
Normal file
77
src/api/FenceManager/fence.ts
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
import request from '@/utils/request';
|
||||||
|
|
||||||
|
//修改电子围栏
|
||||||
|
function updateFence(data) {
|
||||||
|
return request({
|
||||||
|
url: '/api/equipment/geoFence',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//新增电子围栏
|
||||||
|
function AddFence(data) {
|
||||||
|
return request({
|
||||||
|
url: '/api/equipment/geoFence',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//导出电子围栏列表
|
||||||
|
function exportFence (data){
|
||||||
|
return request({
|
||||||
|
url: '/api/equipment/geoFence/export',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//位置检查
|
||||||
|
function check(data) {
|
||||||
|
return request({
|
||||||
|
url: '/api/equipment/geoFence/check',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取电子围栏详细信息
|
||||||
|
function geoFenceById(id) {
|
||||||
|
return request({
|
||||||
|
url: '/api/equipment/geoFence/'+id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//查询电子围栏列表
|
||||||
|
function getList(data) {
|
||||||
|
if(!data){
|
||||||
|
data={pageNum:1,pageSize:9999};
|
||||||
|
}
|
||||||
|
return request({
|
||||||
|
url: '/api/equipment/geoFence/list',
|
||||||
|
method: 'get',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//删除电子围栏
|
||||||
|
function DelFence(ids) {
|
||||||
|
return request({
|
||||||
|
url: '/api/equipment/geoFence/' + ids,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export default{
|
||||||
|
updateFence:updateFence,
|
||||||
|
AddFence:AddFence,
|
||||||
|
exportFence:exportFence,
|
||||||
|
check:check,
|
||||||
|
geoFenceById:geoFenceById,
|
||||||
|
getList:getList,
|
||||||
|
DelFence:DelFence
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
240
src/api/FenceManager/mapOpt.ts
Normal file
240
src/api/FenceManager/mapOpt.ts
Normal file
@ -0,0 +1,240 @@
|
|||||||
|
var map = null;
|
||||||
|
var circle = null;
|
||||||
|
var polygon = null;
|
||||||
|
|
||||||
|
|
||||||
|
function initMap() {
|
||||||
|
// let key = '90bc158992feb8ccd0145e168cab1307';
|
||||||
|
let init = function () {
|
||||||
|
map = new AMap.Map("map", {
|
||||||
|
viewMode: '2D', //默认使用 2D 模式
|
||||||
|
zoom: 11, //地图级别
|
||||||
|
center: [114.420739, 30.487514], //地图中心点
|
||||||
|
});
|
||||||
|
|
||||||
|
map.on('click',function(evt){
|
||||||
|
alert('您点击的位置:'+evt.lnglat.lng+' , '+ evt.lnglat.lat);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if(map){
|
||||||
|
resolve(200);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (window.AMap) {
|
||||||
|
init();
|
||||||
|
resolve(200);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
reject({code:500,msg:'高德地图未能初始化成功'});
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//添加一个点
|
||||||
|
function AddPoint(point, index, dragEnd, click) {
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
try {
|
||||||
|
let center = point ? new AMap.LngLat(point.lng, point.lat) : map.getCenter();
|
||||||
|
|
||||||
|
let marker = new AMap.Text({
|
||||||
|
icon: "http://wdxm.ztzhtech.com:8111/Script/Home/img/welComeImg/mapLocation.png",
|
||||||
|
position: center,
|
||||||
|
offset: new AMap.Pixel(-15, -24),
|
||||||
|
draggable: true,
|
||||||
|
cursor: 'point',
|
||||||
|
title: '点击删除',
|
||||||
|
text: index,
|
||||||
|
class: 'point',
|
||||||
|
extData: { type: 'point', txt: index }
|
||||||
|
});
|
||||||
|
marker.setMap(map);
|
||||||
|
|
||||||
|
let lays = map.getAllOverlays('text');
|
||||||
|
for (let i = 0; i < lays.length; i++) {
|
||||||
|
const element = lays[i];
|
||||||
|
let cls = element.getOptions();
|
||||||
|
if (cls.class) {
|
||||||
|
element.dom.classList.add(cls.class);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
marker.on('dragend', dragEnd);
|
||||||
|
marker.on('mouseover', function (evt) {
|
||||||
|
marker.setText('X');
|
||||||
|
|
||||||
|
});
|
||||||
|
marker.on('mouseout', function (evt) {
|
||||||
|
marker.setText(marker.getExtData().txt);
|
||||||
|
|
||||||
|
});
|
||||||
|
marker.on('click', function (evt) {
|
||||||
|
|
||||||
|
click(evt, marker);
|
||||||
|
});
|
||||||
|
resolve(center);
|
||||||
|
} catch (ex) {
|
||||||
|
reject(ex)
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCenter() {
|
||||||
|
var center = map.getCenter().toJSON();
|
||||||
|
return center;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setCenter(lon, lat) {
|
||||||
|
var position = new AMap.LngLat(lon, lat); //传入经纬度
|
||||||
|
map.setCenter(position); //简写 设置地图中心点
|
||||||
|
|
||||||
|
}
|
||||||
|
//画多边形
|
||||||
|
function DrawPoy(points) {
|
||||||
|
if(!map){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!points) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let path = [];
|
||||||
|
if (polygon) {
|
||||||
|
map.remove(polygon);
|
||||||
|
polygon = null;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
points.filter(v => {
|
||||||
|
path.push(new AMap.LngLat(v.lng, v.lat));
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
|
||||||
|
polygon = new AMap.Polygon({
|
||||||
|
path: path,
|
||||||
|
fillColor: '#ccebc5',
|
||||||
|
strokeOpacity: 1,
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
strokeColor: '#FF0000',
|
||||||
|
strokeWeight: 5,
|
||||||
|
strokeStyle: 'solid',
|
||||||
|
strokeDasharray: [5, 5],
|
||||||
|
});
|
||||||
|
|
||||||
|
map.add(polygon);
|
||||||
|
|
||||||
|
// map.setFitView();
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
}
|
||||||
|
//画圆形
|
||||||
|
function DrawCicle(points, raduis, dragEnd) {
|
||||||
|
if(!map){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (circle) {
|
||||||
|
map.remove(circle);
|
||||||
|
}
|
||||||
|
|
||||||
|
circle = new AMap.Circle({
|
||||||
|
center: [points[0].lng, points[0].lat],
|
||||||
|
radius: raduis ? raduis : 1000, //半径
|
||||||
|
borderWeight: 3,
|
||||||
|
strokeColor: "#FF33FF",
|
||||||
|
strokeOpacity: 1,
|
||||||
|
strokeWeight: 6,
|
||||||
|
strokeOpacity: 0.2,
|
||||||
|
fillOpacity: 0.4,
|
||||||
|
strokeStyle: 'solid',
|
||||||
|
strokeDasharray: [10, 10],
|
||||||
|
// 线样式还支持 'dashed'
|
||||||
|
fillColor: '#1791fc',
|
||||||
|
zIndex: 50,
|
||||||
|
})
|
||||||
|
|
||||||
|
// var circleEditor = new AMap.CircleEditor(map, circle,{
|
||||||
|
// editOptions: {
|
||||||
|
// moveable: false, // 禁止拖拽圆心
|
||||||
|
// // 可以同时配置其他编辑选项
|
||||||
|
// // scalable: true // 允许缩放(默认开启)
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// circleEditor.open();
|
||||||
|
|
||||||
|
// circleEditor.on('move', function (event) {
|
||||||
|
|
||||||
|
// console.log('触发事件：move')
|
||||||
|
// })
|
||||||
|
|
||||||
|
// circleEditor.on('adjust', function (event) {
|
||||||
|
// console.log('触发事件：adjust');
|
||||||
|
|
||||||
|
// dragEnd(event.radius);
|
||||||
|
// })
|
||||||
|
|
||||||
|
// circleEditor.on('end', function (event) {
|
||||||
|
|
||||||
|
// console.log('触发事件： end')
|
||||||
|
// // event.target 即为编辑后的圆形对象
|
||||||
|
// })
|
||||||
|
|
||||||
|
map.add(circle);
|
||||||
|
// 缩放地图到合适的视野级别
|
||||||
|
map.setFitView([circle])
|
||||||
|
}
|
||||||
|
|
||||||
|
//清除所有
|
||||||
|
function clearOverLays() {
|
||||||
|
map && map.clearMap();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function removeOverLay(lay) {
|
||||||
|
map && map.remove(lay);
|
||||||
|
}
|
||||||
|
|
||||||
|
function removePoy() {
|
||||||
|
if(!map){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (polygon) {
|
||||||
|
map.remove(polygon);
|
||||||
|
polygon = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
function removeCircle() {
|
||||||
|
if(!map){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (circle) {
|
||||||
|
map.remove(circle);
|
||||||
|
circle = null;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function setFitView() {
|
||||||
|
if(map){map.setFitView();}
|
||||||
|
}
|
||||||
|
export default {
|
||||||
|
gdMap: map,
|
||||||
|
initMap: initMap,
|
||||||
|
AddPoint: AddPoint,
|
||||||
|
getCenter: getCenter,
|
||||||
|
DrawPoy: DrawPoy,
|
||||||
|
DrawCicle: DrawCicle,
|
||||||
|
clearOverLays: clearOverLays,
|
||||||
|
removeOverLay: removeOverLay,
|
||||||
|
removePoy: removePoy,
|
||||||
|
removeCircle: removeCircle,
|
||||||
|
setFitView: setFitView
|
||||||
|
}
|
||||||
55
src/api/FenceManager/record.ts
Normal file
55
src/api/FenceManager/record.ts
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import request from '@/utils/request';
|
||||||
|
|
||||||
|
//修改围栏进出记录
|
||||||
|
function updateRecord(data) {
|
||||||
|
return request({
|
||||||
|
url: '/api/equipment/fenceAccessRecord',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//新增围栏进出记录
|
||||||
|
function addRecord(data) {
|
||||||
|
return request({
|
||||||
|
url: '/api/equipment/fenceAccessRecord',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//获取围栏进出记录详细信息
|
||||||
|
function getRecordById(id) {
|
||||||
|
return request({
|
||||||
|
url: '/api/equipment/fenceAccessRecord/' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//查询围栏进出记录列表
|
||||||
|
function RecordList(data) {
|
||||||
|
return request({
|
||||||
|
url: '/api/equipment/fenceAccessRecord/list',
|
||||||
|
method: 'get',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//删除围栏进出记录
|
||||||
|
function DropRecord(ids) {
|
||||||
|
return request({
|
||||||
|
url: '/api/equipment/fenceAccessRecord/' + ids,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
updateRecord: updateRecord,
|
||||||
|
addRecord: addRecord,
|
||||||
|
getRecordById: getRecordById,
|
||||||
|
RecordList: RecordList,
|
||||||
|
DropRecord: DropRecord
|
||||||
|
}
|
||||||
BIN
src/assets/images/mapLocation.png
Normal file
BIN
src/assets/images/mapLocation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
593
src/views/fys-equipment/fenceAccessRecord/index.vue
Normal file
593
src/views/fys-equipment/fenceAccessRecord/index.vue
Normal file
@ -0,0 +1,593 @@
|
|||||||
|
<template>
|
||||||
|
<div class="content" v-loading="Status.fullLoading">
|
||||||
|
<div class="percent100">
|
||||||
|
<div class="topTool">
|
||||||
|
<div class="button-row">
|
||||||
|
<el-button type="primary" @click.stop="ShowEdit(null)"
|
||||||
|
><el-icon><Plus /></el-icon>新增</el-button
|
||||||
|
>
|
||||||
|
<el-button type="primary" @click.stop="Export()" plain
|
||||||
|
><el-icon><Download /></el-icon>导出</el-button
|
||||||
|
>
|
||||||
|
<el-button type="danger" plain @click.stop="DropFence(null)"
|
||||||
|
><el-icon><Delete /></el-icon>删除</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-form :inline="true" :model="queryParams" class="demo-form-inline" @submit.native.prevent>
|
||||||
|
<el-form-item label="" style="margin-right: 15px">
|
||||||
|
<el-input :suffix-icon="'Search'" v-model="queryParams.fenceName" placeholder="名称" clearable @keyup.enter.stop="handleQuery" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item style="margin-right: 0px">
|
||||||
|
<el-button type="primary" @click.stop="showSearch">高级筛选</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="demo-collapse" v-show="Status.showSearch.length > 0">
|
||||||
|
<el-collapse accordion v-model="Status.showSearch">
|
||||||
|
<el-collapse-item name="1">
|
||||||
|
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef">
|
||||||
|
<el-form-item label="事件类型" prop="eventType">
|
||||||
|
<el-select v-model="queryParams.eventType" placeholder="请选择" clearable>
|
||||||
|
<el-option :key="1" :label="'闯入'" :value="1" />
|
||||||
|
<el-option :key="2" :label="'离开'" :value="2" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="事件时间" prop="Date">
|
||||||
|
<el-date-picker
|
||||||
|
style="width: 240px"
|
||||||
|
v-model="queryParams.Date"
|
||||||
|
type="daterange"
|
||||||
|
range-separator="-"
|
||||||
|
start-placeholder="开始时间"
|
||||||
|
end-placeholder="结束时间"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="围栏名称" prop="fenceId">
|
||||||
|
<el-select v-model="queryParams.fenceId" placeholder="请选择" clearable filterable>
|
||||||
|
<el-option v-for="item in dic.fence" :key="item.id" :label="item.name" :value="item.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备名称" prop="deviceId">
|
||||||
|
<el-select v-model="queryParams.deviceId" placeholder="请选择" clearable filterable>
|
||||||
|
<el-option v-for="item in dic.device" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||||||
|
<el-button @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
ref="grid"
|
||||||
|
v-loading="Status.loading"
|
||||||
|
border
|
||||||
|
:data="List"
|
||||||
|
:height="Status.showSearch.length > 0 ? 'calc(100vh - 355px)' : 'calc(100vh - 255px)'"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="50" align="center" />
|
||||||
|
|
||||||
|
<el-table-column label="围栏名称" align="center" prop="fenceName"> </el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="设备名称" align="center" prop="deviceName"> </el-table-column>
|
||||||
|
<!-- <el-table-column label="人员名称" align="center" prop="userName"> </el-table-column> -->
|
||||||
|
<el-table-column label="事件类型" align="center" prop="eventType">
|
||||||
|
<template #default="scope">
|
||||||
|
<div>{{ scope.row.eventType == '1' ? '闯入' : '离开' }}</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="经纬度" align="center" prop="id">
|
||||||
|
<template #default="scope">
|
||||||
|
<span style="margin-right: 15px">{{ scope.row.longitude }}</span
|
||||||
|
><span>{{ scope.row.latitude }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="精度" align="userName" prop="accuracy"> </el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button link type="primary" @click="ShowEdit(scope.row)">编辑</el-button>
|
||||||
|
<el-button link type="danger" @click="DropFence(scope.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<pagination
|
||||||
|
v-show="pagin.total > 0"
|
||||||
|
v-model:page="queryParams.pageNum"
|
||||||
|
v-model:limit="queryParams.pageSize"
|
||||||
|
:total="pagin.total"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 编辑弹出层 -->
|
||||||
|
<el-dialog width="760px" v-model="Status.showEdit" :title="'编辑记录'" :draggable="true">
|
||||||
|
<div>
|
||||||
|
<el-form :inline="true" :model="cEdit" label-width="auto">
|
||||||
|
<el-form-item label="围栏名称">
|
||||||
|
<el-select v-model="cEdit.fenceId" placeholder="请选择" clearable filterable>
|
||||||
|
<el-option v-for="item in dic.fence" :key="item.id" :label="item.name" :value="item.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="设备名称">
|
||||||
|
<el-select v-model="cEdit.deviceId" placeholder="请选择" clearable filterable>
|
||||||
|
<el-option v-for="item in dic.device" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<!-- <el-form-item label="人员名称">
|
||||||
|
<el-select v-model="cEdit.userId" placeholder="请选择">
|
||||||
|
<el-option :key="0" :label="'多边形'" :value="0" />
|
||||||
|
<el-option :key="1" :label="'圆形'" :value="1" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item> -->
|
||||||
|
<el-form-item label="事件时间">
|
||||||
|
<el-date-picker v-model="cEdit.eventTime" type="datetime" placeholder="选择时间" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="事件类型">
|
||||||
|
<el-select v-model="cEdit.eventType" placeholder="请选择" clearable>
|
||||||
|
<el-option :key="1" :label="'闯入'" :value="1" />
|
||||||
|
<el-option :key="2" :label="'离开'" :value="2" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="经度">
|
||||||
|
<el-input v-model="cEdit.longitude" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="纬度">
|
||||||
|
<el-input v-model="cEdit.latitude" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="精度">
|
||||||
|
<el-input v-model="cEdit.accuracy" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="center" style="margin-top: 20px">
|
||||||
|
<el-button type="primary" @click="SaveFormData"> 确定 </el-button>
|
||||||
|
<el-button type="primary" plain @click="CloseEdit"> 取消 </el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 提示框 -->
|
||||||
|
<el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" center>
|
||||||
|
<span :class="Status.confirm.isWarn">
|
||||||
|
{{ Status.confirm.text }}
|
||||||
|
</span>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="Status.confirm.OkCallback"> 确定 </el-button>
|
||||||
|
<el-button v-show="Status.confirm.showCancel" @click="Status.confirm.cancelCallback">取消</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import api from '@/api/FenceManager/record';
|
||||||
|
import fenceApi from '@/api/FenceManager/fence';
|
||||||
|
import common from '@/utils/common';
|
||||||
|
import deviceapi from '@/api/equipmentManagement/device/index';
|
||||||
|
import request from '@/utils/request';
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||||
|
|
||||||
|
var grid = ref(null);
|
||||||
|
|
||||||
|
//全局状态控制
|
||||||
|
var Status = reactive({
|
||||||
|
fullLoading: false, //是否显示全屏loading
|
||||||
|
loading: false, //是否显示表格区域loading
|
||||||
|
confirm: {
|
||||||
|
//弹出框的配置
|
||||||
|
Visible: false,
|
||||||
|
title: '',
|
||||||
|
text: '',
|
||||||
|
cancelCallback: null,
|
||||||
|
OkCallback: null,
|
||||||
|
showCancel: true,
|
||||||
|
isWarn: false //是否警告色
|
||||||
|
},
|
||||||
|
showSearch: [], //是否显示高级查询
|
||||||
|
showEdit: false //是否显示编辑弹窗
|
||||||
|
});
|
||||||
|
//查询的条件
|
||||||
|
var queryParams = reactive({
|
||||||
|
fenceName: '',
|
||||||
|
fenceId: '',
|
||||||
|
deviceId: '',
|
||||||
|
eventType: '',
|
||||||
|
latitude: '',
|
||||||
|
longitude: '',
|
||||||
|
accuracy: '',
|
||||||
|
Date: [],
|
||||||
|
startEventTime: '',
|
||||||
|
endEventTime: '',
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10
|
||||||
|
});
|
||||||
|
|
||||||
|
var dic = reactive({
|
||||||
|
fence: [],
|
||||||
|
device: [],
|
||||||
|
users: []
|
||||||
|
});
|
||||||
|
var cEdit = reactive({
|
||||||
|
'id': null,
|
||||||
|
'fenceId': null,
|
||||||
|
'deviceId': null,
|
||||||
|
'userId': null,
|
||||||
|
'eventType': null,
|
||||||
|
'latitude': null,
|
||||||
|
'longitude': null,
|
||||||
|
'accuracy': null,
|
||||||
|
'eventTime': null
|
||||||
|
});
|
||||||
|
|
||||||
|
//页码控件数据
|
||||||
|
var pagin = reactive({
|
||||||
|
total: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
//列表数据
|
||||||
|
var List = ref<any[]>(null);
|
||||||
|
|
||||||
|
//显示隐藏高级查询
|
||||||
|
function showSearch() {
|
||||||
|
if (Status.showSearch.length > 0) {
|
||||||
|
Status.showSearch = [];
|
||||||
|
} else {
|
||||||
|
Status.showSearch = ['1'];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function ShowEdit(item) {
|
||||||
|
Status.showEdit = true;
|
||||||
|
if (item) {
|
||||||
|
let keys = Object.keys(item);
|
||||||
|
keys.forEach((key) => {
|
||||||
|
cEdit[key] = item[key];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function CloseEdit() {
|
||||||
|
Status.showEdit = false;
|
||||||
|
let defCfg = {
|
||||||
|
'id': null,
|
||||||
|
'fenceId': null,
|
||||||
|
'deviceId': null,
|
||||||
|
'userId': null,
|
||||||
|
'eventType': null,
|
||||||
|
'latitude': null,
|
||||||
|
'longitude': null,
|
||||||
|
'accuracy': null,
|
||||||
|
'eventTime': null
|
||||||
|
};
|
||||||
|
let keys = Object.keys(defCfg);
|
||||||
|
keys.forEach((key) => {
|
||||||
|
cEdit[key] = defCfg[key];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//响应查询
|
||||||
|
var queryTime = null;
|
||||||
|
function handleQuery() {
|
||||||
|
clearTimeout(queryTime);
|
||||||
|
queryTime = setTimeout(getList, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
//重置查询条件
|
||||||
|
function resetQuery() {
|
||||||
|
let cfg = {
|
||||||
|
fenceName: '',
|
||||||
|
fenceId: '',
|
||||||
|
deviceId: '',
|
||||||
|
eventType: '',
|
||||||
|
latitude: '',
|
||||||
|
longitude: '',
|
||||||
|
accuracy: '',
|
||||||
|
Date: [],
|
||||||
|
startEventTime: '',
|
||||||
|
endEventTime: ''
|
||||||
|
};
|
||||||
|
let keys = Object.keys(cfg);
|
||||||
|
keys.forEach((k) => {
|
||||||
|
queryParams[k] = cfg[k];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//--------------------------------------
|
||||||
|
|
||||||
|
//保存数据
|
||||||
|
function SaveFormData() {
|
||||||
|
let promise = Promise.resolve({ code: 200, msg: '操作成功' });
|
||||||
|
Status.fullLoading = true;
|
||||||
|
|
||||||
|
if (cEdit.id !== null) {
|
||||||
|
//编辑
|
||||||
|
promise = api.updateRecord(cEdit);
|
||||||
|
} else {
|
||||||
|
//新增
|
||||||
|
promise = api.addRecord(cEdit);
|
||||||
|
}
|
||||||
|
|
||||||
|
promise
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
CloseEdit();
|
||||||
|
getList();
|
||||||
|
}
|
||||||
|
alert(res.msg);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
Status.fullLoading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//删除围栏
|
||||||
|
function DropFence(item) {
|
||||||
|
let arr = [];
|
||||||
|
if (item) {
|
||||||
|
arr = [item];
|
||||||
|
} else {
|
||||||
|
arr = getSelectionRows(grid);
|
||||||
|
}
|
||||||
|
if (arr.length == 0) {
|
||||||
|
alert('请选择要删除的数据');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
confirm(
|
||||||
|
'删除后不可恢复,您确认？',
|
||||||
|
() => {
|
||||||
|
arr = arr.map((v) => {
|
||||||
|
return v.id;
|
||||||
|
});
|
||||||
|
api.DropRecord(arr).then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
handleQuery();
|
||||||
|
}
|
||||||
|
alert(res.msg);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
null,
|
||||||
|
'提示'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getList() {
|
||||||
|
Status.loading = true;
|
||||||
|
api
|
||||||
|
.RecordList(queryParams)
|
||||||
|
.then((res) => {
|
||||||
|
List.value = res.rows;
|
||||||
|
pagin.total = res.total;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
Status.loading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function Export() {
|
||||||
|
|
||||||
|
let json = {};
|
||||||
|
proxy?.download('/api/equipment/fenceAccessRecord/export', json, `围栏进出记录_${new Date().getTime()}.xlsx`, 'post').finally(() => {
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取已选中的行
|
||||||
|
var getSelectionRows = (gridInstance) => {
|
||||||
|
if (gridInstance.value) {
|
||||||
|
// 检查ref是否已正确引用组件实例
|
||||||
|
var selectedRows = gridInstance.value.getSelectionRows(); // 获取选中行数据数组
|
||||||
|
return selectedRows;
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
};
|
||||||
|
|
||||||
|
//字典初始化
|
||||||
|
function initDic() {
|
||||||
|
let getFence = () => {
|
||||||
|
fenceApi.getList(null).then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
dic.fence = res.rows;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
let getDevice = () => {
|
||||||
|
request({
|
||||||
|
url: '/api/device',
|
||||||
|
method: 'get',
|
||||||
|
params: { pageNum: 1, pageSize: 9999 }
|
||||||
|
}).then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
dic.device = res.rows;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
let getUsers = () => {
|
||||||
|
// request({
|
||||||
|
// url: '/system/user/list',
|
||||||
|
// method: 'get',
|
||||||
|
// params: { pageNum: 1, pageSize: 9999 }
|
||||||
|
// }).then((res) => {
|
||||||
|
// if (res.code == 200) {
|
||||||
|
// dic.users = res.rows;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
getFence();
|
||||||
|
getDevice();
|
||||||
|
getUsers();
|
||||||
|
}
|
||||||
|
|
||||||
|
window.confirm = function (text, OK, cancel, title, isWarn = false) {
|
||||||
|
let Cfg = {
|
||||||
|
Visible: true,
|
||||||
|
title: title ? title : '提示',
|
||||||
|
text: text ? text : '此操作不可逆，您确定这样做吗？',
|
||||||
|
OkCallback: () => {
|
||||||
|
Status.confirm.Visible = false;
|
||||||
|
if (OK) {
|
||||||
|
OK();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showCancel: true,
|
||||||
|
cancelCallback: () => {
|
||||||
|
Status.confirm.Visible = false;
|
||||||
|
if (cancel) {
|
||||||
|
cancel();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isWarn: isWarn
|
||||||
|
};
|
||||||
|
|
||||||
|
Status.confirm = Cfg;
|
||||||
|
};
|
||||||
|
|
||||||
|
window.alert = function (text, OK, title) {
|
||||||
|
let Cfg = {
|
||||||
|
Visible: true,
|
||||||
|
title: title ? title : '提示',
|
||||||
|
text: text ? text : '不符合规则',
|
||||||
|
OkCallback: () => {
|
||||||
|
Status.confirm.Visible = false;
|
||||||
|
if (OK) {
|
||||||
|
OK();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showCancel: false,
|
||||||
|
cancelCallback: null,
|
||||||
|
isWarn: false
|
||||||
|
};
|
||||||
|
|
||||||
|
Status.confirm = Cfg;
|
||||||
|
};
|
||||||
|
|
||||||
|
var hideConfirm = function () {
|
||||||
|
let Cfg = {
|
||||||
|
Visible: false,
|
||||||
|
title: '提示',
|
||||||
|
text: '',
|
||||||
|
cancelCallback: null,
|
||||||
|
OkCallback: null,
|
||||||
|
showCancel: false,
|
||||||
|
isWarn: false
|
||||||
|
};
|
||||||
|
|
||||||
|
Status.confirm = Cfg;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getList();
|
||||||
|
initDic();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.fleft {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fright {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.displayNone {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - 84px);
|
||||||
|
height: calc(100vh - 84px);
|
||||||
|
background: rgba(247, 248, 252, 1);
|
||||||
|
font-size: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 8px 20px;
|
||||||
|
font-family: 'Microsoft YaHei';
|
||||||
|
}
|
||||||
|
|
||||||
|
.topTool {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid #e1e2e5f2;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.percent100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep .el-collapse-item__header {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
:deep .el-collapse,
|
||||||
|
:deep .el-collapse-item__wrap {
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
|
width: 100%;
|
||||||
|
height: 58vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px dashed red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.point,
|
||||||
|
:deep .point {
|
||||||
|
background-image: url(@/assets/images/mapLocation.png);
|
||||||
|
width: 30px;
|
||||||
|
height: 48px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-color: #00000000;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.point amap-overlay-text-container,
|
||||||
|
:deep .point .amap-overlay-text-container {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 17px;
|
||||||
|
border: none;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 30px;
|
||||||
|
background: #00000000;
|
||||||
|
}
|
||||||
|
.el-date-editor,
|
||||||
|
:deep .el-date-editor {
|
||||||
|
width: 240px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
624
src/views/fys-equipment/geoFence/index.vue
Normal file
624
src/views/fys-equipment/geoFence/index.vue
Normal file
@ -0,0 +1,624 @@
|
|||||||
|
<template>
|
||||||
|
<div class="content" v-loading="Status.fullLoading">
|
||||||
|
<div class="percent100">
|
||||||
|
<div class="topTool">
|
||||||
|
<div class="button-row">
|
||||||
|
<el-button type="primary" @click.stop="ShowEdit(null)"
|
||||||
|
><el-icon><Plus /></el-icon>新增</el-button
|
||||||
|
>
|
||||||
|
<el-button type="primary" @click.stop="Export()" plain
|
||||||
|
><el-icon><Download /></el-icon>导出</el-button
|
||||||
|
>
|
||||||
|
<el-button type="danger" plain @click.stop="DropFence(null)"
|
||||||
|
><el-icon><Delete /></el-icon>删除</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-form :inline="true" :model="queryParams" class="demo-form-inline" @submit.native.prevent>
|
||||||
|
<el-form-item label="" style="margin-right: 15px">
|
||||||
|
<el-input :suffix-icon="'Search'" v-model="queryParams.name" placeholder="名称" clearable @keyup.enter.stop="handleQuery" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item style="margin-right: 0px">
|
||||||
|
<el-button type="primary" @click.stop="showSearch">高级筛选</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="demo-collapse" v-show="Status.showSearch.length > 0">
|
||||||
|
<el-collapse accordion v-model="Status.showSearch">
|
||||||
|
<el-collapse-item name="1">
|
||||||
|
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef">
|
||||||
|
<el-form-item label="围栏类型" prop="areaType">
|
||||||
|
<el-select v-model="queryParams.areaType" placeholder="请选择" clearable>
|
||||||
|
<el-option :key="0" :label="'多边形'" :value="0" />
|
||||||
|
<el-option :key="1" :label="'圆形'" :value="1" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否激活" prop="isActive" >
|
||||||
|
<el-select v-model="queryParams.isActive" clearable placeholder="请选择">
|
||||||
|
<el-option :key="1" :label="'是'" :value="1" />
|
||||||
|
<el-option :key="0" :label="'否'" :value="0" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="描述" prop="description">
|
||||||
|
<el-input v-model="queryParams.description" placeholder="请输入设备名称" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||||||
|
<el-button @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
ref="grid"
|
||||||
|
v-loading="Status.loading"
|
||||||
|
border
|
||||||
|
:data="List"
|
||||||
|
:height="Status.showSearch.length > 0 ? 'calc(100vh - 355px)' : 'calc(100vh - 255px)'"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="50" align="center" />
|
||||||
|
<el-table-column label="围栏名称" align="center" prop="name" />
|
||||||
|
|
||||||
|
<el-table-column label="围栏类型" align="center" prop="areaType">
|
||||||
|
<template #default="scope">
|
||||||
|
<div>{{ scope.row.areaType == '1' ? '圆形' : '多边形' }}</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="半径(米)" align="center" prop="radius"> </el-table-column>
|
||||||
|
<el-table-column label="是否激活" align="center" prop="isActive">
|
||||||
|
<template #default="scope">
|
||||||
|
<div>{{ scope.row.isActive == '1' ? '是' : '否' }}</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="描述" align="center" prop="description"> </el-table-column>
|
||||||
|
|
||||||
|
|
||||||
|
<el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button link type="primary" @click="ShowEdit(scope.row)">编辑</el-button>
|
||||||
|
<el-button link type="danger" @click="DropFence(scope.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<pagination
|
||||||
|
v-show="pagin.total > 0"
|
||||||
|
v-model:page="queryParams.pageNum"
|
||||||
|
v-model:limit="queryParams.pageSize"
|
||||||
|
:total="pagin.total"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 围栏编辑弹出层 -->
|
||||||
|
<el-dialog width="calc(calc(100% - 250px) * 0.9)" v-model="Status.showEdit" :title="'编辑围栏'" :draggable="true">
|
||||||
|
<div>
|
||||||
|
<el-form :inline="true" :model="cEdit" label-width="auto">
|
||||||
|
<el-form-item label="围栏名称">
|
||||||
|
<el-input v-model="cEdit.name" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="围栏类型">
|
||||||
|
<el-select v-model="cEdit.areaType" placeholder="请选择" @change="areaTypeChange()">
|
||||||
|
<el-option :key="0" :label="'多边形'" :value="0" />
|
||||||
|
<el-option :key="1" :label="'圆形'" :value="1" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="半径(米)" :class="cEdit.areaType == 1 ? '' : 'displayNone'">
|
||||||
|
<el-input v-model="cEdit.radius" @keydown="refreshOverLayer" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="是否激活">
|
||||||
|
<el-select v-model="cEdit.isActive" placeholder="请选择">
|
||||||
|
<el-option :key="1" :label="'是'" :value="1" />
|
||||||
|
<el-option :key="0" :label="'否'" :value="0" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="备注" style="width: 350px">
|
||||||
|
<el-input v-model="cEdit.description" type="textarea" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-button type="primary" @click.stop="AddPoint()"
|
||||||
|
><el-icon><Plus /></el-icon>添加坐标</el-button
|
||||||
|
>
|
||||||
|
|
||||||
|
<el-button type="primary" @click.stop="ClearPoint()">
|
||||||
|
<el-icon><Delete /></el-icon>清空</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="map" id="map"></div>
|
||||||
|
<div class="center" style="margin-top: 20px">
|
||||||
|
<el-button type="primary" @click="SaveFormData"> 确定 </el-button>
|
||||||
|
<el-button type="primary" plain @click="CloseEdit"> 取消 </el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 提示框 -->
|
||||||
|
<el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" center>
|
||||||
|
<span :class="Status.confirm.isWarn">
|
||||||
|
{{ Status.confirm.text }}
|
||||||
|
</span>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="Status.confirm.OkCallback"> 确定 </el-button>
|
||||||
|
<el-button v-show="Status.confirm.showCancel" @click="Status.confirm.cancelCallback">取消</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import api from '@/api/FenceManager/fence';
|
||||||
|
import common from '@/utils/common';
|
||||||
|
import map from '@/api/FenceManager/mapOpt';
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||||
|
|
||||||
|
var grid = ref(null);
|
||||||
|
|
||||||
|
//全局状态控制
|
||||||
|
var Status = reactive({
|
||||||
|
fullLoading: false, //是否显示全屏loading
|
||||||
|
loading: false, //是否显示表格区域loading
|
||||||
|
confirm: {
|
||||||
|
//弹出框的配置
|
||||||
|
Visible: false,
|
||||||
|
title: '',
|
||||||
|
text: '',
|
||||||
|
cancelCallback: null,
|
||||||
|
OkCallback: null,
|
||||||
|
showCancel: true,
|
||||||
|
isWarn: false //是否警告色
|
||||||
|
},
|
||||||
|
showSearch: [], //是否显示高级查询
|
||||||
|
showEdit: false //是否显示编辑弹窗
|
||||||
|
});
|
||||||
|
//查询的条件
|
||||||
|
var queryParams = reactive({
|
||||||
|
name: '',
|
||||||
|
areaType: null,
|
||||||
|
isActive: null,
|
||||||
|
description: '',
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10
|
||||||
|
});
|
||||||
|
var cEdit = reactive({
|
||||||
|
id: null,
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
areaType: null,
|
||||||
|
coordinates: [],
|
||||||
|
radius: null,
|
||||||
|
isActive: null
|
||||||
|
});
|
||||||
|
|
||||||
|
//页码控件数据
|
||||||
|
var pagin = reactive({
|
||||||
|
total: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
//列表数据
|
||||||
|
var List = ref<any[]>(null);
|
||||||
|
|
||||||
|
//显示隐藏高级查询
|
||||||
|
function showSearch() {
|
||||||
|
if (Status.showSearch.length > 0) {
|
||||||
|
Status.showSearch = [];
|
||||||
|
} else {
|
||||||
|
Status.showSearch = ['1'];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function ShowEdit(item) {
|
||||||
|
|
||||||
|
Status.showEdit = true;
|
||||||
|
if (item) {
|
||||||
|
let keys = Object.keys(item);
|
||||||
|
keys.forEach((key) => {
|
||||||
|
if (key !== 'coordinates') {
|
||||||
|
cEdit[key] = item[key];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (item.coordinates) {
|
||||||
|
cEdit.coordinates = JSON.parse(item.coordinates);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
map.clearOverLays();
|
||||||
|
setTimeout(() => {
|
||||||
|
map
|
||||||
|
.initMap()
|
||||||
|
.then((res) => {
|
||||||
|
console.log('地图初始化成功', res);
|
||||||
|
if (cEdit.coordinates.length > 0) {
|
||||||
|
refreshOverLayer();
|
||||||
|
for (let i = 0; i < cEdit.coordinates.length; i++) {
|
||||||
|
let point = cEdit.coordinates[i];
|
||||||
|
AddPoint(point, i);
|
||||||
|
}
|
||||||
|
|
||||||
|
map.setFitView();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
alert('地图初始化没有成功');
|
||||||
|
});
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
function CloseEdit() {
|
||||||
|
Status.showEdit = false;
|
||||||
|
let defCfg = {
|
||||||
|
id: null,
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
areaType: null,
|
||||||
|
coordinates: [],
|
||||||
|
radius: null,
|
||||||
|
isActive: null
|
||||||
|
};
|
||||||
|
let keys = Object.keys(defCfg);
|
||||||
|
keys.forEach((key) => {
|
||||||
|
cEdit[key] = defCfg[key];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//响应查询
|
||||||
|
var queryTime = null;
|
||||||
|
function handleQuery() {
|
||||||
|
clearTimeout(queryTime);
|
||||||
|
queryTime = setTimeout(getList, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
//重置查询条件
|
||||||
|
function resetQuery() {
|
||||||
|
let cfg = {
|
||||||
|
name: '',
|
||||||
|
areaType: null,
|
||||||
|
isActive: null,
|
||||||
|
description: ''
|
||||||
|
};
|
||||||
|
let keys = Object.keys(cfg);
|
||||||
|
keys.forEach((k) => {
|
||||||
|
queryParams[k] = cfg[k];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//--------------------------------------
|
||||||
|
//修改围栏类型时，清空所有坐标
|
||||||
|
function areaTypeChange() {
|
||||||
|
cEdit.coordinates = [];
|
||||||
|
map.clearOverLays();
|
||||||
|
}
|
||||||
|
//圆大小改变时，更新半径字段
|
||||||
|
function circleDragEnd(radius) {
|
||||||
|
cEdit.radius = radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
//修改半径后主动更新图形
|
||||||
|
let time = null;
|
||||||
|
function refreshOverLayer() {
|
||||||
|
clearTimeout(time);
|
||||||
|
time = setTimeout(() => {
|
||||||
|
|
||||||
|
if (cEdit.areaType == 1) {
|
||||||
|
map.DrawCicle(cEdit.coordinates, cEdit.radius, circleDragEnd);
|
||||||
|
} else {
|
||||||
|
map.DrawPoy(cEdit.coordinates);
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
//清空所有点
|
||||||
|
function ClearPoint() {
|
||||||
|
confirm(
|
||||||
|
'您确认清除所有标记吗?',
|
||||||
|
() => {
|
||||||
|
cEdit.coordinates = [];
|
||||||
|
map.clearOverLays();
|
||||||
|
},
|
||||||
|
null,
|
||||||
|
'提示'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
//添加一个点
|
||||||
|
function AddPoint(point, i) {
|
||||||
|
|
||||||
|
if (cEdit.areaType == null && !point) {
|
||||||
|
alert('请选择围栏类型');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!point && cEdit.areaType == 1 && cEdit.coordinates.length > 0) {
|
||||||
|
alert('圆形围栏只有一个中心坐标点');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let index = i !== undefined ? i : cEdit.coordinates.length;
|
||||||
|
let dragEnd = (evt, lay) => {
|
||||||
|
|
||||||
|
map.removePoy();
|
||||||
|
|
||||||
|
cEdit.coordinates[index].lng = evt.lnglat.lng;
|
||||||
|
cEdit.coordinates[index].lat = evt.lnglat.lat;
|
||||||
|
refreshOverLayer();
|
||||||
|
|
||||||
|
};
|
||||||
|
let pointClick = (evt, lay) => {
|
||||||
|
|
||||||
|
confirm(
|
||||||
|
'您确认删除该点吗?',
|
||||||
|
() => {
|
||||||
|
cEdit.coordinates.splice(index, 1);
|
||||||
|
map.removeOverLay(lay);
|
||||||
|
refreshOverLayer();
|
||||||
|
},
|
||||||
|
null,
|
||||||
|
null
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
map.AddPoint(point, index + 1, dragEnd, pointClick).then((res) => {
|
||||||
|
let lon = res.lng;
|
||||||
|
let lat = res.lat;
|
||||||
|
|
||||||
|
if(!point){cEdit.coordinates.push({ lng: lon, lat: lat });}
|
||||||
|
refreshOverLayer();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//保存数据
|
||||||
|
function SaveFormData() {
|
||||||
|
if (cEdit.areaType == 0 && cEdit.coordinates.length < 3) {
|
||||||
|
alert('多边形的围栏至少需要3个点');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (cEdit.areaType == 0 && cEdit.coordinates.length == 0) {
|
||||||
|
alert('圆形的围栏至少需要1个点');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let promise = Promise.resolve({ code: 200, msg: '操作成功' });
|
||||||
|
Status.fullLoading = true;
|
||||||
|
let json = Object.assign({}, cEdit);
|
||||||
|
json.coordinates = JSON.stringify(json.coordinates);
|
||||||
|
if (cEdit.id !== null) {
|
||||||
|
//编辑
|
||||||
|
promise = api.updateFence(json);
|
||||||
|
} else {
|
||||||
|
//新增
|
||||||
|
promise = api.AddFence(json);
|
||||||
|
}
|
||||||
|
|
||||||
|
promise
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
getList();
|
||||||
|
CloseEdit();
|
||||||
|
}
|
||||||
|
alert(res.msg);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
Status.fullLoading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//删除围栏
|
||||||
|
function DropFence(item) {
|
||||||
|
let arr = [];
|
||||||
|
if (item) {
|
||||||
|
arr = [item];
|
||||||
|
} else {
|
||||||
|
arr = getSelectionRows(grid);
|
||||||
|
}
|
||||||
|
if (arr.length == 0) {
|
||||||
|
alert('请选择要删除的数据');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
arr = arr
|
||||||
|
.map((v) => {
|
||||||
|
return v.id;
|
||||||
|
})
|
||||||
|
.join(',');
|
||||||
|
api.DelFence(arr).then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
handleQuery();
|
||||||
|
}
|
||||||
|
alert(res.msg);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getList() {
|
||||||
|
Status.loading = true;
|
||||||
|
api
|
||||||
|
.getList(queryParams)
|
||||||
|
.then((res) => {
|
||||||
|
List.value = res.rows;
|
||||||
|
pagin.total = res.total;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
Status.loading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function Export() {
|
||||||
|
|
||||||
|
let json = {};
|
||||||
|
proxy?.download('/api/equipment/geoFence/export', json, `电子围栏列表_${new Date().getTime()}.xlsx`, 'post').finally(() => {
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取已选中的行
|
||||||
|
var getSelectionRows = (gridInstance) => {
|
||||||
|
if (gridInstance.value) {
|
||||||
|
// 检查ref是否已正确引用组件实例
|
||||||
|
var selectedRows = gridInstance.value.getSelectionRows(); // 获取选中行数据数组
|
||||||
|
return selectedRows;
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
};
|
||||||
|
|
||||||
|
window.confirm = function (text, OK, cancel, title, isWarn = false) {
|
||||||
|
let Cfg = {
|
||||||
|
Visible: true,
|
||||||
|
title: title ? title : '提示',
|
||||||
|
text: text ? text : '此操作不可逆，您确定这样做吗？',
|
||||||
|
OkCallback: () => {
|
||||||
|
Status.confirm.Visible = false;
|
||||||
|
if (OK) {
|
||||||
|
OK();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showCancel: true,
|
||||||
|
cancelCallback: () => {
|
||||||
|
Status.confirm.Visible = false;
|
||||||
|
if (cancel) {
|
||||||
|
cancel();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isWarn: isWarn
|
||||||
|
};
|
||||||
|
|
||||||
|
Status.confirm = Cfg;
|
||||||
|
};
|
||||||
|
|
||||||
|
window.alert = function (text, OK, title) {
|
||||||
|
let Cfg = {
|
||||||
|
Visible: true,
|
||||||
|
title: title ? title : '提示',
|
||||||
|
text: text ? text : '不符合规则',
|
||||||
|
OkCallback: () => {
|
||||||
|
Status.confirm.Visible = false;
|
||||||
|
if (OK) {
|
||||||
|
OK();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showCancel: false,
|
||||||
|
cancelCallback: null,
|
||||||
|
isWarn: false
|
||||||
|
};
|
||||||
|
|
||||||
|
Status.confirm = Cfg;
|
||||||
|
};
|
||||||
|
|
||||||
|
var hideConfirm = function () {
|
||||||
|
let Cfg = {
|
||||||
|
Visible: false,
|
||||||
|
title: '提示',
|
||||||
|
text: '',
|
||||||
|
cancelCallback: null,
|
||||||
|
OkCallback: null,
|
||||||
|
showCancel: false,
|
||||||
|
isWarn: false
|
||||||
|
};
|
||||||
|
|
||||||
|
Status.confirm = Cfg;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.fleft {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fright {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.displayNone {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - 84px);
|
||||||
|
height: calc(100vh - 84px);
|
||||||
|
background: rgba(247, 248, 252, 1);
|
||||||
|
font-size: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 8px 20px;
|
||||||
|
font-family: 'Microsoft YaHei';
|
||||||
|
}
|
||||||
|
|
||||||
|
.topTool {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid #e1e2e5f2;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.percent100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep .el-collapse-item__header {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
:deep .el-collapse,
|
||||||
|
:deep .el-collapse-item__wrap {
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
|
width: 100%;
|
||||||
|
height: 58vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #7371719e;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.point,
|
||||||
|
:deep .point {
|
||||||
|
background-image: url(http://wdxm.ztzhtech.com:8111/Script/Home/img/welComeImg/mapLocation.png);
|
||||||
|
width: 30px;
|
||||||
|
height: 48px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-color: #00000000;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.point amap-overlay-text-container,
|
||||||
|
:deep .point .amap-overlay-text-container {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 17px;
|
||||||
|
border: none;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 30px;
|
||||||
|
background: #00000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.point:hover,
|
||||||
|
:deep .point:hover {
|
||||||
|
filter: hue-rotate(169deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user