diff --git a/config/dev.env.js b/config/dev.env.js index 251ba26..7006844 100644 --- a/config/dev.env.js +++ b/config/dev.env.js @@ -10,7 +10,7 @@ // BASE_API: '"http://106.74.146.218:2031"' // BASE_API: '"http://192.168.0.212:8083"' // BASE_API: '"http://192.168.8.201:8083/smartwell"' - BASE_API: '"http://111.198.10.15:11707/smartwell"' + BASE_API: '"http://192.168.8.101:8083"' // BASE_API: '"http://139.198.16.38:8095/smartcity"' // BASE_API: '"http://10.9.39.8:8083"' // BASE_API: '"http://192.168.0.244:8083"' diff --git a/config/dev.env.js b/config/dev.env.js index 251ba26..7006844 100644 --- a/config/dev.env.js +++ b/config/dev.env.js @@ -10,7 +10,7 @@ // BASE_API: '"http://106.74.146.218:2031"' // BASE_API: '"http://192.168.0.212:8083"' // BASE_API: '"http://192.168.8.201:8083/smartwell"' - BASE_API: '"http://111.198.10.15:11707/smartwell"' + BASE_API: '"http://192.168.8.101:8083"' // BASE_API: '"http://139.198.16.38:8095/smartcity"' // BASE_API: '"http://10.9.39.8:8083"' // BASE_API: '"http://192.168.0.244:8083"' diff --git a/src/views/overview/overviewBdOffline.vue b/src/views/overview/overviewBdOffline.vue index 7010ad5..23ef513 100644 --- a/src/views/overview/overviewBdOffline.vue +++ b/src/views/overview/overviewBdOffline.vue @@ -78,7 +78,29 @@
- + +
+ + +
显示全部闸井 显示未装设备闸井 + 显示已装设备闸井
@@ -206,7 +229,8 @@ components: { ClearTool, DrawTool, BaiduLabel, BaiduMapInfoWindow, BaiduMap, BaiduMapMarker, BaiduPointCollection, DeptSelect, SelectTree }, data() { return { - map:null, // 地图 + pointColor: '#66CDAA', + map: null, // 地图 drawingManager: null, // 绘制管理器 currentPolygon: null, // 当前选取图像 clearDisabled: true, // 禁用重置 @@ -248,7 +272,7 @@ count2: 5, showWellType: this.showWellType(), // 是否显示闸井类型下拉 wellTypeList: [], // 闸井类型列表 - wellTypeDict:{}, + wellTypeDict: {}, deptProps: { multiple: true, value: 'id', @@ -307,7 +331,8 @@ timeOut: '', // 3分钟无操作定时器 hasAlarm: false, // 是否有报警, showAll: false, // 是否显示全部闸井（包含报警和不报警，为false时只显示报警） - showNoDeviceWell:false,// 是否显示未装设备闸井 + showNoDeviceWell: false, // 是否显示未装设备闸井 + showDeviceWell: false, // 是否显示已经装设备闸井 firstAmount: false, // 是否第一次加载井数据 loading: true, // 加载按钮 alarmicon: 'static/BMap/images/alarm-well.svg', // 报警按钮 @@ -362,7 +387,12 @@ } }, watch: { - + showAll(val) { + if (val) { + this.showDeviceWell = false + this.showNoDeviceWell = false + } + }, // 监控关键字，如果置空认为清空查询 keywords(val) { if (val === '') { @@ -386,17 +416,38 @@ // 点击显示全部闸井 showAllWells(val) { if (val) { // 显示全部 + this.pointColor = '#66CDAA' this.listQuery.isAlarm = '0' this.zoom = 15 - this.filterAlarm(false) + this.filterAlarm(false, '') } else { // 仅显示报警 this.listQuery.isAlarm = '1' - this.filterAlarm(true) + this.filterAlarm(true, '') } }, // 显示无设备的 - showNoDeviceWells(){ - + showNoDeviceWells() { + if (this.showNoDeviceWell) { + this.pointColor = '#f1c353' + this.showAll = false + this.showDeviceWell = false + this.zoom = 15 + this.filterAlarm('', false) + } else { + this.showMarkers = [] + } + }, + // 显示有设备的 + showDeviceWells() { + if (this.showDeviceWell) { + this.pointColor = '#66CDAA' + this.showAll = false + this.showNoDeviceWell = false + this.zoom = 15 + this.filterAlarm('', true) + } else { + this.showMarkers = [] + } }, // 30s倒计时 countDown() { @@ -498,9 +549,9 @@ this.listQuery.deptid = [] this.listQuery.wellType = '' if (this.showAll) { - this.filterAlarm(false) + this.filterAlarm(false, '') } else { - this.filterAlarm(true) + this.filterAlarm(true, '') } }, // 获取闸井类型 @@ -633,33 +684,38 @@ } }, // 报警筛选 - filterAlarm(isAlarm) { + filterAlarm(isAlarm, isDevice) { + console.log(this.markers.length) // 清除筛选、搜索条件 this.listQuery.wellType = '' this.listQuery.deptid = [] this.keywords = '' this.searchWells = [] const hideWellCodes = [] - if (isAlarm) { - this.showMarkers = [] - // const showMarkers = this.markers.filter(function(marker) { - // if (marker.wellStatus === 'alarm') { - // return marker - // } else { - // hideWellIds.push(marker.wellId) - // hideWellCodes.push(marker.wellCode) - // } - // }) - for (const alarmWell of this.alarmWells) { - alarmWell.visible = true - } - // this.hideWellCodes = hideWellCodes - } else { + if (isAlarm === false) { // 全部 for (const alarmWell of this.alarmWells) { alarmWell.visible = true } this.hideWellCodes = hideWellCodes this.showMarkers = this.markers + } else { // 报警 +‘’ + this.showMarkers = [] + for (const alarmWell of this.alarmWells) { + alarmWell.visible = true + } + if (isDevice === true) { + this.showMarkers = this.markers.filter(function(marker) { + if (marker.wellFlag !== '0') { + return marker + } + }) + } else if (isDevice === false) { + this.showMarkers = this.markers.filter(function(marker) { + if (marker.wellFlag === '0') { + return marker + } + }) + } } }, // 获取报警的闸井列表 @@ -689,6 +745,7 @@ lat: parseFloat(well.latBaidu), positionInfo: well.position, wellType: well.wellType, + wellFlag: well.wellFlag, wellTypeName: well.wellTypeName, deptName: well.deptName, deptid: well.deptid, @@ -735,6 +792,7 @@ lat: parseFloat(well.latBaidu), positionInfo: well.position, wellType: well.wellType, + wellFlag: well.wellFlag, deptid: well.deptid, bfzt: well.bfzt, // icon: this.icons[well.wellType], @@ -912,7 +970,7 @@ window.clearTimeout(that.timeOut) that.timeOut = window.setTimeout(function() { console.log('startTimer') - that.filterAlarm(true) + that.filterAlarm(true, '') // that.countDownCenter() }, 1000 * 60 * 1) }, @@ -928,89 +986,88 @@ // 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 = {} + console.log(this.showMarkers.length) debugger - for(const item of this.showMarkers){ + 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) { + if (item.wellType && typeof (typeCount[item.wellType]) !== 'undefined') { + typeCount[item.wellType]++ + } else if (item.wellType) { typeCount[item.wellType] = 1 } count++ @@ -1018,39 +1075,39 @@ } 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++ @@ -1058,30 +1115,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 } @@ -1092,141 +1149,141 @@