feat():策略列表跳转页面查询策略下的规则,报文下拉框,车辆类型下拉框
liuyibo
parent
56d0e1255b
commit
86ee4d5654
|
|
@ -42,3 +42,18 @@ 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,3 +42,28 @@ 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'
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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="msgTypeId" />
|
||||
<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="minValue" />
|
||||
<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>
|
||||
{{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="请输入滑窗时间" />
|
||||
|
|
@ -181,7 +188,7 @@
|
|||
</template>
|
||||
|
||||
<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 {
|
||||
name: "Rule",
|
||||
|
|
@ -221,15 +228,58 @@ 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="msgId">
|
||||
<el-form-item label="报文模版id" prop="templateId">
|
||||
<el-input
|
||||
v-model="queryParams.msgId"
|
||||
v-model="queryParams.templateId"
|
||||
placeholder="请输入报文模版id"
|
||||
clearable
|
||||
@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="carTypeId" />
|
||||
<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">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
|
|
@ -99,6 +106,11 @@
|
|||
@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>
|
||||
|
|
@ -113,15 +125,20 @@
|
|||
|
||||
<!-- 添加或修改预警策略对话框 -->
|
||||
<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-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 label="策略名称" prop="strategyName">
|
||||
<el-input v-model="form.strategyName" placeholder="请输入策略名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="报文模版id" prop="msgId">
|
||||
<el-input v-model="form.msgId" placeholder="请输入报文模版id" />
|
||||
<el-form-item label="报文模版id" prop="templateId">
|
||||
<el-input v-model="form.templateId" readonly placeholder="请输入报文模版id" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
|
|
@ -133,8 +150,9 @@
|
|||
</template>
|
||||
|
||||
<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 {
|
||||
name: "Strategy",
|
||||
data() {
|
||||
|
|
@ -163,19 +181,50 @@ export default {
|
|||
pageSize: 10,
|
||||
carTypeId: null,
|
||||
strategyName: null,
|
||||
msgId: null
|
||||
templateId: 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;
|
||||
|
|
@ -196,7 +245,7 @@ export default {
|
|||
id: null,
|
||||
carTypeId: null,
|
||||
strategyName: null,
|
||||
msgId: null
|
||||
templateId: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue