feat():策略列表跳转页面查询策略下的规则,报文下拉框,车辆类型下拉框
liuyibo
parent
56d0e1255b
commit
86ee4d5654
|
|
@ -42,3 +42,18 @@ export function delRule(id) {
|
||||||
method: 'delete'
|
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,3 +42,28 @@ export function delStrategy(id) {
|
||||||
method: 'delete'
|
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'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,248 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,849 +0,0 @@
|
||||||
<!--<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>-->
|
|
||||||
|
|
@ -1,105 +0,0 @@
|
||||||
<!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,7 +116,8 @@
|
||||||
<el-table-column label="策略id" align="center" prop="strategyId" />
|
<el-table-column label="策略id" align="center" prop="strategyId" />
|
||||||
<el-table-column label="报文数据类型id" align="center" prop="msgTypeId" />
|
<el-table-column label="报文数据类型id" align="center" prop="msgTypeId" />
|
||||||
<el-table-column label="滑窗时间" align="center" prop="slideTime" />
|
<el-table-column label="滑窗时间" align="center" prop="slideTime" />
|
||||||
<el-table-column label="滑窗频率" align="center" prop="slideFrequency" />
|
<el-table-column label="滑窗频率" align="center" prop="slideFrequency" >
|
||||||
|
</el-table-column>>
|
||||||
<el-table-column label="最大值" align="center" prop="maxValue" />
|
<el-table-column label="最大值" align="center" prop="maxValue" />
|
||||||
<el-table-column label="最小值" align="center" prop="minValue" />
|
<el-table-column label="最小值" align="center" prop="minValue" />
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
|
|
@ -149,15 +150,21 @@
|
||||||
|
|
||||||
<!-- 添加或修改预警规则对话框 -->
|
<!-- 添加或修改预警规则对话框 -->
|
||||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
<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 ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
<el-form-item label="规则名称" prop="ruleName">
|
<el-form-item label="规则名称" prop="ruleName">
|
||||||
<el-input v-model="form.ruleName" placeholder="请输入规则名称" />
|
<el-input v-model="form.ruleName" placeholder="请输入规则名称" />
|
||||||
</el-form-item>
|
</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-form-item label="报文数据类型id" prop="msgTypeId">
|
||||||
<el-input v-model="form.msgTypeId" placeholder="请输入报文数据类型id" />
|
<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>
|
||||||
<el-form-item label="滑窗时间" prop="slideTime">
|
<el-form-item label="滑窗时间" prop="slideTime">
|
||||||
<el-input v-model="form.slideTime" placeholder="请输入滑窗时间" />
|
<el-input v-model="form.slideTime" placeholder="请输入滑窗时间" />
|
||||||
|
|
@ -181,7 +188,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { listRule, getRule, delRule, addRule, updateRule } from "/src/api/warn/rule";
|
import { listRule, getRule, delRule, addRule, updateRule , selectByTemplateId } from "/src/api/warn/rule";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Rule",
|
name: "Rule",
|
||||||
|
|
@ -221,15 +228,58 @@ export default {
|
||||||
form: {},
|
form: {},
|
||||||
// 表单校验
|
// 表单校验
|
||||||
rules: {
|
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() {
|
created() {
|
||||||
|
this.strategy = this.$route.query.strategy
|
||||||
this.getList();
|
this.getList();
|
||||||
|
this.getMessageList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
/** 根据报文模板id查询报文下拉框 */
|
||||||
|
getMessageList(){
|
||||||
|
console.log(this.strategy);
|
||||||
|
selectByTemplateId(this.strategy.templateId).then(
|
||||||
|
res=>{
|
||||||
|
this.messages = res.data
|
||||||
|
console.log(this.messages)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
},
|
||||||
|
|
||||||
/** 查询预警规则列表 */
|
/** 查询预警规则列表 */
|
||||||
getList() {
|
getList() {
|
||||||
|
this.queryParams.strategyId = this.strategy.id
|
||||||
|
this.form.strategyId = this.strategy.id
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
listRule(this.queryParams).then(response => {
|
listRule(this.queryParams).then(response => {
|
||||||
this.ruleList = response.data.rows;
|
this.ruleList = response.data.rows;
|
||||||
|
|
|
||||||
|
|
@ -17,9 +17,9 @@
|
||||||
@keyup.enter.native="handleQuery"
|
@keyup.enter.native="handleQuery"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="报文模版id" prop="msgId">
|
<el-form-item label="报文模版id" prop="templateId">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="queryParams.msgId"
|
v-model="queryParams.templateId"
|
||||||
placeholder="请输入报文模版id"
|
placeholder="请输入报文模版id"
|
||||||
clearable
|
clearable
|
||||||
@keyup.enter.native="handleQuery"
|
@keyup.enter.native="handleQuery"
|
||||||
|
|
@ -82,7 +82,14 @@
|
||||||
<el-table-column label="策略id" align="center" prop="id" />
|
<el-table-column label="策略id" align="center" prop="id" />
|
||||||
<el-table-column label="车辆类型id" align="center" prop="carTypeId" />
|
<el-table-column label="车辆类型id" align="center" prop="carTypeId" />
|
||||||
<el-table-column label="策略名称" align="center" prop="strategyName" />
|
<el-table-column label="策略名称" align="center" prop="strategyName" />
|
||||||
<el-table-column label="报文模版id" align="center" prop="msgId" />
|
<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="操作" align="center" class-name="small-padding fixed-width">
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-button
|
<el-button
|
||||||
|
|
@ -99,6 +106,11 @@
|
||||||
@click="handleDelete(scope.row)"
|
@click="handleDelete(scope.row)"
|
||||||
v-hasPermi="['warn:strategy:remove']"
|
v-hasPermi="['warn:strategy:remove']"
|
||||||
>删除</el-button>
|
>删除</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
@click="handleRule(scope.row)"
|
||||||
|
>规则配置</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
@ -113,15 +125,20 @@
|
||||||
|
|
||||||
<!-- 添加或修改预警策略对话框 -->
|
<!-- 添加或修改预警策略对话框 -->
|
||||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||||
<el-form-item label="车辆类型id" prop="carTypeId">
|
<el-form-item label="车辆类型id" prop="carTypeId">
|
||||||
<el-input v-model="form.carTypeId" placeholder="请输入车辆类型id" />
|
<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-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="策略名称" prop="strategyName">
|
<el-form-item label="策略名称" prop="strategyName">
|
||||||
<el-input v-model="form.strategyName" placeholder="请输入策略名称" />
|
<el-input v-model="form.strategyName" placeholder="请输入策略名称" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="报文模版id" prop="msgId">
|
<el-form-item label="报文模版id" prop="templateId">
|
||||||
<el-input v-model="form.msgId" placeholder="请输入报文模版id" />
|
<el-input v-model="form.templateId" readonly placeholder="请输入报文模版id" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div slot="footer" class="dialog-footer">
|
<div slot="footer" class="dialog-footer">
|
||||||
|
|
@ -133,8 +150,9 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { listStrategy, getStrategy, delStrategy, addStrategy, updateStrategy } from "/src/api/warn/strategy";
|
import { listStrategy, getStrategy, delStrategy, addStrategy, updateStrategy ,
|
||||||
|
strategyRuleList,carTypeList,catTypeId} from "/src/api/warn/strategy";
|
||||||
|
import { listRule } from '@/api/warn/rule'
|
||||||
export default {
|
export default {
|
||||||
name: "Strategy",
|
name: "Strategy",
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -163,19 +181,50 @@ export default {
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
carTypeId: null,
|
carTypeId: null,
|
||||||
strategyName: null,
|
strategyName: null,
|
||||||
msgId: null
|
templateId: null
|
||||||
},
|
},
|
||||||
// 表单参数
|
// 表单参数
|
||||||
form: {},
|
form: {},
|
||||||
// 表单校验
|
// 表单校验
|
||||||
rules: {
|
rules: {
|
||||||
|
},
|
||||||
|
WarnStrategyList:{},
|
||||||
|
carTypes:[],
|
||||||
|
carType:{
|
||||||
|
templateId:""
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getList();
|
this.getList();
|
||||||
|
this.getCarTypeList();
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
getList() {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
|
|
@ -196,7 +245,7 @@ export default {
|
||||||
id: null,
|
id: null,
|
||||||
carTypeId: null,
|
carTypeId: null,
|
||||||
strategyName: null,
|
strategyName: null,
|
||||||
msgId: null
|
templateId: null
|
||||||
};
|
};
|
||||||
this.resetForm("form");
|
this.resetForm("form");
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue