diff --git a/src/views/overview/overviewBdOffline.vue b/src/views/overview/overviewBdOffline.vue index 10f8a82..47868e7 100644 --- a/src/views/overview/overviewBdOffline.vue +++ b/src/views/overview/overviewBdOffline.vue @@ -206,7 +206,7 @@ components: { ClearTool, DrawTool, BaiduLabel, BaiduMapInfoWindow, BaiduMap, BaiduMapMarker, BaiduPointCollection, DeptSelect, SelectTree }, data() { return { - map:null, // 地图 + map: null, // 地图 drawingManager: null, // 绘制管理器 currentPolygon: null, // 当前选取图像 clearDisabled: true, // 禁用重置 @@ -248,7 +248,7 @@ count2: 5, showWellType: this.showWellType(), // 是否显示闸井类型下拉 wellTypeList: [], // 闸井类型列表 - wellTypeDict:{}, + wellTypeDict: {}, deptProps: { multiple: true, value: 'id', @@ -307,7 +307,7 @@ timeOut: '', // 3分钟无操作定时器 hasAlarm: false, // 是否有报警, showAll: false, // 是否显示全部闸井(包含报警和不报警,为false时只显示报警) - showNoDeviceWell:false,// 是否显示未装设备闸井 + showNoDeviceWell: false, // 是否显示未装设备闸井 firstAmount: false, // 是否第一次加载井数据 loading: true, // 加载按钮 alarmicon: 'static/BMap/images/alarm-well.svg', // 报警按钮 @@ -373,7 +373,7 @@ }, created() { eventBus.$on('refresh', (message) => { - if(message=='refresh'){ + if (message == 'refresh') { console.log('hear EventBus refreshAlarm') this.refreshAlarm(true) } @@ -402,7 +402,7 @@ } }, // 显示无设备的 - showNoDeviceWells(){ + showNoDeviceWells() { }, // 30s倒计时 @@ -881,129 +881,129 @@ // document.body.ontouchend = that.startTimer }, // 地图Ready回调 - mapReady({BMap,map}){ + mapReady({ BMap, map }) { const that = this this.map = map var styleOptions = { - strokeColor:"red", //边线颜色。 - fillColor:"red", //填充颜色。当参数为空时,圆形将没有填充效果。 - strokeWeight: 3, //边线的宽度,以像素为单位。 - strokeOpacity: 0.8, //边线透明度,取值范围0 - 1。 - fillOpacity: 0.6, //填充的透明度,取值范围0 - 1。 - strokeStyle: 'solid' //边线的样式,solid或dashed。 + strokeColor: 'red', // 边线颜色。 + fillColor: 'red', // 填充颜色。当参数为空时,圆形将没有填充效果。 + strokeWeight: 3, // 边线的宽度,以像素为单位。 + strokeOpacity: 0.8, // 边线透明度,取值范围0 - 1。 + fillOpacity: 0.6, // 填充的透明度,取值范围0 - 1。 + strokeStyle: 'solid' // 边线的样式,solid或dashed。 } - this.$nextTick(()=>{ + this.$nextTick(() => { this.drawingManager = new BMapLib.DrawingManager(map, { - isOpen: false, //是否开启绘制模式 - enableDrawingTool: false, //是否显示工具栏 + isOpen: false, // 是否开启绘制模式 + enableDrawingTool: false, // 是否显示工具栏 drawingToolOptions: { - anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 - offset: new BMap.Size(70, 10), //偏离值 + anchor: BMAP_ANCHOR_TOP_RIGHT, // 位置 + offset: new BMap.Size(70, 10), // 偏离值 drawingTypes: [ BMAP_DRAWING_CIRCLE, BMAP_DRAWING_POLYGON, BMAP_DRAWING_RECTANGLE - ], + ] }, - circleOptions: styleOptions, //圆的样式 - polygonOptions: styleOptions, //多边形的样式 - rectangleOptions: styleOptions //矩形的样式 + circleOptions: styleOptions, // 圆的样式 + polygonOptions: styleOptions, // 多边形的样式 + rectangleOptions: styleOptions // 矩形的样式 }) // 多边形监听器 - this.drawingManager.addEventListener("polygoncomplete", function(polygon) { + this.drawingManager.addEventListener('polygoncomplete', function(polygon) { console.log('end polygon') that.drawingManager.close() that.currentPolygon = polygon - if(that.showMarkers.length>0){ + if (that.showMarkers.length > 0) { that.judgeWell(polygon) - }else{ + } else { that.judgeAlarmWell(polygon) } }) // 矩形监听器 - this.drawingManager.addEventListener("rectanglecomplete", function(polygon) { + this.drawingManager.addEventListener('rectanglecomplete', function(polygon) { console.log('end rectangle') that.drawingManager.close() that.currentPolygon = polygon - if(that.showMarkers.length>0){ + if (that.showMarkers.length > 0) { that.judgeWell(polygon) - }else{ + } else { that.judgeAlarmWell(polygon) } - }); + }) }) - //实例化鼠标绘制工具 + // 实例化鼠标绘制工具 }, // 绘制选框 drawBox(type) { - - if(this.currentPolygon){ + if (this.currentPolygon) { this.map.removeOverlay(this.currentPolygon) } - if(type=='Polygon'){ + if (type == 'Polygon') { console.log('start polygon') this.drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON) - - }else if(type==='Rectangle'){ + } else if (type === 'Rectangle') { console.log('start rectangle') this.drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE) } this.drawingManager.open() this.clearDisabled = false }, - judgeWell(polygon){ + judgeWell(polygon) { let count = 0 const points = polygon.getPath() const poly = new BMap.Polygon(points) const typeCount = {} - debugger - for(const item of this.showMarkers){ + console.log('beginHere=============') + for (const item of this.showMarkers) { var ppoint = new BMap.Point(parseFloat(item.position.lng), parseFloat(item.position.lat)) - var result = BMapLib.GeoUtils.isPointInPolygon(ppoint, poly); - if(result){ - if(item.wellType && typeof(typeCount[item.wellType])!='undefined'){ - typeCount[item.wellType] ++ - }else if(item.wellType){ + var result = BMapLib.GeoUtils.isPointInPolygon(ppoint, poly) + if (result) { + console.log(item.wellId, item.wellCode, parseFloat(item.position.lng), parseFloat(item.position.lat)) + if (item.wellType && typeof (typeCount[item.wellType]) !== 'undefined') { + typeCount[item.wellType]++ + } else if (item.wellType) { typeCount[item.wellType] = 1 } count++ } } + console.log('overHere=============') let typeStr = '其中包含' let typeCountList = [] - let typeStrList = [] + const typeStrList = [] // 生成井类型-数量对象数组 - for(const key in typeCount){ - typeCountList.push({type:this.wellTypeDict[key],value:typeCount[key]}) + for (const key in typeCount) { + typeCountList.push({ type: this.wellTypeDict[key], value: typeCount[key] }) // typeStrList.push(this.wellTypeDict[key]+typeCount[key]+'个') } - //按数量排序 - typeCountList = typeCountList.sort((x,y)=>y.value-x.value) + // 按数量排序 + typeCountList = typeCountList.sort((x, y) => y.value - x.value) // 转为字符串数组 - for(const item of typeCountList){ + for (const item of typeCountList) { // typeCountList.push({type:this.wellTypeDict[key],value:typeCount[key]}) - typeStrList.push(item.type+item.value+'个') + typeStrList.push(item.type + item.value + '个') } // 组装成字符串 - typeStr += typeStrList.join(';')+'。' - const finalStr = '该区域内有'+count+'个井。'+(count>0?typeStr:'') - this.$alert(finalStr,'区域统计', { + typeStr += typeStrList.join(';') + '。' + const finalStr = '该区域内有' + count + '个井。' + (count > 0 ? typeStr : '') + this.$alert(finalStr, '区域统计', { confirmButtonText: '确定' }) }, - judgeAlarmWell(polygon){ + judgeAlarmWell(polygon) { let count = 0 const points = polygon.getPath() const poly = new BMap.Polygon(points) const typeCount = {} - for(const item of this.alarmWells){ + for (const item of this.alarmWells) { var ppoint = new BMap.Point(parseFloat(item.position.lng), parseFloat(item.position.lat)) - var result = BMapLib.GeoUtils.isPointInPolygon(ppoint, poly); - if(result){ + var result = BMapLib.GeoUtils.isPointInPolygon(ppoint, poly) + if (result) { debugger - if(item.wellType && typeof(typeCount[item.wellType])!='undefined'){ - typeCount[item.wellType] ++ - }else if(item.wellType){ + if (item.wellType && typeof (typeCount[item.wellType]) !== 'undefined') { + typeCount[item.wellType]++ + } else if (item.wellType) { typeCount[item.wellType] = 1 } count++ @@ -1011,30 +1011,30 @@ } let typeStr = '其中包含' let typeCountList = [] - let typeStrList = [] + const typeStrList = [] // 生成井类型-数量对象数组 - for(const key in typeCount){ - typeCountList.push({type:this.wellTypeDict[key],value:typeCount[key]}) + for (const key in typeCount) { + typeCountList.push({ type: this.wellTypeDict[key], value: typeCount[key] }) // typeStrList.push(this.wellTypeDict[key]+typeCount[key]+'个') } - //按数量排序 - typeCountList = typeCountList.sort((x,y)=>y.value-x.value) + // 按数量排序 + typeCountList = typeCountList.sort((x, y) => y.value - x.value) // 转为字符串数组 - for(const item of typeCountList){ + for (const item of typeCountList) { // typeCountList.push({type:this.wellTypeDict[key],value:typeCount[key]}) - typeStrList.push(item.type+item.value+'个') + typeStrList.push(item.type + item.value + '个') } // 组装成字符串 - typeStr += typeStrList.join(';')+'。' - const finalStr = '该区域内有'+count+'个井。'+(count>0?typeStr:'') - this.$alert(finalStr,'区域统计', { + typeStr += typeStrList.join(';') + '。' + const finalStr = '该区域内有' + count + '个井。' + (count > 0 ? typeStr : '') + this.$alert(finalStr, '区域统计', { confirmButtonText: '确定' }) }, - drawDelete(){ + drawDelete() { // if(this.drawingManager.getDrawingMode()){ this.drawingManager.close() - if(this.currentPolygon){ + if (this.currentPolygon) { this.map.removeOverlay(this.currentPolygon) this.clearDisabled = true }