Compare commits
No commits in common. "master" and "dev.carManage" have entirely different histories.
master
...
dev.carMan
|
|
@ -7,20 +7,6 @@
|
|||
<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,51 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 车辆列表
|
||||
export function CarListShow(data) {
|
||||
return request({
|
||||
url: '/car/manage/CarListShow',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 车辆添加
|
||||
export function insertCar(data) {
|
||||
return request({
|
||||
url: '/car/manage/insertCar',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 车辆修改
|
||||
export function updataCar(data) {
|
||||
return request({
|
||||
url: '/car/manage/updataCar',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 车辆删除
|
||||
export function deleteCar(carIds) {
|
||||
return request({
|
||||
url: '/car/manage/deleteCar?ids='+carIds,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
// 查找车辆,回显
|
||||
export function CarListShowByCarId(carId) {
|
||||
return request({
|
||||
url: '/car/manage/CarListShowByCarId?carId='+carId,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
// 查询企业
|
||||
export function selectCompany() {
|
||||
return request({
|
||||
url: '/car/company/selectCompany',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 报文列表
|
||||
export function selectMessageShow(data) {
|
||||
return request({
|
||||
url: '/car/message/selectMessageShow',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 添加
|
||||
export function insertMessage(data) {
|
||||
return request({
|
||||
url: '/car/message/insertMessage',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 报文修改
|
||||
export function updataMessage(data) {
|
||||
return request({
|
||||
url: '/car/message/updataMessage',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 报文删除
|
||||
export function deleteMessage(ids) {
|
||||
return request({
|
||||
url: '/car/message/deleteMessage?ids='+ids,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
// 查找报文,回显
|
||||
export function selectMessageByMessageId(messageId) {
|
||||
return request({
|
||||
url: '/car/message/selectMessageByMessageId?messageId='+messageId,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 模版列表
|
||||
export function selectMessageShow(data) {
|
||||
return request({
|
||||
url: '/car/template/selectTemplateShow',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 查找模版,回显
|
||||
export function selectTemplateByTemplateId(templateId) {
|
||||
return request({
|
||||
url: '/car/template/selectTemplateByTemplateId?templateId='+templateId,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
// 添加模版
|
||||
export function insertTemplate(data) {
|
||||
return request({
|
||||
url: '/car/template/insertTemplate',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 模版修改
|
||||
export function updataTemplate(data) {
|
||||
return request({
|
||||
url: '/car/template/updataTemplate',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 模版删除
|
||||
export function deleteTemplate(templateIds) {
|
||||
return request({
|
||||
url: '/car/template/deleteTemplate?ids='+templateIds,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
// 查询电子围栏列表
|
||||
export function listFence(data) {
|
||||
return request({
|
||||
url: '/vehicles/fence/fenceselectList',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 查询电子围栏选择列表
|
||||
export function fenceArray(data) {
|
||||
return request({
|
||||
url: '/vehicles/fence/fenceArray',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//添加
|
||||
export function addfence(data) {
|
||||
return request({
|
||||
url: '/vehicles/fence/add',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
//修改
|
||||
export function updfence(data) {
|
||||
return request({
|
||||
url: `/vehicles/fence/upd/${data.id}`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//删除
|
||||
export function delElectronById(id) {
|
||||
return request({
|
||||
url: '/vehicles/fence/delElectronById/'+id,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//根据id设置围栏
|
||||
export function setFenceWay(data) {
|
||||
return request({
|
||||
url: '/vehicles/fence/setFenceWay',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//开启围栏
|
||||
export function openFence(id) {
|
||||
return request({
|
||||
url: '/vehicles/fence/open/'+id,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
//回显
|
||||
export function findElectronicByid(id) {
|
||||
return request({
|
||||
url: '/vehicles/fence/findElectronicByid/'+id,
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
|
||||
//关闭围栏
|
||||
export function closeFence(id) {
|
||||
return request({
|
||||
url: '/vehicles/fence/close/'+id,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 查询围栏组列表
|
||||
export function selectGroupList(data) {
|
||||
return request({
|
||||
url: '/vehicles/group/selectGroupList',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//添加
|
||||
export function addGroup(data) {
|
||||
return request({
|
||||
url: '/vehicles/group/addGroup',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
//修改
|
||||
export function updGroup(data) {
|
||||
return request({
|
||||
url: `/vehicles/group/updGroup/${data.id}`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
//添加
|
||||
export function findGroupByid(id) {
|
||||
return request({
|
||||
url: '/vehicles/group/findGroupByid/'+id,
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 查询车辆信息列表
|
||||
export function listInfo(query) {
|
||||
return request({
|
||||
url: '/vehicle/info/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询车辆信息详细
|
||||
export function getInfo(id) {
|
||||
return request({
|
||||
url: '/vehicle/info/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增车辆信息
|
||||
export function addInfo(data) {
|
||||
return request({
|
||||
url: '/vehicle/info',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改车辆信息
|
||||
export function updateInfo(data) {
|
||||
return request({
|
||||
url: '/vehicle/info',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除车辆信息
|
||||
export function delInfo(id) {
|
||||
return request({
|
||||
url: '/vehicle/info/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
export function realTimeLocus(vin){
|
||||
return request({
|
||||
url: '/vehicle/info/realTimeLocus/' + vin,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function realTimeLocusDel(vin){
|
||||
return request({
|
||||
url: '/vehicle/info/realTimeLocus/' + vin,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
export function getVehicleDataByVin(vin){
|
||||
return request({
|
||||
url: '/vehicle/info/data/' + vin,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
export function getVehicleIndexData(){
|
||||
return request({
|
||||
url: '/vehicle/info/indexData/',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 查询车辆运行记录列表
|
||||
export function listMove(query) {
|
||||
return request({
|
||||
url: '/vehicle/move/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询车辆运行记录详细
|
||||
export function getMove(id) {
|
||||
return request({
|
||||
url: '/vehicle/move/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增车辆运行记录
|
||||
export function addMove(data) {
|
||||
return request({
|
||||
url: '/vehicle/move',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改车辆运行记录
|
||||
export function updateMove(data) {
|
||||
return request({
|
||||
url: '/vehicle/move',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除车辆运行记录
|
||||
export function delMove(id) {
|
||||
return request({
|
||||
url: '/vehicle/move/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 准备开始历史数据
|
||||
export function historyMoveStart(vin,startTime, endTime) {
|
||||
return request({
|
||||
url: '/vehicle/move/historyMove/' + vin + "/" + startTime + "/" + endTime,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 查看结束历史数据
|
||||
export function historyMoveDel(vin) {
|
||||
return request({
|
||||
url: '/vehicle/move/historyMove/' + vin,
|
||||
method: 'DELETE'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 历史数据
|
||||
export function historyMove(vin) {
|
||||
return request({
|
||||
url: '/vehicle/move/history/' + vin,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
|
@ -42,18 +42,3 @@ export function delRule(id) {
|
|||
method: 'delete'
|
||||
})
|
||||
}
|
||||
//双表联查
|
||||
export function selectByStrategyId(id) {
|
||||
return request({
|
||||
url: '/warn/rule/selectByStrategyId?strategyId=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
//根据模板查询报文
|
||||
export function selectByTemplateId(templateId) {
|
||||
return request({
|
||||
url: '/warn/carMessage/selectByTemplateId?templateId='+templateId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,28 +42,3 @@ export function delStrategy(id) {
|
|||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
//双表联查
|
||||
export function strategyRuleList(data) {
|
||||
return request({
|
||||
url: '/warn/strategy/strategyRuleList',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
//查询所有类型
|
||||
export function carTypeList() {
|
||||
return request({
|
||||
url: '/warn/carType/carTypeList',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
//根据类型查询模板
|
||||
export function catTypeId(catTypeId) {
|
||||
return request({
|
||||
url: '/warn/carType/catTypeId?catTypeId='+catTypeId,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ service.interceptors.request.use(config => {
|
|||
|
||||
// 响应拦截器
|
||||
service.interceptors.response.use(res => {
|
||||
|
||||
debugger
|
||||
// 未设置状态码则默认成功状态
|
||||
const code = res.data.code || 200;
|
||||
// 获取错误信息
|
||||
|
|
|
|||
|
|
@ -1,607 +0,0 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
|
||||
<el-form-item label="VIN码" prop="postCode">
|
||||
<el-input
|
||||
v-model="queryParams.carVin"
|
||||
clearable
|
||||
placeholder="请输入车辆VIN码"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆型号" prop="postName">
|
||||
<el-input
|
||||
v-model="queryParams.typeName"
|
||||
clearable
|
||||
placeholder="请输入车辆型号"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="能源类型" prop="status">
|
||||
<el-select v-model="queryParams.energyType" clearable placeholder="能源类型">
|
||||
<el-option label="电动" value="1"></el-option>
|
||||
<el-option label="纯油" value="2"></el-option>
|
||||
<el-option label="混动" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="档的类型" prop="status">
|
||||
<el-select v-model="queryParams.gearType" clearable placeholder="档的类型">
|
||||
<el-option label="手动" value="1"></el-option>
|
||||
<el-option label="自动" value="2"></el-option>
|
||||
</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:post: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:post: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
|
||||
v-hasPermi="['system:post:remove']"
|
||||
:disabled="multiple"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="handleDelete"
|
||||
>删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['system:post:export']"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
size="mini"
|
||||
type="warning"
|
||||
@click="handleExport"
|
||||
>导出
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
|
||||
<el-table-column align="center" type="selection" width="55"/>
|
||||
<el-table-column align="center" label="车辆表" prop="carId"/>
|
||||
<el-table-column align="center" label="车架号" prop="carFrame"/>
|
||||
<el-table-column align="center" label="车牌号" prop="carCoed"/>
|
||||
<el-table-column align="center" label="车牌颜色" prop="carColor">
|
||||
<template slot-scope="scope">
|
||||
<span v-show="(scope.row.carColor==1)">白色</span>
|
||||
<span v-show="(scope.row.carColor==2)">绿色</span>
|
||||
<span v-show="(scope.row.carColor==3)">黑色</span>
|
||||
<span v-show="(scope.row.carColor==4)">银色</span>
|
||||
<span v-show="(scope.row.carColor==5)">红色</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="VIN码" prop="carVin"/>
|
||||
<el-table-column align="center" label="驾驶员" prop="userId"/>
|
||||
<el-table-column align="center" label="车辆型号" prop="typeId"/>
|
||||
<el-table-column align="center" label="年审日期" prop="audditTime"/>
|
||||
<el-table-column align="center" label="行驶证到期日期" prop="licenseTime"/>
|
||||
<el-table-column align="center" label="保险到期日期" prop="insuranceTime"/>
|
||||
<el-table-column align="center" label="在线状态" prop="carStatus">
|
||||
<template slot-scope="scope">
|
||||
<span v-show="(scope.row.carStatus==1)">无信号</span>
|
||||
<span v-show="(scope.row.carStatus==2)">行驶中</span>
|
||||
<span v-show="(scope.row.carStatus==3)">已停止</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" prop="createdTime"/>
|
||||
<el-table-column align="center" label="当前档位 " prop="carGears">
|
||||
<template slot-scope="scope">
|
||||
<span v-show="(scope.row.carGears==1)">R档：倒车挡。</span>
|
||||
<span v-show="(scope.row.carGears==2)">N档：空挡</span>
|
||||
<span v-show="(scope.row.carGears==3)">D档：前进挡</span>
|
||||
<span v-show="(scope.row.carGears==4)">S档：运动挡</span>
|
||||
<span v-show="(scope.row.carGears==5)">P档：停车挡</span>
|
||||
<span v-show="(scope.row.carGears==6)">L档:大马力档</span>
|
||||
<span v-show="(scope.row.carGears==7)">手动:前进1档</span>
|
||||
<span v-show="(scope.row.carGears==8)">手动:前进2档</span>
|
||||
<span v-show="(scope.row.carGears==9)">手动:前进3档</span>
|
||||
<span v-show="(scope.row.carGears==10)">手动:前进4档</span>
|
||||
<span v-show="(scope.row.carGears==11)">手动:前进5档</span>
|
||||
<span v-show="(scope.row.carGears==12)">倒挡</span>
|
||||
<span v-show="(scope.row.carGears==13)">空挡</span>
|
||||
<span v-show="(scope.row.carGears==14)">已停止</span>
|
||||
<span v-show="(scope.row.carGears==15)">已停止</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="创建时间" prop="createTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" class-name="small-padding fixed-width" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-hasPermi="['system:post:edit']"
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['system:post:remove']"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 添加或修改岗位对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
|
||||
<el-form-item label="车辆编号" prop="carPlate">
|
||||
<el-input v-model="form.carId" :min="0" controls-position="right" disabled />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="车辆车牌号" prop="carPlate">
|
||||
<el-input v-model="form.carCoed" :min="0" controls-position="right"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="车辆颜色" prop="carColor">
|
||||
<el-select v-model="form.carColor" clearable placeholder="车辆颜色">
|
||||
<el-option label="白色" value="1"></el-option>
|
||||
<el-option label="绿色" value="2"></el-option>
|
||||
<el-option label="黑色" value="3"></el-option>
|
||||
<el-option label="银色" value="4"></el-option>
|
||||
<el-option label="红色" value="5"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="车辆配置" prop="typeId">
|
||||
<div class="block">
|
||||
<el-cascader
|
||||
v-model="form.typeId"
|
||||
:options="options"
|
||||
:props="{ expandTrigger: 'hover' }"
|
||||
@change="handleChange"></el-cascader>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="年审日期" prop="audditTime">
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
v-model="form.audditTime"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
>
|
||||
<!-- JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")-->
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<el-input v-model="form.audditTime" placeholder="请输入编码名称"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="行驶证到期日期" prop="licenseTime">
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
v-model="form.licenseTime"
|
||||
type="datetime"
|
||||
|
||||
placeholder="选择日期时间"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<el-input v-model="form.licenseTime" placeholder="请输入编码名称"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="启用状态" prop="carStatus">
|
||||
<el-select v-model="form.carStatus" clearable placeholder="启用状态">
|
||||
<el-option label="无信号" value="1"></el-option>
|
||||
<el-option label="行驶中" value="2"></el-option>
|
||||
<el-option label="已停止" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="当前档位" prop="remark">-->
|
||||
<!-- <el-input v-model="form.carGears" placeholder="请输入内容" type="textarea"/>-->
|
||||
<!-- </el-form-item>-->
|
||||
|
||||
<el-form-item label="车辆品牌" prop="carBrand">
|
||||
<el-input v-model="form.carModel" placeholder="请输入岗位名称"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="车辆型号" prop="carBrand">
|
||||
<el-input v-model="form.carBrand" placeholder="请输入车辆型号" type="textarea"/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="最后一次连线时间" prop="postCode">-->
|
||||
<!-- <el-input v-model="form.carLastJoinTime" placeholder="请输入编码名称"/>-->
|
||||
<!-- </el-form-item>-->
|
||||
|
||||
<!-- <el-form-item label="最后一次离线时间" prop="postName">-->
|
||||
<!-- <el-input v-model="form.carLastOfflineTime" placeholder="请输入岗位名称"/>-->
|
||||
<!-- </el-form-item>-->
|
||||
|
||||
<el-form-item label="所属企业" prop="companyId">
|
||||
<el-select v-model="form.companyId" clearable placeholder="启用状态">
|
||||
<el-option v-for="aa in company" :label="aa.companyName" :value="aa.companyId"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="车辆类型" prop="carType">
|
||||
<el-select v-model="form.carType" clearable placeholder="车辆类型">
|
||||
<el-option label="轿车" value="1"></el-option>
|
||||
<el-option label="跑车" value="2"></el-option>
|
||||
<el-option label="越野" value="3"></el-option>
|
||||
<el-option label="客车" value="4"></el-option>
|
||||
<el-option label="公交" value="5"></el-option>
|
||||
<el-option label="其他" value="6"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" type="textarea"/>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import { CarListShow, CarListShowByCarId, deleteCar, insertCar, selectCompany, updataCar } from '@/api/car/manage'
|
||||
|
||||
export default {
|
||||
name: "Post",
|
||||
dicts: ['sys_normal_disable'],
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
value: '标准版',
|
||||
label: '标准版',
|
||||
children: [{
|
||||
value: '1',
|
||||
label: '纯电',
|
||||
children:[{
|
||||
value: '1',
|
||||
label: '手动'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '自动'
|
||||
}]
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '纯油',
|
||||
children:[{
|
||||
value: '1',
|
||||
label: '手动'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '自动'
|
||||
}]
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '混动',
|
||||
children:[{
|
||||
value: '1',
|
||||
label: '手动'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '自动'
|
||||
}]
|
||||
}]
|
||||
},
|
||||
|
||||
{
|
||||
value: '舒适版',
|
||||
label: '舒适版',
|
||||
children: [{
|
||||
value: '1',
|
||||
label: '纯电',
|
||||
children:[{
|
||||
value: '1',
|
||||
label: '手动'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '自动'
|
||||
}]
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '纯油',
|
||||
children:[{
|
||||
value: '1',
|
||||
label: '手动'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '自动'
|
||||
}]
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '混动',
|
||||
children:[{
|
||||
value: '1',
|
||||
label: '手动'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '自动'
|
||||
}]
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
value: '豪华版',
|
||||
label: '豪华版',
|
||||
children: [
|
||||
{
|
||||
value: '1',
|
||||
label: '纯电',
|
||||
children:[{
|
||||
value: '1',
|
||||
label: '手动'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '自动'
|
||||
}]
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '纯油',
|
||||
children:[{
|
||||
value: '1',
|
||||
label: '手动'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '自动'
|
||||
}]
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '混动',
|
||||
children:[{
|
||||
value: '1',
|
||||
label: '手动'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '自动'
|
||||
}]
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
//企业
|
||||
company:{},
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 岗位表格数据
|
||||
postList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
carCoed: [
|
||||
{required: true, message: "车牌号不能为空", trigger: "blur"}
|
||||
],
|
||||
typeId: [
|
||||
{required: true, message: "车辆配置不能为空", trigger: "blur"}
|
||||
],
|
||||
companyId: [
|
||||
{required: true, message: "所属企业不能为空", trigger: "blur"}
|
||||
],
|
||||
carType: [
|
||||
{required: true, message: "车辆类型不能为空", trigger: "blur"}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getCompany();
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 获取级联的值
|
||||
handleChange(value) {
|
||||
debugger
|
||||
alert(value)
|
||||
if(value[0] == "标准版" && value[1] == "1" && value[2] == "1" ){
|
||||
this.form.typeId = 1
|
||||
}else if(value[0] == "舒适版" && value[1] == "1" && value[2] == "1" ){
|
||||
this.form.typeId = 2
|
||||
}else if(value[0] == "豪华版" && value[1] == "1" && value[2] == "1" ){
|
||||
this.form.typeId = 3
|
||||
}else if(value[0] == "标准版" && value[1] == "1" && value[2] == "2" ){
|
||||
this.form.typeId = 4
|
||||
}else if(value[0] == "舒适版" && value[1] == "1" && value[2] == "2" ){
|
||||
this.form.typeId = 5
|
||||
}else if(value[0] == "豪华版" && value[1] == "1" && value[2] == "2" ){
|
||||
this.form.typeId = 6
|
||||
}else if(value[0] == "标准版" && value[1] == "2" && value[2] == "1" ){
|
||||
this.form.typeId = 7
|
||||
}else if(value[0] == "舒适版" && value[1] == "2" && value[2] == "1" ){
|
||||
this.form.typeId = 8
|
||||
}else if(value[0] == "豪华版" && value[1] == "2" && value[2] == "1" ){
|
||||
this.form.typeId = 9
|
||||
}else if(value[0] == "标准版" && value[1] == "2" && value[2] == "2" ){
|
||||
this.form.typeId = 10
|
||||
}else if(value[0] == "舒适版" && value[1] == "2" && value[2] == "2" ){
|
||||
this.form.typeId = 11
|
||||
}else if(value[0] == "豪华版" && value[1] == "2" && value[2] == "2" ){
|
||||
this.form.typeId = 12
|
||||
}else if(value[0] == "标准版" && value[1] == "3" && value[2] == "1" ){
|
||||
this.form.typeId = 13
|
||||
}else if(value[0] == "舒适版" && value[1] == "3" && value[2] == "1" ){
|
||||
this.form.typeId = 14
|
||||
}else if(value[0] == "豪华版" && value[1] == "3" && value[2] == "1" ){
|
||||
this.form.typeId = 15
|
||||
}else if(value[0] == "标准版" && value[1] == "3" && value[2] == "2" ){
|
||||
this.form.typeId = 16
|
||||
}else if(value[0] == "舒适版" && value[1] == "3" && value[2] == "2" ){
|
||||
this.form.typeId = 17
|
||||
}else if(value[0] == "豪华版" && value[1] == "3" && value[2] == "2" ){
|
||||
this.form.typeId = 18
|
||||
}
|
||||
debugger
|
||||
console.log(this.form.typeId)
|
||||
alert(this.form.typeId)
|
||||
},
|
||||
/** 查询岗位列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
CarListShow(this.queryParams).then(response => {
|
||||
console.log(response)
|
||||
this.postList = response.data;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getCompany(){
|
||||
selectCompany().then(res=>{
|
||||
this.company = res.data
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
postId: undefined,
|
||||
postCode: undefined,
|
||||
postName: undefined,
|
||||
postSort: 0,
|
||||
status: "0",
|
||||
remark: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.postId)
|
||||
this.single = selection.length != 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加岗位";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const carId = row.carId || this.ids
|
||||
CarListShowByCarId(carId).then(response => {
|
||||
console.log(response)
|
||||
debugger
|
||||
this.form = response.data[0];
|
||||
this.open = true;
|
||||
this.title = "修改岗位";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function () {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.carId != undefined) {
|
||||
updataCar(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
insertCar(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const carIds = row.carId || this.ids;
|
||||
this.$modal.confirm('是否确认删除为"' + carIds + '"的车辆？').then(function () {
|
||||
return deleteCar(carIds);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/post/export', {
|
||||
...this.queryParams
|
||||
}, `post_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,301 +0,0 @@
|
|||
<template>
|
||||
|
||||
<div class="app-container">
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['system:post: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:post: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
|
||||
v-hasPermi="['system:post:remove']"
|
||||
:disabled="multiple"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="handleDelete"
|
||||
>删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['system:post:export']"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
size="mini"
|
||||
type="warning"
|
||||
@click="handleExport"
|
||||
>导出
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
|
||||
<el-table-column align="center" type="selection" width="55"/>
|
||||
<el-table-column align="center" label="报文模版表" prop="templateId"/>
|
||||
<el-table-column align="center" label="报文模版名称" prop="templateName"/>
|
||||
<el-table-column align="center" label="报文模版描述" prop="templateDescribe"/>
|
||||
<el-table-column align="center" label="备注" prop="remark"/>
|
||||
<!-- <el-table-column align="messageId" label="报文表" prop="carId"/>-->
|
||||
<!-- <el-table-column align="messageType" label="车辆报文类别" prop="carId"/>-->
|
||||
<!-- <el-table-column align="messageStartIndex" label="开始位下标" prop="carId"/>-->
|
||||
<!-- <el-table-column align="messageEndIndex" label="结束位下标" prop="carFrame"/>-->
|
||||
<!-- <el-table-column align="templateId" label="模版id" prop="carCoed"/>-->
|
||||
<!-- <el-table-column align="messageLabel" label="报文标签" prop="carColor">-->
|
||||
|
||||
<el-table-column align="center" class-name="small-padding fixed-width" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-hasPermi="['system:post:edit']"
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="getShow(scope.row)"
|
||||
>查看
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['system:post:edit']"
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['system:post:remove']"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 添加或修改模版对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
|
||||
{{this.form}}
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
|
||||
<el-form-item label="报文模版表" prop="carPlate">
|
||||
<el-input v-model="form.templateId" controls-position="right" disabled />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="报文模版名称" prop="carPlate">
|
||||
<el-input v-model="form.templateName" controls-position="right"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="报文模版描述" prop="carPlate">
|
||||
<el-input v-model="form.templateDescribe" controls-position="right" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注" prop="carPlate">
|
||||
<el-input v-model="form.remark" controls-position="right"/>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import { CarListShow, CarListShowByCarId, deleteCar, insertCar, selectCompany, updataCar } from '@/api/car/manage'
|
||||
import {
|
||||
deleteTemplate,
|
||||
insertTemplate,
|
||||
selectMessageShow,
|
||||
selectTemplateByTemplateId,
|
||||
updataTemplate
|
||||
} from '@/api/car/template'
|
||||
|
||||
export default {
|
||||
name: "Post",
|
||||
dicts: ['sys_normal_disable'],
|
||||
data() {
|
||||
return {
|
||||
// 报文数组
|
||||
messageList : [],
|
||||
//企业
|
||||
company:{},
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 岗位表格数据
|
||||
postList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
carCoed: [
|
||||
{required: true, message: "车牌号不能为空", trigger: "blur"}
|
||||
],
|
||||
typeId: [
|
||||
{required: true, message: "车辆配置不能为空", trigger: "blur"}
|
||||
],
|
||||
companyId: [
|
||||
{required: true, message: "所属企业不能为空", trigger: "blur"}
|
||||
],
|
||||
carType: [
|
||||
{required: true, message: "车辆类型不能为空", trigger: "blur"}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 查询详情
|
||||
getShow(row){
|
||||
selectMessageShow(row.templateId).then(response => {
|
||||
console.log(response)
|
||||
debugger
|
||||
this.messageList = response;
|
||||
this.open = true;
|
||||
this.title = "查询详情";
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
/** 查询岗位列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
selectMessageShow(this.queryParams).then(response => {
|
||||
debugger
|
||||
console.log(response)
|
||||
this.postList = response
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.postId)
|
||||
this.single = selection.length != 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加岗位";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const templateId = row.templateId || this.ids
|
||||
selectTemplateByTemplateId(templateId).then(response => {
|
||||
console.log(response)
|
||||
debugger
|
||||
this.form = response;
|
||||
this.open = true;
|
||||
this.title = "修改岗位";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function () {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.templateId != undefined) {
|
||||
updataTemplate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
insertTemplate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const templateIds = row.templateId || this.ids;
|
||||
this.$modal.confirm('是否确认删除为"' + carIds + '"的车辆？').then(function () {
|
||||
return deleteTemplate(templateIds);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/post/export', {
|
||||
...this.queryParams
|
||||
}, `post_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,17 +10,6 @@
|
|||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- fenceBusiness-->
|
||||
<!-- <el-form-item label="业务类型" prop="fenceBusiness">-->
|
||||
<!-- <el-select v-model="queryParams.fenceBusiness" placeholder="请选择业务类型" clearable size="small">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="dict in fenceAlarmTypeOptions"-->
|
||||
<!-- :key="dict.dictValue"-->
|
||||
<!-- :label="dict.dictLabel"-->
|
||||
<!-- :value="dict.dictValue"-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="围栏类型" prop="fenceType">
|
||||
<el-select v-model="queryParams.fenceType" placeholder="请选择围栏类型" clearable size="small">
|
||||
<el-option
|
||||
|
|
@ -97,13 +86,7 @@
|
|||
<el-table v-loading="loading" :data="fenceList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="围栏名称" align="center" prop="fenceName" />
|
||||
<!-- vehicle_fence_business-->
|
||||
<el-table-column label="业务类型" align="fenceBusiness" prop="fenceBusiness" >
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.vehicle_fence_business" :value="scope.row.fenceBusiness"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="围栏类型" align="fenceType" prop="fenceType" >
|
||||
<el-table-column label="围栏类型" align="center" prop="fenceType" >
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.vehicle_fence_type" :value="scope.row.fenceType"/>
|
||||
</template>
|
||||
|
|
@ -160,16 +143,6 @@
|
|||
<el-form-item label="围栏名称" prop="fenceName">
|
||||
<el-input v-model="form.fenceName" placeholder="请输入围栏名称" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="业务类型" prop="fenceType">-->
|
||||
<!-- <el-select v-model="form.fenceBusiness" placeholder="请选择业务类型">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="dict in fenceAlarmTypeOptions"-->
|
||||
<!-- :key="dict.dictValue"-->
|
||||
<!-- :label="dict.dictLabel"-->
|
||||
<!-- :value="dict.dictValue"-->
|
||||
<!-- ></el-option>-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="围栏类型" prop="fenceType">
|
||||
<el-select v-model="form.fenceType" placeholder="请选择围栏类型">
|
||||
<el-option
|
||||
|
|
@ -223,7 +196,7 @@ import { listFence, getFence, delFence, addFence, updateFence } from "@/api/vehi
|
|||
import FaultDraw from "@/views/fence/AMAP/index.vue";
|
||||
export default {
|
||||
name: "fence",
|
||||
dicts: ['sys_normal_disable','vehicle_fence_business','vehicle_fence_type','yes_no'],
|
||||
dicts: ['sys_normal_disable','yes_no','vehicle_fence_type'],
|
||||
components: { FaultDraw },
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -249,8 +222,6 @@ export default {
|
|||
fenceAlarmTypeOptions: [],
|
||||
// 围栏状态字典
|
||||
statusOptions: [],
|
||||
// 围栏业务类型字典
|
||||
// fenceAlarmBusinessOptions: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
// pageNum: 1,
|
||||
|
|
@ -258,7 +229,6 @@ export default {
|
|||
fenceName: null,
|
||||
fenceType: null,
|
||||
state: null,
|
||||
fenceBusiness: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
|
|
@ -281,9 +251,6 @@ export default {
|
|||
this.getDicts("yes_no").then(response => {
|
||||
this.statusOptions = response.data;
|
||||
});
|
||||
// this.getDicts("vehicle_fence_business").then(response => {
|
||||
// this.fenceAlarmBusinessOptions = response.data;
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
/** 查询电子围栏列表 */
|
||||
|
|
@ -298,16 +265,12 @@ export default {
|
|||
},
|
||||
// 围栏类型字典翻译
|
||||
fenceAlarmTypeFormat(row, column) {
|
||||
return this.selectDictLabel(this.fenceAlarmTypeOptions, row.fenceType);
|
||||
return this.selectDictLabel(this.fenceAlarmTypeOptions, row.fenceAlarmType);
|
||||
},
|
||||
// 围栏状态字典翻译
|
||||
statusFormat(row, column) {
|
||||
return this.selectDictLabel(this.statusOptions, row.state);
|
||||
},
|
||||
// 围栏状态字典翻译
|
||||
// fenceAlarmBusiness(row, column) {
|
||||
// return this.selectDictLabel(this.fenceAlarmBusinessOptions, row.state);
|
||||
// },
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
|
|
|
|||
|
|
@ -1,535 +0,0 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
|
||||
<el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" size="small">
|
||||
<el-form-item label="围栏组名称" prop="fenceName">
|
||||
<el-input
|
||||
v-model="queryParams.fenceName"
|
||||
clearable
|
||||
placeholder="请输入围栏名称"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="优先级" prop="priority">
|
||||
<el-option label="一级围栏组" value="1"></el-option>
|
||||
<el-option label="二级围栏组" value="2"></el-option>
|
||||
<el-option label="三级围栏组" value="3"></el-option>
|
||||
<el-option label="四级围栏组" value="4"></el-option>
|
||||
<el-option label="五级围栏组" value="5"></el-option>
|
||||
<el-option label="六级围栏组" value="6"></el-option>
|
||||
<el-option label="七级围栏组" value="7"></el-option>
|
||||
<el-option label="八级围栏组" value="8"></el-option>
|
||||
<el-option label="九级围栏组" value="9"></el-option>
|
||||
<el-option label="十级围栏组" value="10"></el-option>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="类型" prop="fenceType">-->
|
||||
<!-- <el-select v-model="queryParams.fenceType" clearable placeholder="围栏状态">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="dict in dict.type.sys_fence_type"-->
|
||||
<!-- :key="dict.value"-->
|
||||
<!-- :label="dict.label"-->
|
||||
<!-- :value="dict.value"-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" clearable placeholder="围栏状态">
|
||||
<el-option
|
||||
v-for="dict in dict.type.sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['system:notice:add']"
|
||||
icon="el-icon-plus"
|
||||
plain
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['system:notice:edit']"
|
||||
:disabled="single"
|
||||
icon="el-icon-edit"
|
||||
plain
|
||||
size="mini"
|
||||
type="success"
|
||||
@click="handleUpdate"
|
||||
>修改
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['vehicles:sysCorpuscleFence:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="groupList"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
label="id"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="围栏名称"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.groupName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column-->
|
||||
<!-- label="围栏类型"-->
|
||||
<!-- width="180">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <dict-tag :options="dict.type.sys_fence_type" :value="scope.row.groupType"/>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column
|
||||
label="围栏状态"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="围栏优先级"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px" v-show=" scope.row.priority==1">一级围栏组</span>
|
||||
<span style="margin-left: 10px" v-show=" scope.row.priority==2">二级围栏组</span>
|
||||
<span style="margin-left: 10px" v-show=" scope.row.priority==3">三级围栏组</span>
|
||||
<span style="margin-left: 10px" v-show=" scope.row.priority==4">四级围栏组</span>
|
||||
<span style="margin-left: 10px" v-show=" scope.row.priority==5">五级围栏组</span>
|
||||
<span style="margin-left: 10px" v-show=" scope.row.priority==6">六级围栏组</span>
|
||||
<span style="margin-left: 10px" v-show=" scope.row.priority==7">七级围栏组</span>
|
||||
<span style="margin-left: 10px" v-show=" scope.row.priority==8">八级围栏组</span>
|
||||
<span style="margin-left: 10px" v-show=" scope.row.priority==9">九级围栏组</span>
|
||||
<span style="margin-left: 10px" v-show=" scope.row.priority==10">十级围栏组</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
class="el-icon-connection"
|
||||
@click="boundFence(scope.row)">围栏信息</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="handleUpdate(scope.row)">修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 添加或修改部门对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" append-to-body width="900px">
|
||||
|
||||
<el-steps :active="active" finish-status="success">
|
||||
<el-step title="步骤 1" description="围栏组基础信息"></el-step>
|
||||
<el-step title="步骤 2" description="绑定围栏"></el-step>
|
||||
</el-steps>
|
||||
|
||||
|
||||
<div v-show="active==0">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="200px">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-form-item label="围栏组名称" prop="groupName">
|
||||
<el-input v-model="form.groupName" placeholder="请输入围栏组名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-form-item label="优先级" prop="priority">
|
||||
<el-input-number v-model="form.priority" @change="handleChange" :min="0" :max="99" label="优先级范围在(0-99)"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-row>-->
|
||||
<!-- <el-col :span="20">-->
|
||||
<!-- <el-form-item label="围栏类型" prop="noticeType">-->
|
||||
<!-- <el-select v-model="form.groupType" placeholder="请选择围栏类型">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="dict in dict.type.sys_fence_type"-->
|
||||
<!-- :key="dict.value"-->
|
||||
<!-- :label="dict.label"-->
|
||||
<!-- :value="dict.value"-->
|
||||
<!-- ></el-option>-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-form-item label="围栏组状态">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
|
||||
</div>
|
||||
<div v-show="active==1">
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="fenceList"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="id"
|
||||
width="120">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="电子围栏名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="longitudeLatitude"
|
||||
label="围栏位置编码"
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
|
||||
|
||||
<el-button style="margin-top: 12px;" @click="active--" v-show="active===1">上一步</el-button>
|
||||
<el-button style="margin-top: 12px;" @click="active++" v-show="active===0">下一步</el-button>
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-drawer
|
||||
size="60%"
|
||||
:title="title"
|
||||
:visible.sync="drawer"
|
||||
:direction="direction"
|
||||
:before-close="handleClose">
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
ref="multipleTable"
|
||||
:data="fenceList"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column
|
||||
label="id"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="围栏名称"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.name}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="围栏类型"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.sys_fence_type" :value="scope.row.fenceType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="围栏位置"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.longitudeLatitude}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="warning"
|
||||
class="el-icon-view"
|
||||
@click="lookFence(scope.row)"></el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="handleDelete1(scope.row)">解除绑定</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="closeDrawer()">确认</el-button>
|
||||
</div>
|
||||
|
||||
</el-drawer>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import {addGroup, findGroupByid, selectGroupList, updGroup} from "@/api/fence/group";
|
||||
import {fenceArray, findElectronicByid, listFence} from "@/api/fence/fence";
|
||||
import { delDept } from '@/api/system/dept'
|
||||
export default {
|
||||
name: "group",
|
||||
dicts: ['sys_normal_disable','sys_fence_type','sys_notice_status'],
|
||||
data() {
|
||||
return {
|
||||
testList:[],
|
||||
//进度条
|
||||
active: 0,
|
||||
//抽屉
|
||||
drawer: false,
|
||||
direction: 'rtl',
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
showSearch: true,
|
||||
groupList:[],
|
||||
fenceList:[],
|
||||
queryParams:{},
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 围栏组表单参数
|
||||
form: {
|
||||
//被选择的电子围栏
|
||||
electronicFenceRespList: [],
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
fenceType: [
|
||||
{required: true, message: "围栏类型不能为空", trigger: "blur"}
|
||||
],
|
||||
name: [
|
||||
{required: true, message: "围栏名称不能为空", trigger: "blur"}
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// 可以在这里添加一些初始化逻辑
|
||||
console.log('Component is mounted, checking if the table reference is available:', this.$refs.multipleTable);
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getList();
|
||||
this.fenceArrayList();
|
||||
},
|
||||
methods: {
|
||||
//查看电子围栏
|
||||
lookFence(row){
|
||||
if (row.longitudeLatitude==null||row.longitudeLatitude==undefined||row.longitudeLatitude==''){
|
||||
this.$modal.msgError("请先设置电子围栏");
|
||||
return;
|
||||
}
|
||||
this.$router.push({
|
||||
path:'map',
|
||||
query:{id:row.id,longitudeLatitude:row.longitudeLatitude,open:0}
|
||||
})
|
||||
},
|
||||
//控制抽屉
|
||||
closeDrawer(){
|
||||
this.drawer=false;
|
||||
},
|
||||
|
||||
/** 查询电子围栏列表 */
|
||||
selectFence(row) {
|
||||
|
||||
findGroupByid(row.id).then(response => {
|
||||
this.fenceList = response.data.electronicFenceRespList;
|
||||
});
|
||||
},
|
||||
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.form.electronicFenceRespList = val;
|
||||
},
|
||||
//打开绑定围栏的功能
|
||||
boundFence(row){
|
||||
this.title = "绑定的电子围栏";
|
||||
this.selectFence(row);
|
||||
this.drawer = true;
|
||||
},
|
||||
|
||||
handleDelete(row){
|
||||
this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function () {
|
||||
return delDept(row.deptId);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
|
||||
handleDelete1(row){
|
||||
this.$modal.confirm('是否确认解除名称为"' + row.deptName + '"的数据项？').then(function () {
|
||||
return delDept(row.deptId);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("解除绑定成功");
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
status: "0"
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
fenceArrayList(){
|
||||
fenceArray().then(res => {
|
||||
console.log(res)
|
||||
this.fenceList = res.data;
|
||||
});
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd(row) {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加围栏组";
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('vehicles/fence/export', {
|
||||
...this.queryParams
|
||||
}, `vehicle_fence.xlsx`)
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
this.title="修改围栏组";
|
||||
this.open = true;
|
||||
findGroupByid(row.id).then(response => {
|
||||
this.form = response.data;
|
||||
let rows = response.data.electronicFenceRespList;
|
||||
console.log(rows)
|
||||
if (rows!=null&&rows!=undefined&&rows!=''){
|
||||
rows.forEach(row => {
|
||||
console.log(row);
|
||||
this.$refs.multipleTable.toggleRowSelection(this.fenceList[row.id-1]);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function () {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != undefined) {
|
||||
updGroup(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addGroup(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 查询围栏列表 */
|
||||
getList() {
|
||||
this.loading=true;
|
||||
selectGroupList(this.queryParams).then(res => {
|
||||
console.log(res)
|
||||
this.groupList = res.data;
|
||||
this.loading=false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,396 +0,0 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="围栏名称" prop="fenceName">
|
||||
<el-input
|
||||
v-model="queryParams.fenceName"
|
||||
placeholder="请输入围栏名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="围栏类型" prop="fenceType">
|
||||
<el-select v-model="queryParams.fenceType" placeholder="请选择围栏类型" clearable size="small">
|
||||
<el-option
|
||||
v-for="dict in fenceAlarmTypeOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="围栏状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="请选择围栏状态" clearable size="small">
|
||||
<el-option
|
||||
v-for="dict in statusOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['vehicles:sysCorpuscleFence:addSysCorpuscleFence']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['vehicles:sysCorpuscleFence:updSysCorpuscleFence']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['vehicles:sysCorpuscleFence:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['vehicles:sysCorpuscleFence:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
<!-- :formatter="statusFormat"-->
|
||||
<!-- :formatter="fenceAlarmTypeFormat"-->
|
||||
<el-table v-loading="loading" :data="fenceList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="围栏名称" align="center" prop="fenceName" />
|
||||
<!-- vehicle_fence_business-->
|
||||
<el-table-column label="业务类型" align="fenceBusiness" prop="fenceBusiness" >
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.vehicle_fence_business" :value="scope.row.fenceBusiness"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="围栏类型" align="fenceType" prop="fenceType" >
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.vehicle_fence_type" :value="scope.row.fenceType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="围栏状态" align="state" prop="state">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.yes_no" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="围栏位置" align="center" prop="fencePosition" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="warning"
|
||||
class="el-icon-view"
|
||||
@click="lookFence(scope.row)"></el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="showFaultDraw(scope.row)"
|
||||
>绘制围栏</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['vehicle:fence:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['vehicle:fence:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改电子围栏对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-input v-show="false" v-model="form.id" />
|
||||
<el-form-item label="围栏名称" prop="fenceName">
|
||||
<el-input v-model="form.fenceName" placeholder="请输入围栏名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="围栏类型" prop="fenceType">
|
||||
<el-select v-model="form.fenceType" placeholder="请选择围栏类型">
|
||||
<el-option
|
||||
v-for="dict in fenceAlarmTypeOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="围栏状态：" prop="state">
|
||||
<el-radio-group v-model="form.state">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.yes_no"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-drawer
|
||||
v-if="faultDrawStatus"
|
||||
:title="drawerTitle"
|
||||
:visible.sync="drawer"
|
||||
:direction="direction"
|
||||
:before-close="handleClose"
|
||||
size="100%">
|
||||
<fault-draw ref="faultDraw" v-if="faultDrawStatus" v-bind:id="fenceId" @handleClose="handleClose"></fault-draw>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listFence, getFence, delFence, addFence, updateFence } from "@/api/vehicle/fence";
|
||||
import FaultDraw from "@/views/fence/AMAP/index.vue";
|
||||
export default {
|
||||
name: "fence",
|
||||
dicts: ['sys_normal_disable','vehicle_fence_business','vehicle_fence_type','yes_no'],
|
||||
components: { FaultDraw },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 电子围栏表格数据
|
||||
fenceList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 围栏类型字典
|
||||
fenceAlarmTypeOptions: [],
|
||||
// 围栏状态字典
|
||||
statusOptions: [],
|
||||
// 围栏业务类型字典
|
||||
// fenceAlarmBusinessOptions: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
// pageNum: 1,
|
||||
// pageSize: 10,
|
||||
fenceName: null,
|
||||
fenceType: null,
|
||||
state: null,
|
||||
fenceBusiness: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
,
|
||||
drawer: false,
|
||||
direction: 'rtl',
|
||||
drawerTitle:"",
|
||||
fenceId: "",
|
||||
faultDrawStatus:false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getDicts("vehicle_fence_type").then(response => {
|
||||
this.fenceAlarmTypeOptions = response.data;
|
||||
});
|
||||
this.getDicts("yes_no").then(response => {
|
||||
this.statusOptions = response.data;
|
||||
});
|
||||
// this.getDicts("vehicle_fence_business").then(response => {
|
||||
// this.fenceAlarmBusinessOptions = response.data;
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
/** 查询电子围栏列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listFence(this.queryParams).then(response => {
|
||||
this.fenceList = response.data;
|
||||
// this.total = response.data.total;
|
||||
this.loading = false;
|
||||
console.log("列表"+response.data)
|
||||
});
|
||||
},
|
||||
// 围栏类型字典翻译
|
||||
fenceAlarmTypeFormat(row, column) {
|
||||
return this.selectDictLabel(this.fenceAlarmTypeOptions, row.fenceType);
|
||||
},
|
||||
// 围栏状态字典翻译
|
||||
statusFormat(row, column) {
|
||||
return this.selectDictLabel(this.statusOptions, row.state);
|
||||
},
|
||||
// 围栏状态字典翻译
|
||||
// fenceAlarmBusiness(row, column) {
|
||||
// return this.selectDictLabel(this.fenceAlarmBusinessOptions, row.state);
|
||||
// },
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
fenceName: null,
|
||||
fenceAlarmType: null,
|
||||
status: 0,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
updateTime: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加电子围栏";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getFence(id).then(response => {
|
||||
this.form = response.data;
|
||||
console.log(response)
|
||||
this.open = true;
|
||||
this.title = "修改电子围栏";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
alert(this.form.id)
|
||||
if (this.form.id != null) {
|
||||
updateFence(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addFence(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$confirm('是否确认删除电子围栏编号为"' + ids + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return delFence(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('vehicles/sysCorpuscleFence/export', {
|
||||
...this.queryParams
|
||||
}, `vehicle_fence.xlsx`)
|
||||
},
|
||||
lookFence(row){
|
||||
if (row.longitudeLatitude==null||row.longitudeLatitude==undefined||row.longitudeLatitude==''){
|
||||
this.$modal.msgError("请先设置电子围栏");
|
||||
return;
|
||||
}
|
||||
this.$router.push({
|
||||
path:'map',
|
||||
query:{id:row.id,longitudeLatitude:row.longitudeLatitude,open:0}
|
||||
})
|
||||
},
|
||||
showFaultDraw(row){
|
||||
this.drawer = true;
|
||||
this.drawerTitle = "绘制围栏：" + row.fenceName ;
|
||||
this.fenceId = row.id;
|
||||
this.faultDrawStatus = true;
|
||||
},
|
||||
handleClose(){
|
||||
this.drawer = false;
|
||||
this.faultDrawStatus = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,352 +0,0 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" size="small">
|
||||
<el-form-item label="围栏名称" prop="fenceName">
|
||||
<el-input
|
||||
v-model="queryParams.fenceName"
|
||||
clearable
|
||||
placeholder="请输入围栏名称"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="围栏类型" prop="fenceType">
|
||||
<el-select v-model="queryParams.fenceType" clearable placeholder="围栏类型">
|
||||
<el-option
|
||||
v-for="dict in dict.type.sys_fence_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="围栏状态" prop="status">
|
||||
<el-select v-model="queryParams.status" clearable placeholder="围栏状态">
|
||||
<el-option
|
||||
v-for="dict in dict.type.sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['system:notice:add']"
|
||||
icon="el-icon-plus"
|
||||
plain
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['system:notice:edit']"
|
||||
:disabled="single"
|
||||
icon="el-icon-edit"
|
||||
plain
|
||||
size="mini"
|
||||
type="success"
|
||||
@click="handleUpdate"
|
||||
>修改
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['vehicles:sysCorpuscleFence:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['vehicles:sysCorpuscleFence:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
ref="multipleTable"
|
||||
:data="fenceList"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column
|
||||
label="id"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="围栏名称"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.name}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--fenceType-->
|
||||
<el-table-column
|
||||
label="围栏类型"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.sys_fence_type" :value="scope.row.fenceType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="围栏状态"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column-->
|
||||
<!-- label="围栏位置"-->
|
||||
<!-- width="180">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <span style="margin-left: 10px">{{ scope.row.longitudeLatitude}}</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="warning"
|
||||
class="el-icon-view"
|
||||
@click="lookFence(scope.row)"></el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
class="el-icon-map-location"
|
||||
@click="handleFence(scope.row)">绘制围栏</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="handleUpdate(scope.row)">修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 添加或修改部门对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" append-to-body width="600px">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="围栏名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入围栏名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="围栏类型" prop="noticeType">
|
||||
<el-select v-model="form.fenceType" placeholder="请选择围栏类型">
|
||||
<el-option
|
||||
v-for="dict in dict.type.sys_fence_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="围栏状态">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import {addfence, findElectronicByid, listFence, updfence} from "@/api/fence/fence";
|
||||
import {addDept, delDept, getDept, listDept, listDeptExcludeChild, updateDept} from "@/api/system/dept";
|
||||
|
||||
export default {
|
||||
name: "list",
|
||||
dicts: ['sys_normal_disable','sys_fence_type','sys_notice_status'],
|
||||
data() {
|
||||
return {
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
showSearch: true,
|
||||
fenceList:[],
|
||||
queryParams:{},
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
fenceType: [
|
||||
{required: true, message: "围栏类型不能为空", trigger: "blur"}
|
||||
],
|
||||
name: [
|
||||
{required: true, message: "围栏名称不能为空", trigger: "blur"}
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
handleSelectionChange(){
|
||||
|
||||
},
|
||||
//绘制电子围栏
|
||||
handleFence(row){
|
||||
this.$router.push({
|
||||
path:'map',
|
||||
query:{id:row.id,longitudeLatitude:row.longitudeLatitude,open:1}
|
||||
})
|
||||
},
|
||||
//查看电子围栏
|
||||
lookFence(row){
|
||||
if (row.longitudeLatitude==null||row.longitudeLatitude==undefined||row.longitudeLatitude==''){
|
||||
this.$modal.msgError("请先设置电子围栏");
|
||||
return;
|
||||
}
|
||||
this.$router.push({
|
||||
path:'map',
|
||||
query:{id:row.id,longitudeLatitude:row.longitudeLatitude,open:0}
|
||||
})
|
||||
alert("位置："+row.longitudeLatitude)
|
||||
},
|
||||
handleDelete(row){
|
||||
this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function () {
|
||||
return delDept(row.deptId);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
status: "0"
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
|
||||
/** 新增按钮操作 */
|
||||
handleAdd(row) {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加围栏";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
findElectronicByid(row.id).then(response => {
|
||||
console.log(response)
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改围栏";
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('vehicles/fence/export', {
|
||||
...this.queryParams
|
||||
}, `vehicle_fence.xlsx`)
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function () {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != undefined) {
|
||||
updfence(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addfence(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 查询围栏列表 */
|
||||
getList() {
|
||||
this.loading=true;
|
||||
listFence(this.queryParams).then(res => {
|
||||
console.log(res)
|
||||
this.fenceList = res.data;
|
||||
this.loading=false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -1,188 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,248 @@
|
|||
<template>
|
||||
|
||||
<!-- 控制按钮组 -->
|
||||
<div class="main">
|
||||
<section class="section">
|
||||
<!-- 地图 -->
|
||||
<div id="map_container" style="width: 100%; height: 100vh;"></div>
|
||||
|
||||
<!-- 控制按钮组 -->
|
||||
<div class="ebox">
|
||||
<el-button-group>
|
||||
<el-button type="info" icon="el-icon-circle-plus-outline" @click="drawRectangle">绘制围栏</el-button>
|
||||
<el-button type="primary" icon="el-icon-edit" @click="editRectangle">编辑围栏</el-button>
|
||||
<el-button type="warning" icon="el-icon-delete" @click="cancelRectangle">取消编辑</el-button>
|
||||
<el-button type="success" icon="el-icon-success" @click="saveRectangle">保存围栏</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" @click="deleRectangle">删除围栏</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import { geofenceList } from '@/api/manage/fenceAPI.js' //获取围栏数据
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: "defb21facca687bad1bb8e956b7d67dd",
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "MapContainer",
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
carId: '',
|
||||
pageNum: 1,//当前页
|
||||
pageSize: 10,//页长
|
||||
pageTotal: 0,//总数
|
||||
},
|
||||
|
||||
map: null,
|
||||
centerArr: [113.760234, 23.048884],//地图中心位置，不能为空数组【为空数组会报错】
|
||||
path: [],//以前绘制的数据
|
||||
paths: [], // 当前绘制的多边形经纬度数组
|
||||
polygonItem: [], // 地图上绘制的所有多边形对象
|
||||
polyEditors: [],// 新增数据=>所有编辑对象数组
|
||||
polyEditorsBefore: [],// 以前历史数据=>进入编辑对象数组
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initAMap();
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
initAMap() {
|
||||
AMapLoader.load({
|
||||
key: "d617205580ad1f43884deefb6ea53eb2",
|
||||
version: "2.0",
|
||||
plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar',
|
||||
'AMap.MapType', 'AMap.MouseTool', 'AMap.Polygon', 'AMap.PolyEditor', 'AMap.CircleEditor'],
|
||||
}).then((AMap) => {
|
||||
this.map = new AMap.Map("map_container", {
|
||||
resizeEnable: true,
|
||||
viewMode: '3D', // 注意这里的引号
|
||||
zoom: 17,
|
||||
// 移除 pitch 属性，如果不需要特殊倾斜角度
|
||||
// pitch: 55,
|
||||
showBuildingBlock: true, // 注意这个属性可能在某些版本中不起作用
|
||||
});
|
||||
// 添加工具栏
|
||||
this.map.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
|
||||
const toolbar = new AMap.ToolBar()// 工具条
|
||||
const scale = new AMap.Scale()// 比例尺
|
||||
this.map.addControl(toolbar)
|
||||
this.map.addControl(scale)
|
||||
})
|
||||
}).catch((e) => {
|
||||
console.error('地图加载失败:', e);
|
||||
});
|
||||
},
|
||||
// 绘制多边形
|
||||
drawRectangle() {
|
||||
const This = this;
|
||||
let mouseTool = new AMap.MouseTool(this.map);
|
||||
const polygon = mouseTool.polygon({
|
||||
//polygon：绘制多边形【线段：polyline;矩形：rectangle;圆：circle】
|
||||
strokeColor: 'red',
|
||||
strokeOpacity: 0.4,
|
||||
strokeWeight: 6,
|
||||
fillColor: '#1791fc',
|
||||
fillOpacity: 0.2,
|
||||
// strokeStyle还支持 solid
|
||||
strokeStyle: 'solid',
|
||||
// strokeDasharray: [30,10],
|
||||
});
|
||||
mouseTool.on('draw', function (event) {
|
||||
// event.obj 为绘制出来的覆盖物对象
|
||||
let polygonItem = event.obj;
|
||||
let paths = polygonItem.getPath();//取得绘制的多边形的每一个点坐标
|
||||
// console.log('覆盖物对象绘制完成各个点的坐标', paths, event);
|
||||
|
||||
let path = []; // 编辑的路径
|
||||
paths.forEach(v => {
|
||||
path.push([v.lng, v.lat])
|
||||
});
|
||||
This.paths = path //将新增数据放入paths数组里
|
||||
// This.editRectangle();//绘制完成,默认进入编辑状态
|
||||
This.polygonItem.push(event.obj);
|
||||
This.map.remove(event.obj); // 删除多边形
|
||||
console.log(polygon, '------polygon-----');
|
||||
});
|
||||
},
|
||||
// 编辑围栏
|
||||
editRectangle() {
|
||||
const pathq = this.paths;
|
||||
//新增的进入编辑状态
|
||||
let polygon = new AMap.Polygon({
|
||||
path: path,
|
||||
strokeColor: "#FF33FF",
|
||||
strokeWeight: 6,
|
||||
strokeOpacity: 0.2,
|
||||
fillOpacity: 0.2,
|
||||
fillColor: '#1791fc',
|
||||
zIndex: 50,
|
||||
});
|
||||
this.map.add(polygon);
|
||||
this.polygonItem.push(polygon);
|
||||
// 缩放地图到合适的视野级别
|
||||
this.map.setFitView([polygon]);
|
||||
|
||||
this.polyEditor = new AMap.PolyEditor(this.map, polygon);
|
||||
this.polyEditor.open();
|
||||
this.polyEditors.push(this.polyEditor);
|
||||
|
||||
//历史围栏的进入编辑状态
|
||||
let polygonBefore = new AMap.Polygon({
|
||||
path: this.path,
|
||||
strokeColor: "#FF33FF",
|
||||
strokeWeight: 6,
|
||||
strokeOpacity: 0.2,
|
||||
fillOpacity: 0.2,
|
||||
fillColor: '#1791fc',
|
||||
zIndex: 50,
|
||||
});
|
||||
this.map.add(polygonBefore);
|
||||
this.polygonItem.push(polygonBefore);
|
||||
// 缩放地图到合适的视野级别
|
||||
this.map.setFitView([polygonBefore]);
|
||||
|
||||
this.polyEditorBefore = new AMap.PolyEditor(this.map, polygonBefore);
|
||||
this.polyEditorBefore.open();
|
||||
this.polyEditorsBefore.push(this.polyEditorBefore);
|
||||
|
||||
// this.polyEditor.on('addnode', function (event) {
|
||||
// console.info('触发事件：addnode', event)
|
||||
// console.info('修改后的经纬度：', polygon.getPath())
|
||||
// });
|
||||
|
||||
// this.polyEditor.on('adjust', function (event) {
|
||||
// console.info('触发事件：adjust', event)
|
||||
// console.info('修改后的经纬度：', polygon.getPath())
|
||||
// });
|
||||
|
||||
// this.polyEditor.on('removenode', function (event) {
|
||||
// console.info('触发事件：removenode', event)
|
||||
// console.info('修改后的经纬度：', polygon.getPath())
|
||||
// });
|
||||
|
||||
// this.polyEditor.on('end', function (event) {
|
||||
// console.info('触发事件： end', event)
|
||||
// console.info('end修改后的经纬度：', polygon.getPath())
|
||||
// // event.target 即为编辑后的多边形对象
|
||||
// });
|
||||
},
|
||||
// 取消编辑状态
|
||||
cancelRectangle() {
|
||||
this.polyEditors.forEach(item => { item.close(); });//新增
|
||||
this.polyEditorsBefore.forEach(item => { item.close(); });//历史
|
||||
},
|
||||
//保存围栏
|
||||
saveRectangle() {
|
||||
// 取消编辑状态
|
||||
this.polyEditors.forEach(item => { item.close(); });
|
||||
this.polyEditorsBefore.forEach(item => { item.close(); });
|
||||
// 保存 console.log(this.paths,this.path)=>成功（重新刷新页面）
|
||||
// ...
|
||||
},
|
||||
// 删除围栏
|
||||
deleRectangle() {
|
||||
this.polyEditors.forEach(item => { item.close(); });// 取消编辑状态
|
||||
this.polyEditorsBefore.forEach(item => { item.close(); });// 取消编辑状态
|
||||
this.map.clearMap(); // 删除地图所有覆盖物
|
||||
//删除=>成功（重新刷新页面）
|
||||
// ...
|
||||
},
|
||||
//获取后台数据
|
||||
init() {
|
||||
const that = this
|
||||
let param = {
|
||||
carId: this.formData.carId,//string true carID
|
||||
pageNum: this.formData.pageNum,//string false 当前页数
|
||||
pageSize: this.formData.pageSize,//string false 每页条数
|
||||
}
|
||||
geofenceList({ param }).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
if (res.data.data.list.length==0) {
|
||||
this.$message.error('没有围栏数据')
|
||||
return
|
||||
}
|
||||
that.path=[]
|
||||
that.map.clearMap(); // 删除地图所有覆盖物
|
||||
res.data.data.list.forEach((item, index) => { //同时展示多个围栏
|
||||
that.path.push(item.points)//编辑时，可以一起编辑
|
||||
// this.centerArr = that.path[0]
|
||||
// this.initMap()
|
||||
|
||||
that.map.add(new AMap.Polygon({
|
||||
path: item.points,
|
||||
strokeColor: "#FF33FF",
|
||||
strokeWeight: 6,
|
||||
strokeOpacity: 0.2,
|
||||
fillOpacity: 0.4,
|
||||
fillColor: "#1791fc",
|
||||
zIndex: 50,
|
||||
}));
|
||||
that.map.setFitView();
|
||||
})
|
||||
} else {
|
||||
this.$message.error(res.data.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#map_container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
.ebox {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 1000; /* 确保按钮在地图之上 */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,849 @@
|
|||
<!--<template>-->
|
||||
<!-- <div class="allMapOperation" ref="allMapOperation">-->
|
||||
<!-- <div ref='drawContainer' class="draw-container"></div>-->
|
||||
<!-- <div class='info' v-if="!onlyShow">-->
|
||||
<!-- <p>操作说明:</p>-->
|
||||
<!-- <p>1.点击鼠标左键拖拽绘制圆、其他覆盖物连续点击，右键结束绘制</p>-->
|
||||
<!-- <p>2.鼠标右键点击覆盖物进行编辑、删除</p>-->
|
||||
<!-- <p v-if="!single" style="color:red;">3.需要点击保存才能获取已经绘制的图形数据</p>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="fullScreen">-->
|
||||
<!-- <Icon size="24" type="md-expand" @click="fullSrceen" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="drawmap-operation-menu" style='padding: 12px 0;' v-if="!onlyShow">-->
|
||||
<!-- <div v-if="isShowMarker">-->
|
||||
<!-- <Tooltip placement="left" content="点标记" class="drawmap-tooltip">-->
|
||||
<!-- <Icon size="24" type="md-pin" @click="draw('marker')" />-->
|
||||
<!-- </Tooltip>-->
|
||||
<!-- <Divider style="margin: 12px 0;" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div v-if="isShowPolyline">-->
|
||||
<!-- <Tooltip placement="left" content="画线" class="drawmap-tooltip">-->
|
||||
<!-- <Icon size="24" type="md-trending-up" @click="draw('polyline')" />-->
|
||||
<!-- </Tooltip>-->
|
||||
<!-- <Divider style="margin: 12px 0;" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div v-if="isShowPolygon">-->
|
||||
<!-- <Tooltip placement="left" content="画多边形" class="drawmap-tooltip">-->
|
||||
<!-- <Icon size="24" type="ios-map-outline" @click="draw('polygon')" />-->
|
||||
<!-- </Tooltip>-->
|
||||
<!-- <Divider style="margin: 12px 0;" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div v-if="isShowCircle">-->
|
||||
<!-- <Tooltip placement="left" content="画圆" class="drawmap-tooltip">-->
|
||||
<!-- <Icon size="24" type="md-radio-button-off" @click="draw('circle')" />-->
|
||||
<!-- </Tooltip>-->
|
||||
<!-- <Divider style="margin: 12px 0;" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <Tooltip placement="left" content="清空" class="drawmap-tooltip">-->
|
||||
<!-- <Icon size="24" type="md-trash" @click="clearAllGraph" />-->
|
||||
<!-- </Tooltip>-->
|
||||
|
||||
<!-- <div v-if="!single">-->
|
||||
<!-- <Divider style="margin: 12px 0;" />-->
|
||||
<!-- <Tooltip placement="left" content="保存" class="drawmap-tooltip">-->
|
||||
<!-- <span type="text" @click="saveMap" style="cursor: pointer;">保存</span>-->
|
||||
<!-- </Tooltip>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--import AMap from "AMap" //在页面中引入高德地图-->
|
||||
<!--import { VueDebounce } from "@/vehicle/fence.js"-->
|
||||
<!--/** 引用的防抖函数代码-->
|
||||
<!-- * export const VueDebounce = (func, wait = 200, immediate = false) => {-->
|
||||
<!-- let timeout = null; // 定时器-->
|
||||
<!-- return function () {-->
|
||||
<!-- let that = this, // this对象-->
|
||||
<!-- args = arguments; // 参数-->
|
||||
<!-- if (timeout) clearTimeout(timeout);-->
|
||||
<!-- if (immediate === true) { // 立即执行-->
|
||||
<!-- var callNow = !timeout;-->
|
||||
<!-- timeout = setTimeout(() => {-->
|
||||
<!-- timeout = null;-->
|
||||
<!-- }, wait)-->
|
||||
<!-- if (callNow) {-->
|
||||
<!-- // func.apply(that, args); // 普通用法-->
|
||||
<!-- that[func](...args); // vue用法-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- else { // 非立即执行-->
|
||||
<!-- timeout = setTimeout(() => {-->
|
||||
<!-- // func.apply(this, args); // 普通用法-->
|
||||
<!-- that[func](...args); // vue用法-->
|
||||
<!-- }, wait);-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- */-->
|
||||
<!--const overlayStyle = {-->
|
||||
<!-- borderWeight: 3,-->
|
||||
<!-- strokeColor: "#FF33FF",-->
|
||||
<!-- strokeOpacity: 1,-->
|
||||
<!-- strokeWeight: 2,-->
|
||||
<!-- strokeOpacity: 0.2,-->
|
||||
<!-- fillOpacity: 0.4,-->
|
||||
<!-- strokeStyle: "dashed",-->
|
||||
<!-- strokeDasharray: [10, 10],-->
|
||||
<!-- fillColor: "#1791fc",-->
|
||||
<!-- zIndex: 50-->
|
||||
<!--}-->
|
||||
<!--export default {-->
|
||||
<!-- props: {-->
|
||||
<!-- drawType: {-->
|
||||
<!-- type: Array, //['polyline','polygon','circle','marker'] ,['all] 绘制图形的类型-->
|
||||
<!-- required: false,-->
|
||||
<!-- default: () => {-->
|
||||
<!-- return []-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- single: {-->
|
||||
<!-- type: Boolean, //是否绘制一个图形 用于单独添加航点 航线 空域-->
|
||||
<!-- default: true-->
|
||||
<!-- },-->
|
||||
<!-- onlyShow: {-->
|
||||
<!-- type: Boolean, //是否用于显示,将会隐藏提示 与 操作按钮-->
|
||||
<!-- default: false-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- data() {-->
|
||||
<!-- return {-->
|
||||
<!-- map: null, //地图对象-->
|
||||
<!-- mouseTool: null, //鼠标绘制对象-->
|
||||
<!-- geocoder: null, //地址解析对象-->
|
||||
<!-- satelliteLayer: null, //图层-->
|
||||
|
||||
<!-- overlays: [], //所以覆盖物集合-->
|
||||
|
||||
<!-- Editor: null, //编辑器对象-->
|
||||
<!-- nowCaozuo: null, //当前编辑的对象-->
|
||||
<!-- contextMenu: null, //右键菜单对象-->
|
||||
|
||||
<!-- polylineData: [], //传出去的折线数据-->
|
||||
<!-- polygonData: [], //传出去的多边形数据-->
|
||||
<!-- rectangleData: [], //传出去的矩形数据-->
|
||||
<!-- circleData: [], //传出去的圆形数据-->
|
||||
<!-- markerData: [] //传出去的点标记数据-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- computed: {-->
|
||||
<!-- isShowMarker() {-->
|
||||
<!-- return this.drawType.includes("marker") || this.drawType.includes("all")-->
|
||||
<!-- },-->
|
||||
<!-- isShowPolyline() {-->
|
||||
<!-- return this.drawType.includes("polyline") || this.drawType.includes("all")-->
|
||||
<!-- },-->
|
||||
<!-- isShowPolygon() {-->
|
||||
<!-- return this.drawType.includes("polygon") || this.drawType.includes("all")-->
|
||||
<!-- },-->
|
||||
<!-- isShowCircle() {-->
|
||||
<!-- return this.drawType.includes("circle") || this.drawType.includes("all")-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- created() {-->
|
||||
<!-- // console.log("创建")-->
|
||||
<!-- },-->
|
||||
<!-- mounted() {-->
|
||||
<!-- // this.initMap()-->
|
||||
<!-- },-->
|
||||
<!-- methods: {-->
|
||||
<!-- initMap() {-->
|
||||
<!-- if (this.map) return-->
|
||||
<!-- console.log("创建地图对象")-->
|
||||
<!-- this.map = new AMap.Map(this.$refs.drawContainer, { zoom: 12 })-->
|
||||
<!-- this.geocoder = new AMap.Geocoder({})-->
|
||||
<!-- this.mouseTool = new AMap.MouseTool(this.map)-->
|
||||
<!-- this.map.plugin(["AMap.Scale", "AMap.ToolBar"], () => {-->
|
||||
<!-- this.map.addControl(new AMap.Scale())-->
|
||||
<!-- // this.map.addControl(new AMap.ToolBar())-->
|
||||
<!-- })-->
|
||||
|
||||
<!-- //监听draw事件可获取画好的覆盖物-->
|
||||
<!-- this.mouseTool.on("draw", e => {-->
|
||||
<!-- let obj = e.obj-->
|
||||
<!-- let overlays = this.overlays-->
|
||||
<!-- let overlaysLen = overlays.length-->
|
||||
<!-- let overlaysType = obj.className-->
|
||||
<!-- if (this.single && overlaysLen > 0) {-->
|
||||
<!-- for (let i = 0; i < overlaysLen; i++) {-->
|
||||
<!-- this.map.remove(overlays[i])-->
|
||||
<!-- }-->
|
||||
<!-- overlays = []-->
|
||||
<!-- }-->
|
||||
<!-- overlays.push(obj)-->
|
||||
<!-- this.overlays = overlays-->
|
||||
|
||||
<!-- this.closeEdit()-->
|
||||
|
||||
<!-- switch (overlaysType) {-->
|
||||
<!-- case "marker": {-->
|
||||
<!-- this.mouseTool.marker({ animation: "AMAP_ANIMATION_DROP" })-->
|
||||
<!-- break-->
|
||||
<!-- }-->
|
||||
<!-- case "Overlay.Circle": {-->
|
||||
<!-- this.editCircle(obj)-->
|
||||
<!-- break-->
|
||||
<!-- }-->
|
||||
<!-- case "Overlay.Polygon": {-->
|
||||
<!-- this.editPolygon(obj)-->
|
||||
<!-- break-->
|
||||
<!-- }-->
|
||||
<!-- case "Overlay.Polyline": {-->
|
||||
<!-- obj.setOptions({-->
|
||||
<!-- showDir: true,-->
|
||||
<!-- lineJoin: "round",-->
|
||||
<!-- lineCap: "round"-->
|
||||
<!-- })-->
|
||||
<!-- this.editPolyline(obj)-->
|
||||
<!-- break-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- if (this.single) {-->
|
||||
<!-- this.save()-->
|
||||
<!-- }-->
|
||||
<!-- this.mouseTool.close()-->
|
||||
|
||||
<!-- this.creatRightHandle(obj)-->
|
||||
<!-- this.map.setDefaultCursor("pointer")-->
|
||||
|
||||
<!-- this.$Message.success("绘制完成")-->
|
||||
<!-- })-->
|
||||
<!-- },-->
|
||||
<!-- createMenu(obj, type) {-->
|
||||
<!-- if (this.contextMenu) {-->
|
||||
<!-- this.contextMenu.close()-->
|
||||
<!-- this.contextMenu = null-->
|
||||
<!-- }-->
|
||||
<!-- //创建右键菜单-->
|
||||
<!-- this.contextMenu = new AMap.ContextMenu({})-->
|
||||
<!-- this.contextMenu.addItem(-->
|
||||
<!-- type == "marker" ? "拖动" : "开启编辑",-->
|
||||
<!-- () => {-->
|
||||
<!-- if (type == "marker") {-->
|
||||
<!-- this.nowCaozuo.setDraggable(true)-->
|
||||
<!-- this.dragendEndHandle(this.nowCaozuo)-->
|
||||
<!-- } else {-->
|
||||
<!-- this[type](this.nowCaozuo)-->
|
||||
<!-- }-->
|
||||
<!-- this.contextMenu.close()-->
|
||||
<!-- },-->
|
||||
<!-- 0-->
|
||||
<!-- )-->
|
||||
<!-- //右键取消编辑-->
|
||||
<!-- this.contextMenu.addItem(-->
|
||||
<!-- type == "marker" ? "取消拖动" : "取消编辑",-->
|
||||
<!-- () => {-->
|
||||
<!-- if (type == "marker") {-->
|
||||
<!-- this.nowCaozuo.setDraggable(false)-->
|
||||
<!-- } else {-->
|
||||
<!-- this.closeEdit()-->
|
||||
<!-- }-->
|
||||
<!-- this.contextMenu.close()-->
|
||||
<!-- },-->
|
||||
<!-- 1-->
|
||||
<!-- )-->
|
||||
<!-- //右键删除-->
|
||||
<!-- this.contextMenu.addItem(-->
|
||||
<!-- "移除",-->
|
||||
<!-- () => {-->
|
||||
<!-- this.closeEdit()-->
|
||||
<!-- this.map.remove(this.nowCaozuo)-->
|
||||
<!-- this.contextMenu.close()-->
|
||||
<!-- },-->
|
||||
<!-- 2-->
|
||||
<!-- )-->
|
||||
<!-- },-->
|
||||
<!-- editCircle(obj) {-->
|
||||
<!-- this.closeEdit()-->
|
||||
<!-- this.Editor = new AMap.CircleEditor(this.map, obj)-->
|
||||
<!-- if (this.single) {-->
|
||||
<!-- this.Editor.on("adjust", e => {-->
|
||||
<!-- this.save()-->
|
||||
<!-- })-->
|
||||
<!-- this.Editor.on("move", e => {-->
|
||||
<!-- this.save()-->
|
||||
<!-- })-->
|
||||
<!-- this.Editor.on("end", e => {-->
|
||||
<!-- // this.save()-->
|
||||
<!-- })-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- this.Editor.open()-->
|
||||
<!-- },-->
|
||||
<!-- editPolygon(obj) {-->
|
||||
<!-- this.closeEdit()-->
|
||||
<!-- this.Editor = new AMap.PolygonEditor(this.map, obj)-->
|
||||
<!-- if (this.single) {-->
|
||||
<!-- this.Editor.on("addnode", e => {-->
|
||||
<!-- this.save()-->
|
||||
<!-- })-->
|
||||
<!-- this.Editor.on("adjust", e => {-->
|
||||
<!-- this.save()-->
|
||||
<!-- })-->
|
||||
<!-- this.Editor.on("removenode", e => {-->
|
||||
<!-- this.save()-->
|
||||
<!-- })-->
|
||||
<!-- this.Editor.on("end", e => {-->
|
||||
<!-- // this.save()-->
|
||||
<!-- })-->
|
||||
<!-- }-->
|
||||
<!-- this.Editor.open()-->
|
||||
<!-- },-->
|
||||
<!-- editPolyline(obj) {-->
|
||||
<!-- this.closeEdit()-->
|
||||
<!-- this.Editor = new AMap.PolylineEditor(this.map, obj)-->
|
||||
<!-- if (this.single) {-->
|
||||
<!-- this.Editor.on("addnode", e => {-->
|
||||
<!-- this.save()-->
|
||||
<!-- })-->
|
||||
<!-- this.Editor.on("adjust", e => {-->
|
||||
<!-- this.save()-->
|
||||
<!-- })-->
|
||||
<!-- this.Editor.on("removenode", e => {-->
|
||||
<!-- this.save()-->
|
||||
<!-- })-->
|
||||
<!-- this.Editor.on("end", e => {-->
|
||||
<!-- // this.save()-->
|
||||
<!-- })-->
|
||||
<!-- }-->
|
||||
<!-- this.Editor.open()-->
|
||||
<!-- },-->
|
||||
<!-- draw(type) {-->
|
||||
<!-- switch (type) {-->
|
||||
<!-- case "marker": {-->
|
||||
<!-- this.mouseTool.marker({ animation: "AMAP_ANIMATION_DROP" })-->
|
||||
<!-- break-->
|
||||
<!-- }-->
|
||||
<!-- case "polyline": {-->
|
||||
<!-- this.mouseTool.polyline({-->
|
||||
<!-- strokeColor: "#3366FF",-->
|
||||
<!-- strokeWeight: 6-->
|
||||
<!-- })-->
|
||||
<!-- break-->
|
||||
<!-- }-->
|
||||
<!-- case "polygon": {-->
|
||||
<!-- this.mouseTool.polygon({ ...overlayStyle })-->
|
||||
<!-- break-->
|
||||
<!-- }-->
|
||||
<!-- case "circle": {-->
|
||||
<!-- this.mouseTool.circle({ ...overlayStyle })-->
|
||||
<!-- break-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- this.map.setDefaultCursor("crosshair")-->
|
||||
<!-- },-->
|
||||
|
||||
<!-- // 获取绘制的圆形覆盖物数据-->
|
||||
<!-- mapCircleData(mapCircle) {-->
|
||||
<!-- let len = mapCircle.length-->
|
||||
<!-- let arrar = mapCircle.map(item => {-->
|
||||
<!-- return item.getCenter()-->
|
||||
<!-- })-->
|
||||
<!-- return new Promise((resolve, reject) => {-->
|
||||
<!-- let circleData = []-->
|
||||
<!-- this.geocoder.getAddress(arrar, (status, result) => {-->
|
||||
<!-- if (status === "complete" && result.regeocodes.length) {-->
|
||||
<!-- for (let j = 0; j < result.regeocodes.length; j += 1) {-->
|
||||
<!-- // console.log(result.regeocodes[j].formattedAddress)-->
|
||||
<!-- circleData.push({-->
|
||||
<!-- lnglat: {-->
|
||||
<!-- lng: mapCircle[j].getCenter().lng,-->
|
||||
<!-- lat: mapCircle[j].getCenter().lat-->
|
||||
<!-- },-->
|
||||
<!-- radius: parseInt(mapCircle[j].getRadius()),-->
|
||||
<!-- address: result.regeocodes[j].formattedAddress-->
|
||||
<!-- })-->
|
||||
<!-- this.circleData = circleData-->
|
||||
<!-- if (circleData.length == len) {-->
|
||||
<!-- resolve()-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- } else {-->
|
||||
<!-- for (let i = 0; i < len; i += 1) {-->
|
||||
<!-- circleData.push({-->
|
||||
<!-- lnglat: {-->
|
||||
<!-- lng: mapCircle[i].getCenter().lng,-->
|
||||
<!-- lat: mapCircle[i].getCenter().lat-->
|
||||
<!-- },-->
|
||||
<!-- radius: parseInt(mapCircle[i].getRadius()),-->
|
||||
<!-- address: ""-->
|
||||
<!-- })-->
|
||||
<!-- }-->
|
||||
<!-- this.circleData = circleData-->
|
||||
<!-- if (circleData.length == len) {-->
|
||||
<!-- resolve()-->
|
||||
<!-- }-->
|
||||
<!-- this.$Message.success("坐标地址获取失败")-->
|
||||
<!-- }-->
|
||||
<!-- })-->
|
||||
<!-- })-->
|
||||
<!-- },-->
|
||||
<!-- // 获取折线覆盖物数据-->
|
||||
<!-- mapPolylineData(mapPolyline) {-->
|
||||
<!-- let len = mapPolyline.length-->
|
||||
<!-- return new Promise((resolve, reject) => {-->
|
||||
<!-- for (let i = 0; i < len; i++) {-->
|
||||
<!-- let geoLngLat = mapPolyline[i].getPath()-->
|
||||
<!-- let linePath = geoLngLat.map(item => {-->
|
||||
<!-- return [item.lng, item.lat]-->
|
||||
<!-- })-->
|
||||
<!-- let polylineData = this.polylineData-->
|
||||
<!-- this.geocoder.getAddress(geoLngLat, (status, result) => {-->
|
||||
<!-- let address = []-->
|
||||
<!-- if (status === "complete" && result.regeocodes.length) {-->
|
||||
<!-- for (let j = 0; j < result.regeocodes.length; j += 1) {-->
|
||||
<!-- address.push({-->
|
||||
<!-- pointName: result.regeocodes[j].formattedAddress,-->
|
||||
<!-- longitude: geoLngLat[j].lng,-->
|
||||
<!-- latitude: geoLngLat[j].lat,-->
|
||||
<!-- orders: j-->
|
||||
<!-- })-->
|
||||
<!-- }-->
|
||||
<!-- polylineData.push({-->
|
||||
<!-- points: address,-->
|
||||
<!-- line: linePath-->
|
||||
<!-- })-->
|
||||
<!-- this.polylineData = polylineData-->
|
||||
<!-- if (polylineData.length == len) {-->
|
||||
<!-- resolve()-->
|
||||
<!-- }-->
|
||||
<!-- } else {-->
|
||||
<!-- this.$Message.success("坐标地址获取失败")-->
|
||||
<!-- for (let adi = 0; adi < len; adi += 1) {-->
|
||||
<!-- address.push({-->
|
||||
<!-- pointName: "",-->
|
||||
<!-- longitude: geoLngLat[adi].lng,-->
|
||||
<!-- latitude: geoLngLat[adi].lat,-->
|
||||
<!-- orders: adi-->
|
||||
<!-- })-->
|
||||
<!-- }-->
|
||||
<!-- polylineData.push({-->
|
||||
<!-- points: address,-->
|
||||
<!-- line: linePath-->
|
||||
<!-- })-->
|
||||
<!-- this.polylineData = polylineData-->
|
||||
<!-- if (polylineData.length == len) {-->
|
||||
<!-- resolve()-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- })-->
|
||||
<!-- }-->
|
||||
<!-- })-->
|
||||
<!-- },-->
|
||||
<!-- // 获取多边形覆盖物数据-->
|
||||
<!-- mapPolygonData(mapPolygon) {-->
|
||||
<!-- let len = mapPolygon.length-->
|
||||
<!-- return new Promise((resolve, reject) => {-->
|
||||
<!-- for (let i = 0; i < len; i++) {-->
|
||||
<!-- let geoLngLat = mapPolygon[i].getPath()-->
|
||||
<!-- let linePath = geoLngLat.map(item => {-->
|
||||
<!-- return [item.lng, item.lat]-->
|
||||
<!-- })-->
|
||||
<!-- let polygonData = this.polygonData-->
|
||||
<!-- this.geocoder.getAddress(geoLngLat, (status, result) => {-->
|
||||
<!-- let address = []-->
|
||||
<!-- if (status === "complete" && result.regeocodes.length) {-->
|
||||
<!-- for (let j = 0; j < result.regeocodes.length; j += 1) {-->
|
||||
<!-- address.push({-->
|
||||
<!-- id: "",-->
|
||||
<!-- airspaceId: "",-->
|
||||
<!-- pointName: result.regeocodes[j].formattedAddress,-->
|
||||
<!-- longitude: geoLngLat[j].lng,-->
|
||||
<!-- latitude: geoLngLat[j].lat,-->
|
||||
<!-- orders: j-->
|
||||
<!-- })-->
|
||||
<!-- }-->
|
||||
<!-- polygonData.push({-->
|
||||
<!-- points: address,-->
|
||||
<!-- line: linePath-->
|
||||
<!-- })-->
|
||||
<!-- // console.log("polygonData.length", polygonData.length)-->
|
||||
<!-- this.polygonData = polygonData-->
|
||||
<!-- if (polygonData.length == len) {-->
|
||||
<!-- resolve()-->
|
||||
<!-- }-->
|
||||
<!-- } else {-->
|
||||
<!-- this.$Message.success("坐标地址获取失败")-->
|
||||
<!-- for (let ii = 0; ii < len; ii += 1) {-->
|
||||
<!-- address.push({-->
|
||||
<!-- id: "",-->
|
||||
<!-- airspaceId: "",-->
|
||||
<!-- pointName: "",-->
|
||||
<!-- longitude: geoLngLat[ii].lng,-->
|
||||
<!-- latitude: geoLngLat[ii].lat,-->
|
||||
<!-- orders: ii-->
|
||||
<!-- })-->
|
||||
<!-- }-->
|
||||
<!-- polygonData.push({-->
|
||||
<!-- points: address,-->
|
||||
<!-- line: linePath-->
|
||||
<!-- })-->
|
||||
<!-- this.polygonData = polygonData-->
|
||||
<!-- if (polygonData.length == len) {-->
|
||||
<!-- resolve()-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- })-->
|
||||
<!-- }-->
|
||||
<!-- })-->
|
||||
<!-- },-->
|
||||
<!-- // 获取点标记覆盖物数据-->
|
||||
<!-- mapMarkerData(mapMarker) {-->
|
||||
<!-- let len = mapMarker.length-->
|
||||
<!-- let arrar = mapMarker.map(item => {-->
|
||||
<!-- return item.getPosition()-->
|
||||
<!-- })-->
|
||||
<!-- return new Promise((resolve, reject) => {-->
|
||||
<!-- let markerData = []-->
|
||||
<!-- this.geocoder.getAddress(arrar, (status, result) => {-->
|
||||
<!-- if (status === "complete" && result.regeocodes.length) {-->
|
||||
<!-- for (let j = 0; j < result.regeocodes.length; j += 1) {-->
|
||||
<!-- markerData.push({-->
|
||||
<!-- longitude: mapMarker[j].getPosition().lng,-->
|
||||
<!-- latitude: mapMarker[j].getPosition().lat,-->
|
||||
<!-- orders: j,-->
|
||||
<!-- address: result.regeocodes[j].formattedAddress-->
|
||||
<!-- })-->
|
||||
<!-- this.markerData = markerData-->
|
||||
<!-- if (markerData.length == len) {-->
|
||||
<!-- resolve()-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- } else {-->
|
||||
<!-- this.$Message.success("坐标地址获取失败")-->
|
||||
<!-- for (let mid = 0; mid < len; mid += 1) {-->
|
||||
<!-- markerData.push({-->
|
||||
<!-- longitude: mapMarker[mid].getPosition().lng,-->
|
||||
<!-- latitude: mapMarker[mid].getPosition().lat,-->
|
||||
<!-- orders: mid,-->
|
||||
<!-- address: ""-->
|
||||
<!-- })-->
|
||||
<!-- this.markerData = markerData-->
|
||||
<!-- if (markerData.length == len) {-->
|
||||
<!-- resolve()-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- })-->
|
||||
<!-- })-->
|
||||
<!-- },-->
|
||||
|
||||
<!-- showCircle(data, needEdit = false) {-->
|
||||
<!-- for (let i = 0; i < data.length; i++) {-->
|
||||
<!-- let circle = new AMap.Circle({-->
|
||||
<!-- center: [data[i].lnglat.lng, data[i].lnglat.lat],-->
|
||||
<!-- radius: data[i].radius,-->
|
||||
<!-- ...overlayStyle-->
|
||||
<!-- })-->
|
||||
<!-- circle.setMap(this.map)-->
|
||||
<!-- this.addOverlay(circle)-->
|
||||
<!-- this.creatRightHandle(circle)-->
|
||||
<!-- if (needEdit) {-->
|
||||
<!-- this.editCircle(circle)-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- this.setVueDebounce()-->
|
||||
<!-- },-->
|
||||
<!-- setCircle(center, radius) {-->
|
||||
<!-- this.closeEdit()-->
|
||||
<!-- this.clearMap()-->
|
||||
<!-- let circle = new AMap.Circle({-->
|
||||
<!-- center,-->
|
||||
<!-- radius,-->
|
||||
<!-- ...overlayStyle-->
|
||||
<!-- })-->
|
||||
<!-- this.addOverlay(circle)-->
|
||||
<!-- circle.setMap(this.map)-->
|
||||
<!-- this.creatRightHandle(circle)-->
|
||||
<!-- this.setVueDebounce()-->
|
||||
<!-- this.map.setCenter(center)-->
|
||||
<!-- },-->
|
||||
<!-- showMark(data) {-->
|
||||
<!-- for (let i = 0; i < data.length; i++) {-->
|
||||
<!-- let marker = new AMap.Marker({-->
|
||||
<!-- position: new AMap.LngLat(data[i].lng, data[i].lat)-->
|
||||
<!-- })-->
|
||||
<!-- this.map.add(marker)-->
|
||||
<!-- if (data[i].title) {-->
|
||||
<!-- marker.setLabel({-->
|
||||
<!-- direction: "bottom",-->
|
||||
<!-- content: data[i].title //设置文本标注内容-->
|
||||
<!-- })-->
|
||||
<!-- }-->
|
||||
<!-- this.addOverlay(marker)-->
|
||||
<!-- this.creatRightHandle(marker)-->
|
||||
<!-- this.dragendEndHandle(marker)-->
|
||||
<!-- }-->
|
||||
<!-- this.setVueDebounce()-->
|
||||
<!-- this.map.setZoom(10)-->
|
||||
<!-- },-->
|
||||
<!-- // 单个显示-->
|
||||
<!-- setMaker(lng, lat) {-->
|
||||
<!-- // this.initMap()-->
|
||||
<!-- this.closeEdit()-->
|
||||
<!-- this.clearMap()-->
|
||||
<!-- let marker = new AMap.Marker({-->
|
||||
<!-- position: new AMap.LngLat(lng, lat)-->
|
||||
<!-- })-->
|
||||
<!-- this.map.add(marker)-->
|
||||
<!-- this.addOverlay(marker)-->
|
||||
<!-- this.creatRightHandle(marker)-->
|
||||
<!-- this.dragendEndHandle(marker)-->
|
||||
<!-- this.map.setCenter([lng, lat])-->
|
||||
<!-- this.map.setZoom(10)-->
|
||||
<!-- },-->
|
||||
<!-- showPolygon(data, needEdit = false) {-->
|
||||
<!-- for (let i = 0; i < data.length; i++) {-->
|
||||
<!-- let polygon = new AMap.Polygon({-->
|
||||
<!-- path: data[i],-->
|
||||
<!-- ...overlayStyle-->
|
||||
<!-- })-->
|
||||
<!-- this.addOverlay(polygon)-->
|
||||
<!-- polygon.setMap(this.map)-->
|
||||
<!-- this.creatRightHandle(polygon)-->
|
||||
<!-- if (needEdit) {-->
|
||||
<!-- this.editPolygon(polygon)-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- this.setVueDebounce()-->
|
||||
<!-- },-->
|
||||
<!-- setPolygon(path) {-->
|
||||
<!-- this.closeEdit()-->
|
||||
<!-- this.clearMap()-->
|
||||
<!-- let polygon = new AMap.Polygon({-->
|
||||
<!-- path,-->
|
||||
<!-- ...overlayStyle-->
|
||||
<!-- })-->
|
||||
<!-- this.addOverlay(polygon)-->
|
||||
<!-- polygon.setMap(this.map)-->
|
||||
<!-- this.creatRightHandle(polygon)-->
|
||||
<!-- this.setVueDebounce()-->
|
||||
<!-- },-->
|
||||
<!-- showLine(data, needEdit = false) {-->
|
||||
<!-- for (let i = 0; i < data.length; i++) {-->
|
||||
<!-- let line = new AMap.Polyline({-->
|
||||
<!-- path: data[i],-->
|
||||
<!-- strokeColor: "#3366FF",-->
|
||||
<!-- strokeWeight: 6,-->
|
||||
<!-- showDir: true,-->
|
||||
<!-- lineJoin: "round",-->
|
||||
<!-- lineCap: "round"-->
|
||||
<!-- })-->
|
||||
<!-- this.addOverlay(line)-->
|
||||
<!-- line.setMap(this.map)-->
|
||||
<!-- this.creatRightHandle(line)-->
|
||||
<!-- if (needEdit) {-->
|
||||
<!-- this.editPolyline(line)-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- this.setVueDebounce()-->
|
||||
<!-- },-->
|
||||
<!-- setLine(path) {-->
|
||||
<!-- this.closeEdit()-->
|
||||
<!-- this.clearMap()-->
|
||||
<!-- let line = new AMap.Polyline({-->
|
||||
<!-- path,-->
|
||||
<!-- strokeColor: "#3366FF",-->
|
||||
<!-- strokeWeight: 6,-->
|
||||
<!-- showDir: true,-->
|
||||
<!-- lineJoin: "round",-->
|
||||
<!-- lineCap: "round"-->
|
||||
<!-- })-->
|
||||
<!-- this.addOverlay(line)-->
|
||||
<!-- line.setMap(this.map)-->
|
||||
<!-- if (!this.onlyShow) {-->
|
||||
<!-- this.creatRightHandle(line)-->
|
||||
<!-- }-->
|
||||
<!-- this.setVueDebounce()-->
|
||||
<!-- },-->
|
||||
<!-- setVueDebounce:VueDebounce('setFitView'),-->
|
||||
<!-- setFitView(){-->
|
||||
<!-- this.map && this.map.setFitView(null, false)-->
|
||||
<!-- },-->
|
||||
<!-- addOverlay(o) {-->
|
||||
<!-- let overlays = this.overlays-->
|
||||
<!-- overlays.push(o)-->
|
||||
<!-- this.overlays = overlays-->
|
||||
<!-- },-->
|
||||
<!-- dragendEndHandle(key) {-->
|
||||
<!-- key.on("dragend", obj => {-->
|
||||
<!-- if (this.single) {-->
|
||||
<!-- this.save()-->
|
||||
<!-- }-->
|
||||
<!-- })-->
|
||||
<!-- },-->
|
||||
<!-- creatRightHandle(key) {-->
|
||||
<!-- if (this.onlyShow) return-->
|
||||
<!-- key.on("rightclick", cliObj => {-->
|
||||
<!-- this.nowCaozuo = cliObj.target-->
|
||||
<!-- // 判断鼠标右键点击的是什么图形-->
|
||||
<!-- if (cliObj.target.className == "Overlay.Circle") {-->
|
||||
<!-- this.createMenu(cliObj, "editCircle")-->
|
||||
<!-- } else if (cliObj.target.className == "AMap.Marker") {-->
|
||||
<!-- this.createMenu(cliObj, "marker")-->
|
||||
<!-- } else if (cliObj.target.className == "Overlay.Polyline") {-->
|
||||
<!-- this.createMenu(cliObj, "editPolyline")-->
|
||||
<!-- } else if (cliObj.target.className == "Overlay.Polygon") {-->
|
||||
<!-- this.createMenu(cliObj, "editPolygon")-->
|
||||
<!-- } else {-->
|
||||
<!-- }-->
|
||||
<!-- this.contextMenu.open(this.map, cliObj.lnglat)-->
|
||||
<!-- })-->
|
||||
<!-- },-->
|
||||
<!-- closeEdit() {-->
|
||||
<!-- if (this.Editor) {-->
|
||||
<!-- this.Editor.close()-->
|
||||
<!-- this.Editor = null-->
|
||||
<!-- }-->
|
||||
<!-- if (this.map) {-->
|
||||
<!-- this.map.setDefaultCursor("pointer")-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- clearMap() {-->
|
||||
<!-- if (this.map) {-->
|
||||
<!-- this.map.clearMap()-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- clearAllGraph() {-->
|
||||
<!-- this.overlays = []-->
|
||||
<!-- this.clearMap()-->
|
||||
<!-- this.closeEdit()-->
|
||||
<!-- },-->
|
||||
<!-- saveMap() {-->
|
||||
<!-- this.save()-->
|
||||
<!-- },-->
|
||||
<!-- async save() {-->
|
||||
<!-- this.polylineData = []-->
|
||||
<!-- this.polygonData = []-->
|
||||
<!-- this.circleData = []-->
|
||||
<!-- this.markerData = []-->
|
||||
<!-- let mapMarker = this.map.getAllOverlays("marker")-->
|
||||
<!-- let mapCircle = this.map.getAllOverlays("circle")-->
|
||||
<!-- let mapPolygon = this.map.getAllOverlays("polygon")-->
|
||||
<!-- let mapPolyline = this.map.getAllOverlays("polyline")-->
|
||||
<!-- if (mapMarker.length > 0) {-->
|
||||
<!-- await this.mapMarkerData(mapMarker) //点标记-->
|
||||
<!-- }-->
|
||||
<!-- if (mapCircle.length > 0) {-->
|
||||
<!-- await this.mapCircleData(mapCircle) //圆形-->
|
||||
<!-- }-->
|
||||
<!-- if (mapPolygon.length > 0) {-->
|
||||
<!-- await this.mapPolygonData(mapPolygon) //多边形-->
|
||||
<!-- }-->
|
||||
<!-- if (mapPolyline.length > 0) {-->
|
||||
<!-- await this.mapPolylineData(mapPolyline) //折线-->
|
||||
<!-- }-->
|
||||
<!-- let allMapData = {-->
|
||||
<!-- markerData: this.markerData,-->
|
||||
<!-- circleData: this.circleData,-->
|
||||
<!-- polygonData: this.polygonData,-->
|
||||
<!-- polylineData: this.polylineData-->
|
||||
<!-- }-->
|
||||
<!-- this.$emit("getMapData", allMapData)-->
|
||||
<!-- },-->
|
||||
<!-- fullSrceen() {-->
|
||||
<!-- // let main = document.body-->
|
||||
<!-- // if (this.fullId) {-->
|
||||
<!-- let main = this.$refs.allMapOperation-->
|
||||
<!-- // }-->
|
||||
<!-- let isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen-->
|
||||
<!-- isFullscreen = !!isFullscreen-->
|
||||
<!-- if (isFullscreen) {-->
|
||||
<!-- if (document.exitFullscreen) {-->
|
||||
<!-- document.exitFullscreen()-->
|
||||
<!-- } else if (document.mozCancelFullScreen) {-->
|
||||
<!-- document.mozCancelFullScreen()-->
|
||||
<!-- } else if (document.webkitCancelFullScreen) {-->
|
||||
<!-- document.webkitCancelFullScreen()-->
|
||||
<!-- } else if (document.msExitFullscreen) {-->
|
||||
<!-- document.msExitFullscreen()-->
|
||||
<!-- }-->
|
||||
<!-- this.isFull = false-->
|
||||
<!-- } else {-->
|
||||
<!-- if (main.requestFullscreen) {-->
|
||||
<!-- main.requestFullscreen()-->
|
||||
<!-- } else if (main.mozRequestFullScreen) {-->
|
||||
<!-- main.mozRequestFullScreen()-->
|
||||
<!-- } else if (main.webkitRequestFullScreen) {-->
|
||||
<!-- main.webkitRequestFullScreen()-->
|
||||
<!-- } else if (main.msRequestFullscreen) {-->
|
||||
<!-- main.msRequestFullscreen()-->
|
||||
<!-- }-->
|
||||
<!-- this.isFull = true-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- beforeDestroy() {-->
|
||||
<!-- console.log("销毁")-->
|
||||
<!-- this.mouseTool = null-->
|
||||
<!-- this.geocoder = null-->
|
||||
<!-- this.Editor = null-->
|
||||
<!-- this.nowCaozuo = null-->
|
||||
<!-- this.contextMenu = null-->
|
||||
<!-- this.overlays = []-->
|
||||
<!-- if (this.map) {-->
|
||||
<!-- this.map.destroy()-->
|
||||
<!-- this.map = null-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
<!--<style lang="less">-->
|
||||
<!--.allMapOperation {-->
|
||||
<!-- position: relative;-->
|
||||
<!-- .draw-container {-->
|
||||
<!-- height: 100%;-->
|
||||
<!-- width: 100%;-->
|
||||
<!-- }-->
|
||||
<!-- .drawmap-operation-menu {-->
|
||||
<!-- display: flex;-->
|
||||
<!-- flex-direction: column;-->
|
||||
<!-- min-width: 0;-->
|
||||
<!-- word-wrap: break-word;-->
|
||||
<!-- background-color: #fff;-->
|
||||
<!-- background-clip: border-box;-->
|
||||
<!-- border-radius: 0.25rem;-->
|
||||
<!-- width: 48px;-->
|
||||
<!-- border-width: 0;-->
|
||||
<!-- border-radius: 0.4rem;-->
|
||||
<!-- box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);-->
|
||||
<!-- position: absolute;-->
|
||||
<!-- top: 8rem;-->
|
||||
<!-- right: 1rem;-->
|
||||
<!-- -ms-flex: 1 1 auto;-->
|
||||
<!-- flex: 1 1 auto;-->
|
||||
<!-- }-->
|
||||
<!-- .drawmap-tooltip {-->
|
||||
<!-- display: flex;-->
|
||||
<!-- align-items: center;-->
|
||||
<!-- justify-content: center;-->
|
||||
<!-- }-->
|
||||
<!-- .info {-->
|
||||
<!-- padding: 0.25rem 0.75rem;-->
|
||||
<!-- margin-bottom: 1rem;-->
|
||||
<!-- border-radius: 0.25rem;-->
|
||||
<!-- position: absolute;-->
|
||||
<!-- top: 5px;-->
|
||||
<!-- background-color: white;-->
|
||||
<!-- width: auto;-->
|
||||
<!-- border-width: 0;-->
|
||||
<!-- right: 5px;-->
|
||||
<!-- box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);-->
|
||||
<!-- line-height: 22px;-->
|
||||
<!-- }-->
|
||||
<!-- .fullScreen {-->
|
||||
<!-- position: absolute;-->
|
||||
<!-- right: 5px;-->
|
||||
<!-- bottom: 5px;-->
|
||||
<!-- display: flex;-->
|
||||
<!-- flex-direction: column;-->
|
||||
<!-- justify-content: center;-->
|
||||
<!-- align-items: center;-->
|
||||
<!-- border-radius: 0.25rem;-->
|
||||
<!-- width: 30px;-->
|
||||
<!-- height: 30px;-->
|
||||
<!-- box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);-->
|
||||
<!-- }-->
|
||||
<!--}-->
|
||||
<!--</style>-->
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<title>轨迹回放</title>
|
||||
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
|
||||
<style>
|
||||
html, body, #container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-card .btn{
|
||||
margin-right: 1.2rem;
|
||||
width: 9rem;
|
||||
}
|
||||
|
||||
.input-card .btn:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<div class="input-card">
|
||||
<h4>轨迹回放控制</h4>
|
||||
<div class="input-item">
|
||||
<input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()"/>
|
||||
<input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()"/>
|
||||
</div>
|
||||
<div class="input-item">
|
||||
<input type="button" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()"/>
|
||||
<input type="button" class="btn" value="停止动画" id="stop" onclick="stopAnimation()"/>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
|
||||
<script>
|
||||
// JSAPI2.0 使用覆盖物动画必须先加载动画插件
|
||||
AMap.plugin('AMap.MoveAnimation', function(){
|
||||
var marker, lineArr = [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]];
|
||||
|
||||
var map = new AMap.Map("container", {
|
||||
resizeEnable: true,
|
||||
center: [116.397428, 39.90923],
|
||||
zoom: 17
|
||||
});
|
||||
|
||||
marker = new AMap.Marker({
|
||||
map: map,
|
||||
position: [116.478935,39.997761],
|
||||
icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
|
||||
offset: new AMap.Pixel(-13, -26),
|
||||
});
|
||||
|
||||
// 绘制轨迹
|
||||
var polyline = new AMap.Polyline({
|
||||
map: map,
|
||||
path: lineArr,
|
||||
showDir:true,
|
||||
strokeColor: "#28F", //线颜色
|
||||
// strokeOpacity: 1, //线透明度
|
||||
strokeWeight: 6, //线宽
|
||||
// strokeStyle: "solid" //线样式
|
||||
});
|
||||
|
||||
var passedPolyline = new AMap.Polyline({
|
||||
map: map,
|
||||
strokeColor: "#AF5", //线颜色
|
||||
strokeWeight: 6, //线宽
|
||||
});
|
||||
|
||||
|
||||
marker.on('moving', function (e) {
|
||||
passedPolyline.setPath(e.passedPath);
|
||||
map.setCenter(e.target.getPosition(),true)
|
||||
});
|
||||
|
||||
map.setFitView();
|
||||
|
||||
window.startAnimation = function startAnimation () {
|
||||
marker.moveAlong(lineArr, {
|
||||
// 每一段的时长
|
||||
duration: 500,//可根据实际采集时间间隔设置
|
||||
// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
|
||||
autoRotation: true,
|
||||
});
|
||||
};
|
||||
|
||||
window.pauseAnimation = function () {
|
||||
marker.pauseMove();
|
||||
};
|
||||
|
||||
window.resumeAnimation = function () {
|
||||
marker.resumeMove();
|
||||
};
|
||||
|
||||
window.stopAnimation = function () {
|
||||
marker.stopMove();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -116,8 +116,7 @@
|
|||
<el-table-column label="策略id" align="center" prop="strategyId" />
|
||||
<el-table-column label="报文数据类型id" align="center" prop="msgTypeId" />
|
||||
<el-table-column label="滑窗时间" align="center" prop="slideTime" />
|
||||
<el-table-column label="滑窗频率" align="center" prop="slideFrequency" >
|
||||
</el-table-column>>
|
||||
<el-table-column label="滑窗频率" align="center" prop="slideFrequency" />
|
||||
<el-table-column label="最大值" align="center" prop="maxValue" />
|
||||
<el-table-column label="最小值" align="center" prop="minValue" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
|
|
@ -150,21 +149,15 @@
|
|||
|
||||
<!-- 添加或修改预警规则对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
{{form}}
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="规则名称" prop="ruleName">
|
||||
<el-input v-model="form.ruleName" placeholder="请输入规则名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="策略id" prop="strategyId">
|
||||
<el-input v-model="form.strategyId" placeholder="请输入策略id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="报文数据类型id" prop="msgTypeId">
|
||||
<el-input v-model="form.msgTypeId" placeholder="请输入报文数据类型id" />
|
||||
<el-select v-model="form.msgTypeId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in messages"
|
||||
:key="item.messageId"
|
||||
:label="item.messageLabel"
|
||||
:value="item.messageId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="滑窗时间" prop="slideTime">
|
||||
<el-input v-model="form.slideTime" placeholder="请输入滑窗时间" />
|
||||
|
|
@ -188,7 +181,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { listRule, getRule, delRule, addRule, updateRule , selectByTemplateId } from "/src/api/warn/rule";
|
||||
import { listRule, getRule, delRule, addRule, updateRule } from "/src/api/warn/rule";
|
||||
|
||||
export default {
|
||||
name: "Rule",
|
||||
|
|
@ -228,58 +221,15 @@ export default {
|
|||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
ruleName:[
|
||||
{ required: true, message: '规则名称不能为空'},
|
||||
],
|
||||
msgTypeId:[
|
||||
{ required: true, message: '报文数据类型id不能为空'},
|
||||
],
|
||||
slideTime:[
|
||||
{ required: true, message: '时间不能为空'},
|
||||
{ pattern: '^(6[0-9]|[1-2]\d{2}|3[0-5]\d|360)$',message:'只能输入60-360之间的时间'}
|
||||
],
|
||||
slideFrequency:[
|
||||
{ required: true, message: '滑窗频率不能为空'},
|
||||
],
|
||||
maxValue:[
|
||||
{ required: true, message: '最大值不能为空'},
|
||||
],
|
||||
minValue:[
|
||||
{ required: true, message: '最小值不能为空'},
|
||||
]
|
||||
},
|
||||
//报文下拉框
|
||||
messages:[],
|
||||
//策略对象
|
||||
strategy:{
|
||||
id:"",
|
||||
carTypeId:"",
|
||||
strategyName:"",
|
||||
templateId:""
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.strategy = this.$route.query.strategy
|
||||
this.getList();
|
||||
this.getMessageList();
|
||||
},
|
||||
methods: {
|
||||
/** 根据报文模板id查询报文下拉框 */
|
||||
getMessageList(){
|
||||
console.log(this.strategy);
|
||||
selectByTemplateId(this.strategy.templateId).then(
|
||||
res=>{
|
||||
this.messages = res.data
|
||||
console.log(this.messages)
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
/** 查询预警规则列表 */
|
||||
getList() {
|
||||
this.queryParams.strategyId = this.strategy.id
|
||||
this.form.strategyId = this.strategy.id
|
||||
this.loading = true;
|
||||
listRule(this.queryParams).then(response => {
|
||||
this.ruleList = response.data.rows;
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="报文模版id" prop="templateId">
|
||||
<el-form-item label="报文模版id" prop="msgId">
|
||||
<el-input
|
||||
v-model="queryParams.templateId"
|
||||
v-model="queryParams.msgId"
|
||||
placeholder="请输入报文模版id"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
|
|
@ -82,14 +82,7 @@
|
|||
<el-table-column label="策略id" align="center" prop="id" />
|
||||
<el-table-column label="车辆类型id" align="center" prop="carTypeId" />
|
||||
<el-table-column label="策略名称" align="center" prop="strategyName" />
|
||||
<el-table-column label="报文模版id" align="center" prop="templateId" />
|
||||
<!-- <el-table-column label="规则id" align="center" prop="ruleId" />-->
|
||||
<!-- <el-table-column label="规则名称" align="center" prop="ruleName" />-->
|
||||
<!-- <el-table-column label="滑窗时间" align="center" prop="slideTime" />-->
|
||||
<!-- <el-table-column label="滑窗频率" align="center" prop="slideFrequency" />-->
|
||||
<!-- <el-table-column label="最大值" align="center" prop="maxValue" />-->
|
||||
<!-- <el-table-column label="最小值" align="center" prop="minValue" />-->
|
||||
<!-- <el-table-column label="报文数据名称" align="center" prop="messageName" />-->
|
||||
<el-table-column label="报文模版id" align="center" prop="msgId" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
|
|
@ -106,11 +99,6 @@
|
|||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['warn:strategy:remove']"
|
||||
>删除</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleRule(scope.row)"
|
||||
>规则配置</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -125,20 +113,15 @@
|
|||
|
||||
<!-- 添加或修改预警策略对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="车辆类型id" prop="carTypeId">
|
||||
<el-select v-model="form.carTypeId" @change="byIdTemplate(form.carTypeId)">
|
||||
<el-option v-for="item in carTypes"
|
||||
:key="item.carTypeId"
|
||||
:value="item.carTypeId"
|
||||
:label="item.carTypeName"></el-option>
|
||||
</el-select>
|
||||
<el-input v-model="form.carTypeId" placeholder="请输入车辆类型id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="策略名称" prop="strategyName">
|
||||
<el-input v-model="form.strategyName" placeholder="请输入策略名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="报文模版id" prop="templateId">
|
||||
<el-input v-model="form.templateId" readonly placeholder="请输入报文模版id" />
|
||||
<el-form-item label="报文模版id" prop="msgId">
|
||||
<el-input v-model="form.msgId" placeholder="请输入报文模版id" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
|
|
@ -150,9 +133,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { listStrategy, getStrategy, delStrategy, addStrategy, updateStrategy ,
|
||||
strategyRuleList,carTypeList,catTypeId} from "/src/api/warn/strategy";
|
||||
import { listRule } from '@/api/warn/rule'
|
||||
import { listStrategy, getStrategy, delStrategy, addStrategy, updateStrategy } from "/src/api/warn/strategy";
|
||||
|
||||
export default {
|
||||
name: "Strategy",
|
||||
data() {
|
||||
|
|
@ -181,50 +163,19 @@ export default {
|
|||
pageSize: 10,
|
||||
carTypeId: null,
|
||||
strategyName: null,
|
||||
templateId: null
|
||||
msgId: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
},
|
||||
WarnStrategyList:{},
|
||||
carTypes:[],
|
||||
carType:{
|
||||
templateId:""
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getCarTypeList();
|
||||
},
|
||||
methods: {
|
||||
/**根据类型查询报文 */
|
||||
byIdTemplate(id){
|
||||
catTypeId(id).then(
|
||||
res=>{
|
||||
this.carType = res.data
|
||||
console.log(this.carType)
|
||||
this.form.templateId = this.carType.templateId
|
||||
}
|
||||
)
|
||||
},
|
||||
/** 查询所有车辆类型 (下拉框)*/
|
||||
getCarTypeList(){
|
||||
carTypeList().then(
|
||||
res=>{
|
||||
this.carTypes = res.data;
|
||||
}
|
||||
)
|
||||
},
|
||||
//规则配置跳转规则页面 传参:策略对象
|
||||
handleRule(row){
|
||||
this.$router.push({
|
||||
path :'/warn/rule',
|
||||
query:{strategy:row}
|
||||
})
|
||||
},
|
||||
/** 查询预警策略列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
|
|
@ -245,7 +196,7 @@ export default {
|
|||
id: null,
|
||||
carTypeId: null,
|
||||
strategyName: null,
|
||||
templateId: null
|
||||
msgId: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue